/* PPUZZL.in — Cyberpunk-Sepia Alpine Expedition Journal
   Palette: sepia-nostalgic + cyberpunk punctuation
   Typography: EB Garamond (exclusive) + Share Tech Mono (accent only)
   Layout: fixed 280px sidebar + scrolling content area
*/

/* ============================================================
   DESIGN TOKENS
   Typography: EB Garamond (exclusive serif), Share Tech Mono (accent only)
   ============================================================ */
:root {
    /* Sepia base palette */
    --darkroom-black:   #0D0A06;
    --deep-sepia:       #1A1209;
    --rich-espresso:    #2A1F0E;
    --aged-leather:     #3D2E14;
    --oxidized-gold:    #8B6914;
    --aged-amber:       #C4A06E;
    --warm-parchment:   #D4B896;
    --faded-parchment:  #BFA882;
    --bleached-bone:    #EDD9B8;

    /* Cyberpunk punctuation (max 15% coverage) */
    --phosphor-cyan:    #00FFD4;
    --magenta-burn:     #FF006E;
    --deep-violet:      #7B00FF;

    /* Typography */
    --font-garamond: "EB Garamond", Georgia, "Times New Roman", serif;
    --font-mono:     "Share Tech Mono", "Courier New", monospace;

    /* Layout */
    --sidebar-width: 280px;
    --section-gap:   80px;
    --sub-gap:       40px;
}

/* ============================================================
   RESET & BASE
   ============================================================ */
*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    scroll-behavior: smooth;
}

body {
    background-color: var(--darkroom-black);
    color: var(--warm-parchment);
    font-family: var(--font-garamond);
    font-size: 18px;
    line-height: 1.7;
    min-height: 100vh;
    overflow-x: hidden;
}

/* Film grain global texture */
.grain-filter {
    position: fixed;
    top: 0;
    left: 0;
    width: 0;
    height: 0;
    pointer-events: none;
    z-index: -1;
}

body::after {
    content: "";
    position: fixed;
    inset: 0;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23g)' opacity='0.04'/%3E%3C/svg%3E");
    pointer-events: none;
    z-index: 9999;
    opacity: 0.04;
}

/* ============================================================
   SKELETON LOADING OVERLAY
   ============================================================ */
.skeleton-overlay {
    position: fixed;
    inset: 0;
    z-index: 10000;
    display: flex;
    background: var(--darkroom-black);
    transition: opacity 0.4s ease;
}

.skeleton-overlay.fade-out {
    opacity: 0;
    pointer-events: none;
}

.skeleton-overlay.hidden {
    display: none;
}

.skeleton-sidebar {
    width: var(--sidebar-width);
    background: var(--deep-sepia);
    padding: 40px 24px;
    flex-shrink: 0;
    border-right: 2px solid var(--phosphor-cyan);
}

.skeleton-main {
    flex: 1;
    padding: 60px 48px;
    display: flex;
    flex-direction: column;
    gap: 18px;
}

/* Sepia shimmer — darkroom development effect */
@keyframes sepia-shimmer {
    0%   { background-position: -400% 0; }
    100% { background-position: 400% 0; }
}

.skel-bar {
    border-radius: 2px;
    background: linear-gradient(
        90deg,
        var(--rich-espresso) 0%,
        var(--aged-leather) 40%,
        var(--rich-espresso) 80%,
        var(--rich-espresso) 100%
    );
    background-size: 400% 100%;
    animation: sepia-shimmer 1.6s ease-in-out infinite;
}

.skel-logo { height: 24px; width: 120px; margin-bottom: 32px; animation-delay: 0s; }
.skel-nav  { height: 14px; width: 80%; margin-bottom: 16px; animation-delay: 0.2s; }
.skel-nav:nth-child(2) { animation-delay: 0.25s; width: 70%; }
.skel-nav:nth-child(3) { animation-delay: 0.3s;  width: 85%; }
.skel-nav:nth-child(4) { animation-delay: 0.35s; width: 65%; }

.skel-h1   { height: 72px; width: 80%; animation-delay: 0.1s; }
.skel-body { height: 18px; width: 100%; animation-delay: 0.15s; }
.skel-body:nth-child(3) { animation-delay: 0.35s; }
.skel-short { width: 60%; animation-delay: 0.55s; }
.skel-img  { height: 240px; width: 100%; animation-delay: 0.4s; margin: 8px 0; background: linear-gradient(90deg, var(--rich-espresso) 0%, var(--aged-leather) 40%, var(--rich-espresso) 80%); background-size: 400% 100%; animation: sepia-shimmer 1.6s ease-in-out infinite; }

