/**
 * Single posts and pages: the reading experience.
 *
 * Loaded only on singular views. The shell (top bar, rail, cards, footer)
 * lives in style.css and is shared with every other template.
 */

/* ══════════════════════════════════════════════════════════
   1. Article head
   ══════════════════════════════════════════════════════════ */
.article{margin:0 auto}
.article-head{
  max-width:800px;margin:0 auto;
  padding:clamp(30px,5vw,66px) 0 clamp(22px,3vw,34px);
}
.article-head .kicker{
  font-family:var(--display);font-weight:700;font-size:12px;letter-spacing:.13em;
  text-transform:uppercase;color:var(--red);margin:0 0 16px;
}
.article-head .kicker a:hover{color:var(--ink)}
/* pretty, not balance. balance evens the line lengths, which on a phone
   turns a two-line headline into two half-empty lines; pretty fills each
   line and only steps in to keep the last word off a line of its own. */
.article-head h1{
  font-family:var(--display);font-weight:800;letter-spacing:-.04em;line-height:1.04;
  font-size:clamp(31px,5vw,56px);margin:0;text-wrap:pretty;
}
.article-head .dek{
  margin:20px 0 0;font-size:clamp(17px,2vw,20px);line-height:1.55;
  color:var(--ink-2);max-width:60ch;text-wrap:pretty;
}

.article-meta{
  display:flex;align-items:center;flex-wrap:wrap;gap:11px;margin-top:26px;
  font-size:14px;font-weight:500;color:var(--muted);
}
.article-meta .am-who{display:flex;align-items:center;gap:10px;color:var(--ink);font-weight:600;transition:color .18s}
.article-meta .am-who:hover{color:var(--red)}
.article-meta .av{border-color:var(--line-2)}
.article-meta .am-dot{width:3px;height:3px;border-radius:50%;background:var(--line-2);flex:none}

/* ══════════════════════════════════════════════════════════
   2. Lead figure
   ══════════════════════════════════════════════════════════ */
.article-figure{margin:0 0 clamp(28px,4vw,48px);}
.article-figure img{
  display:block;width:100%;height:auto;border-radius:var(--r);
  aspect-ratio:16/9;object-fit:cover;background:var(--line);
}
.article-figure figcaption{
  margin-top:12px;font-size:13px;line-height:1.5;color:var(--muted-2);
  max-width:800px;margin-inline:auto;
}

/* ══════════════════════════════════════════════════════════
   3. Body — the measure everything else hangs off
   ══════════════════════════════════════════════════════════ */
.article-body{
  max-width:720px;margin:0 auto;
  font-size:18px;line-height:1.75;color:var(--ink-2);
}
.article-body > *{margin-block:0 1.4em}
.article-body > *:last-child{margin-bottom:0}

.article-body p{text-wrap:pretty}
.article-body a{
  color:var(--ink);text-decoration:underline;
  text-decoration-color:var(--red);text-decoration-thickness:2px;text-underline-offset:3px;
  transition:color .18s;
}
.article-body a:hover{color:var(--red)}

.article-body h2,
.article-body h3,
.article-body h4{
  font-family:var(--display);color:var(--ink);letter-spacing:-.03em;line-height:1.16;
  margin-block:1.9em .55em;text-wrap:pretty;
}
.article-body h2{font-size:clamp(24px,3vw,31px);font-weight:800}
.article-body h3{font-size:clamp(20px,2.4vw,24px);font-weight:700}
.article-body h4{font-size:18px;font-weight:700}

.article-body ul,
.article-body ol{padding-left:1.3em}
.article-body li{margin-bottom:.55em}
.article-body li::marker{color:var(--red)}

.article-body blockquote{
  margin-inline:0;padding:4px 0 4px 26px;border-left:3px solid var(--red);
  font-family:var(--display);font-size:clamp(19px,2.3vw,23px);font-weight:500;
  line-height:1.4;letter-spacing:-.02em;color:var(--ink);
}
.article-body blockquote p:last-child{margin-bottom:0}
.article-body blockquote cite{
  display:block;margin-top:12px;font-family:var(--ui);font-size:14px;
  font-weight:500;font-style:normal;color:var(--muted);
}

