/* ============================================================
   Curious Digital Things — shared styles
   Direction: "Instrument". The products are precision tools, so the
   site is built like one: near-black ground, hairline rules, hard-left
   grid, no rounded corners, and every figure set in tabular mono.
   One accent (signal cyan) and it means one thing — live / interactive.
   Semantic colours (warn, ok) are deliberately NOT the accent.
   ============================================================ */

/* Variable fonts, self-hosted — no third-party request, 61 KB for both.
   One file per family covers the whole weight range. */
@font-face{
  font-family:"Instrument Sans";
  src:url("fonts/instrument-sans-var.woff2") format("woff2");
  font-weight:400 700;
  font-style:normal;
  font-display:swap;
}
@font-face{
  font-family:"JetBrains Mono";
  src:url("fonts/jetbrains-mono-var.woff2") format("woff2");
  font-weight:400 700;
  font-style:normal;
  font-display:swap;
}

:root{
  /* ground + surfaces */
  --void:#0b0d10;      /* page */
  --panel:#13161b;     /* cards */
  --panel-2:#1a1e25;   /* raised / hover */
  --line:#242a33;      /* hairline */
  --line-2:#39424f;    /* emphasised rule */

  /* text */
  --fg:#e8ecf1;
  --fg-2:#9aa4b2;
  --fg-3:#8d99a8;

  /* the one accent — interactive / live */
  --signal:#4dd0c4;
  --signal-dim:#2f8f88;
  --signal-wash:rgba(77,208,196,.09);
  --on-signal:#06120f;

  /* semantic, kept separate from the accent on purpose */
  --warn:#e0a458;
  --ok:#6ee7a5;

  --sans:"Instrument Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --mono:"JetBrains Mono",ui-monospace,"Cascadia Mono","SF Mono",Menlo,Consolas,monospace;

  /* legacy token aliases — the three sales pages and reviews.js still
     reference these names. Mapped, not deleted, so nothing dangles. */
  --ink:var(--void); --ink-2:var(--panel-2); --paper:var(--void); --wash:var(--panel);
  --accent:var(--signal); --accent-mid:var(--signal); --accent-soft:var(--signal-wash);
  --grey:var(--fg-2); --grey-2:var(--fg-3); --rule:var(--line); --white:var(--fg);
  --serif:var(--sans);

  --wrap:1180px; --narrow:780px;
}

*{box-sizing:border-box;}
[id]{scroll-margin-top:88px;}          /* anchors clear the sticky header */
html{scroll-behavior:smooth;}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;}
  *,*::before,*::after{animation-duration:.01ms !important;transition-duration:.01ms !important;}
}

body{
  margin:0;
  font-family:var(--sans);
  color:var(--fg);
  background:var(--void);
  line-height:1.6;
  font-size:16.5px;
  letter-spacing:-.005em;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

/* Film grain. Borrowed from the animated-website skill and dialled right
   down — on a flat near-black ground it stops large panels reading as dead
   digital black. Decorative only, never intercepts a click. */
body::after{
  content:"";
  position:fixed; inset:0; z-index:200; pointer-events:none;
  opacity:.025;
  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,h4{
  font-family:var(--sans);
  font-weight:600;
  line-height:1.08;
  letter-spacing:-.032em;
  margin:0;
  text-wrap:balance;
}
a{color:var(--signal);text-decoration:none;}
a:hover{color:var(--fg);}
:focus-visible{outline:2px solid var(--signal);outline-offset:2px;}
img{max-width:100%;}

.wrap{max-width:var(--wrap);margin:0 auto;padding:0 24px;}
.narrow{max-width:var(--narrow);margin:0 auto;padding:0 24px;}

/* Every figure, label and code fragment is mono and tabular. This is the
   single biggest thing that makes the site read as an instrument. */
.price,.cart-line-p,.cart-sub,.rv-meta,.updated,.tag,
.eyebrow,.meta,.foot-col h4,.rv-badge,.stars{
  font-family:var(--mono);
  font-variant-numeric:tabular-nums;
}

.eyebrow,.meta,.foot-col h4,.tag{
  font-size:10.5px;
  font-weight:500;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--signal);
}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  background:var(--signal);color:var(--on-signal);border:1px solid var(--signal);
  font-family:var(--sans);font-size:14.5px;font-weight:600;letter-spacing:-.01em;
  padding:13px 24px;cursor:pointer;
  transition:background .16s ease,border-color .16s ease,color .16s ease;
}
.btn:hover{background:#63e2d6;border-color:#63e2d6;color:var(--on-signal);}
.btn-ghost{background:transparent;color:var(--fg);border:1px solid var(--line-2);}
.btn-ghost:hover{background:var(--panel-2);border-color:var(--signal);color:var(--signal);}

/* ---------- header ---------- */
header.bar{
  position:sticky;top:0;z-index:50;
  background:rgba(11,13,16,.86);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line);
}
.bar-in{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;
        padding:11px 24px;max-width:var(--wrap);margin:0 auto;}
