/* Landing page layout. brand.css holds the palette, fonts and shared devices. */

/* ---------- Sections ---------- */
.sec { padding-block: clamp(72px, 10vw, 136px); position: relative; }
.sec + .sec::before {
  content: ""; position: absolute; top: 0; left: var(--gut); right: var(--gut); height: 9px;
  border-top: 1px solid rgb(var(--ink) / .22);
  background: repeating-linear-gradient(90deg, rgb(var(--ink) / .3) 0 1px, transparent 1px 40px);
}
.sec-head { display: grid; gap: 14px; max-width: 780px; margin-bottom: clamp(32px, 5vw, 56px); }
.sec-head p { margin: 0; color: rgb(var(--ink-2)); max-width: 64ch; }

/* ---------- Hero ---------- */
.hero { position: relative; height: clamp(620px, 88vh, 900px); overflow: hidden; isolation: isolate; }
.plane { position: absolute; inset: 0; cursor: none; touch-action: pan-y; }
.plane canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
#plane-blur { filter: blur(5px); opacity: .85; }
#plane-sharp {
  -webkit-mask-image: linear-gradient(to bottom, transparent 4%, black 30%, black 72%, transparent 97%);
  mask-image: linear-gradient(to bottom, transparent 4%, black 30%, black 72%, transparent 97%);
}
.hero::after {
  content: ""; position: absolute; inset: auto 0 0 0; height: 140px; pointer-events: none;
  background: linear-gradient(rgb(var(--bg) / 0), rgb(var(--bg)));
}
.hero-copy {
  position: absolute; z-index: 5; left: var(--gut); bottom: clamp(28px, 6vh, 64px);
  width: min(600px, calc(100% - 2 * var(--gut)));
  padding: clamp(18px, 2.4vw, 28px);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  display: grid; gap: 14px;
  --c: rgb(var(--ink) / .8);
}
.attr { margin: -6px 0 0; font: 500 11px/1.3 var(--f-data); letter-spacing: .14em; text-transform: uppercase; color: rgb(var(--ink-2)); }
.attr::before { content: "— "; }
.lede { margin: 0; color: rgb(var(--ink-2)); max-width: 52ch; }
.hero-tags {
  position: absolute; z-index: 5; right: var(--gut); top: 92px;
  display: grid; gap: 6px; width: 228px; pointer-events: none;
  font: 500 10.5px/1.3 var(--f-data); letter-spacing: .1em; text-transform: uppercase;
}
.tag {
  display: flex; justify-content: space-between; gap: 12px; padding: 7px 10px;
  border-left: 2px solid rgb(var(--signal)); background: rgb(var(--bg) / .66);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
.tag span { color: rgb(var(--ink-2)); }
.tag b { font-weight: 500; font-variant-numeric: tabular-nums; white-space: nowrap; }
.tag.is-lock { background: rgb(var(--signal)); color: rgb(var(--on-signal)); }
.tag.is-lock span { color: inherit; opacity: .75; }
.hint {
  position: absolute; z-index: 5; right: var(--gut); bottom: 22px; margin: 0;
  display: flex; align-items: center; gap: 8px; pointer-events: none;
  font: 500 10.5px/1 var(--f-data); letter-spacing: .12em; text-transform: uppercase; color: rgb(var(--ink-2));
}
.hint i { width: 6px; height: 6px; background: rgb(var(--signal)); animation: blink 1.1s steps(2, jump-none) infinite; }
@media (max-width: 760px) { .hero-tags, .hint { display: none; } }

/* ---------- Showreel over the hero (js/sections/reel.js) ----------
   html[data-reel] is set while the reel shows: first by reel-boot.js, before the first paint, then by reel.js.
   The reel is drawn at 1920 x 1080 and scaled to fit under the top bar. The box behind it is the page
   ground, which is also the reel's own background in Day and in Nite, so the bars around it do not show. */
.reel { position: absolute; inset: 0; z-index: 8; background: rgb(var(--bg)); transition: opacity .8s; }
html[data-reel] .reel { display: block; }
.reel.is-out { opacity: 0; }
.reel-stage { position: absolute; left: 0; top: 0; width: 1920px; height: 1080px; transform-origin: 0 0; overflow: hidden; }
.reel-load {
  position: absolute; inset: 0; margin: 0; display: grid; place-items: center;
  font: 500 10.5px/1 var(--f-data); letter-spacing: .12em; text-transform: uppercase; color: rgb(var(--ink-2));
}
.reel-skip { position: absolute; z-index: 1; right: var(--gut); bottom: 12px; }
.hero-copy, .hero-tags, .hint { transition: opacity .8s; }
html[data-reel] .hero-copy, html[data-reel] .hero-tags, html[data-reel] .hint { opacity: 0; pointer-events: none; }

/* ---------- The game: scale of player experience ----------
   Two rows set the scale: most games give you one character, this game the whole command.
   Five levels follow, each rule heavier than the one before. The slider sets who runs
   each level: signal = the player runs it (a person acts), dashed ink = the AI runs it.
   Without the script the slider stays hidden and no level is marked. */
.vs { display: grid; margin-bottom: clamp(40px, 6vw, 72px); border-top: 1px solid rgb(var(--ink) / .22); }
.vs-row { margin: 0; display: grid; grid-template-columns: 200px auto minmax(0, 1fr); gap: 8px 24px; align-items: center; padding-block: 16px; border-bottom: 1px solid rgb(var(--ink) / .22); }
.vs-k { font: 500 11px/1.3 var(--f-data); letter-spacing: .14em; text-transform: uppercase; color: rgb(var(--ink-2)); }
.vs-t { color: rgb(var(--ink-2)); max-width: 64ch; }
.is-us .vs-k, .is-us .vs-t { color: rgb(var(--ink)); }
.is-us .vs-t { font-size: 1.1em; }
.meter { display: flex; gap: 3px; }
.meter i { width: 9px; height: 9px; border: 1px solid rgb(var(--ink) / .35); }
.meter.lv1 i:first-child, .meter.lv5 i { background: rgb(var(--ink)); border-color: rgb(var(--ink)); }

.ladder { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); }
.lvl {
  --tone: rgb(var(--ink) / .7);
  position: relative; display: grid; gap: 10px; align-content: start; padding: 22px 18px 22px 0;
  border-top: var(--rule) solid var(--tone); transition: border-color .25s;
}
.lvl::before { content: ""; position: absolute; top: calc(var(--rule) * -1 - 3px); left: 0; width: 7px; height: 7px; background: var(--tone); transition: background-color .25s; }
.lvl.lv1 { --rule: 1px; } .lvl.lv2 { --rule: 2px; } .lvl.lv3 { --rule: 3px; } .lvl.lv4 { --rule: 4px; } .lvl.lv5 { --rule: 6px; }
.lvl.lv5::before { animation: pulse 1.6s ease-in-out infinite; }
.step-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding-right: 10px; min-height: 20px; }
.step-n { font: 500 11px/1 var(--f-data); letter-spacing: .14em; color: var(--tone); }
.lvl h3 { transition: color .25s; }
.lvl p { margin: 0; font-size: 15.5px; color: rgb(var(--ink-2)); }
.who { font: 500 10px/1 var(--f-data); letter-spacing: .14em; text-transform: uppercase; padding: 4px 6px; border: 1px solid transparent; }
.who:empty { display: none; }
.lvl[data-who="you"] { --tone: rgb(var(--signal)); }
.lvl[data-who="you"] h3 { color: rgb(var(--signal)); }
.lvl[data-who="you"] .who { background: rgb(var(--signal)); color: rgb(var(--on-signal)); }
.lvl[data-who="ai"] { --tone: rgb(var(--ink) / .4); border-top-style: dashed; }
.lvl[data-who="ai"] h3 { color: rgb(var(--ink-2)); }
.lvl[data-who="ai"] .who { border: 1px dashed rgb(var(--ink) / .55); color: rgb(var(--ink-2)); }
@keyframes pulse { 50% { transform: scale(1.7); opacity: .55; } }

