/* ==========================================================================
   Shoestring Cannabis
   One stylesheet. No framework, no build step, no webfonts.
   If you are reading this looking for the clever part, there isn't one.
   ========================================================================== */

/* Brand colours sampled from the logo artwork and the July 2026 sell sheet. */
:root{
  --paper:#FFFDF6;
  --ink:#141414;
  --ink-soft:#5A5750;
  --rule:#141414;
  --rule-soft:#D6D1C4;
  --green:#1B3B29;   /* wordmark green */
  --orange:#C07C38;  /* CANNABIS / lace aglets */
  --red:#AE2424;     /* "Shoestring budget." */
  --link:#1B5E3C;    /* green, opened up enough to read as a link */
  --measure:46rem;

  /* chart ramps — validated as ordinal ramps against this surface.
     one hue per category, darkest step = largest line. */
  --cost-1:#19573A; --cost-2:#206F4A; --cost-3:#27865A; --cost-4:#2FA26C; --cost-5:#38C282;
  --tax-1:#223B87;  --tax-2:#2E50B8;
  --prof-1:#956B23; --prof-2:#C28C2E;
}

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

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

body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  font-size:17px;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
}

.wrap{max-width:var(--measure);margin:0 auto;padding:0 1.25rem}

/* ---------- type ---------- */

h1,h2,h3{line-height:1.15;letter-spacing:-0.015em;margin:0 0 .6rem}
h1{font-size:2.1rem;font-weight:800}
h2{font-size:1.25rem;font-weight:700;margin-top:2.5rem}
h3{font-size:1rem;font-weight:700;margin-top:1.75rem}
p{margin:0 0 1rem;max-width:36rem}
a{color:var(--link);text-underline-offset:2px}
a:hover{color:var(--red)}
small{font-size:.8125rem;line-height:1.5;color:var(--ink-soft)}

.lede{font-size:1.125rem;max-width:34rem}
.muted{color:var(--ink-soft)}
.mono{font-family:ui-monospace,"Cascadia Mono",Menlo,Consolas,"Courier New",monospace}

/* ---------- header ---------- */

.site-head{border-bottom:2px solid var(--rule)}
.site-head .wrap{
  display:flex;flex-wrap:wrap;gap:.5rem 1.25rem;
  align-items:baseline;justify-content:space-between;
  padding-top:1rem;padding-bottom:1rem;
}
.logo{display:block;line-height:0}
.logo img{display:block;width:172px;height:auto}
nav{display:flex;flex-wrap:wrap;gap:1.125rem;font-size:.9375rem}
nav a{color:var(--ink);text-decoration:none;border-bottom:1px solid var(--rule-soft);padding-bottom:1px}
nav a:hover,nav a[aria-current="page"]{color:var(--ink);border-bottom-color:var(--orange)}
nav a[aria-current="page"]{font-weight:700}

/* ---------- sections ---------- */

/* must out-specify .wrap, which main also carries and which sets padding shorthand */
main.wrap{padding-top:2.75rem;padding-bottom:1rem}
.hero{padding-bottom:.5rem}
.hero h1{font-size:clamp(2rem,7vw,3.25rem);max-width:16ch;margin-bottom:1rem}

/* the brand's own line, set the way the sell sheet sets it */
.tagline{font-size:clamp(2.1rem,7.5vw,3.5rem);max-width:none;margin-bottom:1.25rem}
.tagline span{display:block}
.tagline .t1{color:var(--green)}
.tagline .t2{color:var(--red)}
.rule{border:0;border-top:2px solid var(--rule);margin:2.5rem 0}
.rule-soft{border:0;border-top:1px solid var(--rule-soft);margin:2rem 0}

/* ---------- the plainest possible button ---------- */

.btn{
  display:inline-block;
  font:inherit;font-weight:700;font-size:.9375rem;
  padding:.625rem 1.125rem;
  border:2px solid var(--ink);
  background:var(--paper);color:var(--ink);
  text-decoration:none;border-radius:0;cursor:pointer;
}
.btn:hover:not(:disabled){background:var(--ink);color:var(--paper)}
.btn:disabled{opacity:.35;cursor:not-allowed}
.btn-row{display:flex;flex-wrap:wrap;gap:.75rem;margin:1.25rem 0}

