@charset "UTF-8";
/* ===========================================================================
   Drif Core - poster colour-band system
   DESIGN_APPROACH 2 (Festival Poster) - LAYOUT 8 (stepped bands)
   PALETTE B14 - DETAILS 4 (framed photo) - DECOR 8 (marquee rules)
   THEME_MODES = both: two token blocks, nothing else carries a colour value.
   ========================================================================= */

/* --- Fonts ---------------------------------------------------------------- */
@font-face {
    font-family: 'Bowlby One';
    src: url('fonts/bowlby-one-latin-400.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Rubik';
    src: url('fonts/rubik-latin-variable.woff2') format('woff2-variations'),
         url('fonts/rubik-latin-variable.woff2') format('woff2');
    font-weight: 300 900;
    font-style: normal;
    font-display: swap;
}

/* --- Theme-independent tokens -------------------------------------------- */
:root {
    --pad: clamp(20px, 5vw, 88px);
    --maxw: 1800px;
    --radius: 0;
    --tilt: 0deg;
    --band-pad: clamp(40px, 6vw, 96px);
    --gap: clamp(20px, 2.4vw, 40px);
    --step: 48px;
    --font-head: 'Bowlby One', 'Arial Black', Impact, sans-serif;
    --font-body: 'Rubik', 'Helvetica Neue', Arial, sans-serif;
    --backdrop: rgba(0, 0, 0, .55);
    color-scheme: light;
}

/* --- LIGHT THEME (B14 Zielona Fiesta, light half) ------------------------ */
html[data-theme="light"] {
    --bg:          #F3F9F4;
    --surface:     #FFFFFF;
    --surface-2:   #E4F1E7;
    --text:        #0B2214;
    --muted:       #44614D;
    --line:        #CFE3D4;
    --accent:      #0E8644;
    --accent-2:    #F2C200;
    --accent-3:    #E8499A;
    --on-accent:   #FFFFFF;
    --on-accent-2: #241F00;
    --on-accent-3: #290517;
    --accent-ink:  #0A6634;
    --invert-bg:   #0B2214;
    --invert-fg:   #F3F9F4;
    --shadow:      0 10px 0 rgba(11, 34, 20, .14);
    --shadow-sm:   0 6px 0 rgba(11, 34, 20, .14);
    --scrim:       linear-gradient(0deg, rgba(243, 249, 244, .96) 0%, rgba(243, 249, 244, .78) 55%, rgba(243, 249, 244, 0) 100%);
    --scrim-fg:    #0B2214;
    color-scheme: light;
}

/* --- DARK THEME (B14 Zielona Fiesta, dark half) -------------------------- */
html[data-theme="dark"] {
    --bg:          #062116;
    --surface:     #0D3022;
    --surface-2:   #133F2C;
    --text:        #ECF8EF;
    --muted:       #A8C9B3;
    --line:        #1F5639;
    --accent:      #2ECC71;
    --accent-2:    #FFD233;
    --accent-3:    #FF66B2;
    --on-accent:   #00210F;
    --on-accent-2: #241F00;
    --on-accent-3: #2A0017;
    --accent-ink:  #66E39B;
    --invert-bg:   #ECF8EF;
    --invert-fg:   #062116;
    --shadow:      0 10px 0 rgba(0, 0, 0, .45);
    --shadow-sm:   0 6px 0 rgba(0, 0, 0, .45);
    --scrim:       linear-gradient(0deg, rgba(6, 33, 22, .96) 0%, rgba(6, 33, 22, .74) 55%, rgba(6, 33, 22, 0) 100%);
    --scrim-fg:    #ECF8EF;
    color-scheme: dark;
}

/* --- Base ---------------------------------------------------------------- */
*,
*::before,
*::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
    margin: 0;
    background: var(--bg);
    color: var(--text);
    font-family: var(--font-body);
    font-size: clamp(16px, 1.05vw, 18px);
    font-weight: 400;
    line-height: 1.6;
    overflow-x: hidden;
    transition: background-color .25s ease, color .25s ease;
}

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

h1, h2, h3, h4 {
    font-family: var(--font-head);
    font-weight: 400;
    letter-spacing: -.02em;
    line-height: .96;
    margin: 0;
    text-transform: none;
}

p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }

a { color: var(--accent-ink); text-decoration: none; }
a:hover { text-decoration: underline; text-decoration-thickness: 3px; text-underline-offset: 4px; }

strong { font-weight: 700; }
code { font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace; font-size: .92em; }

:focus-visible {
    outline: 3px solid var(--band-fg, var(--text));
    outline-offset: 3px;
}

.vh {
    position: absolute !important;
    width: 1px; height: 1px;
    margin: -1px; padding: 0;
    overflow: hidden; clip: rect(0 0 0 0);
    white-space: nowrap; border: 0;
}

.skip {
    position: absolute;
    left: var(--pad); top: -200px;
    z-index: 60;
    padding: 14px 20px;
    background: var(--accent);
    color: var(--on-accent);
    font-weight: 700;
    border-radius: var(--radius);
}
.skip:focus { top: 12px; text-decoration: none; }

/* === BANDS ================================================================
   The colour of the section background is the carrier of the whole design.
   Everything inside a band inherits --band-fg; --text, --muted and --line are
   never used inside a coloured band.
   ========================================================================= */
.band {
    position: relative;
    background: var(--band-bg);
    color: var(--band-fg);
    padding: var(--band-pad) 0;
    overflow: hidden;
}
.band--n   { --band-bg: var(--bg);        --band-fg: var(--text); }
.band--s   { --band-bg: var(--surface);   --band-fg: var(--text); }
.band--a1  { --band-bg: var(--accent);    --band-fg: var(--on-accent); }
.band--a2  { --band-bg: var(--accent-2);  --band-fg: var(--on-accent-2); }
.band--a3  { --band-bg: var(--accent-3);  --band-fg: var(--on-accent-3); }
.band--inv { --band-bg: var(--invert-bg); --band-fg: var(--invert-fg); }

