/* The Kenswick Partners | Articles: a long-form reading page in the letterhead idiom.
   Paper, ink, one deep red. Newsreader for reading, IBM Plex Mono for every small label.
   Three columns on a wide screen: contents rail, the reading column, and a margin for notes. */

:root{ --col: 66ch; --rail: 11rem; --margin: 15rem; --gap: 3.5rem; }

/* ---- reading progress: a hairline under the header that fills as you read ---- */
.progress{position:fixed;left:0;right:0;top:64px;height:2px;z-index:39;background:transparent;pointer-events:none}
.progress span{display:block;height:100%;width:0;background:var(--accent);transition:width .15s linear}

/* ---- head of the article ---- */
.art-head{padding:2.6rem 0 2.4rem;border-bottom:1px solid var(--rule-strong)}
.art-head .dateline{max-width:none;display:flex;justify-content:space-between;gap:1rem 2rem;flex-wrap:wrap;color:var(--ink-soft);padding:0 0 .9rem;border-bottom:1px solid var(--rule-strong);font-family:var(--mono);font-size:.72rem;letter-spacing:.12em;text-transform:uppercase}
.art-head .dateline a{border-bottom:1px solid transparent}
.art-head .dateline a:hover{color:var(--accent);border-bottom-color:currentColor}
.art-title{font-size:clamp(2.5rem,5.4vw,4.9rem);font-weight:400;letter-spacing:-.022em;line-height:1.02;max-width:20ch;margin:1.6rem 0 1.2rem}
.art-dek{font-size:clamp(1.2rem,1.9vw,1.5rem);line-height:1.35;color:var(--ink-soft);max-width:46ch;font-style:italic;font-weight:400}
.art-for{margin-top:1.4rem;font-size:1rem;color:var(--ink-soft);display:flex;gap:1rem;align-items:baseline;flex-wrap:wrap;max-width:60ch}
.art-for .kicker{margin:0;flex:none}
.art-byline{display:flex;flex-wrap:wrap;gap:.6rem 2rem;margin-top:1.8rem;font-family:var(--mono);font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-soft)}
.art-byline .by{color:var(--ink)}
.art-byline .by::before{content:"";display:inline-block;width:2.2rem;height:1px;background:var(--accent);vertical-align:middle;margin-right:.8rem;position:relative;top:-1px}

/* ---- draft notice (only on unpublished articles) ---- */
.draft-note{width:min(1180px,100% - 3rem);margin:1.4rem auto 0;border:1px solid var(--accent);padding:.9rem 1.2rem;color:var(--accent);font-size:.98rem;display:flex;gap:1rem;align-items:baseline;flex-wrap:wrap}
.draft-note .kicker{margin:0;color:var(--accent)}

/* ---- the grid ---- */
.art-grid{display:grid;grid-template-columns:var(--rail) minmax(0,1fr);gap:var(--gap);padding:3rem 0 4rem;align-items:start}
.art-grid>*,.index-grid>*{min-width:0}
.art-body a,.sources li,.index-note p{overflow-wrap:anywhere}
.art-rail{position:sticky;top:5.2rem;display:grid;gap:2.2rem}
.art-rail .kicker{margin-bottom:.8rem}
.toc ol{list-style:none;border-top:1px solid var(--rule-strong)}
.toc li{border-bottom:1px solid var(--rule)}
.toc a{display:block;padding:.55rem 0 .55rem .1rem;font-size:.92rem;line-height:1.35;color:var(--ink-soft);border-left:2px solid transparent;transition:color .2s,border-color .2s,padding-left .2s}
.toc a:hover{color:var(--ink)}
.toc a.on{color:var(--ink);border-left-color:var(--accent);padding-left:.7rem}
.rail-share .share-row{display:grid;gap:.4rem}
.rail-share .sh{display:flex;align-items:center;gap:.6rem;border:1px solid var(--rule);padding:.5rem .7rem;font-family:var(--mono);font-size:.68rem;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-soft);background:transparent;transition:border-color .2s,color .2s}
.rail-share .sh svg{width:14px;height:14px;color:var(--accent)}
.rail-share .sh:hover{border-color:var(--accent);color:var(--accent)}
.rail-share .sh.done{border-color:var(--ok);color:var(--ok)}
.rail-roles .textlink{display:inline-block}

