/* ============================================================================
   styles.css — single stylesheet for the whole site.

   TABLE OF CONTENTS
     1. Site style settings (colors, fonts, spacing)   ← Block 3
     2. Modern CSS reset                ← Block 3
     3. Base elements & typography      ← Block 3
     4. Layout (nav, sections, hero)    ← Block 4 (added later)
     5. Components (BEM)                ← Block 5 (added later)
     6. Responsive + accessibility      ← Block 6 (added later)
     7. Motion / animations             ← Block 7 (added later)

   Approach: MOBILE-FIRST. Base rules target small screens; larger screens get
   enhancements via `@media (min-width: …)` queries added in Block 6.
   Naming: BEM (block__element--modifier). Values come from the site style
   settings in section 1, so nothing is repeated (DRY).
   ============================================================================ */


/* ============================================================================
   1. SITE STYLE SETTINGS  (colors, fonts, spacing)
   The single place that defines the site's look. Every colour, font size and
   spacing value lives here once; the rest of the stylesheet just reuses them
   via var(--name). Change a value here → it updates everywhere on the site.
   (Developers call these "CSS variables" / "design tokens".)
   ============================================================================ */
:root {
    /* --- Color palette (game-economy theme) ----------------------------------
       Drawn from the "economy world" banner (assets/economy-world-banner.jpg):
       a deep-violet world lit by holographic-blue UI, gold coins and magenta
       gems. All body-text colours are checked for WCAG AA contrast (>= 4.5:1)
       against the dark backgrounds. */
    --color-bg:          #130d2b;   /* page background (deep violet)            */
    --color-bg-alt:      #1a1240;   /* alternating section background          */
    --color-surface:     #241a4f;   /* cards, raised surfaces                  */
    --color-border:      #392b6b;   /* hairline borders / dividers             */

    --color-text:        #f3eefc;   /* primary text (near-white) — high contrast */
    --color-text-muted:  #b9addb;   /* secondary text (muted lavender) — AA    */

    --color-accent:      #6a8dff;   /* brand accent (holographic blue)         */
    --color-accent-strong:#8aa6ff;  /* accent hover — lighter, pops on dark    */
    --color-accent-soft: #221a45;   /* faint accent-tinted fill                */
    --color-gold:        #ffc24b;   /* economy accent (coins & chests gold)    */
    --color-gem:         #e368ff;   /* tertiary pop (magenta gem)              */
    --color-whatsapp:    #25d366;   /* WhatsApp brand green                    */
    --color-on-accent:   #0d0722;   /* text placed on top of an accent fill    */

    /* --- Typography ----------------------------------------------------------
       System font stack: fast, self-contained, no external download. It uses
       whatever native UI font the visitor's OS provides. */
    --font-sans: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial,
                 "Apple Color Emoji", "Segoe UI Emoji", sans-serif;

    /* Modular font-size scale. Hero/section titles use clamp() so they grow
       fluidly with the viewport (small on phones, large on desktop). */
    --fs-sm:    0.875rem;                       /* 14px — small labels          */
    --fs-base:  1rem;                           /* 16px — body                  */
    --fs-md:    1.125rem;                       /* 18px — lead paragraphs       */
    --fs-lg:    1.375rem;                       /* 22px — sub-headings          */
    --fs-xl:    clamp(1.75rem, 4vw, 2.5rem);    /* section titles (h2)          */
    --fs-2xl:   clamp(2.5rem, 7vw, 4.25rem);    /* hero title (h1)              */

    --lh-tight: 1.15;   /* line-height for headings */
    --lh-body:  1.65;   /* line-height for readable body text */

    /* --- Spacing scale (consistent rhythm) ----------------------------------- */
    --space-2xs: 0.25rem;
    --space-xs:  0.5rem;
    --space-sm:  0.75rem;
    --space-md:  1rem;
    --space-lg:  1.5rem;
    --space-xl:  2.5rem;
    --space-2xl: 4rem;

    /* --- Radii, borders, shadows --------------------------------------------- */
    --radius-sm:   6px;
    --radius-md:   12px;
    --radius-lg:   20px;
    --radius-pill: 999px;
    --shadow-md:   0 10px 30px rgba(0, 0, 0, 0.35);

    /* --- Layout & motion ----------------------------------------------------- */
    --container: 1100px;                /* max content width, centered          */
    --transition: 200ms ease;           /* default transition for hovers        */
}