.band__in {
    width: 100%;
    max-width: var(--maxw);
    margin: 0 auto;
    padding: 0 var(--pad);
}

/* Stepped cut on the top edge (LAYOUT 8). Content keeps clear of the cut. */
.band--cut {
    clip-path: polygon(0 0, 50% 0, 50% 22px, 100% 22px, 100% 100%, 0 100%);
    padding-top: calc(var(--band-pad) + 22px);
}

/* Links, buttons and figures inside bands */
.band--a1 a, .band--a2 a, .band--a3 a, .band--inv a { color: var(--band-fg); }
.band--n a, .band--s a { color: var(--accent-ink); }

.eyebrow {
    font-family: var(--font-head);
    font-size: clamp(13px, 1vw, 15px);
    letter-spacing: .1em;
    text-transform: uppercase;
    margin: 0 0 .9em;
}
.band--n .eyebrow, .band--s .eyebrow { color: var(--accent-ink); }
.band--a1 .eyebrow, .band--a2 .eyebrow, .band--a3 .eyebrow, .band--inv .eyebrow { opacity: .78; }

.lead {
    font-size: clamp(17px, 1.5vw, 22px);
    line-height: 1.5;
    max-width: 62ch;
}
.note {
    font-size: clamp(14px, 1vw, 16px);
    line-height: 1.55;
    max-width: 78ch;
    margin-top: 1.4em;
}
.band--n .note, .band--s .note { color: var(--muted); }
.band--a1 .note, .band--a2 .note, .band--a3 .note, .band--inv .note { opacity: .82; }

/* --- Ladder headlines ---------------------------------------------------- */
.ladder { display: block; }
.ladder__l { display: block; }
h1.ladder { font-size: clamp(48px, 8vw, 128px); }
h2.ladder, .h2--ladder { font-size: clamp(32px, 4.5vw, 72px); margin-bottom: .5em; }
h3 { font-size: clamp(19px, 1.6vw, 26px); line-height: 1.05; }

/* --- Buttons and links --------------------------------------------------- */
.btn {
    display: inline-block;
    padding: 15px 26px;
    min-height: 44px;
    border: 3px solid transparent;
    border-radius: var(--radius);
    background: var(--accent);
    color: var(--on-accent);
    font-family: var(--font-head);
    font-size: clamp(14px, 1.05vw, 17px);
    line-height: 1.1;
    letter-spacing: .01em;
    text-align: center;
    cursor: pointer;
    box-shadow: var(--shadow-sm);
}
.btn:hover { text-decoration: none; }
/* Inside a colour band the action is a plate in a SECOND accent - a coloured
   plate is allowed on a fill, coloured text is not. This is what puts a second
   saturated colour on the first screen. */
.band--a1 .btn, .band--a3 .btn, .band--inv .btn {
    background: var(--accent-2);
    color: var(--on-accent-2);
}
.band--a2 .btn {
    background: var(--accent);
    color: var(--on-accent);
}
.btn--big { padding: 19px 34px; font-size: clamp(16px, 1.3vw, 20px); }
.btn--equal { flex: 1 1 auto; min-width: 9rem; }

.linkbtn {
    border: 0; background: none; padding: 0;
    font: inherit; color: var(--accent-ink);
    cursor: pointer; text-align: left;
}
.linkbtn:hover { text-decoration: underline; text-decoration-thickness: 3px; text-underline-offset: 4px; }

.alink {
    display: inline-flex;
    align-items: baseline;
    gap: .35em;
    font-weight: 700;
    text-decoration: underline;
    text-decoration-thickness: 3px;
    text-decoration-color: transparent;
    text-underline-offset: 5px;
}
.alink__arrow { font-family: var(--font-body); }
.actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--gap);
    margin-top: 1.6em;
}
.actions--split { justify-content: space-between; }
.actions__note { font-size: clamp(14px, 1vw, 16px); max-width: 44ch; }
.band--n .actions__note, .band--s .actions__note { color: var(--muted); }
.band--a1 .actions__note, .band--a2 .actions__note, .band--a3 .actions__note, .band--inv .actions__note { opacity: .82; }

/* --- Compliance strip ---------------------------------------------------- */
.strip {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .55em;
    margin: 0;
    font-size: clamp(13px, 1vw, 15px);
    font-weight: 500;
    letter-spacing: .02em;
    text-transform: uppercase;
}
.strip__sep { opacity: .6; }
.band--n .strip, .band--s .strip { color: var(--accent-ink); }

/* --- Lists --------------------------------------------------------------- */
.ticks { display: grid; gap: .7em; margin: 1.4em 0 0; }
.ticks li {
    position: relative;
    padding-left: 1.7em;
    line-height: 1.5;
}
.ticks li::before {
    content: "";
    position: absolute;
    left: 0; top: .52em;
    width: .85em; height: .3em;
    background: currentColor;
}
.band--n .ticks li::before, .band--s .ticks li::before { background: var(--accent-ink); }
.ticks--tight { gap: .5em; }
.ticks--cross li::before,
.ticks--cross li::after {
    content: "";
    position: absolute;
    left: .1em; top: .72em;
    width: .85em; height: .22em;
    background: currentColor;
    transform: rotate(45deg);
}
.ticks--cross li::after { transform: rotate(-45deg); }
.band--n .ticks--cross li::before, .band--s .ticks--cross li::before,
.band--n .ticks--cross li::after, .band--s .ticks--cross li::after { background: var(--accent-ink); }

.meta {
    display: flex;
    flex-wrap: wrap;
    gap: .6em 1.4em;
    margin-top: 1.4em;
    font-family: var(--font-head);
    font-size: clamp(15px, 1.2vw, 19px);
}
.meta__i { display: inline-block; }

