/* work.flow landing — light editorial stylesheet.
   Palette: the original site's sage/olive natural-material scheme + a
   brutalist-editorial type layer (uppercase mono micro-labels, numbered
   kickers, hairline rules confined to the text column). The graph layer is
   scoped to the build scene's app window and the finale. */

/* ---------- fonts ---------- */

@font-face{
  font-family:"Space Grotesk";
  src:url("../vendor/fonts/space-grotesk-latin-500-normal.woff2") format("woff2");
  font-weight:500;
  font-style:normal;
  font-display:swap;
}
@font-face{
  font-family:"Space Grotesk";
  src:url("../vendor/fonts/space-grotesk-latin-700-normal.woff2") format("woff2");
  font-weight:700;
  font-style:normal;
  font-display:swap;
}
@font-face{
  font-family:"JetBrains Mono";
  src:url("../vendor/fonts/jetbrains-mono-latin-400-normal.woff2") format("woff2");
  font-weight:400;
  font-style:normal;
  font-display:swap;
}
@font-face{
  font-family:"JetBrains Mono";
  src:url("../vendor/fonts/jetbrains-mono-latin-700-normal.woff2") format("woff2");
  font-weight:700;
  font-style:normal;
  font-display:swap;
}

/* ---------- tokens ---------- */

:root{
  /* the original work.flow site's light natural-material palette: sage canvas,
     olive ink and accent, green Run — carried over token-for-token */
  --bg:#edefe8;
  --ink:#262a23;
  --mut:#636b58;
  --acc:#7e8c6c;
  --wire:#8a9079;

  --font-d:"Space Grotesk", ui-sans-serif, system-ui, sans-serif;
  --font-m:"JetBrains Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  --panel:#f7f8f3;
  --panel-2:#e8ebe1;
  --elevated:#ffffff;
  --line:#dce1d4;
  --line-2:#c9cfbd;
  /* kept distinct from --line for surfaces that must not let the dot grid
     bleed through (grid-gap hairlines) */
  --line-solid:#dce1d4;
  /* ink on accent-filled surfaces (buttons, done-badge, run chip) */
  --ink-on-acc:#1c1d22;
  /* the Run button's green, straight from the original site */
  --run:#2e7d32;
  --run-hover:#256a29;
  --topbar-h:64px;
  --maxw:1180px;
  --col:62ch;
  --radius:10px;
  --ease:cubic-bezier(.65,0,.35,1);
}

/* ---------- reset ---------- */

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

html{
  scroll-behavior:smooth;
  -webkit-text-size-adjust:100%;
}
/* Lenis rewrites the scroll position every frame, and it marks the root element
   while it is running. Native smooth scrolling would animate each of those
   writes and fight it, so it is off wherever Lenis is driving. */
html.lenis{scroll-behavior:auto;}

body{
  margin:0;
  min-height:100vh;
  background-color:var(--bg);
  background-image:radial-gradient(rgba(38,42,35,.12) 1px, transparent 1px);
  background-size:28px 28px;
  background-position:-14px -10px;
  background-attachment:fixed;
  color:var(--ink);
  font-family:var(--font-m);
  font-size:16px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:clip;
}

img,video{max-width:100%;display:block;}
svg{display:block;}
a{color:inherit;text-decoration:none;}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer;}
ul,ol{margin:0;padding:0;}

::selection{background:var(--acc);color:var(--bg);}

/* custom scrollbar — thin, dark, matches the canvas rather than the OS default */
::-webkit-scrollbar{width:10px;height:10px;}
::-webkit-scrollbar-track{background:var(--bg);}
::-webkit-scrollbar-thumb{background:var(--line-2);border-radius:99px;border:2px solid var(--bg);}
html{scrollbar-color:var(--line-2) var(--bg);scrollbar-width:thin;}

.sr-only{
  position:absolute;
  width:1px;height:1px;
  padding:0;margin:-1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap;
  border:0;
}

/* ---------- typography ---------- */

