:root {
    --ink:#26332c;
    --muted:#6e7971;
    --paper:#f4f2eb;
    --white:#fbfaf6;
    --line:#d9ddd5;
    --green:#526b55;
    --olive:#dce3d7;
    --clay:#bc785e;
    --serif:Georgia,'Times New Roman',serif;
    --sans:Arial,Helvetica,sans-serif
}

* {
    box-sizing:border-box
}
html {
    scroll-behavior:smooth
}
body {
    margin:0;
    background:var(--paper);
    color:var(--ink);
    font-family:var(--sans);
    font-size:16px;
    line-height:1.65
}
a {
    color:inherit;
    text-decoration:none
}
img {
    max-width:100%;
    display:block
}
button,input {
    font:inherit
}
.container {
    width:min(1240px,calc(100% - 56px));
    margin-inline:auto
}
.skip-link,.sr-only {
    position:absolute;
    width:1px;
    height:1px;
    padding:0;
    margin:-1px;
    overflow:hidden;
    clip:rect(0,0,0,0);
    white-space:nowrap;
    border:0
}
.skip-link:focus {
    z-index:20;
    clip:auto;
    width:auto;
    height:auto;
    top:12px;
    left:12px;
    padding:12px;
    background:#fff
}
.top-note {
    border-bottom:1px solid var(--line);
    font-size:10px;
    letter-spacing:.14em;
    color:var(--muted)
}
.top-note .container {
    display:flex;
    justify-content:space-between;
    padding:9px 0
}
.site-header {
    min-height:91px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:26px;
    border-bottom:1px solid var(--line)
}
.site-brand {
    display:flex;
    align-items:center;
    gap:12px;
    flex-shrink:0;
    font-family:var(--serif);
    font-size:26px;
    line-height:1
}
.site-brand img {
    width:46px;
    height:46px
}
.site-brand small {
    display:block;
    margin-top:7px;
    font:9px var(--sans);
    letter-spacing:.13em;
    color:var(--muted)
}
.main-nav {
    display:flex;
    align-items:center;
    gap:25px;
    font-size:12px
}
.main-nav a:hover,.footer-links a:hover {
    color:var(--clay)
}
.header-search {
    display:flex;
    border-bottom:1px solid #aeb7ae
}
.header-search input {
    width:135px;
    border:0;
    background:transparent;
    padding:9px 3px;
    font-size:11px;
    outline:none
}
.header-search button {
    border:0;
    background:none;
    color:var(--green);
    cursor:pointer;
    font-size:18px
}
.editorial-hero {
    padding:44px 0 38px;
    display:grid;
    grid-template-columns:.83fr 1.17fr;
    gap:48px;
    align-items:center
}
.hero-copy {
    padding:22px 0 12px
}
.kicker {
    display:block;
    color:var(--green);
    font-size:10px;
    font-weight:700;
    letter-spacing:.16em
}
.hero-copy h1 {
    font:clamp(48px,6vw,82px)/.99 var(--serif);
    font-weight:400;
    letter-spacing:-.045em;
    margin:28px 0
}
.hero-copy h1 em {
    color:var(--clay);
    font-weight:400
}
.hero-copy>p {
    max-width:420px;
    color:var(--muted);
    font-size:15px
}
.round-link {
    display:inline-flex;
    align-items:center;
    gap:23px;
    margin-top:24px;
    padding:12px 13px 12px 20px;
    border-radius:30px;
    background:var(--green);
    color:white;
    font-size:12px
}
.round-link b {
    width:31px;
    height:31px;
    border-radius:50%;
    display:grid;
    place-items:center;
    background:#fff;
    color:var(--green);
    font-size:17px
}
.hero-note {
    display:flex;
    gap:18px;
    margin-top:39px;
    padding-top:13px;
    border-top:1px solid var(--line);
    font-size:9px;
    letter-spacing:.11em;
    color:var(--muted)
}
.hero-picture {
    position:relative;
    margin:0;
    min-height:470px;
    background:var(--olive);
    overflow:hidden
}
.hero-picture img {
    width:100%;
    height:100%;
    min-height:470px;
    object-fit:cover
}
.hero-picture figcaption {
    position:absolute;
    inset:auto 18px 18px;
    display:flex;
    justify-content:space-between;
    gap:12px;
    padding:12px 15px;
    background:rgba(251,250,246,.9);
    font-size:9px;
    letter-spacing:.11em
}
.editorial-divider {
    display:flex;
    justify-content:space-between;
    padding:15px 0;
    border-block:1px solid var(--line);
    font:italic 14px var(--serif);
    color:var(--muted)
}
.latest-section {
    padding:76px 0 84px
}
.section-title {
    display:flex;
    align-items:end;
    justify-content:space-between;
    gap:25px;
    margin-bottom:28px
}
.section-title h2 {
    font:40px/1.07 var(--serif);
    font-weight:400;
    margin:9px 0 0;
    letter-spacing:-.025em
}
.section-title>a,.text-link {
    font-size:12px;
    color:var(--green);
    border-bottom:1px solid #a8b4a8;
    padding-bottom:5px
}
.story-grid {
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:24px
}
.story-card {
    display:grid;
    grid-template-columns:.85fr 1.15fr;
    min-width:0;
    background:var(--white);
    border:1px solid var(--line)
}
.story-image {
    background:#e3e7df;
    overflow:hidden;
    min-height:220px
}
.story-image img {
    width:100%;
    height:100%;
    object-fit:cover;
    transition:transform .35s
}
.story-card:hover .story-image img {
    transform:scale(1.035)
}
.story-copy {
    padding:22px
}
.story-meta,.article-meta {
    display:flex;
    gap:13px;
    color:var(--muted);
    font-size:10px
}
.story-copy h3 {
    font:23px/1.12 var(--serif);
    font-weight:400;
    margin:14px 0 9px
}
.story-copy p {
    font-size:12px;
    color:var(--muted);
    margin:0
}
.story-tags {
    display:flex;
    flex-wrap:wrap;
    gap:7px;
    margin-top:15px
}
.story-tags a {
    font-size:9px;
    color:var(--green);
    border:1px solid #d2dbd0;
    border-radius:20px;
    padding:3px 8px
}
.popular-section {
    background:#e9ece5;
    padding:62px 0
}
.popular-list {
    border-top:1px solid #cbd3c9
}
.rank-story {
    display:grid;
    grid-template-columns:56px 1fr 24px;
    align-items:center;
    gap:14px;
    padding:17px 4px;
    border-bottom:1px solid #cbd3c9
}
.rank {
    font:20px var(--serif);
    color:var(--clay)
}
.rank-story h3 {
    font:22px var(--serif);
    font-weight:400;
    margin:0
}
.tag-blocks,.tag-section {
    padding:70px 0
}
.tag-block-grid {
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:16px
}
.tag-block {
    padding:22px;
    background:var(--white);
    border:1px solid var(--line)
}
.tag-block h3 {
    font:24px var(--serif);
    font-weight:400;
    margin:0 0 9px
}
.tag-block a {
    display:block;
    padding:10px 0;
    border-top:1px solid var(--line);
    font-size:12px
}
.site-footer {
    padding:54px 0 22px;
    background:#29382f;
    color:#f3f1e9
}
.footer-grid {
    display:grid;
    grid-template-columns:1.2fr .7fr .8fr;
    gap:60px
}
.footer-brand>a {
    font:34px var(--serif)
}
.footer-brand>a span {
    color:#d7a088;
    margin-left:10px
}
.footer-brand p,.footer-note p {
    max-width:360px;
    color:#c4cec3;
    font-size:13px
}
.footer-brand small {
    font-size:10px;
    color:#bac3b9
}
.footer-links {
    display:grid;
    align-content:start;
    gap:9px;
    font-size:12px
}
.footer-links .kicker,.footer-note>span {
    color:#c4d0bf
}
.footer-note>span {
    font-size:9px;
    letter-spacing:.14em
}
.analytics-area {
    padding-top:22px
}
.cookie-banner {
    position:fixed;
    z-index:10;
    right:20px;
    bottom:20px;
    width:min(610px,calc(100% - 40px));
    padding:20px;
    background:#fff;
    border:1px solid var(--line);
    box-shadow:0 10px 38px #1a2a2030;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:20px
}
.cookie-banner[hidden] {
    display:none
}
.cookie-banner p {
    margin:5px 0 0;
    font-size:11px;
    color:var(--muted)
}
.cookie-banner p a {
    text-decoration:underline
}
.cookie-actions {
    display:flex;
    gap:8px;
    flex-shrink:0
}
.cookie-actions button {
    border:1px solid var(--green);
    padding:8px 11px;
    background:var(--green);
    color:white;
    cursor:pointer;
    font-size:11px
}
.cookie-actions button+button {
    background:white;
    color:var(--green)
}
.inner-page,.editorial-page {
    padding:52px 0 90px
}
.breadcrumbs {
    font-size:11px;
    color:var(--muted);
    margin-bottom:27px
}
.breadcrumbs span {
    padding:0 8px
}
.content-layout {
    display:grid;
    grid-template-columns:minmax(0,1fr) 260px;
    gap:42px
}
.list-heading {
    margin:20px 0 30px
}
.list-heading h1,.editorial-page h1 {
    font:clamp(40px,5vw,64px)/1.05 var(--serif);
    font-weight:400;
    margin:12px 0
}
.list-heading p {
    color:var(--muted)
}
.tag-sidebar {
    border-left:1px solid var(--line);
    padding-left:24px
}
.tag-sidebar h2 {
    font:24px var(--serif);
    font-weight:400
}
.tag-sidebar nav a {
    display:flex;
    justify-content:space-between;
    padding:9px 0;
    border-bottom:1px solid var(--line);
    font-size:12px
}
.large-search {
    display:flex;
    margin-bottom:25px
}
.large-search input {
    flex:1;
    padding:13px;
    border:1px solid var(--line);
    background:var(--white)
}
.large-search button {
    padding:0 20px;
    background:var(--green);
    color:white;
    border:0
}
.empty-state {
    padding:35px;
    background:var(--white);
    color:var(--muted)
}
.pagination {
    display:flex;
    gap:8px;
    margin:28px 0
}
.pagination a,.pagination span {
    padding:8px 11px;
    border:1px solid var(--line)
}
.pagination [aria-current=page] {
    background:var(--green);
    color:white
}
.full-article {
    max-width:790px
}
.full-article h1 {
    font:clamp(40px,5vw,66px)/1.06 var(--serif);
    font-weight:400
}
.article-hero {
    width:100%;
    max-height:520px;
    object-fit:cover;
    margin:25px 0
}
.prose {
    max-width:760px;
    font-size:17px;
    line-height:1.8
}
.prose h2,.prose h3 {
    font:32px/1.15 var(--serif);
    font-weight:400;
    margin-top:1.7em
}
.prose a {
    color:var(--green);
    text-decoration:underline
}
.related {
    margin-top:60px
}
.tag-seo {
    color:var(--muted);
    font-size:13px;
    margin-top:34px
}
.editorial-page {
    max-width:none
}
.editorial-page h1 {
    max-width:850px;
    margin-bottom:24px
}
.page-lead {
    max-width:850px;
    font:27px/1.35 var(--serif);
    color:var(--green)
}
.editorial-columns {
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:42px;
    max-width:950px;
    margin:40px 0;
    font-size:15px;
    color:var(--muted)
}
.guide-list {
    max-width:900px;
    margin:38px 0
}
.guide-list article {
    display:grid;
    grid-template-columns:55px 1fr;
    gap:15px;
    padding:20px 0;
    border-top:1px solid var(--line)
}
.guide-list article>span {
    font:23px var(--serif);
    color:var(--clay)
}
.guide-list h2 {
    font:25px var(--serif);
    font-weight:400;
    margin:0
}
.guide-list p {
    color:var(--muted);
    margin:6px 0
}
.error-page {
    min-height:100vh;
    display:grid;
    place-items:center
}
.error-content {
    text-align:center;
    width:min(560px,90%)
}
.error-content .site-brand {
    justify-content:center
}
.error-code {
    display:block;
    font:80px var(--serif);
    color:var(--clay);
    margin-top:35px
}
.error-content h1 {
    font:34px var(--serif);
    font-weight:400
}
.error-content p {
    color:var(--muted)
}
.pill-link {
    display:inline-block;
    background:var(--green);
    color:white;
    padding:12px 18px;
    border-radius:24px
}
.comments {
    margin-top:48px;
    padding-top:30px;
    border-top:1px solid var(--line)
}
.comment {
    padding:14px 0;
    border-bottom:1px solid var(--line)
}
.comment-form {
    display:grid;
    gap:12px;
    max-width:650px
}
.comment-form label {
    display:grid;
    gap:5px
}
.comment-form input,.comment-form textarea {
    width:100%;
    padding:11px;
    border:1px solid var(--line);
    background:var(--white)
}
.comment-form button {
    justify-self:start;
    padding:10px 16px;
    background:var(--green);
    border:0;
    color:white
}
.comment-trap {
    display:none
}
.comment-success,.comment-error {
    padding:12px;
    background:var(--olive)
}

