/* =========================================================================
   THE COLOURIST — colour.css  (v2: authored grading-suite redesign)
   Type: Bricolage Grotesque (display) · Inter Tight tabular (instrument labels — no mono) ·
         Inter Tight (body) · Fraunces italic (one serif moment).
   Grade applied to the MEDIA LAYER only (never text). Accents are hard-edged
   instruments (keylines / scope traces), never glows. Coral = display-only.
   ========================================================================= */

:root{
  /* grade engine state — DEFAULT = final graded (no-JS safe) */
  --g-con:1.06; --g-sat:1.12; --g-bri:1.00;
  --g-cast-o:0.12; --g-cast:#e0925a; --wx:50%; --wy:42%;

  /* palette — grading-suite near-black (warm-biased), visible hairlines */
  --bg:#0A0A0C; --panel:#121319; --panel-2:#1A1B22; --line:#2A2C36;
  --fg:#ECEAE3; --fg-dim:#8C8E98; --fg-mute:#5E606C;
  --lift:#36E0C8;   /* cyan — cold gel, body-safe accent */
  --gain:#FF5C3B;   /* coral — DISPLAY ONLY (>=24px) */
  --ink:#E9C46A;    /* grease/approval gold */
  --grease:#E2342B;

  --display:'Bricolage Grotesque',system-ui,sans-serif;
  --mono:'Inter Tight',system-ui,sans-serif; /* tabular sans timecodes — NOT mono */
  --body:'Inter Tight',system-ui,sans-serif;
  --serif:'Fraunces',Georgia,serif;
  --rail:150px;
  --ease:cubic-bezier(.22,.61,.36,1);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;background:var(--bg);color:var(--fg);
  font-family:var(--body);font-weight:400;letter-spacing:.005em;
  font-size:clamp(1rem,1.25vw,1.0625rem);line-height:1.55;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
img{display:block;max-width:100%}
a{color:inherit}
button{font:inherit;color:inherit;cursor:pointer;background:none;border:0}
:focus-visible{outline:2px solid var(--lift);outline-offset:2px;border-radius:0}
::selection{background:var(--lift);color:var(--bg)}

/* THE GRADE — media layer only */
.gradeable{filter:contrast(var(--g-con)) saturate(var(--g-sat)) brightness(var(--g-bri))}
.gradeable.is-anim{will-change:filter}
/* THE CAST — one fixed soft-light tint (opacity-animated; cheap) */
.cast{position:fixed;inset:0;z-index:5;pointer-events:none;mix-blend-mode:soft-light;
  opacity:var(--g-cast-o);background:radial-gradient(130% 120% at var(--wx) var(--wy),var(--g-cast),transparent 62%)}

/* ---- type atoms ---- */
.mono{font-family:var(--mono);font-weight:500;font-size:.6875rem;letter-spacing:.16em;text-transform:uppercase;color:var(--fg-dim);font-variant-numeric:tabular-nums}
.tc{font-family:var(--mono);font-weight:400;letter-spacing:.06em;font-variant-numeric:tabular-nums}
.wrap{max-width:1080px;margin-inline:auto;padding-inline:clamp(22px,5vw,64px)}
.lift{color:var(--lift)} .gain{color:var(--gain)}

/* a tiny inline scope/vector glyph used beside section labels */
.scope{display:inline-block;width:12px;height:12px;vertical-align:-1px;opacity:.7}

/* ===================== NODE RAIL — numbered register + playhead ===================== */
.rail{position:fixed;left:0;top:0;height:100vh;height:100svh;width:var(--rail);z-index:60;
  display:flex;flex-direction:column;justify-content:center;padding:0 0 0 24px}
.rail__node{position:relative;display:grid;grid-template-columns:auto 1fr;gap:11px;align-items:baseline;
  text-decoration:none;color:var(--fg-dim);padding:9px 14px 9px 0;border-top:1px solid var(--line)}
.rail__node:first-of-type{border-top:0}
.rail__num{font-family:var(--mono);font-weight:500;font-size:11px;letter-spacing:.1em;color:var(--fg-mute);font-variant-numeric:tabular-nums;transition:color .3s}
.rail__lab{font-family:var(--mono);font-size:9.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--fg-mute);transition:color .3s}
.rail__node:hover .rail__num,.rail__node:hover .rail__lab{color:var(--fg-dim)}
.rail__node[aria-current="true"] .rail__num{color:var(--fg)}
.rail__node[aria-current="true"] .rail__lab{color:var(--lift)}
.rail__node[aria-current="true"]::after{content:"";position:absolute;left:0;top:50%;width:16px;height:1px;background:var(--lift);transform:translateY(-.5px)}
/* the playhead: a hairline down the rail filling cyan with scroll progress */
.rail__track{position:absolute;left:0;top:9%;bottom:9%;width:1px;background:var(--line)}
.rail__track::after{content:"";position:absolute;left:0;top:0;width:100%;height:var(--play,0%);background:var(--lift);transition:height .4s var(--ease)}

