/* ============================================================
   WHAT DRILL BIT — shared styles.
   Structure: ONE dominant "console" (pickers + answer fused into
   a single framed hero), then quiet, borderless supporting
   reference below. Hierarchy by weight and space, not by walls.
   Identity: heavy grotesque type, monospace measurements, one
   restrained industrial-orange accent, a single dark answer.
   ============================================================ */

:root{
  --ink:#111111; --paper:#ffffff; --panel:#f1f0ee; --deck:#dededc;
  --text:#141414; --muted:#494b4f; --muted-2:#6c6e72;
  --rule:#111111; --grid:#cfceca;
  --accent:#d6461b; --accent-ink:#b3380f; --accent-lt:#ff8a5e;
  --mono:'IBM Plex Mono', ui-monospace, 'SF Mono', Menlo, monospace;
  --sans:'Archivo', system-ui, -apple-system, Segoe UI, sans-serif;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--deck); color:var(--text);
  font-family:var(--sans); line-height:1.5;
}
.wrap{max-width:872px;margin:0 auto;padding:clamp(20px,4vw,40px) clamp(16px,4vw,24px) 0}

/* ---------- site header (every page) ------------------------ */
.site-head{background:var(--paper);border-bottom:2px solid var(--rule)}
.site-head-inner{
  max-width:872px;margin:0 auto;padding:0 clamp(16px,4vw,24px);
  display:flex;align-items:center;justify-content:space-between;gap:6px 20px;flex-wrap:wrap;
}
.wordmark{
  font-family:var(--sans);font-weight:800;font-size:17px;letter-spacing:-.02em;
  color:var(--ink);text-decoration:none;display:inline-flex;align-items:center;gap:9px;padding:13px 0;
}
.wordmark::before{content:"";width:14px;height:14px;background:var(--accent);flex:none}
.site-nav{display:flex;gap:clamp(14px,3vw,26px);flex-wrap:wrap;align-items:center}
.site-nav a{
  font-family:var(--sans);font-weight:600;font-size:13px;color:var(--muted);
  text-decoration:none;padding:13px 0;position:relative;white-space:nowrap;
}
.site-nav a:hover{color:var(--ink)}
.site-nav a[aria-current="page"]{color:var(--ink)}
.site-nav a[aria-current="page"]::after{content:"";position:absolute;left:0;right:0;bottom:-2px;height:3px;background:var(--accent)}

/* ---------- site footer (every page) ------------------------ */
.site-foot{background:var(--paper);border-top:2px solid var(--rule);margin-top:clamp(36px,6vw,60px)}
.site-foot-inner{max-width:872px;margin:0 auto;padding:clamp(22px,4vw,32px) clamp(16px,4vw,24px)}
.foot-links{display:flex;flex-wrap:wrap;gap:8px 22px;margin-bottom:16px}
.foot-links a{font-family:var(--sans);font-weight:600;font-size:13px;color:var(--muted);text-decoration:none}
.foot-links a:hover{color:var(--ink)}
.foot-disclosure{margin:0 0 9px;font-family:var(--sans);font-size:12px;color:var(--text);line-height:1.6;max-width:74ch}
.foot-meta{margin:0;font-family:var(--sans);font-size:11px;color:var(--muted-2);line-height:1.6}

/* ---------- breadcrumbs (landing) --------------------------- */
.crumbs{
  margin:0 0 16px;
  font-family:var(--sans);font-size:12px;color:var(--muted);
  display:flex;flex-wrap:wrap;gap:7px;align-items:center;
}
.crumbs a{color:var(--muted);text-decoration:none}
.crumbs a:hover{color:var(--ink);text-decoration:underline}
.crumbs .sep{color:var(--muted-2)}
.crumbs [aria-current="page"]{color:var(--ink);font-weight:500}