/* --- Facts list (hero card) --------------------------------------------- */
.facts { display: grid; gap: 0; margin: 0 0 1.4em; }
.facts__row {
    display: grid;
    grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr);
    gap: .5em;
    padding: .7em 0;
    border-bottom: 2px solid var(--line);
}
.facts__row:last-child { border-bottom: 0; }
.facts dt { color: var(--muted); font-size: .95em; }
.facts dd {
    margin: 0;
    font-family: var(--font-head);
    font-size: clamp(15px, 1.2vw, 19px);
    color: var(--text);
    overflow-wrap: anywhere;
}

/* === HEADER =============================================================== */
.site-head {
    position: sticky;
    top: 0;
    z-index: 50;
    background: var(--surface);
    border-bottom: 3px solid var(--text);
}
.site-head__in {
    max-width: var(--maxw);
    margin: 0 auto;
    padding: 10px var(--pad);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--gap);
    min-height: 64px;
}
.brand {
    display: inline-flex;
    align-items: center;
    gap: .55em;
    color: var(--text);
    text-decoration: none;
}
.brand:hover { text-decoration: none; }
.brand__mark { color: var(--accent); flex: 0 0 auto; }
.brand__name {
    font-family: var(--font-head);
    font-size: clamp(19px, 1.7vw, 26px);
    letter-spacing: -.01em;
    white-space: nowrap;
}
.burger {
    display: inline-flex;
    align-items: center;
    gap: .5em;
    min-height: 44px;
    padding: 10px 14px;
    border: 3px solid var(--text);
    border-radius: var(--radius);
    background: var(--surface);
    color: var(--text);
    font-family: var(--font-head);
    font-size: 15px;
    cursor: pointer;
}
.burger__bars { display: grid; gap: 3px; }
.burger__bars i { display: block; width: 18px; height: 3px; background: currentColor; }
.site-nav__list { display: grid; }
.site-nav__list a {
    display: block;
    padding: 12px 0;
    color: var(--text);
    font-weight: 500;
    border-bottom: 2px solid var(--line);
}
.site-nav__list a[aria-current="page"] {
    color: var(--accent-ink);
    box-shadow: inset 0 -6px 0 var(--accent);
}
.site-nav__side {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
    padding: 16px 0 4px;
}
.theme {
    display: inline-flex;
    align-items: center;
    gap: .5em;
    min-height: 44px;
    padding: 10px 14px;
    border: 3px solid var(--line);
    border-radius: var(--radius);
    background: var(--surface);
    color: var(--text);
    font-family: var(--font-body);
    font-weight: 500;
    font-size: 15px;
    cursor: pointer;
}
.theme__icon { color: var(--accent-ink); }
.btn--cta { box-shadow: none; }

/* === HERO ================================================================= */
.hero__in {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
        "eyebrow"
        "title"
        "lead"
        "cta"
        "card"
        "lineup"
        "strip"
        "photo";
    gap: var(--gap);
    align-content: start;
}
.hero__eyebrow { grid-area: eyebrow; margin: 0; font-family: var(--font-head); font-size: clamp(13px, 1vw, 15px); letter-spacing: .1em; text-transform: uppercase; opacity: .82; }
.hero__title  { grid-area: title; }
.hero__lead   { grid-area: lead; font-size: clamp(17px, 1.5vw, 22px); line-height: 1.5; max-width: 54ch; }
.hero__cta    { grid-area: cta; display: flex; flex-wrap: wrap; align-items: center; gap: var(--gap); margin: 0; }
/* The facts card sits on an offset plate in the third accent: the second and
   third colours of the first screen, both as plates rather than text. */
.hero__card   { grid-area: card; align-self: start; background: var(--surface); color: var(--text); padding: clamp(20px, 2vw, 32px); border-radius: var(--radius); box-shadow: 14px 14px 0 0 var(--accent-3); }
.hero__cardH  { font-size: clamp(17px, 1.3vw, 22px); margin-bottom: .8em; color: var(--text); }
.hero__card .alink { color: var(--accent-ink); }
.hero__lineup { grid-area: lineup; display: flex; flex-wrap: wrap; align-items: baseline; gap: .5em; margin: 0; font-family: var(--font-head); font-size: clamp(15px, 1.5vw, 24px); line-height: 1.2; }
.hero__lineupSep { opacity: .55; }
.hero__lineupMore { font-family: var(--font-body); font-size: clamp(14px, 1vw, 16px); }
.hero .strip { grid-area: strip; }
.hero__photo { grid-area: photo; }
.hero__second { font-size: clamp(15px, 1.1vw, 18px); }

/* === FRAMED PHOTO (DETAIL_SYSTEM 4) ====================================== */
.frame {
    position: relative;
    margin: 0;
    border: 10px solid var(--band-fg);
    border-radius: var(--radius);
    background: var(--surface-2);
}
/* The offset backing plate is drawn with two flat shadows, so nothing has to
   sit behind the figure in the stacking order. */
.frame {
    box-shadow: 12px 12px 0 0 var(--band-bg), 12px 12px 0 3px var(--band-fg);
}
.frame img { width: 100%; height: 100%; object-fit: cover; }
.frame--wide img  { aspect-ratio: 16 / 7; max-height: clamp(14rem, 34vh, 26rem); }
.frame--tall img  { aspect-ratio: 4 / 3; }
.frame--square img { aspect-ratio: 1 / 1; }
.frame--card img  { aspect-ratio: 3 / 2; }
.frame--solo { max-width: 32rem; }
.frame__cap {
    position: absolute;
    left: 0; right: 0; bottom: 0;
    padding: 2.6em 1em .9em;
    background: var(--scrim);
    color: var(--scrim-fg);
    font-size: clamp(13px, 1vw, 15px);
    font-weight: 500;
}