/* ---- the reading column ---- */
.art-body{max-width:var(--col);font-size:1.14rem;line-height:1.68;color:var(--ink-2);position:relative}
.art-body p{max-width:none;margin:0 0 1.25rem}
.art-body p.first::first-letter{font-size:4.1em;float:left;line-height:.82;padding:.1em .12em 0 0;color:var(--accent);font-weight:400}
.art-body a{color:var(--ink);border-bottom:1px solid var(--accent-line);transition:border-color .2s}
.art-body a:hover{border-bottom-color:var(--accent)}
.art-body strong{font-weight:600;color:var(--ink)}
.art-body em{font-style:italic}
.art-body h2{font-size:clamp(1.7rem,2.6vw,2.15rem);font-weight:400;line-height:1.12;letter-spacing:-.012em;margin:3.2rem 0 1.1rem;padding-top:1.4rem;border-top:1px solid var(--rule-strong);clear:both}
.art-body h2 .hnum{display:block;font-family:var(--mono);font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;color:var(--accent);margin-bottom:.9rem}
.art-body h3{font-size:1.3rem;font-weight:500;margin:2.2rem 0 .7rem;clear:both}
.art-body ul,.art-body ol{margin:0 0 1.4rem;padding-left:1.4rem}
.art-body li{margin-bottom:.5rem}
.art-body ul li::marker{color:var(--accent)}
.art-body ol li::marker{font-family:var(--mono);font-size:.85em;color:var(--accent)}
.art-body hr.rule-ticks{margin:2.4rem 0;height:9px;border:0;border-top:1px solid var(--rule-strong);background-image:repeating-linear-gradient(to right,var(--rule-strong) 0 1px,transparent 1px 24px);background-size:100% 6px;background-repeat:no-repeat;clear:both}

/* the one-paragraph answer, up top, framed like a note on letterhead */
.answer{border-top:3px double var(--rule-strong);border-bottom:1px solid var(--rule-strong);padding:1.3rem 0 1.1rem;margin:0 0 2.4rem}
.answer .kicker{margin-bottom:.7rem}
.answer p{font-size:1.2rem;line-height:1.5;color:var(--ink);margin-bottom:.8rem}
.answer p:last-child{margin-bottom:0}

/* pull quotes: large italic, a numbered red mark */
.pull{margin:2.4rem 0 2.4rem;padding:0 0 0 1.6rem;border-left:1px solid var(--accent);position:relative;clear:both}
.pull .qnum{position:absolute;left:-2.6rem;top:.25rem;font-family:var(--mono);font-size:.72rem;letter-spacing:.12em;color:var(--accent)}
.pull p{font-size:clamp(1.35rem,2.1vw,1.7rem);line-height:1.3;font-style:italic;color:var(--ink);max-width:28ch;margin:0}

/* sidenotes: numbered, set in the margin on wide screens */
.snr{font-family:var(--mono);font-size:.62em;vertical-align:super;line-height:0;margin-left:.15em}
.snr a{border:0!important;color:var(--accent)}
.sn{float:right;clear:right;width:var(--margin);margin-right:calc(-1 * (var(--margin) + 2.6rem));margin-top:.2rem;margin-bottom:1rem;font-size:.88rem;line-height:1.5;color:var(--ink-soft);position:relative;padding-top:.5rem;border-top:1px solid var(--rule)}
.sn small{display:block;font-family:var(--mono);font-size:.62rem;letter-spacing:.12em;color:var(--accent);margin-bottom:.25rem}
.sn:target{color:var(--ink)}
.sn:target small{color:var(--ink)}

/* figures: ink drawings between hairlines */
.fig{margin:2.4rem 0;border-top:1px solid var(--rule-strong);border-bottom:1px solid var(--rule);padding:1.4rem 0 1rem;clear:both}
.fig-art{color:var(--ink);font-family:var(--mono)}
.fig-art svg{width:100%;height:auto;display:block}
.fig-art text{font-family:var(--mono);font-size:11px;letter-spacing:.04em;fill:var(--ink-soft)}
.fig-art .accent{stroke:var(--accent)} .fig-art .accent-fill{fill:var(--accent)}
.fig-art .faint{stroke:var(--rule)} .fig-art .ink{stroke:var(--ink)}
.fig-art .label{fill:var(--ink)} .fig-art .big{font-family:var(--serif);font-size:20px;letter-spacing:-.01em;fill:var(--ink)}
.fig figcaption{margin-top:1rem;font-size:.92rem;color:var(--ink-soft);display:flex;gap:1rem;align-items:baseline}
.fig figcaption small{font-family:var(--mono);font-size:.68rem;letter-spacing:.12em;text-transform:uppercase;color:var(--accent);flex:none}