/* ============================================================
   SIDEBAR
   ============================================================ */
.sidebar {
    position: fixed;
    left: 0;
    top: 0;
    width: var(--sidebar-width);
    height: 100vh;
    z-index: 100;
    background: var(--deep-sepia);
    border-right: 2px solid var(--phosphor-cyan);
    box-shadow: 0 0 12px rgba(0, 255, 212, 0.15);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    overflow: hidden;
}

/* Sidebar grain texture */
.sidebar::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23g)' opacity='0.06'/%3E%3C/svg%3E");
    pointer-events: none;
    z-index: 1;
    opacity: 0.06;
}

.sidebar-top {
    position: relative;
    z-index: 2;
    padding: 40px 28px 24px;
    flex: 1;
}

/* Site logotype */
.site-logotype {
    margin-bottom: 40px;
}

.logotype-label {
    display: block;
    font-family: var(--font-garamond);
    font-weight: 700;
    font-size: 14px;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--warm-parchment);
    line-height: 1.2;
}

.logotype-dot {
    display: block;
    font-family: var(--font-mono);
    font-size: 11px;
    color: var(--phosphor-cyan);
    letter-spacing: 0.05em;
    margin-top: 2px;
}

/* Navigation */
.sidebar-nav {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 0;
}

.nav-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 0;
    text-decoration: none;
    color: var(--warm-parchment);
    font-family: var(--font-garamond);
    font-weight: 500;
    font-size: 13px;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    border-bottom: 1px solid rgba(139, 105, 20, 0.2);
    position: relative;
    transition: color 0.3s ease;
}

.nav-item:last-child {
    border-bottom: none;
}

/* Nav indicator bar */
.nav-bar {
    width: 3px;
    height: 20px;
    background: var(--oxidized-gold);
    flex-shrink: 0;
    transition: background 0.2s ease, box-shadow 0.2s ease;
}

.nav-item.active .nav-bar,
.nav-item:hover .nav-bar {
    background: var(--phosphor-cyan);
    box-shadow: 0 0 6px rgba(0, 255, 212, 0.5);
}

.nav-item.active {
    color: var(--phosphor-cyan);
}

/* Glitch shift on hover */
@keyframes glitch-shift {
    0%   { transform: translateX(0); }
    25%  { transform: translateX(2px); }
    50%  { transform: translateX(-1px); }
    75%  { transform: translateX(2px); }
    100% { transform: translateX(0); }
}

.nav-item:hover .nav-text {
    animation: glitch-shift 0.4s ease;
    color: var(--warm-parchment);
}

.nav-item.active:hover .nav-text {
    color: var(--phosphor-cyan);
}

/* Sidebar sepia underline on active */
.nav-item.active::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: var(--oxidized-gold);
    opacity: 0.5;
}

/* Sidebar footer */
.sidebar-footer {
    position: relative;
    z-index: 2;
    height: 120px;
    background: var(--darkroom-black);
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
}

.mountain-etching {
    width: 100%;
    height: 90px;
    display: block;
}

