/* The Ten Collective theme
   Layout: color-blocked bands that alternate like rooms in a busy house. Olive hero, sage pattern strip,
   oat "hello", clay quote, colored topic cards, the journal on oat, an olive footer. One reading column per band. */

:root {
    --oat: #ece4d4; --paper: #f6f1e7; --ink: #2f3529; --muted: #6a685c; --line: #d8cebd;
    --brand: #4e5c43; --gold: #9a6d1f;
    --olive: #555c3c; --on-olive: #f3ecdf; --olive-accent: #dcb15c;
    --sage: #4e5c43; --on-sage: #ece4d4;
    --clay: #9e4f2e; --on-clay: #f6e6d4; --clay-accent: #f0c27a;
    --mustard: #c99a3e; --on-mustard: #2f3326;
    --display: "Fraunces", Georgia, serif;
    --ui: "Jost", system-ui, -apple-system, "Segoe UI", sans-serif;
    --body: "Newsreader", Georgia, serif;
    --knock: var(--oat); --tag: var(--gold);
}
@media (prefers-color-scheme: dark) {
    :root {
        --oat: #1f231b; --paper: #262b21; --ink: #ebe5d7; --muted: #a9a795; --line: #3b4134; --brand: #dfe6d1; --gold: #dcb15c;
        --olive: #2e3426; --on-olive: #ebe5d7; --sage: #36422e; --on-sage: #e5ddca; --clay: #6c3620; --on-clay: #f3e2cf;
        --mustard: #8a6826; --on-mustard: #f6ecd8; color-scheme: dark;
    }
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--oat); color: var(--ink); font-family: var(--body); font-size: 19px; line-height: 1.7; -webkit-font-smoothing: antialiased; }
img { max-width: 100%; height: auto; }
a { color: inherit; }
:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; border-radius: 2px; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); border: 0; }
.band { padding-left: max(20px, env(safe-area-inset-left, 0px)); padding-right: max(20px, env(safe-area-inset-right, 0px)); }
.col { max-width: 760px; margin: 0 auto; }
.wide { max-width: 1080px; margin: 0 auto; }
.grainy { position: fixed; inset: 0; pointer-events: none; opacity: .09; z-index: 50; }
.label { font-family: var(--ui); font-size: 12px; font-weight: 500; letter-spacing: .22em; text-transform: uppercase; }
.accent { color: var(--gold); }
.muted { color: var(--muted); }
.btn { display: inline-block; font-family: var(--ui); font-weight: 500; font-size: 14px; letter-spacing: .06em; border: none; border-radius: 999px; padding: 10px 20px; cursor: pointer; background: var(--brand); color: var(--oat); text-decoration: none; }
.btn-gold { background: var(--olive-accent); color: #2f3326; }
.section-title { font-family: var(--display); font-weight: 700; font-size: clamp(32px, 5vw, 46px); letter-spacing: -0.02em; margin: 8px 0 0; color: var(--brand); line-height: 1.05; text-wrap: balance; }
[data-brand] svg { display: block; width: 100%; height: auto; }

/* Header */
.top { background: var(--olive); color: var(--on-olive); padding-block: 16px; position: sticky; top: 0; z-index: 20; --knock: var(--olive); }
.top .wide { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; }
.home { display: flex; color: var(--on-olive); text-decoration: none; font-family: var(--display); font-weight: 700; font-size: 24px; line-height: 1; }
.home [data-brand] { display: block; width: 40px; }
.site-nav { display: flex; gap: 6px 18px; flex-wrap: wrap; flex: 1; min-width: 0; }
.site-nav a { font-family: var(--ui); font-size: 12px; letter-spacing: .18em; text-transform: uppercase; color: var(--on-olive); opacity: .75; text-decoration: none; border-bottom: 1px solid transparent; padding: 2px 0; }
.site-nav a:hover { opacity: 1; }
.site-nav a[aria-current="page"] { opacity: 1; border-bottom-color: var(--olive-accent); }

/* Hero */
.hero { background: var(--olive); color: var(--on-olive); padding-block: 72px 80px; text-align: center; --knock: var(--olive); --tag: var(--olive-accent); }
.logo-wrap { margin: 0; }
.logo { display: block; width: min(100%, 500px); margin: 0 auto; }
.logo-fallback { font-family: var(--display); font-weight: 700; font-size: clamp(48px, 9vw, 96px); line-height: 1; letter-spacing: -0.03em; }
.hero-line { font-style: italic; opacity: .85; max-width: 40ch; margin: 36px auto 0; font-size: 21px; text-wrap: balance; }
.strip { background: var(--sage); color: var(--on-sage); height: 64px; overflow: hidden; --knock: var(--sage); }
.strip svg { height: 64px; }

/* Hello */
.hello { padding-block: 88px; }
.hello .wide { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 32px 64px; align-items: start; }
.hello h2 { font-family: var(--display); font-weight: 700; font-size: clamp(44px, 7vw, 76px); line-height: .98; letter-spacing: -0.03em; margin: 12px 0 0; color: var(--brand); text-wrap: balance; }
.hello-txt p { margin: 0 0 18px; }
.family { margin: 28px 0 0; display: flex; flex-direction: column; gap: 10px; }
.family img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: center 40%; border-radius: 4px; display: block; }
.family figcaption { font-style: italic; color: var(--muted); font-size: 17px; }

