/* Design tokens */
@import url("variables.css");

/* ==========================================================
   SIENA BEE DESIGN SYSTEM v3.0
   Foundation
========================================================== */

:root{

    /* Palette */

    --color-background:#FAF7F2;
    --color-surface:#FFFFFF;

    --color-text:#2F2B28;
    --color-muted:#6F675F;

    --color-accent:#8A6A3D;
    --color-gold:#B08D57;

    --color-border:#E7DED2;

    /* Layout */

    --radius:16px;

    --content-width:1180px;

    --shadow-soft:0 12px 32px rgba(0,0,0,.06);

    /* Compatibility aliases */

    --bg:var(--color-background);
    --surface:var(--color-surface);

    --text:var(--color-text);
    --muted:var(--color-muted);

    --accent:var(--color-accent);
    --gold:var(--color-gold);

    --border:var(--color-border);

    --shadow:var(--shadow-soft);

    --container:var(--content-width);

}

/* ==========================================================
   RESET
========================================================== */

*{

    margin:0;
    padding:0;
    box-sizing:border-box;

}

*::before,
*::after{

    box-sizing:border-box;

}

html{

    scroll-behavior:smooth;

}

body{

    background:var(--bg);

    color:var(--text);

    font-family:Georgia,"Times New Roman",serif;

    font-size:16px;

    line-height:1.9;

    text-rendering:optimizeLegibility;

    -webkit-font-smoothing:antialiased;

    overflow-x:hidden;

}

a{

    color:inherit;

    text-decoration:none;

    transition:.3s ease;

}

.container{

    width:min(92%,var(--container));

    margin:auto;

}

.narrow{

    max-width:760px;

    margin:auto;

}

.skip-link{
    position:absolute;
    left:-9999px;
    top:auto;
}

.skip-link:focus{
    left:20px;
    top:20px;
    padding:12px 18px;
    background:#fff;
    color:var(--accent);
    border:1px solid var(--accent);
    border-radius:8px;
    z-index:3000;
}

/* ==========================================================
   TYPOGRAPHY
========================================================== */

h1,
h2,
h3{

    font-weight:400;

    line-height:1.2;

    letter-spacing:.02em;

}

h1{

    font-size:clamp(2.8rem,6vw,4.8rem);

}

h2{

    font-size:clamp(2rem,4vw,3rem);

}

h3{

    font-size:1.45rem;

}

p{

    max-width:68ch;

    margin:0 auto 1.5rem;

}

hr{

    width:90px;

    margin:3rem auto;

    border:none;

    border-top:1px solid rgba(176,141,87,.35);

}

/* ==========================================================
   LAYOUT
========================================================== */

main section{

    padding:7rem 0;

}

/* ==========================================================
   HEADER
========================================================== */

.site-header{

    position:sticky;

    top:0;

    z-index:1000;

    backdrop-filter:blur(12px);

    background:rgba(250,247,242,.94);

    border-bottom:1px solid var(--border);

    transition:box-shadow .3s ease;

}

.site-header.is-scrolled{

    box-shadow:var(--shadow);

}

.header-container{

    display:flex;

    justify-content:space-between;

    align-items:center;

    min-height:90px;

}

.brand{

    display:flex;

    align-items:center;

    gap:14px;

}

.crest{

    width:64px;

    height:64px;

    object-fit:contain;

    flex-shrink:0;

}

.brand-title{

    display:block;

    font-size:1.15rem;

    letter-spacing:.18em;

}

.brand-subtitle{

    display:block;

    margin-top:4px;

    color:var(--muted);

    font-size:.82rem;

}

.main-nav{

    display:flex;

    gap:2rem;

}

.main-nav a{

    position:relative;

    padding-bottom:.35rem;

}

.main-nav a:hover,
.main-nav a.active{

    color:var(--accent);

}

.main-nav a::after{

    content:"";

    position:absolute;

    left:0;

    bottom:0;

    width:0;

    height:1px;

    background:var(--accent);

    transition:.35s;

}

.main-nav a:hover::after,
.main-nav a.active::after{

    width:100%;

}

/* ==========================================================
   HERO
========================================================== */

/* AMAZON PRIME */