/* === SPLIT / DUO ========================================================= */
.split, .duo {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--gap);
}
.split { grid-template-areas: "text" "fig"; }
.split__text { grid-area: text; }
.split__fig  { grid-area: fig; }
.duo { grid-template-areas: "a" "b"; }
.duo__a { grid-area: a; }
.duo__b { grid-area: b; }

/* === STAGES / STEPS ====================================================== */
.stages, .steps { display: grid; gap: var(--gap); margin-top: var(--gap); }
.stage, .step {
    display: grid;
    grid-template-columns: minmax(0, auto) minmax(0, 1fr);
    gap: .6em 1.1em;
    align-items: start;
    padding-top: .9em;
    border-top: 3px solid currentColor;
}
.stage__num, .step__num {
    grid-column: 1;
    font-family: var(--font-head);
    font-size: clamp(34px, 4vw, 64px);
    line-height: .8;
}
.band--n .stage__num, .band--s .stage__num,
.band--n .step__num, .band--s .step__num { color: var(--accent-ink); }
.stage__body, .step__body { grid-column: 2; }
.stage__h, .step__h { margin-bottom: .45em; }
.stage__t, .step__t { margin: 0; max-width: 46ch; }

/* === CARDS =============================================================== */
.cards {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-auto-rows: 1fr;
    gap: var(--gap);
    margin-top: var(--gap);
}
.card {
    display: flex;
    flex-direction: column;
    gap: 1em;
    background: var(--surface);
    color: var(--text);
    padding: clamp(16px, 1.4vw, 24px);
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
}
.card .frame { border-color: var(--accent); box-shadow: none; }
.card__h { font-size: clamp(19px, 1.5vw, 25px); }
.card__h a { color: var(--text); }
.card__h a:hover { color: var(--accent-ink); }
.card__t { margin: .5em 0 0; color: var(--muted); font-size: .97em; }
.card__meta {
    margin: auto 0 0;
    padding-top: .9em;
    border-top: 2px solid var(--line);
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: baseline;
    gap: .4em 1em;
}
.card__price { font-family: var(--font-head); font-size: clamp(16px, 1.3vw, 21px); color: var(--accent-ink); }
.card__facts { font-size: .9em; color: var(--muted); }

/* === CATEGORY TILES ====================================================== */
.cats {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-auto-rows: 1fr;
    gap: var(--gap);
    margin-top: var(--gap);
}
.cat {
    display: flex;
    flex-direction: column;
    padding: clamp(18px, 1.6vw, 28px);
    border: 3px solid currentColor;
    border-radius: var(--radius);
}
.cat__h { font-size: clamp(20px, 1.7vw, 28px); margin-bottom: .55em; }
.cat__h a { text-decoration: none; }
.cat__t { margin: 0; }
.cat__meta {
    margin: auto 0 0;
    padding-top: 1em;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: .4em 1em;
    font-family: var(--font-head);
    font-size: clamp(15px, 1.2vw, 19px);
}
.cat__count { opacity: .75; font-family: var(--font-body); font-size: .85em; align-self: center; }
.band--n .cat__price, .band--s .cat__price { color: var(--accent-ink); }

/* === PRICE TEASER ======================================================== */
.teaser {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "big" "list";
    gap: var(--gap);
    margin-top: var(--gap);
}
.teaser__big { grid-area: big; }
.teaser__list { grid-area: list; display: grid; gap: 0; align-content: start; }
.teaser__list li {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: .3em 1em;
    padding: .85em 0;
    border-bottom: 2px solid currentColor;
}
.teaser__list li:first-child { border-top: 2px solid currentColor; }
.teaser__k { max-width: 30ch; }
.teaser__v { font-family: var(--font-head); font-size: clamp(16px, 1.3vw, 21px); }
.bigprice { display: flex; flex-wrap: wrap; align-items: baseline; gap: .3em; margin: 0; }
.bigprice__from { font-family: var(--font-head); font-size: clamp(18px, 1.6vw, 26px); opacity: .8; }
.bigprice__n {
    font-family: var(--font-head);
    font-size: clamp(40px, 6vw, 96px);
    line-height: .9;
    letter-spacing: -.03em;
    font-variant-numeric: tabular-nums;
}
.band--n .bigprice__n, .band--s .bigprice__n { color: var(--accent-ink); }
.bigprice__cap { margin-top: .7em; max-width: 40ch; font-size: clamp(14px, 1vw, 16px); }

/* === SCOPE =============================================================== */
.scope {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--gap);
    margin-top: var(--gap);
}
.scope__h { font-size: clamp(18px, 1.4vw, 24px); }

/* === SHOTS (photo mosaic) ================================================ */
.shots {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--gap);
    margin-top: calc(var(--gap) * 1.4);
}
.atmos__wide { margin-top: var(--gap); }

/* === FAQ ================================================================= */
.faq { margin-top: var(--gap); max-width: 86ch; }
.faq__i { border-top: 3px solid currentColor; }
.faq__i:last-child { border-bottom: 3px solid currentColor; }
.faq__q {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1em;
    padding: 1em 0;
    min-height: 44px;
    font-family: var(--font-head);
    font-size: clamp(17px, 1.4vw, 24px);
    line-height: 1.15;
    cursor: pointer;
    list-style: none;
}
.faq__q::-webkit-details-marker { display: none; }
.faq__q::after {
    content: "+";
    font-size: 1.1em;
    flex: 0 0 auto;
}
.faq__i[open] .faq__q::after { content: "\2013"; }
.faq__a {
    background: var(--surface);
    color: var(--text);
    padding: clamp(16px, 1.5vw, 26px);
    margin: 0 0 1.1em;
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
}
.faq__a p { max-width: 74ch; }

