/* ============================================================
   SUMER — bespoke tailoring, Floréal. Switchboard candidate #28.

   The spine: a suit is not bought, it is built. The reader builds
   it: six beats of hand tailoring, seeked by the scroll, and the
   name arrives last, over the basted lapel.
   The moment: the tape measure is the scroll.

   Type: Bodoni Moda for the display (the web twin of the Bodoni 72
   his pick D was set in), Instrument Sans for everything that has
   to be read. Palette: coal, chalk, brass, and the tape's own cream.
   ============================================================ */

:root{
  --coal:#121110;
  --coal-2:#1C1A18;
  --chalk:#F3EFE7;
  --chalk-2:#DAD4C6;
  --brass:#B8935A;
  --red:#B8402F;          /* the reading mark — the one warm note */
  --tape:#EDE6D2;         /* the tape's cream */
  --tape-ink:#2A2622;
  --line:rgba(243,239,231,.16);
  --line-2:rgba(243,239,231,.34);

  --display:'Bodoni Moda',Didot,'Bodoni 72',Georgia,serif;
  --text:'Instrument Sans',system-ui,-apple-system,'Segoe UI',sans-serif;

  /* the tape's scale: one centimetre in pixels, and its width */
  --cm:28px;
  --tape-w:46px;
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

body{
  margin:0;
  background:var(--coal);
  color:var(--chalk);
  font-family:var(--text);
  font-weight:400;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

/* ---------------- the stage ----------------
   Fixed behind everything. The six films live here and the copy
   scrolls over them. 100svh, the unit that survives the phone
   toolbar. The right edge is reserved for the tape on a wide screen. */
.stage{
  position:fixed; inset:0;
  height:100svh;
  z-index:0;
  overflow:hidden;
  background:var(--coal);
}
.film{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover;
  opacity:0;
  pointer-events:none;
}
.film.lit{opacity:1}

/* ---------------- the ground under the type ----------------
   Hairline type needs a ground. Two layers, as on Amenti: the vertical
   wash seats the nav and the page's own edges; the horizontal one sits
   only under the left column where the words are, and leaves the
   bench alone on the right. The name beat is centred, so it takes a
   radial ground in the middle instead. */
.stage::before{
  content:""; position:absolute; inset:0; z-index:1;
  background:linear-gradient(90deg,
    rgba(18,17,16,.78) 0%, rgba(18,17,16,.66) 16%,
    rgba(18,17,16,.36) 38%, rgba(18,17,16,0) 60%);
  pointer-events:none;
}
.stage::after{
  content:""; position:absolute; inset:0; z-index:1;
  background:linear-gradient(180deg, rgba(18,17,16,.62) 0%, rgba(18,17,16,.14) 24%,
                            rgba(18,17,16,.16) 60%, rgba(18,17,16,.74) 100%);
  pointer-events:none;
}
body[data-film="6"] .stage::before{
  background:radial-gradient(60% 64% at 50% 50%, rgba(18,17,16,.58), rgba(18,17,16,0) 74%);
}

/* ---------------- THE TAPE ----------------
   A tailor's tape, fixed to the right edge on a wide screen, lying
   along the top edge on a phone. The strip inside is 150 cm long and
   s.js translates it so the centimetre under the reading mark is the
   reader's position in the build. Ticks are a gradient; the numbers
   and chapter names are children written by s.js.

   ⚠️ s.js moves the STRIP with a transform. Never a custom property on
   :root from a scroll handler ([[project_iod_paint_fault]]). */
.tape{
  position:fixed; z-index:45;
  top:0; right:0; bottom:0;
  width:var(--tape-w);
  overflow:hidden;
  background:var(--tape);
  box-shadow:-1px 0 0 rgba(0,0,0,.35), -8px 0 24px rgba(0,0,0,.28);
  pointer-events:none;
  color:var(--tape-ink);
  font-family:var(--text);
}
.tape__strip{
  position:absolute; left:0; top:50%;      /* cm 0 sits at the mark when p = 0 */
  width:100%;
  height:calc(var(--cm) * 152);
  will-change:transform;
  background:
    /* half-centimetre ticks, short, on the outer edge */
    repeating-linear-gradient(180deg, transparent 0, transparent calc(var(--cm) / 2 - 1px),
      rgba(42,38,34,.55) calc(var(--cm) / 2 - 1px), rgba(42,38,34,.55) calc(var(--cm) / 2)),
    /* the leading edge of the tape */
    linear-gradient(90deg, rgba(42,38,34,.18), rgba(42,38,34,.18));
  background-size:9px var(--cm), 1px 100%;
  background-repeat:repeat-y, repeat-y;
  background-position:right top, left top;
}
/* every centimetre: a long tick and its number */
.tape__cm{
  position:absolute; left:0; right:0; height:var(--cm);
  font-size:9.5px; font-weight:600; letter-spacing:.02em;
  font-variant-numeric:tabular-nums;
}
.tape__cm::before{
  content:""; position:absolute; right:0; top:0; width:16px; height:1px; background:var(--tape-ink);
}
.tape__cm i{
  position:absolute; right:19px; top:-6px; font-style:normal; line-height:1;
}
.tape__cm.is-10{font-size:11px}
.tape__cm.is-10::before{width:22px}
.tape__cm.is-10 i{right:25px}
/* the chapter, written along the tape at its own centimetre */
.tape__ch{
  position:absolute; left:7px; top:0;
  writing-mode:vertical-rl; transform:rotate(180deg);
  transform-origin:center; translate:0 0;
  font-size:8.5px; font-weight:600; letter-spacing:.24em; text-transform:uppercase;
  color:var(--red); white-space:nowrap;
}
/* the reading mark: a brass tab with a red hairline, fixed to the middle of the screen */
.tape__mark{
  position:absolute; left:0; right:0; top:50%; height:0;
  border-top:1px solid var(--red);
}
.tape__mark::before{
  content:""; position:absolute; left:-2px; top:-7px;
  width:calc(var(--tape-w) + 4px); height:14px;
  border:1px solid var(--brass); border-radius:2px;
  background:rgba(184,147,90,.10);
}
.tape.is-off{opacity:0; transition:opacity .5s ease}

/* ---------------- furniture ---------------- */
.nav{
  position:fixed; top:0; left:0; right:var(--tape-w); z-index:30;
  display:flex; align-items:center; justify-content:space-between;
  padding:1.1rem clamp(1rem,4vw,2.5rem);
  padding-top:calc(1.1rem + env(safe-area-inset-top));
  pointer-events:none;
}
.nav > *{pointer-events:auto}
.brand{
  position:relative;
  font-family:var(--display); font-weight:500; font-variation-settings:'opsz' 48;
  font-size:clamp(1.05rem,2.2vw,1.3rem); letter-spacing:.34em; text-transform:uppercase;
  text-decoration:none; color:var(--chalk);
  transition:opacity .5s ease;
}
.brand::after{content:"";position:absolute;left:0;right:0;top:50%;height:2.75rem;transform:translateY(-50%)}
/* The name is the last thing to arrive. While the name beat is on screen the
   small one in the nav steps aside, so there is one SUMER on the page. */
body[data-film="6"] .brand{opacity:0; pointer-events:none}

.lang{display:flex; gap:.1rem; align-items:center;
  border:1px solid var(--line-2); border-radius:999px; padding:.18rem; position:relative;
  background:rgba(18,17,16,.32); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px)}
.lang input{position:absolute; opacity:0; width:0; height:0}
.lang label{
  position:relative; font-size:.66rem; letter-spacing:.14em; font-weight:600;
  padding:.34rem .62rem; border-radius:999px; cursor:pointer; opacity:.6;
  transition:opacity .3s ease, background .3s ease;
}
.lang label::after{content:""; position:absolute; inset:-.55rem -.35rem}
.lang input:checked + label{opacity:1; background:rgba(243,239,231,.16)}

/* ---------------- the build ----------------
   Six beats, each a screen tall. The section's height is what s.js
   maps the film chain and the tape onto. */
.flight{position:relative; z-index:10; padding-right:var(--tape-w)}

.beat{
  min-height:100svh;
  display:flex; align-items:center;
  padding:clamp(4rem,12vh,9rem) clamp(1.25rem,6vw,4rem);
}
.beat__in{max-width:34rem}

.kicker{
  font-size:.68rem; letter-spacing:.3em; text-transform:uppercase; font-weight:600;
  color:var(--brass); margin:0 0 1.7rem;
}

.beat h1,.beat h2{
  font-family:var(--display); font-weight:400; font-variation-settings:'opsz' 96;
  line-height:1.04; letter-spacing:-.01em;
  margin:0 0 1rem;
  text-wrap:balance;
}
.beat h1{font-size:clamp(2.4rem,6.4vw,4.8rem)}
.beat h2{font-size:clamp(2rem,5vw,3.6rem)}
.beat h1 em,.beat h2 em{font-style:italic; color:var(--brass)}

.beat p{
  font-size:clamp(1rem,1.3vw,1.14rem);
  max-width:31rem; margin:0; opacity:.92;
}

/* the name beat — centred, the lockup his pick D: five letters spread
   across the frame, the M on the tie. On the page it is type, not a PNG,
   so it takes the language, the width and the dark mode of the screen. */
.beat--name{justify-content:center; text-align:center}
.beat--name .beat__in{max-width:none; width:100%}
.beat .mark{
  display:flex; justify-content:space-between;
  width:min(92vw - var(--tape-w), 1400px); max-width:none; margin:0 auto .6rem;
  font-family:var(--display); font-weight:400; font-variation-settings:'opsz' 96;
  font-size:clamp(4.2rem,17vw,15rem); line-height:.9;
  color:var(--chalk);
  padding:0 .06em;
}
.beat .mark span{display:block}
.kicker--name{margin:.2rem 0 1rem; color:var(--chalk); opacity:.8}
.beat--name p:not(.mark){margin:0 auto; max-width:30rem}

/* the arrival of type. ⚠️ Never owns visibility: `.rise` with no JS
   is fully visible, and the class only ever gets ADDED. */
.rise{opacity:1}
.js .rise{opacity:0; transform:translateY(1.1rem);
  transition:opacity .9s cubic-bezier(.22,.61,.36,1), transform .9s cubic-bezier(.22,.61,.36,1)}
.js .rise.in{opacity:1; transform:none}
.js .rise--2{transition-delay:.12s}
.js .rise--3{transition-delay:.22s}
.js .mark.rise{transition-duration:1.4s}
@media (prefers-reduced-motion:reduce){
  .js .rise{opacity:1; transform:none; transition:none}
}

/* ---------------- after the build ---------------- */
.after{position:relative; z-index:10; background:var(--coal); padding-right:var(--tape-w)}
.after__in{
  max-width:64rem; margin:0 auto;
  padding:clamp(4rem,12vh,8rem) clamp(1.25rem,6vw,4rem);
}
.after h2{
  font-family:var(--display); font-weight:400; font-variation-settings:'opsz' 96;
  font-size:clamp(1.9rem,5vw,3.2rem); line-height:1.08; margin:0 0 2.2rem;
  text-wrap:balance;
}
.after h2 em{font-style:italic; color:var(--brass)}
.h2--cloth{margin-top:clamp(4rem,10vh,7rem)}

/* ⚠️ NOT a card grid. A rule, a name, a week, a sentence. */
.horizon{list-style:none; margin:0; padding:0; border-top:1px solid var(--line)}
.horizon li{
  border-bottom:1px solid var(--line);
  padding:1.5rem 0;
  display:grid; gap:.35rem .5rem;
  grid-template-columns:1fr auto;
  align-items:baseline;
}
.horizon .x__name{
  font-family:var(--display); font-weight:400; font-variation-settings:'opsz' 48;
  font-size:clamp(1.25rem,2.6vw,1.75rem);
}
.horizon .x__when{
  font-size:.68rem; letter-spacing:.18em; text-transform:uppercase; font-weight:600;
  color:var(--brass); text-align:right;
  font-variant-numeric:tabular-nums;
}
.horizon .x__note{grid-column:1/-1; font-size:.98rem; opacity:.8; max-width:44rem; margin:0}

/* the ask */
.ask{border-top:1px solid var(--line); margin-top:clamp(4rem,10vh,7rem); padding-top:clamp(2.5rem,7vh,4rem)}
.ask h2{margin-bottom:1.6rem}
.ask__form{display:grid; gap:1.1rem 1.6rem; grid-template-columns:repeat(3,minmax(0,1fr)); max-width:52rem}
.f{display:flex; flex-direction:column; gap:.4rem}
.f__l{font-size:.66rem; letter-spacing:.2em; text-transform:uppercase; font-weight:600; color:var(--brass)}
.f input,.f select{
  appearance:none; -webkit-appearance:none;
  background:transparent; color:var(--chalk);
  border:0; border-bottom:1px solid var(--line-2); border-radius:0;
  padding:.55rem 0; font:inherit; font-size:1rem; min-height:44px;
  color-scheme:dark;
}
.f select{background-image:linear-gradient(45deg,transparent 50%,var(--chalk-2) 50%),linear-gradient(135deg,var(--chalk-2) 50%,transparent 50%);
  background-position:calc(100% - 12px) 55%, calc(100% - 7px) 55%; background-size:5px 5px; background-repeat:no-repeat; padding-right:1.4rem}
.f input:focus,.f select:focus{outline:none; border-bottom-color:var(--brass)}
.ask__note{grid-column:1/-1; font-size:.86rem; opacity:.66; max-width:40rem; margin:.2rem 0 0}
.btn{
  grid-column:1/-1; justify-self:start;
  display:inline-flex; align-items:center; gap:.6rem;
  padding:.85rem 1.4rem; border-radius:999px; text-decoration:none;
  background:var(--chalk); color:var(--coal);
  font-size:.74rem; letter-spacing:.16em; text-transform:uppercase; font-weight:600;
  transition:transform .25s ease, background .25s ease; min-height:44px;
}
.btn:hover{background:#fff; transform:translateY(-1px)}
.btn:active{transform:translateY(0) scale(.985)}
.btn svg{flex:none}

footer{
  position:relative; z-index:10; background:var(--coal);
  max-width:64rem; margin:0 auto;
  padding:0 clamp(1.25rem,6vw,4rem) calc(5.2rem + env(safe-area-inset-bottom));
  padding-right:calc(var(--tape-w) + clamp(1.25rem,6vw,4rem));
}
.foot{
  border-top:1px solid var(--line);
  padding:2rem 0 0; margin:0; font-size:.76rem; opacity:.55; line-height:1.7; max-width:60rem;
}
.credit{margin:1rem 0 0; font-size:.8rem; opacity:.7}
.credit a{color:var(--chalk); text-decoration:none; border-bottom:1px solid rgba(243,239,231,.38)}

/* ---------------- the way back ---------------- */
.sn-back{
  position:fixed; left:max(1rem,env(safe-area-inset-left));
  bottom:calc(1rem + env(safe-area-inset-bottom));
  z-index:50;
  display:inline-flex; align-items:center; gap:.4rem;
  padding:.5rem .9rem .5rem .72rem; border-radius:999px;
  background:rgba(18,17,16,.74); color:var(--chalk);
  font-family:var(--text);
  font-size:.66rem; font-weight:600; letter-spacing:.14em; text-transform:uppercase;
  text-decoration:none; border:1px solid var(--line-2);
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  box-shadow:0 6px 22px rgba(0,0,0,.24);
  transition:background .25s ease, transform .25s ease, opacity .25s ease;
  opacity:.9;
}
.sn-back svg{flex:none}
.sn-back:hover{background:rgba(18,17,16,.92); transform:translateY(-1px); opacity:1}
.sn-back:focus-visible{outline:2px solid var(--brass); outline-offset:3px; opacity:1}
.sn-back::before{content:""; position:absolute; inset:-6px -12px}
@media print{.sn-back,.tape{display:none}}

/* ---------------- the two columns ---------------- */
.lang-en .fr,.lang-fr .en{display:none}

/* ---------------- phone ----------------
   The tape lies along the TOP edge on a portrait screen — the edge is
   where the house puts the progress mark on a phone, and nothing can sit
   under it there. The nav steps down below it. */
@media (max-width:47.99em), (orientation:portrait) and (max-width:64em){
  :root{--tape-w:34px; --cm:22px}
  .tape{top:0; left:0; right:0; bottom:auto; height:var(--tape-w); width:auto;
    box-shadow:0 1px 0 rgba(0,0,0,.35), 0 8px 24px rgba(0,0,0,.28)}
  .tape__strip{
    top:0; left:50%; height:100%; width:calc(var(--cm) * 152);
    background:
      repeating-linear-gradient(90deg, transparent 0, transparent calc(var(--cm) / 2 - 1px),
        rgba(42,38,34,.55) calc(var(--cm) / 2 - 1px), rgba(42,38,34,.55) calc(var(--cm) / 2)),
      linear-gradient(180deg, rgba(42,38,34,.18), rgba(42,38,34,.18));
    background-size:var(--cm) 8px, 100% 1px;
    background-repeat:repeat-x, repeat-x;
    background-position:left bottom, left top;
  }
  .tape__cm{top:0; bottom:0; left:auto; right:auto; width:var(--cm); height:auto; font-size:8.5px}
  .tape__cm::before{right:auto; left:0; top:auto; bottom:0; width:1px; height:12px}
  .tape__cm i{right:auto; left:3px; top:5px}
  .tape__cm.is-10{font-size:10px}
  .tape__cm.is-10::before{width:1px; height:17px}
  .tape__cm.is-10 i{left:4px; top:3px}
  .tape__ch{display:none}
  .tape__mark{top:0; bottom:0; left:50%; right:auto; height:auto; width:0; border-top:0; border-left:1px solid var(--red)}
  .tape__mark::before{left:-7px; top:-2px; width:14px; height:calc(var(--tape-w) + 4px)}

  .nav{right:0; padding-top:calc(var(--tape-w) + .7rem + env(safe-area-inset-top))}
  .flight,.after{padding-right:0}
  footer{padding-right:clamp(1.25rem,6vw,4rem)}
  .beat{padding-left:1.25rem; padding-right:1.25rem}
  .beat .mark{width:94vw}
  .horizon li{grid-template-columns:1fr}
  .horizon .x__when{text-align:left}
  .ask__form{grid-template-columns:1fr}

  /* the horizontal scrim comes off on a phone: the copy runs the full width
     and its 60% stop would band mid-frame. The vertical wash takes over. */
  .stage::before{background:none}
  body[data-film="6"] .stage::before{background:none}
  .stage::after{
    background:linear-gradient(180deg,
      rgba(18,17,16,.70) 0%, rgba(18,17,16,.34) 30%,
      rgba(18,17,16,.34) 64%, rgba(18,17,16,.78) 100%);
  }
}