/* ============================================================================
   PIPE QUEST by DHS PLUMBING - hero module
   Direction: Trade-Catalog Americana. Warm paper ground, blue-derived ink,
   copper as material, one signal red reserved for the single action.

   Every token below is lifted verbatim from the DHS brand system. Nothing in
   this file invents a colour, a radius, a curve, or a duration.
   ========================================================================== */

:root{
  /* paper */
  --bone:oklch(96.5% .012 82); --bone-deep:oklch(93% .016 82); --bone-lift:oklch(98.5% .008 82);
  /* ink, carrying a real blue chroma at hue 265 */
  --ink:oklch(21% .018 265); --ink-deep:oklch(15.5% .020 265); --ink-muted:oklch(46% .014 265);
  /* material and action */
  --copper:oklch(63% .115 48); --copper-lift:oklch(74% .105 55);
  --signal:oklch(53% .190 27); --signal-lift:oklch(64% .190 28);
  --valley:oklch(52% .045 120);
  /* lines. there are essentially no shadows in this system. */
  --rule:oklch(21% .018 265 / .14);
  --rule-ink:oklch(96.5% .012 82 / .16);

  /* The licensed primaries first, the free Google stand-ins second, then a
     neutral system fallback. Nothing is fetched from a network here. */
  --font-display:"Monument Grotesk","ABC Monument Grotesk","Archivo",
    ui-sans-serif,-apple-system,"Segoe UI",Helvetica,Arial,sans-serif;
  --font-body:"Founders Grotesk Text","Public Sans",
    ui-sans-serif,-apple-system,"Segoe UI",Helvetica,Arial,sans-serif;
  --font-spec:"Monument Grotesk","Archivo",ui-monospace,SFMono-Regular,Menlo,monospace;

  --t-display:clamp(2.25rem,1.45rem + 3.4vw,3.75rem);
  --t-body-l:clamp(1.0625rem,1rem + .28vw,1.1875rem);
  --t-spec:.75rem;

  --gutter:clamp(1.25rem,.75rem + 2vw,2.5rem);
  --container:1240px;
  --radius:2px;

  --ease-enter:cubic-bezier(.22,1,.36,1);
  --ease-move:cubic-bezier(.25,1,.5,1);
  --d-state:140ms; --d-panel:200ms; --d-reveal:500ms; --d-hero:700ms;
}

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

html{-webkit-text-size-adjust:100%}

body{
  margin:0;
  background:var(--bone);
  color:var(--ink);
  font-family:var(--font-body);
  font-size:1rem;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
}

/* Paper grain. Four percent. It is the difference between off-white and
   paper, and it is generated inline, not downloaded. */
body::before{
  content:"";position:fixed;inset:0;z-index:1;pointer-events:none;opacity:.04;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}

h1,h2,h3{
  font-family:var(--font-display);
  font-weight:700;
  line-height:1.05;
  letter-spacing:-.02em;
  text-wrap:balance;
  margin:0;
}
p{margin:0;text-wrap:pretty}
svg{display:block}

.wrap{
  max-width:var(--container);
  margin-inline:auto;
  padding-inline:var(--gutter);
  position:relative;
  z-index:2;
}

/* The spec voice. Uppercase, tracked, for numbers and small labels only. */
.spec{
  font-family:var(--font-spec);
  font-size:var(--t-spec);
  letter-spacing:.12em;
  text-transform:uppercase;
  font-weight:600;
  line-height:1.4;
}

.skip{position:absolute;left:-9999px;top:0;background:var(--ink);color:var(--bone);
  padding:12px 20px;z-index:2000;text-decoration:none}
.skip:focus{left:12px;top:12px}

:focus-visible{outline:2px solid var(--copper);outline-offset:2px;border-radius:var(--radius)}

/* ============================================================================
   TOP RULE
   ========================================================================== */
.topbar{border-bottom:1px solid var(--rule);background:var(--bone)}
.topbar__in{
  display:flex;align-items:center;justify-content:space-between;gap:1rem;
  min-height:60px;
}
.mark{display:flex;align-items:center;gap:.7rem;text-decoration:none;color:inherit}
.mark svg{width:34px;height:34px;flex-shrink:0}
.mark__txt{font-family:var(--font-display);font-weight:700;font-size:1.05rem;
  line-height:1;letter-spacing:.01em}
.mark__txt small{display:block;font-family:var(--font-spec);font-weight:600;
  font-size:.56rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--ink-muted);margin-top:4px}
.topbar__spec{color:var(--ink-muted);display:none}
@media(min-width:720px){.topbar__spec{display:block}}

/* ============================================================================
   HERO
   ========================================================================== */
.hero{padding-block:clamp(2rem,1.25rem + 3vw,4rem) clamp(2.5rem,2rem + 3vw,4.5rem)}
.hero__grid{display:grid;gap:clamp(2rem,1.5rem + 3vw,3.5rem)}
@media(min-width:1024px){
  .hero__grid{grid-template-columns:minmax(0,5fr) minmax(0,7fr);align-items:start}
}

