/* SNFN portfolio proposal. The structure comes from the Figma wireframes; the look comes from the
   resource library: black room, bone ink, one red, technical line plates and mono labels. */
:root {
  --room: #050404;
  --panel: #0c0a0a;
  --ink: #f1ece4;
  --dim: #8f8580;
  --faint: #4a4241;
  --rule: #231e1d;
  --red: #ff2b1c;
  --display: 'Black Ops One', 'Impact', sans-serif;
  --mono: 'IBM Plex Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace;
  --gutter: clamp(16px, 5vw, 72px);
  --max: 1240px;
  --section: clamp(112px, 16vw, 220px);
  color-scheme: dark;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
html, body { background: var(--room); color: var(--ink); overflow-x: clip; }
body { margin: 0; font: 15px/1.65 var(--mono); -webkit-font-smoothing: antialiased; overflow-x: clip; }
img, canvas, iframe { display: block; max-width: 100%; }
a { color: inherit; }
::selection { background: var(--red); color: var(--room); }
:focus-visible { outline: 2px solid var(--red); outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation: none !important; transition: none !important; } }

.wrap { width: 100%; max-width: calc(var(--max) + var(--gutter) * 2); margin: 0 auto; padding-inline: var(--gutter); }
.section { padding-block: var(--section); }
.section + .section { border-top: 1px solid var(--rule); }

/* type */
.label { margin: 0; display: inline-flex; align-items: center; gap: 10px; font-size: 11px; letter-spacing: .18em; text-transform: uppercase; color: var(--dim); }
.label::before { content: ""; width: 7px; height: 7px; background: var(--red); flex: none; }
.label.plain::before { display: none; }
.display { margin: 0; font: 400 clamp(40px, 6vw, 80px)/.95 var(--display); letter-spacing: .005em; text-wrap: balance; }
.display.xl { font-size: clamp(64px, 13vw, 200px); }
.display .red, .red { color: var(--red); }
.lede { margin: 0; max-width: 54ch; color: var(--ink); font-size: clamp(15px, 1.4vw, 17px); line-height: 1.7; }
.muted { color: var(--dim); }
.num { font-size: 12px; letter-spacing: .14em; color: var(--red); font-variant-numeric: tabular-nums; }
.pending { color: var(--faint); }

/* nav */
.nav { position: fixed; inset: 0 0 auto 0; z-index: 50; display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 18px var(--gutter); background: linear-gradient(var(--room) 20%, transparent); pointer-events: none; }
.nav > * { pointer-events: auto; }
.brand { font: 400 22px/1 var(--display); text-decoration: none; letter-spacing: .02em; }
.brand:hover { color: var(--red); }
.nav ul { list-style: none; margin: 0; padding: 0; display: flex; gap: clamp(14px, 3vw, 36px); flex-wrap: wrap; justify-content: flex-end; }
.nav a:not(.brand) { font-size: 11px; letter-spacing: .16em; text-transform: uppercase; text-decoration: none; color: var(--dim); }
.nav a:not(.brand):hover, .nav a[aria-current] { color: var(--ink); }
.nav a[aria-current]::before { content: "■ "; color: var(--red); }

/* buttons, tags */
.btn { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; padding: 12px 18px; border: 1px solid var(--red); background: var(--red); color: #140f0f;
  font: 600 11px/1 var(--mono); letter-spacing: .16em; text-transform: uppercase; text-decoration: none; cursor: pointer; }
