/* ============================================================
   SUPERMAN WEBSITE - style.css
   Gustavo Henrique de Mello Voltolini - Assessment 1.1.7
   ------------------------------------------------------------
   Layout method : CSS Grid only (12 column planning module)
   NOT used      : flexbox, frameworks, libraries, JavaScript,
                   CSS custom properties (variables), rem units
   Units used    : px, %, vh
   Breakpoints   : 1920 / 1440 / 1280 / 1024 / 768 / 600 / 480
                   (see section 10 at the end of this file)
   ============================================================ */

/* ---------- 1. RESET / BASE ---------- */

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

html {
    scroll-behavior: smooth;
}

body {
    background-color: #EEF1F7;
    background-image: linear-gradient(180deg, #0A1B3D 0px, #0A1B3D 340px, #EEF1F7 340px);
    color: #1B2440;
    font-family: "Segoe UI", Tahoma, Geneva, Verdana, Arial, sans-serif;
    font-size: 17px;
    line-height: 1.65;
    -webkit-font-smoothing: antialiased;
}

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

a {
    color: #0B3C8C;
}

h1, h2, h3, h4 {
    font-family: "Trebuchet MS", "Segoe UI", Arial, sans-serif;
    line-height: 1.15;
    letter-spacing: 0.5px;
    color: #0A1B3D;
}

h1 {
    font-size: 60px;
    text-transform: uppercase;
    letter-spacing: 2px;
}

h2 {
    font-size: 30px;
    text-transform: uppercase;
}

h3 {
    font-size: 21px;
}

p {
    margin-bottom: 16px;
}

p:last-child {
    margin-bottom: 0;
}

/* ---------- 2. THE 12 COLUMN PLANNING GRID ---------- */
/* Every page is one grid container. Each landmark is placed
   with an explicit grid-area value (row-start / column-start /
   row-end / column-end) exactly as documented.                */

.page {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    grid-gap: 28px;
    width: 100%;
    max-width: 1560px;
    margin: 0 auto;
    padding: 26px 26px 60px 26px;
}

/* ---------- 3. HEADER AND NAVIGATION ---------- */
/* grid-area on every page: 1 / 1 / 2 / 13 (full 12 columns) */

.site-header {
    grid-area: 1 / 1 / 2 / 13;
    display: grid;
    grid-template-columns: 320px 1fr;
    align-items: center;
    background-color: #C8102E;
    background-image: linear-gradient(115deg, #9A0C22 0%, #C8102E 55%, #E01B3C 100%);
    border-bottom: 6px solid #F5C400;
    border-radius: 14px;
    padding: 14px 26px;
    box-shadow: 0 14px 34px rgba(6, 21, 48, 0.35);
}

.brand {
    display: grid;
    grid-template-columns: 62px 1fr;
    grid-gap: 14px;
    align-items: center;
    text-decoration: none;
}

.brand img {
    width: 62px;
    filter: drop-shadow(0 3px 5px rgba(0, 0, 0, 0.45));
}

.brand-name {
    color: #FFFFFF;
    font-family: "Trebuchet MS", Arial, sans-serif;
    font-size: 27px;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 3px;
    line-height: 1.05;
}

.brand-tag {
    display: block;
    color: #F5C400;
    font-size: 12px;
    font-weight: normal;
    letter-spacing: 2px;
}

.site-nav ul {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: max-content;
    grid-gap: 10px;
    justify-content: end;
    list-style: none;
}

.site-nav a {
    display: block;
    color: #FFFFFF;
    font-size: 15px;
    font-weight: bold;
    letter-spacing: 1px;
    text-transform: uppercase;
    text-decoration: none;
    padding: 10px 16px;
    border-radius: 8px;
    border: 2px solid rgba(255, 255, 255, 0.25);
    transition: background-color 0.2s, color 0.2s, border-color 0.2s;
}

.site-nav a:hover,
.site-nav a:focus {
    background-color: #F5C400;
    border-color: #F5C400;
    color: #0A1B3D;
}

.site-nav a.current {
    background-color: #0A1B3D;
    border-color: #0A1B3D;
    color: #F5C400;
}

/* ---------- 4. SHARED SECTION SHELL ---------- */

.panel {
    background-color: #FFFFFF;
    border-radius: 14px;
    padding: 34px;
    box-shadow: 0 10px 26px rgba(10, 27, 61, 0.10);
}

.panel h2 {
    color: #0B3C8C;
    border-left: 8px solid #C8102E;
    padding-left: 14px;
    margin-bottom: 18px;
}

.kicker {
    display: block;
    color: #C8102E;
    font-size: 13px;
    font-weight: bold;
    letter-spacing: 4px;
    text-transform: uppercase;
    margin-bottom: 10px;
}

.button {
    display: inline-block;
    background-color: #C8102E;
    color: #FFFFFF;
    font-size: 15px;
    font-weight: bold;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    text-decoration: none;
    padding: 14px 26px;
    border-radius: 8px;
    border-bottom: 4px solid #7C0A1B;
    transition: background-color 0.2s, transform 0.2s;
}

.button:hover,
.button:focus {
    background-color: #0B3C8C;
    border-bottom-color: #06255A;
    transform: translateY(-2px);
}

.button-alt {
    background-color: #F5C400;
    color: #0A1B3D;
    border-bottom-color: #A98700;
}

.button-alt:hover,
.button-alt:focus {
    background-color: #FFFFFF;
    color: #C8102E;
    border-bottom-color: #B9BFCC;
}

.caption {
    display: block;
    font-size: 13px;
    line-height: 1.5;
    color: #5A6480;
    padding-top: 8px;
}

/* ---------- 5. INDEX PAGE ---------- */
/* HERO      2 / 1 / 3 / 13
   OVERVIEW  3 / 1 / 4 / 13
   FEATURE 1 4 / 1 / 5 / 5
   FEATURE 2 4 / 5 / 5 / 9
   FEATURE 3 4 / 9 / 5 / 13
   FOOTER    5 / 1 / 6 / 13                                  */

.page-index .hero        { grid-area: 2 / 1 / 3 / 13; }
.page-index .overview    { grid-area: 3 / 1 / 4 / 13; }
.page-index .feature-one { grid-area: 4 / 1 / 5 / 5; }
.page-index .feature-two { grid-area: 4 / 5 / 5 / 9; }
.page-index .feature-three { grid-area: 4 / 9 / 5 / 13; }
.page-index .site-footer { grid-area: 5 / 1 / 6 / 13; }

.hero {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-gap: 0;
    background-color: #0A1B3D;
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 18px 40px rgba(10, 27, 61, 0.38);
}

.hero-copy {
    padding: 52px 44px;
    align-self: center;
}

.hero-copy h1 {
    color: #FFFFFF;
    margin-bottom: 18px;
}

.hero-copy h1 span {
    display: block;
    color: #F5C400;
    font-size: 24px;
    letter-spacing: 6px;
    margin-bottom: 8px;
}

.hero-copy p {
    color: #CBD5E9;
    font-size: 18px;
}

.hero-actions {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: max-content;
    grid-gap: 14px;
    padding-top: 26px;
}

.hero-media {
    position: relative;
    min-height: 420px;
    background-color: #0B3C8C;
}

.hero-media img {
    width: 100%;
    height: 100%;
    min-height: 420px;
    object-fit: cover;
    object-position: center 35%;
}

.hero-media .photo-credit {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    background-color: rgba(10, 27, 61, 0.78);
    color: #DCE3F2;
    font-size: 12px;
    letter-spacing: 0.5px;
    padding: 8px 14px;
}

/* Overview block with three statistic tiles */

.overview {
    display: grid;
    grid-template-columns: 1.6fr 1fr;
    grid-gap: 34px;
}

.stat-list {
    display: grid;
    grid-template-rows: repeat(3, max-content);
    grid-gap: 14px;
    align-content: start;
    list-style: none;
}

.stat-list li {
    background-color: #F3F6FC;
    border-left: 6px solid #F5C400;
    border-radius: 8px;
    padding: 14px 18px;
}

.stat-list strong {
    display: block;
    color: #C8102E;
    font-family: "Trebuchet MS", Arial, sans-serif;
    font-size: 26px;
    letter-spacing: 1px;
}

.stat-list span {
    font-size: 14px;
    color: #4A5578;
}

/* Feature cards */

.feature {
    display: grid;
    grid-template-rows: 190px 1fr;
    background-color: #FFFFFF;
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 10px 26px rgba(10, 27, 61, 0.12);
    border-top: 6px solid #0B3C8C;
    transition: transform 0.2s, box-shadow 0.2s;
}

.feature:hover {
    transform: translateY(-5px);
    box-shadow: 0 18px 34px rgba(10, 27, 61, 0.22);
}

.feature img {
    width: 100%;
    height: 190px;
    object-fit: cover;
}

.feature-body {
    display: grid;
    grid-template-rows: max-content max-content 1fr max-content;
    grid-gap: 10px;
    padding: 24px;
}

.feature-body h3 {
    color: #C8102E;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.feature-body p {
    font-size: 16px;
    color: #333C5C;
}

.feature-body a {
    justify-self: start;
    align-self: end;
}

/* ---------- 6. LORE AND BIOGRAPHY PAGE ---------- */
/* INTRO       2 / 1 / 3 / 13
   BIOGRAPHY   3 / 1 / 4 / 9
   FACT PANEL  3 / 9 / 4 / 13
   FOOTER      4 / 1 / 5 / 13                                */

.page-lore .intro       { grid-area: 2 / 1 / 3 / 13; }
.page-lore .biography   { grid-area: 3 / 1 / 4 / 9; }
.page-lore .fact-panel  { grid-area: 3 / 9 / 4 / 13; }
.page-lore .site-footer { grid-area: 4 / 1 / 5 / 13; }

.intro {
    display: grid;
    grid-template-columns: 1.35fr 1fr;
    grid-gap: 0;
    background-color: #0B3C8C;
    background-image: linear-gradient(120deg, #06255A 0%, #0B3C8C 60%, #1560D0 100%);
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 16px 36px rgba(10, 27, 61, 0.32);
}

.intro-copy {
    padding: 46px 40px;
    align-self: center;
}

.intro-copy h1 {
    color: #FFFFFF;
    font-size: 44px;
    margin-bottom: 16px;
}

.intro-copy .kicker {
    color: #F5C400;
}

.intro-copy p {
    color: #D5DEF2;
}

.intro-media img {
    width: 100%;
    height: 100%;
    min-height: 340px;
    object-fit: cover;
    object-position: center 25%;
}

.biography h3 {
    color: #0B3C8C;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin: 30px 0 10px 0;
    padding-bottom: 8px;
    border-bottom: 2px solid #E3E8F3;
}

.biography h3:first-of-type {
    margin-top: 8px;
}

.bio-figure {
    display: grid;
    grid-template-columns: 250px 1fr;
    grid-gap: 22px;
    align-items: start;
    background-color: #F3F6FC;
    border-radius: 10px;
    padding: 18px;
    margin: 22px 0;
}

.bio-figure img {
    border-radius: 6px;
}

.bio-figure figcaption {
    font-size: 15px;
    color: #3B4566;
}

.bio-figure figcaption strong {
    display: block;
    color: #C8102E;
    text-transform: uppercase;
    font-size: 13px;
    letter-spacing: 2px;
    margin-bottom: 6px;
}

.pull-quote {
    background-color: #0A1B3D;
    color: #FFFFFF;
    border-left: 8px solid #F5C400;
    border-radius: 10px;
    font-size: 19px;
    font-style: italic;
    padding: 22px 26px;
    margin: 26px 0;
}

.pull-quote cite {
    display: block;
    color: #F5C400;
    font-size: 14px;
    font-style: normal;
    letter-spacing: 2px;
    text-transform: uppercase;
    padding-top: 10px;
}

/* Fact panel (aside) */

.fact-panel {
    background-color: #0A1B3D;
    border-radius: 14px;
    padding: 30px;
    align-self: start;
    box-shadow: 0 12px 30px rgba(10, 27, 61, 0.30);
}

.fact-panel h2 {
    color: #F5C400;
    font-size: 22px;
    border-left: 8px solid #C8102E;
    padding-left: 12px;
    margin-bottom: 20px;
}

.fact-panel img {
    border-radius: 8px;
    margin-bottom: 18px;
}

.fact-list {
    display: grid;
    grid-template-columns: 1fr;
    grid-gap: 0;
}

.fact-list dt {
    color: #F5C400;
    font-size: 12px;
    font-weight: bold;
    letter-spacing: 2px;
    text-transform: uppercase;
    padding-top: 14px;
}

.fact-list dd {
    color: #DCE3F2;
    font-size: 15px;
    line-height: 1.5;
    padding: 2px 0 12px 0;
    border-bottom: 1px solid #1D2F58;
}

/* ---------- 7. COMIC AGES PAGE ---------- */
/* INTRO         2 / 1 / 3 / 13
   GOLDEN        3 / 1 / 4 / 4
   SILVER/BRONZE 3 / 4 / 4 / 7
   MODERN        3 / 7 / 4 / 10
   CONTEMPORARY  3 / 10 / 4 / 13
   TIMELINE      4 / 1 / 5 / 13
   FOOTER        5 / 1 / 6 / 13                              */

.page-ages .intro        { grid-area: 2 / 1 / 3 / 13; }
.page-ages .era-golden   { grid-area: 3 / 1 / 4 / 4; }
.page-ages .era-silver   { grid-area: 3 / 4 / 4 / 7; }
.page-ages .era-modern   { grid-area: 3 / 7 / 4 / 10; }
.page-ages .era-today    { grid-area: 3 / 10 / 4 / 13; }
.page-ages .timeline     { grid-area: 4 / 1 / 5 / 13; }
.page-ages .site-footer  { grid-area: 5 / 1 / 6 / 13; }

.era {
    display: grid;
    grid-template-rows: 170px max-content 1fr;
    background-color: #FFFFFF;
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 10px 26px rgba(10, 27, 61, 0.12);
    border-top: 6px solid #C8102E;
}

.era-silver { border-top-color: #8A93A8; }
.era-modern { border-top-color: #0B3C8C; }
.era-today  { border-top-color: #F5C400; }

.era img {
    width: 100%;
    height: 170px;
    object-fit: cover;
    background-color: #E7EBF4;
}

.era-head {
    background-color: #0A1B3D;
    padding: 16px 22px;
}

.era-head h2 {
    color: #FFFFFF;
    font-size: 20px;
    letter-spacing: 1px;
}

.era-head span {
    display: block;
    color: #F5C400;
    font-size: 13px;
    font-weight: bold;
    letter-spacing: 3px;
}

.era-body {
    padding: 22px;
    font-size: 16px;
    color: #333C5C;
}

.era-body ul {
    list-style: none;
    padding-top: 6px;
}

.era-body li {
    padding: 7px 0 7px 20px;
    border-top: 1px solid #E9EDF6;
    background-image: radial-gradient(circle, #C8102E 3px, rgba(255, 255, 255, 0) 4px);
    background-position: 0px 15px;
    background-repeat: no-repeat;
    font-size: 15px;
}

/* Timeline */

.timeline ol {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-gap: 18px;
    list-style: none;
    padding-top: 8px;
}

.timeline li {
    display: grid;
    grid-template-rows: max-content max-content;
    grid-gap: 6px;
    background-color: #F3F6FC;
    border-top: 4px solid #0B3C8C;
    border-radius: 8px;
    padding: 16px 18px;
}

.timeline .year {
    color: #C8102E;
    font-family: "Trebuchet MS", Arial, sans-serif;
    font-size: 24px;
    font-weight: bold;
    letter-spacing: 1px;
}

.timeline p {
    font-size: 15px;
    color: #333C5C;
}

/* Logo strip used inside the Comic Ages intro */

.logo-strip {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-gap: 16px;
    background-color: rgba(255, 255, 255, 0.10);
    border-radius: 10px;
    padding: 16px;
    margin-top: 22px;
}

.logo-strip figure {
    display: grid;
    grid-template-rows: 70px max-content;
    grid-gap: 8px;
    align-items: center;
    justify-items: center;
    text-align: center;
}

.logo-strip img {
    max-height: 70px;
    width: auto;
}

.logo-strip figcaption {
    color: #F5C400;
    font-size: 12px;
    font-weight: bold;
    letter-spacing: 2px;
}

/* ---------- 8. MOVIES AND ANIMATIONS PAGE ---------- */
/* BANNER      2 / 1 / 3 / 13
   LIVE ACTION 3 / 1 / 4 / 8
   ANIMATION   3 / 8 / 4 / 13
   FOOTER      4 / 1 / 5 / 13                                */

.page-movies .banner      { grid-area: 2 / 1 / 3 / 13; }
.page-movies .live-action { grid-area: 3 / 1 / 4 / 8; }
.page-movies .animation   { grid-area: 3 / 8 / 4 / 13; }
.page-movies .site-footer { grid-area: 4 / 1 / 5 / 13; }

.banner {
    display: grid;
    grid-template-columns: 1fr 1.1fr;
    background-color: #0A1B3D;
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 16px 36px rgba(10, 27, 61, 0.34);
}

.banner-copy {
    padding: 46px 40px;
    align-self: center;
}

.banner-copy h1 {
    color: #FFFFFF;
    font-size: 42px;
    margin-bottom: 16px;
}

.banner-copy p {
    color: #CBD5E9;
}

.banner-media img {
    width: 100%;
    height: 100%;
    min-height: 330px;
    object-fit: cover;
}

/* Media entry rows */

.entry {
    display: grid;
    grid-template-columns: 150px 1fr;
    grid-gap: 22px;
    align-items: start;
    border-top: 2px solid #E9EDF6;
    padding: 22px 0;
}

.entry:first-of-type {
    border-top: 0;
    padding-top: 6px;
}

.entry img {
    border-radius: 8px;
    width: 150px;
}

.entry-head {
    display: grid;
    grid-template-columns: max-content 1fr;
    grid-gap: 12px;
    align-items: center;
    margin-bottom: 8px;
}

.year-tag {
    background-color: #0B3C8C;
    color: #FFFFFF;
    font-size: 14px;
    font-weight: bold;
    letter-spacing: 1px;
    padding: 4px 12px;
    border-radius: 20px;
}

.year-tag-red { background-color: #C8102E; }
.year-tag-gold { background-color: #F5C400; color: #0A1B3D; }

.entry h3 {
    color: #0A1B3D;
    font-size: 19px;
}

.entry p {
    font-size: 16px;
    color: #333C5C;
}

.format-note {
    display: block;
    color: #5A6480;
    font-size: 13px;
    letter-spacing: 1px;
    text-transform: uppercase;
    padding-top: 6px;
}

.animation .entry {
    grid-template-columns: 120px 1fr;
}

.animation .entry img {
    width: 120px;
}

/* ---------- 9. FOOTER ---------- */

.site-footer {
    display: grid;
    grid-template-columns: 1.4fr 1fr 1.2fr;
    grid-gap: 34px;
    background-color: #0A1B3D;
    border-top: 6px solid #C8102E;
    border-radius: 14px;
    padding: 34px;
    color: #C3CDE4;
    font-size: 15px;
}

.site-footer h2 {
    color: #F5C400;
    font-size: 17px;
    letter-spacing: 2px;
    margin-bottom: 14px;
}

.site-footer ul {
    list-style: none;
}

.site-footer li {
    padding: 5px 0;
}

.site-footer a {
    color: #FFFFFF;
    text-decoration: none;
    border-bottom: 1px solid #C8102E;
}

.site-footer a:hover,
.site-footer a:focus {
    color: #F5C400;
    border-bottom-color: #F5C400;
}

.site-footer small {
    display: block;
    color: #8894B4;
    font-size: 13px;
    line-height: 1.6;
    padding-top: 14px;
}

/* ============================================================
   10. RESPONSIVE BEHAVIOUR - SEVEN DEVICE BREAKPOINTS
   ------------------------------------------------------------
   The rules are written largest first, so the declarations
   outside any query describe the widest case and each query
   below overrides only what has to change for that device.

   Device                          Width range     Breakpoint
   ----------------------------------------------------------
   Large desktops / wide monitors  1441 - 1920px      1920px
   Desktops                        1281 - 1440px      1440px
   Laptops / small desktops        1025 - 1280px      1280px
   Tablets / iPad portrait          769 - 1024px      1024px
   Small tablets                    601 -  768px       768px
   Large phones / phablets          481 -  600px       600px
   Small phones                     320 -  480px       480px

   Anything wider than 1920px keeps the base declarations.
   Track count by step: 12 tracks down to 1024px, 6 tracks
   from 768px, and a single track from 600px.
   ============================================================ */


/* ---------- 10.1  LARGE DESKTOPS / WIDE MONITORS - 1920px ----
   1441 - 1920px. The canvas stops growing so the reading
   measure stays sensible, and the hero keeps its full height. */

@media screen and (max-width: 1920px) {

    h1 { font-size: 54px; }

    .page {
        max-width: 1440px;
        grid-gap: 28px;
    }

    .hero-media,
    .hero-media img { min-height: 460px; }
}


/* ---------- 10.2  DESKTOPS - 1440px --------------------------
   1281 - 1440px. Standard desktop layout: twelve tracks, three
   feature cards across, four era panels across.               */

@media screen and (max-width: 1440px) {

    h1 { font-size: 48px; }
    h2 { font-size: 28px; }

    .page { max-width: 1280px; }

    .hero-copy { padding: 46px 38px; }

    .intro-copy,
    .banner-copy { padding: 42px 34px; }

    .hero-media,
    .hero-media img { min-height: 420px; }
}


/* ---------- 10.3  LAPTOPS / SMALL DESKTOPS - 1280px ----------
   1025 - 1280px. Gutters and media boxes tighten so the same
   twelve track layout fits without cramping the text.         */

@media screen and (max-width: 1280px) {

    h1 { font-size: 42px; }

    .page {
        max-width: 1120px;
        grid-gap: 24px;
        padding: 22px 22px 50px 22px;
    }

    .hero-copy { padding: 40px 30px; }

    .hero-media,
    .hero-media img { min-height: 380px; }

    .intro-media img,
    .banner-media img { min-height: 300px; }

    .panel,
    .fact-panel { padding: 28px; }

    .feature { grid-template-rows: 170px 1fr; }
    .feature img { height: 170px; }

    .era { grid-template-rows: 150px max-content 1fr; }
    .era img { height: 150px; }

    .bio-figure { grid-template-columns: 210px 1fr; }

    .entry { grid-template-columns: 130px 1fr; }
    .entry img { width: 130px; }

    .animation .entry { grid-template-columns: 110px 1fr; }
    .animation .entry img { width: 110px; }
}


/* ---------- 10.4  TABLETS / IPAD PORTRAIT - 1024px -----------
   769 - 1024px. Still twelve tracks, but every two column
   block becomes one column: the hero, the page intros and the
   overview stack, the biography drops its side panel below it,
   the era panels become a two by two block, and the two media
   lists on the adaptations page sit one above the other.      */

@media screen and (max-width: 1024px) {

    h1 { font-size: 38px; }
    h2 { font-size: 26px; }

    .page {
        max-width: 100%;
        grid-gap: 20px;
        padding: 20px 20px 44px 20px;
    }

    .site-header { grid-template-columns: 250px 1fr; }

    .site-nav a { font-size: 13px; padding: 8px 11px; }

    .brand { grid-template-columns: 52px 1fr; }
    .brand img { width: 52px; }
    .brand-name { font-size: 23px; }

    .hero,
    .intro,
    .banner,
    .overview { grid-template-columns: 1fr; }

    .hero-media,
    .hero-media img,
    .intro-media img,
    .banner-media img { min-height: 320px; }

    .hero-copy,
    .intro-copy,
    .banner-copy { padding: 34px 28px; }

    .page-lore .biography   { grid-area: 3 / 1 / 4 / 13; }
    .page-lore .fact-panel  { grid-area: 4 / 1 / 5 / 13; }
    .page-lore .site-footer { grid-area: 5 / 1 / 6 / 13; }

    .page-ages .era-golden  { grid-area: 3 / 1 / 4 / 7; }
    .page-ages .era-silver  { grid-area: 3 / 7 / 4 / 13; }
    .page-ages .era-modern  { grid-area: 4 / 1 / 5 / 7; }
    .page-ages .era-today   { grid-area: 4 / 7 / 5 / 13; }
    .page-ages .timeline    { grid-area: 5 / 1 / 6 / 13; }
    .page-ages .site-footer { grid-area: 6 / 1 / 7 / 13; }

    .page-movies .live-action { grid-area: 3 / 1 / 4 / 13; }
    .page-movies .animation   { grid-area: 4 / 1 / 5 / 13; }
    .page-movies .site-footer { grid-area: 5 / 1 / 6 / 13; }

    .timeline ol { grid-template-columns: repeat(2, 1fr); }
}


/* ---------- 10.5  SMALL TABLETS - 768px ----------------------
   601 - 768px. The planning grid folds from twelve tracks to
   six. The navigation drops under the branding, the feature
   cards run two across with the third full width, and the
   footer becomes two columns.                                 */

@media screen and (max-width: 768px) {

    h1 { font-size: 34px; }

    .page {
        grid-template-columns: repeat(6, 1fr);
        grid-gap: 18px;
    }

    .site-header {
        grid-area: 1 / 1 / 2 / 7;
        grid-template-columns: 1fr;
        grid-gap: 14px;
        justify-items: center;
    }

    .site-nav ul {
        grid-auto-flow: row;
        grid-template-columns: repeat(2, 1fr);
        grid-auto-columns: auto;
        justify-content: stretch;
        width: 100%;
    }

    .site-nav a { text-align: center; }

    .page-index .hero          { grid-area: 2 / 1 / 3 / 7; }
    .page-index .overview      { grid-area: 3 / 1 / 4 / 7; }
    .page-index .feature-one   { grid-area: 4 / 1 / 5 / 4; }
    .page-index .feature-two   { grid-area: 4 / 4 / 5 / 7; }
    .page-index .feature-three { grid-area: 5 / 1 / 6 / 7; }
    .page-index .site-footer   { grid-area: 6 / 1 / 7 / 7; }

    .page-lore .intro       { grid-area: 2 / 1 / 3 / 7; }
    .page-lore .biography   { grid-area: 3 / 1 / 4 / 7; }
    .page-lore .fact-panel  { grid-area: 4 / 1 / 5 / 7; }
    .page-lore .site-footer { grid-area: 5 / 1 / 6 / 7; }

    .page-ages .intro       { grid-area: 2 / 1 / 3 / 7; }
    .page-ages .era-golden  { grid-area: 3 / 1 / 4 / 4; }
    .page-ages .era-silver  { grid-area: 3 / 4 / 4 / 7; }
    .page-ages .era-modern  { grid-area: 4 / 1 / 5 / 4; }
    .page-ages .era-today   { grid-area: 4 / 4 / 5 / 7; }
    .page-ages .timeline    { grid-area: 5 / 1 / 6 / 7; }
    .page-ages .site-footer { grid-area: 6 / 1 / 7 / 7; }

    .page-movies .banner      { grid-area: 2 / 1 / 3 / 7; }
    .page-movies .live-action { grid-area: 3 / 1 / 4 / 7; }
    .page-movies .animation   { grid-area: 4 / 1 / 5 / 7; }
    .page-movies .site-footer { grid-area: 5 / 1 / 6 / 7; }

    .site-footer { grid-template-columns: 1fr 1fr; }

    .bio-figure { grid-template-columns: 180px 1fr; }
}


/* ---------- 10.6  LARGE PHONES / PHABLETS - 600px ------------
   481 - 600px. One single track. Every block spans the full
   width in reading order, and the side by side figures, media
   entries and timeline cards become vertical.                 */

@media screen and (max-width: 600px) {

    body {
        font-size: 16px;
        background-image: linear-gradient(180deg, #0A1B3D 0px, #0A1B3D 260px, #EEF1F7 260px);
    }

    h1 { font-size: 30px; }
    h2 { font-size: 22px; }

    .page {
        grid-template-columns: 1fr;
        grid-gap: 16px;
        padding: 16px 16px 36px 16px;
    }

    .site-header { grid-area: 1 / 1 / 2 / 2; padding: 16px; }

    .page-index .hero          { grid-area: 2 / 1 / 3 / 2; }
    .page-index .overview      { grid-area: 3 / 1 / 4 / 2; }
    .page-index .feature-one   { grid-area: 4 / 1 / 5 / 2; }
    .page-index .feature-two   { grid-area: 5 / 1 / 6 / 2; }
    .page-index .feature-three { grid-area: 6 / 1 / 7 / 2; }
    .page-index .site-footer   { grid-area: 7 / 1 / 8 / 2; }

    .page-lore .intro       { grid-area: 2 / 1 / 3 / 2; }
    .page-lore .biography   { grid-area: 3 / 1 / 4 / 2; }
    .page-lore .fact-panel  { grid-area: 4 / 1 / 5 / 2; }
    .page-lore .site-footer { grid-area: 5 / 1 / 6 / 2; }

    .page-ages .intro       { grid-area: 2 / 1 / 3 / 2; }
    .page-ages .era-golden  { grid-area: 3 / 1 / 4 / 2; }
    .page-ages .era-silver  { grid-area: 4 / 1 / 5 / 2; }
    .page-ages .era-modern  { grid-area: 5 / 1 / 6 / 2; }
    .page-ages .era-today   { grid-area: 6 / 1 / 7 / 2; }
    .page-ages .timeline    { grid-area: 7 / 1 / 8 / 2; }
    .page-ages .site-footer { grid-area: 8 / 1 / 9 / 2; }

    .page-movies .banner      { grid-area: 2 / 1 / 3 / 2; }
    .page-movies .live-action { grid-area: 3 / 1 / 4 / 2; }
    .page-movies .animation   { grid-area: 4 / 1 / 5 / 2; }
    .page-movies .site-footer { grid-area: 5 / 1 / 6 / 2; }

    .panel,
    .fact-panel,
    .site-footer { padding: 20px; }

    .hero-copy,
    .intro-copy,
    .banner-copy { padding: 26px 18px; }

    .hero-media,
    .hero-media img,
    .intro-media img,
    .banner-media img { min-height: 240px; }

    .hero-actions { grid-auto-flow: row; grid-auto-columns: auto; }

    .bio-figure,
    .entry,
    .animation .entry { grid-template-columns: 1fr; }

    .entry img,
    .animation .entry img { width: 100%; }

    .timeline ol,
    .site-footer { grid-template-columns: 1fr; }

    .logo-strip { grid-template-columns: repeat(2, 1fr); }

    .overview { grid-gap: 20px; }
}


/* ---------- 10.7  SMALL PHONES - 480px -----------------------
   320 - 480px. The same single track, but the type scale, the
   padding and the image heights come down again and the
   navigation runs one item per row so every tap target stays
   the full width of the screen.                               */

@media screen and (max-width: 480px) {

    body {
        font-size: 15px;
        background-image: linear-gradient(180deg, #0A1B3D 0px, #0A1B3D 210px, #EEF1F7 210px);
    }

    h1 { font-size: 26px; letter-spacing: 1px; }
    h2 { font-size: 20px; }
    h3 { font-size: 18px; }

    .page {
        grid-gap: 14px;
        padding: 12px 12px 30px 12px;
    }

    .site-header { padding: 14px 12px; grid-gap: 12px; }

    .site-nav ul { grid-template-columns: 1fr; grid-gap: 6px; }

    .site-nav a { font-size: 13px; padding: 10px 8px; }

    .brand { grid-template-columns: 44px 1fr; grid-gap: 10px; }
    .brand img { width: 44px; }
    .brand-name { font-size: 20px; letter-spacing: 2px; }
    .brand-tag { font-size: 10px; }

    .hero-copy h1 span { font-size: 16px; letter-spacing: 3px; }

    .hero-copy,
    .intro-copy,
    .banner-copy { padding: 22px 14px; }

    .hero-copy p { font-size: 16px; }

    .hero-media,
    .hero-media img,
    .intro-media img,
    .banner-media img { min-height: 190px; }

    .panel,
    .fact-panel,
    .site-footer { padding: 16px; }

    .button {
        display: block;
        text-align: center;
        padding: 13px 16px;
        font-size: 14px;
    }

    .feature { grid-template-rows: 150px 1fr; }
    .feature img { height: 150px; }
    .feature-body { padding: 18px; }

    .era { grid-template-rows: 140px max-content 1fr; }
    .era img { height: 140px; }
    .era-body { padding: 18px; }

    .pull-quote { font-size: 17px; padding: 16px 18px; }

    .stat-list strong { font-size: 22px; }

    .timeline .year { font-size: 21px; }
}