/* ============================================================================
   2. MODERN CSS RESET
   Strip inconsistent browser defaults so we build on a predictable baseline.
   ============================================================================ */

/* border-box makes width/height include padding & border — far easier to reason about. */
*,
*::before,
*::after {
    box-sizing: border-box;
}

/* Remove default margins the browser adds to headings, paragraphs, lists, etc. */
* {
    margin: 0;
}

/* Let the page fill the viewport and enable smooth in-page anchor scrolling. */
html {
    height: 100%;
    scroll-behavior: smooth;
    /* scroll-padding offsets the sticky header so anchored sections aren't hidden under it. */
    scroll-padding-top: 5rem;
}

body {
    min-height: 100%;
    line-height: var(--lh-body);
    -webkit-font-smoothing: antialiased;   /* crisper text on WebKit/Blink */
    text-rendering: optimizeLegibility;
}

/* Media should never overflow its container; block removes the baseline gap under images. */
img,
picture,
video {
    display: block;
    max-width: 100%;
    height: auto;
}

/* Form/interactive elements should inherit the page font instead of their own defaults. */
input,
button,
textarea,
select {
    font: inherit;
    color: inherit;
}

/* Reset list styling; individual components opt back in where a marker is wanted. */
ul,
ol {
    list-style: none;
    padding: 0;
}

/* Links: remove underline by default; color handled in the base section below. */
a {
    text-decoration: none;
    color: inherit;
}

/* Long words / URLs wrap instead of overflowing on narrow screens. */
p,
h1,
h2,
h3 {
    overflow-wrap: break-word;
}


/* ============================================================================
   3. BASE ELEMENTS & TYPOGRAPHY
   The default look of raw HTML elements — the dark theme lives here.
   Components (Block 5) only add what's specific to them.
   ============================================================================ */
body {
    font-family: var(--font-sans);
    font-size: var(--fs-base);
    background-color: var(--color-bg);
    color: var(--color-text);
}

/* Headings share a tight line-height and bold weight; sizes set per level. */
h1,
h2,
h3 {
    line-height: var(--lh-tight);
    font-weight: 700;
    letter-spacing: -0.01em;   /* subtle tightening reads better at large sizes */
}

h1 { font-size: var(--fs-2xl); }
h2 { font-size: var(--fs-xl); }
h3 { font-size: var(--fs-lg); }

/* Muted, readable paragraphs by default; specific sections can override. */
p {
    color: var(--color-text-muted);
    max-width: 65ch;   /* keep line length comfortable to read */
}

/* Base link styling (used for footer/inline links; buttons are styled in Block 5). */
a {
    color: var(--color-accent);
    transition: color var(--transition);
}

a:hover {
    color: var(--color-accent-strong);
}

/* Strong accent for the JS-free "money/economy" green used in a few highlights. */
.accent {
    color: var(--color-accent);
}

/* --- Keyboard focus -------------------------------------------------------
   :focus-visible shows a clear ring ONLY for keyboard (not mouse) users, so the
   interface stays clean for pointer users while remaining fully navigable by
   keyboard. Applied to every interactive element. */
a:focus-visible,
button:focus-visible {
    outline: 3px solid var(--color-accent-strong);
    outline-offset: 3px;
    border-radius: var(--radius-sm);
}


/* ============================================================================
   4. LAYOUT  (navigation bar, full-height sections, hero)
   This block positions the big building blocks of the page: the bar at the top,
   the full-screen sections, and the arrangement of the hero (cover) screen.
   Look & feel of the small pieces (buttons, stat strip, cards) comes in Block 5.
   ============================================================================ */

/* --- Skip link -------------------------------------------------------------
   A keyboard-only shortcut that jumps straight to the main content. It sits
   hidden off-screen and only appears when focused with the Tab key. */