.btn:hover { background: transparent; color: var(--red); }
.btn.ghost { background: transparent; border-color: var(--rule); color: var(--ink); }
.btn.ghost:hover { border-color: var(--ink); color: var(--ink); }
.btn[aria-disabled="true"] { opacity: .45; pointer-events: none; }
.arrow { font-size: 11px; letter-spacing: .16em; text-transform: uppercase; text-decoration: none; color: var(--ink); }
.arrow::after { content: " →"; color: var(--red); }
.arrow:hover { color: var(--red); }
.tags { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.tags li, .tag { display: inline-block; border: 1px solid var(--rule); padding: 4px 9px; font-size: 10px; letter-spacing: .14em; text-transform: uppercase; }

/* technical plate: the frame the resources use, with corner labels */
.plate { position: relative; border: 1px solid #3a3332; background: #000; padding: 34px 16px 30px; }
.plate > .corner { position: absolute; font-size: 10px; letter-spacing: .16em; text-transform: uppercase; color: var(--dim); }
.plate > .corner.tl { top: 10px; left: 14px; } .plate > .corner.tr { top: 10px; right: 14px; }
.plate > .corner.bl { bottom: 9px; left: 14px; } .plate > .corner.br { bottom: 9px; right: 14px; color: var(--ink); }
.plate > .corner.br::before { content: "> "; color: var(--red); }

/* ---------- hero */
.hero { position: relative; height: 100svh; min-height: 520px; background: #0a0808; }
.hero iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.hero-down { position: absolute; left: 50%; bottom: 28px; transform: translateX(-50%); font-size: 20px; color: var(--red); text-decoration: none; animation: bob 2.4s ease-in-out infinite; }
.hero-hint { position: absolute; right: var(--gutter); bottom: 30px; margin: 0; font-size: 10px; letter-spacing: .16em; text-transform: uppercase; color: var(--dim); pointer-events: none; }
@keyframes bob { 50% { transform: translate(-50%, 6px); } }

/* ---------- intro */
.intro-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(32px, 7vw, 120px); align-items: center; }
.portrait canvas { width: 100%; height: auto; }
.intro-text { display: flex; flex-direction: column; gap: 28px; }

/* ---------- principles */
.principles-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(40px, 7vw, 120px); align-items: start; }
.principles { list-style: none; margin: 56px 0 0; padding: 0; display: flex; flex-direction: column; gap: 44px; }
.principles li { display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: 4px 0; }
.principles .num { font: 400 28px/1 var(--display); color: var(--red); }
.principles h3 { margin: 0 0 10px; font-size: 18px; font-weight: 600; letter-spacing: .01em; }
.principles p { margin: 0; color: var(--dim); max-width: 46ch; }
.model { aspect-ratio: 4 / 5; display: grid; place-items: center; }
.model-empty { text-align: center; color: var(--faint); font-size: 12px; letter-spacing: .16em; text-transform: uppercase; display: grid; gap: 14px; justify-items: center; }
.model-empty svg { width: min(60%, 260px); height: auto; color: #3a3332; }

/* ---------- skills orbit */
.skills-grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(32px, 5vw, 72px); align-items: center; margin-top: 64px; }
.orbit { --size: min(640px, 100%); position: relative; width: var(--size); aspect-ratio: 1; margin: 0 auto; container-type: inline-size; }
.orbit .ring { position: absolute; left: 50%; top: 50%; width: calc(var(--rp) * 2cqi); height: calc(var(--rp) * 2cqi); border: 1px dashed #2e2827; border-radius: 50%;
  transform: translate(-50%, -50%); animation: spin var(--dur) linear infinite; }
.orbit .ring.rev { animation-direction: reverse; }
.orbit .ring-name { position: absolute; left: 50%; top: 50%; transform: translate(-50%, calc(var(--rp) * -1cqi - 50%)); background: var(--room); padding: 0 8px; font-size: 9px; letter-spacing: .2em; text-transform: uppercase; color: var(--faint); white-space: nowrap; }
.orbit .node { position: absolute; left: 50%; top: 50%; width: 0; height: 0; transform: rotate(var(--a)) translateY(calc(var(--rp) * -1cqi)) rotate(calc(var(--a) * -1)); }
.orbit .node-inner { position: absolute; transform: translate(-50%, -50%); animation: spin-node var(--dur) linear infinite; }
.orbit .ring.rev .node-inner { animation-direction: reverse; }
.orbit button { width: clamp(46px, 11cqi, 70px); aspect-ratio: 1; border-radius: 50%; border: 1px solid #3a3332; background: #000 var(--img) center / 230% no-repeat; cursor: pointer; padding: 0;
  transition: border-color .25s, box-shadow .25s, transform .25s; display: block; filter: brightness(1.8) contrast(1.1); }
.orbit button:hover { border-color: var(--ink); transform: scale(1.08); }
.orbit button[aria-pressed="true"] { border-color: var(--red); box-shadow: 0 0 0 4px var(--room), 0 0 0 5px var(--red); }
.orbit .node-label { position: absolute; left: 50%; top: calc(100% + 6px); transform: translateX(-50%); white-space: nowrap; font-size: 9px; letter-spacing: .14em; text-transform: uppercase; color: var(--dim); pointer-events: none; }
.orbit button[aria-pressed="true"] + .node-label { color: var(--ink); }
.orbit:hover .ring, .orbit:hover .node-inner, .orbit:focus-within .ring, .orbit:focus-within .node-inner { animation-play-state: paused; }
.orbit .core { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 22%; aspect-ratio: 1; border-radius: 50%; border: 1px solid #3a3332; display: grid; place-items: center; overflow: hidden; background: #000; }
.orbit .core canvas { width: 100%; height: 100%; object-fit: cover; }
@keyframes spin { from { transform: translate(-50%, -50%) rotate(0deg); } to { transform: translate(-50%, -50%) rotate(360deg); } }
@keyframes spin-node { from { transform: translate(-50%, -50%) rotate(0deg); } to { transform: translate(-50%, -50%) rotate(-360deg); } }

.ring-legend { list-style: none; margin: 28px 0 0; padding: 0; display: flex; justify-content: center; gap: 8px 28px; flex-wrap: wrap; font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--dim); }
.ring-legend .num { font-size: 10px; margin-right: 6px; }
.skill-card { display: flex; flex-direction: column; gap: 0; }
.skill-card .plate { padding: 30px 8px 8px; }
.skill-card iframe { width: 100%; aspect-ratio: 16 / 11; border: 0; background: #050404; }
.skill-body { padding: 22px 4px 0; display: flex; flex-direction: column; gap: 12px; }
.skill-body h3 { margin: 0; font: 400 32px/1 var(--display); }
.skill-body p { margin: 0; color: var(--dim); }
.tools { list-style: none; margin: 6px 0 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 16px; font-size: 13px; }
.tools li { display: flex; align-items: center; gap: 8px; }
.tools li::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--ink); flex: none; }
.tools li.learning { color: var(--dim); }
.tools li.learning::before { background: transparent; border: 1px solid var(--dim); }
.legend { display: flex; gap: 18px; font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--dim); margin-top: 6px; }
.legend span { display: inline-flex; align-items: center; gap: 6px; }
.legend i { width: 8px; height: 8px; border-radius: 50%; background: var(--ink); }
.legend i.o { background: transparent; border: 1px solid var(--dim); }

/* ---------- projects */
.projects-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
.feature { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(32px, 6vw, 96px); margin-top: 80px; align-items: start; }
.feature-info { position: sticky; top: 110px; display: flex; flex-direction: column; gap: 22px; }
.feature-info .display { font-size: clamp(56px, 8vw, 112px); }
.meta-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 24px; margin: 4px 0 8px; }
.meta-grid dt { font-size: 10px; letter-spacing: .16em; text-transform: uppercase; color: var(--dim); }
.meta-grid dd { margin: 4px 0 0; font-size: 14px; }
.collage { position: relative; height: clamp(720px, 92vw, 1180px); }
.shot { position: absolute; margin: 0; width: var(--w); left: var(--x); top: var(--y); }
.shot canvas { width: 100%; height: auto; }
.shot figcaption { margin-top: 8px; font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--dim); display: flex; justify-content: space-between; gap: 8px; }
/* a curtain in the room colour lifts in steps; the element itself stays measurable for the observer */
.reveal { position: relative; }
.reveal::after { content: ""; position: absolute; inset: -1px; z-index: 3; background: var(--room); transform-origin: 50% 0; transition: transform 1.1s steps(9, end); pointer-events: none; }
.reveal.in::after { transform: scaleY(0); }
.shot.reveal { position: absolute; }
.project-list { list-style: none; margin: 96px 0 0; padding: 0; border-bottom: 1px solid var(--rule); }
.project-list a { display: grid; grid-template-columns: 56px minmax(0, 1fr) auto 64px 24px; gap: 16px; align-items: baseline; padding: 26px 0; border-top: 1px solid var(--rule); text-decoration: none; }
.project-list .name { font: 400 clamp(22px, 2.6vw, 34px)/1.1 var(--display); }
.project-list a:hover .name { color: var(--red); }
.project-list .type, .project-list .year { font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--dim); }
.project-list .go { color: var(--red); }

