:root{
  --paper:#F5F7F5; --surface:#FFFFFF; --ink:#14181C; --ink-2:#2C3531;
  --muted:#5C6660; --rule:#DBE0DA; --rule-2:#EAEEE8;
  --accent:#1F5D53; --accent-2:#164740; --accent-soft:#DCE8E4; --on-accent:#FFFFFF;
  --flag:#8A5A1F; --flag-soft:#F4EADC;
  /* Used where something has gone wrong or money is at stake. */
  --bad:#8A2B1F;
  --shadow:0 1px 2px rgba(20,24,28,.04), 0 8px 24px -18px rgba(20,24,28,.28);
  --measure:66ch;
  --f-display:"Newsreader",Georgia,"Times New Roman",serif;
  --f-body:"Public Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
  --f-mono:"IBM Plex Mono",ui-monospace,"SF Mono",Menlo,monospace;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --paper:#0F1413; --surface:#161C1A; --ink:#E7ECE8; --ink-2:#C6D0CA;
    --muted:#94A099; --rule:#252E2B; --rule-2:#1D2523;
    --accent:#6FBFAE; --accent-2:#8FD3C4; --accent-soft:#1C2B27; --on-accent:#0F1413;
    --flag:#D7A45F; --flag-soft:#241C10; --bad:#E08B7C;
    --shadow:0 1px 2px rgba(0,0,0,.5), 0 8px 24px -18px rgba(0,0,0,.9);
  }
}
:root[data-theme="dark"]{
  --paper:#0F1413; --surface:#161C1A; --ink:#E7ECE8; --ink-2:#C6D0CA;
  --muted:#94A099; --rule:#252E2B; --rule-2:#1D2523;
  --accent:#6FBFAE; --accent-2:#8FD3C4; --accent-soft:#1C2B27; --on-accent:#0F1413;
  --flag:#D7A45F; --flag-soft:#241C10; --bad:#E08B7C;
  --shadow:0 1px 2px rgba(0,0,0,.5), 0 8px 24px -18px rgba(0,0,0,.9);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--f-body);
  font-size:16px;line-height:1.6;-webkit-font-smoothing:antialiased}
a{color:inherit}
img{max-width:100%}
h1,h2,h3{font-family:var(--f-display);font-weight:500;text-wrap:balance;margin:0;
  line-height:1.14;letter-spacing:-.012em}
h1{font-size:clamp(1.75rem,4vw,2.6rem)}
h1.hub{font-size:clamp(1.8rem,4.2vw,2.8rem);max-width:22ch}
h2,.h2{font-family:var(--f-display);font-weight:500;font-size:clamp(1.4rem,3vw,1.9rem);
  margin:0;line-height:1.16;letter-spacing:-.012em}
p{margin:0}
button{font:inherit;color:inherit}
.sr,.skip{position:absolute;left:-9999px}
.skip:focus{left:12px;top:12px;z-index:99;background:var(--accent);color:var(--on-accent);
  padding:.5rem .9rem;border-radius:2px}

.shell{max-width:1120px;margin:0 auto;padding-inline:20px}
.band{padding-block:clamp(38px,5.5vw,72px)}
.band + .band{border-top:1px solid var(--rule-2)}
/* a band that continues the one above it: no rule, no doubled air */
.band + .band.joined{border-top:0;padding-top:0;margin-top:calc(-1 * clamp(14px,2vw,26px))}

.scale{height:13px;position:relative;border-bottom:1px solid var(--rule);
  background-image:repeating-linear-gradient(90deg,var(--rule) 0 1px,transparent 1px 11px);
  background-position:bottom left;background-repeat:repeat-x;background-size:auto 7px}
.scale::after{content:"";position:absolute;left:0;bottom:0;height:13px;width:44px;
  background-image:repeating-linear-gradient(90deg,var(--accent) 0 1px,transparent 1px 11px)}

.eyebrow{font-family:var(--f-mono);font-size:.7rem;font-weight:500;letter-spacing:.15em;
  text-transform:uppercase;color:var(--muted);display:flex;align-items:center;gap:.65rem;margin-bottom:1rem}
.eyebrow::before{content:"";width:20px;height:1px;background:var(--accent);flex:none}

.lede{font-size:1.02rem;color:var(--ink-2);max-width:var(--measure)}
.small{font-size:.88rem;color:var(--muted)}

.crumb{font-family:var(--f-mono);font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;
  color:var(--muted);margin-bottom:1.1rem;display:flex;flex-wrap:wrap;align-items:center;gap:.5rem}
.crumb a{text-decoration:none}.crumb a:hover{color:var(--accent)}
.crumb i{font-style:normal;opacity:.5}

/* header */
header.site{position:sticky;top:0;z-index:40;background:var(--surface);border-bottom:1px solid var(--rule)}
.hrow{display:flex;align-items:center;gap:16px;min-height:62px}
.brand{display:flex;align-items:baseline;gap:.5rem;text-decoration:none;flex:none}
.brand .mark{font-family:var(--f-mono);font-size:.78rem;color:var(--accent);letter-spacing:.06em}
.brand .word{font-family:var(--f-display);font-size:1.32rem;letter-spacing:-.02em}
.hspacer{flex:1}
.navlink{font-size:.9rem;text-decoration:none;color:var(--ink-2);padding:.35rem 0;
  border-bottom:2px solid transparent;white-space:nowrap}
.navlink:hover{color:var(--accent)}
.navlink[aria-current="page"]{color:var(--ink);border-bottom-color:var(--accent)}
.tier1{display:flex;gap:20px;align-items:center;flex-wrap:wrap}
.tier2{display:flex;gap:18px;align-items:center;flex-wrap:wrap;padding-bottom:9px}
.tier2 .navlink{font-size:.82rem;color:var(--muted)}
.tier2 .navlink:hover{color:var(--accent)}
.hdesk{display:none}
.iconlink{text-decoration:none;font-size:1.15rem;color:var(--muted);padding:0 .2rem}
.iconlink:hover{color:var(--accent)}
@media (min-width:1040px){.hdesk{display:block}a.iconlink.hdesk{display:inline-block}.hburger{display:none}}

.cta{display:inline-flex;align-items:center;gap:.5rem;text-decoration:none;
  background:var(--accent);color:var(--on-accent);border:1px solid var(--accent);
  padding:.6rem 1.05rem;font-size:.9rem;font-weight:500;border-radius:2px;cursor:pointer}
.cta:hover{background:var(--accent-2);border-color:var(--accent-2)}
.cta.ghost{background:transparent;color:var(--accent);border-color:var(--rule)}
.cta.ghost:hover{background:var(--accent-soft);border-color:var(--accent);color:var(--accent)}
.cta.sm{padding:.45rem .8rem;font-size:.82rem}
.cta:disabled{cursor:not-allowed;background:transparent;color:var(--muted);
  border-color:var(--rule);border-style:dashed}
.cta.ghost:disabled{background:transparent;color:var(--muted);border-style:dashed}
.ctarow{display:flex;flex-wrap:wrap;gap:12px;margin-top:1.7rem;align-items:center}

.hburger{border:1px solid var(--rule);background:transparent;border-radius:2px;
  padding:.45rem .7rem;font-size:.85rem;cursor:pointer}
#mobnav{display:none;border-top:1px solid var(--rule-2);padding-block:14px 18px}
#mobnav.open{display:block}
#mobnav .grp{display:flex;flex-direction:column;gap:2px;padding-block:8px}
#mobnav .grp + .grp{border-top:1px solid var(--rule-2)}
#mobnav .navlink{padding:.4rem 0}

/* hero */
.hero h1{font-size:clamp(2.05rem,5.2vw,3.35rem);max-width:19ch}
.hero .lede{margin-top:1.15rem;font-size:1.07rem}

/* stakeholder rows */
.stakes{display:grid;gap:0;margin-top:1.4rem;border-top:1px solid var(--rule)}
.stake{display:grid;grid-template-columns:minmax(0,1fr);gap:.35rem;padding-block:1.15rem;
  border-bottom:1px solid var(--rule-2);text-decoration:none}
.stake:hover{background:var(--surface)}
.stake .who{font-family:var(--f-mono);font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--accent)}
.stake .said{font-family:var(--f-display);font-size:1.16rem;line-height:1.3;max-width:58ch}
.stake .go{font-size:.83rem;color:var(--muted)}
@media (min-width:760px){.stake{grid-template-columns:190px minmax(0,1fr) auto;align-items:baseline;gap:24px}
  .stake .go{text-align:right}}

/* sequence */
.seq{display:grid;gap:0;margin-top:1.5rem;border-top:1px solid var(--rule)}
.step{display:grid;grid-template-columns:auto minmax(0,1fr);gap:16px;align-items:baseline;
  padding-block:.7rem;border-bottom:1px solid var(--rule-2)}
.step .n{font-family:var(--f-mono);font-size:.78rem;color:var(--muted);font-variant-numeric:tabular-nums}
.step .w{font-family:var(--f-display);font-size:1.06rem}
@media (min-width:820px){.seq{grid-auto-flow:column;grid-auto-columns:1fr}
  .step{border-bottom:none;border-right:1px solid var(--rule-2);padding:.9rem 1rem .9rem 0;
    grid-template-columns:minmax(0,1fr);gap:.3rem}
  .step:last-child{border-right:none}}

.feature{background:var(--surface);border:1px solid var(--rule);border-radius:3px;
  padding:clamp(22px,3.4vw,34px);box-shadow:var(--shadow)}
.feature h2{max-width:20ch}

/* child index */
.kids{display:grid;gap:0;border-top:1px solid var(--rule);margin-top:1.5rem}
.kid{display:block;text-decoration:none;padding-block:1rem;border-bottom:1px solid var(--rule-2)}
.kid:hover{background:var(--surface)}
.kid .t{display:block;font-size:.8rem;font-family:var(--f-mono);letter-spacing:.1em;
  text-transform:uppercase;color:var(--accent)}
.kid .h{display:block;font-family:var(--f-display);font-size:1.08rem;line-height:1.32;
  margin-top:.25rem;max-width:62ch}

/* article */
.article{max-width:var(--measure)}
.article.narrow{max-width:44ch}
.prop{font-size:1.06rem;color:var(--ink-2);margin-top:1.1rem}
.plist{margin:1.4rem 0 0;padding:0;list-style:none;display:grid;gap:0;border-top:1px solid var(--rule)}
.plist li{padding-block:.6rem;border-bottom:1px solid var(--rule-2);font-family:var(--f-display);font-size:1.05rem}
.slot{border:1px dashed var(--rule);border-radius:3px;padding:18px 20px;margin-top:1.6rem;background:var(--surface)}
.slot .h{font-family:var(--f-mono);font-size:.72rem;letter-spacing:.13em;text-transform:uppercase;color:var(--muted)}

/* FAQ */
.qlist{margin-top:1.6rem;border-top:1px solid var(--rule)}
.q{padding-block:.95rem;border-bottom:1px solid var(--rule-2)}
.qq{font-family:var(--f-display);font-size:1.06rem}
.qa{font-size:.9rem;color:var(--muted);margin-top:.25rem}

/* directory */
.explorer{display:grid;gap:26px}
@media (min-width:880px){.explorer{grid-template-columns:240px minmax(0,1fr);gap:40px;align-items:start}
  .explorer.nofacet{grid-template-columns:minmax(0,1fr)}}
.facets{border-top:1px solid var(--rule)}
.facet{border-bottom:1px solid var(--rule-2);padding-block:.85rem}
.facet .fh{font-family:var(--f-mono);font-size:.7rem;letter-spacing:.13em;text-transform:uppercase;
  color:var(--muted);margin-bottom:.5rem}
.chips{display:flex;flex-wrap:wrap;gap:6px}
.chip{font-size:.78rem;border:1px solid var(--rule);border-radius:2px;padding:.22rem .5rem;
  color:var(--muted);background:transparent}