/* Quote */
.quote { background: var(--clay); color: var(--on-clay); padding-block: 96px; text-align: center; }
.quote .label { color: var(--clay-accent); }
.quote blockquote { margin: 18px auto 0; font-family: var(--display); font-weight: 700; font-size: clamp(38px, 7vw, 72px); line-height: 1.02; letter-spacing: -0.025em; max-width: 14ch; text-wrap: balance; }
.quote p { margin: 28px auto 0; font-style: italic; opacity: .85; max-width: 44ch; }

/* Topics */
.topics { padding-block: 88px; background: var(--paper); }
.topics .section-title { margin-bottom: 28px; }
.cards { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); }
.card { border-radius: 4px; padding: 28px 24px 24px; display: flex; flex-direction: column; gap: 14px; min-height: 240px; text-decoration: none; transition: transform .2s ease; }
.card:hover { transform: translateY(-3px); }
.card h3 { font-family: var(--display); font-weight: 700; font-size: 30px; line-height: 1.05; margin: 0; letter-spacing: -0.015em; }
.card p { margin: 0; font-size: 17px; line-height: 1.55; opacity: .9; flex: 1; }
.card .label { opacity: .8; }
.c-sage, .tag-baby-eight { background: var(--sage); color: var(--on-sage); }
.c-mustard, .tag-at-the-table { background: var(--mustard); color: var(--on-mustard); }
.c-clay, .tag-motherhood { background: var(--clay); color: var(--on-clay); }
.c-olive, .tag-everyday { background: var(--olive); color: var(--on-olive); }