h1,h2,h3{
  font-family:var(--font-d);
  color:var(--ink);
  margin:0 0 .45em;
  line-height:1.04;
  letter-spacing:-.01em;
}
h1{font-weight:700;font-size:clamp(3rem, 8vw, 7rem);}
h1 span{display:block;}
h2{font-weight:700;font-size:clamp(1.9rem, 4.2vw, 3.15rem);max-width:16ch;}
h3{font-weight:500;font-size:clamp(1.2rem, 2.3vw, 1.6rem);}

p{margin:0 0 1em;max-width:var(--col);}
strong{color:var(--ink);font-weight:700;}

.lede{
  max-width:var(--col);
  color:var(--mut);
  font-size:clamp(1rem, 1.6vw, 1.15rem);
  border-top:1px solid var(--line);
  padding-top:1.15em;
}
.lede strong{color:var(--ink);}

.microcopy{color:var(--mut);font-size:.82rem;max-width:var(--col);}

/* ---------- layout scaffold ---------- */

#canvas-layer{
  position:fixed;
  inset:0;
  z-index:0;
  pointer-events:none;
  transform-origin:50% 50%;
}
#canvas-layer::after{
  /* vignette — keeps the graph from reading as a flat sprite sheet at the edges */
  content:"";
  position:absolute;
  inset:0;
  background:radial-gradient(ellipse at center, transparent 45%, var(--bg) 92%);
}

/* The topbar is deliberately absent here: it carries its own position and
   z-index below, and an id+type selector in this rule would outrank them and
   drop the bar back into the document flow. */
main,
footer{
  position:relative;
  z-index:1;
}

main{counter-reset:kicker;}

main > section{
  max-width:var(--maxw);
  margin:0 auto;
  padding:clamp(4.5rem, 9vw, 7.5rem) clamp(1.5rem, 5vw, 3rem);
  scroll-margin-top:var(--topbar-h);
}

/* ---------- topbar (fixed app-chrome bar) ---------- */

#topbar{
  position:fixed;
  top:0;left:0;right:0;
  z-index:50;
  display:flex;
  align-items:center;
  gap:1.5rem;
  height:var(--topbar-h);
  padding:0 clamp(1rem, 4vw, 2rem);
  background:rgba(247,248,243,.78);
  backdrop-filter:blur(14px) saturate(140%);
  -webkit-backdrop-filter:blur(14px) saturate(140%);
  border-bottom:1px solid var(--line);
  font-family:var(--font-m);
  font-size:.82rem;
}

.topbar__brand{
  font-family:var(--font-d);
  font-weight:700;
  font-size:17px;
  letter-spacing:-.01em;
  color:var(--ink);
  flex-shrink:0;
}
.topbar__brand b{color:var(--acc);}

.topbar__badge{
  display:inline-flex;
  align-items:center;
  padding:.32em .75em;
  border:1px solid var(--line-2);
  border-radius:99px;
  text-transform:uppercase;
  letter-spacing:.08em;
  font-size:.72rem;
  color:var(--mut);
  flex-shrink:0;
  margin-left:auto;
}

.topbar__nav{
  display:flex;
  gap:clamp(1rem, 2.5vw, 2rem);
  /* dead-centre of the bar, independent of the brand/badge widths */
  position:absolute;
  left:50%;
  transform:translateX(-50%);
}
.topbar__nav a{
  color:var(--mut);
  text-transform:uppercase;
  letter-spacing:.08em;
  font-size:.78rem;
  transition:color .2s var(--ease);
}
.topbar__nav a:hover,
.topbar__nav a:focus-visible{color:var(--ink);}

/* ---------- buttons, chips, forms ---------- */

.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.5em;
  padding:.85em 1.5em;
  border-radius:6px;
  font-family:var(--font-m);
  font-weight:700;
  font-size:.85rem;
  text-transform:uppercase;
  letter-spacing:.06em;
  transition:transform .18s var(--ease), box-shadow .18s var(--ease), background .18s var(--ease);
  white-space:nowrap;
}
.btn--primary{
  background:var(--acc);
  color:var(--ink-on-acc);
  box-shadow:0 0 0 1px color-mix(in srgb, var(--acc) 60%, transparent);
}
.btn--primary:hover,
.btn--primary:focus-visible{
  transform:translateY(-1px);
  box-shadow:0 6px 24px -6px color-mix(in srgb, var(--acc) 70%, transparent);
}
.btn--primary:active{transform:translateY(0);}

