/* ==========================================================================
   OHA Resin — Twelve Days
   One piece, made while you scroll. Near-black so the resin is the only
   light in the room. Logical properties throughout, so LTR and RTL share this.
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Newsreader:opsz,wght@6..72,200;6..72,300;6..72,400&family=Karla:wght@400;500;600&family=Amiri:wght@400&family=IBM+Plex+Sans+Arabic:wght@300;400;500&display=swap');

:root{
  --void:#0B0C0D;
  --void-2:#121415;
  --mist:#EAE8E3;
  --dim:rgba(234,232,227,.56);
  --faint:rgba(234,232,227,.16);
  --glow:#2FD3C4;
  --glow-deep:#11655F;
  --gold:#C9A227;

  --display:'Newsreader',Georgia,serif;
  --text:'Karla',system-ui,sans-serif;

  --s-1:clamp(.8rem,.77rem + .14vw,.88rem);
  --s0:clamp(.98rem,.94rem + .18vw,1.06rem);
  --s1:clamp(1.2rem,1.05rem + .5vw,1.5rem);
  --s2:clamp(1.6rem,1.25rem + 1.5vw,2.6rem);
  --gutter:clamp(1.25rem,5vw,3.5rem);
}

html[lang="ar"]{
  --display:'Amiri',Georgia,serif;
  --text:'IBM Plex Sans Arabic',system-ui,sans-serif;
}

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

html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  background:var(--void);
  color:var(--mist);
  font-family:var(--text);
  font-size:var(--s0);
  line-height:1.6;
  overflow-x:hidden;
}
html[lang="ar"] body{line-height:1.85}

img{display:block;max-width:100%}
::selection{background:var(--glow);color:var(--void)}
:focus-visible{outline:2px solid var(--glow);outline-offset:3px}

.wrap{max-width:min(72rem,calc(100% - var(--gutter)*2));margin-inline:auto}

/* ------------------------------------------------------------------- chrome */

.bar{
  position:fixed;inset-block-start:0;inset-inline:0;z-index:40;
  display:flex;align-items:center;gap:1rem;
  padding:1.1rem var(--gutter);
  pointer-events:none;
}
.bar > *{pointer-events:auto}
.bar a{color:var(--mist);text-decoration:none;font-size:var(--s-1)}
.bar .brand{
  font-family:var(--display);letter-spacing:.16em;
  margin-inline-end:auto;display:inline-flex;align-items:center;gap:.55rem;
}
.bar .brand img{inline-size:1.5rem;block-size:1.5rem}
.bar .out{color:var(--dim);border-block-end:1px solid transparent;padding-block-end:2px}
.bar .out:hover{color:var(--mist);border-block-end-color:var(--glow)}

/* --------------------------------------------------------------------- reel */
/* The tall element supplies scroll distance; the stage inside it stays put. */

.reel{position:relative}
.reel-stage{
  position:sticky;inset-block-start:0;
  block-size:100svh;
  overflow:hidden;
  background:var(--void);
}

.frame{
  position:absolute;inset:0;
  inline-size:100%;block-size:100%;
  object-fit:cover;
  opacity:0;
  transition:opacity .5s ease;
  will-change:opacity;
}
.frame.is-on{opacity:1}
.frame.tiny{opacity:1;filter:blur(22px) saturate(1.2);transform:scale(1.06)}
.frame.tiny.gone{opacity:0}

/* The resin is the only light, so the type sits in the dark around it. */
.vignette{
  position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(70% 55% at 50% 52%,transparent 30%,rgba(11,12,13,.5) 78%),
    linear-gradient(to bottom,rgba(11,12,13,.75) 0%,transparent 26%,transparent 52%,rgba(11,12,13,.88) 100%);
}

.reel-ui{
  position:absolute;inset:0;
  display:grid;
  grid-template-rows:1fr auto;
  padding:clamp(4.5rem,11vh,7rem) var(--gutter) clamp(1.5rem,4vh,2.5rem);
  pointer-events:none;
}

/* the day, as a film slate */
.slate{grid-row:1;align-self:start;justify-self:start;margin:0}
.slate .n{
  display:block;
  font-family:var(--display);
  font-weight:200;
  font-size:clamp(4.5rem,17vw,13rem);
  line-height:.82;
  letter-spacing:-.04em;
  font-variant-numeric:tabular-nums;
  color:var(--mist);
  text-shadow:0 2px 40px rgba(0,0,0,.65);
}
html[lang="ar"] .slate .n{
  font-size:clamp(3.5rem,12vw,9rem);
  font-weight:400;letter-spacing:0;line-height:1.25;
  padding-block-start:.08em;
}
.slate .w{
  display:block;
  font-size:var(--s-1);
  letter-spacing:.24em;
  color:var(--dim);
  margin-block-start:.5rem;
}
html[lang="ar"] .slate .w{letter-spacing:.06em}

