/* سایه — pitch black wall, twelve windows cut into it. one document, four
   rooms: the wall, the cards, the statement, how it is made. */

:root{
  --bg:#000000;
  --ink:#0a0a0a;
  --text:#f2f0ec;
  --mute:#7d7a75;
  --line:rgba(255,255,255,.10);
  --gap:clamp(9px,1.7vmin,22px);     /* the wall's gap, the same both ways */
  /* the chrome: the bar above and the footer below, as heights the rooms
     are sized against. the footer is one line of the label size. */
  --pad:clamp(14px,2.2vmin,26px);
  --bar:calc(var(--pad) * 2 + clamp(17px,2.1vmin,21px));
  --rail:calc(var(--pad) * 2 + 13px);
  /* what the title block reserves. the header row itself is auto, so this is
     only an over-estimate the wall is sized against — never a cap the intro
     has to fit inside. the wordmark drives it; the rest is a fixed allowance
     for the line, the button and the air above. */
  --head:calc(clamp(30px,4.6vmin,46px) * 2 + 92px);
  --e:11px;                          /* how deep the window is cut */
  --cols:3; --rows:4;
  /* the square has to be solved against the gaps, or whichever axis is
     looser hands its slack back and the spacing stops being even */
  --win:min((100dvw - (var(--cols) + 1) * var(--gap)) / var(--cols),
            (100dvh - var(--bar) - var(--rail) - var(--head) - var(--rows) * var(--gap)) / var(--rows));
  --mono:ui-monospace,"SF Mono",SFMono-Regular,Menlo,monospace;
  --sans:system-ui,-apple-system,"Helvetica Neue",Arial,sans-serif;
  --nas:"Sayeh Nastaliq","Noto Nastaliq Urdu",serif;
}

/* the nastaliq face is the site's own file — a static instance of Noto
   Nastaliq Urdu cut to the collection's letters (build/font.py). Google now
   serves this family as a variable font, and Safari draws its overlapping
   contours with seams. */
@font-face{
  font-family:"Sayeh Nastaliq";
  src:url(font/nastaliq.woff2) format("woff2");
  font-weight:400;
  font-style:normal;
  font-display:swap;
}
[lang="fa"]{font-synthesis:none}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
html{background:var(--bg);-webkit-text-size-adjust:100%}
body{
  background:var(--bg);
  color:var(--text);
  font-family:var(--sans);
  -webkit-font-smoothing:antialiased;
  overflow:hidden;         /* the frame is the screen; a long text scrolls inside its room */
}
a{color:inherit;text-decoration:none}
img{display:block}

.label{
  font-family:var(--mono);
  font-size:10px;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--mute);
}

/* ── the frame: the bar, the stage, the footer ───────────────
   a definite height, not a minimum — `1fr` only becomes a real budget the
   stage can shrink inside once the container's height is settled. */
.piece{
  height:100dvh;
  display:grid;
  grid-template-rows:auto minmax(0,1fr) auto;
}

.bar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1.5rem;
  padding:var(--pad) clamp(14px,2.6vmin,34px);
}
.bar a{color:var(--mute);transition:color .3s ease}
.bar a:hover{color:var(--text)}
.bar .step{display:flex;gap:1.4rem}
/* the way back carries the mark (build/mark.svg), in the bar's own colour */
.bar .home{display:flex;align-items:center;color:rgba(242,240,236,.42)}
.mark{
  width:auto;
  height:clamp(17px,2.1vmin,21px);
  display:block;
  transition:color .3s ease;
}
.bar .home:hover{color:var(--text)}

.foot{
  padding:var(--pad) clamp(14px,2.6vmin,34px);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1.5rem;
  transition:opacity .5s ease;
}
/* the colophon breaks only at a separator, never inside a name, and stays
   latin whichever way the page runs; the rights sit at the far edge */
.colophon{direction:ltr}
.colophon b{font-weight:inherit;white-space:nowrap}
.colophon b:not(:last-child)::after{content:" ·"}
.rights{white-space:nowrap;margin-inline-start:auto}
/* one control in the middle of the footer, showing the language the page is
   in; a press moves to the next. farsi turns the whole page right to left
   (html[dir]), and every side in this stylesheet is a logical one, so the
   layout follows without a second set of rules. */