.brand{display:flex;align-items:center;gap:11px;font-family:var(--sans);font-weight:600;
       font-size:16px;color:var(--fg);letter-spacing:-.025em;}
.brand img{width:30px;height:30px;object-fit:contain;flex:none;}
.brand b{font-weight:600;color:var(--fg-3);}
.brand:hover{color:var(--fg);}
.brand:hover b{color:var(--signal);}
header .btn{padding:9px 17px;font-size:13.5px;}
.nav{display:flex;align-items:center;gap:26px;font-size:14px;}
.nav a{color:var(--fg-2);letter-spacing:-.01em;}
.nav a:hover,.nav a[aria-current="page"]{color:var(--fg);}
.nav a[aria-current="page"]{border-bottom:1px solid var(--signal);padding-bottom:3px;}

/* Products dropdown — CSS only. :focus-within keeps it keyboard-accessible
   without JS, so it still works if scripts fail. */
.nav-drop{position:relative;}
.nav-drop-t{display:inline-flex;align-items:center;gap:6px;}
.nav-drop .caret{font-size:8px;opacity:.6;}
.nav-menu{position:absolute;top:100%;left:-16px;min-width:206px;background:var(--panel);
          border:1px solid var(--line);padding:5px 0;display:none;
          box-shadow:0 22px 48px rgba(0,0,0,.6);z-index:60;}
.nav-drop:hover .nav-menu,.nav-drop:focus-within .nav-menu{display:block;}
.nav-menu a{display:block;padding:10px 18px;font-size:13.5px;border-bottom:none;color:var(--fg-2);}
.nav-menu a:hover{background:var(--panel-2);color:var(--signal);}

/* ---------- page head ---------- */
.page-head{border-bottom:1px solid var(--line);padding:74px 0 58px;}
.page-head .eyebrow{margin-bottom:18px;}
.page-head h1{font-size:clamp(32px,5vw,54px);max-width:18ch;}
.page-head p{color:var(--fg-2);margin:20px 0 0;max-width:58ch;font-size:17px;}

/* ---------- body copy ---------- */
.prose{padding:60px 0 78px;}
.prose h2{font-size:clamp(21px,2.4vw,27px);margin:46px 0 14px;}
.prose h2:first-child{margin-top:0;}
.prose h3{font-size:18px;margin:30px 0 8px;}
.prose p,.prose li{color:var(--fg-2);}
.prose ul{padding-left:20px;}
.prose li{margin-bottom:9px;}
.prose .lede{font-size:19px;color:var(--fg);letter-spacing:-.015em;}
.prose .updated{color:var(--fg-3);font-size:12px;margin-bottom:38px;letter-spacing:.08em;text-transform:uppercase;}
.callout{background:var(--panel);border-left:2px solid var(--signal);padding:20px 24px;margin:30px 0;}
.callout p{margin:0;color:var(--fg-2);}

/* ---------- contact cards ---------- */
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:1px;
       background:var(--line);border:1px solid var(--line);margin:34px 0;}
.card{background:var(--panel);padding:26px;}
.card h3{margin-bottom:8px;font-size:18px;}
.card p{margin:0;font-size:14.5px;color:var(--fg-2);}

/* ---------- footer ---------- */
footer{background:var(--void);color:var(--fg-2);border-top:1px solid var(--line);font-size:14px;}
footer a{color:var(--fg-2);}
footer a:hover{color:var(--signal);}
/* The column footer carries the full sitemap — it is the ONLY navigation on
   phones, where the header nav is hidden. Never trim it. */
.foot-top{display:grid;grid-template-columns:1.8fr 1fr 1fr 1fr;gap:38px;
          max-width:var(--wrap);margin:0 auto;padding:52px 24px 40px;}
.foot-brand .brand{font-size:15px;margin-bottom:14px;}
.foot-brand p{margin:0;font-size:13.5px;color:var(--fg-3);max-width:32ch;}
.foot-col h4{color:var(--fg-3);margin:0 0 15px;}
.foot-col a{display:block;font-size:13.5px;margin-bottom:10px;}
.foot-legal{border-top:1px solid var(--line);color:var(--fg-3);font-size:12px;}
.foot-legal .wrap{padding:16px 24px;}

