:root{
    --ink:#222222;
    --yellow:#ffcf12;
    --cream:#fff8df;
    --red:#ca4131;
    --muted:#66645d
}

*{box-sizing:border-box}

html{
    scroll-behavior:smooth
}

body{
    margin:0;
    background:#f8f7f2;
    color:var(--ink);
    font:16px/1.6 'DM Sans',sans-serif
}

a{
    color:inherit
}

a:focus-visible,button:focus-visible{
    outline:3px solid var(--red);
    outline-offset:4px
}

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

header{
    height:82px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    border-bottom:1px solid #e5e2d8
}

.brand{
    display:flex;
    align-items:center;
    gap:11px;
    text-decoration:none;
    font:600 23px 'Outfit',sans-serif;
    letter-spacing:-.045em
}

.brand img{
    width:37px;
    height:37px;
    object-fit:contain
}

nav{
    display:flex;
    gap:32px;
    align-items:center
}

nav a{
    text-decoration:none;
    font-weight:600;
    font-size:14px
}

nav a:hover{
    color:var(--red)
}

.hero{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:6%;
    align-items:center;
    padding:88px 0 110px
}

.eyebrow{
    text-transform:uppercase;
    letter-spacing:.18em;
    font-size:12px;
    font-weight:700;
    color:var(--red)
}

h1,h2,h3,p{
    margin-top:0
}

h1,h2,h3{
    font-family:Outfit,sans-serif;
    letter-spacing:-.055em;
    line-height:1.06
}

h1{
    font-size:clamp(3.8rem,7vw,7rem);
    margin:22px 0 25px;
    font-weight:600
}

h1 em{
    font-style:normal;
    color:var(--red)
}

.lead{
    font-size:clamp(1.15rem,1.8vw,1.4rem);
    line-height:1.5;
    color:#4b4a46;
    max-width:480px
}

/** BUTTONS **/
.button{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-height:50px;
    padding:0 26px;
    background:var(--ink);
    color:white;
    text-decoration:none;
    border-radius:100px;
    font-weight:700;
    margin-top:22px;
    transition:transform .2s,background .2s
}

.button:hover{
    transform:translateY(-3px);
    background:var(--red)
}

.button-yellow{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-height:50px;
    padding:0 26px;
    background:var(--yellow);
    color:black;
    text-decoration:none;
    border-radius:100px;
    font-weight:700;
    margin-top:22px;
    transition:transform .2s,background .2s
}

.button-yellow:hover{
    transform:translateY(-3px);
    background:var(--red)
}

.hero-art{
    position:relative;
    border-radius:28px;
    background:var(--yellow);
    min-height:530px;
    display:grid;
    place-items:center;
    overflow:hidden}

    .hero-art:before{
    content:"";
    position:absolute;
    border:2px solid rgba(34,34,34,.16);
    width:88%;
    height:85%;
    border-radius:50%;
    transform:rotate(-25deg) scale(1.35)
}

.hero-art img{
    width:min(75%,410px);
    position:relative;
    filter:drop-shadow(0 24px 22px rgba(33,29,10,.17));
    border-radius:18px;
    transform:rotate(0deg);  /* -5deg */
}

.stamp{
    position:absolute;
    bottom:23px;
    right:24px;
    background:var(--ink);
    color:var(--yellow);
    border-radius:100px;
    padding:10px 18px;
    font-size:13px;
    font-weight:700;
    transform:rotate(5deg)
 }

.section-title{
    font-size:clamp(2.8rem,5vw,5rem);
    margin:0 0 20px
}

.feature{
    background:#222;
    color:white;
    padding:100px 0
   }

.feature-grid{
     display:grid;
    grid-template-columns:.85fr 1.15fr;
    gap:8%;
    align-items:center
}

.feature .eyebrow{
        color:var(--yellow)
}

.feature h2{
    font-size:clamp(3rem,5vw,5.5rem);
    margin:20px 0
}

.feature p{
    color:#d8d7d0;
    max-width:460px;
    font-size:18px
}

.price{
    display:inline-block;
    color:var(--yellow);
    font-weight:700;
    margin-top:14px
}

.paper{
    background:#f4ecd0;
    border-radius:24px;
    padding:28px;
    box-shadow:0 25px 65px #0003
}

.paper img{
    width:100%;
    display:block;
    border-radius:10px
}

.details{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:25px;
    margin-top:65px;
    border-top:1px solid #555;
    padding-top:35px
}

.details strong{
    font:600 20px Outfit;
    display:block;
    margin-bottom:8px
}

.details span{
    color:#c6c5bd
}

.coming{padding:110px 0}.coming-heading{display:flex;align-items:end;justify-content:space-between;gap:30px;margin-bottom:35px}.coming-heading p{max-width:380px;color:var(--muted)}.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}.card{background:white;border:1px solid #e8e5dc;border-radius:22px;padding:34px;min-height:300px;display:flex;flex-direction:column;align-items:start}.card img{width:95px;height:95px;object-fit:contain;background:#222;border-radius:18px}.card h3{font-size:28px;margin:30px 0 8px}.card p{color:var(--muted);margin:0}.card small{margin-top:auto;padding-top:20px;text-transform:uppercase;letter-spacing:.12em;font-size:11px;font-weight:700;color:var(--red)}footer{border-top:1px solid #dedbd1;padding:40px 0 55px;display:flex;justify-content:space-between;gap:20px;color:var(--muted);font-size:14px}footer a{color:var(--ink)}@media(max-width:800px){.hero,.feature-grid{grid-template-columns:1fr}.hero{padding:60px 0 75px}.hero-art{min-height:390px}.feature{padding:75px 0}.details,.cards{grid-template-columns:1fr}.details{gap:25px}.coming{padding:75px 0}.coming-heading{display:block}.card{min-height:230px}nav{gap:15px}}@media(max-width:460px){.wrap{width:min(100% - 32px,1180px)}header{height:70px}.brand{font-size:19px}.brand img{width:30px;height:30px}nav a{font-size:13px}nav a:first-child{display:none}.hero-art{min-height:320px}h1{font-size:3.7rem}.paper{padding:13px}footer{display:block}footer p{margin-bottom:12px}}@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.button{transition:none}}


 
 /* Sticky navigation and home-page contact section */
.site-header{
    position:sticky;
    top:0;
    z-index:20;
    background:#f8f7f2;
    border-bottom:1px solid #e5e2d8
}

.site-header header{
    border-bottom:0
}

#todo,#coming,#contact{
    scroll-margin-top:100px
}


 
/* Shared navigation and document pages */
nav{
    position:relative
} 

