/* ==========================================================================
   ABHJ Engineering Consultancy — site styles
   Layout, type and motion follow the MiniMaze Light reference measured at
   desktop (≥1200), tablet (810–1199) and phone (<810). Black and white.
   ========================================================================== */

@font-face {
  font-family: "ABHJ Display";
  src: url("../fonts/inter-latin-opsz-normal.woff2") format("woff2-variations"),
       url("../fonts/inter-latin-opsz-normal.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {
  --bg: #fcfcfc;
  --ink: #080808;
  --panel: #f0f0f0;          /* cards, menu, chips' ground */
  --hall: #ededed;           /* home section ground */
  --band: #dfdfdf;           /* home intro band */
  --line: rgba(8, 8, 8, .12);
  --line-2: rgba(8, 8, 8, .3);
  --tint: rgba(8, 8, 8, .06);
  --pad: 44px;
  --hdr-top: 16px;
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --ease-io: cubic-bezier(.65, 0, .35, 1);
  color-scheme: light;
}
@media (max-width: 1199px) { :root { --pad: 32px; } }
@media (max-width: 809px)  { :root { --pad: 18px; --hdr-top: 10px; } }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; overflow-x: clip; }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-stopped { overflow: hidden; }
body {
  margin: 0; background: var(--bg); color: var(--ink);
  font-family: "ABHJ Display", "Inter Display", Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  font-variation-settings: "opsz" 32;
  font-weight: 600; font-size: 14px; line-height: 1.3; letter-spacing: -.01em;
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
  overflow-x: clip;
}
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; letter-spacing: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
h1, h2, h3, p, ol, ul, figure, blockquote, fieldset { margin: 0; }
ol, ul { list-style: none; padding: 0; }
:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
::selection { background: var(--ink); color: var(--bg); }
.sr-only { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip { position: fixed; z-index: 200; top: 8px; left: 8px; padding: 8px 12px; background: var(--ink); color: var(--bg); transform: translateY(-160%); }
.skip:focus { transform: none; }
.wrap { padding-inline: var(--pad); }

/* ---------- type scale (measured) ---------- */
.t12 { font-size: 12px; line-height: 15.6px; letter-spacing: -.01em; }
.t14 { font-size: 14px; line-height: 18.2px; letter-spacing: -.01em; }
.t20 { font-size: 20px; line-height: 24px; letter-spacing: -.02em; }
.t24 { font-size: 24px; line-height: 31.2px; letter-spacing: -.01em; }
.t70 { font-size: 70px; line-height: 64.4px; letter-spacing: -.045em; }
@media (max-width: 809px) {
  .t12 { font-size: 14px; line-height: 18.2px; }
  .t20 { font-size: 18px; line-height: 23.4px; }
  .t70 { font-size: 50px; line-height: 46px; }
}
.muted { opacity: .5; }

/* ---------- shared bits ---------- */
.dotlink { position: relative; display: inline-flex; align-items: center; gap: 12px; padding-bottom: 6px; }
.dotlink::before { content: ""; width: 9px; height: 9px; border-radius: 50%; background: var(--ink); flex: none; }
.dotlink .ul { position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--line); }
.dotlink .ul::after { content: ""; position: absolute; inset: 0; background: var(--ink); transform-origin: left; transition: transform .45s var(--ease-out); }
.dotlink:hover .ul::after { transform: scaleX(0); transform-origin: right; }
.dotlink--lg { font-size: 24px; line-height: 31.2px; }
.dotlink--lg .ul { background: var(--line-2); }

.chip { display: inline-flex; align-items: center; height: 28px; padding: 0 11px; border-radius: 999px; background: var(--tint); white-space: nowrap; }

/* roll text: two stacked copies, the second slides in on hover */
.roll { position: relative; display: inline-block; overflow: hidden; vertical-align: top; }
.roll > span { display: block; transition: transform .5s var(--ease-out); }
.roll > span + span { position: absolute; left: 0; top: 100%; }
a:hover > .roll > span, button:hover > .roll > span, .roll-host:hover .roll > span { transform: translateY(-100%); }

.xbtn { position: absolute; width: 38px; height: 38px; border-radius: 6px; background: var(--panel); display: grid; place-items: center; z-index: 5; }
.xbtn i { position: absolute; width: 18px; height: 1.6px; border-radius: 1px; background: var(--ink); transition: transform .45s var(--ease-out); }
.xbtn i:first-child { transform: rotate(45deg); }
.xbtn i:last-child { transform: rotate(-45deg); }
.xbtn:hover i:first-child { transform: rotate(135deg); }
.xbtn:hover i:last-child { transform: rotate(45deg); }

/* ==========================================================================
   HEADER + MENU
   ========================================================================== */
.hdr {
  position: fixed; z-index: 60; top: var(--hdr-top); left: 50%; transform: translateX(-50%);
  width: 720px; max-width: calc(100% - 2 * var(--hdr-top)); height: 54px;
  display: flex; align-items: center; justify-content: space-between; padding: 0 8px 0 20px;
  background: var(--bg); border-radius: 4px; transition: background-color .14s linear;
}
.hdr__logo img { height: 33px; width: auto; }
.hdr__burger { position: relative; width: 38px; height: 38px; border-radius: 6px; transition: background-color .15s linear; }
.hdr__burger i { position: absolute; left: 11px; width: 16px; height: 2px; border-radius: 1px; background: var(--ink); transition: transform .32s var(--ease-out), top .32s var(--ease-out); }
.hdr__burger i:first-child { top: 15px; }
.hdr__burger i:last-child { top: 22px; }
.menu-open .hdr { background: var(--tint); }
.menu-open .hdr__burger { background: var(--tint); }
.menu-open .hdr__burger i:first-child { top: 18px; transform: rotate(45deg); }
.menu-open .hdr__burger i:last-child { top: 18px; transform: rotate(-45deg); }
@media (max-width: 809px) {
  .hdr { width: auto; left: 10px; right: 10px; max-width: none; transform: none; height: 50px; padding-left: 14px; }
  .hdr__logo img { height: 30px; }
}

