:root {
    --paper:#f6f3eb;
    --card:#fffdf8;
    --ink:#172c35;
    --muted:#65757a;
    --line:#deded4;
    --orange:#ef7048;
    --teal:#1b6c69;
    --yellow:#f2c96d;
    --serif:Georgia,"Times New Roman",serif;
    --sans:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
    --shadow:0 15px 45px rgba(23,44,53,.08);
}

* {
    box-sizing:border-box;
}

html {
    scroll-behavior:smooth;
    scroll-padding-top:105px;
}

body {
    margin:0;
    background:var(--paper);
    color:var(--ink);
    font-family:var(--sans);
    line-height:1.7;
}

a {
    color:inherit;
    text-decoration:none;
}

button,input {
    font:inherit;
}

button {
    cursor:pointer;
}

img {
    display:block;
    width:100%;
    height:100%;
    object-fit:cover;
}

.logo-img {
    height:50px;
    width:auto;
    max-width:200px;
    object-fit:contain;
}

.wrap {
    width:min(1160px,calc(100% - 44px));
    margin:auto;
}

.topline {
    background:var(--ink);
    color:#f8f4ea;
    font-size:11px;
    letter-spacing:.09em;
    text-transform:uppercase;
}

.topline .wrap {
    display:flex;
    justify-content:space-between;
    gap:12px;
    align-items:center;
    min-height:32px;
}

.topline a {
    color:var(--yellow);
}

header {
    position:sticky;
    top:0;
    z-index:30;
    background:rgba(246,243,235,.94);
    backdrop-filter:blur(15px);
    border-bottom:1px solid rgba(23,44,53,.1);
}

.nav {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:24px;
    min-height:78px;
}

.brand {
    display:flex;
    align-items:center;
    gap:10px;
}

.brand-mark {
    width:39px;
    height:39px;
    display:grid;
    place-items:center;
    border-radius:50% 50% 50% 12%;
    background:var(--orange);
    color:white;
    font-size:21px;
    transform:rotate(-8deg);
}

.brand-mark span {
    transform:rotate(8deg);
}

.brand-name {
    font-family:var(--serif);
    font-size:23px;
    font-weight:700;
    letter-spacing:-.7px;
    line-height:1;
}

.brand-tag {
    font-size:8px;
    letter-spacing:.15em;
    text-transform:uppercase;
    color:var(--muted);
    margin-top:5px;
}

.nav-links {
    display:flex;
    gap:23px;
    font-size:12px;
    font-weight:700;
}

.nav-links a:hover {
    color:var(--teal);
}

.icon-btn {
    width:40px;
    height:40px;
    border:1px solid var(--line);
    background:transparent;
    border-radius:50%;
    display:grid;
    place-items:center;
    font-size:18px;
    color:var(--ink);
}

.icon-btn:hover {
    background:var(--ink);
    color:white;
}

.progress-track {
    height:3px;
    position:absolute;
    bottom:-1px;
    left:0;
    right:0;
}

.progress-bar {
    height:100%;
    width:0;
    background:var(--orange);
}

.breadcrumbs {
    padding:25px 0 0;
    font-size:11px;
    color:var(--muted);
    display:flex;
    gap:9px;
    flex-wrap:wrap;
    align-items:center;
}

.breadcrumbs a:hover {
    color:var(--teal);
}

.breadcrumbs .sep {
    color:var(--orange);
}

.article-hero {
    padding:30px 0 0;
}

.article-kicker {
    display:flex;
    align-items:center;
    gap:9px;
    color:var(--teal);
    font-size:10px;
    font-weight:850;
    text-transform:uppercase;
    letter-spacing:.16em;
}

.article-kicker:before {
    content:"";
    width:24px;
    height:2px;
    background:var(--orange);
}

.article-hero h1 {
    font-family: var(--serif);
    font-size: clamp(24px, 3.2vw, 42px);
    font-weight: 500;
    /* letter-spacing: -.055em; */
    line-height: .99;
    /* max-width: 1000px; */
    margin: 19px 0 20px;
}

.article-hero h1 em {
    font-style:normal;
    color:var(--teal);
}

.dek {
    font-family: var(--serif);
    font-size: clamp(16px, 2.2vw, 20px);
    line-height: 1.45;
    color: #4f6266;
    /* max-width: 780px; */
    margin: 0 0 20px;
}