.lang{
  background:none;border:0;padding:0;margin:0 auto;
  font:inherit;letter-spacing:inherit;text-transform:inherit;
  color:var(--mute);cursor:pointer;transition:color .3s ease;
}
.lang:hover{color:var(--text)}
/* the language choice is put away for now (his call, 2026-10-09): the
   translations stay in the page, the control does not show. the sound
   button borrows this look and keeps it */
.lang{display:none}
/* the sound button in the bar: the look the language control had */
.sound{
  background:none;border:0;padding:0;margin:0;
  font:inherit;letter-spacing:inherit;text-transform:inherit;
  color:var(--mute);cursor:pointer;transition:color .3s ease;
}
.sound:hover{color:var(--text)}

/* ── the menu ───────────────────────────────────────────────
   on a phone the bar holds the mark and a menu; the menu holds the two
   texts and everything the footer holds on a wider screen. it covers the
   page, black, and its lines arrive the way the words on a card do. the
   bar stays above it, so the mark and the menu are always at hand. */
.bar{position:relative;z-index:61}
.burger{
  display:none;
  flex-direction:column;
  justify-content:center;
  gap:5px;
  width:28px;
  height:28px;
  margin:-4px;
  padding:0;
  background:none;
  border:0;
  cursor:pointer;
  color:var(--mute);
  transition:color .3s ease;
}
.burger i{
  display:block;
  width:18px;
  height:1px;
  background:currentColor;
  transition:transform .55s cubic-bezier(.2,.7,.2,1);
}
.burger:hover,body.menu-open .burger{color:var(--text)}
body.menu-open .burger i:first-child{transform:translateY(3px) rotate(45deg)}
body.menu-open .burger i:last-child{transform:translateY(-3px) rotate(-45deg)}
.menu{
  position:fixed;
  inset:0;
  z-index:60;
  background:#000;
  display:grid;
  place-items:center;
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transition:opacity .4s ease,visibility 0s linear .4s;
}
body.menu-open .menu{
  opacity:1;
  visibility:visible;
  pointer-events:auto;
  transition:opacity .5s ease,visibility 0s;
}
.menu__in{
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
  gap:.2em;
  padding:0 1.5rem;
}
.menu__link{
  font-family:var(--mono);
  font-size:13px;
  letter-spacing:.3em;
  text-transform:uppercase;
  color:var(--text);
  padding:.7em 0;
}
.menu .rule{width:2.25rem;height:1px;border:0;background:var(--line);margin:1.4rem 0 1.6rem}
.menu .colophon,.menu .rights,.menu .lang{margin:0;padding:.35em 0}
.menu .lang{padding:.8em 0}
/* each line comes into focus a little after the one before; closed, they
   are gone at once so the next opening starts clean */
.menu__in > *{opacity:0}
body.menu-open .menu__in > *{
  animation:arrive 1s cubic-bezier(.16,1,.3,1) forwards;
  animation-delay:calc(.18s + var(--i,0) * .08s);
}
.menu__in > :nth-child(1){--i:0}
.menu__in > :nth-child(2){--i:1}
.menu__in > :nth-child(3){--i:2}
.menu__in > :nth-child(4){--i:3}
.menu__in > :nth-child(5){--i:4}
.menu__in > :nth-child(6){--i:5}

/* ── the rooms ──────────────────────────────────────────────
   every room sits in the same cell of the stage; one is on. moving between
   them is a crossfade in place — nothing is ever loaded, so nothing can
   flash. the chrome around them does not move. */
.stage{
  display:grid;
  grid-template-columns:minmax(0,1fr);
  grid-template-rows:minmax(0,1fr);
  min-height:0;
}
.view{
  grid-area:1 / 1;
  min-height:0;
  min-width:0;
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transition:opacity .45s ease,visibility 0s linear .45s;
}
.view.is-on{
  opacity:1;
  visibility:visible;
  pointer-events:auto;
  transition:opacity .75s ease .12s,visibility 0s;
}

/* ── the wall ─────────────────────────────────────────────── */

