/* Single-post article. The hero + related use inline styles (in render.php); this file adds: the
   rail/stack hero switch, the 672px prose (the_content), image placeholders, and the credits
   toggle. Enqueued on singular only; shared chrome comes from homepage.css. */

/* clear the fixed site header (the article uses the shared site header for nav) */
.art-single { padding-top: 123px; }
.art-hero-rail, .art-hero-stack { margin-top: 40px !important; }

/* hero: rail ≥1024, stack <1024 (breakpoint 1024).
   Display is CSS-controlled (the inline styles carry only flex-direction/alignment). */
.art-hero-rail { display: flex; }
.art-hero-stack { display: none; }
@media (max-width: 1023.98px) {
	.art-hero-rail { display: none; }
	.art-hero-stack { display: flex; }
	.art-single { padding-top: 72px; }
}

/* image placeholder (hero + empty related slots) */
.art-media--empty { background: var(--surface-band); display: flex; align-items: center; justify-content: center; }
.art-media__ph { display: inline-flex; flex-direction: column; align-items: center; gap: 8px; color: var(--twm-placeholder); font-family: var(--font-utility); font-size: 10px; line-height: 1.4; letter-spacing: 1px; text-transform: uppercase; text-align: center; }
.art-media__ph svg { opacity: 0.6; }

/* View Image Credits toggle */
.art-credits__toggle:hover { text-decoration: underline; }
.art-credits.is-open .art-credits__text { opacity: 1 !important; }

/* prose (the_content): container is full-width; text blocks are constrained to 672px and centred,
   while wide media + the FAQ set their own width inline and break out. */
.art-prose > * { margin-top: 24px; width: min(672px, 90vw); margin-left: auto; margin-right: auto; box-sizing: border-box; }
.art-prose > *:first-child { margin-top: 0; }
.art-prose > .art-media-wide { width: min(1208px, 94vw); }
.art-prose > .art-media-16x9 { width: min(1284px, 94vw); }
.art-prose > .alignwide, .art-prose > figure.alignwide, .art-prose > .wp-block-image.alignwide { width: min(1208px, 94vw); }
.art-prose > .alignfull { width: min(1284px, 94vw); }
/* vertical caption rail on breakout media (writing-mode rail) */
.art-media-rail { writing-mode: vertical-rl; transform: rotate(180deg); font-family: var(--font-utility); font-size: 8.7px; letter-spacing: 2.6px; text-transform: uppercase; color: var(--twm-ink); white-space: nowrap; }

/* breakout media rows — class-driven (post-content kses strips inline flex/clamp) */
.art-prose > .art-media-wide, .art-prose > .art-media-16x9 { display: flex; align-items: flex-end; }
.art-prose > .art-media-wide { margin-top: clamp(48px, 6vw, 88px); }
.art-prose > .art-media-16x9 { margin-top: clamp(40px, 4vw, 64px); }
.art-media-wide__gutter, .art-media-16x9__gutter, .art-media-wide__cap, .art-media-16x9__cap { width: 64px; flex-shrink: 0; }
.art-media-wide__cap, .art-media-16x9__cap { display: flex; justify-content: center; }
.art-media-wide__row { flex: 1; display: flex; flex-wrap: wrap; gap: clamp(12px, 2vw, 24px); min-width: 0; }
.art-media-16x9__row { flex: 1; min-width: 0; }
.art-media-wide__row .art-media { flex: 1 1 280px; }
.art-media--3x4 { aspect-ratio: 3/4; }
.art-media--16x9 { aspect-ratio: 16/9; }

/* "Good To Know" numbered FAQ — plain core blocks in post_content (group > heading + rows of
   question/answer paragraphs); the row numbers come from CSS counters. Lives inside .art-prose,
   so the prose defaults are overridden where they differ. */