.menu { position: fixed; inset: 0; z-index: 55; visibility: hidden; pointer-events: none; }
.menu-open .menu { visibility: visible; pointer-events: auto; }
.menu__bg { position: absolute; inset: 0; background: var(--panel); transform-origin: 50% 0; }
.menu__addr, .menu__call, .menu__social { position: absolute; z-index: 1; opacity: 0; }
.menu__addr { left: 40px; top: 112px; }
.menu__call { right: 40px; top: 112px; text-align: right; display: flex; flex-direction: column; gap: 7px; }
.menu__social { left: 40px; bottom: 40px; display: flex; gap: 22px; }
.menu__social a:hover, .menu__call a:hover { opacity: .55; }
.menu__nav { position: absolute; z-index: 1; left: 50%; top: 50%; transform: translate(-50%, -50%); display: flex; flex-direction: column; align-items: center; }
.menu__nav a { display: block; height: 64.4px; overflow: hidden; }
.menu__nav .roll > span { opacity: inherit; }
.menu__nav a > .roll { opacity: 0; }
@media (max-width: 809px) {
  .menu__addr { left: 18px; top: 90px; }
  .menu__call { right: auto; left: 18px; top: auto; bottom: 90px; text-align: left; }
  .menu__social { left: 18px; bottom: 36px; }
  .menu__nav a { height: 46px; }
}

/* ==========================================================================
   FOOTER
   ========================================================================== */
.ftr { position: relative; height: 908px; padding-top: 80px; overflow: hidden; background: var(--bg); }
.ftr__row { position: relative; z-index: 2; display: flex; justify-content: space-between; align-items: flex-start; gap: 24px; }
.ftr__title { width: 620px; max-width: 100%; }
.ftr__side { display: flex; flex-direction: column; align-items: flex-end; gap: 26px; padding-top: 40px; }
.ftr__btns { display: flex; gap: 10px; }
.ftr__nav { display: flex; gap: 22px; }
.ftr__nav a:hover { opacity: .55; }
.ftr__bottom { position: absolute; z-index: 2; left: var(--pad); right: var(--pad); bottom: 31px; display: flex; justify-content: space-between; align-items: center; }
.ftr__social, .ftr__legal { display: flex; gap: 22px; }
.ftr__social a:hover { opacity: .55; }

