/* Atelier L'Hoste — every page fits the screen; nothing scrolls. */
/* To switch fonts later (e.g. a licensed Felix Titling web font), replace these files and --font below. */
@font-face { font-family: "Cormorant SC"; src: url("../fonts/cormorant-sc-latin-400-normal.woff2") format("woff2"); font-weight: 400; font-display: block; }
@font-face { font-family: "Cormorant SC"; src: url("../fonts/cormorant-sc-latin-500-normal.woff2") format("woff2"); font-weight: 500; font-display: block; }
@font-face { font-family: "Cormorant SC"; src: url("../fonts/cormorant-sc-latin-600-normal.woff2") format("woff2"); font-weight: 600; font-display: swap; }
:root {
  --bg: #1e2532;
  --bar: #1b1a17;
  --panel: #171d27;
  --ink: #ebe6db;
  --muted: #b3ad9f;
  --accent: #7088a1;
  --barh: clamp(40px, 8.8vh, 110px);
  --font: "Cormorant SC", "Felix Titling", "Trajan Pro", Georgia, serif;
  --r: clamp(10px, 1.6vmin, 18px);
  color-scheme: dark;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { height: 100%; margin: 0; overflow: hidden; }
body {
  display: grid;
  grid-template-rows: var(--barh) minmax(0, 1fr) var(--barh);
  height: 100vh; height: 100dvh;
  background: var(--bg); color: var(--ink);
  font-family: var(--font); font-weight: 500;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
}
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; text-transform: inherit; letter-spacing: inherit; }
img { display: block; max-width: 100%; }
:focus-visible { outline: 1px solid var(--accent); outline-offset: 3px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
h1, h2, p { margin: 0; font-weight: 500; }

/* ---------- bars ---------- */
.bar {
  background: var(--bar);
  /* three bounded slots: the side slots are equal so the centre stays centred; anything too wide for
     its slot is scaled down to fit (see fitBar in site.js) instead of running into its neighbour */
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr) minmax(0, 1fr); column-gap: max(10px, 2vw); align-items: center;
  padding: 0 max(12px, 2.6vw); min-width: 0;
  font-size: calc(var(--barh) * .26);
  letter-spacing: .22em; text-transform: uppercase;
  position: relative; z-index: 5;
}
.bar-l, .bar-c, .bar-r { min-width: 0; display: flex; align-items: center; }
.bar-l { justify-content: flex-start; }
.bar-c { justify-content: center; }
.bar-r { justify-content: flex-end; }
.bar-l > *, .bar-c > *, .bar-r > * { flex: none; }
.bar-text, .bar-link { opacity: .9; transition: opacity .2s; white-space: nowrap; }
.bar-link:hover, .bar a:hover { opacity: 1; color: #fff; }
.bar.bottom { grid-template-columns: 1fr; justify-items: center; }

/* ---------- wordmarks ---------- */
.wm {
  display: inline-flex; align-items: center; white-space: nowrap;
  text-transform: uppercase; letter-spacing: .16em; line-height: 1;
}
.wm-word { position: relative; z-index: 1; }
.wm-mark { position: relative; z-index: 0; pointer-events: none; }
.wm-mark-a { height: 1.95em; width: auto; margin: 0 -.02em 0 -.2em; top: .12em; }
.wm-mark-s { height: 1.85em; width: auto; margin: 0 -1.35em 0 -1.55em; top: .06em; opacity: .95; }
.wm-sm { font-size: calc(var(--barh) * .25); }
.wm-sm .wm-mark-a { height: 2.3em; }
.boxmark {
  display: inline-flex; flex-direction: column; align-items: center;
  text-transform: uppercase; line-height: 1;
}
.boxmark-name { border: 1px solid currentColor; padding: .28em .42em .22em; letter-spacing: .14em; }
.boxmark-sub { font-size: .27em; letter-spacing: 1.05em; margin-top: .9em; margin-right: -1.05em; opacity: .85; }
.bar-box .boxmark { font-size: calc(var(--barh) * .24); }
.bar-box .boxmark-sub { font-size: .42em; letter-spacing: .6em; margin-top: .45em; margin-right: -.6em; }

/* ---------- main area ---------- */
main {
  container-type: size; container-name: main;
  min-height: 0; overflow: hidden; position: relative;
  display: grid; place-items: center;
  padding: clamp(8px, 3.2vh, 36px) max(16px, 4vw);
}

/* home */
.home-enter { position: absolute; inset: 0; display: grid; place-items: center; }
.home-logo { display: flex; flex-direction: column; align-items: center; font-size: min(6.6cqw, 13cqh); }
.home-logo .wm { border: 1px solid rgba(235,230,219,.75); padding: .26em .5em .18em; font-size: 1em; }
.home-logo .wm-mark-a { height: 2.05em; }
.home-sub { font-size: .3em; letter-spacing: 1.62em; margin-right: -1.62em; margin-top: 1.2em; opacity: .85; text-transform: uppercase; }
.home-enter:hover .wm { border-color: var(--ink); }

/* stan & molly */
.sm { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: min(7cqh, 5cqw); width: 100%; height: 100%; }
.sm-tagline {
  text-align: center; text-transform: uppercase; letter-spacing: .2em; line-height: 1.55;
  font-size: min(2.05cqw, 3.5cqh); max-width: 44em; max-height: 34cqh; overflow: hidden; opacity: .92;
}
.sm-row { display: grid; grid-template-columns: 1fr auto 1fr; align-items: start; width: min(100%, 150cqh); gap: 2cqw; }
.sm-person { display: flex; flex-direction: column; align-items: center; gap: .9em; text-transform: uppercase; transition: color .2s; }
.sm-person:hover { color: #fff; }
.sm-person:hover .sm-name { text-shadow: 0 0 .5em rgba(112,136,161,.55); }
.sm-name { font-size: min(8.6cqw, 14cqh); letter-spacing: .16em; line-height: 1; margin-right: -.16em; }
.sm-role { font-size: min(1.45cqw, 2.6cqh); letter-spacing: .28em; text-align: center; line-height: 1.5; max-width: 20em; opacity: .85; }
.sm-mark { height: min(24cqw, 38cqh); width: auto; align-self: center; }

/* molly */
.molly { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: min(6cqh, 4cqw); width: 100%; height: 100%; }
.molly-head { font-size: min(5.6cqw, 10cqh); }
.molly-bio {
  width: min(100%, 58em, 150cqh); max-height: 52cqh; overflow: hidden;
  font-size: min(1.75cqw, 3.1cqh); line-height: 1.6; letter-spacing: .16em;
  text-transform: uppercase; text-align: justify; text-align-last: center; hyphens: none;
}

/* molly: three category titles with the mark between them; each opens its explanation below
   (one at a time, so the page still never scrolls) */
.molly:has(.molly-acc) { gap: calc(min(3.6cqh, 3cqw) * var(--k, 1)); justify-content: flex-start; padding-top: var(--mt, 0px); }
.molly:has(.molly-acc) .molly-bio { max-height: none; font-size: calc(min(1.75cqw, 3.1cqh) * var(--k, 1)); }
.molly:has(.molly-acc) .molly-head .lk-molly { height: calc(min(18.5cqh, calc(80cqw / 5.57)) * var(--k, 1)); }
.molly-acc { width: min(100%, 58em, 150cqh); font-size: calc(min(1.75cqw, 3.1cqh) * var(--k, 1)); letter-spacing: .16em; text-transform: uppercase; }
.acc-row { display: flex; align-items: center; justify-content: center; gap: 2.2em; }
.acc-mark { height: 2.1em; width: auto; flex: none; opacity: .95; }
.acc-tab { font-size: 1.3em; letter-spacing: .3em; margin-right: -.3em; padding: .3em 0; opacity: .85; transition: opacity .25s, color .25s, text-shadow .25s;
  text-decoration: underline; text-decoration-color: transparent; text-underline-offset: .55em; text-decoration-thickness: 1px; }
.acc-tab:hover { opacity: 1; color: #fff; }
.acc-tab[aria-expanded="true"] { opacity: 1; color: #fff; text-decoration-color: var(--accent); }
.acc-panes { display: grid; }
.acc-body { grid-area: 1 / 1; max-height: 0; overflow: hidden; opacity: 0; transform: translateY(-.4em);
  line-height: 1.6; text-align: center; text-wrap: balance; font-size: .95em;
  transition: max-height .6s cubic-bezier(.45,0,.2,1), opacity .45s ease, transform .6s cubic-bezier(.45,0,.2,1); }
.acc-body.open { max-height: none; opacity: .92; transform: none; transition-delay: 0s, .12s, 0s; }
.acc-body p { padding-top: 1.1em; max-width: 46em; margin: 0 auto; }

.acc-cta { display: flex; flex-direction: column; align-items: center; margin-top: 1.6em; }
.acc-box { font-size: 1.1em; letter-spacing: .3em; margin-right: 0; padding: .55em 1.1em .55em 1.4em; border: 1.5px solid currentColor;
  opacity: .9; color: var(--fg); text-decoration: none; transition: opacity .25s, color .25s, background-color .3s, border-color .3s; }
.acc-box:hover { opacity: 1; color: #fff; background: rgba(112,136,161,.12); }
.acc-box[aria-expanded="true"] { opacity: 1; color: #fff; border-color: var(--accent); }
.acc-cta .acc-body { max-width: 44em; }
.acc-cta .acc-body p { padding-top: 1em; }
/* the arrow drops from the open "get started" text straight down to the contact bar */
.acc-arrow { position: absolute; left: 50%; width: 14px; margin-left: -7px; top: var(--at, 100%); height: var(--ah, 0px);
  pointer-events: none; opacity: 0; transform: scaleY(0); transform-origin: top;
  transition: transform .7s cubic-bezier(.45,0,.2,1), opacity .3s ease; }
.acc-arrow::before { content: ""; position: absolute; left: 6.25px; top: 0; bottom: 10px; width: 1.5px; background: var(--accent); }
.acc-arrow::after { content: ""; position: absolute; left: 1px; bottom: 1px; width: 12px; height: 11px;
  background: var(--accent); clip-path: polygon(0 0, 100% 0, 50% 100%); }
.acc-arrow.on { opacity: 1; transform: none; transition-delay: .35s, .3s; }

/* panels (about us, applied media) */
.about-close { margin-top: 1.4em; color: #fff; font-size: 1.12em; letter-spacing: .24em; }

.panel {
  width: min(100%, 175cqh); height: min(100%, 86cqh);
  background: var(--panel); border-radius: calc(var(--r) * 2.2);
  display: grid; grid-template-columns: minmax(0, .42fr) minmax(0, 1.3fr) minmax(0, .95fr);
  align-items: center; gap: max(14px, 3cqw); padding: max(14px, 3cqh) max(16px, 3cqw);
  position: relative;
}
.panel-nav { display: flex; flex-direction: column; align-items: flex-end; gap: 1.6em; font-size: min(1.9cqw, 3.4cqh); letter-spacing: .26em; text-transform: uppercase; }
.panel-nav a, .panel-nav button { opacity: .8; transition: opacity .2s, color .2s; }
.panel-nav a:hover, .panel-nav button:hover, .panel-nav .on { opacity: 1; color: #fff; }
.panel-nav .on { text-decoration: underline; text-underline-offset: .45em; text-decoration-color: var(--accent); }
.panel-media { height: 100%; min-height: 0; display: grid; place-items: center; }
.panel-media img, .panel-media video { max-width: 100%; max-height: 100%; width: auto; height: auto; border-radius: calc(var(--r) * 1.6); object-fit: contain; }
.panel-text {
  max-height: 100%; overflow: hidden; align-self: center;
  font-size: min(1.7cqw, 3cqh); line-height: 1.6; letter-spacing: .16em; text-transform: uppercase;
}
.panel-text h2 { font-size: 1.5em; letter-spacing: .2em; margin-bottom: .8em; color: #fff; }
.panel-text p { white-space: pre-line; }
.applied { position: absolute; inset: clamp(8px, 3.2vh, 36px) max(16px, 4vw); width: auto; height: auto; z-index: 3; margin: auto; max-width: 175cqh; }

.x {
  position: absolute; top: max(8px, 1.4cqh); right: max(10px, 1.4cqw);
  width: 2.2em; height: 2.2em; font-size: clamp(18px, 3vmin, 28px); line-height: 1; opacity: .75; font-family: system-ui, sans-serif;
}
.x:hover { opacity: 1; }

/* stanton pages */
.stan { display: flex; flex-direction: column; align-items: center; justify-content: center; width: 100%; height: 100%; gap: min(5.5cqh, 4cqw); }
.stan-head { font-size: min(6.4cqw, 10.5cqh); }
.stan-section { font-size: min(1.8cqw, 3.2cqh); letter-spacing: .5em; margin: -2.4cqh -.5em 0 0; text-transform: uppercase; opacity: .85; }
a.stan-head:hover { color: #fff; }
.tiles { --t: min(25cqw, 50cqh); list-style: none; margin: 0; padding: 0; display: flex; gap: min(3.4cqw, 5cqh); justify-content: center; }
.stan-section + .tiles { --t: min(25cqw, 45cqh); }
.tile {
  display: block; position: relative; width: var(--t); height: var(--t);
  border-radius: var(--r); overflow: hidden; background: #111;
  box-shadow: 0 .6em 1.6em rgba(0,0,0,.35);
  transition: transform .35s ease, box-shadow .35s ease;
}
.tile-img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s ease; }
.tile:hover, .tile:focus-visible { transform: translateY(-3px); box-shadow: 0 1em 2.2em rgba(0,0,0,.45); }
.tile:hover .tile-img { transform: scale(1.04); }
.tile-label {
  position: absolute; left: 0; right: 0; bottom: 0; padding: 1.8em .8em .75em;
  background: linear-gradient(transparent, rgba(12,14,19,.88));
  text-align: center; text-transform: uppercase; letter-spacing: .2em;
  font-size: max(10px, calc(var(--t) * .055)); line-height: 1.35;
  opacity: 0; transform: translateY(35%); transition: opacity .3s, transform .3s;
}
.tile:hover .tile-label, .tile:focus-visible .tile-label { opacity: 1; transform: none; }
@media (hover: none) { .tile-label { opacity: 1; transform: none; } }

/* contacts */
.contacts { display: flex; gap: calc(var(--barh) * .3); }
.contacts a {
  width: calc(var(--barh) * .52); height: calc(var(--barh) * .52); border-radius: 50%;
  display: grid; place-items: center; background: #3a3a37; transition: background .2s;
}
.contacts a:hover { background: var(--accent); }
.contacts svg { width: 52%; height: 52%; fill: var(--ink); }
/* About Us footer: Stan's contacts, both portraits around the "9", Molly's contacts */
.duo { display: flex; align-items: center; gap: calc(var(--barh) * .3); }
.duo-photo { width: calc(var(--barh) * .56); height: calc(var(--barh) * .56); border-radius: 50%; overflow: hidden; display: block; flex: none; }
.duo-photo img { width: 100%; height: 100%; object-fit: cover; transition: transform .3s; }
.duo-photo:hover img { transform: scale(1.08); }
.duo-mark { display: block; margin: 0 calc(var(--barh) * .12); }
.duo-mark img { height: calc(var(--barh) * .62); width: auto; }
@media (max-width: 700px) {
  /* 11 round items across a phone: size them from the screen width */
  .duo, .duo .contacts { gap: 1.2vw; }
  .duo .contacts a, .duo-photo { width: min(calc(var(--barh) * .5), 7vw); height: min(calc(var(--barh) * .5), 7vw); }
  .duo-mark { margin: 0 .6vw; }
  .duo-mark img { height: min(calc(var(--barh) * .6), 8.5vw); }
}

.notfound { text-align: center; letter-spacing: .2em; text-transform: uppercase; display: grid; gap: 1.5em; }
.notfound a { text-decoration: underline; text-underline-offset: .4em; }

/* ---------- phones & tall narrow screens ---------- */
@container main (max-aspect-ratio: 4/5) {
  .stan { gap: 3cqh; }
  .stan-head { font-size: min(8.4cqw, 7cqh); }
  .stan-section { font-size: min(3.4cqw, 2.6cqh); margin-top: -1.5cqh; }
  .sm-tagline { font-size: min(3.9cqw, 2.8cqh); max-height: 36cqh; }
  .sm-row { grid-template-columns: 1fr; gap: 3.5cqh; justify-items: center; align-items: center; }
  .sm-name { font-size: min(15cqw, 8.5cqh); }
  .sm-role { font-size: min(3.2cqw, 1.9cqh); }
  .sm-mark { height: min(30cqw, 13cqh); order: 0; }
  .molly-head { font-size: min(8.8cqw, 7cqh); }
  .molly-bio { font-size: min(3.6cqw, 2.5cqh); max-height: 70cqh; letter-spacing: .1em; }
  .molly:has(.molly-acc) .molly-bio { font-size: calc(min(3.6cqw, 2.5cqh) * var(--k, 1)); }
  .molly:has(.molly-acc) .molly-head .lk-molly { height: calc(min(12cqh, calc(92cqw / 5.57)) * var(--k, 1)); }
  .molly-acc { font-size: calc(min(3.2cqw, 2.3cqh) * var(--k, 1)); letter-spacing: .1em; }
  .acc-row { gap: 1em; }
  .acc-tab { font-size: 1.1em; letter-spacing: .16em; margin-right: -.16em; }
  .home-logo { font-size: min(7.4cqw, 9cqh); }
  .home-sub { letter-spacing: .95em; margin-right: -.95em; }
  .panel { grid-template-columns: 1fr; grid-template-rows: auto minmax(0, 1fr) auto; height: 100%; align-items: stretch; gap: 2cqh; }
  .panel-nav { flex-direction: row; justify-content: center; align-items: center; gap: 1.4em; font-size: min(3.6cqw, 2.4cqh); }
  .panel-text { font-size: min(3.3cqw, 2.3cqh); max-height: 34cqh; text-align: center; }
  .applied .panel-nav { padding-right: 2.2em; }
}
@media (max-width: 560px) {
  .bar { font-size: calc(var(--barh) * .22); letter-spacing: .14em; padding: 0 12px; }
  .wm-sm { font-size: calc(var(--barh) * .21); letter-spacing: .1em; }
  .bar-box .boxmark { font-size: calc(var(--barh) * .2); }
  .bar-box .boxmark-sub { display: none; }
  .page-molly .bar-c, .page-stan .bar-c { display: none; }
  .page-molly .bar, .page-stan .bar.top { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}

/* ---------- lightbox ---------- */
.lb {
  position: fixed; inset: 0; z-index: 50; background: rgba(12,14,19,.95);
  display: grid; grid-template-rows: auto minmax(0, 1fr) auto; place-items: center;
  padding: max(10px, 2vh) max(12px, 2vw); touch-action: pan-y;
  opacity: 0; transition: opacity .25s;
}
.lb.open { opacity: 1; }

.lb-title { font-size: clamp(12px, 2.4vmin, 20px); letter-spacing: .3em; text-transform: uppercase; opacity: .9; padding: .4em 3em; text-align: center; }
.lb-stage { width: 100%; height: 100%; min-height: 0; display: grid; place-items: center; position: relative; }
.lb-grid {
  display: grid; gap: min(1.6vw, 2vh);
  grid-template-columns: repeat(var(--cols), 1fr); grid-template-rows: repeat(var(--rows), 1fr);
  width: min(88vw, calc(76vh * var(--cols) / var(--rows))); aspect-ratio: var(--cols) / var(--rows);
}
.lb-grid button { position: relative; border-radius: calc(var(--r) * .8); overflow: hidden; background: #111; min-height: 0; }
.lb-grid img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s, opacity .3s; }
.lb-grid button:hover img { transform: scale(1.05); }
.lb-grid .play::after { content: ""; position: absolute; inset: 0; margin: auto; width: 0; height: 0; border-style: solid; border-width: 1.1em 0 1.1em 1.8em; border-color: transparent transparent transparent rgba(255,255,255,.85); }
.lb-view { position: absolute; inset: 0; display: grid; grid-template-rows: minmax(0, 1fr) auto; place-items: center; gap: 1.2vh; }
.lb-view img, .lb-view video { max-width: min(100%, 86vw); max-height: 100%; width: auto; height: auto; object-fit: contain; border-radius: calc(var(--r) * .5); user-select: none; -webkit-user-drag: none; }
.lb-cap { display: flex; align-items: center; gap: 1.4em; font-size: clamp(11px, 2vmin, 16px); letter-spacing: .22em; text-transform: uppercase; min-height: 2.6em; }
.lb-btn { border: 1px solid var(--ink); padding: .65em 1.3em .55em; letter-spacing: .25em; font-size: .9em; transition: background .2s, color .2s; }
a.lb-btn:hover { background: var(--ink); color: var(--bar); }
span.lb-btn { opacity: .65; border-style: dashed; }
.lb-nav { position: absolute; top: 50%; transform: translateY(-50%); width: clamp(40px, 6vmin, 64px); height: clamp(60px, 12vmin, 110px); z-index: 2; opacity: .7; transition: opacity .2s; }
.lb-nav:hover { opacity: 1; }
.lb-nav::before { content: ""; display: block; width: 36%; aspect-ratio: 1; margin: auto; border: solid var(--ink); border-width: 0 0 2px 2px; transform: rotate(45deg); }
.lb-prev { left: max(4px, 1vw); }
.lb-next { right: max(4px, 1vw); }
.lb-next::before { transform: rotate(-135deg); }
.lb-close { top: max(6px, 1.2vh); right: max(8px, 1.4vw); position: absolute; z-index: 3; }
.lb-back { position: absolute; top: max(6px, 1.2vh); left: max(8px, 1.4vw); z-index: 3; font-size: clamp(11px, 1.8vmin, 14px); letter-spacing: .25em; text-transform: uppercase; opacity: .75; padding: .8em; }
.lb-back:hover { opacity: 1; }
.lb-count { font-size: clamp(10px, 1.6vmin, 13px); letter-spacing: .3em; opacity: .6; padding-top: .4em; }
@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }

/* ---------- SVG title lockups (geometry measured from the mockups; see lockups.py) ---------- */
/* page-to-page transition: the old page's content drifts up toward the top bar, shrinks and
   fades while the new page fades in. The bars and the "9" monogram hold still. */
@view-transition { navigation: auto; }
/* bar backgrounds stay part of the (motionless) page; only what sits in them cross-fades */
.bar-l { view-transition-name: bar-l; }
.bar-c { view-transition-name: bar-c; }
.bar-r { view-transition-name: bar-r; }
.bar.bottom > * { view-transition-name: bar-b; }
.stage-mark { view-transition-name: amark; }
/* the page background never moves: the old page's plain background is swapped for the new
   one instantly (they are the same colour); every visible element has its own group below */
::view-transition-old(root) { animation: none; opacity: 0; }
::view-transition-new(root) { animation: none; }
::view-transition-old(amark):only-child { animation: lk-fade-out .6s ease both; }
::view-transition-new(amark):only-child { animation: lk-fade-in .7s ease-out .35s both; }
::view-transition-group(amark) { animation-duration: .01s; }
::view-transition-group(bar-l), ::view-transition-group(bar-c), ::view-transition-group(bar-r), ::view-transition-group(bar-b) { animation: none; }
::view-transition-old(bar-l), ::view-transition-old(bar-c), ::view-transition-old(bar-r), ::view-transition-old(bar-b) { animation: lk-fade-out .5s ease both; }
::view-transition-new(bar-l), ::view-transition-new(bar-c), ::view-transition-new(bar-r), ::view-transition-new(bar-b) { animation: lk-fade-in .6s ease .35s both; }
/* bar contents keep their own size while swapping (no squeezing when the old and new differ) */
::view-transition-old(bar-l), ::view-transition-old(bar-c), ::view-transition-old(bar-r), ::view-transition-old(bar-b),
::view-transition-new(bar-l), ::view-transition-new(bar-c), ::view-transition-new(bar-r), ::view-transition-new(bar-b) {
  width: auto; height: auto; left: 50%; top: 50%; translate: -50% -50%; object-fit: none; mix-blend-mode: normal;
}
.bar { background: var(--bar); }
@keyframes lk-float-out {
  from { opacity: 1; transform: translateY(0) scale(1); filter: blur(0); }
  to   { opacity: 0; transform: translateY(-9vh) scale(.86); filter: blur(1.5px); }
}
@keyframes lk-fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes lk-fade-out { from { opacity: 1; } to { opacity: 0; } }
/* logos, photos and tile images fade in place; only text drifts up */
.vt-still { view-transition-class: still; }
.vt-float { view-transition-class: float; }
::view-transition-group(*.still), ::view-transition-group(*.float) { animation-duration: .01s; }
/* old content is almost gone before new content appears, so words never overlap */
::view-transition-old(*.still) { animation: lk-fade-out .5s ease both; }
::view-transition-new(*.still) { animation: lk-fade-in .7s ease-out .4s both; }
::view-transition-old(*.float) { animation: lk-float-out .75s cubic-bezier(.4, 0, .2, 1) both; transform-origin: 50% 0; }
::view-transition-new(*.float) { animation: lk-fade-in .7s ease-out .4s both; }
/* things shared by every Stanton page (logo, the three tile slots) cross-fade directly, so the
   logo looks perfectly still and each tile image dissolves into the next one */
::view-transition-old(stan-t1), ::view-transition-old(stan-t2), ::view-transition-old(stan-t3) { animation: lk-fade-out .7s ease both; }
::view-transition-new(stan-t1), ::view-transition-new(stan-t2), ::view-transition-new(stan-t3) { animation: lk-fade-in .7s ease both; }
/* arriving on the Stanton pages from elsewhere: tiles wait until the old page has faded */
::view-transition-new(stan-t1):only-child, ::view-transition-new(stan-t2):only-child, ::view-transition-new(stan-t3):only-child { animation: lk-fade-in .7s ease-out .45s both; }
::view-transition-old(stan-t1):only-child, ::view-transition-old(stan-t2):only-child, ::view-transition-old(stan-t3):only-child { animation: lk-fade-out .5s ease both; }
/* ATELIER L'HOSTE: the big home title glides up and shrinks into the top-bar logo (and back) */
.bar-c .bar-logo { view-transition-name: atelier-word; }
.piece { position: absolute; pointer-events: none; aspect-ratio: auto !important; overflow: visible; }
.lk.piece-port { display: none; }
@media (max-aspect-ratio: 7/10) { .lk.piece-land { display: none; } .lk.piece-port { display: block; } }
.stage-link:hover .piece .lk-t { fill: #fff; }
/* a tile's label rises into the section-title slot of the page it opens (and back) */
.tile-label .tl { display: inline-block; }
::view-transition-group(sec-fineart), ::view-transition-group(sec-whtu), ::view-transition-group(sec-appliedmedia) {
  animation-duration: .85s; animation-timing-function: cubic-bezier(.5, 0, .2, 1);
}
::view-transition-old(sec-fineart), ::view-transition-new(sec-fineart),
::view-transition-old(sec-whtu), ::view-transition-new(sec-whtu),
::view-transition-old(sec-appliedmedia), ::view-transition-new(sec-appliedmedia) { animation-duration: .85s; height: 100%; }

/* names and logos that travel between pages: ATELIER L'HOSTE <-> top bar, STAN/MOLLY <->
   their page titles <-> their small top-left logos. Same name on both pages = it flies. */
::view-transition-group(atelier-word), ::view-transition-group(stan-logo), ::view-transition-group(molly-logo) {
  animation-duration: .95s; animation-timing-function: cubic-bezier(.5, 0, .2, 1);
}
::view-transition-old(atelier-word), ::view-transition-new(atelier-word),
::view-transition-old(stan-logo), ::view-transition-new(stan-logo),
::view-transition-old(molly-logo), ::view-transition-new(molly-logo) {
  animation-duration: .95s; animation-timing-function: cubic-bezier(.5, 0, .2, 1); height: 100%;
}
@media (prefers-reduced-motion: reduce) {
  ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; }
}
.lk { display: block; overflow: visible; }
.lk-t { fill: var(--ink); font-family: var(--font); font-weight: 500; }
.lk-m { fill: var(--accent); }
.lk-b { stroke: var(--ink); }
.lk-hit { fill: transparent; }
.lk-a { cursor: pointer; }
.lk-a .lk-t { transition: fill .2s; }
.lk-a:hover .lk-t, .lk-a:focus-visible .lk-t { fill: #fff; }
.lk-a:focus { outline: none; }

/* home + Stan & Molly share one full-bleed stage so the monogram sits in the same spot */
.page-stage main { padding: 0; display: block; }
.stage { position: absolute; inset: 0; width: 100%; height: 100%; aspect-ratio: auto !important; pointer-events: none; overflow: hidden; }
.stage a, .stage .lk-hit { pointer-events: auto; }
.stage-port { display: none; }
@media (max-aspect-ratio: 7/10) {
  .stage-land { display: none; }
  .stage-port { display: block; }
}
.stage-link { position: absolute; inset: 0; }
.stage-link:hover .lk-t { fill: #fff; }

/* bar logos, sized like the mockup bars */
.bar-logo { display: block; }
.bar-logo .lk-atelier { height: calc(var(--barh) * .52); width: auto; }
.bar-stanton .lk-stanton { height: calc(var(--barh) * .62); width: auto; }
.bar-molly .lk-molly { height: calc(var(--barh) * .51); width: auto; }
.bar-logo:hover .lk-t { fill: #fff; }

/* page titles */
.stan-head .lk-stanton { height: min(21.7cqh, calc(78cqw / 5.65)); width: auto; }
.page-stan .stan-section + .tiles, .stan-head + .stan-section { }
.molly-head .lk-molly { height: min(18.5cqh, calc(80cqw / 5.57)); width: auto; }
a.stan-head:hover .lk-t { fill: #fff; }

/* panel text is sized in script to match the height of the image beside it */
.panel-text[data-fill] { max-height: none; overflow: hidden; }
@container main (max-aspect-ratio: 4/5) {
  .stan-head .lk-stanton { height: min(12cqh, calc(92cqw / 5.65)); }
  .molly-head .lk-molly { height: min(12cqh, calc(92cqw / 5.57)); }
}
@media (max-width: 560px) {
  .bar-stanton .lk-stanton { height: calc(var(--barh) * .5); }
  .bar-molly .lk-molly { height: calc(var(--barh) * .5); }
}

/* book shelf: covers side by side, each with its own buy button */
.lb-shelf { display: flex; gap: min(4vw, 5vh); justify-content: center; align-items: center; width: 100%; height: 100%; padding: 2vh 4vw; }
.lb-book { display: flex; flex-direction: column; align-items: center; gap: 1.6vh; min-width: 0; height: 100%; justify-content: center; flex: 0 1 calc(88vw / var(--n)); }
.lb-book > button { height: 62vh; width: 100%; display: flex; align-items: center; justify-content: center; background: none; border-radius: 0; overflow: visible; }
.lb-book img { max-height: 100%; max-width: 100%; width: auto; height: auto; object-fit: contain; border-radius: calc(var(--r) * .5); box-shadow: 0 1em 2.4em rgba(0,0,0,.5); transition: transform .35s; }
.lb-book > button:hover img { transform: translateY(-4px); }
@media (max-aspect-ratio: 4/5) {
  .lb-shelf { flex-direction: column; align-items: center; }
  .lb-book { flex: 1 1 0; height: auto; min-height: 0; }
  .lb-book > button { height: calc((68vh / var(--n)) - 3em); }
}

/* phones: the three square tiles stack top to bottom */
@media (max-aspect-ratio: 4/5) {
  .tiles, .page-stan .stan-section + .tiles {
    flex-direction: column; align-items: center; gap: 1.8vh;
    --t: min(64vw, calc((100vh - 2 * var(--barh)) * .235));
    --t: min(64vw, calc((100dvh - 2 * var(--barh)) * .235));
  }
  .page-stan .stan-section + .tiles {
    --t: min(62vw, calc((100vh - 2 * var(--barh)) * .22));
    --t: min(62vw, calc((100dvh - 2 * var(--barh)) * .22));
  }
  .tile { width: var(--t); height: var(--t); }
  .tile-label { font-size: max(10px, calc(var(--t) * .065)); padding-bottom: .6em; }
  .stan { gap: 2.2vh; }
  .stan-head .lk-stanton { height: auto; width: min(88vw, calc((100dvh - 2 * var(--barh)) * .5)); }
}

/* while an image zooms back into its tile, let the page show through */
.lb.closing { background: transparent; transition: background .4s; }
.lb.closing .lb-title, .lb.closing .lb-count, .lb.closing .lb-nav, .lb.closing .lb-close, .lb.closing .lb-back, .lb.closing .lb-cap { opacity: 0; transition: opacity .2s; }

/* phones: the blurb sits under the image and shrinks to fit its share of the panel */
@container main (max-aspect-ratio: 4/5) {
  .applied .panel-text[data-fill] { max-height: 36cqh; }
  .applied .panel-text p { line-height: 1.5; }
}