.prime-banner{
    max-width:900px;
    margin:5rem auto;
    padding:2rem;
    text-align:center;
    background:var(--surface);
    border:1px solid var(--border);
    border-radius:var(--radius);
    box-shadow:var(--shadow);
}

.prime-banner p{
    margin-bottom:1rem;
    color:var(--muted);
    font-size:1.15rem;
}

.prime-banner a{
    display:inline-block;
    padding:1rem 2.5rem;
    border-radius:999px;
    background:var(--accent);
    color:#fff;
    font-weight:bold;
}

.prime-banner a:hover{
    transform:translateY(-2px);
}

/* ==========================================================
   HERO
========================================================== */

.hero{

    display:flex;

    align-items:center;

    justify-content:center;

    min-height:100svh;

    text-align:center;

    background:

        linear-gradient(

            rgba(250,247,242,.82),

            rgba(250,247,242,.82)

        ),

        url("../images/hero.jpg")

        center center/cover no-repeat;

}

.hero-content{

    max-width:760px;

}

.eyebrow,
.section-kicker{

    text-transform:uppercase;

    letter-spacing:.32rem;

    color:var(--accent);

    font-size:.82rem;

    margin-bottom:1rem;

}

.hero h1{

    margin-bottom:1rem;

    letter-spacing:.08em;

}

.hero-intro{

    max-width:650px;

    margin:0 auto 2rem;

    color:var(--muted);

    font-size:1.15rem;

}

.hero-actions{

    display:flex;

    justify-content:center;

    gap:1rem;

    flex-wrap:wrap;

    margin-top:2.5rem;

}

/* ==========================================================
   BUTTONS
========================================================== */

.button{

    display:inline-block;

    padding:.95rem 1.8rem;

    border:1px solid var(--accent);

    border-radius:999px;

    background:var(--accent);

    color:#fff;

    font-size:.82rem;

    letter-spacing:.08em;

    text-transform:uppercase;

    transition:all .3s ease;

}

.button:hover{

    background:transparent;

    color:var(--accent);

    transform:translateY(-2px);

}

.button-secondary{

    background:transparent;

    color:var(--accent);

}

.button-secondary:hover{

    background:var(--accent);

    color:#fff;

}

/* ==========================================================
   GRID
========================================================== */

.grid{

    display:grid;

    grid-template-columns:repeat(auto-fit,minmax(280px,1fr));

    gap:2rem;

    align-items:start;

}

/* ==========================================================
   EDITORIAL CARDS
========================================================== */

.editorial-card{

    background:var(--surface);

    border:1px solid var(--border);

    border-radius:var(--radius);

    padding:2.5rem;

    box-shadow:var(--shadow);

    transition:
        transform .35s ease,
        box-shadow .35s ease;

}

.editorial-card:hover{

    transform:translateY(-6px);

    box-shadow:0 18px 40px rgba(0,0,0,.08);

}

.editorial-card h3{

    margin-bottom:1rem;

}

.editorial-card p:last-child{

    margin-bottom:0;

}

/* ==========================================================
   THE HOUSE
========================================================== */

#house h2{

    text-align:center;

    margin-bottom:3rem;

}

.drop-cap::first-letter{

    float:left;

    font-size:4rem;

    line-height:.8;

    padding-right:.45rem;

    color:var(--accent);

}

/* ==========================================================
   ESSAYS
========================================================== */

.essay{

    max-width:760px;

    margin:auto;

}

.essay-header{

    text-align:center;

    margin-bottom:4rem;

}

.essay h1{

    margin-bottom:1rem;

}

.essay-subtitle{

    color:var(--muted);

    font-style:italic;

    text-align:center;

    margin-bottom:2rem;

}

.essay-meta{

    text-align:center;

    color:var(--muted);

    font-size:.95rem;

    margin-bottom:2rem;

}

.essay p{

    text-align:justify;

    margin-bottom:1.75rem;

}

.essay h2{

    text-align:left;

    margin-top:4rem;

    margin-bottom:1.5rem;

}

.essay h3{

    margin-top:3rem;

    margin-bottom:1rem;

}

.essay footer{

    margin-top:5rem;

    text-align:center;

}