.art-faq, .art-prose .art-faq { margin: clamp(64px, 7vw, 104px) auto 0; width: min(672px, 90vw); box-sizing: border-box; }
.art-faq__title, .art-prose h2.art-faq__title { margin: 0 0 23px; font-family: var(--font-headline); font-weight: 300; font-size: 30px; line-height: 36px; letter-spacing: 0.75px; color: var(--text-body); }
.art-faq__list { border-top: 1px solid var(--border-default); counter-reset: artfaq; }
.art-faq > * + *, .art-faq__list > * + *, .art-faq__item > * + * { margin-block-start: 0; }
.art-faq__item { counter-increment: artfaq; display: grid; grid-template-columns: 40px 1fr; column-gap: clamp(18px, 3vw, 32px); padding: clamp(24px, 3vw, 32px) 0; border-bottom: 1px solid var(--border-default); }
.art-faq__item::before { content: counter(artfaq, decimal-leading-zero); grid-column: 1; grid-row: 1 / span 2; padding-top: 5px; font-family: var(--font-utility); font-size: 8.7px; letter-spacing: 2.6px; text-transform: uppercase; color: var(--twm-ink); }
.art-faq__q, .art-prose p.art-faq__q { grid-column: 2; margin: 0; font-family: var(--font-headline); font-weight: 400; font-size: 18px; line-height: 22.5px; color: var(--twm-ink); }
.art-faq__a, .art-prose p.art-faq__a { grid-column: 2; margin: 14px 0 0; font-family: var(--font-soft); font-size: 16px; line-height: 26px; letter-spacing: 0.1px; color: var(--twm-ink); }
.art-faq__item > .art-faq__a { margin-block-start: 14px; }
.art-prose p { font-family: var(--font-soft); font-weight: 400; font-size: 16px; line-height: 26px; letter-spacing: 0.1px; color: var(--twm-ink); }
.art-prose h2, .art-prose h2.wp-block-heading { margin-top: 56px; margin-bottom: 0; font-family: var(--font-headline); font-weight: 300; font-size: 30px; line-height: 36px; letter-spacing: 0.75px; color: var(--text-body); }
.art-prose h2 + p, .art-prose h2 + * { margin-top: 23px; }
.art-prose h3, .art-prose h3.wp-block-heading { margin-top: 44px; margin-bottom: 0; font-family: var(--font-headline); font-weight: 400; font-size: 18px; line-height: 22.5px; color: var(--twm-ink); }
.art-prose a { color: var(--twm-ink); text-decoration: underline; text-underline-offset: 3px; }
/* pull-quote → a centred breakout band (min(976px,92vw)) holding a left-aligned 940px figure;
   the band carries the position (left:50% + negative margin escapes the 672px prose column at
   every width), the figure the vertical padding, and the quote itself just the 48/60 fine face. */
.art-quote-band { position: relative; left: 50%; width: min(976px, 92vw); margin: 24px 0 0; margin-left: calc(min(976px, 92vw) / -2); }
.art-quote { margin: 0; padding: 54.4px 0; max-width: 940px; }
.art-prose blockquote, .art-prose .wp-block-quote, .art-prose .wp-block-pullquote { margin: 0; border: 0; padding: 0; width: auto; text-align: start; font-family: var(--font-fine); font-weight: 300; font-style: italic; font-size: 48px; line-height: 60px; letter-spacing: 0; color: var(--text-body); }
.art-prose blockquote p { margin: 0; font: inherit; }
.art-prose blockquote cite, .art-prose .wp-block-pullquote cite { display: none; }
/* lists → dot bullets */
.art-prose ul { list-style: none; margin-top: 20px; padding: 0; }
.art-prose ul li { position: relative; padding-left: 19px; margin-top: 8px; font-family: var(--font-soft); font-size: 16px; line-height: 26px; letter-spacing: 0.1px; color: var(--twm-ink); }
.art-prose ul li::before { content: ""; position: absolute; left: 0; top: 10px; width: 5px; height: 5px; border-radius: 99px; background: var(--twm-ink); }
.art-prose ol { margin-top: 20px; padding-left: 1.2em; font-family: var(--font-soft); font-size: 16px; line-height: 26px; }
.art-prose figure, .art-prose .wp-block-image { margin-top: 44px; }
.art-prose img { max-width: 100%; height: auto; display: block; }
.art-prose figcaption { margin-top: 12px; font-family: var(--font-utility); font-size: 8.7px; letter-spacing: 2.6px; text-transform: uppercase; color: var(--twm-placeholder); text-align: center; }

