/* =========================================================
   REMIME — structural stylesheet
   Uses role-based colour tokens from palettes.css
   ========================================================= */

*{box-sizing:border-box;margin:0;padding:0;}
html,body{background:var(--field);color:var(--ink);}
body{
  font-family:'Inter',system-ui,sans-serif;
  font-weight:400;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
  min-height:100vh;
}
::selection{background:var(--signature);color:var(--field);}
a{color:inherit;text-decoration:none;}
button{font:inherit;color:inherit;cursor:pointer;background:none;border:none;}
input{font:inherit;color:inherit;}

:root{
  --gutter:clamp(20px,3.2vw,48px);
  --f-serif:'Fraunces',serif;
  --f-sans:'Inter',system-ui,sans-serif;
}

/* Grain overlay (multiply, extremely subtle) */
body::after{
  content:"";position:fixed;inset:0;pointer-events:none;z-index:1000;
  opacity:0.22;mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.95' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.12  0 0 0 0 0.10  0 0 0 0 0.18  0 0 0 0.07 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}

/* ——— shell ——— */
.zone{
  position:relative;
  max-width:1440px;
  margin:0 auto;
  padding:0 var(--gutter);
}

/* Zone seal — vertical rule + glyph anchored between zones */
.zone.essay,.zone.translations,.zone.hours,.zone.sketch,.zone.final{
  position:relative;
}
.zone-seal{
  position:absolute;left:50%;top:-14px;
  transform:translateX(-50%);
  font-family:var(--f-serif);
  font-size:15px;background:var(--field);padding:0 14px;
  color:var(--signature);opacity:0.55;
  letter-spacing:0;text-transform:none;pointer-events:none;z-index:2;
}

/* =========================================================
   ZONE 1 — HERO
   ========================================================= */
.hero{
  min-height:100vh;min-height:100svh;
  position:relative;
  display:grid;
  grid-template-rows:15% 1fr auto 14%;
  overflow:hidden;
}
.hero-inner{
  grid-row:2;
  position:relative;
  display:flex;flex-direction:column;justify-content:center;align-items:center;
}

/* 6 dispersed letters — absolutely positioned, cycling opacity */
.dispersed{position:absolute;inset:0;pointer-events:none;z-index:1;overflow:hidden;}
.dispersed .dl{
  position:absolute;
  font-family:var(--f-serif);
  line-height:1;
  opacity:0;
  color:var(--ink);
  transition:opacity 2s ease, color 900ms ease;
  user-select:none;
}
.dispersed .dl.in{opacity:var(--op,0.5);}
/* per-letter styling overridden via JS (position, size, transform, colour role) */

/* Wordmark */
.mark-wrap{
  position:relative;z-index:2;
  display:flex;flex-direction:column;align-items:center;gap:36px;
  width:100%;
}
.mark{
  position:relative;
  font-family:var(--f-serif);
  font-variation-settings:"opsz" 144,"wght" 400,"SOFT" 0,"WONK" 0;
  font-size:clamp(88px,17vw,260px);
  line-height:0.92;
  letter-spacing:-0.02em;
  color:var(--ink);
  cursor:pointer;user-select:none;text-align:center;
  transition:color .55s ease, font-variation-settings .8s ease;
  will-change:font-variation-settings,color;
}
.mark .surface,.mark .echo{display:inline-block;}
.mark .letter{display:inline-block;transition:transform .45s cubic-bezier(.2,.7,.2,1),color .45s,font-variation-settings .55s;}
.mark .letter:hover{color:var(--signature);font-variation-settings:"opsz" 144,"wght" 900,"SOFT" 100,"WONK" 1;}
.mark .echo{
  position:absolute;inset:0;pointer-events:none;
  color:var(--signature);opacity:0;
  transform:translate(10px,6px);
  font-variation-settings:"opsz" 144,"wght" 700,"SOFT" 75,"WONK" 1;
  transition:opacity .8s, transform .8s, color .8s;
}
.mark .echo.second{color:var(--secondary);transform:translate(18px,12px);font-variation-settings:"opsz" 144,"wght" 700,"SOFT" 100,"WONK" 1;}
.mark .twin{display:none;}

.mark.v-canonical{}
.mark.v-duplicate .echo{opacity:0.5;}
.mark.v-triple .echo{opacity:0.55;}
.mark.v-triple .echo.second{opacity:0.38;}
.mark.v-split .echo{opacity:0.85;transform:translate(-4px,0);color:var(--signature);font-variation-settings:"opsz" 144,"wght" 400;}
.mark.v-split .echo.second{opacity:0.8;transform:translate(4px,0);color:var(--secondary);font-variation-settings:"opsz" 144,"wght" 400;}
.mark.v-italic{font-variation-settings:"opsz" 144,"wght" 400,"SOFT" 30;font-style:italic;}
.mark.v-mixed .letter:nth-child(odd){font-variation-settings:"opsz" 144,"wght" 900;}
.mark.v-mixed .letter:nth-child(even){font-variation-settings:"opsz" 144,"wght" 300;}
.mark.v-vertical{padding-bottom:0.95em;}
.mark.v-vertical .twin{
  display:block;position:absolute;left:0;right:0;top:100%;
  color:var(--signature);opacity:0.7;
  transform:translateY(-0.16em) scale(1,-1);
  font-variation-settings:"opsz" 144,"wght" 400;
}
.mark.v-crescendo .letter:nth-child(1){font-size:0.55em;opacity:0.35;}
.mark.v-crescendo .letter:nth-child(2){font-size:0.68em;opacity:0.5;}
.mark.v-crescendo .letter:nth-child(3){font-size:0.82em;opacity:0.7;}
.mark.v-crescendo .letter:nth-child(4){font-size:0.95em;opacity:0.85;}
.mark.v-crescendo .letter:nth-child(5){font-size:1.1em;color:var(--signature);}
.mark.v-crescendo .letter:nth-child(6){font-size:1.25em;font-variation-settings:"opsz" 144,"wght" 700;color:var(--signature);}
.mark.v-wonk{font-variation-settings:"opsz" 144,"wght" 700,"SOFT" 100,"WONK" 1;}
.mark.v-easter .letter:nth-child(3){color:var(--signature);transform:scaleY(-1);}
.mark.v-disrupted .letter:nth-child(1){transform:scaleY(-1);}
.mark.v-disrupted .letter:nth-child(2){color:var(--signature);}
.mark.v-disrupted .letter:nth-child(3){font-variation-settings:"opsz" 144,"wght" 900,"SOFT" 0,"WONK" 0;}
.mark.v-disrupted .letter:nth-child(4){transform:scaleX(-1);}
.mark.v-disrupted .letter:nth-child(5){color:var(--secondary);font-variation-settings:"opsz" 144,"wght" 300;}
.mark.v-disrupted .letter:nth-child(6){transform:rotate(-12deg);}
.mark.v-palindrome .letter:nth-child(4){transform:scaleX(-1);color:var(--signature);}
.mark.v-palindrome .letter:nth-child(5){color:var(--signature);}
.mark.v-palindrome .letter:nth-child(6){transform:scaleX(-1);}
.mark.v-flipped{transform:scaleY(-1);}
.mark.v-mirrored{transform:scaleX(-1);}
.mark.v-upside{transform:rotate(180deg);}
.mark.v-stacked{
  display:inline-flex;flex-direction:column;align-items:center;line-height:0.85;
  font-size:clamp(42px,7vw,88px);
}
.mark.v-stacked .surface{display:flex;flex-direction:column;}
.mark.v-stacked .letter{display:block;}
.mark.v-centered .letter:nth-child(3){font-size:1.6em;color:var(--signature);}
.mark.v-centered .letter:not(:nth-child(3)){font-size:0.75em;opacity:0.65;}

/* Hero caption (fixed) */
.hero-lede{
  grid-row:3;
  text-align:center;
  padding:16px 20px 8px;
  font-family:var(--f-serif);
  font-style:italic;
  font-variation-settings:"opsz" 24,"wght" 400,"SOFT" 30;
  font-size:clamp(18px,1.8vw,24px);
  letter-spacing:-0.005em;
  color:var(--ink);
  position:relative;z-index:2;
}
.hero-lede em{font-style:italic;color:var(--signature);}

.hero-arrow{
  grid-row:4;
  align-self:end;
  justify-self:center;
  padding-bottom:24px;
  font-family:var(--f-serif);
  font-size:22px;
  color:var(--ink);
  opacity:0.35;
  animation:hover 2.6s ease-in-out infinite;
  position:relative;z-index:2;
}
@keyframes hover{
  0%,100%{transform:translateY(0);}
  50%{transform:translateY(8px);}
}

/* =========================================================
   ZONE 2 — CONCEPTUAL BLOCK (essay + easter eggs)
   ========================================================= */
.essay{
  padding:120px 0 140px;
  border-top:1px solid var(--rule-soft);
}
.essay-inner{
  max-width:680px;
  margin:0 auto;
  font-family:var(--f-serif);
  font-variation-settings:"opsz" 24,"wght" 400;
  font-size:clamp(19px,1.55vw,22px);
  line-height:1.55;
  letter-spacing:-0.003em;
  color:var(--ink);
  text-wrap:pretty;
}
.essay p{margin-bottom:1.35em;}
.essay p:last-child{margin-bottom:0;}
.essay .opener{
  font-family:var(--f-serif);
  font-variation-settings:"opsz" 60,"wght" 500;
  font-size:clamp(30px,3.4vw,44px);
  line-height:1.1;
  letter-spacing:-0.015em;
  margin-bottom:0.7em;
}

/* DNA echo on words — inline span with positioned ghost */
.echo-word{
  position:relative;display:inline-block;color:var(--ink);
  font-variation-settings:"opsz" 24,"wght" 500;
}
.echo-word::after{
  content:attr(data-word);
  position:absolute;left:0;top:0;
  color:var(--signature);
  transform:translate(6px,3px);
  font-variation-settings:"opsz" 24,"wght" 700,"SOFT" 75,"WONK" 1;
  pointer-events:none;opacity:0.55;
  transition:opacity .4s, transform .4s;
}
.echo-word:hover::after{opacity:0.9;transform:translate(9px,5px);}

.essay .italic-bigger{font-style:italic;font-size:1.08em;font-variation-settings:"opsz" 28,"wght" 400,"SOFT" 30;}
.essay .heavy{font-variation-settings:"opsz" 36,"wght" 900;}
.essay .brand-mention{
  position:relative;display:inline-block;color:var(--ink);
  font-variation-settings:"opsz" 24,"wght" 500;
}
.essay .brand-mention::after{
  content:"Remime";position:absolute;left:0;top:0;
  color:var(--signature);opacity:0.55;transform:translate(7px,4px);
  font-variation-settings:"opsz" 24,"wght" 700,"SOFT" 75,"WONK" 1;pointer-events:none;
}
.essay .again{
  font-style:italic;font-size:1.15em;
  font-variation-settings:"opsz" 32,"wght" 400,"SOFT" 30;
  color:var(--ink);
}

/* Easter-egg cue — very subtle, only a cursor hint */
.egg{cursor:pointer;position:relative;display:inline-block;}
.egg.b{
  /* bracketed eggs read like editorial markers */
  font-variation-settings:"opsz" 24,"wght" 500;
}

/* Egg 2 — "word" ripple */
.egg.word-ripple{position:relative;display:inline-block;}
.egg.word-ripple .ghost{
  position:absolute;left:0;top:0;pointer-events:none;white-space:nowrap;
  opacity:0;
}

/* Egg 3 — plagiarism ghost */
.egg.plag{position:relative;display:inline-block;}
.egg.plag::before{
  content:"plagiarism";position:absolute;left:0;top:0;
  color:var(--signature);opacity:0;transform:translate(0,0);
  font-variation-settings:"opsz" 24,"wght" 700,"SOFT" 75,"WONK" 1;
  pointer-events:none;transition:opacity .4s, transform .4s;
}
.egg.plag:hover::before{opacity:0.7;transform:translate(8px,4px);}

/* Egg 4 — long echo overlay */
.long-echo-layer{
  pointer-events:none;
  position:absolute;
  font-family:var(--f-serif);
  display:flex;gap:14px;flex-wrap:wrap;
}
.long-echo-layer span{
  opacity:0;font-style:italic;
  transition:opacity .5s;
}

/* Egg 5 — three pulsing dots */
.pattern-dots{
  display:inline-flex;gap:6px;margin-left:8px;vertical-align:middle;
  opacity:0;transition:opacity .3s;
}
.pattern-dots.show{opacity:1;}
.pattern-dots i{
  width:6px;height:6px;border-radius:50%;background:var(--signature);
  animation:dot 1.2s ease-in-out infinite;
}
.pattern-dots i:nth-child(2){animation-delay:.2s;}
.pattern-dots i:nth-child(3){animation-delay:.4s;}
@keyframes dot{0%,100%{opacity:0.25;transform:scale(1);}50%{opacity:1;transform:scale(1.3);}}

/* Heraclitus popup */
.egg-popup{
  position:fixed;z-index:400;
  background:var(--field);
  color:var(--ink);
  border:1px solid var(--ink);
  padding:18px 20px;
  max-width:360px;
  font-family:var(--f-serif);
  font-variation-settings:"opsz" 18,"wght" 400;
  font-size:15px;line-height:1.4;
  font-style:italic;
  box-shadow:0 0 0 6px var(--field);
  opacity:0;transform:translateY(6px);
  transition:opacity .35s, transform .35s;
  pointer-events:none;
}
.egg-popup.show{opacity:1;transform:translateY(0);}
.egg-popup cite{
  display:block;margin-top:10px;
  font-family:var(--f-sans);font-style:normal;
  font-size:10px;letter-spacing:0.2em;text-transform:uppercase;
  opacity:0.6;
}

/* =========================================================
   ZONE 3 — TRANSLATIONS CONSTELLATION
   ========================================================= */
.translations{
  padding:120px 0;
  border-top:1px solid var(--rule-soft);
  position:relative;
}
.translations-head{
  max-width:680px;margin:0 auto 60px;text-align:center;
  font-family:var(--f-sans);
  font-size:10.5px;letter-spacing:0.22em;text-transform:uppercase;
  opacity:0.55;font-weight:500;
}
.translation-strip{
  position:relative;
  display:grid;
  grid-template-columns:repeat(12,1fr);
  grid-auto-rows:minmax(40px,auto);
  gap:10px 12px;
  min-height:420px;
  overflow: hidden;
  padding: 20px 12px;
}
.trans-word.shimmer{ color: var(--signature) !important; transition: color 300ms ease; }
.trans-word.shimmer .main{ color: var(--signature); }
.trans-word{
  display:flex;flex-direction:column;gap:2px;
  font-family:var(--f-serif);
  color:var(--ink);
  position:relative;
  line-height:1;
  transition:opacity .7s ease, transform .7s ease, color .8s ease;
  transform: translate(var(--dx,0), var(--dy,0)) rotate(var(--rot,0deg));
  transform-origin: center center;
}
.trans-word.is-signature{ color:var(--signature); }
.trans-word .main{
  display:inline-block;
  transition: font-variation-settings .9s ease, font-weight .9s ease, font-style .4s ease;
}
.trans-word.lang-above{ flex-direction:column-reverse; }
.trans-word.lang-left{ flex-direction:row-reverse; align-items:baseline; gap:10px; }
.trans-word.lang-right{ flex-direction:row; align-items:baseline; gap:10px; }
.trans-word.lang-left .lang, .trans-word.lang-right .lang{ margin-top:0; align-self:flex-end; padding-bottom:0.5em; }
.trans-word.size-l{font-size:clamp(48px,5.6vw,84px);}
.trans-word.size-m{font-size:clamp(28px,3vw,42px);}
.trans-word.size-s{font-size:clamp(16px,1.4vw,22px);}
.trans-word .lang{
  font-family:var(--f-sans);
  font-size:9.5px;letter-spacing:0.22em;text-transform:uppercase;font-weight:500;
  opacity:0.55;margin-top:8px;
}
.trans-word.rtl{direction:rtl;text-align:right;}
.trans-word.has-echo{position:relative;}
.trans-word.has-echo .ghost{
  position:absolute;left:0;top:0;pointer-events:none;
  color:var(--signature);opacity:0.5;
  transform:translate(7px,4px);
  font-variation-settings:"opsz" 72,"wght" 700,"SOFT" 75,"WONK" 1;
}
.trans-word.has-echo.rtl .ghost{right:0;left:auto;transform:translate(-7px,4px);}

/* per-script font-family */
.sc-latin   { font-family:'Fraunces',serif; font-variation-settings:"opsz" 72,"wght" 400; }
.sc-cyrillic{ font-family:'Noto Serif','Fraunces',serif; }
.sc-greek   { font-family:'Noto Serif','Fraunces',serif; }
.sc-hebrew  { font-family:'Noto Serif Hebrew','Fraunces',serif; }
.sc-arabic  { font-family:'Noto Naskh Arabic','Fraunces',serif; }
.sc-devan   { font-family:'Noto Serif Devanagari','Fraunces',serif; }
.sc-bengali { font-family:'Noto Serif Bengali','Fraunces',serif; }
.sc-tamil   { font-family:'Noto Serif Tamil','Fraunces',serif; }
.sc-thai    { font-family:'Noto Serif Thai','Fraunces',serif; }
.sc-khmer   { font-family:'Noto Serif Khmer','Fraunces',serif; }
.sc-lao     { font-family:'Noto Serif Lao','Fraunces',serif; }
.sc-sinhala { font-family:'Noto Serif Sinhala','Fraunces',serif; }
.sc-georgian{ font-family:'Noto Serif Georgian','Fraunces',serif; }
.sc-armenian{ font-family:'Noto Serif Armenian','Fraunces',serif; }
.sc-mongol  { font-family:'Noto Sans Mongolian','Fraunces',sans-serif; }
.sc-cjk-sc  { font-family:'Noto Serif SC','Fraunces',serif; }
.sc-cjk-jp  { font-family:'Noto Serif JP','Fraunces',serif; }
.sc-cjk-kr  { font-family:'Noto Serif KR','Fraunces',serif; }

.trans-coda{
  text-align:center;margin-top:64px;
  font-family:var(--f-serif);font-style:italic;
  font-variation-settings:"opsz" 18,"wght" 400,"SOFT" 30;
  font-size:15px;opacity:0.6;
}

/* =========================================================
   ZONE 4 — HOURS CASCADE
   ========================================================= */
.hours{
  padding:120px 0;
  border-top:1px solid var(--rule-soft);
}
.hours-list{
  display:flex;
  flex-wrap:wrap;
  gap:34px 56px;
  max-width:1180px;margin:0 auto;
  align-items:baseline;
  justify-content:flex-start;
}
.hour-row{
  display:flex;flex-direction:column;align-items:flex-start;gap:6px;
  margin-left:var(--indent, 0%);
  transform:rotate(var(--tilt, 0deg));
  transition:transform .4s ease, opacity .4s ease;
  flex:0 0 auto;
}
.hour-row.size-l{ flex-basis: 22%; }
.hour-row.size-m{ flex-basis: 17%; }
.hour-row.size-s{ flex-basis: 13%; }
.hour-num{
  font-family:var(--f-serif);
  font-variation-settings:"opsz" 72,"wght" 400;
  line-height:1;letter-spacing:-0.02em;
  color:var(--ink);
  font-variant-numeric:tabular-nums;
  transition:color .4s;
  display:inline-flex;align-items:baseline;
}
.hour-row.size-l .hour-num{ font-size:clamp(38px,4.6vw,60px); }
.hour-row.size-m .hour-num{ font-size:clamp(28px,3.4vw,44px); }
.hour-row.size-s .hour-num{ font-size:clamp(20px,2.4vw,30px); }
.hour-num .h{ color:var(--ink); transition:color .5s ease; }
.hour-num .m{ color:var(--ink); opacity:0.85; transition:color .5s ease; }
.hour-num .s{ color:var(--ink); font-variation-settings:"opsz" 72,"wght" 500; transition:color .55s ease; }
.hour-num .sep{ color:var(--signature); opacity:0.4; padding:0 0.04em; }
/* pulse: every tick, .s flashes signature then fades back; .m on minute change */
.hour-num .s.pulse{ animation: pulseSec 520ms ease-out; }
.hour-num .m.pulse-soft{ animation: pulseMin 900ms ease-out; }
@keyframes pulseSec{
  0%   { color: var(--signature); }
  60%  { color: var(--signature); }
  100% { color: var(--ink); }
}
@keyframes pulseMin{
  0%   { color: var(--signature); opacity:1; }
  100% { color: var(--ink); opacity:0.85; }
}
.hour-city{
  font-family:var(--f-sans);
  font-size:11px;letter-spacing:0.22em;text-transform:uppercase;
  font-weight:500;opacity:0.6;
  transition:opacity .5s ease;
}
.hour-row.size-s .hour-city{ font-size:10px; opacity:0.5; }
/* city position variations */
.hour-row.city-above{ flex-direction:column-reverse; }
.hour-row.city-right{ flex-direction:row; align-items:baseline; gap:14px; }
.hour-row.city-right .hour-city{ padding-bottom:0.4em; }

.hours-coda{
  text-align:center;margin-top:60px;
  font-family:var(--f-serif);font-style:italic;
  font-variation-settings:"opsz" 18,"wght" 400,"SOFT" 30;
  font-size:15px;opacity:0.6;
}

/* =========================================================
   ZONE 5 — FACES
   ========================================================= */
.faces{
  padding:120px 0;
  border-top:1px solid var(--rule-soft);
  text-align:center;
}
.faces-head{
  font-family:var(--f-sans);
  font-size:11px;letter-spacing:0.32em;text-transform:uppercase;
  font-weight:500;opacity:0.55;
  margin-bottom:56px;
}
.faces-coda{
  font-family:var(--f-serif);font-style:italic;
  font-variation-settings:"opsz" 18,"wght" 400,"SOFT" 30;
  font-size:15px;opacity:0.6;
  margin-top:56px;
}
.faces-grid{
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:22px 20px;
  max-width:820px;
  margin:0 auto;
}
.face-cell{
  aspect-ratio: 5/6;
  cursor:pointer;
  position:relative;
  display:flex;align-items:center;justify-content:center;
  transition:transform 400ms ease-out;
  will-change:transform;
}
.face-cell:hover{ transform:scale(1.15); z-index:2; }
.face-cell svg{
  width:100%; height:100%;
  overflow:visible; display:block;
  stroke-width:1.6;
  transition: opacity 500ms ease;
}
.face-cell svg .stroke{
  stroke: currentColor;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}
.face-cell svg .stroke.fill{ fill: currentColor; }
/* hand-drawn feel: subtle stroke variation for props */
.face-cell svg .prop .stroke{ stroke-width:1.4; }

/* letter replacement */
.face-letter{
  position:absolute;
  inset:0;
  display:flex; align-items:center; justify-content:center;
  font-family: var(--f-serif);
  font-size: clamp(56px, 9vw, 130px);
  line-height: 1;
  user-select: none;
  pointer-events: none;
}

@media (max-width:640px){
  .faces-grid{ gap:14px 12px; max-width:100%; }
  .faces{ padding:80px 0; }
}
@media (prefers-reduced-motion:reduce){
  .face-cell{ transition:none; }
  .face-cell:hover{ transform:none; }
}

/* =========================================================
   ZONE 5 — CANVAS
   ========================================================= */
.sketch{
  padding:120px 0;
  border-top:1px solid var(--rule-soft);
}
.sketch-head{
  text-align:center;max-width:680px;margin:0 auto 48px;
}
.sketch-head h2{
  font-family:var(--f-serif);
  font-variation-settings:"opsz" 60,"wght" 400;
  font-size:clamp(26px,2.8vw,36px);
  line-height:1.15;letter-spacing:-0.01em;
}
.sketch-head h2 em{font-style:italic;color:var(--signature);font-variation-settings:"opsz" 60,"wght" 400,"SOFT" 30;}
.sketch-head p{
  margin-top:14px;font-family:var(--f-serif);font-style:italic;
  font-variation-settings:"opsz" 16,"wght" 400,"SOFT" 30;
  font-size:15px;opacity:0.65;
}

.sketch-stage{
  max-width:880px;margin:0 auto;
  display:flex;flex-direction:column;gap:18px;
}
.canvas-wrap{
  position:relative;
  background:var(--field);
  border:1px solid var(--ink);
  overflow:hidden;
  aspect-ratio:16/9;
  width:100%;
  max-width:880px;
  margin:0 auto;
}
.canvas-wrap canvas{display:block;width:100%;height:100%;cursor:crosshair;}
.canvas-hint{
  position:absolute;left:20px;top:18px;
  font-family:var(--f-serif);font-style:italic;
  font-variation-settings:"opsz" 16,"wght" 400,"SOFT" 30;
  font-size:15px;opacity:0.45;pointer-events:none;
  transition:opacity .35s;
}
.canvas-hint.hidden{opacity:0;}
.canvas-level{
  position:absolute;right:20px;top:18px;
  font-family:var(--f-sans);font-size:10px;letter-spacing:0.22em;
  text-transform:uppercase;font-weight:500;opacity:0.55;
}
.canvas-legend{
  position:absolute;left:20px;bottom:18px;right:20px;
  font-family:var(--f-serif);font-style:italic;
  font-variation-settings:"opsz" 16,"wght" 400,"SOFT" 30;
  font-size:14px;opacity:0;transition:opacity .5s;
  pointer-events:none;text-align:center;
}
.canvas-legend.show{opacity:0.75;}

.canvas-ctrls{
  display:flex;justify-content:space-between;align-items:center;
  padding:4px 2px;
  font-family:var(--f-sans);font-size:10.5px;letter-spacing:0.2em;
  text-transform:uppercase;font-weight:500;
}
.canvas-ctrls .meta{opacity:0.55;}
.canvas-ctrls .actions{display:flex;gap:24px;}
.canvas-ctrls button{
  font-family:var(--f-serif);font-size:16px;letter-spacing:0;
  text-transform:lowercase;font-weight:400;font-style:italic;
  font-variation-settings:"opsz" 18,"wght" 400,"SOFT" 30;
  border-bottom:1px solid transparent;padding-bottom:2px;
  transition:color .3s, border-color .3s;
}
.canvas-ctrls button.primary{color:var(--signature);}
.canvas-ctrls button:hover{border-color:currentColor;}
.canvas-ctrls button[disabled]{opacity:0.3;cursor:not-allowed;}

/* =========================================================
   ZONE 6 — FINAL ACT
   ========================================================= */
.final{
  min-height:100vh;
  padding:120px 0 60px;
  border-top:1px solid var(--rule-soft);
  display:flex;flex-direction:column;justify-content:space-between;align-items:center;
  text-align:center;
  position:relative;
}
.final-phrase{
  font-family:var(--f-serif);
  font-variation-settings:"opsz" 60,"wght" 400;
  font-size:clamp(30px,3.4vw,44px);
  line-height:1.15;letter-spacing:-0.015em;
  padding-top:40px;
  color:var(--ink);
}
.final-phrase em{font-style:italic;color:var(--signature);font-variation-settings:"opsz" 60,"wght" 400,"SOFT" 30;}

.btn-remime{
  position:relative;
  font-family:var(--f-serif);
  font-variation-settings:"opsz" 144,"wght" 500,"SOFT" 0,"WONK" 0;
  font-size:clamp(68px,13vw,200px);
  line-height:0.9;letter-spacing:-0.02em;
  color:var(--ink);
  cursor:pointer;user-select:none;
  padding:0;margin:40px 0;
  transition:font-variation-settings .5s, letter-spacing .5s;
}
.btn-remime::before{
  content:"REMIME";
  position:absolute;inset:0;
  color:var(--signature);opacity:0.5;
  transform:translate(12px,8px);
  font-variation-settings:"opsz" 144,"wght" 700,"SOFT" 75,"WONK" 1;
  pointer-events:none;
  transition:transform .5s ease, opacity .5s;
}
.btn-remime:hover::before{transform:translate(18px,12px);opacity:0.75;}
.btn-remime:focus-visible{outline:2px solid var(--signature);outline-offset:16px;}

.final-footer{
  width:100%;max-width:1100px;
  display:grid;grid-template-columns:1fr minmax(300px,420px) 1fr;
  gap:24px;align-items:end;
  border-top:1px solid var(--rule);
  padding-top:22px;margin-top:40px;
  font-family:var(--f-sans);font-size:10.5px;
  letter-spacing:0.2em;text-transform:uppercase;font-weight:500;
}
.final-footer .l{text-align:left;}
.final-footer .r{text-align:right;}
.final-footer .palette-chip{
  display:inline-flex;align-items:center;gap:10px;
  font-family:var(--f-serif);font-style:italic;font-size:13px;
  letter-spacing:0;text-transform:none;
  font-variation-settings:"opsz" 16,"wght" 400,"SOFT" 30;
  opacity:0.7;
}
.palette-chip .swatch{
  display:inline-flex;gap:3px;
}
.palette-chip .swatch i{
  width:10px;height:10px;border-radius:50%;display:inline-block;
  border:1px solid var(--rule);
}
.palette-chip .swatch .f{background:var(--field);}
.palette-chip .swatch .i{background:var(--ink);}
.palette-chip .swatch .s{background:var(--signature);}
.palette-chip .swatch .k{background:var(--secondary);}

/* notify */
.notify{justify-self:center;width:100%;max-width:420px;}
.notify-label{
  display:block;text-align:center;margin-bottom:8px;
  font-size:9.5px;letter-spacing:0.22em;text-transform:uppercase;
  opacity:0.6;font-weight:500;
}
.notify-label .sig{color:var(--signature);}
.notify-row{
  display:flex;align-items:center;
  border-bottom:1px solid var(--ink);
  padding:6px 0 8px;gap:10px;
}
.notify-row input{
  flex:1;border:none;background:transparent;outline:none;
  font-family:var(--f-serif);font-size:17px;letter-spacing:-0.005em;
  font-variation-settings:"opsz" 24,"wght" 400;
  color:var(--ink);padding:2px 0;
}
.notify-row input::placeholder{
  color:var(--ink-55);
  font-style:italic;font-variation-settings:"opsz" 24,"wght" 400,"SOFT" 30;
}
.notify-row button{
  font-size:10px;letter-spacing:0.22em;text-transform:uppercase;font-weight:500;
  padding:5px 0 5px 10px;transition:color .25s;
}
.notify-row button::before{
  content:"↬";font-family:var(--f-serif);font-size:14px;margin-right:6px;
  display:inline-block;transition:transform .3s;
}
.notify-row button:hover{color:var(--signature);}
.notify-row button:hover::before{transform:translateX(4px);}
.notify-note{
  font-family:var(--f-serif);font-style:italic;
  font-variation-settings:"opsz" 14,"wght" 400,"SOFT" 30;
  font-size:12px;opacity:0.55;margin-top:8px;text-align:center;min-height:1em;
  letter-spacing:0;text-transform:none;font-weight:400;
}
.notify-note .sig{color:var(--signature);opacity:1;}
.notify.is-sent .notify-row{border-color:var(--signature);}
.notify.is-sent .notify-row input{color:var(--signature);}

.counter-line{
  position:absolute;right:var(--gutter);bottom:16px;
  font-family:var(--f-serif);font-style:italic;
  font-variation-settings:"opsz" 14,"wght" 400,"SOFT" 30;
  font-size:12px;opacity:0.55;letter-spacing:0;text-transform:none;font-weight:400;
}

/* =========================================================
   Zone transitions — small gestures at section boundaries
   ========================================================= */
.zone + .zone::before{
  content:"";
  position:absolute;
  left:50%;top:0;
  width:1px;height:28px;
  background:var(--ink);
  opacity:0.25;
  transform:translateX(-50%) translateY(-14px);
  pointer-events:none;
}
.zone-seal{
  position:absolute;left:50%;top:-18px;
  transform:translateX(-50%);
  font-family:var(--f-serif);font-style:italic;
  font-variation-settings:"opsz" 16,"wght" 400,"SOFT" 30;
  font-size:13px;background:var(--field);padding:0 14px;
  color:var(--signature);opacity:0.6;
  letter-spacing:0;text-transform:none;pointer-events:none;
}

/* Reveal on enter: content slides in 8px / fades */
.reveal{opacity:0;transform:translateY(14px);transition:opacity 900ms ease, transform 900ms cubic-bezier(.2,.7,.2,1);}
.reveal.in{opacity:1;transform:translateY(0);}

/* Intro curtain — brief "Remime" flash on first load */
.boot-curtain{
  position:fixed;inset:0;z-index:600;background:var(--field);
  display:grid;place-items:center;
  transition:opacity 700ms ease;
}
.boot-curtain.gone{opacity:0;pointer-events:none;}
.boot-curtain .bm{
  font-family:var(--f-serif);
  font-variation-settings:"opsz" 144,"wght" 500;
  font-size:clamp(44px,9vw,120px);
  color:var(--ink);
  position:relative;
}
.boot-curtain .bm::before{
  content:"Remime";position:absolute;left:0;top:0;
  color:var(--signature);opacity:0.55;
  transform:translate(8px,5px);
  font-variation-settings:"opsz" 144,"wght" 700,"SOFT" 75,"WONK" 1;
}
/* =========================================================
   REMIME transition layer (full-screen cascade)
   ========================================================= */
.remime-fx{
  position:fixed;inset:0;pointer-events:none;z-index:500;
  background:var(--field);opacity:0;
  transition:opacity 600ms ease;
}
.remime-fx.active{opacity:1;}
.remime-fx .cascade{
  position:absolute;inset:0;overflow:hidden;
}
.remime-fx .cascade span{
  position:absolute;
  font-family:var(--f-serif);
  color:var(--ink);
  font-variation-settings:"opsz" 144,"wght" 500;
  white-space:nowrap;
  opacity:0.85;
  will-change:transform, opacity;
  user-select:none;
}

/* =========================================================
   Responsive
   ========================================================= */
@media (max-width:900px){
  .final-footer{grid-template-columns:1fr;gap:18px;text-align:center;}
  .final-footer .l, .final-footer .r{text-align:center;}
  .final-footer .r{order:3;}
  .notify{order:2;}
  .counter-line{position:static;margin-top:16px;}
  .hours-list{grid-template-columns:repeat(2,1fr);gap:28px 24px;}
  .translation-strip{min-height:auto;}
}
@media (max-width:640px){
  .zone{padding:0 18px;}
  .essay{padding:80px 0 100px;}
  .translations,.hours,.sketch,.final{padding:80px 0;}
  .mark{font-size:clamp(60px,20vw,140px);}
  .btn-remime{font-size:clamp(60px,19vw,140px);}
  .trans-word.size-l{font-size:clamp(44px,10vw,70px);}
  .trans-word.size-m{font-size:clamp(26px,6vw,38px);}
  .trans-word.size-s{font-size:clamp(15px,3.8vw,20px);}
  .trans-word.lang-left, .trans-word.lang-right{ flex-direction:column; gap:2px; }
  .trans-word.lang-above{ flex-direction:column-reverse; }
  .hour-num{font-size:clamp(28px,10vw,44px) !important;}
  .hours-list{flex-direction:column;gap:18px;}
  .hour-row{margin-left:0 !important; transform:none !important; flex-basis:auto !important;}
  .hour-row.city-right{ flex-direction:column; gap:6px; }
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:0.01ms!important;animation-iteration-count:1!important;
    transition-duration:150ms!important;
  }
}

