/* ============================================================
   OOWIA - JOURNAL (blog.css)
   Page-specific styles on top of public.css (tokens, nav, buttons,
   reveal engine, footer and a11y live in public.css).
   ============================================================ */

/* phero variants over public.css */
.phero{padding-top:calc(var(--navh) + clamp(36px,6vh,80px))}
.phero-h{font-size:clamp(2rem,min(8.6vw,17vh),9.2rem);white-space:nowrap;overflow-wrap:break-word}
/* Author pages put a variable-length name in the hero, and .phero clips its
   overflow, so nowrap hard-cut the name off-screen with no ellipsis and no
   way to scroll to it. The post hero opts out inline; the author hero needs
   an equivalent class because its markup is shared with the index. */
.phero-h--flow{white-space:normal;overflow-wrap:break-word}
.phero-h .ln-sub{font-size:clamp(1.6rem,min(4.4vw,9vh),4.4rem)}
.phero-row{margin-top:clamp(20px,3vh,36px);padding-bottom:clamp(16px,2vw,32px)}

/* ============ AUTHOR HERO (author slug page) ============ */
/* The author photo is orientation-agnostic: no fixed aspect-ratio and no
   object-fit crop anywhere here, so the same markup renders a 2:1
   landscape cover and a 4:5 portrait without changes - height:auto follows
   the intrinsic ratio (width/height attributes, when the local file size
   is known, reserve that space before load). The only per-orientation
   difference is a display-width cap, so a portrait never balloons into a
   full-width tower and a landscape never shrinks to a thumbnail. */
.aphero-wrap{display:grid;grid-template-columns:minmax(0,1fr) minmax(280px,460px);gap:clamp(28px,4vw,64px);align-items:center}
.aphero-text{min-width:0}
.aphero-text .phero-row{flex-direction:column;align-items:flex-start;gap:16px}
.aphero-role{margin:14px 0 0}
/* Issuer name after the designation: same line, quieter tone so the
   designation stays the lead word. */
.aphero-issuer{color:var(--ink-60);text-transform:none;letter-spacing:.02em;font-weight:500}
.aphoto{margin:0;width:100%;max-width:560px;justify-self:center}
.aphoto--landscape{max-width:560px}
.aphoto--portrait{max-width:380px}
/* Avatar/preset fallbacks are small square assets (152px, or a generic SVG
   when nothing is uploaded): never blow them up to hero-photo size. */