.view--wall{
  display:grid;
  grid-template-rows:auto minmax(0,1fr);
  justify-items:center;
}
.intro{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:.35em;
  text-align:center;
  padding:clamp(10px,1.6vmin,20px) 1.25rem 0;
  transition:opacity .5s ease;
}
.wordmark{
  font-family:var(--nas);
  font-weight:400;
  /* same clearance problem as the piece titles: سایه drops 0.39em under the
     baseline and the line box carries 0.15em of it */
  font-size:clamp(30px,4.6vmin,46px);
  line-height:1.6;
  margin:0;
  padding-bottom:.34em;
}
.lede{
  margin:0;
  font-size:clamp(12px,1.5vmin,14px);
  letter-spacing:.01em;
  color:rgba(242,240,236,.62);
}
.more{
  margin-top:.55em;
  font-family:var(--mono);
  font-size:10px;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--mute);
  padding:.5em 0;
  border-bottom:1px solid rgba(255,255,255,.14);
  transition:color .3s ease,border-color .3s ease;
}
.more:hover{color:var(--text);border-color:rgba(255,255,255,.4)}

/* four seasons of three, three across and four down at every size, so a
   season is always one row. even gap both ways. */
.wall{
  width:100dvw;
  display:grid;
  grid-template-columns:repeat(var(--cols),var(--win));
  grid-template-rows:repeat(var(--rows),var(--win));
  gap:var(--gap);
  place-content:center;
}
body.is-leaning .foot,
body.is-leaning .intro{opacity:.3}

/* ── a window ─────────────────────────────────────────────── */

.win{
  position:relative;
  display:block;        /* a live window is an <a>, which is inline until told otherwise */
  width:100%;
  aspect-ratio:1;
  overflow:hidden;
  border-radius:2px;
  background:var(--tone,var(--ink));
  isolation:isolate;
  transform:translateZ(0);
}

/* everything behind the glass moves together. translation only — the depth
   answers the pointer, it does not zoom toward it. */
.win__deep{
  position:absolute;
  inset:0;
  transform:translate3d(var(--px,0px),var(--py,0px),0);
  transition:transform .45s cubic-bezier(.2,.7,.2,1);
  will-change:transform;
}

.win__lq,
.win__img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
}

/* the blurred preview holds the frame until the render arrives.
   the two are stacked by hand — a filter makes its own stacking
   context, and leaving the order to the browser put the blur on top. */
.win__lq{
  z-index:0;
  background-size:cover;
  background-position:center;
  filter:blur(14px) saturate(.75) brightness(.62);
  transform:scale(1.16);
  animation:hold 2.6s ease-in-out infinite;
}
.win.is-ready .win__lq{
  animation:none;
  opacity:0;
  transition:opacity .5s ease .8s;   /* only after the render is fully in */
}

.win__img{
  z-index:1;
  opacity:0;
  transform:scale(1.1);
  transition:opacity .8s ease,filter .8s ease,transform 1.1s cubic-bezier(.2,.6,.2,1);
  will-change:transform;
}
.win.is-ready .win__img{opacity:1;animation:drift var(--dur,38s) var(--del,0s) ease-in-out infinite alternate}

/* three depth bands, moving against each other on the engine's own seeded
   motion. band 0 ships opaque over the ground colour, so once the stack is
   in it covers the still underneath and the still stops working. */
.win__band{
  position:absolute;
  inset:0;
  z-index:2;
  width:100%;
  height:100%;
  object-fit:cover;
  transform-origin:50% 50%;
  opacity:0;
  transition:opacity .6s ease;
  will-change:transform;
}
/* a card draws the engine's own composite, live. one canvas, sized at the
   bundle's px and scaled by css — every carve, punch and glyph hole is
   recomputed per frame here rather than baked into a layer at rest. */
.win__cv{
  position:absolute;
  inset:0;
  z-index:1;   /* under the glass: at the glass's own level it painted over the cut edge and the vignette once a card went live */
  width:100%;
  height:100%;
  opacity:0;
  transition:opacity .7s ease;
}
.win.is-live .win__cv{opacity:1}
.win.is-live .win__lq{opacity:0;animation:none;transition:opacity .6s ease .3s}
/* the bundle never arrived: settle the preview and leave it holding the frame,
   which is still a window — an empty cut is not */
.win.is-stalled .win__lq{animation:none}

