/* ==========================================================
   CURIO
   MAIN STYLESHEET
   Version 1.0
   ========================================================== */


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

*,
*::before,
*::after{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

html{
    scroll-behavior:smooth;
}

body{
    min-height:100vh;
}

img,
picture,
svg,
video{
    display:block;
    max-width:100%;
}

button,
input,
textarea,
select{
    font:inherit;
}

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

ul,
ol{
    list-style:none;
}


/* ==========================================================
   DESIGN TOKENS
   ========================================================== */

:root{

    /* ------------------------------------------------------
       COLORS
    ------------------------------------------------------ */

    --background:#F7F4ED;

    --surface:#FFFFFF;

    --text:#111111;

    --muted:#757575;

    --border:#D8D2C5;

    --accent:#A96B3C;

    --shadow:rgba(0,0,0,.05);

    /* ------------------------------------------------------
       TYPOGRAPHY
    ------------------------------------------------------ */

    --font-family:

        Inter,

        system-ui,

        -apple-system,

        BlinkMacSystemFont,

        "Segoe UI",

        sans-serif;

    --fw-regular:400;

    --fw-medium:500;

    --fw-semibold:600;

    --fw-bold:700;

    --lh-tight:1.05;

    --lh-body:1.75;

    /* ------------------------------------------------------
       FONT SIZE
    ------------------------------------------------------ */

    --fs-xs:.75rem;

    --fs-sm:.875rem;

    --fs-base:1rem;

    --fs-md:1.125rem;

    --fs-lg:1.35rem;

    --fs-xl:2rem;

    --fs-hero:clamp(4rem,10vw,8rem);

    /* ------------------------------------------------------
       SPACING
    ------------------------------------------------------ */

    --space-1:.5rem;

    --space-2:1rem;

    --space-3:1.5rem;

    --space-4:2rem;

    --space-5:3rem;

    --space-6:4rem;

    --space-7:6rem;

    --space-8:5rem;

    /* ------------------------------------------------------
       LAYOUT
    ------------------------------------------------------ */

    --container:1200px;

    --reading:760px;

    /* ------------------------------------------------------
       RADIUS
    ------------------------------------------------------ */

    --radius-sm:8px;

    --radius-md:14px;

    --radius-lg:22px;

    /* ------------------------------------------------------
       TRANSITIONS
    ------------------------------------------------------ */

    --transition-fast:.25s ease;

    --transition-normal:.45s ease;

    --transition-slow:.8s ease;

}


/* ==========================================================
   GLOBAL
   ========================================================== */

body{

    background:var(--background);

    color:var(--text);

    font-family:var(--font-family);

    font-size:var(--fs-base);

    line-height:var(--lh-body);

    text-rendering:optimizeLegibility;

    -webkit-font-smoothing:antialiased;

    overflow-x:hidden;

}


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

h1,
h2,
h3,
h4{

    line-height:var(--lh-tight);

    font-weight:var(--fw-bold);

    letter-spacing:-0.03em;

}

h1{

    font-size:var(--fs-hero);

}

h2{

    font-size:clamp(2rem,5vw,3.5rem);

}

h3{

    font-size:1.5rem;

}

p{

    max-width:65ch;

    color:var(--muted);

}

strong{

    color:var(--text);

}


/* ==========================================================
   CONTAINER
   ========================================================== */

.container{

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

    max-width:1200px;

    margin-left:auto;

    margin-right:auto;

}


/* ==========================================================
   SECTION
   ========================================================== */

section{

    padding-block:5rem;

}


/* ==========================================================
   READING WIDTH
   ========================================================== */

.reading{

    max-width:var(--reading);

}


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

.text-center{

    text-align:center;

}

.text-right{

    text-align:right;

}

.hidden{

    display:none;

}

.full-width{

    width:100%;

}

.mt-1{

    margin-top:var(--space-1);

}

.mt-2{

    margin-top:var(--space-2);

}

.mt-3{

    margin-top:var(--space-3);

}

.mt-4{

    margin-top:var(--space-4);

}

.mt-5{

    margin-top:var(--space-5);

}

.mt-6{

    margin-top:var(--space-6);

}

.mb-1{

    margin-bottom:var(--space-1);

}

.mb-2{

    margin-bottom:var(--space-2);

}

.mb-3{

    margin-bottom:var(--space-3);

}

.mb-4{

    margin-bottom:var(--space-4);

}

.mb-5{

    margin-bottom:var(--space-5);

}

.mb-6{

    margin-bottom:var(--space-6);

}


/* ==========================================================
   SELECTION
   ========================================================== */

::selection{

    background:var(--accent);

    color:white;

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

.site-header{

    position:fixed;

    inset:0 0 auto 0;

    z-index:1000;

    padding:2rem 0;

    backdrop-filter:blur(14px);

    background:rgba(247,244,237,.55);

    transition:all var(--transition-normal);

}

.site-header .container{

    display:flex;

    justify-content:space-between;

    align-items:center;

}

.logo{

    font-size:.82rem;

    letter-spacing:.38rem;

    font-weight:600;

    text-transform:uppercase;

    transition:opacity var(--transition-fast);

}

.logo:hover{

    opacity:.55;

}


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

.hero{

    min-height:auto;

    display:flex;

    align-items:center;

    position:relative;

    overflow:hidden;

    padding:6rem 0 2rem;

}

.hero-content{

    max-width:760px;

}

.hero-label{

    display:inline-block;

    margin-bottom:2rem;

    font-size:.78rem;

    letter-spacing:.35rem;

    text-transform:uppercase;

    color:var(--muted);

}

.hero-title{

    margin-bottom:.75rem;

    max-width:10ch;

}

.hero-description{

    font-size:1.18rem;

    line-height:1.8;

    margin-bottom:1.5rem;

}


/* ==========================================================
   BUTTON
========================================================== */

.button-primary{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    gap:.75rem;

    padding:1rem 2rem;

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

    color:var(--text);

    background:transparent;

    transition:

        background var(--transition-fast),

        color var(--transition-fast),

        transform var(--transition-fast),

        box-shadow var(--transition-fast);

}

.button-primary:hover{

    background:var(--text);

    color:var(--background);

    transform:translateY(-3px);

    box-shadow:

        0 18px 40px var(--shadow);

}

.button-primary:active{

    transform:translateY(0);

}


/* ==========================================================
   INTRO
========================================================== */

.intro{

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

}

.intro-grid{

    display:grid;

    grid-template-columns:220px minmax(0, 1fr);

    gap:4rem;

    align-items:start;

}

.section-number{

    font-size:.75rem;

    letter-spacing:.45rem;

    color:var(--muted);

}

.intro h2{

    max-width:14ch;

    margin-bottom:2rem;

}

.intro p{

    font-size:1.08rem;

}
.intro-section{
    padding-top:0;
    padding-bottom:3rem;
}

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

.site-footer{

    padding:5rem 0;

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

}

.site-footer p{

    font-size:.85rem;

    color:var(--muted);

}


/* ==========================================================
   SMALL MICRO ANIMATIONS
========================================================== */

.hero-label,

.hero-title,

.hero-description,

.button-primary{

    animation:fadeUp .9s ease forwards;

    opacity:0;

}

.hero-title{

    animation-delay:.15s;

}

.hero-description{

    animation-delay:.35s;

}

.button-primary{

    animation-delay:.55s;

}

@keyframes fadeUp{

    from{

        opacity:0;

        transform:translateY(32px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}


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

@media (max-width:900px){

    section{

        padding-block:5rem;

    }

    .hero{

        min-height:auto;

        padding-top:10rem;

    }

    .hero-title{

        font-size:clamp(3.4rem,15vw,5rem);

    }

    .intro-grid{

        grid-template-columns:1fr;

        gap:2rem;

    }

    .hero-description{

        font-size:1rem;

    }

}

@media (max-width:640px){

    .site-header{

        padding:1.4rem 0;

    }

    .logo{

        letter-spacing:.28rem;

    }

    .button-primary{

        width:100%;

    }

}
/* ==========================================================
   CURIO COMPONENTS
   Version 1.0
========================================================== */


/* ==========================================================
   SPECIMEN LABEL
========================================================== */

.specimen-label{

    display:flex;

    align-items:center;

    gap:1rem;

    margin-bottom:2rem;

    font-size:.82rem;

    letter-spacing:.30rem;

    text-transform:uppercase;

    color:var(--muted);

}

.specimen-label::before{

    content:"";

    width:48px;

    height:1px;

    background:var(--border);

}


/* ==========================================================
   READING BLOCK
========================================================== */

.reading-block{

    max-width:720px;

}

.reading-block p{

    margin-bottom:1.5rem;

}


/* ==========================================================
   IMAGE FRAME
========================================================== */

.image-frame{

    display:flex;

    justify-content:center;

    align-items:center;

    margin:0 auto;

    padding:0;

}
.image-frame img{

    width:100%;

    max-width:620px;

    height:auto;

    object-fit:contain;

    transition:
        transform 1.2s ease,
        filter .8s ease;

}
.image-frame:hover img{

    transform:scale(1.015);

}


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

.info-grid{

    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));

    gap:2rem;

    margin-top:1rem;
}

.info-block{

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

    padding-top:2rem;

}

.info-block h3{

    margin-bottom:1rem;

    font-size:1rem;

    letter-spacing:.25rem;

    text-transform:uppercase;

}

.info-block p{

    color:var(--muted);

}

.info-note{

    margin-top:1rem;

    font-size:.95rem;

    line-height:1.8;

    color:var(--muted);

    max-width:34ch;

}


/* ==========================================================
   RELATED SPECIMENS
========================================================== */

.related{

    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:2rem;
    align-items:stretch;

}

.related-card{

    display:flex;
    flex-direction:column;

    background:#FCFBF8;

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

    overflow:hidden;

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

}

.related-card:hover{

    transform:translateY(-8px);

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

}

.related-image{

    width:100%;

    height:240px;

    object-fit:contain;

    background:#F7F4ED;

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

    padding:1.8rem;

}

.related-card span{

    margin:1.4rem 1.5rem .5rem;

    font-size:.78rem;

    letter-spacing:.24rem;

    text-transform:uppercase;

    color:var(--muted);

}

.related-card h4{

    margin:0 1.5rem .8rem;

    font-size:1.45rem;

}

.related-card p{

    margin:0 1.5rem;

    color:var(--muted);

    flex:1;

}

.related-link{

    display:inline-block;

    margin:2rem 1.5rem 1.5rem;

    font-size:.82rem;

    letter-spacing:.18rem;

    text-transform:uppercase;

    color:var(--accent);

    transition:opacity .25s ease;

}

.related-link:hover{

    opacity:.65;

}

.related-header{

    margin-bottom:2rem;

}

/* ======================================================
   SPECIMEN HERO 2.0
====================================================== */

.specimen-hero{
    padding-top:5rem;
    padding-bottom:0rem;
}

.hero-layout{

    display:flex;

    flex-direction:column;

    align-items:center;

}

.hero-copy{

    width:100%;
    max-width:900px;

}

.hero-copy .specimen-label{

    margin-bottom:1.5rem;

}

.hero-copy .hero-title{

    margin-bottom:1.25rem;

}

.hero-copy .hero-description{
    max-width:620px;
    margin-bottom:1.5rem;
}
.hero-illustration{

    width:100%;

    display:flex;

    justify-content:center;

    align-items:center;

}

.hero-specimen-image{

    width:min(100%,520px);

    height:auto;

    display:block;

    transition:transform .5s ease;

}

.hero-specimen-image:hover{

    transform:scale(1.03);

}
/* ==========================================
DOCUMENTARY PHOTOS
========================================== */

.photo-block{
    width:100%;
    margin:0 0 3rem;
}

.photo-block img{
    display:block;
    width:100%;
    height:auto;
}

.photo-caption{

    max-width:720px;

    margin-top:1.2rem;

    margin-left:0;

    margin-right:auto;

    text-align:left;

}

.photo-caption h3{

    margin-bottom:.8rem;

    letter-spacing:.12rem;

    text-transform:uppercase;

    font-size:.9rem;

}

.photo-caption p{

    color:var(--muted);

    line-height:1.8;

}
/* ==========================================================
   SPECIMEN RESPONSIVE
========================================================== */

@media (max-width:900px){

    .hero-layout{
        gap:2rem;
    }

    .hero-copy{
        text-align:left;
    }

    .hero-specimen-image{
        width:min(90vw,420px);
    }
   }

/* ==========================================================
PHOTO STORY
========================================================== */


.photo-caption{

    margin-top:1.5rem;

    max-width:640px;

}

.photo-caption h3{

    margin-bottom:.8rem;

}
   
/* ==========================================================
FACTS + INFO
========================================================== */

/* ==========================================================
   CURIO SPECIMEN RESPONSIVE 2.0
========================================================== */

@media (max-width: 900px){

    /* HERO */

    .specimen-hero{
        padding-top:6rem;
        padding-bottom:2rem;
    }

    .hero-layout{
        display:flex;
        flex-direction:column;
        gap:2rem;
        align-items:center;
    }

    .hero-copy{
        max-width:100%;
    }

    .hero-description{
        max-width:100%;
    }

    .hero-specimen-image{
        width:min(88vw,420px);
    }

    /* INTRO */

    .intro-grid{
        grid-template-columns:1fr;
        gap:1.5rem;
    }

    .section-number{
        margin-bottom:.5rem;
    }

    /* INFORMATION */

    .info-block{
        padding-top:1.5rem;
    }

    /* PHOTOS */

    .photo-block{
        margin-bottom:3rem;
    }

    .photo-block img{
        width:100%;
        display:block;
    }

    .photo-caption{
        padding-top:1rem;
        text-align:left;
    }

    .photo-caption h3{
        font-size:1.3rem;
        margin-bottom:.5rem;
    }

    /* FACTS */

    .facts{
        display:flex;
        flex-direction:column;
        gap:2rem;
        margin-top:2rem;
    }

    .fact{
        display:block;
    }

    .fact span{
        display:block;
        margin-bottom:.5rem;
        font-weight:700;
        font-size:1.1rem;
    }

    /* DETAILS */

    .info-grid .info-block h3{
        letter-spacing:.18rem;
    }

    /* RELATED */

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

}
/* ==========================================================
MOBILE
========================================================== */

@media (max-width: 768px){

    .intro-grid{

        grid-template-columns:1fr;

        gap:2rem;

    }

    .facts-layout{

        grid-template-columns:1fr;

        gap:3rem;

    }

.continue-layout{

    display:grid;

    grid-template-columns:300px minmax(0,1fr);

    gap:4rem;

    align-items:start;

}

    .photo-story{

        width:100%;

        margin:2.5rem auto 0;

    }

    .photo-item{

        margin-bottom:3rem;

    }

    .photo-item h3{

        font-size:1.9rem;

    }

}
/* ==========================================================
PHONE FIX
========================================================== */
@media (max-width:900px){

    .intro-grid,
    .continue-layout{

        display:grid;

    }

    .intro-grid{

        grid-template-columns:1fr;

        gap:2rem;

    }

    .section-number{

        margin-bottom:2rem;

    }

    .photo-story{

        width:100%;

        margin:3rem auto;

    }

    .photo-block{

        margin-bottom:3rem;

    }

    .info-grid{

        grid-template-columns:1fr;

        gap:1.8rem;

        margin-top:2rem;

    }

}
/* ==========================================================
   FACTS
========================================================== */

#specimen-curiosity.facts {
    display:flex;
    flex-direction:column;
    gap:2.2rem;
    margin-top:2rem;
}

#specimen-curiosity.facts .fact {
    display:grid;
    grid-template-columns:40px minmax(0, 1fr);
    column-gap:1.5rem;
    align-items:start;
}

#specimen-curiosity.facts .fact span {
    display:block;
    padding-top:.15rem;
    font-size:.72rem;
    line-height:1;
    font-weight:500;
    letter-spacing:.18rem;
    color:var(--muted);
}

#specimen-curiosity.facts .fact p {
    max-width:65ch;
    margin:0;
    font-size:1.08rem;
    line-height:1.7;
    font-weight:400;
    color:var(--muted);
}