.article-body img,
.article-body video,
.article-body iframe{border-radius:14px;max-width:100%;height:auto}
.article-body figure{margin-inline:0}
.article-body figcaption{
  margin-top:11px;font-size:13.5px;line-height:1.5;color:var(--muted-2);text-align:center;
}

.article-body hr{
  border:0;height:1px;background:var(--line);margin-block:2.6em;
}

.article-body code,
.article-body kbd{
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-size:.87em;background:#F4F4F6;border:1px solid var(--line);
  padding:.12em .4em;border-radius:5px;
}
.article-body pre{
  background:var(--dark);color:#EDEDF2;border-radius:14px;
  padding:20px 22px;overflow-x:auto;font-size:14px;line-height:1.6;
}
.article-body pre code{background:none;border:0;padding:0;color:inherit;font-size:inherit}

/* ══════════════════════════════════════════════════════════
   Tables

   Defaults live in the :root block below. Customize > Read Us
   24x7 > Tables re-declares the same custom properties in an
   inline block printed straight after this file, so a setting
   always wins on source order.

   Selectors are written one level deeper than the block
   library's (.article-body table td, not .article-body td) so
   core's wp-block-library rules lose regardless of which
   stylesheet the optimiser prints first.
   ══════════════════════════════════════════════════════════ */
:root{
  --tbl-fs:15px;
  --tbl-py-set:12px;
  --tbl-px-set:16px;
  --tbl-py:var(--tbl-py-set);
  --tbl-px:var(--tbl-px-set);
  --tbl-layout:auto;
  --tbl-radius:14px;
  --tbl-outer:1px;
  --tbl-row-line:1px;
  --tbl-col-line:0px;
  --tbl-head-line:2px;
  --tbl-head-bg:#F5F5F7;
  --tbl-head-fs:1em;
  --tbl-head-ls:.07em;
  --tbl-head-tt:uppercase;
  --tbl-zebra:#FAFAFB;
  --tbl-hover:rgba(232,38,42,.05);
  --tbl-first-weight:600;
  --tbl-first-color:var(--ink);
  --tbl-first-wrap:nowrap;
}

/* The figure is the scroll container, so the table keeps real
   table layout and the rounded frame clips the overflow. */
.article-body .wp-block-table{
  margin:clamp(26px,3.4vw,40px) 0;
  max-width:100%;
  overflow-x:auto;
  overscroll-behavior-x:contain;
  -webkit-overflow-scrolling:touch;
  background:var(--surface);
  border:var(--tbl-outer) solid var(--line);
  border-radius:var(--tbl-radius);
  scrollbar-width:thin;
}

.article-body table{
  width:100%;
  table-layout:var(--tbl-layout);
  border-collapse:separate;
  border-spacing:0;
  font-size:var(--tbl-fs);
  line-height:1.55;
  color:var(--ink-2);
  font-variant-numeric:tabular-nums;
}
/* The block editor's "fixed width table cells" toggle is a
   per-post override; the theme setting decides globally. */
.article-body table.has-fixed-layout{table-layout:var(--tbl-layout)}
/* One notch above wp-block-library's own .wp-block-table table rule, which
   may print after this file and would otherwise re-collapse the borders. */
.article-body .wp-block-table > table{
  width:100%;border-collapse:separate;border-spacing:0;table-layout:var(--tbl-layout);
}

/* A table pasted without the block wrapper scrolls on its own. */
.article-body > table{
  display:block;
  overflow-x:auto;
  border:var(--tbl-outer) solid var(--line);
  border-radius:var(--tbl-radius);
  margin:clamp(26px,3.4vw,40px) 0;
}

.article-body table th,
.article-body table td{
  padding:var(--tbl-py) var(--tbl-px);
  text-align:left;
  vertical-align:top;
  border:0;
  border-bottom:var(--tbl-row-line) solid var(--line);
  border-right:var(--tbl-col-line) solid var(--line);
  text-wrap:pretty;
  hyphens:none;
  overflow-wrap:break-word;
}
.article-body table th:last-child,
.article-body table td:last-child{border-right:0}
.article-body table tr:last-child th,
.article-body table tr:last-child td{border-bottom:0}

/* Header cells land in <thead> or, when the block writes them
   inline, in the first row of <tbody>. Both are covered. */