/* footer button (measured: 38px tall, 4px radius, 1px ring, beam turns in 3.6s) */
.fbtn { position: relative; display: inline-flex; height: 38px; border-radius: 4px; background: var(--tint); overflow: hidden; isolation: isolate; }
.fbtn__beam, .fbtn__halo, .fbtn__wedge { position: absolute; left: 50%; top: 50%; width: 250%; aspect-ratio: 1; translate: -50% -50%; animation: beam 3.6s linear infinite; will-change: transform; }
.fbtn__beam { z-index: 0; background: conic-gradient(rgba(8,8,8,0) 0deg, rgba(8,8,8,0) 300deg, rgba(8,8,8,.12) 330deg, #080808 352deg, rgba(8,8,8,0) 360deg); }
.fbtn__face { position: relative; z-index: 1; margin: 1px; display: flex; align-items: center; padding: 9px 9px 9px 11px; border-radius: 3px; background: var(--panel); overflow: hidden; }
.fbtn__halo { background: conic-gradient(rgba(8,8,8,0) 0deg, rgba(8,8,8,0) 310deg, rgba(8,8,8,.06) 345deg, rgba(8,8,8,0) 360deg); filter: blur(6px); }
.fbtn__label { position: relative; z-index: 1; display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; }
.fbtn__face > .fbtn__label { opacity: .78; }
.fbtn__arrow { width: 13px; height: 13px; flex: none; }
.fbtn__glint { position: absolute; inset: 0; z-index: 2; pointer-events: none; }
.fbtn__wedge { -webkit-mask: conic-gradient(transparent 0deg, transparent 80deg, #000 93deg, #000 97.8deg, transparent 100deg); mask: conic-gradient(transparent 0deg, transparent 80deg, #000 93deg, #000 97.8deg, transparent 100deg); }
/* the wedge turns with the beam, so its label turns back to stay still */
.fbtn__wedge > .fbtn__label { position: absolute; left: 50%; top: 50%; translate: -50% -50%; animation: beam-counter 3.6s linear infinite; }
.fbtn__gate { position: absolute; inset: 0; z-index: 3; display: flex; align-items: center; padding: 10px 10px 10px 12px; background: var(--ink); color: var(--bg); clip-path: inset(50% 0 50% 0); transition: clip-path 0s; }
.fbtn:hover .fbtn__gate, .fbtn:focus-visible .fbtn__gate { clip-path: inset(0 0 0 0); transition: clip-path .45s cubic-bezier(.65, 0, .35, 1) .06s; }
@keyframes beam { to { rotate: 360deg; } }
@keyframes beam-counter { from { rotate: 0deg; } to { rotate: -360deg; } }

/* lit wordmark: lamps, cones and a floor reflection (measured on the reference) */
.lit { --fs: clamp(60px, 23.83vw, 520px); position: absolute; left: var(--pad); right: var(--pad); top: 271px; height: calc(var(--fs) * 1.43); pointer-events: none; font-size: var(--fs); line-height: 1; letter-spacing: -.06em; font-weight: 600; color: var(--ink); }
.lit__row { position: absolute; left: 0; right: 0; top: calc(var(--fs) * .339); height: var(--fs); display: flex; justify-content: space-between; white-space: nowrap; }
.lit__l { position: relative; display: block; isolation: isolate; opacity: .08; transition: opacity .7s ease; }
.lit__l[data-on] { opacity: 1; transition: opacity .14s ease; }
.lit__cone { position: absolute; left: -14%; right: -14%; top: calc(var(--fs) * -.238); height: calc(var(--fs) * 1.238); clip-path: polygon(38% 0, 62% 0, 100% 100%, 0 100%); background: linear-gradient(rgba(8,8,8,.14), rgba(8,8,8,0) 88%); opacity: 0; transition: opacity .7s ease; z-index: -1; }
.lit__l[data-on] .lit__cone { opacity: 1; transition: opacity .18s ease; }
.lit__lamp { position: absolute; left: 50%; top: calc(var(--fs) * -.238); width: max(65px, 48%); max-width: 100%; height: 5px; border-radius: 4px; translate: -50% 0; background: rgba(8,8,8,.14); transition: background-color .7s ease, box-shadow .7s ease; }
.lit__l[data-on] .lit__lamp { background: var(--ink); box-shadow: 0 0 10px 2px rgba(8,8,8,.5), 0 0 40px 12px rgba(8,8,8,.12); transition: background-color .1s ease, box-shadow .18s ease; }
/* reflection: the row flipped around the baseline, faded toward the bottom */
.lit__mirror { position: absolute; left: 0; right: 0; top: calc(var(--fs) * 1.201); height: calc(var(--fs) * .42); overflow: hidden; -webkit-mask: linear-gradient(rgba(0,0,0,.9), transparent); mask: linear-gradient(rgba(0,0,0,.9), transparent); }
.lit__mirror .lit__row { top: calc(var(--fs) * -.862); transform: scaleY(-1); transform-origin: 50% calc(var(--fs) * .862); }
.lit__mirror .lit__l { opacity: 0; }
.lit__mirror .lit__l[data-on] { opacity: .28; transition: opacity .18s ease; }
.lit__floor { position: absolute; left: -30%; right: -30%; top: calc(var(--fs) * 1.201); height: calc(var(--fs) * .21); -webkit-mask: linear-gradient(rgba(0,0,0,.9), transparent); mask: linear-gradient(rgba(0,0,0,.9), transparent); }
.lit__shade { position: absolute; inset: 0; background: radial-gradient(50% 60% at 50% 30%, rgba(8,8,8,.07), rgba(8,8,8,0) 75%); }
.lit__grid { position: absolute; left: -10%; right: -10%; top: 0; height: 220%; transform-origin: 50% 0; transform: perspective(900px) rotateX(62deg); background: linear-gradient(to right, rgba(8,8,8,.09) 1px, transparent 1px) 0 0 / 64px 100%, linear-gradient(rgba(8,8,8,.09) 1px, transparent 1px) 0 0 / 100% 64px; -webkit-mask: linear-gradient(#000, transparent 85%); mask: linear-gradient(#000, transparent 85%); }
.lit__floor::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px; background: rgba(8,8,8,.1); }

@media (max-width: 1199px) {
  .ftr__row { flex-direction: column; }
  .ftr__side { align-items: flex-start; padding-top: 0; }
}
@media (max-width: 809px) {
  .ftr { height: 700px; padding-top: 64px; }
  .lit { top: 330px; }
  .ftr__bottom { flex-direction: column; align-items: flex-start; gap: 10px; bottom: 24px; }
  .ftr__legal { flex-direction: column; gap: 4px; }
}

/* ==========================================================================
   PAGE HEAD (Work / Journal / Contact)
   ========================================================================== */
.phead { display: flex; justify-content: space-between; align-items: flex-start; gap: 20px; padding-top: 120px; }
@media (max-width: 809px) { .phead { padding-top: 100px; } }

.flt { position: relative; display: inline-flex; align-items: flex-start; opacity: .42; transition: opacity .25s; }
.flt sup { font-size: 9.8px; line-height: 12px; opacity: .55; margin-left: 2px; position: relative; top: -1px; vertical-align: top; }
.flt::before { content: ""; position: absolute; left: -12px; top: 6px; width: 6px; height: 6px; border-radius: 3px; background: var(--ink); transform: scale(0); transition: transform .3s var(--ease-out); }
.flt:hover { opacity: .75; }
.flt.is-on { opacity: 1; }
.flt.is-on::before { transform: none; }

/* ==========================================================================
   HOME — intro + hall
   ========================================================================== */
[data-page="home"] { background: var(--hall); }
.home { position: relative; height: 100vh; height: 100svh; min-height: 600px; overflow: hidden; background: var(--hall); }
/* z-index + isolation give the hall its own stacking context: without it, GPU Chrome
   composites the 3D planes above the intro, header and band (seen on the live site). */
.hall { position: absolute; inset: 0; z-index: 0; isolation: isolate; overflow: hidden; background: var(--hall); touch-action: pan-y; cursor: grab; user-select: none; -webkit-user-select: none; }
.hall.is-drag { cursor: grabbing; }
.hall__cam { position: absolute; left: 50%; top: 50%; width: 0; height: 0; transform-style: preserve-3d; }
.hall__world { position: absolute; left: 0; top: 0; width: 0; height: 0; transform-style: preserve-3d; }
.hall * { transform-style: preserve-3d; }
.hp { position: absolute; left: 0; top: 0; transform-origin: 0 0; backface-visibility: visible; }

/* surfaces */
.hp--floor { background-color: #dfdfdf; background-image:
  repeating-linear-gradient(90deg, rgba(255,255,255,.32) 0 2px, rgba(0,0,0,0) 2px var(--tile)),
  repeating-linear-gradient(0deg, rgba(255,255,255,.32) 0 2px, rgba(0,0,0,0) 2px var(--tile)),
  conic-gradient(rgba(0,0,0,.016) 25%, rgba(0,0,0,0) 0 50%, rgba(0,0,0,.016) 0 75%, rgba(0,0,0,0) 0);
  background-size: auto, auto, calc(var(--tile) * 2) calc(var(--tile) * 2); }
.hp--floor, .hp--ceil { overflow: hidden; }
.hp--ceil { background-color: #ebebeb; }
.hp--light, .hp--light-x, .fshadow { position: absolute; }
.hp--light { background: linear-gradient(to right, rgba(255,255,255,0), rgba(255,255,255,.9) 26%, #fff 50%, rgba(255,255,255,.9) 74%, rgba(255,255,255,0)); }
.hp--light-x { background: linear-gradient(rgba(255,255,255,0), rgba(255,255,255,.75) 30%, #fff 50%, rgba(255,255,255,.75) 70%, rgba(255,255,255,0)); }
.hp--wall { overflow: hidden; background-color: var(--wc, #e6e6e6);
  background-image: linear-gradient(rgba(255,255,255,.4), rgba(255,255,255,0) 30%, rgba(0,0,0,0) 80%, rgba(0,0,0,.035)); }
.hp--wall::before { content: ""; position: absolute; inset: 0; opacity: .06; background-image: var(--noise); background-size: 128px 128px; }
.wall__seam { position: absolute; left: 0; top: 0; bottom: 0; width: 2px; background: linear-gradient(90deg, rgba(0,0,0,.08), rgba(255,255,255,.55)); }
.wall__base { position: absolute; left: 0; right: 0; background: linear-gradient(rgba(0,0,0,.09), rgba(255,255,255,.7) 40%, #f4f4f4); }
.wall__mold { position: absolute; left: 0; right: 0; background: linear-gradient(#fafafa, #dcdcdc); box-shadow: 0 4px 8px rgba(0,0,0,.08); }
.wall__caustic { position: absolute; top: 0; bottom: 0; left: -10%; width: 120%; opacity: .7; background:
  radial-gradient(18% 60% at 12% 40%, rgba(60,70,80,.06), rgba(0,0,0,0)),
  radial-gradient(14% 50% at 38% 68%, rgba(60,70,80,.045), rgba(0,0,0,0)),
  radial-gradient(20% 55% at 66% 35%, rgba(60,70,80,.05), rgba(0,0,0,0)),
  radial-gradient(16% 50% at 88% 62%, rgba(60,70,80,.04), rgba(0,0,0,0));
  animation: caustic 38s linear infinite alternate; }
@keyframes caustic { to { transform: translateX(-8%); } }
.wall__pool { position: absolute; border-radius: 50%; background: radial-gradient(50% 50% at 50% 46%, rgba(255,255,255,.5), rgba(255,255,255,.18) 45%, rgba(255,255,255,0) 70%); animation: pool 9s ease-in-out infinite alternate; }
@keyframes pool { from { opacity: .55; } to { opacity: 1; } }

/* frames */
.frame { position: absolute; left: 0; top: 0; display: block; outline-offset: 18px; transform-origin: 0 0; }
.frame__pic { position: absolute; inset: calc(-1 * var(--bw, 13px)); overflow: hidden; background: #1a1a1a; border: var(--bw, 13px) solid #080808; cursor: pointer; transition: transform .6s var(--ease-out); }
.frame__pic img { width: 100%; height: 100%; object-fit: cover; pointer-events: none; transform: scale(1.14); }
.frame__edge { position: absolute; top: calc(-1 * var(--bw, 13px)); bottom: calc(-1 * var(--bw, 13px)); transform-origin: 0 0; transform: rotateY(90deg); background: linear-gradient(90deg, #212121, #080808); }
.frame__wire { position: absolute; width: 1px; background: linear-gradient(rgba(8,8,8,.22), rgba(8,8,8,.5)); }
.frame__label { position: absolute; left: 0; white-space: nowrap; pointer-events: none; }
.frame__label b { display: block; font-size: 16px; line-height: 19px; font-weight: 600; letter-spacing: -.01em; }
.frame__label span { display: block; font-size: 12px; line-height: 16px; opacity: .5; }
.frame:hover .frame__pic { transform: translateZ(14px); }
.frame--niche .frame__pic { box-shadow: 0 60px 90px -30px rgba(0,0,0,.5); }
.frame--niche .frame__label b { font-size: 26px; line-height: 31px; }
.frame--niche .frame__label span { font-size: 19px; line-height: 25px; }
.fshadow { background: radial-gradient(50% 50% at 50% 50%, rgba(0,0,0,.16), rgba(0,0,0,.06) 45%, rgba(0,0,0,0) 72%); }

/* corner partition + lightbox */
.hp--part { background: linear-gradient(#dcdcdc, #d4d4d4 70%, #cfcfcf); }
.part__end { position: absolute; top: 0; height: 100%; transform-origin: 0 0; transform: rotateY(90deg); background: linear-gradient(90deg, #efefef, #e2e2e2); }
.part__base { position: absolute; left: 0; right: 0; bottom: 0; height: 1.2%; background: linear-gradient(#bdbdbd, #e9e9e9 30%, #dedede); }
.lbox { position: absolute; padding: 1.5%; background: #f6f6f6; box-shadow: 0 0 0 1px rgba(0,0,0,.04), 0 20px 50px -30px rgba(0,0,0,.35); }
.lbox__in { position: absolute; inset: 2.2%; background: radial-gradient(60% 60% at 50% 45%, #fdfdfd, #f3f3f3 55%, #e2e2e2); box-shadow: inset 0 0 70px rgba(0,0,0,.16), inset 0 2px 0 rgba(0,0,0,.05); }

/* doors */
.door { position: absolute; left: 0; top: 0; display: block; transform-origin: 0 0; }
.door__in { position: absolute; inset: 0; background: linear-gradient(#b4b4b4, #d6d6d6 25%, #ebebeb 70%, #f1f1f1); }
.door__jamb { position: absolute; top: 0; height: 100%; transform-origin: 0 0; transform: rotateY(90deg); background: linear-gradient(90deg, #e9e9e9, #cdcdcd); }
.door__jamb--top { left: 0; width: 100%; transform: rotateX(-90deg); background: linear-gradient(#e2e2e2, #bdbdbd); }
.door__leaf { position: absolute; top: 2px; height: calc(100% - 2px); width: calc(50% - 2px); background: linear-gradient(90deg, #f5f5f5, #ececec); box-shadow: inset 0 0 0 1px rgba(8,8,8,.07); transition: transform 1s var(--ease-out); }
.door__leaf::before { content: ""; position: absolute; left: 13%; right: 13%; top: 7%; bottom: 9%; border: 1px solid rgba(8,8,8,.06); box-shadow: inset 0 1px 0 rgba(255,255,255,.7); }
.door__leaf::after { content: ""; position: absolute; top: 37%; width: 2.4%; min-width: 3px; height: 25%; border-radius: 3px; background: linear-gradient(90deg, #333, #080808 45%, #222); }
.door__leaf--l { left: 2px; transform-origin: 0 50%; }
.door__leaf--l::after { right: 10%; }
.door__leaf--r { right: 2px; transform-origin: 100% 50%; background: linear-gradient(270deg, #f5f5f5, #ececec); }
.door__leaf--r::after { left: 10%; }
.door__label { position: absolute; left: 50%; transform: translate3d(-50%, 0, 3px); white-space: nowrap; line-height: 1; letter-spacing: -.045em; color: rgba(8,8,8,.22); transition: color .6s; }
.door__label i { position: absolute; left: 0; right: 0; top: 1.14em; height: .0625em; border-radius: 1em; background: var(--ink); transform: scaleX(0); transform-origin: left; transition: transform .7s var(--ease-out); }
.at-doors .door__label, .door:hover .door__label, .door:focus-visible .door__label { color: var(--ink); }
.at-doors .door__label i, .door:hover .door__label i, .door:focus-visible .door__label i { transform: none; }
.at-doors .door__leaf--l { transform: rotateY(9deg); }
.at-doors .door__leaf--r { transform: rotateY(-9deg); }
.door:hover .door__leaf--l { transform: rotateY(30deg); }
.door:hover .door__leaf--r { transform: rotateY(-30deg); }

/* intro: two door panels over the hall entrance, and the floor band.
   On "Enter" the doors swing in, the band fades and the camera walks in (hall.js). */
.intro { position: absolute; inset: 0; z-index: 5; }
.intro__doors { position: absolute; inset: 0; perspective: 1536px; pointer-events: none; }
/* flat at rest (a 3D door at rest loses its face in Chrome's GPU compositor while scrolling); 3D only while opening */
.intro__door { position: absolute; top: 0; bottom: 175px; width: 50%; }
.intro.is-opening .intro__door { transform-style: preserve-3d; will-change: transform; }
.intro__door--l { left: 0; transform-origin: 0 0; }
.intro__door--r { right: 0; transform-origin: 100% 0; }
.intro__face { position: absolute; inset: 0; overflow: hidden; background: var(--bg); }
.intro__door--l .intro__face { box-shadow: inset -1px 0 0 rgba(8,8,8,.12); }
.intro__title { position: absolute; top: calc(50% + 87px - 87px); width: 200%; transform: translateY(-50%); text-align: center; text-transform: uppercase; }
.intro__door--l .intro__title { left: 0; }
.intro__door--r .intro__title { left: -100%; }
.intro__door .intro__title { top: calc((100% + 175px) / 2 - 87px); }
.intro__edge { position: absolute; top: 0; bottom: 0; width: 22px; transform-origin: 0 0; transform: rotateY(90deg); background: linear-gradient(90deg, #e4e4e4, #d6d6d6); display: none; }
.intro.is-opening .intro__edge { display: block; }
.intro__door--l .intro__edge { left: 100%; }
.intro__door--r .intro__edge { left: 0; }
.intro__band { position: absolute; left: 0; right: 0; bottom: 0; height: 175px; background: var(--band); display: flex; flex-direction: column; align-items: center; }
.intro__enter { position: relative; margin-top: -15px; height: 30px; padding: 0 12px; border-radius: 3px; background: var(--ink); color: var(--bg); overflow: hidden; }
.intro__enter .roll { line-height: 30px; }
.intro__text { margin-top: 36px; max-width: 480px; padding-inline: 18px; text-align: center; }
.no-js .intro, .intro.is-static { background: var(--bg); }
@media (max-width: 809px) {
  .intro__door { bottom: 150px; }
  .intro__door .intro__title { top: calc((100% + 150px) / 2 - 60px); }
  .intro__band { height: 150px; }
}

/* ==========================================================================
   WORK
   ========================================================================== */
.work__filters { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 0 24px; padding-left: 12px; }
.grid { display: flex; gap: 32px; align-items: flex-start; padding-top: 44px; padding-bottom: 120px; }
.grid__col { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 50px; }
.card__media { position: relative; overflow: hidden; background: #e9e9e9; }
.card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease-out); }
.card a:hover .card__media img { transform: scale(1.03); }
.card__title { position: relative; margin-top: 9px; transition: transform .45s var(--ease-out); }
.card__title::before { content: ""; position: absolute; left: -14px; top: 9px; width: 6px; height: 6px; border-radius: 3px; background: var(--ink); transform: scale(0); transition: transform .45s var(--ease-out); }
.card a:hover .card__title { transform: translateX(14px); }
.card a:hover .card__title::before { transform: none; }
.card__line { margin-top: 2px; }
.card__cats { margin-top: 3px; opacity: .5; }
.card.is-out { display: none; }
@media (max-width: 809px) {
  .grid { flex-direction: column; }
  .phead--work { flex-direction: column; gap: 16px; }
  .work__filters { justify-content: flex-start; flex-wrap: nowrap; overflow-x: auto; width: calc(100% + var(--pad)); padding: 0 var(--pad) 4px 12px; scrollbar-width: none; }
  .grid { padding-top: 32px; gap: 0; }
  .grid__col { gap: 46px; }
}

/* ==========================================================================
   PROJECT
   ========================================================================== */
[data-page="project"] { background: var(--bg); }
.proj { position: fixed; inset: 16px; border-radius: 8px; background: var(--panel); overflow: hidden; }
.proj .xbtn { right: 18px; top: 18px; }
.proj__guide { position: absolute; top: 0; bottom: 0; width: 1px; background: var(--line); z-index: 0; pointer-events: none; }
.proj__guide--a { left: calc(41.2% - 16px); }
.proj__guide--b { left: calc(84.6% - 16px); }
.proj__rig { position: absolute; top: 0; left: calc(41.2% - 16px); right: calc(15.4% + 16px); height: 40px; z-index: 3; pointer-events: none; }
.proj__rig::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px; background: var(--line); }
.proj__rig i { position: absolute; top: 0; width: 1px; height: 40px; background: var(--line); }
.proj__rig i:first-of-type { left: 44px; }
.proj__rig i:last-of-type { right: 44px; }
.proj__info { position: absolute; left: 40px; top: 40px; bottom: 0; width: 360px; overflow-y: auto; scrollbar-width: none; padding-bottom: 40px; z-index: 4; }
.proj__info::-webkit-scrollbar { display: none; }
.proj__meta { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; margin-top: 18px; }
.proj__desc { margin-top: 19px; width: 320px; max-width: 100%; }
.proj__sec { margin-top: 46px; }
.proj__sec h2 + p, .proj__sec p + p { margin-top: 16px; }
.proj__story { position: relative; max-height: 220px; overflow: hidden; transition: max-height .8s var(--ease-out); }
.proj__story::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 60px; background: linear-gradient(rgba(240,240,240,0), var(--panel)); transition: opacity .4s; }
.proj__story.is-open { max-height: 1600px; }
.proj__story.is-open::after { opacity: 0; }
.proj__story.is-short::after { display: none; }
.proj__toggle { margin-top: 18px; }
.hanger { display: flex; flex-direction: column; align-items: center; width: 360px; margin-top: 34px; transform-origin: 50% 0; }
.hanger__line { width: 1px; height: 48px; background: var(--line); }
.hanger__tri { display: block; width: 134px; height: 45px; color: var(--line); }
.hanger__pic { width: 150px; height: 86px; border-radius: 1px; overflow: hidden; box-shadow: 0 14px 22px -14px rgba(8,8,8,.6); background: #ddd; }
.hanger__pic img { width: 100%; height: 100%; object-fit: cover; }
.hanger__k { margin-top: 14px; }
.hanger__t { margin-top: 2px; text-align: center; }
.hanger:hover .hanger__t { text-decoration: underline; text-underline-offset: 4px; }
/* images run from 30.7% to 95.6% of the card (measured: 1087px of 1675px at 1707px wide) */
.proj__media { position: absolute; top: 0; bottom: 0; left: 30.7%; right: 4.4%; overflow: hidden; z-index: 1; }
.proj__track { position: absolute; left: 0; right: 0; top: 0; }
.proj__img { position: absolute; left: 0; top: 0; width: 100%; height: auto; aspect-ratio: 1087 / 611; will-change: transform; border-radius: 2px; overflow: hidden; box-shadow: 0 30px 60px -34px rgba(8,8,8,.55); background: #ddd; }
.proj__img img { width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 1199px) {
  .proj__media { left: 430px; right: 24px; }
  .proj__guide, .proj__rig { display: none; }
}
@media (max-width: 809px) {
  /* phone: title, images, then the story (as on the reference) */
  .proj { position: relative; inset: auto; margin: 8px; min-height: calc(100svh - 16px); display: flex; flex-direction: column; padding: 28px 18px 40px; }
  .proj__info { display: contents; }
  .proj__info > h1, .proj__meta, .proj__desc { order: 1; padding-right: 44px; }
  .proj__media { order: 2; position: static; margin-top: 28px; overflow: visible; }
  .proj__story, .proj__toggle, .hanger { order: 3; }
  .proj__story { margin-top: 10px; }
  .proj__track { position: static; transform: none; width: auto; display: flex; flex-direction: column; gap: 28px; }
  .proj__img { position: static; width: 100%; height: auto; aspect-ratio: 1087 / 611; transform: none !important; }
  .hanger { width: 100%; }
}

/* ==========================================================================
   ABOUT
   ========================================================================== */
.hang { position: relative; height: 990px; }
.hang__item { position: absolute; top: 0; transform-origin: 50% 0; will-change: transform; }
.hang__string { display: block; width: 1px; margin: 0 auto; background: var(--line-2); }
.hang__card { display: block; padding: 10px 24px 9px; background: var(--panel); box-shadow: 0 30px 40px -30px rgba(8,8,8,.6); white-space: nowrap; cursor: grab; user-select: none; }
.hang__intro { position: absolute; left: 50%; top: 764px; width: 420px; max-width: calc(100% - 36px); transform: translateX(-50%); text-align: center; }

.sec__k { display: block; }
.sec__t { display: block; }

.exp { position: relative; }
.exp__pin { position: relative; height: 100vh; height: 100svh; overflow: hidden; }
.exp__head { position: absolute; left: var(--pad); top: 89px; }
.exp__drum { position: absolute; left: var(--pad); top: 50%; width: 58%; height: 340px; transform: translateY(-50%); transform-style: preserve-3d; }
.exp__item { position: absolute; left: 0; top: 50%; display: flex; align-items: baseline; gap: 7px; white-space: nowrap; will-change: transform, opacity; backface-visibility: hidden; transform-origin: 0 50%; }
.exp__n { font-size: 12px; opacity: .5; }
.exp__name { font-size: 4.27vw; line-height: 1; letter-spacing: -.045em; }
.exp__detail { position: absolute; left: 62.3%; top: 50%; width: 32%; transform: translateY(-50%); }
.exp__num { height: 120px; overflow: hidden; }
.exp__roll { will-change: transform; }
.exp__roll div { height: 120px; font-size: 120px; line-height: 120px; letter-spacing: -.045em; }
.exp__texts { position: relative; margin-top: 15px; min-height: 140px; }
.exp__text { position: absolute; left: 0; top: 0; width: 440px; max-width: 100%; opacity: 0; transition: opacity .45s; }
.exp__text.is-on { opacity: 1; }
.exp__text p + p { margin-top: 14px; opacity: .5; }
.exp__bars { position: absolute; left: var(--pad); right: var(--pad); bottom: 168px; display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; }
.exp__bars span { height: 2px; background: var(--tint); overflow: hidden; }
.exp__bars i { display: block; height: 100%; background: var(--ink); transform: scaleX(0); transform-origin: left; }
.exp--static .exp__pin { height: auto; padding: 89px 0 80px; }
.exp--static .exp__head { position: static; padding-inline: var(--pad); margin-bottom: 40px; }
.exp--static .exp__drum, .exp--static .exp__detail { position: static; transform: none; width: auto; height: auto; padding-inline: var(--pad); }
.exp--static .exp__item { position: static; margin-bottom: 30px; flex-wrap: wrap; white-space: normal; }
.exp--static .exp__item .exp__text { position: static; opacity: 1; flex-basis: 100%; margin-top: 10px; }
.exp--static .exp__detail, .exp--static .exp__bars { display: none; }

.appr { padding-top: 160px; }
.appr__list { margin-top: 80px; }
.appr__row { display: grid; grid-template-columns: 1fr 1fr; gap: 15px; padding: 18px 0; min-height: 147px; align-items: start; }
.appr__from { justify-self: end; position: relative; opacity: .42; transition: opacity .6s; }
.appr__from::after { content: ""; position: absolute; left: -2px; right: -2px; top: 52%; height: 1.5px; background: var(--ink); transform: scaleX(0); transform-origin: left; transition: transform .7s var(--ease-out) .1s; }
.appr__to { padding-top: 18px; opacity: 0; transform: translateY(10px); transition: opacity .7s var(--ease-out) .3s, transform .9s var(--ease-out) .3s; }
.appr__to p { width: 250px; max-width: 100%; margin-top: 2px; }
.appr__row.is-on .appr__from::after { transform: none; }
.appr__row.is-on .appr__to { opacity: 1; transform: none; }

.shelf { padding-top: 220px; }
.shelf__box { margin-top: 60px; height: 460px; border-bottom: 1px solid var(--line); display: flex; justify-content: center; align-items: flex-end; }
.book { position: relative; flex: none; width: 64px; height: var(--h); background: var(--tone); box-shadow: inset -1px 0 0 rgba(0,0,0,.25), inset 1px 0 0 rgba(255,255,255,.5); overflow: hidden; transition: width .7s var(--ease-out); cursor: pointer; }
.book__year { position: absolute; left: 18px; top: 16px; font-size: 12px; opacity: .6; transition: opacity .3s; }
.book__spine { position: absolute; left: 20px; bottom: 22px; writing-mode: vertical-rl; transform: rotate(180deg); font-size: 18px; line-height: 23.4px; letter-spacing: -.02em; white-space: nowrap; transition: opacity .3s; }
.book__open { position: absolute; left: 0; right: 0; bottom: 0; height: 72px; padding: 14px 16px; opacity: 0; transition: opacity .35s; white-space: nowrap; }
.book__open b { display: block; font-size: 18px; line-height: 23.4px; letter-spacing: -.02em; font-weight: 600; }
.book__open small { display: block; margin-top: 4px; font-size: 12px; line-height: 15.6px; opacity: .7; }
.book.is-open { width: 300px; }
.book.is-open .book__spine { opacity: 0; }
.book.is-open .book__open { opacity: 1; transition-delay: .25s; }

.faq { padding-top: 240px; padding-bottom: 100px; display: grid; grid-template-columns: 398px 1fr; gap: 12px; }
.faq__list { display: flex; flex-direction: column; }
.faq__row { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; min-height: 82px; cursor: default; }
.faq__q { text-align: left; opacity: .42; transition: opacity .3s; align-self: start; }
.faq__a { position: relative; padding-top: 2px; }
.faq__a p { opacity: 0; transition: opacity .35s; }
.faq__a i { position: absolute; left: 0; top: 9px; width: 18px; height: 1px; background: var(--line-2); transition: opacity .3s; }
.faq__row.is-on .faq__q { opacity: 1; }
.faq__row.is-on .faq__a p { opacity: 1; }
.faq__row.is-on .faq__a i { opacity: 0; }

@media (max-width: 809px) {
  .hang { height: 720px; }
  .hang__intro { top: 618px; }
  .exp__head { top: 60px; }
  .exp__drum { left: var(--pad); width: auto; right: var(--pad); top: 38%; height: 200px; }
  .exp__name { font-size: 26.3px; }
  .exp__detail { left: var(--pad); right: var(--pad); width: auto; top: 72%; }
  .exp__num, .exp__roll div { height: 64px; font-size: 64px; line-height: 64px; }
  .exp__bars { bottom: 40px; }
  .appr { padding-top: 120px; }
  .appr__row { grid-template-columns: 1fr; gap: 6px; }
  .appr__from { justify-self: start; }
  .appr__to { padding-top: 0; }
  .shelf { padding-top: 140px; }
  .shelf__box { justify-content: flex-start; overflow-x: auto; scrollbar-width: none; }
  .faq { grid-template-columns: 1fr; padding-top: 140px; }
  .faq__row { grid-template-columns: 1fr; gap: 6px; padding-bottom: 20px; }
}

/* ==========================================================================
   JOURNAL
   ========================================================================== */
.jr { position: relative; display: grid; grid-template-columns: 200px 1064px 1fr; padding-top: 144px; padding-bottom: 210px; }
.jr__filters { display: flex; flex-direction: column; gap: 10px; padding-left: 16px; }
.jr__filters .flt { opacity: 1; }
.jr__filters .flt sup { font-size: 14px; line-height: 18.2px; top: 0; margin-left: 10px; opacity: .5; }
.jr__filters .flt::before { left: -16px; }
.jr__filters .flt:not(.is-on) span { opacity: .42; }
.jr__list { position: relative; }
.jr__row a { display: grid; grid-template-columns: 144px 1fr auto; align-items: start; min-height: 77px; padding-top: 22px; border-top: 1px solid var(--line); }
.jr__row time { padding-top: 5px; }
.jr__title { transition: opacity .3s; }
.jr__meta { display: flex; gap: 12px; padding-top: 0; }
.jr__list:hover .jr__row a .jr__title { opacity: .42; }
.jr__list:hover .jr__row a:hover .jr__title { opacity: 1; }
.jr__row.is-out { display: none; }
.jr__peek { position: absolute; right: var(--pad); top: 162px; width: 300px; height: 225px; transform-origin: 50% -1600px; pointer-events: none; will-change: transform; }
.jr__peek::before, .jr__peek::after { content: ""; position: absolute; bottom: 100%; width: 1px; height: 1600px; background: var(--line-2); }
.jr__peek::before { left: 48px; }
.jr__peek::after { right: 48px; }
.jr__pic { position: absolute; inset: 0; overflow: hidden; background: #ddd; }
.jr__pic img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .45s; }
.jr__pic img.is-on { opacity: 1; }
@media (max-width: 1199px) {
  .jr { grid-template-columns: 1fr; gap: 30px; }
  .jr__filters { flex-direction: row; flex-wrap: wrap; gap: 14px 28px; }
  .jr__peek { display: none; }
}
@media (max-width: 809px) {
  .jr { padding-top: 70px; }
  .jr__row a { grid-template-columns: 1fr; min-height: 0; padding: 26px 0 30px; gap: 8px; }
  .jr__row time { padding-top: 0; }
}

/* post */
.post { position: relative; margin: 86px 16px 16px; border-radius: 8px; background: var(--panel); padding: 104px 48px 60px; }
.post .xbtn { right: 18px; top: 18px; }
.post__title { width: 960px; max-width: 100%; }
.post__meta { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; margin-top: 22px; }
.post__img { margin-top: 49px; height: 620px; border-radius: 2px; overflow: hidden; background: #ddd; }
.post__img img { width: 100%; height: 100%; object-fit: cover; }
.post__cols { display: grid; grid-template-columns: 482px 580px 1fr; margin-top: 48px; }
.post__toc { display: flex; flex-direction: column; gap: 14px; }
.post__toc span:first-child { opacity: .5; margin-bottom: 6px; }
.post__toc a { position: relative; width: 200px; padding-left: 16px; opacity: .45; transition: opacity .25s; }
.post__toc a i { position: absolute; left: 0; top: 6px; width: 6px; height: 6px; border-radius: 3px; background: var(--ink); transform: scale(0); transition: transform .35s cubic-bezier(.2, 1.4, .4, 1); }
.post__toc a:hover { opacity: .75; }
.post__toc a.is-on { opacity: 1; }
.post__toc a.is-on i { transform: none; }
.post__h { margin-top: 34px !important; scroll-margin-top: 110px; }
.post__body > * + * { margin-top: 16px; }
.post__body .t24 { margin-bottom: 9px; }
.post__quote { margin: 32px 0 26px; padding-left: 20px; }
.post__quote p + p { margin-top: 14px; }
.post__box { margin-top: 30px !important; padding: 32px; border-radius: 4px; background: var(--bg); }
.post__box p + p { margin-top: 12px; }
.post__box .dotlink { margin-top: 34px; float: right; }
.post__box::after { content: ""; display: block; clear: both; }
.post__share { display: flex; flex-direction: column; gap: 12px; padding-left: 344px; }
.post__share > span { opacity: .5; margin-bottom: 6px; }
.post__share a, .post__share button { display: flex; align-items: center; gap: 10px; text-align: left; }
.post__share a::before, .post__share button::before { content: ""; width: 6px; height: 6px; border-radius: 3px; box-shadow: inset 0 0 0 .67px var(--ink); flex: none; }
.post__share a:hover, .post__share button:hover { opacity: .55; }
.post__end { margin-top: 120px; border-top: 1px solid var(--line); display: flex; justify-content: center; }
.post__end .hanger { width: 320px; margin-top: 0; }
.post__end .hanger__line { height: 80px; }
@media (max-width: 1199px) {
  .post__cols { grid-template-columns: 1fr; gap: 40px; }
  .post__share { padding-left: 0; flex-direction: row; flex-wrap: wrap; }
  .post__toc { display: none; }
  .post__img { height: 46vw; }
}
@media (max-width: 809px) {
  .post { margin: 70px 8px 8px; padding: 70px 18px 40px; }
  .post__img { height: 70vw; }
}

/* ==========================================================================
   CONTACT
   ========================================================================== */
.ct__top { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; margin-top: 82px; }
.ct__lead { width: 360px; max-width: 100%; }
.form { margin-top: 47px; padding: 40px 28px 40px; border: 1px solid var(--line); border-radius: 4px; display: grid; grid-template-columns: 1fr 1fr; column-gap: 56px; }
.field { display: flex; flex-direction: column; gap: 18px; min-width: 0; margin-bottom: 54px; border: 0; padding: 0; }
.field--wide { grid-column: 1 / -1; }
.field > span, .field legend { padding: 0; }
.field input, .field textarea { width: 100%; border: 0; padding: 0; background: transparent; color: var(--ink); font: inherit; font-size: 30px; line-height: 36px; letter-spacing: -.03em; outline: none; resize: none; height: 42px; }
.field textarea { height: 120px; }
.field ::placeholder { color: rgba(8,8,8,.24); }
.field.is-bad > span { text-decoration: underline; }
.opts { display: flex; flex-wrap: wrap; gap: 10px 40px; margin-top: 18px; }
.opt { position: relative; display: inline-flex; align-items: center; gap: 10px; cursor: pointer; }
.opt input { appearance: none; -webkit-appearance: none; width: 10px; height: 10px; margin: 0; border-radius: 999px; box-shadow: inset 0 0 0 1px var(--line-2); cursor: pointer; transition: box-shadow .2s, background .2s; }
.opt input:checked { background: var(--ink); box-shadow: none; }
.opt input:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
.form__foot { grid-column: 1 / -1; display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; margin-top: 8px; }
.form__status { grid-column: 1 / -1; margin-top: 16px; }
.form__status:empty { display: none; }
.ct__info { display: grid; grid-template-columns: repeat(3, 1fr); margin-top: 113px; padding-bottom: 154px; }
.ct__info > div > * + * { margin-top: 11px; }
.ct__info a:hover, .ct__copy:hover { opacity: .55; }
.ct__email { display: flex; gap: 19px; }
.clock { display: flex; align-items: center; gap: 10px; }
.clock i { width: 7px; height: 7px; border-radius: 4px; box-shadow: inset 0 0 0 .67px var(--ink); opacity: .6; }
.clock.is-open i { background: var(--ink); opacity: 1; box-shadow: none; }
@media (max-width: 809px) {
  .ct__top { flex-direction: column; align-items: flex-start; margin-top: 48px; }
  .form { grid-template-columns: 1fr; padding: 28px 18px; }
  .field input { font-size: 24px; }
  .ct__info { grid-template-columns: 1fr; gap: 30px; margin-top: 70px; padding-bottom: 80px; }
}

/* 404 */
.nf { min-height: 80vh; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; gap: 20px; padding-top: 120px; }

/* toast */
.toast { position: fixed; z-index: 300; left: 50%; bottom: 24px; transform: translate(-50%, 16px); padding: 9px 14px; border-radius: 4px; background: var(--ink); color: var(--bg); opacity: 0; transition: opacity .3s, transform .45s var(--ease-out); pointer-events: none; }
.toast.is-on { opacity: 1; transform: translate(-50%, 0); }

/* page fade */
.veil { position: fixed; inset: 0; z-index: 250; background: var(--bg); pointer-events: none; opacity: 1; transition: opacity .45s ease; }
.is-ready .veil { opacity: 0; }
.is-leaving .veil { opacity: 1; transition-duration: .3s; }
[data-page="home"] .veil { background: var(--hall); }

/* touch: grow the hit area of small text links and filters to ~44px, layout unchanged */
@media (pointer: coarse) {
  .ftr__nav a, .ftr__social a, .flt, .ct__copy, .post__share a, .post__share button, .menu__social a, .menu__call a, .jr__filters .flt { position: relative; }
  .ftr__nav a::after, .ftr__social a::after, .flt::after, .ct__copy::after, .post__share a::after, .post__share button::after, .menu__social a::after, .menu__call a::after { content: ""; position: absolute; left: -6px; right: -6px; top: -13px; bottom: -13px; }
  .faq__q { padding-block: 10px; margin-block: -10px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}