/* the bloom the engine adds over everything, drawn additively and still */
.win__shade{
  position:absolute;
  inset:0;
  z-index:3;
  width:100%;
  height:100%;
  object-fit:cover;
  opacity:0;
  mix-blend-mode:plus-lighter;
  transition:opacity .6s ease;
}
.win.is-stacked .win__band,
.win.is-stacked .win__shade{opacity:1}
.win.is-stacked .win__img{animation:none}
.win.is-stacked .win__lq{opacity:0}

/* a place with no artwork yet: the same cut, nothing behind it but its number */
.win--dark{background:#050505;cursor:default}
.win__num{
  position:absolute;
  z-index:3;
  inset:0;
  display:grid;
  place-items:center;
  font-family:var(--mono);
  font-size:clamp(9px,1.15vmin,12px);
  letter-spacing:.2em;
  color:rgba(242,240,236,.17);
}
.win--dark .win__glass{
  background:none;
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.03),
    inset 0 var(--e) calc(var(--e) * 1.4) calc(var(--e) * -1.25) rgba(0,0,0,.9);
}

/* the glass: the cut edge, the recess, the light that falls short of the back */
.win__glass{
  position:absolute;
  inset:0;
  pointer-events:none;
  z-index:2;
  border-radius:inherit;
  background:
    linear-gradient(180deg,rgba(255,255,255,.05) 0,rgba(255,255,255,0) 9%),
    radial-gradient(135% 105% at 50% 42%,rgba(0,0,0,0) 62%,rgba(0,0,0,.36) 100%);
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.055),
    inset 0 var(--e) calc(var(--e) * 1.55) calc(var(--e) * -1.2) rgba(0,0,0,.98),
    inset 0 calc(var(--e) * -.75) calc(var(--e) * 1.35) calc(var(--e) * -1.2) rgba(0,0,0,.85),
    inset var(--e) 0 calc(var(--e) * 1.55) calc(var(--e) * -1.35) rgba(0,0,0,.9),
    inset calc(var(--e) * -1) 0 calc(var(--e) * 1.55) calc(var(--e) * -1.35) rgba(0,0,0,.9);
  transition:background .5s ease,box-shadow .5s ease,opacity .5s ease;
}

.win__cap{
  position:absolute;
  z-index:3;
  left:0;right:0;bottom:0;
  padding:22% clamp(9px,1.6vmin,20px) clamp(6px,1.1vmin,14px);
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:1em;
  background:linear-gradient(180deg,rgba(0,0,0,0) 0,rgba(0,0,0,.55) 62%,rgba(0,0,0,.82) 100%);
  opacity:0;
  transform:translateY(4px);
  transition:opacity .35s ease,transform .35s ease;
  pointer-events:none;
}
.win__cap b{
  font-family:var(--nas);
  font-weight:400;
  font-size:clamp(15px,2.4vmin,26px);
  line-height:1.9;
  color:var(--text);
  text-shadow:0 1px 10px rgba(0,0,0,.95);
}
.win__cap i{
  font-style:normal;
  font-family:var(--mono);
  font-size:clamp(8px,1.05vmin,11px);
  letter-spacing:.15em;
  text-transform:uppercase;
  color:rgba(242,240,236,.72);
  text-shadow:0 1px 8px rgba(0,0,0,.95);
}

/* no pointer, no hover — the names just stay */
@media (hover:none){
  .win__cap{opacity:1;transform:none}
}

/* leaning in changes one thing: the word appears. the colour swing that
   goes with it lives in the middle band, driven from sayeh.js. */
@media (hover:hover){
  .wall .win:hover .win__cap{opacity:1;transform:none}
}
.win:focus-visible{outline:none}
.win:focus-visible .win__glass{box-shadow:inset 0 0 0 1px rgba(255,255,255,.55)}
.win:focus-visible .win__cap{opacity:1;transform:none}

/* the wall arrives one window at a time, each coming into focus — when the
   wall is the room on show, and once the veil is going, not under it. under
   the veil the windows finish loading first, stills and then their stacks,
   so what comes into focus is the finished window. the stagger sits on this
   element, the one that animates. */
.wall > *{opacity:0}
.view--wall.is-on .wall > *{animation:cut 1.4s var(--in,0s) cubic-bezier(.16,1,.3,1) forwards}
.veil:not(.is-gone) ~ .piece .wall > *{animation-play-state:paused}

