/* ==========================================================================
   Larisel — home
   --------------------------------------------------------------------------
   One material world: night (ink), the warm light the mark is written in,
   and the cream page the café film ends on. Thin lines, light weights,
   quiet motion — a premium page is mostly what it leaves out.
   ========================================================================== */

/* ---- fonts ---------------------------------------------------------------- */
@font-face { font-family: "Newsreader"; src: url("../fonts/newsreader-latin.woff2") format("woff2"); font-weight: 200 800; font-style: normal; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215; }
@font-face { font-family: "Newsreader"; src: url("../fonts/newsreader-latin-ext.woff2") format("woff2"); font-weight: 200 800; font-style: normal; font-display: swap;
  unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF; }
/* Newsreader has no Cyrillic: Russian headlines take Source Serif 4 (OFL; the
   closest editorial serif with light weights and a real italic), declared under
   the same family name for the Cyrillic range only, so a mixed line ("3D в
   ваших руках") stays one face to the eye instead of falling to Georgia.
   Every face of one style must declare the SAME weight range: Chrome groups
   faces by that range and uses one group only — a Cyrillic 200-900 beside a
   Latin 200-800 left "Larisel" in Russian titles to a system font. */
@font-face { font-family: "Newsreader"; src: url("../fonts/source-serif-4-cyrillic.woff2") format("woff2"); font-weight: 200 800; font-style: normal; font-display: swap;
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: "Newsreader"; src: url("../fonts/source-serif-4-cyrillic-italic.woff2") format("woff2"); font-weight: 200 800; font-style: italic; font-display: swap;
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
/* Newsreader's real italic (OFL, Google Fonts) — the browser's slanted roman
   kept the upright's double-storey a and tailless f */
@font-face { font-family: "Newsreader"; src: url("../fonts/newsreader-latin-italic.woff2") format("woff2"); font-weight: 200 800; font-style: italic; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215; }
@font-face { font-family: "Newsreader"; src: url("../fonts/newsreader-latin-ext-italic.woff2") format("woff2"); font-weight: 200 800; font-style: italic; font-display: swap;
  unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Inter"; src: url("../fonts/inter-latin.woff2") format("woff2"); font-weight: 100 900; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215; }
@font-face { font-family: "Inter"; src: url("../fonts/inter-latin-ext.woff2") format("woff2"); font-weight: 100 900; font-display: swap;
  unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Inter"; src: url("../fonts/inter-cyrillic.woff2") format("woff2"); font-weight: 100 900; font-display: swap;
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: "Inter"; src: url("../fonts/inter-cyrillic-ext.woff2") format("woff2"); font-weight: 100 900; font-display: swap;
  unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F; }
@font-face { font-family: "Plex Mono"; src: url("../fonts/ibm-plex-mono-latin.woff2") format("woff2"); font-weight: 400; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215; }
@font-face { font-family: "Plex Mono"; src: url("../fonts/ibm-plex-mono-latin-ext.woff2") format("woff2"); font-weight: 400; font-display: swap;
  unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Plex Mono"; src: url("../fonts/ibm-plex-mono-cyrillic.woff2") format("woff2"); font-weight: 400; font-display: swap;
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }

/* ---- tokens --------------------------------------------------------------- */
:root {
  /* the world */
  --c-night: #0b0b0f;            /* the film's black, the mark's ground */
  --c-ivory: #f3ede1;            /* the mark */
  --c-cream: #f4efe5;            /* the page — the café film's last frames are this, to the bit */
  --c-ink: #17150f;
  --c-ink-soft: #5c564c;
  --c-ink-faint: #8d867a;
  --c-light: #e8b27a;            /* the warm light the mark is written in */
  --c-line: rgba(23, 21, 15, 0.14);
  --c-line-night: rgba(243, 237, 225, 0.16);

  /* type */
  --f-display: "Newsreader", "Iowan Old Style", Georgia, serif;
  --f-body: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --f-mono: "Plex Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;
  --t-hero: clamp(2.4rem, 1rem + 3.4vw, 4.75rem);       /* lines end before ~48% at 1280-1440: the mark starts at 55% */
  --t-h2: clamp(2.2rem, 1.3rem + 2.7vw, 4.1rem);
  --t-lead: clamp(1rem, 0.95rem + 0.22vw, 1.13rem);
  --t-body: 1rem;
  --t-label: 0.72rem;
  --ls-label: 0.16em;

  /* space */
  --pad-edge: clamp(1rem, 0.4rem + 2.6vw, 2.75rem);
  --s-2: 0.5rem; --s-3: 0.75rem; --s-4: 1rem; --s-5: 1.5rem; --s-6: 2rem; --s-7: 3rem; --s-8: 4.5rem; --s-9: 7rem;
  --hdr-h: clamp(3.75rem, 3.2rem + 1.4vw, 4.75rem);

  /* motion: one language everywhere — a long, soft settle */
  --e-out: cubic-bezier(0.22, 1, 0.36, 1);
  --e-inout: cubic-bezier(0.65, 0, 0.35, 1);
  --d-fast: 220ms; --d-base: 480ms; --d-slow: 900ms;
}

/* a chapter still being rendered (index.html data-pending): not on the page yet */
[data-pending] { display: none !important; }

/* ---- base ----------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--c-cream);
  color: var(--c-ink);
  font-family: var(--f-body);
  font-size: var(--t-body);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
html.is-loading body { overflow: hidden; }
img, svg, canvas { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
p, h1, h2, h3, dl, dd { margin: 0; }
:focus-visible { outline: 1.5px solid var(--c-light); outline-offset: 4px; border-radius: 2px; }

.skip-link {
  position: fixed; left: var(--pad-edge); top: -100px; z-index: 50;
  background: var(--c-ivory); color: var(--c-night); padding: 0.6rem 1rem; border-radius: 999px;
  font: 500 0.85rem/1 var(--f-body);
}
.skip-link:focus { top: 1rem; }

.label {
  font-family: var(--f-mono);
  font-size: var(--t-label);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--c-ink-soft);
}

/* ---- buttons: thin, quiet, unmistakably buttons --------------------------- */
.btn {
  position: relative;
  display: inline-flex; align-items: center; justify-content: center; gap: 0.6em;
  min-height: 2.9rem; padding: 0 1.35rem;
  border-radius: 999px;
  font: 450 0.92rem/1 var(--f-body); letter-spacing: 0.01em;
  transition: background var(--d-fast) var(--e-out), color var(--d-fast) var(--e-out), border-color var(--d-fast) var(--e-out), transform var(--d-base) var(--e-out);
}
.btn--solid { background: var(--c-ink); color: var(--c-cream); }
.btn--solid:hover { background: #2a261d; }
.btn--line { border: 1px solid var(--c-line); color: var(--c-ink); }
.btn--line:hover { border-color: rgba(23, 21, 15, 0.42); }
.btn:active { transform: translateY(1px); }
.btn[target="_blank"]::after { content: "\2197"; font-size: 0.85em; opacity: 0.6; }

/* ---- loader: a curtain that counts the opening's frames ------------------ */
.loader {
  position: fixed; inset: 0; z-index: 40;
  display: grid; place-items: center; align-content: center; gap: 1.6rem;
  background: var(--c-night); color: var(--c-ivory);
  transition: opacity var(--d-slow) var(--e-out), visibility 0s linear var(--d-slow);
}
html:not(.is-loading) .loader { opacity: 0; visibility: hidden; }
.loader__mark { font: 400 0.78rem/1 var(--f-mono); letter-spacing: 0.5em; padding-left: 0.5em; opacity: 0.72; }
.loader__bar { position: relative; width: min(11rem, 40vw); height: 1px; background: var(--c-line-night); overflow: hidden; }
.loader__bar i { position: absolute; inset: 0; background: var(--c-ivory); transform-origin: left; transform: scaleX(var(--p, 0)); transition: transform 300ms var(--e-out); }
.loader__count { position: absolute; left: var(--pad-edge); bottom: var(--pad-edge); font: 400 0.72rem/1 var(--f-mono); letter-spacing: 0.2em; opacity: 0.5; font-variant-numeric: tabular-nums; }

/* ---- header: full width, the mark hard left, the rest hard right ---------- */
.hdr {
  position: fixed; inset: 0 0 auto; z-index: 30;
  height: var(--hdr-h);
  display: flex; align-items: center; justify-content: space-between; gap: var(--s-5);
  padding: 0 var(--pad-edge);
  color: var(--c-ink);
  transition: color var(--d-base) var(--e-out), background var(--d-base) var(--e-out), box-shadow var(--d-base) var(--e-out);
}
.hdr.is-stuck { background: rgba(244, 239, 229, 0.9); box-shadow: 0 1px 0 var(--c-line);
  -webkit-backdrop-filter: blur(14px) saturate(1.1); backdrop-filter: blur(14px) saturate(1.1); }   /* words passing under it blur instead of overlapping */
.hdr__brand { position: relative; font: 400 0.82rem/1 var(--f-mono); letter-spacing: 0.42em; }
.hdr__brand::after { content: ""; position: absolute; inset: -14px -10px; }       /* a 44px target */
.hdr__nav { display: flex; align-items: center; gap: clamp(0.9rem, 0.4rem + 1.6vw, 2rem); }
.hdr__link { position: relative; font: 430 0.88rem/1 var(--f-body); color: var(--c-ink-soft); transition: color var(--d-fast) var(--e-out); }
.hdr__link::after { content: ""; position: absolute; left: 0; right: 0; bottom: -6px; height: 1px; background: currentColor; transform: scaleX(0); transform-origin: right; transition: transform var(--d-base) var(--e-out); }
.hdr__link:hover { color: var(--c-ink); }
.hdr__link:hover::after { transform: scaleX(1); transform-origin: left; }
.hdr__cta {
  display: inline-flex; align-items: center; min-height: 2.35rem; padding: 0 1.05rem; border-radius: 999px;
  border: 1px solid var(--c-line); font: 450 0.84rem/1 var(--f-body);
  transition: background var(--d-fast) var(--e-out), color var(--d-fast) var(--e-out), border-color var(--d-fast) var(--e-out);
}
.hdr__cta:hover { background: var(--c-ink); color: var(--c-cream); border-color: var(--c-ink); }
.lang { display: flex; gap: 2px; padding: 3px; border-radius: 999px; border: 1px solid var(--c-line); }
.lang__btn { position: relative; min-width: 2.1rem; height: 1.65rem; border-radius: 999px; font: 400 0.68rem/1 var(--f-mono); letter-spacing: 0.08em; color: var(--c-ink-faint); transition: background var(--d-fast) var(--e-out), color var(--d-fast) var(--e-out); }
.lang__btn::after { content: ""; position: absolute; inset: -9px -2px; }          /* 44px tall target */
.lang__btn:hover { color: var(--c-ink); }
.lang__btn[aria-pressed="true"] { background: var(--c-ink); color: var(--c-cream); }

/* over the night film: ivory type, no bar — and the same type over a night
   stop below the film, where the bar comes back dark (js/home.js) */
html[data-film="dark"] .hdr, .hdr.is-night { color: var(--c-ivory); background: transparent; box-shadow: none; }
html[data-film="dark"] .hdr__link, .hdr.is-night .hdr__link { color: rgba(243, 237, 225, 0.72); }
html[data-film="dark"] .hdr__link:hover, .hdr.is-night .hdr__link:hover { color: var(--c-ivory); }
html[data-film="dark"] .hdr__cta, .hdr.is-night .hdr__cta { border-color: var(--c-line-night); }
html[data-film="dark"] .hdr__cta:hover, .hdr.is-night .hdr__cta:hover { background: var(--c-ivory); color: var(--c-night); border-color: var(--c-ivory); }
html[data-film="dark"] .lang, .hdr.is-night .lang { border-color: var(--c-line-night); }
html[data-film="dark"] .lang__btn, .hdr.is-night .lang__btn { color: rgba(243, 237, 225, 0.55); }
html[data-film="dark"] .lang__btn:hover, .hdr.is-night .lang__btn:hover { color: var(--c-ivory); }
html[data-film="dark"] .lang__btn[aria-pressed="true"], .hdr.is-night .lang__btn[aria-pressed="true"] { background: var(--c-ivory); color: var(--c-night); }
.hdr.is-stuck.is-night { background: rgba(11, 11, 15, 0.8); box-shadow: 0 1px 0 var(--c-line-night); }
html[data-film="light"] .hdr { background: transparent; box-shadow: none; }

@media (max-width: 760px) {
  .hdr__nav [data-optional] { display: none; }
  .hdr__cta { display: none; }
}
/* a phone holds the mark, both pages and the languages on one line (in Turkish "Projelerimiz" ran under the
   language switch at 390px, measured): everything a little tighter */
@media (max-width: 520px) {
  .hdr { gap: 0.6rem; }
  .hdr__brand { font-size: 0.74rem; letter-spacing: 0.28em; }
  .hdr__nav { gap: 0.75rem; }
  .hdr__link { font-size: 0.8rem; }
  .lang__btn { min-width: 1.8rem; font-size: 0.64rem; }
}
@media (max-width: 380px) {
  .hdr__brand { letter-spacing: 0.2em; }
  .hdr__nav { gap: 0.55rem; }
  .hdr__link { font-size: 0.75rem; }
  .lang__btn { min-width: 1.65rem; }
}

/* ---- the film --------------------------------------------------------------- */
.film { position: relative; z-index: 1; height: 420vh; background: transparent; color: var(--c-ivory); }
/* The stage, the plates and the live cup are the LARGE viewport: a phone's toolbar sliding away must
   uncover more picture, not the page under it (the small one left a page-coloured band at the foot of the
   screen, seen in a phone's screen recording). The three must stay the same size, or the film's
   hand-over to its plate (and the café's to its live cup) would jump. What sits at the stage's foot is
   lifted by the toolbar's height while it shows (--bar). */
.film__stage { --bar: 0px; position: sticky; top: 0; height: 100vh; height: 100lvh; overflow: hidden; }
@supports (height: 100dvh) { .film__stage { --bar: calc(100lvh - 100dvh); } }
.film__canvas { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; transition: opacity 700ms var(--e-out); background: var(--c-night); }
.film.is-live .film__canvas { opacity: 1; }
.film.is-still .film__stage { background: var(--c-night); }

/* the type's own shade, leaving with the night */
.film__stage::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(180deg, rgba(5, 4, 4, 0.34) 0, transparent 8rem),
    linear-gradient(0deg, rgba(5, 4, 4, 0.4) 0, transparent 7rem),
    linear-gradient(90deg, rgba(5, 4, 4, 0.5) 0%, rgba(5, 4, 4, 0.16) 36%, transparent 58%);
  opacity: calc((1 - var(--film-end, 0)) * var(--film-in, 1));       /* --film-in: an enterHold film's shade comes up after it takes over */
}
@media (orientation: portrait) {
  .film__stage::after {
    background:
      linear-gradient(0deg, rgba(5, 4, 4, 0.45) 0, transparent 8rem),
      linear-gradient(180deg, rgba(5, 4, 4, 0.55) 0%, rgba(5, 4, 4, 0.18) 30%, transparent 50%);
  }
}

/* film--deep: a night film whose bright product stands right behind the words
   (a bag that fills a phone's frame under the headline) */
.film--deep .film__stage::after {
  background:
    linear-gradient(180deg, rgba(5, 4, 4, 0.34) 0, transparent 8rem),
    linear-gradient(0deg, rgba(5, 4, 4, 0.4) 0, transparent 7rem),
    linear-gradient(90deg, rgba(5, 4, 4, 0.72) 0%, rgba(5, 4, 4, 0.42) 32%, rgba(5, 4, 4, 0.12) 46%, transparent 60%);
}
@media (orientation: portrait) {
  .film--deep .film__stage::after {
    background:
      linear-gradient(0deg, rgba(5, 4, 4, 0.45) 0, transparent 8rem),
      linear-gradient(180deg, rgba(5, 4, 4, 0.82) 0%, rgba(5, 4, 4, 0.64) 26%, rgba(5, 4, 4, 0.24) 42%, transparent 54%);
  }
}

.film__beat {
  position: absolute; z-index: 2;
  left: var(--pad-edge); top: 50%; transform: translateY(-50%);
  max-width: min(46rem, 49vw);           /* a line longer than this breaks, never reaches the mark */
  visibility: hidden;
}
.film__beat.is-on { visibility: visible; }
@media (orientation: portrait) {
  .film__beat { top: calc(var(--hdr-h) + clamp(1.5rem, 5vh, 3rem)); transform: none; max-width: 90vw; right: var(--pad-edge); }
}
.film__label {
  font-family: var(--f-mono); font-size: var(--t-label); letter-spacing: var(--ls-label); text-transform: uppercase;
  color: rgba(243, 237, 225, 0.6); margin-bottom: var(--s-5); opacity: 0;
}
.film__title {
  font-family: var(--f-display); font-weight: 300; font-size: var(--t-hero);
  line-height: 1.0; letter-spacing: -0.02em;
  text-shadow: 0 2px 30px rgba(5, 4, 4, 0.3);
}
.film__title em { font-style: italic; color: var(--c-light); font-weight: 300; }
/* each line its own mask: the words rise out of an edge */
.film__line { display: block; overflow: hidden; padding: 0.14em 0 0.1em; margin-top: -0.14em; }
.film__line > span { display: inline-block; text-wrap: balance; transform: translate3d(0, 105%, 0); will-change: transform; }
.film__lead {
  font-size: var(--t-lead); line-height: 1.6; color: rgba(243, 237, 225, 0.74);
  margin-top: var(--s-6); max-width: 27rem; opacity: 0;
}

.film__chapters {
  position: absolute; z-index: 3; left: var(--pad-edge); bottom: calc(clamp(1.1rem, 4.5vh, 2.5rem) + var(--bar));
  display: flex; gap: clamp(0.9rem, 1.6vw, 1.6rem);
  opacity: calc(1 - var(--film-end, 0)); transition: opacity 400ms var(--e-out);
}
.film__chapters.is-gone { opacity: 0; pointer-events: none; }
.film__chapters button {
  display: grid; gap: 8px; min-width: 6rem; padding: 0.6em 0 0.35em; text-align: left;
  font-family: var(--f-mono); font-size: 0.66rem; letter-spacing: 0.16em; text-transform: uppercase;
  color: rgba(243, 237, 225, 0.45); transition: color var(--d-fast) var(--e-out);
}
.film__chapters button:hover, .film__chapters button[aria-current] { color: var(--c-ivory); }
.film__chapters i { display: block; height: 1px; background: linear-gradient(90deg, var(--c-ivory) calc(var(--p, 0) * 100%), rgba(243, 237, 225, 0.2) 0); }
/* "Skip the film": a pill anyone recognises at a glance (the streaming services' "skip intro"),
   in glass over the film: its ring is how much of the film is behind you (js/home.js sets
   --skip-p). It rises in as the curtain lifts and breathes once a moment later — seen, never
   blinking — and fades with the film's end like the chapters. */
.film__skip {
  --skip-p: 0;
  position: absolute; z-index: 4; right: var(--pad-edge); bottom: calc(clamp(1.1rem, 4.5vh, 2.5rem) + var(--bar) - 0.3rem);
  display: inline-flex; align-items: center; gap: 0.7rem; height: 3rem; padding-block: 0; padding-inline: 1.25rem 0.42rem; border-radius: 999px;
  background: rgba(11, 11, 15, 0.44); color: var(--c-ivory);
  box-shadow: inset 0 0 0 1px rgba(243, 237, 225, 0.26), 0 14px 30px -16px rgba(0, 0, 0, 0.7);
  -webkit-backdrop-filter: blur(14px) saturate(1.2); backdrop-filter: blur(14px) saturate(1.2);
  font: 500 0.92rem/1 var(--f-body); letter-spacing: 0.005em; white-space: nowrap;
  opacity: 0; transform: translateY(14px);
  transition: opacity 700ms var(--e-out), transform 700ms var(--e-out), background 300ms var(--e-out), color 300ms var(--e-out), box-shadow 300ms var(--e-out);
}
html:not(.is-loading) .film__skip { opacity: calc(1 - var(--film-end, 0)); transform: none; transition-delay: 350ms, 350ms, 0s, 0s, 0s; }
.film__skip-i { position: relative; display: grid; place-items: center; width: 2.2rem; height: 2.2rem; border-radius: 50%; background: var(--c-ivory); color: var(--c-ink);
  transition: background 300ms var(--e-out), color 300ms var(--e-out); }
.film__skip-i svg { position: absolute; inset: -0.2rem; width: calc(100% + 0.4rem); height: calc(100% + 0.4rem); max-width: none; overflow: visible; }
.film__skip-i path { fill: none; stroke: currentColor; stroke-width: 2.1; stroke-linecap: round; stroke-linejoin: round; transition: transform 450ms var(--e-out); }
.film__skip-track, .film__skip-ring { fill: none; stroke-width: 2.1; transform: rotate(-90deg); transform-origin: 50% 50%; }
.film__skip-track { stroke: rgba(243, 237, 225, 0.18); }
.film__skip-ring { stroke: var(--c-light); stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: calc(1 - var(--skip-p)); transition: stroke-dashoffset 200ms linear; }
.film__skip:hover, .film__skip:focus-visible { background: var(--c-ivory); color: var(--c-ink); box-shadow: inset 0 0 0 1px rgba(243, 237, 225, 0.9), 0 18px 34px -16px rgba(0, 0, 0, 0.75); }
.film__skip:hover .film__skip-i, .film__skip:focus-visible .film__skip-i { background: var(--c-ink); color: var(--c-ivory); }
.film__skip:hover path, .film__skip:focus-visible path { transform: translateY(2px); }
.film__skip:active { transform: scale(0.97); transition-duration: 150ms; }
html[data-film="light"] .film__skip:not(:hover):not(:focus-visible) { background: rgba(244, 239, 229, 0.6); color: var(--c-ink); box-shadow: inset 0 0 0 1px rgba(23, 21, 15, 0.14), 0 14px 30px -18px rgba(40, 30, 10, 0.45); }
html[data-film="light"] .film__skip:not(:hover):not(:focus-visible) .film__skip-i { background: var(--c-ink); color: var(--c-ivory); }
html[data-film="light"] .film__skip-track { stroke: rgba(23, 21, 15, 0.14); }
@media (prefers-reduced-motion: no-preference) {
  html:not(.is-loading) .film__skip.is-seen .film__skip-i { animation: skip-breathe 1.6s var(--e-inout, ease-in-out) 1.6s 1; }
}
@keyframes skip-breathe { 0%, 100% { transform: none; box-shadow: 0 0 0 0 rgba(232, 178, 122, 0); } 45% { transform: scale(1.1); box-shadow: 0 0 0 0.55rem rgba(232, 178, 122, 0.24); } }
/* "Scroll": appears once the mark is written, leaves at the first scroll */
.film__hint {
  position: absolute; z-index: 3; left: 50%; bottom: calc(clamp(1.4rem, 5vh, 2.8rem) + 3rem + var(--bar)); transform: translateX(-50%);   /* over the chapters' names, not into them */
  font-family: var(--f-mono); font-size: 0.62rem; letter-spacing: 0.3em; text-transform: uppercase; color: rgba(243, 237, 225, 0.5);
  opacity: 0; transition: opacity var(--d-slow) var(--e-out);
}
.film__hint::after { content: ""; display: block; width: 1px; height: 2.2rem; margin: 0.8rem auto 0; background: linear-gradient(rgba(243, 237, 225, 0.6), transparent); animation: hint 2.4s var(--e-inout) infinite; transform-origin: top; }
@keyframes hint { 0% { transform: scaleY(0); opacity: 1; } 60% { transform: scaleY(1); opacity: 1; } 100% { transform: scaleY(1); opacity: 0; } }
html.is-written .film__hint { opacity: 1; }
html.has-scrolled .film__hint { opacity: 0; }
/* six names: tighter on a narrow desk so they never run under "Skip the film" */
@media (max-width: 1180px) {
  .film__chapters button { min-width: 0; letter-spacing: 0.12em; }
}
/* a phone or a tablet: rows of three, the full width, and the skip link above them
   (a single row ran under "Skip the film" from 721 to ~880 px — measured at 768 and 820) */
@media (max-width: 900px) {
  .film__chapters {
    left: var(--pad-edge); right: var(--pad-edge);
    display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 0.9rem;
  }
  .film__chapters button { min-height: 40px; font-size: 0.6rem; letter-spacing: 0.1em; }
  .film__chapters span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .film__skip { height: 2.85rem; }
  .film[data-film="main"] .film__skip { bottom: calc(clamp(1.1rem, 4.5vh, 2.5rem) + 5.6rem + var(--bar)); }
  html[data-stops="6"] .film[data-film="main"] .film__skip, html[data-stops="7"] .film[data-film="main"] .film__skip, html[data-stops="8"] .film[data-film="main"] .film__skip {
    bottom: calc(clamp(1.1rem, 4.5vh, 2.5rem) + 8.1rem + var(--bar)); }   /* seven to nine names: a third row */
  .film__hint { display: none; }
}

.film__poster { display: none; }
.film.is-still .film__poster { display: block; position: absolute; inset: 0; }
.film.is-still .film__poster img { width: 100%; height: 100%; object-fit: cover; }
.film.is-still { height: 100vh; height: 100svh; }
.film.is-still .film__stage { height: 100%; --bar: 0px; }       /* the still poster fills its own box, no more */
.film.is-still .film__canvas { display: none; }
.film.is-still .film__line > span { transform: none; }
.film.is-still .film__label, .film.is-still .film__lead { opacity: 1; }


/* ---- a film shot in daylight: dark type, a light scrim ---------------------- */
.film--page { color: var(--c-ink); }
.film--page .film__canvas { background: var(--c-cream); }
.film--page .film__stage::after {
  background: linear-gradient(90deg, rgba(244, 239, 229, 0.78) 0%, rgba(244, 239, 229, 0.38) 34%, transparent 56%);
}
@media (orientation: portrait) {
  .film--page .film__stage::after { background: linear-gradient(180deg, rgba(244, 239, 229, 0.82) 0%, rgba(244, 239, 229, 0.35) 30%, transparent 48%); }
}
.film--page .film__label { color: var(--c-ink-soft); }
/* film--scrim: a photographic frame (the interior) is busy where the words sit —
   the page-film veil was too thin to read over it (measured: the title's italic
   line on the armchair's terracotta) */
.film--page.film--scrim .film__stage::after {
  background: linear-gradient(90deg, rgba(244, 239, 229, 0.94) 0%, rgba(244, 239, 229, 0.84) 27%, rgba(244, 239, 229, 0.42) 45%, transparent 61%);
}
@media (orientation: portrait) {
  .film--page.film--scrim .film__stage::after { background: linear-gradient(180deg, rgba(244, 239, 229, 0.94) 0%, rgba(244, 239, 229, 0.8) 27%, rgba(244, 239, 229, 0.35) 44%, transparent 56%); }
}
/* film--low: the subject fills the middle of the tall frames (the armchair),
   so on a phone the words sit on the floor below it, not over it */
@media (orientation: portrait) {
  .film--low .film__beat { top: auto; bottom: calc(1.4rem + env(safe-area-inset-bottom, 0px) + var(--bar)); }
  .film--low.film--page .film__stage::after { background: linear-gradient(0deg, rgba(244, 239, 229, 0.9) 0%, rgba(244, 239, 229, 0.55) 26%, transparent 42%); }
}
/* a short phone has room under the chair for the title only; the stop below repeats the rest */
@media (orientation: portrait) and (max-height: 760px) { .film--low .film__lead { display: none; } }
.film--page .film__title { text-shadow: none; }
.film--page .film__title em { color: #9a4a32; }
.film--page .film__lead { color: var(--c-ink-soft); }

/* ---- a film's last frame, held behind its stop (js/plate.js) ------------------ */
.plate {
  position: fixed; inset: 0; z-index: 0;
  width: 100vw; height: 100vh; height: 100lvh; object-fit: cover;
  opacity: 0; pointer-events: none;
}
.plate:not([src]) { visibility: hidden; }

/* ---- the live cup, behind the page ---------------------------------------- */
.cupstage {
  position: fixed; inset: 0; z-index: 0;
  width: 100vw; height: 100vh; height: 100lvh;
  opacity: 0; pointer-events: none; touch-action: pan-y;
}
.cupstage.is-interactive { pointer-events: auto; cursor: grab; }
.cupstage.is-interactive:active { cursor: grabbing; }

/* ---- stop 01: the café, live ------------------------------------------------- */
.stop {
  position: relative; z-index: 1;
  min-height: 165vh;
  /* the words rise in with the labels on the product: at 18vh above them they
     came a wheel flick after the picture had stopped (measured, deadzone.mjs) */
  padding: calc(var(--hdr-h) + 6vh) var(--pad-edge) 30vh;
  pointer-events: none;                 /* the cup behind takes the drag */
}
.stop__text { pointer-events: auto; max-width: 31rem; }
.stop__title {
  font-family: var(--f-display); font-weight: 300; font-size: var(--t-h2);
  line-height: 1.02; letter-spacing: -0.02em; margin: var(--s-4) 0 var(--s-5);
}
/* the site's own headline, quoted */
.quote { margin: 0 0 var(--s-6); padding-left: var(--s-5); border-left: 1px solid var(--c-light); }
.quote blockquote { margin: 0; }
.quote p { font-family: var(--f-display); font-style: italic; font-weight: 300; font-size: clamp(1.45rem, 1.1rem + 1vw, 2.05rem); line-height: 1.2; letter-spacing: -0.01em; color: var(--c-ink); }
.quote p::before { content: "\201C"; } .quote p::after { content: "\201D"; }
:lang(ru) .quote p::before { content: "\00AB"; } :lang(ru) .quote p::after { content: "\00BB"; }
.quote figcaption { margin-top: var(--s-2); font-family: var(--f-mono); font-size: 0.66rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--c-ink-faint); }
.stop__lead { color: var(--c-ink-soft); font-size: 1.05rem; line-height: 1.7; max-width: 29rem; }
/* what a visitor does there: three short lines, numbered like the courses of a menu —
   an italic serif numeral in the accent, the line's name in the display serif */
.does { list-style: none; margin: var(--s-6) 0; padding: 0; counter-reset: does; border-top: 1px solid var(--c-line); max-width: 31rem; }
.does li { counter-increment: does; display: grid; grid-template-columns: 2.9rem 1fr; column-gap: var(--s-3); align-items: baseline; padding: 1.15rem 0 1.2rem; border-bottom: 1px solid var(--c-line); }
.does li::before { content: counter(does, decimal-leading-zero); grid-row: span 2; font-family: var(--f-display); font-style: italic; font-weight: 300;
  font-size: 1.45rem; line-height: 1; letter-spacing: -0.01em; color: #9a4a32; }
.does b { font-family: var(--f-display); font-weight: 400; font-size: 1.2rem; line-height: 1.25; letter-spacing: -0.005em; color: var(--c-ink); }
.does span { grid-column: 2; margin-top: 0.3rem; font-size: 0.93rem; line-height: 1.6; color: var(--c-ink-soft); }
.stop__links { display: flex; flex-wrap: wrap; gap: var(--s-3); }
/* ---- pinned labels ------------------------------------------------------------ */
/* the labels belong to the cup: same layer, so the page's text passes over both */
/* the plate's own box (the large viewport): with inset 0 a phone's toolbar squeezed the lines off their points */
.pins { position: fixed; top: 0; left: 0; right: 0; height: 100vh; height: 100lvh; z-index: 0; pointer-events: none; opacity: 0; }
.pins__lines { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.pins__lines line { stroke: rgba(23, 21, 15, 0.38); stroke-width: 1; }
.pins__lines circle { fill: var(--c-cream); stroke: rgba(23, 21, 15, 0.7); stroke-width: 1; }
.pin {
  position: absolute; left: 0; top: 0;
  width: 13.5rem; margin: -0.55rem 0 0;
  font-size: 0.8rem; line-height: 1.45; color: var(--c-ink-soft);
  padding-left: 0.8rem; border-left: 1px solid rgba(23, 21, 15, 0.38);
}
.pin.is-left { margin-left: -13.5rem; padding: 0 0.8rem 0 0; border-left: 0; border-right: 1px solid rgba(23, 21, 15, 0.38); text-align: right; }
.pin b { display: block; font: 400 0.64rem/1.6 var(--f-mono); letter-spacing: 0.18em; text-transform: uppercase; color: var(--c-ink); }

/* ---- the excerpt: the site itself, recorded ------------------------------------- */
.excerpt { position: relative; z-index: 1; background: var(--c-cream); padding: var(--s-8) var(--pad-edge) var(--s-9); perspective: 1600px; }
.excerpt__window {
  width: min(72rem, 100%); margin: 0 auto; border-radius: 14px; overflow: hidden; background: #fff;
  box-shadow: 0 1px 0 rgba(23, 21, 15, 0.06), 0 30px 80px -30px rgba(40, 30, 18, 0.35), 0 0 0 1px rgba(23, 21, 15, 0.08);
  transform-origin: 50% 0;
  transform: translate3d(0, calc((1 - var(--in, 1)) * 6rem), 0) rotateX(calc((1 - var(--in, 1)) * 9deg)) scale(calc(0.94 + 0.06 * var(--in, 1)));
  opacity: calc(0.2 + 0.8 * var(--in, 1));
  will-change: transform;
}
.excerpt__bar { display: flex; align-items: center; gap: 7px; height: 2.4rem; padding: 0 1rem; background: #f7f4ee; border-bottom: 1px solid rgba(23, 21, 15, 0.08); }
.excerpt__bar i { width: 9px; height: 9px; border-radius: 50%; background: rgba(23, 21, 15, 0.13); }
.excerpt__bar span { margin: 0 auto; padding: 0.25rem 1.6rem; border-radius: 6px; background: rgba(23, 21, 15, 0.05); font: 400 0.7rem/1 var(--f-mono); letter-spacing: 0.04em; color: var(--c-ink-soft);
  min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }   /* a long address stays one line on a phone */
.excerpt__video { display: block; width: 100%; height: auto; aspect-ratio: 16 / 10; background: #efe9de; }
.excerpt__caption { display: flex; gap: var(--s-4); align-items: baseline; width: min(72rem, 100%); margin: var(--s-5) auto 0; color: var(--c-ink-soft); font-size: 0.95rem; }
@media (orientation: portrait) {
  .excerpt__window { width: min(24rem, 100%); border-radius: 22px; }
  .excerpt__video { aspect-ratio: 9 / 19.5; }
  .excerpt__bar { height: 2rem; }
  .excerpt__caption { flex-direction: column; gap: var(--s-2); width: min(24rem, 100%); }
}

/* ---- next ------------------------------------------------------------------------ */
.next { position: relative; z-index: 1; background: var(--c-cream); padding: var(--s-9) var(--pad-edge); border-top: 1px solid var(--c-line); }
.next__inner { max-width: 72rem; }
.next__title { font-family: var(--f-display); font-weight: 300; font-size: var(--t-h2); line-height: 1.02; letter-spacing: -0.02em; margin: var(--s-4) 0 var(--s-5); color: var(--c-ink-faint); }
.next__note { color: var(--c-ink-soft); max-width: 30rem; }

/* ---- footer / contact --------------------------------------------------------- */
.foot { position: relative; z-index: 1; background: var(--c-night); color: var(--c-ivory); padding: var(--s-9) var(--pad-edge) var(--s-6); }
.foot .label { color: rgba(243, 237, 225, 0.55); }
.foot__title { font-family: var(--f-display); font-weight: 300; font-size: var(--t-h2); line-height: 1.04; letter-spacing: -0.02em; margin: var(--s-4) 0 var(--s-5); max-width: 15ch; }
.foot__lead { color: rgba(243, 237, 225, 0.7); max-width: 32rem; }
.foot__links { display: flex; flex-wrap: wrap; gap: var(--s-3); margin-top: var(--s-6); }
.foot .btn--solid { background: var(--c-ivory); color: var(--c-night); }
.foot .btn--solid:hover { background: #fff; }
.foot .btn--line { border-color: var(--c-line-night); color: var(--c-ivory); }
.foot .btn--line:hover { border-color: rgba(243, 237, 225, 0.5); }
.foot__base { display: flex; justify-content: space-between; align-items: baseline; gap: var(--s-4); flex-wrap: wrap; margin-top: var(--s-9); padding-top: var(--s-5); border-top: 1px solid var(--c-line-night); font: 400 0.68rem/1 var(--f-mono); letter-spacing: 0.14em; text-transform: uppercase; color: rgba(243, 237, 225, 0.45); }
.foot__word { font-family: var(--f-display); font-size: clamp(3rem, 2rem + 6vw, 8rem); letter-spacing: -0.03em; text-transform: none; color: var(--c-ivory); line-height: 0.9; font-weight: 300; }

:lang(ru) .film__title, :lang(ru) .stop__title, :lang(ru) .next__title, :lang(ru) .foot__title, :lang(ru) .quote p, :lang(ru) .allwork__link, :lang(ru) .start__title, :lang(ru) .does li::before { font-weight: 240; }
:lang(ru) .does b { font-weight: 340; }


/* ---- the interior film after sunset: back to light type on a dark scrim ----------- */
.film--page.is-night { color: var(--c-ivory); }
.film--page.is-night .film__stage::after {
  background:
    linear-gradient(180deg, rgba(5, 4, 4, 0.34) 0, transparent 8rem),
    linear-gradient(90deg, rgba(5, 4, 4, 0.55) 0%, rgba(5, 4, 4, 0.18) 36%, transparent 58%);
}
/* on a phone the words run across the top: the shade comes down from there
   (the landscape band left the right half of the title unshaded) */
@media (orientation: portrait) {
  .film--page.is-night .film__stage::after {
    background:
      linear-gradient(0deg, rgba(5, 4, 4, 0.45) 0, transparent 8rem),
      linear-gradient(180deg, rgba(5, 4, 4, 0.62) 0%, rgba(5, 4, 4, 0.24) 32%, transparent 52%);
  }
}
.film--page.is-night .film__label { color: rgba(243, 237, 225, 0.6); }
.film--page.is-night .film__title em { color: var(--c-light); }
.film--page.is-night .film__lead { color: rgba(243, 237, 225, 0.74); }
.film--page .film__stage::after, .film--page .film__label, .film--page .film__lead { transition: background 600ms var(--e-out), color 600ms var(--e-out); }

/* ---- stops over a night frame: light type, a shade on the words' side -------------- */
.plate-shade {
  position: fixed; inset: 0; z-index: 0; pointer-events: none; opacity: 0;
  background: linear-gradient(90deg, rgba(8, 7, 7, 0.82) 0%, rgba(8, 7, 7, 0.55) 34%, rgba(8, 7, 7, 0.0) 60%);
}
@media (orientation: portrait) {
  .plate-shade { background: linear-gradient(0deg, rgba(8, 7, 7, 0.9) 0%, rgba(8, 7, 7, 0.6) 38%, rgba(8, 7, 7, 0) 62%); }
}
.stop--night { color: var(--c-ivory); }
.stop--night .label { color: rgba(243, 237, 225, 0.58); }
.stop--night .quote { border-left-color: var(--c-light); }
.stop--night .quote p { color: var(--c-ivory); }
.stop--night .quote figcaption { color: rgba(243, 237, 225, 0.5); }
.stop--night .stop__lead { color: rgba(243, 237, 225, 0.76); }
.stop--night .does { border-top-color: var(--c-line-night); }
.stop--night .does li { border-bottom-color: var(--c-line-night); }
.stop--night .does li::before { color: #d9a27a; }
.stop--night .does b { color: var(--c-ivory); }
.stop--night .does span { color: rgba(243, 237, 225, 0.7); }
.stop--night .btn--solid { background: var(--c-ivory); color: var(--c-night); }
.stop--night .btn--line { border-color: var(--c-line-night); color: var(--c-ivory); }
.stop--night .btn--line:hover { border-color: rgba(243, 237, 225, 0.5); }
.stop--night .btn--solid:hover { background: #fff; }
@media (orientation: portrait) {
  .stop--night .stop__text { background: transparent; box-shadow: none; }
}
.pins--night .pins__lines line { stroke: rgba(243, 237, 225, 0.45); }
.pins--night .pins__lines circle { fill: var(--c-night); stroke: rgba(243, 237, 225, 0.85); }
.pins--night .pin { color: rgba(243, 237, 225, 0.72); border-color: rgba(243, 237, 225, 0.45); }
.pins--night .pin.is-left { border-color: rgba(243, 237, 225, 0.45); }
.pins--night .pin b { color: var(--c-ivory); }
.excerpt--night { background: var(--c-night); }
.excerpt--night .excerpt__caption { color: rgba(243, 237, 225, 0.7); }
.excerpt--night .label { color: rgba(243, 237, 225, 0.55); }
.excerpt--night .excerpt__window { box-shadow: 0 30px 90px -30px rgba(0, 0, 0, 0.8), 0 0 0 1px rgba(243, 237, 225, 0.12); }

/* ---- the order bot, playable ------------------------------------------------------ */
.chat {
  position: relative; z-index: 2; pointer-events: auto;
  width: min(22rem, 86vw);
}
/* Wide screens: the words and the phone share one centre line. The phone
   used to hang from a fixed height at the right, higher than the words' middle,
   so by the time the words stood centred on screen its top was already
   under the header. Now the phone (its note hangs below it, outside the box)
   sits level with the middle of the words wherever the page is. */
@media (orientation: landscape) {
  .stop:has(> .chat) {
    display: grid; grid-template-columns: minmax(0, 31rem) auto;
    justify-content: space-between; align-items: center; align-content: start; column-gap: var(--s-6);
  }
  .chat { margin-right: max(0px, calc(clamp(1rem, 7vw, 8rem) - var(--pad-edge))); }
  .chat__note { position: absolute; left: 0; right: 0; top: 100%; }
}
.chat__phone {
  height: min(38rem, 72vh); border-radius: 34px; padding: 10px; background: #0d0c0c;
  box-shadow: 0 0 0 1px rgba(243, 237, 225, 0.14), 0 40px 90px -30px rgba(0, 0, 0, 0.85);
  display: flex; flex-direction: column; overflow: hidden;
}
.chat__head { display: flex; align-items: center; gap: 10px; padding: 12px 12px 10px; color: var(--c-ivory); }
.chat__avatar { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: linear-gradient(160deg, #e8b27a, #9a4a32); font-family: var(--f-display); font-style: italic; font-size: 1.15rem; color: #fff; }
.chat__who { display: grid; line-height: 1.2; }
.chat__who b { font-weight: 500; font-size: 0.92rem; }
.chat__who small { font-size: 0.72rem; color: rgba(243, 237, 225, 0.5); }
.chat__log {
  flex: 1; overflow-y: auto; padding: 12px 10px 16px; border-radius: 24px;
  background: #efe8dc; display: flex; flex-direction: column; gap: 8px; scroll-behavior: smooth;
  overscroll-behavior: contain;
}
.msg { max-width: 86%; padding: 9px 12px; border-radius: 16px; font-size: 0.86rem; line-height: 1.45; color: #1d1a15;
  opacity: 0; transform: translateY(8px) scale(0.98); transition: opacity 360ms var(--e-out), transform 460ms var(--e-out); }
.msg.is-in { opacity: 1; transform: none; }
.msg p { margin: 0; }
.msg p + p { margin-top: 6px; }
.msg--bot { align-self: flex-start; background: #fffdf9; border-bottom-left-radius: 6px; box-shadow: 0 1px 0 rgba(0, 0, 0, 0.05); }
.msg--me { align-self: flex-end; background: #dcc9a8; border-bottom-right-radius: 6px; }
.msg--note { align-self: center; max-width: 92%; background: transparent; color: #6c6458; font-size: 0.78rem; text-align: center; }
.msg__total { font-family: var(--f-display); font-size: 1.5rem; letter-spacing: -0.01em; }
.msg--typing { padding: 12px 14px; }
.dots { display: inline-flex; gap: 4px; }
.dots i { width: 6px; height: 6px; border-radius: 50%; background: #a39a8c; animation: dot 1.1s var(--e-inout) infinite; }
.dots i:nth-child(2) { animation-delay: 0.15s; } .dots i:nth-child(3) { animation-delay: 0.3s; }
@keyframes dot { 0%, 60%, 100% { transform: translateY(0); opacity: 0.5; } 30% { transform: translateY(-4px); opacity: 1; } }
.kb { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 9px; }
.kb__btn { flex: 1 1 auto; min-height: 36px; padding: 0 12px; border-radius: 12px; border: 1px solid rgba(29, 26, 21, 0.14);
  background: #f7f2ea; font: 500 0.8rem/1 var(--f-body); color: #3a332a; transition: background var(--d-fast) var(--e-out), border-color var(--d-fast) var(--e-out); }
.kb__btn:hover:not(:disabled) { background: #fff; border-color: rgba(29, 26, 21, 0.3); }
.kb__btn:disabled { opacity: 0.45; cursor: default; }
.kb__btn.is-picked { opacity: 1; background: #1d1a15; color: #f7f2ea; border-color: #1d1a15; }
.kb__btn--main { background: #1d1a15; color: #f7f2ea; border-color: #1d1a15; }
.chat__again { display: block; margin: 8px auto 0; padding: 7px 14px; border-radius: 999px; border: 1px solid rgba(29, 26, 21, 0.2); font: 500 0.78rem/1 var(--f-body); color: #3a332a; }
.chat__note { margin-top: 0.8rem; font-family: var(--f-mono); font-size: 0.62rem; letter-spacing: 0.12em; text-transform: uppercase; color: rgba(243, 237, 225, 0.5); text-align: center; }
@media (orientation: portrait) {
  .stop--night:has(.chat) { padding-top: 40vh; }
  .chat { position: relative; right: auto; top: auto; width: 100%; margin: var(--s-7) auto 0; }
  .chat__phone { height: 34rem; }
}
@media (max-width: 1100px) and (orientation: landscape) {
  .chat { margin-right: 0; width: 19rem; }
}


/* ---- every project, one link away (Projects, /work/) ------------------------------ */
.allwork { position: relative; z-index: 1; background: var(--c-cream); padding: var(--s-8) var(--pad-edge) var(--s-7); border-top: 1px solid var(--c-line); }
.allwork__link { display: inline-flex; align-items: baseline; flex-wrap: wrap; gap: 0 0.3em; margin-top: var(--s-4); max-width: 46rem;
  font-family: var(--f-display); font-weight: 300; font-size: var(--t-h2); line-height: 1.05; letter-spacing: -0.02em; color: var(--c-ink); }
.allwork__link em { font-style: italic; color: #9a4a32; }
.allwork__link i { font-style: normal; font-family: var(--f-body, inherit); font-size: 0.6em; transition: transform var(--d-fast) var(--e-out); }
.allwork__link:hover i, .allwork__link:focus-visible i { transform: translateX(0.3em); }
/* ---- contact us: a few words, and the brief -------------------------------------- */
.start { position: relative; z-index: 1; background: var(--c-cream); padding: var(--s-9) var(--pad-edge); border-top: 1px solid var(--c-line); }
.start__inner { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: clamp(2rem, 6vw, 7rem); max-width: 84rem; }
.start__title { font-family: var(--f-display); font-weight: 300; font-size: var(--t-h2); line-height: 1.04; letter-spacing: -0.02em; margin: var(--s-4) 0 var(--s-6); max-width: 13ch; }
.start__title em { font-style: italic; color: #9a4a32; }
.start__lead { max-width: 26rem; font-size: var(--t-lead); line-height: 1.7; color: var(--c-ink-soft); }
/* --- The brief ------------------------------------------------------------
   A sheet of paper with the questions numbered like the steps beside it, a
   count of what is answered, and the brief itself written as a dark card the
   visitor can read before it is sent. The left column stays in view while
   the questions scroll past (it used to leave a blank half-page beside them). */
.start__how { position: sticky; top: calc(var(--hdr-h) + var(--s-5)); align-self: start; }
.brief {
  position: relative; background: #fbf8f2; border-radius: 28px; padding: clamp(1.5rem, 3.4vw, 3rem);
  box-shadow: 0 0 0 1px var(--c-line), inset 0 1px 0 rgba(255, 255, 255, 0.9), 0 50px 100px -60px rgba(40, 30, 18, 0.5), 0 18px 40px -30px rgba(40, 30, 18, 0.25);
}
.brief__head { display: grid; grid-template-columns: 1fr auto; align-items: baseline; }
.brief__count { font: 400 0.72rem/1 var(--f-mono); letter-spacing: 0.12em; color: var(--c-ink); font-variant-numeric: tabular-nums; }
.brief__count [data-count] { display: inline-block; min-width: 1ch; transition: color var(--d-base) var(--e-out); }
.brief__of { color: var(--c-ink-faint); margin-left: 0.3em; }
.brief__title { grid-column: 1 / -1; margin: var(--s-4) 0 var(--s-5); font: 300 clamp(1.75rem, 1.15rem + 1.5vw, 2.5rem)/1.06 var(--f-display); letter-spacing: -0.018em; }
.brief__title em { font-style: italic; color: #9a4a32; }
.brief__bar { grid-column: 1 / -1; position: relative; display: block; height: 1px; background: var(--c-line); overflow: hidden; }
.brief__bar i { position: absolute; inset: 0; background: var(--c-ink); transform-origin: left; transform: scaleX(var(--p, 0)); transition: transform 700ms var(--e-out); }

.brief__q { display: grid; grid-template-columns: 2.6rem minmax(0, 1fr); padding: var(--s-5) 0; border-bottom: 1px solid var(--c-line); }
.brief__q::before { content: attr(data-n); grid-row: span 3; padding-top: 0.32em; font: 400 0.68rem/1 var(--f-mono); letter-spacing: 0.12em; color: var(--c-ink-faint); }
.brief__q h4 { margin: 0 0 0.95rem; display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.35rem 0.7rem; font: 500 1rem/1.35 var(--f-body); color: var(--c-ink); }
.brief__q h4 small { font: 400 0.6rem/1 var(--f-mono); letter-spacing: 0.14em; text-transform: uppercase; color: var(--c-ink-faint); }
.brief__q > .picks, .brief__q > .brief__other, .brief__q > textarea { grid-column: 2; }

.picks { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.pick {
  display: inline-flex; align-items: center; gap: 0.6rem; min-height: 2.75rem; padding: 0 1.05rem 0 0.95rem; border-radius: 999px;
  border: 1px solid var(--c-line); background: rgba(255, 255, 255, 0.4); font: 430 0.9rem/1 var(--f-body); color: var(--c-ink-soft);
  transition: border-color 280ms var(--e-out), background 280ms var(--e-out), color 280ms var(--e-out), box-shadow 380ms var(--e-out), transform 380ms var(--e-out);
}
/* the mark: a ring for one answer, a rounded square where several may be chosen */
.pick::before {
  content: ""; flex: none; width: 0.55rem; height: 0.55rem; border-radius: 50%; border: 1px solid currentColor; opacity: 0.4;
  transition: background 280ms var(--e-out), border-color 280ms var(--e-out), opacity 280ms var(--e-out), transform 420ms var(--e-out);
}
.picks[data-multi] .pick::before { border-radius: 2.5px; }
.pick:hover { border-color: rgba(23, 21, 15, 0.3); background: #fff; color: var(--c-ink); }
.pick:active { transform: scale(0.98); }
.pick[aria-pressed="true"] { background: var(--c-ink); border-color: var(--c-ink); color: var(--c-cream); box-shadow: 0 12px 26px -16px rgba(23, 21, 15, 0.7); }
.pick[aria-pressed="true"]::before { background: var(--c-light); border-color: var(--c-light); opacity: 1; transform: scale(1.15); }
.pick:focus-visible { outline: 2px solid #9a4a32; outline-offset: 3px; }

/* "Something else": a field that opens under the answer */
.brief__other { display: grid; grid-template-rows: 0fr; opacity: 0; transition: grid-template-rows 560ms var(--e-out), opacity 420ms var(--e-out), margin-top 560ms var(--e-out); }
.brief__other.is-open { grid-template-rows: 1fr; opacity: 1; margin-top: 1rem; }
.brief__other-in { display: grid; gap: 0.55rem; min-height: 0; overflow: hidden; font-size: 0.9rem; color: var(--c-ink-soft); }
.brief textarea {
  width: 100%; min-height: 5.25rem; font: 400 0.95rem/1.6 var(--f-body); color: var(--c-ink); background: rgba(255, 255, 255, 0.55);
  border: 1px solid var(--c-line); border-radius: 16px; padding: 0.85rem 1rem; resize: vertical;
  transition: border-color 280ms var(--e-out), box-shadow 380ms var(--e-out), background 280ms var(--e-out);
}
.brief textarea::placeholder { color: var(--c-ink-faint); }
.brief textarea:focus { outline: none; background: #fff; border-color: rgba(23, 21, 15, 0.38); box-shadow: 0 0 0 4px rgba(232, 178, 122, 0.2); }
.brief__note { cursor: text; }
.brief__note h4 { margin-bottom: 0.8rem; }

/* the brief itself, written as it is answered */
.brief__out { padding-top: var(--s-6); }
.brief__sheet {
  background: var(--c-night); color: var(--c-ivory); border-radius: 22px; padding: 1.35rem 1.5rem 0.6rem;
  box-shadow: 0 30px 60px -36px rgba(11, 11, 15, 0.7), inset 0 0 0 1px rgba(243, 237, 225, 0.06);
}
.brief__sheet .label { color: rgba(243, 237, 225, 0.5); }
.brief__list { display: grid; grid-template-columns: max-content minmax(0, 1fr); margin: 0.9rem 0 0; }
.brief__list dt, .brief__list dd { padding: 0.7rem 0; border-top: 1px solid var(--c-line-night); }
.brief__list dt { padding-right: 1.5rem; font: 400 0.62rem/1.9 var(--f-mono); letter-spacing: 0.14em; text-transform: uppercase; color: rgba(243, 237, 225, 0.5); }
.brief__list dd { margin: 0; font-size: 0.93rem; line-height: 1.5; color: var(--c-ivory); overflow-wrap: anywhere; animation: brief-in 520ms var(--e-out); }
.brief__list dd.is-empty { color: rgba(243, 237, 225, 0.28); animation: none; }
@keyframes brief-in { from { opacity: 0.2; transform: translateY(3px); } to { opacity: 1; transform: none; } }
.brief__send { display: flex; flex-wrap: wrap; gap: var(--s-3); margin-top: var(--s-5); transition: opacity var(--d-base) var(--e-out); }
.brief:not(.is-ready) .brief__send { opacity: 0.4; pointer-events: none; }
.brief__hint { margin-top: 0.8rem; font-size: 0.86rem; color: var(--c-ink-faint); transition: opacity var(--d-base) var(--e-out); }
.brief.is-ready .brief__hint { display: none; }
.brief__copied { margin-top: 0.6rem; font-size: 0.85rem; color: #9a4a32; }
.brief__promise { margin-top: var(--s-4); font-family: var(--f-mono); font-size: 0.66rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--c-ink-faint); }
@media (max-width: 960px) {
  .start__inner { grid-template-columns: 1fr; }
  .start__how { position: static; }
}
@media (max-width: 520px) {
  .brief__q { grid-template-columns: 2rem minmax(0, 1fr); }
  .pick { min-height: 2.6rem; font-size: 0.86rem; }
  .brief__list { grid-template-columns: 1fr; }
  .brief__list dt { padding-bottom: 0; }
  .brief__list dd { border-top: 0; padding-top: 0.15rem; }
}
@media (prefers-reduced-motion: reduce) {
  .brief__other, .brief__bar i, .pick, .pick::before { transition: none; }
  .brief__list dd { animation: none; }
}

/* --- E-mail sheet (js/mail.js) ------------------------------------------------
   Opened from any mailto link instead of the system's "which app" dialog: the
   page's paper over the dimmed page, the ways to write, the address to copy.
   From the bottom on a phone. */
html { scrollbar-gutter: stable; }
html.has-modal { overflow: hidden; }
.mail { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; padding: var(--pad-edge); }
.mail[hidden] { display: none; }
.mail__scrim { position: absolute; inset: 0; background: rgba(11, 11, 15, 0.5); backdrop-filter: blur(8px) saturate(1.05); -webkit-backdrop-filter: blur(8px) saturate(1.05); opacity: 0; transition: opacity 460ms var(--e-out); }
.mail__panel {
  position: relative; width: min(31rem, 100%); max-height: calc(100svh - 2 * var(--pad-edge)); overflow: auto;
  background: #fbf8f2; color: var(--c-ink); border-radius: 28px; padding: clamp(1.6rem, 4vw, 2.5rem);
  box-shadow: 0 0 0 1px rgba(23, 21, 15, 0.06), inset 0 1px 0 rgba(255, 255, 255, 0.9), 0 60px 140px -50px rgba(11, 11, 15, 0.75);
  opacity: 0; transform: translateY(16px) scale(0.975); transition: opacity 460ms var(--e-out), transform 620ms var(--e-out);
}
.mail.is-open .mail__scrim, .mail.is-open .mail__panel { opacity: 1; }
.mail.is-open .mail__panel { transform: none; }
.mail__x {
  position: absolute; top: 0.9rem; right: 0.9rem; width: 2.6rem; height: 2.6rem; border-radius: 50%; display: grid; place-items: center;
  color: var(--c-ink-soft); transition: background 260ms var(--e-out), color 260ms var(--e-out), transform 420ms var(--e-out);
}
.mail__x svg { width: 1.15rem; height: 1.15rem; }
.mail__x:hover { background: rgba(23, 21, 15, 0.06); color: var(--c-ink); transform: rotate(90deg); }
.mail__title { margin: 0.85rem 0 0.35rem; font: 300 clamp(2.1rem, 1.5rem + 2vw, 2.9rem)/1 var(--f-display); letter-spacing: -0.022em; }
.mail__addr { font-family: var(--f-display); font-style: italic; font-size: 1.3rem; color: #9a4a32; }
.mail__lead { margin: 1.5rem 0 0.7rem; font-size: 0.9rem; color: var(--c-ink-soft); }
.mail__ways { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--c-line); }
.mail__ways li { border-bottom: 1px solid var(--c-line); padding: 0.2rem 0; }   /* the rule on the row, the rounded ground on its link: a rounded link curled its own rule at the ends */
.mail__way {
  display: grid; grid-template-columns: 2.9rem minmax(0, 1fr) auto; align-items: center; gap: 1rem; padding: 0.7rem 0.6rem 0.7rem 0.25rem;
  color: var(--c-ink); text-decoration: none; border-radius: 16px;
  transition: background 280ms var(--e-out), padding 480ms var(--e-out);
}
.mail__way:hover, .mail__way:focus-visible { background: rgba(23, 21, 15, 0.04); padding-left: 0.75rem; outline: none; }
.mail__ic { width: 2.9rem; height: 2.9rem; border-radius: 15px; display: grid; place-items: center; background: #fff; color: var(--c-ink); box-shadow: 0 0 0 1px var(--c-line), 0 8px 18px -12px rgba(23, 21, 15, 0.45); transition: background 280ms var(--e-out), color 280ms var(--e-out); }
.mail__ic svg { width: 1.35rem; height: 1.35rem; }
.mail__way:hover .mail__ic { background: var(--c-ink); color: var(--c-cream); }
.mail__name { display: grid; gap: 0.3rem; font: 500 1rem/1.2 var(--f-body); }
.mail__name small { font: 400 0.6rem/1 var(--f-mono); letter-spacing: 0.14em; text-transform: uppercase; color: var(--c-ink-faint); }
.mail__go { color: var(--c-ink-faint); transition: transform 480ms var(--e-out), color 280ms var(--e-out); }
.mail__go svg { width: 1.1rem; height: 1.1rem; }
.mail__way:hover .mail__go { transform: translate(3px, -3px); color: var(--c-ink); }
.mail__copy { display: flex; align-items: center; gap: 0.6rem; margin-top: 1.4rem; padding: 0.4rem 0.4rem 0.4rem 1.1rem; border-radius: 999px; background: rgba(23, 21, 15, 0.04); box-shadow: inset 0 0 0 1px var(--c-line); }
.mail__copy-addr { flex: 1; min-width: 0; font: 400 0.84rem/1 var(--f-mono); color: var(--c-ink-soft); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mail__copy-btn { display: inline-flex; align-items: center; gap: 0.5rem; min-height: 2.6rem; padding: 0 1.15rem 0 0.95rem; border-radius: 999px; background: var(--c-ink); color: var(--c-cream); font: 500 0.86rem/1 var(--f-body); transition: background 280ms var(--e-out), transform 380ms var(--e-out); }
.mail__copy-btn:hover { background: #2a261d; }
.mail__copy-btn:active { transform: scale(0.97); }
.mail__copy-btn.is-done { background: #9a4a32; }
.mail__copy-ic svg { width: 1rem; height: 1rem; display: block; }
.mail__note { margin-top: 1rem; font: 400 0.64rem/1.5 var(--f-mono); letter-spacing: 0.14em; text-transform: uppercase; color: var(--c-ink-faint); }
@media (max-width: 600px) {
  .mail { place-items: end center; padding: 0; }
  .mail__panel { width: 100%; max-height: 92svh; border-radius: 26px 26px 0 0; padding-bottom: calc(1.6rem + env(safe-area-inset-bottom)); transform: translateY(48px); }
}
@media (prefers-reduced-motion: reduce) {
  .mail__scrim, .mail__panel, .mail__way, .mail__go, .mail__x { transition: none; }
}

/* ---- phones: the cup owns the top, the words sit below it ----------------------- */
@media (orientation: portrait) {
  .stop { padding-top: 62vh; padding-top: 62svh; min-height: 150vh; display: flex; flex-direction: column; }
  /* the words' ground runs edge to edge (in the gutters the cup's shadow
     showed through) and the picture above melts into it */
  .stop__text { position: relative; max-width: none; background: var(--c-cream); margin-inline: calc(-1 * var(--pad-edge)); padding: var(--s-5) var(--pad-edge) 0; }
  .stop__text::before { content: ""; position: absolute; left: 0; right: 0; bottom: 100%; height: 5.5rem; pointer-events: none;
    background: linear-gradient(to top, var(--c-cream) 20%, rgba(244, 239, 229, 0)); }
  .stop--night .stop__text { background: var(--c-night); }
  .stop--night .stop__text::before { background: linear-gradient(to top, var(--c-night) 20%, rgba(11, 11, 15, 0)); }
  .pin { width: 10.5rem; font-size: 0.74rem; }
  .pin.is-left { margin-left: -10.5rem; }
}

/* ---- words arrive: part after part, once (js/home.js adds html.rv) ------------- */
.rv .rv__p {
  opacity: 0; transform: translate3d(0, 1.4rem, 0);
  transition: opacity 1000ms var(--e-out), transform 1200ms var(--e-out);
  transition-delay: calc(var(--i, 0) * 75ms);
}
.rv .is-in .rv__p { opacity: 1; transform: none; }

/* ---- a long in-page jump fades through the page's own colour (js/scroll.js) ----- */
.veil {
  position: fixed; inset: 0; z-index: 29; pointer-events: none;
  background: var(--c-cream); opacity: 0;
  transition: opacity 560ms var(--e-out);
}
.veil.is-on { opacity: 1; transition: opacity 240ms ease-in; }

/* ---- reduced motion: the words without the travel ------------------------------ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 1ms !important; animation: none !important; }
}

/* ---- Kıtlax: the seasoned wheel stands just right of the words — a shade over their column only ---- */
@media (orientation: landscape) {
  .plate-shade[data-for="kitlax"] { background: linear-gradient(90deg, rgba(8, 7, 7, 0.86) 0%, rgba(8, 7, 7, 0.72) 26%, rgba(8, 7, 7, 0.28) 40%, rgba(8, 7, 7, 0) 50%); }
}

/* ---- a film that rises out of a night section (Kıtlax, under the hospital's recording): its first screen is
   the night itself, so the stage fades up out of the dark (film.json enterFade) — over the page's cream it came
   in as a hard bright edge under the recording. The rest of the section stays clear for the hand-off to its plate. */
.film--from-night { background: linear-gradient(180deg, var(--c-night) 0, var(--c-night) 100vh, transparent 100vh); }
@supports (height: 100lvh) { .film--from-night { background: linear-gradient(180deg, var(--c-night) 0, var(--c-night) 100lvh, transparent 100lvh); } }   /* the stage's own height */


/* ==== between pages (js/pagefx.js): the night falls, the mark is drawn, the next page opens behind it ==== */
.lx { position: fixed; inset: 0; z-index: 200; display: grid; place-items: center; background: var(--c-night); opacity: 0; pointer-events: none;
  transition: opacity 320ms cubic-bezier(0.4, 0, 0.2, 1); }
.lx.is-on { opacity: 1; pointer-events: auto; }
.lx svg { width: min(30vh, 34vw); height: auto; overflow: visible; }
.lx path { fill: none; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1 1; stroke-dashoffset: 1; }
.lx__glow { stroke: #ffb060; stroke-opacity: 0.5; stroke-width: 26; }
.lx__line { stroke: #fff3df; stroke-width: 7; }
.lx.is-drawing path { stroke-dashoffset: 0; transition: stroke-dashoffset 540ms cubic-bezier(0.55, 0, 0.3, 1) 60ms; }
/* the next page, painted already in that night with the mark drawn (the head's snippet), then let go */
html.lx-in body::after { content: ""; position: fixed; inset: 0; z-index: 200; pointer-events: none;
  background: var(--c-night) url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%22-40 -40 1200 1100%22%3E%3Cdefs%3E%3Cfilter id=%22g%22 x=%22-20%25%22 y=%22-20%25%22 width=%22140%25%22 height=%22140%25%22%3E%3CfeGaussianBlur stdDeviation=%229%22/%3E%3C/filter%3E%3C/defs%3E%3Cpath d=%22M845 402 L846 393 L849 384 L855 378 L861 371 L868 365 L874 358 L880 352 L887 345 L893 338 L899 331 L904 324 L910 317 L916 310 L921 303 L927 296 L932 288 L937 281 L942 273 L947 266 L952 258 L957 250 L961 242 L966 235 L970 226 L974 218 L977 210 L981 202 L984 193 L987 185 L990 176 L993 167 L995 159 L997 150 L998 141 L999 132 L1000 123 L1000 114 L999 105 L998 95 L997 86 L995 78 L992 69 L988 61 L983 53 L977 47 L970 42 L962 37 L953 34 L944 33 L935 32 L926 31 L917 31 L908 32 L899 33 L890 35 L881 38 L873 41 L864 44 L856 48 L848 52 L840 56 L832 61 L825 66 L818 72 L811 77 L804 83 L797 89 L790 96 L784 102 L778 109 L772 115 L766 122 L760 129 L754 136 L749 144 L744 151 L739 159 L734 166 L729 174 L724 182 L720 190 L715 198 L711 206 L707 214 L703 222 L699 230 L695 238 L691 246 L687 254 L683 263 L679 271 L675 279 L672 287 L668 296 L664 304 L661 312 L657 321 L654 329 L650 337 L647 346 L644 354 L640 363 L637 371 L634 380 L630 388 L627 397 L624 405 L620 413 L617 422 L614 430 L610 439 L607 447 L604 456 L601 464 L597 473 L594 481 L591 489 L587 498 L584 506 L580 515 L577 523 L574 532 L570 540 L567 548 L563 557 L560 565 L556 573 L552 582 L549 590 L545 598 L542 607 L538 615 L534 623 L531 632 L527 640 L523 648 L519 656 L516 665 L512 673 L508 681 L504 689 L500 697 L496 705 L492 714 L488 722 L484 730 L479 738 L475 746 L471 754 L466 762 L462 770 L458 778 L453 785 L448 793 L444 801 L439 809 L434 816 L429 824 L424 832 L419 839 L414 846 L408 854 L403 861 L397 868 L392 875 L386 882 L380 889 L373 895 L366 901 L359 907 L352 913 L345 918 L338 924 L331 930 L324 936 L317 942 L310 947 L303 953 L296 958 L288 962 L279 966 L271 970 L263 973 L254 976 L245 979 L237 981 L228 983 L219 985 L210 986 L201 987 L192 988 L183 989 L174 990 L165 990 L156 991 L147 991 L137 991 L128 991 L119 990 L110 990 L101 989 L92 988 L83 986 L74 984 L66 981 L57 978 L50 973 L43 967 L38 960 L35 951 L34 942 L35 933 L38 924 L43 917 L50 910 L57 905 L65 901 L74 898 L83 896 L91 894 L100 893 L109 892 L118 891 L128 890 L137 890 L146 890 L155 890 L164 890 L173 891 L182 891 L191 892 L200 893 L209 895 L218 896 L227 898 L236 899 L245 901 L254 903 L262 905 L271 907 L280 909 L289 911 L298 914 L306 917 L315 919 L324 922 L332 924 L341 927 L350 929 L358 932 L367 935 L376 937 L385 940 L393 942 L402 945 L411 947 L419 950 L428 952 L437 954 L446 957 L455 959 L463 961 L472 964 L481 966 L490 968 L499 970 L507 972 L516 974 L525 975 L534 977 L543 979 L552 981 L561 982 L570 984 L579 985 L588 986 L597 987 L606 989 L615 990 L624 990 L633 991 L642 992 L651 992 L660 992 L669 991 L678 991 L687 990 L696 989 L705 988 L714 988 L723 986 L732 985 L741 983 L750 982 L759 980 L768 977 L777 975 L785 972 L794 969 L802 965 L811 962 L819 958 L827 954 L835 950 L843 945 L850 941 L858 936 L866 930 L873 925 L880 920 L887 914 L894 908 L901 902 L908 896 L914 889 L921 883 L927 877 L933 870 L939 863 L945 856 L951 849 L957 842 L962 835 L968 828 L973 821 L979 814 L984 806 L989 799 L994 791 L999 784 L1004 776 L1009 769 L1014 761 L1019 753 L1024 746 L1029 738 L1034 730 L1038 722 L1043 715 L1047 707 L1052 699 L1057 691 L1061 683 L1065 675 L1070 667 L1075 660 L1079 652 L1084 644 L1088 636 L1090 632%22 fill=%22none%22 stroke=%22%23ffb060%22 stroke-opacity=%22.5%22 stroke-width=%2226%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22 filter=%22url%28%23g%29%22/%3E%3Cpath d=%22M845 402 L846 393 L849 384 L855 378 L861 371 L868 365 L874 358 L880 352 L887 345 L893 338 L899 331 L904 324 L910 317 L916 310 L921 303 L927 296 L932 288 L937 281 L942 273 L947 266 L952 258 L957 250 L961 242 L966 235 L970 226 L974 218 L977 210 L981 202 L984 193 L987 185 L990 176 L993 167 L995 159 L997 150 L998 141 L999 132 L1000 123 L1000 114 L999 105 L998 95 L997 86 L995 78 L992 69 L988 61 L983 53 L977 47 L970 42 L962 37 L953 34 L944 33 L935 32 L926 31 L917 31 L908 32 L899 33 L890 35 L881 38 L873 41 L864 44 L856 48 L848 52 L840 56 L832 61 L825 66 L818 72 L811 77 L804 83 L797 89 L790 96 L784 102 L778 109 L772 115 L766 122 L760 129 L754 136 L749 144 L744 151 L739 159 L734 166 L729 174 L724 182 L720 190 L715 198 L711 206 L707 214 L703 222 L699 230 L695 238 L691 246 L687 254 L683 263 L679 271 L675 279 L672 287 L668 296 L664 304 L661 312 L657 321 L654 329 L650 337 L647 346 L644 354 L640 363 L637 371 L634 380 L630 388 L627 397 L624 405 L620 413 L617 422 L614 430 L610 439 L607 447 L604 456 L601 464 L597 473 L594 481 L591 489 L587 498 L584 506 L580 515 L577 523 L574 532 L570 540 L567 548 L563 557 L560 565 L556 573 L552 582 L549 590 L545 598 L542 607 L538 615 L534 623 L531 632 L527 640 L523 648 L519 656 L516 665 L512 673 L508 681 L504 689 L500 697 L496 705 L492 714 L488 722 L484 730 L479 738 L475 746 L471 754 L466 762 L462 770 L458 778 L453 785 L448 793 L444 801 L439 809 L434 816 L429 824 L424 832 L419 839 L414 846 L408 854 L403 861 L397 868 L392 875 L386 882 L380 889 L373 895 L366 901 L359 907 L352 913 L345 918 L338 924 L331 930 L324 936 L317 942 L310 947 L303 953 L296 958 L288 962 L279 966 L271 970 L263 973 L254 976 L245 979 L237 981 L228 983 L219 985 L210 986 L201 987 L192 988 L183 989 L174 990 L165 990 L156 991 L147 991 L137 991 L128 991 L119 990 L110 990 L101 989 L92 988 L83 986 L74 984 L66 981 L57 978 L50 973 L43 967 L38 960 L35 951 L34 942 L35 933 L38 924 L43 917 L50 910 L57 905 L65 901 L74 898 L83 896 L91 894 L100 893 L109 892 L118 891 L128 890 L137 890 L146 890 L155 890 L164 890 L173 891 L182 891 L191 892 L200 893 L209 895 L218 896 L227 898 L236 899 L245 901 L254 903 L262 905 L271 907 L280 909 L289 911 L298 914 L306 917 L315 919 L324 922 L332 924 L341 927 L350 929 L358 932 L367 935 L376 937 L385 940 L393 942 L402 945 L411 947 L419 950 L428 952 L437 954 L446 957 L455 959 L463 961 L472 964 L481 966 L490 968 L499 970 L507 972 L516 974 L525 975 L534 977 L543 979 L552 981 L561 982 L570 984 L579 985 L588 986 L597 987 L606 989 L615 990 L624 990 L633 991 L642 992 L651 992 L660 992 L669 991 L678 991 L687 990 L696 989 L705 988 L714 988 L723 986 L732 985 L741 983 L750 982 L759 980 L768 977 L777 975 L785 972 L794 969 L802 965 L811 962 L819 958 L827 954 L835 950 L843 945 L850 941 L858 936 L866 930 L873 925 L880 920 L887 914 L894 908 L901 902 L908 896 L914 889 L921 883 L927 877 L933 870 L939 863 L945 856 L951 849 L957 842 L962 835 L968 828 L973 821 L979 814 L984 806 L989 799 L994 791 L999 784 L1004 776 L1009 769 L1014 761 L1019 753 L1024 746 L1029 738 L1034 730 L1038 722 L1043 715 L1047 707 L1052 699 L1057 691 L1061 683 L1065 675 L1070 667 L1075 660 L1079 652 L1084 644 L1088 636 L1090 632%22 fill=%22none%22 stroke=%22%23fff3df%22 stroke-width=%227%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22/%3E%3C/svg%3E") center / min(30vh, 34vw) auto no-repeat;
  transition: opacity 560ms cubic-bezier(0.4, 0, 0.2, 1) 80ms; }
html.lx-in.lx-out body::after { opacity: 0; }
/* a project's picture growing into its page */
.lx-shade { position: fixed; inset: 0; z-index: 199; background: var(--c-night); opacity: 0; pointer-events: none; transition: opacity 560ms ease; }
.lx-shade.is-on { opacity: 1; }
.lx-morph { position: fixed; z-index: 200; overflow: hidden; background: var(--c-night); pointer-events: none;
  transition: left 680ms cubic-bezier(0.7, 0, 0.2, 1), top 680ms cubic-bezier(0.7, 0, 0.2, 1), width 680ms cubic-bezier(0.7, 0, 0.2, 1),
              height 680ms cubic-bezier(0.7, 0, 0.2, 1), border-radius 680ms cubic-bezier(0.7, 0, 0.2, 1); }
.lx-morph img, .lx-morph canvas { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.lx-morph__from { transition: opacity 520ms ease 140ms; }
.lx-morph.is-open .lx-morph__from { opacity: 0; }
html.lx-morph .hdr, html.lx-morph .case-hero__in, html.lx-morph .case-back, html.lx-morph .case-hero::after,
html.lx-morph main > :not(.case-hero), html.lx-morph .foot { opacity: 0; }
html.lx-morph.lx-out .hdr, html.lx-morph.lx-out .case-hero__in, html.lx-morph.lx-out .case-back, html.lx-morph.lx-out .case-hero::after,
html.lx-morph.lx-out main > :not(.case-hero), html.lx-morph.lx-out .foot { opacity: 1; transition: opacity 760ms cubic-bezier(0.4, 0, 0.2, 1) 140ms; }

/* ==== the projects, playing: every work's moment, small, on the studio's night ================== */
.allwork { background: var(--c-night); color: var(--c-ivory); border-top: 0; padding: var(--s-9) var(--pad-edge) var(--s-8); }
.allwork .label { color: rgba(243, 237, 225, 0.55); }
.allwork__link { color: var(--c-ivory); }
.allwork__link em { color: #d9a27a; }
.tiles { list-style: none; margin: var(--s-7) 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(1rem, 0.6rem + 1.2vw, 1.8rem) clamp(0.8rem, 0.5rem + 1vw, 1.4rem); }
.tile { display: grid; gap: 0.75rem; color: inherit; text-decoration: none; }
.tile__media { position: relative; display: block; aspect-ratio: 16 / 9; border-radius: 10px; overflow: hidden; background: #000;
  box-shadow: 0 0 0 1px rgba(243, 237, 225, 0.08), 0 30px 60px -36px rgba(0, 0, 0, 0.9); }
.tile__media img, .tile__media video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 900ms var(--e-out), opacity 500ms ease; }
.tile__media video { opacity: 0; }
.tile__media video.is-playing { opacity: 1; }
.tile:hover .tile__media img, .tile:hover .tile__media video, .tile:focus-visible .tile__media video { transform: scale(1.045); }
.tile__cap { display: flex; align-items: baseline; gap: 0.65rem; min-width: 0; }
.tile__n { font-family: var(--f-display); font-style: italic; font-weight: 300; font-size: 1.05rem; color: #d9a27a; }
.tile__name { font-family: var(--f-display); font-weight: 400; font-size: 1.12rem; letter-spacing: -0.005em; }
.tile__type { margin-left: auto; font: 400 0.62rem/1.2 var(--f-mono); letter-spacing: 0.12em; text-transform: uppercase; color: rgba(243, 237, 225, 0.5); text-align: right; }
.tile--all .tile__media { display: grid; place-items: center; background: transparent; box-shadow: inset 0 0 0 1px var(--c-line-night); }
.tile--all .tile__media span { font-family: var(--f-display); font-weight: 300; font-size: clamp(1.15rem, 0.9rem + 0.8vw, 1.6rem); line-height: 1.15; text-align: center; padding: 1rem; }
.tile--all .tile__media em { font-style: italic; color: #d9a27a; }
.tile--all:hover .tile__media { box-shadow: inset 0 0 0 1px rgba(243, 237, 225, 0.42); }
@media (max-width: 1000px) { .tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) {
  .tiles { grid-auto-flow: column; grid-template-columns: none; grid-auto-columns: 78%; overflow-x: auto; scroll-snap-type: x mandatory;
    margin-inline: calc(-1 * var(--pad-edge)); padding-inline: var(--pad-edge); scroll-padding-inline: var(--pad-edge); scrollbar-width: none; }
  .tiles::-webkit-scrollbar { display: none; }
  .tile { scroll-snap-align: start; }
}

/* ==== Contact: the film's closing shot — the studio at night, its mark lit; the brief comes up over it like
   a sheet laid on the desk. The words keep to the dark wall on the left. ==================================== */
.start { background: var(--c-night); color: var(--c-ivory); border-top: 0; isolation: isolate; }
.start__scene { position: sticky; top: 0; height: 100vh; height: 100lvh; margin: calc(-1 * var(--s-9)) calc(-1 * var(--pad-edge)) -100vh;
  margin-bottom: calc(var(--s-9) - 100vh); margin-bottom: calc(var(--s-9) - 100lvh); z-index: -1; overflow: hidden; pointer-events: none; }
.start__scene img { width: 100%; height: 100%; object-fit: cover; object-position: 0% 50%; }
.start__scene::after { content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, rgba(11, 11, 15, 0.5) 0%, rgba(11, 11, 15, 0.32) 34%, rgba(11, 11, 15, 0.12) 62%, rgba(11, 11, 15, 0.3) 100%),
              linear-gradient(180deg, rgba(11, 11, 15, 0) 70%, rgba(11, 11, 15, 0.9) 100%); }
.start .label { color: rgba(243, 237, 225, 0.55); }
.start__title { color: var(--c-ivory); }
.start__title em { color: #d9a27a; }
.start__lead { color: rgba(243, 237, 225, 0.76); }
.start .brief { box-shadow: 0 0 0 1px rgba(243, 237, 225, 0.06), 0 60px 120px -40px rgba(0, 0, 0, 0.85), 0 24px 48px -30px rgba(0, 0, 0, 0.6); }
/* a phone has no room beside the words: the mark gets the screen's top half to itself, the words come after it */
@media (orientation: portrait) {
  .start__scene { margin-bottom: calc(50vh - 100vh); margin-bottom: calc(50svh - 100lvh); }
  .start__scene img { object-position: 50% 0%; }
  .start__scene::after { background: linear-gradient(180deg, rgba(11, 11, 15, 0) 0%, rgba(11, 11, 15, 0.1) 30%, rgba(11, 11, 15, 0.78) 50%, rgba(11, 11, 15, 0.92) 72%); }
}

/* ==== a phone, after the opening: the way to us, under the thumb ============================== */
.mcta { position: fixed; left: 50%; bottom: calc(0.9rem + env(safe-area-inset-bottom)); z-index: 45; display: none; align-items: center; gap: 0.55rem;
  min-height: 3rem; padding: 0 1.35rem; border-radius: 999px; background: rgba(16, 15, 16, 0.82); color: var(--c-ivory);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); box-shadow: 0 0 0 1px rgba(243, 237, 225, 0.12), 0 18px 40px -18px rgba(0, 0, 0, 0.7);
  font: 600 0.88rem/1 var(--f-body); letter-spacing: 0.01em; text-decoration: none; white-space: nowrap;
  transform: translate(-50%, calc(100% + 1.5rem)); transition: transform 560ms var(--e-out); }
.mcta i { font-style: normal; }
.mcta.is-on { transform: translate(-50%, 0); }
@media (max-width: 760px) { .mcta { display: inline-flex; } }
@media (prefers-reduced-motion: reduce) { .mcta { transition: none; } }

/* ==== The brief on one screen (19.10, Bünyamin: "the order area runs long — two columns side by side in
   one frame, fitting one screen"). On a wide screen the sheet holds its six questions in two columns (each
   row a pair, so the hairlines meet), and the brief itself becomes one dark line at its foot beside the ways
   to send it. The words keep to the wall on the left. ================================================= */
/* the sheet is paper on a night wall: its own words are ink (they had taken the wall's ivory and vanished) */
.start__sign { display: none; }
.start .brief { color: var(--c-ink); }
.start .brief__head .label { color: var(--c-ink-soft); }
@media (min-width: 1200px) and (min-height: 620px) {
  .start { padding-top: calc(var(--hdr-h) + 1rem); padding-bottom: 2rem; }
  .start__scene { margin-top: calc(-1 * (var(--hdr-h) + 1rem)); margin-bottom: calc(var(--hdr-h) + 1rem - 100vh); margin-bottom: calc(var(--hdr-h) + 1rem - 100lvh); }   /* nets to nothing: the words start at the padding (a mismatch had lifted them 60px under the header) */
  .start__inner { grid-template-columns: minmax(0, 0.5fr) minmax(0, 1.5fr); max-width: 104rem; gap: clamp(2rem, 4vw, 5rem); align-items: center;
    min-height: calc(100vh - var(--hdr-h) - 3rem); min-height: calc(100svh - var(--hdr-h) - 3rem); }
  .start__how { position: static; align-self: center; }
  /* the sign in its own place: under the words, whole, its wall melting into the night; the full scene behind is not
     shown here (the sheet covered half of its sign, and the words sat on its top edge) */
  .start { background: radial-gradient(42% 52% at 12% 66%, rgba(176, 138, 98, 0.15), rgba(176, 138, 98, 0) 100%), var(--c-night); }   /* the lamp's warmth round the sign, nothing at the section's edges */
  .start__scene { display: none; }
  .start__sign { display: block; width: min(100%, 25rem, calc(100vh - var(--hdr-h) - 22rem)); width: min(100%, 25rem, calc(100svh - var(--hdr-h) - 22rem)); margin-top: clamp(1.25rem, 0.6rem + 1.6vw, 2.25rem); aspect-ratio: 685 / 660; }
  .start__sign img { width: 100%; height: 100%; object-fit: cover;
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 11%, #000 89%, transparent 100%), linear-gradient(180deg, transparent 0, #000 10%, #000 90%, transparent 100%);
    -webkit-mask-composite: source-in; mask-image: linear-gradient(90deg, transparent 0, #000 11%, #000 89%, transparent 100%), linear-gradient(180deg, transparent 0, #000 10%, #000 90%, transparent 100%); mask-composite: intersect; }
  .start__title { max-width: 9ch; margin: var(--s-4) 0 var(--s-5); }
  .brief { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: clamp(1.75rem, 3vw, 3.25rem); align-items: stretch;
    padding: clamp(1.4rem, 2vw, 2.1rem) clamp(1.6rem, 2.4vw, 2.6rem); }
  .brief__head { grid-column: 1 / -1; }
  .brief__title { margin: 0.55rem 0 1rem; font-size: clamp(1.6rem, 1.1rem + 0.9vw, 2.15rem); }
  .brief__q { grid-template-columns: 2rem minmax(0, 1fr); padding: 0.95rem 0; }
  .brief__q h4 { margin-bottom: 0.75rem; font-size: 0.96rem; }
  .brief__q { align-content: start; }
  .brief .picks { gap: 0.45rem; align-content: flex-start; align-items: center; }   /* a row's shorter question keeps its pills their own height */
  .brief .pick { min-height: 2.5rem; padding: 0 0.85rem 0 0.75rem; gap: 0.5rem; font-size: 0.85rem; }
  .brief__note-in { min-height: 4.6rem; }
  .brief__out { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; column-gap: 1.25rem; padding-top: 1.1rem; }
  /* the brief as one line: what was chosen, in order */
  .brief__sheet { display: flex; align-items: center; gap: 1rem; min-height: 3.1rem; padding: 0.7rem 1.2rem; border-radius: 18px; }
  .brief__list:not(:has(dd:not(.is-empty)))::after { content: "—"; color: rgba(243, 237, 225, 0.3); }
  .brief__sheet .label { flex: none; }
  .brief__list { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.15rem 0; margin: 0; min-width: 0; }
  .brief__list dt, .brief__list dd.is-empty { display: none; }
  .brief__list dd { padding: 0; border: 0; font-size: 0.86rem; line-height: 1.45; }
  .brief__list dd:not(.is-empty) ~ dd:not(.is-empty)::before { content: "·"; margin: 0 0.55rem; color: rgba(243, 237, 225, 0.4); }
  .brief__send { margin-top: 0; flex-wrap: nowrap; }
  .brief__hint, .brief__copied, .brief__promise { grid-column: 1 / -1; }
  .brief__hint { margin-top: 0.6rem; }
  .brief__promise { margin-top: 0.7rem; }
}
/* a narrower wide screen: the pills a touch smaller, so two still share a line */
@media (min-width: 1200px) and (max-width: 1439px) and (min-height: 620px) {
  .brief { column-gap: 1.6rem; }
  .brief .pick { padding: 0 0.72rem 0 0.66rem; gap: 0.42rem; font-size: 0.82rem; }
}
/* a shorter screen: the same sheet, closer set */
@media (min-width: 1200px) and (min-height: 620px) and (max-height: 860px) {
  .start { padding-bottom: 1.25rem; }
  .brief { padding-top: 1.15rem; padding-bottom: 1.15rem; }
  .brief__title { margin: 0.4rem 0 0.75rem; font-size: clamp(1.5rem, 1.05rem + 0.8vw, 1.95rem); }
  .brief__q { padding: 0.72rem 0; }
  .brief__q h4 { margin-bottom: 0.6rem; }
  .brief .pick { min-height: 2.3rem; }
  .brief__note-in { min-height: 3.8rem; }
  .brief__out { padding-top: 0.85rem; }
  .brief__hint { margin-top: 0.45rem; }
  .brief__promise { margin-top: 0.5rem; }
}