/* =====================================================================
   GOKUDO: Theory page layout.
   Loaded on the page:theory context: registered in gokudo_pages()
   (inc/routing.php) and resolved by inc/assets.php. Shared banner, footer, and
   reveal are in base.css, loaded site-wide.

   The page head is the shared .pagehead block from components.css. Under it the page
   is one article. .tdoc carries the .wrap container, and every section is a direct
   child of it, so all of them share one pair of left and right edges. Those edges are
   the banner's and the footer's. Nothing on this page bleeds to the viewport, and no
   watermark sits behind the text.
   ===================================================================== */

/* ============ PAGE HEAD ============ */
/* template-parts/components/pagehead.php renders the head, and components.css holds
   its shared rules. Theory sets the H1 size that newsroom.css and support.css
   also state. The three studio pages carry a one-word title and read as one set. Cart,
   checkout, account, and products keep the larger shared size. */
.pagehead{--ph-title-size:clamp(54px,7.4vw,112px)}

/* ============ ARTICLE SHELL ============ */
/* padding-top and padding-bottom are longhands on purpose. .tdoc also carries .wrap,
   whose padding shorthand states the horizontal gutter and would be wiped by a
   shorthand here. */
.tdoc{padding-top:58px;padding-bottom:110px;background:var(--bg)}
.tsec{padding:78px 0;border-top:1px solid var(--line)}
/* .pagehead draws its own bottom edge, so the first block under it states no hairline.
   .topen is optional. When .topen renders, the first .tsec is not the first child, and
   its hairline divides the opening block from section one. */
.tdoc>.tsec:first-child{border-top:0}
/* One heading rule for the whole article. The opening statement and every section
   heading read at the same rank. .tclose keeps its spacing below and states no type of
   its own. */
:is(.topen,.tsec) h2{font-family:var(--display);font-weight:900;font-size:clamp(30px,3.6vw,52px);line-height:.96;
	text-transform:uppercase;letter-spacing:var(--track-md)}
:is(.topen,.tsec) h2 em{font-style:normal;color:var(--blue)}

/* ============ ARTICLE OPENING ============ */
/* The statement, the lede, and the hero image. All three are optional, so the template
   drops this block when every one of them is empty. The block states no bottom edge.
   The first .tsec draws the hairline that divides it from section one. */
.topen{padding-bottom:58px}
/* The lede reads at the article prose measure below. It states only the wider gap
   that separates it from the opening statement. */
.tlede{margin-top:40px}

/* ============ SECTION PARTS ============ */
/* Article prose. 18px over 1.8 is the measure single.css sets for a post body, and
   this page reads the same way. The lede in the opening block reads at this measure
   too, so both names take one rule. */
.tprose{margin-top:28px}
:is(.tlede,.tprose) p{font-size:18px;line-height:1.8;text-wrap:pretty}
:is(.tlede,.tprose) p+p{margin-top:22px}
:is(.tlede,.tprose) p strong{font-weight:600}

/* Optional section media comes from WordPress attachments. The media library owns
   aspect ratio, alt text, caption, and responsive srcset. */
.theory-media{margin-top:42px}
.theory-media-img{display:block;width:100%;height:auto}
:is(.theory-media,.tdemand-media) figcaption{margin-top:12px;color:var(--faint);font-family:var(--label);
	font-size:10px;line-height:1.5;letter-spacing:.16em;text-transform:uppercase}

/* ============ THE 3 DEMANDS ============ */
/* Each demand is a photo over a titled text. The text repeats the item type of
   .gk-feature-list in components.css: a 2px --ink rule, an uppercase title, and muted
   14px copy, so the demands read like the other titled lists on the site. The shared
   rules cannot style it, because they expect the title as the first child of the item.
   The photos are a set, so every one is cropped to a square. The sizes attribute in
   page-theory.php follows the column widths here. */
.tdemands{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:30px;margin:52px 0 0;padding:0;list-style:none}
.tdemand-media{margin:0 0 24px}
.tdemand-img{display:block;width:100%;height:auto;aspect-ratio:1;object-fit:cover}
.tdemand-text{padding-top:24px;border-top:2px solid var(--ink);color:var(--muted);font-size:14px;line-height:1.65}
.tdemand-text h3{margin:0 0 11px;color:var(--ink);font-family:inherit;font-weight:700;font-size:15px;line-height:1.2;
	letter-spacing:.04em;text-transform:uppercase}
.tdemand-text p{margin:0}

/* ============ CLOSING ============ */
.tclose h2{margin-bottom:18px}
.tclose p{color:var(--muted);font-size:17px;line-height:1.7;margin-bottom:36px}
.tclose .btns{display:flex;gap:14px;flex-wrap:wrap}
.tclose a.btn{display:inline-flex;align-items:center;gap:12px;font-family:var(--label);font-size:12px;
	letter-spacing:.2em;text-transform:uppercase;padding:18px 30px;font-weight:700;transition:.22s}
/* .btn is a local name: five stylesheets each spell their own, and they do not share a
   base rule. .solid is the one that is filled, so it states the primary action button's
   two pairs from DESIGN.md by hand instead of joining the list in components.css. */
.tclose a.btn.solid{background:var(--blue);color:var(--on-dark)}
.tclose a.btn.solid:hover{background:var(--gold);color:var(--ink)}

/* ============ RESPONSIVE (Theory only) ============ */
@media(max-width:980px){
	.tsec{padding:56px 0}
	.tdoc{padding-top:44px}
	.topen{padding-bottom:44px}
	/* 3 columns are too narrow for the copy here. Each demand becomes a row, with the
	   photo in the left 2/5 and the text beside it. */
	.tdemands{grid-template-columns:1fr;gap:44px}
	.tdemand.has-media{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,3fr);gap:32px;align-items:start}
	.tdemand.has-media .tdemand-media{margin:0}
}
@media(max-width:560px){
	.tdoc{padding-bottom:80px}
	.tdemand.has-media{display:block}
	.tdemand.has-media .tdemand-media{margin-bottom:24px}
	:is(.tlede,.tprose) :is(p,li){font-size:16.5px}
	.tclose p{font-size:16px}
}