/* =========================================================================
   Mandar Bhoyar / Motifs
   The storytelling layer. site.css sets the argument in type; this file
   gives the argument things to look at.

   The vocabulary is drawn from one place rather than assembled from
   several: the cusped arch, the jaali screen, the charbagh garden plan,
   pietra dura stone inlay, and the jharokha overlook window. Each is used
   where its actual architectural job matches the job on the page. A
   doorway marks a threshold. A screen defers what does not need to be
   shouted. A garden plan divides a whole into its quadrants. An inlay sets
   one precious thing into a plain ground.
   ========================================================================= */

/* =========================================================================
   GLYPHS
   A drawn vocabulary, not an icon-library import. Every mark is a
   1.5-weight line figure on a 24 grid, and where a form had an obvious
   Indian ancestor it was used: the eye is a badam almond, the balance is a
   tarazu, the network is a chakra, the star is a sitara, and the doorway
   and map pin are the same cusped arch the site is built from.

   Painted through a mask rather than carried as colour, so a glyph
   inherits the text colour around it and re-tints with the theme.
   ========================================================================= */

.g {
  display: inline-block;
  width: 1em;
  height: 1em;
  flex: none;
  background-color: currentColor;
  -webkit-mask: var(--g) center / contain no-repeat;
  mask: var(--g) center / contain no-repeat;
}

/* --- Methods and instruments ------------------------------------------- */

.g--survey {
  --g: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 21V9c0-3.3 3.1-6 7-6s7 2.7 7 6v12z'/%3E%3Cpath d='M8.5 12h7M8.5 15.5h7M8.5 19h4'/%3E%3C/svg%3E");
}

.g--interview {
  --g: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 12.5V7a3 3 0 0 1 3-3h3a3 3 0 0 1 3 3v5.5H6l-3 3z'/%3E%3Cpath d='M21 19v-5a3 3 0 0 0-3-3h-3a3 3 0 0 0-3 3v5h6l3 3z'/%3E%3C/svg%3E");
}

.g--observe {
  --g: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 12s4-6.5 10-6.5S22 12 22 12s-4 6.5-10 6.5S2 12 2 12z'/%3E%3Ccircle cx='12' cy='12' r='2.6'/%3E%3C/svg%3E");
}

.g--affinity {
  --g: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.5 4h6.2v6.2H3.5zM14.3 6.6h6.2v6.2h-6.2zM7.8 14.3H14v6.2H7.8z'/%3E%3Cpath d='M9.7 8h4.6M14.3 12.3l-3 2'/%3E%3C/svg%3E");
}

.g--network {
  --g: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='2.5'/%3E%3Ccircle cx='12' cy='3.9' r='1.7'/%3E%3Ccircle cx='19.6' cy='9.5' r='1.7'/%3E%3Ccircle cx='16.7' cy='18.5' r='1.7'/%3E%3Ccircle cx='7.3' cy='18.5' r='1.7'/%3E%3Ccircle cx='4.4' cy='9.5' r='1.7'/%3E%3Cpath d='M12 5.6v3.9M14.3 10.6l3.6-.4M13.4 14.2l2.2 2.8M10.6 14.2l-2.2 2.8M9.7 10.6l-3.6-.4'/%3E%3C/svg%3E");
}

.g--test {
  --g: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2.5 4.5h19v11h-19zM8 20.5h8M12 15.5v5'/%3E%3Cpath d='M10 7.4l5.2 4.1-2.3.5 1 2.3-1.5.6-1-2.3L10 14z'/%3E%3C/svg%3E");
}

.g--balance {
  --g: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 7h16M12 4.6v14.6M8.5 19.2h7'/%3E%3Cpath d='M1.6 7 4 11.6 6.4 7M17.6 7 20 11.6 22.4 7'/%3E%3C/svg%3E");
}

.g--tag {
  --g: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12.6 3H5.5A2.5 2.5 0 0 0 3 5.5v7.1c0 .5.2 1 .6 1.4l7.4 7.4c.8.8 2 .8 2.8 0l7.1-7.1c.8-.8.8-2 0-2.8L14 3.6c-.4-.4-.9-.6-1.4-.6z'/%3E%3Ccircle cx='7.6' cy='7.6' r='1.4'/%3E%3C/svg%3E");
}

.g--link {
  --g: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='8.6' cy='12' r='5.2'/%3E%3Ccircle cx='15.4' cy='12' r='5.2'/%3E%3C/svg%3E");
}

.g--transcript {
  --g: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 2.5h9l5 5v14H5zM14 2.5v5h5'/%3E%3Cpath d='M8 12h8M8 15.5h8M8 19h5'/%3E%3C/svg%3E");
}

.g--sitara {
  --g: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 2.5C13 8.5 15.5 11 21.5 12 15.5 13 13 15.5 12 21.5 11 15.5 8.5 13 2.5 12 8.5 11 11 8.5 12 2.5z'/%3E%3C/svg%3E");
}

.g--sitara-8 {
  --g: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5.05 5.05h13.9v13.9H5.05zM12 2 22 12 12 22 2 12z'/%3E%3C/svg%3E");
}

.g--clock {
  --g: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 6.4V12l4.2 2.6'/%3E%3C/svg%3E");
}

.g--people {
  --g: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='7.4' r='3.1'/%3E%3Cpath d='M6.6 19.6c0-3 2.4-5.1 5.4-5.1s5.4 2.1 5.4 5.1'/%3E%3Ccircle cx='4.3' cy='10.4' r='2.1'/%3E%3Ccircle cx='19.7' cy='10.4' r='2.1'/%3E%3Cpath d='M1.6 18.6c0-2 1.1-3.3 2.7-3.4M22.4 18.6c0-2-1.1-3.3-2.7-3.4'/%3E%3C/svg%3E");
}

.g--dossier {
  --g: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 6.2C10.8 4.6 8.6 3.8 5 3.8v14c3.6 0 5.8.8 7 2.4 1.2-1.6 3.4-2.4 7-2.4v-14c-3.6 0-5.8.8-7 2.4z'/%3E%3Cpath d='M12 6.2v14'/%3E%3C/svg%3E");
}

.g--route {
  --g: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='5.5' cy='5.5' r='2.6'/%3E%3Ccircle cx='18.5' cy='18.5' r='2.6'/%3E%3Cpath d='M5.5 8.1v6.2a3.7 3.7 0 0 0 3.7 3.7h6.7'/%3E%3C/svg%3E");
}

.g--flag {
  --g: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5.5 21.5V3'/%3E%3Cpath d='M5.5 4.2h13l-2.7 4.3 2.7 4.3h-13z'/%3E%3C/svg%3E");
}

/* --- Project marks ------------------------------------------------------ */

.g--pin {
  --g: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 21.6s7-7.7 7-12.5a7 7 0 1 0-14 0c0 4.8 7 12.5 7 12.5z'/%3E%3Ccircle cx='12' cy='9' r='2.6'/%3E%3C/svg%3E");
}

.g--device {
  --g: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 5h12v8.6H3zM1.4 16.6h15.2'/%3E%3Cpath d='M17.8 8h4.8v11.4h-4.8z'/%3E%3Cpath d='M19.8 17.4h.8'/%3E%3C/svg%3E");
}

.g--leaf {
  --g: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20.6 3.4C10 3.4 3.4 8.5 3.4 15a5.6 5.6 0 0 0 5.6 5.6c6.6 0 11.6-6.6 11.6-17.2z'/%3E%3Cpath d='M17 7C11.4 9 7.4 13.6 6.4 19.2'/%3E%3C/svg%3E");
}