@media(max-width:1000px) {
    .site-header {
    flex-wrap:wrap;
    padding:15px 0
}
.main-nav {
    order:3;
    width:100%;
    justify-content:center;
    padding-top:12px;
    border-top:1px solid var(--line)
}
.editorial-hero {
    gap:28px
}
.hero-picture,.hero-picture img {
    min-height:420px
}
.story-grid {
    grid-template-columns:1fr
}
.content-layout {
    grid-template-columns:1fr
}
.tag-sidebar {
    border-left:0;
    border-top:1px solid var(--line);
    padding:24px 0 0
}
.tag-sidebar nav {
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:0 20px
}
}

@media(max-width:680px) {
    .container {
    width:min(100% - 32px,540px)
}
.top-note .container span:last-child {
    display:none
}
.site-header {
    min-height:0;
    gap:12px
}
.site-brand {
    font-size:22px
}
.site-brand img {
    width:40px;
    height:40px
}
.header-search {
    margin-left:auto
}
.header-search input {
    width:100px
}
.main-nav {
    justify-content:space-between;
    gap:9px;
    font-size:11px
}
.editorial-hero {
    padding-top:25px;
    grid-template-columns:1fr;
    gap:26px
}
.hero-copy {
    padding:10px 0 0
}
.hero-copy h1 {
    font-size:58px;
    margin:20px 0
}
.hero-copy>p {
    font-size:14px
}
.hero-note {
    margin-top:25px
}
.hero-picture,.hero-picture img {
    min-height:310px
}
.editorial-divider {
    font-size:12px;
    gap:14px
}
.editorial-divider span:last-child {
    display:none
}
.latest-section {
    padding:50px 0
}
.section-title h2 {
    font-size:33px
}
.story-card {
    grid-template-columns:1fr
}
.story-image {
    height:210px;
    min-height:0
}
.story-copy {
    padding:17px
}
.popular-section {
    padding:45px 0
}
.rank-story {
    grid-template-columns:38px 1fr 20px
}
.rank-story h3 {
    font-size:18px
}
.tag-block-grid {
    grid-template-columns:1fr
}
.footer-grid {
    grid-template-columns:1fr;
    gap:27px
}
.cookie-banner {
    right:10px;
    bottom:10px;
    width:calc(100% - 20px);
    padding:14px;
    display:block
}
.cookie-actions {
    margin-top:12px
}
.inner-page,.editorial-page {
    padding:30px 0 58px
}
.editorial-page h1 {
    font-size:43px
}
.page-lead {
    font-size:22px
}
.editorial-columns {
    grid-template-columns:1fr;
    gap:10px;
    margin:25px 0
}
.content-layout {
    gap:25px
}
.prose {
    font-size:16px
}
.tag-sidebar nav {
    grid-template-columns:1fr
}
}