/* ---------- home hero — hard left, not centred ---------- */
.home-hero{
  padding:104px 0 88px;
  border-bottom:1px solid var(--line);
  position:relative;
}
/* a single hairline dropping from the header, like a measurement mark */
.home-hero::before{
  content:"";position:absolute;left:24px;top:0;width:1px;height:56px;
  background:linear-gradient(var(--signal),transparent);
}
.home-hero .eyebrow{margin-bottom:22px;}
.home-hero h1{font-size:clamp(34px,6.4vw,68px);max-width:17ch;margin:0;}
.home-hero p{color:var(--fg-2);font-size:18px;max-width:54ch;margin:24px 0 0;}
.home-hero .cta-row{display:flex;gap:12px;flex-wrap:wrap;margin-top:38px;}
.home-hero .btn-ghost{color:var(--fg);border-color:var(--line-2);background:transparent;}
.home-hero .btn-ghost:hover{background:var(--panel-2);color:var(--signal);border-color:var(--signal);}

/* ---------- value strip ---------- */
.strip3{border-bottom:1px solid var(--line);padding:0;}
.strip3 .wrap{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
              gap:0;padding:0 24px;}
.strip3 .wrap > div{padding:30px 26px 32px;border-left:1px solid var(--line);}
.strip3 .wrap > div:first-child{border-left:0;padding-left:0;}
.strip3 h3{font-size:15px;margin-bottom:7px;font-weight:600;}
.strip3 p{margin:0;font-size:14px;color:var(--fg-2);}

/* ---------- sections ---------- */
.section{padding:78px 0;}
.section + .section{border-top:1px solid var(--line);}
.section-head{max-width:62ch;margin:0 0 42px;}   /* left, not centred */
.section-head .eyebrow{margin-bottom:14px;}
.section-head h2{font-size:clamp(26px,3.6vw,42px);}
.section-head p{color:var(--fg-2);margin:16px 0 0;}

.grid2{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:1px;
       background:var(--line);border:1px solid var(--line);}
.tile{background:var(--panel);padding:32px;display:flex;flex-direction:column;
      transition:background .16s ease;}
.tile:hover{background:var(--panel-2);}
.tile h3{font-size:21px;margin-bottom:9px;}
.tile p{color:var(--fg-2);font-size:14.5px;margin:0 0 20px;}
.tile .meta{margin-bottom:16px;}
.tile .spacer{flex:1;}

/* ---------- product card ---------- */
.pcard{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:34px;
       background:var(--panel);border:1px solid var(--line);align-items:center;
       transition:border-color .16s ease;}
.pcard:hover{border-color:var(--line-2);}
.pcard img{width:100%;height:100%;object-fit:cover;display:block;background:var(--void);}
.pcard .pbody{padding:34px 36px 34px 0;}
.pcard h3{font-size:25px;margin-bottom:12px;}
.pcard p{color:var(--fg-2);margin:0 0 20px;font-size:15px;}
.pcard .price{font-size:24px;margin-bottom:20px;color:var(--fg);font-weight:500;}
.pcard .price .was{color:var(--fg-3);text-decoration:line-through;font-size:17px;margin-right:9px;}
@media(max-width:720px){
  .pcard{grid-template-columns:1fr;gap:0;}
  .pcard .pbody{padding:26px;}
}

/* ---------- product grid ---------- */
.pgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(258px,1fr));gap:1px;
       background:var(--line);border:1px solid var(--line);}
.pitem{background:var(--panel);display:flex;flex-direction:column;transition:background .16s ease;}
.pitem:hover{background:var(--panel-2);}
.pitem .shot{aspect-ratio:1/1;background:var(--void);overflow:hidden;border-bottom:1px solid var(--line);}
.pitem .shot img{width:100%;height:100%;object-fit:cover;display:block;
                 transition:transform .4s cubic-bezier(.2,.7,.3,1);}