/* ledger tables */
.ledger-wrap{margin:2rem 0 2.4rem;overflow-x:auto;clear:both}
.ledger-table{width:100%;border-collapse:collapse;font-size:1rem}
.ledger-table caption{text-align:left;font-family:var(--mono);font-size:.68rem;letter-spacing:.12em;text-transform:uppercase;color:var(--accent);padding-bottom:.7rem}
.ledger-table th,.ledger-table td{text-align:left;vertical-align:top;padding:.7rem .9rem .7rem 0;border-bottom:1px solid var(--rule)}
.ledger-table thead th{font-family:var(--mono);font-size:.68rem;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-soft);font-weight:500;border-bottom:1px solid var(--rule-strong)}
.ledger-table tbody th{font-weight:500;color:var(--ink);width:34%}
.ledger-table td{color:var(--ink-2)}

/* boxed aside */
.box{border:1px solid var(--rule-strong);outline:1px solid var(--rule-strong);outline-offset:3px;padding:1.3rem 1.4rem;margin:2.2rem 0;background:var(--paper);clear:both}
.box .kicker{margin-bottom:.6rem}
.box p{font-size:1.02rem;color:var(--ink-2);margin-bottom:.7rem}
.box p:last-child{margin-bottom:0}

/* steps */
.steps{list-style:none;padding:0;margin:0 0 2rem;counter-reset:step;border-top:1px solid var(--rule-strong)}
.steps li{counter-increment:step;display:grid;grid-template-columns:2.6rem 1fr;gap:.4rem 1rem;padding:1rem 0;border-bottom:1px solid var(--rule);margin:0}
.steps li::before{content:counter(step,decimal-leading-zero);font-family:var(--mono);font-size:.72rem;letter-spacing:.12em;color:var(--accent);padding-top:.45rem}

/* questions people ask */
.faq dl{border-top:1px solid var(--rule)}
.faq dl>div{padding:1.2rem 0;border-bottom:1px solid var(--rule)}
.faq dt{font-size:1.22rem;font-weight:500;color:var(--ink);line-height:1.3;margin-bottom:.5rem}
.faq dd{color:var(--ink-2);font-size:1.05rem;margin:0}

/* sources */
.sources ol{padding-left:0;list-style:none;counter-reset:src;border-top:1px solid var(--rule)}
.sources li{counter-increment:src;display:grid;grid-template-columns:2.4rem 1fr;gap:1rem;padding:.7rem 0;border-bottom:1px solid var(--rule);font-size:.95rem;color:var(--ink-soft);margin:0}
.sources li::before{content:counter(src,decimal-leading-zero);font-family:var(--mono);font-size:.68rem;letter-spacing:.12em;color:var(--accent);padding-top:.3rem}
.sources a{color:var(--ink-soft);border-bottom-color:var(--rule-strong)}
.sources a:hover{color:var(--ink)}

/* ---- the door ---- */
.door{padding:0 0 4rem}
.door-box{border:1px solid var(--rule-strong);outline:1px solid var(--rule-strong);outline-offset:4px;background:var(--paper);display:grid;grid-template-columns:1.1fr 1fr;gap:2.5rem 4rem;padding:clamp(1.6rem,4vw,3.2rem) clamp(1.4rem,4vw,3.6rem)}
.door-copy h2{font-size:clamp(1.6rem,2.7vw,2.3rem);font-weight:400;line-height:1.15;margin:0 0 1.1rem;max-width:20ch}
.door-copy .kicker{margin-bottom:1.2rem}
.door-copy p{color:var(--ink-2);margin-bottom:.9rem;max-width:48ch}
.door-copy .fine{font-size:.92rem;color:var(--ink-soft)}
.door-form{display:grid;gap:1.4rem;align-content:start}
.door-form .row2{display:grid;grid-template-columns:1fr 1fr;gap:1.4rem}
.door-form .fld{display:flex;flex-direction:column;gap:.45rem}
.door-form .fld>span{font-family:var(--mono);font-size:.68rem;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-soft)}
.door-form .fld>span small{display:block;font-family:var(--serif);font-size:.9rem;letter-spacing:0;text-transform:none;color:var(--faint);margin-top:.2rem;line-height:1.35}
.door-form input:not([type=checkbox]){font-family:var(--serif);font-size:1.08rem;color:var(--ink);background:transparent;border:0;border-bottom:1px solid var(--rule-strong);border-radius:0;padding:.55rem 0;outline:none;width:100%;transition:border-color .2s}
.door-form input:not([type=checkbox]):focus{border-bottom-color:var(--accent)}
.door-form .fld.is-missing input{border-bottom-color:var(--accent)}
.door-form .fld.is-missing>span{color:var(--accent)}
.kp-extra{position:absolute;left:-10000px;top:auto;width:1px;height:1px;overflow:hidden}
.consent{display:grid;grid-template-columns:1.1rem 1fr;gap:.8rem;align-items:start;font-size:.9rem;line-height:1.45;color:var(--ink-soft);cursor:pointer}
.consent input{position:absolute;opacity:0;width:1px;height:1px;pointer-events:none}
.consent .box{width:1.1rem;height:1.1rem;border:1px solid var(--rule-strong);outline:0;margin:.15rem 0 0;padding:0;background:transparent;position:relative;flex:none;clear:none}
.consent .box::after{content:"";position:absolute;inset:3px;background:var(--accent);opacity:0;transform:scale(.6);transition:opacity .15s,transform .15s}
.consent input:checked+.box::after{opacity:1;transform:scale(1)}
.consent input:focus-visible+.box{outline:1px solid var(--accent);outline-offset:3px}
.door-form .btn{justify-self:start}
.door-form .btn[disabled]{opacity:.6;cursor:wait}
.door-form .form-note{font-family:var(--mono);font-size:.78rem;letter-spacing:.06em;color:var(--accent);max-width:none;margin:0}
.door-form .form-note[hidden]{display:none}
.door-form.sent{display:block}
.door-form.sent .sent-msg h3{font-size:1.5rem;font-weight:400;margin-bottom:.6rem}
.door-form.sent .sent-msg p{color:var(--ink-soft)}
.disclosure{margin:1.6rem auto 0;font-size:.86rem;line-height:1.5;color:var(--faint);max-width:none}