/* The thumb is 18px. The input is 80% + 18px wide and starts 9px before 10%, so the thumb's
   centre sits under the centre of each of the five columns (10%, 30% ... 90%). */
.helm { display: grid; gap: 12px; margin-top: 6px; }
.helm-k { font: 500 10.5px/1.3 var(--f-data); letter-spacing: .12em; text-transform: uppercase; color: rgb(var(--ink-2)); text-align: center; order: 3; }
.helm-in {
  -webkit-appearance: none; appearance: none; display: block; height: 26px; margin: 0 0 0 calc(10% - 9px); width: calc(80% + 18px);
  background: transparent; cursor: pointer; --p: 50%;
}
.helm[data-v="1"] .helm-in { --p: 0%; } .helm[data-v="2"] .helm-in { --p: 25%; } .helm[data-v="3"] .helm-in { --p: 50%; }
.helm[data-v="4"] .helm-in { --p: 75%; } .helm[data-v="5"] .helm-in { --p: 100%; }
.helm-in::-webkit-slider-runnable-track { height: 2px; background: linear-gradient(90deg, rgb(var(--ink) / .3) var(--p), rgb(var(--signal)) var(--p)); }
.helm-in::-moz-range-track { height: 2px; background: linear-gradient(90deg, rgb(var(--ink) / .3) var(--p), rgb(var(--signal)) var(--p)); }
.helm-in::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 18px; height: 18px; margin-top: -8px; border-radius: 0; border: 3px solid rgb(var(--bg)); background: rgb(var(--signal)); box-shadow: 0 0 0 1px rgb(var(--signal)); }
.helm-in::-moz-range-thumb { box-sizing: border-box; width: 18px; height: 18px; border-radius: 0; border: 3px solid rgb(var(--bg)); background: rgb(var(--signal)); box-shadow: 0 0 0 1px rgb(var(--signal)); }
.helm-in:focus-visible { outline: 2px solid rgb(var(--signal)); outline-offset: 4px; }
.helm-out { margin: 0; font: 500 11px/1.4 var(--f-data); letter-spacing: .12em; text-transform: uppercase; text-align: center; font-variant-numeric: tabular-nums; order: 1; }
.helm-note { order: 4; margin: 0; font-size: 13.5px; color: rgb(var(--ink-2)); text-align: center; }