.article-body table thead th,
.article-body table tr:first-child th{
  background:var(--tbl-head-bg);
  color:var(--ink);
  font-family:var(--display);
  font-weight:700;
  font-size:var(--tbl-head-fs);
  letter-spacing:var(--tbl-head-ls);
  text-transform:var(--tbl-head-tt);
  line-height:1.3;
  vertical-align:middle;
  border-bottom:var(--tbl-head-line) solid var(--line-2);
}
.article-body table tfoot td{
  background:var(--tbl-head-bg);
  font-weight:600;
  color:var(--ink);
  border-top:var(--tbl-head-line) solid var(--line-2);
}

.article-body table tbody tr:nth-of-type(even) td{background:var(--tbl-zebra)}
/* Painted as a layer rather than a background-color, so switching the
   highlight off cannot knock the stripe out from under a hovered row. */
@media(hover:hover){
  .article-body table tbody tr:hover td{
    background-image:linear-gradient(var(--tbl-hover),var(--tbl-hover));
  }
}

/* Row labels — the first column of a data row. */
.article-body table tbody td:first-child{
  font-weight:var(--tbl-first-weight);
  color:var(--tbl-first-color);
  /* A label column reads badly broken over three lines. Keeping it
     whole can only ever widen the table, and a wide table already
     scrolls inside its frame. */
  white-space:var(--tbl-first-wrap);
}
/* A th used as a row header, rather than a column header. */
.article-body table tbody tr:not(:first-child) th,
.article-body table tbody th[scope="row"]{
  background:none;font-family:var(--ui);font-size:1em;letter-spacing:0;
  text-transform:none;font-weight:700;color:var(--ink);vertical-align:top;
  border-bottom:var(--tbl-row-line) solid var(--line);
}

/* ── Column widths ───────────────────────────────────────────────
   The core Table block has no per-column width control, so these
   stand in for one. The three is-style-* classes are registered as
   block styles and appear in the editor's Styles tab; a colgroup
   comes from a cols-40-60 class, expanded server-side. All of them
   outrank the global table-layout set above, which is the point. */
.article-body .wp-block-table.is-style-first-narrow > table{table-layout:auto}
.article-body .wp-block-table.is-style-first-narrow > table :is(th,td):first-child{
  /* 1% in the automatic algorithm means "as narrow as the content
     allows"; the rest of the width falls to the other columns. */
  width:1%;white-space:nowrap;
}
.article-body .wp-block-table.is-style-first-wide > table{table-layout:auto}
.article-body .wp-block-table.is-style-first-wide > table :is(th,td):first-child{width:38%}
.article-body .wp-block-table.is-style-even-columns > table{table-layout:fixed}
/* An explicit colgroup is only authoritative under fixed layout. */
.article-body .wp-block-table > table:has(> colgroup){table-layout:fixed}

/* Once a column has been given a width under a fixed layout, its content
   has to be allowed to wrap: an unbreakable first column narrower than its
   own text does not widen the column, it spills across the next one. The
   width the author set wins over "Keep the first column on one line", which
   only ever meant "do not squeeze this to nothing". Set on the wrapper so
   every cell inherits it. */
.article-body .wp-block-table.has-col-widths,
.article-body .wp-block-table.is-style-even-columns,
.article-body .wp-block-table:has(> table > colgroup),
.article-body table.has-col-widths{--tbl-first-wrap:normal}

/* Widths set one column at a time, in the block's Column widths panel.
   The values arrive as --rc1..--rc12 on the wrapper. A column left unset
   resolves to an invalid width, which computes to auto -- so it shares
   what is left with the other unset columns. Placed after the presets
   above deliberately: at equal specificity, the manual widths win. */