form{
  display:flex;
  flex-wrap:wrap;
  gap:.75rem;
  max-width:34rem;
  margin:1.6rem 0 .9rem;
}
input[type="email"]{
  flex:1 1 16rem;
  min-width:0;
  background:var(--panel);
  border:1px solid var(--line-2);
  border-radius:6px;
  padding:.85em 1em;
  color:var(--ink);
  font-family:var(--font-m);
  font-size:.9rem;
  transition:border-color .2s var(--ease), box-shadow .2s var(--ease);
}
input[type="email"]::placeholder{color:var(--mut);}
input[type="email"]:focus-visible,
input[type="email"]:focus{
  outline:none;
  border-color:var(--acc);
  box-shadow:0 0 0 3px color-mix(in srgb, var(--acc) 22%, transparent);
}

:focus-visible{outline:2px solid var(--acc);outline-offset:3px;}

.chips{display:flex;flex-wrap:wrap;gap:.75rem;margin:1.75rem 0;}
.chip{
  padding:.6em 1.2em;
  border:1px solid var(--line-2);
  border-radius:99px;
  font-family:var(--font-m);
  font-size:.8rem;
  text-transform:uppercase;
  letter-spacing:.05em;
  color:var(--mut);
  transition:border-color .2s var(--ease), color .2s var(--ease), background .2s var(--ease);
}
.chip:hover,
.chip:focus-visible{color:var(--ink);border-color:var(--line-2);background:var(--panel);}
.chip.is-active{color:var(--bg);background:var(--acc);border-color:var(--acc);}

/* letter-roll: two aria-hidden rows stacked in a fixed-height clip window.
   Each row transforms independently by its own height, so translateY(-100%)
   on both slides row 1 out and row 2 in. Padded controls (buttons, FAQ
   summaries) carry the roll as an inner span, so the animation triggers from
   the outer interactive element — hovering anywhere on the control, not just
   the text, plays the roll. */
.roll{
  position:relative;
  display:inline-block;
  overflow:hidden;
  height:1.2em;
  line-height:1.2em;
  vertical-align:top;
}
.roll span{display:block;transition:transform .4s var(--ease);}
.roll:hover span,
:is(a,button,summary):is(:hover,:focus-visible) .roll span{transform:translateY(-100%);}

/* ---------- editorial atoms ---------- */

.kicker{
  counter-increment:kicker;
  display:flex;
  align-items:baseline;
  gap:.65em;
  margin:0 0 1.4em;
  font-family:var(--font-m);
  text-transform:uppercase;
  font-size:.78rem;
  letter-spacing:.16em;
  color:var(--acc);
}
.kicker::before{
  content:"00" counter(kicker) " /";
  color:var(--mut);
  font-weight:700;
  letter-spacing:.02em;
}

/* ---------- canvas layer: nodes, wires, tooltip ---------- */

#wires{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  overflow:visible;
}
#wires path{
  fill:none;
  stroke:var(--wire);
  stroke-width:2;
  stroke-linecap:round;
  transition:stroke .4s var(--ease), filter .4s var(--ease);
}
#wires path.lit{
  stroke:var(--acc);
  filter:
    drop-shadow(0 0 3px color-mix(in srgb, var(--acc) 90%, transparent))
    drop-shadow(0 0 14px color-mix(in srgb, var(--acc) 55%, transparent));
}

#nodes{position:absolute;inset:0;}

