/* ================================================================
   TCN LAYOUT SYSTEM — the one responsive foundation every template builds on.
   Mobile-first (design for a 375px phone, add min-width breakpoints upward).

   Breakpoints (CSS can't read a var in @media, so these are the only four used):
     sm 480px · md 768px · lg 1024px · xl 1280px
   Tokens:   --gutter  --container(-narrow/-wide)  --space-1…9  --section-y  --fs-*  --r-*  --sh-*
   Primitives (use these; do not write one-off widths, paddings or media queries):
     .l-container   centred, max-width, fluid side gutter, (the viewport meta has no viewport-fit=cover, so iOS insets are already respected)
     .l-section     vertical rhythm + a band: --cream | --white | --ink
     .l-grid        CSS grid: auto-fit by --min, or explicit --2 / --3 / --4 (1 → 2 → 3/4 cols)
     .l-split       two columns that stack on a phone (--reverse, --wide-left, --wide-right)
     .l-stack       flexbox column with a gap
     .l-cluster     flexbox row that wraps (buttons, chips, meta)
     .l-media       aspect-ratio box that crops its image/video
     .t-*           fluid type scale (display, h1…h4, lead, body, small, eyebrow)
   Rules: no fixed heights, no 100vw, no horizontal scroll, tap targets >= 44px,
   grid/flex children may shrink (min-width:0).
   ================================================================ */

:root {
    /* container + gutter: 16px on a small phone, up to 40px on desktop */
    --gutter: clamp(16px, 5vw, 40px);
    --container: 1200px;
    --container-narrow: 760px;
    --container-wide: 1360px;

    /* spacing: a 4px base on a 1.5-ish scale */
    --space-1: 4px;  --space-2: 8px;  --space-3: 12px; --space-4: 16px; --space-5: 24px;
    --space-6: 32px; --space-7: 48px; --space-8: 64px; --space-9: 96px;
    --section-y: clamp(44px, 9vw, 96px);        /* vertical padding of a band */
    --gap: var(--space-4);

    /* fluid type scale: min at 375px, max at ~1280px */
    --fs-xs: .75rem;
    --fs-sm: .875rem;
    --fs-md: 1rem;
    --fs-lead: clamp(1.0625rem, .98rem + .4vw, 1.25rem);
    --fs-h4: clamp(1rem, .95rem + .3vw, 1.125rem);
    --fs-h3: clamp(1.125rem, 1rem + .7vw, 1.5rem);
    --fs-h2: clamp(1.375rem, 1rem + 1.8vw, 2.25rem);
    --fs-h1: clamp(1.75rem, 1.1rem + 3vw, 3.5rem);
    --fs-display: clamp(2rem, 1rem + 4.6vw, 4.5rem);
    --lh-tight: 1.08;  --lh-snug: 1.25;  --lh-body: 1.6;

    /* shape + depth */
    --r-sm: 4px;  --r-md: 10px;  --r-lg: 16px;  --r-pill: 999px;
    --sh-1: 0 6px 24px rgba(10, 10, 10, .06);
    --sh-2: 0 14px 40px rgba(10, 10, 10, .12);
    --hairline: 1px solid rgba(10, 10, 10, .1);

    /* bands */
    --band-cream: #f4f7f3;
    --band-white: #fff;
    --band-ink: #0a0a0a;

    --tap: 44px;
}

/* ── guard rails ── */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
img, video, canvas, svg, iframe { max-width: 100%; }
img, video { height: auto; }
.l-grid > *, .l-split > *, .l-stack > *, .l-cluster > * { min-width: 0; }

/* ── container ── */
.l-container {
    width: min(100% - 2 * var(--gutter), var(--container));
    margin-inline: auto;
}
.l-container--narrow { width: min(100% - 2 * var(--gutter), var(--container-narrow)); }
.l-container--wide   { width: min(100% - 2 * var(--gutter), var(--container-wide)); }