.article-body .wp-block-table.has-col-widths > table,
.article-body table.has-col-widths{table-layout:fixed}
.article-body .wp-block-table.has-col-widths > table :is(th,td):nth-child(1),
.article-body table.has-col-widths :is(th,td):nth-child(1){width:var(--rc1)}
.article-body .wp-block-table.has-col-widths > table :is(th,td):nth-child(2),
.article-body table.has-col-widths :is(th,td):nth-child(2){width:var(--rc2)}
.article-body .wp-block-table.has-col-widths > table :is(th,td):nth-child(3),
.article-body table.has-col-widths :is(th,td):nth-child(3){width:var(--rc3)}
.article-body .wp-block-table.has-col-widths > table :is(th,td):nth-child(4),
.article-body table.has-col-widths :is(th,td):nth-child(4){width:var(--rc4)}
.article-body .wp-block-table.has-col-widths > table :is(th,td):nth-child(5),
.article-body table.has-col-widths :is(th,td):nth-child(5){width:var(--rc5)}
.article-body .wp-block-table.has-col-widths > table :is(th,td):nth-child(6),
.article-body table.has-col-widths :is(th,td):nth-child(6){width:var(--rc6)}
.article-body .wp-block-table.has-col-widths > table :is(th,td):nth-child(7),
.article-body table.has-col-widths :is(th,td):nth-child(7){width:var(--rc7)}
.article-body .wp-block-table.has-col-widths > table :is(th,td):nth-child(8),
.article-body table.has-col-widths :is(th,td):nth-child(8){width:var(--rc8)}
.article-body .wp-block-table.has-col-widths > table :is(th,td):nth-child(9),
.article-body table.has-col-widths :is(th,td):nth-child(9){width:var(--rc9)}
.article-body .wp-block-table.has-col-widths > table :is(th,td):nth-child(10),
.article-body table.has-col-widths :is(th,td):nth-child(10){width:var(--rc10)}
.article-body .wp-block-table.has-col-widths > table :is(th,td):nth-child(11),
.article-body table.has-col-widths :is(th,td):nth-child(11){width:var(--rc11)}
.article-body .wp-block-table.has-col-widths > table :is(th,td):nth-child(12),
.article-body table.has-col-widths :is(th,td):nth-child(12){width:var(--rc12)}

/* Anything past three columns needs room before it wraps to mush. */
.article-body .wp-block-table:has(tr > :nth-child(4)) table{min-width:620px}
.article-body .wp-block-table:has(tr > :nth-child(6)) table{min-width:860px}

/* Sticky so the caption stays put while the table scrolls sideways. */
.article-body .wp-block-table figcaption,
.article-body table caption{
  position:sticky;left:0;
  padding:11px var(--tbl-px);
  margin:0;
  font-size:13.5px;line-height:1.5;color:var(--muted-2);text-align:left;
  background:var(--surface);
}
.article-body .wp-block-table figcaption{border-top:1px solid var(--line)}
.article-body table caption{border-bottom:1px solid var(--line);caption-side:top}

/* Wide and full-bleed blocks escape the 720px measure */
.article-body .alignwide{
  width:min(1000px,100vw - var(--gut) * 2);
  margin-inline:calc(50% - min(500px,50vw - var(--gut)));
  max-width:none;
}
.article-body .alignfull{
  width:min(var(--maxw) - var(--gut) * 2,100vw);
  margin-inline:calc(50% - min(var(--maxw) / 2 - var(--gut),50vw));
  max-width:none;
}
.article-body .alignleft{float:left;margin:.3em 1.6em 1.2em 0;max-width:min(50%,340px)}
.article-body .alignright{float:right;margin:.3em 0 1.2em 1.6em;max-width:min(50%,340px)}
.article-body .aligncenter{margin-inline:auto;display:block}
.article-body .wp-caption{max-width:100%}
.article-body .wp-caption-text,
.article-body .gallery-caption{font-size:13.5px;color:var(--muted-2);text-align:center;margin-top:10px}