.resulthead{display:flex;align-items:baseline;justify-content:space-between;gap:16px;
  border-bottom:1px solid var(--rule);padding-bottom:.7rem;flex-wrap:wrap}
.count{font-family:var(--f-mono);font-size:.9rem;font-variant-numeric:tabular-nums;color:var(--ink)}
.count b{font-size:1.5rem;font-weight:500;color:var(--accent)}
.empty{padding:40px 0 8px;max-width:54ch}
.empty h3{font-size:1.28rem}

/* forms */
.form{margin-top:1.7rem}
.fgrid2{display:grid;gap:16px}
@media (min-width:640px){.fgrid2{grid-template-columns:1fr 1fr}.field.wide{grid-column:1/-1}}
.field{display:flex;flex-direction:column;gap:.35rem}
.field label{font-family:var(--f-mono);font-size:.7rem;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.field input,.field textarea{font:inherit;font-size:.95rem;color:var(--ink);background:var(--surface);
  border:1px solid var(--rule);border-radius:2px;padding:.6rem .7rem;width:100%}
.field input:disabled,.field textarea:disabled{opacity:.6}

/* ═══════════════════════════════════════════════════════════════════
   The basket, the checkout and the order
   Everything here is a plain form. The only script on any of these
   pages is Razorpay's own, on the payment page, so that card details
   are typed into Razorpay's window and never into this site.
   ═══════════════════════════════════════════════════════════════════ */
fieldset{border:0;border-top:1px solid var(--rule);margin:0 0 26px;padding:20px 0 0}
legend{font-family:var(--f-mono);font-size:.7rem;letter-spacing:.13em;text-transform:uppercase;
  color:var(--muted);padding:0 .6rem 0 0}
.f{display:block;margin-bottom:16px;font-family:var(--f-mono);font-size:.7rem;letter-spacing:.12em;
  text-transform:uppercase;color:var(--muted)}
.f > input,.f > textarea,.f > select{display:block;width:100%;margin-top:.4rem;font:inherit;
  font-size:.95rem;letter-spacing:normal;text-transform:none;color:var(--ink);
  background:var(--surface);border:1px solid var(--rule);border-radius:2px;padding:.6rem .7rem}
.f > input:focus,.f > textarea:focus,.f > select:focus{outline:2px solid var(--accent);outline-offset:1px}
.f .hint{display:block;font-family:var(--f-body);font-size:.82rem;letter-spacing:normal;
  text-transform:none;color:var(--muted);margin-top:.35rem;line-height:1.55}
.f em{display:block;font-family:var(--f-body);font-style:normal;font-size:.85rem;
  letter-spacing:normal;text-transform:none;color:var(--bad);margin-top:.35rem;line-height:1.5}
.f.bad > input,.f.bad > textarea,.f.bad > select{border-color:var(--bad)}
.f .opt{opacity:.75}
.fielderr{display:block;font-style:normal;color:var(--bad);font-size:.86rem;margin-top:.4rem}
.grid2,.grid3{display:grid;gap:0 18px}
@media (min-width:700px){.grid2{grid-template-columns:1fr 1fr}}
@media (min-width:820px){.grid3{grid-template-columns:1fr 1fr 1fr}}
.ck{display:flex;gap:.6rem;align-items:flex-start;font-size:.94rem;line-height:1.55;
  color:var(--ink-2);cursor:pointer}
.ck input{margin:.2rem 0 0;accent-color:var(--accent);width:17px;height:17px;flex:none}
.ck.big{font-size:.96rem}
.ck.bad{color:var(--bad)}

/* A table of seven columns does not fit a phone, and squeezing it makes
   it unreadable. It scrolls sideways inside its own box instead, so the
   page itself never does. The same rule exists in the panel; this one is
   for the pages a buyer sees. */
.tscroll{overflow-x:auto;-webkit-overflow-scrolling:touch}

/* the basket table */
.carttable{width:100%;border-collapse:collapse;font-size:.94rem;min-width:640px}
.carttable th{text-align:left;font-family:var(--f-mono);font-size:.66rem;letter-spacing:.12em;
  text-transform:uppercase;color:var(--muted);font-weight:500;padding:0 12px 8px 0;
  border-bottom:1px solid var(--rule)}
.carttable td{padding:14px 12px 14px 0;border-bottom:1px solid var(--rule-2);vertical-align:top}
.carttable td.r,.carttable th.r{text-align:right}
.carttable td a{text-decoration:none;color:var(--ink)}
.carttable td a:hover{color:var(--accent)}
.carttable .sub{display:block;font-size:.8rem;color:var(--muted);margin-top:.15rem}
.qtybox{width:4.2rem;font:inherit;font-size:.92rem;text-align:right;color:var(--ink);
  background:var(--surface);border:1px solid var(--rule);border-radius:2px;padding:.35rem .45rem}
.cartacts{display:flex;flex-wrap:wrap;gap:12px;align-items:center;margin:14px 0 0}
.linkbtn{font:inherit;font-size:.86rem;background:none;border:0;padding:0;color:var(--muted);
  cursor:pointer;text-decoration:underline}
.linkbtn:hover{color:var(--bad)}
.inlineform{display:inline}

.totals{margin-top:26px;max-width:26rem;margin-left:auto}
.trow{display:flex;justify-content:space-between;gap:2rem;padding:.5rem 0;
  border-bottom:1px solid var(--rule-2);font-size:.94rem}
.trow b{font-variant-numeric:tabular-nums;font-weight:500}
.trow.open b{color:var(--flag)}
.trow.grand{border-bottom:0;border-top:1px solid var(--rule);margin-top:.3rem;padding-top:.7rem;
  font-size:1.05rem}
.trow.grand b{font-weight:600}
.totals .sub{display:block;margin-top:.7rem;font-size:.84rem;color:var(--muted);line-height:1.6}
.cartgo{margin-top:28px;display:flex;align-items:center;gap:18px;flex-wrap:wrap}

/* add to basket, on the product page */
.addform{display:flex;align-items:flex-end;gap:12px;flex-wrap:wrap}
.qty{display:flex;flex-direction:column;gap:.3rem;font-family:var(--f-mono);font-size:.66rem;
  letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.qty input{width:4.4rem;font:inherit;font-size:.95rem;text-align:right;color:var(--ink);
  background:var(--surface);border:1px solid var(--rule);border-radius:2px;padding:.55rem .5rem}

/* the checkout, and the summary beside it */
.checkgrid{display:grid;gap:32px}
@media (min-width:900px){.checkgrid{grid-template-columns:minmax(0,1fr) 21rem;align-items:start}}
.ordersum{background:var(--surface);border:1px solid var(--rule);border-radius:3px;padding:22px;
  position:sticky;top:16px}
.ordersum h2{font-family:var(--f-display);font-size:1.05rem;margin:0 0 .9rem;font-weight:500}
.ordersum .sub{font-size:.82rem;color:var(--muted);line-height:1.6;margin:.7rem 0 0}
.ordersum .totals{margin:14px 0 0;max-width:none}
.sline{display:flex;justify-content:space-between;gap:1rem;padding:.55rem 0;
  border-bottom:1px solid var(--rule-2);font-size:.9rem}
.sline .sub{display:block;font-size:.78rem;color:var(--muted);margin:.1rem 0 0}
.sline b{font-variant-numeric:tabular-nums;font-weight:500;white-space:nowrap}

.blocklist{list-style:none;margin:.6rem 0 .8rem;padding:0}
.blocklist li{padding:.5rem 0;border-top:1px solid var(--rule-2);font-size:.9rem;line-height:1.55}
.blocklist li b{display:inline;color:var(--ink)}
.blocklist li span{display:block;color:var(--muted);font-size:.86rem;margin-top:.2rem}
.cgtag{display:inline-block;font-family:var(--f-mono);font-size:.64rem;letter-spacing:.1em;
  color:var(--flag);border:1px solid var(--flag);border-radius:2px;padding:.02rem .3rem;
  margin-left:.35rem;vertical-align:.08em}
.plainlist{margin:.5rem 0 .5rem 1.1rem;padding:0;font-size:.9rem;line-height:1.7}

.notyet.bad{background:color-mix(in srgb,var(--bad) 8%,transparent);border-left-color:var(--bad)}
.notyet.bad b{color:var(--bad)}
.notyet.ok{background:var(--accent-soft);border-left-color:var(--accent)}
.notyet.ok b{color:var(--accent)}
.notyet p{margin:.45rem 0 0;font-size:.92rem;line-height:1.6;color:var(--ink-2)}

.flashline{padding:.7rem .9rem;border-radius:2px;margin:1rem 0 0;font-size:.92rem;line-height:1.55}
.flashline.ok{background:var(--accent-soft);border-left:3px solid var(--accent);color:var(--accent)}
.flashline.bad{background:color-mix(in srgb,var(--bad) 10%,transparent);
  border-left:3px solid var(--bad);color:var(--bad)}

.payrow{display:flex;flex-wrap:wrap;align-items:center;gap:16px;margin:1.6rem 0}
.addrblock{font-size:.94rem;line-height:1.8;color:var(--ink-2)}

/* ═══════════════════════════════════════════════════════════════════
   The buyer's own account
   A qualification is somebody's professional standing. The pages that
   handle one are written plainly and set narrow, because they are read
   carefully rather than skimmed.
   ═══════════════════════════════════════════════════════════════════ */
.narrowform{max-width:32rem}
.narrowform .lede{margin-bottom:1.4rem}
.narrowform .sub{font-size:.86rem;color:var(--muted);line-height:1.6;margin-top:.9rem}
.signedout{font-size:.88rem;color:var(--muted);background:var(--surface);
  border:1px solid var(--rule);border-radius:2px;padding:.6rem .8rem;margin:0 0 20px}
.fnote2{font-size:.86rem;color:var(--muted);line-height:1.6;margin:-.3rem 0 1.1rem}
.consentbox{border-left:3px solid var(--flag);background:var(--flag-soft);padding:12px 14px;
  border-radius:0 2px 2px 0;margin:0 0 20px}
.consentbox.bad{border-left-color:var(--bad);background:color-mix(in srgb,var(--bad) 8%,transparent)}

/* a dot on the account icon, so a shared screen does not announce a name */
.iconlink.signedin{position:relative}
.iconlink.signedin::after{content:"";position:absolute;top:2px;right:2px;width:6px;height:6px;
  border-radius:50%;background:var(--accent)}

.acctiles{display:grid;gap:0;border-top:1px solid var(--rule)}
@media (min-width:780px){.acctiles{grid-template-columns:repeat(3,1fr);column-gap:26px}}
.acctile{display:block;text-decoration:none;color:inherit;padding:18px 0;
  border-bottom:1px solid var(--rule-2)}
.acctile:hover .at-v{color:var(--accent)}
.at-k{font-family:var(--f-mono);font-size:.66rem;letter-spacing:.13em;text-transform:uppercase;
  color:var(--muted)}
.at-v{font-family:var(--f-display);font-size:1.3rem;font-weight:500;margin:.3rem 0 .35rem;
  letter-spacing:-.01em}
.at-n{font-size:.86rem;color:var(--muted);line-height:1.6}

.quallist{border-top:1px solid var(--rule)}
.qrow{padding:16px 0;border-bottom:1px solid var(--rule-2)}
.qhead{display:flex;flex-wrap:wrap;align-items:baseline;gap:.7rem;margin-bottom:.35rem}
.qhead b{font-size:1rem}
.qstate{font-family:var(--f-mono);font-size:.66rem;letter-spacing:.11em;text-transform:uppercase;
  border:1px solid var(--rule);border-radius:2px;padding:.1rem .4rem;color:var(--muted)}
.qrow.verified .qstate{color:var(--accent);border-color:var(--accent)}
.qrow.refused .qstate{color:var(--bad);border-color:var(--bad)}
.qrow.submitted .qstate{color:var(--flag);border-color:var(--flag)}
.qrow .sub{font-size:.86rem;color:var(--muted);line-height:1.7}
.qnote{margin-top:.7rem;padding:.7rem .9rem;border-left:3px solid var(--bad);
  background:color-mix(in srgb,var(--bad) 7%,transparent);font-size:.9rem;line-height:1.6}
.qnote b{display:block;color:var(--bad);margin-bottom:.2rem}

.ck.tierpick{align-items:flex-start;padding:.7rem 0;border-bottom:1px solid var(--rule-2)}
.ck.tierpick b{display:block;margin-bottom:.15rem}
.ck.tierpick span{font-size:.9rem;line-height:1.6;color:var(--muted)}
.ck.tierpick b{color:var(--ink)}

/* the reports, each with the date it goes */
.replist{border-top:1px solid var(--rule)}
.reprow{display:grid;gap:.4rem 1.4rem;padding:18px 0;border-bottom:1px solid var(--rule-2)}
@media (min-width:760px){
  .reprow{grid-template-columns:minmax(0,1fr) 12rem auto;align-items:start}
  .reprow .repnote{grid-column:1/-1}
}
.repmain b{display:block;font-size:1.02rem}
.repmain .sub,.repwhen .sub{display:block;font-size:.82rem;color:var(--muted);margin-top:.15rem}
.repwhen b{font-size:1.02rem;font-variant-numeric:tabular-nums}
.reprow.soon .repwhen b{color:var(--flag)}
.reprow.gone{opacity:.72}
.reprow.gone .repwhen b{color:var(--muted);font-weight:500}
.repgo{display:flex;align-items:flex-start}
.repgo .sub{font-size:.82rem;color:var(--muted);line-height:1.55;max-width:24ch}
.repnote{font-size:.86rem;line-height:1.6;color:var(--ink-2);background:var(--surface);
  border:1px solid var(--rule);border-radius:2px;padding:.55rem .75rem;margin-top:.3rem}
.repnote.warn{border-color:var(--flag);background:var(--flag-soft);color:var(--flag)}

/* search */
.searchform{margin-top:1.6rem}
.searchform input{font:inherit;font-size:1.02rem;width:100%;background:var(--surface);
  color:var(--ink);border:1px solid var(--rule);border-radius:2px;padding:.7rem .85rem}
.results{margin-top:1.4rem}
.results .kid{border-bottom:1px solid var(--rule-2)}
.results .none{color:var(--muted);font-size:.92rem;padding-block:1rem}

/* ═══════════════════════════════════════════════════════════════════
   Homepage — design 1A, "Six doors"
   Six hairline rows, not six cards. A card asks to be looked at; a
   ruled row asks to be read down. The number is set in the mono face
   so the six read as a list of doors rather than as decoration.
   ═══════════════════════════════════════════════════════════════════ */
.huge{font-size:clamp(2.1rem,5.6vw,3.5rem);max-width:16ch;letter-spacing:-.018em}
.small-lede{font-size:.98rem;max-width:58ch;margin-top:.9rem}

.doors{border-top:1px solid var(--rule)}
@media (min-width:820px){
  .doors{display:grid;grid-template-columns:1fr 1fr;column-gap:0}
  .door:nth-child(odd){border-right:1px solid var(--rule-2);padding-right:26px}
  .door:nth-child(even){padding-left:26px}
}
.door{display:grid;grid-template-columns:auto 1fr;column-gap:16px;row-gap:.3rem;
  align-items:baseline;text-decoration:none;color:inherit;
  padding-block:19px;border-bottom:1px solid var(--rule);
  transition:border-color .16s ease,background-color .16s ease}
.door .dn{grid-row:1 / span 2;font-family:var(--f-mono);font-size:.76rem;font-weight:500;
  letter-spacing:.06em;color:var(--muted);padding-top:.32rem;transition:color .16s ease}
.door .dt{font-family:var(--f-display);font-size:1.32rem;font-weight:500;line-height:1.15;
  letter-spacing:-.012em;position:relative}
.door .dt::after{content:"→";font-family:var(--f-body);font-size:.9rem;margin-left:.5rem;
  color:var(--accent);opacity:0;transform:translateX(-4px);
  transition:opacity .16s ease,transform .16s ease;display:inline-block}
.door .dl{font-size:.93rem;line-height:1.55;color:var(--muted);max-width:44ch}
.door:hover,.door:focus-visible{border-bottom-color:var(--accent);background:var(--rule-2)}
.door:hover .dn,.door:focus-visible .dn{color:var(--accent)}
.door:hover .dt::after,.door:focus-visible .dt::after{opacity:1;transform:translateX(0)}
.door:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}

/* the shortcut row under the doors */
.chiprow{display:flex;flex-wrap:wrap;gap:8px;margin-top:.2rem}
.chiprow .chip{font-size:.86rem;padding:.42rem .78rem;text-decoration:none;color:var(--ink-2);
  border-radius:2px;transition:border-color .16s ease,color .16s ease}
.chiprow .chip:hover{border-color:var(--accent);color:var(--accent)}
.chiprow .chip.on{border-color:var(--accent);color:var(--accent);background:var(--accent-soft)}

/* three short reasons, ruled rather than boxed */
.three{display:grid;gap:0;margin-top:1.6rem;border-top:1px solid var(--rule)}
@media (min-width:760px){.three{grid-template-columns:repeat(3,1fr);column-gap:32px}}
.three > div{padding-block:18px;border-bottom:1px solid var(--rule-2)}
.three h3{font-family:var(--f-display);font-size:1.06rem;font-weight:500;margin:0 0 .35rem;
  letter-spacing:-.008em}
.three p{font-size:.92rem;color:var(--muted);line-height:1.55}

/* ═══════════════════════════════════════════════════════════════════
   Audience pages — design 6A, "The argument"
   Four numbered bands: problem, programme, evidence, ask. The numbers
   are shown because the order IS the argument, and a reader who can see
   the shape of it can also see where it would be weak.
   ═══════════════════════════════════════════════════════════════════ */
.crumbs{padding-block:14px 0}
.crumbs ol{list-style:none;display:flex;flex-wrap:wrap;gap:.4rem;margin:0;padding:0;
  font-family:var(--f-mono);font-size:.72rem;letter-spacing:.06em;color:var(--muted)}
.crumbs li + li::before{content:"/";margin-right:.4rem;opacity:.55}
.crumbs a{text-decoration:none;color:var(--muted)}
.crumbs a:hover{color:var(--accent)}
.crumbs [aria-current]{color:var(--ink-2)}

.argstep{display:flex;align-items:baseline;gap:.7rem;margin-bottom:1.1rem}
.argn{font-family:var(--f-mono);font-size:.72rem;font-weight:500;letter-spacing:.06em;
  color:var(--on-accent);background:var(--accent);padding:.16rem .42rem;border-radius:2px}
.argl{font-family:var(--f-mono);font-size:.7rem;font-weight:500;letter-spacing:.15em;
  text-transform:uppercase;color:var(--muted)}
.arg h1{max-width:26ch}
.argbody{margin-top:1.15rem;max-width:var(--measure);color:var(--ink-2)}

.valuelist{list-style:none;margin:1.1rem 0 0;padding:0;border-top:1px solid var(--rule)}
.valuelist li{padding-block:13px;border-bottom:1px solid var(--rule-2);
  padding-left:1.4rem;position:relative;max-width:var(--measure);color:var(--ink-2)}
.valuelist li::before{content:"";position:absolute;left:0;top:1.42em;width:9px;height:1px;
  background:var(--accent)}

.kidhead{font-family:var(--f-mono);font-size:.7rem;font-weight:500;letter-spacing:.15em;
  text-transform:uppercase;color:var(--muted);margin:2.1rem 0 .2rem}
.kids{border-top:1px solid var(--rule)}
@media (min-width:820px){
  .kids{display:grid;grid-template-columns:1fr 1fr}
  .kid:nth-child(odd){border-right:1px solid var(--rule-2);padding-right:26px}
  .kid:nth-child(even){padding-left:26px}
}
.kid{display:grid;grid-template-columns:auto 1fr;column-gap:15px;row-gap:.28rem;
  align-items:baseline;text-decoration:none;color:inherit;padding-block:17px;
  border-bottom:1px solid var(--rule);transition:border-color .16s ease,background-color .16s ease}
.kid .kn{grid-row:1 / span 2;font-family:var(--f-mono);font-size:.73rem;color:var(--muted);
  padding-top:.3rem;transition:color .16s ease}
.kid .kt{font-family:var(--f-display);font-size:1.14rem;font-weight:500;line-height:1.2;
  letter-spacing:-.008em}
.kid .kl{font-size:.9rem;line-height:1.5;color:var(--muted);max-width:46ch}
.kid:hover,.kid:focus-visible{border-bottom-color:var(--accent);background:var(--rule-2)}
.kid:hover .kn,.kid:focus-visible .kn{color:var(--accent)}
.kid:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}