.g--cycle {
  --g: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20.4 12a8.4 8.4 0 1 1-2.5-6'/%3E%3Cpath d='M18.2 1.9v4.4h-4.4'/%3E%3C/svg%3E");
}

.g--key {
  --g: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='7.8' cy='7.8' r='4.4'/%3E%3Cpath d='M10.9 10.9 20.9 20.9M15.9 15.9 18.5 13.3M18.4 18.4 21 15.8'/%3E%3C/svg%3E");
}

.g--door {
  --g: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4.5 21.5V11c0-3.6 1.8-6 4.2-6.8 1.1-.4 1.1-1.4 0-1.9 2.1-.9 6.5-.9 8.6 0-1.1.5-1.1 1.5 0 1.9 2.4.8 4.2 3.2 4.2 6.8v10.5'/%3E%3Ccircle cx='16.6' cy='13.4' r='1'/%3E%3C/svg%3E");
}

.g--signal {
  --g: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='18.4' r='1.9'/%3E%3Cpath d='M8.2 14.6a5.4 5.4 0 0 1 7.6 0M5.4 11.8a9.4 9.4 0 0 1 13.2 0M2.6 9a13.4 13.4 0 0 1 18.8 0'/%3E%3C/svg%3E");
}

.g--car {
  --g: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2.6 16.4v-3.2l2-5.3c.3-.9 1-1.4 1.9-1.4h11c.9 0 1.6.5 1.9 1.4l2 5.3v3.2z'/%3E%3Cpath d='M4.6 13.2h14.8'/%3E%3Ccircle cx='6.6' cy='16.4' r='2'/%3E%3Ccircle cx='17.4' cy='16.4' r='2'/%3E%3C/svg%3E");
}

.g--chakra {
  --g: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Ccircle cx='12' cy='12' r='2.6'/%3E%3Cpath d='M12 3v6.4M12 14.6V21M3 12h6.4M14.6 12H21M5.6 5.6l4.6 4.6M13.8 13.8l4.6 4.6M18.4 5.6l-4.6 4.6M10.2 13.8l-4.6 4.6'/%3E%3C/svg%3E");
}

.g--shield {
  --g: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 21.4c5.5-2.4 7.6-6.4 7.6-11.1V5.1L12 2.4 4.4 5.1v5.2c0 4.7 2.1 8.7 7.6 11.1z'/%3E%3Cpath d='M9 11.8l2.2 2.2 4-4.2'/%3E%3C/svg%3E");
}

.g--coin {
  --g: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M9 8.4h6M9 11.4h6M13.6 8.4c1.6 0 1.6 3 0 3H9l4.6 4.6'/%3E%3C/svg%3E");
}

.g--lotus {
  --g: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 20.4c-4.7 0-8.4-2.4-8.4-5.4 0-1 .4-1.9 1.1-2.7-1.5-2.5-.7-5.2 1-6.1 1.2-.7 2.7-.3 3.7.7C10.1 4.5 11 3 12 3s1.9 1.5 2.6 3.9c1-1 2.5-1.4 3.7-.7 1.7.9 2.5 3.6 1 6.1.7.8 1.1 1.7 1.1 2.7 0 3-3.7 5.4-8.4 5.4z'/%3E%3Cpath d='M12 20.4V6.9'/%3E%3C/svg%3E");
}

/* =========================================================================
   THRESHOLD
   A section heading on a case study is not a label, it is a doorway. Each
   carries a cusped arch struck in brass with the mark of what lies through
   it, so a reader feels a new movement beginning rather than reading that
   one has.
   ========================================================================= */

.threshold {
  display: grid;
  grid-template-columns: auto auto minmax(0, 1fr);
  align-items: center;
  gap: 0 clamp(0.85rem, 2vw, 1.25rem);
  margin-bottom: clamp(1.5rem, 3.5vw, 2.25rem);
}

.threshold::after {
  content: '';
  height: 1px;
  background: linear-gradient(90deg, var(--rule-strong), var(--rule) 34%, transparent);
}

.threshold__arch {
  position: relative;
  width: 2.6rem;
  height: 3.1rem;
  display: grid;
  place-items: center;
}

/* The arch is painted brass through a mask, so it re-tints with the theme
   rather than needing a second copy for the night palette. */
.threshold__arch::before {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--brass);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 44 52' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.2 49V29.5c0-7.6 2.8-13.2 7.7-16 3.8-2.2 6.6-5 8.4-8.6 1-2 1.9-3 2.7-3s1.7 1 2.7 3c1.8 3.6 4.6 6.4 8.4 8.6 4.9 2.8 7.7 8.4 7.7 16V49'/%3E%3Cpath d='M1 49.8h42'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 44 52' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.2 49V29.5c0-7.6 2.8-13.2 7.7-16 3.8-2.2 6.6-5 8.4-8.6 1-2 1.9-3 2.7-3s1.7 1 2.7 3c1.8 3.6 4.6 6.4 8.4 8.6 4.9 2.8 7.7 8.4 7.7 16V49'/%3E%3Cpath d='M1 49.8h42'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* The onion profile narrows toward the crown, so the mark sits below the
   centre of the box rather than in it. */
.threshold__arch .g {
  font-size: 1.25rem;
  color: var(--rust-deep);
  margin-top: 0.7rem;
}

.threshold__name {
  font: 500 var(--t--2) / 1.35 var(--mono);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-3);
}

/* On a narrow screen the arch is the cue that survives; the rule only
   crowds it. */
@media (max-width: 30rem) {
  .threshold {
    grid-template-columns: auto minmax(0, 1fr);
  }

  .threshold::after {
    display: none;
  }
}

/* =========================================================================
   SEAL
   Pietra dura, the stone inlay: a measurement set into an eight-point
   sitara so the number is an object on the page rather than a run of text.
   Once per section at most. Past that it stops being emphasis.
   ========================================================================= */

/* An eight-point star has a usable interior of roughly 62% of its width. The
   content is held to that square so a value can never break the inlay it is
   set into. */
.seal {
  --s: 8.5rem;
  --inner: calc(var(--s) * 0.62);
  position: relative;
  flex: none;
  width: var(--s);
  height: var(--s);
  display: grid;
  place-content: center;
  text-align: center;
  isolation: isolate;
}

.seal::before,
.seal::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
}

/* Two squares, one rotated forty-five degrees: the star is constructed the
   way the real inlay is cut. */
.seal::before {
  background: var(--rust-wash);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M14.6 14.6h70.8v70.8H14.6z'/%3E%3Cpath d='M50 2 98 50 50 98 2 50z'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M14.6 14.6h70.8v70.8H14.6z'/%3E%3Cpath d='M50 2 98 50 50 98 2 50z'/%3E%3C/svg%3E") center / contain no-repeat;
}

.seal::after {
  background: var(--brass);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' fill='none' stroke='%23000' stroke-width='1.4' stroke-linejoin='round'%3E%3Cpath d='M14.6 14.6h70.8v70.8H14.6z'/%3E%3Cpath d='M50 2 98 50 50 98 2 50z'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' fill='none' stroke='%23000' stroke-width='1.4' stroke-linejoin='round'%3E%3Cpath d='M14.6 14.6h70.8v70.8H14.6z'/%3E%3Cpath d='M50 2 98 50 50 98 2 50z'/%3E%3C/svg%3E") center / contain no-repeat;
}