.aphoto--avatar,.aphoto--preset{max-width:280px}
.aphoto--preset img{border-radius:50%}
.aphoto img{display:block;width:100%;height:auto;border:1px solid var(--line);border-radius:clamp(18px,2.4vw,32px);background:#e9e4dc;box-shadow:0 40px 80px -40px rgba(11,11,12,.45)}
@media(max-width:900px){
  .aphero-wrap{grid-template-columns:1fr}
  .aphoto{max-width:560px}
  .aphoto--portrait{max-width:420px}
  .aphoto--avatar,.aphoto--preset{max-width:240px}
}

/* ============ MARQUEE ============ */
.marq{overflow:hidden;border-block:1px solid var(--line);padding:clamp(14px,1.5vw,20px) 0;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
.marq-t{display:flex;width:max-content;animation:marq 42s linear infinite}@media(hover:hover){
.marq:hover .marq-t{animation-play-state:paused}}
@keyframes marq{to{transform:translateX(-50%)}}
.marq-t span{display:inline-flex;align-items:center;gap:clamp(20px,2.6vw,40px);padding-right:clamp(20px,2.6vw,40px);
  font-family:"Inter Tight";font-size:clamp(1.05rem,1.9vw,1.7rem);font-weight:500;letter-spacing:-.035em;color:var(--ink-60);white-space:nowrap}
.marq-t b{font-weight:500}
.marq-t .m-it{font-family:"Instrument Serif";font-style:italic;font-weight:400;color:var(--crimson)}
.marq-t .sep{width:6px;height:6px;border-radius:50%;background:var(--crimson);opacity:.65;flex:none}

/* ============ FILTER BAR ============ */
/* .fbar overrides over public.css */
.fbar{margin-top:clamp(6px,1vw,14px);padding-block:12px;-webkit-backdrop-filter:blur(16px) saturate(1.4);backdrop-filter:blur(16px) saturate(1.4)}
.fbar-in{position:relative;justify-content:space-between;gap:18px;flex-wrap:nowrap}
/* overflow:hidden clips at the padding edge, so the row needs breathing
   room inside it: a hovered chip lifts 1px (public.css .chip:hover) and the
   More chip's focus outline sits 4px out, and with zero padding that lift
   and outline painted outside the box and got chopped at the border. The
   negative margin keeps the bar's layout height/width unchanged. */
.chips{display:flex;align-items:center;gap:8px;flex-wrap:nowrap;flex:1 1 auto;min-width:0;overflow:hidden;padding:6px 2px;margin:-6px -2px}
/* .chip base in public.css */
.chip{flex:none}
.fcount{margin:0;flex:none;font-size:.76rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-40);white-space:nowrap}
.fcount b{color:var(--crimson);font-weight:600}
.fcount.flip{animation:fcFlip .45s var(--ease)}
@keyframes fcFlip{0%{opacity:0;transform:translateY(8px)}100%{opacity:1;transform:none}}
@media(max-width:640px){.fcount{display:none}}

/* ---- filter overflow: More button + dropdown menus + mobile select ---- */
/* author display rules (e.g. .chip{display:inline-flex}) beat the UA
   [hidden]{display:none}, so re-assert it or More/menu show when empty */
#fmore[hidden],.fmenu[hidden]{display:none}
.chip.more svg{transition:transform .35s var(--ease)}
.chip.more.open{border-color:var(--ink-40);color:var(--ink)}
.chip.more.open svg{transform:rotate(180deg)}
.chip.more:focus-visible{outline:2px solid var(--crimson);outline-offset:2px}
.fmenu{position:absolute;top:calc(100% + 8px);right:0;z-index:80;min-width:min(260px,80vw);max-height:min(320px,60vh);overflow:auto;
  background:var(--ivory-pure);border:1px solid var(--line);border-radius:16px;
  box-shadow:0 24px 60px -24px rgba(11,11,12,.35);padding:6px;
  opacity:0;transform:translateY(-6px) scale(.98);transform-origin:top right;transition:opacity .18s ease,transform .22s var(--ease)}
.fmenu.open{opacity:1;transform:none}
.fmenu--sheet{left:0;right:0;transform-origin:top center}
.fmi{display:flex;align-items:center;gap:10px;width:100%;text-align:left;padding:10px 12px;border:0;border-radius:10px;
  background:none;font:inherit;font-size:.86rem;font-weight:500;color:var(--ink-80);cursor:pointer;white-space:nowrap}
.fmi b{margin-left:auto;font-size:.72rem;font-weight:600;letter-spacing:.04em;color:var(--ink-40)}
.fmi:hover{background:rgba(11,11,12,.06);color:var(--ink)}
.fmi.on{background:rgba(11,11,12,.07);color:var(--ink)}
.fmi:focus-visible{outline:2px solid var(--crimson);outline-offset:-2px}
.fselect{display:none}
@media(max-width:640px){
  #chips{display:none}
  .fbar-in{gap:0}
  .fselect{position:relative;display:flex;flex:1 1 auto;align-items:center;justify-content:center;gap:10px;width:100%;padding:13px 40px;border:1px solid var(--line);border-radius:14px;
    background:var(--ivory-pure);font:inherit;font-size:.9rem;color:var(--ink);cursor:pointer;text-align:center}
  .fselect b{font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .fselect .fs-chev{position:absolute;right:16px;flex:none;transition:transform .35s var(--ease)}
  .fselect.open{border-color:var(--ink-40)}
  .fselect.open .fs-chev{transform:rotate(180deg)}
  .fselect:focus-visible{outline:2px solid var(--crimson);outline-offset:2px}
}

/* ============ FEATURED ============ */
.feat{position:relative;display:grid;grid-template-columns:1.04fr .96fr;border-radius:clamp(20px,2.4vw,34px);
  overflow:hidden;background:var(--ink);color:var(--ivory);margin-top:clamp(22px,3vw,40px);min-height:min(560px,72vw);
  box-shadow:0 60px 110px -60px rgba(11,11,12,.5)}
.feat-media{position:relative;overflow:hidden;grid-column:2;grid-row:1;background:#161617}
.feat .parx{position:absolute;left:0;right:0;top:-9%;bottom:-9%;will-change:transform}
.feat .parx img{width:100%;height:100%;object-fit:cover;transform:scale(1.22);transition:transform 1.7s var(--ease),opacity .6s ease}
.feat.is-in .parx img{transform:scale(1.03)}@media(hover:hover){
.feat:hover .parx img{transform:scale(1.09)}}
.feat-glow{position:absolute;inset:auto -18% -30% -18%;height:75%;pointer-events:none;
  background:radial-gradient(ellipse at 35% 100%,rgba(200,16,46,.3),transparent 62%);filter:blur(28px)}
.feat-num{position:absolute;top:18px;right:20px;z-index:2;font-family:"Inter Tight";font-weight:600;font-size:.78rem;
  letter-spacing:.16em;color:rgba(247,244,239,.85);padding:7px 12px;border:1px solid rgba(247,244,239,.25);border-radius:99px;
  background:rgba(11,11,12,.28);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.feat-body{grid-column:1;grid-row:1;position:relative;z-index:2;padding:clamp(26px,3.6vw,64px);
  display:flex;flex-direction:column;justify-content:flex-start;gap:0;pointer-events:none}
.feat-body>*{pointer-events:auto}
.feat-k{display:block;font-size:.64rem;font-weight:600;letter-spacing:.24em;text-transform:uppercase;color:var(--crimson);
  filter:brightness(1.35)}
.feat-body h2{font-size:clamp(1.8rem,3.3vw,3.3rem);line-height:1;letter-spacing:-.045em;margin:16px 0 0;max-width:20ch}
.feat-body p{margin:16px 0 0;font-size:clamp(.9rem,1.05vw,1.02rem);line-height:1.6;color:rgba(247,244,239,.62);max-width:48ch}
.feat-meta{display:flex;align-items:center;gap:10px;margin-top:18px;font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;
  color:rgba(247,244,239,.5);font-weight:500}
.feat-meta i{width:4px;height:4px;border-radius:50%;background:var(--crimson)}
.feat-body .feat-author{display:flex;align-items:center;gap:9px;margin:0;font-size:.85rem;line-height:1.2;color:rgba(247,244,239,.55);max-width:none}
.feat-body .feat-author::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--crimson);flex:none}
.feat-body .feat-author[hidden]{display:none}
.feat-author-name{color:var(--ivory);font-weight:600;letter-spacing:-.01em}
.feat-body .txtlink{margin-top:auto;padding-top:22px;color:var(--ivory)}@media(hover:hover){
.feat-body .txtlink:hover{color:#fff}}
/* clickable hero: image overlay link + title link (same post as "Read the post") */
.feat-media-go{position:absolute;inset:0;z-index:1;display:block}
.feat-media-go:focus-visible{outline:2px solid var(--crimson);outline-offset:-2px}
.feat-body h2 a.feat-t-link{color:inherit;text-decoration:none;transition:color .35s}@media(hover:hover){
.feat-body h2 a.feat-t-link:hover{color:#fff}}
.feat-body h2 a.feat-t-link:focus-visible{outline:2px solid var(--crimson);outline-offset:4px;border-radius:6px}
@media(max-width:900px){
  .feat{display:flex;flex-direction:column;min-height:0}
  .feat-media{min-height:0;aspect-ratio:16/10;grid-column:auto;grid-row:auto}
  .feat .parx{top:-6%;bottom:-6%}
  .feat-body{padding:clamp(20px,5vw,30px)}
}

/* ============ POST GRID ============ */
/* Stagger is a CLASS, not :nth-child(even): blog.js keeps every post in the
   grid and hides non-matching ones with .hide, and :nth-child counts
   display:none siblings - so the offset followed the original index instead
   of the visual row and the rhythm broke on every filter. blog.js now stamps
   .alt on every second VISIBLE card (restagger()); the server-rendered grid
   only ever contains visible cards, so the SSR stamp is the loop index.
   Declared BEFORE the media queries below so the 620px reset still wins. */
.bgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(14px,1.6vw,26px);margin-top:clamp(22px,3vw,40px)}
.bpost.alt{margin-top:clamp(20px,3vw,48px)}
@media(max-width:1100px){.bgrid{grid-template-columns:1fr 1fr}}
@media(max-width:620px){.bgrid{grid-template-columns:1fr 1fr;gap:10px}.bpost.alt{margin-top:0}}
.bpost.hide{display:none}
/* .bpost card in public.css (focus-within included) */

/* ============ PAGER ============ */
.pager{display:flex;align-items:center;justify-content:center;gap:8px;margin-top:clamp(26px,3vw,44px);flex-wrap:wrap}
.pg{display:inline-flex;align-items:center;justify-content:center;min-width:42px;height:42px;padding:0 14px;border:1px solid var(--line);
  border-radius:99px;background:var(--ivory-pure);color:var(--ink-80);
  font-family:"Inter Tight",sans-serif;font-size:.85rem;font-weight:500;text-decoration:none;
  transition:border-color .35s,color .35s,background .35s,transform .45s var(--ease)}
.pg-nav{min-width:0}
@media(hover:hover){
.pg[href]:hover{border-color:var(--ink);color:var(--ink);transform:translateY(-2px)}}
.pg.on{background:var(--ink);border-color:var(--ink);color:var(--ivory)}
.pg:focus-visible{outline:2px solid var(--crimson);outline-offset:2px}

/* ============ THEMES BAND ============ */
/* band/shead overrides over public.css */
.shead{margin-bottom:clamp(30px,4vw,56px)}
.shead .r,.shead .tr{max-width:44ch}
.tlist{display:grid;grid-template-columns:1fr 1fr;gap:0 clamp(28px,4vw,72px)}
@media(max-width:820px){.tlist{grid-template-columns:1fr}}
.trow{display:flex;align-items:center;gap:clamp(14px,1.6vw,22px);width:100%;text-align:left;
  padding:clamp(18px,2vw,26px) 4px;border-bottom:1px solid rgba(247,244,239,.12);color:var(--ivory);position:relative}
.trow:nth-last-child(-n+2){border-bottom:0}
@media(max-width:820px){.trow:nth-last-child(-n+2){border-bottom:1px solid rgba(247,244,239,.12)}.trow:last-child{border-bottom:0}}
.trow::after{content:"";position:absolute;left:0;bottom:-1px;height:1px;width:100%;background:var(--crimson);
  transform:scaleX(0);transform-origin:left;transition:transform .55s var(--ease)}.trow:focus-visible::after{transform:scaleX(1)}@media(hover:hover){.trow:hover::after{transform:scaleX(1)}}
.tn{font-family:"Instrument Serif";font-style:italic;font-size:1.05rem;color:var(--crimson);filter:brightness(1.3);min-width:2.1em}
.tt{font-family:"Inter Tight";font-weight:600;font-size:clamp(1.4rem,2.7vw,2.3rem);letter-spacing:-.045em;line-height:1;
  color:rgba(247,244,239,.88);transition:transform .5s var(--ease),color .4s}@media(hover:hover){
.trow:hover .tt{transform:translateX(10px);color:#fff}}
.tc{margin-left:auto;font-size:.76rem;letter-spacing:.12em;text-transform:uppercase;color:rgba(247,244,239,.42);white-space:nowrap}
.ta{flex:none;width:34px;height:34px;border-radius:50%;border:1px solid rgba(247,244,239,.22);display:grid;place-items:center;
  color:rgba(247,244,239,.75);opacity:0;transform:translateX(-8px) scale(.85);transition:all .45s var(--ease)}.trow:focus-visible .ta{opacity:1;transform:none}@media(hover:hover){.trow:hover .ta{opacity:1;transform:none}}@media(hover:hover){
.trow:hover .ta{background:var(--crimson);border-color:var(--crimson);color:#fff}}
.trow:focus-visible{outline:2px solid var(--crimson);outline-offset:4px;border-radius:8px}

/* ============ NEWSLETTER ============ */
.news{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(28px,5vw,90px);align-items:center;
  border-top:1px solid var(--line);padding-top:clamp(28px,3.5vw,48px)}
@media(max-width:880px){.news{grid-template-columns:1fr}}
/* .nform/.ndone in public.css; #nstat[hidden] must beat display:block */
#nstat[hidden]{display:none}
.news.done .ndone{display:flex;animation:fcFlip .5s var(--ease)}
.news.done .ndone circle,.news.done .ndone path{stroke-dashoffset:0}
.news.done .nform,.news.done .nlist{display:none}

/* ============ POST DETAIL LAYOUT ============ */
/* .display sets text-wrap:balance, which equalizes wrapped lines to a
   shorter width. For the post title we want lines to fill the container,
   so fall back to normal wrapping. */
.phero-h--post{text-wrap:wrap}
/* byline: clickable author + date/time/words with crimson separators */
.pbyline{display:flex;align-items:center;flex-wrap:wrap;gap:10px 14px;font-size:clamp(.92rem,1.1vw,1.05rem);color:var(--ink-60)}
.pbyline .bdot{width:5px;height:5px;border-radius:50%;background:var(--crimson);flex:none}
.pbyline-author{color:var(--ink);font-weight:600;position:relative;padding-bottom:2px}
.pbyline-author::after{content:"";position:absolute;left:0;bottom:-1px;height:1px;width:100%;background:var(--crimson);transform:scaleX(0);transform-origin:left;transition:transform .45s var(--ease)}
.pbyline-author:focus-visible::after,.pbyline-author:hover::after{transform:scaleX(1)}
.pbyline-author:focus-visible{outline:2px solid var(--crimson);outline-offset:4px;border-radius:4px}
.post-layout{display:grid;grid-template-columns:minmax(0,7fr) minmax(300px,3fr);gap:clamp(32px,5vw,72px);align-items:start}
.post-main{min-width:0}
.post-aside{position:sticky;top:calc(var(--navh) + 24px);align-self:start}
.pindex{position:relative;overflow:hidden;background:var(--ink);color:var(--ivory);border-radius:clamp(16px,2vw,26px);padding:clamp(22px,2.6vw,34px)}
.pindex::before{content:"";position:absolute;right:-32%;top:-34%;width:92%;height:92%;border-radius:50%;pointer-events:none;
  background:radial-gradient(circle,rgba(200,16,46,.2),transparent 62%);filter:blur(26px)}
.pindex>*{position:relative}
.pindex .kicker{color:rgba(247,244,239,.52);margin-bottom:14px}
.pindex-h{font-size:clamp(1.5rem,2vw,1.9rem);line-height:1;letter-spacing:-.045em;margin-bottom:12px;white-space:normal}
.pindex-lede{font-size:.92rem;line-height:1.55;color:rgba(247,244,239,.55);margin:0 0 clamp(18px,2vw,26px);max-width:34ch}
.pindex-list{display:flex;flex-direction:column}
.pindex-row{display:flex;align-items:center;gap:12px;width:100%;text-align:left;
  padding:clamp(14px,1.4vw,18px) 0;border-bottom:1px solid rgba(247,244,239,.12);color:var(--ivory);position:relative}
.pindex-row:last-child{border-bottom:0}
.pindex-row::after{content:"";position:absolute;left:0;bottom:-1px;height:1px;width:100%;background:var(--crimson);
  transform:scaleX(0);transform-origin:left;transition:transform .55s var(--ease)}.pindex-row:focus-visible::after{transform:scaleX(1)}@media(hover:hover){.pindex-row:hover::after{transform:scaleX(1)}}
.pindex-row .tn{font-family:"Instrument Serif";font-style:italic;font-size:.95rem;color:var(--crimson);filter:brightness(1.3);min-width:1.9em}
.pindex-row .tt{font-family:"Inter Tight";font-weight:600;font-size:1.05rem;letter-spacing:-.03em;line-height:1;
  color:rgba(247,244,239,.9);transition:transform .5s var(--ease),color .4s}@media(hover:hover){
.pindex-row:hover .tt{transform:translateX(8px);color:#fff}}
.pindex-row .tc{margin-left:auto;font-size:.68rem;letter-spacing:.1em;text-transform:uppercase;color:rgba(247,244,239,.42);white-space:nowrap}
.pindex-row .ta{flex:none;width:28px;height:28px;border-radius:50%;border:1px solid rgba(247,244,239,.22);display:grid;place-items:center;
  color:rgba(247,244,239,.75);opacity:0;transform:translateX(-6px) scale(.85);transition:all .45s var(--ease)}.pindex-row:focus-visible .ta{opacity:1;transform:none}@media(hover:hover){.pindex-row:hover .ta{opacity:1;transform:none;background:var(--crimson);border-color:var(--crimson);color:#fff}}
.pindex-row:focus-visible{outline:2px solid var(--crimson);outline-offset:4px;border-radius:8px}
@media(max-width:1080px){
  .post-layout{grid-template-columns:1fr}
  .post-aside{position:static;margin-top:clamp(36px,5vw,56px)}
}

/* ============ POST TABLES (markdown tables in .pbody) ============ */
/* Parsedown emits bare <table> markup; content_wrap_tables() in
   lib/functions-content.php wraps each one in .ptable-wrap and stamps
   data-cols. The wrapper (not the table) owns horizontal scrolling, so a
   9-column spec table keeps a readable minimum per column and scrolls on
   a phone instead of crushing every column into the 72ch prose measure
   (the old render: the longest cell stole the width, the rest wrapped
   one word per line). On desktop the wrapper breaks out of the prose
   measure to use the full post column. */
.pbody .ptable-wrap{
  position:relative;margin:1.8em 0;overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch;
  border:1px solid var(--line);border-radius:16px;background:var(--ivory-pure);
  box-shadow:0 18px 40px -28px rgba(11,11,12,.25);scrollbar-width:thin;
}
.pbody .ptable-wrap:focus-visible{outline:2px solid var(--crimson);outline-offset:3px}
/* Scroll affordance for wide tables: CSS scroll shadows. The content
   shadows (local attachment) scroll with the table and cover the edge
   shadows (scroll attachment) exactly when that edge is reached, so a
   fade appears only while there is more table in that direction.
   No JS, works in baked snapshots and with JS off. */
.pbody .ptable-wrap--wide{
  background-image:
    linear-gradient(90deg,rgba(253,252,250,.92),transparent),
    linear-gradient(-90deg,rgba(253,252,250,.92),transparent),
    linear-gradient(90deg,rgba(11,11,12,.16),transparent),
    linear-gradient(-90deg,rgba(11,11,12,.16),transparent);
  background-position:left center,right center,left center,right center;
  background-repeat:no-repeat;
  background-size:26px 100%,26px 100%,10px 100%,10px 100%;
  background-attachment:scroll,scroll,local,local;
}
@media(min-width:1100px){
  .pbody .ptable-wrap{margin-inline:calc(clamp(18px,3vw,48px) / -2)}
}
.pbody .ptable-wrap table{width:100%;min-width:560px;border-collapse:separate;border-spacing:0;font-size:.92rem;line-height:1.5}
/* ~110px per column floor, so 9 columns land near 990px and scroll in
   place rather than squeezing; 2-4 column comparison tables fit in full. */
.pbody .ptable-wrap table[data-cols="5"]{min-width:640px}
.pbody .ptable-wrap table[data-cols="6"]{min-width:720px}
.pbody .ptable-wrap table[data-cols="7"]{min-width:800px}
.pbody .ptable-wrap table[data-cols="8"]{min-width:900px}
.pbody .ptable-wrap table[data-cols="9"]{min-width:990px}
.pbody .ptable-wrap table[data-cols="10"]{min-width:1080px}
.pbody .ptable-wrap table[data-cols="11"]{min-width:1180px}
.pbody .ptable-wrap table[data-cols="12"]{min-width:1280px}
/* Row-label column keeps a floor on narrow comparison tables so Factor /
   Process Name never wraps to two words tall while values get the space. */
.pbody .ptable-wrap table[data-cols="2"] td:first-child,.pbody .ptable-wrap table[data-cols="3"] td:first-child,
.pbody .ptable-wrap table[data-cols="4"] td:first-child,.pbody .ptable-wrap table[data-cols="5"] td:first-child,
.pbody .ptable-wrap table[data-cols="6"] td:first-child{min-width:9.5rem}
.pbody .ptable-wrap th,.pbody .ptable-wrap td{padding:13px 16px;text-align:left;vertical-align:top;overflow-wrap:break-word}
.pbody .ptable-wrap thead th{background:var(--ink);color:var(--ivory);font-family:"Inter Tight",sans-serif;font-size:.72rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;line-height:1.35}
.pbody .ptable-wrap thead th:first-child{border-top-left-radius:15px}
.pbody .ptable-wrap thead th:last-child{border-top-right-radius:15px}
.pbody .ptable-wrap tbody th[scope="row"],.pbody .ptable-wrap tbody td[scope="row"]{font-family:"Inter Tight",sans-serif;font-weight:600;color:var(--ink);white-space:normal}
.pbody .ptable-wrap tbody tr+tr th,.pbody .ptable-wrap tbody tr+tr td{border-top:1px solid var(--line)}
/* Visible column lines to match the row lines: every cell after the first
   gets a left border (the wrapper border closes the outer edge). */
.pbody .ptable-wrap th+th,.pbody .ptable-wrap th+td,.pbody .ptable-wrap td+th,.pbody .ptable-wrap td+td{border-left:1px solid var(--line)}
/* One solid zebra tone for cells and the sticky column alike: the old
   rgba() cell tint over ivory vs the solid sticky tint read as a mismatched
   vertical band down the first column. */
.pbody .ptable-wrap tbody tr:nth-child(even) td,.pbody .ptable-wrap tbody tr:nth-child(even) th{background:#f3efe8}
.pbody .ptable-wrap td:empty::before{content:"-";color:var(--ink-40)}
/* Sticky first column: the row label stays visible while a wide table
   scrolls sideways (the 9-column spec table loses its process name first). */
.pbody .ptable-wrap th:first-child,.pbody .ptable-wrap td:first-child{
  position:sticky;left:0;z-index:1;background:var(--ivory-pure);box-shadow:1px 0 0 var(--line);
}
.pbody .ptable-wrap thead th:first-child{background:var(--ink);z-index:2}
.pbody .ptable-wrap tbody tr:nth-child(even) th:first-child,.pbody .ptable-wrap tbody tr:nth-child(even) td:first-child{background:#f3efe8}
.pbody .ptable-wrap td a{color:var(--crimson);text-decoration:underline;text-underline-offset:3px}
/* A table with no wrapper (any other surface reusing .pbody) still gets
   the bordered, padded treatment and scrolls on its own. */
.pbody>table{display:block;max-width:100%;overflow-x:auto;border:1px solid var(--line);border-radius:16px;background:var(--ivory-pure)}
.pbody>table th,.pbody>table td{padding:12px 16px;text-align:left;vertical-align:top}
.pbody>table thead th{background:var(--ink);color:var(--ivory);font-size:.72rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase}
.pbody>table tbody tr+tr th,.pbody>table tbody tr+tr td{border-top:1px solid var(--line)}
.pbody>table th+th,.pbody>table th+td,.pbody>table td+th,.pbody>table td+td{border-left:1px solid var(--line)}
/* Phone layout: a scrolled comparison table is unreadable, so below 640px
   each row becomes a card and each cell a label/value pair (labels come
   from the column headers via data-label). The first cell is the card
   title. This also rescues the wide spec table on a phone. */
@media(max-width:640px){
  .pbody .ptable-wrap{overflow:visible;border:0;background:transparent;box-shadow:none}
  .pbody .ptable-wrap table,.pbody .ptable-wrap table[data-cols]{min-width:0;width:100%}
  .pbody .ptable-wrap thead{display:none}
  .pbody .ptable-wrap tbody tr{display:block;border:1px solid var(--line);border-radius:16px;background:var(--ivory-pure);padding:14px 16px 10px;margin-bottom:12px}
  .pbody .ptable-wrap tbody tr:nth-child(even) td,.pbody .ptable-wrap tbody tr:nth-child(even) th{background:none}
  .pbody .ptable-wrap th:first-child,.pbody .ptable-wrap td:first-child{position:static;box-shadow:none;background:none}
  .pbody .ptable-wrap tbody td,.pbody .ptable-wrap tbody th{display:grid;grid-template-columns:minmax(96px,36%) 1fr;gap:14px;padding:7px 0;border:0;border-left:0}
  .pbody .ptable-wrap tbody td::before{content:attr(data-label);font-size:.66rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-40);padding-top:3px}
  .pbody .ptable-wrap tbody td:first-child{display:block;font-family:"Inter Tight",sans-serif;font-weight:600;font-size:1.02rem;color:var(--ink);padding:0 0 10px;margin-bottom:6px;border-bottom:1px solid var(--line)}
  .pbody .ptable-wrap tbody td:first-child::before{content:none}
  .pbody .ptable-wrap tbody td:empty::before{content:attr(data-label) "  -"}
}
@media print{
  .pbody .ptable-wrap{overflow:visible;border:1px solid #999;box-shadow:none}
  .pbody .ptable-wrap table{min-width:0}
  .pbody .ptable-wrap thead th{background:#fff;color:#000;border-bottom:2px solid #000}
  .pbody .ptable-wrap th:first-child,.pbody .ptable-wrap td:first-child{position:static;box-shadow:none;background:none}
  .pbody .ptable-wrap tbody tr{break-inside:avoid}
}

/* ============ ABOUT THE AUTHOR (post detail) ============ */
.pauthor{display:flex;align-items:flex-start;gap:clamp(16px,2vw,24px);margin-top:clamp(28px,4vw,48px);
  padding:clamp(20px,2.6vw,32px);border:1px solid var(--line);border-radius:clamp(16px,2vw,26px);background:var(--ivory-pure)}
.pauthor-avatar{flex:none;width:clamp(56px,6vw,76px);height:clamp(56px,6vw,76px);border-radius:50%;overflow:hidden;
  background:#e9e4dc;border:1px solid var(--line);padding:0;cursor:pointer;
  transition:transform .4s var(--ease),border-color .35s,box-shadow .4s var(--ease)}
.pauthor-avatar img{width:100%;height:100%;object-fit:cover;display:block}@media(hover:hover){
.pauthor-avatar:hover{transform:scale(1.05);border-color:var(--ink-40);box-shadow:0 14px 30px -18px rgba(11,11,12,.5)}}
.pauthor-avatar:focus-visible{outline:2px solid var(--crimson);outline-offset:3px}
/* author card modal (large photo loads only after page load - see inline script) */
.pauthor-modal[hidden]{display:none}
.pauthor-modal{position:fixed;inset:0;z-index:1000;display:flex;align-items:center;justify-content:center;padding:20px;
  background:rgba(11,11,12,.55);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
  opacity:0;transition:opacity .25s ease;overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch}
.pauthor-modal.open{opacity:1}
.pauthor-modal-card{position:relative;width:min(660px,100%);margin:auto;flex:none;text-align:left;overflow:hidden;
  scrollbar-width:none;-ms-overflow-style:none;
  background:var(--ivory-pure);border:1px solid var(--line);border-radius:clamp(18px,2.4vw,28px);
  box-shadow:0 60px 110px -40px rgba(11,11,12,.55);
  transform:translateY(14px) scale(.97);transition:transform .3s var(--ease)}
.pauthor-modal-card::-webkit-scrollbar{width:0;height:0;display:none}
.pauthor-modal.open .pauthor-modal-card{transform:none}
.pauthor-modal-cover{background:#e9e4dc}
.pauthor-modal-cover img{display:block;width:100%;height:auto;aspect-ratio:21/10;object-fit:cover;background:#e9e4dc}
.pauthor-modal-body{padding:0 clamp(22px,3vw,36px) clamp(26px,3.4vw,40px)}
.pauthor-modal-card--bare .pauthor-modal-body{padding-top:clamp(26px,3.4vw,40px)}
.pauthor-modal-card--bare .pauthor-modal-head{margin-top:0}
.pauthor-modal-head{display:flex;align-items:flex-end;gap:clamp(16px,2.4vw,24px);margin-top:calc(clamp(88px,12vw,112px)/-2)}
.pauthor-modal-avatar{flex:none;width:clamp(88px,12vw,112px);height:clamp(88px,12vw,112px);border-radius:50%;object-fit:cover;
  display:block;background:#e9e4dc;border:4px solid var(--ivory-pure);box-shadow:0 18px 40px -20px rgba(11,11,12,.5)}
.pauthor-modal-id{min-width:0;flex:1;padding-bottom:4px}
.pauthor-modal-id .pauthor-name{font-size:clamp(1.6rem,2.6vw,2.2rem)}
.pauthor-modal-body>.pauthor-bio{margin-top:16px}
.pauthor-modal-sub{margin:clamp(20px,2.6vw,28px) 0 6px}
.pauthor-modal-list{display:flex;flex-direction:column}
.pauthor-modal-row{display:flex;align-items:center;gap:12px;width:100%;text-align:left;
  padding:13px 2px;border-bottom:1px solid var(--line);color:var(--ink)}
.pauthor-modal-row:last-child{border-bottom:0}
.pauthor-modal-row .tn{font-family:"Instrument Serif";font-style:italic;font-size:.95rem;color:var(--crimson);min-width:1.9em}
.pauthor-modal-row .tt{font-family:"Inter Tight";font-weight:600;font-size:1rem;letter-spacing:-.02em;line-height:1.25;color:var(--ink);
  transition:transform .4s var(--ease),color .4s}@media(hover:hover){
.pauthor-modal-row:hover .tt{transform:translateX(6px)}}
.pauthor-modal-row .tc{margin-left:auto;font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-40);white-space:nowrap}
.pauthor-modal-row .ta{flex:none;width:28px;height:28px;border-radius:50%;border:1px solid var(--line);display:grid;place-items:center;
  color:var(--ink-60);opacity:0;transform:translateX(-6px) scale(.85);transition:all .4s var(--ease)}.pauthor-modal-row:focus-visible .ta{opacity:1;transform:none}@media(hover:hover){.pauthor-modal-row:hover .ta{opacity:1;transform:none;background:var(--crimson);border-color:var(--crimson);color:#fff}}
.pauthor-modal-row:focus-visible{outline:2px solid var(--crimson);outline-offset:2px;border-radius:8px}
@media(max-width:560px){
  .pauthor-modal-row .tc{display:none}
  .pauthor-modal-cover img{aspect-ratio:16/10}
}
.pauthor-modal-close{position:absolute;top:12px;right:12px;z-index:2;width:34px;height:34px;border-radius:50%;
  border:1px solid transparent;background:rgba(11,11,12,.5);color:#fff;font-size:.85rem;line-height:1;cursor:pointer;
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
  transition:color .3s,background .3s}@media(hover:hover){
.pauthor-modal-close:hover{color:#fff;background:rgba(11,11,12,.72)}}
.pauthor-modal-close:focus-visible{outline:2px solid var(--crimson);outline-offset:2px}
.pauthor-modal-card .txtlink{margin-top:18px}
.pauthor-modal-card .txtlink:focus-visible{outline:2px solid var(--crimson);outline-offset:4px;border-radius:4px}
.pauthor-body{min-width:0;flex:1}
.pauthor-body .kicker{margin-bottom:10px}
.pauthor-name{margin:0;font-family:"Inter Tight",sans-serif;font-weight:600;font-size:clamp(1.25rem,1.8vw,1.6rem);letter-spacing:-.035em;line-height:1.1;color:var(--ink)}
.pauthor-role{margin:6px 0 0;font-size:.78rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--crimson)}
.pauthor-bio{margin:10px 0 0;font-size:.92rem;line-height:1.65;color:var(--ink-80);max-width:62ch}
.pauthor-meta{margin:8px 0 0;font-size:.88rem;line-height:1.55;color:var(--ink-60)}
.pauthor-body .txtlink{margin-top:14px}
.pauthor-body .txtlink:focus-visible{outline:2px solid var(--crimson);outline-offset:4px;border-radius:4px}

/* a11y in public.css */