.pitem:hover .shot img{transform:scale(1.03);}
.pitem .pi-body{padding:20px 22px 22px;display:flex;flex-direction:column;flex:1;}
.pitem .meta{margin-bottom:10px;}
.pitem h3{font-size:17.5px;margin-bottom:8px;}
.pitem p{font-size:14px;color:var(--fg-2);margin:0 0 18px;}
.pitem .spacer{flex:1;}
.pitem .row{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;}
.pitem .price{font-size:17px;white-space:nowrap;color:var(--fg);font-weight:500;}
.pitem .price .was{color:var(--fg-3);text-decoration:line-through;font-size:13.5px;margin-right:7px;}
.pitem .btn{padding:9px 15px;font-size:13px;}
/* placeholder: must not read as buyable — no price, no button, muted label */
.pitem.soon{background:transparent;}
.pitem.soon:hover{background:transparent;}
.pitem.soon .shot{opacity:.4;}
.pitem.soon .meta{color:var(--fg-3);}
.pitem.soon h3{color:var(--fg-2);}
.pitem.soon .tag{color:var(--fg-3);border:1px solid var(--line);padding:4px 9px;}

/* ---------- reviews ---------- */
.rv-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:1px;
         background:var(--line);border:1px solid var(--line);}
.rv{background:var(--panel);padding:28px;margin:0;}
.rv-top{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:16px;}
.stars{color:var(--signal);font-size:14px;letter-spacing:3px;}
.stars .dim{color:var(--line-2);}
.rv-badge{font-size:9.5px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;
          padding:4px 9px;white-space:nowrap;}
.rv-badge.buyer{background:var(--signal-wash);color:var(--signal);border:1px solid var(--signal-dim);}
/* gifted-copy disclosure must be legible, not hidden fine print */
.rv-badge.early{background:transparent;color:var(--fg-2);border:1px solid var(--line-2);}
.rv blockquote{margin:0 0 18px;font-family:var(--sans);font-size:17px;line-height:1.5;
               color:var(--fg);letter-spacing:-.015em;}
.rv figcaption{font-size:14px;color:var(--fg-2);}
.rv-meta{color:var(--fg-3);font-size:12px;margin-top:6px;}
.rv-all{margin:30px 0 0;font-size:14.5px;}
.rv-empty{background:var(--panel);border:1px solid var(--line);padding:38px 36px;max-width:64ch;}
.rv-empty h3{font-size:20px;margin-bottom:14px;}
.rv-empty p{color:var(--fg-2);margin:0 0 16px;}
.rv-empty ul{padding-left:20px;margin:0 0 18px;}
.rv-empty li{color:var(--fg-2);margin-bottom:8px;}
.rv-empty li strong{color:var(--fg);font-weight:600;}
.rv-empty .btn{margin-top:6px;}
.dim{color:var(--fg-3);}
.rv-filter{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:34px;}
.rv-f{background:transparent;border:1px solid var(--line);color:var(--fg-2);
      font-family:var(--mono);font-size:12px;letter-spacing:.06em;padding:9px 16px;cursor:pointer;}
.rv-f:hover{border-color:var(--signal);color:var(--signal);}
.rv-f.on{background:var(--signal);border-color:var(--signal);color:var(--on-signal);}

/* ---------- category band ---------- */
.catband{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:1px;
         background:var(--line);border:1px solid var(--line);}
.catband a{display:flex;align-items:center;justify-content:space-between;gap:14px;
           background:var(--panel);padding:24px 26px;font-family:var(--sans);font-weight:600;
           font-size:18px;color:var(--fg);letter-spacing:-.025em;transition:background .16s ease;}
.catband a:hover{background:var(--panel-2);color:var(--signal);}
.catband a span{font-size:11px;font-family:var(--mono);color:var(--fg-3);letter-spacing:.12em;
                text-transform:uppercase;}

/* ---------- empty state ---------- */
.empty{background:transparent;border:1px dashed var(--line-2);padding:52px 32px;}
.empty h3{font-size:20px;margin-bottom:12px;}
.empty p{color:var(--fg-2);margin:0;max-width:50ch;}

@media(max-width:760px){ .foot-top{grid-template-columns:1fr 1fr;} }
@media(max-width:460px){ .foot-top{grid-template-columns:1fr;gap:28px;} }

@media(max-width:640px){
  body{font-size:16px;}
  .page-head{padding:46px 0 40px;}
  .prose{padding:42px 0 54px;}
  .home-hero{padding:64px 0 58px;}
  .section{padding:52px 0;}
  .strip3 .wrap > div{border-left:0;border-top:1px solid var(--line);padding:24px 0;}
  .strip3 .wrap > div:first-child{border-top:0;}
  /* header nav hides so the sticky bar stays one slim line; the column
     footer IS the mobile navigation */
  header .nav{display:none;}
}

/* ============================================================
   Cart drawer
   ============================================================ */