.nav-group{
    position:relative;
    display:flex;
    align-items:center;
    gap:4px
}

.nav-group summary{
    list-style:none;
    cursor:pointer;
    font-weight:600;
    font-size:14px;
    padding:12px 5px
}

/*
.nav-group summary::-webkit-details-marker{
    display:none
}

.nav-group summary:after{
    content:"⌄";
    margin-left:
    8px;font-size:
    18px;
    line-height:0
}

.nav-group[open] summary:after{
    content:"⌃"
}

.nav-group summary:hover{
    color:var(--red)
}
*/

.dropdown{
    position:absolute;
    top:100%;
    right:0;
    left:0px; /* NEW */
    z-index:5;
    min-width:205px;
    background:#fff;
    border:1px solid #e8e5dc;
    border-radius:16px;
    box-shadow:0 16px 35px #0002;
    padding:9px
}

.dropdown a{
    display:block;
    padding:10px 13px;
    border-radius:8px;
    white-space:nowrap
}

.dropdown a:hover,.dropdown a[aria-current=page]{
    background:var(--cream);
    color:var(--ink)
}

.document-hero{
    padding:80px 0 58px;
    border-bottom:1px solid #e4e0d5
}

.document-hero h1{
    font-size:clamp(3.3rem,6vw,6rem);
    margin:13px 0 16px
}

.document-hero p{
    font-size:1.2rem;
    max-width:700px;
    color:var(--muted);
    margin:0
}

.document-main{
    padding:62px 0 105px
}

.prose{
    max-width:760px
}

.prose h2{
    font-size:
    2rem;
    margin:52px 0 17px
}

.prose p{
    margin:0 0 17px;
    color:#41403b
}

.prose ul{
    margin:0 0 24px;
    padding-left:25px
}

.prose li{
    padding-left:4px;
    margin-bottom:6px
}

.prose a{
    color:#a52e24;
    text-underline-offset:3px
}

.prose .date{
    color:var(--muted);
    font-size:14px;
    font-weight:600;
    margin:0 0 26px
}

.faq-grid{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:19px
}

.faq-card{
    background:white;
    border:1px solid #e8e5dc;
    border-radius:20px;
    padding:30px;
    min-width:0
}

.faq-card h2{
    font-size:1.55rem;
    margin:0 0 13px
}

.faq-card p{
    color:#52514c;
    margin:0
}

.faq-card img{
    display:block;
    width:100%;
    max-width:
    420px;
    height:auto;
    border-radius:12px;
    margin-top:22px
}

.faq-card .icon{
    font-size:1.3rem;color:var(--red);
    margin-right:10px
    display:inline-block;
    min-width:24px
}

.faq-card.feedback{
    background:var(--cream)
}

.faq-card h2{
    display:inline;
    vertical-align:baseline
}

.faq-card p{
    margin-top:16px
}

/**** CONTACT ****/
.contact-section{
    background:var(--cream);
    padding:85px 0 90px
}

.contact-inner{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:8%;
    align-items:start
}

.contact-section h2{
    font-size:clamp(2.7rem,5vw,5rem);
    margin:15px 0 0
}

.contact-copy{
    font-size:1.1rem
}

.contact-copy p{
    margin-bottom:20px
}

.contact-copy p:last-child{
    color:var(--muted);
    font-size:15px
}

.contact-email{
    display:inline-block;
    color:#aa3024;
    font:600 clamp(1.15rem,2.5vw,1.7rem) Outfit,sans-serif;
    text-underline-offset:5px;
    margin:3px 0 25px;
    overflow-wrap:anywhere
}

@media(max-width:800px){
    .faq-grid{
        grid-template-columns:1fr
    }

    .contact-inner{
        grid-template-columns:1fr;gap:25px;
    }
}

@media(max-width:460px){
    .nav-group summary{
        font-size:13px
    }

    .dropdown{
        right:-55px
    }

    .document-hero{
        padding:55px 0 40px
    }

    .document-main{
        padding:35px 0 75px
    }
}

@media(max-width:600px){
    .site-header header{
        height:auto;
        min-height:94px;
        flex-wrap:wrap;
        padding:9px 0
    }

    .site-header nav{
        width:100%;
        justify-content:
        space-between;
        gap:10px
    }

    .site-header nav>a{
        display:inline
    }

    .site-header nav a{
        font-size:13px
    }

    nav>a{
        display:none
    }

    .site-header .brand{
        font-size:19px
    }

    .dropdown{
        right:0
    }

    #todo,#coming,#contact{
        scroll-margin-top:125px
    }

    .contact-section{
        padding:65px 0
    }
}