@keyframes cut{from{opacity:0;transform:scale(.97);filter:blur(14px)}to{opacity:1;transform:none;filter:none}}
@keyframes hold{0%,100%{opacity:.62}50%{opacity:.92}}
@keyframes drift{
  0%  {transform:scale(1.1) translate3d(-1.1%,.8%,0)}
  100%{transform:scale(1.1) translate3d(1.1%,-.8%,0)}
}

/* ── the cards ────────────────────────────────────────────────
   every made piece on one track. one card is in view; the last and the
   next stand in shade at its sides. a press on the way on brings the next
   card in — slowly, with weight: a long ease that leans into the move and
   settles late. the way back and the way on sit outside the card. */
.view--deck{
  position:relative;
  padding:clamp(8px,1.6vmin,20px) 0;
  display:flex;
  align-items:center;
  justify-content:center;
}
.deck{
  position:relative;
  width:100%;
  height:100%;
  overflow:hidden;
  display:flex;
  align-items:center;
}
/* the track moves on a transform, which the browser can animate without
   laying anything out. one exception: a transformed ancestor becomes the
   containing block of a position:fixed descendant, and the card's window
   goes fixed for the whole screen — so while the screen is full the track
   holds the same place with `left` instead, and the window is free. */
.track{
  --dgap:clamp(20px,4vw,64px);
  position:relative;
  display:flex;
  align-items:center;
  gap:var(--dgap);
  transform:translateX(var(--tx,0px));
  transition:transform 1.25s cubic-bezier(.7,0,.15,1);
  will-change:transform;
}
.track.is-still{transition:none}
body.is-full .track{transform:none;left:var(--tx,0px);transition:none;will-change:auto}
/* a card never changes size — it is a physical thing on a track. the ones
   beside the card in view are all but dark: enough to know they are there,
   not enough to look at. */
.slide{
  flex:0 0 auto;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:clamp(12px,2vmin,24px);
  padding:clamp(14px,2vmin,24px);
  border:1px solid var(--line);
  border-radius:4px;
  opacity:.09;
  transition:opacity 1.25s cubic-bezier(.7,0,.15,1);
  cursor:pointer;
}
.slide.is-current{opacity:1;cursor:default}
/* the window is sized on its height and takes its width from the ratio, so
   when the page runs short it shrinks and stays square */
.slide .win{
  height:min(82vw,50dvh);
  width:auto;
  flex:0 1 auto;
  min-height:min(160px,80vw);
  --e:24px;
  border-radius:3px;
}
.slide.is-current .win{cursor:zoom-in}
/* the words are exactly as wide as the artwork (sayeh.js measures it) */
.slide .card{flex:0 0 auto;width:var(--ww,auto);max-width:100%}
.slide .win__cap{display:none}
/* the glass on a card keeps a layer of its own: the track slides as a
   composited transform and the window's inner layers are promoted, so
   webkit on a phone promoted and dropped the glass around every move —
   the cut edge and the vignette blinked out mid-turn. pinned, it stays. */
.slide .win__glass{transform:translateZ(0);will-change:transform;backface-visibility:hidden}
/* on a card the still is the finished frame at rest, exactly as the live
   composite will draw it — same framing, no drift, no zoom — so when the
   composite takes over underneath, nothing can be seen to change. the
   blurred preview does not pulse here either; a card is never "loading" */
.slide .win__lq{animation:none}
.slide .win__img{transform:none;transition:opacity 1s ease}
.slide .win.is-ready .win__img{animation:none;transform:none}
.slide .win.is-live .win__img{opacity:0;transition:opacity .6s ease .3s}

.turn{
  font-family:var(--mono);
  font-size:10px;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--mute);
  transition:color .3s ease,opacity .3s ease,visibility 0s;
  white-space:nowrap;
}
.turn:hover{color:var(--text)}
.view--deck .turn{position:absolute;top:50%;transform:translateY(-50%);z-index:4}
.turn--prev{inset-inline-start:clamp(14px,3vw,48px)}
.turn--next{inset-inline-end:clamp(14px,3vw,48px)}

