/* Layout: a small gilded masthead, then each article as a full-width painting followed by a single readable column; gold ornaments separate articles. */
:root {
  --paper: #FFFDF9;
  --ink: #2B2520;
  --muted: #776B60;
  --gold: #8E6A2C;       /* text-safe gold for links on paper */
  --gold-soft: #B8924B;  /* ornaments and rules */
  --gold-hi: #E9CF8A;    /* highlights in the gilded wordmark */
  --rule: #ECE2D2;
  --wash: #F8F2E8;
  --display: "Cormorant Garamond", "Cormorant", Garamond, "Times New Roman", serif;
  --body: "Crimson Pro", "Iowan Old Style", Georgia, serif;
}
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) {
  --paper: #16130F; --ink: #EDE6DA; --muted: #A99D8E; --gold: #D6B36E; --gold-soft: #B8924B; --gold-hi: #F4DFA6; --rule: #3A3128; --wash: #201B16; color-scheme: dark } }
:root[data-theme="dark"] {
  --paper: #16130F; --ink: #EDE6DA; --muted: #A99D8E; --gold: #D6B36E; --gold-soft: #B8924B; --gold-hi: #F4DFA6; --rule: #3A3128; --wash: #201B16; color-scheme: dark }

* { box-sizing: border-box }
[hidden] { display: none !important }
html { -webkit-text-size-adjust: 100% }
body { margin: 0; padding-top: env(safe-area-inset-top, 0px); padding-bottom: env(safe-area-inset-bottom, 0px); background: var(--paper); color: var(--ink); font-family: var(--body); font-size: 1.15rem; line-height: 1.7; -webkit-font-smoothing: antialiased }
a { color: var(--gold); text-decoration-thickness: 1px; text-underline-offset: 3px }
a:focus-visible, button:focus-visible, input:focus-visible { outline: 2px solid var(--gold-soft); outline-offset: 3px }
.wrap { max-width: 1240px; margin-inline: auto; padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)) }