/* ---- read next ---- */
.more{padding:0 0 5rem}
.more .sec-head{display:grid;grid-template-columns:7rem 1fr;gap:1rem 2rem;align-items:baseline;margin-bottom:2rem;padding-top:3rem;border-top:1px solid var(--rule-strong)}
.more .sec-num,.art-index .sec-num{font-family:var(--mono);font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;color:var(--accent)}
.more h2{font-size:clamp(1.6rem,2.6vw,2.2rem);font-weight:400}

/* ---- the Articles page ---- */
.idx-head{padding:2.6rem 0 2.6rem;border-bottom:1px solid var(--rule-strong)}
.idx-head .dateline{max-width:none;display:flex;justify-content:space-between;gap:1rem 2rem;flex-wrap:wrap;color:var(--ink-soft);padding:0 0 .9rem;border-bottom:1px solid var(--rule-strong);font-family:var(--mono);font-size:.72rem;letter-spacing:.12em;text-transform:uppercase}
.idx-head .split{display:grid;grid-template-columns:1.2fr 1fr;gap:1.4rem 5rem;align-items:end;margin-top:1.6rem}
.idx-head h1{font-size:clamp(2.4rem,5vw,4.4rem);font-weight:400;letter-spacing:-.02em;line-height:1.02;max-width:16ch;margin:0}
.idx-head .lede{margin:0;padding-bottom:.3rem;font-size:1.15rem;color:var(--ink-soft);max-width:52ch}
.art-index{padding:3rem 0 5rem}
.index-grid{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(16rem,.8fr);gap:3rem 5rem;align-items:start}
.featured{border-top:3px double var(--rule-strong);padding:1.6rem 0 2.4rem;border-bottom:1px solid var(--rule-strong);margin-bottom:.2rem}
.featured .num,.art-list .num{font-family:var(--mono);font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;color:var(--accent);display:block;margin-bottom:1rem}
.featured h2{font-size:clamp(2rem,3.6vw,3.1rem);font-weight:400;line-height:1.06;letter-spacing:-.018em;max-width:22ch}
.featured h2:hover,.art-list h2:hover,.art-list h3:hover{color:var(--accent)}
.featured .dek{margin-top:1rem;font-size:1.2rem;color:var(--ink-soft);font-style:italic;max-width:50ch}
.featured .textlink{display:inline-block;margin-top:1.4rem}
.meta{display:flex;flex-wrap:wrap;gap:.3rem 1.6rem;margin-top:.9rem;font-family:var(--mono);font-size:.68rem;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-soft);max-width:none}
.art-list{list-style:none;padding:0;margin:0}
.art-list li{display:grid;grid-template-columns:5.5rem 1fr;gap:.4rem 1.5rem;padding:1.8rem 0;border-bottom:1px solid var(--rule)}
.art-list h2{font-size:clamp(1.4rem,2.2vw,1.9rem);font-weight:400;line-height:1.15;letter-spacing:-.01em}
.art-list .dek{margin-top:.5rem;color:var(--ink-soft);font-size:1.02rem;max-width:56ch}
.art-list.compact{display:grid;grid-template-columns:repeat(3,1fr);gap:2rem}
.art-list.compact li{display:block;padding:0 0 1.2rem;border-bottom:1px solid var(--rule)}
.art-list.compact .num{margin-bottom:.7rem}
.art-list.compact h3{font-size:1.25rem;font-weight:500;line-height:1.25}
.art-list.compact p{margin-top:.5rem;font-size:.98rem;color:var(--ink-soft)}
.art-list.compact .meta{margin-top:.7rem}
.index-note{display:grid;gap:1.4rem;position:sticky;top:5.2rem}
.index-note .box{margin:0}

