/* ==========================================================================
   WOLFSPARK
   Built from the Wolfspark Brand Bible v1.0.
   The canvas carries the ground and the object; the DOM carries only words.
   One statement per screen.
   ========================================================================== */

:root{
  color-scheme: light;

  --ground:          #F7F5F0;
  --ground-raised:   #FFFFFF;
  --rule-hairline:   #E2DFD6;
  --rule-strong:     #87837A;
  --text-primary:    #16211C;
  --text-secondary:  #4D5A53;
  --text-muted:      #636D66;
  --fern:            #17543D;
  --jade:            #009C68;
  --jade-text:       #00754F;
  --bronze:          #A8784A;
  --bronze-text:     #8A5F33;
  --linen:           #E8E4DA;
  --figure-before:   #626C66;
  --figure-after:    #009C68;
  --indigo:          #3A1FD6;

  --s4:4px; --s8:8px; --s12:12px; --s20:20px; --s32:32px;
  --s48:48px; --s72:72px; --s104:104px; --s144:144px;

  --display-font:'Bricolage Grotesque','Helvetica Neue',Arial,sans-serif;
  --body-font:'Instrument Sans','Helvetica Neue',Arial,sans-serif;

  --vh:1vh;
  --gutter: var(--s104);

  --su: min(
    calc((100vw - var(--gutter) * 2) / 1232),
    calc(var(--vh) * 100 / 820)
  );

  --display-xl:  calc(76 * var(--su));
  --display-l:   calc(44 * var(--su));
  --display-m:   calc(30 * var(--su));
  --figure-hero: calc(80 * var(--su));
  --figure-l:    calc(40 * var(--su));
  --lede:        calc(19 * var(--su));
  --body:        calc(16 * var(--su));
  --body-s:      calc(13.5 * var(--su));
  --label:       calc(13 * var(--su));

  --header-h: 76px;
  --hdr-fade: #F7F5F0;

  /* the lockup's two parts, so the seal reads correctly on either ground */
  --mark-ring: #A8784A;
  --mark-w:    #17543D;
  --accent:    #00754F;
}

@media (max-width: 860px){
  :root{
    --gutter: 20px;
    --su: calc((100vw - var(--gutter) * 2) / 335);
    --display-xl:  calc(42 * var(--su));
    --display-l:   calc(29 * var(--su));
    --display-m:   calc(21 * var(--su));
    --figure-hero: calc(48 * var(--su));
    --figure-l:    calc(27 * var(--su));
    --lede:        calc(16.5 * var(--su));
    --body:        calc(15 * var(--su));
    --body-s:      calc(13 * var(--su));
    --label:       calc(12.5 * var(--su));
    --s144: 88px; --s104: 56px;
    --header-h: 62px;
  }
}