.hero__eyebrow{
  color:var(--copper);
  display:flex;align-items:center;gap:.65rem;
  margin-bottom:1.1rem;
}
.hero__eyebrow::after{content:"";flex:1;height:1px;background:var(--rule)}

.hero h1{font-size:var(--t-display);max-width:16ch}
.hero__sub{
  font-size:var(--t-body-l);color:var(--ink-muted);
  max-width:46ch;margin-top:1.15rem;
}

.hero__cta{display:flex;flex-wrap:wrap;gap:.75rem;margin-top:1.75rem}

.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.55rem;
  min-height:52px;padding:0 1.5rem;border-radius:var(--radius);
  font-family:var(--font-display);font-weight:600;font-size:1rem;letter-spacing:-.01em;
  text-decoration:none;border:1px solid transparent;cursor:pointer;background:none;
  color:inherit;
  transition:background-color var(--d-state) var(--ease-enter),
             color var(--d-state) var(--ease-enter),
             border-color var(--d-state) var(--ease-enter);
}
.btn--fill{background:var(--signal);color:var(--bone)}
.btn--fill:hover{background:oklch(47% .19 27)}
.btn--line{border-color:var(--rule);color:var(--ink)}
.btn--line:hover{border-color:var(--ink);background:var(--bone-deep)}

/* Hairline-divided facts. No cards. No shadows. */
.facts{margin-top:2rem;border-top:1px solid var(--rule);list-style:none;padding:0}
.facts li{
  display:flex;gap:1rem;align-items:baseline;
  padding:.85rem 0;border-bottom:1px solid var(--rule);
}
.facts b{font-family:var(--font-spec);font-size:var(--t-spec);letter-spacing:.12em;
  text-transform:uppercase;font-weight:600;color:var(--copper);
  flex:0 0 2.25rem}
.facts span{color:var(--ink-muted);font-size:.95rem}

/* ============================================================================
   THE GAME MODULE
   ========================================================================== */
.machine{border:1px solid var(--rule);border-radius:var(--radius);background:var(--bone-lift)}

.machine__head{
  display:flex;align-items:center;justify-content:space-between;gap:1rem;
  padding:.7rem 1rem;border-bottom:1px solid var(--rule);
  color:var(--ink-muted);
}
.machine__head b{color:var(--ink)}

.pq-stage{
  position:relative;
  background:var(--ink-deep);
  display:flex;flex-direction:column;
}
.pq-stage:focus{outline:none}
.pq-stage[data-focused="true"]{box-shadow:inset 0 0 0 1px var(--copper)}

.pq-screen{
  position:relative;
  display:flex;align-items:center;justify-content:center;
  width:100%;
  aspect-ratio:16/9;
  overflow:hidden;
  background:var(--ink-deep);
}
#pq-canvas{
  display:block;
  image-rendering:pixelated;
  image-rendering:crisp-edges;
  width:100%;height:100%;
  touch-action:manipulation;
}

/* -- On-screen pads. Shown on touch, and in full screen on touch. -------- */
.pq-pads{display:none}
.pq-pads__side{display:flex;gap:.5rem}

.pad{
  width:56px;height:56px;
  display:flex;align-items:center;justify-content:center;
  border:1px solid oklch(96.5% .012 82 / .28);
  border-radius:var(--radius);
  background:oklch(96.5% .012 82 / .06);
  color:var(--bone);
  cursor:pointer;
  touch-action:none;
  -webkit-user-select:none;user-select:none;
  -webkit-tap-highlight-color:transparent;
  transition:background-color var(--d-state) var(--ease-enter),
             border-color var(--d-state) var(--ease-enter);
}
.pad svg{width:26px;height:26px;stroke:currentColor;stroke-width:1.75;
  fill:none;stroke-linecap:round;stroke-linejoin:round}
.pad[data-on="true"]{background:var(--copper);border-color:var(--copper-lift)}
.pad--jump{width:68px;height:68px}
.pad--jump svg{width:30px;height:30px}

@media(hover:none) and (pointer:coarse){
  .pq-pads{
    display:flex;align-items:flex-end;justify-content:space-between;
    gap:.75rem;padding:.75rem 1rem 1rem;
    background:var(--ink-deep);
    border-top:1px solid var(--rule-ink);
  }
}

/* -- Controls strip ------------------------------------------------------ */
.machine__foot{
  display:flex;align-items:center;justify-content:space-between;gap:1rem;
  flex-wrap:wrap;
  padding:.7rem 1rem;border-top:1px solid var(--rule);
}
.pq-controls{display:flex;flex-wrap:wrap;gap:.4rem}

