/* NovaQuarks chassis, part 2 of 2: the shared responsive block, entrance choreography,
   close and footer, plus the skip link and form states added at port time.
   MUST load after the page's own <style>. See site.css for why. */

  @media (max-width:768px){
    .punch{width:15px;height:15px}
    .rail{position:static;display:block;width:auto;max-width:none;margin-bottom:40px}
    .rail .punch{margin:0 0 32px}
    .rail .eyebrow{font-size:11px;margin-top:0;max-width:220px}
    .pillars .wrap,.sequence .wrap,.close .wrap{padding-left:var(--padx)}
    .statement .inner{padding-left:var(--padx)}
    .statement .punch{position:static;margin:0 0 32px}
  }

  /* 04 Sequence: the phase tracker, vertical. Line on the left, the copy on the right. */
  .sequence{padding-bottom:200px}
  .sequence .wrap{position:relative;padding-left:calc(var(--padx) + var(--indent2))}
  .phases{position:relative;padding-left:56px}
  .phase-overlay{
    position:absolute;top:0;bottom:0;left:10px;width:2px;height:100%;
    pointer-events:none;z-index:0;overflow:visible;
  }
  .phase-overlay .seg-dim{stroke:rgba(244,244,245,0.18);stroke-width:1;fill:none}
  .phase-overlay .seg{
    stroke:rgba(132,144,254,0.85);stroke-width:1;fill:none;
    transition:stroke-dashoffset 2000ms linear;
  }
  .phase-overlay .seg.is-trailing{transition:stroke-dashoffset 1080ms linear}
  .phase-overlay .seg.is-lit{stroke-dashoffset:0}
  .phase-overlay.is-resetting .seg,
  .phase-overlay.is-resetting .seg.is-trailing{
    transition:stroke-dashoffset 400ms cubic-bezier(0.65,0,0.35,1);
  }
  .phase-grid{display:flex;flex-direction:column;gap:96px}
  .phase{position:relative;z-index:1}
  .node{
    position:absolute;left:-56px;top:2px;width:22px;height:22px;border-radius:50%;
    border:1px solid rgba(244,244,245,0.45);background:transparent;
    transition:background-color 400ms cubic-bezier(0.25,0.1,0.25,1),
               border-color 400ms cubic-bezier(0.25,0.1,0.25,1);
  }
  .node.is-lit{background:var(--lav);border-color:var(--lav)}
  .phases.is-resetting .node{
    transition:background-color 400ms cubic-bezier(0.65,0,0.35,1),
               border-color 400ms cubic-bezier(0.65,0,0.35,1);
  }
  .phase .n{
    font-family:var(--mono);font-weight:500;font-size:12px;letter-spacing:0.12em;
    color:var(--fg-mute);
  }
  .phase h3{
    font-family:var(--display);font-weight:500;font-size:clamp(24px,2.4vw,36px);
    line-height:1.1;letter-spacing:-0.015em;color:var(--fg);margin-top:14px;
  }
  .phase p:last-child{margin-top:14px;font-size:16px;color:var(--fg-body);max-width:44ch}
  @media (max-width:900px){
    .sequence{padding-bottom:120px}
    .phase-grid{gap:72px}
  }
  @media (prefers-reduced-motion: reduce){
    .node{background:var(--lav) !important;border-color:var(--lav) !important;transition:none !important}
    .phase-overlay .seg{stroke-dashoffset:0 !important;transition:none !important}
  }

  /* 05 Close: pinned while the footer stacks over it */
  .close{
    position:sticky;top:0;min-height:100svh;
    display:flex;flex-direction:column;justify-content:center;
    padding-bottom:120px;
  }
  .close .wrap{width:100%;position:relative}
  .close .body{color:var(--fg-dim)}
  .talk{
    color:var(--fg);text-decoration:underline;text-underline-offset:7px;
    text-decoration-thickness:1px;text-decoration-color:rgba(244,244,245,0.5);
    transition:color 240ms var(--ease),text-decoration-color 240ms var(--ease);
  }
  .talk:hover{color:var(--lav);text-decoration-color:var(--lav)}
  main{display:contents}
  .close h2{
    font-family:var(--display);font-weight:500;color:var(--fg);
    font-size:clamp(40px,6.5vw,96px);line-height:1.0;letter-spacing:-0.02em;max-width:14ch;
  }
  .close .body{margin-top:32px;font-size:18px;color:var(--fg-dim)}
  .close .pill{margin-top:48px;padding:16px 30px;font-size:13px}
  @media (max-width:768px){.close{padding-bottom:120px}}

  /* Footer: the card that stacks over the page */
  footer{
    background:var(--recess);border-top:1px solid var(--rule);
    position:relative;z-index:2;
    min-height:100svh;display:flex;
  }
  .foot-inner{display:flex;flex-direction:column;width:100%}
  .foot-head{
    display:grid;grid-template-columns:1fr 1.6fr;gap:48px;align-items:start;
    padding:96px 0 72px;
  }
  .foot-head svg{height:16px;width:auto;display:block;margin-top:4px}
  .foot-cols{display:grid;grid-template-columns:repeat(3,1fr);gap:40px}
  .foot-col h4{
    font-family:var(--mono);font-weight:500;font-size:11px;letter-spacing:0.12em;
    text-transform:uppercase;color:var(--fg-body);margin-bottom:20px;
  }
  .foot-col a{
    display:block;color:var(--fg-dim);text-decoration:none;font-size:15px;
    padding:7px 0;transition:color 240ms var(--ease);
  }
  .foot-col a:hover{color:var(--fg)}
  .foot-brand svg{height:16px;width:auto;display:block;margin-top:4px}
  .foot-soto,.foot-place{
    font-family:var(--mono);font-weight:500;font-size:11px;
    letter-spacing:0.16em;text-transform:uppercase;color:var(--fg-mute);
  }
  .foot-soto{margin-top:16px}
  .foot-place{margin-top:20px}
  .foot-giant{
    overflow:hidden;margin-top:16px;
    margin-left:calc(-1*var(--padx));margin-right:calc(-1*var(--padx));
    padding:0 var(--padx);
  }
  .foot-giant span{
    display:block;font-family:var(--display);font-weight:500;color:var(--lav);
    font-size:clamp(44px,12.2vw,176px);line-height:0.82;letter-spacing:-0.035em;
    white-space:nowrap;transform:translateY(10%);
  }
  .foot-legal{
    margin-top:auto;
    border-top:1px solid var(--rule-soft);padding:28px 0 8px;
    display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap;
    font-family:var(--mono);font-weight:500;font-size:11px;letter-spacing:0.1em;
    text-transform:uppercase;color:var(--fg-mute);
  }
  .foot-legal .grp{display:flex;align-items:center;gap:24px;flex-wrap:wrap}
  .foot-legal a{color:var(--fg-mute);text-decoration:none;padding:6px 0}
  .foot-legal a:hover{color:var(--fg)}
  .foot-legal .mark svg{height:16px;width:16px;display:block}
  @media (max-width:900px){
    .foot-head{grid-template-columns:1fr;gap:40px;padding:72px 0 48px}
    .foot-cols{grid-template-columns:1fr;gap:8px}
  }

  /* Entrance choreography: nav cascades in as the loader fades */
  .nin{opacity:0}
  body.introduced .nin{
    animation:navIn 600ms var(--ease) both;
    animation-delay:var(--d,0ms);
  }
  @keyframes navIn{
    from{opacity:0;transform:translateY(-8px)}
    to{opacity:1;transform:none}
  }
  .hin{opacity:0}
  body.introduced .hin{
    animation:heroIn 700ms var(--ease) both;
    animation-delay:var(--d,0ms);
  }
  @keyframes heroIn{
    from{opacity:0;transform:translateY(12px)}
    to{opacity:1;transform:none}
  }
  @media (prefers-reduced-motion: reduce){
    .nin,.hin{opacity:1}
    body.introduced .nin,body.introduced .hin{animation:none}
  }

  /* Motion */
  .reveal{opacity:0;transform:translateY(12px);transition:opacity 500ms var(--ease),transform 500ms var(--ease)}
  .reveal.in{opacity:1;transform:none}
  .reveal.d1{transition-delay:80ms}
  .reveal.d2{transition-delay:160ms}
  .reveal.d3{transition-delay:240ms}
  @media (prefers-reduced-motion: reduce){
    html{scroll-behavior:auto}
    .reveal{opacity:1;transform:none;transition:none}
    .nav,.panel,.cta-line .arr,.cta-line::after,.nav-link::after,.ringfill circle{transition:none}
  }

  /* Skip link. The nav is five stops ahead of the content on every page. */
  .skip{
    position:absolute;left:-9999px;top:0;z-index:200;
    font-family:var(--mono);font-weight:500;font-size:12px;letter-spacing:0.12em;
    text-transform:uppercase;text-decoration:none;
    background:var(--recess);color:var(--fg);
    padding:14px 20px;border:1px solid var(--rule-strong);
  }
  .skip:focus{left:var(--padx);top:16px}
  main:focus{outline:none}

  /* Form states. One field, one message, no tally. */
  .field-error,.form-error{
    font-family:var(--body);font-weight:400;font-size:14px;line-height:1.5;
    color:var(--sand);margin-top:10px;
  }
  .form-error{margin-top:28px;max-width:44ch}
  .field input[aria-invalid="true"],.field textarea[aria-invalid="true"]{border-bottom-color:var(--sand)}
  form button[disabled]{opacity:0.55;cursor:default}
  form button[disabled]:hover{background:var(--fg);border-color:var(--fg)}