.gnode{
  position:absolute;
  top:0;left:0;
  width:72px;height:72px;
  margin:0;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:4px;
  border-radius:50%;
  background:var(--panel);
  border:1px solid var(--line-2);
  box-shadow:0 8px 22px -10px rgba(38,42,35,.18);
  box-sizing:border-box;
  cursor:grab;
  user-select:none;
  touch-action:none;
  pointer-events:auto;
  transition:border-color .2s var(--ease), box-shadow .2s var(--ease);
}
.gnode:hover{
  border-color:color-mix(in srgb, var(--acc) 55%, var(--line-2));
  box-shadow:0 8px 26px -8px rgba(38,42,35,.16), 0 0 0 1px color-mix(in srgb, var(--acc) 30%, transparent);
}
.gnode:active{cursor:grabbing;}

.gnode img{
  width:55%;
  height:55%;
  object-fit:contain;
  /* glyphs ship as black strokes on transparent — native ink on light surfaces */
  pointer-events:none;
}

.gnode .glabel{
  font-family:var(--font-m);
  font-size:9.5px;
  line-height:1.1;
  letter-spacing:.02em;
  text-align:center;
  /* wider than the circle so short labels like "watch folder" never truncate;
     ellipsis stays as the safety for anything genuinely long */
  max-width:130px;
  color:var(--mut);
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  pointer-events:none;
}

.gnode.done{border-color:var(--acc);}
.gnode.done::after{
  content:"✓";
  position:absolute;
  top:-4px;right:-4px;
  width:18px;height:18px;
  border-radius:50%;
  background:var(--acc);
  color:var(--ink-on-acc);
  font-size:11px;
  font-weight:700;
  display:flex;
  align-items:center;
  justify-content:center;
  box-shadow:0 0 0 2px var(--bg);
}

.gtip{
  z-index:60;
  background:var(--panel);
  border:1px solid var(--line-2);
  border-radius:6px;
  padding:.5em .8em;
  font-family:var(--font-m);
  font-size:.72rem;
  color:var(--ink);
  box-shadow:0 12px 30px -12px rgba(38,42,35,.16);
  white-space:nowrap;
}

/* ---------- hero ---------- */

/* the hero's layout lives in film.css (beat-01); no ID rules here — an ID
   selector would outrank the film's class system */


.scroll-hint{
  color:var(--mut);
  font-size:.78rem;
  text-transform:uppercase;
  letter-spacing:.12em;
  margin-top:2.5rem;
}
.scroll-hint span{
  display:inline-block;
  animation:bob 1.6s ease-in-out infinite;
}
@keyframes bob{
  0%,100%{transform:translateY(0);}
  50%{transform:translateY(4px);}
}

.caret{
  display:inline-block;
  width:2px;
  height:1em;
  margin-left:2px;
  background:var(--acc);
  box-shadow:0 0 6px color-mix(in srgb, var(--acc) 80%, transparent);
  animation:blink 1s steps(1) infinite;
}
@keyframes blink{0%,49%{opacity:1;}50%,100%{opacity:0;}}

/* ---------- build ---------- */

.app-window{
  margin-top:2rem;
  border:1px solid var(--line-2);
  border-radius:8px;
  background:var(--panel);
  padding:1.4rem 1.6rem;
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:1rem;
  position:relative;
}
.app-window__bar{
  flex:1 1 auto;
  font-size:.85rem;
  color:var(--mut);
}
.app-window__bar::before{
  content:"● ● ●";
  display:block;
  letter-spacing:.3em;
  font-size:.55rem;
  color:var(--line-2);
  margin-bottom:.6em;
}
.app-window__bar strong{color:var(--ink);}
.app-window__hint{
  color:var(--mut);
  font-size:.78rem;
  margin:0;
  flex-basis:100%;
}
.app-window__who{
  font-size:.75rem;
  color:var(--mut);
  border:1px solid var(--line-2);
  border-radius:99px;
  padding:.3em .8em;
}
.app-window__run{
  padding:.5em 1.2em;
  border-radius:6px;
  background:var(--run);
  color:#ffffff;
  font-family:var(--font-m);
  font-weight:700;
  font-size:.8rem;
  text-transform:uppercase;
  letter-spacing:.05em;
  transition:transform .18s var(--ease);
}
.app-window__run:hover{transform:translateY(-1px);}
/* The window's canvas region: an empty framed stage the graph layer aims for —
   scenes.js reads this box's rect to place the pipeline inside the window. */
