/* ============================================================
   HISTORIC OSAKA DESIGN SYSTEM
   Osaka Castle Tours
   Version 1.0
============================================================ */


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

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

html{
    scroll-behavior:smooth;
}

body{
    font-family:"Source Sans 3",sans-serif;
    font-size:18px;
    line-height:1.75;
    color:#262626;
    background:#f8f6f2;
    -webkit-font-smoothing:antialiased;
}

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

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

button{
    font:inherit;
    cursor:pointer;
}

ul{
    list-style:none;
}

/* ============================================================
   VARIABLES
============================================================ */

:root{

    --bg:#f8f6f2;
    --surface:#ffffff;

    --text:#222;
    --muted:#666;

    --gold:#9d7a3b;
    --gold-dark:#765927;

    --border:#ddd6c9;

    --shadow:
        0 10px 35px rgba(0,0,0,.08);

    --max-width:1220px;

    --section-space:7rem;

    --radius:14px;

    --transition:.30s ease;

}


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

h1,
h2,
h3,
h4{

    font-family:"Cinzel",serif;
    font-weight:600;
    line-height:1.2;
    letter-spacing:.04em;
    color:#181818;

}

h1{

    font-size:clamp(3rem,6vw,5.5rem);

}

h2{

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

    margin-bottom:1.5rem;

}

h3{

    font-size:1.6rem;

    margin-bottom:.8rem;

}

p{

    margin-bottom:1.2rem;

    color:#444;

}

.lead{

    font-size:1.25rem;

    max-width:900px;

    margin:auto;

}

.small{

    font-size:.95rem;

    color:var(--muted);

}

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

.container{

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

    margin:auto;

}

section{

    padding:var(--section-space) 0;

}

.section-title{

    text-align:center;

    margin-bottom:4rem;

}

.section-title p{

    max-width:760px;

    margin:1rem auto 0;

}

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

.hero{

    position:relative;

    width:100%;

    height:100vh;

    min-height:850px;

    overflow:hidden;

}

.hero img{

    position:absolute;

    inset:0;

    width:100%;

    height:100%;

    object-fit:cover;

}

.hero::before{

    content:"";

    position:absolute;

    inset:0;

    background:
        linear-gradient(
            rgba(0,0,0,.45),
            rgba(0,0,0,.35),
            rgba(0,0,0,.60)
        );

    z-index:1;

}

.hero-content{

    position:relative;

    z-index:2;

    height:100%;

    display:flex;

    flex-direction:column;

    justify-content:center;

    align-items:center;

    text-align:center;

    color:white;

    width:min(1100px,90%);

    margin:auto;

}

.hero h1{

    color:#fff;

    text-shadow:
        0 3px 18px rgba(0,0,0,.70),
        0 0 45px rgba(0,0,0,.45);

}

.hero-subtitle{

    font-size:1.45rem;

    max-width:900px;

    margin:1.5rem auto;

    color:white;

}

.hero-keywords{

    font-size:.95rem;

    letter-spacing:.18em;

    text-transform:uppercase;

    color:#d8c28a;

    margin-top:2rem;

    text-shadow:0 2px 10px rgba(0,0,0,.6);

}

/* ============================================================
   INTRODUCTION
============================================================ */

.intro{

    background:white;

}

.intro-grid{

    display:grid;

    grid-template-columns:

        1.3fr

        .7fr;

    gap:4rem;

    align-items:center;

}

.intro-copy h2{

    margin-bottom:2rem;

}

.intro-copy p{

    font-size:1.08rem;

}

.intro-panel{

    background:#faf7f1;

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

    padding:2rem;

    border-radius:var(--radius);

    box-shadow:var(--shadow);

}

.intro-panel h3{

    font-size:1.2rem;

    margin-bottom:1rem;

}

.intro-panel p:last-child{

    margin-bottom:0;

}

/* ============================================================
   STICKY NAVIGATION
============================================================ */

.page-nav{

    position:sticky;

    top:0;

    z-index:200;

    background:white;

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

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

    box-shadow:0 2px 12px rgba(0,0,0,.05);

}

