/* =====================================================================
   GOKUDO: single news item layout (post detail view, single.php). Loaded
   on the 'post' context (is_singular('post')), resolved by inc/assets.php.
   Shared banner, footer, and reveal are in base.css, loaded site-wide.

   Editor vocabulary: sibling of the .clause / .defs / .callout set documented in
   terms.css, for editorial post bodies pasted into the WordPress editor:
     .pull      pull quote block (blockquote + .src attribution)
     .figure    full-bleed inline image with a figcaption
     .facts     release-facts box. .frow is one label/value row inside it
   All three sit inside .article .body, whose own p, img and blockquote rules score
   (0,2,1). A bare .pull or .figure rule scores less and loses, and the <p> wpautop
   writes inside a blockquote takes its type from .article .body p rather than from the
   quote around it. Each of the three therefore states its selector against that scope,
   and the rules below say which one they are answering. Check a new class here against
   a real post body: all three were written ahead of use, and all three were wrong.
   ===================================================================== */

/* Every section on this view is a .wrap, the container base.css states for the banner
   and the footer, so the article shares one pair of left and right edges with the site
   chrome. That is what page-theory.php does with .tdoc, and the Theory page is the
   other long-form article the site has: 18px over 1.8, across the full container, with
   no measure of its own. This view used to run a 760px column while its own head ran a
   .wrap, which read as two pages stacked. */

/* ============ ARTICLE HEADER ============ */
.ahead{background:var(--bg);padding:40px 0 0}
.ahead .crumb{display:flex;align-items:center;gap:10px;color:var(--faint);margin-bottom:48px;flex-wrap:wrap}
.ahead .crumb a{color:var(--faint);transition:color .2s}
.ahead .crumb a:hover{color:var(--blue)}
.ahead .crumb .sep{color:var(--line)}
.ahead .crumb .cur{color:var(--ink)}
.ahead h1{font-family:var(--display);font-weight:900;font-size:clamp(56px,9vw,150px);line-height:.82;text-transform:uppercase;letter-spacing:var(--track-xl)}
.ahead h1 em{font-style:normal;color:var(--blue)}
.ahead .standfirst{font-size:clamp(18px,2vw,24px);line-height:1.6;color:var(--muted);max-width:720px;margin:36px 0 50px;text-wrap:pretty}
.ahead .standfirst strong{color:var(--ink);font-weight:600}
/* The top margin is the gap under the title when the post has no excerpt. Under the
   standfirst it collapses into the standfirst's larger bottom margin. */
.ahead .byline{display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin:22px 0 50px;
	font-family:var(--label);font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--faint)}
.ahead .byline .dot{width:5px;height:5px;background:var(--line);border-radius:50%}
.ahead .byline .han{font-family:var(--han);color:var(--blue);letter-spacing:.12em;font-size:13px}

/* hero image */
.ahero-img{position:relative;background:var(--surface);border-top:1px solid var(--line);overflow:hidden}
.ahero-img img{width:100%;max-height:78vh;object-fit:contain;object-position:center;padding:30px 20px;mix-blend-mode:multiply}
.ahero-img .cap{position:absolute;right:24px;bottom:20px;z-index:3;font-family:var(--label);font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--faint)}

/* ============ ARTICLE BODY ============ */
/* The rule between the header and the body spans the content box of .wrap, so it
   ends at the same edges as the text. It sits on the body, not on .ahead, so it stays
   under the hero image when the post has one. */