/* next Reads card hover */
.art-next__grid a:hover h3 { text-decoration: underline; text-underline-offset: 3px; }

/* ---- base geometry (core-block build): hero, credits, next-reads ---- */
.art-single { padding-top: 123px; }
.art-hero-rail { width: min(1284px, 94vw); margin: clamp(56px, 6vw, 96px) auto 0; align-items: flex-end; }
.art-rail-col { width: 64px; flex-shrink: 0; display: flex; justify-content: center; align-items: flex-end; gap: 10px; align-self: stretch; }
.art-credits { writing-mode: vertical-rl; transform: rotate(180deg); white-space: nowrap; display: inline-flex; align-items: baseline; gap: 12px; }
.art-credits .wp-block-buttons, .art-credits .wp-block-button { margin: 0; display: contents; }
.art-credits__toggle, .art-credits .wp-block-button__link { font-family: var(--font-utility); font-size: 8.7px; letter-spacing: 2.6px; text-transform: uppercase; color: var(--twm-ink); background: none; border: 0; border-radius: 0; padding: 0; cursor: pointer; text-decoration: none; }
.art-credits__text { margin: 0; font-family: var(--font-utility); font-size: 11px; line-height: 16.5px; color: var(--text-muted); opacity: 0; transition: opacity .25s ease; }
.art-credits.is-open .art-credits__text { opacity: 1; }
.art-hero-imgcol { width: clamp(360px, 42%, 600px); flex-shrink: 0; }
.art-hero-media { position: relative; width: 100%; aspect-ratio: 3/4; background: var(--surface-band); }
.art-hero-media figure.wp-block-post-featured-image { position: absolute; inset: 0; margin: 0; }
.art-hero-media figure.wp-block-post-featured-image a { display: block; position: static; }
.art-hero-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 22%; }
.art-hero-copy { flex: 1; padding-left: clamp(44px, 7%, 104px); display: flex; flex-direction: column; justify-content: flex-end; align-self: stretch; }
.art-hero-copy h1.wp-block-post-title { margin: 0; font-family: var(--font-headline); font-weight: 300; font-size: clamp(36px, 3.6vw, 48px); line-height: 1.1; color: var(--twm-ink); }
.art-hero-copy .art-stand, .art-hero-copy .art-stand p { margin: 0; max-width: 400px; font-family: var(--font-headline); font-weight: 400; font-size: 18px; line-height: 27px; color: var(--twm-ink); }
.art-hero-copy .art-stand { margin-top: clamp(26px, 3vw, 40px); }
.art-hero-meta { margin-top: clamp(28px, 3vw, 44px); display: flex; align-items: center; gap: 24px; flex-wrap: wrap; }
.art-hero-meta > * { display: flex; align-items: center; gap: 8px; margin: 0; font-family: var(--font-utility); font-weight: 400; font-size: 9px; line-height: 11.25px; letter-spacing: 0.9px; text-transform: uppercase; color: var(--twm-ink); }
.art-hero-meta :is(p, div, time, a) { margin: 0; font: inherit; letter-spacing: inherit; color: inherit; text-decoration: none; }
.art-hero-stack { width: min(560px, 100%); margin: 40px auto 0; padding: 0 20px; box-sizing: border-box; flex-direction: column; align-items: center; }
.art-hero-stack .art-hero-meta { margin-top: 0; justify-content: center; }
.art-hero-stack h1.wp-block-post-title { margin: 22px 0 0; text-align: center; font-family: var(--font-headline); font-weight: 300; font-size: clamp(30px, 8vw, 40px); line-height: 1.15; color: var(--twm-ink); }
.art-stack-media { width: 100%; margin-top: 32px; display: flex; align-items: flex-end; gap: 10px; }
.art-stack-media .art-hero-media { flex: 1; }
.art-stack-media .art-rail-col { width: auto; align-self: stretch; }
.art-hero-stack .art-stand { margin-top: 26px; text-align: center; }
.art-prose { margin: clamp(64px, 8vw, 120px) 0 0; }
.art-next { width: min(1284px, 94vw); margin: clamp(72px, 8vw, 120px) auto 0; border-top: 1px solid var(--border-default); padding-top: clamp(44px, 5vw, 64px); display: flex; flex-direction: column; align-items: center; }
.art-next-word { margin: 0; font-family: var(--font-fine); font-weight: 300; font-style: italic; font-size: clamp(28px, 4vw, 36px); line-height: 1; letter-spacing: 0.9px; color: var(--twm-ink); }
.art-next-reads { margin: 6px 0 0; font-family: var(--font-headline); font-weight: 300; font-style: normal; font-size: clamp(28px, 4vw, 36px); line-height: 1; letter-spacing: 0.9px; text-transform: uppercase; color: var(--twm-ink); }
.art-next__grid { width: 100%; max-width: 963px; margin-top: clamp(32px, 4vw, 48px); display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: clamp(18px, 2.5vw, 24px); }
.art-next__grid > .wp-block-query, .art-next__grid .wp-block-post-template { display: contents; }
.art-next__grid .wp-block-post-template > li.wp-block-post { display: contents; }
.art-next__grid article.wp-block-group { display: flex; flex-direction: column; cursor: pointer; }
.art-next__grid article.wp-block-group > a { display: flex; flex-direction: column; text-decoration: none; color: inherit; }
.art-next__grid .art-card-media { position: relative; width: 100%; aspect-ratio: 3/4; background: var(--surface-band); }
.art-next__grid .art-card-media figure.wp-block-post-featured-image { position: absolute; inset: 0; margin: 0; }
.art-next__grid .art-card-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 45%; }
.art-card-meta { display: flex; align-items: center; gap: 5px; margin-top: 14px; }
.art-card-meta :is(p, div, time, a) { margin: 0; font-family: var(--font-utility); font-size: 9px; line-height: 13.5px; letter-spacing: 0.9px; text-transform: uppercase; color: var(--text-body); text-decoration: none; }
.art-card-meta .wp-block-post-terms { font-weight: 600; }
.art-card-meta .twm-slash { letter-spacing: 0.45px; font-weight: 400; }
.art-card-meta .wp-block-post-date { font-weight: 300; }
.art-next__grid h3.wp-block-post-title { margin: 6px 0 0; font-family: var(--font-headline); font-weight: 300; font-size: 20px; line-height: 25px; color: var(--text-body); text-wrap: pretty; }
.art-next__grid h3.wp-block-post-title a { color: inherit; text-decoration: none; }
.art-viewall { margin-top: clamp(32px, 4vw, 48px); }
.art-viewall .wp-block-button { margin: 0; }
.art-viewall .wp-block-button__link { display: inline-flex; align-items: center; justify-content: center; padding: 11px 20px; box-sizing: border-box; border-radius: 0; background: var(--twm-ink); border: 1px solid var(--twm-ink); color: var(--twm-white); font-family: 'proxima-nova', var(--font-sans); font-weight: 400; font-size: 12px; line-height: 16.8px; letter-spacing: 2px; text-transform: uppercase; text-decoration: none; transition: background .2s ease, color .2s ease, border-color .2s ease; }
/* dark-initial button → inverse of the view-all-collections outline (fill drops away on hover) */
.art-viewall .wp-block-button__link:hover { background: transparent; color: var(--twm-ink); border-color: var(--twm-ink); }