/* The site as a draft: the copy is real, the pictures are described in storyboard.html.
   Every colour, size, gap and corner is a token from brand/system/tokens.css.
   Without the .motion class on <html> (no script, or less motion asked for) the page is a
   plain column with everything in place. With it, scenes hold the screen and play to the scroll. */
:root{--wide:68rem;--measure:36rem}
/* A button and a hairline follow the nearest palette, not the nearest ancestor that names one. */
:root,[data-theme="light"]{--btn:var(--card);--btn-edge:transparent;--hair:var(--line)}
[data-theme="dark"]{--btn:transparent;--btn-edge:var(--accent);--hair:color-mix(in srgb,var(--ink) 18%,transparent)}
*{box-sizing:border-box}
body{margin:0;background:var(--page);color:var(--ink);font:var(--text-m)/var(--lh-body) var(--body)}
h1,h2,h3,.big{margin:0;font-family:var(--display);font-weight:700;line-height:var(--lh-tight);letter-spacing:var(--ls-tight);text-wrap:balance}
p,ul,ol{margin:0}
a{color:var(--accent)}
:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
.skip-link{position:absolute;z-index:5;top:var(--space-2);left:var(--space-2);padding:var(--space-2) var(--space-4);border-radius:var(--radius-pill);background:var(--accent-fill);color:var(--on-accent);transform:translateY(-200%)}
.skip-link:focus{transform:none}
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.wrap{width:100%;max-width:var(--wide);margin-inline:auto;padding-inline:var(--space-5)}
.k{font-size:var(--text-xs);font-weight:700;letter-spacing:var(--ls-caps);text-transform:uppercase;color:var(--muted)}
.lede{max-width:var(--measure);font-size:var(--text-l);line-height:var(--lh-snug)}
.fine{font-size:var(--text-s);color:var(--muted)}
.big{font-size:clamp(var(--text-xl),3.4vw,var(--text-2xl))}

/* Filled is what hands something to Spifix; an outline is still the visitor's.
   On a dark ground the filled button takes a light edge, to hold against it. */
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:var(--touch);padding:var(--space-2) var(--space-5);border:1px solid var(--muted);border-radius:var(--radius-touch);background:var(--btn);color:var(--ink);font:inherit;font-weight:600;text-align:center;text-decoration:none;cursor:pointer}
.btn:hover{border-color:var(--ink)}
.btn.main{border-color:var(--btn-edge);border-radius:var(--radius-pill);background:var(--accent-fill);color:var(--on-accent)}
.btn.main:hover{filter:brightness(1.1)}
.btn:active{filter:brightness(.95)}

.top{display:flex;align-items:center;justify-content:space-between;gap:var(--space-4);padding-block:var(--space-5)}
.top img{display:block;height:var(--space-6);width:auto}
.top a{color:var(--ink)}
.page{position:relative}
.page>.top{position:absolute;z-index:2;inset:0 0 auto}

/* The hero: deep pine, calm settling outward from the mark, fading into the night below it. */
.hero{position:relative;isolation:isolate;overflow:hidden;display:grid;align-items:center;min-height:min(110dvh,60rem);padding-block:calc(var(--space-8)*2) calc(var(--space-8)*3);background:var(--deep);color:var(--ink)}
.hero::after{content:"";position:absolute;z-index:-1;inset:auto 0 0;height:calc(var(--space-8)*2);background:linear-gradient(transparent,var(--ochre-soft))}
.hero .wrap{display:grid;gap:var(--space-5);justify-items:start}
.hero h1{max-width:18ch;font-size:clamp(var(--text-2xl),6vw,var(--text-3xl))}
.hero .k{color:var(--ochre)}
.hero nav{display:flex;flex-wrap:wrap;gap:var(--space-3);margin-top:var(--space-4)}
.glow{position:absolute;z-index:-1;top:calc(var(--space-7)*-1);left:calc(100% + var(--space-6));width:clamp(30rem,120vw,68rem);aspect-ratio:1;transform:translate(-50%,-50%);pointer-events:none}
.glow svg{display:block;width:100%;height:100%}
.glow circle{fill:none;stroke:var(--ink);stroke-width:1;vector-effect:non-scaling-stroke;opacity:calc(.5 - var(--i)*.07);transform-origin:center}
.glow circle:first-child{stroke:var(--ochre-fill);opacity:.9}
.glow img{display:none}
@media (min-width:56rem){
  .glow{top:45%;left:76%}
  .glow img{display:block;position:absolute;top:50%;left:50%;width:11%;transform:translate(-50%,-50%)}
}