.page-nav ul{

    display:flex;

    justify-content:center;

    flex-wrap:wrap;

}

.page-nav li{

    margin:0;

}

.page-nav a{

    display:block;

    padding:1.1rem 1.5rem;

    font-size:.95rem;

    letter-spacing:.06em;

    text-transform:uppercase;

    transition:var(--transition);

}

.page-nav a:hover{

    color:var(--gold);

}

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

.era-header{

    border-bottom:2px solid var(--gold);

    margin-bottom:4rem;

    padding-bottom:1rem;

}

.era-intro{

    max-width:900px;

    font-size:1.1rem;

}

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

.destination-grid {
    display: grid;
    /* This forces exactly 2 columns */
    grid-template-columns: repeat(2, 1fr);
    gap: 2.75rem;
    margin-top: 3rem;
}


/* ============================================================
   DESTINATION CARD
============================================================ */

.destination-card{

    display:flex;

    flex-direction:column;

    background:var(--surface);

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

    border-radius:var(--radius);

    overflow:hidden;

    box-shadow:var(--shadow);

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

}

.destination-card:hover{

    transform:translateY(-8px);

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

}

.destination-image{

    position:relative;

    overflow:hidden;

    aspect-ratio:16 / 9;

    background:#ddd;

}

.destination-image img{

    width:100%;

    height:100%;

    object-fit:cover;

    transition:transform .7s ease;

}

.destination-card:hover
.destination-image img{

    transform:scale(1.05);

}

.destination-body{

    padding:2rem;

}

.destination-period{

    display:inline-block;

    font-size:.78rem;

    letter-spacing:.12em;

    text-transform:uppercase;

    color:var(--gold);

    margin-bottom:1rem;

}

.destination-body h3{

    margin-bottom:.8rem;

}

.destination-summary{

    margin-bottom:2rem;

}


/* ============================================================
   HIGHLIGHT PANEL
============================================================ */

.highlight-panel{

    border-left:3px solid var(--gold);

    padding-left:1.2rem;

    margin:2rem 0;

}

.highlight-panel h4{

    font-size:1rem;

    text-transform:uppercase;

    letter-spacing:.08em;

    margin-bottom:.75rem;

}

.highlight-panel p{

    margin-bottom:0;

}


/* ============================================================
   VISITOR INFORMATION
============================================================ */

.visitor-info{

    margin-top:2rem;

    padding:1.4rem;

    background:#faf8f3;

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

    border-radius:10px;

}

.visitor-info h4{

    margin-bottom:1rem;

    font-size:1rem;

    letter-spacing:.08em;

    text-transform:uppercase;

}

.visitor-table{

    display:grid;

    grid-template-columns:160px 1fr;

    gap:.7rem 1rem;

}

.visitor-table dt{

    font-weight:600;

    color:#222;

}

.visitor-table dd{

    color:#555;

}


/* ============================================================
   EDWARD'S INSIGHT
============================================================ */

.insight-box{

    margin-top:2rem;

    padding:1.8rem;

    border-top:3px solid var(--gold);

    background:#fcfbf8;

}

.insight-box h4{

    margin-bottom:.8rem;

    font-size:1rem;

    letter-spacing:.08em;

    text-transform:uppercase;

}

.insight-box p:last-child{

    margin-bottom:0;

}

/* ============================================================
   GUEST QUOTE
============================================================ */

.guest-quote{

    margin:2rem 0 3rem;

    padding:1.5rem;

    background:#faf7f1;

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

    border-radius:8px;

    font-style:italic;

    line-height:1.8;

    color:#444;

}

.guest-quote cite{

    display:block;

    margin-top:1rem;

    font-style:normal;

    font-weight:600;

    color:var(--gold-dark);

}

/* ============================================================
   CTA PANEL
============================================================ */

.cta-panel{

    margin-top:2rem;

    padding-top:2rem;

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

}

.cta-panel h4{

    margin-bottom:1rem;

}

.cta-buttons{

    display:flex;

    flex-wrap:wrap;

    gap:.9rem;

}