.skip-link {
    position: absolute;
    top: var(--space-xs);
    left: var(--space-xs);
    z-index: 100;
    padding: var(--space-xs) var(--space-md);
    border-radius: var(--radius-sm);
    background-color: var(--color-accent);
    color: var(--color-on-accent);
    transform: translateY(-150%);   /* tucked above the top edge */
    transition: transform var(--transition);
}

/* When a keyboard user tabs to it, slide it into view. */
.skip-link:focus {
    transform: translateY(0);
}

/* --- Header (the bar) ------------------------------------------------------
   position: sticky keeps the bar pinned to the top as the visitor scrolls. */
.site-header {
    position: sticky;
    top: 0;
    z-index: 50;
    background-color: var(--color-bg);
    border-bottom: 1px solid var(--color-border);
}

/* --- Navigation -----------------------------------------------------------
   Flexbox lays the brand and the link list out in a row and pushes them to
   opposite ends. flex-wrap lets the links drop below the brand on very narrow
   phones instead of overflowing (our no-JS answer to a hamburger menu). */
.nav {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-sm) var(--space-lg);
    max-width: var(--container);
    margin: 0 auto;                              /* centre the bar's contents */
    padding: var(--space-sm) var(--space-lg);
}

.nav__brand {
    font-weight: 700;
    color: var(--color-text);
}

/* The links themselves sit in a row with even spacing. */
.nav__list {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-md) var(--space-lg);
}

.nav__link {
    color: var(--color-text-muted);
    transition: color var(--transition);
}

.nav__link:hover {
    color: var(--color-text);
}

/* --- Section scaffolding --------------------------------------------------
   Sections size to their CONTENT (with generous padding) rather than filling
   the whole screen — this keeps the page compact and quick to read, so visitors
   reach the contact / WhatsApp CTAs faster. The hero keeps its full-height
   cover (set separately below). Sections alternate background for rhythm. */
.section {
    position: relative;                          /* anchor for the gaming decorations */
    overflow: hidden;                            /* keep decorations inside the section */
    z-index: 0;                                  /* stacking context: decos sit behind content */
    display: flex;
    flex-direction: column;
    justify-content: center;
    max-width: var(--container);
    margin: 0 auto;                              /* centre the column */
    padding: var(--space-xl) var(--space-lg);    /* tighter vertical rhythm (more compact) */
}

/* Alternate the background of every other section for gentle contrast.
   (:nth-of-type(even) targets the 2nd, 4th… <section> on the page.) */
.section:nth-of-type(even) {
    background-color: var(--color-bg-alt);
}

/* Small uppercase label that introduces each section. */
.section__eyebrow,
.hero__eyebrow {
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-size: var(--fs-sm);
    font-weight: 600;
    color: var(--color-accent);
    margin-bottom: var(--space-sm);
}

/* Space below every section title so the body doesn't crowd it. */
.section__title {
    margin-bottom: var(--space-lg);
}

/* --- Hero (the cover screen) ----------------------------------------------
   The first thing visitors see. A muted background video plays behind a dark
   violet overlay; the real content sits on top in a centred column.
   position: relative makes it the anchor for the absolutely-placed video and
   overlay. overflow: hidden clips the video to the hero. max-width: none makes
   the hero full-bleed (the video spans the whole screen width, unlike the other
   width-limited sections). */
.hero {
    position: relative;
    overflow: hidden;
    max-width: none;
    min-height: 72vh;                            /* tall cover, but short enough that the
                                                    trust-bar logos peek in without scrolling */
    /* Static fallback: the banner shows if the video can't play (or is hidden
       for reduced-motion users below). The overlay still sits on top of it. */
    background: var(--color-bg) url("assets/economy-world-banner.jpg") center / cover no-repeat;
}

/* Respect visitors who ask their OS for less motion: hide the moving video and
   let the static banner background above stand in. No JavaScript needed. */
@media (prefers-reduced-motion: reduce) {
    .hero__video {
        display: none;
    }
}

/* The video fills the hero and is cropped to cover it (never stretched). It
   sits at the very back (z-index 0). */
.hero__video {
    position: absolute;
    inset: 0;                        /* stretch to all four edges */
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 0;
}