.signature{

    margin-top:2rem;

    font-style:italic;

}

.signature strong{

    display:block;

    margin-top:.75rem;

    font-style:normal;

    letter-spacing:.08em;

}

/* ==========================================================
   ESSAY ATMOSPHERE
========================================================== */

.essay-atmosphere{

    margin:2.5rem auto;

    max-width:620px;

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:2rem;

    text-align:center;

}

.essay-atmosphere p{

    margin:0;

    color:var(--muted);

    font-size:.92rem;

}

.essay-atmosphere strong{

    display:block;

    margin-bottom:.5rem;

    color:var(--accent);

    text-transform:uppercase;

    letter-spacing:.14em;

    font-size:.78rem;

}

@media(max-width:768px){

    .essay-atmosphere{

        grid-template-columns:1fr;

        gap:1.5rem;

    }

}

/* ==========================================================
   EDITOR NOTE
========================================================== */

.editor-note{

    margin-top:5rem;

    padding:2rem;

    background:var(--surface);

    border:1px solid var(--border);

    border-radius:var(--radius);

    text-align:center;

}

/* ==========================================================
   QUIET CIRCLE
========================================================== */

#quiet-circle{

    background:#F4EEE5;

    text-align:center;

}

#quiet-circle p{

    margin-inline:auto;

}

/* ==========================================================
   BREADCRUMB
========================================================== */

.breadcrumb{

    width:min(92%,var(--container));

    margin:2rem auto;

    color:var(--muted);

    font-size:.9rem;

}

.breadcrumb a{

    color:var(--muted);

    transition:color .3s ease;

}

.breadcrumb a:hover{

    color:var(--accent);

}

.breadcrumb span{

    margin:0 .45rem;

}

/* ==========================================================
   READING PROGRESS
========================================================== */

.reading-progress{

    position:fixed;

    top:0;

    left:0;

    width:0;

    height:3px;

    background:var(--accent);

    z-index:2000;

    transition:width .15s linear;

}

/* ==========================================================
   BACK TO TOP
========================================================== */

.back-to-top{

    position:fixed;

    right:1.5rem;

    bottom:1.5rem;

    width:46px;

    height:46px;

    display:flex;

    align-items:center;

    justify-content:center;

    border:none;

    border-radius:50%;

    background:var(--surface);

    color:var(--text);

    box-shadow:var(--shadow);

    cursor:pointer;

    opacity:0;

    visibility:hidden;

    transform:translateY(12px);

    transition:
        opacity .3s ease,
        transform .3s ease,
        background .3s ease,
        color .3s ease;

    z-index:1000;

}

.back-to-top.visible{

    opacity:1;

    visibility:visible;

    transform:translateY(0);

}

.back-to-top:hover{

    background:var(--accent);

    color:#fff;

}

/* ==========================================================
   HOUSE COMPASS
========================================================== */

.house-compass{

    max-width:760px;

    margin:5rem auto;

    padding:2rem;

    border:1px solid var(--border);

    border-radius:var(--radius);

    background:var(--surface);

    box-shadow:var(--shadow-soft);

}

.house-compass h3{

    text-align:center;

    margin-bottom:2rem;

    letter-spacing:.08em;

    text-transform:uppercase;

}

.house-compass-grid{

    display:grid;

    grid-template-columns:1fr auto;

    gap:1rem 2rem;

    align-items:center;

}

.house-compass-label{

    font-weight:500;

}

.house-compass-level{

    letter-spacing:.20rem;

    color:var(--accent);

    font-size:.95rem;

}

/* ==========================================================
   HOUSE TAGS
========================================================== */

.house-tags{

    display:flex;

    flex-wrap:wrap;

    justify-content:center;

    gap:.75rem;

    margin:3rem auto;

}

.house-tag{

    padding:.45rem 1rem;

    border:1px solid var(--border);

    border-radius:999px;

    background:var(--surface);

    color:var(--muted);

    font-size:.82rem;

    letter-spacing:.04em;

    transition:.3s;

}

.house-tag:hover{

    border-color:var(--accent);

    color:var(--accent);

}

/* ==========================================================
   FOOTER
========================================================== */