.byline-row {
    display:flex;
    align-items:center;
    justify-content:start;
    gap:18px;
    flex-wrap:wrap;
    border-top:1px solid var(--line);
    border-bottom:1px solid var(--line);
    padding:15px 0;
    margin-bottom:25px;
}

.author-mini {
    display:flex;
    align-items:center;
    gap:11px;
}

.avatar {
    width:43px;
    height:43px;
    border-radius:50%;
    overflow:hidden;
    background:#d8e0d8;
    flex:none;
}

.avatar img {
    object-position:center 35%;
}

.author-name {
    font-size:12px;
    font-weight:800;
}

.author-role {
    font-size:10px;
    color:var(--muted);
}

.meta-items {
    display:flex;
    align-items:center;
    gap:14px;
    flex-wrap:wrap;
    color:var(--muted);
    font-size:11px;
}

.meta-items span {
    display:inline-flex;
    align-items:center;
    gap:6px;
}

.meta-dot {
    width:4px;
    height:4px;
    background:var(--orange);
    border-radius:50%;
}

.action-row {
    display:flex;
    gap:7px;
}

.action-btn {
    border:1px solid var(--line);
    background:transparent;
    padding:9px 12px;
    font-size:10px;
    font-weight:800;
    letter-spacing:.04em;
    border-radius:2px;
}

.action-btn:hover {
    background:var(--ink);
    color:white;
    border-color:var(--ink);
}

.hero-figure {
    margin:0;
}

.hero-image {
    height:clamp(290px,52vw,600px);
    border-radius:4px;
    overflow:hidden;
    background:#c5d3d1;
}

.hero-image img {
    object-position:center 55%;
}

.hero-figure figcaption {
    font-size:10px;
    color:var(--muted);
    margin-top:10px;
    text-align:right;
}

.article-layout {
    display:grid;
    grid-template-columns:190px minmax(0,700px) 1fr;
    gap:42px;
    align-items:start;
    padding:0 0 20px;
}

.toc {
    position:sticky;
    top:115px;
    border-top:2px solid var(--ink);
    padding-top:17px;
}

.toc-label {
    font-size:10px;
    letter-spacing:.15em;
    text-transform:uppercase;
    font-weight:850;
    margin-bottom:14px;
}

.toc nav {
    display:grid;
    gap:5px;
}

.toc a {
    font-size:12px;
    color:var(--muted);
    padding:7px 9px;
    border-left:2px solid transparent;
    line-height:1.4;
}

.toc a:hover,.toc a.active {
    color:var(--teal);
    border-left-color:var(--orange);
    background:rgba(27,108,105,.05);
}

.toc-note {
    margin-top:24px;
    background:#e7e9df;
    padding:15px;
    font-size:11px;
    color:#52645f;
}

.toc-note strong {
    display:block;
    font-family:var(--serif);
    font-size:17px;
    font-weight:500;
    color:var(--ink);
    margin-bottom:5px;
}

.article-body {
    min-width:0;
    font-size:16px;
    line-height:1.85;
    color:#293e44;
}

.article-body p {
    margin:0 0 16px;
}

.article-body .lede:first-letter {
    font-family:var(--serif);
    font-size:4.3em;
    line-height:.8;
    float:left;
    padding:9px 9px 0 0;
    color:var(--orange);
}

.article-body h2 {
    font-family:var(--serif);
    font-size:clamp(26px,3.2vw,36px);
    line-height:1.1;
    font-weight:500;
    letter-spacing:-.035em;
    color:var(--ink);
    margin:15px 0;
    scroll-margin-top:110px;
}

.article-body h3 {
    font-family:var(--serif);
    font-size:25px;
    font-weight:500;
    line-height:1.2;
    margin:15px 0;
    color:var(--ink);
}

.article-body strong {
    color:var(--ink);
}

.article-body img {
    max-width: 480px;
    margin-bottom: 10px;
}

.inline-note {
    background:#e7eee7;
    border-left:3px solid var(--teal);
    padding:19px 21px;
    margin:28px 0;
    font-family:var(--serif);
    font-size:20px;
    line-height:1.5;
    color:var(--ink);
}