.pq-btn{
  display:inline-flex;align-items:center;gap:.45rem;
  min-height:44px;padding:0 .85rem;
  border:1px solid var(--rule);border-radius:var(--radius);
  background:var(--bone);color:var(--ink);
  font-family:var(--font-display);font-weight:600;font-size:.875rem;
  cursor:pointer;
  transition:background-color var(--d-state) var(--ease-enter),
             border-color var(--d-state) var(--ease-enter),
             color var(--d-state) var(--ease-enter);
}
.pq-btn svg{width:18px;height:18px;stroke:currentColor;stroke-width:1.75;
  fill:none;stroke-linecap:round;stroke-linejoin:round}
.pq-btn:hover:not(:disabled){border-color:var(--ink);background:var(--bone-deep)}
.pq-btn:disabled{opacity:.4;cursor:default}
.pq-btn--primary{background:var(--ink);color:var(--bone);border-color:var(--ink)}
.pq-btn--primary:hover:not(:disabled){background:var(--ink-deep);border-color:var(--ink-deep)}
.pq-btn[data-muted="true"] .pq-ico-on{display:none}
.pq-btn:not([data-muted="true"]) .pq-ico-off{display:none}

.pq-legend{color:var(--ink-muted);display:none}
@media(min-width:900px){.pq-legend{display:block}}
.pq-legend kbd{
  font-family:var(--font-spec);font-size:.6875rem;letter-spacing:.06em;
  border:1px solid var(--rule);border-radius:var(--radius);
  padding:.1rem .35rem;margin-inline:.1rem;color:var(--ink);
}

.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;
}

/* -- Full screen --------------------------------------------------------- */
.pq-stage:fullscreen,
.pq-stage:-webkit-full-screen{
  width:100vw;height:100vh;
  background:var(--ink-deep);
  justify-content:center;
}
.pq-stage:fullscreen .pq-screen{flex:1 1 auto;aspect-ratio:auto;min-height:0}
.pq-stage:-webkit-full-screen .pq-screen{flex:1 1 auto;aspect-ratio:auto;min-height:0}
.pq-stage[data-fullscreen="true"] .pq-exit{display:inline-flex}
.pq-exit{
  display:none;position:absolute;top:12px;right:12px;z-index:5;
  min-height:40px;padding:0 .75rem;
  border:1px solid oklch(96.5% .012 82 / .34);border-radius:var(--radius);
  background:oklch(15.5% .02 265 / .72);color:var(--bone);
  font-family:var(--font-display);font-weight:600;font-size:.8125rem;
  align-items:center;gap:.4rem;cursor:pointer;
}
.pq-exit svg{width:16px;height:16px;stroke:currentColor;stroke-width:1.75;
  fill:none;stroke-linecap:round;stroke-linejoin:round}
.pq-exit:hover{border-color:var(--bone)}

/* ============================================================================
   THIRTEEN STRIPES. Once on this page, as the break before the closing note.
   Twelve hairlines, the seventh in signal red. Never captioned.
   ========================================================================== */
.stripes{display:flex;gap:8px;justify-content:center;align-items:flex-end;
  padding-block:clamp(2.5rem,2rem + 2vw,4rem)}
.stripes i{display:block;width:2px;height:22px;background:var(--rule)}
.stripes i:nth-child(7){background:var(--signal)}

.colophon{
  border-top:1px solid var(--rule);
  padding-block:1.5rem 2.5rem;
  color:var(--ink-muted);
}
.colophon__in{display:flex;flex-wrap:wrap;gap:.5rem 1.5rem;justify-content:space-between}

/* ============================================================================
   MOTION. Transform and opacity only, and every one of them yields to
   prefers-reduced-motion.
   ========================================================================== */
.reveal{
  opacity:0;transform:translateY(16px);
  transition:opacity var(--d-reveal) var(--ease-enter),
             transform var(--d-reveal) var(--ease-enter);
}
.reveal.in{opacity:1;transform:none}
.reveal:nth-child(2){transition-delay:40ms}
.reveal:nth-child(3){transition-delay:80ms}
.reveal:nth-child(4){transition-delay:120ms}

/* The hero entrance wipe. Top to bottom, once, on first load. */
@keyframes pq-wipe{from{clip-path:inset(0 0 100% 0)}to{clip-path:inset(0 0 0 0)}}
.machine{animation:pq-wipe var(--d-hero) var(--ease-enter) both}

@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
  }
  .reveal{opacity:1;transform:none}
  .machine{animation:none;clip-path:none}
}

/* ============================================================================
   EMBED MODE. Opt-in via ?embed=1 (see the inline script in index.html),
   so the machine can drop into an iframe on another page without a second
   site-header-style bar floating inside the frame, and without the host
   page's own headline duplicating the copy the iframe already sits inside
   of. Additive only — default (no query string) load is untouched.
   ========================================================================== */
body.is-embed .topbar,
body.is-embed .colophon,
body.is-embed .hero__copy,
body.is-embed .stripes{display:none}
body.is-embed .hero{padding-block:.5rem}
body.is-embed .hero__grid{display:block}
/* Icon-only control buttons at narrow embed widths, so the row never wraps
   to two lines and the machine's height stays predictable for the host
   page's fixed-aspect-ratio iframe box. */
body.is-embed .pq-btn__t{display:none}