*{
    margin:auto;
    padding:0;
    box-sizing:border-box;

    /* Site-wide theme transition — matches style.css */
    transition:background-color .25s ease, color .25s ease, border-color .25s ease;
}

:root{

    color-scheme:light;

    /* This page has its own stylesheet (no <link> to style.css), so
       these theme variables mirror style.css's palette independently
       rather than sharing it. Keep the two in sync if either changes. */
    --bg:#F6F2EB;
    --text:#1B1B1B;
    --story-text:#444;
    --muted:#666;
    --muted-2:#777;
    --border:#ddd;
    --surface:#F5F0EA;

}

[data-theme="dark"]{

    color-scheme:dark;

    --bg:#121212;
    --text:#F5F3EF;
    --story-text:#D8D3C9;
    --muted:#B8B3A9;
    --muted-2:#948E82;
    --border:#2A2A2A;
    --surface:#181818;

}

body{

    font-family:"Manrope",sans-serif;
    background:var(--bg);
    color:var(--text);
    line-height:1.9;
    margin:auto;
    padding:0;

}

.hero{

    width:min(900px,90%);
    margin:auto;

}

.back-link{

    display:inline-block;
    text-decoration:none;
    color:var(--muted-2);
    margin-bottom:60px;
    transition:.3s;

}

.back-link:hover{

    color:var(--text);

}

.eyebrow{

    letter-spacing:6px;
    text-transform:uppercase;
    color:var(--muted-2);
    font-size:13px;
    margin-bottom:18px;
    text-align:center;

}

h1{

    font-size:clamp(52px,7vw,90px);
    line-height:1;
    margin-bottom:20px;
    font-weight:700;
    text-align:center;

}

.subtitle{

    font-size:22px;
    max-width:700px;
    color:var(--muted);
    text-align:center;

}

.featured-image{

    width:min(1200px,60%);
    margin:0 auto 100px;

}

.featured-image img{

    width:40%;
    border-radius:22px;
    display:block;
    margin:0 auto;

}

.story{

    width:min(760px,90%);
    margin:auto;
    margin-bottom:120px;

}

.story p{

    font-size:21px;
    color:var(--story-text);
    margin-bottom:36px;

}

footer{

    border-top:1px solid var(--border);
    text-align:center;
    padding:40px;
    color:var(--muted-2);

}

@media(max-width:768px){

.story p{

    font-size:18px;

}

.subtitle{

    font-size:19px;

}

}

/* ---------- DARK MODE TOGGLE ---------- */
/* Same control/markup as the rest of the site — see style.css for
   the shared explanation. Duplicated here because this page uses its
   own stylesheet rather than linking style.css. */

.theme-toggle{

    position:fixed;

    bottom:24px;
    right:24px;

    z-index:1000;

    width:46px;
    height:46px;

    border-radius:50%;

    display:flex;
    align-items:center;
    justify-content:center;

    background:var(--surface);
    border:1px solid var(--border);
    color:var(--text);

    box-shadow:0 8px 24px rgba(0,0,0,.14);

    cursor:pointer;

    transition:
        transform .3s cubic-bezier(.16,1,.3,1),
        background-color .25s ease,
        border-color .25s ease,
        box-shadow .25s ease;

}

.theme-toggle:hover{

    transform:translateY(-3px);

    box-shadow:0 12px 30px rgba(0,0,0,.18);

}

.theme-toggle:focus-visible{

    outline:2px solid var(--text);
    outline-offset:3px;

}

.theme-toggle-icon{

    width:20px;
    height:20px;

}

.theme-toggle-icon--sun{

    display:none;

}

[data-theme="dark"] .theme-toggle-icon--sun{

    display:block;

}

[data-theme="dark"] .theme-toggle-icon--moon{

    display:none;

}

@media (max-width:600px){

.theme-toggle{

    bottom:18px;
    right:18px;

    width:42px;
    height:42px;

}

.theme-toggle-icon{

    width:18px;
    height:18px;

}

}