/* === FORM ================================================================ */
.eform { margin-top: var(--gap); }
.eform__grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--gap);
}
.field { display: grid; gap: .45em; margin: 0; }
.field__label { font-weight: 500; font-size: .97em; }
.field__req { color: var(--accent-ink); font-weight: 700; }
.band--a1 .field__req, .band--a2 .field__req,
.band--a3 .field__req, .band--inv .field__req { color: inherit; }
.field__input {
    width: 100%;
    min-height: 48px;
    padding: 12px 14px;
    background: var(--surface);
    color: var(--text);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    font: inherit;
    font-size: 16px;
}
.field__input--area { min-height: 120px; resize: vertical; }
.field__input:focus-visible { outline: 3px solid var(--accent-ink); outline-offset: 2px; }
.field__hint { font-size: .86em; opacity: .85; }
.field__err {
    font-size: .9em;
    font-weight: 700;
    padding: .35em .6em;
    background: var(--surface);
    color: var(--accent-ink);
    border-left: 6px solid var(--accent-3);
}
.eform__hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.eform__checks { display: grid; gap: .9em; margin-top: var(--gap); }
.check {
    display: grid;
    grid-template-columns: minmax(0, auto) minmax(0, 1fr);
    gap: .2em .7em;
    align-items: start;
}
.check input { grid-column: 1; width: 24px; height: 24px; margin: 2px 0 0; accent-color: var(--accent); }
.check label { grid-column: 2; font-size: .97em; line-height: 1.45; }
.check .field__err { grid-column: 2; margin-top: .3em; }
.eform__note { margin-top: 1.4em; font-size: .95em; font-weight: 500; }
.eform__submit { margin: 1.2em 0 0; }
.eform__legal { margin-top: 1.4em; font-size: .86em; line-height: 1.55; max-width: 80ch; opacity: .9; }
.eform__summary {
    padding: clamp(16px, 1.5vw, 24px);
    margin-bottom: var(--gap);
    background: var(--surface);
    color: var(--text);
    border-left: 10px solid var(--accent-3);
    box-shadow: var(--shadow-sm);
}
.eform__summaryH { font-size: clamp(18px, 1.4vw, 24px); margin-bottom: .5em; }
.eform__summaryNote { font-size: .95em; }
.eform__summaryList { display: grid; gap: .4em; margin-top: .6em; }
.eform__summaryList a { color: var(--accent-ink); font-weight: 500; }

/* === TABLES (pricing) ==================================================== */
.tablewrap { margin-top: var(--gap); }
.ptable {
    width: 100%;
    border-collapse: collapse;
    background: var(--surface);
    color: var(--text);
    box-shadow: var(--shadow-sm);
}
.ptable caption {
    text-align: left;
    font-family: var(--font-head);
    font-size: clamp(18px, 1.5vw, 26px);
    padding: 0 0 .6em;
    color: var(--band-fg);
}
.ptable th, .ptable td {
    text-align: left;
    padding: 14px 16px;
    border-bottom: 1px solid var(--line);
    vertical-align: top;
}
.ptable thead th {
    background: var(--accent);
    color: var(--on-accent);
    font-family: var(--font-head);
    font-weight: 400;
    font-size: .95em;
    letter-spacing: .02em;
}
.ptable tbody th { font-weight: 700; font-size: 1.02em; }
.ptable td { font-size: .95em; }
.ptable .num { font-family: var(--font-head); font-variant-numeric: tabular-nums; white-space: nowrap; }
.ptable tbody tr:last-child th, .ptable tbody tr:last-child td { border-bottom: 0; }

/* === DECOR: marquee rules (DECOR_SYSTEM 8) =============================== */
.marquee {
    position: relative;
    overflow: hidden;
    margin: var(--band-pad) 0 0;
    padding: .25em 0;
    border-top: 3px solid currentColor;
    border-bottom: 3px solid currentColor;
    pointer-events: none;
    user-select: none;
}
.band--cut > .marquee:first-child { margin: 0 0 var(--band-pad); }
.marquee__track {
    display: flex;
    align-items: baseline;
    gap: .6em;
    white-space: nowrap;
    font-family: var(--font-head);
    font-size: clamp(22px, 3.4vw, 46px);
    line-height: 1.25;
    opacity: .9;
}
.marquee__dot { opacity: .5; }
.marquee--outline .marquee__track {
    color: transparent;
    -webkit-text-stroke: 2px var(--band-fg);
    opacity: .75;
}

/* === FOOTER ============================================================== */
.site-foot {
    background: var(--invert-bg);
    color: var(--invert-fg);
    --band-fg: var(--invert-fg);
    --band-bg: var(--invert-bg);
    padding: var(--band-pad) 0 clamp(20px, 3vw, 40px);
}
.site-foot__in {
    max-width: var(--maxw);
    margin: 0 auto;
    padding: 0 var(--pad);
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--gap);
}
.site-foot a { color: var(--invert-fg); }
.site-foot__brand { font-family: var(--font-head); font-size: clamp(22px, 2vw, 34px); margin: 0 0 .5em; }
.site-foot__line { max-width: 42ch; opacity: .86; font-size: .95em; }
.site-foot__h { font-family: var(--font-head); font-size: clamp(15px, 1.1vw, 18px); letter-spacing: .08em; text-transform: uppercase; margin-bottom: .9em; }
.site-foot__list { display: grid; gap: .55em; font-size: .95em; }
.site-foot__list .linkbtn { color: var(--invert-fg); text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 4px; }
.theme--foot { margin-top: 1.4em; background: transparent; color: var(--invert-fg); border-color: var(--invert-fg); }
.theme--foot .theme__icon { color: var(--invert-fg); }
.site-foot__base {
    max-width: var(--maxw);
    margin: var(--band-pad) auto 0;
    padding: clamp(18px, 2vw, 28px) var(--pad) 0;
    border-top: 3px solid var(--invert-fg);
    display: grid;
    gap: .8em;
}
.site-foot__disc { font-size: .92em; max-width: 90ch; margin: 0; }
.site-foot__copy { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .6em 1.4em; margin: 0; font-size: .88em; opacity: .9; }