/* One night, told three times, and each telling has three parts: the problem said, the
   place where film will show it, the answer. The first two sit on an ochre ground, because the problem is
   still the visitor's. The night is always dark and the answer always its own ground,
   whatever the visitor's theme: the change of light is the story. */
.act{background:var(--ochre-soft);color:var(--ink)}
.scene{display:grid;align-items:center;padding-block:var(--space-8);background:var(--ochre-soft)}
.scene+.hold+.scene{border-top:1px solid var(--hair)}
.hold{display:none}
.tell{display:grid;gap:var(--space-4);justify-items:start}
.scene .k,.spot{color:var(--ochre)}
.spot{font-size:var(--text-l)}
.scene h2{max-width:16ch;font-size:clamp(var(--text-2xl),6vw,var(--text-3xl))}
.scene h3{max-width:20ch;font-size:clamp(var(--text-xl),4.6vw,var(--text-2xl))}

.withus{position:relative;z-index:1;padding-block:var(--space-8);background:var(--page);color:var(--ink)}
.withus.soft{background:var(--accent-soft)}
.withus.deep,.deep{background:var(--deep);color:var(--ink)}
.withus .intro>.k{color:var(--accent)}
.band{padding-block:var(--space-8)}
.stack{display:grid;gap:var(--space-8)}
.intro,.outro,.rest{display:grid;gap:var(--space-4);justify-items:start}
.intro,.outro,.narrow{max-width:44rem}
.narrow{margin-inline:auto}
.intro h2,.close h2{font-size:clamp(var(--text-xl),4.6vw,var(--text-3xl))}

/* Home: three things known before anyone starts, one for each call that failed. */
.knowns{display:grid;grid-template-columns:minmax(0,1fr);padding:0;list-style:none;border-top:1px solid var(--hair)}
.knowns li{display:grid;gap:var(--space-3);align-content:start;padding-block:var(--space-6);border-bottom:1px solid var(--hair)}
.knowns h3{font-size:var(--text-3xl);color:var(--accent)}
.not{color:var(--muted)}
.is{font-size:var(--text-l);font-weight:600;line-height:var(--lh-snug)}
@media (min-width:52rem){
  .knowns{grid-template-columns:repeat(3,minmax(0,1fr))}
  .knowns li{min-height:calc(var(--space-8)*5);padding-inline:var(--space-6)}
  .knowns li:first-child{padding-left:0}
  .knowns li+li{border-left:1px solid var(--hair)}
}

/* Business: the manager's words are outlined, ours are filled. */
.duo{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--space-7) var(--space-8)}
/* Beside the thread the opening stays put while the messages pass. Stacked, it would slide over them. */
@media (min-width:52rem){
  .duo{grid-template-columns:minmax(0,5fr) minmax(0,6fr)}
  .duo .intro{position:sticky;top:var(--space-7);align-self:start}
}
.thread{display:grid;gap:var(--space-6);width:100%;max-width:42rem;padding:0;list-style:none}
.thread li{display:grid;gap:var(--space-1);max-width:88%}
.thread p{padding:var(--space-3) var(--space-4);border-radius:var(--radius-touch);font-size:var(--text-l);line-height:var(--lh-snug)}
.thread .you{justify-self:end;justify-items:end}
.thread .you .k{color:var(--ochre)}
.thread .you p{border:1px solid var(--muted);background:var(--card)}
.thread .us{grid-template-columns:var(--space-6) minmax(0,1fr);column-gap:var(--space-3);align-items:end}
.thread .us p{grid-column:2;background:var(--accent-fill);color:var(--on-accent)}
.thread img{display:block;width:var(--space-6);height:var(--space-6)}

/* Professionals: what leaves their hands is struck off, and the work is what stays. */
.off{display:grid;gap:var(--space-4);padding:0;list-style:none}
.off li{font-family:var(--display);font-weight:700;font-size:clamp(var(--text-xl),4vw,var(--text-2xl));line-height:var(--lh-tight);letter-spacing:var(--ls-tight);color:var(--muted);text-decoration:line-through var(--muted)}
.keep{font-size:var(--text-3xl);color:var(--accent)}
.close{border-top:1px solid var(--hair)}

footer .wrap{display:flex;flex-wrap:wrap;justify-content:space-between;gap:var(--space-4);padding-block:var(--space-6);border-top:1px solid var(--hair);font-size:var(--text-s);color:var(--muted)}