/* ---------- tables: the actual product display ---------- */

table{border-collapse:collapse;width:100%;margin:1.25rem 0;font-size:.9375rem}
caption{text-align:left;font-weight:700;padding-bottom:.5rem}
th,td{text-align:left;padding:.6rem .75rem .6rem 0;border-bottom:1px solid var(--rule-soft);vertical-align:top}
thead th{
  border-bottom:2px solid var(--rule);
  font-size:.75rem;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-soft);
}
tbody tr:last-child td{border-bottom:2px solid var(--rule)}
td.class{font-weight:700}

/* ---------- the ledger ---------- */

.ledger{
  font-family:ui-monospace,"Cascadia Mono",Menlo,Consolas,"Courier New",monospace;
  font-size:.875rem;line-height:1.9;
  border-top:2px solid var(--rule);border-bottom:2px solid var(--rule);
  padding:1rem 0;margin:1.25rem 0;
  list-style:none;
}
.ledger li{display:flex;gap:.5rem;align-items:baseline}
.ledger .dots{flex:1;border-bottom:1px dotted var(--rule-soft);transform:translateY(-.25em)}
.ledger .val{color:var(--ink-soft);white-space:nowrap}

/* ---------- the creed: what we actually spend on ---------- */

.creed{margin:1.5rem 0 0;max-width:34rem}
.creed dt{
  font-size:clamp(1.25rem,3.4vw,1.75rem);font-weight:800;
  letter-spacing:-0.015em;line-height:1.2;color:var(--green);
}
.creed dd{margin:.25rem 0 1.5rem;color:var(--ink-soft);font-size:.9375rem;max-width:32rem}
.creed .last{color:var(--red)}

/* ---------- packshots: catalogue, not campaign ---------- */

.packshots{
  display:grid;grid-template-columns:repeat(3,1fr);
  gap:1.5rem;margin:1.5rem 0 2rem;align-items:end;
}
.packshots figure{margin:0;text-align:center}
.packshots img{display:block;width:100%;max-width:170px;height:auto;margin:0 auto}
.packshots figcaption{
  margin-top:.625rem;font-size:.75rem;font-weight:700;
  letter-spacing:.1em;text-transform:uppercase;color:var(--ink-soft);
}