/* the evidence band — three strands, one of which is honestly empty */
.strands{display:grid;gap:0;margin-top:1.5rem;border-top:1px solid var(--rule)}
@media (min-width:880px){.strands{grid-template-columns:repeat(3,1fr);column-gap:30px}}
.strands > .strand{padding-block:19px;border-bottom:1px solid var(--rule-2)}
.strand h3{font-family:var(--f-display);font-size:1.08rem;font-weight:500;margin:0 0 .45rem;
  letter-spacing:-.008em;line-height:1.22}
.strand p{font-size:.91rem;line-height:1.55;color:var(--muted)}
.strandlink{display:inline-block;margin-top:.7rem;font-size:.88rem;color:var(--accent);
  text-decoration:none;border-bottom:1px solid transparent;transition:border-color .16s ease}
.strandlink:hover{border-bottom-color:var(--accent)}
/* a strand with nothing in it yet is marked, not hidden */
.strand.isgap h3{color:var(--flag)}
.strand.isgap h3::after{content:"not yet";font-family:var(--f-mono);font-size:.62rem;
  letter-spacing:.12em;text-transform:uppercase;color:var(--flag);background:var(--flag-soft);
  padding:.14rem .38rem;border-radius:2px;margin-left:.5rem;vertical-align:.18em;white-space:nowrap}

.askrow{display:grid;gap:22px;align-items:start}
@media (min-width:820px){.askrow{grid-template-columns:1fr auto;column-gap:40px}}
.askrow .ctarow{margin-top:0}
@media (min-width:820px){.askrow .ctarow{flex-direction:column;align-items:stretch;min-width:210px}}

.siblings{display:flex;flex-wrap:wrap;gap:8px;margin-top:.7rem}
.sib{font-size:.86rem;padding:.4rem .75rem;text-decoration:none;color:var(--ink-2);
  border:1px solid var(--rule);border-radius:2px;
  transition:border-color .16s ease,color .16s ease}
.sib:hover{border-color:var(--accent);color:var(--accent)}

/* a page that admits, above the fold, that its form does not work */
.notyet{margin-top:1.8rem;background:var(--flag-soft);border-left:3px solid var(--flag);
  padding:14px 16px;border-radius:0 2px 2px 0;font-size:.93rem;line-height:1.6;color:var(--ink-2);
  max-width:var(--measure)}
.notyet b{display:block;color:var(--flag);margin-bottom:.25rem}

/* ═══════════════════════════════════════════════════════════════════
   Team — design 7B, "Find the right person"
   A filter rail that is a real GET form, then rows of people. Rows, not
   cards: a card invites you to look at a face, a row invites you to read
   a credential, and the credential is the point.
   ═══════════════════════════════════════════════════════════════════ */
.rail{margin-bottom:1.5rem;padding:16px 18px;background:var(--surface);
  border:1px solid var(--rule);border-radius:3px}
.railrow{display:grid;gap:14px}
@media (min-width:760px){.railrow{grid-template-columns:1.3fr 1fr 1fr auto;align-items:end}}
.rail select{font:inherit;font-size:.95rem;color:var(--ink);background:var(--paper);
  border:1px solid var(--rule);border-radius:2px;padding:.6rem .7rem;width:100%}