/* ===================== MOBILE SCRUBBER ===================== */
.scrub{display:none;position:fixed;top:0;left:0;right:0;z-index:65;height:46px;align-items:center;gap:12px;
  padding:0 16px;background:rgba(10,10,12,.94);border-bottom:1px solid var(--line)}
.scrub__now{font-family:var(--mono);font-weight:500;font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--lift);white-space:nowrap}
.scrub__dots{display:flex;gap:7px;flex:1}
.scrub__dot{width:6px;height:6px;border-radius:50%;background:var(--line);transition:background .3s,transform .3s}
.scrub__dot.is-on{background:var(--lift);transform:scale(1.3)}
.scrub__tc{font-family:var(--mono);font-size:9.5px;letter-spacing:.08em;color:var(--fg-mute);font-variant-numeric:tabular-nums}

/* ===================== SECTIONS ===================== */
.node{position:relative;z-index:1;padding:clamp(78px,14vh,160px) 0;min-height:60vh;display:flex;align-items:center}
.node__eyebrow{display:flex;align-items:center;gap:12px;margin-bottom:clamp(22px,3.5vh,34px)}
.node__eyebrow .id{font-family:var(--mono);font-weight:500;font-size:.7rem;letter-spacing:.2em;color:var(--lift);font-variant-numeric:tabular-nums}
.node__eyebrow .nm{font-family:var(--mono);font-size:.64rem;letter-spacing:.22em;text-transform:uppercase;color:var(--fg-dim)}
.node__eyebrow .ln{flex:1;height:1px;background:var(--line)}
/* film-strip tick ruler on section openers */
.node__eyebrow::after{content:"";width:64px;height:9px;flex:none;
  background:repeating-linear-gradient(90deg,var(--line) 0 1px,transparent 1px 7px)}

/* ---- INGEST / hero ---- */
.ingest{min-height:100vh;min-height:100svh;padding-top:clamp(70px,12vh,120px)}
.ingest__inner{display:grid;grid-template-columns:1.08fr .92fr;gap:clamp(30px,5vw,68px);align-items:center;width:100%}
.ingest__slate{font-family:var(--mono);font-size:.66rem;letter-spacing:.16em;text-transform:uppercase;color:var(--fg-dim);
  display:flex;flex-wrap:wrap;gap:6px 14px;margin-bottom:clamp(22px,3vh,34px);font-variant-numeric:tabular-nums}
.ingest__slate .b{color:var(--lift)}
.ingest__brand{display:flex;align-items:center;gap:13px;margin-bottom:clamp(22px,3vh,32px)}
.reticle{width:32px;height:32px;flex:none}
.ingest__brand .wm{font-family:var(--display);font-weight:700;font-size:1.02rem;letter-spacing:.01em;text-transform:uppercase}
.ingest h1{font-family:var(--display);font-weight:800;text-transform:uppercase;
  font-size:clamp(2.7rem,7.2vw,5.6rem);line-height:.9;letter-spacing:-.025em;margin:0}
.ingest h1 em{font-style:normal;color:var(--gain)}
.ingest__lede{max-width:40ch;margin:clamp(20px,3vh,30px) 0 0;color:var(--fg);font-size:1.06rem}
.ingest__cue{margin-top:clamp(28px,5vh,46px);display:inline-flex;gap:10px;align-items:center;color:var(--fg-dim);text-decoration:none;
  font-family:var(--mono);font-size:.66rem;letter-spacing:.18em;text-transform:uppercase}