.seal b {
  display: block;
  width: var(--inner);
  font: 400 clamp(1.3rem, 3.1vw, 1.75rem) / 1 var(--display);
  font-optical-sizing: auto;
  letter-spacing: -0.032em;
  color: var(--rust-deep);
  font-variant-numeric: lining-nums tabular-nums;
}

.seal small {
  display: block;
  width: var(--inner);
  margin-top: 0.25rem;
  font: 400 0.8125rem / 1.25 var(--mono);
  letter-spacing: 0.04em;
  color: var(--ink-2);
}

.seal--sm {
  --s: 5.75rem;
}

.seal--sm b {
  font-size: var(--t-0);
}

/* =========================================================================
   VERDICT
   The answer, given before the evidence that produced it. One per section
   at most, and only where the section genuinely resolves to one sentence.
   ========================================================================= */

.verdict {
  display: flex;
  align-items: center;
  gap: clamp(1.25rem, 3.5vw, 2.25rem);
  padding-block: clamp(1.25rem, 3vw, 1.75rem);
  border-block: 1px solid var(--rule);
  margin-block: clamp(1.5rem, 4vw, 2.25rem);
}

.verdict__say {
  font-family: var(--display);
  font-optical-sizing: auto;
  font-size: clamp(1.3rem, 2.9vw, 1.9rem);
  line-height: 1.22;
  letter-spacing: -0.015em;
  color: var(--ink);
  max-width: 36ch;
  text-wrap: pretty;
  margin: 0;
}

.verdict__say em {
  font-style: italic;
  color: var(--rust-deep);
}

.verdict__say small {
  display: block;
  margin-top: 0.85rem;
  font: 400 var(--t--1) / 1.55 var(--sans);
  letter-spacing: 0;
  color: var(--ink-2);
  max-width: 56ch;
}

@media (max-width: 34rem) {
  .verdict {
    flex-direction: column;
    align-items: flex-start;
    gap: 1.25rem;
  }
}

/* =========================================================================
   PARDAH
   The screen. Detail that is real and recorded but does not need to be in
   the reader's face sits behind a jaali they can move aside. Closed, it
   states exactly what is behind it, so nothing is hidden, only deferred.
   ========================================================================= */

.pardah {
  margin-top: clamp(1.5rem, 3.5vw, 2rem);
  border-block: 1px solid var(--brass-line);
  background: var(--paper-sunk);
}

.pardah + .pardah {
  margin-top: -1px;
}

.pardah__sum {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.2rem 1rem;
  padding: 1rem clamp(0.9rem, 2.5vw, 1.35rem);
  cursor: pointer;
  list-style: none;
  background-image: radial-gradient(circle at 0 0, transparent 10px, var(--jaali) 10px 11px, transparent 11.5px),
    radial-gradient(circle at 100% 0, transparent 10px, var(--jaali) 10px 11px, transparent 11.5px),
    radial-gradient(circle at 0 100%, transparent 10px, var(--jaali) 10px 11px, transparent 11.5px),
    radial-gradient(circle at 100% 100%, transparent 10px, var(--jaali) 10px 11px, transparent 11.5px),
    radial-gradient(circle at 50% 50%, transparent 10px, var(--jaali) 10px 11px, transparent 11.5px);
  background-size: 30px 30px;
  transition: background-color 200ms ease;
}

.pardah__sum::-webkit-details-marker {
  display: none;
}

.pardah__sum::marker {
  content: '';
}

@media (hover: hover) and (pointer: fine) {
  .pardah__sum:hover {
    background-color: var(--paper-deep);
  }
}

.pardah__sum > .g {
  grid-row: 1 / span 2;
  font-size: 1.15rem;
  color: var(--rust-deep);
}

.pardah__title {
  grid-column: 2;
  font: 600 var(--t-0) / 1.35 var(--sans);
  color: var(--ink);
}

.pardah__meta {
  grid-column: 2;
  font: 400 var(--t--2) / 1.4 var(--mono);
  color: var(--ink-3);
}

/* A gate leaf that swings: two bars that resolve into one when open. */
.pardah__cue {
  grid-column: 3;
  grid-row: 1 / span 2;
  position: relative;
  width: 1.6rem;
  height: 1.6rem;
  border: 1px solid var(--rule-strong);
  border-radius: 2px;
  background: var(--paper);
}

.pardah__cue::before,
.pardah__cue::after {
  content: '';
  position: absolute;
  inset: calc(50% - 0.75px) 24% auto;
  height: 1.5px;
  background: var(--rust-deep);
  transform-origin: center;
  transition: transform 280ms var(--ease-out);
}

.pardah__cue::after {
  transform: rotate(90deg);
}

.pardah[open] .pardah__cue::after {
  transform: rotate(0deg);
}

.pardah[open] .pardah__sum {
  background-image: none;
  border-bottom: 1px solid var(--rule);
}

.pardah__body {
  padding: clamp(1.25rem, 3vw, 1.75rem) clamp(0.9rem, 2.5vw, 1.35rem)
    clamp(1.5rem, 3.5vw, 2rem);
  background: var(--paper);
}

.pardah__body > :first-child,
.pardah__body .figure:first-child,
.pardah__body .matrix,
.pardah__body .tenets,
.pardah__body .gates,
.pardah__body .ranked {
  margin-top: 0;
}

/* Animate the height only where the browser can interpolate to auto.
   Everywhere else the panel simply appears, which is the correct fallback. */
@supports (interpolate-size: allow-keywords) {
  @media (prefers-reduced-motion: no-preference) {
    :root {
      interpolate-size: allow-keywords;
    }

    .pardah {
      height: auto;
      overflow: clip;
      transition: height 400ms var(--ease-out);
    }

    .pardah::details-content {
      opacity: 1;
      transition: content-visibility 400ms allow-discrete, opacity 320ms var(--ease-out);
    }

    .pardah:not([open])::details-content {
      opacity: 0;
    }
  }
}

/* =========================================================================
   CHARBAGH
   The fourfold garden: two channels crossing at a tank. Study parameters
   are laid into the quadrants, so the shape of a study is legible before a
   single label has been read.
   ========================================================================= */

.charbagh {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  margin-top: clamp(1.75rem, 4vw, 2.5rem);
  border: 1px solid var(--rule-strong);
  background-color: var(--paper-sunk);
  background-image: radial-gradient(circle at 0 0, transparent 10px, var(--jaali) 10px 11px, transparent 11.5px),
    radial-gradient(circle at 100% 0, transparent 10px, var(--jaali) 10px 11px, transparent 11.5px),
    radial-gradient(circle at 0 100%, transparent 10px, var(--jaali) 10px 11px, transparent 11.5px),
    radial-gradient(circle at 100% 100%, transparent 10px, var(--jaali) 10px 11px, transparent 11.5px),
    radial-gradient(circle at 50% 50%, transparent 10px, var(--jaali) 10px 11px, transparent 11.5px);
  background-size: 30px 30px;
  box-shadow: 3px 3px 0 var(--carve-shadow);
}

/* The two water channels. */
.charbagh::before,
.charbagh::after {
  content: '';
  position: absolute;
  background: var(--brass-line);
  pointer-events: none;
}

.charbagh::before {
  top: 7%;
  bottom: 7%;
  left: 50%;
  width: 1px;
}

.charbagh::after {
  left: 6%;
  right: 6%;
  top: 50%;
  height: 1px;
}

.charbagh__plot {
  padding: clamp(1.15rem, 3vw, 1.6rem) clamp(1.05rem, 2.5vw, 1.5rem);
  display: grid;
  align-content: start;
  gap: 0.45rem;
  min-width: 0;
}