/* === COOKIE LAYER ======================================================== */
.cookie {
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: 70;
    background: var(--surface);
    color: var(--text);
    border-top: 3px solid var(--text);
    max-height: 80vh;
    overflow-y: auto;
}
.cookie__in {
    max-width: var(--maxw);
    margin: 0 auto;
    padding: clamp(12px, 1.4vw, 20px) var(--pad);
    display: grid;
    gap: .7em;
}
.cookie__h { font-size: clamp(16px, 1.1vw, 20px); }
.cookie__text { font-size: .84em; line-height: 1.45; max-width: 100ch; }
.cookie__text p { margin-bottom: .45em; }
.cookie__acts { display: flex; flex-wrap: wrap; gap: 10px; }
.cookie__acts .btn { padding: 12px 18px; box-shadow: none; }
.cookie-noscript {
    padding: clamp(16px, 2vw, 24px) var(--pad);
    background: var(--surface-2);
    color: var(--text);
    font-size: .92em;
}
.cookie-noscript p { max-width: 90ch; margin: 0 auto; }

.cdialog {
    width: min(100% - 2rem, 44rem);
    max-height: 85vh;
    padding: 0;
    border: 3px solid var(--text);
    border-radius: var(--radius);
    background: var(--surface);
    color: var(--text);
}
.cdialog::backdrop { background: var(--backdrop); }
.cdialog__form { position: relative; padding: clamp(20px, 2.4vw, 34px); display: grid; gap: 1.2em; }
.cdialog__h { font-size: clamp(20px, 1.7vw, 28px); padding-right: 2.5em; }
.cdialog__intro { font-size: .92em; margin: 0; }
.cdialog__cats { display: grid; gap: 1em; }
.cdialog__cat { padding: 1em; border: 2px solid var(--line); border-radius: var(--radius); }
.cdialog__catHead { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .6em; }
.cdialog__catName { font-family: var(--font-head); font-size: clamp(15px, 1.2vw, 19px); }
.cdialog__always { font-size: .85em; color: var(--muted); }
.cdialog__sw { display: inline-flex; align-items: center; gap: .6em; cursor: pointer; }
.cdialog__sw input { width: 24px; height: 24px; accent-color: var(--accent); }
.cdialog__catText { margin: .6em 0 0; font-size: .88em; line-height: 1.5; color: var(--muted); }
.cdialog__acts { display: flex; flex-wrap: wrap; gap: 12px; }
.cdialog__close {
    position: absolute;
    top: 10px; right: 10px;
    width: 44px; height: 44px;
    border: 2px solid var(--line);
    border-radius: var(--radius);
    background: var(--surface);
    color: var(--text);
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
}

/* === LEGAL / DOCUMENT PAGES ============================================== */
.doc { background: var(--bg); color: var(--text); padding: var(--band-pad) 0; }
.doc__in { max-width: 900px; margin: 0 auto; padding: 0 var(--pad); }
.doc__updated { font-size: .9em; color: var(--muted); }
.doc h2 {
    font-size: clamp(22px, 2vw, 32px);
    margin: 2.2em 0 .7em;
    padding-top: .7em;
    border-top: 3px solid var(--line);
}
.doc h3 { font-size: clamp(17px, 1.3vw, 21px); margin: 1.6em 0 .5em; }
.doc p, .doc li { max-width: 74ch; }
.doc ul, .doc ol { display: grid; gap: .6em; margin: 1em 0; }
.doc ul li { position: relative; padding-left: 1.5em; }
.doc ul li::before { content: ""; position: absolute; left: 0; top: .6em; width: .7em; height: .25em; background: var(--accent-ink); }
.doc ol { counter-reset: docol; }
.doc ol li { position: relative; padding-left: 2.1em; counter-increment: docol; }
.doc ol li::before { content: counter(docol) "."; position: absolute; left: 0; top: 0; font-family: var(--font-head); color: var(--accent-ink); }
.doc__note {
    margin-top: 2.4em;
    padding: clamp(16px, 1.6vw, 24px);
    background: var(--surface-2);
    border-left: 10px solid var(--accent);
    font-size: .93em;
}
.doc__table { width: 100%; border-collapse: collapse; margin: 1.2em 0; background: var(--surface); }
.doc__table caption { text-align: left; font-weight: 700; padding-bottom: .5em; }
.doc__table th, .doc__table td { text-align: left; padding: 10px 12px; border: 1px solid var(--line); font-size: .9em; vertical-align: top; }
.doc__table thead th { background: var(--surface-2); font-family: var(--font-head); font-weight: 400; }

/* === PAGE LEAD (inner pages) ============================================= */
.crumbs { display: flex; flex-wrap: wrap; gap: .4em .6em; margin: 0 0 1.4em; font-size: .88em; }
.crumbs li { display: flex; align-items: center; gap: .6em; }
.crumbs li + li::before { content: "/"; opacity: .6; }
.lead-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "crumbs" "title" "text" "aside";
    gap: var(--gap);
}
.lead-grid__crumbs { grid-area: crumbs; }
.lead-grid__title { grid-area: title; }
.lead-grid__text { grid-area: text; }
.lead-grid__aside { grid-area: aside; align-self: start; }
.aside-card {
    background: var(--surface);
    color: var(--text);
    padding: clamp(18px, 1.8vw, 28px);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
}
.aside-card .alink { color: var(--accent-ink); }
.aside-card__h { font-size: clamp(17px, 1.3vw, 22px); margin-bottom: .7em; }