/* the word, then how you say it, then what it means */
.card{text-align:center;max-width:min(86vw,30rem)}
.card .name{
  font-family:var(--nas);
  font-weight:400;
  font-size:clamp(40px,6.2vmin,68px);
  /* measured: the deepest of these words drops 0.43em below the baseline.
     at line-height 1.7 the box only carries 0.2em of that, so the rest is
     padding — otherwise the tail lands on the romanisation. */
  line-height:1.7;
  margin:0;
  padding-bottom:.38em;
}
.card .rom{
  margin:.35em 0 0;
  font-family:var(--mono);
  font-size:clamp(11px,1.5vmin,13px);
  letter-spacing:.24em;
  text-transform:uppercase;
  color:rgba(242,240,236,.88);
}
.card .mean{
  margin:.5em 0 0;
  font-size:clamp(12px,1.6vmin,15px);
  color:var(--mute);
}
.card .pos{
  margin:clamp(16px,2.6vmin,26px) 0 0;
  padding-top:clamp(14px,2.2vmin,22px);
  border-top:1px solid var(--line);
  display:inline-block;
  min-width:9rem;
}
/* what the piece is tied to, and what that place is doing right now */
.card .tie{
  margin:.7em 0 0;
  color:rgba(242,240,236,.34);
}
.card .tie__wind{color:rgba(242,240,236,.62)}

/* the words arrive after the artwork the first time a card is shown: one
   line after another, each coming into focus a little later than the one
   above it. held under the veil, like the wall. once the track has moved
   the cards are physical things and their words simply stay. */
.slide .card > *{opacity:1}
.track:not(.is-flipped) .slide.is-current .card > *{
  opacity:0;
  animation:arrive 1.1s cubic-bezier(.16,1,.3,1) forwards;
  animation-delay:calc(.7s + var(--i,0) * .11s);
}
.slide .card .name{--i:0}
.slide .card .rom{--i:1}
.slide .card .mean{--i:2}
.slide .card .pos{--i:3}
.slide .card .tie{--i:4}
@keyframes arrive{
  from{opacity:0;transform:translateY(8px);filter:blur(4px)}
  to{opacity:1;transform:none;filter:blur(0)}
}
.veil:not(.is-gone) ~ .piece .slide.is-current .card > *{animation-play-state:paused}
/* the veil's own fallback let go of the page: nothing stays held for a
   script that never came */
html.veil-late .slide .card > *,
html.veil-late .wall > *{animation-play-state:running !important}

/* ── the two texts ──────────────────────────────────────────
   one focal point, one hairline, one measured column. the display block
   stays centred like a card; the reading text goes flush to its start,
   because four centred lines start behaving like a poem. the column is
   centred when it fits and scrolls inside its room when it does not. */
.view--read{
  display:flex;
  flex-direction:column;
  align-items:center;
  overflow-y:auto;
  padding:clamp(10px,2vmin,24px) clamp(14px,2.6vmin,34px);
}
.view--read .about{margin:auto}
.about{max-width:min(88vw,28rem)}   /* ~65 characters a line */
.about .rule{
  width:2.25rem;
  height:1px;
  margin:clamp(22px,3.2vmin,34px) auto clamp(22px,3.2vmin,34px);
  border:0;
  background:var(--line);
}
.about .lead{
  margin:0;
  font-size:clamp(15px,2vmin,19px);
  line-height:1.5;
  color:rgba(242,240,236,.92);
}
.about p:not([class]){
  margin:clamp(18px,2.4vmin,26px) 0 0;
  text-align:start;
  font-size:clamp(13px,1.65vmin,15px);
  line-height:1.8;
  color:rgba(242,240,236,.68);
}
.about .by{margin:clamp(30px,4.4vmin,50px) 0 0}
.about .credit{margin-top:.9em;color:var(--mute)}
.about .more{display:inline-block;margin-top:clamp(18px,2.6vmin,28px)}
/* the text, in whichever language is chosen; english when none is */
.about .text{display:none}
html:not([data-lang]) .about .text[lang="en"],
html[data-lang="en"] .about .text[lang="en"],
html[data-lang="fa"] .about .text[lang="fa"],
html[data-lang="tr"] .about .text[lang="tr"]{display:block}
.about .text[lang="fa"] p{line-height:2}
/* small section names inside a reading column */
.about .sub{margin:clamp(26px,3.6vmin,40px) 0 0;text-align:start}
.about .sub + p:not([class]){margin-top:.55em}
/* the one form: a line, a field, a word */
.try{margin:0;text-align:start}
.try__row{display:flex;gap:1.2rem;align-items:flex-end;margin-top:1em}
.try input[type="email"]{
  flex:1 1 auto;min-width:0;
  background:none;border:0;border-radius:0;outline:none;
  border-bottom:1px solid rgba(255,255,255,.18);
  color:var(--text);font:13px/1.8 var(--mono);padding:.3em 0;
  transition:border-color .3s ease;
}
.try input[type="email"]:focus{border-color:rgba(255,255,255,.5)}
.try input::placeholder{color:rgba(242,240,236,.34)}
.try .more{margin:0;flex:0 0 auto;background:none;border-top:0;border-left:0;border-right:0;cursor:pointer}
.try .hp{position:absolute;inset-inline-start:-9999px;width:1px;height:1px;overflow:hidden}
.try__note{margin:.9em 0 0;text-align:start;min-height:1.4em}
.try.is-sent .try__row{display:none}