/* ---- responsive ---- */
@media (max-width:1180px){
  .sn{float:none;clear:both;width:auto;margin:.6rem 0 1.4rem 1.6rem;padding:.5rem 0 .5rem 1rem;border-top:0;border-left:1px solid var(--rule-strong)}
}
@media (max-width:960px){
  .art-grid{grid-template-columns:minmax(0,1fr);gap:2.4rem}
  .art-rail{position:static;grid-template-columns:1fr 1fr;align-items:start}
  .art-rail .toc{grid-column:1 / -1}
  .index-grid{grid-template-columns:minmax(0,1fr)}
  .index-note{position:static}
  .idx-head .split{grid-template-columns:1fr}
  .door-box{grid-template-columns:1fr}
  .art-list.compact{grid-template-columns:1fr}
  .pull .qnum{position:static;display:block;margin-bottom:.5rem}
}
@media (max-width:720px){
  .progress{top:64px}
  .art-head{padding:2rem 0 1.8rem}
  .art-head .dateline{font-size:.64rem}
  .art-body{font-size:1.06rem}
  .art-rail{grid-template-columns:1fr}
  .door-form .row2{grid-template-columns:1fr}
  .art-list li{grid-template-columns:1fr}
  .more .sec-head{grid-template-columns:1fr}
  .draft-note{width:min(1180px,100% - 2rem)}
}
@media print{
  header.site,footer.site,.art-rail,.door,.more,.progress,.draft-note{display:none!important}
  .art-grid{display:block}
  .art-body{max-width:none;font-size:11pt}
  .sn{float:none;width:auto;margin:.3rem 0 .8rem 1.2rem;border-left:1px solid #999;padding-left:.8rem}
  body{background:#fff}
}

/* =========================================================================================
   Depth pass (27 Oct): hero band with an ink drawing and three big numbers, the reading
   column on a raised sheet, an "In short" line per section, number strips, figures and
   tables as cards, and the Articles page as cards. Later rules win over the ones above.
   ========================================================================================= */

/* ink drawings share one palette wherever they appear */
.hero-art svg,.card-pic svg{width:100%;height:auto;display:block;color:var(--ink)}
.hero-art text,.card-pic text{font-family:var(--mono);font-size:11px;letter-spacing:.08em;fill:var(--ink-soft)}
.hero-art .ink,.card-pic .ink{stroke:var(--ink)} .hero-art .accent,.card-pic .accent{stroke:var(--accent)}
.hero-art .faint,.card-pic .faint{stroke:var(--rule-strong)} .hero-art .accent-fill,.card-pic .accent-fill{fill:var(--accent)}

/* hero */
.art-hero{background:var(--paper-deep);border-bottom:1px solid var(--rule-strong);padding:2rem 0 0}
.art-hero .dateline{max-width:none;display:flex;justify-content:space-between;gap:1rem 2rem;flex-wrap:wrap;color:var(--ink-soft);padding:0 0 .9rem;border-bottom:1px solid var(--rule-strong);font-family:var(--mono);font-size:.72rem;letter-spacing:.12em;text-transform:uppercase}
.art-hero .dateline a:hover{color:var(--accent)}
.hero-grid{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);gap:2rem 4.5rem;align-items:center;padding:2.4rem 0 2.4rem}
.hero-art{padding:1.2rem;background:var(--paper);border:1px solid var(--rule);box-shadow:0 18px 50px -30px rgba(27,26,23,.45)}
.hero-art svg{max-height:340px}
.art-title{margin:1rem 0 1.1rem;font-size:clamp(2.3rem,4.6vw,4.2rem)}
.stats{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--rule-strong)}
.stats li{display:grid;gap:.4rem;padding:1.3rem 1.5rem 1.4rem 0;border-right:1px solid var(--rule)}
.stats li+li{padding-left:1.5rem}
.stats li:last-child{border-right:0}
.stats b{font-family:var(--serif);font-weight:400;font-size:clamp(1.7rem,3vw,2.6rem);line-height:1;letter-spacing:-.02em;color:var(--ink)}
.stats span{font-family:var(--mono);font-size:.66rem;letter-spacing:.11em;text-transform:uppercase;color:var(--ink-soft);line-height:1.45}