/* === FORMAT DETAIL (category pages) ====================================== */
.anchors { display: flex; flex-wrap: wrap; gap: .6em 1em; margin-top: var(--gap); }
.anchors a {
    display: inline-block;
    padding: 10px 16px;
    min-height: 44px;
    border: 3px solid currentColor;
    border-radius: var(--radius);
    font-family: var(--font-head);
    font-size: clamp(14px, 1.05vw, 17px);
}
.fdetail {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "head" "body" "side";
    gap: var(--gap);
    padding-top: var(--band-pad);
    border-top: 3px solid currentColor;
    scroll-margin-top: 90px;
}
.fdetail:first-of-type { border-top: 0; padding-top: var(--gap); }
.fdetail__head { grid-area: head; }
.fdetail__body { grid-area: body; }
.fdetail__side { grid-area: side; align-self: start; }
.fdetail__h { font-size: clamp(26px, 3vw, 48px); }
.fdetail__k {
    display: grid;
    gap: 0;
    margin: 0 0 1.2em;
    background: var(--surface);
    color: var(--text);
    padding: clamp(16px, 1.5vw, 24px);
    box-shadow: var(--shadow-sm);
}
.fdetail__k .facts__row:last-child { border-bottom: 0; }
.fdetail__k--after { margin-top: var(--gap); }
.fdetail__price { font-family: var(--font-head); font-size: clamp(24px, 2.4vw, 38px); color: var(--accent-ink); line-height: 1; }
.fdetail__range { font-size: .9em; color: var(--muted); }
.callout {
    margin-top: 1.4em;
    padding: clamp(14px, 1.4vw, 20px);
    background: var(--surface);
    color: var(--text);
    border-left: 10px solid var(--accent);
    font-size: .93em;
    box-shadow: var(--shadow-sm);
}

/* === CATALOGUE GROUPS (hub) ============================================== */
.groups {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: calc(var(--gap) * 1.2);
    margin-top: var(--gap);
}
.group { padding-top: var(--gap); border-top: 3px solid currentColor; }
.group__h { font-size: clamp(21px, 1.9vw, 30px); margin-bottom: .5em; }
.group__t { margin: 0 0 1em; max-width: 56ch; }
.group__list { display: grid; gap: .7em; }
.group__list li {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: .2em 1em;
    padding-bottom: .7em;
    border-bottom: 2px solid currentColor;
}
.group__list a { font-family: var(--font-head); font-size: clamp(16px, 1.2vw, 20px); }
.group__meta { font-size: .88em; opacity: .85; }
.group__link { margin-top: 1.1em; }

/* === PRICE TABLE DETAIL =================================================== */
.ptable__el { display: block; margin-top: .3em; font-weight: 400; font-size: .85em; color: var(--muted); }
.ptable__range { display: block; margin-top: .2em; font-size: .85em; color: var(--muted); white-space: nowrap; }

/* === PLAIN LINK LIST (own max-width, not borrowed from the footer) ======== */
.linklist { display: grid; gap: .55em; font-size: .95em; max-width: 30rem; }

/* === TIMELINE (run of night) ============================================= */
.tl { display: grid; gap: 0; margin-top: var(--gap); }
.tl__row {
    display: grid;
    grid-template-columns: minmax(0, auto) minmax(0, 1fr);
    gap: .4em 1.2em;
    padding: .9em 0;
    border-bottom: 2px solid currentColor;
}
.tl__row:first-child { border-top: 2px solid currentColor; }
.tl__t { grid-column: 1; font-family: var(--font-head); font-size: clamp(16px, 1.3vw, 22px); font-variant-numeric: tabular-nums; }
.tl__d { grid-column: 2; margin: 0; max-width: 62ch; }
.scen { padding-top: var(--band-pad); scroll-margin-top: 90px; }
.scen:first-of-type { padding-top: var(--gap); }
.scen__kind { font-family: var(--font-head); font-size: clamp(14px, 1.05vw, 17px); letter-spacing: .08em; text-transform: uppercase; margin-bottom: .6em; }

/* === ROLES / SIMPLE TILE GRID ============================================ */
.tiles {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--gap);
    margin-top: var(--gap);
}
.tile { padding: clamp(16px, 1.5vw, 24px); border: 3px solid currentColor; border-radius: var(--radius); }
.tile__h { font-size: clamp(17px, 1.3vw, 22px); margin-bottom: .5em; }

/* === THANK YOU / SOFT 404 ================================================ */
.simple { min-height: 50vh; display: grid; align-content: center; }

/* ===========================================================================
   BREAKPOINTS
   mobile < 768 | tablet 768-1279 (portrait 768-1023, landscape 1024-1279)
   desktop >= 1280
   ========================================================================= */

/* --- Mobile only: fewer decorative objects, smaller cut ------------------ */
@media (max-width: 639px) {
    .band--cut { clip-path: polygon(0 0, 55% 0, 55% 14px, 100% 14px, 100% 100%, 0 100%); padding-top: calc(var(--band-pad) + 14px); }
    .marquee--outline { display: none; }
    .frame { box-shadow: none; }
    .shots .frame:nth-child(3) { display: none; }
}

/* --- Mobile navigation --------------------------------------------------- */
@media (max-width: 1023px) {
    .site-head__in { flex-wrap: wrap; }
    .site-nav {
        flex-basis: 100%;
        order: 3;
        padding-bottom: 10px;
    }
    .has-js .site-nav[hidden] { display: none; }
    .has-js .site-nav { display: none; }
    .has-js .site-nav.is-open { display: block; }
}