footer{

    margin-top:5rem;

    padding:3rem 0;

    border-top:1px solid var(--border);

    text-align:center;

    color:var(--muted);

}

.motto{

    margin:.75rem 0;

    color:var(--accent);

    text-transform:uppercase;

    letter-spacing:.28em;

    font-size:.9rem;

}

.footer-subtitle{

    font-size:.92rem;

}

/* ==========================================================
   UTILITIES
========================================================== */

.text-center{

    text-align:center;

}

.mb-0{

    margin-bottom:0;

}

.mb-1{

    margin-bottom:1rem;

}

.mb-2{

    margin-bottom:2rem;

}

.mt-1{

    margin-top:1rem;

}

.mt-2{

    margin-top:2rem;

}

.mt-3{

    margin-top:3rem;

}

.mt-4{

    margin-top:4rem;

}

/* ==========================================================
   FADE-IN ANIMATIONS
========================================================== */

.fade-in{

    opacity:0;

    transform:translateY(24px);

    transition:

        opacity .8s ease,

        transform .8s ease;

}

.fade-in.visible{

    opacity:1;

    transform:translateY(0);

}

/* ==========================================================
   IMAGE TREATMENT
========================================================== */

img{

    display:block;

    max-width:100%;

    height:auto;

}

figure{

    margin:3rem auto;

}

figcaption{

    margin-top:.75rem;

    text-align:center;

    color:var(--muted);

    font-size:.9rem;

    font-style:italic;

}

/* ==========================================================
   EDITORIAL ELEMENTS
========================================================== */

blockquote{

    max-width:760px;

    margin:4rem auto;

    padding:2rem 2.5rem;

    border-left:4px solid var(--accent);

    background:rgba(176,141,87,.06);

    font-size:1.15rem;

    font-style:italic;

    line-height:1.9;

    color:var(--text);

}

blockquote footer{

    margin-top:1.5rem;

    padding:0;

    border:none;

    text-align:right;

    font-size:.92rem;

    color:var(--muted);

}

blockquote cite{

    font-style:normal;

}

/* ==========================================================
   EDITORIAL LISTS
========================================================== */

.essay ul,
.essay ol{

    max-width:700px;

    margin:2rem auto;

    padding-left:2rem;

}

.essay li{

    margin-bottom:.8rem;

    line-height:1.8;

}

/* ==========================================================
   FOOTNOTES
========================================================== */

.footnotes{

    max-width:760px;

    margin:5rem auto 0;

    padding-top:2rem;

    border-top:1px solid var(--border);

}

.footnotes h3{

    margin-bottom:1.5rem;

    font-size:1.15rem;

}

.footnotes ol{

    padding-left:1.4rem;

}

.footnotes li{

    margin-bottom:1rem;

    color:var(--muted);

    font-size:.95rem;

}

.affiliate-disclaimer{
    margin-top:1.5rem;
    font-size:.85rem;
    line-height:1.6;
    opacity:.75;
    text-align:center;
    max-width:700px;
    margin-left:auto;
    margin-right:auto;
}

/* ==========================================================
   RESPONSIVE
========================================================== */

@media (max-width:900px){

    .header-container{
        min-height:72px;
        padding:12px 0;
    }

    .brand{
        justify-content:center;
    }

    .main-nav{
        display:none;
    }

    .prime-banner{
        margin:2rem auto;
    }

    .hero{
        min-height:70vh;
    }

}

@media(max-width:768px){

    body{

        font-size:15px;

    }

    .container{

        width:94%;

    }

    main section{

        padding:5rem 0;

    }

    h1{

        font-size:2.5rem;

    }

    h2{

        font-size:2rem;

    }

    .hero{

        min-height:60vh;

    }

    .hero-actions{

        flex-direction:column;

        align-items:center;

    }

    .button{

        width:100%;

        max-width:320px;

        text-align:center;

    }

    .editorial-card{

        padding:2rem;

    }

    .drop-cap::first-letter{

        font-size:3rem;

    }

    blockquote{

        padding-left:1rem;

        font-size:1rem;

    }

}

/* ==========================================================
   ACCESSIBILITY
========================================================== */