.charbagh__label {
  display: flex;
  align-items: center;
  gap: 0.5em;
  font: 500 var(--t--2) / 1 var(--mono);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-3);
}

.charbagh__label .g {
  font-size: 1rem;
  color: var(--rust-deep);
}

.charbagh__value {
  margin: 0;
  font-size: var(--t--1);
  line-height: 1.45;
  color: var(--ink-2);
  text-wrap: pretty;
}

.charbagh__value b {
  display: block;
  font: 400 var(--t-3) / 1 var(--display);
  font-optical-sizing: auto;
  letter-spacing: -0.026em;
  color: var(--ink);
  font-variant-numeric: lining-nums tabular-nums;
  margin-bottom: 0.2rem;
}

/* The central tank, an eight-point star where the channels meet. */
.charbagh__hauz {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 1.5rem;
  height: 1.5rem;
  transform: translate(-50%, -50%);
  background: var(--paper);
  pointer-events: none;
}

.charbagh__hauz::before {
  content: '';
  position: absolute;
  inset: 0.15rem;
  background: var(--brass);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M14.6 14.6h70.8v70.8H14.6z'/%3E%3Cpath d='M50 2 98 50 50 98 2 50z'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M14.6 14.6h70.8v70.8H14.6z'/%3E%3Cpath d='M50 2 98 50 50 98 2 50z'/%3E%3C/svg%3E") center / contain no-repeat;
}

@media (max-width: 44rem) {
  .charbagh {
    grid-template-columns: minmax(0, 1fr);
  }

  .charbagh::after,
  .charbagh__hauz {
    display: none;
  }

  .charbagh::before {
    left: 1.15rem;
  }

  .charbagh__plot {
    padding-left: 2.6rem;
  }

  .charbagh__value b {
    font-size: var(--t-2);
  }
}

/* =========================================================================
   JHAROKHA
   The overlook window. A real photograph set behind the same cusped arch
   the site is built from, so evidence arrives framed as evidence rather
   than dropped in as a banner.
   ========================================================================= */

.jharokha {
  position: relative;
  margin-top: clamp(1.75rem, 4vw, 2.5rem);
}

.jharokha__aperture {
  position: relative;
  aspect-ratio: var(--ap, 5 / 3);
}

/* The mask lives on its own layer. Putting it on the wrapper would clip the
   brass outline, which sits exactly on the mask edge. */
.jharokha__cut {
  position: absolute;
  inset: 0;
  overflow: hidden;
  background: var(--paper-deep);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 180' preserveAspectRatio='none'%3E%3Cpath d='M4 180V62A66 66 0 0 1 62 40A64 64 0 0 1 120 26A38 38 0 0 1 150 19A38 38 0 0 1 180 26A64 64 0 0 1 238 40A66 66 0 0 1 296 62v118z'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 180' preserveAspectRatio='none'%3E%3Cpath d='M4 180V62A66 66 0 0 1 62 40A64 64 0 0 1 120 26A38 38 0 0 1 150 19A38 38 0 0 1 180 26A64 64 0 0 1 238 40A66 66 0 0 1 296 62v118z'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
}

.jharokha__cut img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--focus, center);
}

.jharokha__line {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.jharokha__line path {
  fill: none;
  stroke: var(--brass);
  stroke-width: 1.4;
  vector-effect: non-scaling-stroke;
}

.jharokha figcaption {
  margin-top: 0.75rem;
  font: 400 var(--t--2) / 1.55 var(--mono);
  color: var(--ink-3);
  max-width: 60ch;
}

/* Carrying text across the photo makes the photo the ground rather than the
   subject, so it is desaturated and washed toward the page colour first. */
/* The text has to clear 4.5:1 over whatever the photograph happens to be doing
   underneath it, so the wash is heavy where the words are and only thins once
   it is past them. */
.jharokha--sunk .jharokha__cut img {
  filter: saturate(0.42) contrast(1.04);
}

.jharokha--sunk .jharokha__cut::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    96deg,
    var(--paper) 0%,
    color-mix(in oklch, var(--paper) 96%, transparent) 34%,
    color-mix(in oklch, var(--paper) 74%, transparent) 56%,
    color-mix(in oklch, var(--paper) 22%, transparent) 100%
  );
}

.jharokha__over {
  position: absolute;
  inset: 0;
  display: grid;
  align-content: center;
  padding: clamp(1.5rem, 5vw, 3rem) clamp(1.5rem, 5vw, 3.25rem);
  max-width: 34rem;
}

.jharokha__over .display {
  font-size: clamp(1.4rem, 3.4vw, 2.25rem);
  line-height: 1.14;
  letter-spacing: -0.018em;
}

.jharokha__over p:not(.display) {
  margin-top: 0.85rem;
  font-size: var(--t--1);
  color: var(--ink-2);
  max-width: 40ch;
}

/* Below the arch's springing line there is no room for a text overlay, so
   the composition stacks instead of overlapping. */
/* Below the springing line there is no room to set text across the opening,
   so the composition stacks instead of overlapping. */
@media (max-width: 46rem) {
  .jharokha--sunk .jharokha__aperture {
    aspect-ratio: 3 / 2;
  }

  .jharokha__over {
    position: static;
    padding: 1.25rem 0 0;
    max-width: none;
  }

  .jharokha--sunk .jharokha__cut::after {
    background: linear-gradient(
      180deg,
      transparent 45%,
      color-mix(in oklch, var(--paper) 34%, transparent) 100%
    );
  }
}

/* =========================================================================
   EVIDENCE SHEET
   The default gallery varies its spans so a set of images does not read as a
   card grid. That only works when the images share a shape. Field photography
   arrives portrait, mixed, and un-art-directed, so it gets the opposite
   treatment: an even contact sheet, which is what a set of field frames
   actually is.
   ========================================================================= */

.gallery--sheet {
  grid-template-columns: repeat(4, 1fr);
}

.gallery--sheet > figure,
.gallery--sheet > figure:nth-child(4n + 1),
.gallery--sheet > figure:nth-child(4n + 2),
.gallery--sheet > figure:nth-child(4n + 3) {
  grid-column: span 1;
}

.gallery--sheet .frame-corners img {
  aspect-ratio: 4 / 5;
  object-fit: cover;
  object-position: var(--focus, center);
}

/* Drawings must not be cropped, so they sit inside a fixed box rather than
   filling it. */
.gallery--board .frame-corners img {
  aspect-ratio: 4 / 3;
  object-fit: contain;
  background: var(--paper);
}

.gallery--board > figure,
.gallery--board > figure:nth-child(4n + 1),
.gallery--board > figure:nth-child(4n + 2),
.gallery--board > figure:nth-child(4n + 3) {
  grid-column: span 2;
}

@media (max-width: 46rem) {
  .gallery--sheet {
    grid-template-columns: repeat(2, 1fr);
  }

  .gallery--board > figure,
  .gallery--board > figure:nth-child(4n + 1),
  .gallery--board > figure:nth-child(4n + 2),
  .gallery--board > figure:nth-child(4n + 3) {
    grid-column: span 3;
  }
}

@media (max-width: 30rem) {
  .gallery--board > figure,
  .gallery--board > figure:nth-child(4n + 1),
  .gallery--board > figure:nth-child(4n + 2),
  .gallery--board > figure:nth-child(4n + 3) {
    grid-column: span 6;
  }
}

/* =========================================================================
   SIGIL
   The work index carries a project mark, so a study is recognisable before
   its title is read and stays recognisable on the page it opens.
   ========================================================================= */