@media (prefers-color-scheme:dark){
  /* The tubes are white, shot on white. Inverting them reads as a photo negative
     and cutting them out at this source resolution eats the tube. So on a dark
     page the row simply sits on its own paper plate, like a catalogue swatch. */
  .packshots{background:#FFFDF6;padding:1.5rem 1rem 1.25rem;margin-left:0;margin-right:0}
  .packshots figcaption{color:#5A5750}
}

/* ---------- notes ---------- */

.note{border-left:3px solid var(--rule-soft);padding:.25rem 0 .25rem 1rem;margin:1.5rem 0}
.note p{margin-bottom:.5rem}
.note p:last-child{margin-bottom:0}

/* ---------- footer ---------- */

.site-foot{border-top:2px solid var(--rule);margin-top:3rem;padding:1.5rem 0 3rem}
.site-foot p{font-size:.8125rem;line-height:1.6;color:var(--ink-soft);max-width:44rem}
.site-foot a{color:var(--ink-soft)}
.foot-links{display:flex;flex-wrap:wrap;gap:1rem;font-size:.8125rem;margin-bottom:1rem}

/* ---------- age gate ---------- */

.age-gate{
  position:fixed;inset:0;z-index:999;
  background:var(--paper);
  display:grid;place-items:center;
  padding:1.25rem;overflow-y:auto;
}
.age-gate[hidden]{display:none}          /* must stay: [hidden] alone loses to display:grid */
.age-gate .panel{width:100%;max-width:26rem}
.age-gate .gate-logo{display:block;width:190px;height:auto;margin:0 0 1.75rem}
.age-gate h1{font-size:1.5rem;margin-bottom:.75rem}
.age-gate p{font-size:.9375rem}
.age-gate label{display:block;font-size:.8125rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-soft);margin:1.25rem 0 .375rem}
.age-gate select{
  font:inherit;font-size:1rem;width:100%;
  padding:.625rem .5rem;border:2px solid var(--ink);border-radius:0;
  background:var(--paper);color:var(--ink);
}
.age-gate .btn{width:100%;margin-top:1rem}
#legalAge{display:block;margin-top:.75rem;min-height:1.4em}

/* ---------- small screens ---------- */

@media (max-width:34rem){
  body{font-size:16px}
  .site-head .wrap{flex-direction:column;align-items:flex-start}
  nav{gap:.75rem;font-size:.875rem}
  .logo img{width:152px}
  table{font-size:.875rem}
  .ledger{font-size:.78rem}
}

@media (prefers-color-scheme:dark){
  :root{
    --paper:#141313;--ink:#F2EFE7;--ink-soft:#A29D93;
    --rule:#F2EFE7;--rule-soft:#3B3835;
    --green:#7FC49C;--orange:#E0A05C;--red:#F0817E;--link:#8FD2A8;
    --cost-1:#206F4A; --cost-2:#2F9364; --cost-3:#41B981; --cost-4:#75C7A1; --cost-5:#ABD9C3;
    --tax-1:#294AAE;  --tax-2:#4165D2;
    --prof-1:#A1762B; --prof-2:#C99336;
  }
  /* the wordmark is near-black green; lift it so it reads on the dark paper */
  .logo img,.gate-logo{filter:brightness(1.85) saturate(.9)}
}

/* ---------- where-the-money-goes chart ---------- */

/* pie: one ring, three colour zones, each subdivided by line */
.pie-row{margin:1.25rem 0 .5rem}
svg.pie{display:block;width:min(520px,100%);height:auto;margin:0 auto}
svg.pie path{stroke:var(--paper);stroke-width:2}
svg.pie path:focus{outline:3px solid var(--accent);outline-offset:2px}
svg.pie .plabel{font-size:12px;font-weight:800;fill:var(--ink)}
svg.pie .pvalue{font-size:15px;font-weight:800;fill:var(--ink);font-family:ui-monospace,Menlo,Consolas,monospace}
svg.pie .ptick{stroke:var(--rule-soft);stroke-width:1;fill:none}

.cat{margin:0 0 1.6rem}
.cat-head{display:flex;align-items:baseline;justify-content:space-between;gap:1rem;margin-bottom:.4rem}
.cat-name{font-weight:800;font-size:1rem}
.cat-name .dot{display:inline-block;width:11px;height:11px;border-radius:2px;margin-right:.5rem;transform:translateY(0)}
.cat-tot{font-family:ui-monospace,Menlo,Consolas,monospace;font-weight:800;font-size:1.0625rem;font-variant-numeric:tabular-nums;white-space:nowrap}
.stack{display:flex;height:34px;background:transparent}
.seg{height:100%;position:relative}
.seg+.seg{margin-left:2px}                 /* 2px surface gap between fills */
.seg:first-child{border-radius:3px 0 0 3px}
.seg:last-child{border-radius:0 3px 3px 0}
.seg:focus{outline:3px solid var(--accent);outline-offset:2px;z-index:2}
.axis{display:flex;justify-content:space-between;border-top:1px solid var(--rule-soft);padding-top:.3rem;margin-top:.15rem}
.axis span{font-size:.6875rem;letter-spacing:.06em;color:var(--ink-soft);font-family:ui-monospace,Menlo,Consolas,monospace}

/* ---- legend: every line item, grouped ---- */
.keys{margin:1.5rem 0 0}
.keys > div{margin-bottom:1.75rem}
.keys h3{font-size:.6875rem;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-soft);margin:0 0 .25rem;font-weight:700;border-bottom:2px solid var(--rule);padding-bottom:.35rem}
.keys ul{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(17rem,1fr));gap:0 2rem;align-items:start}
.keys li{display:flex;align-items:baseline;gap:.55rem;padding:.55rem 0;border-bottom:1px solid var(--rule-soft);font-size:.875rem}
.keys li:last-child{border-bottom:0}
.keys .sw{flex:0 0 auto;width:12px;height:12px;border-radius:2px;transform:translateY(1px)}
.keys .nm{flex:1}
.keys .k-nm{display:block;font-weight:700}
.keys .k-note{display:block;font-size:.8125rem;line-height:1.45;color:var(--ink-soft);margin-top:.15rem}
.keys .vl{font-family:ui-monospace,Menlo,Consolas,monospace;font-weight:700;font-variant-numeric:tabular-nums;white-space:nowrap}