/* Journal */
.journal { padding-block: 80px 96px; }
.journal-head { display: flex; flex-direction: column; gap: 4px; margin-bottom: 8px; }
.tag-desc { color: var(--muted); margin: 8px 0 0; }
.feature { display: flex; flex-direction: column; gap: 14px; padding-bottom: 44px; border-bottom: 1px solid var(--line); text-decoration: none; margin-top: 28px; }
.feature img { width: 100%; max-height: 440px; object-fit: cover; border-radius: 4px; margin-bottom: 10px; }
.feature h3 { font-family: var(--display); font-weight: 700; font-size: clamp(32px, 5.5vw, 50px); line-height: 1.05; letter-spacing: -0.02em; margin: 0; color: var(--brand); text-wrap: balance; }
.feature p { margin: 0; color: var(--muted); }
.more { font-family: var(--ui); font-size: 12px; letter-spacing: .2em; text-transform: uppercase; color: var(--gold); }
.meta { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; color: var(--muted); }
.pill { padding: 3px 10px; border-radius: 999px; letter-spacing: .14em; display: inline-block; }
.row { display: grid; grid-template-columns: 10em 1fr; gap: 6px 24px; padding-block: 22px; border-bottom: 1px solid var(--line); text-decoration: none; align-items: baseline; }
.row-main { min-width: 0; }
.row h4 { font-family: var(--display); font-weight: 700; font-size: 24px; line-height: 1.2; margin: 0 0 6px; letter-spacing: -0.01em; }
.row:hover h4, .feature:hover h3 { color: var(--gold); }
.empty { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; padding: 36px; background: var(--paper); border-radius: 4px; margin-top: 24px; }
.empty-mark { display: block; width: 56px; color: var(--brand); --knock: var(--paper); font-family: var(--display); font-weight: 700; }
.empty h3 { font-family: var(--display); font-weight: 700; font-size: 28px; margin: 0; color: var(--brand); }
.empty p { margin: 0; color: var(--muted); }
.pagination { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-top: 32px; font-family: var(--ui); font-size: 13px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.pagination a { color: var(--gold); text-decoration: none; }

/* Post and page */
.page { padding-block: 64px 96px; }
.post { display: flex; flex-direction: column; gap: 22px; }
.back { font-family: var(--ui); font-size: 12px; letter-spacing: .18em; text-transform: uppercase; color: var(--muted); text-decoration: none; align-self: flex-start; }
.back:hover { color: var(--ink); }
.post-title { font-family: var(--display); font-weight: 700; font-size: clamp(38px, 7vw, 62px); line-height: 1.02; letter-spacing: -0.025em; margin: 0; color: var(--brand); text-wrap: balance; }
.dek { margin: 0; font-style: italic; font-size: 22px; color: var(--muted); }
.feature-image { margin: 0; }
.feature-image img { width: 100%; border-radius: 4px; display: block; }
.feature-image figcaption, .entry-content figcaption { font-family: var(--ui); font-size: 14px; color: var(--muted); text-align: center; margin-top: 10px; }
.end { display: flex; justify-content: center; padding-top: 12px; color: var(--brand); }
.end [data-brand] { width: 44px; display: block; font-family: var(--display); font-weight: 700; }
.empty-page { display: flex; flex-direction: column; gap: 16px; }
.empty-page p { margin: 0; }

/* Post content from the WordPress editor */
.entry-content { font-size: 20px; line-height: 1.78; }
.entry-content > * { margin: 0 0 1.15em; }
.entry-content h2, .entry-content h3 { font-family: var(--display); font-weight: 700; color: var(--brand); line-height: 1.15; letter-spacing: -0.015em; margin-top: 1.6em; }
.entry-content h2 { font-size: 34px; }
.entry-content h3 { font-size: 26px; }
.entry-content a { color: var(--gold); text-underline-offset: 3px; }
.entry-content blockquote { margin-left: 0; padding-left: 22px; border-left: 3px solid var(--mustard); font-style: italic; color: var(--muted); }
.entry-content blockquote.is-style-large { border: 0; padding: 0; text-align: center; font-family: var(--display); font-style: normal; font-weight: 700; font-size: 34px; line-height: 1.2; color: var(--brand); }
.entry-content hr { border: 0; height: 1px; background: var(--line); margin: 2.4em 0; }
.entry-content img { border-radius: 4px; }
.entry-content ul, .entry-content ol { padding-left: 1.3em; }
.entry-content figure { margin-left: 0; margin-right: 0; }
.alignwide { position: relative; width: min(1040px, calc(100vw - 40px)); left: 50%; transform: translateX(-50%); }
.alignfull { position: relative; width: 100vw; left: 50%; transform: translateX(-50%); }
.alignfull img { border-radius: 0; }

/* Subscribe */
.cta { background: var(--sage); color: var(--on-sage); padding-block: 72px; text-align: center; }
.cta .label { color: var(--olive-accent); }
.cta h2 { font-family: var(--display); font-weight: 700; font-size: clamp(30px, 5vw, 44px); line-height: 1.1; letter-spacing: -0.02em; margin: 10px 0 24px; }
.cta .btn { background: var(--olive-accent); color: #2f3326; }
.subscribe { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; max-width: 520px; margin: 0 auto; }
.subscribe input { flex: 1 1 240px; min-width: 0; font-family: var(--ui); font-size: 16px; padding: 11px 16px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, .35); background: rgba(255, 255, 255, .1); color: inherit; }
.subscribe input::placeholder { color: inherit; opacity: .7; }
.subscribe.loading button { opacity: .6; }
.form-msg { display: none; flex-basis: 100%; margin: 6px 0 0; font-family: var(--ui); font-size: 14px; }
.subscribe.success .form-ok, .subscribe.error .form-err { display: block; }
.subscribe.success input, .subscribe.success button { display: none; }

/* Footer */
.site-footer { background: var(--olive); color: var(--on-olive); padding-block: 72px 56px; --knock: var(--olive); }
.site-footer .wide { display: flex; gap: 28px; align-items: center; text-align: center; flex-direction: column; }
.stamp { width: 170px; height: 170px; }
.sticky { margin: 0; font-family: var(--display); font-weight: 700; font-size: clamp(26px, 4vw, 36px); line-height: 1.15; letter-spacing: -0.015em; max-width: 20ch; text-wrap: balance; }
.site-footer .accent { color: var(--olive-accent); }
.site-footer small { font-family: var(--ui); font-size: 12px; letter-spacing: .14em; opacity: .7; }

@media (max-width: 760px) {
    .hello .wide { grid-template-columns: 1fr; }
    .row { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }

/* ---------- WordPress specifics ---------- */
.screen-reader-text { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); border: 0; white-space: nowrap; }
.skip:focus { position: fixed; top: 8px; left: 8px; width: auto; height: auto; clip: auto; z-index: 100; background: var(--paper); color: var(--ink); padding: 8px 14px; border-radius: 999px; font-family: var(--ui); }
.admin-bar .top { top: 32px; }
@media (max-width: 782px) { .admin-bar .top { top: 46px; } }
.site-nav .menu { list-style: none; margin: 0; padding: 0; display: flex; gap: 6px 18px; flex-wrap: wrap; }
.site-nav .current-menu-item > a, .site-nav .current_page_item > a, .site-nav .current-menu-ancestor > a { opacity: 1; border-bottom-color: var(--olive-accent); }
.feature img { height: auto; }

/* Page numbers and previous/next story */
.navigation.pagination { margin-top: 32px; }
.nav-links { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; font-family: var(--ui); font-size: 13px; letter-spacing: .14em; text-transform: uppercase; }
.nav-links .page-numbers { color: var(--muted); text-decoration: none; padding: 4px 8px; }
.nav-links .page-numbers.current { color: var(--ink); border-bottom: 1px solid var(--gold); }
.nav-links a.page-numbers:hover { color: var(--gold); }
.post-navigation { border-top: 1px solid var(--line); padding-top: 24px; margin-top: 12px; }
.post-navigation .nav-links { align-items: flex-start; text-transform: none; letter-spacing: 0; }
.post-navigation a { text-decoration: none; display: flex; flex-direction: column; gap: 4px; max-width: 30ch; }
.post-navigation .nav-next a { text-align: right; margin-left: auto; }
.post-navigation .nav-title { font-family: var(--display); font-weight: 700; font-size: 20px; color: var(--brand); line-height: 1.2; }

/* Blocks from the WordPress editor */
.entry-content .wp-block-image img { height: auto; }
.entry-content .wp-block-image figcaption, .entry-content .wp-element-caption { font-family: var(--ui); font-size: 14px; color: var(--muted); text-align: center; margin-top: 10px; }
.entry-content .wp-block-pullquote { border: 0; padding: 0; text-align: center; }
.entry-content .wp-block-pullquote blockquote { border: 0; padding: 0; font-family: var(--display); font-style: normal; font-weight: 700; font-size: 34px; line-height: 1.2; color: var(--brand); }
.entry-content .wp-block-separator { border: 0; height: 1px; background: var(--line); }
.entry-content .wp-block-button__link { font-family: var(--ui); border-radius: 999px; background: var(--brand); color: var(--oat); }
.entry-content .wp-block-gallery { gap: 10px; }

/* Newsletter signup form placed in the Subscribe widget area (MailPoet, Jetpack, etc.) */
.subscribe-widget { max-width: 520px; margin: 0 auto; }
.subscribe-widget form { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; }
.subscribe-widget input[type="email"], .subscribe-widget input[type="text"] { flex: 1 1 240px; min-width: 0; font-family: var(--ui); font-size: 16px; padding: 11px 16px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, .35); background: rgba(255, 255, 255, .1); color: inherit; }
.subscribe-widget input::placeholder { color: inherit; opacity: .7; }
.subscribe-widget button, .subscribe-widget input[type="submit"], .subscribe-widget .wp-block-button__link { font-family: var(--ui); font-weight: 500; font-size: 14px; letter-spacing: .06em; border: none; border-radius: 999px; padding: 11px 20px; cursor: pointer; background: var(--olive-accent); color: #2f3326; }
.subscribe-widget label { font-family: var(--ui); font-size: 13px; }
.subscribe-widget p { margin: 8px 0 0; font-family: var(--ui); font-size: 14px; }

/* Comments, kept quiet */
.comments-area { border-top: 1px solid var(--line); padding-top: 24px; font-size: 17px; }
.comments-area textarea, .comments-area input[type="text"], .comments-area input[type="email"], .comments-area input[type="url"] { width: 100%; background: var(--paper); border: 1px solid var(--line); border-radius: 4px; padding: 10px 12px; font: inherit; color: var(--ink); }
.comments-area .submit { font-family: var(--ui); border: none; border-radius: 999px; padding: 10px 20px; background: var(--brand); color: var(--oat); cursor: pointer; }