.railgo .cta{width:100%;justify-content:center}

.resulthead{display:flex;flex-wrap:wrap;gap:.8rem;align-items:baseline;justify-content:space-between;
  padding-bottom:.7rem;border-bottom:1px solid var(--rule)}
.resulthead .count{font-family:var(--f-mono);font-size:.8rem;letter-spacing:.06em;color:var(--muted)}
.resulthead .count b{font-family:var(--f-display);font-size:1.4rem;font-weight:500;color:var(--ink)}
.resulthead .small{font-size:.84rem;color:var(--muted)}

.people{margin-top:0}
.person{display:grid;gap:16px;padding-block:22px;border-bottom:1px solid var(--rule);
  grid-template-columns:auto 1fr}
@media (min-width:900px){.person{grid-template-columns:auto 1fr auto;column-gap:26px;align-items:start}}
.pphoto{width:76px;height:76px;border-radius:2px;object-fit:cover;background:var(--rule-2);
  border:1px solid var(--rule)}
.pphoto.lg{width:132px;height:132px}
.pphoto.noph{display:flex;align-items:center;justify-content:center;font-family:var(--f-display);
  font-size:1.7rem;color:var(--muted)}
.person h2{font-family:var(--f-display);font-size:1.24rem;font-weight:500;margin:0;letter-spacing:-.01em}
.person h2 a{text-decoration:none}
.person h2 a:hover{color:var(--accent)}
.prole{font-family:var(--f-mono);font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--muted);margin-top:.25rem}
.pwords{margin-top:.6rem;font-size:.94rem;color:var(--ink-2);max-width:58ch}
.pcred{display:grid;grid-template-columns:auto 1fr;column-gap:14px;row-gap:.3rem;margin:.9rem 0 0;
  font-size:.88rem}
.pcred.wide{margin-top:0;row-gap:.55rem;max-width:74ch}
.pcred dt{font-family:var(--f-mono);font-size:.68rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--muted);padding-top:.18em;white-space:nowrap}
.pcred dd{margin:0;color:var(--ink-2)}
.pcred .mono{font-family:var(--f-mono);font-size:.86em;color:var(--ink)}
.pcred .small{color:var(--muted);font-size:.84em;margin-left:.4rem}
.pgo{grid-column:1/-1;display:flex;flex-direction:column;gap:.35rem;align-items:flex-start}
@media (min-width:900px){.pgo{grid-column:auto;align-items:stretch;min-width:190px}}
.pgo .small{font-size:.8rem;color:var(--muted)}
.personhead{display:grid;gap:20px}
@media (min-width:700px){.personhead{grid-template-columns:auto 1fr;column-gap:28px;align-items:start}}

/* an empty result, and an empty page, are different things and say so */
.emptyres{padding:26px 0 6px;max-width:var(--measure)}
.emptyres b{display:block;font-family:var(--f-display);font-size:1.14rem;font-weight:500;
  margin-bottom:.5rem}
.emptyres p{color:var(--muted);font-size:.94rem;line-height:1.6;margin-bottom:.8rem}
.emptyres a{color:var(--accent)}
.willcarry{margin-top:1.4rem}

/* Which single filter is doing the excluding. The counts beside them are
   real queries, not guesses, so a buyer can step out of an empty list in
   one click instead of clearing everything and starting again. */
.loosen{list-style:none;margin:0 0 1rem;padding:0}
.loosen li{padding:.4rem 0;border-bottom:1px solid var(--rule-2);display:flex;
  justify-content:space-between;gap:1rem;align-items:baseline}
.loosen a{color:var(--accent);text-decoration:none;font-size:.94rem}
.loosen a:hover{text-decoration:underline}
.loosen .small{color:var(--muted);font-size:.82rem;white-space:nowrap}

/* What the buyer has narrowed by, each one removable on its own. */
.fchips{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin:0 0 14px}
.fchip{display:inline-flex;align-items:baseline;gap:.4rem;text-decoration:none;
  font-size:.82rem;color:var(--ink-2);background:var(--accent-soft);
  border:1px solid transparent;border-radius:2px;padding:.28rem .5rem}
.fchip:hover{border-color:var(--accent)}
.fchip .fchipk{font-family:var(--f-mono);font-size:.62rem;letter-spacing:.1em;
  text-transform:uppercase;color:var(--muted)}
.fchip .fchipx{color:var(--muted);font-size:.92rem;line-height:1}
.fchip:hover .fchipx{color:var(--accent)}
.fchipclear{font-size:.8rem;color:var(--muted);text-decoration:none;margin-left:.3rem}
.fchipclear:hover{color:var(--accent);text-decoration:underline}

/* A rupee sign that sits inside the box rather than floating beside it. */
.frupee{display:flex;align-items:stretch;border:1px solid var(--rule);border-radius:2px;
  background:var(--surface);overflow:hidden}
.frupee span{display:grid;place-items:center;padding:0 .55rem;color:var(--muted);
  font-size:.9rem;border-right:1px solid var(--rule-2);background:var(--paper)}
.frupee input{border:0;border-radius:0;flex:1;min-width:0;background:transparent}
.frupee input:focus{outline:2px solid var(--accent);outline-offset:-2px}

/* Pages of results. Plain links: every page has an address, and the list
   works with JavaScript switched off. */
.pager{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;
  gap:10px;margin-top:26px;padding-top:18px;border-top:1px solid var(--rule)}
.pstep{font-size:.88rem;text-decoration:none;color:var(--accent);white-space:nowrap}
.pstep:hover{text-decoration:underline}
.pstep.off{color:var(--muted);opacity:.5}
.pnums{display:flex;flex-wrap:wrap;gap:2px;align-items:center;justify-content:center;
  order:3;width:100%}
@media (min-width:620px){.pnums{order:0;width:auto}}
.pnum{min-width:30px;text-align:center;padding:.3rem .4rem;font-size:.86rem;
  text-decoration:none;color:var(--ink-2);border:1px solid transparent;border-radius:2px;
  font-variant-numeric:tabular-nums}
.pnum:hover{border-color:var(--rule);color:var(--accent)}
.pnum.on{border-color:var(--accent);color:var(--accent);background:var(--accent-soft);
  font-weight:500}
.pgap{color:var(--muted);padding:0 .2rem}

/* On a phone the filter rail is ten groups deep, which would put the
   first instrument below three screens of controls. The results go first
   there and the rail is one tap away. On a wide screen the rail sits
   beside the results and the jump link is not needed at all. */
.tofilters{display:flex;align-items:center;gap:.45rem;align-self:flex-start;
  text-decoration:none;font-size:.86rem;color:var(--accent);border:1px solid var(--rule);
  border-radius:2px;padding:.45rem .75rem;margin-bottom:14px}
.tofilters .fn{background:var(--accent);color:var(--on-accent);border-radius:2px;
  font-size:.7rem;padding:.05rem .3rem;font-variant-numeric:tabular-nums}
@media (max-width:879px){
  .explorer .reswrap{order:-1}
  .explorer .facets{order:0;scroll-margin-top:12px}
}
@media (min-width:880px){.tofilters{display:none}}

/* ═══════════════════════════════════════════════════════════════════
   The shop — design 2A (the filter rail) and 3B (can you use this?)
   The rail is a real GET form, so every filtered state has an address a
   buyer can send to a colleague. The rows are dense because the people
   who read them buy instruments for a living.
   ═══════════════════════════════════════════════════════════════════ */
.facets{border-top:0}
.facets .fgroup{border-bottom:1px solid var(--rule-2);padding-block:.95rem}
.facets .flabel{font-family:var(--f-mono);font-size:.7rem;letter-spacing:.13em;
  text-transform:uppercase;color:var(--muted);margin-bottom:.5rem;display:block}
.facets input[type=search],.facets input[type=number],.facets select{
  font:inherit;font-size:.92rem;width:100%;color:var(--ink);background:var(--surface);
  border:1px solid var(--rule);border-radius:2px;padding:.5rem .6rem}
.fcats{list-style:none;margin:0;padding:0}
.fcat{display:flex;justify-content:space-between;gap:.6rem;text-decoration:none;color:var(--ink-2);
  font-size:.92rem;padding:.32rem 0;border-bottom:1px solid transparent}
.fcat:hover{color:var(--accent)}
.fcat.on{color:var(--accent);font-weight:500}
.fcat .fn{font-family:var(--f-mono);font-size:.74rem;color:var(--muted);font-variant-numeric:tabular-nums}
.fradio{display:flex;gap:.5rem;align-items:baseline;font-size:.89rem;color:var(--ink-2);
  padding:.22rem 0;cursor:pointer;line-height:1.4}
.fradio input{margin:0;accent-color:var(--accent);flex:none;position:relative;top:.15em}
.fhint{display:block;font-size:.79rem;color:var(--muted);line-height:1.5;margin-top:.4rem}
a.fhint{color:var(--accent);text-decoration:none}
a.fhint:hover{text-decoration:underline}
.fgo{display:flex;gap:12px;align-items:center;padding-top:1rem}
.fgo .cta{flex:1;justify-content:center}
.fclear{font-size:.85rem;color:var(--muted);text-decoration:none}
.fclear:hover{color:var(--accent)}

/* a listing row: everything a buyer checks, on the row */
.rows{border-top:1px solid var(--rule)}
.prow{display:grid;gap:6px 20px;padding-block:16px;border-bottom:1px solid var(--rule);
  text-decoration:none;color:inherit;transition:border-color .16s ease,background-color .16s ease}
@media (min-width:820px){.prow{grid-template-columns:minmax(0,1fr) auto auto;align-items:start;column-gap:28px}}
.prow:not(.static):hover{border-bottom-color:var(--accent);background:var(--rule-2)}
.pname{font-family:var(--f-display);font-size:1.1rem;font-weight:500;line-height:1.25;letter-spacing:-.008em}
.pmeas{font-size:.9rem;color:var(--muted);line-height:1.5;margin-top:.22rem;max-width:52ch}
.pmeta{display:flex;flex-wrap:wrap;gap:.2rem .9rem;margin-top:.4rem;
  font-family:var(--f-mono);font-size:.7rem;letter-spacing:.05em;color:var(--muted)}
.pmeta .mcode{color:var(--ink-2)}
.pfacts{display:flex;flex-wrap:wrap;gap:.3rem 18px}
@media (min-width:820px){.pfacts{display:grid;grid-template-columns:auto;gap:.28rem;min-width:132px}}
.rf{font-size:.85rem;color:var(--ink-2);display:flex;gap:.5rem;align-items:baseline}
.rfk{font-family:var(--f-mono);font-size:.65rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--muted);min-width:34px}
.pprice{display:flex;flex-direction:column;gap:.1rem}
@media (min-width:820px){.pprice{align-items:flex-end;min-width:104px;text-align:right}}
.pprice b{font-family:var(--f-display);font-size:1.06rem;font-weight:500;font-variant-numeric:tabular-nums}
.pprice .small{font-size:.75rem;color:var(--muted)}

/* the tier badge — a letter that decides whether you may buy at all */
.tbadge{display:inline-grid;place-items:center;width:20px;height:20px;border-radius:2px;
  font-family:var(--f-mono);font-size:.72rem;font-weight:500;flex:none;
  color:var(--on-accent);background:var(--accent)}
.tbadge.bB{background:var(--ink-2)}
.tbadge.bC{background:var(--flag);color:var(--paper)}

/* 3B — the three facts that can rule a buyer out, before any price */
.gates{display:grid;gap:0;border-top:1px solid var(--rule);margin-top:.3rem}
@media (min-width:820px){.gates{grid-template-columns:repeat(3,1fr);column-gap:30px}}
.gate{padding-block:18px;border-bottom:1px solid var(--rule-2)}
.gk{font-family:var(--f-mono);font-size:.68rem;letter-spacing:.11em;text-transform:uppercase;
  color:var(--muted);margin-bottom:.4rem}