.cart-btn{position:relative;display:inline-flex;align-items:center;gap:8px;background:transparent;
          border:1px solid var(--line-2);color:var(--fg);font-family:var(--sans);font-size:13.5px;
          padding:9px 14px;cursor:pointer;line-height:1;transition:border-color .16s ease,color .16s ease;}
.cart-btn:hover{border-color:var(--signal);color:var(--signal);}
.cart-count{position:absolute;top:-8px;right:-8px;min-width:18px;height:18px;
            background:var(--signal);color:var(--on-signal);font-family:var(--mono);font-size:10.5px;
            font-weight:700;display:flex;align-items:center;justify-content:center;padding:0 5px;}
.cart-back{position:fixed;inset:0;background:rgba(5,6,8,.72);opacity:0;pointer-events:none;
           transition:opacity .2s;z-index:150;}
.cart-panel{position:fixed;top:0;right:0;bottom:0;width:min(420px,100%);background:var(--panel);
            border-left:1px solid var(--line);z-index:160;display:flex;flex-direction:column;
            transform:translateX(100%);transition:transform .28s cubic-bezier(.2,.7,.3,1);
            box-shadow:-30px 0 70px rgba(0,0,0,.6);}
.cart-drawer.open .cart-back{opacity:1;pointer-events:auto;}
.cart-drawer.open .cart-panel{transform:translateX(0);}
.cart-head{display:flex;align-items:center;justify-content:space-between;padding:22px;
           border-bottom:1px solid var(--line);}
.cart-head h2{font-family:var(--sans);font-size:19px;font-weight:600;margin:0;letter-spacing:-.03em;}
.cart-x{width:36px;height:36px;border:1px solid var(--line);background:transparent;font-size:16px;
        cursor:pointer;color:var(--fg-2);line-height:1;}
.cart-x:hover{border-color:var(--signal);color:var(--signal);}
#cartBody{flex:1;overflow-y:auto;padding:20px 22px;}
.cart-empty{color:var(--fg-2);margin-bottom:18px;}
.cart-line{display:grid;grid-template-columns:60px 1fr auto;gap:14px;padding:16px 0;
           border-bottom:1px solid var(--line);align-items:start;}
.cart-line img{width:60px;height:60px;object-fit:cover;border:1px solid var(--line);}
.cart-line-t{font-family:var(--sans);font-size:15px;font-weight:600;letter-spacing:-.02em;}
.cart-line-s{font-size:12.5px;color:var(--fg-3);margin-bottom:8px;}
.cart-line-p{font-size:15px;white-space:nowrap;color:var(--fg);}
.cart-qty{display:flex;align-items:center;gap:8px;}
.cart-qty button{width:26px;height:26px;border:1px solid var(--line);background:transparent;
                 cursor:pointer;font-size:14px;line-height:1;color:var(--fg-2);}
.cart-qty button:hover{border-color:var(--signal);color:var(--signal);}
.cart-qty span{min-width:20px;text-align:center;font-size:14px;font-family:var(--mono);}
.cart-qty .cart-rm{width:auto;padding:0 8px;font-size:11px;color:var(--fg-3);border:none;margin-left:4px;}
.cart-qty .cart-rm:hover{background:transparent;color:var(--signal);text-decoration:underline;}
#cartFoot{border-top:1px solid var(--line);padding:20px 22px;background:var(--void);}
.cart-sub{display:flex;justify-content:space-between;align-items:baseline;font-size:17px;
          margin-bottom:6px;color:var(--fg);font-weight:500;}
.cart-note{font-size:12px;color:var(--fg-3);margin-bottom:14px;}
#cartCheckout{width:100%;}
#cartCheckout[disabled]{opacity:.5;cursor:default;}
.cart-err{color:var(--warn);font-size:13.5px;margin-top:10px;}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;}
@media(max-width:640px){.cart-btn span.lbl{display:none;}.cart-btn{padding:9px 11px;}}

.cart-btn svg{display:block;}
.hdr-co{padding:9px 16px;font-size:13.5px;white-space:nowrap;
        background:var(--signal);color:var(--on-signal);border:1px solid var(--signal);}
.hdr-co:hover{background:#63e2d6;border-color:#63e2d6;color:var(--on-signal);}
@keyframes cartBump{0%{transform:scale(1)}35%{transform:scale(1.13)}100%{transform:scale(1)}}
.cart-btn.bump{animation:cartBump .34s ease;border-color:var(--signal);color:var(--signal);}

/* .btn sets display:inline-flex, which out-specifies the UA rule for [hidden]. */
[hidden]{display:none !important;}