.app-window__canvas{
  flex-basis:100%;
  /* short enough that the window bar, the canvas, and the overlaid chips all
     fit a 900px viewport while the section is pinned */
  height:clamp(260px, 34vh, 380px);
  border:1px solid var(--line);
  border-radius:6px;
  background-image:radial-gradient(circle, rgba(38,42,35,.10) 1px, transparent 1px);
  background-size:24px 24px;
}
/* chips are placed by film.css inside the stage — no ID rules here */
@media (max-width:767px){
  .app-window__canvas{height:380px;}
}

/* ---------- library stats ---------- */

.plate__num{
  font-family:var(--font-m);
  font-weight:700;
  line-height:1;
  color:var(--ink);
}
.plate__unit{font-size:.48em;color:var(--acc);margin-left:.15em;}
.plate__caption{
  margin:0;
  color:var(--mut);
}

/* ---------- library ---------- */

.ring-viewport{
  overflow:hidden;
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
  margin-top:2rem;
}
#ring{
  position:relative;
  width:100%;
  height:clamp(220px, 32vw, 380px);
  /* Horizontal drag spins the ring; vertical drag is left to the browser's
     own panning so the section never traps the scroll gesture. */
  touch-action:pan-y;
}

/* Guide circles bracket the actual glyph orbit — --ring-cy/--ring-r1/--ring-r2
   are set by ring.js's layout() from the same pivot/radius the glyphs use, so
   this backdrop always traces the real path rather than an arbitrary one. */
#ring.gring-desktop{
  background:
    radial-gradient(circle at 50% var(--ring-cy, 50%),
      transparent 0 var(--ring-r1, 0px),
      var(--line) var(--ring-r1, 0px) calc(var(--ring-r1, 0px) + 1px),
      transparent calc(var(--ring-r1, 0px) + 1px)),
    radial-gradient(circle at 50% var(--ring-cy, 50%),
      transparent 0 var(--ring-r2, 0px),
      var(--line) var(--ring-r2, 0px) calc(var(--ring-r2, 0px) + 1px),
      transparent calc(var(--ring-r2, 0px) + 1px));
}

/* Desktop: every glyph anchored at the orbit's pivot (top set by ring.js's
   layout(), left always centered), pushed out to its radius by the
   rotate/translateY/rotate recipe ring.js sets per frame. */
#ring.gring-desktop .gring-glyph{
  position:absolute;
  left:50%;
  width:30px;
  height:30px;
  margin:-15px 0 0 -15px;
}

.gring-glyph{
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:50%;
  background:var(--panel);
  border:1px solid var(--line-2);
  box-sizing:border-box;
  cursor:pointer;
  user-select:none;
}
.gring-glyph img{
  width:60%;
  height:60%;
  object-fit:contain;
  pointer-events:none;
}

.gring-label{
  z-index:70;
  background:var(--panel);
  border:1px solid var(--line-2);
  border-radius:6px;
  padding:.5em .8em;
  box-shadow:0 12px 30px -12px rgba(38,42,35,.16);
  white-space:nowrap;
  transform:translate(-50%, calc(-100% - 10px));
}
.gring-label__title{
  display:block;
  font-size:.8rem;
  color:var(--ink);
}
.gring-label__t{
  display:block;
  margin-top:.15em;
  font-family:var(--font-m);
  font-size:.7rem;
  color:var(--mut);
}

/* Mobile: two flex rows instead of a ring, each looping via translateX. */
#ring.gring-mobile{
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap:14px;
  height:auto;
  min-height:160px;
  padding:14px 0;
  background:none;
}
.gring-row{
  display:flex;
  gap:14px;
  width:max-content;
  animation:gring-marquee 32s linear infinite;
  will-change:transform;
}
#ring.gring-mobile .gring-glyph{
  flex:none;
  width:44px;
  height:44px;
}
.gring-row--b{animation-direction:reverse;animation-duration:27s;}
.gring-row.is-off{animation-play-state:paused;}
@keyframes gring-marquee{
  from{transform:translateX(0);}
  to{transform:translateX(-50%);}
}