.sigil {
  position: relative;
  width: 2.35rem;
  height: 2.8rem;
  display: grid;
  place-items: center;
  flex: none;
}

.sigil::before {
  content: '';
  position: absolute;
  inset: 0;
  background: color-mix(in oklch, var(--brass) 55%, transparent);
  transition: background-color 260ms var(--ease-out);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 44 52' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.2 49V29.5c0-7.6 2.8-13.2 7.7-16 3.8-2.2 6.6-5 8.4-8.6 1-2 1.9-3 2.7-3s1.7 1 2.7 3c1.8 3.6 4.6 6.4 8.4 8.6 4.9 2.8 7.7 8.4 7.7 16V49'/%3E%3Cpath d='M1 49.8h42'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 44 52' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.2 49V29.5c0-7.6 2.8-13.2 7.7-16 3.8-2.2 6.6-5 8.4-8.6 1-2 1.9-3 2.7-3s1.7 1 2.7 3c1.8 3.6 4.6 6.4 8.4 8.6 4.9 2.8 7.7 8.4 7.7 16V49'/%3E%3Cpath d='M1 49.8h42'/%3E%3C/svg%3E") center / contain no-repeat;
}

.sigil .g {
  font-size: 1.1rem;
  color: var(--ink-3);
  margin-top: 0.6rem;
  transition: color 260ms var(--ease-out);
}

@media (hover: hover) and (pointer: fine) {
  .work__item:hover .sigil::before {
    background: var(--brass);
  }

  .work__item:hover .sigil .g {
    color: var(--rust-deep);
  }
}

.work__item:focus-within .sigil::before {
  background: var(--brass);
}

.work__item:focus-within .sigil .g {
  color: var(--rust-deep);
}

/* The sigil replaces the index numeral, so the column widens to hold it. */
.work__link--sigil {
  grid-template-columns: 2.35rem minmax(0, 1fr) auto;
}

@media (max-width: 40rem) {
  .work__link--sigil {
    grid-template-columns: 2.35rem minmax(0, 1fr);
  }

  .work__link--sigil .sigil {
    display: grid;
  }
}

/* =========================================================================
   MARKED LISTS
   The numeral in a pillar carries no information the reader needs, so it is
   replaced by a mark that does: what kind of commitment this is.
   ========================================================================= */

.pillars--marked .pillar__num {
  display: grid;
  place-items: center;
  width: 2.6rem;
  height: 2.6rem;
  border: 1px solid var(--rule-strong);
  border-radius: 50%;
  color: var(--ink-3);
}

.pillars--marked .pillar__num .g {
  font-size: 1.3rem;
}

.pillars--marked .pillar--lead .pillar__num {
  border-color: var(--brass);
  color: var(--rust-deep);
}

/* The mark hangs in the padding rather than taking a grid track. A track
   would capture any inline element in the body -- a link, an emphasis -- as
   its own column and break the line apart. */
.tenets--marked li {
  position: relative;
  padding-left: 2.15rem;
}

.tenets--marked li .g {
  position: absolute;
  left: 0;
  top: 0.9rem;
  font-size: 1.25rem;
  color: var(--rust-deep);
}

/* A principle takes the mark of the need it protects. */
.principles--marked li {
  grid-template-columns: 1.5rem minmax(0, 15rem) minmax(0, 1fr);
}

.principles--marked li .g {
  font-size: 1.2rem;
  color: var(--rust-deep);
  align-self: center;
}

@media (max-width: 40rem) {
  .principles--marked li {
    grid-template-columns: 1.5rem minmax(0, 1fr);
  }

  .principles--marked li .g {
    grid-row: 1 / span 2;
    align-self: start;
    margin-top: 0.2rem;
  }
}

/* In a ranked list the mark replaces the counter, because here the glyph
   identifies the item and the order is already carried by position. */
.ranked--marked li::before {
  content: none;
}

.ranked--marked li .g {
  grid-column: 1;
  grid-row: 1;
  font-size: 1.35rem;
  color: var(--rust-deep);
  align-self: center;
}

/* Labels in the evidence rail take the mark of what they measure. */
.apparatus--marked dt {
  display: flex;
  align-items: center;
  gap: 0.5em;
}

.apparatus--marked dt .g {
  font-size: 1rem;
  color: var(--rust-deep);
}

/* A competency heading names a discipline, so it takes that discipline's
   instrument. */
.columns--marked section > h3 {
  display: flex;
  align-items: center;
  gap: 0.6em;
}

.columns--marked section > h3 .g {
  font-size: 1.2rem;
  color: var(--rust-deep);
}

/* =========================================================================
   METHOD CHIPS
   The single shared notch is replaced by the mark of the actual technique.
   A chip now says which instrument was used, not merely that one was.
   ========================================================================= */

.method--marked li::before {
  display: none;
}

.method--marked li .g {
  font-size: 1.05rem;
  color: var(--rust-deep);
}

/* =========================================================================
   FINDING MARKS
   The count that supports a finding is set as a small inlay rather than
   another line of type, so the weight of the evidence is visible from the
   scroll.
   ========================================================================= */

.finding--marked {
  grid-template-columns: 5.5rem minmax(0, 1fr);
  align-items: start;
}

.finding--marked::before {
  content: none;
}

.finding__seal {
  --s: 5rem;
  --inner: calc(var(--s) * 0.66);
  grid-column: 1;
  position: relative;
  width: var(--s);
  height: var(--s);
  display: grid;
  place-content: center;
  text-align: center;
  isolation: isolate;
  margin-top: 0.15rem;
}

.finding__seal::before,
.finding__seal::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
}

.finding__seal::before {
  background: var(--rust-wash);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M14.6 14.6h70.8v70.8H14.6z'/%3E%3Cpath d='M50 2 98 50 50 98 2 50z'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M14.6 14.6h70.8v70.8H14.6z'/%3E%3Cpath d='M50 2 98 50 50 98 2 50z'/%3E%3C/svg%3E") center / contain no-repeat;
}

.finding__seal::after {
  background: var(--brass);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' fill='none' stroke='%23000' stroke-width='1.6' stroke-linejoin='round'%3E%3Cpath d='M14.6 14.6h70.8v70.8H14.6z'/%3E%3Cpath d='M50 2 98 50 50 98 2 50z'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' fill='none' stroke='%23000' stroke-width='1.6' stroke-linejoin='round'%3E%3Cpath d='M14.6 14.6h70.8v70.8H14.6z'/%3E%3Cpath d='M50 2 98 50 50 98 2 50z'/%3E%3C/svg%3E") center / contain no-repeat;
}

.finding__seal b {
  display: block;
  width: var(--inner);
  font: 400 var(--t-0) / 1 var(--display);
  font-optical-sizing: auto;
  letter-spacing: -0.03em;
  color: var(--rust-deep);
  font-variant-numeric: lining-nums tabular-nums;
}

.finding__seal small {
  display: block;
  width: var(--inner);
  margin-top: 0.15rem;
  font: 400 0.75rem / 1.2 var(--mono);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--ink-2);
}

@media (max-width: 34rem) {
  .finding--marked {
    grid-template-columns: minmax(0, 1fr);
    gap: 0.85rem 0;
  }

  .finding__seal {
    --s: 4.25rem;
  }
}

/* =========================================================================
   PROGRESSION
   The journey strip earns a mark per stage. Stages are a sequence, so the
   marks are joined by the line that carries the eye through them.
   ========================================================================= */

.journey--marked li {
  gap: 0.55rem;
}

