/* ═══════════════════════════════════════════════════════════════
   LUMÉ ACADEMY · warm editorial luxury

   Layout language: the viewport IS the canvas. Content is composed
   against the screen edges, not placed inside a centred container.
   Photographs run off an edge and are cropped by the viewport; that
   crop is the composition. Every section has a different silhouette.

   No boxes. No decorative rules. No numbered indices. No uniform
   grids of equal tiles. Measure is constrained on paragraphs only.
   ═══════════════════════════════════════════════════════════════ */

:root{
  /* Bone is not one colour. It is a ladder, warmest and lightest at the
     top of the page and settling deeper as you descend. The descent is
     painted once on the root element; sections simply sit on it.

     COLOUR PASS: the ladder used to run #F8F4ED → #E9E2D5, four values
     all within 3 points of neutral grey - which is why the page read as
     monochrome next to a warm reference. It is now five rungs, strictly
     descending in luminance and ASCENDING in chroma, ending in honey
     rather than in warm grey: the page warms as it deepens instead of
     just dimming. The compensating move is --ink-dim below - deeper
     grounds eat low-alpha ink, so the alpha had to rise with them. */
  --bone-hi:#FCF6EC;   /* lightest, warmest cream · top of the page */
  --bone:#F8F0E3;
  --blush:#F4E4D2;     /* the mid-tone that carries the transitions */
  --bone-2:#EFD9C2;
  --bone-lo:#E8CBAF;   /* the deepest · honey, bottom of the page */
  --terra:#E9CDB6;     /* the saturated ground · curriculum plateau */

  --ink:#241E1A;
  /* .62 measured 4.45:1 on the OLD bone and 4.24:1 on the old bone-lo -
     already under 4.5 before this pass. .68 cleared the tokens but the
     browser measured 4.51:1 on the deepest real surface (the FAQ answers,
     where the ladder bottom meets the multiply grain) - on the gate, not
     over it. .70 measures 4.76:1 there and 5.87:1 at the top of the page.
     Do not lower it. */
  --ink-dim:rgba(36,30,26,.70);

  /* One accent, two weights. --gold is the fill and the value that sits
     on dark grounds (5.8:1 on --shadow). --gold-ink is the same hue for
     TEXT on bone, where bright gold reads 2.9:1 and fails.
     --gold-ink was #7D5E27, which cleared the OLD near-white ladder but
     falls to 3.88:1 on the new --bone-lo.
     #775108 was the first replacement and it measured 4.58:1 on --bone-lo
     ON PAPER - but the browser measured it at 4.44:1 on the .out lines,
     because body::after multiplies a paper grain over every ground and
     the real ground is ~2% darker than the token. Values here are now
     measured against the COMPOSITED ground, grain included: #6E4B07 is
     4.93:1 on --terra-plus-grain, the page's worst case.
     Never set --gold on small type over bone. */
  --gold:#B08D4F;
  --gold-ink:#6E4B07;  /* 6.9:1 on --bone-hi · 4.93:1 on --terra + grain */

  --shadow:#1A1512;
  --shadow-2:#241B14;  /* the warmer dark · heads the dark sections */
  --shadow-3:#14100E;  /* the coldest dark · closes them */

  --inv-ink:#F4F0EA;
  /* .58 measured 6.0:1 on flat --shadow but only 4.2:1 at the brightest
     point of the new pigment washes below. .66 holds 5.3:1 there and
     8.7:1 on flat shadow. Raise this before raising any wash alpha. */
  --inv-dim:rgba(244,240,234,.66);

  --serif:'Frank Ruhl Libre', 'Times New Roman', serif;
  --sans:'Assistant', system-ui, sans-serif;

  /* Display scale, set genuinely large. This is the differentiator. */
  --d1:clamp(3.4rem, 9.2vw, 10.5rem);
  --d2:clamp(2.5rem, 6.6vw, 7.2rem);
  --d3:clamp(1.55rem, 3.2vw, 3.1rem);
  --d4:clamp(1.3rem, 2.2vw, 2rem);

  /* Edge inset is a variable, deliberately different per section. */
  --e:clamp(1.4rem, 4vw, 5.5rem);

  --ease:cubic-bezier(.19,.7,.16,1);
}

*,*::before,*::after{box-sizing:border-box}

/* The page ground. Painted on the root so the gradient's positioning
   area is the whole document, not the viewport: the tone genuinely
   descends as you scroll rather than resetting every screen. Sections
   that own a background (curriculum, the three dark movements) sit on
   top of it, and that alternation is the page's value rhythm. */
html{
  -webkit-text-size-adjust:100%;overflow-x:clip;
  background:var(--bone);
  background-image:linear-gradient(180deg,
    var(--bone-hi) 0%,
    var(--bone)    11%,
    var(--blush)   30%,
    var(--blush)   45%,
    var(--bone-2)  66%,
    var(--bone-lo) 88%,
    var(--bone-lo) 100%);
  background-repeat:no-repeat;
  background-size:100% 100%;
}
@media (prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}

body{
  margin:0;overflow-x:clip;
  background:transparent;color:var(--ink);
  font-family:var(--sans);font-weight:400;
  font-size:clamp(1rem,.95rem + .22vw,1.1rem);
  line-height:1.8;
  -webkit-font-smoothing:antialiased;
}

/* Paper. Two layers: a fine print grain at 160px, and a slow linen
   mottle at 620px that stops the grain reading as a uniform screen.
   Fixed, so it behaves like the surface the page is printed on. */
body::after{
  content:"";position:fixed;inset:0;z-index:200;pointer-events:none;
  opacity:.3;mix-blend-mode:multiply;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.42'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='900' height='900'%3E%3Cfilter id='p'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.006' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23p)' opacity='.14'/%3E%3C/svg%3E");
  background-size:160px 160px,900px 900px;
}

h1,h2,h3,p,figure,blockquote,ol,ul,form{margin:0}
/* Hebrew has no italic tradition. Never synthesise one. */
blockquote,q,cite,em,i,address,dfn,var{font-style:normal}
ol,ul{padding:0;list-style:none}
a{color:inherit}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
:focus-visible{outline:2px solid var(--gold-ink);outline-offset:5px}
/* dark grounds carry the bright gold; it reads 5.7:1 there */
.gap :focus-visible,.inc :focus-visible,.voices :focus-visible,
.foot :focus-visible{outline-color:var(--gold)}

.skip{position:absolute;inset-inline-start:-9999px;top:0;z-index:300;background:var(--ink);color:var(--bone);padding:.8rem 1.4rem}
.skip:focus{inset-inline-start:0}

/* ── type primitives ───────────────────────────────────────── */
.d1,.d2,.d3{font-family:var(--serif);font-weight:300;letter-spacing:0}
.d1{font-size:var(--d1);line-height:.92}
.d2{font-size:var(--d2);line-height:.98}
.d3{font-size:var(--d3);line-height:1.1}
.ln{display:block}

.eyebrow{font-size:.8rem;font-weight:600;color:var(--gold-ink)}
.note{font-size:.82rem;color:var(--ink-dim);line-height:1.6}

