/* ==========================================================================
   STUDIO EIKIRA — the case study's own brand system
   CLAUDE.md §7, and the CONTAINMENT note in the project manifest.

   THIS IS THE PALETTE THE "NO GOLD ANYWHERE" RULE EXISTS TO HOLD AT ARM'S
   LENGTH. §2 forbids gold in the site shell precisely so the portfolio never
   reads as related to Studio Eikira's brand — and this page is the one
   exception, which only works if the exception has a hard edge.

   Two rules, both absolute:
     gold never outside this block   — nothing here is a shell token
     kumkumam never inside it        — nothing here references --kumkumam

   Loaded only by this page, so both are structural rather than promised: the
   gold does not exist as a value anywhere else in the site, and the shell's
   accent is not reachable from inside the block.

   CONTRAST, measured against Ink #14151A:
     Ivory #EDE6D6   14.9 : 1   body and headings on the dark ground
     Gold  #D4AF37    8.5 : 1   accents, rules, the numbered markers
   Both clear AA. Gold is used as an accent rather than as body colour even
   though it could carry it — a page set in gold reads as a novelty.
   ========================================================================== */

.brand--eikira {
  /* Roles are the guidelines' own words (p11 / Quick Reference p22), not a
     paraphrase — the swatch labels on the page read from these. */
  --b-gold:    #D4AF37;   /* Gold       — Primary: the mark, accents             */
  --b-anchor:  #14151A;   /* Ink        — Primary: the base, everywhere; also
                                          body text on Paper/Warm Paper          */
  --b-ivory:   #EDE6D6;   /* Ivory      — Secondary: ring, subtext               */
  /* Hairline Dark, a V2 working tone (p18): borders on ink, never text. */
  --b-hairline: #44403A;
  --b-warm:    #F4F0E8;   /* Warm Paper — Base: Services/Pricing background      */
  --b-paper:   #FBF9F4;   /* Paper      — Base: Contact background               */

  /* The sheet is a lift off the anchor rather than a new hex. Derived from
     the two documented colours so the panel cannot drift out of the palette:
     it is Ink with a trace of Ivory in it, which is exactly what a slightly
     raised surface on this brand would be. */
  --b-surface: color-mix(in srgb, #14151A 92%, #EDE6D6);

  --b-on-surface: #EDE6D6;
  --b-on-anchor:  #EDE6D6;

  /* The numbered markers are the one place gold becomes a ground. Ink on gold
     measures 8.5:1, so the marker reads at any size. */
  --b-num-bg:  #D4AF37;
  --b-num-ink: #14151A;

  --b-edge:      color-mix(in srgb, #D4AF37 55%, transparent);
  --b-edge-soft: color-mix(in srgb, #D4AF37 30%, transparent);

  /* §8's font budget: the DISPLAY face only. Cinzel Decorative is loaded and
     is used exactly once, for the literal wordmark, which is the manifest's
     own rule. Cinzel, EB Garamond and Inter are NOT loaded; their specimens
     sit in near-match stacks and say so on the page. */
  /* REGULAR WEIGHT ONLY. p13 and the Quick Reference "don't" list both say
     it outright — "Bold the wordmark" is listed as a misuse. This carried 700,
     which was the one thing the guidelines explicitly forbid for this face. */
  --b-display: 'Cinzel Decorative', 'Cinzel', Georgia, 'Times New Roman', serif;
  --b-display-weight: 400;
  --b-display-tracking: 0.02em;
  --b-serif: 'Cinzel', Georgia, 'Times New Roman', serif;
  /* V2's display face. Decorative is still loaded, but only to SHOW what was
     retired — see the scoping below. */
  --b-display-plain: 'Cinzel', Georgia, 'Times New Roman', serif;
  --b-body: 'EB Garamond', Georgia, 'Iowan Old Style', 'Times New Roman', serif;
  --b-ui: ui-sans-serif, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
}

/* The seigaiha pattern, inside the frame and nowhere else — the manifest is
   explicit that it "belongs inside the contained Eikira frame, never as a
   page background".

   THE OVERLAY IS THE BRAND'S OWN RULE, NOT A DIMMED PATTERN. p14: "whenever
   the pattern sits behind text, a logo, or any foreground element, apply a
   55% black overlay (rgba(0,0,0,0.55)) on top of it first." This previously
   faded the pattern itself to 0.16 and used no overlay, which is a different
   mechanism producing a different result — a washed-out texture rather than a
   full-strength one held back by black. The pattern now runs at full strength
   with the specified overlay above it, which is also what makes the ground
   darker and lifts every contrast ratio on the sheet. */
.brand--eikira { position: relative; isolation: isolate; }

.brand--eikira::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: rgba(0, 0, 0, 0.55);
}

/* THE ORIGINAL ASSET IS BLACK ON BLACK, AND THAT IS WHY -lit.jpg EXISTS.
   Measured off the file at native resolution, not from a downscale that would
   average its thin strokes away: peak luma 45 out of 255, 92% of pixels
   between 0 and 15, nothing above 60. Under the guideline's own 55% black
   overlay those peaks land at luma ~20 — below the frame's ground of
   rgb(20,21,26) — so the seigaiha was painted, composited and completely
   invisible. Worse, the pattern's own black is darker than that ground, so
   the layer was flattening the panel to near-black as well.

   brightness(2.4) put the peaks near luma 108 before the overlay and ~48
   after, which reads as texture against a 21 ground without touching the
   overlay rule from p14. The artwork is unchanged; only its exposure is.

   THAT LIGHTER EXPORT NOW EXISTS, and the filter is gone with it.
   -lit.jpg is the same file with the same 2.4x multiply baked in — peak
   channel 47 -> 117, mean 2.6 -> 6.2, both within rounding of x2.4 — so the
   render is identical and the exposure is now a property of the asset.

   WHY IT WAS WORTH DOING: five sections carry this ::before, the largest
   3101px tall, together spanning 16%-97% of the page. A filter forces its
   layer to be re-rasterized rather than merely re-composited, and a fixed
   mix-blend-mode grain sits over all of it, so every scroll frame on a phone
   was repainting five filtered layers and re-blending the viewport. The
   scroll-progress bar reads the real scroll offset, so when frames dropped it
   reported them faithfully and looked like it was stuttering. Nothing was
   wrong with the bar. */
.brand--eikira::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  /* NOT IN _reference. .vercelignore excludes every _reference directory, so
     while the file lived in one it served fine from the dev server — which
     reads the working tree — and 404'd on every deploy. Local and live
     disagreed silently, and the pattern was invisible in production for
     exactly that reason. Anything the site renders belongs outside it.

     (The ignore pattern is not written out here on purpose: it contains a
     star-slash, which closes a CSS comment. Doing that broke this whole
     declaration block once already.) */
  background-image: url('/assets/projects/studio-eikira/pattern-seigaiha-lit.jpg');
  /* TILED SMALL, NOT COVERED. `cover` on a 4608x3584 source inside a narrow
     column scaled it to fill the HEIGHT — about 0.94:1 — so a single motif
     came out ~320px wide and the frame showed two or three giant blooms
     instead of a texture. Repeating at 1200px puts a motif near 80px, which
     reads as pattern rather than as wallpaper.

     Safe to repeat: measured off the file, the left and right edges differ by
     1.2/255 and the top and bottom by 1.6/255, so it tiles without a seam. */
  background-size: 1200px auto;
  background-repeat: repeat;
  background-position: center top;
  /* Held back so it reads as ground rather than as content. Opacity rather
     than a lower brightness, deliberately: it blends the layer toward the
     frame's own rgb(20,21,26) instead of only dimming the arcs, which also
     stops the source's pure-black field from crushing the panel darker than
     its specified ground.

     Measured through the whole stack — brightness, then this opacity over the
     rgb(20,21,26) ground, then the p14 overlay — the arcs land at luma 21
     against a field of 7. A 14-step range: readable at close quarters, gone
     at a glance, which is what a ground is for. (0.5 gave 29 against 5, a
     24-step range, and read as content competing with the copy.) */
  opacity: 0.3;
}

/* --- Gold accents inside the frame --------------------------------------- */

.brand--eikira .brand__eyebrow { color: var(--b-gold); opacity: 1; }

/* The wordmark, set once, in the one typeface reserved for it. */
.brand--eikira .brand__title {
  color: var(--b-gold);
  font-family: var(--b-display);
}

/* The cat seal OPENS the section but does not outrank anything. p8: "The seal
   and the full lockup aren't ranked against each other — each carries the
   identity in its own register." It leads here because it is the single
   clearest statement of the mark, not because it is senior to the lockup.
   (p21 does make the horizontal lockup "the primary choice" — but only in
   co-branding, alongside a client's logo, which is not this context.)
   It carries its own gold in the vector. */
.brand--eikira .brand__mark { width: clamp(140px, 20vw, 230px); }

/* Specimens: the serif faces are not loaded, so each is stated. */
.brand--eikira .brand__specimen--display { font-family: var(--b-display); }
.brand--eikira .brand__specimen--body    { font-family: var(--b-body); }
.brand--eikira .brand__face              { font-family: var(--b-serif); }

/* Five colours, five columns — DESKTOP ONLY, and the guard is the media query
   rather than the selector. project.css collapses swatches to two columns
   inside `@media (max-width: 46rem)` at (0,1,0); this rule is (0,2,0) and beat
   it, so five 65px columns survived onto a phone and pushed the document to
   530px wide against a 375 viewport. Scoped with the exact complement of that
   block, it cannot apply where the narrow rule does. */
@media not all and (max-width: 46rem) {
  .brand--eikira .brand__swatches { grid-template-columns: repeat(5, 1fr); }
}

/* SEPARATED FROM THE GARAMOND SAMPLE ABOVE IT.
   Both margins were 0, so the two specimens stacked with nothing between them
   and the four lines read as one paragraph — then a single label underneath
   named two faces, leaving the reader to work out where one ended and the
   other began. Every other specimen on the sheet is one sample per label.

   A step, not a gulf: they still belong to one "Body and UI" heading, so the
   space has to read as a break inside a group rather than as two groups. */
.brand--eikira .brand__specimen--ui {
  margin-inline: auto;
  margin-block: var(--sp-m) 0;
  max-width: 26ch;
  text-align: center;
  font-family: var(--b-ui);
  font-size: clamp(1rem, 1.5vw, 1.15rem);
  line-height: 1.45;
}

/* ==========================================================================
   CASE-STUDY COMPONENTS — the V1/V2 comparison and the audit evidence.

   All of it lives inside .brand--eikira, which is the §7 seal: these blocks
   use the brand's gold, ink, and its two semantic marker colours, and none of
   those values exist anywhere outside this file.
   ========================================================================== */

/* --- Before / after pairs ------------------------------------------------
   One column on narrow so a comparison is never two half-legible halves. */
.brand--eikira .ba {
  display: grid;
  gap: var(--sp-l);
}

@media not all and (max-width: 46rem) {
  .brand--eikira .ba { grid-template-columns: 1fr 1fr; }
}

.brand--eikira .ba__side > * + * { margin-block-start: var(--sp-s); }

.brand--eikira .ba__label {
  margin: 0 0 var(--sp-s);
  padding-block-end: var(--sp-2xs);
  border-block-end: 1px solid var(--b-hairline, #44403A);
  font-family: var(--b-ui);
  font-size: var(--type-micro);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  font-weight: 600;
  color: var(--b-gold);
}

/* --- Evidence tables -----------------------------------------------------
   Reproductions of the guidelines' own tables, set in the guidelines' own
   vocabulary. The PASS / FAIL marks use #2F6B4F and #8C2F2F, which are the
   document's internal-document markers — "the last of Oxblood and Emerald"
   (p18). Using them here is deliberate: the colours the story is about are
   the colours the evidence is marked in. */
.brand--eikira .brand__table {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--b-ui);
  font-size: clamp(0.78rem, 1.15vw, 0.9rem);
  line-height: var(--lh-snug);
}

.brand--eikira .brand__table caption {
  margin-block-end: var(--sp-s);
  font-family: var(--b-body);
  font-size: var(--type-small);
  line-height: var(--lh-snug);
  color: color-mix(in srgb, var(--b-ivory) 82%, transparent);
  text-align: start;
}

.brand--eikira .brand__table th,
.brand--eikira .brand__table td {
  padding: 0.62em 0.5em;
  text-align: start;
  border-block-end: 1px solid var(--b-hairline, #44403A);
  vertical-align: baseline;
}

.brand--eikira .brand__table th {
  font-size: var(--type-micro);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  font-weight: 600;
  color: color-mix(in srgb, var(--b-ivory) 70%, transparent);
}

.brand--eikira .brand__table td:first-child { color: var(--b-ivory); }

.brand--eikira .brand__num {
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* THE MARKS CARRY A WORD, NEVER COLOUR ALONE — which is the guidelines' own
   rule for its flags (p18): any pair clearing 3:1 on both grounds differs by
   at most 1.24:1 to a deuteranope, so hue alone leaves them indistinguishable.
   The word is the information; the colour reinforces it. */
.brand--eikira .brand__pass,
.brand--eikira .brand__fail {
  font-weight: 600;
  letter-spacing: 0.08em;
  font-size: var(--type-micro);
  text-transform: uppercase;
}

.brand--eikira .brand__pass { color: #6FBF8F; }
.brand--eikira .brand__fail { color: #E2736F; }

/* The source hexes are #2F6B4F and #8C2F2F, which are set for INK ON PAPER in
   the PDF. On this dark sheet they measure 1.9:1 and 2.3:1 — unreadable. The
   marks are lightened to the same hues at AA on ink rather than reproduced at
   values that would fail here, and the source values are named in the copy. */

/* --- Lockup reconstruction ----------------------------------------------
   The colourway story is a stack: what is gold and what is ivory, and how
   many golds end up on top of each other. Built live so the two versions can
   sit side by side at the same size. */
.brand--eikira .lockup {
  display: grid;
  justify-items: center;
  gap: 0.35em;
  padding: var(--sp-l) var(--sp-m);
  background: var(--b-anchor);
  border: 1px solid var(--b-hairline, #44403A);
  text-align: center;
}

.brand--eikira .lockup__cat {
  width: clamp(52px, 7vw, 74px);
  height: auto;
}

.brand--eikira .lockup__name {
  font-family: var(--b-display);
  font-weight: var(--b-display-weight);
  font-size: clamp(0.95rem, 1.5vw, 1.15rem);
  letter-spacing: 0.2em;
  margin: 0;
}

.brand--eikira .lockup__desc {
  font-family: var(--b-display);
  font-weight: var(--b-display-weight);
  font-size: clamp(1.6rem, 3.2vw, 2.4rem);
  letter-spacing: 0.1em;
  line-height: 1;
  margin: 0;
}

/* V1 — three golds stacked, which is the thing that got reversed. */
.brand--eikira .lockup--v1 .lockup__name,
.brand--eikira .lockup--v1 .lockup__desc { color: var(--b-gold); }
.brand--eikira .lockup--v1 .lockup__cat { color: var(--b-gold); }

/* V2 — the constant stays quiet, the variable carries the accent. */
.brand--eikira .lockup--v2 .lockup__name { color: var(--b-ivory); }
.brand--eikira .lockup--v2 .lockup__desc { color: var(--b-gold); }

/* --- The Cinzel Decorative size demo ------------------------------------
   The one thread that can be shown rather than argued: both strings set at
   the SAME font-size, so the face's own caps/title-case difference is what
   the reader sees. Decorative is loaded on this page for exactly this. */
.brand--eikira .sizedemo {
  display: grid;
  gap: var(--sp-xs);
}

.brand--eikira .sizedemo__row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--sp-s);
  padding-block-end: var(--sp-2xs);
  border-block-end: 1px solid var(--b-hairline, #44403A);
}

.brand--eikira .sizedemo__specimen {
  font-size: 2.2rem;
  line-height: 1.1;
  color: var(--b-ivory);
  margin: 0;
}

/* THE CASING COMPARISON. Same string, three files, three answers — the
   variable is capitalisation, so everything else has to hold still.

   NOT set in the display face. Cinzel is a titling serif and would make all
   three lines read as ornament; this is product UI copy, so it takes the UI
   face and a size close to what it actually shipped at. The reader is meant
   to compare three sentences, not admire three specimens.

   The rows stack rather than sitting side by side: read down, the three
   answers land in the same column, which is what makes the divergence
   obvious. Side by side they would read as three different strings. */
.brand--eikira .sizedemo--casing .sizedemo__specimen {
  font-family: var(--b-ui);
  font-size: clamp(0.95rem, 1.6vw, 1.15rem);
  line-height: var(--lh-snug);
  letter-spacing: 0;
  text-align: start;
}

/* The tracking override that lived here is GONE with the file paths it was
   written for. app/layout.tsx:37 needed letter-spacing 0 or the tracking
   pulled its punctuation apart; "browser tab" is a plain label and takes the
   same --ls-wide as "78px rendered" in the specimen above, which is what makes
   the two variants read as one component. flex: none stays — it stops the
   label being compressed when a specimen beside it is long. */
.brand--eikira .sizedemo--casing .sizedemo__measure { flex: none; }

/* At 375 the specimen and a full path cannot share a line — "PREPARED BY
   EIKIRA METIS" beside lib/foundation-pdf.tsx:1151 is about 44 characters of
   nowrap in a 320px column. Stacked, the specimen keeps the left edge every
   other row shares, which is the alignment that makes the three names
   comparable in the first place. */
/* EVERY specimen row, not just the casing one. Inlining the label widened the
   measure — "typed EIKIRA · 78px rendered" is 188px of nowrap where the two
   stacked lines were about 90 — and beside a 2.2rem Cinzel specimen that ran
   the Decorative rows 12px past a 360px viewport. The casing rows were only
   safe because they already stacked. One rule for all of them, so a measure
   that grows later cannot break a variant nobody re-checked. */
@media (max-width: 46rem) {
  .brand--eikira .sizedemo__row {
    flex-direction: column;
    align-items: start;
    gap: var(--sp-3xs, 0.25rem);
  }
  .brand--eikira .sizedemo__measure { text-align: start; }
}

/* The rule, quoted as an object rather than paraphrased. Set in the body
   serif at reading size so the two sides of the before/after are compared as
   sentences — which is the whole subject of this thread. */
.brand--eikira .brand__rule-quote {
  margin: 0;
  max-width: none;
  font-family: var(--b-body);
  font-size: clamp(1.05rem, 1.9vw, 1.35rem);
  line-height: var(--lh-snug);
  color: var(--b-ivory);
  text-align: center;
}

.brand--eikira .sizedemo--decorative .sizedemo__specimen { font-family: var(--b-display); }
.brand--eikira .sizedemo--plain .sizedemo__specimen {
  font-family: 'Cinzel', var(--b-body);
  letter-spacing: 0.04em;
}

.brand--eikira .sizedemo__measure {
  font-family: var(--b-ui);
  font-size: var(--type-micro);
  letter-spacing: var(--ls-wide);
  color: var(--b-gold);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  text-align: end;
}

/* What was TYPED, as against what was rendered beside it. In the UI face on
   purpose: this line has to show real title case, and it cannot do that in
   the face being demonstrated, which has no lowercase to show. Muted so the
   specimen stays the loudest thing in the row. */
/* INLINE, WITH A REAL MIDDOT IN THE MARKUP — not display:block.
   Stacked, these read correctly and their TEXT did not: the span and the value
   after it sat on separate lines with no character between them, so the string
   was "browser tabapp/layout.tsx:37" to a screen reader, and to anyone copying
   the row. A line break is a visual separator only. The middot is the site's
   own idiom, the same one the eyebrow and the footer byline use, and being a
   literal in the markup it survives into the accessible name. */
.brand--eikira .sizedemo__input {
  text-transform: none;
  letter-spacing: var(--ls-normal);
  opacity: 0.62;
}

/* RETIRED: the 56ch override for notes after a comparison or a table. It
   existed because the base note measure was 34ch; now that the base is 66ch
   this rule would make those notes NARROWER than every other note on the
   page — the exact inversion it was written to prevent. */

/* The table's own caption had no cap at all, so it ran the table's full
   width — 145 characters a line, which is the same defect as the 34ch notes
   pointing the other way. */
/* The caption was the table's own, so it inherited the table's start
   alignment and sat 287px left of every other paragraph on the page. It is
   prose, so it takes the page axis and the reading measure like the rest. */
.brand--eikira .brand__table caption {
  max-width: 66ch;
  margin-inline: auto;
  text-align: center;
}


/* ==========================================================================
   WHICH CINZEL, AND WHERE — the page must obey the rule it documents.

   V2 retired Cinzel Decorative. So Decorative appears ONLY where this page is
   depicting the V1 state; everything describing or labelling V2 is plain
   Cinzel. Getting this wrong is not a style slip — a page that argues the
   face was retired, in that face, refutes itself.

   Default is now plain. Decorative is opted into, in three places:
     .brand--v1                the whole BEFORE block
     .sizedemo--decorative     the specimen that demonstrates the quirk
     .brand__specimen--display the V1 type sample inside the V2 comparison
   ========================================================================== */

.brand--eikira .brand__title,
.brand--eikira .lockup__name,
.brand--eikira .lockup__desc {
  font-family: var(--b-display-plain);
}

.brand--eikira.brand--v1 .brand__title,
.brand--eikira.brand--v1 .lockup__name,
.brand--eikira.brand--v1 .lockup__desc,
.brand--eikira .sizedemo--decorative .sizedemo__specimen,
.brand--eikira .brand__specimen--display {
  font-family: var(--b-display);
}

/* The plain specimen now has the real face rather than a Georgia fallback,
   which is what the comparison was claiming to show all along. */
.brand--eikira .sizedemo--plain .sizedemo__specimen {
  font-family: var(--b-display-plain);
}

/* DECORATIVE NEEDS THE WORD GAP HELD OPEN. Its caps carry tight sidebearings,
   so at display size a multi-word title reads as one run — which is what made
   these titles look like they were missing spaces. Plain Cinzel does not have
   the problem, so the correction is scoped to the face that does. */
.brand--eikira.brand--v1 .brand__title { word-spacing: 0.12em; }

/* --- Colourway lockups, renamed --------------------------------------------
   Both sides of the reversal are V2-era; the classes previously said v1/v2
   when they meant which colourway, which is exactly how Decorative ended up
   on an after-side element. Named for what they show now. */
.brand--eikira .lockup--gold-stack .lockup__name,
.brand--eikira .lockup--gold-stack .lockup__desc { color: var(--b-gold); }

.brand--eikira .lockup--split .lockup__name { color: var(--b-ivory); }
.brand--eikira .lockup--split .lockup__desc { color: var(--b-gold); }

/* The plain face has to be reachable from OUTSIDE the .brand--eikira scope,
   because the page header is a shell element. Declared on :root rather than
   inlined so there is still exactly one definition — and this whole file is
   loaded only by this page, so the §7 seal is unaffected: nothing here can
   reach the other six pages. */
:root { --b-display-plain: 'Cinzel', Georgia, 'Times New Roman', serif; }

/* --- The page's own header ------------------------------------------------
   Set in the after brand's face, per the rebrand. Scoped to this page's
   stylesheet and to one modifier, so no brand face reaches the shell's other
   six pages — the §7 seal is the file, not a promise. */
.pj-head__title--eikira {
  font-family: var(--b-display-plain);
  letter-spacing: 0.14em;
  text-transform: none;
}

/* --- Embeds inside the contained block ------------------------------------
   The same facade component as the BEFORE and AFTER panels, re-dressed in
   Eikira's own ink and gold because these sit INSIDE the dark block. §7: no
   kumkumam inside it — every shell colour the component uses is overridden
   here, including the hover wash and the focus ring. */
.brand--eikira .pj-embed__label { color: var(--b-gold); }

.brand--eikira .pj-embed__stage {
  background: var(--b-anchor);
  border-color: var(--b-edge-soft);
}

.brand--eikira .pj-embed__facade {
  background: var(--b-surface);
  color: var(--b-ivory);
}

.brand--eikira .pj-embed__facade:hover,
.brand--eikira .pj-embed__facade:focus-visible {
  background: color-mix(in srgb, var(--b-surface) 88%, var(--b-gold));
  box-shadow: inset 0 0 0 1px var(--b-edge);
}

/* Gold #D4AF37 on the facade ground (Ink 92% / Ivory 8%) — ratio measured at
   build time and recorded in the report; it clears 3:1 by a wide margin. */
.brand--eikira .pj-embed__facade:focus-visible {
  outline: 2px solid var(--b-gold);
  outline-offset: -4px;
}

.brand--eikira .pj-embed__facade-title { font-family: var(--b-display-plain); }

.brand--eikira .pj-embed__facade-cue {
  background: transparent;
  border-color: var(--b-gold);
  color: var(--b-gold);
}

.brand--eikira .pj-embed__facade:hover .pj-embed__facade-cue,
.brand--eikira .pj-embed__facade:focus-visible .pj-embed__facade-cue {
  background: var(--b-gold);
  border-color: var(--b-gold);
  color: var(--b-anchor);
}

.brand--eikira .pj-embed__open a { color: var(--b-ivory); }

/* Space between the three embeds inside the block: each is its own claim.
   The caption sat flush on the frame (the note's own margin is 0) and the
   link 8px under it, so frame, claim and link read as one crowded unit and
   84px was all that separated one artifact from the next. */
.brand--eikira .pj-embed__label { margin-block-end: var(--sp-xs); }
.brand--eikira .pj-embed .brand__note { margin-block-start: var(--sp-m); }
.brand--eikira .pj-embed__open { margin-block-start: var(--sp-s); }
.brand--eikira .pj-embed + .pj-embed { margin-block-start: var(--sp-2xl); }

/* --- The same system on other surfaces ------------------------------------
   The second group in the artifacts block, kept compact so the section reads
   as three headline artifacts and then evidence, not as five equal frames.
   Two embeds share a row from tablet width up; the posts sit in one grid of
   squares. Everything stays inside the contained block (§7). */

/* The group opens on the same step that separates the artifacts above it.
   The shared .brand__group rhythm put the divider 87px under Metis's link,
   closer than the 136px between two embeds, which read as the new group
   belonging to Metis rather than starting after it. */
.brand--eikira .brand__group--surfaces { margin-block-start: var(--sp-2xl); }

.surfaces__lede { margin-block: 0 var(--sp-l); }

/* The group head is the longest on the page and wraps on a phone. Its rules
   then shrink to nothing and the two lines sat flush left under a centered
   system; centering the text keeps it on the block's axis. */
.brand__group--surfaces .brand__group-head { text-align: center; }

/* "Load the templates" broke over two lines inside a 271px stage. */
.surfaces__embeds .pj-embed__facade-cue { white-space: nowrap; }

.surfaces__embeds {
  display: grid;
  gap: var(--sp-xl) var(--sp-l);
}

@media (min-width: 48rem) {
  .surfaces__embeds { grid-template-columns: 1fr 1fr; }
}

/* Side by side, the block's between-embeds step would push the second frame
   136px lower than the first. In the row the grid gap does that job. */
.brand--eikira .surfaces__embeds .pj-embed + .pj-embed { margin-block-start: 0; }

/* A SHEET, NOT A SITE OR A DECK. Both frames take the one-pager's own
   proportions (864 x 966 once its 48px margin is counted), so the page shows
   whole; the social column scrolls through its cards inside the same height,
   and the two stages stay level. */
.pj-embed__stage--sheet {
  height: auto;
  aspect-ratio: 864 / 966;
}

.surfaces__proof { margin: var(--sp-xl) 0 0; }
/* layout.css gives every figure > figcaption the shell's --ink-muted and a
   narrow measure. Inside the dark block that grey measured as the dimmest
   text on the sheet, so the two proof captions read as fine print beside the
   embed captions. They are the same kind of claim, so they take the sheet's
   own ivory and the notes' measure. */
.brand--eikira .surfaces__proof > figcaption {
  margin-block-start: var(--sp-m);
  color: inherit;
  max-width: 66ch;
}

.surfaces__grid { --frame-pad: 0; aspect-ratio: auto; }
.surfaces__grid > img { width: 100%; }

/* One ratio for the row (§6): six squares, three across at every width,
   post 6's blur-to-clear sequence on top and three single cards beneath. The
   caption reads "Top" and "Bottom", so the rows are the claim: two across on a
   phone split the sequence over two rows and left the caption describing a
   layout that was not there. The cost is small cards on a phone (about 77px at 375);
   each one opens full size on tap. */
.surfaces__posts {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-s);
  margin: 0;
  padding: 0;
  list-style: none;
}

.surfaces__posts .frame { --frame-pad: 0; }
.surfaces__posts .frame > img { width: 100%; }

/* Zoom affordance inside the dark block: gold, never the shell's kumkumam. */
.brand--eikira .surfaces__proof img.is-zoomable:focus-visible {
  outline: 2px solid var(--b-gold);
  outline-offset: 3px;
}

/* --- The launch reel ------------------------------------------------------
   The square cut, closing the group and reusing the video facade from the
   Vimeo embeds: same button, same poster-swap contract.

   SIZED OFF THE GRID ABOVE IT, not off the column: two of the six squares
   plus their gap. At full column width a 1:1 clip would be 1100px tall and
   dwarf everything in the section; at one card's width it would be smaller
   than the stills it follows. Below the grid's own breakpoint the squares
   are tiny, so the player takes the column.

   THE FACADE'S HOVER IS KUMKUMAM in project.css, which §7 forbids inside
   this block. Gold here, as with every other control in it. */
.surfaces__reel-stage {
  position: relative;
  inline-size: 100%;
  aspect-ratio: 1 / 1;
  margin-inline: auto;
  background: var(--b-anchor);
  border: 1px solid var(--b-edge-soft);
}

@media (min-width: 48rem) {
  .surfaces__reel-stage { inline-size: calc((200% - var(--sp-s)) / 3); }
}

.surfaces__reel-stage video {
  position: absolute;
  inset: 0;
  inline-size: 100%;
  block-size: 100%;
  display: block;
  background: var(--b-anchor);
}

.brand--eikira .surfaces__reel-facade:hover .pj-video__play,
.brand--eikira .surfaces__reel-facade:focus-visible .pj-video__play {
  background: color-mix(in srgb, var(--b-gold) 85%, transparent);
}

.brand--eikira .surfaces__reel-facade:focus-visible {
  outline: 2px solid var(--b-gold);
  outline-offset: -4px;
}

/* THE DISC SITS IN THE CLEAR BAND, not over the mark. Measured off the
   current poster (the "When everything else would have said yes." end
   card): "by EIKIRA" ends at 67.3% of its height and the line starts at
   81.2%, so the band is 13.9% tall and centered at 74.25%.

   IT SCALES WITH THE POSTER, NOT THE PAGE. It used to be clamp(44px, 8.8%,
   64px), and below a ~400px poster the 44px floor was taller than the band
   itself: at 375 the poster is 269px, the band 37px, and the disc covered
   "by EIKIRA". Now the disc is 10% of the stage (the band less about 2% a
   side), floored at 22px and capped at 64px, so 1440 is unchanged. The
   whole poster is the button, so a smaller disc is a smaller cue, not a
   smaller target. The triangle is sized in em, so the disc's font-size
   follows its width to keep the glyph in proportion.

   Centered — project.css's default — it covered the Metis lockup, which is
   the brand mark on a brand case study. */
.surfaces__reel-stage { container-type: inline-size; }

.surfaces__reel .pj-video__play {
  --disc: clamp(22px, 10cqi, 64px);
  inset-block-start: 74.25%;
  width: var(--disc);
  font-size: calc(var(--disc) / 4);
}

.surfaces__reel .pj-embed__label { margin-block-end: var(--sp-xs); }

/* KEEP THE LAST WORDS TOGETHER — BUT ONLY WHERE THEY FIT. "Light section
   background" and the "colorway reversal" heading left one word on a line
   of its own at phone width. A non-breaking space would fix that at 375
   and overflow at 320 (the swatch column, and the heading by 4px), so the
   join is a span that holds together from this width up and wraps
   normally below it: 375 fixed, 320 left as it was — the owner's call.
   Measured: both fit at every width from 360 up.

   NOT USED IN THE 16px TABLE. Holding "mark — silhouette" together there
   widened its column and pushed "Full seal — head + ring" and "Best
   linework" onto two lines at 375 instead — more breaks, not fewer. */
@media (min-width: 22.5rem) {
  .eik-keep { white-space: nowrap; }
}