@media (prefers-reduced-motion: reduce){

    html{

        scroll-behavior:auto;

    }

    *{

        animation:none !important;

        transition:none !important;

    }

    .fade-in{

        opacity:1;

        transform:none;

    }

}

/* ==========================================================
   END OF SIENA BEE DESIGN SYSTEM
========================================================== */

/* --- Launch P0 additions --- */
.footer-links{
    margin-top:1.25rem;
    font-size:0.9rem;
    letter-spacing:0.02em;
}
.footer-links a{
    color:inherit;
    text-decoration:none;
    border-bottom:1px solid transparent;
}
.footer-links a:hover{
    border-bottom-color:var(--color-gold, #B08D57);
}
.ad-slot{
    min-height:0;
    margin:2rem auto;
    max-width:var(--content-width, 1180px);
}
.category-list{
    list-style:none;
    padding:0;
    margin:2rem 0;
}
.category-list li{
    padding:0.85rem 0;
    border-bottom:1px solid var(--color-border, #E7DED2);
}
.category-list a{
    text-decoration:none;
    color:inherit;
}

/* --- P1: mobile nav + affiliate components --- */

.nav-toggle{
    display:none;
    align-items:center;
    justify-content:center;
    width:44px;
    height:44px;
    margin-left:auto;
    padding:0;
    border:1px solid var(--color-border, #E7DED2);
    border-radius:10px;
    background:transparent;
    color:var(--color-accent, #8A6A3D);
    cursor:pointer;
    flex-shrink:0;
}

.nav-toggle:focus,
.nav-toggle:focus-visible{
    outline:2px solid var(--color-gold, #B08D57);
    outline-offset:2px;
}

.nav-toggle-bars{
    display:flex;
    flex-direction:column;
    gap:5px;
    width:18px;
}

.nav-toggle-bars span{
    display:block;
    height:1.5px;
    width:100%;
    background:currentColor;
    border-radius:1px;
    transition:transform .25s ease, opacity .25s ease;
}

.nav-toggle[aria-expanded="true"] .nav-toggle-bars span:nth-child(1){
    transform:translateY(6.5px) rotate(45deg);
}

.nav-toggle[aria-expanded="true"] .nav-toggle-bars span:nth-child(2){
    opacity:0;
}

.nav-toggle[aria-expanded="true"] .nav-toggle-bars span:nth-child(3){
    transform:translateY(-6.5px) rotate(-45deg);
}

.header-container{
    position:relative;
    gap:1rem;
}

@media (max-width:900px){

    .nav-toggle{
        display:inline-flex;
    }

    .main-nav{
        display:none;
        position:absolute;
        top:calc(100% + 1px);
        left:0;
        right:0;
        flex-direction:column;
        gap:0;
        padding:0.75rem 1rem 1.25rem;
        background:rgba(250,247,242,.98);
        border-bottom:1px solid var(--color-border, #E7DED2);
        box-shadow:var(--shadow-soft, 0 12px 32px rgba(0,0,0,.06));
        z-index:1001;
    }

    .main-nav.is-open{
        display:flex;
    }

    .main-nav a{
        padding:0.85rem 0.25rem;
        border-bottom:1px solid var(--color-border, #E7DED2);
    }

    .main-nav a:last-child{
        border-bottom:none;
    }

    .main-nav a::after{
        display:none;
    }

    body.nav-open{
        overflow:hidden;
    }

}

.affiliate-card{
    display:flex;
    flex-direction:column;
    gap:0.75rem;
}

.affiliate-cta.is-pending,
a.affiliate-cta[aria-disabled="true"]{
    opacity:0.72;
    cursor:not-allowed;
    pointer-events:auto;
    border-style:dashed;
}

.affiliate-disclosure-note{
    margin:1.5rem 0 0.5rem;
    padding:0.9rem 1.1rem;
    font-size:0.9rem;
    line-height:1.6;
    color:var(--color-muted, #6F675F);
    background:var(--color-surface, #fff);
    border:1px solid var(--color-border, #E7DED2);
    border-radius:12px;
    max-width:42rem;
}

.affiliate-disclosure-note a{
    color:var(--color-accent, #8A6A3D);
    text-decoration:underline;
    text-underline-offset:2px;
}