/* --- Tablet and up ------------------------------------------------------- */
@media (min-width: 600px) {
    .shots { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (min-width: 768px) {
    :root { --pad: clamp(32px, 5vw, 88px); }
    .hero__in {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        grid-template-areas:
            "eyebrow eyebrow"
            "title   title"
            "lead    card"
            "cta     card"
            "lineup  lineup"
            "strip   strip"
            "photo   photo";
    }
    .cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .cats  { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .scope { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .eform__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .field--wide { grid-column: 1 / -1; }
    .teaser {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        grid-template-areas: "big list";
        align-items: start;
        gap: calc(var(--gap) * 1.4);
    }
    .split {
        grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
        grid-template-areas: "text fig";
        align-items: start;
        gap: calc(var(--gap) * 1.2);
    }
    .duo {
        grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
        grid-template-areas: "a b";
        align-items: start;
        gap: calc(var(--gap) * 1.2);
    }
    .stages, .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    /* Numbered lists that live inside a narrow text column stay single file. */
    .steps--flat, .split .steps, .split .stages { grid-template-columns: minmax(0, 1fr); }
    .lead-grid {
        grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr);
        grid-template-areas:
            "crumbs crumbs"
            "title  title"
            "text   aside";
        align-items: start;
    }
    .fdetail {
        grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr);
        grid-template-areas:
            "head head"
            "body side";
        align-items: start;
        gap: calc(var(--gap) * 1.2);
    }
    .site-foot__in { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .band--cut { clip-path: polygon(0 0, 33.333% 0, 33.333% 24px, 66.666% 24px, 66.666% 48px, 100% 48px, 100% 100%, 0 100%); padding-top: calc(var(--band-pad) + 48px); }
}

@media (min-width: 1024px) {
    .site-head__in { flex-wrap: nowrap; }
    .burger { display: none; }
    .site-nav { display: flex !important; align-items: center; gap: var(--gap); flex-wrap: wrap; justify-content: flex-end; }
    .site-nav__list { display: flex; flex-wrap: wrap; align-items: center; gap: clamp(14px, 1.6vw, 28px); }
    .site-nav__list a { padding: 8px 0; border-bottom: 0; white-space: nowrap; }
    .site-nav__list a[aria-current="page"] { box-shadow: inset 0 -6px 0 var(--accent); }
    .site-nav__side { padding: 0; gap: 14px; }
    .cards { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .cats  { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .groups { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .site-foot__in { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    /* Text and the three equal actions side by side, so the banner stays a
       strip and never covers the first screen. */
    .cookie__in {
        grid-template-columns: minmax(0, 1fr) minmax(0, 30rem);
        grid-template-areas: "h acts" "text acts";
        align-items: start;
        column-gap: var(--gap);
    }
    .cookie__h    { grid-area: h; }
    .cookie__text { grid-area: text; }
    .cookie__acts { grid-area: acts; align-self: center; }
}

/* Tablet landscape: the horizontal navigation only earns its place if it fits
   on one line with room to spare, so the theme button goes icon-only here.
   Its accessible name stays, set by aria-label in site.js. */
@media (min-width: 1024px) and (max-width: 1279px) {
    .site-nav { gap: 16px; }
    .site-nav__list { gap: 14px; font-size: .94em; }
    .theme { padding: 10px 12px; }
    .theme__label {
        position: absolute;
        width: 1px; height: 1px;
        margin: -1px; padding: 0;
        overflow: hidden; clip: rect(0 0 0 0);
        white-space: nowrap;
    }
    .btn--cta { padding: 12px 16px; }
}

@media (min-width: 1280px) {
    .hero__in {
        grid-template-columns: minmax(0, 1.4fr) minmax(0, .6fr);
        grid-template-areas:
            "eyebrow eyebrow"
            "title   card"
            "lead    card"
            "cta     card"
            "lineup  lineup"
            "strip   strip"
            "photo   photo";
        column-gap: calc(var(--gap) * 1.6);
    }
    .steps { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .stages { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .steps--flat, .split .steps, .split .stages { grid-template-columns: minmax(0, 1fr); }
}

/* --- Pricing table turns into cards on phones --------------------------- */
@media (max-width: 767px) {
    .ptable, .ptable tbody, .ptable tr, .ptable th, .ptable td { display: block; width: 100%; }
    .ptable thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
    .ptable tr {
        margin-bottom: var(--gap);
        border: 3px solid var(--accent);
        background: var(--surface);
    }
    .ptable tbody th { background: var(--accent); color: var(--on-accent); }
    .ptable th, .ptable td { border-bottom: 1px solid var(--line); }
    .ptable td::before {
        content: attr(data-label);
        display: block;
        font-size: .8em;
        font-weight: 700;
        letter-spacing: .04em;
        text-transform: uppercase;
        color: var(--muted);
        margin-bottom: .2em;
    }
}

/* --- Touch targets: phones and tablets are touch, so standalone links get a
       44px tall hit area. Links inside running paragraphs keep their flow. --- */
@media (max-width: 1279px) {
    .alink,
    .site-foot__list a,
    .site-foot__list .linkbtn,
    .site-foot__top,
    .linklist a,
    .crumbs a,
    .site-nav__list a {
        display: inline-flex;
        align-items: center;
        min-height: 44px;
    }
    .check input { width: 26px; height: 26px; }
}

/* --- Interaction guards -------------------------------------------------- */
@media (hover: hover) {
    .btn:hover { box-shadow: none; transform: translateY(3px); }
    .alink:hover { text-decoration-color: currentColor; }
    .card:hover { box-shadow: var(--shadow); }
    .cat:hover .cat__h a { text-decoration: underline; text-decoration-thickness: 3px; text-underline-offset: 4px; }
    .anchors a:hover { background: var(--band-fg); color: var(--band-bg); text-decoration: none; }
}

@media (prefers-reduced-motion: reduce) {
    body { transition: none; }
    .btn:hover { transform: none; }
    * { animation: none !important; scroll-behavior: auto !important; }
}

@media print {
    .site-head, .cookie, .cdialog, .marquee, .site-foot__top { display: none !important; }
    .band { padding: 1rem 0; }
}