/* Time per day: 24 cells, one per hour, drawn to scale. Filled cells = hands-on hours. */
.clock { order: 2; display: grid; gap: 8px; width: min(100%, 640px); justify-self: center; margin-top: 10px; }
.clock-k { margin: 0; display: flex; flex-wrap: wrap; justify-content: center; align-items: baseline; gap: 4px 12px; }
.clock-h { font: 400 clamp(20px, 2.4vw, 26px)/1.1 var(--f-display); font-variant-numeric: tabular-nums; color: rgb(var(--signal)); }
.clock-like { color: rgb(var(--ink-2)); }
.day24 { display: grid; grid-template-columns: repeat(24, minmax(0, 1fr)); gap: 2px; height: 14px; }
.day24 i { background: rgb(var(--ink) / .12); transition: background-color .2s; }
.day24 i:nth-child(6n) { box-shadow: 2px 0 0 rgb(var(--ink) / .35); }
.day24 i:last-child { box-shadow: none; }
.day24 i.on { background: rgb(var(--signal)); }
.day24 i.half { background: linear-gradient(90deg, rgb(var(--signal)) 50%, rgb(var(--ink) / .12) 50%); }
.clock-axis { margin: 0; display: grid; grid-template-columns: 1fr auto 1fr; font: 500 10px/1 var(--f-data); letter-spacing: .1em; text-transform: uppercase; color: rgb(var(--ink-2)); }
.clock-axis span:nth-child(2) { text-align: center; }
.clock-axis span:last-child { text-align: right; }

.ways { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(20px, 4vw, 56px); margin-top: clamp(28px, 4vw, 44px); }
.way { display: grid; gap: 8px; align-content: start; padding-top: 14px; border-top: 1px solid rgb(var(--ink) / .22); }
.way p { margin: 0; color: rgb(var(--ink-2)); max-width: 52ch; }
.way .way-k { display: flex; align-items: center; gap: 9px; font: 500 11px/1 var(--f-data); letter-spacing: .14em; text-transform: uppercase; color: rgb(var(--ink)); }
.way-k i { width: 10px; height: 10px; flex: none; }
.way-you .way-k i { background: rgb(var(--signal)); }
.way-ai .way-k i { border: 1px dashed rgb(var(--ink) / .6); }
.way-ai { justify-items: end; text-align: right; }