.journey__mark {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--rust-deep);
}

.journey__mark .g {
  font-size: 1.2rem;
}

.journey__mark .journey__step {
  color: var(--ink-3);
}

/* =========================================================================
   QUOTE MARK
   A verbatim gets a struck brass quote rather than a bare indent rule, so
   participant voice is visually distinct from the researcher's.
   ========================================================================= */

.verbatim--marked {
  position: relative;
  border-left-color: var(--brass-line);
  padding-left: 1.5rem;
}

/* A solid inlay, not an outlined one. At this size a stroked star reads as a
   cog; filled, it reads as the stone it is imitating. */
.verbatim--marked::before {
  content: '';
  position: absolute;
  left: -0.42rem;
  top: 0.42rem;
  width: 0.8rem;
  height: 0.8rem;
  background-color: var(--brass);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M14.6 14.6h70.8v70.8H14.6z'/%3E%3Cpath d='M50 2 98 50 50 98 2 50z'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M14.6 14.6h70.8v70.8H14.6z'/%3E%3Cpath d='M50 2 98 50 50 98 2 50z'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* The rule runs behind the inlay, so the inlay needs its own ground to sit on
   whichever band it lands in. */
.verbatim--marked::after {
  content: '';
  position: absolute;
  left: -0.55rem;
  top: 0.3rem;
  width: 1.05rem;
  height: 1.05rem;
  z-index: -1;
  background: var(--paper);
}

.band--sunk .verbatim--marked::after {
  background: var(--paper-sunk);
}

/* A screen restores the plain ground inside itself, so quotes within one go
   back to the default. */
.band--sunk .pardah__body .verbatim--marked::after {
  background: var(--paper);
}

/* =========================================================================
   BAR CHART MARKS
   A bar that ends in the mark of the thing it counts is read once rather
   than twice: the label names the category, the mark shows it.
   ========================================================================= */

.bars__label .g {
  font-size: 1.05rem;
  color: var(--ink-3);
  margin-right: 0.15rem;
  vertical-align: -0.15em;
}

.bars__row--lead .bars__label .g {
  color: var(--rust-deep);
}

.bars__label > span:first-child {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
}

/* =========================================================================
   PLATE
   A framed archival image used at a smaller scale than the jharokha: the
   brass corner brackets of a manuscript page, plus a caption that reads as
   a catalogue entry rather than alt text.
   ========================================================================= */

.plate {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  gap: clamp(1.25rem, 4vw, 2.5rem);
  align-items: center;
  margin-top: clamp(1.75rem, 4vw, 2.5rem);
}

.plate__note {
  font-size: var(--t--1);
  color: var(--ink-2);
  max-width: 44ch;
  text-wrap: pretty;
}

.plate__note b {
  display: block;
  font: 500 var(--t--2) / 1 var(--mono);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--rust-deep);
  margin-bottom: 0.5rem;
}

@media (max-width: 46rem) {
  .plate {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* =========================================================================
   FORK
   A method section usually lists what was done. The more useful thing is what
   was chosen *over* what, and why. The fork shows both roads: the one taken
   carries the mark and the weight, the one left carries a rule through it.
   ========================================================================= */

.forks {
  display: grid;
  gap: clamp(1.25rem, 3vw, 2rem);
  margin-top: clamp(1.5rem, 3.5vw, 2.25rem);
  counter-reset: fork;
}

.fork {
  counter-increment: fork;
  padding: clamp(1.15rem, 2.6vw, 1.6rem) clamp(1.15rem, 2.6vw, 1.75rem);
  border: 1px solid var(--card-edge);
  border-radius: 10px;
  background: var(--card);
}

.fork__pair {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.55rem 0.75rem;
}

.fork__took {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  font: 600 var(--t-0) / 1.3 var(--sans);
  color: var(--ink);
}

.fork__took .g {
  font-size: 1.2rem;
  color: var(--rust-deep);
}

/* The hinge word. Small, mono, and the only thing between the two roads. */
.fork__over {
  font: 500 0.8125rem / 1.15 var(--mono);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--rust-deep);
  padding: 0.3em 0.5em;
  border: 1px solid var(--brass-line);
  border-radius: 3px;
  flex: none;
}

.fork__left {
  font: 400 var(--t--1) / 1.4 var(--sans);
  color: var(--ink-3);
  text-decoration: line-through;
  text-decoration-color: color-mix(in oklch, var(--rust) 60%, transparent);
  text-decoration-thickness: 1.5px;
}

.fork__why {
  margin-top: 0.85rem;
  font-size: var(--t--1);
  line-height: 1.62;
  color: var(--ink-2);
  max-width: 68ch;
  text-wrap: pretty;
}

/* =========================================================================
   GOALS
   Three things a project was asked to do, numbered because the sequence is
   the brief's own order, and marked because each is a different kind of ask.
   ========================================================================= */

.goals {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: clamp(1rem, 2.4vw, 1.5rem);
  margin-top: clamp(1.5rem, 3.5vw, 2.25rem);
}

.goals li {
  position: relative;
  padding: clamp(1.25rem, 2.8vw, 1.75rem);
  border: 1px solid var(--card-edge);
  border-radius: 10px;
  background: var(--card);
  font-size: var(--t--1);
  line-height: 1.6;
  color: var(--ink-2);
  text-wrap: pretty;
}

.goals li .g {
  display: block;
  font-size: 1.5rem;
  color: var(--rust-deep);
  margin-bottom: 0.75rem;
}

.goals li b {
  display: block;
  font: 600 var(--t-0) / 1.3 var(--sans);
  color: var(--ink);
  margin-bottom: 0.4rem;
}

/* =========================================================================
   NETWORK
   A thematic network is a global theme with organizing themes around it and
   basic themes feeding those. That is the charbagh again: one tank, four
   quadrants. So the analysis is drawn as the garden rather than pasted in as
   a screenshot of the tool it was made in.
   ========================================================================= */

.network {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(9rem, 15rem) minmax(0, 1fr);
  margin-top: clamp(1.75rem, 4vw, 2.5rem);
  border: 1px solid var(--card-edge);
  border-radius: 12px;
  overflow: hidden;
  background-color: var(--paper-sunk);
  background-image: radial-gradient(circle at 0 0, transparent 10px, var(--jaali) 10px 11px, transparent 11.5px),
    radial-gradient(circle at 100% 0, transparent 10px, var(--jaali) 10px 11px, transparent 11.5px),
    radial-gradient(circle at 0 100%, transparent 10px, var(--jaali) 10px 11px, transparent 11.5px),
    radial-gradient(circle at 100% 100%, transparent 10px, var(--jaali) 10px 11px, transparent 11.5px),
    radial-gradient(circle at 50% 50%, transparent 10px, var(--jaali) 10px 11px, transparent 11.5px);
  background-size: 30px 30px;
}

/* The tank takes a column of its own rather than floating over the planting,
   so nothing it sits on has to be read around it. */
.network__core {
  grid-column: 2;
  grid-row: 1 / span 2;
  align-self: center;
  margin: clamp(1rem, 2.5vw, 1.75rem);
  padding: 1.1rem 1.2rem;
  text-align: center;
  border: 1px solid var(--brass);
  border-radius: 10px;
  background: var(--card);
  box-shadow: 0 6px 22px rgba(0, 0, 0, 0.28);
}

.network__core b {
  display: block;
  font: 500 0.8125rem / 1.15 var(--mono);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--rust-deep);
  margin-bottom: 0.5rem;
}

