/* ==========================================================================
   larisel.com/work — Projects, and a page for each
   --------------------------------------------------------------------------
   Built on the home page's own sheet (css/home.css: tokens, header, buttons,
   the quote, the "does" list, the browser window, the chat, the footer). The
   home page shows a few projects as films; this is where all of them live:
   one row each — the site itself playing, in a browser and on a phone, beside
   its story, "Explore the site" and "Project details" — and for each project
   its task and what was built. Pages written by _film/home/build_work.py
   from work/works.json.
   ========================================================================== */

.pg-work main { padding-top: var(--hdr-h); }
.pg-work .label { font-weight: 400; }                       /* an <h2 class="label"> is still the mono label, not a bold one */

/* ---- the page of every project --------------------------------------------- */
.work-hero { padding: clamp(3rem, 2rem + 5vw, 6.5rem) var(--pad-edge) clamp(3rem, 2rem + 4vw, 6rem); max-width: 84rem; }
.work-hero__title { margin: var(--s-4) 0 var(--s-5); font-family: var(--f-display); font-weight: 300; font-size: var(--t-hero); line-height: 1.0; letter-spacing: -0.02em; text-wrap: balance; }
.work-hero__title em { font-style: italic; color: #9a4a32; }
.work-hero__lead { max-width: 36rem; font-size: var(--t-lead); line-height: 1.7; color: var(--c-ink-soft); }
.work-filter { display: flex; flex-wrap: wrap; gap: var(--s-2); margin-top: var(--s-6); }
.chip { position: relative; min-height: 2.35rem; padding: 0 1.05rem; border-radius: 999px; border: 1px solid var(--c-line);
  font: 430 0.84rem/1 var(--f-body); color: var(--c-ink-soft); transition: background var(--d-fast) var(--e-out), color var(--d-fast) var(--e-out), border-color var(--d-fast) var(--e-out); }
.chip::after { content: ""; position: absolute; inset: -5px 0; }                 /* a 44px tall target */
.chip:hover { color: var(--c-ink); border-color: rgba(23, 21, 15, 0.42); }
.chip[aria-pressed="true"] { background: var(--c-ink); border-color: var(--c-ink); color: var(--c-cream); }

/* one project: its site playing on the wide side, its story on the other; the sides take turns */
.shows { list-style: none; margin: 0 auto; padding: 0 var(--pad-edge) clamp(5rem, 3rem + 6vw, 9rem); max-width: 92rem;
  display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(5rem, 3rem + 7vw, 10rem); }
.show { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); gap: clamp(2rem, 1rem + 4vw, 5.5rem); align-items: center; }
.show.is-out { display: none; }
.show.is-flip { grid-template-columns: minmax(0, 1fr) minmax(0, 1.55fr); }
.show.is-flip .show__media { order: 2; }
.show__media { position: relative; display: block; padding-bottom: clamp(2rem, 1rem + 3vw, 4rem); color: inherit; }
.show__window { display: block; width: 100%; margin: 0; opacity: 1; transform: none;
  transition: transform 900ms var(--e-out), box-shadow 900ms var(--e-out); }
.show__window .excerpt__bar { display: flex; }
.show__window .excerpt__video { aspect-ratio: 16 / 10; object-fit: cover; border-radius: 0; }
a.show__media:hover .show__window { transform: translate3d(0, -6px, 0);
  box-shadow: 0 1px 0 rgba(23, 21, 15, 0.06), 0 44px 90px -34px rgba(40, 30, 18, 0.45), 0 0 0 1px rgba(23, 21, 15, 0.08); }
/* the same site on a phone, standing in front of the browser's corner */
.show__phone { position: absolute; right: clamp(-0.5rem, -1vw, -1.5rem); bottom: 0; width: clamp(7.5rem, 4rem + 7vw, 12.5rem);
  border-radius: 30px; padding: 7px; background: #0d0c0c; box-shadow: 0 0 0 1px rgba(23, 21, 15, 0.1), 0 40px 90px -30px rgba(0, 0, 0, 0.6);
  transition: transform 900ms var(--e-out); }