.page-links{
  display:flex;flex-wrap:wrap;align-items:center;gap:7px;
  margin-top:2.4em;font-size:13.5px;font-weight:600;
}
.page-links a,
.page-links > span:not(.page-links-title){
  min-width:38px;height:38px;display:grid;place-items:center;padding:0 12px;
  border-radius:999px;border:1px solid rgba(11,11,13,.12);
}
.page-links > span:not(.page-links-title){background:var(--ink);border-color:var(--ink);color:#fff}
.page-links a:hover{border-color:var(--ink);color:var(--red)}

/* ══════════════════════════════════════════════════════════
   4. Tags
   ══════════════════════════════════════════════════════════ */
.article-tags{
  max-width:720px;margin:clamp(34px,4.4vw,52px) auto 0;
  display:flex;flex-wrap:wrap;gap:9px;
}
.article-tags a{
  border:1px solid rgba(11,11,13,.13);border-radius:999px;
  padding:8px 17px;font-size:13.5px;font-weight:500;transition:.18s;
}
.article-tags a:hover{border-color:var(--ink);background:var(--ink);color:#fff}

/* ══════════════════════════════════════════════════════════
   5. Author box
   ══════════════════════════════════════════════════════════ */
.authorbox{
  max-width:720px;margin:clamp(34px,4.4vw,52px) auto 0;
  display:grid;grid-template-columns:72px minmax(0,1fr);gap:22px;align-items:start;
  background:var(--surface);border:1px solid rgba(11,11,13,.1);
  border-radius:22px;padding:26px 28px;
}
.authorbox .authorbox-av{border-radius:50%;width:72px;height:72px;object-fit:cover}
.authorbox .ab-label{
  font-family:var(--display);font-weight:700;font-size:11px;letter-spacing:.13em;
  text-transform:uppercase;color:var(--muted-2);margin:0 0 6px;
}
.authorbox .ab-name{font-family:var(--display);font-weight:800;font-size:21px;letter-spacing:-.028em;margin:0 0 10px}
.authorbox .ab-bio{margin:0;color:var(--muted);font-size:15px;line-height:1.6}
.authorbox .ab-more{
  display:inline-flex;align-items:center;gap:8px;margin-top:14px;
  font-family:var(--display);font-weight:700;font-size:12px;letter-spacing:.08em;
  text-transform:uppercase;color:var(--red);transition:gap .2s;
}
.authorbox .ab-more:hover{gap:12px}

/* ══════════════════════════════════════════════════════════
   6. Previous / next
   ══════════════════════════════════════════════════════════ */
.adjacent{
  display:grid;grid-template-columns:1fr 1fr;gap:20px;
  margin-top:clamp(40px,5vw,64px);
}
.adj{
  border:1px solid rgba(11,11,13,.1);border-radius:20px;padding:22px 24px;
  display:flex;flex-direction:column;gap:9px;transition:.2s;
}
.adj:hover{border-color:var(--ink);transform:translateY(-3px)}
.adj-next{text-align:right}
.adj-label{
  font-family:var(--display);font-weight:700;font-size:11px;letter-spacing:.13em;
  text-transform:uppercase;color:var(--muted-2);
}
.adj-title{
  font-family:var(--display);font-weight:700;font-size:17px;line-height:1.25;
  letter-spacing:-.022em;color:var(--ink);text-wrap:pretty;
}
.adj:hover .adj-title{color:var(--red)}

/* ══════════════════════════════════════════════════════════
   7. Related
   ══════════════════════════════════════════════════════════ */
.related{margin-top:clamp(52px,6.5vw,86px)}

/* ══════════════════════════════════════════════════════════
   8. Comments
   ══════════════════════════════════════════════════════════ */
.comments{max-width:720px;margin:clamp(52px,6.5vw,86px) auto 0}
.comments-title{
  font-family:var(--display);font-weight:800;font-size:clamp(23px,3vw,30px);
  letter-spacing:-.032em;margin:0 0 26px;
}
.comments-closed{color:var(--muted);font-size:15px}

.commentlist,
.commentlist .children{list-style:none;margin:0;padding:0}
.commentlist .children{margin-left:clamp(16px,4vw,44px);margin-top:22px}
.commentlist > li{padding-bottom:26px;margin-bottom:26px;border-bottom:1px solid var(--line)}
.commentlist > li:last-child{border-bottom:0}

.comment-body{position:relative}
.comment-meta{display:flex;align-items:center;gap:11px;margin-bottom:12px}
.comment-author{display:flex;align-items:center;gap:11px;font-style:normal}
.comment-author img{border-radius:50%;flex:none}
.comment-author .fn{font-family:var(--display);font-weight:700;font-size:15px;font-style:normal;letter-spacing:-.012em}
.comment-author .says{display:none}
.comment-metadata{font-size:12.5px;color:var(--muted-2);font-weight:500}
.comment-metadata a:hover{color:var(--red)}
.comment-content{font-size:16px;line-height:1.65;color:var(--ink-2)}
.comment-content p{margin:0 0 1em}
.comment-content p:last-child{margin-bottom:0}
.comment-content a{color:var(--ink);text-decoration:underline;text-decoration-color:var(--red);text-underline-offset:3px}
.comment-awaiting-moderation{display:block;margin-top:10px;font-size:13px;color:var(--red);font-weight:600}
.reply{margin-top:12px}
.comment-reply-link,
.comment-reply-title small a{
  font-family:var(--display);font-weight:700;font-size:11px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--red);
}
.comment-reply-link:hover{color:var(--ink)}
.bypostauthor > .comment-body .fn::after{
  content:"";display:inline-block;width:6px;height:6px;border-radius:50%;
  background:var(--red);margin-left:7px;vertical-align:middle;
}

/* Comment form */
.comment-respond{margin-top:clamp(34px,4.4vw,50px)}
.comment-reply-title{
  font-family:var(--display);font-weight:800;font-size:clamp(21px,2.6vw,26px);
  letter-spacing:-.03em;margin:0 0 20px;
}
.comment-reply-title small{font-size:12px;font-weight:500;margin-left:10px;letter-spacing:0}
.comment-form{display:grid;gap:16px}
.comment-form label{
  display:block;margin-bottom:8px;font-size:12px;font-weight:700;
  font-family:var(--display);letter-spacing:.09em;text-transform:uppercase;color:var(--muted);
}
.comment-form input[type=text],
.comment-form input[type=email],
.comment-form input[type=url],
.comment-form textarea{
  width:100%;font:inherit;font-size:16px;color:var(--ink);
  background:var(--surface);border:1px solid rgba(11,11,13,.14);border-radius:14px;
  padding:13px 16px;transition:border-color .18s;
}
.comment-form textarea{resize:vertical;min-height:150px;line-height:1.6}
.comment-form input:focus,
.comment-form textarea:focus{outline:none;border-color:var(--ink)}
.comment-form p{margin:0}
.comment-form-author,
.comment-form-email,
.comment-form-url{max-width:100%}
.comment-form-cookies-consent{display:flex;align-items:center;gap:10px}
.comment-form-cookies-consent input{flex:none}
.comment-form-cookies-consent label{margin:0;text-transform:none;letter-spacing:0;font-family:var(--ui);font-size:14px;font-weight:500}
.comment-form .form-submit{margin-top:4px}
.comment-form input[type=submit]{
  background:var(--ink);color:#fff;border:0;cursor:pointer;
  padding:14px 30px;border-radius:999px;font-family:var(--display);font-weight:700;
  font-size:12px;letter-spacing:.1em;text-transform:uppercase;transition:background .2s;
}
.comment-form input[type=submit]:hover{background:var(--red)}
.comment-notes,
.logged-in-as{font-size:13.5px;color:var(--muted)}
.logged-in-as a:hover{color:var(--red)}

/* ══════════════════════════════════════════════════════════
   9. Responsive
   ══════════════════════════════════════════════════════════ */
@media(max-width:700px){
  .adjacent{grid-template-columns:1fr}
  .adj-next{text-align:left}
  .authorbox{grid-template-columns:1fr;gap:16px;padding:24px}
  .authorbox .authorbox-av{width:60px;height:60px}
  .article-body{font-size:17px}
  .article-body .alignleft,
  .article-body .alignright{float:none;margin-inline:0;max-width:100%}
  /* Tables give back a little padding rather than a scrollbar. */
  .article-body table{--tbl-py:calc(var(--tbl-py-set,12px) * .78);--tbl-px:calc(var(--tbl-px-set,16px) * .72)}
}

/* ══════════════════════════════════════════════════════════
   10. Print
   ══════════════════════════════════════════════════════════ */
@media print{
  .topbar,.catstrip,.foot,.adjacent,.related,.comments,.article-tags,.authorbox{display:none!important}
  .article-body{max-width:none;font-size:12pt;color:#000}
  .article-body .wp-block-table{overflow:visible;border-color:#999}
  .article-body table{font-size:10pt}
  .article-body table th,
  .article-body table td{border-color:#999}
  .article-body table tbody tr{break-inside:avoid}
  .article-body table thead{display:table-header-group}
  .article-head h1{font-size:24pt}
  .article-figure img{max-height:9cm}
  a{text-decoration:none;color:#000}
}