.network__core p {
  font: 400 var(--t-0) / 1.22 var(--display);
  font-optical-sizing: auto;
  letter-spacing: -0.014em;
  color: var(--ink);
  text-wrap: balance;
}

/* The four channels are the quadrant edges themselves, which is how a real
   charbagh divides: the planting meets the water, not a line drawn over it. */
.network__theme {
  padding: clamp(1.35rem, 3vw, 2rem);
  display: grid;
  align-content: start;
  gap: 0.55rem;
  min-width: 0;
}

.network__theme:nth-of-type(1) { grid-column: 1; grid-row: 1; border-right: 1px solid var(--brass-line); border-bottom: 1px solid var(--brass-line); }
.network__theme:nth-of-type(2) { grid-column: 3; grid-row: 1; border-left: 1px solid var(--brass-line); border-bottom: 1px solid var(--brass-line); }
.network__theme:nth-of-type(3) { grid-column: 1; grid-row: 2; border-right: 1px solid var(--brass-line); }
.network__theme:nth-of-type(4) { grid-column: 3; grid-row: 2; border-left: 1px solid var(--brass-line); }

.network__name {
  display: flex;
  align-items: center;
  gap: 0.55em;
  font: 600 var(--t-0) / 1.3 var(--sans);
  color: var(--ink);
}

.network__name .g {
  font-size: 1.3rem;
  color: var(--rust-deep);
  flex: none;
}

.network__count {
  font: 500 0.8125rem / 1.15 var(--mono);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-3);
}

/* Each basic theme was a coded observation, so it is set as a counted item
   rather than as prose. */
.network__basics {
  display: grid;
  gap: 0.45rem;
  margin-top: 0.15rem;
}

.network__basics li {
  position: relative;
  padding-left: 1rem;
  font-size: var(--t--1);
  line-height: 1.5;
  color: var(--ink-2);
  text-wrap: pretty;
}

.network__basics li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.62em;
  width: 5px;
  height: 5px;
  transform: rotate(45deg);
  background: var(--brass);
}

/* Stacked, the tank leads the sequence instead of sitting in the middle of it. */
@media (max-width: 60rem) {
  .network {
    grid-template-columns: minmax(0, 1fr);
  }

  .network__core {
    grid-column: 1;
    grid-row: 1;
    margin-bottom: 0;
  }

  .network__theme,
  .network__theme:nth-of-type(1),
  .network__theme:nth-of-type(2),
  .network__theme:nth-of-type(3),
  .network__theme:nth-of-type(4) {
    grid-column: 1;
    grid-row: auto;
    border: 0;
    border-top: 1px solid var(--brass-line);
  }
}

/* =========================================================================
   PERSONA CARD
   Built from the persona's own field values rather than pasted in as a
   picture of a document, so it re-tints, reflows, and can actually be read
   on a phone.
   ========================================================================= */

.personas {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(19rem, 1fr));
  gap: clamp(1.25rem, 3vw, 2rem);
  margin-top: clamp(1.75rem, 4vw, 2.5rem);
}

.pcard {
  display: grid;
  align-content: start;
  padding: clamp(1.5rem, 3vw, 2rem);
  border: 1px solid var(--card-edge);
  border-radius: 12px;
  background: var(--card);
  box-shadow: var(--card-lift);
}

.pcard__head {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--rule);
}

/* The portrait from the persona sheet, set behind the same cusped arch the
   rest of the site frames people with. A persona is a person: showing one
   costs a reader nothing and saves them a paragraph. */
.pcard__face {
  position: relative;
  flex: none;
  width: 4.6rem;
  height: 5.6rem;
  overflow: hidden;
  background: var(--paper-deep);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 44 52'%3E%3Cpath d='M3.2 49.8V29.5c0-7.6 2.8-13.2 7.7-16 3.8-2.2 6.6-5 8.4-8.6 1-2 1.9-3 2.7-3s1.7 1 2.7 3c1.8 3.6 4.6 6.4 8.4 8.6 4.9 2.8 7.7 8.4 7.7 16v20.3z'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 44 52'%3E%3Cpath d='M3.2 49.8V29.5c0-7.6 2.8-13.2 7.7-16 3.8-2.2 6.6-5 8.4-8.6 1-2 1.9-3 2.7-3s1.7 1 2.7 3c1.8 3.6 4.6 6.4 8.4 8.6 4.9 2.8 7.7 8.4 7.7 16v20.3z'/%3E%3C/svg%3E") center / contain no-repeat;
}

.pcard__face img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--focus, 50% 20%);
  display: block;
}

.pcard__mark {
  position: relative;
  flex: none;
  width: 3rem;
  height: 3.6rem;
  display: grid;
  place-items: center;
  font: 400 var(--t-2) / 1 var(--display);
  color: var(--rust-deep);
  padding-top: 0.5rem;
}

.pcard__mark::before {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--brass);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 44 52' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.2 49V29.5c0-7.6 2.8-13.2 7.7-16 3.8-2.2 6.6-5 8.4-8.6 1-2 1.9-3 2.7-3s1.7 1 2.7 3c1.8 3.6 4.6 6.4 8.4 8.6 4.9 2.8 7.7 8.4 7.7 16V49'/%3E%3Cpath d='M1 49.8h42'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 44 52' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.2 49V29.5c0-7.6 2.8-13.2 7.7-16 3.8-2.2 6.6-5 8.4-8.6 1-2 1.9-3 2.7-3s1.7 1 2.7 3c1.8 3.6 4.6 6.4 8.4 8.6 4.9 2.8 7.7 8.4 7.7 16V49'/%3E%3Cpath d='M1 49.8h42'/%3E%3C/svg%3E") center / contain no-repeat;
}

.pcard__who b {
  display: block;
  font: 400 var(--t-1) / 1.15 var(--display);
  color: var(--ink);
  letter-spacing: -0.014em;
}

.pcard__who span {
  display: block;
  margin-top: 0.2rem;
  font: 400 var(--t--2) / 1.4 var(--mono);
  color: var(--ink-3);
}

/* The quote the persona was built around. */
.pcard__say {
  margin-top: 1.1rem;
  font: 400 var(--t-0) / 1.35 var(--display);
  font-optical-sizing: auto;
  letter-spacing: -0.008em;
  color: var(--ink);
  text-wrap: pretty;
}

.pcard__facts {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 0.35rem 0.85rem;
  margin-top: 1.1rem;
  font-size: var(--t--2);
}

.pcard__facts dt {
  font-family: var(--mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-3);
}

.pcard__facts dd {
  margin: 0;
  color: var(--ink-2);
}

.pcard__blocks {
  margin-top: 1.25rem;
  padding-top: 1rem;
  border-top: 1px solid var(--rule);
}

.pcard__blocks b {
  display: block;
  font: 500 var(--t--2) / 1 var(--mono);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--rust-deep);
  margin-bottom: 0.7rem;
}

.pcard__blocks li {
  position: relative;
  padding-left: 1.1rem;
  margin-top: 0.5rem;
  font-size: var(--t--1);
  line-height: 1.55;
  color: var(--ink-2);
  text-wrap: pretty;
}

.pcard__blocks li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.62em;
  width: 6px;
  height: 1.5px;
  background: var(--rust);
}

/* =========================================================================
   BOARD + LIGHTBOX
   Storyboards are drawings with lettering in them, so at gallery scale they
   are decoration. They get real size on the page and a full-screen reading
   view on click, which is the only way the panels are actually legible.
   ========================================================================= */