.sidebar-meta {
    padding: 6px 12px;
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

/* ============================================================
   MAIN CONTENT AREA
   ============================================================ */
.main-content {
    margin-left: var(--sidebar-width);
    min-height: 100vh;
    background: var(--darkroom-black);
    position: relative;
}

/* ============================================================
   HERO SECTION
   ============================================================ */
.hero-section {
    position: relative;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    overflow: hidden;
}

.hero-image-wrap {
    position: absolute;
    inset: 0;
    z-index: 0;
}

.hero-photo {
    width: 100%;
    height: 100%;
    position: relative;
}

.hero-landscape {
    width: 100%;
    height: 100%;
    display: block;
}

/* CRT Scanlines overlay */
.crt-scanlines {
    position: absolute;
    inset: 0;
    background: repeating-linear-gradient(
        0deg,
        transparent,
        transparent 1px,
        rgba(0, 0, 0, 0.5) 1px,
        rgba(0, 0, 0, 0.5) 2px
    );
    pointer-events: none;
    z-index: 5;
}

/* Photo vignette */
.photo-vignette {
    position: absolute;
    inset: 0;
    background: radial-gradient(
        ellipse at center,
        transparent 40%,
        rgba(26, 18, 9, 0.4) 100%
    );
    z-index: 4;
    pointer-events: none;
}

/* Glitch horizon at bottom of hero */
.glitch-horizon {
    position: absolute;
    bottom: 120px;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(
        90deg,
        var(--phosphor-cyan) 0%,
        transparent 20%,
        var(--magenta-burn) 40%,
        transparent 60%,
        var(--phosphor-cyan) 80%,
        transparent 100%
    );
    z-index: 6;
    animation: glitch-horizon-flicker 3s ease-in-out infinite;
}

@keyframes glitch-horizon-flicker {
    0%, 90%, 100% { opacity: 1; transform: scaleX(1); }
    92%  { opacity: 0.3; transform: scaleX(0.98) translateX(4px); }
    94%  { opacity: 0.8; transform: scaleX(1.01) translateX(-2px); }
    96%  { opacity: 0.2; transform: scaleX(0.97) translateX(6px); }
    98%  { opacity: 0.9; transform: scaleX(1); }
}

/* Photo treatment (sepia + desaturate) */
.photo-treated {
    filter: sepia(0.8) contrast(1.1) brightness(0.9);
}

.photo-treated:hover {
    filter: sepia(0.6) contrast(1.15) brightness(0.95);
    transition: filter 0.6s ease;
}

/* Hero text */
.hero-text {
    position: relative;
    z-index: 10;
    padding: 60px 48px 80px;
    background: linear-gradient(
        0deg,
        rgba(13, 10, 6, 0.95) 0%,
        rgba(13, 10, 6, 0.7) 60%,
        transparent 100%
    );
}

.hero-chapter-mark {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 24px;
}

.roman-numeral {
    font-family: var(--font-garamond);
    font-style: italic;
    font-size: 20px;
    color: var(--oxidized-gold);
    flex-shrink: 0;
}

.chapter-rule {
    flex: 1;
    height: 1px;
}

.sepia-rule {
    background: var(--oxidized-gold);
    opacity: 0.6;
}

.neon-rule {
    background: linear-gradient(90deg, var(--phosphor-cyan), transparent);
    opacity: 0.8;
}

/* Display H1 */
.display-h1 {
    font-family: var(--font-garamond);
    font-weight: 700;
    font-size: 96px;
    line-height: 1;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--bleached-bone);
    text-shadow: 0 0 40px rgba(212, 184, 150, 0.3);
    margin-bottom: 24px;
    position: relative;
}

/* Glitch text effect on H1 */
.glitch-text {
    position: relative;
}

.glitch-text::before {
    content: attr(data-text);
    position: absolute;
    top: 0;
    left: 2px;
    color: rgba(0, 255, 212, 0.15);
    clip-path: polygon(0 30%, 100% 30%, 100% 50%, 0 50%);
    pointer-events: none;
    animation: glitch-clip 6s ease-in-out infinite;
}

.glitch-text::after {
    content: attr(data-text);
    position: absolute;
    top: 0;
    left: -2px;
    color: rgba(255, 0, 110, 0.12);
    clip-path: polygon(0 60%, 100% 60%, 100% 75%, 0 75%);
    pointer-events: none;
    animation: glitch-clip 6s ease-in-out infinite 0.3s;
}

@keyframes glitch-clip {
    0%, 85%, 100% { opacity: 0; transform: translateX(0); }
    88%  { opacity: 1; transform: translateX(3px); clip-path: polygon(0 20%, 100% 20%, 100% 45%, 0 45%); }
    90%  { opacity: 0.8; transform: translateX(-2px); clip-path: polygon(0 55%, 100% 55%, 100% 70%, 0 70%); }
    93%  { opacity: 0.5; transform: translateX(1px); }
    95%  { opacity: 0; }
}

.hero-sub {
    font-family: var(--font-garamond);
    font-size: 20px;
    font-style: italic;
    color: var(--aged-amber);
    max-width: 600px;
    margin-bottom: 24px;
}

.hero-meta {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}

/* ============================================================
   SECTION DIVIDERS
   ============================================================ */
.section-divider {
    height: 4px;
    margin: 0 48px;
    position: relative;
}

.divider-sepia {
    background: var(--oxidized-gold);
    opacity: 0.3;
    height: 1px;
    margin-top: var(--section-gap);
    margin-bottom: var(--section-gap);
}

.divider-neon {
    margin-top: var(--section-gap);
    margin-bottom: var(--section-gap);
}

.divider-neon::before {
    content: "";
    display: block;
    height: 1px;
    background: var(--phosphor-cyan);
    opacity: 0.7;
}

.divider-neon::after {
    content: "";
    display: block;
    height: 1px;
    background: var(--magenta-burn);
    opacity: 0.7;
    margin-top: 4px;
}

/* ============================================================
   CONTENT SECTIONS
   ============================================================ */
.content-section {
    padding: 0 48px var(--section-gap);
    opacity: 0;
    transform: translateY(24px);
    transition: opacity 0.8s ease, transform 0.8s ease;
}

.content-section.is-visible {
    opacity: 1;
    transform: translateY(0);
}

