/*
Theme Name: Staying in True
Theme URI: https://bowmanhomelabtech.net
Author: Nathan Bowman
Description: Block theme for bowmanhomelabtech.net — "Staying in True: The Path of the Vitruvian Developer". Palette: Indigo and undyed wool (Oatmeal). Type: Fraunces, Literata, Public Sans.
Version: 0.1.0
Requires at least: 6.6
Tested up to: 6.8
Requires PHP: 8.1
License: GNU General Public License v2 or later
Text Domain: staying-in-true
*/

/* Dark theme: the same room at night. Tokens only — components read the presets. */
@media (prefers-color-scheme: dark) {
  html:root, html body {
    --wp--preset--color--base: #1e1a17;
    --wp--preset--color--contrast: #e9e2d7;
    --wp--preset--color--muted: #a49a8e;
    --wp--preset--color--accent: #a5b0e8;
    --wp--preset--color--second: #d49a80;
    --wp--preset--color--line: #342e29;
    --wp--preset--color--card: #272220;
  }
}
html { color-scheme: light dark; }
body { -webkit-font-smoothing: antialiased; }

/* Eyebrow labels: utility face, tracked caps. */
.sit-eyebrow {
  font-family: var(--wp--preset--font-family--utility);
  font-size: 0.72rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--wp--preset--color--accent);
}
.sit-eyebrow .listen { color: var(--wp--preset--color--second); }
h1, h2, h3, .wp-block-post-title, .wp-block-site-title { text-wrap: balance; }
.wp-block-site-title a { text-decoration: none; }

/* Letters: the note below the rule sits smaller, quieter. */
.sit-thread { font-size: 0.92em; color: var(--wp--preset--color--muted); border-top: 1px solid var(--wp--preset--color--line); padding-top: 1.2rem; margin-top: 2.4rem; }
.sit-thread p { margin: 0.4em 0; }
.wp-block-audio { margin: 1.4rem 0 2rem; }
.wp-block-audio audio { width: 100%; }
figure.wp-block-audio figcaption { font-family: var(--wp--preset--font-family--utility); font-size: 0.78rem; color: var(--wp--preset--color--muted); }

/* Post list rows compose as one object: title, date, excerpt share edges. */
.sit-list .wp-block-post { padding: 1.1rem 0; border-top: 1px solid var(--wp--preset--color--line); }
.sit-list .wp-block-post:last-child { border-bottom: 1px solid var(--wp--preset--color--line); }
.sit-list .wp-block-post-title { font-size: 1.35rem; margin: 0.15rem 0 0.3rem; }
.sit-list .wp-block-post-date { font-family: var(--wp--preset--font-family--utility); font-size: 0.74rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--wp--preset--color--muted); }
.sit-list .wp-block-post-excerpt__excerpt { margin: 0; }
.sit-list .wp-block-post-excerpt__more-text { display: none; }

/* Header and footer rules. */
.sit-header { border-bottom: 1px solid var(--wp--preset--color--line); }
.sit-footer { border-top: 1px solid var(--wp--preset--color--line); font-family: var(--wp--preset--font-family--utility); font-size: 0.8rem; color: var(--wp--preset--color--muted); }
.sit-footer a { color: inherit; }
.wp-block-navigation a { text-decoration: none; }
.wp-block-navigation a:hover { text-decoration: underline; text-underline-offset: 3px; }
.wp-block-navigation { font-family: var(--wp--preset--font-family--utility); font-size: 0.86rem; }

/* Tables and code never scroll the page. */
.wp-block-table { overflow-x: auto; }
pre, .wp-block-code { overflow-x: auto; }
:focus-visible { outline: 2px solid var(--wp--preset--color--accent); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } }

/* ===== Front page: the flow (hero, quote band, alternating sections, cards, now row, closing band) ===== */
.sit-overline { font-family: var(--wp--preset--font-family--utility); font-size: 0.72rem; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--wp--preset--color--accent); margin: 0 0 0.6rem; }