.board {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(19rem, 1fr));
  gap: clamp(1rem, 2.4vw, 1.75rem);
  margin-top: clamp(1.5rem, 3.5vw, 2.25rem);
}

.board__cell {
  margin: 0;
}

.board__btn {
  position: relative;
  display: block;
  width: 100%;
  padding: 0;
  border: 1px solid var(--card-edge);
  border-radius: 10px;
  background: var(--card);
  cursor: zoom-in;
  overflow: hidden;
  transition: transform 300ms var(--ease-out), box-shadow 300ms var(--ease-out),
    border-color 300ms var(--ease-out);
}

.board__btn img {
  display: block;
  width: 100%;
  height: auto;
  background: #fff;
}

@media (hover: hover) and (pointer: fine) {
  .board__btn:hover {
    transform: translateY(-2px);
    border-color: var(--brass);
    box-shadow: var(--card-lift-hover);
  }
}

.board__btn:focus-visible {
  outline: 2px solid var(--rust-deep);
  outline-offset: 3px;
}

/* An affordance, because a picture that can be opened has to say so. */
.board__zoom {
  position: absolute;
  right: 0.6rem;
  bottom: 0.6rem;
  display: grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  border-radius: 6px;
  background: color-mix(in oklch, var(--pavilion-bg) 82%, transparent);
  color: var(--brass);
  opacity: 0;
  transform: translateY(4px);
  transition: opacity 240ms var(--ease-out), transform 240ms var(--ease-out);
  pointer-events: none;
}

.board__zoom svg {
  width: 15px;
  height: 15px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
}

@media (hover: hover) and (pointer: fine) {
  .board__btn:hover .board__zoom {
    opacity: 1;
    transform: none;
  }
}

.board__btn:focus-visible .board__zoom {
  opacity: 1;
  transform: none;
}

/* Touch has no hover, so the cue is simply always there. */
@media (hover: none) {
  .board__zoom {
    opacity: 1;
    transform: none;
  }
}

.board__cap {
  margin-top: 0.7rem;
  font: 400 var(--t--2) / 1.5 var(--mono);
  color: var(--ink-3);
}

.board__cap b {
  display: block;
  font-family: var(--sans);
  font-size: var(--t--1);
  font-weight: 600;
  color: var(--ink);
  letter-spacing: 0;
  margin-bottom: 0.15rem;
}

/* ---- The reading view ---- */

/* A closed <dialog> is display:none in the UA sheet. Setting a display value
   on the element itself overrides that and leaves an invisible full-viewport
   layer over the page, so the layout only applies while it is open. */
.lightbox[open] {
  display: grid;
}

.lightbox {
  position: fixed;
  inset: 0;
  z-index: 90;
  grid-template-rows: auto minmax(0, 1fr);
  gap: 1rem;
  padding: clamp(0.75rem, 2.5vw, 1.75rem);
  border: 0;
  width: 100%;
  max-width: none;
  height: 100%;
  max-height: none;
  background: color-mix(in oklch, var(--paper-deep) 96%, transparent);
  color: var(--ink);
  overscroll-behavior: contain;
}

.lightbox::backdrop {
  background: rgba(0, 0, 0, 0.72);
  backdrop-filter: blur(3px);
}

.lightbox__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.lightbox__cap {
  font: 400 var(--t--1) / 1.4 var(--mono);
  color: var(--ink-2);
  min-width: 0;
}

.lightbox__cap b {
  display: block;
  font-family: var(--sans);
  font-weight: 600;
  color: var(--ink);
  font-size: var(--t-0);
}

.lightbox__close {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  padding: 0.6rem 0.95rem;
  border: 1px solid var(--rule-strong);
  border-radius: 999px;
  background: var(--card);
  color: var(--ink);
  font: 500 var(--t--2) / 1 var(--mono);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  cursor: pointer;
}

@media (hover: hover) and (pointer: fine) {
  .lightbox__close:hover {
    border-color: var(--brass);
  }
}

.lightbox__stage {
  display: grid;
  place-items: center;
  min-height: 0;
  overflow: auto;
}

.lightbox__stage img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  border-radius: 6px;
  background: #fff;
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.5);
}

@media (prefers-reduced-motion: no-preference) {
  .lightbox[open] {
    animation: lb-in 260ms var(--ease-out);
  }
}

@keyframes lb-in {
  from {
    opacity: 0;
    transform: scale(0.985);
  }
}

/* =========================================================================
   AFFINITY BOARD
   The clusters that came off the wall, rebuilt as columns. The header is the
   cluster; the cards under it are what participants actually said.
   ========================================================================= */

.affinity {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(15rem, 1fr);
  gap: clamp(0.75rem, 2vw, 1.15rem);
  margin-top: clamp(1.5rem, 3.5vw, 2.25rem);
  overflow-x: auto;
  padding-bottom: 0.75rem;
  scroll-snap-type: x proximity;
}

.affinity__col {
  scroll-snap-align: start;
  min-width: 0;
}

/* The cluster label keeps the sticky-note shape it had on the wall. */
.affinity__note {
  padding: 0.85rem 0.9rem;
  border-radius: 3px;
  background: color-mix(in oklch, var(--rust) 20%, var(--card));
  border: 1px solid color-mix(in oklch, var(--rust) 34%, transparent);
  box-shadow: 2px 2px 0 var(--carve-shadow);
  font: 600 var(--t--1) / 1.3 var(--sans);
  color: var(--ink);
  min-height: 4.5rem;
  display: flex;
  align-items: center;
}

.affinity__quotes {
  display: grid;
  gap: 0.6rem;
  margin-top: 0.85rem;
}

.affinity__quotes li {
  padding: 0.7rem 0.8rem;
  border: 1px solid var(--rule);
  border-radius: 6px;
  background: var(--card);
  font-size: var(--t--2);
  line-height: 1.5;
  color: var(--ink-2);
  text-wrap: pretty;
}

.affinity__quotes li em {
  display: block;
  margin-top: 0.35rem;
  font: 400 0.8125rem / 1.15 var(--mono);
  font-style: normal;
  letter-spacing: 0.08em;
  color: var(--ink-3);
}

/* =========================================================================
   TRAIL
   Two working boards shown in the order they happened. A finished diagram
   proves the conclusion; these prove the route, which is the thing a
   research portfolio is actually being read for.
   ========================================================================= */

.trail {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr));
  gap: clamp(1.25rem, 3vw, 2rem);
  margin-top: clamp(1.25rem, 3vw, 1.75rem);
  counter-reset: trail;
}

.trail__step {
  counter-increment: trail;
  display: grid;
  align-content: start;
  gap: 0.85rem;
}

.trail__stage {
  display: flex;
  align-items: center;
  gap: 0.55em;
  font: 500 var(--t--2) / 1.3 var(--mono);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--rust-deep);
}

.trail__stage .g {
  font-size: 1.15rem;
  flex: none;
}

/* The boards are photographs of a wall, so they keep a white ground rather
   than being tinted into the page. */
.trail .board__btn img {
  aspect-ratio: 4 / 3;
  object-fit: contain;
  object-position: center;
  padding: 0.5rem;
}

.trail__note {
  font-size: var(--t--1);
  line-height: 1.6;
  color: var(--ink-2);
  text-wrap: pretty;
}

/* A rule joining the two passes, so they read as a sequence and not a pair. */
@media (min-width: 60rem) {
  .trail {
    position: relative;
  }

  .trail__step:first-child .trail__stage::after {
    content: '';
    flex: 1;
    height: 1px;
    background: linear-gradient(90deg, var(--brass-line), transparent);
  }
}