.chapter-header {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 32px;
}

.chapter-header .chapter-rule {
    flex: 1;
}

/* Section heading H2 */
.section-h2 {
    font-family: var(--font-garamond);
    font-weight: 500;
    font-size: 36px;
    color: var(--aged-amber);
    margin-bottom: var(--sub-gap);
    line-height: 1.2;
    /* Overflow into annotation column intentionally */
}

/* Asymmetric content grid */
.content-grid {
    display: grid;
    grid-template-columns: 65% 35%;
    gap: 0 24px;
    align-items: start;
}

/* Primary column */
.primary-col {
    min-width: 0;
}

/* Body text — EB Garamond 400 18px / 1.7, color: #BFA882 faded parchment */
.body-text {
    font-family: var(--font-garamond);
    font-weight: 400;
    font-size: 18px;
    line-height: 1.7;
    color: #BFA882;
    margin-bottom: 24px;
}

/* Annotation column */
.annotation-col {
    padding-top: 56px;
    padding-left: 16px;
    border-left: 1px solid rgba(139, 105, 20, 0.25);
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.annotation-text {
    font-family: var(--font-garamond);
    font-style: italic;
    font-size: 11px;
    line-height: 1.5;
    color: rgba(139, 105, 20, 0.6);
}

.italic-note {
    font-style: italic;
}

.datestamp {
    font-family: var(--font-mono);
    font-size: 10px;
    color: var(--phosphor-cyan);
    opacity: 0.7;
    letter-spacing: 0.05em;
}

/* Pull quote */
.pull-quote {
    border-left: 3px solid var(--oxidized-gold);
    padding: 16px 24px;
    margin: 32px 0;
    background: rgba(42, 31, 14, 0.4);
}

.pull-quote p {
    font-family: var(--font-garamond);
    font-style: italic;
    font-size: 22px;
    line-height: 1.5;
    color: var(--aged-amber);
}

/* Content photos */
.content-photo {
    width: 100%;
    position: relative;
    margin: 32px 0;
    overflow: hidden;
}

.inline-landscape {
    width: 100%;
    display: block;
}

/* Glitch edge effects on photos */
.glitch-edge-left {
    position: absolute;
    top: 0;
    left: 0;
    width: 12px;
    height: 100%;
    background: repeating-linear-gradient(
        0deg,
        transparent 0px,
        transparent 3px,
        rgba(0, 255, 212, 0.4) 3px,
        rgba(0, 255, 212, 0.4) 4px,
        transparent 4px,
        transparent 8px,
        rgba(255, 0, 110, 0.3) 8px,
        rgba(255, 0, 110, 0.3) 9px
    );
    animation: glitch-edge-pulse 4s ease-in-out infinite;
    pointer-events: none;
    z-index: 6;
}

.glitch-edge-right {
    position: absolute;
    top: 0;
    right: 0;
    width: 12px;
    height: 100%;
    background: repeating-linear-gradient(
        0deg,
        transparent 0px,
        transparent 5px,
        rgba(255, 0, 110, 0.4) 5px,
        rgba(255, 0, 110, 0.4) 6px,
        transparent 6px,
        transparent 10px,
        rgba(0, 255, 212, 0.3) 10px,
        rgba(0, 255, 212, 0.3) 11px
    );
    animation: glitch-edge-pulse 4s ease-in-out infinite 0.5s;
    pointer-events: none;
    z-index: 6;
}

.glitch-edge-top {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 20px;
    background: repeating-linear-gradient(
        90deg,
        transparent 0px,
        transparent 10px,
        rgba(0, 255, 212, 0.3) 10px,
        rgba(0, 255, 212, 0.3) 11px,
        transparent 11px,
        transparent 20px,
        rgba(255, 0, 110, 0.3) 20px,
        rgba(255, 0, 110, 0.3) 21px
    );
    pointer-events: none;
    z-index: 6;
    animation: glitch-edge-pulse 5s ease-in-out infinite;
}

@keyframes glitch-edge-pulse {
    0%, 80%, 100% { opacity: 1; }
    82%  { opacity: 0.3; transform: translateX(4px); }
    84%  { opacity: 0.8; transform: translateX(-2px); }
    86%  { opacity: 1; transform: translateX(0); }
}

/* ============================================================
   SHARED ELEMENTS
   ============================================================ */

/* Tech tags (Share Tech Mono) */
.tech-tag {
    font-family: var(--font-mono);
    font-size: 11px;
    font-weight: 400;
    color: var(--phosphor-cyan);
    letter-spacing: 0.05em;
    text-transform: uppercase;
    border: 1px solid rgba(0, 255, 212, 0.3);
    padding: 2px 6px;
    display: inline-block;
}

.tech-tag.accent-pink {
    color: var(--magenta-burn);
    border-color: rgba(255, 0, 110, 0.3);
}

.tech-tag.accent-violet {
    color: var(--deep-violet);
    border-color: rgba(123, 0, 255, 0.3);
}

/* Circuit ornaments */
.circuit-ornament {
    width: 100px;
    height: 60px;
    opacity: 0.8;
}

.circuit-ornament svg {
    width: 100%;
    height: 100%;
}

/* Data grid */
.data-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin: 28px 0;
    border: 1px solid rgba(139, 105, 20, 0.3);
    padding: 16px;
    background: rgba(42, 31, 14, 0.3);
}