.show.is-flip .show__phone { right: auto; left: clamp(-0.5rem, -1vw, -1.5rem); }
a.show__media:hover .show__phone { transform: translate3d(0, -10px, 0); }
.show__phone-video { display: block; width: 100%; height: auto; aspect-ratio: 390 / 844; object-fit: cover; border-radius: 24px; background: var(--c-night); }
/* the bot: its scene, and the chat itself to play */
.show__media--chat { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; }
.show__still { grid-column: 1 / -1; grid-row: 1; margin: 0; border-radius: 14px; overflow: hidden;
  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); }
.show__still img { width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; }
.show__media--chat .chat { grid-column: 2; grid-row: 1; width: min(19rem, 70vw); margin: clamp(1.5rem, 1rem + 2vw, 3rem) clamp(1rem, 0.5rem + 2vw, 2.5rem); }
.show__media--chat .chat__phone { height: min(25rem, 54vh); }
.show__media--chat { padding-bottom: 2.6rem; }
.show__media--chat .chat__note { position: absolute; left: 0; right: 0; top: calc(100% + 0.7rem); color: var(--c-ink-faint); }   /* under the phone, on the page */

.show__text { display: grid; gap: var(--s-4); align-content: center; max-width: 31rem; }
.show__n { font-family: var(--f-display); font-style: italic; font-weight: 300; font-size: clamp(2.4rem, 1.8rem + 1.6vw, 3.4rem); line-height: 1; color: #9a4a32; }
.show__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 0.35rem 0.9rem;
  font-family: var(--f-mono); font-size: var(--t-label); letter-spacing: var(--ls-label); text-transform: uppercase; color: var(--c-ink-faint); }
.tag { display: inline-flex; align-items: center; min-height: 1.45rem; padding: 0 0.6rem; border-radius: 999px; border: 1px solid var(--c-line); color: var(--c-ink-soft); }
.tag--client { border-color: rgba(154, 74, 50, 0.45); color: #9a4a32; }
.show__title { font-family: var(--f-display); font-weight: 300; font-size: clamp(2.2rem, 1.5rem + 2.2vw, 3.6rem); line-height: 1.02; letter-spacing: -0.02em; text-wrap: balance; }
.show__one { font-size: 1.04rem; line-height: 1.7; color: var(--c-ink-soft); }
.show__does { margin: var(--s-2) 0 0; max-width: none; }
.show__does li { padding: 0.8rem 0; }
.show__does li::before { padding-top: 0.2em; }
.show__links { display: flex; flex-wrap: wrap; gap: var(--s-3); margin-top: var(--s-3); }
@media (max-width: 960px) {
  .show, .show.is-flip { grid-template-columns: minmax(0, 1fr); gap: var(--s-6); }   /* minmax: a 1280-wide video must not widen the page */
  .show.is-flip .show__media { order: 0; }
  .show__phone, .show.is-flip .show__phone { right: 0.5rem; left: auto; }
  .show__text { max-width: 36rem; }
}
@media (max-width: 600px) {
  .show__media--chat { grid-template-columns: 1fr; }
  .show__media--chat .chat { grid-column: 1; grid-row: 2; justify-self: center; margin: -4rem 0 0; }
  .show__media--chat .chat__note { position: static; }
}

/* ---- a project ---------------------------------------------------------------- */
.case-hero { padding: clamp(2.5rem, 1.8rem + 4vw, 5.5rem) var(--pad-edge) clamp(2rem, 1.5rem + 2vw, 3.25rem); max-width: 60rem; }
.case-back { display: inline-flex; align-items: center; gap: 0.5em; min-height: 2.75rem; font: 430 0.88rem/1 var(--f-body); color: var(--c-ink-soft); transition: color var(--d-fast) var(--e-out), gap var(--d-base) var(--e-out); }
.case-back:hover { color: var(--c-ink); gap: 0.75em; }
.case-back i { font-style: normal; }
.case-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 0.35rem 0.9rem; margin-top: var(--s-5);
  font-family: var(--f-mono); font-size: var(--t-label); letter-spacing: var(--ls-label); text-transform: uppercase; color: var(--c-ink-faint); }