/* ── section bands ── */
.l-section { padding-block: var(--section-y); background: var(--band, transparent); color: var(--ink); }
.l-section--tight { padding-block: calc(var(--section-y) * .6); }
.l-section--flush { padding-block: 0; }
.l-section--cream { --band: var(--band-cream); }
.l-section--white { --band: var(--band-white); }
.l-section--ink {
    --band: var(--band-ink);
    --ink: #fff; --muted: #b9c2d3; --faint: #8a93a6; --line: rgba(255,255,255,.16); --line-strong: rgba(255,255,255,.32);
    --panel: #151515; --panel-2: #1d1d1d; --inverse: #0a0a0a; --accent: var(--teal);
    color: #fff;
}

/* ── grid ── */
.l-grid {
    display: grid;
    gap: var(--gap);
    grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--min, 260px)), 1fr));
}
.l-grid--2, .l-grid--3, .l-grid--4 { grid-template-columns: 1fr; }
@media (min-width: 480px) { .l-grid--4 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 640px) { .l-grid--2, .l-grid--3 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 768px) { .l-grid--4 { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1024px) {
    .l-grid--3 { grid-template-columns: repeat(3, 1fr); }
    .l-grid--4 { grid-template-columns: repeat(4, 1fr); }
}
.l-grid--gap-sm { --gap: var(--space-3); }
.l-grid--gap-lg { --gap: var(--space-5); }
/* two-up on phones (compact catalogue cards) */
.l-grid--pair { grid-template-columns: repeat(2, 1fr); --gap: var(--space-3); }
@media (min-width: 768px) { .l-grid--pair { --gap: var(--space-4); grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1024px) { .l-grid--pair { grid-template-columns: repeat(4, 1fr); } }

/* ── split ── */
.l-split { display: grid; grid-template-columns: 1fr; gap: var(--space-6); align-items: center; }
@media (min-width: 768px) {
    .l-split { grid-template-columns: 1fr 1fr; gap: var(--space-7); }
    .l-split--wide-left  { grid-template-columns: 1.3fr 1fr; }
    .l-split--wide-right { grid-template-columns: 1fr 1.3fr; }
    .l-split--reverse > :first-child { order: 2; }
    .l-split--top { align-items: start; }
}

/* ── stack + cluster (flexbox) ── */
.l-stack { display: flex; flex-direction: column; gap: var(--stack, var(--space-4)); }
.l-stack--sm { --stack: var(--space-2); }
.l-stack--lg { --stack: var(--space-6); }
.l-cluster { display: flex; flex-wrap: wrap; align-items: center; gap: var(--cluster, var(--space-3)); }
.l-cluster--between { justify-content: space-between; }
.l-cluster--center { justify-content: center; }

/* ── media ── */
.l-media { position: relative; overflow: hidden; aspect-ratio: var(--ratio, 16 / 9); background: var(--panel-2, #eef1f5); }
.l-media > img, .l-media > video, .l-media > iframe { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border: 0; }

/* ── fluid type ── */
.t-display { font-size: var(--fs-display); line-height: var(--lh-tight); letter-spacing: -.035em; }
.t-h1 { font-size: var(--fs-h1); line-height: var(--lh-tight); letter-spacing: -.035em; }
.t-h2 { font-size: var(--fs-h2); line-height: var(--lh-tight); letter-spacing: -.03em; }
.t-h3 { font-size: var(--fs-h3); line-height: var(--lh-snug); letter-spacing: -.02em; }
.t-h4 { font-size: var(--fs-h4); line-height: var(--lh-snug); }
.t-lead { font-size: var(--fs-lead); line-height: var(--lh-body); color: var(--muted); }
.t-body { font-size: var(--fs-md); line-height: var(--lh-body); }
.t-small { font-size: var(--fs-sm); line-height: var(--lh-body); color: var(--muted); }
.t-eyebrow { font: 800 var(--fs-xs)/1 var(--dp-sans); letter-spacing: .18em; text-transform: uppercase; color: var(--muted); }
.t-display, .t-h1, .t-h2, .t-h3 { font-family: "Dela Gothic One", var(--dp-display); font-weight: 400; text-transform: uppercase; overflow-wrap: anywhere; text-wrap: balance; }

/* ── touch ── */
.l-tap { min-height: var(--tap); min-width: var(--tap); display: inline-flex; align-items: center; justify-content: center; }