/* stelies.github.io — static site, no build step. All paths are relative. */

@font-face { font-family: "Big Shoulders"; src: url("fonts/big-shoulders.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }
@font-face { font-family: "Inter"; src: url("fonts/inter.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }
@font-face { font-family: "JetBrains Mono"; src: url("fonts/jetbrains-mono.woff2") format("woff2"); font-weight: 100 800; font-display: swap; }

:root {
  --bg: #0d0e24;
  --panel: #1a1b31;
  --line: #26253a;
  --line-2: #3a3956;
  --text: #f2f2f2;
  --dim: #a3a1b6;
  --mute: #6f6e87;
  --blue: #0202f1;
  --blue-line: #3635c5;
  --blue-hi: #5b5bff;
  --ink: #0a0ac8;

  --display: "Big Shoulders", "Arial Narrow", Impact, sans-serif;
  --sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  --pad: clamp(20px, 4.2vw, 76px);
  --max: 1760px;
  --gap: clamp(16px, 2vw, 40px);
  --fh: clamp(430px, 66vh, 660px);
}

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

html {
  background: var(--bg);
  color-scheme: dark;
  -webkit-text-size-adjust: 100%;
  scroll-behavior: auto;          /* scrolling is eased in JS */
  scrollbar-width: none;          /* native scrollbar hidden; .prog replaces it */
}
html::-webkit-scrollbar, body::-webkit-scrollbar { display: none; width: 0; height: 0; }

body {
  margin: 0;
  min-height: 100vh;
  background: var(--bg);
  color: var(--text);
  font: 300 clamp(16px, 1.22vw, 19px) / 1.4 var(--sans);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
body.locked { overflow: hidden; }

/* film grain */
body::after {
  content: ""; position: fixed; inset: 0; z-index: 90; pointer-events: none;
  background: url("grain.png") 0 0 / 256px 256px;
  opacity: .9;
  animation: grain .9s steps(1) infinite;
}
@keyframes grain {
  0% { background-position: 0 0; } 17% { background-position: -37px 21px; } 33% { background-position: 29px -53px; }
  50% { background-position: -61px -17px; } 67% { background-position: 43px 39px; } 83% { background-position: -19px 58px; }
}

::selection { background: var(--blue); color: #fff; }

img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
p, h1, h2, h3, figure, dl, dd, ul, ol { margin: 0; padding: 0; }
ul, ol { list-style: none; }
:focus-visible { outline: 2px solid var(--text); outline-offset: 3px; }

.skip { position: absolute; left: var(--pad); top: -80px; z-index: 100; background: var(--text); color: var(--bg); padding: 10px 14px; font: 500 14px var(--mono); }
.skip:focus { top: 12px; }
.wrap { width: 100%; max-width: var(--max); margin-inline: auto; padding-inline: var(--pad); }

.mono { font-family: var(--mono); font-size: 12px; font-weight: 400; letter-spacing: .1em; text-transform: uppercase; }
.display { font-family: var(--display); font-weight: 300; text-transform: uppercase; line-height: .88; letter-spacing: 0; }

/* ———————————————— scroll progress ———————————————— */
.prog { position: fixed; top: 0; right: 0; width: 3px; height: 100%; z-index: 75; background: var(--blue-hi); transform: scaleY(0); transform-origin: top; pointer-events: none; }

/* ———————————————— topbar (pulled down by scrolling up) ———————————————— */
.topbar {
  position: fixed; top: 0; left: 0; right: 0; z-index: 70;
  background: var(--bg); border-bottom: 1px solid var(--line-2);
  transform: translate3d(0, -101%, 0); will-change: transform;
}
.topbar.snap { transition: transform .3s cubic-bezier(.2, .7, .2, 1); }
.top { display: grid; grid-template-columns: 1fr 1fr 76px 1fr 1fr; align-items: center; padding-block: 12px; }
.top a.link {
  justify-self: center; padding: 10px 6px; color: #b7b6c9; border-bottom: 1px solid transparent;
  font: 500 clamp(15px, 1.2vw, 19px) / 1 var(--display); letter-spacing: .16em; text-transform: uppercase;
  transition: color .12s linear, border-color .12s linear;
}
.top a.link:hover { color: var(--text); border-bottom-color: var(--text); }
.top .ext::after { content: " ↗"; letter-spacing: 0; }
.emblem { justify-self: center; display: block; width: 44px; height: 60px; color: var(--text); }
.emblem svg { width: 100%; height: 100%; display: block; }

/* ———————————————— command bar ———————————————— */
.cmdbar {
  display: flex; align-items: center; gap: 14px;
  width: min(100%, clamp(320px, 52vw, 780px)); height: 56px; margin: 0 auto; padding: 0 14px 0 18px;
  background: var(--panel); border: 2px solid var(--blue-line); text-align: left;
  transition: border-color .12s linear, background .12s linear;
}
.cmdbar:hover { border-color: var(--blue-hi); background: #202039; }
.cmdbar .glyph { flex: none; width: 30px; height: 30px; color: var(--blue-hi); }
.cmdbar .label { flex: 1; min-width: 0; font: 400 15px / 1 var(--sans); color: var(--dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cmdbar .label b { font-weight: 400; color: var(--text); }
.cmdbar .caret { display: inline-block; width: 8px; height: 15px; margin-left: 8px; vertical-align: -2px; background: var(--blue-hi); animation: blink 1.1s steps(1) infinite; }
.cmdbar .toggle { flex: none; display: flex; align-items: center; gap: 10px; color: var(--mute); }
.cmdbar .toggle .mono { font-size: 11px; }
.kbd { display: inline-grid; place-items: center; min-width: 26px; height: 28px; padding: 0 6px; background: #2b2a45; border: 1px solid #4a4968; font: 500 12px / 1 var(--mono); letter-spacing: 0; color: var(--dim); }
.kbds { display: inline-flex; gap: 5px; }
@keyframes blink { 50% { opacity: 0; } }

/* ———————————————— layers ———————————————— */
.layer { position: relative; z-index: 2; background: var(--bg); }
#layerA { padding-bottom: clamp(72px, 9vw, 160px); border-bottom: 1px solid var(--line-2); }
#layerB { border-top: 1px solid var(--line-2); margin-bottom: var(--fh); }

/* ———————————————— hero ———————————————— */
.hero { text-align: center; padding-top: clamp(100px, 8.4vw, 150px); }
.hero .cmdbar { margin-bottom: clamp(44px, 5.4vw, 96px); }
.eyebrow { font: 600 13px / 1 var(--sans); letter-spacing: .04em; text-transform: uppercase; display: inline-flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: .7em; }
.eyebrow i { display: inline-block; width: 6px; height: 6px; background: var(--text); }

.fitbox { width: 100%; text-align: center; line-height: 1; }
.fit { display: inline-block; white-space: nowrap; font-size: 20vw; }
.hero .fitbox { margin: clamp(22px, 2.6vw, 44px) 0 clamp(26px, 3vw, 52px); }
.hero .fit, .close .fit { line-height: .8; font-weight: 300; }

.lede { max-width: 33em; margin-inline: auto; font-size: clamp(16px, 1.32vw, 21px); line-height: 1.32; color: var(--text); }
.lede + .lede { margin-top: 1.3em; }
.lede em { font-style: normal; color: var(--dim); }

.btns { display: inline-flex; margin-top: clamp(30px, 3vw, 52px); }
.btn { display: inline-block; padding: 17px 20px 15px; font: 500 clamp(17px, 1.34vw, 21px) / 1 var(--display); letter-spacing: .03em; text-transform: uppercase; white-space: nowrap; text-align: center; transition: background .1s linear, color .1s linear; }
.btn-dark { background: var(--panel); color: var(--text); }
.btn-dark:hover { background: #2a2a48; }
.btn-blue { background: var(--blue); color: #fff; }
.btn-blue:hover { background: var(--text); color: var(--bg); }

.hint { display: flex; justify-content: space-between; gap: 20px; margin-top: clamp(56px, 7vw, 128px); color: var(--mute); transition: opacity .4s linear; }
.hint.seen { opacity: 0; }

/* ———————————————— sections ———————————————— */
.sec { padding-top: clamp(72px, 8vw, 150px); }
.sec-head { position: relative; display: flex; justify-content: space-between; align-items: baseline; gap: 20px; padding-top: 14px; color: var(--dim); }
.sec-head::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px; background: var(--line-2); transform-origin: left center; }
.js .sec-head::before { transform: scaleX(0); transition: transform 1.2s cubic-bezier(.2, .7, .1, 1) .1s; }
.js .sec-head.on::before { transform: none; }
.sec-head .idx { color: var(--mute); }

.statement { margin-top: clamp(28px, 3.6vw, 64px); font-size: clamp(42px, 7.2vw, 128px); max-width: 13.5em; }
.statement s { text-decoration: none; color: var(--mute); }

.spec { display: grid; grid-template-columns: repeat(3, 1fr); margin-top: clamp(40px, 5vw, 88px); border-top: 1px solid var(--line); border-left: 1px solid var(--line); }
.spec > div { padding: 18px 20px 22px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.spec dt { color: var(--mute); margin-bottom: 14px; }
.spec dd { font: 300 clamp(30px, 3.4vw, 58px) / 1 var(--display); letter-spacing: .01em; text-transform: uppercase; }
.spec dd small { font: 400 12px var(--mono); letter-spacing: .08em; color: var(--dim); margin-left: 10px; }

/* ———————————————— work list ———————————————— */
.rows { margin-top: clamp(40px, 5vw, 88px); border-top: 1px solid var(--line-2); border-bottom: 1px solid var(--line-2); }
.row {
  position: relative;
  display: grid; grid-template-columns: 3.5rem minmax(0, 1.1fr) minmax(0, 1fr) 8.5rem; gap: 0 var(--gap); align-items: center;
  padding: clamp(24px, 2.6vw, 44px) 16px;
  border-top: 1px solid var(--line-2);
}
.row:first-child { border-top: 0; }
.row .n { color: var(--mute); align-self: start; padding-top: .5em; }
.row h3 { font-size: clamp(48px, 6.6vw, 112px); transition: transform .35s cubic-bezier(.2, .7, .2, 1); }
.row p { color: var(--dim); max-width: 32em; font-size: clamp(15px, 1.15vw, 18px); line-height: 1.45; }
.tag { justify-self: end; padding: 6px 9px 5px; border: 1px solid var(--line-2); color: var(--dim); font: 400 11px / 1 var(--mono); letter-spacing: .12em; text-transform: uppercase; white-space: nowrap; }

/* hover = the row floods blue; the title nudges right */
.js .row.rv { transition: opacity .6s cubic-bezier(.2, .7, .2, 1), transform .6s cubic-bezier(.2, .7, .2, 1), background .12s linear, color .12s linear; }
.row:hover { background: var(--blue); color: #fff; }
.row:hover h3 { transform: translateX(14px); }
.row:hover p { color: #dcdcff; }
.row:hover .n { color: #c9c9ff; }
.row:hover .tag { border-color: #fff; color: #fff; }
.row:focus-visible { outline-offset: -2px; }

/* ———————————————— contact ———————————————— */
.close { text-align: center; padding-bottom: clamp(56px, 7vw, 120px); }
.close .fitbox { margin: clamp(24px, 3vw, 52px) 0 clamp(20px, 2vw, 32px); }
.close .lede { color: var(--dim); }

/* ———————————————— footer: light, fixed underneath, revealed as the page lifts ———————————————— */
.foot { position: fixed; left: 0; right: 0; bottom: 0; z-index: 0; height: var(--fh); background: #f2f2f2; color: var(--ink); display: flex; flex-direction: column; justify-content: flex-end; overflow: hidden; }
.foot ::selection { background: var(--ink); color: #f2f2f2; }
.foot .ghost { position: absolute; left: 0; right: 0; top: clamp(14px, 3vh, 40px); text-align: center; line-height: .8; pointer-events: none; user-select: none; }
.foot .ghost .fit { color: #e6e7f5; font-weight: 200; line-height: .8; }
.foot-row { position: relative; z-index: 2; display: grid; grid-template-columns: 1fr auto 1fr; align-items: end; gap: 24px; padding-bottom: clamp(32px, 4.4vw, 68px); font: 500 clamp(15px, 1.3vw, 21px) / 1.9 var(--display); letter-spacing: .02em; text-transform: uppercase; }
.foot-row p { margin: 0; }
.foot .fr { text-align: right; }
.fcards { display: flex; gap: clamp(14px, 1.6vw, 24px); }
.fcard { display: grid; place-items: center; width: clamp(38px, 3.4vw, 50px); height: clamp(54px, 4.8vw, 70px); border: 2px solid var(--ink); color: var(--ink); transition: background .12s linear, color .12s linear; }
.fcard:hover { background: var(--ink); color: #f2f2f2; }
.foot :focus-visible { outline-color: var(--ink); }

/* ———————————————— command palette ———————————————— */
.pal { position: fixed; inset: 0; z-index: 80; display: none; }
.pal.open { display: block; }
.pal-bg { position: absolute; inset: 0; background: rgba(8, 9, 24, .94); }
.pal-box { position: absolute; left: 50%; top: clamp(70px, 14vh, 160px); width: min(760px, calc(100vw - 32px)); transform: translateX(-50%); }
.pal.open .pal-bg { animation: fade .2s linear; }
.pal.open .pal-box { animation: palin .28s cubic-bezier(.2, .7, .2, 1); }
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes palin { from { opacity: 0; transform: translate(-50%, 14px); } to { opacity: 1; transform: translate(-50%, 0); } }
.pal-in { display: flex; align-items: center; gap: 14px; height: 60px; padding: 0 16px 0 18px; background: var(--panel); border: 2px solid var(--blue-hi); }
.pal-in .glyph { width: 28px; height: 28px; color: var(--blue-hi); flex: none; }
.pal-in input { flex: 1; min-width: 0; height: 100%; background: none; border: 0; outline: 0; color: var(--text); font: 400 16px var(--sans); caret-color: var(--blue-hi); }
.pal-in input::placeholder { color: var(--mute); }
.pal-list { max-height: min(52vh, 420px); overflow: auto; margin-top: 8px; background: var(--panel); border: 1px solid var(--line-2); scrollbar-width: thin; scrollbar-color: var(--line-2) transparent; }
.pal-item { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 14px 18px; font: 400 15px / 1.1 var(--sans); color: var(--dim); cursor: pointer; }
.pal-item .g { font: 400 11px / 1 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--mute); }
.pal-item[aria-selected="true"] { background: var(--blue); color: #fff; }
.pal-item[aria-selected="true"] .g { color: #c9c9ff; }
.pal-empty { padding: 22px 18px; color: var(--mute); }
.pal-foot { display: flex; flex-wrap: wrap; gap: 8px 22px; margin-top: 8px; padding: 12px 16px; background: var(--panel); border: 1px solid var(--line-2); color: var(--mute); }
.pal-foot .msg { margin-left: auto; color: var(--text); }

/* ———————————————— load + scroll animation ———————————————— */
@keyframes rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes lift { from { transform: translateY(112%); } to { transform: none; } }
@keyframes unhide { to { visibility: visible; } }

.js .in { animation: rise .6s cubic-bezier(.2, .7, .2, 1) backwards; animation-delay: calc(var(--i, 0) * 70ms); }
.js .rv { opacity: 0; transform: translateY(18px); transition: opacity .6s cubic-bezier(.2, .7, .2, 1), transform .6s cubic-bezier(.2, .7, .2, 1); }
.js .rv.on { opacity: 1; transform: none; }

/* big words: letters rise out of a mask; headings rise word by word */
.js [data-letters]:not(.letters), .js [data-words]:not(.words) { visibility: hidden; animation: unhide 0s 2.6s forwards; }
.letters .l { display: inline-block; overflow: hidden; vertical-align: top; padding: .11em 0; margin: -.11em 0; }
.letters .c { display: inline-block; transform: translateY(112%); }
.letters.on .c { animation: lift 1s cubic-bezier(.2, .85, .1, 1) forwards; animation-delay: calc(var(--k) * 60ms + var(--base, 0ms)); }
.words .w { display: inline-block; overflow: hidden; vertical-align: top; padding: .1em 0 .24em; margin: -.1em 0 -.24em; }
.words .w > span { display: inline-block; transform: translateY(115%); }
.words.on .w > span { transform: none; transition: transform .95s cubic-bezier(.2, .85, .1, 1); transition-delay: calc(var(--k) * 55ms); }

/* ———————————————— small screens ———————————————— */
@media (max-width: 900px) {
  .row { grid-template-columns: 2.4rem minmax(0, 1fr) auto; row-gap: 12px; }
  .row .n { grid-row: 1; align-self: center; padding-top: 0; }
  .row .tag { grid-column: 3; grid-row: 1; }
  .row h3 { grid-column: 2 / 4; grid-row: 2; }
  .row p { grid-column: 2 / 4; grid-row: 3; }
  .spec { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .top { grid-template-columns: repeat(4, auto) !important; justify-content: space-between; }
  .top .emblem { display: none; }
  .top a.link { padding-inline: 0; font-size: 14px; letter-spacing: .1em; }
  .cmdbar .toggle { display: none; }
  .cmdbar .label { font-size: 14px; }
  .btns { display: flex; flex-direction: column; width: 100%; }
  .btn { padding-block: 18px 16px; }
  .hint { flex-direction: column; gap: 6px; }
  .foot-row { grid-template-columns: 1fr; justify-items: center; text-align: center; gap: 22px; }
  .foot .fr { text-align: center; }
  :root { --fh: clamp(480px, 74vh, 620px); }
}

@media (prefers-reduced-motion: reduce) {
  .js .in { animation: none; }
  .js .rv { opacity: 1; transform: none; transition: none; }
  .letters .c, .words .w > span { transform: none !important; animation: none !important; transition: none !important; }
  .js .sec-head::before { transform: none; transition: none; }
  .cmdbar .caret, body::after { animation: none; }
  .topbar.snap { transition: none; }
  .row h3 { transition: none; }
}

/* ———————————————— artex section ———————————————— */
.lede.left { margin-inline: 0; margin-top: clamp(24px, 2.6vw, 44px); color: var(--dim); }


.svc { display: grid; grid-template-columns: repeat(3, 1fr); margin-top: clamp(56px, 6vw, 104px); border-top: 1px solid var(--line-2); }
.svc > div { padding: clamp(20px, 2vw, 32px) clamp(16px, 2vw, 32px) clamp(24px, 2.4vw, 40px) 0; }
.svc > div + div { padding-left: clamp(16px, 2vw, 32px); border-left: 1px solid var(--line); }
.svc h3 { font-size: clamp(36px, 3.6vw, 64px); }
.svc ul { list-style: none; margin: clamp(14px, 1.4vw, 22px) 0 0; padding: 0; color: var(--dim); font-size: clamp(15px, 1.15vw, 18px); line-height: 1.5; }
.svc li { padding: 7px 0; border-top: 1px solid var(--line); }
.svc li:first-child { border-top: 0; }

.sub-h { margin-top: 0; font-size: clamp(36px, 4.4vw, 76px); }
.sub-h s { text-decoration: none; color: var(--mute); }
.price { list-style: none; margin: clamp(24px, 3vw, 48px) 0 0; padding: 0; border-top: 1px solid var(--line-2); border-bottom: 1px solid var(--line-2); }
.price li { display: grid; grid-template-columns: 2.4rem minmax(0, 1fr) auto; gap: 8px var(--gap); align-items: baseline; padding: clamp(16px, 1.6vw, 24px) 4px; border-top: 1px solid var(--line); }
.price li .n { grid-row: 1; }
.price li h4 { grid-column: 2; grid-row: 1; }
.price li b { grid-column: 3; grid-row: 1; }
.price li p { grid-column: 2 / 4; grid-row: 2; }
.price li:first-child { border-top: 0; }
.price .n { color: var(--mute); }
.price h4 { margin: 0; font: 300 clamp(26px, 2.4vw, 42px) / 1 var(--display); text-transform: uppercase; letter-spacing: .01em; }
.price p { color: var(--dim); font-size: clamp(14px, 1.05vw, 17px); line-height: 1.45; max-width: 36em; }
.price b { justify-self: end; text-align: right; font: 300 clamp(26px, 2.4vw, 42px) / 1 var(--display); text-transform: uppercase; }
.price b small { display: block; margin-top: 8px; font: 400 11px / 1.3 var(--mono); letter-spacing: .08em; color: var(--dim); text-transform: none; }
.fine { margin-top: 18px; color: var(--mute); font-size: 12px; letter-spacing: .04em; }
#artex .btns { margin-top: clamp(28px, 3vw, 48px); }

/* ———————————————— contact channels ———————————————— */
.chan { list-style: none; margin: clamp(30px, 3vw, 52px) auto 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--line-2); border-left: 1px solid var(--line-2); text-align: left; }
.chan li { display: flex; }
.chan-i { flex: 1; display: flex; flex-direction: column; gap: 14px; min-height: 150px; padding: 16px 18px 18px; background: none; border: 0; border-right: 1px solid var(--line-2); border-bottom: 1px solid var(--line-2); color: var(--text); font: inherit; text-align: left; cursor: pointer; transition: background .12s linear, color .12s linear; }
.chan-i span { color: var(--mute); }
.chan-i b { font: 300 clamp(26px, 2.5vw, 44px) / 1.05 var(--display); text-transform: uppercase; letter-spacing: .01em; overflow-wrap: anywhere; }
.chan-i i { margin-top: auto; align-self: flex-end; font-style: normal; color: var(--dim); letter-spacing: .12em; text-transform: uppercase; font-size: 11px; }
.chan-i:hover { background: var(--blue); color: #fff; }
.chan-i:hover span, .chan-i:hover i { color: #c9c9ff; }

@media (max-width: 1100px) {
  .chan { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 900px) {
  .svc { grid-template-columns: 1fr; }
  .svc > div, .svc > div + div { padding: 20px 0 24px; border-left: 0; border-top: 1px solid var(--line); }
  .svc > div:first-child { border-top: 0; }
}
@media (max-width: 520px) {
  .chan { grid-template-columns: 1fr; }
  .chan-i { min-height: 0; }
}

.spec-4 { grid-template-columns: repeat(4, 1fr); }
.spec-4 dd small { display: block; margin: 8px 0 0; }
@media (max-width: 1100px) { .spec-4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 900px) { .spec-4 { grid-template-columns: 1fr; } }

/* ———————————————— images ————————————————
   Every plate is a flat grayscale source. `screen` drops its blacks into the page navy, so all of them sit
   in the same palette. Frames take the picture's own proportions, so nothing is cropped and nothing floats in empty space. */
@property --b { syntax: "<length>"; inherits: false; initial-value: 0px; }

.cap { position: absolute; left: 0; bottom: 0; z-index: 3; display: flex; gap: 14px; padding: 9px 12px 8px; background: var(--bg); color: var(--dim); font: 400 11px / 1 var(--mono); letter-spacing: .12em; text-transform: uppercase; }
.cap b { font-weight: 400; color: var(--text); }
.fig { position: relative; margin: 0; overflow: hidden; background: var(--bg); border: 1px solid var(--line-2); aspect-ratio: var(--r); }
.fig img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; mix-blend-mode: screen; }
.fig.px img { image-rendering: pixelated; }

/* blinds: a picture opens through horizontal slats as it scrolls in */
.js .bl { --b: 0px; -webkit-mask-image: repeating-linear-gradient(180deg, #000 0, #000 var(--b), transparent var(--b), transparent 8px); mask-image: repeating-linear-gradient(180deg, #000 0, #000 var(--b), transparent var(--b), transparent 8px); transition: --b 1.1s cubic-bezier(.3, .7, .2, 1); }
.js .bl.on { --b: 8px; }
.js .bl img { transform: scale(1.12); transition: transform 1.9s cubic-bezier(.2, .7, .1, 1); }
.js .bl.on img { transform: none; }

.split { display: grid; grid-template-columns: repeat(12, 1fr); gap: 0 var(--gap); margin-top: clamp(28px, 3.6vw, 64px); align-items: start; }
.fig-a { grid-column: 1 / 5; }
.split-body { grid-column: 6 / 13; }
.split .lede.left { margin-top: 0; max-width: 34em; }
.split .svc { margin-top: clamp(32px, 3.4vw, 56px); }
.split-rev .split-body { grid-column: 1 / 9; }
.fig-b { grid-column: 9 / 13; position: sticky; top: clamp(72px, 9vh, 110px); }
.split-rev { align-items: start; }

.duo { display: flex; align-items: flex-start; gap: var(--gap); margin-top: clamp(20px, 2.2vw, 40px); }
.duo .fig { flex: var(--r) 1 0; min-width: 0; }
#israelgpt .duo, #design .duo:first-of-type { margin-top: clamp(40px, 5vw, 88px); }

.skills { display: grid; grid-template-columns: repeat(4, 1fr); margin-top: clamp(40px, 5vw, 88px); border-top: 1px solid var(--line-2); }
.skills li { padding: 20px clamp(14px, 1.6vw, 28px) 8px 0; }
.skills li + li { padding-left: clamp(14px, 1.6vw, 28px); border-left: 1px solid var(--line); }
.skills .n { color: var(--mute); }
.skills h3 { margin-top: 18px; font-size: clamp(30px, 3vw, 52px); }
.skills p { margin-top: 12px; color: var(--dim); font-size: clamp(14px, 1.05vw, 17px); line-height: 1.45; max-width: 20em; }

/* ———————————————— the pinned studio moment ————————————————
   layer A (opaque) → hole (transparent, tall) → layer B (opaque). The picture is position:fixed inside the hole, so it is only
   ever visible there: layer A lifts off it, it opens through slats as you arrive, then layer B slides up over it. */
.hole { position: relative; z-index: 1; height: 0; pointer-events: none; }
.js .hole { height: 230vh; height: 230svh; }
.curtain { position: fixed; left: 0; right: 0; top: 0; height: 100vh; height: 100lvh; overflow: hidden; background: var(--bg); visibility: hidden; pointer-events: auto; }
.curtain-img { --b: 0px; position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; mix-blend-mode: screen; will-change: transform, filter;
  -webkit-mask-image: repeating-linear-gradient(180deg, #000 0, #000 var(--b), transparent var(--b), transparent 8px); mask-image: repeating-linear-gradient(180deg, #000 0, #000 var(--b), transparent var(--b), transparent 8px); }
.curtain::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(0deg, rgba(9, 10, 27, .92) 0%, rgba(9, 10, 27, .55) 38%, transparent 70%); }
.curtain-in { position: relative; z-index: 2; height: 100vh; height: 100svh; display: flex; flex-direction: column; padding-block: clamp(24px, 3vw, 56px); will-change: transform, opacity; }
.curtain .sec-head { color: #fff; }
.curtain .sec-head::before { background: rgba(255, 255, 255, .5); }
.curtain .sec-head .idx { color: #d8c8e8; }
.cu-body { margin-top: auto; padding-bottom: clamp(8px, 2vh, 28px); }
.cu-title { font-size: clamp(54px, 9.2vw, 170px); line-height: .88; color: #fff; }
.cu-sub { margin-top: clamp(18px, 2.2vw, 34px); max-width: 30em; color: #dcd8ea; font-size: clamp(15px, 1.25vw, 20px); line-height: 1.4; }
.cu-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: clamp(24px, 3vw, 48px); border-top: 1px solid rgba(255, 255, 255, .3); }
.cu-stats > div { padding: 16px clamp(10px, 1.6vw, 28px) 0 0; }
.cu-stats > div + div { padding-left: clamp(10px, 1.6vw, 28px); border-left: 1px solid rgba(255, 255, 255, .18); }
.cu-stats dt { color: #bfb8d2; }
.cu-stats dd { margin-top: 10px; font: 300 clamp(34px, 4.6vw, 84px) / 1 var(--display); letter-spacing: .01em; color: #fff; }
.js .rise { opacity: 0; transform: translateY(26px); transition: opacity .8s cubic-bezier(.2, .7, .2, 1), transform .8s cubic-bezier(.2, .7, .2, 1); transition-delay: calc(var(--i, 0) * 110ms); }
.js .curtain.on .rise { opacity: 1; transform: none; }

@media (max-width: 1100px) { .skills { grid-template-columns: repeat(2, 1fr); } .skills li:nth-child(3) { padding-left: 0; border-left: 0; } .skills li:nth-child(n+3) { border-top: 1px solid var(--line); margin-top: 16px; } }
@media (max-width: 900px) {
  .fig-a, .split-body, .split-rev .split-body, .fig-b { grid-column: 1 / 13; }
  .fig-a { margin-bottom: 28px; max-width: 420px; }
  .fig-b { position: relative; top: 0; margin-top: 32px; max-width: 420px; }
  .duo { flex-direction: column; }
  .duo .fig { flex: none; width: 100%; }
  .cu-stats dd { font-size: clamp(26px, 8vw, 44px); }
}
@media (max-width: 520px) { .skills { grid-template-columns: 1fr; } .skills li, .skills li + li { padding-left: 0; border-left: 0; } .skills li + li { border-top: 1px solid var(--line); margin-top: 16px; } .cu-stats { grid-template-columns: 1fr; } .cu-stats > div, .cu-stats > div + div { padding: 12px 0 0; border-left: 0; } }
@media (prefers-reduced-motion: reduce) {
  .js .bl { -webkit-mask-image: none; mask-image: none; transition: none; }
  .js .bl img, .js .rise { transform: none; transition: none; }
  .js .rise { opacity: 1; }
}

/* video plates, with the same overlay as the stills */
.fig video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; mix-blend-mode: screen; filter: grayscale(1) contrast(1.3) brightness(1.05); }
.fig.vid::after { content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none; background: url("img/overlay.webp") 0 0 / 253px 316px; }
.anim { margin-top: clamp(48px, 5.5vw, 96px); }
.anim .duo { margin-top: clamp(24px, 2.6vw, 44px); }
.anim .fine { margin-top: 16px; }