/* ---------- recommendations */
.quotes { list-style: none; margin: 96px 0 0; padding: 0; display: flex; flex-direction: column; gap: clamp(120px, 16vw, 220px); }
.quotes li:nth-child(2) { padding-left: clamp(0px, 22vw, 320px); }
.quotes blockquote { margin: 0; max-width: 24ch; font: 400 clamp(26px, 3.4vw, 44px)/1.2 var(--display); color: var(--faint); }
.quotes .who { margin-top: 22px; display: flex; align-items: center; gap: 12px; font-size: 12px; color: var(--dim); }
.quotes .who i { width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--rule); }

/* ---------- awards */
.tabs { display: flex; gap: 0; margin-top: 56px; border-bottom: 1px solid var(--rule); overflow-x: auto; scrollbar-width: none; }
.tabs button { flex: 1 0 auto; min-height: 44px; padding: 12px 18px 14px 0; background: none; border: 0; border-bottom: 2px solid transparent; margin-bottom: -1px; color: var(--dim); text-align: left;
  font: 11px/1.2 var(--mono); letter-spacing: .14em; text-transform: uppercase; cursor: pointer; }
.tabs button[aria-selected="true"] { color: var(--ink); border-color: var(--red); }
.award { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(32px, 6vw, 96px); align-items: end; margin-top: 48px; }
.award canvas { width: 100%; height: auto; }
.award-text { display: flex; flex-direction: column; gap: 16px; }
.award-text h3 { margin: 0; font: 400 clamp(30px, 3.6vw, 48px)/1.05 var(--display); }
.award-text p { margin: 0; color: var(--dim); }

/* ---------- footer */
.foot { border-top: 1px solid var(--rule); padding-block: 48px 40px; }
.foot-grid { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; flex-wrap: wrap; }
.foot .big { font: 400 clamp(48px, 9vw, 120px)/.9 var(--display); text-decoration: none; }
.foot .big:hover { color: var(--red); }
.foot ul { list-style: none; margin: 0; padding: 0; display: flex; gap: 22px; flex-wrap: wrap; }
.foot a:not(.big) { font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--dim); text-decoration: none; }
.foot a:not(.big):hover { color: var(--ink); }
.foot small { display: block; margin-top: 36px; font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--faint); }

/* ---------- inner pages */
.page-head { padding-top: clamp(140px, 18vw, 220px); padding-bottom: 64px; display: flex; flex-direction: column; gap: 24px; }