*,*::before,*::after{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;}
body{
  margin:0;
  background:var(--ground);
  color:var(--text-primary);
  font-family:var(--body-font);
  font-size:var(--body);
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img,svg{display:block;max-width:100%;}
button,input,textarea,select{font:inherit;color:inherit;}

::selection{background:var(--fern);color:#F7F5F0;}
:focus-visible{outline:2px solid var(--jade-text);outline-offset:4px;border-radius:2px;}
.on-dark :focus-visible{outline-color:#A5B4FC;}

.skip{position:absolute;left:-9999px;top:0;z-index:300;
  background:var(--fern);color:#F7F5F0;padding:var(--s12) var(--s20);border-radius:5px;}
.skip:focus{left:var(--s20);top:var(--s20);}

/* --- the object sits behind everything --------------------------------- */
#stage{
  position:fixed;inset:0;z-index:0;
  background:var(--ground);
  transition:background .6s linear;
}
#stage canvas{width:100%;height:100%;display:block;}
#stage[data-fallback="true"]{display:grid;place-items:center;}
#stage[data-fallback="true"] canvas{display:none;}
.fallback-seal{width:min(38vw,320px);height:auto;opacity:.9;}

#ui{position:relative;z-index:1;}

/* --- type --------------------------------------------------------------- */
h1,h2,h3{font-family:var(--display-font);font-weight:800;margin:0;text-wrap:balance;}
.d-xl{font-size:var(--display-xl);line-height:1.0;letter-spacing:-0.03em;}
.d-l {font-size:var(--display-l);line-height:1.04;letter-spacing:-0.025em;}
.d-m {font-size:var(--display-m);line-height:1.15;letter-spacing:-0.02em;font-weight:700;}
p{margin:0;max-width:34ch;}
.lede{font-size:var(--lede);line-height:1.55;color:var(--text-secondary);}
.body-s{font-size:var(--body-s);line-height:1.5;}
.label{font-family:var(--body-font);font-size:var(--label);font-weight:600;line-height:1.3;margin:0;}
.muted{color:var(--text-muted);}
.fig{font-family:var(--display-font);font-weight:800;
  font-variant-numeric:tabular-nums;letter-spacing:-0.03em;line-height:0.96;}

/* --- screens ------------------------------------------------------------ */
.wrap{
  width:100%;max-width:calc(1232px + var(--gutter) * 2);margin-inline:auto;
  padding-left:max(var(--gutter), env(safe-area-inset-left, 0px));
  padding-right:max(var(--gutter), env(safe-area-inset-right, 0px));
}
.screen{
  min-height:calc(var(--vh) * 100);
  display:flex;align-items:center;
  padding-block:var(--s104);
}
.screen--tall{min-height:calc(var(--vh) * 140);}
.half{max-width:min(46ch, 50%);}
.half--right{margin-left:auto;}
@media (max-width: 860px){
  .half{max-width:100%;}
  /* the object holds the upper band, so copy sits in the lower one */
  .screen{align-items:flex-end;padding-top:calc(var(--vh) * 38);padding-bottom:var(--s48);}
  .half--right{margin-left:0;}
  /* a list needs more of the lower band than a single statement does */
  .screen--list{padding-top:calc(var(--vh) * 34);padding-bottom:var(--s32);}
  .screen--list .pillar{padding-block:var(--s12);}
  .screen--list .pillar h3{font-size:calc(19 * var(--su));}
  .screen--list .pillar p{font-size:var(--body-s);}
  .screen--list .fig{font-size:calc(36 * var(--su));}

  /* Inner pages read rather than scroll; the object stays off them on a phone. */
  #stage[data-quiet]{display:none;}
  body:has(#stage[data-quiet]){background:var(--ground);}
}

.stack-s > * + *{margin-top:var(--s12);}
.stack   > * + *{margin-top:var(--s20);}
.stack-l > * + *{margin-top:var(--s32);}
.stack-xl > * + *{margin-top:var(--s48);}

/* --- the fern passage: the canvas does the colour, the DOM follows ------ */
.on-dark{
  --ground:#1E1B4B;
  --ground-raised:#272350;
  --hdr-fade:#1E1B4B;
  --text-primary:#FFFFFF;
  --text-secondary:#C7C9DE;
  --text-muted:#9FA2BF;
  --rule-hairline:#332F6B;
  --rule-strong:#6E6AA8;
  --jade:#4F46E5;
  --jade-text:#A5B4FC;
  --bronze-text:#A5B4FC;
  --accent:#A5B4FC;
  --mark-ring:#4F46E5;
  --mark-w:#FFFFFF;
  --figure-before:#9FA2BF;
  --figure-after:#10B981;
  color:var(--text-primary);
}

/* --- header / footer ---------------------------------------------------- */
.site-header{
  position:fixed;top:env(safe-area-inset-top, 0px);left:0;right:0;z-index:200;
  height:var(--header-h);display:flex;align-items:center;
  transition:color .6s linear;
}
/* A soft fade so copy passing underneath never fights the wordmark. */
.site-header::before{
  content:"";position:absolute;left:0;right:0;top:calc(-1 * env(safe-area-inset-top, 0px));
  bottom:-28px;z-index:-1;pointer-events:none;
  background:linear-gradient(to bottom,
    var(--hdr-fade) 0%, var(--hdr-fade) 46%, transparent 100%);
  transition:background .6s linear;
}
.header-in{display:flex;align-items:center;justify-content:space-between;gap:var(--s32);width:100%;}
.lockup{display:flex;align-items:center;gap:12px;text-decoration:none;color:inherit;}
.lockup-name{font-family:var(--display-font);font-weight:800;font-size:18px;letter-spacing:-0.015em;line-height:1;}
.lockup .mark{width:28px;height:auto;}          /* the bible's minimum for the seal */
.mark-ring{fill:none;stroke:var(--mark-ring);stroke-width:2.2;
  transition:stroke .6s linear;}
.mark-w{fill:var(--mark-w);transition:fill .6s linear;}

.nav{display:flex;align-items:center;gap:var(--s32);}
.nav a{color:inherit;opacity:.62;font-size:14px;font-weight:500;text-decoration:none;}
.nav a:hover,.nav a[aria-current="page"]{opacity:1;}
.nav-toggle{display:none;background:none;border:1px solid currentColor;color:inherit;
  border-radius:5px;padding:8px 12px;cursor:pointer;font-size:13px;font-weight:600;opacity:.75;}

@media (max-width: 860px){
  .nav{display:none;position:fixed;inset:0;z-index:250;
    flex-direction:column;align-items:flex-start;justify-content:center;gap:var(--s20);
    background:var(--fern);color:#F7F5F0;
    padding-left:max(var(--gutter), env(safe-area-inset-left,0px));}
  .nav[data-open="true"]{display:flex;}
  .nav a{font-size:28px;font-family:var(--display-font);font-weight:800;opacity:.9;}
  .nav-toggle{display:block;}
}

.site-footer{padding-block:var(--s72) var(--s48);}
.footer-grid{display:grid;grid-template-columns:minmax(0,2fr) repeat(2,minmax(0,1fr));gap:var(--s48);}
@media (max-width: 680px){ .footer-grid{grid-template-columns:1fr;gap:var(--s32);} }
.footer-links{list-style:none;margin:var(--s20) 0 0;padding:0;}
.footer-links li + li{margin-top:9px;}
.footer-links a{color:var(--text-secondary);font-size:var(--body-s);text-decoration:none;}
.footer-links a:hover{color:var(--text-primary);}
.footer-base--single{justify-content:flex-end;}
.footer-base{margin-top:var(--s48);padding-top:var(--s20);border-top:1px solid var(--rule-hairline);
  display:flex;justify-content:space-between;gap:var(--s20);flex-wrap:wrap;
  font-size:var(--body-s);color:var(--text-muted);}
.endorse{font-family:var(--display-font);font-weight:700;font-size:15px;color:var(--text-secondary);}

/* --- controls ----------------------------------------------------------- */
.btn{display:inline-flex;align-items:center;font-family:var(--body-font);
  font-size:15px;font-weight:600;line-height:1;padding:16px 24px;border-radius:5px;
  border:1px solid transparent;cursor:pointer;text-decoration:none;
  transition:background .2s,border-color .2s,color .2s;}
.btn-primary{background:var(--jade);color:#16211C;border-color:var(--jade);}
.btn-primary:hover{background:#00b377;border-color:#00b377;}
.on-dark .btn-primary{background:#4F46E5;border-color:#4F46E5;color:#FFFFFF;}
.on-dark .btn-primary:hover{background:#6C63F0;border-color:#6C63F0;}
.btn-quiet{background:transparent;color:inherit;border-color:var(--rule-strong);}
.btn-quiet:hover{border-color:currentColor;}
.btn-row{display:flex;flex-wrap:wrap;gap:var(--s12);align-items:center;}
.textlink{color:var(--jade-text);font-weight:600;text-decoration:none;
  border-bottom:1px solid color-mix(in srgb, currentColor 35%, transparent);padding-bottom:2px;}
.textlink:hover{border-bottom-color:currentColor;}

/* --- the four failures -------------------------------------------------- */
.faults{list-style:none;margin:0;padding:0;max-width:30ch;}
.faults li{
  font-family:var(--display-font);font-weight:700;
  font-size:var(--display-m);line-height:1.2;letter-spacing:-0.02em;
  padding-block:var(--s20);
  border-top:1px solid var(--rule-hairline);
}

/* --- pillars ------------------------------------------------------------ */
.pillars{display:grid;gap:0;max-width:52ch;}
.pillar{
  display:grid;grid-template-columns:minmax(0,10ch) minmax(0,1fr);
  gap:var(--s32);align-items:baseline;
  padding-block:var(--s20);border-top:1px solid var(--rule-hairline);
}
.pillar h3{font-size:var(--display-m);font-weight:700;letter-spacing:-0.02em;}
.pillar p{color:var(--text-secondary);font-size:var(--body);max-width:30ch;}
.pillar .flag{display:block;color:var(--bronze-text);font-size:var(--body-s);margin-top:6px;}
@media (max-width: 680px){ .pillar{grid-template-columns:1fr;gap:var(--s8);} }

/* --- the clock ---------------------------------------------------------- */
.clock{display:grid;grid-template-columns:1fr 1fr;gap:var(--s48);max-width:40ch;}
@media (max-width: 680px){ .clock{grid-template-columns:1fr;gap:var(--s32);} }
.clock-read{font-family:var(--display-font);font-weight:800;
  font-variant-numeric:tabular-nums;letter-spacing:-0.03em;
  font-size:var(--figure-l);line-height:1;margin:var(--s12) 0 0;}
[data-side="without"] .clock-read{color:var(--figure-before);}
[data-side="with"] .clock-read{color:var(--figure-after);}

/* --- calliq ------------------------------------------------------------- */
.calliq-mark{display:inline-block;
  font-family:'Plus Jakarta Sans','Helvetica Neue',Arial,sans-serif;font-weight:700;
  font-size:var(--display-l);letter-spacing:-0.03em;line-height:1;}
.calliq-dot{width:12px;height:12px;border-radius:50%;background:var(--indigo);flex:none;}

/* CallIQ speaks in its own typefaces inside its own room:
   Plus Jakarta Sans for display, Inter for everything read at size. */
.callq h1,.callq h2,.callq h3,.callq .d-xl,.callq .d-l,.callq .d-m{
  font-family:'Plus Jakarta Sans','Helvetica Neue',Arial,sans-serif;
  font-weight:700;letter-spacing:-0.025em;}
.callq .lede,.callq p,.callq .label,.callq .btn,.callq dt,.callq dd,
.callq .source,.callq .clock-read{
  font-family:'Inter','Helvetica Neue',Arial,sans-serif;}
.callq .clock-read{font-weight:700;letter-spacing:-0.02em;}
.kin{
  font-family:'Inter','Helvetica Neue',Arial,sans-serif;
  font-size:var(--body-s);font-weight:500;color:var(--text-muted);
  letter-spacing:0.01em;}
.on-dark .calliq-dot{background:#A5B4FC;}

/* --- scroll cue + progress ---------------------------------------------- */
.cue{display:flex;align-items:center;gap:var(--s12);
  font-size:var(--body-s);color:var(--text-muted);margin-top:var(--s72);}
.cue i{display:block;width:40px;height:1px;background:var(--rule-strong);position:relative;overflow:hidden;}
.cue i::after{content:"";position:absolute;inset:0;background:var(--bronze);
  transform:translateX(-100%);animation:cue 2.6s ease-in-out infinite;}
@keyframes cue{0%{transform:translateX(-100%)}55%{transform:translateX(100%)}100%{transform:translateX(100%)}}

.progress{position:fixed;left:0;top:env(safe-area-inset-top,0px);height:2px;z-index:210;
  background:var(--jade);width:var(--p,0%);transition:width .1s linear;}

/* --- reveals: visible by default; the pre-state exists only with script -- */
.js-reveal [data-reveal]{opacity:0;transform:translateY(16px);
  transition:opacity .9s cubic-bezier(.22,.61,.36,1),transform .9s cubic-bezier(.22,.61,.36,1);
  transition-delay:var(--d,0ms);}
.js-reveal [data-reveal].is-in{opacity:1;transform:none;}
.js-reveal [data-reveal].is-at-rest{transition:none;opacity:1;transform:none;}

@media (prefers-reduced-motion: reduce){
  .js-reveal [data-reveal]{opacity:1;transform:none;transition:none;}
  .cue i::after{animation:none;transform:none;}
  .progress{transition:none;}
  #stage{transition:none;}
}

/* --- inner pages -------------------------------------------------------- */
.page-head{padding-top:calc(var(--header-h) + var(--s104));padding-bottom:var(--s72);}
.reading{max-width:min(54ch, 46%);}
@media (max-width: 1100px){ .reading{max-width:100%;} }
.page-foot{padding-bottom:var(--s144);}
.dl{margin:0;}
.dl > div{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2fr);gap:var(--s32);
  padding-block:var(--s20);border-top:1px solid var(--rule-hairline);}
.dl dt{font-weight:600;margin:0;}
.dl dd{margin:0;color:var(--text-secondary);max-width:46ch;}
@media (max-width: 680px){ .dl > div{grid-template-columns:1fr;gap:var(--s8);} }
.numbered{list-style:none;margin:0;padding:0;counter-reset:n;}
.numbered li{counter-increment:n;display:grid;grid-template-columns:auto 1fr;gap:var(--s20);
  padding-block:var(--s32);border-top:1px solid var(--rule-hairline);}
.numbered li::before{content:counter(n,decimal-leading-zero);
  font-family:var(--display-font);font-weight:800;font-size:20px;
  color:var(--bronze-text);font-variant-numeric:tabular-nums;}
.field{display:grid;gap:var(--s8);margin-bottom:var(--s20);}
.field label{font-size:var(--label);font-weight:600;}
.field input,.field textarea,.field select{
  background:var(--ground-raised);border:1px solid var(--rule-strong);
  border-radius:5px;padding:13px 14px;font-size:15px;width:100%;}
.field textarea{min-height:120px;resize:vertical;}
.form-note{font-size:var(--body-s);color:var(--text-muted);margin-top:var(--s12);}
.source{font-size:var(--body-s);color:var(--text-muted);line-height:1.5;max-width:46ch;}
.rule-top{border-top:1px solid var(--rule-hairline);padding-top:var(--s32);}

/* --- 20. What gets built ------------------------------------------------- */
.specs{list-style:none;margin:0;padding:0;max-width:40ch;}
.specs li{
  display:grid;gap:4px;
  padding-block:var(--s20);
  border-top:1px solid var(--rule-hairline);
}
.specs b{
  font-family:var(--display-font);font-weight:700;
  font-size:calc(21 * var(--su));letter-spacing:-0.015em;line-height:1.2;
}
.specs span{color:var(--text-secondary);font-size:var(--body-s);line-height:1.5;}

.outcome{
  font-family:var(--display-font);font-weight:800;
  font-size:calc(26 * var(--su));letter-spacing:-0.02em;line-height:1.1;
  color:var(--jade-text);max-width:22ch;
}

/* the pillars now carry a mechanism and an outcome */
.pillar p{display:grid;gap:2px;}
.pillar p b{font-weight:600;color:var(--text-primary);}
.pillar p span{color:var(--text-secondary);font-size:var(--body-s);}

/* --- 21. Two doors ------------------------------------------------------- */
.doors{display:grid;grid-template-columns:1fr 1fr;gap:var(--s48);max-width:48ch;}
@media (max-width: 860px){ .doors{grid-template-columns:1fr;gap:var(--s32);} }
.door{display:grid;gap:var(--s12);align-content:start;
  border-top:1px solid var(--rule-hairline);padding-top:var(--s20);}
.door h3{font-size:calc(20 * var(--su));font-weight:700;letter-spacing:-0.015em;line-height:1.2;}
.door p{color:var(--text-secondary);font-size:var(--body-s);max-width:28ch;}
.door .textlink{justify-self:start;font-size:var(--body-s);}

@media (max-width: 860px){
  .screen--list .specs b{font-size:calc(17 * var(--su));}
  .screen--list .outcome{font-size:calc(20 * var(--su));}
}

body.on-dark{background:#1E1B4B;}
body.on-dark #stage{background:#1E1B4B;}