@media (max-width: 960px) {
  .ladder { grid-template-columns: minmax(0, 1fr); }
  .lvl { border-top: 0; border-left: var(--rule) solid var(--tone); padding: 4px 0 26px 22px; }
  .lvl[data-who="ai"] { border-left-style: dashed; }
  .lvl::before { top: 6px; left: calc(var(--rule) * -1 - 3px); }
  .helm-in { margin: 0; width: 100%; }
}
@media (max-width: 640px) {
  .vs-row { grid-template-columns: auto minmax(0, 1fr); }
  .vs-t { grid-column: 1 / -1; }
  .ways { grid-template-columns: minmax(0, 1fr); }
  .way-ai { justify-items: start; text-align: left; }
}

/* ---------- Stats: a character sheet becomes a syndicate sheet ----------
   Each row pairs a classic character stat with the syndicate stat that takes its place, joined
   by a line. With the script (and motion allowed) each line draws and each code decodes once,
   when the table first comes into view. Without it, everything is drawn from the start. */
.sheet { width: 100%; border-collapse: collapse; table-layout: fixed; --gap: 96px; --line: 72px; }
.sheet caption { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.sheet th { text-align: left; padding: 0 0 12px; font: 500 10.5px/1.3 var(--f-data); letter-spacing: .14em; text-transform: uppercase; color: rgb(var(--ink-2)); }
.sheet th:first-child { width: 32%; }
.sheet th:last-child { padding-left: var(--gap); color: rgb(var(--ink)); }
.sheet td { border-top: 1px solid rgb(var(--ink) / .22); padding: 16px 0; vertical-align: top; }
.sheet tbody tr:last-child td { border-bottom: 1px solid rgb(var(--ink) / .22); }
.ch b { display: block; font: 400 clamp(20px, 2.2vw, 28px)/1.1 var(--f-display); color: rgb(var(--ink-2)); }
.ch span { display: block; margin-top: 4px; font-size: 14px; color: rgb(var(--ink-2)); }
.sheet .sy { position: relative; padding-left: var(--gap); }
.sy::before { content: ""; position: absolute; left: 0; top: 30px; width: var(--line); height: 1px; background: rgb(var(--ink) / .45); transform-origin: left; transition: transform .45s ease var(--d, 0s), background-color .2s; }
.sy::after { content: ""; position: absolute; left: calc(var(--line) - 6px); top: 26px; border: 4.5px solid transparent; border-left: 7px solid rgb(var(--ink) / .45); border-right-width: 0; transition: opacity .2s calc(var(--d, 0s) + .4s), border-left-color .2s; }
.sy-c { display: block; font: 500 clamp(18px, 2vw, 24px)/1.15 var(--f-data); letter-spacing: .06em; color: rgb(var(--ink)); }
.sy-f { display: block; margin-top: 5px; font: 500 10.5px/1.3 var(--f-data); letter-spacing: .12em; text-transform: uppercase; color: rgb(var(--ink-2)); }
.sy-m { display: block; margin-top: 6px; }
.sheet tbody tr:hover .sy::before { background: rgb(var(--ink)); }
.sheet tbody tr:hover .sy::after { border-left-color: rgb(var(--ink)); }
.sheet.is-armed .sy::before { transform: scaleX(0); }
.sheet.is-armed .sy::after { opacity: 0; }
.sheet.is-on .sy::before { transform: scaleX(1); }
.sheet.is-on .sy::after { opacity: 1; }
/* --d staggers the reveal row by row; hover changes stay instant. */
.sheet tr:nth-child(2) { --d: .12s; } .sheet tr:nth-child(3) { --d: .24s; } .sheet tr:nth-child(4) { --d: .36s; }
.sheet tr:nth-child(5) { --d: .48s; } .sheet tr:nth-child(6) { --d: .6s; }
@media (max-width: 640px) {
  .sheet { --gap: 40px; --line: 26px; }
  .sheet th:first-child { width: 30%; }
  .ch b { font-size: 18px; }
  .ch span { font-size: 13px; }
}

/* ---------- Data, not graphics ----------
   The studio's promise in one large line, then four kinds of data. Each project number is
   one that its card below already shows, and each item links to that card. */
.data .sec-head { max-width: 1000px; }
.data-h { font-size: clamp(26px, 3.6vw, 48px); line-height: 1.16; }
.data-h .dim { color: rgb(var(--ink-2)); }
.dks { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.dk { padding: 20px 20px 18px; display: grid; gap: 10px; align-content: start; min-width: 0; }
.dk p { margin: 0; font-size: 15px; color: rgb(var(--ink-2)); }
.dk .dk-k { font: 500 10.5px/1.3 var(--f-data); letter-spacing: .14em; text-transform: uppercase; color: rgb(var(--ink)); }
.dk .dk-n { font: 400 clamp(26px, 2.8vw, 36px)/1.05 var(--f-display); font-variant-numeric: tabular-nums; color: rgb(var(--ink)); overflow-wrap: anywhere; }
.dk a { justify-self: start; margin-top: 4px; font: 500 10.5px/1 var(--f-data); letter-spacing: .12em; text-transform: uppercase; text-decoration: none; padding: 7px 9px; border: 1px dashed rgb(var(--ink) / .45); color: rgb(var(--ink-2)); }
.dk a:hover { color: rgb(var(--ink)); border-color: rgb(var(--signal)); }
@media (max-width: 1000px) { .dks { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .dks { grid-template-columns: minmax(0, 1fr); } }

/* ---------- Projects ---------- */
.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr)); gap: 16px; }
.card { padding: 20px 20px 18px; display: grid; gap: 12px; align-content: start; }
.code { padding: 5px 8px; background: rgb(var(--ink)); color: rgb(var(--bg)); }
.card h3 { font-size: 16px; }
.card p { margin: 0; font-size: 15.5px; color: rgb(var(--ink-2)); }
.arrow { color: rgb(var(--signal)); }

