/* THELASERLARS 2026. Black sensor field, white manual pages, black annex. */
@font-face { font-family: "Archivo"; src: url("fonts/archivo.woff2") format("woff2"); font-weight: 400 900; font-stretch: 62% 125%; font-display: swap; }
@font-face { font-family: "Aoi Mono"; src: url("fonts/aoi-mono.woff2") format("woff2"); font-display: swap; }
@font-face { font-family: "Aoi Mono Extended"; src: url("fonts/aoi-mono-extended.woff2") format("woff2"); font-display: swap; }

:root {
  --black: #000;
  --white: #fff;
  --paper: #f4f4f2;
  --grey: #8a8a86;
  --line-dark: #2b2b29;
  --body: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --mono: "Aoi Mono", ui-monospace, Menlo, monospace;
  --mono-x: "Aoi Mono Extended", "Aoi Mono", ui-monospace, monospace;
  --mark: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --tech: "Aoi Mono Extended", "Aoi Mono", ui-monospace, monospace;
  --gut: max(16px, env(safe-area-inset-left, 0px), 3.2vw);
  --gut-r: max(16px, env(safe-area-inset-right, 0px), 3.2vw);
  color-scheme: dark;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 16px; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body { margin: 0; background: var(--black); color: var(--white); font: 400 17px/1.55 var(--body); -webkit-font-smoothing: antialiased; }
img { max-width: 100%; display: block; }
a { color: inherit; }
a:focus-visible, button:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; }
::selection { background: var(--white); color: var(--black); }