/* ── call to action · a mark, not a box ────────────────────── */
.cta{
  display:inline-block;text-decoration:none;
  font-family:var(--serif);font-weight:500;
  font-size:clamp(1.05rem,1.5vw,1.35rem);
  padding-block-end:.35rem;
  background-image:linear-gradient(var(--gold),var(--gold));
  background-size:100% 1px;background-repeat:no-repeat;background-position:0 100%;
  transition:background-size .5s var(--ease),color .5s var(--ease);
}
.cta:hover,.cta:focus-visible{color:var(--gold-ink);background-size:0% 1px}
.cta--solid{
  align-self:start;background:var(--ink);color:var(--bone);
  padding:.95rem 2.2rem;font-size:1.05rem;min-block-size:3rem;
  transition:background .45s var(--ease),color .45s var(--ease);
}
/* antique gold, not bright gold · white on #B08D4F is 3.1:1 and fails */
.cta--solid:hover{background:var(--gold-ink);color:var(--bone-hi)}
.cta--bare{color:var(--ink-dim);background-image:none;font-family:var(--sans);font-size:.95rem}

/* ── masthead · sits on the edges, no bar ──────────────────── */
.mast{
  position:absolute;inset-block-start:clamp(1.2rem,2.4vw,2.2rem);
  inset-inline:clamp(1.4rem,4vw,5.5rem);
  z-index:60;display:flex;align-items:baseline;gap:2rem;
  mix-blend-mode:multiply;
}
.mark{
  font-family:var(--serif);font-weight:500;font-size:1.4rem;
  letter-spacing:.32em;padding-inline-start:.32em;text-decoration:none;
}
.mast__nav{margin-inline-start:auto;display:flex;gap:1.8rem;font-size:.88rem}
.mast__nav a{text-decoration:none;color:var(--ink-dim);transition:color .35s}
/* was var(--gold) · 2.89:1 on bone at .88rem, a pre-existing failure.
   --gold-ink is the same hue at 5.58:1. */
.mast__nav a:hover{color:var(--gold-ink)}