/* ---------- how ---------- */

#how{
  display:grid;
  grid-template-columns:repeat(3, minmax(0,1fr));
  gap:1.5rem;
}
#how .kicker,
#how > h2{grid-column:1 / -1;}

/* the three steps render as the app's own node widgets — styles in film-acts.css */

/* ---------- trust / code panel ---------- */

/* :not(.kicker) — .kicker is also a direct-child <p> here, and an #id
   selector would otherwise outrank .kicker's own accent color */
#trust > p:not(.kicker){color:var(--mut);}
#trust h2 + p{
  border-top:1px solid var(--line);
  padding-top:1.15em;
}

/* the code panel renders as the app's scratch pad — styles in film-acts.css */

/* ---------- who ---------- */

/* full-bleed like the film sections: copy hangs on the 64px left margin,
   the demo recording sits centered and wide */
#who{max-width:none;padding-left:64px;padding-right:64px}
@media (max-width:1023px){#who{padding-left:24px;padding-right:24px}}

#who h2 + p{
  border-top:1px solid var(--line);
  padding-top:1.15em;
  max-width:calc(var(--col) * 1.25);
}
/* the demo recording is the section's product shot: full column width,
   playing only while the section is on screen (film.js initWhoVideo) */
#who video{
  display:block;
  width:min(1180px, 100%);
  height:auto;
  margin:2.6rem auto 0;
  border-radius:10px;
  border:1px solid var(--line-2);
  background:var(--panel);
}

/* ---------- faq ---------- */
/* the FAQ ledger: all answers open, numbered rows — styles in film-acts.css */

/* ---------- final / success ---------- */

#final{text-align:left;}
#final h2{max-width:none;}
#final .microcopy{margin-top:0;}

#success .kicker{color:var(--acc);}
#success h2{max-width:none;}
#success h2 span{color:var(--acc);}
#success p{color:var(--mut);}

#referral-copy{
  display:inline-flex;
  align-items:center;
  padding:.6em 1.3em;
  border:1px solid var(--line-2);
  border-radius:6px;
  font-family:var(--font-m);
  font-size:.82rem;
  color:var(--ink);
  margin:.6rem .6rem .6rem 0;
  transition:border-color .2s var(--ease), color .2s var(--ease);
}
#referral-copy:hover{border-color:var(--acc);color:var(--acc);}

#success a[href^="https://"]{
  display:inline-flex;
  align-items:center;
  padding:.6em 1.3em;
  border:1px solid var(--line-2);
  border-radius:6px;
  font-size:.82rem;
  color:var(--mut);
  margin:.6rem .6rem .6rem 0;
  transition:border-color .2s var(--ease), color .2s var(--ease);
}
#success a[href^="https://"]:hover{border-color:var(--acc);color:var(--acc);}

.platforms-line{
  color:var(--mut);
  font-size:.78rem;
  text-transform:uppercase;
  letter-spacing:.1em;
  margin-top:1.5rem;
}

/* ---------- footer ---------- */

footer{
  padding:3rem clamp(1.5rem, 5vw, 3rem) 4rem;
  max-width:var(--maxw);
  margin:0 auto;
  border-top:1px solid var(--line);
  color:var(--mut);
  font-size:.8rem;
}
footer a{text-decoration:underline;text-underline-offset:3px;color:var(--mut);}
footer a:hover{color:var(--acc);}

/* ---------- mobile ---------- */

@media (max-width:767px){
  h1{font-size:clamp(2.25rem, 11vw, 3rem);}

  main > section{padding:3.5rem 1.25rem;}

  #how{grid-template-columns:1fr;}

  #topbar{gap:.6rem;padding:0 .85rem;}
  .topbar__nav{display:none;}


  form{max-width:none;}

}

/* ---------- reduced motion ---------- */

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{
    animation:none !important;
    transition:none !important;
    scroll-behavior:auto !important;
  }
  html{scroll-behavior:auto;}
}