/* the reading column on a raised sheet */
:root{--pad:clamp(1.4rem,3vw,3rem)}
.art-grid{padding:2.6rem 0 4rem}
.art-body{background:var(--white);padding:var(--pad) var(--pad) calc(var(--pad) + .6rem);max-width:calc(var(--col) + 2 * var(--pad));border-top:3px solid var(--accent);box-shadow:0 1px 0 var(--rule-strong),0 22px 60px -34px rgba(27,26,23,.45)}
.art-body p.first::first-letter{font-size:4.4em}
.sn{margin-right:calc(-1 * (var(--margin) + 2.6rem + var(--pad)))}

/* the one-paragraph answer */
.answer{border:0;background:var(--paper);border-left:3px solid var(--accent);padding:1.2rem 1.4rem 1.1rem;margin:0 0 2rem}

/* in short: the scanner's line under every heading */
.short{display:grid;grid-template-columns:auto 1fr;gap:.2rem 1rem;align-items:baseline;background:var(--accent-soft);padding:.85rem 1.1rem;margin:0 0 1.4rem;font-size:1rem;line-height:1.5;color:var(--ink);max-width:none}
.short .kicker{margin:0;color:var(--accent);white-space:nowrap}

/* big numbers in the body */
.numbers{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--rule);border:1px solid var(--rule);margin:1.6rem 0 2.2rem;clear:both}
.num-tile{background:var(--paper);padding:1.1rem 1rem 1.2rem;display:grid;gap:.4rem;align-content:start}
.num-tile b{font-family:var(--serif);font-weight:400;font-size:clamp(1.5rem,2.4vw,2.1rem);line-height:1;letter-spacing:-.02em;color:var(--accent)}
.num-tile span{font-family:var(--mono);font-size:.62rem;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-soft);line-height:1.45}

/* sections */
.art-body h2{border-top:3px double var(--rule-strong);padding-top:1.5rem;margin-top:3rem}
.art-body h2 .hnum{font-size:.68rem}

/* figures, quotes, tables as cards */
.fig{border:1px solid var(--rule);background:var(--paper);padding:1.3rem 1.3rem 1rem;box-shadow:0 10px 30px -24px rgba(27,26,23,.4)}
.pull{background:var(--paper);border-left:3px solid var(--accent);padding:1.1rem 1.3rem 1.1rem 1.5rem;margin:2.2rem 0}
.pull .qnum{left:auto;right:1rem;top:.8rem}
.ledger-wrap{border:1px solid var(--rule);background:var(--paper);padding:.4rem 1rem .2rem}
.ledger-table caption{padding-top:.6rem}
.box{background:var(--paper);outline:0;box-shadow:0 10px 30px -24px rgba(27,26,23,.35)}
.steps{background:var(--paper);border:1px solid var(--rule);border-top:1px solid var(--rule);padding:.2rem 1.1rem}
.steps li:last-child{border-bottom:0}

/* the door, on a tinted sheet with the form on white */
.door-box{background:var(--accent-soft);border:0;outline:0;box-shadow:0 22px 60px -34px rgba(27,26,23,.5)}
.door-form{background:var(--white);padding:1.6rem 1.6rem 1.8rem;border:1px solid var(--rule)}

/* cards (Articles page and Read next) */
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:1.6rem}
.card-art{display:grid;grid-template-rows:auto 1fr;background:var(--white);border:1px solid var(--rule);box-shadow:0 16px 44px -30px rgba(27,26,23,.45);transition:transform .2s,box-shadow .2s;color:inherit}
.card-art:hover{transform:translateY(-3px);box-shadow:0 24px 54px -28px rgba(27,26,23,.55)}
.card-pic{background:var(--paper-deep);padding:1.1rem 1.2rem;border-bottom:1px solid var(--rule)}
.card-pic svg{max-height:170px}
.card-body{padding:1.2rem 1.3rem 1.4rem}
.card-body .num{font-family:var(--mono);font-size:.68rem;letter-spacing:.12em;text-transform:uppercase;color:var(--accent);display:block;margin-bottom:.7rem}
.card-body h3{font-size:1.25rem;font-weight:500;line-height:1.25}
.card-body h2{font-size:clamp(1.7rem,2.8vw,2.5rem);font-weight:400;line-height:1.08;letter-spacing:-.015em}
.card-art:hover h2,.card-art:hover h3{color:var(--accent)}
.card-body .dek{margin-top:.55rem;color:var(--ink-soft);font-size:.98rem;max-width:none}
.card-art.featured{grid-template-rows:none;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);margin-bottom:1.6rem}
.card-art.featured .card-pic{border-bottom:0;border-right:1px solid var(--rule);display:flex;align-items:center}
.card-art.featured .card-pic svg{max-height:300px}
.card-art.featured .card-body{padding:2rem 2.2rem 2.2rem;align-self:center}
.card-art.featured .dek{font-size:1.1rem;font-style:italic;margin-top:.8rem}
.more .cards{margin-top:0}