/* ── photographic plates ───────────────────────────────────── */
.plate{position:relative;overflow:hidden;isolation:isolate;background:var(--p-b,#C9A67C)}
.plate::before{
  content:"";position:absolute;inset:0;
  background:
    repeating-linear-gradient(-58deg, rgba(255,255,255,.14) 0 1px, transparent 1px 15px),
    radial-gradient(72% 55% at var(--p-hx,88%) var(--p-hy,16%), var(--p-hi,rgba(255,255,255,.66)) 0%, transparent 64%),
    radial-gradient(66% 72% at var(--p-lx,16%) var(--p-ly,98%), var(--p-lo,rgba(26,21,18,.46)) 0%, transparent 68%),
    linear-gradient(var(--p-ang,196deg), var(--p-a,#EFE3D2) 0%, var(--p-b,#C9A67C) 52%, var(--p-c,#7C5C3E) 100%);
}
/* Photographs are printed on the page, not pasted onto it: a hairline
   warm edge and a whisper of falloff at the corners. Sits above the
   image (z-index 1) and below the caption (z-index 3). */
.plate::after{
  content:"";position:absolute;inset:0;z-index:2;pointer-events:none;
  box-shadow:inset 0 0 0 1px rgba(36,30,26,.07);
  background:radial-gradient(128% 108% at 50% 42%, transparent 52%, rgba(26,21,18,.16) 100%);
}
/* The credit line hangs off the BOTTOM edge of its plate. It is not a
   bar: the gradient is the only ground it gets, and it fades out well
   before the middle of the frame. */
.plate__cap{
  position:absolute;z-index:3;inset-inline:0;inset-block-end:0;
  padding:3.4rem clamp(.95rem,2.2vw,1.5rem) clamp(.8rem,1.5vw,1.1rem);
  font-size:.7rem;line-height:1.5;font-weight:600;
  color:rgba(250,246,240,.93);
  text-shadow:0 1px 3px rgba(18,14,11,.6);
  /* The caption sits on whatever the photograph happens to be doing there,
     and on the light frames it was measuring as low as 1.31:1 - text-shadow
     rescues it visually but WCAG does not count a shadow. The scrim is now
     opaque across the band the TEXT occupies and only fades above it, so the
     photograph keeps the light treatment it was given while the words sit on
     a known ground. Measured 8.9:1 on the brightest plate. */
  background:linear-gradient(to top,
    rgba(20,16,13,.90) 0%,
    rgba(20,16,13,.86) 26%,
    rgba(20,16,13,.52) 52%,
    rgba(20,16,13,.20) 76%,
    transparent 100%);
}
/* A plate that bleeds off a screen edge takes its caption with it, and
   the caption is a line of text, not part of the photograph. On the two
   plates that bleed off the inline-START edge the credit BEGAN off-screen
   in RTL, so its first words were simply gone; on the tall plate the tail
   went. The image may be cropped by the viewport - that crop is the
   composition - but the credit under it may not be. Each bleeding plate
   hands its caption back exactly the inset the plate took away. The
   scrim it sits on stops short of the bled edge as a result, which is
   invisible: that strip is off-screen by definition. */
.maya__plate>.plate__cap,
.cut--pair .cut__a>.plate__cap{inset-inline-start:5vw}
.cut--tall .cut__fig>.plate__cap{inset-inline-end:4vw}

.plate--warm{--p-a:#EFE3D2;--p-b:#C9A67C;--p-c:#7C5C3E;--p-lo:rgba(40,26,16,.5)}
.plate--gold{--p-a:#F3E7CE;--p-b:#C9A45E;--p-c:#6E5326;--p-lo:rgba(45,32,10,.45)}
.plate--bone{--p-a:#F5EDE0;--p-b:#D4C4A9;--p-c:#8E7B5C;--p-hi:rgba(255,255,255,.85);--p-lo:rgba(36,30,26,.36)}
.plate--espresso{--p-a:#6B5344;--p-b:#382E26;--p-c:#171210;--p-hi:rgba(226,196,152,.5);--p-lo:rgba(0,0,0,.5)}

/* ══════════════════════════════════════════════════════════
   1 · HERO
   Silhouette: type hard against the inline-start edge, portrait
   bleeding off the inline-end edge and cropped by the screen.
   ══════════════════════════════════════════════════════════ */
.hero{position:relative;min-height:100svh;display:flex;align-items:center;isolation:isolate}
/* Soft daylight falling from above the masthead. Direction-neutral, so it
   holds in RTL and LTR alike, and it keeps the display type off a dead
   flat field without putting a shape on the page. */
/* Two lights, not one. The daylight from above is now cream rather than
   white, and a low blush pool sits under the type so the hero ground moves
   from lit cream at the masthead to warm rose at the fold instead of being
   one flat near-white field. Both are direction-neutral radials. */
.hero::before{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:
    radial-gradient(104% 70% at 50% 108%,
      rgba(249,196,168,.62) 0%, rgba(249,196,168,.26) 40%, rgba(249,196,168,0) 74%),
    radial-gradient(118% 76% at 50% -10%,
      rgba(255,250,238,.96) 0%, rgba(255,246,230,.44) 34%, rgba(255,246,230,0) 66%);
}
/* Composed top edge, bleeding off the bottom and off the inline-end
   edge. Light is pulled to the near edge so the display type can
   cross onto the photograph and stay legible. */
.hero__plate{
  position:absolute;z-index:0;
  inset-block-start:clamp(4.5rem,11vh,9rem);inset-block-end:0;
  inset-inline-end:0;width:min(53vw,790px);
  --p-ang:252deg;--p-hx:94%;--p-hy:38%;--p-lx:8%;--p-ly:96%;
  --p-hi:rgba(255,255,255,.9);
}
.hero__type{
  position:relative;z-index:2;
  padding-inline-start:clamp(1.4rem,5vw,6.5rem);
  padding-block:clamp(7rem,14vh,11rem) clamp(3rem,7vh,5rem);
  width:100%;
}
.hero .d1{margin-block:clamp(1.2rem,2.5vw,2rem) clamp(1.6rem,3vw,2.6rem);white-space:nowrap}
.hero .ln:nth-child(2){margin-inline-start:clamp(.5rem,3.5vw,4rem)}
.hero .ln:nth-child(3){margin-inline-start:clamp(1rem,7vw,8.5rem)}
/* Fewer words, so they get to be bigger. This is the only body-register
   line above the fold and it now carries the whole offer, so it steps up
   out of the .8-1.1rem band the rest of the page uses. max-width in ch
   rather than rem keeps the measure honest as the size grows. */
.hero__lead{
  max-width:30ch;color:var(--ink-dim);
  font-size:clamp(1.1rem,1.55vw,1.45rem);line-height:1.6;
}
.hero__act{display:flex;flex-wrap:wrap;align-items:center;gap:1.5rem;margin-block-start:clamp(1.8rem,3.5vw,2.8rem)}
.hero__act .note{max-width:13rem}

/* ══════════════════════════════════════════════════════════
   2 · THE GAP
   Silhouette: dark, no photography at all, three passages set
   at three different insets inside a lot of empty space.
   ══════════════════════════════════════════════════════════ */
/* First dark movement. Warm at the top where you enter it, cooling and
   deepening as you read down. The gold is light, not a colour: one wide,
   low-alpha wash, no edge. */
.gap{
  background:
    radial-gradient(88% 58% at 76% 4%, rgba(150,64,26,.34) 0%, transparent 64%),
    radial-gradient(72% 46% at 76% 4%, rgba(190,142,74,.10) 0%, transparent 70%),
    linear-gradient(180deg, var(--shadow-2) 0%, var(--shadow) 62%, var(--shadow-3) 100%);
  color:var(--inv-ink);
  padding-block:clamp(6rem,14vw,13rem);
  padding-inline:clamp(1.4rem,8vw,9rem) clamp(1.4rem,4vw,4rem);
}
.gap__head .ln:nth-child(2){margin-inline-start:clamp(1rem,6vw,7rem)}
/* Was a four-sentence paragraph at body size. It is now the one sentence
   that paragraph was building towards, so it is set as a statement rather
   than as prose: serif, light, and roughly double the body size. Still
   --inv-dim, which measures 5.3:1 at the brightest point of this ground. */
.gap__body{
  max-width:22ch;color:var(--inv-dim);
  font-family:var(--serif);font-weight:300;
  font-size:clamp(1.5rem,3.4vw,2.9rem);line-height:1.22;
  margin-block-start:clamp(2.5rem,5vw,4rem);
  margin-inline-start:clamp(0rem,10vw,12rem);
}
.gap__set{margin-block-start:clamp(4rem,9vw,8rem);display:flex;flex-direction:column;gap:clamp(2.5rem,5vw,4.5rem)}
.gap__one{max-width:30rem}
.gap__one:nth-child(1){margin-inline-start:0}
.gap__one:nth-child(2){margin-inline-start:clamp(0rem,18vw,21rem)}
.gap__one:nth-child(3){margin-inline-start:clamp(0rem,9vw,10rem)}
/* The three gap headings ARE the idea; the line under each is a caption.
   --d3 instead of --d4 opens that gap to roughly 2:1, which is what makes
   the hierarchy readable across the room rather than only up close. */
.gap__one h3{font-family:var(--serif);font-weight:500;font-size:var(--d3);line-height:1.1;margin-block-end:.7rem;color:var(--inv-ink)}
.gap__one p{color:var(--inv-dim);font-size:1rem;max-width:30ch}
/* The one accent mark in this section. Large display type, so the 3:1
   gate applies and bright --gold clears it with room on every part of
   this ground. */
.gap__close{
  color:var(--gold);
  font-family:var(--serif);font-weight:300;
  font-size:clamp(1.4rem,3.2vw,2.6rem);line-height:1.3;
  max-width:24ch;margin-block-start:clamp(4rem,9vw,8rem);
  margin-inline-start:clamp(0rem,28vw,32rem);
}

/* ══════════════════════════════════════════════════════════
   3 · INSTRUCTOR
   Silhouette: reversed against the hero. Portrait bleeds off the
   inline-start edge, copy sits hard against the inline-end, and
   the name is pulled back over the photograph by a negative
   inline-start margin. The copy column never crosses the plate.
   ══════════════════════════════════════════════════════════ */
/* The largest expanse of empty ground on the page - the composition puts
   the portrait low and inline-start and leaves the whole upper field bare.
   Bare is the point; near-white is not. A single low apricot pool fills
   it with warmth without putting a shape there. Pigment is the sanctioned
   #FCC496 - see the invariant note on .who. */
.maya{
  position:relative;padding-block:clamp(5rem,11vw,9rem) clamp(5rem,11vw,9rem);
  /* Vertical extent is deliberately short of the section's own edges. A
     radial that still has alpha where its box is clipped draws a hard
     horizontal seam against the html gradient above and below, which is
     exactly what a "wash" must not do. Reach-to-zero here is 0.74 x 40%
     = 29.6pp either side of a 50% centre, so 20.4%-79.6%: contained. */
  background:radial-gradient(74% 40% at 22% 50%,
    rgba(252,196,150,.62) 0%, rgba(252,196,150,.26) 46%, transparent 74%);
}
.maya__top{
  display:grid;
  grid-template-columns:min(40vw,560px) minmax(0,1fr);
  column-gap:clamp(1.5rem,5vw,5.5rem);
  align-items:center;
}
.maya__plate{
  margin-inline-start:-5vw;width:calc(100% + 5vw);
  aspect-ratio:4/5;
  --p-ang:214deg;--p-hx:26%;--p-hy:46%;--p-hi:rgba(255,255,255,.9);
}
.maya__col{padding-inline-end:clamp(1.4rem,4vw,4.5rem)}
/* the one deliberate collision: the name crosses onto the photograph */
.maya__name{
  position:relative;z-index:2;
  margin-inline-start:clamp(-14rem,-13vw,-1rem);
  margin-block-end:clamp(1.6rem,3vw,2.6rem);
  mix-blend-mode:multiply;
}
.maya__text{color:var(--ink-dim);max-width:34rem}
.maya__text p+p{margin-block-start:1.1rem}
.maya__text .eyebrow{margin-block-end:1.5rem}
/* The biography is now two sentences, so the first one can carry weight. */
.maya__lead{font-size:clamp(1.15rem,1.7vw,1.5rem);line-height:1.5;max-width:26ch}
/* The four things she actually teaches, taken out of the middle of a
   paragraph where they were unfindable. Set at the item scale, not the
   body scale, because this list IS the answer to "what will I learn". */
.maya__pts{
  margin-block-start:1.4rem;display:flex;flex-wrap:wrap;
  gap:.35rem clamp(1.2rem,2.6vw,2.4rem);
  font-family:var(--serif);font-weight:500;color:var(--ink);
  font-size:clamp(1.05rem,1.6vw,1.4rem);line-height:1.35;
}
.maya__pts li{position:relative;padding-inline-start:.95rem}
.maya__pts li::before{
  content:"";position:absolute;inset-inline-start:0;inset-block-start:.62em;
  width:.32rem;height:.32rem;border-radius:50%;background:var(--gold-ink);
}
/* Gold now carries a display line instead of only eyebrows and outcome
   notes. --gold-ink, not --gold: bright gold is 2.9:1 on bone. */
.maya__pull{
  color:var(--gold-ink);
  font-family:var(--serif);font-weight:300;
  font-size:clamp(1.75rem,4.6vw,3.9rem);line-height:1.15;
  margin-block-start:clamp(3.5rem,8vw,7rem);
  padding-inline:clamp(1.4rem,7vw,8rem) clamp(1.4rem,5vw,6rem);
}

/* ══════════════════════════════════════════════════════════
   PROOF · six student works interrupt the page instead of
   sitting in a gallery block. Each interruption has its own
   shape so the recurrence never becomes a rhythm you can
   predict. This is the page's structural deviation.
   ══════════════════════════════════════════════════════════ */
.cut{position:relative}
.cut__intro{
  max-width:24ch;color:var(--ink-dim);
  font-family:var(--serif);font-weight:300;
  font-size:clamp(1.2rem,2.1vw,1.75rem);line-height:1.3;
  padding-inline-start:clamp(1.4rem,5vw,6rem);
  padding-block-end:clamp(1.6rem,3vw,2.4rem);
  margin-inline-start:auto;text-align:end;
  padding-inline-end:clamp(1.4rem,5vw,6rem);
}
/* 1 · full bleed, pinned and scrubbed */
.cut--band{padding-block-start:clamp(3rem,7vw,6rem)}
.galband{overflow:hidden}
.galband__fig{aspect-ratio:21/8;width:100%}
/* 2 · tall plate cropped by the inline-end edge, alone in the field */
.cut--tall{padding-block:clamp(4rem,9vw,8rem)}
.cut--tall .cut__fig{
  width:min(46vw,650px);aspect-ratio:4/5;
  margin-inline-start:auto;margin-inline-end:-4vw;
}
/* 3 and 6 · full bleed, wide */
.cut--wide{padding-block:clamp(3.5rem,8vw,7rem)}
.cut--wide .cut__fig{width:100%;aspect-ratio:3/1}
.cut--last{padding-block-end:0}
/* 4 · two plates, uneven, one cropped by the inline-start edge */
.cut--pair{
  padding-block:clamp(4rem,9vw,8rem);
  display:grid;grid-template-columns:min(38vw,520px) minmax(0,1fr);
  column-gap:clamp(1.5rem,4vw,4rem);align-items:start;
}
.cut--pair .cut__a{margin-inline-start:-5vw;width:calc(100% + 5vw);aspect-ratio:3/4}
.cut--pair .cut__b{
  width:min(34vw,460px);aspect-ratio:5/4;
  margin-inline-start:auto;margin-block-start:clamp(4rem,10vw,9rem);
  margin-inline-end:clamp(1.4rem,6vw,7rem);
}
/* 5 · one small plate hard against the edge, vast emptiness */
.cut--small{padding-block:clamp(4rem,10vw,9rem)}
.cut--small .cut__fig{
  width:min(30vw,400px);aspect-ratio:1/1;
  margin-inline-start:clamp(1.4rem,6vw,7rem);
}

/* ══════════════════════════════════════════════════════════
   5 · CURRICULUM
   Silhouette: full-bleed typographic rows. A single enormous
   word holds on the far edge and swaps as the list advances.
   ══════════════════════════════════════════════════════════ */
/* A plateau, not a panel. The ground steps UP into terracotta and
   dissolves back into the page gradient at both edges, so there is no
   seam. This is the page's one genuinely saturated field: everything
   else on the bone side of the page is a tint, this is a colour.

   Measured here: --ink 10.9:1, --ink-dim 4.68:1, --gold-ink 4.68:1.
   All three clear their gate, so the section needs no local overrides. */
.curr{
  /* The modelling radial LIGHTENS. A darkening one would put text over a
     ground deeper than --terra and invalidate every measurement above, so
     --terra stays the section's contrast floor by construction. */
  background:
    radial-gradient(44% 22% at 84% 26%, rgba(255,240,222,.46) 0%, transparent 70%),
    linear-gradient(180deg,
      rgba(233,205,182,0) 0%, var(--terra) 5%,
      var(--terra) 92%, rgba(233,205,182,0) 100%);
  padding-block:clamp(5rem,11vw,10rem);
}
.curr__intro{padding-inline-start:clamp(1.4rem,6vw,7.5rem);max-width:52rem}
.curr__intro .ln:nth-child(2){margin-inline-start:clamp(1rem,5vw,6rem)}
.curr__intro p{color:var(--ink-dim);margin-block-start:1.6rem;max-width:24rem}
.curr__body{position:relative;margin-block-start:clamp(3rem,7vw,6rem)}
.curr__rail{
  position:absolute;inset-block:0;inset-inline-end:0;
  width:34vw;pointer-events:none;
}
.curr__word{
  position:sticky;top:32vh;display:block;
  font-family:var(--serif);font-weight:300;
  font-size:clamp(3rem,11vw,12rem);line-height:.9;
  /* aria-hidden decoration, so no contrast gate applies. Burnt sienna
     rather than dilute ink: on a terracotta ground, low-alpha black is
     mud, and the word wants to look like a deeper pour of the same
     pigment as the plateau. */
  color:rgba(150,78,38,.20);
  padding-inline-end:clamp(1.4rem,4vw,4rem);
  text-align:end;
}
.curr__list{position:relative;z-index:2}

/* accordion rows · shared by curriculum and faq, no boxes, no rules */
.mod{position:relative}
.mod h3{margin:0;font:inherit;font-weight:400}
.mod__head{
  width:100%;display:flex;align-items:baseline;gap:1.5rem;
  padding-block:clamp(.9rem,1.7vw,1.5rem);
  padding-inline:clamp(1.4rem,6vw,7.5rem) clamp(1.4rem,4vw,4rem);
  text-align:start;
}
.mod__t{
  font-family:var(--serif);font-weight:300;
  font-size:var(--d3);line-height:1.12;flex:1;
  transition:color .4s var(--ease);
}
.mod__ic{position:relative;width:.95rem;height:.95rem;flex:none;align-self:center}
.mod__ic::before,.mod__ic::after{
  content:"";position:absolute;inset-block-start:50%;inset-inline-start:0;
  /* .45 measured 2.77:1 even on the lightest bone - under the 3:1 gate for
     UI components, and it got worse as the grounds deepened. .58 clears
     3:1 on every rung (3.54:1 on --bone-lo, 4.02:1 on --bone-hi). */
  width:100%;height:1px;background:rgba(36,30,26,.58);transition:transform .5s var(--ease);
}
.mod__ic::after{transform:rotate(90deg)}
.mod__head[aria-expanded="true"] .mod__ic::after{transform:rotate(0deg)}
.mod__head:hover .mod__t,.mod.is-open .mod__t{color:var(--gold-ink)}
.mod__panel{display:grid;grid-template-rows:0fr;transition:grid-template-rows .55s var(--ease)}
.mod.is-open>.mod__panel{grid-template-rows:1fr}
.mod:has(.mod__head[aria-expanded="true"])>.mod__panel{grid-template-rows:1fr}
.mod__in{overflow:hidden}
.mod__in>p{
  color:var(--ink-dim);max-width:38rem;font-size:.99rem;
  padding-inline-start:clamp(1.4rem,16vw,20rem);
}
.mod__in>p:first-child{padding-block-end:.8rem}
.mod__in>p:last-child{padding-block-end:clamp(1.4rem,3vw,2.6rem)}
/* Each module's contents used to be one 30-word paragraph. It is now the
   same information as three or four scannable items, which is both fewer
   words and faster to read. Shares the module's deep inline inset so the
   list hangs off the same optical column the prose did. */
.mod__pts{
  color:var(--ink-dim);max-width:38rem;
  padding-inline-start:clamp(1.4rem,16vw,20rem);
  padding-block-end:1rem;
  display:flex;flex-direction:column;gap:.4rem;
  font-size:1.02rem;line-height:1.45;
}
.mod__pts li{position:relative;padding-inline-start:1rem}
.mod__pts li::before{
  content:"";position:absolute;inset-inline-start:0;inset-block-start:.66em;
  width:.3rem;height:.3rem;border-radius:50%;background:var(--gold-ink);
}
/* the outcome line. gold at .9rem over bone is 2.9:1 and unreadable;
   --gold-ink carries the same hue at 4.9:1 */
.out{color:var(--gold-ink) !important;font-weight:600;font-size:.9rem !important}

/* ══════════════════════════════════════════════════════════
   6 · INCLUDED
   Silhouette: a typographic staircase. Two flights of four,
   each item stepping further from the edge than the last.
   ══════════════════════════════════════════════════════════ */
/* The second dark movement, and the reason it exists: between THE GAP and
   VOICES the page ran nine consecutive bone sections. This inventory is
   the natural place to break that - what you take home reads better held
   in the dark than laid on paper. Revert by deleting this one background
   block and the four colour lines under it. */
.inc{
  padding-block:clamp(5rem,11vw,10rem);
  background:
    radial-gradient(74% 52% at 50% 0%, rgba(150,64,26,.34) 0%, transparent 62%),
    radial-gradient(60% 40% at 50% 0%, rgba(190,142,74,.10) 0%, transparent 68%),
    linear-gradient(180deg, #241A12 0%, var(--shadow) 52%, var(--shadow-3) 100%);
  color:var(--inv-ink);
}
.inc__head{padding-inline-start:clamp(1.4rem,10vw,12rem);text-align:start}
.inc__head .ln:nth-child(2){margin-inline-start:clamp(-5rem,-4vw,-.5rem)}
.inc__list{margin-block-start:clamp(3rem,7vw,6rem);display:flex;flex-direction:column;gap:clamp(1.8rem,3.4vw,3rem)}
.inc__list li{max-width:31rem}
.inc__list li:nth-child(1){margin-inline-start:clamp(1.4rem,4vw,4rem)}
.inc__list li:nth-child(2){margin-inline-start:clamp(1.4rem,12vw,14rem)}
.inc__list li:nth-child(3){margin-inline-start:clamp(1.4rem,20vw,24rem)}
.inc__list li:nth-child(4){margin-inline-start:clamp(1.4rem,28vw,34rem)}
.inc__list li:nth-child(5){margin-inline-start:clamp(1.4rem,4vw,4rem)}
.inc__list li:nth-child(6){margin-inline-start:clamp(1.4rem,12vw,14rem)}
.inc__list li:nth-child(7){margin-inline-start:clamp(1.4rem,20vw,24rem)}
.inc__list li:nth-child(8){margin-inline-start:clamp(1.4rem,28vw,34rem)}
/* Eight items, each now a short label over a single line. The label is
   the thing you take home, so it gets the display step up to --d3. */
.inc__list h3{
  font-family:var(--serif);font-weight:500;font-size:var(--d3);
  line-height:1.1;margin-block-end:.5rem;color:var(--inv-ink);
}
/* the numerals are <bdi>, not <span> - the old `h3 span` selector matched
   nothing, so the figures never got their lighter weight */
.inc__list h3 bdi{font-weight:300;color:var(--gold)}
.inc__list p{font-size:1rem;color:var(--inv-dim);line-height:1.6;max-width:34ch}

/* ══════════════════════════════════════════════════════════
   7 · WHO
   Silhouette: five statements thrown alternately against the
   two screen edges with a lot of bone in between.
   ══════════════════════════════════════════════════════════ */
/* Between two dark movements, and previously the flattest field on the
   page. Two low rose washes thrown at opposite corners follow the
   alternating statements, so the ground moves with the composition
   instead of sitting under it.

   INVARIANT for every bone-side wash on this page: the wash PIGMENT must
   itself pass the contrast gates as a solid ground. Compositing walks a
   straight line in linear RGB between the ground and the pigment, and
   contrast against a fixed dark foreground is monotone in luminance
   along that line - so if both endpoints pass, every alpha in between
   passes, at every rung of the ladder, without further measurement.

   The two sanctioned pigments, both measured solid:
     #FCC496 apricot    ink-dim 4.61:1 · gold-ink 4.55:1
     #F9C4A8 peach-rose ink-dim 4.61:1 · gold-ink 4.55:1
   An earlier draft used unchecked darkening washes here and took
   --ink-dim to 4.30:1. Do not add a pigment without measuring it solid. */
.who{
  padding-block:clamp(5rem,11vw,10rem);
  /* Both contained vertically - see the seam note on .maya. */
  background:
    radial-gradient(58% 32% at 88% 30%, rgba(252,196,150,.62) 0%, transparent 70%),
    radial-gradient(64% 32% at 6% 72%, rgba(249,196,168,.58) 0%, transparent 70%);
}
.who__head{padding-inline-start:clamp(1.4rem,4vw,4.5rem)}
.who__head .ln:nth-child(2){margin-inline-start:clamp(1rem,10vw,12rem)}
.who__list{margin-block-start:clamp(3.5rem,8vw,7rem);display:flex;flex-direction:column;gap:clamp(3rem,7vw,6rem)}
.who__list li{max-width:32rem}
.who__list li:nth-child(odd){margin-inline-start:clamp(1.4rem,7vw,8rem)}
.who__list li:nth-child(even){margin-inline-start:auto;margin-inline-end:clamp(1.4rem,7vw,8rem);text-align:end}
.who__list h3{font-family:var(--serif);font-weight:500;font-size:var(--d3);line-height:1.08;margin-block-end:.6rem}
.who__list p{color:var(--ink-dim);font-size:1rem;max-width:38ch}
.who__list li:nth-child(even) p{margin-inline-start:auto}
.who__not{
  margin-block-start:clamp(4rem,8vw,7rem);
  margin-inline:auto;max-width:34rem;text-align:center;
  font-family:var(--serif);font-weight:300;
  font-size:clamp(1.3rem,2.7vw,2.1rem);line-height:1.3;color:var(--gold-ink);
}

/* ══════════════════════════════════════════════════════════
   8 · VOICES
   Silhouette: dark. Five quotes at five scales scattered across
   the full width, two small plates cropped by the edges.
   ══════════════════════════════════════════════════════════ */
/* Third dark movement, and deliberately not a repeat of THE GAP: this one
   enters at its coldest and warms towards the bottom, so it hands off to
   the bone of ENROLL instead of cutting to it. */
.voices{
  position:relative;color:var(--inv-ink);
  background:
    radial-gradient(66% 46% at 14% 94%, rgba(150,64,26,.34) 0%, transparent 62%),
    radial-gradient(54% 38% at 14% 94%, rgba(190,142,74,.10) 0%, transparent 68%),
    linear-gradient(180deg, var(--shadow-3) 0%, var(--shadow) 44%, var(--shadow-2) 100%);
  padding-block:clamp(5rem,11vw,10rem) clamp(6rem,12vw,11rem);
  overflow:hidden;
}
.voices__head{padding-inline-start:clamp(1.4rem,5vw,6rem);margin-block-end:clamp(3rem,7vw,6rem)}
.v{position:relative;z-index:2}
.v blockquote{font-family:var(--serif);font-weight:300;line-height:1.3}
.v figcaption{margin-block-start:1.1rem;font-size:.84rem;color:var(--inv-dim)}
.v figcaption b{display:block;font-weight:600;color:var(--inv-ink);font-size:.92rem;margin-block-end:.15rem}
.v1{max-width:44rem;margin-inline-start:clamp(1.4rem,5vw,6rem)}
.v1 blockquote{font-size:clamp(1.6rem,3.9vw,3.2rem)}
.v2{max-width:31rem;margin-block-start:clamp(3.5rem,8vw,7rem);margin-inline-start:auto;margin-inline-end:clamp(1.4rem,6vw,7rem);text-align:end}
.v2 blockquote{font-size:clamp(1.25rem,2.2vw,1.8rem)}
.v3{max-width:27rem;margin-block-start:clamp(3rem,6vw,5rem);margin-inline-start:clamp(1.4rem,16vw,20rem)}
.v3 blockquote{font-size:clamp(1.05rem,1.6vw,1.3rem)}
.v4{max-width:29rem;margin-block-start:clamp(3rem,6vw,5rem);margin-inline-start:auto;margin-inline-end:clamp(1.4rem,20vw,25rem);text-align:end}
.v4 blockquote{font-size:clamp(1.1rem,1.75vw,1.42rem)}
.v5{max-width:36rem;margin-block-start:clamp(3.5rem,7vw,6rem);margin-inline-start:clamp(1.4rem,8vw,10rem)}
.v5 blockquote{font-size:clamp(1.3rem,2.7vw,2.2rem)}
.v__plate{position:absolute;z-index:1;inset-block-start:clamp(6rem,20vw,20rem);inset-inline-end:-4vw;width:min(20vw,270px);aspect-ratio:4/5;opacity:.85}
.v__plate2{position:absolute;z-index:1;inset-block-end:clamp(4rem,10vw,10rem);inset-inline-start:-3vw;width:min(17vw,230px);aspect-ratio:3/4;opacity:.85}

/* ══════════════════════════════════════════════════════════
   9 · ENROLL
   Silhouette: split. Plate bleeds off the inline-end edge full
   height; the form sits unboxed against the inline-start.
   ══════════════════════════════════════════════════════════ */
.enroll{position:relative;padding-block:clamp(5rem,11vw,10rem);min-height:min(105svh,1000px);display:flex;align-items:center}
.enroll__plate{position:absolute;inset-block:0;inset-inline-end:0;width:min(38vw,540px)}
.enroll__type{
  position:relative;z-index:2;width:100%;
  padding-inline-start:clamp(1.4rem,5vw,6rem);
  padding-inline-end:clamp(1.4rem,42vw,46rem);
}
.enroll__type .ln:nth-child(2){margin-inline-start:clamp(.5rem,3vw,3.5rem)}
.enroll__type>p{
  max-width:32ch;color:var(--ink-dim);
  font-size:clamp(1.1rem,1.6vw,1.45rem);line-height:1.55;
  margin-block-start:clamp(1.5rem,3vw,2.4rem);
}

/* form · underlines only, never a panel.
   An empty underline field puts ~40px of nothing between a label and the
   rule that belongs to it. With a 1.4rem gap between fields, every label
   sat closer to the PREVIOUS field's rule than to its own and the whole
   column read as offset by one. The gap has to beat the intra-field
   distance by a clear margin, so it does: 3.2rem against ~2.5rem. */
.form{display:flex;flex-direction:column;gap:3.2rem;margin-block-start:clamp(2.5rem,5vw,4rem);max-width:34rem}
.f{display:flex;flex-direction:column;gap:.35rem}
.f label{font-size:.78rem;font-weight:600;color:var(--ink-dim);line-height:1.5}
.f input,.f select,.f textarea{
  font-family:var(--sans);font-size:1rem;line-height:1.4;color:var(--ink);
  /* .3 measured 1.89:1 on the lightest bone. A field's underline IS the
     field, so it has to clear the 3:1 UI gate: .58 gives 3.54:1 on the
     honey ground the form actually sits on. */
  background:transparent;border:0;border-block-end:1px solid rgba(36,30,26,.58);
  padding:.3rem 0 .45rem;width:100%;border-radius:0;
  transition:border-color .35s var(--ease);
}
.f textarea{resize:vertical;line-height:1.6}
.f select{
  appearance:none;padding-inline-end:1.6rem;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='%236E4B07' stroke-width='1.4' fill='none'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:left center;
}
.f input:focus,.f select:focus,.f textarea:focus{outline:0;border-block-end-color:var(--gold-ink);border-block-end-width:2px;padding-block-end:calc(.45rem - 1px)}
/* the note belongs to the button above it, not to the field rhythm */
.form .note{margin-block-start:-2rem;max-width:28rem}

/* ══════════════════════════════════════════════════════════
   10 · FAQ
   Silhouette: heading enormous at the top edge, then full-bleed
   rows whose answers hang off the opposite side to the modules.
   ══════════════════════════════════════════════════════════ */
.faq{padding-block:clamp(5rem,11vw,10rem)}
.faq__head{padding-inline-start:clamp(1.4rem,14vw,17rem);margin-block-end:clamp(3rem,7vw,6rem)}
.faq__head .ln:nth-child(2){margin-inline-start:clamp(-8rem,-7vw,-1rem)}
.faq .mod__t{font-size:clamp(1.15rem,2.1vw,1.7rem);font-weight:300}
.faq .mod__head{padding-inline:clamp(1.4rem,14vw,17rem) clamp(1.4rem,5vw,5.5rem)}
.faq .mod__in>p{padding-inline-start:0;padding-inline-end:clamp(1.4rem,14vw,17rem);margin-inline-start:clamp(1.4rem,14vw,17rem)}

/* ══════════════════════════════════════════════════════════
   11 · FOOTER
   Silhouette: the wordmark set to the full width of the screen.
   ══════════════════════════════════════════════════════════ */
.foot{
  background:
    radial-gradient(70% 44% at 50% 0%, rgba(150,64,26,.30) 0%, transparent 66%),
    linear-gradient(180deg, var(--shadow-2) 0%, var(--shadow-3) 100%);
  color:var(--inv-ink);
  padding-block:clamp(4rem,8vw,7rem) clamp(4.5rem,6vw,4rem);
  overflow:hidden;
}
.foot__mark{
  font-family:var(--serif);font-weight:300;
  font-size:16vw;line-height:.86;text-align:center;
  color:rgba(244,240,234,.11);
  letter-spacing:.06em;padding-inline-start:.06em;
  margin-block-end:clamp(2rem,5vw,4rem);
}
.foot__cols{
  display:flex;flex-wrap:wrap;gap:2.5rem 4rem;justify-content:space-between;
  padding-inline:clamp(1.4rem,4vw,4.5rem);
}
.foot__addr{font-size:.86rem;color:var(--inv-dim);line-height:1.9}
.foot__nav{display:flex;flex-wrap:wrap;gap:.5rem 1.7rem;font-size:.86rem;max-width:40rem}
.foot__nav a{color:var(--inv-dim);text-decoration:none;transition:color .35s}
.foot__nav a:hover{color:var(--gold)}
.foot__disc{
  margin-block-start:clamp(3rem,6vw,5rem);
  padding-inline:clamp(1.4rem,4vw,4.5rem);
  font-size:.78rem;line-height:1.8;color:rgba(244,240,234,.4);max-width:44rem;margin-inline-start:auto;
}
.foot__cr{display:block;margin-block-start:.8rem;color:var(--inv-dim)}
.foot__cr a{color:var(--gold);text-decoration:none}

/* ── demo badge ────────────────────────────────────────────── */
.demo-badge{
  position:fixed;inset-inline-start:14px;inset-block-end:calc(14px + env(safe-area-inset-bottom));
  z-index:210;background:rgba(26,21,18,.9);color:var(--bone);
  border:1px solid rgba(176,141,79,.4);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  padding:.5rem .85rem;font-size:.72rem;line-height:1;text-decoration:none;
  transition:border-color .35s,background .35s;
}
.demo-badge b{color:var(--gold);font-weight:600}
.demo-badge:hover{border-color:var(--gold);background:var(--shadow)}

/* ── demo modal ────────────────────────────────────────────── */
.dlg{
  border:0;background:var(--bone-hi);color:var(--ink);
  padding:0;max-width:min(34rem,calc(100vw - 2rem));width:100%;margin:auto;
  /* short viewports: the dialog scrolls itself rather than overflowing */
  max-block-size:calc(100svh - 2rem);overflow:auto;
  box-shadow:0 40px 90px -30px rgba(20,16,13,.6);
}
.dlg::backdrop{background:rgba(26,21,18,.75);backdrop-filter:blur(6px)}
.dlg__in{padding:clamp(1.8rem,4vw,3rem)}
.dlg__t{font-family:var(--serif);font-weight:300;font-size:clamp(1.7rem,3.2vw,2.4rem);line-height:1.1;margin-block-end:1.3rem}
.dlg p{color:var(--ink-dim);margin-block-end:1rem}
.dlg__act{display:flex;flex-wrap:wrap;gap:1.6rem;align-items:center;margin-block-start:1.8rem}

/* ══════════════════════════════════════════════════════════
   MOTION START STATES

   These are the ONLY rules on the page that hide content, and every
   one of them is scoped under `.js-motion`. That class is added to
   <html> exactly when motion is going to run: JS is executing, GSAP
   and ScrollTrigger are both present, and prefers-reduced-motion is
   not `reduce`. A watchdog removes it again if the setup never
   completes.

   The inversion is the whole point. Authored unconditionally, a
   hidden start state that never gets opened is permanently invisible
   content - one 404 on gsap.min.js, one thrown exception, one gated
   code path, and the page is a set of blank letterbox strips. Scoped
   this way the finished state is the DEFAULT, and every failure path
   degrades to "no animation" instead of "no content".

   Never write `.reveal{opacity:0}` or `.cp{clip-path:...}` outside
   this block.
   ══════════════════════════════════════════════════════════ */
.js-motion .reveal,
.js-motion .ln{opacity:0;transform:translateY(20px)}
.js-motion .cp{clip-path:inset(49.4% 0 49.4% 0)}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms !important;transition-duration:.001ms !important}
  .reveal,.ln{opacity:1 !important;transform:none !important}
  .cp{clip-path:none !important}
}

/* ══════════════════════════════════════════════════════════
   RESPONSIVE · the composition simplifies, it does not
   collapse into a stack of identical centred boxes.
   ══════════════════════════════════════════════════════════ */
@media (max-width:1080px){
  :root{--d1:clamp(3rem,10vw,5.6rem);--d2:clamp(2.2rem,7.4vw,4.2rem)}
  .mast__nav{display:none}

  .hero{min-height:auto;flex-direction:column;align-items:stretch}
  .hero__plate{position:relative;inset:auto;width:100%;aspect-ratio:16/11;order:2}
  .hero__type{order:1;padding-block:clamp(6rem,16vh,9rem) clamp(2.5rem,5vw,4rem)}
  .hero .d1{white-space:normal}

  .maya{padding-block:clamp(4rem,9vw,6rem)}
  .maya__top{grid-template-columns:1fr;row-gap:clamp(1.8rem,4vw,3rem)}
  .maya__plate{width:min(80vw,460px);margin-inline-start:-6vw}
  .maya__col{padding-inline:clamp(1.4rem,6vw,4rem)}
  .maya__name{margin-inline-start:clamp(-2rem,-6vw,-1rem)}
  .maya__pull{padding-inline:clamp(1.4rem,6vw,4rem);margin-block-start:2.5rem}
  /* the display steps stay proportional, they do not stay absolute */
  .gap__body{font-size:clamp(1.45rem,4.4vw,2.2rem)}
  .cut__intro{font-size:clamp(1.15rem,2.6vw,1.5rem)}

  .cut__intro{padding-inline:clamp(1.4rem,6vw,4rem)}
  .cut--tall .cut__fig{width:min(76vw,420px);margin-inline-end:-6vw}
  /* the bleeds deepen to 6vw here, so the caption insets follow them */
  .maya__plate>.plate__cap,
  .cut--pair .cut__a>.plate__cap{inset-inline-start:6vw}
  .cut--tall .cut__fig>.plate__cap{inset-inline-end:6vw}
  .cut--wide .cut__fig{aspect-ratio:2/1}
  .cut--pair{grid-template-columns:1fr;row-gap:clamp(1.5rem,4vw,2.5rem)}
  .cut--pair .cut__a{width:min(72vw,400px);margin-inline-start:-6vw}
  .cut--pair .cut__b{width:min(66vw,360px);margin-block-start:0;margin-inline-end:clamp(1.4rem,6vw,4rem)}
  .cut--small .cut__fig{width:min(58vw,320px);margin-inline-start:clamp(1.4rem,6vw,4rem)}

  .curr__rail{display:none}
  .mod__in>p,.mod__pts{padding-inline-start:clamp(1.4rem,6vw,4rem)}
  .mod__pts{padding-inline-end:clamp(1.4rem,6vw,4rem)}
  .mod__head{padding-inline:clamp(1.4rem,6vw,4rem)}
  .curr__intro{padding-inline-start:clamp(1.4rem,6vw,4rem)}

  .inc__head,.who__head,.voices__head,.faq__head{padding-inline-start:clamp(1.4rem,6vw,4rem)}
  .inc__list li:nth-child(n){margin-inline-start:clamp(1.4rem,6vw,4rem)}
  .inc__list li:nth-child(even){margin-inline-start:clamp(3rem,14vw,8rem)}
  /* An auto inline margin on a COLUMN flex item lets it size to its own
     max-width instead of the container, so the alternating statements
     overflowed and clipped. Set both margins explicitly to restore stretch.
     The alternation still has to read, though, or the section collapses
     into an undifferentiated list - so the even rows keep a deeper inset. */
  .who__list li,.who__list li:nth-child(odd),.who__list li:nth-child(even){
    margin-inline:clamp(1.4rem,6vw,4rem);max-width:none;
  }
  .who__list li:nth-child(even){margin-inline-start:clamp(2.8rem,13vw,7.5rem)}

  .v1,.v2,.v3,.v4,.v5{margin-inline:clamp(1.4rem,6vw,4rem);max-width:none}
  .v__plate,.v__plate2{display:none}

  .enroll{min-height:auto;flex-direction:column;align-items:stretch}
  .enroll__plate{position:relative;inset:auto;width:100%;aspect-ratio:16/10;order:2;margin-block-start:clamp(2.5rem,5vw,4rem)}
  .enroll__type{order:1;padding-inline:clamp(1.4rem,6vw,4rem)}

  .faq .mod__head{padding-inline:clamp(1.4rem,6vw,4rem)}
  .faq .mod__in>p{margin-inline-start:clamp(1.4rem,6vw,4rem);padding-inline-end:clamp(1.4rem,6vw,4rem)}
}

@media (max-width:640px){
  :root{--d1:clamp(2.7rem,12.5vw,4rem);--d2:clamp(2rem,8.6vw,3rem);--d3:clamp(1.3rem,5.2vw,1.8rem);--d4:clamp(1.15rem,4.6vw,1.5rem)}
  body{line-height:1.75}
  .mast{inset-block-start:1.1rem}
  /* the wordmark is the only navigation left at this width · give it a
     real target instead of a 1.15rem glyph */
  .mark{font-size:1.15rem;display:inline-block;padding-block:.5rem;padding-inline-end:.5rem}
  .hero__type{padding-block:5.5rem 2.5rem}
  .hero .ln:nth-child(2),.hero .ln:nth-child(3){margin-inline-start:0}
  .hero__act{gap:1rem}
  .hero__act .note{max-width:none}
  .gap{padding-inline:1.4rem}
  .gap__body,.gap__one:nth-child(n),.gap__close{margin-inline-start:0}
  .gap__close{font-size:1.35rem}
  /* One viewport width, so every measure cap has to release or the
     shortened lines break far earlier than the column they sit in. */
  .gap__body{font-size:1.6rem;max-width:none}
  .gap__one p,.inc__list p,.who__list p,.hero__lead,.enroll__type>p{max-width:none}
  .cut__intro{max-width:none;font-size:1.15rem}
  .maya__lead{max-width:none}
  /* the plate no longer sits behind this heading once the grid is one
     column, so the negative inset stopped being a collision and started
     being a name jammed against the screen edge */
  .maya__name{margin-inline-start:0}
  /* At one viewport width the negative inline-start on the second line of
     these headings stopped being a hang and became a clipped first
     letter: -26px against 22px of section padding put it 4px past the
     screen. Nothing hangs at this width. */
  .faq__head .ln:nth-child(2),
  .inc__head .ln:nth-child(2){margin-inline-start:0}
  /* 2:1 out of a portrait original is a slot, not a photograph */
  .cut--wide .cut__fig{aspect-ratio:16/9}
  .who__list li:nth-child(even){text-align:start}
  .v2,.v4{text-align:start;margin-inline-start:clamp(1.4rem,6vw,4rem);margin-inline-end:0}
  .foot__mark{font-size:26vw}
  .foot__nav{gap:0 1.4rem}
  .foot__nav a{display:inline-block;padding-block:.5rem}  /* 40px+ target */
  .demo-badge{font-size:.68rem;padding:.5rem .75rem}
}

/* --- photography integration: image fills its plate; gradient is the fallback --- */
/* NOTE: this rule targets `.plate > img`, NOT `.plate`. Never add a `position`
   declaration for `.plate` itself down here: `.plate{position:relative}` is
   declared at the top of this file and several plates (.hero__plate,
   .enroll__plate) override it with position:absolute - an equal-specificity
   rule later in the file would silently win and collapse them. */
.plate > img{
  position:absolute;inset:0;z-index:1;
  inline-size:100%;block-size:100%;
  object-fit:cover;object-position:center;
  display:block;
}
.plate:has(> img)::before{opacity:0}
/* NOTE: there was a `.plate > .plate__cap{position:relative}` rule here. At
   0-2-0 it outranked `.plate__cap{position:absolute}` (0-1-0), so every
   caption fell back into flow and rendered as a grey bar across the TOP of
   its photograph. It was only ever there for stacking, which z-index 3 vs
   the image's z-index 1 already handles. Do not reintroduce it. */