/* case study */
.case-meta { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; padding-top: 28px; border-top: 1px solid var(--rule); margin-top: 32px; }
.case-meta dt { font-size: 10px; letter-spacing: .16em; text-transform: uppercase; color: var(--red); }
.case-meta dd { margin: 6px 0 0; }
.case-body { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: clamp(32px, 8vw, 140px); }
.case-index { position: sticky; top: 110px; align-self: start; list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; font-size: 13px; }
.case-index a { text-decoration: none; color: var(--faint); }
.case-index a.on { color: var(--ink); }
.case-index a.on::before { content: "■ "; color: var(--red); }
.case-content { display: flex; flex-direction: column; gap: clamp(120px, 14vw, 200px); max-width: 820px; }
.case-content section { display: flex; flex-direction: column; gap: 24px; scroll-margin-top: 110px; }
.case-content h2 { margin: 0; font: 400 clamp(32px, 4vw, 52px)/1 var(--display); }
.cards3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.card { border: 1px solid var(--rule); padding: 20px; display: flex; flex-direction: column; gap: 10px; }
.card h3 { margin: 0; font-size: 13px; letter-spacing: .12em; text-transform: uppercase; }
.card p { margin: 0; font-size: 14px; color: var(--dim); }
.steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; counter-reset: s; }
.steps li { border: 1px solid var(--rule); padding: 18px; font-size: 14px; }
.steps li::before { counter-increment: s; content: "0" counter(s); display: block; color: var(--red); font-size: 11px; margin-bottom: 6px; }
.metrics { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.metrics b { display: block; font: 400 36px/1 var(--display); color: var(--faint); }
.metrics span { font-size: 12px; color: var(--faint); }
.learn { list-style: none; margin: 0; padding: 0; }
.learn li { display: grid; grid-template-columns: 48px minmax(0, 1fr); padding: 20px 0; border-top: 1px solid var(--rule); font-size: 17px; }
.ph { border: 1px dashed #2e2827; display: grid; place-items: center; color: var(--faint); font-size: 11px; letter-spacing: .16em; text-transform: uppercase; text-align: center; padding: 16px; }
.next { display: flex; flex-direction: column; gap: 24px; text-decoration: none; }
.next:hover .display { color: var(--red); }

/* playground */
.pg-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
.view-toggle { display: flex; gap: 0; border: 1px solid var(--rule); }
.view-toggle button { min-height: 40px; padding: 8px 16px; background: none; border: 0; color: var(--dim); font: 11px/1 var(--mono); letter-spacing: .16em; text-transform: uppercase; cursor: pointer; }
.view-toggle button[aria-pressed="true"] { background: var(--ink); color: var(--room); }
.canvas { position: relative; height: 1500px; margin-top: 48px; border-top: 1px solid var(--rule); overflow: hidden;
  background-image: radial-gradient(#1a1616 1px, transparent 1px); background-size: 28px 28px; touch-action: none; }
.piece { position: absolute; width: var(--w); left: var(--x); top: var(--y); transform: rotate(var(--rot)); cursor: grab; user-select: none; transition: transform .25s; }
.piece:hover { transform: rotate(0deg) scale(1.03); z-index: 5; }
.piece.dragging { cursor: grabbing; transition: none; z-index: 10; }
.piece img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; border: 1px solid #3a3332; pointer-events: none; }
.piece figcaption { display: flex; justify-content: space-between; gap: 8px; margin-top: 8px; font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--dim); }
.piece figcaption b { color: var(--ink); font-weight: 400; }
.piece .n { position: absolute; top: -20px; left: 0; font-size: 10px; color: var(--red); letter-spacing: .14em; }
.pg-list { list-style: none; margin: 48px 0 0; padding: 0; border-bottom: 1px solid var(--rule); }
.pg-list a { display: grid; grid-template-columns: 56px 160px minmax(0, 1fr) auto; gap: 20px; align-items: center; padding: 16px 0; border-top: 1px solid var(--rule); text-decoration: none; }
.pg-list img { width: 160px; aspect-ratio: 16 / 10; object-fit: cover; border: 1px solid var(--rule); }
.pg-list b { font: 400 24px/1.1 var(--display); font-weight: 400; }
.pg-list a:hover b { color: var(--red); }
.pg-list span { font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--dim); }
.viewer { position: fixed; inset: 0; z-index: 100; background: rgba(5,4,4,.96); display: flex; flex-direction: column; padding: 16px var(--gutter) 24px; }
.viewer[hidden] { display: none; }
.viewer-bar { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding-bottom: 12px; font-size: 11px; letter-spacing: .16em; text-transform: uppercase; }
.viewer iframe { flex: 1; width: 100%; border: 1px solid var(--rule); background: var(--room); }

/* about */
.about-intro { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(32px, 7vw, 120px); align-items: end; }
.montage { width: 100%; aspect-ratio: 16 / 9; border: 0; background: #000; }
.story { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 7vw, 120px); }
.story h3 { margin: 10px 0 14px; font: 400 clamp(28px, 3.2vw, 40px)/1.05 var(--display); }
.hobbies { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin-top: 48px; }
.hobbies figure { margin: 0; display: flex; flex-direction: column; gap: 10px; }
.hobbies img, .hobbies .ph { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border: 1px solid var(--rule); }
.hobbies figcaption { font-size: 13px; }
.facts { list-style: none; margin: 40px 0 0; padding: 0; border-bottom: 1px solid var(--rule); }
.facts li { display: grid; grid-template-columns: 48px minmax(0, 1fr); padding: 22px 0; border-top: 1px solid var(--rule); color: var(--faint); font-size: 17px; }
.facts li .num { color: var(--red); }

/* contact */
.contact-grid { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: clamp(40px, 8vw, 140px); align-items: start; }
.contact-info { display: flex; flex-direction: column; gap: 26px; }
.socials { list-style: none; margin: 0; padding: 0; display: flex; gap: 22px; flex-wrap: wrap; }
.socials a { font-size: 12px; letter-spacing: .16em; text-transform: uppercase; color: var(--dim); text-decoration: none; }
.socials a:hover { color: var(--ink); }
.status { display: inline-flex; align-items: center; gap: 10px; font-size: 12px; letter-spacing: .14em; text-transform: uppercase; }
.status::before { content: ""; width: 9px; height: 9px; border-radius: 50%; background: var(--red); box-shadow: 0 0 0 4px #ff2b1c33; animation: pulse 2s ease-in-out infinite; }
@keyframes pulse { 50% { box-shadow: 0 0 0 8px #ff2b1c00; } }
form.contact { display: flex; flex-direction: column; gap: 20px; }
form.contact label { display: flex; flex-direction: column; gap: 8px; font-size: 10px; letter-spacing: .16em; text-transform: uppercase; color: var(--dim); }
form.contact input, form.contact textarea { font: inherit; font-size: 15px; color: var(--ink); background: transparent; border: 0; border-bottom: 1px solid #3a3332; border-radius: 0; padding: 10px 0; }
form.contact textarea { min-height: 140px; resize: vertical; border: 1px solid #3a3332; padding: 12px; }
form.contact input:focus, form.contact textarea:focus { outline: none; border-color: var(--red); }
.form-note { margin: 0; font-size: 12px; color: var(--dim); min-height: 1.5em; }

/* ---------- small screens */
@media (max-width: 900px) {
  .intro-grid, .principles-grid, .skills-grid, .feature, .award, .about-intro, .story, .contact-grid, .case-body { grid-template-columns: minmax(0, 1fr); }
  .feature-info, .case-index { position: static; }
  .case-index { flex-direction: row; flex-wrap: wrap; }
  .collage { height: auto; display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
  .shot, .shot.reveal { position: relative; left: auto; top: auto; width: auto; }
  .hobbies { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cards3, .steps, .metrics, .case-meta { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .quotes li:nth-child(2) { padding-left: 0; }
}
@media (max-width: 640px) {
  .nav ul { gap: 12px; }
  .nav a:not(.brand) { font-size: 10px; letter-spacing: .1em; }
  .project-list a { grid-template-columns: 36px minmax(0, 1fr) 24px; }
  .project-list .type, .project-list .year { display: none; }
  .pg-list a { grid-template-columns: 36px 96px minmax(0, 1fr); }
  .pg-list img { width: 96px; }
  .pg-list a > span:last-child { display: none; }
  .tools { grid-template-columns: minmax(0, 1fr); }
  .collage { grid-template-columns: 1fr; }
  .orbit .node-label { display: none; }
}

/* ======================================================================
   v2 — no frames. Every piece lives in the same room as the hero: no
   borders or corner labels around things, dithered images and objects
   are screened onto the background, and the hero stays put while the
   page slides over it.
   ====================================================================== */
:root { --room: #0a0808; }
.section + .section { border-top: 0; }
.nav { background: linear-gradient(rgba(10, 8, 8, .92) 15%, rgba(10, 8, 8, 0)); }
.plate { border: 0; background: transparent; padding: 0; }
.plate > .corner { display: none; }
/* lighten keeps the brighter of image and page per pixel: the images' near-black grounds vanish into the room */
.portrait canvas, .shot canvas, .award canvas, .wide-shot canvas, .about-intro canvas, .approach canvas,
.piece, .pg-list img, .hobbies img, .montage, .model svg { mix-blend-mode: lighten; }
.hint { margin: 14px 0 0; font-size: 10px; letter-spacing: .16em; text-transform: uppercase; color: var(--faint); }

/* hero stays behind, the page slides over it */
.hero { position: sticky; top: 0; z-index: 0; }
main > .section, main > .wrap, .foot { position: relative; z-index: 1; background: var(--room); }
#intro { background: linear-gradient(rgba(10, 8, 8, 0), var(--room) 300px); }

/* portrait bleeds into the page */
.portrait { margin: 0; }
.intro-grid { grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); }

/* 3D model: just the wireframe ghost, no box */
.model { aspect-ratio: 4 / 5; }
.model-empty svg { width: min(78%, 360px); color: #2f2828; }

/* skills: the chosen object lives in the middle of the orbit */
.orbit .stage-obj { position: absolute; left: 50%; top: 50%; width: 46%; aspect-ratio: 16 / 11; transform: translate(-50%, -50%); z-index: 2; }
.orbit .stage-obj iframe { width: 100%; height: 100%; border: 0; background: transparent; }
.orbit button { width: clamp(40px, 9cqi, 62px); border: 0; background-color: transparent; mix-blend-mode: lighten; box-shadow: none !important; }
.orbit button:hover { transform: scale(1.15); }
.orbit button[aria-pressed="true"] { transform: scale(1.3); }
.orbit button[aria-pressed="true"] + .node-label { color: var(--red); }
.orbit .ring { border-color: #241e1d; }
.skill-info { display: flex; flex-direction: column; gap: 14px; }
.skill-info h3 { margin: 0; font: 400 clamp(32px, 3.4vw, 48px)/1 var(--display); }
.skill-info p { margin: 0; color: var(--dim); max-width: 42ch; }

/* projects, awards, case study: no boxes */
.project-list a { border-top-color: #1b1615; }
.award { margin-top: 32px; }
.card, .steps li { border: 0; padding: 0; }
.steps li { padding-top: 14px; border-top: 1px solid #1b1615; }
.ph { border: 0; background: rgba(241, 236, 228, .025); }
.hobbies img, .hobbies .ph, .pg-list img, .piece img { border: 0; }
.wide-shot { margin: 0 calc(var(--gutter) * -1); }

/* contact form: lines only */
form.contact.plate { padding: 0; }
.viewer iframe { border: 0; }

/* hero: «Alo?» in Black Ops One, composed of ASCII (Revelador core) */
.hero { overflow: hidden; }
.hero canvas { position: absolute; inset: 0; width: 100% !important; height: 100% !important; mix-blend-mode: lighten; }

/* ======================================================================
   v3 — drift. The page stops reading as stacked boxes: objects, coordinates
   and scraps of ASCII float in the gaps at their own scroll speed, the
   cursor pushes them, the objects can be thrown, and two bands of words
   cross the page. Sections overlap and sit off the grid.
   ====================================================================== */
/* sections stop being stacking contexts so floaters can cross from one into the next */
main > .section, main > .wrap, .foot { z-index: auto; }
main { position: relative; }

.fly { position: absolute; left: var(--x, auto); right: var(--r, auto); top: var(--y, auto); z-index: 6; margin: 0; pointer-events: none; will-change: transform; }
.fly.toss { pointer-events: auto; cursor: grab; touch-action: none; }
.fly.toss:active { cursor: grabbing; }
.fly.obj { width: var(--w, 240px); }
.fly.obj img { width: 100%; height: auto; mix-blend-mode: lighten; filter: brightness(1.25); pointer-events: none; user-select: none; -webkit-user-drag: none; }
.fly.obj figcaption { position: absolute; left: 22%; bottom: 14%; font-size: 9px; letter-spacing: .18em; text-transform: uppercase; color: var(--faint); white-space: nowrap; }
.fly.obj:hover figcaption { color: var(--red); }
.fly.coord { font-size: 10px; letter-spacing: .2em; text-transform: uppercase; color: var(--faint); white-space: nowrap; }
.fly.mark { font: 400 28px/1 var(--mono); color: var(--red); }
.fly.mark.sm { font-size: 16px; }
.fly.sticker { background: var(--red); color: #140f0f; padding: 7px 11px 6px; font: 600 10px/1 var(--mono); letter-spacing: .16em; text-transform: uppercase; white-space: nowrap; }
.fly.word { font: 400 var(--fs, 20px)/1 var(--display); color: var(--faint); white-space: nowrap; }
.fly.word.red { color: var(--red); }
.fly.asc { font: 11px/1.05 var(--mono); color: #5b1a14; white-space: pre; letter-spacing: .1em; }
.fly.asc.ink { color: #3d3534; }

/* bands of words crossing the page, pushed by scroll speed */
.bands { position: relative; z-index: 5; height: clamp(220px, 26vw, 380px); margin-block: calc(var(--section) * -0.55); pointer-events: none; overflow: visible; }
.band { position: absolute; left: -10vw; right: -10vw; top: 50%; overflow: hidden; padding-block: 10px; background: var(--room); }
.band.a { transform: translateY(-50%) rotate(-5deg); }
.band.b { transform: translateY(-50%) rotate(3.5deg); background: var(--red); color: #140f0f; }
.band-track { display: flex; width: max-content; white-space: nowrap; font: 400 clamp(34px, 5.4vw, 76px)/1 var(--display); will-change: transform; }
.band.a .band-track { color: transparent; -webkit-text-stroke: 1px var(--ink); }
.band-track span { padding-right: .5em; }
.band-track span i { font-style: normal; color: var(--red); -webkit-text-stroke: 0; padding: 0 .35em; }
.band.b .band-track span i { color: var(--room); }

/* off the grid */
#intro { margin-top: -22vh; padding-top: calc(var(--section) + 6vh); background: linear-gradient(rgba(10, 8, 8, 0), var(--room) 42vh); }
.intro-grid { align-items: start; }
.intro-text { margin-top: clamp(40px, 12vw, 200px); }
.principles-grid { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
.principles { gap: clamp(56px, 7vw, 110px); }
.principles li:nth-child(2) { margin-left: clamp(0px, 16vw, 260px); }
.principles li:nth-child(3) { margin-left: clamp(0px, 6vw, 100px); }
.model { margin-top: clamp(0px, 18vw, 300px) !important; }
.drift-x { display: inline-block; will-change: transform; }
.display.huge { font-size: clamp(64px, 12vw, 190px); line-height: .85; }
#skills .wrap > h2 { margin-left: clamp(0px, 30vw, 460px); }
.projects-head { align-items: flex-end; }
.collage .shot:nth-child(1) { transform: rotate(-2deg); }
.collage .shot:nth-child(4) { transform: rotate(1.5deg); }
.quotes li:nth-child(3) { padding-left: clamp(0px, 46vw, 640px); }
.quotes blockquote { color: #4a4241; }
#awards { margin-top: -6vw; }
.foot { overflow: clip; padding-block: clamp(120px, 16vw, 220px) 40px; position: relative; }

@media (max-width: 900px) {
  .fly.hide-sm { display: none; }
  .fly.obj { width: calc(var(--w, 240px) * .62); }
  #intro { margin-top: -12vh; }
  .intro-text { margin-top: 0; }
  .principles li:nth-child(2), .principles li:nth-child(3) { margin-left: 0; }
  .principles li:nth-child(2) { padding-left: 14%; }
  #skills .wrap > h2 { margin-left: 0; }
  .quotes li:nth-child(3) { padding-left: 0; }
  .model { margin-top: 0 !important; }
  .collage .shot { transform: none !important; }
}
@media (prefers-reduced-motion: reduce) { .fly, .band-track, .drift-x { transform: none !important; } }
/* a transformed parent isolates its children's blending, so the blend goes on the moving element itself */
.fly.obj, .collage .shot { mix-blend-mode: lighten; }
.fly.obj img { mix-blend-mode: normal; }
.band.a { background: transparent; transform: translateY(-50%) rotate(-7deg); }
.band.b { transform: translateY(-50%) rotate(4deg); }
.bands.solo { height: clamp(140px, 16vw, 240px); }
.bands.solo .band.b { transform: translateY(-50%) rotate(-3deg); }

/* portrait: the photo stays clear in the middle and dissolves into its own ASCII render, which then fades out */
.portrait-mix { position: relative; }
.portrait-mix canvas { display: block; -webkit-mask-image: radial-gradient(ellipse 60% 62% at 50% 44%, #000 45%, transparent 100%); mask-image: radial-gradient(ellipse 60% 62% at 50% 44%, #000 45%, transparent 100%); }
.portrait-mix img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: fill; pointer-events: none; filter: grayscale(1) contrast(1.1);
  -webkit-mask-image: radial-gradient(ellipse 34% 30% at 47% 36%, #000 45%, transparent 100%); mask-image: radial-gradient(ellipse 34% 30% at 47% 36%, #000 45%, transparent 100%); }

/* damped scroll (Lenis): it does the easing, so the native smooth behaviour must stay out of its way */
html.lenis, html.lenis body { height: auto; }
html.lenis { scroll-behavior: auto; }
.lenis.lenis-stopped { overflow: hidden; }
.lenis [data-lenis-prevent] { overscroll-behavior: contain; }

/* ---------- skills wheel: replaces the orbit */
.wheel { position: relative; width: 100%; aspect-ratio: 1 / 0.95; overflow: hidden; }
.wheel-ring { position: absolute; inset: 0; z-index: 1; }
.wheel-item { position: absolute; left: 0; top: 0; display: flex; align-items: center; gap: 12px; padding: 0; background: none; border: 0; color: var(--dim); font: inherit; cursor: pointer; transform-origin: 24px 50%; will-change: transform, opacity; }
.wheel-item svg { width: 22px; height: 22px; padding: 12px; box-sizing: content-box; overflow: visible; border: 1px solid #2e2827; border-radius: 50%; background: var(--room); color: var(--dim); transition: color .3s, border-color .3s; }
.wheel-item span { position: absolute; left: 24px; top: calc(100% + 8px); transform: translateX(-50%); font-size: 10px; letter-spacing: .14em; text-transform: uppercase; white-space: nowrap; opacity: 0; transition: opacity .3s; }
.wheel-item:hover svg, .wheel-item:focus-visible svg { color: var(--ink); border-color: var(--dim); }
.wheel-item:focus-visible { outline: none; }
.wheel-item[aria-pressed="true"] svg { color: var(--red); border-color: var(--red); }
.wheel-item[aria-pressed="true"] span { opacity: 1; color: var(--ink); }
/* the ring itself, a faint guide the icons ride on */
.wheel::before { content: ""; position: absolute; left: 0; top: 50%; width: calc(var(--R, 200px) * 2); aspect-ratio: 1; transform: translate(-50%, -50%); border: 1px solid #1f1a19; border-radius: 50%; pointer-events: none; }
.wheel .stage-obj { position: absolute; left: 50%; top: 50%; width: 50%; aspect-ratio: 16 / 11; transform: translateY(-50%); z-index: 2; }
.wheel .stage-obj iframe { width: 100%; height: 100%; border: 0; background: transparent; }

/* ---------- ride bands: a strip an object crosses while you scroll */
.ride-band { position: relative; z-index: 1; background: var(--room); height: clamp(240px, 36vw, 460px); overflow: hidden; }
/* a section that hands over to a ride band doesn't need its full bottom padding: the band is the breathing room */
section:has(+ .ride-band) { padding-bottom: clamp(16px, 3vw, 48px); }
.ride { position: absolute; left: 0; top: 50%; width: clamp(320px, 46vw, 720px); aspect-ratio: 16 / 11; margin-top: calc(clamp(320px, 46vw, 720px) * -11 / 32); will-change: transform; }
.ride-band[data-ride="encendedor"] .ride { width: clamp(260px, 32vw, 500px); margin-top: calc(clamp(260px, 32vw, 500px) * -11 / 32); }
.ride iframe { width: 100%; height: 100%; border: 0; background: transparent; }
/* on touch screens a finger on the object would grab it instead of scrolling the page */
@media (pointer: coarse) { .ride iframe { pointer-events: none; } .ride-hint { display: none; } }

/* wheel placeholder: where the skill's picture will go */
.wheel .stage-obj { display: grid; place-items: center; }
.ph-circle { position: relative; width: min(78%, 280px); aspect-ratio: 1; border: 1px dashed #3a3332; border-radius: 50%; display: grid; place-items: center;
  background: linear-gradient(45deg, transparent calc(50% - .5px), #241e1d calc(50% - .5px) calc(50% + .5px), transparent calc(50% + .5px)),
              linear-gradient(-45deg, transparent calc(50% - .5px), #241e1d calc(50% - .5px) calc(50% + .5px), transparent calc(50% + .5px)); }
.ph-circle span { padding: 4px 8px; background: var(--room); font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--dim); text-align: center; }

/* about: the collage is driven by the scroll, so it shouldn't take clicks that would restart its own clock */
.montage { pointer-events: none; }

/* playground placeholders: the slot a piece will fill */
.ph-tile { aspect-ratio: 16 / 10; border: 1px dashed #3a3332; display: grid; place-items: center;
  background: linear-gradient(to top right, transparent calc(50% - .5px), #241e1d calc(50% - .5px) calc(50% + .5px), transparent calc(50% + .5px)); }
.ph-tile span { padding: 4px 8px; background: var(--room); font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--dim); }
.pg-list .ph-thumb { width: 100%; aspect-ratio: 16 / 10; border: 1px dashed #3a3332; }
.pg-list .ph-row { display: grid; grid-template-columns: 48px 120px minmax(0, 1fr) auto; gap: 24px; align-items: center; padding: 18px 0; border-bottom: 1px solid var(--rule); color: var(--dim); }

.ride-hint { position: absolute; left: var(--gutter); bottom: 18px; margin: 0; font-size: 10px; letter-spacing: .16em; text-transform: uppercase; color: var(--faint); pointer-events: none; }

/* typed text */
.type-caret { color: var(--red); margin-left: 2px; font-weight: 400; animation: caret 1s steps(1) infinite; }
@keyframes caret { 50% { opacity: 0; } }
.type-wait, .type-wait * { color: transparent !important; }

/* 3D self-portrait: the canvas takes over the placeholder once the model has loaded */
.model { position: relative; }
.model .model-cv { position: absolute; inset: 0; width: 100%; height: 100%; display: block; opacity: 0; transition: opacity .8s ease; }
.model-empty { transition: opacity .5s ease; }
.model.model-ready .model-cv { opacity: 1; }
.model.model-ready .model-empty { opacity: 0; }

/* toolkit wheel: the 3D object takes the placeholder's place once the first one has loaded */
.wheel .stage-obj .tk-cv { position: absolute; inset: 0; width: 100%; height: 100%; display: block; cursor: grab; touch-action: none; }
.wheel .stage-obj .tk-cv:active { cursor: grabbing; }
.wheel .stage-obj .ph-circle { transition: opacity .5s ease; }
.wheel .stage-obj.tk-ready .ph-circle { opacity: 0; }

/* intro (assets/intro.js): only the eye, then a crowd of eyes, then the page on the «Alo?» hero.
   The <head> script sets html.intro-on (play) or html.no-intro (skip) before the first paint. */
.intro { position: fixed; inset: 0; z-index: 200; background: #000; touch-action: none; overscroll-behavior: contain;
  transition: opacity .9s ease, visibility 0s linear .9s; }
.intro .intro-cv { position: absolute; inset: 0; width: 100%; height: 100%; display: block; opacity: 0; transition: opacity 1.4s ease; }
.intro.ready .intro-cv { opacity: 1; }
.intro .intro-alo { position: absolute; inset: 0; width: 100%; height: 100%; display: block; opacity: 0; transition: opacity .5s ease; pointer-events: none; }
.intro .intro-alo.on { opacity: 1; }
.intro.out { opacity: 0; visibility: hidden; pointer-events: none; }
/* «[S] to skip»: a quiet label in the corner once the eye is up; S, Escape or a click skips (assets/intro.js) */
.intro-skip { position: absolute; left: var(--gutter); bottom: 24px; z-index: 2; padding: 8px 0; font: 500 11px/1 var(--mono); letter-spacing: .16em;
  text-transform: uppercase; color: var(--dim); background: none; border: 0; border-radius: 0; cursor: pointer;
  opacity: 0; pointer-events: none; transition: opacity .8s ease .6s, color .2s; }
.intro-skip .k { color: var(--red); }
.intro.ready .intro-skip { opacity: .75; pointer-events: auto; }
.intro-skip:hover, .intro-skip:focus-visible { opacity: 1; color: var(--ink); outline: none; }
html.no-intro .intro { display: none; }
html.intro-on, html.intro-on body { overflow: hidden; }
html.intro-on .nav { opacity: 0; visibility: hidden; }
html.intro-done .nav { animation: nav-in .8s ease .25s both; }
@keyframes nav-in { from { opacity: 0; transform: translateY(-10px); } }

/* hero: the eye. The old «Alo?» hero stays in the markup, hidden */
.hero[hidden] { display: none !important; }
.hero-eye { cursor: crosshair; }
.hero-eye .eye-cv { opacity: 0; transition: opacity 1.2s ease; }
.hero-eye.eye-ready .eye-cv { opacity: 1; }

/* no visible scrollbar: the page still scrolls (wheel, touch, keys, Lenis). It also keeps the width the same when the
   intro lets go of the page, so the «Alo?» grid doesn't shift under the fade */
html, body { scrollbar-width: none; -ms-overflow-style: none; }
html::-webkit-scrollbar, body::-webkit-scrollbar { display: none; width: 0; height: 0; }

/* the Sound on/off switch (assets/sounds.js adds it to the nav): looks like the other nav links */
.nav .sound-toggle { font: inherit; font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--dim); background: none; border: 0; padding: 0; cursor: pointer; }
.nav .sound-toggle:hover { color: var(--ink); }
.nav .sound-toggle[aria-pressed="true"]::before { content: "● "; color: var(--red); }
@media (max-width: 640px) { .nav .sound-toggle { font-size: 10px; letter-spacing: .1em; } }
/* «Enter with sound?» (index.html): a small question over the black of the intro, before the eye comes up */
.sound-gate { position: fixed; inset: 0; z-index: 210; display: none; flex-direction: column; align-items: center; justify-content: center; gap: 18px;
  background: #000; color: var(--ink); text-align: center; transition: opacity .6s ease, visibility .6s; }
html.intro-on .sound-gate { display: flex; }
.sound-gate.out { opacity: 0; visibility: hidden; pointer-events: none; }
.sound-gate-icon { width: 40px; height: 40px; color: var(--red); }
.sound-gate-icon .w1, .sound-gate-icon .w2 { animation: sg-wave 1.6s ease-in-out infinite; }
.sound-gate-icon .w2 { animation-delay: .25s; }
@keyframes sg-wave { 0%, 100% { opacity: .25; } 50% { opacity: 1; } }
.sound-gate p { margin: 0; font: 500 12px/1.4 var(--mono); letter-spacing: .18em; text-transform: uppercase; }
.sound-gate-btns { display: flex; gap: 10px; }
.sound-gate-btns .btn { min-width: 84px; justify-content: center; min-height: 40px; padding: 10px 16px; font-size: 12px; }
@media (prefers-reduced-motion: reduce) { .sound-gate-icon .w1, .sound-gate-icon .w2 { animation: none; opacity: 1; } }
/* About · the dossier: the ID card in the middle, the library's objects floating around it (they're .fly: parallax,
   pushed by the cursor, grabbed and thrown), each tagged with its live position */
.dossier { position: relative; height: clamp(680px, 62vw, 900px); }
.dossier-card { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 5; width: min(440px, 92%);
  display: flex; flex-direction: column; gap: 0; font: 15px/1.7 var(--mono); color: var(--ink); }
.dossier-card p { margin: 0; padding: 14px 0; border-top: 1px solid var(--rule); }
.dossier-card p:first-of-type { border-top: 0; padding-top: 0; }
.dossier-card .muted { color: var(--dim); }
.dossier .fly.obj { z-index: 4; }
.dossier .fly.word, .dossier .fly.asc, .dossier .fly.coord { z-index: 3; }   /* words and noise pass under the card, never over its text */
.dossier .fly.obj .xy { left: 0; bottom: auto; top: -16px; font: 600 11px/1 var(--mono); letter-spacing: .06em; text-transform: none; color: var(--dim); }
.dossier .fly.obj:hover .xy, .dossier .fly.obj:active .xy { color: var(--red); }
@media (max-width: 700px) {
  .dossier { height: 820px; }
  .dossier-card { top: 46%; }
}
/* About · whoami (assets/about-term.js): a terminal that answers while you scroll, next to an ASCII globe */
.section.whoami { padding-top: 0; padding-bottom: 0; background: var(--room); }   /* pins at the top (the grid fills the screen); the background gives the pinned layer something to blend pictures against */
.whoami-grid { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: clamp(32px, 6vw, 96px); align-items: center; min-height: 100vh; }
.term { border: 1px solid var(--rule); background: #070505; font: 15px/1.75 var(--mono); }
.term-bar { display: flex; justify-content: space-between; padding: 10px 16px; border-bottom: 1px solid var(--rule); font-size: 10px; letter-spacing: .16em; text-transform: uppercase; color: var(--faint); }
.term-body { padding: 22px 22px 18px; min-height: 380px; }
.term .cmd { margin: 0 0 18px; visibility: hidden; }
.term .cmd.run { visibility: visible; }
.term .in { margin: 0; color: var(--ink); }
.term .in::before { content: "> "; color: var(--red); }
.term .out { margin: 4px 0 0; color: var(--ink); visibility: hidden; }
.term .cmd.answered .out { visibility: visible; }
.term .out .muted { color: var(--dim); }
.term .ls { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: 4px 22px; }
.term .ls li { cursor: default; color: var(--dim); outline: none; }
.term .ls li:hover, .term .ls li:focus-visible { color: var(--red); }
.term .prompt { margin: 0; color: var(--red); }
.term .prompt::before { content: "> "; }
.globe-box { position: relative; margin: 0; aspect-ratio: 1; cursor: grab; touch-action: none; user-select: none; }
.globe-box.grab { cursor: grabbing; }
@media (pointer: coarse) { .globe-box { touch-action: pan-y; } }   /* on touch, a vertical swipe still scrolls the page */
.globe-box canvas { width: 100%; height: 100%; display: block; transition: opacity .35s ease; }
.globe-box.peeking canvas { opacity: .18; }
.globe-box .peek { position: absolute; inset: 12%; width: 76%; height: 76%; object-fit: contain; mix-blend-mode: lighten; opacity: 0; transition: opacity .35s ease; pointer-events: none; }
.globe-box .peek-ph { position: absolute; inset: 0; display: grid; place-items: center; font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--dim); opacity: 0; transition: opacity .35s; pointer-events: none; }
.globe-box.peeking .peek, .globe-box.peeking .peek-ph { opacity: 1; }
.globe-read { position: absolute; left: 0; right: 0; bottom: -6px; text-align: center; font-size: 10px; letter-spacing: .16em; color: var(--faint); }
@media (max-width: 900px) {
  .whoami-grid { grid-template-columns: minmax(0, 1fr); min-height: 0; }
  .globe-box { order: -1; max-width: 420px; width: 100%; margin: 0 auto; }
  .term-body { min-height: 0; }
}
/* About · the collage without edges: full bleed, melting into the page on every side (long soft masks), and as it
   scrolls in and out it simply fades and settles, with no line or frame (--open is set by .screen-in in assets/site.js) */
.collage-sec { padding-top: 0; padding-bottom: 0; margin-top: -6vh; }
.montage-wrap { position: relative; width: 100vw; margin-left: calc(50% - 50vw); --open: 1; }
.montage-wrap .montage { display: block; width: 100%; aspect-ratio: 16 / 9; max-height: 100vh; background: transparent;
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 26%, #000 74%, transparent), linear-gradient(to right, transparent, #000 18%, #000 82%, transparent);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(to bottom, transparent, #000 26%, #000 74%, transparent), linear-gradient(to right, transparent, #000 18%, #000 82%, transparent);
  mask-composite: intersect;
  opacity: var(--open); transform: translateY(calc((1 - var(--open)) * 36px)) scale(calc(0.97 + 0.03 * var(--open))); transform-origin: 50% 50%; }
/* About · the collage (assets/collage.js): a stage that holds still while you scroll past; small pieces that blink in
   and out on their own cycle, like the reference video. It reaches a little into the intro above */
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.collage2 { position: relative; height: 220vh; margin-top: -12vh; }
.c-stage { position: sticky; top: 0; height: 100vh; overflow: hidden; }
.c-title { position: absolute; left: var(--gutter); top: 50%; margin: 0; transform: translateY(-50%); z-index: 3;
  font: 500 clamp(22px, 2.2vw, 32px)/1 var(--mono); letter-spacing: .06em; color: var(--ink); }
.c-piece { position: absolute; margin: 0; }
.c-piece.flash::after { content: ""; position: absolute; inset: 0; background: rgba(160, 154, 150, .55); }
.c-txt { font: 500 11px/1.4 var(--mono); letter-spacing: .08em; color: var(--dim); white-space: pre; }
.c-txt.big { font-size: clamp(16px, 1.5vw, 22px); color: var(--ink); }
.c-block { width: min(250px, 20vw); font: 500 10.5px/1.65 var(--mono); letter-spacing: .04em; color: var(--ink); }
.c-block span { display: block; min-height: 1.65em; }
.c-block hr { border: 0; border-top: 1px solid #4a4241; margin: 5px 0; }
.c-asc { font: 9px/1.05 var(--mono); letter-spacing: .1em; color: #6b625f; white-space: pre; }
.c-pic { width: calc(var(--w) * 1vw); }
.c-pic canvas { display: block; width: 100%; height: auto; }
.c-pic .xy { position: absolute; left: 0; bottom: 100%; padding-bottom: 4px; font: 600 9px/1 var(--mono); letter-spacing: .04em; color: var(--ink); white-space: nowrap; }
@media (max-width: 900px) {
  .collage2 { height: 200vh; margin-top: -6vh; }
  .c-title { top: 6%; transform: none; }
  .c-pic { width: calc(var(--w) * 1.9vw); }
  .c-block { width: 46vw; }
}
@media (prefers-reduced-motion: reduce) { .collage2 { height: auto; } .c-stage { position: relative; } }