.gv{font-family:var(--f-display);font-size:1.24rem;font-weight:500;line-height:1.2;
  display:flex;align-items:center;gap:.5rem;flex-wrap:wrap;letter-spacing:-.01em}
.gv.sp{color:var(--flag)}
.gh{font-size:.85rem;color:var(--muted);line-height:1.55;margin-top:.45rem}
.gh a{color:var(--accent);text-decoration:none}
.gh a:hover{text-decoration:underline}

.buyrow{display:grid;gap:16px;align-items:center}
@media (min-width:700px){.buyrow{grid-template-columns:auto 1fr;column-gap:34px}}
.buyprice b{font-family:var(--f-display);font-size:1.9rem;font-weight:500;
  letter-spacing:-.02em;display:block;font-variant-numeric:tabular-nums}
.buyprice .small{font-size:.8rem;color:var(--muted)}
.buyrow .ctarow{margin-top:0}
.byline{font-family:var(--f-mono);font-size:.75rem;letter-spacing:.06em;color:var(--muted);
  margin-top:.5rem}

.tierlist{border-top:1px solid var(--rule)}

/* how buying works — six lines of trade, each behaving differently */
.model{border-top:1px solid var(--rule)}
.mrow{display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:18px;
  padding-block:20px;border-bottom:1px solid var(--rule-2)}
.mn{font-family:var(--f-mono);font-size:.74rem;color:var(--muted);padding-top:.35rem}
.mbody h3{font-family:var(--f-display);font-size:1.14rem;font-weight:500;margin:0 0 .6rem;
  letter-spacing:-.008em;line-height:1.25}
.mline{display:grid;grid-template-columns:112px minmax(0,1fr);gap:.7rem;padding-block:.26rem;
  font-size:.91rem;line-height:1.55;color:var(--ink-2)}
.mline .mk{font-family:var(--f-mono);font-size:.65rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--muted);padding-top:.28rem}
.mline.gap{color:var(--flag)}
@media (max-width:560px){.mline{grid-template-columns:minmax(0,1fr);gap:.05rem}}

/* ═══════════════════════════════════════════════════════════════════
   Content pages — design 4C (questions) and 4A (editorial)
   4C answers first: a reader who came with a question should not have to
   read an essay to find out whether the answer is yes. 4A is the
   exception, on four pages that carry an argument instead of answers.
   ═══════════════════════════════════════════════════════════════════ */
.shortans{margin-top:1.7rem;border-left:2px solid var(--accent);padding:.1rem 0 .1rem 1.1rem;
  max-width:var(--measure)}
.shortans .sak{font-family:var(--f-mono);font-size:.68rem;letter-spacing:.13em;
  text-transform:uppercase;color:var(--accent);margin-bottom:.45rem}
.shortans p{color:var(--ink-2);line-height:1.7}

/* the question list — a question a reader really asks, an answer that
   already existed. Nothing here is written to fill a question out. */
.qlist .q{padding-block:1.05rem}
.qlist .qq{font-family:var(--f-display);font-size:1.1rem;font-weight:500;line-height:1.35;
  letter-spacing:-.008em}
.qlist .qa{font-size:.97rem;color:var(--ink-2);margin-top:.45rem;line-height:1.6;
  padding-left:.95rem;border-left:2px solid var(--accent);max-width:var(--measure)}

/* 4A */
.longform{max-width:70ch}
.longform h1.ed{font-size:clamp(1.9rem,4.4vw,2.9rem);max-width:22ch;letter-spacing:-.018em}
.longform .opener{margin-top:1.3rem;font-size:1.04rem;line-height:1.75;color:var(--ink-2)}
.longform h2{margin-top:2rem}
.longform h2 + p{margin-top:.8rem}
.longform p + p{margin-top:1rem}
.longform p{line-height:1.75;color:var(--ink-2)}
.gh3{font-family:var(--f-display);font-size:1.06rem;font-weight:500;margin:1.6rem 0 .2rem;
  letter-spacing:-.008em}

/* a policy blank: a hole printed as a hole, never filled with something
   plausible. This is the most dangerous page on the site to be clever on. */
.blanks{border-top:1px solid var(--flag);margin-top:1.3rem}
.blank{display:grid;gap:.2rem .9rem;padding-block:.85rem;border-bottom:1px solid var(--rule-2)}
@media (min-width:760px){.blank{grid-template-columns:minmax(0,.9fr) minmax(0,1.6fr) auto;align-items:start}}
.blank .bk{font-weight:500;font-size:.94rem;line-height:1.4}
.blank .bk::before{content:"";display:inline-block;width:9px;height:9px;border-radius:1px;
  border:1px dashed var(--flag);margin-right:.5rem;vertical-align:.02em}
.blank .bv{font-size:.91rem;color:var(--muted);line-height:1.55}
.blank .bc{font-family:var(--f-mono);font-size:.68rem;color:var(--flag);white-space:nowrap;
  padding-top:.2rem}
/* A hole the panel has since filled. It stays in the list, because the
   value being known is not the same as counsel having approved it. */
.blank .bs{font-size:.88rem;color:var(--ink-2);line-height:1.55;padding-top:.3rem}
.blank .bs span{display:block;font-family:var(--f-mono);font-size:.63rem;letter-spacing:.1em;
  text-transform:uppercase;color:var(--accent);margin-bottom:.15rem}
@media (min-width:760px){.blank .bs{grid-column:2 / -1}}

/* ═══════════════════════════════════════════════════════════════════
   Articles — design 5B, the margin apparatus
   On a wide screen the margin runs beside the prose. On a phone each
   note falls into the flow, which is where it belonged anyway — a note
   earns its place at a point in the argument, not at the top of a
   sidebar nobody scrolls back up to.
   ═══════════════════════════════════════════════════════════════════ */
.withmargin{display:grid;gap:28px}
@media (min-width:1000px){
  .withmargin{grid-template-columns:minmax(0,1fr) 260px;column-gap:48px;align-items:start}
  .margin{position:sticky;top:84px}
}
.mainprose{max-width:68ch}
.mainprose p{line-height:1.78;color:var(--ink-2)}
.mainprose p + p{margin-top:1.05rem}
.mainprose h2{margin-top:2.1rem}
.mainprose h2 + p{margin-top:.75rem}
.mainprose .valuelist{margin-top:1rem}
.pull{margin:1.9rem 0;padding:0 0 0 1.2rem;border-left:2px solid var(--accent);
  font-family:var(--f-display);font-size:1.17rem;line-height:1.5;color:var(--ink);
  letter-spacing:-.006em}

/* a margin note. Three kinds, and the third is the point of the design. */
.margin{display:grid;gap:18px}
.mnote{border-top:1px solid var(--rule);padding-top:.75rem}
.mkind{font-family:var(--f-mono);font-size:.62rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--muted);margin-bottom:.35rem}
.mterm{font-family:var(--f-display);font-size:1rem;font-weight:500;line-height:1.25;
  letter-spacing:-.006em;margin-bottom:.3rem}
.mtext{font-size:.85rem;line-height:1.6;color:var(--muted)}
.mlink{display:inline-block;margin-top:.5rem;font-size:.82rem;color:var(--accent);
  text-decoration:none;border-bottom:1px solid transparent;transition:border-color .16s ease}
.mlink:hover{border-bottom-color:var(--accent)}
/* the "what we do about it" note is the one that binds us, so it is the
   one that is marked */
.mnote.m-here{border-top-color:var(--accent)}
.mnote.m-here .mkind{color:var(--accent)}
.mnote.m-def .mterm{font-family:var(--f-body);font-size:.95rem;font-weight:600}

/* ═══════════════════════════════════════════════════════════════════
   References
   The in-text citation is a link into the list; the list is grouped by
   the kind of source, and a group appears only because this article
   cites something in it.
   ═══════════════════════════════════════════════════════════════════ */
 /* No nowrap: a group author's full name — "Society for Industrial and
   Organizational Psychology" — is wider than a phone, and APA wants the
   full name on a first citation. A wrapped citation is normal in print;
   a page that scrolls sideways is not. */
.cite{color:var(--accent);text-decoration:none;
  border-bottom:1px dotted var(--accent);font-size:.94em}
.cite:hover{border-bottom-style:solid}
/* a key with no source behind it must be impossible to miss */
.badcite{color:var(--bad,#8A2B1F);background:color-mix(in srgb,var(--flag) 18%,transparent);
  padding:.05rem .3rem;border-radius:2px;font-family:var(--f-mono);font-size:.8em}

.refhead{margin-bottom:.4rem}
.refnote{font-size:.86rem;color:var(--muted);line-height:1.6;max-width:60ch;margin-bottom:1.4rem}
.refsec + .refsec{margin-top:1.5rem}
.refsl{font-family:var(--f-mono);font-size:.68rem;letter-spacing:.13em;text-transform:uppercase;
  color:var(--muted);padding-bottom:.5rem;border-bottom:1px solid var(--rule)}
.reflist{list-style:none;margin:0;padding:0}
.reflist li{padding-block:.8rem;border-bottom:1px solid var(--rule-2);font-size:.9rem;
  line-height:1.6;color:var(--ink-2);padding-left:1.9rem;text-indent:-1.9rem}
.reflist li em{font-style:italic}
/* the entry a reader has just jumped to */
.reflist li:target{background:var(--accent-soft);border-radius:2px;
  padding-left:2.4rem;text-indent:-1.9rem;margin-left:-.5rem}

.faddr{display:block;font-weight:400;font-size:.86rem;color:var(--muted);
  margin-top:.2rem;line-height:1.5;white-space:pre-line}

/* review notes */
.note{display:none;font-family:var(--f-mono);font-size:.73rem;line-height:1.5;color:var(--flag);
  background:var(--flag-soft);border-left:2px solid var(--flag);padding:.5rem .7rem;
  margin-top:.8rem;border-radius:0 2px 2px 0}
body.rev .note{display:block}
/* A content gap, drawn only while env = development. On the live site the
   same marker is an HTML comment and nothing is painted. */
.gapnote{display:block;font-family:var(--f-mono);font-size:.73rem;line-height:1.5;color:var(--flag);
  background:var(--flag-soft);border-left:2px solid var(--flag);padding:.5rem .7rem;
  margin-top:.8rem;border-radius:0 2px 2px 0}
.revbar{position:fixed;right:14px;bottom:14px;z-index:60;display:flex;gap:8px;align-items:center;
  background:var(--surface);border:1px solid var(--rule);border-radius:3px;
  padding:.4rem .5rem .4rem .7rem;box-shadow:var(--shadow)}
.revbar span{font-family:var(--f-mono);font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.revbar button{border:1px solid var(--rule);background:transparent;border-radius:2px;
  padding:.28rem .55rem;font-size:.75rem;cursor:pointer;font-family:var(--f-mono)}
.revbar button[aria-pressed="true"]{background:var(--accent);color:var(--on-accent);border-color:var(--accent)}

/* footer */
footer.site{border-top:1px solid var(--rule);background:var(--surface)}
.fgrid{display:grid;gap:26px;padding-block:40px}
@media (min-width:760px){.fgrid{grid-template-columns:repeat(4,1fr);gap:32px}}
.fcol h4{font-family:var(--f-mono);font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--muted);margin:0 0 .6rem;font-weight:500}
.fcol a{display:block;font-size:.87rem;text-decoration:none;color:var(--ink-2);padding-block:.18rem}
.fcol a:hover{color:var(--accent)}
.flegal{display:flex;flex-wrap:wrap;gap:18px;padding-block:16px;border-top:1px solid var(--rule-2)}
.fsocial{display:flex;flex-wrap:wrap;gap:1.1rem;margin-top:.9rem;font-size:.84rem}
.fsocial a{color:var(--muted);text-decoration:none}
.fsocial a:hover{color:var(--accent)}

.flegal a{font-size:.83rem;color:var(--muted);text-decoration:none}
.flegal a:hover{color:var(--accent)}
.fbot{border-top:1px solid var(--rule-2);padding-block:18px 34px;display:flex;flex-wrap:wrap;
  gap:16px;align-items:flex-start;justify-content:space-between}

:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important;scroll-behavior:auto!important}}