/* ---------- page title (above the console) ------------------ */
.masthead{max-width:824px;margin:0 auto clamp(16px,2.6vw,22px)}
.masthead h1{
  font-family:var(--sans);font-weight:800;
  font-size:clamp(30px,6vw,48px);line-height:.96;letter-spacing:-.03em;margin:0;
}
.masthead .tagline{margin:11px 0 0;max-width:56ch;color:var(--muted);font-size:clamp(14px,2.4vw,16px);font-weight:500}
.masthead .lead{margin:11px 0 0;max-width:64ch;color:var(--text);font-size:clamp(14px,2.4vw,16px);font-weight:500}
.masthead .lead + .lead{margin-top:9px}

/* ============================================================
   HERO CONSOLE — the one strong container on the page.
   .split (home): controls left | dark answer right (asymmetric)
   .stack (landing): gauge strip on top | breakdown below
   ============================================================ */
.console{
  max-width:824px;margin:0 auto;
  background:var(--paper);border:2px solid var(--rule);
}
/* fixed controls column so a wide answer (11/64) can't squeeze it */
.console.split{display:grid;grid-template-columns:300px minmax(0,1fr)}
.c-controls{
  padding:clamp(18px,2.6vw,24px);
  display:flex;flex-direction:column;gap:clamp(18px,2.4vw,22px);
  border-right:2px solid var(--rule);
}
.c-answer{
  background:var(--ink);color:#efeeec;
  padding:clamp(24px,3.4vw,40px);
  display:flex;flex-direction:column;justify-content:center;
}
.c-lab{
  font-family:var(--sans);font-weight:700;font-size:12px;
  letter-spacing:.11em;text-transform:uppercase;color:var(--ink);
  margin:0 0 11px;display:flex;align-items:center;gap:9px;
}
.c-lab::before{content:"";width:11px;height:11px;background:var(--accent);flex:none}

/* landing console (stacked) */
.console.stack .c-top{padding:clamp(16px,2.4vw,22px);border-bottom:2px solid var(--rule)}
.console.stack .c-body{padding:clamp(16px,2.4vw,22px)}
.console.stack .c-body .c-lab{margin-bottom:14px}

@media (max-width:720px){
  .console.split{grid-template-columns:1fr}
  .c-controls{border-right:0;border-bottom:2px solid var(--rule)}
  /* answer stacks full-width on mobile — let it go big */
  .c-answer .frac{font-size:clamp(92px,23vw,140px)}
}