.case-hero__title { margin: var(--s-4) 0 var(--s-6); font-family: var(--f-display); font-weight: 300; font-size: var(--t-hero); line-height: 1.0; letter-spacing: -0.02em; }
.case-hero__lead { max-width: 38rem; margin-top: var(--s-5); font-size: var(--t-lead); line-height: 1.7; color: var(--c-ink-soft); }
.case-hero__links { display: flex; flex-wrap: wrap; gap: var(--s-3); margin-top: var(--s-6); }

/* the site itself: a browser window and, beside it, the same site on a phone */
.case-media { display: grid; grid-template-columns: minmax(0, 1fr) clamp(11rem, 7rem + 8vw, 16rem); gap: clamp(1rem, 0.6rem + 2vw, 2.5rem); align-items: end;
  padding: 0 var(--pad-edge); max-width: 92rem; }
.case-media .excerpt__window { width: 100%; margin: 0; transform: none; opacity: 1; border-radius: 14px; }
.case-media .excerpt__video { display: block; width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; }
.case-phone { margin: 0; border-radius: 30px; padding: 7px; background: #0d0c0c; box-shadow: 0 0 0 1px rgba(23, 21, 15, 0.1), 0 40px 90px -30px rgba(0, 0, 0, 0.6); }
.case-phone__video { display: block; width: 100%; height: auto; aspect-ratio: 390 / 844; object-fit: cover; border-radius: 24px; background: var(--c-night); }
@media (max-width: 760px) {
  .case-media { grid-template-columns: 1fr; }
  .case-phone { width: min(16rem, 70%); justify-self: center; }
}
/* the bot: its scene, and the chat to play */
.case-media--chat { grid-template-columns: minmax(0, 1fr) minmax(0, 22rem); align-items: center; }
.case-still { margin: 0; border-radius: 14px; overflow: hidden; 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); }
.case-still img { width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; }
.case-media--chat .chat { position: relative; inset: auto; transform: none; width: min(22rem, 100%); justify-self: center; }
.case-media--chat .chat__note { position: static; color: var(--c-ink-faint); }      /* written for the night stop: on cream it vanished */
@media (max-width: 900px) { .case-media--chat { grid-template-columns: 1fr; } }

/* the story: one quiet card, the task on the left and what was built on the right. The card's edges are the
   media's (92rem), both headings share one line, the list speaks the home page's list language — nothing
   competes (a giant numeral column and a sticky statement read as "nested, busy") */