/* Mini index (appears after the hero) */
.mini { position: fixed; z-index: 20; top: calc(14px + env(safe-area-inset-top, 0px)); right: calc(var(--gut-r) + 14px); display: flex; gap: 14px; align-items: center; padding: 9px 12px; background: rgba(4,6,9,.82); backdrop-filter: blur(6px); border: 1px solid rgba(255,255,255,.55); text-decoration: none; font: 400 11px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; white-space: nowrap; opacity: 0; transform: translateY(-8px); pointer-events: none; transition: opacity .3s ease, transform .3s ease; }
.mini.on { opacity: 1; transform: none; pointer-events: auto; }
.mini #barSheet { color: #8d99a6; }
.mini span:last-child { background: var(--white); color: var(--black); padding: 4px 6px; margin: -4px -6px -4px 0; }
.mini .hd { width: 7px; height: 7px; }
.mini .hd-tl { left: -4px; top: -4px; } .mini .hd-br { right: -4px; bottom: -4px; }
@media (max-width: 560px) { .mini #barSheet { display: none; } }
@media (prefers-reduced-motion: reduce) { .mini { transition: none; } }

/* Hero: dark photo, grain, hairline frame, dot-matrix mark */
.hero { position: relative; height: min(100svh, 980px); min-height: 560px; overflow: hidden; background: #040609; cursor: crosshair; }
#feed { position: absolute; inset: 0; width: 100%; height: 100%; }
.grain { position: absolute; inset: -50%; pointer-events: none; opacity: .16; mix-blend-mode: screen;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 1.4 -.2'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
  animation: grain 1s steps(6) infinite; }
@keyframes grain { 0% { transform: translate(0, 0); } 20% { transform: translate(-3%, 2%); } 40% { transform: translate(2%, -4%); } 60% { transform: translate(-4%, -1%); } 80% { transform: translate(3%, 3%); } 100% { transform: translate(0, 0); } }
@media (prefers-reduced-motion: reduce) { .grain { animation: none; } }

.frame { position: absolute; inset: calc(18px + env(safe-area-inset-top, 0px)) var(--gut-r) 0 var(--gut); border: 1px solid rgba(255,255,255,.55); border-bottom: 0; pointer-events: none; }
.gl { position: absolute; background: rgba(255,255,255,.22); }
.gl-h { left: 0; right: 0; height: 1px; } .gl-1 { top: 33.333%; } .gl-2 { top: 66.666%; }
.gl-v { top: 0; bottom: 0; width: 1px; } .gl-3 { left: 25%; } .gl-4 { left: 50%; } .gl-5 { left: 75%; }
@media (max-width: 639px) { .gl-3, .gl-5 { display: none; } }
.ruler { position: absolute; left: 0; right: 0; display: flex; justify-content: space-between; padding-inline: 6px; font: 400 9px/1 var(--mono); color: rgba(255,255,255,.6); }
.ruler-t { top: 5px; z-index: 4; } .ruler-b { bottom: 23px; }
@media (max-width: 640px) { .ruler span:nth-child(even) { display: none; } }

.poster { position: absolute; left: calc(var(--gut) + 12px); right: calc(var(--gut-r) + 12px); display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; font: 700 11px/1.15 var(--body); letter-spacing: .01em; text-transform: uppercase; pointer-events: none; }
.hero-nav { position: absolute; z-index: 3; top: calc(18px + env(safe-area-inset-top, 0px)); left: var(--gut); right: var(--gut-r); display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-bottom: 1px solid rgba(255,255,255,.55); background: linear-gradient(rgba(4,6,9,.55), rgba(4,6,9,.15)); }
.hero-nav div { display: grid; gap: 3px; align-content: start; padding: 22px 14px 14px; border-right: 1px solid rgba(255,255,255,.22); }
.hero-nav div:last-child { border-right: 0; }
.hero-nav b { font: 700 11px/1.2 var(--body); letter-spacing: .02em; text-transform: uppercase; margin-bottom: 4px; }
.hero-nav a { font: 400 12px/1.5 var(--mono); letter-spacing: .06em; text-transform: uppercase; text-decoration: none; width: max-content; max-width: 100%; }
.hero-nav a:hover { background: var(--white); color: var(--black); }
@media (max-width: 640px) { .hero-nav { grid-template-columns: repeat(2, minmax(0, 1fr)); } .hero-nav div:nth-child(2) { border-right: 0; } .hero-nav div:nth-child(-n+2) { border-bottom: 1px solid rgba(255,255,255,.22); } .hero-nav div { padding: 18px 10px 10px; } }
.poster-b { bottom: 56px; }
@media (max-width: 640px) { .poster-b span:nth-child(3) { display: none; } .poster-b span:nth-child(4) { grid-column: 2; text-align: right; } }
.poster-b span:nth-child(3), .poster-b span:nth-child(4) { font: 400 10.5px/1.3 var(--mono); letter-spacing: .08em; white-space: nowrap; }
.poster span:last-child { text-align: right; }
@media (max-width: 640px) { .poster { grid-template-columns: repeat(2, minmax(0, 1fr)); } .poster span:nth-child(2) { text-align: right; } .poster span:nth-child(3) { text-align: left; } .poster-t span:nth-child(n+3) { display: none; } }

.target { position: absolute; left: 50%; top: 55%; transform: translate(-50%, -50%); width: min(88%, 1180px); display: grid; justify-items: center; gap: 22px; }
.mark { margin: 0; width: 100%; position: relative; container-type: inline-size; }
.mark-txt { display: block; font: 400 8.8cqi/1 var(--mono); letter-spacing: .02em; text-indent: .02em; white-space: nowrap; }
.mark { display: grid; justify-items: center; }
.mark-in { display: grid; justify-items: stretch; font-size: 8.8cqi; }
.mark-in .mark-txt { font-size: 1em; }
.mark-morse { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); margin-top: .1em; padding-left: .02em; }
.mark-morse b { display: flex; justify-content: center; align-items: center; gap: max(2px, .055em); }
.mark-morse i { display: block; width: max(3px, .09em); height: max(3px, .09em); background: currentColor; }
.mark-morse i.l { width: max(8px, .25em); }
.fx .mark-morse.play i { opacity: 0; }
.fx .mark-morse.play i.on { opacity: 1; }
.mark-morse { cursor: pointer; }
.hd { position: absolute; width: 9px; height: 9px; background: var(--white); z-index: 1; }
.hd-tl { left: -4px; top: -4px; } .hd-tr { right: -4px; top: -4px; }
.hd-bl { left: -4px; bottom: -4px; } .hd-br { right: -4px; bottom: -4px; }
.down { position: absolute; left: 50%; bottom: 114px; transform: translateX(-50%); z-index: 2; display: grid; justify-items: center; gap: 2px; padding: 8px 18px; }
@media (max-width: 640px) { .down { bottom: 146px; } }
.down i { width: clamp(16px, 1.8vw, 24px); aspect-ratio: 1; border-right: 2px solid var(--white); border-bottom: 2px solid var(--white); transform: rotate(45deg); margin-top: calc(clamp(16px, 1.8vw, 24px) * -.45); opacity: .25; animation: down 1.6s infinite; }
.down i:nth-child(2) { animation-delay: .2s; } .down i:nth-child(3) { animation-delay: .4s; }
@keyframes down { 0%, 100% { opacity: .25; translate: 0 -3px; } 40% { opacity: 1; translate: 0 3px; } }
@media (prefers-reduced-motion: reduce) { .down i { animation: none; opacity: .8; } }

/* One continuous sheet: the hero frame and its four columns run down the whole page */
body { background: #040609; color: #e6ebf0; position: relative; display: flow-root; }
body::after { content: ""; position: fixed; inset: 0; z-index: 30; pointer-events: none; opacity: .07; mix-blend-mode: screen;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 1.4 -.2'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E"); }
:root { --hair: rgba(255,255,255,.16); --hair-s: rgba(255,255,255,.55); --line: rgba(255,255,255,.12); --dim: #8d99a6; --cols: 4; --pad: 14px; --ease: cubic-bezier(.2, .7, 0, 1); }
@media (max-width: 1079px) { :root { --cols: 2; } }
@media (max-width: 639px) { :root { --cols: 1; --pad: 12px; } }
.paper { display: contents; }

.sheet { position: absolute; z-index: -1; top: calc(18px + env(safe-area-inset-top, 0px)); bottom: calc(18px + env(safe-area-inset-bottom, 0px)); left: var(--gut); right: var(--gut-r); border-inline: 1px solid var(--hair-s); pointer-events: none;
  background: linear-gradient(var(--line), var(--line)) 25% 0 / 1px 100% no-repeat, linear-gradient(var(--line), var(--line)) 50% 0 / 1px 100% no-repeat, linear-gradient(var(--line), var(--line)) 75% 0 / 1px 100% no-repeat; }
@media (max-width: 1079px) { .sheet { background: linear-gradient(var(--line), var(--line)) 50% 0 / 1px 100% no-repeat; } }
.sheet::before, .sheet::after { content: ""; position: absolute; top: 0; bottom: 0; width: 6px; background: repeating-linear-gradient(180deg, var(--hair-s) 0 1px, transparent 1px 32px); }
.sheet::before { left: 0; } .sheet::after { right: 0; }
@media (max-width: 639px) { .sheet { background: none; } }

/* Scroll read-out in the left gutter */
.yread { position: fixed; z-index: 21; left: 0; width: var(--gut); top: 50%; display: grid; justify-items: end; gap: 4px; padding-right: 0; font: 400 9px/1 var(--mono); letter-spacing: .06em; white-space: nowrap; color: var(--white); pointer-events: none; opacity: 0; transition: opacity .3s ease; }
.yread::after { content: ""; width: 10px; height: 1px; background: var(--white); }
.yread span { padding-right: 4px; }
.yread.on { opacity: 1; }
@media (max-width: 1099px) { .yread { display: none; } }

/* Sections */
.ch, .annex, .contact, .legal { position: relative; margin: 0 var(--gut-r) 0 var(--gut); padding: 0 0 clamp(40px, 5vw, 80px); }
.ch::before, .annex::before, .contact::before, .legal::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 6px; transform-origin: left;
  background: linear-gradient(var(--hair-s), var(--hair-s)) 0 0 / 100% 1px no-repeat, repeating-linear-gradient(90deg, var(--hair-s) 0 1px, transparent 1px calc(100% / 12)) 0 0 / 100% 6px no-repeat; }
.ch::after, .annex::after, .contact::after, .legal::after { content: ""; position: absolute; left: -4px; top: -4px; width: 9px; height: 9px; background: var(--white); }

.ch-head { display: grid; grid-template-columns: repeat(var(--cols), minmax(0, 1fr)); align-items: start; padding-top: 26px; margin-bottom: clamp(32px, 4vw, 56px); }
.ch-head > * { padding-inline: var(--pad); }
.ch-no { font: 400 12px/1 var(--mono); padding-top: 6px; }
.ch-head h2 { grid-column: span 2; margin: 0; font-weight: 700; text-transform: uppercase; font-size: clamp(28px, 3.6vw, 52px); line-height: .95; letter-spacing: -.015em; text-wrap: balance; }
.ch-rev { justify-self: end; text-align: right; padding-top: 6px; font: 400 11px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--dim); }
@media (max-width: 1079px) { .ch-head h2 { grid-column: 2; } .ch-rev { grid-column: 2; justify-self: start; text-align: left; padding-top: 14px; } }
@media (max-width: 639px) { .ch-head h2, .ch-rev { grid-column: 1; } .ch-no { padding: 0 var(--pad) 12px; } }

.ch-body { display: grid; grid-template-columns: repeat(var(--cols), minmax(0, 1fr)); }
.ch-body > * { grid-column: 1 / -1; }
.pn { display: block; font: 400 11px/1 var(--mono); color: var(--dim); margin-bottom: 12px; }

.lead { grid-column: 2 / -1 !important; margin: 0 0 clamp(36px, 4vw, 56px); padding-inline: var(--pad); max-width: 24ch; font-weight: 700; text-transform: uppercase; font-size: clamp(24px, 3vw, 44px); line-height: 1.02; letter-spacing: -.015em; text-wrap: balance; }
.cols { display: grid; grid-template-columns: subgrid; border-top: 1px solid var(--hair); }
.cols p { margin: 0; padding: 16px var(--pad) 4px; max-width: 46ch; font-size: 15.5px; color: #cdd5dd; }
.cols p:first-child { grid-column-start: 2; }
@media (max-width: 1079px) { .lead { grid-column: 1 / -1 !important; } .cols p:first-child { grid-column-start: auto; } }

.caps { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: subgrid; border-top: 1px solid var(--hair); }
.caps li { padding: 16px var(--pad) 28px; border-bottom: 1px solid var(--hair); display: grid; gap: 10px; align-content: start; position: relative; transition: background .3s ease; }
.caps li::after { content: "+"; position: absolute; right: var(--pad); top: 12px; font: 400 14px/1 var(--mono); color: var(--dim); transition: transform .4s var(--ease), color .3s ease; }
.caps li:hover { background: rgba(255,255,255,.035); }
.caps li:hover::after { transform: rotate(45deg); color: var(--white); }
.caps h3 { margin: 0; font-size: 15px; font-weight: 700; text-transform: uppercase; line-height: 1.15; padding-right: 18px; }
.caps p { margin: 0; font-size: 14.5px; color: #c3ccd5; }

/* Work */
.annex-note { margin: 0 0 32px 25%; padding-inline: var(--pad); font: 400 11px/1.5 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--dim); max-width: 60ch; }
@media (max-width: 1079px) { .annex-note { margin-left: 50%; } }
@media (max-width: 639px) { .annex-note { margin-left: 0; } }
.dossiers { display: grid; grid-template-columns: repeat(var(--cols), minmax(0, 1fr)); border-top: 1px solid var(--hair); }
.dos { display: grid; gap: 10px; align-content: start; min-width: 0; padding: var(--pad) var(--pad) 24px; border-bottom: 1px solid var(--hair); transition: background .3s ease; }
.dos:hover { background: rgba(255,255,255,.035); }
.fig { position: relative; aspect-ratio: 16 / 10; max-width: 100%; background: #0b0f14; overflow: hidden; }
.fig img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(1) contrast(1.1) brightness(.8); transition: filter 1.2s ease, transform 1.4s var(--ease); }
.fig::before { content: ""; position: absolute; inset: 0; z-index: 1; background: #3d5670; mix-blend-mode: color; pointer-events: none; transition: opacity .6s ease; }
.dos:hover .fig img { filter: none; transform: scale(1.03); }
.dos:hover .fig::before { opacity: 0; }
.dos.released .fig img { filter: grayscale(1) contrast(1.1) brightness(.95); }
.dos.released:hover .fig img { filter: none; }
.fig::after { content: ""; position: absolute; inset: 0; z-index: 1; background: repeating-linear-gradient(0deg, rgba(4,6,9,.35) 0 1px, transparent 1px 3px); opacity: 1; transition: opacity 1.2s ease; pointer-events: none; }
.dos.released .fig::after { opacity: 0; }
.fig-l { position: absolute; left: 8px; top: 8px; z-index: 2; font: 400 10px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; background: var(--white); color: var(--black); padding: 5px 5px 3px 6px; }
.noise { position: absolute; inset: 0; width: 100%; height: 100%; image-rendering: pixelated; }
.stamp { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 2; font: 400 13px/1 var(--mono); text-transform: uppercase; letter-spacing: .12em; border: 1px solid var(--white); padding: 12px 12px 8px 14px; background: #040609; }
.dos-meta span:first-child { white-space: nowrap; }
.dos-by { display: block; margin-top: -4px; font: 400 10px/1.4 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--dim); }
.dos-meta { display: flex; justify-content: space-between; gap: 12px; font: 400 10px/1.4 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--dim); border-bottom: 1px solid var(--hair); padding-bottom: 8px; }
.dos h3 { margin: 0; font-weight: 700; font-size: 17px; line-height: 1.1; text-transform: uppercase; }
.dos p { margin: 0; font-size: 14.5px; line-height: 1.5; color: #c3ccd5; }
.bar-r { background: var(--white); color: transparent; -webkit-box-decoration-break: clone; box-decoration-break: clone; transition: background .9s ease .3s, color .9s ease .3s; }
.dos.released .bar-r:not(.keep) { background: transparent; color: inherit; }
.no-js .bar-r:not(.keep) { background: transparent; color: inherit; }
.no-js .fig img { filter: none; }
@media (prefers-reduced-motion: reduce) { .bar-r, .fig img, .fig::after, .fig::before { transition: none; } }

/* Record: four columns on the four grid columns */
.rec { width: 100%; border-collapse: collapse; table-layout: fixed; font-size: 15px; border-top: 1px solid var(--hair); }
.rec th, .rec td { width: 25%; padding: 12px var(--pad); }
.rec th { text-align: left; font: 400 10.5px/1.4 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--dim); border-bottom: 1px solid var(--hair); }
.rec td { border-bottom: 1px solid var(--hair); vertical-align: baseline; color: #cdd5dd; padding-block: 15px; }
.rec td:first-child { font: 400 12px/1.4 var(--mono); font-variant-numeric: tabular-nums; white-space: nowrap; color: var(--white); }
.rec td:nth-child(2) { font-weight: 700; text-transform: uppercase; font-size: 14px; color: var(--white); }
.rec tbody tr { transition: background .25s ease; }
.rec tbody tr:hover { background: rgba(255,255,255,.035); }
.rec tbody tr:first-child, .rec tbody tr:first-child td { background: var(--white); color: var(--black); border-bottom-color: var(--white); }
@media (max-width: 639px) { .rec thead { display: none; } .rec, .rec tbody, .rec tr, .rec td { display: block; width: auto; } .rec tr { padding: 14px var(--pad); border-bottom: 1px solid var(--hair); } .rec td { border: 0; padding: 2px 0; } }

/* Mood system: one frame per project, on the sheet columns */
#mood { container-type: inline-size; }
.mood { --mc: 4; --g: calc(2 * var(--pad)); display: grid; grid-template-columns: repeat(var(--mc), minmax(0, 1fr)); grid-auto-rows: calc((100cqi - var(--g) * var(--mc)) / var(--mc) * .62); grid-auto-flow: dense; gap: var(--g); padding-inline: var(--pad); }
@media (max-width: 1079px) { .mood { --mc: 2; } }
.m { position: relative; margin: 0; overflow: hidden; background: #0b0f14; }
.m-big { grid-column: span 2; grid-row: span 2; } .m-wide { grid-column: span 2; } .m-tall { grid-row: span 2; }
.m img { width: 100%; height: 100%; object-fit: cover; transition: filter 1.4s ease, transform 1.4s var(--ease); }
.m::before { content: ""; position: absolute; inset: 0; z-index: 1; background: #3d5670; mix-blend-mode: color; pointer-events: none; opacity: 0; transition: opacity 1.4s ease; }
.m:hover img { transform: scale(1.04); }
.m figcaption { position: absolute; left: 8px; top: 8px; z-index: 2; font: 400 10px/1 var(--mono); letter-spacing: .1em; background: var(--white); color: var(--black); padding: 5px 5px 3px 6px; }
.fx .m.rv { translate: none; clip-path: inset(0 0 100% 0); transition: opacity .5s ease, clip-path 1.1s cubic-bezier(.7, 0, .2, 1); transition-delay: calc(var(--i, 0) * 80ms + 120ms); }
.fx .m.rv.in { clip-path: inset(0); }
.fx .m.rv img { filter: grayscale(1) contrast(1.1) brightness(.85); }
.fx .m.rv::before { opacity: 1; }
.fx .m.rv.in img { filter: none; transition-delay: .9s; }
.fx .m.rv.in::before { opacity: 0; transition-delay: .9s; }

/* Talks */
.ch-body.split > .log { grid-column: 2 / span 2; }
.ch-body.split > .talk-fig { grid-column: 4; }
@media (max-width: 1079px) { .ch-body.split > .log { grid-column: 1 / -1; } .ch-body.split > .talk-fig { grid-column: 2; margin-top: 32px; } }
@media (max-width: 639px) { .ch-body.split > .talk-fig { grid-column: 1; } }
.log { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--hair); }
.log li { display: grid; grid-template-columns: 6ch minmax(0, 1fr); align-items: baseline; gap: 2px 16px; padding: 13px var(--pad); border-bottom: 1px solid var(--hair); transition: background .25s ease; }
.log li:hover { background: rgba(255,255,255,.035); }
.log span { font: 400 12px/1.5 var(--mono); grid-row: 1; }
.log b, .log i { grid-column: 2; }
.log b { font-weight: 700; text-transform: uppercase; font-size: 14px; }
.log i { font-style: normal; font-size: 14.5px; color: #aeb8c3; }
.talk-fig { margin: 0 var(--pad); position: relative; border: 1px solid var(--hair-s); align-self: start; }
.talk-fig img { width: 100%; height: auto; filter: grayscale(1) contrast(1.1) brightness(.85); }
.talk-fig::before { content: ""; position: absolute; inset: 0; z-index: 1; background: #3d5670; mix-blend-mode: color; pointer-events: none; }
.talk-fig figcaption { padding: 8px 10px; border-top: 1px solid var(--hair-s); font: 400 10px/1.4 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--dim); }

/* Clients */
.clients { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1px solid var(--hair); }
.clients li { padding: 20px var(--pad) 22px; border-bottom: 1px solid var(--hair); font: 700 clamp(18px, 2.2vw, 32px)/1 var(--body); text-transform: uppercase; letter-spacing: -.01em; transition: background .2s ease, color .2s ease; }
.clients li:hover { background: var(--white); color: var(--black); }
@media (max-width: 1079px) { .clients { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 639px) { .clients li:nth-child(odd) { border-right: 1px solid var(--hair); } }

/* Contact */
.mail { display: block; margin: 0 0 40px; padding-inline: var(--pad); font: 700 min(84px, calc((100vw - 2 * var(--gut) - 2 * var(--pad)) / 16.4))/1 var(--mark); text-transform: uppercase; text-decoration: none; overflow-wrap: anywhere; }
.mail:hover { text-decoration: underline; text-decoration-thickness: 3px; text-underline-offset: 8px; }
.contact-grid { display: grid; grid-template-columns: repeat(var(--cols), minmax(0, 1fr)); border-top: 1px solid var(--hair); font-size: 15px; }
.contact-grid > div { padding: 14px var(--pad) 18px; border-bottom: 1px solid var(--hair); }
.contact-grid span { display: block; font: 400 10.5px/1.6 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--dim); }

.legal-grid { display: grid; grid-template-columns: repeat(var(--cols), minmax(0, 1fr)); font-size: 13.5px; color: #aeb8c3; }
.legal-grid > div { grid-column: span 1; padding-inline: var(--pad); }
.legal-grid > ol { grid-column: span 2; margin: 0; padding: 0 var(--pad) 0 calc(var(--pad) + 1.2em); display: grid; gap: 8px; }
@media (max-width: 1079px) { .legal-grid > div, .legal-grid > ol { grid-column: 1 / -1; } .legal-grid > ol { margin-top: 16px; } }
.legal p { margin: 0 0 14px; }

/* Footer: last row of the sheet */
.end { position: relative; margin: 0 var(--gut-r) calc(18px + env(safe-area-inset-bottom, 0px)) var(--gut); display: grid; grid-template-columns: repeat(var(--cols), minmax(0, 1fr)); border-top: 1px solid var(--hair-s); border-bottom: 1px solid var(--hair-s); font: 400 10.5px/1.4 var(--mono); letter-spacing: .06em; text-transform: uppercase; }
.end > div { padding: 12px var(--pad) 14px; display: grid; gap: 6px; align-content: start; min-width: 0; }
.end small { font-size: 9px; color: var(--dim); letter-spacing: .1em; }
.end b { font: 400 15px/1.1 var(--mono); }
.end a { color: inherit; }
.morse { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding-block: 6px; }
.morse b { display: flex; gap: 2px; }
.morse i { display: block; height: 4px; width: 4px; background: var(--white); }
.morse i.l { width: 10px; }
@media (max-width: 1079px) { .end > div:nth-child(-n+2) { border-bottom: 1px solid var(--hair); } }
@media (max-width: 639px) { .end { grid-template-columns: repeat(2, minmax(0, 1fr)); } .end > div:first-child { grid-column: 1 / -1; } .end > div:nth-child(2) { border-right: 1px solid var(--hair); } .end > div:nth-child(4) { grid-column: 1 / -1; } }

/* Sub pages */
.sub { padding-top: calc(72px + env(safe-area-inset-top, 0px)); min-height: calc(100svh - 120px); }

/* Scroll motion: rules draw in, content steps in column by column */
.fx .ch::before, .fx .annex::before, .fx .contact::before, .fx .legal::before { transform: scaleX(0); transition: transform 1.2s var(--ease); }
.fx .ch.in::before, .fx .annex.in::before, .fx .contact.in::before, .fx .legal.in::before { transform: none; }
.fx .ch::after, .fx .annex::after, .fx .contact::after, .fx .legal::after { transform: scale(0); transition: transform .4s var(--ease) .1s; }
.fx .in::after { transform: none; }
.fx .rv { opacity: 0; translate: 0 16px; transition: opacity .7s ease, translate 1s var(--ease); transition-delay: calc(var(--i, 0) * 80ms + 120ms); }
.fx .rv.in { opacity: 1; translate: none; }
.fx .dos.rv .fig { clip-path: inset(0 0 100% 0); transition: clip-path 1.1s cubic-bezier(.7, 0, .2, 1) calc(var(--i, 0) * 80ms + 260ms); }
.fx .dos.rv.in .fig { clip-path: inset(0); }
.fx .talk-fig.rv { clip-path: inset(0 100% 0 0); transition: clip-path 1.2s cubic-bezier(.7, 0, .2, 1) .2s, opacity .4s ease .2s; translate: none; }
.fx .talk-fig.rv.in { clip-path: inset(0); }
.fx .end.rv { translate: none; }