.reel-foot{
  grid-row:2;
  display:grid;
  gap:clamp(1.1rem,3vh,1.9rem);
}

.caption{max-width:34ch}
.caption h2{
  font-family:var(--display);
  font-weight:300;
  font-size:var(--s2);
  line-height:1.15;
  margin:0 0 .5rem;
}
html[lang="ar"] .caption h2{font-weight:400;line-height:1.45}
.caption p{margin:0;color:var(--dim);font-size:var(--s0)}

/* --------------------------------------------------------------- the scrub */

.scrub{
  pointer-events:auto;
  display:grid;gap:.45rem;
}
.scrub-line{position:relative;block-size:2.5rem;display:flex;align-items:center}
.ticks{
  position:absolute;inset-inline:0;inset-block-start:50%;
  display:flex;justify-content:space-between;align-items:center;
  transform:translateY(-50%);
  pointer-events:none;
}
.ticks span{
  inline-size:1px;block-size:.5rem;
  background:var(--faint);
  transition:background .25s ease,height .25s ease;
}
.ticks span.past{background:var(--glow);block-size:.85rem}

.rail{
  position:absolute;inset-inline:0;inset-block-start:50%;
  block-size:1px;background:var(--faint);transform:translateY(-50%);
  pointer-events:none;
}
.rail-fill{
  position:absolute;inset-block-start:50%;inset-inline-start:0;
  block-size:1px;background:var(--glow);transform:translateY(-50%);
  box-shadow:0 0 10px rgba(47,211,196,.8);
  pointer-events:none;
  inline-size:0;
}
html[lang="ar"] .rail-fill{inset-inline-start:auto;inset-inline-end:0}

.scrub input[type="range"]{
  position:relative;z-index:2;
  inline-size:100%;margin:0;
  background:transparent;
  appearance:none;cursor:grab;
}
.scrub input[type="range"]:active{cursor:grabbing}
.scrub input[type="range"]::-webkit-slider-runnable-track{block-size:2.5rem;background:transparent}
.scrub input[type="range"]::-moz-range-track{block-size:2.5rem;background:transparent}
.scrub input[type="range"]::-webkit-slider-thumb{
  appearance:none;
  inline-size:1.15rem;block-size:1.15rem;border-radius:50%;
  background:var(--glow);border:0;
  margin-block-start:.68rem;
  box-shadow:0 0 0 5px rgba(47,211,196,.18),0 0 18px rgba(47,211,196,.75);
}
.scrub input[type="range"]::-moz-range-thumb{
  inline-size:1.15rem;block-size:1.15rem;border-radius:50%;
  background:var(--glow);border:0;
  box-shadow:0 0 0 5px rgba(47,211,196,.18),0 0 18px rgba(47,211,196,.75);
}
.scrub-ends{
  display:flex;justify-content:space-between;
  font-size:var(--s-1);color:var(--dim);
}

.hint{
  margin:0;
  font-size:var(--s-1);color:var(--dim);
  pointer-events:none;
  transition:opacity .4s ease;
}
.hint.gone{opacity:0}

/* -------------------------------------------------------------------- after */

.after{
  position:relative;z-index:2;
  background:var(--void);
  padding-block:clamp(5rem,12vw,9rem);
}
.after h2{
  font-family:var(--display);font-weight:200;
  font-size:clamp(2rem,1.4rem + 3vw,4rem);
  line-height:1.1;margin:0 0 1.25rem;max-width:18ch;
}
html[lang="ar"] .after h2{font-weight:400;line-height:1.45}
.after p{color:var(--dim);max-width:46ch;margin:0 0 2rem}