.ingest__cue .d{animation:bob 1.8s var(--ease) infinite}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(5px)}}
.ingest__frame{position:relative;border:1px solid var(--line);overflow:hidden;aspect-ratio:16/10;background:var(--panel)}
.ingest__frame img{width:100%;height:100%;object-fit:cover}
.ingest__bars{position:absolute;inset:0;pointer-events:none}
.ingest__bars::before,.ingest__bars::after{content:"";position:absolute;left:0;right:0;height:7%;background:#000;opacity:.55}
.ingest__bars::before{top:0}.ingest__bars::after{bottom:0}
.frame__tag{position:absolute;left:11px;bottom:11px;z-index:3;font-family:var(--mono);font-size:.6rem;letter-spacing:.12em;text-transform:uppercase;
  color:#fff;background:rgba(0,0,0,.55);padding:4px 8px;font-variant-numeric:tabular-nums}

/* ---- generic node ---- */
.node h2{font-family:var(--display);font-weight:800;text-transform:uppercase;
  font-size:clamp(1.9rem,4.6vw,3.4rem);line-height:.96;letter-spacing:-.02em}
.node h2 em{font-style:normal;color:var(--lift)}
.node__body{max-width:48ch;margin-top:clamp(16px,2.2vh,24px);color:var(--fg)}
.node__body p{margin:0 0 .8em}
/* the ONE serif moment (about) */
.artistry{font-family:var(--serif);font-style:italic;font-weight:400;font-size:clamp(1.5rem,3.6vw,2.4rem);
  line-height:1.24;letter-spacing:0;color:var(--fg);max-width:24ch;margin:clamp(8px,1.5vh,14px) 0 0}
.artistry em{font-style:italic;color:var(--ink)}

/* ---- disciplines (node 02) — ruled register ---- */
.disc{margin-top:clamp(28px,4vh,42px);border-top:1px solid var(--line)}
.disc__row{display:grid;grid-template-columns:auto 1fr auto;gap:18px;align-items:baseline;padding:20px 0;border-bottom:1px solid var(--line)}
.disc__row .no{font-family:var(--mono);font-weight:500;font-size:.7rem;color:var(--lift);letter-spacing:.12em;font-variant-numeric:tabular-nums}
.disc__row .ti{font-family:var(--display);font-weight:700;text-transform:uppercase;font-size:clamp(1.2rem,2.6vw,1.9rem);letter-spacing:-.01em}
.disc__row .ds{font-family:var(--mono);font-size:.64rem;color:var(--fg-dim);letter-spacing:.14em;text-transform:uppercase}
.disc__row--key .ti{color:var(--lift)}
.disc__row--key .no::before{content:"● ";color:var(--gain)}

/* ===================== NODE 03 — THE WHEEL (trackball panel) ===================== */
.wheelnode .wheel__grid{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(30px,5vw,64px);align-items:center;width:100%}
.monitor{position:relative;border:1px solid var(--line);overflow:hidden;aspect-ratio:16/10;background:var(--panel)}
.monitor img{width:100%;height:100%;object-fit:cover}
.grease{position:absolute;inset:0;z-index:4;pointer-events:none}
.grease svg{width:100%;height:100%}
.grease path,.grease line{stroke:var(--grease);stroke-width:3;fill:none;stroke-linecap:round;
  stroke-dasharray:var(--len,900);stroke-dashoffset:var(--len,900);transition:stroke-dashoffset .7s var(--ease)}
.grease.is-final path,.grease.is-final line{stroke-dashoffset:0}
.grease__txt{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%) rotate(-6deg);
  font-family:var(--mono);font-weight:500;font-size:1.02rem;letter-spacing:.2em;color:var(--grease);
  text-shadow:0 1px 8px rgba(0,0,0,.55);opacity:0;transition:opacity .3s var(--ease) .45s;white-space:nowrap}
.grease.is-final .grease__txt{opacity:1}

/* the trackball + its bezel/readout */
.wheel__panel{background:var(--panel);border:1px solid var(--line);padding:clamp(20px,3vw,30px)}
.wheel{position:relative;width:min(86%,270px);aspect-ratio:1;margin:6px auto 0;border-radius:50%;
  background:radial-gradient(circle at 50% 50%,#16171F,#0C0D12 78%);border:1px solid var(--line);touch-action:none}
.wheel__grat{position:absolute;inset:0;border-radius:50%;pointer-events:none}
.wheel__grat::before,.wheel__grat::after{content:"";position:absolute;background:var(--line)}
.wheel__grat::before{left:50%;top:7%;bottom:7%;width:1px;transform:translateX(-.5px)}
.wheel__grat::after{top:50%;left:7%;right:7%;height:1px;transform:translateY(-.5px)}
.wheel__ticks{position:absolute;inset:7px;border-radius:50%;pointer-events:none;
  background:repeating-conic-gradient(from 0deg,var(--line) 0 .7deg,transparent .7deg 15deg);
  -webkit-mask:radial-gradient(circle,transparent 0 43%,#000 44% 49%,transparent 50%);
  mask:radial-gradient(circle,transparent 0 43%,#000 44% 49%,transparent 50%)}
.wheel__card{position:absolute;font-family:var(--mono);font-size:9px;letter-spacing:.14em;color:var(--fg-mute)}
.wheel__card.t{top:5px;left:50%;transform:translateX(-50%)} .wheel__card.b{bottom:5px;left:50%;transform:translateX(-50%)}
.wheel__card.l{left:6px;top:50%;transform:translateY(-50%)} .wheel__card.r{right:6px;top:50%;transform:translateY(-50%)}
.wheel__ring{position:absolute;inset:20%;border:1px dashed var(--line);border-radius:50%;pointer-events:none}
.wheel__ball{position:absolute;left:50%;top:50%;width:52px;height:52px;border-radius:50%;
  transform:translate(-50%,-50%) translate(var(--bx,0),var(--by,0));
  background:radial-gradient(circle at 38% 34%,#fff,var(--lift) 58%,#138777);
  box-shadow:0 3px 10px rgba(0,0,0,.55);cursor:grab;border:1px solid rgba(255,255,255,.15)}
.wheel__ball:active{cursor:grabbing}
/* live channel readout */
.readout{display:grid;grid-template-columns:repeat(3,1fr);gap:0;margin-top:18px;border:1px solid var(--line)}
.readout div{padding:9px 10px;text-align:center;border-left:1px solid var(--line)}
.readout div:first-child{border-left:0}
.readout .k{display:block;font-family:var(--mono);font-size:8.5px;letter-spacing:.16em;color:var(--fg-mute);text-transform:uppercase;margin-bottom:3px}
.readout .v{font-family:var(--mono);font-weight:500;font-size:.82rem;color:var(--fg);font-variant-numeric:tabular-nums}
.readout .v.warm{color:var(--gain)} .readout .v.cool{color:var(--lift)}
.wheel__cap{font-family:var(--mono);font-size:.6rem;letter-spacing:.16em;text-transform:uppercase;color:var(--fg-dim);text-align:center;margin-top:14px}
.wheel__copy h2{margin-bottom:10px}
.reset{margin-top:18px;display:inline-flex;align-items:center;gap:10px;border:1px solid var(--lift);color:var(--lift);
  font-family:var(--mono);font-weight:500;font-size:.66rem;letter-spacing:.16em;text-transform:uppercase;padding:13px 19px;transition:background .25s,color .25s}
.reset:hover{background:var(--lift);color:var(--bg)}
.reset__line{display:block;margin-top:14px;font-family:var(--serif);font-style:italic;color:var(--fg-dim);font-size:1.05rem;max-width:32ch}

/* ===================== NODE 04 — THE WORK (ruled register grid) ===================== */
.work{margin-top:clamp(26px,3.5vh,38px);display:grid;grid-template-columns:1fr 1fr;gap:clamp(20px,2.6vw,32px)}
.work__item{position:relative;margin:0}
.work__item img{width:100%;aspect-ratio:16/10;object-fit:cover;border:1px solid var(--line);background:var(--panel);transition:transform .5s var(--ease)}
.work__item:hover img{transform:scale(1.015)}
.work__slate{display:flex;flex-wrap:wrap;gap:6px 12px;align-items:baseline;padding:11px 1px 0;margin-top:9px;border-top:1px solid var(--line);
  font-family:var(--mono);font-size:.62rem;letter-spacing:.13em;text-transform:uppercase;color:var(--fg-dim);font-variant-numeric:tabular-nums}
.work__slate .id{color:var(--fg)} .work__slate .gr{color:var(--lift)}

/* ===================== NODE 05/06 — PRINT / DELIVER ===================== */
.founders{display:flex;gap:clamp(26px,5vw,58px);flex-wrap:wrap;margin-top:clamp(22px,3vh,32px)}
.founder b{display:block;font-family:var(--display);font-weight:700;text-transform:uppercase;font-size:1.05rem;letter-spacing:-.01em}
.founder span{font-family:var(--mono);font-size:.62rem;letter-spacing:.14em;color:var(--fg-dim);text-transform:uppercase}

.node.deliver{display:block}   /* not flex — the nowrap giant wordmark must not force min-width */
.foot__wm{max-width:100%}
.renderbar{display:flex;flex-wrap:wrap;align-items:center;gap:8px 18px;font-family:var(--mono);font-size:.64rem;letter-spacing:.13em;text-transform:uppercase;
  color:var(--fg-dim);padding:15px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);margin-bottom:clamp(28px,4vh,44px);font-variant-numeric:tabular-nums}
.renderbar .rec{color:var(--gain)}
.renderbar .meter{display:inline-block;width:120px;height:8px;border:1px solid var(--line);position:relative;vertical-align:middle}
.renderbar .meter::after{content:"";position:absolute;inset:1px;width:var(--render,0%);background:var(--lift);transition:width 1.1s var(--ease)}
.deliver__mail{font-family:var(--display);font-weight:800;text-transform:uppercase;font-size:clamp(1.8rem,5.2vw,3.6rem);
  letter-spacing:-.02em;text-decoration:none;color:var(--fg);word-break:break-word;line-height:1}
.deliver__mail:hover{color:var(--lift)}
.deliver__meta{display:flex;flex-wrap:wrap;gap:8px 24px;margin-top:clamp(22px,3vh,32px);font-family:var(--mono);font-size:.64rem;letter-spacing:.13em;text-transform:uppercase;color:var(--fg-dim)}

.foot{padding:clamp(48px,8vh,96px) 0 30px;border-top:1px solid var(--line);margin-top:clamp(34px,5vh,64px);position:relative}
.foot__wm{font-family:var(--display);font-weight:800;text-transform:uppercase;font-size:clamp(2.6rem,15vw,11rem);line-height:.82;letter-spacing:-.03em;color:var(--fg);white-space:nowrap;overflow:hidden}
.foot__seal{position:absolute;right:clamp(22px,5vw,64px);top:clamp(40px,7vh,80px);font-family:var(--mono);font-size:.62rem;letter-spacing:.18em;color:var(--grease);transform:rotate(-5deg);border:1.5px solid var(--grease);border-radius:3px;padding:5px 11px}
.foot__base{display:flex;flex-wrap:wrap;gap:8px 18px;justify-content:space-between;margin-top:26px;font-family:var(--mono);font-size:.6rem;letter-spacing:.12em;text-transform:uppercase;color:var(--fg-mute)}
.foot__base a{color:var(--lift);text-decoration:none}

/* ===================== RESPONSIVE ===================== */
@media (max-width:900px){
  body{padding-top:46px}
  .rail{display:none}
  .scrub{display:flex}
  .ingest__inner,.wheelnode .wheel__grid{grid-template-columns:1fr;gap:clamp(22px,4vh,32px)}
  .ingest__frame{order:-1}
  .wheelnode .monitor{order:-1}
  .work{grid-template-columns:1fr}
  .node{min-height:auto;padding:clamp(58px,10vh,92px) 0}
  .ingest{min-height:100svh}
  .deliver__mail{font-size:clamp(1.4rem,6.5vw,2rem)}
  .foot__seal{position:static;display:inline-block;margin-top:14px}
}

/* ===================== REDUCED MOTION ===================== */
@media (prefers-reduced-motion:reduce){
  *{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;transition-delay:0!important;scroll-behavior:auto!important}
  .ingest__cue .d{animation:none}
}