@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,500;0,700;1,400;1,600&family=DM+Sans:ital,wght@0,300;0,400;0,500;1,300&family=Crimson+Pro:ital,wght@0,300;0,400;0,600;1,300;1,400&display=swap');

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body { background: #f7f3ed; color: #1c1916; font-family: 'Crimson Pro', Georgia, serif; font-size: 19px; line-height: 1.72; -webkit-font-smoothing: antialiased; }
a { color: inherit; text-decoration: none; }

.site-header { background: #2d4a3e; padding: 0 2rem; }
.header-top { max-width: 1080px; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; padding: 0.55rem 0; border-bottom: 1px solid rgba(255,255,255,0.1); }
.header-top span { font-family: 'DM Sans', sans-serif; font-size: 0.68rem; letter-spacing: 0.1em; text-transform: uppercase; color: rgba(255,255,255,0.35); }
.header-tags { display: flex; gap: 1.5rem; }

.masthead-inner { max-width: 1080px; margin: 0 auto; position: relative; z-index: 1; padding: 0 0; }
.masthead-top { display: flex; align-items: flex-start; justify-content: space-between; padding-top: 2.5rem; margin-bottom: 1.5rem; }
.masthead-label { font-family: 'DM Sans', sans-serif; font-size: 0.65rem; letter-spacing: 0.2em; text-transform: uppercase; color: rgba(255,255,255,0.3); border: 1px solid rgba(255,255,255,0.15); padding: 0.3rem 0.7rem; display: inline-block; }
.masthead-issue { font-family: 'DM Sans', sans-serif; font-size: 0.65rem; letter-spacing: 0.12em; text-transform: uppercase; color: rgba(255,255,255,0.25); text-align: right; line-height: 1.8; }
.masthead-name { font-family: 'Playfair Display', serif; font-weight: 400; font-style: italic; font-size: clamp(3rem, 8vw, 6.5rem); color: #f7f3ed; line-height: 0.92; letter-spacing: -0.03em; display: block; margin-bottom: 1.25rem; }
.masthead-name:hover { opacity: 0.85; }
.masthead-tagline { font-family: 'Crimson Pro', serif; font-style: italic; font-size: 1.1rem; color: rgba(247,243,237,0.4); letter-spacing: 0.02em; padding-bottom: 1.75rem; border-bottom: 1px solid rgba(255,255,255,0.12); }

.sitenav { display: flex; justify-content: center; }
.sitenav a { font-family: 'DM Sans', sans-serif; font-size: 0.7rem; letter-spacing: 0.12em; text-transform: uppercase; color: rgba(255,255,255,0.45); padding: 0.8rem 1.2rem; display: inline-block; border-bottom: 2px solid transparent; transition: color 0.15s, border-color 0.15s; }
.sitenav a:hover { color: rgba(255,255,255,0.8); }
.sitenav a.active { color: #f7f3ed; border-bottom-color: #c8a84b; }

.page-wrap { max-width: 1080px; margin: 0 auto; padding: 0 2rem; }

/* FEATURED */
.featured { padding: 3rem 0; border-bottom: 1px solid #d4cec4; display: grid; grid-template-columns: 1fr 1fr; gap: 3.5rem; align-items: start; }
.feat-num { font-family: 'Playfair Display', serif; font-size: 5rem; font-weight: 700; color: #e8e2d8; line-height: 1; margin-bottom: 0.5rem; display: block; }
.feat-label { font-family: 'DM Sans', sans-serif; font-size: 0.65rem; font-weight: 500; letter-spacing: 0.2em; text-transform: uppercase; color: #8a6a30; margin-bottom: 0.85rem; display: flex; align-items: center; gap: 0.6rem; }
.feat-label::after { content: ''; flex: 0 0 20px; height: 1px; background: #8a6a30; }
.feat-title { font-family: 'Playfair Display', serif; font-weight: 500; font-size: clamp(1.7rem, 3vw, 2.5rem); line-height: 1.2; letter-spacing: -0.02em; color: #1c1916; margin-bottom: 1rem; }
.feat-title a:hover { color: #2d4a3e; }
.feat-excerpt { font-family: 'Crimson Pro', serif; font-size: 1.05rem; line-height: 1.78; color: #4a4540; margin-bottom: 1.25rem; }
.feat-byline { font-family: 'DM Sans', sans-serif; font-size: 0.75rem; color: #9a9590; display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; }
.feat-byline .sep { color: #d4cec4; }
.feat-read { font-family: 'DM Sans', sans-serif; font-size: 0.72rem; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; color: #2d4a3e; border-bottom: 1px solid rgba(45,74,62,0.35); }
.feat-read:hover { opacity: 0.65; }
.feat-poem-block { background: #2d4a3e; padding: 2.5rem; position: relative; margin-top: 0.5rem; }
.feat-poem-block::before { content: ''; position: absolute; top: 0.75rem; left: 0.75rem; right: -0.75rem; bottom: -0.75rem; border: 1px solid #c8a84b; z-index: -1; }
.feat-poem-text { font-family: 'Crimson Pro', serif; font-style: italic; font-size: 1.05rem; line-height: 2; color: rgba(247,243,237,0.8); white-space: pre-line; }
.feat-poem-cite { display: block; font-family: 'DM Sans', sans-serif; font-size: 0.62rem; letter-spacing: 0.1em; text-transform: uppercase; color: #c8a84b; margin-top: 1.25rem; opacity: 0.8; }

/* SECTION LABEL */
.sec-label { font-family: 'DM Sans', sans-serif; font-size: 0.65rem; font-weight: 500; letter-spacing: 0.22em; text-transform: uppercase; color: #9a9590; padding: 2.5rem 0 1.5rem; display: flex; align-items: center; gap: 1rem; justify-content: space-between; }
.sec-label::before { content: ''; flex: 0 0 2rem; height: 1px; background: #c8a84b; }
.sec-label a { color: #2d4a3e; border-bottom: 1px solid rgba(45,74,62,0.3); font-size: 0.65rem; }
.sec-label a:hover { opacity: 0.7; }

/* POST TILES */
.post-tiles { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 2rem 2.5rem; padding-bottom: 3rem; border-bottom: 1px solid #d4cec4; }
.tile { padding-bottom: 2rem; border-bottom: 1px solid #e8e2d8; }
.tile-num { font-family: 'Playfair Display', serif; font-size: 2.5rem; font-weight: 700; color: #e8e2d8; line-height: 1; margin-bottom: 0.3rem; display: block; }
.tile-tag { font-family: 'DM Sans', sans-serif; font-size: 0.62rem; font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase; color: #8a6a30; margin-bottom: 0.4rem; display: block; }
.tile-date { font-family: 'DM Sans', sans-serif; font-size: 0.65rem; color: #9a9590; margin-bottom: 0.5rem; display: block; }
.tile-title { font-family: 'Playfair Display', serif; font-weight: 400; font-size: 1.1rem; line-height: 1.3; letter-spacing: -0.01em; color: #1c1916; margin-bottom: 0.6rem; }
.tile-title a:hover { color: #2d4a3e; }
.tile-excerpt { font-family: 'Crimson Pro', serif; font-size: 0.92rem; line-height: 1.65; color: #6a6560; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.tile-wide { grid-column: span 2; display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; padding-bottom: 2rem; border-bottom: 1px solid #e8e2d8; }
.tile-wide .tile-title { font-size: 1.4rem; }
.tile-wide .tile-excerpt { -webkit-line-clamp: 4; }

/* ARCHIVE BAND */
.archive-band { background: #1c1916; padding: 2.5rem 2rem; margin: 0 -2rem; }
.archive-band-inner { max-width: 1080px; margin: 0 auto; }
.archive-band-top { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 1.5rem; padding-bottom: 1rem; border-bottom: 1px solid rgba(255,255,255,0.08); }
.archive-band-top h2 { font-family: 'Playfair Display', serif; font-style: italic; font-weight: 400; font-size: 1.4rem; color: rgba(247,243,237,0.7); letter-spacing: -0.01em; }
.archive-band-top a { font-family: 'DM Sans', sans-serif; font-size: 0.68rem; letter-spacing: 0.08em; color: #c8a84b; border-bottom: 1px solid rgba(200,168,75,0.35); }
.archive-band-top a:hover { opacity: 0.7; }
.archive-band-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: rgba(255,255,255,0.05); }
.ab-item { background: #231f1b; padding: 1rem 1.25rem; transition: background 0.15s; }
.ab-item:hover { background: #2d2925; }
.ab-dt { font-family: 'DM Sans', sans-serif; font-size: 0.62rem; color: rgba(255,255,255,0.25); letter-spacing: 0.06em; margin-bottom: 0.3rem; }
.ab-tt { font-family: 'Crimson Pro', serif; font-size: 0.92rem; color: rgba(247,243,237,0.65); line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; transition: color 0.15s; }
.ab-item:hover .ab-tt { color: #c8a84b; }

/* PAGINATION */
.pagination { padding: 2.5rem 0; display: flex; align-items: center; justify-content: space-between; border-top: 1px solid #d4cec4; }
.pg-nums { display: flex; align-items: center; gap: 0.2rem; }
.pg-nums a, .pg-nums span { font-family: 'DM Sans', sans-serif; font-size: 0.82rem; color: #6a6560; padding: 0.4rem 0.65rem; transition: color 0.15s; border: 1px solid transparent; text-decoration: none; }
.pg-nums a:hover { color: #1c1916; border-color: #d4cec4; }
.pg-nums .cur { color: #1c1916; border-color: #1c1916; font-weight: 500; }
.pg-nums .ell { border: none; color: #9a9590; }
.pg-arrow { font-family: 'DM Sans', sans-serif; font-size: 0.75rem; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; color: #6a6560; transition: color 0.15s; }
.pg-arrow:hover { color: #1c1916; }

/* SINGLE POST */
.single-wrap { max-width: 1080px; margin: 0 auto; padding: 0 2rem; display: grid; grid-template-columns: 1fr 260px; gap: 5rem; align-items: start; }
.single-main { padding: 3.5rem 0 4rem; }
.post-kicker { font-family: 'DM Sans', sans-serif; font-size: 0.65rem; font-weight: 500; letter-spacing: 0.2em; text-transform: uppercase; color: #8a6a30; margin-bottom: 0.85rem; display: flex; align-items: center; gap: 0.6rem; }
.post-kicker::after { content: ''; flex: 0 0 20px; height: 1px; background: #8a6a30; }
.post-h1 { font-family: 'Playfair Display', serif; font-weight: 500; font-size: clamp(2rem, 4vw, 3.2rem); line-height: 1.15; letter-spacing: -0.025em; color: #1c1916; margin-bottom: 1.25rem; }
.post-meta-bar { display: flex; align-items: center; gap: 0.75rem; font-family: 'DM Sans', sans-serif; font-size: 0.75rem; color: #9a9590; padding-bottom: 2rem; border-bottom: 2px solid #1c1916; margin-bottom: 2.5rem; flex-wrap: wrap; }
.post-meta-bar .sep { color: #d4cec4; }
.post-body { font-size: 1.07rem; line-height: 1.88; color: #2e2b27; }
.post-body p { margin-bottom: 1.4em; }
.post-body strong { font-weight: 600; color: #1c1916; }
.post-body em { font-style: italic; color: #5a5550; }
.post-body a { color: #2d4a3e; border-bottom: 1px solid rgba(45,74,62,0.3); }
.post-body a:hover { border-color: #2d4a3e; }
.post-body hr { border: none; border-top: 1px solid #e0dbd0; margin: 2.5em 0; }
.post-body img { max-width: 100%; display: block; margin: 2.5em auto; border: 1px solid #d4cec4; }
.post-body h2, .post-body h3 { font-family: 'DM Sans', sans-serif; font-size: 0.65rem; font-weight: 500; letter-spacing: 0.2em; text-transform: uppercase; color: #9a9590; margin: 3em 0 1.2em; display: flex; align-items: center; gap: 0.75rem; }
.post-body h2::after, .post-body h3::after { content: ''; flex: 1; height: 1px; background: #e0dbd0; }
.post-body blockquote, .post-body pre { font-family: 'Crimson Pro', serif; font-style: italic; font-size: 1rem; line-height: 2.1; color: #5a5550; border-left: 2px solid #c8a84b; padding: 0.5em 0 0.5em 1.6em; margin: 2.25em 0; background: none; white-space: pre-wrap; }

.post-nav-bar { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: #d4cec4; border-top: 2px solid #1c1916; margin-top: 3.5rem; }
.post-nav-bar a { background: #f7f3ed; padding: 1.5rem; display: block; transition: background 0.15s; }
.post-nav-bar a:hover { background: #fff; }
.post-nav-bar a:last-child { text-align: right; }
.nav-dir { display: block; font-family: 'DM Sans', sans-serif; font-size: 0.62rem; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: #9a9590; margin-bottom: 0.4rem; }
.nav-title { display: block; font-family: 'Playfair Display', serif; font-size: 1rem; color: #1c1916; line-height: 1.35; }

/* SIDEBAR */
.single-sidebar { padding: 3.5rem 0; position: sticky; top: 1.5rem; }
.sidebar-sec { margin-bottom: 2.5rem; }
.sidebar-label { font-family: 'DM Sans', sans-serif; font-size: 0.62rem; font-weight: 500; letter-spacing: 0.2em; text-transform: uppercase; color: #9a9590; margin-bottom: 0.8rem; padding-bottom: 0.6rem; border-bottom: 1px solid #d4cec4; }
.search-row { display: flex; border: 1.5px solid #d4cec4; transition: border-color 0.2s; }
.search-row:focus-within { border-color: #1c1916; }
.search-row input { flex: 1; padding: 0.6rem 0.75rem; font-family: 'Crimson Pro', serif; font-size: 0.9rem; color: #1c1916; border: none; outline: none; background: transparent; }
.search-row button { padding: 0 0.75rem; border: none; background: none; color: #9a9590; cursor: pointer; font-size: 0.9rem; transition: color 0.15s; }
.search-row button:hover { color: #1c1916; }
.yr-block { margin-bottom: 0.15rem; }
.yr-row { display: flex; align-items: center; justify-content: space-between; padding: 0.4rem 0; cursor: pointer; font-family: 'DM Sans', sans-serif; font-size: 0.84rem; color: #1c1916; user-select: none; transition: color 0.15s; }
.yr-row:hover { color: #8a6a30; }
.yr-n { font-size: 0.72rem; color: #9a9590; }
.yr-ch { font-size: 0.6rem; color: #9a9590; transition: transform 0.2s; display: inline-block; }
.yr-ch.open { transform: rotate(90deg); }
.yr-items { display: none; padding: 0.15rem 0 0.4rem 0.9rem; border-left: 1.5px solid #e8e2d8; margin-left: 0.1rem; }
.yr-items.open { display: block; }
.yr-items a { display: block; font-family: 'DM Sans', sans-serif; font-size: 0.8rem; color: #6a6560; padding: 0.22rem 0; line-height: 1.4; transition: color 0.15s; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.yr-items a:hover { color: #8a6a30; }

/* ARCHIVE PAGE */
.archive-page-title { font-family: 'Playfair Display', serif; font-style: italic; font-weight: 400; font-size: 2.5rem; letter-spacing: -0.02em; color: #1c1916; padding: 3rem 0 0.5rem; display: block; }
.archive-yr-head { font-family: 'Playfair Display', serif; font-weight: 400; font-style: italic; font-size: 1.8rem; letter-spacing: -0.02em; padding: 2.5rem 0 1rem; border-bottom: 1px solid #d4cec4; display: flex; align-items: baseline; gap: 0.75rem; color: #1c1916; }
.archive-yr-head small { font-family: 'DM Sans', sans-serif; font-size: 0.72rem; font-weight: 400; color: #9a9590; font-style: normal; }
.archive-row { display: grid; grid-template-columns: 100px 1fr; gap: 1.25rem; padding: 0.9rem 0; border-bottom: 1px solid #e8e2d8; align-items: baseline; transition: background 0.1s; }
.archive-row:hover { background: #fff; margin: 0 -0.5rem; padding: 0.9rem 0.5rem; }
.archive-dt { font-family: 'DM Sans', sans-serif; font-size: 0.7rem; color: #9a9590; letter-spacing: 0.05em; }
.archive-tt { font-family: 'Crimson Pro', serif; font-size: 1rem; color: #1c1916; line-height: 1.4; transition: color 0.15s; }
.archive-tt:hover { color: #8a6a30; }

/* SEARCH */
#search-big { width: 100%; padding: 1rem 0; font-family: 'Playfair Display', serif; font-style: italic; font-size: 1.5rem; color: #1c1916; border: none; border-bottom: 2px solid #1c1916; outline: none; background: transparent; margin-bottom: 2.5rem; letter-spacing: -0.01em; }
.sr { padding: 1.5rem 0; border-bottom: 1px solid #e8e2d8; }
.sr-date { font-family: 'DM Sans', sans-serif; font-size: 0.7rem; color: #9a9590; letter-spacing: 0.06em; text-transform: uppercase; margin-bottom: 0.35rem; }
.sr h3 { font-family: 'Playfair Display', serif; font-weight: 400; font-size: 1.2rem; letter-spacing: -0.01em; }
.sr h3 a { color: #1c1916; transition: color 0.15s; }
.sr h3 a:hover { color: #8a6a30; }
.sr p { font-family: 'Crimson Pro', serif; font-size: 0.95rem; color: #6a6560; margin-top: 0.35rem; }
mark { background: none; color: #8a6a30; font-weight: 600; }

/* FOOTER */
footer { background: #2d4a3e; padding: 3rem 2rem; margin-top: 0; }
.footer-inner { max-width: 1080px; margin: 0 auto; display: grid; grid-template-columns: 1fr auto 1fr; align-items: start; gap: 3rem; }
.footer-brand { font-family: 'Playfair Display', serif; font-style: italic; font-weight: 400; font-size: 1.8rem; color: rgba(247,243,237,0.85); letter-spacing: -0.02em; display: block; margin-bottom: 0.4rem; }
.footer-tagline { font-family: 'DM Sans', sans-serif; font-size: 0.65rem; letter-spacing: 0.12em; text-transform: uppercase; color: rgba(255,255,255,0.25); }
.footer-links { display: flex; flex-direction: column; gap: 0.5rem; align-items: center; }
.footer-links a { font-family: 'DM Sans', sans-serif; font-size: 0.72rem; letter-spacing: 0.06em; color: rgba(255,255,255,0.35); transition: color 0.15s; text-transform: uppercase; }
.footer-links a:hover { color: rgba(255,255,255,0.75); }
.footer-copy { font-family: 'DM Sans', sans-serif; font-size: 0.68rem; color: rgba(255,255,255,0.2); text-align: right; line-height: 1.8; }

@media (max-width: 860px) { .featured { grid-template-columns: 1fr; } .feat-poem-block { display: none; } .post-tiles { grid-template-columns: 1fr 1fr; } .tile-wide { grid-column: span 1; display: block; } .archive-band-grid { grid-template-columns: 1fr 1fr; } .single-wrap { grid-template-columns: 1fr; } .single-sidebar { display: none; } .footer-inner { grid-template-columns: 1fr; text-align: center; } .footer-copy { text-align: center; } .footer-links { align-items: center; } }
@media (max-width: 580px) { .post-tiles { grid-template-columns: 1fr; } .archive-band-grid { grid-template-columns: 1fr; } .masthead-name { font-size: 3rem; } .page-wrap { padding: 0 1.25rem; } .post-nav-bar { grid-template-columns: 1fr; } }