/* A translucent dark-violet wash over the video: keeps text readable (WCAG)
   while letting the motion show through. Slightly darker at the bottom. */
.hero__overlay {
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(180deg,
        rgba(19, 13, 43, 0.74) 0%,
        rgba(19, 13, 43, 0.90) 100%);
}

/* The real hero content, layered above the video + overlay. Stacked in a
   centred, width-limited column with comfortable spacing. */
.hero__inner {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
    width: 100%;
    max-width: var(--container);
    margin: 0 auto;
}

.hero__lead {
    font-size: var(--fs-md);
    margin-bottom: var(--space-md);
}

/* The call-to-action buttons sit in a row and wrap on small screens. */
.hero__actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-md);
    margin-bottom: var(--space-xl);
}

/* The downward scroll cue, nudged away from the content above it. */
.hero__scroll {
    margin-top: var(--space-xl);
    font-size: var(--fs-lg);
    color: var(--color-text-muted);
}

/* --- Trust bar (the "trusted by" logo strip) ------------------------------
   A thin credibility band under the hero. NOT full-height: it's a slim strip.
   Content is centred in the same readable column width as the sections. */
.trustbar {
    max-width: var(--container);
    margin: 0 auto;
    padding: var(--space-lg);
    border-top: 1px solid var(--color-border);
    border-bottom: 1px solid var(--color-border);
    text-align: center;
}

/* Small, quiet caption above the logos. */
.trustbar__label {
    margin: 0 auto var(--space-md);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-size: var(--fs-sm);
    color: var(--color-text-muted);
}

/* Logos sit in one centred row and wrap onto a second line on narrow screens. */
.trustbar__list {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: var(--space-sm) var(--space-md);
}

/* Each logo sits on a uniform white "chip": a fixed-height rounded card with
   padding. This normalises logos from different sources (dark, light, colour)
   into one consistent, legible set on the dark background. */
.trustbar__item {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 4rem;
    padding: var(--space-sm) var(--space-md);
    background-color: #fff;
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-md);
    transition: transform var(--transition);
}

/* A small lift on hover — a moment of life, still no JavaScript. */
.trustbar__item:hover {
    transform: translateY(-3px);
}

/* The logo scales to fit inside its chip without stretching. */
.trustbar__logo {
    max-height: 2.15rem;
    width: auto;
    object-fit: contain;
}

/* --- About layout (bio + photo) -------------------------------------------
   The photo, bio and skills sit in a row that wraps to a stack on small
   screens (mobile-first: they start stacked, flex-wrap keeps them so until
   there's room). */
.about__body {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: var(--space-xl);
    margin-top: var(--space-md);
}

/* The portrait: a fixed-ish column that can shrink; the bio takes the rest. */
.about__portrait {
    margin: 0;                                   /* <figure> has a default margin */
    flex: 1 1 220px;
    max-width: 300px;
}

/* The photo was shot on white; a rounded frame + border + shadow turns that
   white backdrop into a clean, intentional "studio card". */
.about__photo {
    width: 100%;
    /* Professional head-to-torso crop. object-position 55% moves the frame
       right to centre on the subject (he stands right-of-frame, so this trims
       the empty white on the left); 18% moves it down, trimming the white above
       his head and revealing more of the torso. The 5:4 box shows a bit more
       vertically than a strict half. */
    aspect-ratio: 5 / 4;
    object-fit: cover;
    object-position: 55% 18%;
    border-radius: var(--radius-lg);
    border: 1px solid var(--color-border);
    box-shadow: var(--shadow-md);
    background-color: #fff;                       /* matches the photo's own backdrop */
}

/* Give the text and skills sensible flex sizes so the row balances. */
.about__text  { flex: 3 1 320px; }
.about__skills { flex: 1 1 200px; }

/* Bio bullets: short, scannable points instead of a paragraph wall. Each gets a
   gold gem marker (on-theme, more dynamic than a plain dot). */
.about__list {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
    margin: var(--space-md) 0;
    max-width: 60ch;
}

.about__list li {
    position: relative;
    padding-left: 1.6rem;                        /* room for the marker */
    color: var(--color-text-muted);
}