table{border-collapse:collapse;width:100%;margin:1rem 0;font-size:.9375rem}
caption{text-align:left;font-weight:700;padding-bottom:.5rem}
th,td{text-align:left;padding:.5rem .75rem .5rem 0;border-bottom:1px solid var(--rule-soft)}
thead th{border-bottom:2px solid var(--rule);font-size:.75rem;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-soft)}
td.n{text-align:right;font-family:ui-monospace,Menlo,Consolas,monospace;font-variant-numeric:tabular-nums}
tfoot td{border-top:2px solid var(--rule);border-bottom:0;font-weight:700}
details{margin:2rem 0 0}
summary{cursor:pointer;font-weight:700;font-size:.9375rem}

.note{border-left:3px solid var(--rule-soft);padding:.25rem 0 .25rem 1rem;margin:2rem 0}
.note p{margin-bottom:.5rem}.note p:last-child{margin-bottom:0}
.foot{border-top:2px solid var(--rule);margin-top:2.5rem;padding-top:1.25rem}
@media (max-width:34rem){ .cat-head{flex-direction:column;gap:.15rem} .stack{height:30px} }

/* skip link — visible only when focused */
.skip{
  position:absolute;left:-9999px;top:0;z-index:1000;
  background:var(--ink);color:var(--paper);
  padding:.625rem 1rem;font-weight:700;font-size:.9375rem;text-decoration:none;
}
.skip:focus{left:0}

.gate-decline{margin:.75rem 0 1.5rem}
.gate-decline a{font-size:.875rem;color:var(--ink-soft)}

:where(a,button,select,[tabindex]):focus-visible{outline:3px solid var(--orange);outline-offset:2px}

/* Do NOT add .age-gate here — hiding the gate on print while printing the
   content underneath is a one-line bypass of the age check. */
@media print{.site-head nav,.skip{display:none}}

/* ---------- money page: hero figure + compact homepage pie ---------- */

.hero-fig{
  font-size:clamp(3.25rem,13vw,5.5rem);font-weight:800;
  letter-spacing:-0.035em;line-height:1;color:var(--tax-2);
}
.hero-cap{max-width:32rem;margin-top:.5rem}

/* homepage: pie beside its takeaway */
.pie-brief{display:flex;flex-wrap:wrap;gap:1rem 2rem;align-items:center;margin:1.25rem 0 .5rem}
.pie-brief .pie-row{flex:1 1 20rem;min-width:16rem;margin:0}
.pie-brief .said{flex:1 1 16rem;min-width:14rem}
.pie-brief .said p{margin-bottom:.75rem}
.pie-brief .big{
  font-size:clamp(2.25rem,6vw,3rem);font-weight:800;letter-spacing:-0.03em;
  line-height:1;color:var(--tax-2);display:block;margin-bottom:.35rem;
}

/* homepage pie legend — names who sits inside each slice */
.pie-keys{list-style:none;margin:0 0 1.25rem;padding:0}
.pie-keys li{display:flex;align-items:baseline;gap:.55rem;padding:.4rem 0;border-bottom:1px solid var(--rule-soft);font-size:.875rem}
.pie-keys li:last-child{border-bottom:0}
.pie-keys .sw{flex:0 0 auto;width:12px;height:12px;border-radius:2px;transform:translateY(1px)}
.pie-keys .nm{flex:1}
.pie-keys .k-nm{display:block;font-weight:700}
.pie-keys .k-note{display:block;font-size:.8125rem;line-height:1.4;color:var(--ink-soft);margin-top:.1rem}
.pie-keys .vl{font-family:ui-monospace,Menlo,Consolas,monospace;font-weight:700;font-variant-numeric:tabular-nums;white-space:nowrap}