.data-entry {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.data-value {
    font-family: var(--font-mono);
    font-size: 14px;
    color: var(--warm-parchment);
    letter-spacing: 0.05em;
}

.corrupted-value {
    color: var(--magenta-burn);
    animation: corrupt-flicker 3s ease-in-out infinite;
}

@keyframes corrupt-flicker {
    0%, 90%, 100% { opacity: 1; }
    92%  { opacity: 0.3; }
    94%  { opacity: 1; }
    96%  { opacity: 0.5; }
    98%  { opacity: 1; }
}

/* Skeleton image loading state */
.skeleton-image {
    position: relative;
}

.skeleton-image.is-loading::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 10;
    background: linear-gradient(
        90deg,
        var(--rich-espresso) 0%,
        var(--aged-leather) 40%,
        var(--rich-espresso) 80%
    );
    background-size: 400% 100%;
    animation: sepia-shimmer 1.6s ease-in-out infinite;
}

/* ============================================================
   FOOTER
   ============================================================ */
.site-footer {
    padding: 0 48px 60px;
}

.footer-rule {
    margin: 0;
    margin-bottom: 40px;
}

.footer-content {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.footer-logotype {
    font-family: var(--font-garamond);
    font-weight: 700;
    font-size: 28px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--warm-parchment);
    opacity: 0.5;
}

.footer-meta {
    display: flex;
    gap: 12px;
    align-items: center;
    flex-wrap: wrap;
}

.footer-stamp {
    font-family: var(--font-mono);
    font-size: 10px;
    color: var(--oxidized-gold);
    opacity: 0.6;
    border: none;
    padding: 0;
}

.footer-note {
    max-width: 480px;
    font-size: 11px;
}

/* ============================================================
   SCROLL REVEAL
   ============================================================ */
.scroll-reveal {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity 0.8s ease, transform 0.8s ease;
}

.scroll-reveal.is-visible {
    opacity: 1;
    transform: translateY(0);
}

/* Stagger delays for children */
.scroll-reveal:nth-child(2) { transition-delay: 0.1s; }
.scroll-reveal:nth-child(3) { transition-delay: 0.2s; }
.scroll-reveal:nth-child(4) { transition-delay: 0.15s; }

/* ============================================================
   SCROLL-TRIGGERED IMAGE REVEAL (darkroom development)
   ============================================================ */
.content-photo.developing {
    animation: darkroom-develop 0.6s ease forwards;
}

@keyframes darkroom-develop {
    0%   { filter: sepia(0) saturate(0) brightness(0.8); }
    40%  { filter: sepia(0.3) saturate(0.3) brightness(0.85); }
    100% { filter: sepia(0.8) contrast(1.1) brightness(0.9); }
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 1100px) {
    :root {
        --sidebar-width: 220px;
    }

    .display-h1 {
        font-size: 72px;
    }

    .content-grid {
        grid-template-columns: 60% 40%;
    }
}

@media (max-width: 860px) {
    :root {
        --sidebar-width: 0px;
    }

    .sidebar {
        display: none;
    }

    .main-content {
        margin-left: 0;
    }

    .display-h1 {
        font-size: 52px;
    }

    .hero-text {
        padding: 40px 24px 60px;
    }

    .content-section {
        padding: 0 24px var(--section-gap);
    }

    .section-divider {
        margin-left: 24px;
        margin-right: 24px;
    }

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

    .annotation-col {
        border-left: none;
        border-top: 1px solid rgba(139, 105, 20, 0.25);
        padding-top: 24px;
        padding-left: 0;
    }

    .section-h2 {
        font-size: 28px;
    }

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

    .site-footer {
        padding: 0 24px 40px;
    }
}

@media (max-width: 560px) {
    .display-h1 {
        font-size: 38px;
    }

    .hero-sub {
        font-size: 16px;
    }

    .pull-quote p {
        font-size: 18px;
    }
}