/* ---------- Contact ---------- */
.contact { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: clamp(28px, 5vw, 64px); align-items: start; }
.contact .sec-head { margin-bottom: 24px; }
.form { padding: clamp(18px, 2.4vw, 28px); display: grid; gap: 16px; }
.row2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.field { display: grid; gap: 7px; min-width: 0; }
.field label { font: 500 10.5px/1 var(--f-data); letter-spacing: .12em; text-transform: uppercase; color: rgb(var(--ink-2)); }
.field input, .field textarea {
  width: 100%; font: 500 15px/1.3 var(--f-body); color: rgb(var(--ink));
  background: rgb(var(--bg)); border: 1px solid rgb(var(--ink) / .3); border-radius: 0; padding: 11px 12px;
}
.field textarea { resize: vertical; min-height: 120px; }
.field input:focus-visible, .field textarea:focus-visible { outline: 2px solid rgb(var(--signal)); outline-offset: 0; border-color: rgb(var(--signal)); }
.trap { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.status { margin: 0; padding: 11px 13px; border-left: 2px solid rgb(var(--ok)); background: rgb(var(--ok) / .1); font: 500 12px/1.5 var(--f-data); letter-spacing: .03em; }
.status.is-err { border-color: rgb(var(--hot)); background: rgb(var(--hot) / .1); }
.fine { margin: 0; font-size: 13.5px; color: rgb(var(--ink-2)); }
@media (max-width: 900px) { .contact { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 520px) { .row2 { grid-template-columns: minmax(0, 1fr); } }

/* ---------- The open-role notice (under the hero) ---------- */
.notice { padding-block: clamp(40px, 6vw, 72px); }
.notice-card { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: clamp(24px, 4vw, 56px); padding: clamp(22px, 3.4vw, 40px); border-left: 4px solid rgb(var(--signal)); }
.notice-main { display: grid; gap: 14px; align-content: start; min-width: 0; }
.notice-main p { margin: 0; color: rgb(var(--ink-2)); max-width: 62ch; }
.notice-main .eyebrow { color: rgb(var(--ink-2)); }
.notice-apply { display: grid; gap: 12px; align-content: start; min-width: 0; padding-left: clamp(0px, 2.4vw, 32px); border-left: 1px solid rgb(var(--ink) / .22); }
.notice-apply p { margin: 0; color: rgb(var(--ink-2)); }
.notice-n { font: 500 11px/1 var(--f-data); letter-spacing: .16em; text-transform: uppercase; color: rgb(var(--signal)) !important; }
@media (max-width: 760px) {
  .notice-card { grid-template-columns: minmax(0, 1fr); }
  .notice-apply { padding-left: 0; padding-top: 18px; border-left: 0; border-top: 1px solid rgb(var(--ink) / .22); }
}

@media (prefers-reduced-motion: reduce) {
  .hint i, .lvl.lv5::before { animation: none; }
  .lvl, .lvl::before, .lvl h3, .day24 i, .sy::before, .sy::after { transition: none; }
  .reel, .hero-copy, .hero-tags, .hint { transition: none; }
}