/* ── the whole screen ────────────────────────────────────── */

/* click the card's artwork and it is the screen: a square as big as the
   viewport allows, centred on black. the glass goes — no cut edge, no
   recess, no vignette — and so does everything around it. the way in and
   the way out are the same move played backwards — see setFull in
   sayeh.js, which measures the window before and after the class changes
   and lets a transform carry it from one box to the other. */
body.is-full{overflow:hidden}
body.is-full .slide.is-current .win{
  position:fixed;
  inset:0;
  margin:auto;
  width:min(100vw,100dvh);
  height:min(100vw,100dvh);
  min-height:0;
  z-index:50;
  border-radius:0;
  background:#000;
  cursor:zoom-out;
  /* the browser's own full screen arrives after the morph and makes the
     viewport bigger; the square grows into it rather than snapping */
  transition:width .5s ease,height .5s ease;
}
body.is-full .slide.is-current .win .win__glass{opacity:0}
.bar,.foot,.slide.is-current .card{transition:opacity .45s ease .25s,visibility 0s linear 0s}
body.is-full .bar,
body.is-full .foot,
body.is-full .slide.is-current .card,
body.is-full .slide:not(.is-current),
body.is-full .view--deck .turn{opacity:0;visibility:hidden;transition:opacity .3s ease,visibility 0s linear .3s}

/* persian runs keep their joins: no tracking and no upper case on them,
   wherever they land. last on purpose, so it outranks every label rule. */
[lang="fa"][lang],[lang="fa"] *{letter-spacing:0;text-transform:none}

@media (max-width:640px){
  /* no footer on a phone: what it holds is in the menu, and the rooms get
     the room */
  :root{--rail:0px}
  .foot,.bar .step{display:none}
  .burger{display:flex}
  .try__row{flex-wrap:wrap}
  .slide{padding:10px 10px 14px;gap:10px}
  .slide .win{--e:16px;height:min(76vw,46dvh)}
  .track{--dgap:16px}
  /* no room beside the card on a phone: the way back and the way on sit
     under it, on the room's two edges, and a swipe does the same */
  .view--deck{display:grid;grid-template-rows:minmax(0,1fr) auto;grid-template-columns:1fr 1fr;row-gap:clamp(10px,2vmin,18px)}
  .deck{grid-area:1 / 1 / 2 / 3}
  .view--deck .turn{position:static;transform:none;padding:.4em 0}
  .turn--prev{grid-area:2 / 1;justify-self:start;margin-inline-start:16px}
  .turn--next{grid-area:2 / 2;justify-self:end;margin-inline-end:16px}
}

@media (prefers-reduced-motion:reduce){
  .view,.view.is-on,.track,.slide,.menu,.burger i{transition:none}
  body.menu-open .menu__in > *{animation:none;opacity:1}
  .slide{opacity:.2}
  .win.is-ready .win__img{animation:none}
  .win__lq{animation:none}
  .wall > *{animation-duration:.01ms}
  .slide.is-current .card > *{animation:none;opacity:1}
  *{transition-duration:.01ms !important}
}