.about__list li::before {
    content: "◆";                                /* gem-like bullet */
    position: absolute;
    left: 0;
    top: 0.05em;
    color: var(--color-gold);
    font-size: 0.8em;
}

/* Highlighted, clickable closing statement. It reads as a call-out and links
   straight to WhatsApp (same action as the WhatsApp button). */
.callout {
    display: inline-flex;
    align-items: center;
    gap: var(--space-sm);
    margin-top: var(--space-md);
    padding: var(--space-md) var(--space-lg);
    border: 1px solid var(--color-accent);
    border-left-width: 4px;                      /* accent bar down the side */
    border-radius: var(--radius-md);
    background-color: var(--color-accent-soft);
    color: var(--color-text);
    font-size: var(--fs-md);
    font-weight: 600;
    max-width: 60ch;
    transition: transform var(--transition), background-color var(--transition),
                border-color var(--transition);
}

.callout:hover {
    transform: translateY(-2px);
    border-color: var(--color-accent-strong);
    color: var(--color-text);                    /* keep readable (overrides link hover) */
}

.callout__icon {
    font-size: 1.4rem;
    line-height: 1;
}


/* ============================================================================
   5. COMPONENTS  (BEM)
   The reusable, self-contained pieces of the interface: buttons, the stat
   strip, skill chips, the game mosaic, portfolio cards and the footer. Each is
   named block__element--modifier and built from the site style settings.
   ============================================================================ */

/* --- Buttons --------------------------------------------------------------
   One shared ".button" base; modifiers change only the colours. Pill-shaped,
   they lift slightly on hover for a bit of life (no JavaScript). */
.button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-xs);
    padding: var(--space-sm) var(--space-lg);
    border: 1px solid transparent;
    border-radius: var(--radius-pill);
    font-weight: 600;
    line-height: 1;
    cursor: pointer;
    transition: transform var(--transition), background-color var(--transition),
                border-color var(--transition), color var(--transition);
}

.button:hover {
    transform: translateY(-2px);
}

/* Primary: solid holographic-blue fill — the main call to action. */
.button--primary {
    background-color: var(--color-accent);
    color: var(--color-on-accent);
}

.button--primary:hover {
    background-color: var(--color-accent-strong);
    color: var(--color-on-accent);
}

/* Ghost: the quieter SECONDARY action. It has a subtle filled surface (not
   fully transparent) so it clearly reads as a button, with an outline that
   lights up on hover. */
.button--ghost {
    background-color: var(--color-surface);
    border-color: var(--color-border);
    color: var(--color-text);
}

.button--ghost:hover {
    border-color: var(--color-accent);
    color: var(--color-accent-strong);
}

/* WhatsApp: the brand green, with dark text for contrast. */
.button--whatsapp {
    background-color: var(--color-whatsapp);
    color: #06210f;
}

.button--whatsapp:hover {
    background-color: #1fb356;
    color: #06210f;
}

/* --- Stat strip (hero credibility numbers) --------------------------------
   A row of quick facts. The big value is gold — the "coins" of the economy
   theme — so the numbers pop; the label sits quietly beneath it. */
.stats {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-md) var(--space-xl);
    margin-top: var(--space-lg);
}

.stats__item {
    display: flex;
    flex-direction: column;
    gap: var(--space-2xs);
}

.stats__value {
    /* Slightly smaller than section titles so all four stats fit on one row
       (keeps the hero compact). Still big and bold in economy gold. */
    font-size: clamp(1.4rem, 2.2vw, 1.9rem);
    font-weight: 700;
    line-height: 1;
    color: var(--color-gold);
}

.stats__label {
    font-size: var(--fs-sm);
    color: var(--color-text-muted);
}

/* --- Skill chips ----------------------------------------------------------
   The list of expertise areas, shown as pill "chips" that wrap onto new rows. */
.about__skills-title {
    margin-bottom: var(--space-md);
}

.skills {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-sm);
}

.skills__item {
    display: inline-flex;
    align-items: center;
    gap: var(--space-xs);
    padding: var(--space-2xs) var(--space-md);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-pill);
    background-color: var(--color-surface);
    font-size: var(--fs-sm);
}

