/* ────────────────────────────────────────────────────────────────
   GLOBAL RESET & BOX-SIZING
   ──────────────────────────────────────────────────────────────── */
*,
*::before,
*::after {
    box-sizing: border-box;   /* padding + border inside width */
    margin: 0;
    padding: 0;
}

/* ────────────────────────────────────────────────────────────────
   BODY — CORE LAYOUT + DARK THEME
   ----------------------------------------------------------------
   • Flexbox centers the #app wrapper both vertically & horizontally.
   • Background switches to absolute black (#000) for dramatic contrast.
   • Text shifts to an “ivory/bone” off-white so it’s gentle on the eyes
     against pure black, yet still WCAG-AA compliant.
   • Font stack prefers Garamond (classic serif). If unavailable it falls
     back to Helvetica (clean sans) and finally the generic sans-serif.
   ──────────────────────────────────────────────────────────────── */
body{
    /* --- FLEXBOX CENTRING ------------------------------------- */
    display:flex;                  /* activate flex layout          */
    justify-content:center;        /* center horizontally           */
    align-items:center;            /* center vertically             */
    min-height:100vh;              /* fill the entire viewport      */

    /* --- COLOR SCHEME ----------------------------------------- */
    background-color:#000;         /* pure black backdrop           */
    color:#f8f8f2;                 /* soft off-white (ivory tone)   */
    /*   #f8f8f2 ≈ HSL(60, 20%, 95%) — light enough for contrast   */

    /* --- TYPOGRAPHY ------------------------------------------- */
    font-family:
        "Garamond",                /* 🌟 primary serif choice       */
        "Century Gothic",          /* ↳ first sans fallback         */
        "Helvetica Neue",          /* ↳ alt sans fallback           */
        sans-serif;                /* ↳ guarantee font render       */
    line-height:1.5;               /* comfortable reading rhythm    */
}



/* ────────────────────────────────────────────────────────────────
                     OLD BODY  →  FLEXBOX CENTRING CONTAINER
   ──────────────────────────────────────────────────────────────── */
/*body {
    display: flex;                 /* activate flex layout */
/*    justify-content: center;       /* center horizontally */
/*    align-items: center;           /* center vertically */
/*    min-height: 100vh;             /* full viewport height */
    
/*    background-color: #bdf2cb;        /* neutral backdrop */
/*    color: #000;                   /* high-contrast text */
/*    font-family: system-ui, -apple-system, BlinkMacSystemFont,
                 "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    line-height: 1.5;
}*/

/* ────────────────────────────────────────────────────────────────
   HERO IMAGE  (inside <header>)
   ──────────────────────────────────────────────────────────────── */
header {
    display: flex;             /* stack image + title vertically */
    flex-direction: column;
    align-items: center;       /* keep both centered */
    gap: 1rem;                 /* space between hero and <h1> */
}

/* Image scales with width but never exceeds max height */
/*.hero-img {
    width: 100%;               /* fills header container */
/*    max-width: 1500px;          /* mirrors #app max-width */
/*    height: auto;
    object-fit: contain;       /* preserves aspect ratio 
}*/

/* ────────────────────────────────────────────────────────────────
   FULL-WIDTH HERO  (breaks out of the 960 px #app constraint)
   ──────────────────────────────────────────────────────────────── */
.hero-img{
    /* 1️⃣  Make the image as wide as the viewport itself */
    width: 100vw;              /* ‘vw’ = % of the viewport width   */
    max-width: none;           /* ignore the parent’s 960 px limit */

    /* 2️⃣  Shift it left so it hugs the viewport edges
           (centred #app would otherwise leave it indented)        */
    display: block;            /* removes inline gaps              */
    margin-left: calc(50% - 50vw); /* full-bleed “escape hatch”    */

    /* 3️⃣  Maintain aspect ratio */
    height: auto;
    object-fit: cover;         /* crops sides if you give it a fixed
                                  height later—safe to leave in   */
}

/* styles.css */
.italic-headline{
    font-style: italic;   /* ⬅ key declaration */
}


/* Constrain max width so content doesn’t sprawl on ultrawide monitors */
#app {
    width: 100%;
    max-width: 960px;              /* tweak to taste */
    padding: 1rem;
    text-align: center;            /* center headlines & copy */
}

/* ────────────────────────────────────────────────────────────────
   IMAGE WRAPPER (stacked vertical gallery)
   ──────────────────────────────────────────────────────────────── */
.wrapper {
    display: flex;
    flex-direction: column;        /* vertical stack */
    align-items: center;
    gap: 1rem;                     /* space between images */
    margin-top: 1.5rem;
}

/* Responsive images: always contained in viewport */
.gallery-img {
    max-width: 90vw;               /* never overflow horizontally */
    max-height: 80vh;              /* never exceed 80% of viewport height */
  /*  width: auto;
    height: auto; */

    border-radius: 0.25rem;        /* subtle rounding */
    /* Optional soft shadow:
    box-shadow: 0 4px 12px rgba(0,0,0,0.1); */
}

/* ────────────────────────────────────────────────────────────────
   TYPOGRAPHY TWEAKS
   ──────────────────────────────────────────────────────────────── */
h1 {
    font-size: clamp(1.5rem, 5vw + 1rem, 3rem); /* scales with viewport */
    margin-bottom: 1rem;
}

h3 {
    font-size: 1.25rem;
    margin-top: 1rem;
}

/* Footer styling */
footer {
    margin-top: 2rem;
    font-size: 0.875rem;
    opacity: 0.75;
}