.article{padding:0 0 90px;background:var(--bg)}
.article > .wrap::before{content:"";display:block;height:1px;background:var(--line);margin-bottom:84px}
.article .body p{font-size:18px;line-height:1.8;color:var(--ink);margin-bottom:26px;text-wrap:pretty}
.article .body p strong{font-weight:600}
.article .body h2{font-family:var(--display);font-weight:900;font-size:clamp(28px,3.4vw,44px);line-height:.98;text-transform:uppercase;letter-spacing:var(--track-md);margin:54px 0 22px;display:flex;align-items:baseline;gap:14px}
.article .body h2 .num{font-family:var(--label);font-size:13px;letter-spacing:.1em;color:var(--blue);font-weight:700}
.article .body h2 .han{font-family:var(--han);font-size:.5em;color:var(--blue);letter-spacing:.06em}
.article .body h3{font-family:var(--display);font-weight:700;font-size:clamp(22px,2.4vw,30px);text-transform:uppercase;letter-spacing:var(--track-md);margin:40px 0 16px}
.article .body ul,.article .body ol{margin:0 0 26px 1.2em}
.article .body li{font-size:18px;line-height:1.7;margin-bottom:8px}
.article .body a{color:var(--blue);text-decoration:underline;text-underline-offset:3px}
.article .body img{margin:40px 0;border:1px solid var(--line)}

/* Classic Editor images */
/* Add Media writes an alignment class on each image, and every alignment gives the same
   block image under the text: a float leaves a short line of text beside the picture, and
   a phone has no room for one. Kadence floats .alignleft and .alignright at (0,1,0), so
   this rule cancels the float. The picture keeps its own width up to the width of the
   text, so a small picture does not grow blurred. */
.article .body .alignleft,.article .body .alignright{float:none}
/* A caption puts the picture in figure.wp-caption, with an inline width equal to the
   picture. The figure draws the frame, and the caption takes the bar of .figure
   figcaption. Kadence centers the caption at (0,1,0) and gives it a margin at (0,2,0),
   so the caption rule states both. */
.article .body .wp-caption{max-width:100%;margin:40px 0;border:1px solid var(--line)}
.article .body .wp-caption img{margin:0;border:none}
.article .body .wp-caption-text{margin:0;padding:14px 20px;background:var(--bg2);text-align:left;
	font-family:var(--label);font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--faint)}

/* pull quote */
/* .pull is written inside a post body, so its blockquote meets the generic quote rule
   below at (0,2,1) and a bare .pull blockquote at (0,1,1) loses the whole treatment:
   the size, the weight, the line-height, and it gains the generic rule's blue left
   edge and padding. The selector is scoped to beat it, and the three cancels undo what
   .pull's own top and bottom rules replace. Cancelling padding and border-left also
   clears Kadence's bare blockquote{padding-left:1em;border-left:4px} at (0,0,1), which
   the generic rule was answering on this element's behalf. */
.pull{margin:64px 0;padding:46px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.article .body .pull blockquote{margin:0;padding:0;border-left:0;
	font-family:var(--display);font-weight:400;text-transform:uppercase;font-size:clamp(28px,3.6vw,52px);line-height:1.04;letter-spacing:var(--track-md);text-wrap:balance}
.pull blockquote em{font-style:normal;color:var(--blue)}
.pull .src{margin-top:22px;font-family:var(--label);font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--faint);display:flex;gap:14px;align-items:center}
.pull .src .han{font-family:var(--han);color:var(--blue);letter-spacing:.12em;font-size:13px}
/* WordPress quote blocks in the post body get the same treatment */
.article .body blockquote{margin:54px 0;padding:30px 0 30px 28px;border-left:3px solid var(--blue);font-family:var(--display);font-size:clamp(22px,2.6vw,34px);line-height:1.15;text-transform:uppercase;letter-spacing:var(--track-md)}
/* wpautop wraps the text inside a blockquote in its own <p>, so the quote's type never
   reaches it: .article .body p states font-size and line-height on that <p>, and a
   declaration on an element always beats a value inherited from its parent, whatever
   the two selectors score. Without this rule both quote treatments above render the
   display face at the body's 18px over 1.8, which reads as a caption. Both need it, so
   it is stated once, and it hands the <p> back whatever its own blockquote said. */
.article .body blockquote p{font-size:inherit;line-height:inherit;letter-spacing:inherit;
	font-weight:inherit;font-style:normal;color:inherit;text-wrap:inherit;margin:0}
.article .body blockquote p+p{margin-top:.5em}

/* inline figure */
.figure{margin:54px 0;background:var(--ink);border:1px solid var(--line);overflow:hidden}
/* Scoped for the reason .pull's blockquote is: a bare .figure img at (0,1,1) loses to
   .article .body img at (0,2,1), and the picture takes that rule's 40px margins and
   hairline border inside a frame that already draws one. */
