/*
  Portfolio: Liliana Design Studio.

  Z scale (inside .stage):   0 background light   1 fan   2 text, footer   3 header   10 skip link
  Shape rule:                cards 24px (scaled), every control a full pill or a circle.
  Palette:                   cream ground; sky, lilac and rose sampled from the logo's gradient.
  Type:                      Cormorant Garamond for names (echoes the logo's serif), Geist for the rest.
                             Both self-hosted as Latin + Cyrillic subsets, picked by unicode-range.

  Sizes that must track the cards use --u, the stage scale main.js writes
  (1 at a 1076px-tall stage). Without JS, --u stays 1 and the list below is the page.
*/

@font-face {
  font-family: "Geist";
  src: url("assets/fonts/geist-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+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Geist";
  src: url("assets/fonts/geist-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: "Cormorant Garamond";
  src: url("assets/fonts/cormorant-latin.woff2") format("woff2");
  font-weight: 300 700;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Cormorant Garamond";
  src: url("assets/fonts/cormorant-cyrillic.woff2") format("woff2");
  font-weight: 300 700;
  font-display: swap;
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

:root {
  --bg: #fbf8f5;
  --bg-2: #f3edef;
  --ink: #231d2b;
  --ink-2: #5d5568;           /* 6.7:1 on --bg */
  --line: rgb(35 29 43 / 0.14);
  --glass: rgb(255 255 255 / 0.62);
  --sky: #8ecdfb;
  --lilac: #c4b4fa;
  --rose: #f9bccb;
  --brand: linear-gradient(120deg, var(--sky) 0%, var(--lilac) 50%, var(--rose) 100%);
  --card-ground: #ece5ea;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);

  --serif: "Cormorant Garamond", "Cormorant", Georgia, "Times New Roman", serif;
  --sans: "Geist", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  --top: 4.5rem;
  --gutter: max(1rem, env(safe-area-inset-left));

  --u: 1;
  --cw: 260px;
  --ch: 330px;

  color-scheme: light;
}

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

html {
  background: var(--bg);
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  margin: 0;
  min-height: 100svh;
  color: var(--ink);
  font-family: var(--sans);
  font-size: 1rem;
  line-height: 1.5;
  background:
    radial-gradient(60% 50% at 8% 0%, rgb(142 205 251 / 0.28) 0%, rgb(142 205 251 / 0) 70%),
    radial-gradient(55% 45% at 50% 0%, rgb(196 180 250 / 0.22) 0%, rgb(196 180 250 / 0) 70%),
    radial-gradient(60% 55% at 100% 100%, rgb(249 188 203 / 0.3) 0%, rgb(249 188 203 / 0) 70%),
    var(--bg);
  overscroll-behavior: none;
  -webkit-tap-highlight-color: transparent;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Language: every bilingual text exists twice; the one not in use is removed. */
[data-lang="bg"] body [lang="en"]:not(.lang__item),
[data-lang="en"] body [lang="bg"]:not(.lang__item) { display: none !important; }

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.skip {
  position: absolute;
  top: max(0.75rem, env(safe-area-inset-top));
  left: max(0.75rem, env(safe-area-inset-left));
  z-index: 10;
  padding: 0.625rem 1rem;
  border-radius: 999px;
  background: var(--ink);
  color: var(--bg);
  font-weight: 600;
  text-decoration: none;
  translate: 0 -200%;
}
.skip:focus-visible { translate: 0 0; }

:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 3px;
}

svg { flex: none; }

/* ---------------------------------------------------------------- stage */

.stage {
  position: relative;
  height: 100svh;
  min-height: 34rem;
  overflow: hidden;
  overflow: clip;
  isolation: isolate;
}

/* Grain: a static layer that keeps the soft gradients from banding. Never repaints. */
.stage::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0.035;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .6 0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------------------------------------------------------------- header */

.top {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  height: var(--top);
  padding: env(safe-area-inset-top) var(--gutter) 0;
  padding-right: max(1rem, env(safe-area-inset-right));
}

.brand {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  min-height: 2.75rem;
  color: inherit;
  text-decoration: none;
}

.brand__logo {
  width: 2.75rem;
  height: 2.75rem;
}

.brand__name {
  font-family: var(--serif);
  font-size: 1.3125rem;
  font-weight: 600;
  letter-spacing: 0.005em;
  white-space: nowrap;
}

.tabs,
.lang,
.seg {
  display: flex;
  padding: 0.25rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--glass);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}

.tabs__item,
.lang__item,
.seg__item {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-width: 2.75rem;
  height: 2.375rem;
  padding: 0 1rem;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--ink-2);
  font: inherit;
  font-size: 0.9375rem;
  font-weight: 500;
  white-space: nowrap;
  text-decoration: none;
  cursor: pointer;
  touch-action: manipulation;
  transition: background-color 0.25s ease, color 0.25s ease;
}

.lang__item { padding: 0 0.75rem; font-size: 0.8125rem; letter-spacing: 0.04em; }

.tabs__item[aria-current="page"],
.lang__item[aria-current="true"],
.seg__item[aria-pressed="true"] {
  background: var(--ink);
  color: var(--bg);
}

.seg__item svg { width: 1.125rem; height: 1.125rem; fill: currentColor; }

@media (hover: hover) {
  .tabs__item:not([aria-current="page"]):hover,
  .lang__item:not([aria-current="true"]):hover,
  .seg__item[aria-pressed="false"]:hover { color: var(--ink); background: rgb(35 29 43 / 0.06); }
}

/* ---------------------------------------------------------------- views */

.view--work {
  position: absolute;
  inset: 0;
}

.view--about {
  position: absolute;
  inset: var(--top) 0 0;
  z-index: 2;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.js:not([data-view="about"]) .view--about,
.js[data-view="about"] .view--work,
.js[data-view="about"] .foot { display: none; }

/* ---------------------------------------------------------------- fan */

.fan,
.ambient,
.now { display: none; }

.is-fan .fan,
.is-fan .ambient { display: block; }
.is-fan .now { display: grid; }

/* Soft light in the centred site's brand colour. Two layers crossfade between neighbours,
   so the gradients only repaint when the centre card changes, never per frame. */
.ambient {
  position: absolute;
  top: 44%;
  left: 50%;
  z-index: 0;
  width: calc(60rem * var(--u));
  height: calc(46rem * var(--u));
  translate: -50% -50%;
  opacity: 0.2;
  pointer-events: none;
}

/* Eased falloff: a straight two-stop fade leaves a visible rim where the slope ends. */
.ambient i {
  position: absolute;
  inset: 0;
  color: var(--lilac);
  background: radial-gradient(
    closest-side,
    currentColor 0%,
    color-mix(in srgb, currentColor 62%, transparent) 30%,
    color-mix(in srgb, currentColor 26%, transparent) 58%,
    color-mix(in srgb, currentColor 7%, transparent) 82%,
    transparent 100%
  );
}
.ambient i[data-glow="b"] { opacity: 0; }

/* The drag surface is a band as tall as the cards plus a margin, centred on them. */
.fan {
  position: absolute;
  top: 42%;
  left: 0;
  right: 0;
  z-index: 1;
  height: calc(var(--ch) * 1.24);
  translate: 0 -50%;
  perspective: calc(1680px * var(--u));
  perspective-origin: 50% 50%;
  cursor: grab;
  touch-action: pan-y pinch-zoom;
  user-select: none;
  -webkit-user-select: none;
}

.card {
  position: absolute;
  top: 50%;
  left: 50%;
  width: var(--cw);
  height: var(--ch);
  margin: calc(var(--ch) / -2) 0 0 calc(var(--cw) / -2);
  overflow: hidden;
  border-radius: calc(24px * var(--u));
  background: var(--card-ground);
  box-shadow:
    0 calc(2px * var(--u)) calc(6px * var(--u)) rgb(60 40 80 / 0.1),
    0 calc(30px * var(--u)) calc(60px * var(--u)) calc(-18px * var(--u)) rgb(60 40 80 / 0.38);
  will-change: transform, opacity;
  backface-visibility: hidden;
  -webkit-user-drag: none;
  cursor: grab;
}

.card.is-center { cursor: pointer; }

/* Hairline edge, the way light catches a printed card. Under the shade, so it fades too. */
.card::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  border-radius: inherit;
  pointer-events: none;
  box-shadow:
    inset 0 0 0 1px rgb(35 29 43 / 0.08),
    inset 0 1px 0 rgb(255 255 255 / 0.25);
}

.card__img {
  position: absolute;
  top: 0;
  left: -3%;
  width: 106%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 0;
  opacity: 0;
  -webkit-user-drag: none;
  transition: opacity 0.6s ease, scale 0.8s var(--ease-out);
}

.card.is-ready .card__img { opacity: 1; }

/* Side cards mix toward the page, so they read as further away. */
.card__shade {
  position: absolute;
  inset: 0;
  z-index: 2;
  background: var(--bg);
  opacity: 0;
  pointer-events: none;
}

/* Shown only if a screenshot fails to load. */
.card__fallback {
  position: absolute;
  inset: 0;
  display: none;
  place-items: center;
  padding: 1.25rem;
  color: var(--ink-2);
  font-family: var(--serif);
  font-size: calc(1.5rem * var(--u));
  text-align: center;
  text-wrap: balance;
}
.card.is-broken .card__fallback { display: grid; }

@media (hover: hover) {
  .card.is-center:hover .card__img { scale: 1.035; }
}

.is-dragging,
.is-dragging .fan,
.is-dragging .card { cursor: grabbing; }

/* ---------------------------------------------------------------- text */

.now {
  position: absolute;
  top: 62%;
  left: 0;
  right: 0;
  z-index: 2;
  justify-items: center;
  padding-inline: var(--gutter) max(1rem, env(safe-area-inset-right));
  text-align: center;
}

.now__title {
  display: grid;
  justify-items: center;
  margin: 0;
  max-width: 100%;
  font-family: var(--serif);
  font-size: min(calc(3.75rem * var(--u)), 11vw);
  font-weight: 500;
  line-height: 1.05;
  letter-spacing: -0.01em;
  text-wrap: balance;
}

.now__kind {
  display: grid;
  justify-items: center;
  max-width: 46ch;
  margin: calc(0.625rem * var(--u)) 0 0;
  color: var(--ink-2);
  font-size: clamp(0.9375rem, 0.85rem + 0.3vw, 1.125rem);
  line-height: 1.45;
  text-wrap: balance;
}

.now__tags {
  display: grid;
  justify-items: center;
  margin: calc(0.625rem * var(--u)) 0 0;
  color: var(--ink-2);
  font-size: 0.8125rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* Incoming and outgoing lines share one grid cell, so a swap never moves the layout. */
.now__title > [data-line],
.now__kind > [data-line],
.now__tags > [data-line] { grid-area: 1 / 1; }

.tl__word { display: inline-block; white-space: nowrap; }

/* The outgoing name is gone (160ms) before the first incoming letter starts (120ms + stagger),
   so two names never sit legibly on top of each other. */
.tl__char {
  display: inline-block;
  transition:
    transform 0.9s var(--ease-out) calc(120ms + var(--i) * 16ms),
    opacity 0.6s var(--ease-out) calc(120ms + var(--i) * 16ms);
}

.tl.is-pre .tl__char {
  opacity: 0;
  transform: translate3d(0, 0.42em, 0);
}

.tl.is-out .tl__char {
  opacity: 0;
  transform: translate3d(0, -0.2em, 0);
  transition: transform 0.3s var(--ease-out), opacity 0.16s linear;
}

.kl {
  transition: transform 0.8s var(--ease-out) 0.2s, opacity 0.6s var(--ease-out) 0.2s;
}
.kl.is-pre { opacity: 0; transform: translate3d(0, 0.5em, 0); }
.kl.is-out {
  opacity: 0;
  transform: translate3d(0, -0.3em, 0);
  transition: transform 0.3s var(--ease-out), opacity 0.16s linear;
}

.now__row {
  display: flex;
  align-items: center;
  gap: calc(0.75rem * var(--u));
  margin-top: calc(1.5rem * var(--u));
}

.cta {
  display: inline-flex;
  align-items: center;
  gap: 0.875rem;
  height: 3.5rem;
  padding: 0 0.3125rem 0 1.5rem;
  border-radius: 999px;
  background: var(--ink);
  color: var(--bg);
  font-size: 1.0625rem;
  font-weight: 600;
  letter-spacing: -0.005em;
  white-space: nowrap;
  text-decoration: none;
  touch-action: manipulation;
  transition: background-color 0.3s ease, transform 0.2s var(--ease-out);
}

.cta__disc {
  display: grid;
  place-items: center;
  width: 2.875rem;
  height: 2.875rem;
  border-radius: 50%;
  background: var(--brand);
  color: var(--ink);
}

.cta__disc svg {
  width: 1.0625rem;
  height: 1.0625rem;
  fill: currentColor;
  transition: transform 0.5s var(--ease-out);
}

.ghost,
.pill {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  height: 3.5rem;
  padding: 0 1.375rem 0 1.125rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--glass);
  color: var(--ink);
  font: inherit;
  font-size: 1.0625rem;
  font-weight: 500;
  white-space: nowrap;
  text-decoration: none;
  cursor: pointer;
  touch-action: manipulation;
  transition: background-color 0.25s ease, border-color 0.25s ease, transform 0.2s var(--ease-out);
}

.ghost svg,
.pill svg { width: 1.25rem; height: 1.25rem; fill: currentColor; }

.nav {
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: var(--glass);
  color: var(--ink-2);
  cursor: pointer;
  touch-action: manipulation;
  transition: color 0.25s ease, border-color 0.25s ease, background-color 0.25s ease, transform 0.2s var(--ease-out);
}

.nav svg {
  width: 1rem;
  height: 1rem;
  fill: currentColor;
}

@media (hover: hover) {
  .cta:hover { background: #3a3046; }
  .cta:hover .cta__disc svg { transform: translateX(3px); }
  .ghost:hover,
  .pill:hover,
  .nav:hover {
    border-color: rgb(35 29 43 / 0.35);
    background: #fff;
    color: var(--ink);
  }
}

.cta:active,
.ghost:active,
.pill:active { transform: scale(0.98); }
.nav:active { transform: scale(0.94); }

/* ---------------------------------------------------------------- contact line */

.foot {
  position: absolute;
  left: 0;
  right: 0;
  bottom: max(0.75rem, env(safe-area-inset-bottom));
  z-index: 2;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.25rem 1.5rem;
  padding-inline: var(--gutter) max(1rem, env(safe-area-inset-right));
}

.foot__item {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 2.75rem;
  padding-inline: 0.25rem;
  color: var(--ink-2);
  font-size: 0.875rem;
  text-decoration: none;
  transition: color 0.25s ease;
}

.foot__item svg { width: 1.125rem; height: 1.125rem; fill: currentColor; }

@media (hover: hover) {
  .foot__item:hover { color: var(--ink); }
  .foot__item:hover .foot__text { text-decoration: underline; text-underline-offset: 0.2em; }
}

/* ---------------------------------------------------------------- about */

.about {
  display: grid;
  align-items: center;
  gap: clamp(2rem, 5vw, 5rem);
  width: min(68rem, 100%);
  min-height: 100%;
  margin: 0 auto;
  padding: clamp(1.5rem, 4vw, 3rem) var(--gutter) 3rem max(1rem, env(safe-area-inset-right));
  padding-left: var(--gutter);
}

@media (min-width: 50rem) {
  .about { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
  .about .about__photo { width: min(100%, 26rem); }
}

/* The whole photo, uncropped, framed in the logo's gradient. */
.about__photo {
  justify-self: center;
  width: min(100%, 15rem);
  margin: 0;
  padding: 0.375rem;
  border-radius: 1.75rem;
  background: var(--brand);
  box-shadow: 0 2rem 4rem -1.5rem rgb(60 40 80 / 0.35);
}

.about__photo img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 1.375rem;
  background: var(--card-ground);
}

.about__eyebrow {
  margin: 0;
  color: var(--ink-2);
  font-size: 0.8125rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.about__name {
  margin: 0.5rem 0 0;
  font-family: var(--serif);
  font-size: clamp(2.75rem, 2rem + 3.5vw, 4.75rem);
  font-weight: 500;
  line-height: 1;
  letter-spacing: -0.01em;
  text-wrap: balance;
}

.about__lead {
  max-width: 36rem;
  margin: 1.25rem 0 0;
  color: var(--ink-2);
  font-size: clamp(1.0625rem, 1rem + 0.3vw, 1.25rem);
  line-height: 1.55;
  text-wrap: pretty;
}

.contact {
  display: grid;
  gap: 0.625rem;
  max-width: 30rem;
  margin: 2rem 0 0;
  padding: 0;
  list-style: none;
}

.contact__item {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  grid-template-rows: auto auto;
  column-gap: 0.875rem;
  align-items: center;
  padding: 0.625rem 1.25rem 0.625rem 0.625rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--glass);
  color: var(--ink);
  text-decoration: none;
  transition: background-color 0.25s ease, border-color 0.25s ease;
}

.contact__icon {
  display: grid;
  grid-row: 1 / 3;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 50%;
  background: var(--brand);
}

.contact__icon svg { width: 1.25rem; height: 1.25rem; fill: var(--ink); }

.contact__label {
  color: var(--ink-2);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  line-height: 1.3;
  text-transform: uppercase;
}

.contact__value {
  overflow-wrap: break-word; /* the e-mail breaks after its @ (a <wbr> in the markup) */
  font-size: 1.0625rem;
  font-weight: 500;
  line-height: 1.35;
}

@media (hover: hover) {
  .contact__item:hover { border-color: rgb(35 29 43 / 0.35); background: #fff; }
}

/* ---------------------------------------------------------------- live preview */

.preview {
  width: min(90rem, 100vw - 2rem);
  height: calc(100svh - 2rem);
  max-width: none;
  max-height: none;
  margin: auto;
  padding: 0;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 1.25rem;
  background: var(--bg-2);
  color: var(--ink);
  box-shadow: 0 2.5rem 6rem -1.5rem rgb(35 29 43 / 0.45);
}

.preview[open] { display: flex; flex-direction: column; }

.preview::backdrop {
  background: rgb(35 29 43 / 0.42);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}

.preview__bar {
  display: flex;
  flex: none;
  align-items: center;
  gap: 0.625rem;
  padding: 0.625rem 0.625rem 0.625rem 1.25rem;
  border-bottom: 1px solid var(--line);
  background: var(--bg);
}

.preview__title {
  flex: 1;
  min-width: 0;
  margin: 0;
  overflow: hidden;
  font-family: var(--serif);
  font-size: 1.5rem;
  font-weight: 600;
  line-height: 1.2;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.preview .pill { height: 2.75rem; padding: 0 1rem; font-size: 0.9375rem; }

.preview__view {
  position: relative;
  flex: 1;
  min-height: 0;
  overflow: hidden;
}

/* The screen box is sized and scaled by main.js; until the site loads, its own screenshot
   stands in, so the preview is never an empty box. */
.preview__screen {
  position: absolute;
  overflow: hidden;
  background: var(--card-ground) center top / cover no-repeat;
}

.preview--mobile .preview__screen {
  border: 1px solid rgb(35 29 43 / 0.2);
  box-shadow: 0 1.5rem 3rem -1rem rgb(35 29 43 / 0.35);
}

.preview__screen iframe {
  display: block;
  border: 0;
  background: #fff;
  transform-origin: 0 0;
  opacity: 0;
  transition: opacity 0.4s ease;
}

.preview__screen.is-loaded iframe { opacity: 1; }

.preview__slow {
  position: absolute;
  left: 50%;
  bottom: 1rem;
  margin: 0;
  padding: 0.625rem 1.125rem;
  border-radius: 999px;
  background: var(--ink);
  color: var(--bg);
  font-size: 0.9375rem;
  white-space: nowrap;
  translate: -50% 0;
}
.preview__slow a { color: inherit; font-weight: 600; margin-left: 0.375rem; }

/* ---------------------------------------------------------------- small screens */

@media (max-width: 47.99rem) {
  .brand__name { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .tabs__item { padding: 0 0.875rem; }
  .foot { gap: 0.5rem; }
  .foot__item {
    justify-content: center;
    width: 2.75rem;
    padding: 0;
    border: 1px solid var(--line);
    border-radius: 50%;
    background: var(--glass);
  }
  .foot__text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .preview { width: 100vw; height: 100svh; border: 0; border-radius: 0; }
  .preview .seg { display: none; }
  .preview__bar { padding-left: 1rem; }
}

/* Phones: the preview button keeps its icon, its words stay for screen readers. */
@media (max-width: 29.99rem) {
  .now__row { gap: 0.5rem; }
  .cta { gap: 0.625rem; padding-left: 1.125rem; font-size: 1rem; }
  .ghost { width: 3.5rem; padding: 0; justify-content: center; }
  .ghost > span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .ghost svg { width: 1.375rem; height: 1.375rem; }
}

/* The smallest phones (320 wide): a tighter header, and the arrows give way to swiping
   and tapping the side cards, which do the same thing. */
@media (max-width: 22.49rem) {
  .top { gap: 0.375rem; }
  .brand__logo { width: 2.25rem; height: 2.25rem; }
  .tabs__item { padding: 0 0.625rem; font-size: 0.875rem; }
  .lang__item { min-width: 2.25rem; padding: 0 0.5rem; }
  .now__row .nav { display: none; }
}

/* Short portrait screens: the tags line gives way so the buttons clear the contact line. */
@media (orientation: portrait) and (max-height: 42rem) {
  .fan,
  .ambient { top: 40%; }
  .now { top: 60%; }
  .now__tags { display: none; }
}

/* Landscape phones: too short for the stacked layout. The description and the tags give way. */
@media (orientation: landscape) and (max-height: 33.75rem) {
  :root { --top: 3.5rem; }
  .stage { min-height: 0; }
  .brand__logo { width: 2.25rem; height: 2.25rem; }
  .fan { top: 40%; }
  .ambient { top: 40%; }
  .now { top: 63%; }
  .now__kind,
  .now__tags { display: none; }
  .now__row { margin-top: 0.5rem; }
  .foot { display: none; }
}

/* ---------------------------------------------------------------- no JS, or no sites */

.js .works { display: none; }

.no-js .stage { height: auto; overflow: visible; }
.no-js .view--work,
.no-js .view--about { position: relative; inset: auto; }
.no-js .view--work { padding-top: var(--top); }
.no-js .foot { position: relative; padding-block: 2rem; }

.no-js .works {
  display: flex;
  justify-content: safe center;
  gap: 1.25rem;
  margin: 0;
  padding: 2rem 1rem 1rem;
  overflow-x: auto;
  scrollbar-width: thin;
  list-style: none;
  scroll-snap-type: x mandatory;
}

.no-js .work {
  flex: 0 0 16.25rem;
  scroll-snap-align: center;
}

.no-js .work__link {
  display: grid;
  gap: 0.25rem;
  color: inherit;
  text-decoration: none;
}

.no-js .work__shot {
  width: 100%;
  height: auto;
  margin-bottom: 0.75rem;
  border-radius: 24px;
}

.no-js .work__name { font-family: var(--serif); font-size: 1.75rem; font-weight: 500; }
.no-js .work__kind { color: var(--ink-2); font-size: 0.9375rem; }
.no-js .work__tags { color: var(--ink-2); font-size: 0.75rem; letter-spacing: 0.06em; text-transform: uppercase; }
.no-js .lang,
.no-js .now__row .ghost { display: none; }

.empty {
  position: absolute;
  top: 45%;
  left: 0;
  right: 0;
  margin: 0;
  padding-inline: 1rem;
  color: var(--ink-2);
  font-family: var(--serif);
  font-size: 2rem;
  text-align: center;
}

/* ---------------------------------------------------------------- reduced motion */

@media (prefers-reduced-motion: reduce) {
  .tl__char,
  .kl,
  .card__img,
  .cta,
  .cta__disc svg,
  .ghost,
  .pill,
  .nav,
  .preview__screen iframe { transition: none; }

  .card.is-center:hover .card__img { scale: none; }
}

/* ---------------------------------------------------------------- flow layout (no overlaps)
   The cards, the text and the buttons stack in one column, so the buttons can never slide
   under the contact line, whatever the screen height or the length of a description. */

.is-fan .view--work {
  display: flex;
  flex-direction: column;
  padding: var(--top) 0 calc(2.75rem + max(0.75rem, env(safe-area-inset-bottom)) + 1.25rem);
}

.is-fan .view--work .fan {
  position: relative;
  top: auto !important;
  translate: none;
  flex: 1 1 auto;
  height: auto;
  min-height: calc(var(--ch) * 1.12);
}

.is-fan .view--work .now {
  position: relative;
  top: auto !important;
  flex: none;
  padding-top: calc(0.5rem * var(--u));
}

@media (orientation: landscape) and (max-height: 33.75rem) {
  .is-fan .view--work { padding-bottom: 0.75rem; }
}