/* The forms page. */
.contact{display:grid;gap:var(--space-6);padding-block:var(--space-7) var(--space-8)}
.contact h1{font-size:clamp(var(--text-2xl),6vw,var(--text-3xl))}
.contact h2{font-size:var(--text-xl)}
.forms{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,19rem),1fr));gap:var(--space-5);align-items:start}
.forms section{display:grid;gap:var(--space-4);padding:var(--space-5);border:1px solid var(--line);border-radius:var(--radius-box);background:var(--card)}
.forms section:target{border-color:var(--accent)}
form{display:grid;gap:var(--space-4);justify-items:start}
.field{display:grid;gap:var(--space-1);width:100%}
label,legend{font-size:var(--text-s);font-weight:600}
label span{font-weight:400;color:var(--muted)}
input[type="email"],input[type="text"],textarea{width:100%;min-height:var(--touch);padding:var(--space-2) var(--space-3);border:1px solid var(--muted);border-radius:var(--radius-touch);background:var(--page);color:var(--ink);font:inherit}
fieldset{display:flex;flex-wrap:wrap;gap:0 var(--space-5);margin:0;padding:0;border:0}
legend{padding:0}
fieldset label{display:inline-flex;align-items:center;gap:var(--space-2);min-height:var(--touch);font-size:var(--text-m);font-weight:400}
input[type="radio"]{width:var(--space-5);height:var(--space-5);margin:0;accent-color:var(--accent-fill)}

/* A refusal is the visitor's to fix, so it is ochre; a confirmed send is ours, so it is green. */
.consent{grid-template-columns:auto minmax(0,1fr);align-items:start;column-gap:var(--space-3)}
.consent label{font-weight:400;line-height:var(--lh-snug)}
.consent .msg{grid-column:1/-1}
input[type="checkbox"]{width:var(--space-5);height:var(--space-5);margin:0;accent-color:var(--accent-fill)}
.msg:empty,.status:empty{display:none}
.msg,.status{font-size:var(--text-s);line-height:var(--lh-snug);color:var(--ochre)}
.status{font-weight:600}
.status.sent{color:var(--accent)}
[aria-invalid="true"]{border-color:var(--ochre-fill)}
fieldset .msg{flex-basis:100%}
.btn:disabled,.btn.main:disabled{border-color:var(--muted);background:transparent;color:var(--muted);filter:none;cursor:default}

/* Motion. A scene holds the screen for the length of the spacer after it, and its lines
   arrive one by one as the visitor scrolls through that hold; the next scene then slides up
   over it. Things only ever arrive: once in place they stay, so scrolling back up, a print
   or a screenshot always shows the finished page. */
.motion{scroll-behavior:smooth}
.motion .btn{transition:border-color var(--dur-1) var(--ease),filter var(--dur-1) var(--ease)}
.motion .hero .wrap>*{animation:settle var(--dur-3) var(--ease) both}
.motion .hero .wrap>:nth-child(2){animation-delay:var(--dur-1)}
.motion .hero .wrap>:nth-child(3){animation-delay:var(--dur-2)}
.motion .hero .wrap>:nth-child(4){animation-delay:calc(var(--dur-1) + var(--dur-2))}
.motion .glow circle{animation:radiate var(--dur-3) var(--ease) both;animation-delay:calc(var(--dur-2) + var(--i)*var(--dur-1))}
/* A screen too short to hold a scene lets it scroll like any other block. */
@media (min-height:34rem){
  .motion .scene{position:sticky;top:0;min-height:100dvh}
  .motion .hold{display:block;height:var(--h,100dvh)}
}
.motion [data-step]{opacity:0;transform:translateY(var(--space-5));transition:opacity var(--dur-3) var(--ease),transform var(--dur-3) var(--ease),color var(--dur-3) var(--ease)}
.motion .lede [data-step]{opacity:1;transform:none;color:var(--muted)}
.motion [data-step].on{opacity:1;transform:none;color:inherit}
.motion .knowns li,.motion .thread li{transform:translateY(var(--space-6));transition:transform var(--dur-3) var(--ease)}
.motion .knowns li:nth-child(2){transition-delay:var(--dur-1)}
.motion .knowns li:nth-child(3){transition-delay:calc(var(--dur-1)*2)}
.motion .knowns.on li,.motion .thread .on{transform:none}
.motion .off li{color:var(--ink);text-decoration-color:transparent;transition:color var(--dur-3) var(--ease),text-decoration-color var(--dur-3) var(--ease)}
.motion .off .on{color:var(--muted);text-decoration-color:var(--muted)}
@keyframes settle{from{opacity:0;transform:translateY(var(--space-3))}}
@keyframes radiate{from{opacity:0;transform:scale(.86)}}