/* Hero: a single dark world regardless of theme; the photo sets the mood. */
.sit-hero { display: flex; align-items: center; color: #f3ede3; padding: 5rem 1.25rem; }
.sit-hero .wp-block-cover__inner-container { max-width: 44rem; margin: 0 auto; }
.sit-hero .sit-overline { color: #d9cfbf; margin-bottom: 1rem; }
.sit-hero h1 { color: #f6f1e8; font-size: clamp(2.3rem, 5.2vw, 3.6rem); line-height: 1.08; margin: 0 0 1.2rem; letter-spacing: -0.01em; }
.sit-hero .sit-hero-lede { color: #d9cfbf; font-size: 1.1rem; margin: 0 0 2rem; }
.sit-hero .wp-block-buttons { margin-bottom: 0; }
.sit-scroll { display: block; width: 28px; height: 28px; margin: 3rem auto 0; }
.sit-scroll span { display: block; width: 12px; height: 12px; margin: 6px auto; border-right: 2px solid #d9cfbf; border-bottom: 2px solid #d9cfbf; transform: rotate(45deg); animation: sit-bounce 2s infinite; }
@keyframes sit-bounce { 0%,20%,50%,80%,100% { transform: rotate(45deg) translate(0,0); } 40% { transform: rotate(45deg) translate(-4px,-4px); } }
@media (prefers-reduced-motion: reduce) { .sit-scroll span { animation: none; } }

/* Buttons. */
.wp-block-button .wp-block-button__link { font-family: var(--wp--preset--font-family--utility); font-size: 0.76rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; padding: 0.85rem 1.7rem; border-radius: 999px; border: 1px solid transparent; border-width: 1px; line-height: 1.2; text-decoration: none; transition: background-color .2s, color .2s, border-color .2s; }
.wp-block-button.sit-btn-primary .wp-block-button__link { background: var(--wp--preset--color--accent); color: var(--wp--preset--color--base); border-color: var(--wp--preset--color--accent); }
.wp-block-button.sit-btn-primary .wp-block-button__link:hover { background: var(--wp--preset--color--contrast); border-color: var(--wp--preset--color--contrast); color: var(--wp--preset--color--base); }
.wp-block-button.sit-btn-outline .wp-block-button__link { background: transparent; color: var(--wp--preset--color--contrast); border-color: var(--wp--preset--color--muted); }
.wp-block-button.sit-btn-outline .wp-block-button__link:hover { border-color: var(--wp--preset--color--accent); color: var(--wp--preset--color--accent); }
.sit-hero .wp-block-button.sit-btn-primary .wp-block-button__link { background: #ede7dd; color: #262220; border-color: #ede7dd; }
.sit-hero .wp-block-button.sit-btn-primary .wp-block-button__link:hover { background: #fff; border-color: #fff; color: #262220; }
.sit-hero .wp-block-button.sit-btn-outline .wp-block-button__link { color: #f3ede3; border-color: #f3ede3; }
.sit-hero .wp-block-button.sit-btn-outline .wp-block-button__link:hover { background: rgba(255,255,255,0.12); }

/* Quote band. */
.sit-band { background: var(--wp--preset--color--card); border-top: 1px solid var(--wp--preset--color--line); border-bottom: 1px solid var(--wp--preset--color--line); padding: 3.5rem 1.25rem; }
.sit-oak { margin: 0 auto 1.2rem; }
.sit-oak img { display: block; margin: 0 auto; opacity: 0.85; }
@media (prefers-color-scheme: dark) { .sit-oak img { filter: invert(0.88); } }
.sit-quote { font-family: var(--wp--preset--font-family--display); font-style: italic; font-size: clamp(1.3rem, 2.4vw, 1.7rem); line-height: 1.45; max-width: 40rem; margin: 0 auto 0.9rem; }
.sit-quote-attr { font-family: var(--wp--preset--font-family--utility); font-size: 0.74rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--wp--preset--color--muted); margin: 0; }

/* Sections. */
.sit-section { padding: 5.5rem 1.25rem; }
.sit-section-alt { background: var(--wp--preset--color--card); }
.sit-h2 { font-size: clamp(1.8rem, 3.2vw, 2.4rem); line-height: 1.15; margin: 0 0 1rem; }
.sit-h2::after { content: ""; display: block; width: 56px; height: 3px; background: var(--wp--preset--color--accent); margin-top: 1rem; opacity: 0.8; }
.sit-h2-center::after { margin-left: auto; margin-right: auto; }
.sit-subtitle { font-size: 1.1rem; line-height: 1.7; color: var(--wp--preset--color--muted); margin: 0 0 1.6rem; }
.sit-subtitle-center { max-width: 40rem; margin-left: auto; margin-right: auto; margin-bottom: 2.4rem; }
.sit-twocol { gap: 3.5rem !important; }
.sit-frame img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 6px; display: block; }
.sit-frame { margin: 0; }
.sit-section .wp-block-buttons { margin-top: 0.4rem; }
.sit-section .sit-list-compact { margin: 0 0 1.6rem; }
.sit-list-compact .wp-block-post { padding: 0.6rem 0; }
.sit-list-compact .wp-block-post:first-child { border-top: 1px solid var(--wp--preset--color--line); }
.sit-list-compact .wp-block-post-title { font-size: 1.1rem; font-family: var(--wp--preset--font-family--body); font-weight: 400; margin: 0.1rem 0 0; }
.sit-list-compact .wp-block-post-title a { text-decoration: none; }
.sit-list-compact .wp-block-post-title a:hover { text-decoration: underline; text-underline-offset: 3px; }

/* Cards. */
.sit-cards { margin: 0 0 2.4rem; }
.sit-card { background: var(--wp--preset--color--base); border: 1px solid var(--wp--preset--color--line); border-radius: 10px; padding: 1.6rem 1.5rem; transition: transform .2s, border-color .2s; }
.sit-card:hover { transform: translateY(-4px); border-color: var(--wp--preset--color--muted); }
.sit-card h3 { font-size: 1.2rem; margin: 0 0 0.5rem; }
.sit-card p { margin: 0; color: var(--wp--preset--color--muted); font-size: 0.98rem; }

/* Now row. */
.sit-now-row { margin: 2.4rem 0; text-align: center; }
.sit-now-item { padding: 0 0.6rem; }
.sit-now-word { font-family: var(--wp--preset--font-family--display); font-size: 1.5rem; font-weight: 600; margin: 0 0 0.5rem; color: var(--wp--preset--color--second); }
.sit-now-word::before { content: ""; display: block; width: 28px; height: 3px; background: var(--wp--preset--color--accent); opacity: 0.8; margin: 0 auto 0.9rem; }
.sit-now-item p:last-child { margin: 0; color: var(--wp--preset--color--muted); font-size: 0.98rem; }

/* Closing band. */
.sit-cta { background: var(--wp--preset--color--accent); color: var(--wp--preset--color--base); padding: 5rem 1.25rem; }
.sit-cta h2 { color: inherit; font-size: clamp(1.7rem, 3vw, 2.3rem); margin: 0 0 1rem; }
.sit-cta p { color: inherit; opacity: 0.9; max-width: 38rem; margin: 0 auto 1.8rem; font-size: 1.05rem; }
.sit-cta .wp-block-button.sit-btn-primary .wp-block-button__link { background: var(--wp--preset--color--base); color: var(--wp--preset--color--accent); border-color: var(--wp--preset--color--base); }
.sit-cta .wp-block-button.sit-btn-primary .wp-block-button__link:hover { background: var(--wp--preset--color--contrast); border-color: var(--wp--preset--color--contrast); color: var(--wp--preset--color--base); }

@media (max-width: 781px) {
  .sit-section { padding: 3.5rem 1.25rem; }
  .sit-twocol-flip .wp-block-column:first-child { order: 2; }
  .sit-cards, .sit-now-row { grid-template-columns: 1fr 1fr !important; }
}
@media (max-width: 520px) { .sit-cards, .sit-now-row { grid-template-columns: 1fr !important; } }

/* Icons on cards and the now row. */
.sit-icon { display: block; color: var(--wp--preset--color--accent); margin: 0 0 0.9rem; }
.sit-icon svg { display: block; }
.sit-section .sit-card { background: var(--wp--preset--color--base); border: 1px solid var(--wp--preset--color--line); }
.sit-section-alt.sit-section-alt { background: var(--wp--preset--color--card); }

/* Hero height: viewport-relative on real screens, but capped so tall windows don't inflate it. */
.wp-block-cover.sit-hero { min-height: clamp(560px, 88vh, 820px) !important; }

/* Goodreads shelf. */
.sit-shelf { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 1.4rem 1.2rem; margin: 1.2rem 0 1.6rem; }
.sit-shelf-book { display: block; text-decoration: none; color: inherit; font-family: var(--wp--preset--font-family--utility); font-size: 0.8rem; line-height: 1.35; }
.sit-shelf-book img, .sit-shelf-nocover { display: block; width: 100%; aspect-ratio: 2 / 3; object-fit: cover; border-radius: 3px; border: 1px solid var(--wp--preset--color--line); background: var(--wp--preset--color--card); margin-bottom: 0.5rem; box-shadow: 0 1px 2px rgba(0,0,0,.08); }
.sit-shelf-title { display: block; font-weight: 600; }
.sit-shelf-author, .sit-shelf-date { display: block; color: var(--wp--preset--color--muted); }
.sit-shelf-book:hover .sit-shelf-title { text-decoration: underline; text-underline-offset: 3px; }

/* Bookshelf voices: each entry is one paragraph; the name leads. */
.sit-voice { padding: 0.9rem 0; border-top: 1px solid var(--wp--preset--color--line); margin: 0; }
.sit-voice:last-of-type { border-bottom: 1px solid var(--wp--preset--color--line); }
.sit-voice strong { font-family: var(--wp--preset--font-family--display); font-size: 1.15em; }
.sit-muted { color: var(--wp--preset--color--muted); }

/* Inner-page hero: split, on the card ground. */
.sit-pagehero { background: var(--wp--preset--color--card); border-bottom: 1px solid var(--wp--preset--color--line); padding: 3.5rem 1.25rem 3rem; }
.sit-pagehero h1 { font-size: clamp(2.2rem, 4.2vw, 3.1rem); line-height: 1.08; margin: 0 0 1rem; }
.sit-pagehero .sit-subtitle { margin-bottom: 0; }
.sit-pagehero .sit-frame img { aspect-ratio: 5 / 4; }

/* Shelf band. */
.sit-shelfband { padding: 3.5rem 1.25rem 3rem; }
.sit-shelfband .sit-shelf { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 1.6rem 1.4rem; }
.sit-shelf-source { font-family: var(--wp--preset--font-family--utility); font-size: 0.78rem; color: var(--wp--preset--color--muted); margin: 0; }

/* Voices as a two-column card grid. */
.sit-voices { margin: 2rem 0 0; }
.sit-voice-card { background: var(--wp--preset--color--card); border: 1px solid var(--wp--preset--color--line); border-radius: 10px; padding: 1.5rem 1.5rem 1.3rem; display: flex; flex-direction: column; }
.sit-section-alt .sit-voice-card { background: var(--wp--preset--color--base); }
.sit-voice-card h3 { font-size: 1.3rem; line-height: 1.2; margin: 0 0 0.6rem; }
.sit-voice-card .sit-voice-body { margin: 0 0 0.9rem; }
.sit-voice-card .sit-voice-start { font-family: var(--wp--preset--font-family--utility); font-size: 0.86rem; line-height: 1.5; color: var(--wp--preset--color--muted); margin: 0 0 1rem; }
.sit-voice-card .sit-voice-start b { color: var(--wp--preset--color--contrast); font-weight: 600; }
.sit-voice-card .sit-voice-start em, .sit-voice-card .sit-voice-body em { font-style: italic; }
.sit-chips { display: flex; flex-wrap: wrap; align-items: center; gap: 0.35rem; margin-top: auto; font-family: var(--wp--preset--font-family--utility); font-size: 0.74rem; }
.sit-chips-label { color: var(--wp--preset--color--muted); letter-spacing: 0.08em; text-transform: uppercase; margin-right: 0.2rem; }
.sit-chip { display: inline-block; min-width: 1.9em; text-align: center; padding: 0.15rem 0.5rem; border: 1px solid var(--wp--preset--color--accent); border-radius: 999px; color: var(--wp--preset--color--accent); text-decoration: none; font-weight: 600; }
a.sit-chip:hover { background: var(--wp--preset--color--accent); color: var(--wp--preset--color--base); }
.sit-chip-soon { border-color: var(--wp--preset--color--line); color: var(--wp--preset--color--muted); font-weight: 400; }
@media (max-width: 781px) { .sit-voices { grid-template-columns: 1fr !important; } }
.sit-voice-card > * { margin-left: 0 !important; margin-right: 0 !important; max-width: none !important; text-align: left; }
.sit-voice-card .sit-chips { justify-content: flex-start; }

/* Listening: podcast cards. */
.sit-pods { margin: 0.5rem 0 0; }
.sit-pod > * { margin-left: 0 !important; margin-right: 0 !important; max-width: none !important; text-align: left; }
.sit-pod-art { display: block; margin-bottom: 0.9rem; }
.sit-pod-art img { display: block; width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 8px; border: 1px solid var(--wp--preset--color--line); }
.sit-pod h3 { font-size: 1.15rem; margin: 0 0 0.25rem; }
.sit-pod h3 a { color: inherit; text-decoration: none; }
.sit-pod h3 a:hover { text-decoration: underline; text-underline-offset: 3px; }
.sit-pod-who { font-family: var(--wp--preset--font-family--utility); font-size: 0.78rem; color: var(--wp--preset--color--muted); margin: 0 0 0.6rem !important; }
.sit-pod p:last-child { margin: 0; font-size: 0.95rem; }
@media (max-width: 781px) { .sit-pods { grid-template-columns: 1fr 1fr !important; } }
@media (max-width: 520px) { .sit-pods { grid-template-columns: 1fr !important; } }
/* An odd last card in a two-column grid spans the row instead of sitting alone. */
@media (min-width: 782px) { .sit-voices:not(.sit-three) > .sit-voice-card:last-child:nth-child(odd) { grid-column: 1 / -1; } }

/* Projects: prose sections and UI screenshots. */
.sit-prose > * { max-width: 42rem; }
.sit-frame-ui img { aspect-ratio: 11 / 8; object-fit: cover; object-position: top; border: 1px solid var(--wp--preset--color--line); }

/* Daily form: three-up cards and the credit block. */
@media (max-width: 781px) { .sit-three { grid-template-columns: 1fr !important; } }
.sit-credit { border-top: 1px solid var(--wp--preset--color--line); padding-top: 1.5rem; }
.sit-credit p:last-child { font-size: 0.95rem; color: var(--wp--preset--color--muted); }
.sit-shelf-sub { font-family: var(--wp--preset--font-family--utility); font-size: 0.74rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--wp--preset--color--muted); margin: 1.6rem 0 0; }
.sit-shelf-sub:first-of-type { margin-top: 0.4rem; }
.sit-frame-doc img { aspect-ratio: auto; object-fit: contain; border: 1px solid var(--wp--preset--color--line); background: #fff; }

/* Header: brand with the oak on the left, nav on the right, across the wide measure. */
.sit-header-row { gap: 1rem 2rem; }
.sit-brand-mark { display: block; flex: none; line-height: 0; }
.sit-brand-mark img { width: 44px; height: 44px; display: block; opacity: 0.9; }
@media (prefers-color-scheme: dark) { .sit-brand-mark img { filter: invert(0.88); } }
.sit-header .wp-block-navigation { font-size: 0.9rem; }
@media (max-width: 600px) { .sit-brand-mark img { width: 36px; height: 36px; } }

/* Front-page headliner band ([sit_headliner]); renders only while a published post carries the tag. */
.sit-headliner { background: var(--wp--preset--color--base); border-bottom: 1px solid var(--wp--preset--color--line); border-top: 4px solid var(--wp--preset--color--accent); padding: 3.5rem 1.25rem; }
.sit-headliner-inner { max-width: 44rem; margin: 0 auto; }
.sit-headliner .sit-h2 a { color: inherit; text-decoration: none; }
.sit-headliner .sit-h2 a:hover { color: var(--wp--preset--color--accent); }
.sit-headliner .sit-subtitle { margin-bottom: 1.4rem; }