/* ============ v0.3 — single-row nav with dropdowns, shop, modal ============ */
.mainnav{position:relative}
.navrow{list-style:none;margin:0;padding:0;display:flex;align-items:center;gap:22px;min-width:0}
.header.site.da .navrow,.site.da .navrow{gap:18px}
.site.da .navlink{white-space:nowrap}
.navrow > li{position:relative}
.navrow .navlink{display:inline-flex;align-items:center;gap:.25rem;font-size:.92rem}
.caret{font-size:.62rem;opacity:.6;transform:translateY(1px)}
.extmark{font-size:.72rem;opacity:.7;margin-left:.15rem}

.dd{position:absolute;top:100%;left:-14px;z-index:50;background:var(--surface);
  border:1px solid var(--rule);border-radius:3px;box-shadow:var(--shadow);
  padding:16px 18px;min-width:230px;display:none}
.hasdd:hover .dd,.hasdd:focus-within .dd,.dd.open{display:block}
.ddinner{display:flex;gap:30px}
.ddgroup{display:flex;flex-direction:column;gap:1px;min-width:190px}
.ddtitle{font-family:var(--f-mono);font-size:.66rem;letter-spacing:.13em;text-transform:uppercase;
  color:var(--muted);margin-bottom:.5rem}
.ddgroup a{font-size:.88rem;text-decoration:none;color:var(--ink-2);padding:.3rem 0;white-space:nowrap}
.ddgroup a:hover{color:var(--accent)}

.hicons{display:flex;align-items:center;gap:6px;flex:none}
.iconlink{display:inline-flex;align-items:center;justify-content:center;position:relative;
  width:34px;height:34px;border:1px solid transparent;background:transparent;border-radius:2px;
  text-decoration:none;font-size:1.12rem;line-height:1;color:var(--muted);cursor:pointer}
.iconlink:hover{color:var(--accent);border-color:var(--rule)}
.cartlink .badge{position:absolute;top:2px;right:0;min-width:15px;height:15px;padding:0 3px;
  border-radius:8px;background:var(--accent);color:var(--on-accent);
  font-family:var(--f-mono);font-size:.58rem;line-height:15px;text-align:center;font-variant-numeric:tabular-nums}

.brand .byline{font-family:var(--f-mono);font-size:.62rem;letter-spacing:.11em;text-transform:uppercase;
  color:var(--muted);margin-left:.15rem}
header.site.da{border-bottom-color:var(--accent)}
header.site.da .brand .word{color:var(--accent)}

.mobtitle{font-family:var(--f-mono);font-size:.66rem;letter-spacing:.13em;text-transform:uppercase;
  color:var(--muted);padding-block:.4rem .2rem}

/* stage list — publish with us / journals */
.stagelist{margin-top:1.4rem;border-top:1px solid var(--rule)}
.stage{display:grid;grid-template-columns:auto minmax(0,1fr);gap:18px;align-items:baseline;
  padding-block:.95rem;border-bottom:1px solid var(--rule-2)}
.stage .n{font-family:var(--f-mono);font-size:.78rem;color:var(--accent);font-variant-numeric:tabular-nums}
.stage .sh{font-family:var(--f-display);font-size:1.06rem}
.stage .sb{font-size:.92rem;color:var(--muted);margin-top:.2rem;max-width:60ch}

.cartempty{border-top:1px solid var(--rule);margin-top:1.6rem;padding-top:1.8rem}

/* catalogue modal */
.modal{position:fixed;inset:0;z-index:80;background:rgba(15,20,19,.55);
  display:flex;align-items:center;justify-content:center;padding:20px}
.modal[hidden]{display:none}
.modalbox{position:relative;background:var(--surface);border:1px solid var(--rule);border-radius:3px;
  box-shadow:var(--shadow);padding:26px 26px 24px;max-width:520px;width:100%;max-height:90vh;overflow:auto}
.modalbox h2{font-size:1.4rem}
.modalx{position:absolute;top:10px;right:12px;border:none;background:transparent;
  font-size:1.5rem;line-height:1;cursor:pointer;color:var(--muted);padding:.2rem .4rem}
.modalx:hover{color:var(--accent)}

@media (min-width:1040px){
  .mainnav.hdesk{display:block}
  .hicons.hdesk{display:flex}
  .hburger{display:none}
}
@media (max-width:1039px){ .dd{display:none!important} }

/* ---- stakeholder-value block (CG-03) ---- */
.valueblock{margin-top:1.8rem;border-top:1px solid var(--rule);padding-top:.95rem;max-width:var(--measure)}
.valueblock .vh{font-family:var(--f-mono);font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--muted);margin-bottom:.55rem}
.valueblock ul{list-style:none;margin:0;padding:0}
.valueblock li{display:grid;grid-template-columns:auto minmax(0,1fr);gap:.75rem;align-items:baseline;
  padding-block:.52rem;border-bottom:1px solid var(--rule-2);font-size:.97rem;color:var(--ink-2)}
.valueblock li::before{content:"—";color:var(--accent);font-family:var(--f-mono);font-size:.78rem}
.hero .valueblock{max-width:60ch}

.buildstamp{font-family:var(--f-mono);font-size:.66rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--muted);margin-top:.6rem}
.revbar .revsep{opacity:.4}

/* icons must follow the .hdesk rule, not override it */
.hicons.hdesk{display:none}
@media (min-width:1040px){ .hicons.hdesk{display:flex} }
@media (max-width:519px){ .revbar > span:first-child, .revbar .revsep{display:none} }

/* ---- duplication cross-link band (CG-56) ---- */
.crossband{padding-block:0!important;border-top:none!important}
.cross{display:flex;flex-wrap:wrap;gap:.4rem 1rem;align-items:baseline;
  border-left:2px solid var(--accent);background:var(--surface);
  padding:.85rem 1.1rem;border-radius:0 2px 2px 0}
.cross .cq{color:var(--muted);font-size:.92rem}
.cross .ca{font-size:.92rem;font-weight:500;color:var(--accent);text-decoration:none;white-space:nowrap}
.cross .ca:hover{text-decoration:underline}

/* ---- journey figure (homepage) ---- */
.journey .jfig{margin:0}
.journey .jfig img{display:block;width:100%;max-width:100%;height:auto;border:1px solid var(--rule);border-radius:3px;background:#fff}
.journey .jfig figcaption{font-family:var(--f-mono);font-size:.72rem;letter-spacing:.06em;color:var(--muted);
  margin-top:.7rem;padding-top:.55rem;border-top:1px solid var(--rule-2)}
.journey .jsteps{list-style:none;margin:1.6rem 0 0;padding:0;display:grid;gap:0;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr));border-top:1px solid var(--rule)}
.journey .jstep{border-bottom:1px solid var(--rule-2)}
.journey .jstep>a,.journey .jstep>span{display:grid;grid-template-columns:auto minmax(0,1fr);
  column-gap:.7rem;row-gap:.2rem;align-items:baseline;padding:.85rem .9rem .95rem 0;
  text-decoration:none;color:inherit;height:100%}
.journey .jstep>a:hover .jt{color:var(--accent)}
.journey .jn{font-family:var(--f-mono);font-size:.72rem;color:var(--accent);grid-row:1}
.journey .jt{font-weight:500;font-size:.95rem;line-height:1.35;grid-row:1}
.journey .jd{grid-column:2;font-size:.85rem;color:var(--muted);line-height:1.45}
.journey .jstep>a .jt::after{content:" \2192";font-family:var(--f-mono);font-size:.75rem;color:var(--accent)}
.journey .jgap .jt{color:var(--flag)}
.journey .jgap .jt::after{color:var(--flag)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .journey .jfig img{opacity:.92}}
:root[data-theme="dark"] .journey .jfig img{opacity:.92}

/* ---- CG-51 diagrams ---- */
.dfig{margin:1.8rem 0 0;padding:0}
.dfig .dbox{overflow-x:auto;-webkit-overflow-scrolling:touch;
  border:1px solid var(--rule);border-radius:3px;background:var(--surface)}
.dfig svg{display:block;width:100%;min-width:660px;height:auto;padding:14px 12px;color:var(--ink)}
.dfig figcaption{font-family:var(--f-mono);font-size:.72rem;line-height:1.55;letter-spacing:.04em;
  color:var(--muted);margin-top:.65rem;padding-top:.5rem;border-top:1px solid var(--rule-2)}
@media (max-width:700px){.dfig .dbox::after{content:""}}

/* ---- CG-07 blog library ---- */
.alistgrid{display:grid;gap:0;margin-top:1.3rem;border-top:1px solid var(--rule)}
.acard{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:.15rem 1.2rem;align-items:baseline;
  padding-block:1.05rem;border-bottom:1px solid var(--rule-2);text-decoration:none;color:inherit}
.acard:hover .at{color:var(--accent)}
.acard .acat{grid-column:1/-1;font-family:var(--f-mono);font-size:.66rem;letter-spacing:.13em;
  text-transform:uppercase;color:var(--muted);margin-bottom:.25rem}
.acard .at{font-family:var(--f-display);font-size:1.14rem;font-weight:500;line-height:1.26;letter-spacing:-.008em}
.acard .am{font-family:var(--f-mono);font-size:.7rem;color:var(--muted);white-space:nowrap;grid-row:span 2}
.acard .ad{grid-column:1;font-size:.9rem;color:var(--ink-2);line-height:1.5;margin-top:.2rem}
@media (max-width:560px){
  .acard{grid-template-columns:minmax(0,1fr)}
  .acard .am{grid-row:auto;margin-top:.4rem}
}
.longform h1{margin-bottom:.7rem}
.longform .dek{font-family:var(--f-display);font-size:1.16rem;line-height:1.45;color:var(--ink-2);
  font-style:italic;margin:0 0 1.1rem}
.longform .byline{font-family:var(--f-mono);font-size:.72rem;letter-spacing:.05em;color:var(--muted);
  display:flex;flex-wrap:wrap;gap:.5rem;align-items:center;padding-bottom:1.1rem;border-bottom:1px solid var(--rule)}
.longform .byline i{font-style:normal;opacity:.5}
.longform>p{margin:1.05rem 0 0;font-size:1.02rem;line-height:1.72}
.longform>p:first-of-type{margin-top:1.5rem}
.longform h2{font-family:var(--f-display);font-size:1.28rem;font-weight:500;line-height:1.3;
  letter-spacing:-.01em;margin:2.2rem 0 0;padding-top:1rem;border-top:1px solid var(--rule-2)}
.longform blockquote{margin:1.7rem 0 .4rem;padding:0 0 0 1.1rem;border-left:2px solid var(--accent);
  font-family:var(--f-display);font-size:1.1rem;line-height:1.5;color:var(--ink-2)}
.longform .alist{list-style:none;margin:1.05rem 0 0;padding:0}
.longform .alist li{display:grid;grid-template-columns:auto minmax(0,1fr);gap:.75rem;align-items:baseline;
  padding-block:.5rem;border-bottom:1px solid var(--rule-2);font-size:.98rem;line-height:1.6;color:var(--ink-2)}
.longform .alist li::before{content:"—";color:var(--accent);font-family:var(--f-mono);font-size:.76rem}
.longform .artend{margin-top:2.4rem;padding-top:1.3rem;border-top:1px solid var(--rule)}
.readnext .alistgrid{margin-top:1rem}