.btn{

    display:inline-block;

    padding:.95rem 1.7rem;

    border-radius:999px;

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

    transition:all .3s ease;

}

.btn-primary{

    background:var(--gold);

    color:white;

}

.btn-primary:hover{

    background:var(--gold-dark);

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

}

.btn-secondary{

    background:white;

    color:var(--gold-dark);

}

.btn-secondary:hover{

    background:#f3efe7;

}


/* ============================================================
   CONTINUE THE STORY
============================================================ */

.story-panel{

    margin:5rem auto;

    padding:3rem;

    background:#f7f4ed;

    border-radius:var(--radius);

    border-left:5px solid var(--gold);

}

.story-panel h3{

    margin-bottom:1rem;

}

.story-panel p{

    max-width:900px;

}

.story-links{

    display:flex;

    flex-wrap:wrap;

    gap:1rem;

    margin-top:2rem;

}


/* ============================================================
   BATTLEFIELD TRAIL
============================================================ */

.trail-intro{

    max-width:900px;

    margin-bottom:4rem;

}

.marker-grid{

    display:grid;

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

    gap:2rem;

}

.marker-card{

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

    background:white;

    border-radius:var(--radius);

    padding:2rem;

    transition:all .3s ease;

}

.marker-card:hover{

    transform:translateY(-6px);

    box-shadow:var(--shadow);

}

.marker-number{

    font-family:"Cinzel",serif;

    font-size:2rem;

    color:var(--gold);

    margin-bottom:1rem;

}

.marker-details{

    margin:1.5rem 0;

}

.marker-details dl{

    display:grid;

    grid-template-columns:140px 1fr;

    gap:.5rem 1rem;

}

.marker-details dt{

    font-weight:600;

}

.marker-details dd{

    color:#555;

}

.progress-track{

    display:flex;

    justify-content:space-between;

    gap:1rem;

    margin:4rem 0;

}

.progress-track div{

    flex:1;

    height:4px;

    background:var(--border);

}


/* ============================================================
   FAQ
============================================================ */

.faq{

    max-width:900px;

    margin:auto;

}

.faq details{

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

    padding:1.5rem 0;

}

.faq summary{

    cursor:pointer;

    font-weight:600;

    font-size:1.1rem;

    list-style:none;

}

.faq summary::-webkit-details-marker{

    display:none;

}

.faq details p{

    margin-top:1rem;

}


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

.final-cta{

    text-align:center;

    background:#1f1f1f;

    color:white;

    padding:6rem 2rem;

}

.final-cta h2{

    color:white;

}

.final-cta p{

    color:#ddd;

    max-width:750px;

    margin:1.5rem auto 2.5rem;

}

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

.section-banner{

    margin-bottom:5rem;

}

.section-banner img{

    width:100%;

    aspect-ratio:21 / 9;

    object-fit:cover;

    border-radius:var(--radius);

    box-shadow:var(--shadow);

    margin-bottom:2.5rem;

}

.section-banner-content{

    max-width:900px;

    margin:0 auto;

}

.section-banner-content h2{

    margin-top:0;

    margin-bottom:1.5rem;

}

.section-banner-content p{

    font-size:1.1rem;

    margin-bottom:0;

}

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

@media (max-width:900px){

    .intro-grid{

        grid-template-columns:1fr;

        gap:3rem;

    }

    .visitor-table{

        grid-template-columns:1fr;

    }

    .marker-details dl{

        grid-template-columns:1fr;

    }

}

@media (max-width:768px){

    body{

        font-size:17px;

    }

    .hero{

        height:65vh;

        min-height:520px;

    }

    .hero-subtitle{

        font-size:1.15rem;

    }

    .destination-grid{

        grid-template-columns:1fr;

    }

    .marker-grid{

        grid-template-columns:1fr;

    }

    .story-panel{

        padding:2rem;

    }

    section{

        padding:5rem 0;

    }

    .page-nav ul{

        justify-content:flex-start;

        overflow-x:auto;

        flex-wrap:nowrap;

    }

    .page-nav a{

        white-space:nowrap;

    }

}