.article .body .figure img{width:100%;display:block;margin:0;border:none}
.figure figcaption{font-family:var(--label);font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--faint);padding:14px 20px;background:var(--bg2);display:flex;justify-content:space-between;gap:14px}
.figure figcaption .han{font-family:var(--han);color:var(--blue);letter-spacing:.1em}

/* release facts box */
.facts{margin:64px 0 0;border:1px solid var(--line);background:var(--bg2)}
.facts .fh{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:20px 26px;border-bottom:1px solid var(--line);
	font-family:var(--label);font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--muted)}
.facts .fh .han{font-family:var(--han);color:var(--blue);letter-spacing:.12em;font-size:13px}
.frow{display:flex;justify-content:space-between;gap:20px;padding:16px 26px;border-bottom:1px solid var(--line2);font-size:14px}
.frow:last-child{border-bottom:none}
.frow .k{font-family:var(--label);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--faint)}
.frow .v{font-weight:600;text-align:right}

/* ============ CTA / REGISTER ============ */
/* The box takes the light treatment of .news-in on the front page and .reg-in on the
   Newsroom page: --bg2 fill, --line frame, --blue emphasis, and a --surface field. Only
   the stacked layout and the 極 watermark are this view's own. */
.artcta{padding:0 0 100px;background:var(--bg)}
.artcta-in{border:1px solid var(--line);padding:clamp(34px,5vw,64px);background:var(--bg2);position:relative;overflow:hidden}
.artcta-in .glyph{position:absolute;right:-1vw;top:50%;transform:translateY(-50%);font-family:var(--display);font-size:40vh;line-height:.8;color:var(--wash-lg);pointer-events:none;user-select:none}
.artcta-in h3{font-family:var(--display);font-weight:900;font-size:clamp(30px,4vw,58px);line-height:.95;text-transform:uppercase;letter-spacing:var(--track-md);position:relative;z-index:2}
.artcta-in h3 em{font-style:normal;color:var(--blue)}
/* The paragraph is an optional field, so the gap above the form sits on the form. */
.artcta-in p{color:var(--muted);font-size:16px;line-height:1.7;max-width:460px;margin:16px 0 0;position:relative;z-index:2}
/* The form and the privacy notice under it both sit above the watermark. */
.artcta-in .gk-subscribe{margin-top:30px;position:relative;z-index:2}
.artcta-in form{display:flex;border:1px solid var(--line);max-width:440px;background:var(--surface)}
.artcta-in input{flex:1;background:transparent;border:none;color:var(--ink);padding:18px;font-family:var(--label);font-size:12px;letter-spacing:.1em;outline:none}
.artcta-in input::placeholder{color:var(--faint)}
.artcta-in button{border:none;cursor:pointer;font-size:11px;letter-spacing:.18em;padding:0 24px;transition:.2s}
.backlink{margin-top:40px;display:inline-flex;align-items:center;gap:10px;font-family:var(--label);font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--faint);transition:color .2s}
.backlink:hover{color:var(--ink)}

/* ============ PREVIOUS / NEXT POST ============ */
.adjwrap{padding:0 0 20px}
.adjnav{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--line);border:1px solid var(--line)}
.adj{display:flex;flex-direction:column;gap:10px;background:var(--bg);padding:24px 26px}
.adj .k{font-size:10px;letter-spacing:.2em;color:var(--faint);transition:color .2s}
.adj .t{font-size:15px;font-weight:600;color:var(--ink);line-height:1.4}
.adj-next{text-align:right;align-items:flex-end}
a.adj:hover .k{color:var(--blue)}
.adj-empty{opacity:.45;pointer-events:none}

/* ============ RESPONSIVE ============ */
@media(max-width:560px){
	.article .body p{font-size:16.5px}
	.article .body li{font-size:16.5px}
	.adjnav{grid-template-columns:1fr}
	.adj-next{text-align:left;align-items:flex-start}
}