/* ---- session 5: commerce pages ---- */
.rows{border-top:1px solid var(--rule);margin-top:1.4rem}
.row3,.row2{display:grid;gap:.25rem 1.4rem;padding-block:1rem;border-bottom:1px solid var(--rule-2);align-items:start}
.row3{grid-template-columns:minmax(0,1.4fr) 168px minmax(0,1fr)}
.row2{grid-template-columns:minmax(0,1fr)}
.rows .rt{display:block;font-weight:500;font-size:.98rem;line-height:1.35}
.rows .rw{display:block;font-size:.86rem;color:var(--muted);line-height:1.5;margin-top:.2rem}
.rows .rp{display:block;font-size:.9rem;color:var(--ink-2)}
.rows .rn{display:block;font-family:var(--f-mono);font-size:.68rem;color:var(--flag);margin-top:.3rem;line-height:1.5}
.tag{display:inline-block;font-family:var(--f-mono);font-size:.68rem;letter-spacing:.08em;text-transform:uppercase;
  color:var(--accent);border:1px solid var(--accent);border-radius:2px;padding:.24rem .5rem;line-height:1.45}
@media (max-width:860px){.row3{grid-template-columns:minmax(0,1fr)}.row3 .c2{order:-1;margin-bottom:.4rem}}

.tier{display:grid;grid-template-columns:auto minmax(0,1fr);gap:1.1rem;padding-block:1.2rem;border-bottom:1px solid var(--rule-2)}
.tcode{font-family:var(--f-mono);font-size:1.1rem;color:var(--on-accent);background:var(--accent);
  width:34px;height:34px;display:grid;place-items:center;border-radius:2px}
.tlabel{font-family:var(--f-display);font-size:1.16rem;font-weight:500;margin-bottom:.5rem}
.tline{display:grid;grid-template-columns:96px minmax(0,1fr);gap:.8rem;padding-block:.32rem;font-size:.92rem;
  line-height:1.55;color:var(--ink-2)}
.tline .k{font-family:var(--f-mono);font-size:.68rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);padding-top:.22rem}
@media (max-width:560px){.tline{grid-template-columns:minmax(0,1fr);gap:.1rem}}

.specimen{font-family:var(--f-mono);font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--flag);background:var(--flag-soft);border:1px solid var(--flag);border-radius:2px;
  padding:.5rem .7rem;margin-bottom:1.2rem;display:inline-block}
.pgrid{display:grid;gap:0;grid-template-columns:repeat(auto-fit,minmax(min(100%,270px),1fr));
  border-top:1px solid var(--rule);margin-top:1.3rem}
.pf{padding:.85rem .9rem .95rem 0;border-bottom:1px solid var(--rule-2)}
.pfk{font-size:.94rem;font-weight:500;display:flex;flex-wrap:wrap;gap:.5rem;align-items:baseline}
.pfk .req{font-family:var(--f-mono);font-size:.62rem;letter-spacing:.1em;text-transform:uppercase;color:var(--accent)}
.pf.opt .pfk .req{color:var(--muted)}
.pfv{font-family:var(--f-mono);font-size:.72rem;color:var(--flag);background:var(--flag-soft);
  display:inline-block;padding:.16rem .4rem;border-radius:2px;margin-top:.4rem}
.pfn{font-size:.82rem;color:var(--muted);line-height:1.5;margin-top:.4rem}

.qa2{border-top:1px solid var(--rule);margin-top:1.4rem}
.qa2r{padding-block:1.05rem;border-bottom:1px solid var(--rule-2)}
.qq2{font-family:var(--f-display);font-size:1.08rem;font-weight:500;line-height:1.35}
.aa2{font-size:.98rem;color:var(--ink);margin-top:.45rem;line-height:1.6;
  padding-left:.9rem;border-left:2px solid var(--accent)}
.ww2{font-size:.86rem;color:var(--muted);margin-top:.45rem;line-height:1.55}

.poltable{border-top:1px solid var(--rule);margin-top:1.3rem}
.polrow{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.5fr) minmax(0,.8fr);
  gap:.3rem 1.3rem;padding-block:.9rem;border-bottom:1px solid var(--rule-2);align-items:start}
.polrow .pk{font-weight:500;font-size:.94rem;line-height:1.4}
.polrow .pv{font-size:.92rem;color:var(--ink-2);line-height:1.55}
.polrow .pc{font-family:var(--f-mono);font-size:.68rem;color:var(--flag);line-height:1.55}
@media (max-width:760px){.polrow{grid-template-columns:minmax(0,1fr)}}

.article .dek,.longform .dek{margin-bottom:1.4rem}
.article>p+p,.article>.h2+p{margin-top:1.05rem}
.article>p{line-height:1.7}

/* ---- session 6: legal drafts ---- */
.counsel{font-size:.9rem;line-height:1.6;color:var(--flag);background:var(--flag-soft);
  border-left:3px solid var(--flag);border-radius:0 2px 2px 0;padding:.85rem 1rem;margin:1.2rem 0 1.5rem}
.counsel strong{font-weight:600}
.fdisc{display:block;max-width:62ch;line-height:1.6;margin-bottom:.5rem}
.fdisc a{color:var(--accent)}

/* ---- session 7: FAQ, subscribe ---- */
.faqlist{border-top:1px solid var(--rule);margin-top:1.3rem}
.faqi{border-bottom:1px solid var(--rule-2)}
.faqi summary{display:grid;grid-template-columns:auto minmax(0,1fr);gap:.8rem;align-items:baseline;
  padding-block:.95rem;cursor:pointer;list-style:none}
.faqi summary::-webkit-details-marker{display:none}
.faqi summary:hover .fq{color:var(--accent)}
.faqi .fn{font-family:var(--f-mono);font-size:.7rem;color:var(--accent)}
.faqi .fq{font-family:var(--f-display);font-size:1.06rem;font-weight:500;line-height:1.35;
  position:relative;padding-right:1.4rem}
.faqi .fq::after{content:"+";position:absolute;right:0;top:-.06em;font-family:var(--f-mono);
  font-size:1rem;color:var(--muted);font-weight:400}
.faqi[open] .fq::after{content:"\2212"}
.faqi .fa{padding:0 0 1.15rem 2.1rem;max-width:70ch}
.faqi .fa p{font-size:.98rem;line-height:1.7;color:var(--ink-2)}
.faqi .flink{display:inline-block;margin-top:.7rem;font-family:var(--f-mono);font-size:.72rem;
  letter-spacing:.04em;color:var(--accent);text-decoration:none}
.faqi .flink:hover{text-decoration:underline}
@media (max-width:560px){.faqi .fa{padding-left:0}}

.subs{border-top:1px solid var(--rule);padding-top:1.5rem;margin-top:.5rem}
.subgrid{display:grid;gap:1.6rem;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));margin-top:1.3rem}
.subcol{border-top:1px solid var(--rule-2);padding-top:.9rem}
.subk{font-family:var(--f-mono);font-size:.68rem;letter-spacing:.13em;text-transform:uppercase;
  color:var(--accent);margin-bottom:.5rem}
.subconsent{display:grid;grid-template-columns:auto minmax(0,1fr);gap:.6rem;align-items:start;
  font-size:.83rem;line-height:1.5;color:var(--muted);margin-top:.8rem}
.subconsent input{margin-top:.25rem}

/* .cta sets its own display, so a bare .hdesk cannot hide it — same specificity
   problem the header icons had. Hide it explicitly, and restore it at desk width. */
.cta.hdesk{display:none}
.site.da .brand .byline{display:none}
@media (min-width:1040px){
  .cta.hdesk{display:inline-flex}
  .site.da .brand .byline{display:block}
}

/* ── spacing utilities ───────────────────────────────────────────────
   Six classes that replace the thirty-one inline style attributes this site
   used to carry. They were removed so that style-src in the
   Content-Security-Policy need not say 'unsafe-inline' — which, once
   said, would let an injected span carrying its own styling through
   as well. */
.mtt{margin-top:.3rem}
.mts{margin-top:.5rem}
.mtl{margin-top:1.7rem}
.mtx{margin-top:2rem}
.mnote{margin:.5rem 0 0}
.mlist{margin:.5rem 0 0 1.1rem}

/* ── a fact the publisher never printed ──────────────────────────────
   Said in words rather than shown as an em dash, because a dash tells a
   buyer nothing and reads as a page that failed to finish loading. */
.gv.thin{font-size:1rem;font-weight:400;letter-spacing:0}
.gunsaid{color:var(--muted)}

/* ── a product photograph, where there is one ────────────────────────
   There is no placeholder for where there is not. Most of this catalogue
   has no photograph and is not waiting for one. */
.pshot{margin:0;padding:0}
.pshot img{display:block;max-width:min(100%,460px);height:auto;border:1px solid var(--rule);
  border-radius:3px;background:var(--surface)}

/* A field that is there for machines only. Not display:none — some bots
   skip what is not rendered — but pushed out of the page and out of the
   tab order, and marked aria-hidden where it is written. */
.nothere{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden}

/* Testimonials. A quotation, and the name it belongs to — the name is not
   optional here, on a page whose whole promise is that it is real. */
.quotes{display:grid;gap:18px;margin-top:18px}
@media(min-width:860px){.quotes{grid-template-columns:1fr 1fr;gap:20px}}
.quote{margin:0;padding:20px 22px;background:var(--surface);border:1px solid var(--rule-2);
  border-radius:10px;box-shadow:var(--shadow)}
.quote blockquote{margin:0;font-size:1.02rem;line-height:1.66;color:var(--ink-2)}
.quote blockquote::before{content:"\201C";color:var(--accent);font-size:1.6rem;line-height:0;
  margin-right:.12em;vertical-align:-.28em}
.quote figcaption{display:flex;align-items:center;gap:10px;margin-top:14px;
  padding-top:12px;border-top:1px solid var(--rule-2)}
.qpic{border-radius:50%;object-fit:cover;flex:0 0 auto}
.qwho{display:flex;flex-direction:column;line-height:1.35}
.qwho b{font-weight:600;font-size:.94rem}
.qwho span{font-size:.82rem;color:var(--muted)}

/* Where else a person can be found. */
.elsewhere{display:flex;flex-wrap:wrap;gap:10px 14px;align-items:baseline;margin-top:18px}
.elsewhere a{font-size:.9rem;color:var(--accent);text-decoration:underline;
  text-underline-offset:3px;text-decoration-thickness:1px}
.elsewhere a:hover{color:var(--accent-2)}

/* Career library. */
.cards{display:grid;gap:18px;margin-top:18px}
@media(min-width:720px){.cards{grid-template-columns:1fr 1fr}}
@media(min-width:1040px){.cards{grid-template-columns:repeat(3,1fr)}}
.ccard{display:flex;flex-direction:column;background:var(--surface);border:1px solid var(--rule-2);
  border-radius:10px;overflow:hidden;text-decoration:none;color:inherit;box-shadow:var(--shadow)}
.ccard:hover{border-color:var(--accent)}
.ccard img{width:100%;height:140px;object-fit:cover;display:block}
.ccbody{padding:16px 18px 18px}
.ccname{font-family:var(--f-display);font-size:1.12rem;font-weight:500;letter-spacing:-.012em}
.ccard p{margin:.45rem 0 0;font-size:.9rem;color:var(--muted);line-height:1.55}
.chero{width:100%;max-height:320px;object-fit:cover;border-radius:10px;margin-bottom:22px}
.cblock{max-width:var(--measure)}
.cblock + .cblock{margin-top:28px}
.cblock p{margin-top:.6rem}

/* The gallery. */
.gal{display:grid;gap:16px;margin-top:16px}
@media(min-width:680px){.gal{grid-template-columns:1fr 1fr}}
@media(min-width:1000px){.gal{grid-template-columns:repeat(3,1fr)}}
.gitem{margin:0;background:var(--surface);border:1px solid var(--rule-2);border-radius:10px;
  overflow:hidden;box-shadow:var(--shadow)}
.gitem img{width:100%;height:190px;object-fit:cover;display:block}
.gitem figcaption{padding:12px 14px 14px;display:flex;flex-direction:column;gap:3px}
.gitem figcaption b{font-size:.92rem;font-weight:600}
.gitem figcaption span{font-size:.84rem;color:var(--muted);line-height:1.5}
.gitem .gmeta{font-family:var(--f-mono);font-size:.72rem;letter-spacing:.03em}