.inline-note small {
    display:block;
    font-family:var(--sans);
    font-size:9px;
    letter-spacing:.13em;
    text-transform:uppercase;
    color:var(--teal);
    font-weight:850;
    margin-bottom:8px;
}

.article-figure {
    margin:31px 0;
}

.article-figure .figure-image {
    height:clamp(210px,33vw,390px);
    border-radius:4px;
    overflow:hidden;
    background:#d7dfd8;
}

.article-figure figcaption {
    font-size:11px;
    line-height:1.55;
    color:var(--muted);
    padding-top:9px;
}

.comparison {
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:12px;
    margin:25px 0;
}

.comparison div {
    padding:17px;
    background:var(--card);
    border:1px solid var(--line);
}

.comparison strong {
    display:block;
    font-family:var(--serif);
    font-size:21px;
    font-weight:500;
    margin-bottom:7px;
}

.comparison p {
    font-size:13px;
    line-height:1.6;
    margin:0;
    color:var(--muted);
}

.takeaway {
    margin:35px 0;
    background:var(--ink);
    color:#fff;
    padding:25px;
    border-radius:3px;
}

.takeaway .label {
    font-size:10px;
    text-transform:uppercase;
    letter-spacing:.15em;
    color:var(--yellow);
    font-weight:850;
    margin-bottom:10px;
}

.takeaway p {
    font-family:var(--serif);
    font-size:23px;
    line-height:1.4;
    margin:0;
    color:#fff;
}

.article-tags {
    display:flex;
    gap:7px;
    flex-wrap:wrap;
    margin:31px 0;
}

.article-tags a {
    border:1px solid var(--line);
    padding:6px 10px;
    border-radius:50px;
    color:var(--muted);
    font-size:10px;
}

.article-tags a:hover {
    background:var(--teal);
    color:white;
}

.share-bottom {
    border-top:1px solid var(--line);
    border-bottom:1px solid var(--line);
    padding:17px 0;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:15px;
}

.share-bottom strong {
    font-size:11px;
}

.share-bottom div {
    display:flex;
    gap:7px;
    flex-wrap:wrap;
}

.right-rail {
    position:sticky;
    top:115px;
    display:grid;
    gap:24px;
}

.rail-card {
    border-top:2px solid var(--ink);
    padding-top:15px;
}

.rail-title {
    font-size:10px;
    text-transform:uppercase;
    letter-spacing:.15em;
    font-weight:850;
    margin-bottom:14px;
}

.author-card {
    background:#e5e9df;
    padding:18px;
}

.author-card .avatar {
    width:65px;
    height:65px;
    margin-bottom:13px;
}

.author-card h3 {
    font-family:var(--serif);
    font-size:20px;
    font-weight:700;
    margin:0 0 3px;
}

.author-card .job {
    font-size:10px;
    text-transform:uppercase;
    letter-spacing:.09em;
    color:var(--teal);
    font-weight:800;
    margin-bottom:12px;
}

.author-card p {
    font-size:12px;
    line-height:1.65;
    color:#53645f;
    margin-bottom:14px;
}

.rail-link {
    font-size:10px;
    text-transform:uppercase;
    letter-spacing:.08em;
    font-weight:850;
    border-bottom:1px solid var(--orange);
    padding-bottom:4px;
}

.rail-list {
    list-style:none;
    padding:0;
    margin:0;
}

.rail-list li {
    border-top:1px solid var(--line);
    padding:12px 0;
}

.rail-list a {
    font-family:var(--serif);
    font-size:17px;
    line-height:1.2;
}

.rail-list small {
    display:block;
    color:var(--muted);
    font:9px var(--sans);
    text-transform:uppercase;
    letter-spacing:.08em;
    margin-bottom:5px;
}

.rail-promo {
    background:#f0d18a;
    padding:19px;
}

.rail-promo .symbol {
    font-size:26px;
}

.rail-promo h3 {
    font-family:var(--serif);
    font-size:24px;
    line-height:1.05;
    font-weight:500;
    margin:11px 0;
}

.rail-promo p {
    font-size:11px;
    color:#59533f;
    margin-bottom:13px;
}

.related-section {
    background:#e7e9df;
    padding:58px 0 68px;
}

.section-head {
    display:flex;
    align-items:end;
    justify-content:space-between;
    gap:20px;
    margin-bottom:25px;
}