/* The little emoji icon that leads each chip. */
.skills__icon {
    font-size: 1rem;
    line-height: 1;
}

/* (The Portfolio section — game mosaic and simulation cards — was removed to
   keep the page focused: About flows straight into Contact. Its component
   styles were removed with it.) */

/* --- Contact actions ------------------------------------------------------ */
.contact__lead {
    margin-bottom: var(--space-lg);
}

.contact__actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-md);
}

/* --- Footer --------------------------------------------------------------- */
.site-footer {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-md) var(--space-lg);
    max-width: var(--container);
    margin: 0 auto;
    padding: var(--space-xl) var(--space-lg);
    border-top: 1px solid var(--color-border);
}

.site-footer__copy {
    font-size: var(--fs-sm);
    color: var(--color-text-muted);
}

.site-footer__social {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-lg);
}

.site-footer__link {
    color: var(--color-text-muted);
}

.site-footer__link:hover {
    color: var(--color-accent-strong);
}


/* ============================================================================
   6. GAMING DECORATIONS
   Playful, on-theme flourishes (coins, gems, chests…) scattered in the section
   backgrounds — a nod to the game-economy world of the hero banner. They are
   decorative emoji: aria-hidden so screen readers ignore them, pointer-events
   disabled so they never block clicks, and placed BEHIND the content (z-index)
   at low opacity so they add atmosphere without hurting readability.
   ============================================================================ */
.deco {
    position: absolute;
    z-index: -1;                                 /* behind the section's text */
    opacity: 0.3;
    pointer-events: none;
    user-select: none;
    line-height: 1;
    /* --rot is each item's resting tilt; the float animation keeps it. */
    transform: rotate(var(--rot, 0deg));
    animation: deco-float 5s ease-in-out infinite alternate;
}

/* A gentle up-and-down bob. Keeps the resting rotation via the CSS variable. */
@keyframes deco-float {
    from { transform: translateY(0)      rotate(var(--rot, 0deg)); }
    to   { transform: translateY(-14px)  rotate(var(--rot, 0deg)); }
}

/* Accessibility: hold still for visitors who ask their OS for reduced motion. */
@media (prefers-reduced-motion: reduce) {
    .deco { animation: none; }
}

/* Per-item placement, size, tilt and a staggered start so they don't bob in
   unison. (a* = About section, c* = Contact section.) */
.deco--a1 { top: 12%;    right: 7%;  font-size: 3.5rem; --rot: -12deg; animation-delay: 0s;   }
.deco--a2 { bottom: 14%; left: 5%;   font-size: 3rem;   --rot: 8deg;   animation-delay: 0.8s; }
.deco--a3 { top: 48%;    right: 15%; font-size: 2.3rem; --rot: -6deg;  animation-delay: 1.5s; }
.deco--c1 { top: 16%;    left: 8%;   font-size: 3.2rem; --rot: 10deg;  animation-delay: 0.3s; }
.deco--c2 { bottom: 16%; right: 9%;  font-size: 3.6rem; --rot: -10deg; animation-delay: 1s;   }
.deco--c3 { top: 40%;    right: 24%; font-size: 2.3rem; --rot: 6deg;   animation-delay: 1.7s; }


/* ============================================================================
   7. RESPONSIVE ENHANCEMENTS  (min-width, mobile-first)
   Everything above is written mobile-first: it already reflows on any width via
   flex-wrap + clamp() (single column on phones → multi-column with room). These
   min-width queries only add polish where larger screens have space to spare.
   ============================================================================ */

/* Tablet and up: lead paragraphs can breathe a little larger. */
@media (min-width: 768px) {
    .hero__lead {
        font-size: var(--fs-lg);
    }
}

/* Desktop: a touch larger body text improves readability on wide screens. */
@media (min-width: 1024px) {
    :root {
        --fs-base: 1.0625rem;                    /* ~17px */
    }
}

/* Very small phones: keep the decorations from crowding the text by shrinking
   and thinning them a bit. */
@media (max-width: 30rem) {
    .deco {
        font-size: 2.4rem;
        opacity: 0.2;
    }
}