/* Who we work with. */
.works{display:flex;flex-wrap:wrap;gap:14px 26px;align-items:center;margin-top:16px}
.workitem{display:flex;align-items:center;gap:10px;font-size:.88rem;color:var(--ink-2)}
.workitem img{height:34px;width:auto;display:block}
.workitem .wnote{color:var(--muted);font-size:.8rem}

/* ── the owner's bar, and editing in place ────────────────────────────
   None of this is ever served to a visitor: the bar is drawn only for a
   signed-in admin, and the marks only when editing is switched on. It is
   kept here rather than in a second stylesheet because a second file is a
   second request on every page for something almost nobody sees. */
.edbar{position:sticky;top:0;z-index:60;display:flex;flex-wrap:wrap;align-items:center;gap:.7rem;
  padding:.5rem clamp(1rem,4vw,2.5rem);background:#14181C;color:#E7ECE8;
  font:500 .82rem/1.4 system-ui,-apple-system,"Segoe UI",sans-serif}
.edbar.on{background:#1F5D53}
.edbar form{margin:0}
.edwho{opacity:.72;letter-spacing:.04em;text-transform:uppercase;font-size:.7rem}
.edbtn{font:inherit;cursor:pointer;padding:.3rem .8rem;border-radius:2px;
  background:transparent;color:inherit;border:1px solid rgba(255,255,255,.45)}
.edbtn:hover{border-color:#fff}
.edbtn.live{background:#fff;color:#1F5D53;border-color:#fff}
.edlink{color:inherit;text-decoration:none;opacity:.8;border-bottom:1px solid rgba(255,255,255,.35)}
.edlink:hover{opacity:1}
.edhint{opacity:.72;font-weight:400}

.ied{position:relative;display:inline;cursor:text;border-radius:2px;
  box-shadow:inset 0 -1px 0 rgba(31,93,83,.35);transition:background .12s}
.ied:hover{background:rgba(31,93,83,.09);box-shadow:inset 0 -1px 0 rgba(31,93,83,.7)}
.ied:focus{outline:2px solid #1F5D53;outline-offset:2px}
.ied.wasedited{box-shadow:inset 0 -2px 0 rgba(138,90,31,.55)}
.ied.editing{display:inline-block;background:#fff;color:#14181C;outline:2px solid #1F5D53;
  outline-offset:2px;box-shadow:none;white-space:pre-wrap}
.ied.saving{opacity:.55}
.ied.saved{animation:edok .9s ease-out}
.ied.failed{animation:edbad .9s ease-out}
@keyframes edok{from{background:rgba(31,93,83,.35)}to{background:transparent}}
@keyframes edbad{from{background:rgba(138,43,31,.35)}to{background:transparent}}

.edtool{display:none;position:absolute;top:-.55rem;width:1.35rem;height:1.35rem;padding:0;
  font:600 .78rem/1.3rem system-ui,sans-serif;text-align:center;cursor:pointer;
  border:1px solid #1F5D53;border-radius:50%;background:#fff;color:#1F5D53}
.edtool{right:-.7rem}
.edtool.undo{right:.85rem;border-color:#8A5A1F;color:#8A5A1F}
.ied:hover > .edtool,.ied.editing > .edtool{display:block}
.ied:not(.wasedited) > .edtool.undo{display:none}
.ied.editing > .edtool.undo{display:none}

.edsay{display:inline-block;margin-left:.5rem;padding:.1rem .45rem;border-radius:2px;
  font:500 .72rem/1.5 system-ui,sans-serif;vertical-align:middle;white-space:normal}
.edsay.ok{background:rgba(31,93,83,.14);color:#1F5D53}
.edsay.bad{background:rgba(138,43,31,.13);color:#8A2B1F}

@media print{.edbar,.edtool,.edsay{display:none!important}}
.edslot{display:inline-block;padding:0 .25rem;border-radius:2px;background:rgba(31,93,83,.14);
  box-shadow:inset 0 0 0 1px rgba(31,93,83,.35);cursor:default;user-select:none}

/* A solid button keeps its own colours wherever it stands.
   
   Found 15 September 2026, on the empty basket, by looking at the page:
   ".emptyres a{color:var(--accent)}" is one class and one tag, which
   outweighs ".cta" on its own — so the button drew green text on a green
   ground and read as a blank slab. Any block that colours the links
   inside it can do this to any button placed in it, so the answer is
   stated once here for every such block rather than hunted one at a time. */
.emptyres a.cta, .empty a.cta, .argbody a.cta, .prose a.cta,
.mnote a.cta, .strand a.cta{color:var(--on-accent)}
.emptyres a.cta.ghost, .empty a.cta.ghost, .argbody a.cta.ghost,
.prose a.cta.ghost, .mnote a.cta.ghost, .strand a.cta.ghost{color:var(--accent)}

/* ============ the WhatsApp control ============================
   Bottom corner, every public page but the checkout and the payment
   pages. It is an anchor, nothing more — the colours are the site's own
   tokens, so it follows the chosen scheme instead of carrying somebody
   else's brand green into a dark page. */
.wabtn{position:fixed;right:14px;z-index:70;
  bottom:calc(14px + env(safe-area-inset-bottom, 0px));
  display:inline-flex;align-items:center;gap:.45rem;
  background:var(--accent);color:var(--on-accent);
  border:1px solid var(--accent-2);border-radius:3px;
  padding:.55rem .75rem;text-decoration:none;
  font-family:var(--f-mono);font-size:.76rem;letter-spacing:.06em;
  box-shadow:var(--shadow)}
.wabtn:hover,.wabtn:focus-visible{background:var(--accent-2);color:var(--on-accent)}
.wabtn:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.waico{width:17px;height:17px;flex:none}
/* On a narrow screen the word goes and the mark stays, so the control
   never sits across the foot of a page somebody is reading. */
@media (max-width:519px){
  .wabtn{right:12px;bottom:calc(12px + env(safe-area-inset-bottom, 0px));
    padding:.6rem;border-radius:50%}
  .watxt{position:absolute;width:1px;height:1px;overflow:hidden;
    clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}
  .waico{width:20px;height:20px}
}
@media print{.wabtn{display:none!important}}

/* ============ the event notice ================================
   A card in the middle of a dark layer. The poster sits inside it with
   white all round, and every word is under the poster — the poster has
   its own headings, and two sets of headings touching read as a
   mistake.

   It closes with no JavaScript at all: the × is a label over the
   checkbox below, and this rule is what watches it. */
.popshut-in{position:absolute;width:1px;height:1px;margin:-1px;padding:0;
  border:0;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}
.popshut-in:checked ~ .popwrap{display:none}
.popshut-in:focus-visible ~ .popwrap .popx{outline:2px solid var(--on-accent);outline-offset:2px}

.popwrap{position:fixed;inset:0;z-index:90;display:flex;align-items:center;
  justify-content:center;padding:20px;padding-top:calc(20px + env(safe-area-inset-top, 0px));
  padding-bottom:calc(20px + env(safe-area-inset-bottom, 0px));
  background:rgba(12,18,16,.74)}
.popcard{position:relative;width:min(340px,100%);max-height:100%;
  display:flex;flex-direction:column;overflow:hidden;
  background:var(--surface);border:1px solid var(--rule);border-radius:5px;
  box-shadow:0 26px 64px -26px rgba(0,0,0,.75);
  animation:poprise .34s ease both}
/* The poster's box is sized BEFORE the poster arrives. A card that grows
   as its image loads shifts the page under a reader's eye, and the shape
   of the poster is not ours to predict — the next one may be square. */
.popshot{flex:0 0 auto;height:min(52vh,420px);display:flex;
  align-items:center;justify-content:center;padding:16px 16px 14px}
.popshot img{display:block;width:auto;height:auto;max-width:100%;max-height:100%;
  object-fit:contain;border:1px solid var(--rule-2);border-radius:2px}
.popfoot{flex:none;margin:0 16px 16px;padding-top:.85rem;
  border-top:1px solid var(--rule-2);display:flex;flex-direction:column;gap:.5rem}
.popseats{margin:0;font-family:var(--f-body);font-weight:700;font-size:.79rem;
  line-height:1.4;color:var(--flag)}
.poptitle{margin:0;font-family:var(--f-display);font-weight:600;font-size:1.02rem;
  line-height:1.25;color:var(--ink)}
.popmeta{margin:0;font-family:var(--f-body);font-size:.73rem;color:var(--muted);line-height:1.55}
.popgo{margin-top:.15rem;font-family:var(--f-body);font-weight:600;font-size:.84rem;
  text-align:center;text-decoration:none;border-radius:3px;padding:.52rem .8rem;
  background:var(--accent);color:var(--on-accent)}
.popgo:hover{background:var(--accent-2);color:var(--on-accent)}
.popx{position:absolute;top:7px;right:7px;z-index:3;width:28px;height:28px;
  display:flex;align-items:center;justify-content:center;cursor:pointer;
  border-radius:50%;font-size:17px;line-height:1;
  background:rgba(12,18,16,.55);color:#fff}
.popx:hover{background:rgba(12,18,16,.85)}
@media (max-width:519px){
  .popcard{width:min(300px,100%)}
  .popshot{height:min(46vh,340px)}
}
@keyframes poprise{from{opacity:0;transform:translateY(16px) scale(.985)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.popcard{animation:none}}
@media print{.popwrap{display:none!important}}

/* ============ signing up for an event =========================== */
.seatsleft{font-family:var(--f-body);font-weight:600;color:var(--flag);
  margin:.2rem 0 1rem}
/* The intro comes out of the pack as plain paragraphs. They need their
   own spacing and their own measure here, because .prose is written for
   an article's column and this one sits above a form. */
.regintro{margin-bottom:1.6rem;max-width:62ch}
.regintro p{margin:0 0 .8rem;line-height:1.7}
.regintro p:last-child{margin-bottom:0}
.regform fieldset.fset{border:1px solid var(--rule);border-radius:3px;
  padding:.8rem 1rem 1rem;margin:0}
.regform fieldset.fset.bad{border-color:var(--bad)}
.regform fieldset.fset legend{font-size:.9rem;font-weight:600;padding:0 .35rem}
.regform .pickone{display:flex;align-items:flex-start;gap:.55rem;
  padding-block:.28rem;font-size:.93rem;cursor:pointer}
.regform .pickone input{margin-top:.28rem;flex:none}
.regform fieldset.fset .hint{display:block;margin-bottom:.45rem}
.regform fieldset.fset em{display:block;margin-top:.5rem}
.calloutbox{border:1px solid var(--rule);border-left:2px solid var(--accent);
  border-radius:0 3px 3px 0;padding:1rem 1.1rem;margin:1.4rem 0;background:var(--surface)}
.calloutbox b{display:block;font-family:var(--f-display);font-size:1.06rem;font-weight:600}
.calloutbox p{margin:.3rem 0 0;color:var(--muted);font-size:.92rem}

/* ============ the strip under the footer ======================
   Outside the shell and on its own ground, because what it carries is
   not the site's content: who owns the words, and who built the thing
   they sit in. Two separate facts, and neither belongs beside the
   addresses. */
.fdev{border-top:1px solid var(--rule);background:var(--paper)}
.fdevin{display:flex;flex-wrap:wrap;gap:6px 20px;justify-content:space-between;
  padding-block:12px;font-size:.76rem;line-height:1.6;color:var(--muted)}
.fdevin a{color:var(--muted);text-decoration:none;border-bottom:1px solid transparent}
.fdevin a:hover{color:var(--accent);border-bottom-color:var(--accent)}
@media (max-width:519px){.fdevin{gap:3px}}
/* The WhatsApp control is fixed to this corner, so the strip steps aside
   for it — and only on the pages where it is actually drawn. */
.fdev.haswa .fdevin{padding-right:calc(26px + 150px)}
@media (max-width:519px){.fdev.haswa .fdevin{padding-right:calc(16px + 52px)}}