.eyebrow {
    display:flex;
    align-items:center;
    gap:9px;
    font-size:10px;
    text-transform:uppercase;
    letter-spacing:.16em;
    color:var(--teal);
    font-weight:850;
}

.eyebrow:before {
    content:"";
    width:22px;
    height:2px;
    background:var(--orange);
}

.section-head h2 {
    font-family:var(--serif);
    font-size:clamp(32px,4vw,46px);
    font-weight:500;
    letter-spacing:-.04em;
    line-height:1;
    margin:10px 0 0;
}

.related-grid {
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:17px;
}

.related-card {
    background:var(--card);
    border:1px solid rgba(23,44,53,.08);
    transition:transform .2s,box-shadow .2s;
}

.related-card:hover {
    transform:translateY(-4px);
    box-shadow:var(--shadow);
}

.related-image {
    height:200px;
    overflow:hidden;
    background:#ccd7d1;
}

.related-image img {
    transition:transform .5s;
}

.related-card:hover img {
    transform:scale(1.04);
}

.related-copy {
    padding:19px;
}

.related-copy .kicker {
    font-size:9px;
    letter-spacing:.12em;
    text-transform:uppercase;
    color:var(--teal);
    font-weight:850;
    margin-bottom:9px;
}

.related-copy h3 {
    font-family:var(--serif);
    font-size:25px;
    line-height:1.1;
    letter-spacing:-.025em;
    font-weight:500;
    margin:0 0 11px;
}

.related-copy p {
    font-size:12px;
    color:var(--muted);
    margin:0 0 15px;
}

.related-copy a {
    font-size:10px;
    font-weight:850;
    text-transform:uppercase;
    letter-spacing:.08em;
    color:var(--teal);
}

footer {
    background:var(--ink);
    color:#f7f4eb;
    padding:45px 0 20px;
}

.footer-main {
    display:grid;
    grid-template-columns:1.5fr 1fr 1fr 1fr;
    gap:30px;
    padding-bottom:35px;
}

.footer-brand p {
    max-width:290px;
    color:rgba(255,255,255,.6);
    font-size:12px;
    margin-top:16px;
}

.footer-col h4 {
    font-size:9px;
    text-transform:uppercase;
    letter-spacing:.15em;
    color:var(--yellow);
    margin:5px 0 15px;
}

.footer-col a {
    display:block;
    font-size:11px;
    color:rgba(255,255,255,.72);
    margin:9px 0;
}

.footer-col a:hover {
    color:var(--yellow);
}

.footer-bottom {
    border-top:1px solid rgba(255,255,255,.16);
    padding-top:16px;
    display:flex;
    justify-content:space-between;
    gap:15px;
    font-size:10px;
    color:rgba(255,255,255,.48);
}

.overlay {
    position:fixed;
    inset:0;
    z-index:50;
    background:rgba(10,25,31,.5);
    opacity:0;
    visibility:hidden;
    transition:.2s;
}

.overlay.open {
    opacity:1;
    visibility:visible;
}

.search-panel {
    position:fixed;
    z-index:60;
    right:0;
    top:0;
    height:100dvh;
    width:min(450px,100%);
    padding:28px;
    background:var(--paper);
    transform:translateX(105%);
    transition:transform .25s;
}

.search-panel.open {
    transform:translateX(0);
}

.panel-top {
    display:flex;
    align-items:center;
    justify-content:space-between;
    margin-bottom:35px;
}

.panel-top strong {
    font-family:var(--serif);
    font-size:23px;
}

.search-panel label {
    display:block;
    font-size:10px;
    font-weight:850;
    letter-spacing:.13em;
    text-transform:uppercase;
}

.search-panel input {
    width:100%;
    background:transparent;
    border:0;
    border-bottom:2px solid var(--ink);
    outline:0;
    padding:13px 0;
    font-family:var(--serif);
    font-size:24px;
}

.toast {
    position:fixed;
    bottom:20px;
    left:50%;
    transform:translate(-50%,15px);
    opacity:0;
    transition:.2s;
    z-index:90;
    background:var(--ink);
    color:white;
    padding:12px 17px;
    font-size:12px;
    max-width:90%;
    text-align:center;
}

.toast.show {
    opacity:1;
    transform:translate(-50%,0);
}