.case-story { padding: clamp(4rem, 3rem + 3vw, 6.5rem) var(--pad-edge) 0; }
.case-story__card { max-width: calc(92rem - 2 * var(--pad-edge)); display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(2.5rem, 1.5rem + 4vw, 6.5rem);
  padding: clamp(2rem, 1.2rem + 3vw, 4.5rem); border-radius: 22px; background: #ece4d6; }
.case-story .label { display: block; padding-bottom: var(--s-4); margin-bottom: clamp(1.4rem, 1rem + 1vw, 2rem); border-bottom: 1px solid rgba(23, 21, 15, 0.16); }
.case-story__text { max-width: 30rem; font-family: var(--f-display); font-weight: 300; font-size: clamp(1.4rem, 1.08rem + 0.95vw, 2rem); line-height: 1.32; letter-spacing: -0.012em; text-wrap: pretty; }
/* what we built: three short lines — a small italic numeral, the line's name, one sentence */
.feats { list-style: none; margin: 0; padding: 0; display: grid; }
.feat { display: grid; grid-template-columns: 2.8rem minmax(0, 1fr); column-gap: var(--s-3); align-items: baseline; padding: 1.15rem 0 1.25rem; border-top: 1px solid rgba(23, 21, 15, 0.12); }
.feat:first-child { padding-top: 0; border-top: 0; }
.feat__n { font-family: var(--f-display); font-style: italic; font-weight: 300; font-size: 1.45rem; line-height: 1; color: #9a4a32; }
.feat__body { display: grid; gap: 0.35rem; }
.feat__title { margin: 0; font-family: var(--f-display); font-weight: 400; font-size: clamp(1.18rem, 1.05rem + 0.35vw, 1.4rem); line-height: 1.25; letter-spacing: -0.005em; }
.feat__text { max-width: 34rem; font-size: 0.95rem; line-height: 1.65; color: var(--c-ink-soft); }
@media (max-width: 900px) {
  .case-story__card { grid-template-columns: 1fr; gap: var(--s-7); }
}
/* the question, alone in the middle of the page, and the way to answer it */
.case-ask { display: grid; justify-items: center; gap: var(--s-6); padding: clamp(4.5rem, 3rem + 5vw, 8rem) var(--pad-edge) clamp(4.5rem, 3rem + 5vw, 8rem); text-align: center; }
.case-ask__q { max-width: 20ch; font-family: var(--f-display); font-style: italic; font-weight: 300; font-size: clamp(2rem, 1.3rem + 2.6vw, 3.6rem); line-height: 1.04; letter-spacing: -0.02em; color: #9a4a32; text-wrap: balance; }

/* Russian headlines: Source Serif draws heavier than Newsreader (the home page's rule, for these pages' own titles) */
:lang(ru) .work-hero__title, :lang(ru) .show__title, :lang(ru) .case-hero__title, :lang(ru) .case-story__text,
:lang(ru) .case-ask__q, :lang(ru) .show__n, :lang(ru) .feat__n { font-weight: 240; }
:lang(ru) .feat__title { font-weight: 340; }

/* words and pictures arrive once as they come on screen (js/work.js adds html.rv; off without JS).
   The home sheet's own .rv moves by transform and clears it from a parent's .is-in: here each part
   gets .is-in itself, so both are cleared on it */
.rv .rv__p { opacity: 0; transform: none; translate: 0 22px; transition: opacity 900ms var(--e-out), translate 1100ms var(--e-out); transition-delay: calc(var(--i, 0) * 80ms); }
.rv .rv__p.is-in { opacity: 1; translate: none; }
@media (prefers-reduced-motion: reduce) {
  .rv .rv__p { opacity: 1; translate: none; transition: none; }
  .show__window, .show__phone { transition: none; }
}


/* ==== a project's page opens on its moment: the loop fills the screen, the words sit at its foot ==== */
/* the film runs up under the header (the header turns to night over it, js/work.js) */
.pg-work main.case, .pg-about main { padding-top: 0; }
.case-hero { position: relative; isolation: isolate; display: grid; align-content: end; max-width: none; min-height: 100vh; min-height: 100svh;
  padding: calc(var(--hdr-h) + 4.5rem) var(--pad-edge) clamp(2.5rem, 1.8rem + 3vw, 4.75rem); color: var(--c-ivory); background: var(--c-night); overflow: hidden; }
.case-hero__film { position: absolute; inset: 0; z-index: -2; }
.case-hero__film img, .case-hero__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.case-hero__video { opacity: 0; transition: opacity 700ms ease; }
.case-hero__video.is-playing { opacity: 1; }
.case-hero::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(0deg, rgba(8, 7, 7, 0.86) 0%, rgba(8, 7, 7, 0.55) 30%, rgba(8, 7, 7, 0) 62%),
              linear-gradient(90deg, rgba(8, 7, 7, 0.5) 0%, rgba(8, 7, 7, 0) 58%),
              linear-gradient(180deg, rgba(8, 7, 7, 0.45) 0, rgba(8, 7, 7, 0) 9rem); }
.case-hero__in { max-width: 46rem; }
.case-hero .case-back { position: absolute; top: calc(var(--hdr-h) + 0.75rem); left: var(--pad-edge); color: rgba(243, 237, 225, 0.78); }
.case-hero .case-back:hover { color: var(--c-ivory); }
.case-hero .case-meta { color: rgba(243, 237, 225, 0.62); margin-top: 0; }
.case-hero .case-hero__title { color: var(--c-ivory); margin: var(--s-4) 0 var(--s-5); }
.case-hero .quote { border-left-color: var(--c-light); }
.case-hero .quote p { color: var(--c-ivory); }
.case-hero .case-hero__lead { color: rgba(243, 237, 225, 0.8); }
.case-hero .btn--solid { background: var(--c-ivory); color: var(--c-night); }
.case-hero .btn--solid:hover { background: #fff; }
.case-hero .tag { border-color: rgba(243, 237, 225, 0.3); color: rgba(243, 237, 225, 0.82); }
.case-media { margin-top: clamp(3rem, 2rem + 4vw, 6rem); }
@media (orientation: portrait) {
  .case-hero::after { background: linear-gradient(0deg, rgba(8, 7, 7, 0.92) 0%, rgba(8, 7, 7, 0.7) 38%, rgba(8, 7, 7, 0) 70%),
                                  linear-gradient(180deg, rgba(8, 7, 7, 0.45) 0, rgba(8, 7, 7, 0) 9rem); }
}

/* ==== About: one sign on one wall (19.10). The studio's mark lights up and stays lit behind the whole page;
   the words come over the dark wall beside it — what we make, then who we are in three lines, then the way on.
   Two screens, no pictures of the projects. ===================================================== */
.pg-about { background: var(--c-night); color: var(--c-ivory); }
.about { position: relative; isolation: isolate; }
.about-stage { position: sticky; top: 0; z-index: -1; height: 100vh; height: 100lvh; margin-bottom: -100vh; margin-bottom: -100lvh; overflow: hidden; background: var(--c-night); pointer-events: none; }
/* the picture starts under the header, top-anchored: the sign's top stays in view at every size (the header had
   covered it, 19.10); its upper edge melts into the night above */
.about-stage img, .about-hero__video { position: absolute; left: 0; right: 0; top: var(--hdr-h); bottom: 0; width: 100%; height: calc(100% - var(--hdr-h)); object-fit: cover; object-position: 50% 0%;
  -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 6rem); mask-image: linear-gradient(180deg, transparent 0, #000 6rem); }
.about-stage__still { opacity: 0; transition: opacity 900ms ease; }
.about.is-still .about-stage__still { opacity: 1; }
/* the wall the words stand on stays dark; the sign keeps its glow */
.about-stage::after { content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, rgba(11, 11, 15, 0.74) 0%, rgba(11, 11, 15, 0.34) 40%, rgba(11, 11, 15, 0) 60%),
              linear-gradient(180deg, rgba(11, 11, 15, 0.4) 0, rgba(11, 11, 15, 0) 9rem); }
/* past the opening, the room dims a little so the second screen's words read as easily as the first's */
/* past the last words the room goes dark, so the page ends on night, not on half a sign (19.10) */
.about-stage__end { position: absolute; inset: 0; z-index: 2; background: var(--c-night); opacity: var(--end, 0); will-change: opacity; }
.about-stage__veil { position: absolute; inset: 0; z-index: 1; background: linear-gradient(90deg, rgba(11, 11, 15, 0.9) 0%, rgba(11, 11, 15, 0.66) 44%, rgba(11, 11, 15, 0.08) 66%, rgba(11, 11, 15, 0.12) 100%);
  opacity: var(--dim, 0); will-change: opacity; }

.about-hero { position: relative; display: grid; align-content: center; min-height: 100vh; min-height: 100svh; padding: calc(var(--hdr-h) + 3rem) var(--pad-edge) 5rem; }
.about-hero__in { max-width: 44rem; opacity: 0; transform: translate3d(0, 18px, 0); transition: opacity 1100ms var(--e-out), transform 1300ms var(--e-out); }
.about.is-lit .about-hero__in { opacity: 1; transform: none; }
.about .label { color: rgba(243, 237, 225, 0.62); }
.about-hero__title { margin: var(--s-4) 0 var(--s-5); max-width: 13.5ch; font-family: var(--f-display); font-weight: 300; font-size: clamp(2.7rem, 1.3rem + 4.2vw, 6.2rem); line-height: 1; letter-spacing: -0.025em; text-wrap: balance; }
.about-hero__title em, .about-who__title em { font-style: italic; color: #d9a27a; }
.about-hero__lead { max-width: 28rem; font-size: var(--t-lead); line-height: 1.7; color: rgba(243, 237, 225, 0.8); }
/* a quiet way down: a thin line with a bead running along it */
.about-hero__more { position: absolute; left: var(--pad-edge); bottom: clamp(1.6rem, 4vh, 2.6rem); display: block; width: 1px; height: 3.4rem; background: rgba(243, 237, 225, 0.22);
  opacity: 0; transition: opacity 900ms var(--e-out) 600ms; }
.about.is-lit .about-hero__more { opacity: 1; }
.about-hero__more i { position: absolute; left: -2px; top: 0; width: 5px; height: 9px; border-radius: 3px; background: #d9a27a; animation: about-bead 2.4s cubic-bezier(0.65, 0, 0.35, 1) infinite; }
@keyframes about-bead { 0% { transform: translateY(0); opacity: 0; } 20%, 75% { opacity: 1; } 100% { transform: translateY(3rem); opacity: 0; } }

.about-who { position: relative; display: grid; align-content: center; min-height: 100vh; min-height: 100svh; padding: calc(var(--hdr-h) + 1.5rem) var(--pad-edge) 2.5rem; }
.about-who__in { max-width: min(42rem, 46vw); }   /* the dark wall beside the sign, never over it */
.about-who__title { margin: var(--s-4) 0 clamp(1.4rem, 0.8rem + 1.6vw, 2.2rem); font-family: var(--f-display); font-weight: 300; font-size: var(--t-h2); line-height: 1.06; letter-spacing: -0.02em; text-wrap: balance; }
/* who we are, as one short letter: a first paragraph in the display face, a second in the body face, signed */
.about-who__lead { margin: 0; padding-top: clamp(1.2rem, 0.8rem + 1vw, 1.8rem); border-top: 1px solid rgba(243, 237, 225, 0.14);
  font-family: var(--f-display); font-weight: 300; font-size: clamp(1.2rem, 0.95rem + 0.6vw, 1.55rem); line-height: 1.45; letter-spacing: -0.008em; color: var(--c-ivory); text-wrap: pretty; }
.about-who__text { margin: 1.1rem 0 0; max-width: 36rem; font-size: 1rem; line-height: 1.75; color: rgba(243, 237, 225, 0.74); text-wrap: pretty; }
.about-who__sign { margin: 1.2rem 0 0; font-family: var(--f-display); font-style: italic; font-weight: 300; font-size: clamp(1.5rem, 1.2rem + 0.8vw, 2rem); line-height: 1; color: #d9a27a; }
.about-who__links { display: flex; flex-wrap: wrap; gap: var(--s-3); margin-top: clamp(1.4rem, 0.8rem + 1.6vw, 2.2rem); }
.about .btn--solid { background: var(--c-ivory); color: var(--c-night); }
.about .btn--solid:hover { background: #fff; }
.about .btn--line { border-color: rgba(243, 237, 225, 0.3); color: var(--c-ivory); }
.about .btn--line:hover { border-color: var(--c-ivory); }
@media (orientation: portrait) {
  .about-hero { align-content: end; padding-bottom: 6rem; }
  .about-hero__more { left: 50%; }
  .about-stage::after { background: linear-gradient(0deg, rgba(11, 11, 15, 0.94) 0%, rgba(11, 11, 15, 0.62) 36%, rgba(11, 11, 15, 0) 60%); }
  .about-stage__veil { background: rgba(11, 11, 15, 0.8); }
}
@media (prefers-reduced-motion: reduce) { .about-hero__in, .about-hero__more { opacity: 1; transform: none; transition: none; } .about-hero__more i { animation: none; } }