.acts{display:flex;flex-wrap:wrap;gap:.7rem}
.btn{
  display:inline-block;text-decoration:none;cursor:pointer;
  font-family:var(--text);font-size:var(--s-1);font-weight:500;
  padding:.8rem 1.6rem;border-radius:999px;border:1px solid transparent;
  transition:background .2s,border-color .2s,color .2s;
}
.btn-glow{background:var(--glow);color:#04211F}
.btn-glow:hover{background:#5CE4D8}
.btn-ghost{border-color:var(--faint);color:var(--mist)}
.btn-ghost:hover{border-color:var(--mist)}

.foot{
  padding:2rem var(--gutter);
  border-block-start:1px solid var(--faint);
  display:flex;flex-wrap:wrap;gap:.6rem 1.75rem;align-items:center;
  font-size:var(--s-1);color:var(--dim);
}
.foot a{color:var(--dim);text-decoration:none}
.foot a:hover{color:var(--glow)}
.foot .brand{margin-inline-end:auto;font-family:var(--display);letter-spacing:.16em;color:var(--mist)}

/* ------------------------------------------------- no scroll trick fallback */
/* Without JS, or with reduced motion, the reel becomes an ordinary list of
   stages. Every frame and caption stays readable. */

.stack{display:none}
.stack figure{margin:0 0 clamp(2rem,5vw,4rem)}
.stack img{inline-size:100%;block-size:auto}
.stack figcaption{padding-block-start:1rem}
.stack .n{font-family:var(--display);font-size:var(--s1);color:var(--glow)}
.stack h2{font-family:var(--display);font-weight:300;font-size:var(--s2);margin:.3rem 0 .4rem}
.stack p{margin:0;color:var(--dim);max-width:52ch}

html.no-js .reel{display:none}
html.no-js .stack{display:block;padding-block:clamp(5rem,12vh,8rem)}

@media (prefers-reduced-motion:reduce){
  .reel{display:none}
  .stack{display:block;padding-block:clamp(5rem,12vh,8rem)}
  *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}
}

@media (max-width:640px){
  .caption{max-width:26ch}
  .caption h2{font-size:var(--s1)}
}

.vh{position:absolute;inline-size:1px;block-size:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{
  position:absolute;inset-block-start:-100px;inset-inline-start:1rem;z-index:99;
  background:var(--glow);color:var(--void);padding:.65rem 1rem;text-decoration:none;
  font-size:var(--s-1);font-weight:600;border-radius:0 0 6px 6px;
}
.skip:focus{inset-block-start:0}

/* ---------------------------------------------------------------- the real */
/* Photographs of pieces that exist. Shot on a phone on a patio, so the
   surroundings were replaced with a studio black; the pieces are untouched. */

.real{
  position:relative;z-index:2;
  background:var(--void);
  padding-block:clamp(4.5rem,11vw,8rem) clamp(1rem,2vw,2rem);
}

.real-lead{max-width:44ch;margin-block-end:clamp(2.5rem,6vw,4.5rem)}
.real-lead h2{
  font-family:var(--display);font-weight:200;
  font-size:clamp(1.9rem,1.35rem + 2.6vw,3.4rem);
  line-height:1.12;margin:0 0 .9rem;
}
html[lang="ar"] .real-lead h2{font-weight:400;line-height:1.45}
.real-lead p{margin:0;color:var(--dim)}

.plates{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,20rem),1fr));
  gap:clamp(1.5rem,4vw,3.5rem);
}
@media (max-width:860px){.plates{gap:2.5rem}}

.plate figure{margin:0}
.plate img{inline-size:100%;block-size:auto}

/* the glow under the teal piece, borrowed from the piece itself */
.plate-teal figure{
  background:radial-gradient(60% 55% at 50% 48%,rgba(47,211,196,.13),transparent 70%);
}

.tag{
  margin-block-start:1.1rem;
  padding-block-start:.9rem;
  border-block-start:1px solid var(--faint);
}
.tag dt{margin:0 0 .25rem;font-size:var(--s-1);font-weight:600;color:var(--mist)}
.tag dd{margin:0;font-size:var(--s-1);color:var(--dim);max-width:40ch}

.closer{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,18rem),1fr));
  gap:clamp(1.5rem,4vw,3.5rem);
  margin-block-start:clamp(2.5rem,6vw,4.5rem);
}
.closer figure{margin:0}
.closer img{inline-size:100%;block-size:auto;aspect-ratio:4/3;object-fit:cover}

/* ------------------------------------------------------------- the surface */
/* A still flattens the pour. This is the one place the page moves on its own,
   and it stays paused for anyone who asked not to have motion. */

.motion{
  display:grid;
  grid-template-columns:minmax(0,22rem) minmax(0,1fr);
  gap:clamp(1.75rem,5vw,4rem);
  align-items:center;
  margin-block-start:clamp(3rem,7vw,5.5rem);
}
@media (max-width:760px){.motion{grid-template-columns:1fr;gap:1.75rem}}

.motion video{
  inline-size:100%;block-size:auto;display:block;
  background:var(--void-2);
}
.motion-say{max-width:36ch}
.motion-say h3{
  font-family:var(--display);font-weight:300;
  font-size:clamp(1.35rem,1.1rem + 1vw,2rem);
  line-height:1.2;margin:0 0 .6rem;
}
html[lang="ar"] .motion-say h3{font-weight:400;line-height:1.5}
.motion-say p{margin:0;color:var(--dim);font-size:var(--s-1)}