/* Masthead */
.mast { border-bottom: 1px solid var(--rule) }
.mast-top { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; padding-block: 18px 12px; gap: 8px }
.wordmark { grid-column: 2; font-family: var(--display); font-weight: 500; font-size: clamp(2rem, 5vw, 2.6rem); letter-spacing: .02em; line-height: 1; text-decoration: none;
  background:
    radial-gradient(circle at 18% 30%, var(--gold-hi) 0 1px, transparent 1.6px),
    radial-gradient(circle at 63% 72%, var(--gold-hi) 0 1px, transparent 1.6px),
    radial-gradient(circle at 82% 22%, #fff7df 0 .8px, transparent 1.4px),
    radial-gradient(circle at 40% 80%, #fff7df 0 .8px, transparent 1.4px),
    linear-gradient(115deg, #8A6427 0%, #C9A257 28%, #F1DB9C 46%, #B88B3E 62%, #8A6427 80%, #C9A257 100%);
  background-size: 23px 19px, 29px 23px, 17px 13px, 31px 27px, 100% 100%;
  -webkit-background-clip: text; background-clip: text; color: transparent }
.search-toggle { grid-column: 3; justify-self: end; background: none; border: 0; color: var(--gold); cursor: pointer; padding: 6px; border-radius: 50% }
.search-toggle svg { display: block; width: 20px; height: 20px }
nav.cats { display: flex; justify-content: center; flex-wrap: wrap; gap: 4px 30px; padding-block: 0 14px }
nav.cats a { font-family: var(--display); font-weight: 600; font-size: .98rem; letter-spacing: .16em; text-transform: uppercase; text-decoration: none }
nav.cats a:hover { text-decoration: underline }
.searchbar { display: flex; gap: 10px; justify-content: center; padding-block: 0 16px }
.searchbar input { font: inherit; font-size: 1rem; width: min(420px, 100%); padding: 8px 14px; border: 1px solid var(--rule); border-radius: 999px; background: var(--wash); color: var(--ink) }
.searchbar p { margin: 0; font-size: .95rem; color: var(--muted); align-self: center }

/* Article */
.post { padding-block: 34px 10px }
.hero { margin: 0 }
.hero img { width: 100%; max-height: 86vh; object-fit: cover; display: block }
.post-head { max-width: 760px; margin: 0 auto; text-align: center; padding-block: 34px 6px }
.eyebrow { margin: 0 0 10px; font-family: var(--display); font-weight: 600; letter-spacing: .24em; text-transform: uppercase; font-size: .85rem; color: var(--gold) }
.post-head h1 { margin: 0; font-family: var(--display); font-weight: 500; font-size: clamp(2.1rem, 5vw, 3.4rem); line-height: 1.08; text-wrap: balance }
.prose { max-width: 66ch; margin: 0 auto; min-width: 0 }
.prose > p:first-of-type::first-letter { font-family: var(--display); float: left; font-size: 4.2em; line-height: .82; padding: 6px 10px 0 0; color: var(--gold) }
.prose h2 { font-family: var(--display); font-weight: 500; font-size: clamp(1.6rem, 3.4vw, 2.05rem); line-height: 1.2; margin: 2.2em 0 .5em; text-wrap: balance }
.prose h3 { font-family: var(--display); font-weight: 600; font-style: italic; font-size: 1.35rem; line-height: 1.3; margin: 1.6em 0 .3em }
.prose hr { border: 0; margin: 2.4em auto; width: 100%; height: 12px; background: radial-gradient(circle, var(--gold-soft) 0 2.5px, transparent 3px) center / 12px 12px no-repeat }
.prose img { height: auto }
.prose blockquote { margin: 1.4em 0; padding-left: 1.2em; border-left: 1px solid var(--gold-soft); font-style: italic }
img { max-width: 100%; height: auto }
.pod-link { display: flex; align-items: center; gap: 14px; padding: 14px 18px; margin: 1em 0; border: 1px solid var(--rule); border-radius: 999px; text-decoration: none; background: var(--wash); max-width: 420px }
.pod-play { display: grid; place-items: center; width: 40px; height: 40px; flex: none; border-radius: 50%; background: linear-gradient(135deg, #B88B3E, #E9CF8A 55%, #A67A33); color: #2B2520; font-size: .85rem; padding-left: 3px }
.pod-link b { display: block; font-weight: 500; color: var(--ink) }
.pod-link small { display: block; font-size: .85rem; color: var(--muted) }

.flourish { display: flex; align-items: center; gap: 18px; max-width: 520px; margin: 56px auto 24px; color: var(--gold-soft); font-size: 1.1rem; padding-inline: 16px }
.flourish span { flex: 1; height: 1px; background: linear-gradient(90deg, transparent, var(--gold-soft), transparent) }

.next { text-align: center; padding-block: 50px 60px }
.next a { font-family: var(--display); font-size: clamp(1.8rem, 4vw, 2.4rem); font-weight: 500; letter-spacing: .08em; text-decoration: none; display: inline-flex; flex-direction: column; align-items: center; gap: 4px }
.next a small { font-family: var(--body); font-size: 1rem; letter-spacing: 0; color: var(--muted); font-style: italic }

footer { border-top: 1px solid var(--rule); padding-block: 34px 40px; text-align: center }
footer .wordmark { font-size: 1.7rem; display: inline-block }
footer nav.cats { padding-block: 16px 10px }
footer p { margin: 0; font-size: .92rem; color: var(--muted) }

@media (max-width: 560px) {
  body { font-size: 1.08rem }
  nav.cats { gap: 4px 18px }
  nav.cats a { font-size: .86rem; letter-spacing: .12em }
  .post { padding-block: 20px 6px }
  .hero { margin-inline: calc(-1 * max(16px, env(safe-area-inset-left, 0px))) }
}
@media (prefers-reduced-motion: no-preference) {
  .wordmark { transition: filter .3s } .wordmark:hover { filter: brightness(1.08) }
}


/* Site additions */
.post-title a { color: inherit; text-decoration: none }
.post-title a:hover { color: var(--gold) }
.eyebrow a { text-decoration: none; color: var(--gold) }
.pod { margin: 1em 0 }
.pod iframe { width: 100%; height: 192px; border: 0; display: block }
.prose figure { margin: 1.6em 0 }
.prose figcaption { font-size: .92rem; color: var(--muted); font-style: italic; text-align: center; margin-top: .4em }
.prose table { display: block; overflow-x: auto; border-collapse: collapse }
.searchbar { position: relative; flex-direction: column; align-items: center }
.results { list-style: none; margin: 8px 0 0; padding: 6px; width: min(520px, 100%); background: var(--paper); border: 1px solid var(--rule); border-radius: 14px; max-height: 60vh; overflow-y: auto; box-shadow: 0 12px 30px rgba(40,30,15,.12) }
.results li a { display: block; padding: 9px 12px; border-radius: 10px; text-decoration: none; color: var(--ink) }
.results li a:hover, .results li a:focus-visible { background: var(--wash) }
.results small { display: block; color: var(--gold); font-family: var(--display); font-weight: 600; letter-spacing: .14em; text-transform: uppercase; font-size: .72rem }
.results .none { padding: 9px 12px; color: var(--muted) }
.cat-head { text-align: center; padding-block: 44px 20px }
.cat-head h1 { margin: 0; font-family: var(--display); font-weight: 500; font-size: clamp(2.4rem, 6vw, 3.6rem); line-height: 1.05 }
.count { color: var(--muted); margin: 8px 0 0; font-style: italic }
.grid { list-style: none; margin: 10px 0 40px; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(260px, 100%), 1fr)); gap: 34px 26px }
.grid a { display: flex; flex-direction: column; gap: 12px; text-decoration: none; color: var(--ink) }
.grid img, .grid .ph { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block; background: var(--wash) }
.grid span { font-family: var(--display); font-weight: 500; font-size: 1.3rem; line-height: 1.25; text-wrap: balance }
.grid a:hover span { color: var(--gold) }
.foot-links { margin-bottom: 8px !important }
.pod iframe[src*="html5-player"] { height: 90px }