/* =========================================================
   MOBILE-ONLY CORRECTIONS (iPhone ~375–480px)
   These rules ONLY apply at mobile breakpoints and must not
   affect desktop or tablet. No global style edited.
   ========================================================= */
@media (max-width:480px){

  /* ── 1. HERO — safe area for dispersed letters (≥20px from edges)
     The dispersed container uses absolute positioning with overflow:hidden.
     Adding inset padding via margin/inset on the container pulls letter
     zones inward without touching the JS layout logic.
     Combined with a small clamp on font-size to avoid oversized letters
     near the edge causing visual clipping on narrow viewports. */
  .dispersed{
    inset: 0 20px 0 20px;
  }
  .dispersed .dl{
    max-width: calc(100vw - 48px);
    /* cap extreme font-sizes on mobile so rotated letters still fit */
    font-size: min(var(--_sz, 96px), 18vw) !important;
  }

  /* ── 2. CONCEPTUAL BLOCK — reduce duplicate echo offset + add padding
     The echo-word ::after and brand-mention ::after use translate(6-7px, 3-4px).
     On mobile these push off the right margin. Reduce to 3-4px / 2px. */
  .essay-inner{
    padding-left: 26px;
    padding-right: 26px;
  }
  .echo-word::after{
    transform: translate(3px, 2px) !important;
  }
  .echo-word:hover::after{
    transform: translate(4px, 2.5px) !important;
  }
  .essay .brand-mention::after{
    transform: translate(3px, 2px) !important;
  }

  /* ── 3. CONCEPTUAL BLOCK — keep bracketed eggs + punctuation together
     Prevents ".]." from dropping to its own line after a wrap. */
  .essay .egg.b,
  .essay .egg.word-ripple,
  .essay .echo-word,
  .essay .brand-mention{
    white-space: nowrap;
  }
  /* The trailing period after [pattern to study] — pin to the bracket span
     by binding the last .egg.b with its own ::after punctuation.
     Simpler + safer: block breaks immediately after these spans. */
  .essay .egg.b + *,
  .essay .egg.word-ripple + *{
    /* no-op selector retained for future use */
  }

  /* ── 4. TRANSLATIONS — container padding + tighter size ceiling */
  .translation-strip{
    padding-left: 22px;
    padding-right: 22px;
  }
  .trans-word.size-l{ font-size: clamp(40px, 9vw, 64px) !important; }
  .trans-word.size-m{ font-size: clamp(22px, 5vw, 34px) !important; }
  .trans-word.size-s{ font-size: clamp(14px, 3.4vw, 18px) !important; }

  /* ── 5. TRANSLATIONS — prevent duplicate ghost overlap on narrow screens
     The `.ghost` span of echo cells is absolutely positioned on top of
     the main word; on mobile the small dx/dy push needs to be guaranteed
     visible (not zero) AND translated, not stacked. */
  .trans-word.has-echo{ position: relative; }
  .trans-word.has-echo .ghost{
    position: absolute;
    left: 0; top: 0;
    transform: translate(4px, 3px);
    opacity: 0.55;
    pointer-events: none;
  }
  /* Also cap the --dx / --dy jitter on the parent cell so cells don't
     wander into each other. */
  .trans-word{
    --dx: 0 !important;
    --dy: 0 !important;
    --rot: 0deg !important;
  }

  /* ── 6. TRANSLATIONS — rigid lang-label pairing
     Force every cell to a flex column so the language label always sits
     with its word, regardless of `lang-left` / `lang-right` JS variant. */
  .trans-word{
    display: inline-flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 2px !important;
  }
  .trans-word.lang-above{ flex-direction: column-reverse !important; }
  .trans-word .lang{
    white-space: nowrap;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  /* ── 7. HOURS — constellation cascade on narrow viewports
     The desktop hour-rows use --indent (0–30%) + a small tilt. On mobile
     that was flattened to a single column. Restore constellation feel
     with alternating offsets (even = left-aligned, odd = right offset),
     varying tilt, and a cap on indent range. */
  .hours-list{
    flex-direction: column !important;
    gap: 22px !important;
    padding: 0 16px;
  }
  .hour-row{
    /* use the row's own --indent but modulate by index via nth-child */
    transform: translateX(0) rotate(var(--tilt, 0deg)) !important;
    flex-basis: auto !important;
  }
  .hour-row:nth-child(2n){
    margin-left: 12% !important;
  }
  .hour-row:nth-child(4n+3){
    margin-left: 22% !important;
  }
  .hour-row:nth-child(6n+5){
    margin-left: 6% !important;
  }
  .hour-row:nth-child(1){
    margin-left: 0 !important;
  }

  /* ── 8. HOURS — rigid pairing city + time
     Wrap each row's hour + city into a tight vertical stack. City stays
     below. Prevents the JS city-positions ('below','above','right') from
     fragmenting layout on narrow screens. */
  .hour-row{
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 4px !important;
  }
  .hour-row.city-above{ flex-direction: column-reverse !important; }
  .hour-row.city-right{ flex-direction: column !important; }
  .hour-row .hour-num,
  .hour-row .hour-city{
    white-space: nowrap;
  }

  /* ── 9. CANVAS — hide the seal-rule decoration on narrow screens */
  .zone.sketch + .zone::before,
  .zone.sketch::before,
  .zone + .zone.sketch::before{
    display: none !important;
  }
  .zone.sketch .zone-seal,
  .zone.final .zone-seal{
    display: none !important;
  }

  /* ── 10. FINAL ACT — REMIME wordmark padding + size cap
     The btn-remime at clamp(60px,19vw,140px) + letter-spacing -0.02em can
     still bleed edges on 375px. Cap font-size and add horizontal padding. */
  .final{
    padding-left: 20px !important;
    padding-right: 20px !important;
  }
  .btn-remime{
    font-size: clamp(52px, 17vw, 110px) !important;
    letter-spacing: -0.025em !important;
    padding-left: 4px;
    padding-right: 4px;
    max-width: 100%;
  }

}