@media (max-width:960px){
  .hero-grid{grid-template-columns:1fr;gap:1.6rem}
  .hero-art svg{max-height:240px}
  .cards{grid-template-columns:1fr 1fr}
  .card-art.featured{grid-template-columns:1fr}
  .card-art.featured .card-pic{border-right:0;border-bottom:1px solid var(--rule)}
}
@media (max-width:720px){
  .stats{grid-template-columns:1fr}
  .stats li{border-right:0;border-bottom:1px solid var(--rule);padding:1rem 0}
  .stats li+li{padding-left:0}
  .stats li:last-child{border-bottom:0}
  .numbers{grid-template-columns:1fr}
  .cards{grid-template-columns:1fr}
  .short{grid-template-columns:1fr;gap:.3rem}
  .art-body{padding:1.2rem 1rem 1.6rem}
  :root{--pad:1rem}
}

/* ---- instruments: the tools inside the articles ---- */
.instrument{margin:2.4rem 0;border:1px solid var(--rule-strong);background:var(--paper);box-shadow:0 22px 60px -34px rgba(27,26,23,.5);clear:both;position:relative}
.instrument::before{content:"";position:absolute;inset:4px;border:1px solid var(--rule);pointer-events:none}
.ins-head{padding:1.3rem 1.4rem .4rem}
.ins-head .kicker{margin-bottom:.5rem}
.ins-head p{font-size:1rem;color:var(--ink-soft);max-width:none;margin:0}
.ins-grid{display:grid;grid-template-columns:minmax(0,.95fr) minmax(0,1.25fr);gap:1.2rem 1.6rem;padding:.8rem 1.4rem 1rem;align-items:start}
.ins-controls{display:grid;gap:.9rem}
.ins-row{display:grid;grid-template-columns:1fr auto;gap:.2rem .8rem;align-items:baseline}
.ins-label{font-family:var(--mono);font-size:.64rem;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-soft)}
.ins-val{font-family:var(--serif);font-size:1.15rem;color:var(--ink);text-align:right}
.ins-row input[type=range]{grid-column:1 / -1;-webkit-appearance:none;appearance:none;width:100%;height:18px;background:transparent;margin:0;--p:50%}
.ins-row input[type=range]::-webkit-slider-runnable-track{height:2px;background:linear-gradient(to right,var(--accent) var(--p),var(--rule-strong) var(--p))}
.ins-row input[type=range]::-moz-range-track{height:2px;background:var(--rule-strong)}
.ins-row input[type=range]::-moz-range-progress{height:2px;background:var(--accent)}
.ins-row input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:16px;height:16px;border-radius:50%;background:var(--paper);border:1.5px solid var(--ink);margin-top:-7px;cursor:pointer;transition:transform .15s}
.ins-row input[type=range]::-moz-range-thumb{width:14px;height:14px;border-radius:50%;background:var(--paper);border:1.5px solid var(--ink);cursor:pointer}
.ins-row input[type=range]:active::-webkit-slider-thumb,.ins-row input[type=range]:focus-visible::-webkit-slider-thumb{transform:scale(1.2);border-color:var(--accent)}
.ins-art{background:var(--white);border:1px solid var(--rule);padding:.9rem;color:var(--ink)}
.ins-art svg{width:100%;height:auto;display:block}
.ins-art text{font-family:var(--mono);font-size:11px;letter-spacing:.04em;fill:var(--ink-soft)}
.ins-art .label{fill:var(--ink)} .ins-art .big{font-family:var(--serif);font-size:22px;letter-spacing:-.01em;fill:var(--ink)}
.ins-art .ink{stroke:var(--ink)} .ins-art .accent{stroke:var(--accent)} .ins-art .faint{stroke:var(--rule-strong)} .ins-art .accent-fill{fill:var(--accent)}
.ins-art rect,.ins-art path{transition:all .35s cubic-bezier(.2,.7,.2,1)}
.ins-verdict{margin:0;padding:1rem 1.4rem 1.2rem;border-top:1px solid var(--rule);font-size:1.02rem;color:var(--ink-2);max-width:none}
.ins-verdict b{color:var(--accent);font-weight:500}
.ins-share{display:flex;flex-wrap:wrap;gap:.6rem 1.2rem;align-items:center;padding:0 1.4rem 1.2rem}
.ins-share .sh{display:inline-flex;align-items:center;gap:.5rem;border:1px solid var(--rule-strong);padding:.55rem .9rem;font-family:var(--mono);font-size:.66rem;letter-spacing:.1em;text-transform:uppercase;color:var(--ink);background:transparent;cursor:pointer;transition:border-color .2s,color .2s}
.ins-share .sh:hover{border-color:var(--accent);color:var(--accent)}
.ins-share .sh.done{border-color:var(--ok);color:var(--ok)}
.ins-note{font-size:.86rem;color:var(--faint)}
.ins-checks{display:grid;gap:.8rem}
.ins-checks .consent{font-size:.96rem;color:var(--ink)}
@media (max-width:860px){.ins-grid{grid-template-columns:1fr}}