/* ---------- gauge selector (segmented) ---------------------- */
.gauges{display:grid;grid-template-columns:repeat(6,1fr);gap:0;border:2px solid var(--rule)}
.gauge{
  appearance:none;background:var(--paper);border:0;border-right:2px solid var(--rule);
  padding:11px 4px 10px;cursor:pointer;text-align:center;
  font-family:var(--mono);color:var(--ink);transition:background .1s ease;
}
.gauge:last-child{border-right:0}
.gauge .g-n{display:block;font-size:clamp(15px,2.2vw,20px);font-weight:700}
.gauge .g-d{display:block;font-size:10px;color:var(--muted-2);margin-top:3px;font-weight:500}
.gauge:hover{background:var(--panel)}
.gauge[aria-pressed="true"]{background:var(--ink);color:#fff}
.gauge[aria-pressed="true"] .g-d{color:#9a9a9c}
/* home controls: 6 gauges as 3 columns x 2 rows in the narrow column */
.c-controls .gauges{grid-template-columns:repeat(3,1fr)}
.c-controls .gauge:nth-child(3n){border-right:0}
.c-controls .gauge:nth-child(n+4){border-top:2px solid var(--rule)}
.pick-note{margin:10px 0 0;font-family:var(--sans);font-size:11px;color:var(--muted-2);line-height:1.4}

/* ---------- material selector 2x2 --------------------------- */
.mats{display:grid;grid-template-columns:1fr 1fr;gap:0;border:2px solid var(--rule)}
.mat{
  appearance:none;background:var(--paper);cursor:pointer;text-align:left;
  border:0;border-right:2px solid var(--rule);border-bottom:2px solid var(--rule);
  padding:12px 14px;color:var(--ink);transition:background .1s ease;
}
.mat:nth-child(2n){border-right:0}
.mat:nth-child(n+3){border-bottom:0}
.mat .m-name{font-family:var(--sans);font-weight:700;font-size:16px;letter-spacing:-.01em}
.mat .m-eg{display:block;font-family:var(--sans);font-size:11px;color:var(--muted);margin-top:4px}
.mat .m-tag{
  display:block;margin-top:9px;position:relative;padding-left:14px;
  font-family:var(--sans);font-weight:500;font-size:11px;line-height:1.38;color:var(--text);
}
.mat .m-tag::before{content:"";position:absolute;left:0;top:5px;width:7px;height:7px;background:var(--accent)}
.mat:hover{background:var(--panel)}
.mat[aria-pressed="true"]{background:var(--ink);color:#fff}
.mat[aria-pressed="true"] .m-eg{color:#b4b4b6}
.mat[aria-pressed="true"] .m-tag{color:#d0d0d2}

/* ---------- the answer (inside .c-answer) ------------------- */
.readout{position:relative}
.ro-lab{
  font-family:var(--sans);font-weight:700;font-size:12px;
  letter-spacing:.14em;text-transform:uppercase;color:#8f8f92;margin:0 0 14px;
  display:flex;align-items:center;gap:10px;
}
.ro-lab::before{content:"";width:26px;height:4px;background:var(--accent);flex:none}
.answer{display:flex;align-items:flex-end;gap:clamp(12px,2.4vw,26px);flex-wrap:wrap}
.frac{
  font-family:var(--mono);font-weight:700;
  font-size:clamp(66px,12vw,130px);line-height:.76;letter-spacing:-.035em;color:#fff;
}
.frac .u{font-size:.34em;font-weight:500;color:var(--accent-lt);vertical-align:baseline;margin-left:.34em}
.sec{font-family:var(--mono);font-size:clamp(15px,2.4vw,21px);font-weight:500;color:#d3d2d0;padding-bottom:.55em}
.sec .sec-mm{color:#8f8f92}
.sec .bar{color:#4a4a4c;margin:0 .55em}
.for-line{
  margin-top:22px;padding-top:16px;border-top:2px solid rgba(255,255,255,.16);
  font-family:var(--sans);font-size:12.5px;color:#8f8f92;
}
.for-line b{color:#fff;font-weight:700}
/* selected material's practical note, shown with the answer */
.ans-note{
  margin:15px 0 0;position:relative;padding-left:16px;min-height:2.9em; /* reserve ~2 lines: no shift as materials change (CLS) */
  font-family:var(--sans);font-weight:500;font-size:13px;line-height:1.45;color:#c9c8c6;max-width:44ch;
}
.ans-note::before{content:"";position:absolute;left:0;top:6px;width:8px;height:8px;background:var(--accent)}
.ans-note:empty{display:none;min-height:0}

/* pocket tool: thread type shown as a second, smaller answer line */
.p-thread{
  margin:18px 0 0;display:inline-flex;align-items:center;gap:10px;
  font-family:var(--sans);font-size:15px;font-weight:600;color:#d3d2d0;
}
.p-thread::before{content:"";width:10px;height:10px;background:var(--accent);flex:none}
.p-thread b{color:#fff;font-weight:800}
/* pocket material selector: single row of two — drop the row-bottom rule */
.mats.two .mat{border-bottom:0}
/* lag wood selector: three, stacked full-width (long example strings) */
.mats.three{grid-template-columns:1fr}
.mats.three .mat{border-right:0;border-bottom:2px solid var(--rule)}
.mats.three .mat:last-child{border-bottom:0}
/* notes block (Kreg deferral, lag install tips) */
.s-note p{margin:0;font-size:14px;font-weight:500;color:var(--text);line-height:1.6;max-width:62ch}
.s-note a{color:var(--accent-ink);text-decoration:underline;text-underline-offset:2px}
.tip-list{margin:0;padding-left:18px;max-width:62ch}
.tip-list li{margin:0 0 7px;font-size:14px;font-weight:500;color:var(--text);line-height:1.55}
.tip-list li:last-child{margin-bottom:0}
/* honest "general guidance" disclaimer — quiet fine print, every tool */
.tool-disclaimer{
  margin:0;padding-top:16px;border-top:1px solid var(--grid);
  font-family:var(--sans);font-size:12px;line-height:1.6;color:var(--muted-2);max-width:64ch;
}
/* tools-hub cards carry a short fastener sub-label */
.hub-sub{font-family:var(--sans);font-size:11.5px;font-weight:600;letter-spacing:.02em;color:var(--muted);flex:none;white-space:nowrap}

/* ---------- affiliate (helpful next step, with the answer) --- */
/* Understated: a footnote to the answer, never a sales pitch. The
   answer stays the star. Light by default; dark variant in the hero. */
.aff{margin-top:18px;padding-top:15px;border-top:2px solid var(--grid)}
.aff-lab{margin:0 0 9px;font-family:var(--sans);font-size:10.5px;letter-spacing:.13em;text-transform:uppercase;color:var(--muted)}
.aff-links{display:flex;flex-direction:column;gap:8px;align-items:flex-start}
.aff-a{font-family:var(--sans);font-weight:600;font-size:13.5px;color:var(--ink);text-decoration:none;display:inline-flex;align-items:center;gap:7px}
.aff-a .arw{color:var(--accent-ink);font-weight:700;transition:transform .1s ease}
.aff-a:hover{color:var(--accent-ink)}
.aff-a:hover .arw{transform:translateX(2px)}
.aff-note{margin:11px 0 0;font-family:var(--sans);font-size:10.5px;line-height:1.5;color:var(--muted-2)}
/* dark variant inside the hero answer block */
.c-answer .aff{border-top-color:rgba(255,255,255,.18)}
.c-answer .aff-lab{color:#8f8f92}
.c-answer .aff-a{color:#efeeec}
.c-answer .aff-a .arw{color:var(--accent-lt)}
.c-answer .aff-a:hover{color:#fff}
.c-answer .aff-note{color:#8a8a8c}

/* ---------- ad slots (reserved, CLS-safe, reference zone) ----
   (the old "no verified size" no-data state was removed with the
    "Other" gauge — the picker only offers working sizes now) */
.ad-slot{
  min-height:250px;                        /* mobile reserve */
  margin:0 0 clamp(26px,4vw,36px);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;
  background:var(--panel);border:1px dashed var(--grid);color:var(--muted-2);text-align:center;
}
.ad-tag{font-family:var(--sans);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted-2)}
@media (min-width:721px){ .ad-slot{min-height:120px} }

/* ---------- material breakdown (landing hero body) ---------- */
.bd-list{border:0}
.bd-row{padding:14px 2px;border-bottom:2px solid var(--rule)}
.bd-row:last-child{border-bottom:0}
.bd-top{display:flex;justify-content:space-between;align-items:flex-end;gap:14px;flex-wrap:wrap}
.bd-mat{display:flex;flex-direction:column;gap:3px;min-width:0}
.bd-name{font-family:var(--sans);font-weight:700;font-size:18px;letter-spacing:-.01em}
.bd-eg{font-family:var(--sans);font-size:11.5px;color:var(--muted)}
.bd-size{text-align:right;display:flex;flex-direction:column;align-items:flex-end;gap:2px;flex:none}
.bd-frac{font-family:var(--mono);font-weight:700;font-size:clamp(32px,7vw,46px);line-height:1;letter-spacing:-.02em;color:var(--ink)}
.bd-frac .u{font-size:.4em;font-weight:500;color:var(--accent-ink);margin-left:.3em}
.bd-sub{font-family:var(--mono);font-size:12px;color:var(--muted)}
.bd-note{margin:10px 0 0;position:relative;padding-left:15px;font-size:12.5px;font-weight:500;color:var(--text);line-height:1.45}
.bd-note::before{content:"";position:absolute;left:0;top:6px;width:7px;height:7px;background:var(--accent)}

/* ============================================================
   SUPPORT — quiet, borderless reference below the console.
   Narrower column, muted headings, smaller type. It whispers.
   ============================================================ */
.support{max-width:600px;margin:clamp(30px,5vw,50px) auto 0}
.s-block{margin:0 0 clamp(26px,4vw,36px)}
.s-block:last-child{margin-bottom:0}
.s-block h2{
  font-family:var(--sans);font-weight:700;font-size:11px;
  letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin:0 0 12px;
}
.s-why .why-body{display:flex;gap:15px;align-items:flex-start}
.s-why .why-body svg{flex:none;margin-top:1px;opacity:.9}
.s-why p{margin:0;font-size:14px;font-weight:500;color:var(--text);max-width:60ch}
.s-why .whyby{margin:8px 0 0;font-family:var(--sans);font-size:12px;color:var(--muted)}
.s-why .whyby:empty{display:none}
.rule-of-thumb{
  margin:14px 0 0;font-family:var(--sans);font-size:12.5px;font-weight:500;color:var(--ink);
  background:var(--panel);border-left:3px solid var(--accent);padding:10px 13px;
}
.s-source p{margin:0;font-size:12.5px;color:var(--muted);line-height:1.65;max-width:64ch}

/* FAQ (quiet) */
.faq-item{padding:13px 0;border-bottom:1px solid var(--grid)}
.faq-item:last-child{border-bottom:0}
.faq-q{font-family:var(--sans);font-weight:700;font-size:14.5px;margin:0 0 5px;color:var(--ink)}
.faq-a{margin:0;color:var(--muted);font-size:13.5px;line-height:1.55}

/* related / internal linking (quiet chips) */
.rel-links{display:flex;flex-wrap:wrap;gap:9px}
.rel-links a{
  font-family:var(--sans);font-size:12.5px;color:var(--ink);text-decoration:none;
  border:1px solid var(--grid);padding:8px 11px;transition:background .1s,color .1s,border-color .1s;
}
.rel-links a:hover{background:var(--ink);color:#fff;border-color:var(--ink)}
.rel-links a .r-sub{color:var(--muted);margin-left:6px}
.rel-links a:hover .r-sub{color:#b4b4b6}

/* full chart (quiet, collapsed by default) */
.chart{margin:0}
/* Table fits narrow screens (no forced-width horizontal scroll); the
   overflow-x stays only as a safety net. Rows stay readable on phones. */
.tbl-wrap{overflow-x:auto;padding:0}
table{border-collapse:collapse;width:100%;font-family:var(--mono);border:2px solid var(--rule)}
caption{text-align:left;font-family:var(--sans);font-size:11px;color:var(--muted);padding:0 0 10px}
th,td{border:1px solid var(--grid);padding:9px 8px;text-align:center;font-size:12.5px}
@media (max-width:420px){ th,td{padding:8px 5px;font-size:12px} }
thead th{background:var(--ink);color:#fff;border-color:var(--ink);font-family:var(--sans);font-weight:700;letter-spacing:.06em;text-transform:uppercase;font-size:10.5px}
tbody th{background:var(--panel);font-weight:700;text-align:left;color:var(--ink);font-size:14px}
tbody td{color:var(--ink);font-weight:500}
tbody td .mm,tbody th .mm{display:block;font-size:10.5px;color:var(--muted);margin-top:2px;font-weight:400}
tbody th .mm{font-family:var(--mono)}
tr td.hot,tr th.hot{background:rgba(214,70,27,.12);box-shadow:inset 0 0 0 2px var(--accent)}
.tbl-foot{font-family:var(--sans);font-size:11px;color:var(--muted);line-height:1.7;margin:12px 0 0}
.tbl-foot span{color:var(--ink);font-weight:700}

/* ---------- prose (about / privacy / terms) ----------------- */
.prose{max-width:66ch;margin:0;font-size:15px;line-height:1.65;color:var(--text)}
.prose .updated{font-family:var(--sans);font-size:12px;color:var(--muted);margin:0 0 22px}
.prose h2{font-family:var(--sans);font-weight:700;font-size:16px;letter-spacing:-.01em;color:var(--ink);margin:26px 0 9px}
.prose p{margin:0 0 14px}
.prose ul{margin:0 0 16px;padding-left:20px}
.prose li{margin:0 0 7px}
.prose a{color:var(--accent-ink);text-decoration:underline;text-underline-offset:2px}
.prose .rel-links{margin:4px 0 18px}
.prose .rel-links a{text-decoration:none;color:var(--ink)}
.prose .rel-links a:hover{color:#fff}

/* ---------- guide article ----------------------------------- */
/* Longer-form prose than about/privacy — a touch larger and roomier. */
.prose.guide{font-size:16px;line-height:1.7}
.prose.guide .guide-lead{font-size:17px;line-height:1.6;color:var(--ink);font-weight:500;margin:0 0 22px}
.prose.guide h2{font-size:19px;margin:32px 0 10px}
.prose.guide b{font-weight:700;color:var(--ink)}
/* Short-answer callout at the top of an advisory guide. */
.prose.guide .guide-callout{
  background:var(--panel);border-left:5px solid var(--accent);
  padding:14px clamp(14px,3vw,18px);margin:0 0 22px;font-size:15.5px;
}
/* In-article call-to-action into the tool — the funnel, made obvious
   but not loud. Dark block matching the answer console's character. */
.tool-cta{
  display:flex;flex-wrap:wrap;align-items:center;gap:10px 18px;justify-content:space-between;
  background:var(--ink);color:#fff;border-left:5px solid var(--accent);
  padding:16px clamp(16px,3vw,20px);margin:22px 0;
}
.tool-cta p{font-family:var(--sans);font-weight:600;font-size:15.5px;color:#fff;margin:0;flex:1 1 auto}
.cta-btn{
  display:inline-flex;align-items:center;gap:8px;flex:none;
  background:var(--accent);color:#fff;text-decoration:none;
  font-family:var(--sans);font-weight:700;font-size:14.5px;
  padding:10px 16px;transition:background .12s ease;
}
.cta-btn:hover{background:var(--accent-ink)}
.cta-btn span{font-family:var(--mono);font-weight:700}
/* Guides hub cards carry a one-line blurb instead of size figures. */
.hub-blurb{font-family:var(--sans);font-size:13px;line-height:1.5;color:var(--muted);flex:1 1 100%;order:3;margin-top:2px}

/* ---------- hub (/pilot-hole-sizes) list -------------------- */
.hub-list{border:2px solid var(--rule)}
.hub-item{
  display:flex;align-items:center;gap:14px;
  padding:15px clamp(14px,3vw,18px);border-bottom:2px solid var(--rule);
  text-decoration:none;color:var(--ink);transition:background .1s ease;
}
.hub-item:last-child{border-bottom:0}
.hub-item:hover{background:var(--panel)}
.hub-name{font-family:var(--sans);font-weight:700;font-size:16px;flex:1 1 auto;min-width:0}
.hub-sizes{font-family:var(--sans);font-size:12.5px;color:var(--muted);flex:none;white-space:nowrap}
.hub-sizes b{font-family:var(--mono);color:var(--ink);font-weight:700}
.hub-go{font-family:var(--mono);font-weight:700;color:var(--accent-ink);flex:none}
@media (max-width:520px){
  .hub-item{flex-wrap:wrap;gap:5px 12px}
  .hub-sizes{order:3;flex-basis:100%}
  .hub-go{position:absolute}
}

/* chart page: table fills the console body, scrolls if narrow */
.chart-page{overflow-x:auto}

/* ---------- a11y / motion ----------------------------------- */
:focus-visible{outline:3px solid var(--accent);outline-offset:2px}
.gauge:focus-visible,.mat:focus-visible{outline-offset:-3px}
@media (max-width:560px){
  .console.stack .c-top .gauges{grid-template-columns:repeat(3,1fr)}
  .console.stack .c-top .gauge:nth-child(3n){border-right:0}
  .console.stack .c-top .gauge:last-child{border-right:0}
  .console.stack .c-top .gauge:nth-child(n+4){border-top:2px solid var(--rule)}
}
@media (prefers-reduced-motion:no-preference){
  .frac,.sec,.for-line{animation:settle .28s ease both}
  @keyframes settle{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}
}