@media(max-width:1050px) {
    .nav-links {
        gap:12px;
    }

    .nav-links a {
        font-size:11px;
    }

    .article-layout {
        grid-template-columns:155px minmax(0,700px);
        gap:30px;
    }

    .right-rail {
        position:static;
        grid-column:2;
        grid-template-columns:1fr 1fr;
    }

    .rail-promo {
        grid-column:1/-1;
    }

    .footer-main {
        grid-template-columns:1.3fr 1fr 1fr;
    }

    .footer-col:last-child {
        display:none;
    }
}

@media(max-width:760px) {
    .wrap {
        width:calc(100% - 30px);
    }

    .topline .wrap span:last-child {
        display:none;
    }

    .nav {
        min-height:68px;
    }

    .nav-links {
        display:none;
    }

    .byline-row {
        align-items:flex-start;
    }

    .meta-items {
        width:100%;
        order:2;
    }

    .action-row {
        margin-left:auto;
    }

    .hero-image {
        height:360px;
    }

    .article-layout {
        display:flex;
        flex-direction:column;
        gap:27px;
    }

    .toc {
        position:static;
        width:100%;
        background:var(--card);
        border:1px solid var(--line);
        padding:14px;
        display: none;
    }

    .toc-label {
        margin-bottom:9px;
    }

    .toc nav {
        display:flex;
        gap:6px;
        overflow-x:auto;
        padding-bottom:3px;
    }

    .toc a {
        white-space:nowrap;
        border-left:0;
        border-bottom:2px solid transparent;
        padding:7px 9px;
    }

    .toc a.active,.toc a:hover {
        border-left:0;
        border-bottom-color:var(--orange);
    }

    .toc-note {
        display:none;
    }

    .article-body {
        font-size:16px;
    }

    .right-rail {
        width:100%;
        grid-column:auto;
        grid-template-columns:1fr 1fr;
    }

    .author-card {
        grid-column:1/-1;
    }

    .rail-promo {
        grid-column:1/-1;
    }

    .related-grid {
        grid-template-columns:1fr 1fr;
    }

    .related-image {
        height:165px;
    }

    .related-copy {
        padding:15px;
    }

    .related-copy h3 {
        font-size:22px;
    }

    .footer-main {
        grid-template-columns:1fr 1fr;
    }

    .footer-brand {
        grid-column:1/-1;
    }

    .footer-col:last-child {
        display:block;
    }
}

@media(max-width:480px) {
    .article-hero {
        padding-top:22px;
    }

    .breadcrumbs {
        padding-top:17px;
    }

    .dek {
        font-size:18px;
    }

    .hero-image {
        height:270px;
    }

    .action-btn {
        padding:8px;
    }

    .article-body .lede:first-letter {
        font-size:3.5em;
    }

    .comparison {
        grid-template-columns:1fr;
    }

    .right-rail {
        grid-template-columns:1fr;
    }

    .author-card,.rail-promo {
        grid-column:auto;
    }

    .related-grid {
        grid-template-columns:1fr;
    }

    .related-image {
        height:220px;
    }

    .section-head {
        align-items:flex-start;
        flex-direction:column;
    }

    .footer-main {
        gap:24px 15px;
    }

    .footer-bottom {
        flex-direction:column;
    }
}

@media print {
    header,.topline,.toc,.right-rail,.action-row,.related-section,footer {
        display:none!important;
    }

    .article-layout {
        display:block;
    }

    .article-body {
        max-width:none;
    }

    .hero-image {
        height:300px;
    }
}

.banner_1, .banner_2, .banner_3, .banner_4, .banner_ad {
    display: none;
}

.pagination {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.pagination .pagination-list {
    display: flex;
    gap: 6px;
    list-style: none;
    margin: 0;
    padding: 0;
}

.pagination .pagination-previous, .pagination .pagination-next {
    margin: 0 6px;
}

.pagination a {
    display: inline-flex;
    min-width: 36px;
    min-height: 36px;
    align-items: center;
    justify-content: center;
    border: 1px solid #deded4;
    border-radius: 8px;
    padding: 0 10px;
}

.pagination .is-current {
    background: #172c35;
    color: #fff;
}

.pagination .is-invisible {
    visibility: hidden;
}

.img_alt {
    font-style: italic;
    margin: 2px 0 10px;
    color: #999;
    font-size: 14px;
}