/* ---- plain-words terms: dotted underline, tap or hover for the everyday definition ---- */
dfn.term{font-style:normal;border-bottom:1px dotted var(--accent);cursor:help;position:relative;text-decoration:none}
dfn.term::after{content:attr(data-def);position:absolute;left:0;bottom:calc(100% + .5rem);z-index:20;width:min(22rem,70vw);background:var(--ink);color:var(--paper);font-family:var(--serif);font-style:normal;font-size:.92rem;line-height:1.45;padding:.7rem .9rem;box-shadow:0 14px 40px -20px rgba(27,26,23,.6);opacity:0;transform:translateY(4px);pointer-events:none;transition:opacity .18s,transform .18s}
dfn.term::before{content:"";position:absolute;left:.8rem;bottom:calc(100% + .15rem);border:.35rem solid transparent;border-top-color:var(--ink);opacity:0;transition:opacity .18s}
dfn.term:hover::after,dfn.term:focus::after,dfn.term.open::after,dfn.term:hover::before,dfn.term:focus::before,dfn.term.open::before{opacity:1;transform:none}
dfn.term:focus{outline:none}
.words-note{font-size:.86rem;color:var(--faint);margin:0 0 1.4rem;max-width:none}
.words-note dfn.term{color:var(--ink-soft)}

/* ---- illustrated hero: the engraving sits in the framed card; the diagram opens the body ---- */
.art-hero.has-photo .hero-grid{grid-template-columns:minmax(0,1fr) minmax(0,1.05fr)}
.hero-photo{grid-column:2;grid-row:1;padding:.6rem;background:var(--paper);border:1px solid var(--rule);box-shadow:0 22px 60px -30px rgba(27,26,23,.5);position:relative}
.hero-photo::after{content:"";position:absolute;inset:.6rem;box-shadow:inset 0 0 0 1px var(--rule);pointer-events:none}
.hero-photo img{display:block;width:100%;height:auto;aspect-ratio:16 / 9;object-fit:cover;filter:sepia(.08) contrast(1.02)}
.art-hero.has-photo .hero-grid{display:grid}
.art-hero.has-photo .hero-text{grid-column:1;grid-row:1}
.fig-open{margin:0 0 2rem;border-bottom:1px solid var(--rule);padding-bottom:1.6rem}
.fig-open .hero-art{padding:1rem;background:var(--paper);border:1px solid var(--rule);box-shadow:none;max-width:34rem}
.card-art.photo .card-pic{padding:0;background:var(--paper-deep)}
.card-art.photo .card-pic img{display:block;width:100%;height:auto;aspect-ratio:16 / 9;object-fit:cover}
.card-art.featured.photo .card-pic img{aspect-ratio:auto;height:100%}
@media (max-width:960px){.art-hero.has-photo .hero-grid{grid-template-columns:1fr}.hero-photo,.art-hero.has-photo .hero-text{grid-column:1}.hero-photo{grid-row:2}.art-hero.has-photo .hero-text{grid-row:1}}

/* ---- the short series on the Articles page ---- */
.series-head{margin:3.4rem 0 1.6rem;padding-top:2.2rem;border-top:3px double var(--rule-strong)}
.series-head .sec-num{display:block;margin-bottom:.8rem}
.series-head h2{font-size:clamp(1.5rem,2.6vw,2.2rem);font-weight:400;line-height:1.15;max-width:26ch}
.series-head p{color:var(--ink-soft);margin-top:.6rem}