/* ============================================================
   SANDOZ ADVISORY — STYLESHEET
   ============================================================

   CONTENTS
   ─────────────────────────────────────────────────────────
   1.  Variables        Colours, spacing, grid units
   2.  Foundations      Font, body, basic element resets
   3.  Type system      Size kit (f-72 → f-12), weight kit
   4.  Links            Universal link styles, states
   5.  Header           Logo mark and menu
   6.  Intro            Hero image, headline overlay, statement
   7.  Content grid     The 450px square grid and its modifiers
   8.  Images & text    Cell image, overlay, highlight text system
   9.  Footer           Footer layout and link styles
   10. Article layout   Editorial two-column article layout
   11. Responsive       Layout structure only — type scales automatically
   ─────────────────────────────────────────────────────────
*/


/* ============================================================
   1. VARIABLES
   ============================================================ */

:root {

    /* --- Colours --- */
    --color-bg:     #f5f5f5;
    --color-text:   #1a1a1a;
    --color-white:  #ffffff;
    --color-grey:   #ededed;
    --color-yellow: #fde724;

    /* --- Alignment spine ---
       visual-start: where images and grids begin (left edge)
       text-start:   where text begins (indented further right)
       text-push:    internal padding inside grid cells */
    --visual-start: 150px;
    --text-start:   200px;
    --text-push:    50px;

    /* --- Grid unit ---
       unit-size is one cell (450px). unit-width-2 is two cells. */
    --unit-size:    450px;
    --unit-width-2: 900px;
}


/* ============================================================
   2. FOUNDATIONS
   Font loading, body defaults, and global element resets.
   ============================================================ */

@font-face {
    font-family: 'Inter';
    src: url('/assets/fonts/Inter-VariableFont_opsz,wght.ttf') format('truetype');
    font-weight: 100 900;
}

body {
    background-color: var(--color-bg);
    color: var(--color-text);
    font-family: 'Inter', sans-serif;
    margin: 0;
    padding: 0;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

.page-wrapper {
    width: 100%;
    max-width: none;
}

h1 {
    margin-left: var(--text-start);
    margin-top: 60px;
    margin-bottom: 40px;
}

/* When hide_title: true, layout renders an empty h1 for spacing.
   Margins collapse on empty elements, so use padding instead. */
h1:empty {
    margin: 0;
    padding-top: 40px;
    padding-bottom: 40px;
}

/* Superscript — used for the C in Value^C */
sup {
    font-size: 0.55em;
    vertical-align: baseline;
    position: relative;
    top: -1.2em;
    left: 0.1em;
    font-weight: 600;
    display: inline-block;
    text-decoration: none !important;
}

/* Neutraliser — strips browser default margins and sizes from all
   content elements inside grid cells. The cell itself sets the
   defaults; add f- or w- classes only when you need to deviate. */
.cell h3,
.cell h4,
.cell p,
.cell a,
.cell ul,
.cell li {
    font-size: inherit;
    font-weight: inherit;
    margin: 0;
    padding: 0;
    line-height: inherit;
    list-style: disc;
}

.cell ul {
    padding-left: 1.2em;
}


/* ============================================================
   3. TYPE SYSTEM
   ─────────────────────────────────────────────────────────
   All sizes use clamp(minimum, fluid, maximum).
   Type scales smoothly with the viewport — no responsive
   overrides needed. Add a class only when deviating from
   the cell default (18pt light).

   f-72   Hero headline (image overlay)
   f-48   Large cell statement
   f-32   Page title (h1)
   f-24   Grid cell heading
   f-18   Body copy, menu — also the cell default
   f-14   Small body copy
   f-12   Captions, tags, footer links
   ─────────────────────────────────────────────────────────
   clamp(min, preferred-vw, max)
   The vw value is calibrated to hit the max size at ~1200px width.
   ============================================================ */

.f-72 { font-size: clamp(28pt, 8vw,   72pt) !important; line-height: 1.2 !important; letter-spacing: -0.02em !important; }
.f-48 { font-size: clamp(20pt, 5.3vw, 48pt) !important; line-height: 1.2 !important; letter-spacing: -0.02em !important; }
.f-32 { font-size: clamp(18pt, 3.6vw, 32pt) !important; line-height: 1.2 !important; letter-spacing: -0.02em !important; }
.f-24 { font-size: clamp(14pt, 2.7vw, 24pt) !important; line-height: 1.3 !important; }
.f-18 { font-size: clamp(12pt, 2vw,   18pt) !important; line-height: 1.5 !important; }
.f-14 { font-size: clamp(10pt, 1.6vw, 14pt) !important; line-height: 1.4 !important; }
.f-14.lh-loose { line-height: 1.8 !important; }
.f-12 { font-size: clamp(9pt,  1.3vw, 12pt) !important; line-height: 1.2 !important; }

/* --- Weight kit --- */
.w-light { font-weight: 300 !important; }
.w-reg   { font-weight: 400 !important; }
.w-bold  { font-weight: 700 !important; }
.w-extra { font-weight: 900 !important; }


/* ============================================================
   4. LINKS
   ============================================================ */

a {
    color: inherit;
    text-decoration: underline;
    text-underline-offset: 4px;
    text-decoration-thickness: 1px;
    text-decoration-color: var(--color-text);
    transition: all 0.2s ease;
}

a:hover {
    color: #888 !important;
    text-decoration-color: #888 !important;
}

a .w-extra,
a .w-bold {
    color: inherit;
    text-decoration: inherit;
}

/* Active page — looks like text, not a link */
.active-page {
    text-decoration: none !important;
    color: inherit !important;
    cursor: default;
}

/* Not-live — greyed out, not clickable */
.not-live {
    opacity: 0.3;
    text-decoration: none;
    cursor: default;
    pointer-events: none;
    display: inline-block;
}
/* Menu uses flex gap — no margin-right needed */
.menu .not-live { margin-right: 0; }
/* Footer rows use inline block + margin-right — match link spacing */
.footer-row .not-live { margin-right: 20px; }


/* ============================================================
   5. HEADER
   ============================================================ */

.mark {
    font-family: 'Inter', sans-serif;
    font-size: clamp(18pt, 2.5vw, 24pt); /* fluid like the type kit */
    font-weight: 800;
    letter-spacing: -0.04em;
    font-feature-settings: "ss01" on, "case" on;
    color: var(--color-text);
    display: flex;
    align-items: center;
    gap: 70px;
    margin-top: 125px;
    margin-left: var(--text-start);
}

/* Logo glyph — the ↑S mark */
.mark-logo { font-weight: 800; }
.mark-logo span { font-weight: 900; }

/* Upstream Creativity — matches nav weight and size */
.mark-title {
    font-weight: 300;
    letter-spacing: 0.01em;
    font-size: clamp(12pt, 2vw, 18pt); /* matches f-18 */
    color: var(--color-text);
    opacity: 0.7;
    transition: opacity 0.2s ease;
}
span.mark-title { text-decoration: none; }
a.mark-title:hover { opacity: 1; }


/* Pipe between logo and title — reuses nav-pipe opacity */
.mark-pipe { font-weight: 300; }


.menu {
    margin-top: 60px;
    margin-left: var(--text-start);
    display: flex;
    flex-direction: row;
    align-items: center;
    flex-wrap: nowrap;
    gap: 0 24px;
}

.nav-pipe {
    opacity: 0.25;
    font-weight: 300;
}


/* ============================================================
   6. INTRO
   ============================================================ */

.render-container {
    position: relative;
    margin-left: var(--visual-start);
    width: var(--unit-width-2);
    height: var(--unit-width-2);
    margin-top: 60px;
    margin-bottom: 60px;
}

.render-container img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.render-headline {
    position: absolute;
    top: 0; left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding-left: var(--text-push);
    box-sizing: border-box;
}

.render-headline h2 {
    letter-spacing: -0.02em;
    line-height: 1.3 !important;
    max-width: 700px;
    margin: 0;
}

.render-headline span {
    background-color: var(--color-bg);
    padding: 0.1em 0.2em 0.25em;
    box-decoration-break: clone;
    -webkit-box-decoration-break: clone;
}

/* Statement — indented copy block between grids.
   margin-top is 0: the preceding grid's margin-bottom provides the top gap.
   margin-bottom provides the gap before the next grid. */
.statement {
    margin-left: var(--text-start);
    margin-top: 0;
    margin-bottom: 60px;
    max-width: 800px;
    line-height: 1.5;
}

/* When a statement uses <p> tags instead of <br><br>, give them equal spacing */
.statement p {
    margin: 0 0 1.2em 0;
}
.statement p:last-child {
    margin-bottom: 0;
}


/* ============================================================
   7. CONTENT GRID
   ─────────────────────────────────────────────────────────
   .grid          The 2-column 900px container
   .cell          One square (450 × 450) — the base unit

   Spacing:
   .grid has margin-bottom: 80px by default — no spacers needed.
   .grid.flush    Removes bottom margin — use when two grids should
                  sit directly against each other (e.g. intro cells
                  above a full-width portrait).

   Span modifiers (add to .cell):
   .cell-wide     900 × 450 — full width, half height
   .cell-tall     450 × 900 — portrait, next two cells stack right
   .cell-full     900 × 900 — full width, full height

   Content modifiers (add to .cell):
   .cell-copy     Text-first cell — auto height, top-aligned
   .has-img       Cell contains a background image
   .pad-v-lg      Extra vertical padding (80px) — use with .cell-copy

   Three-column variant:
   .grid.thirds   3-column grid of 300px squares
   ============================================================ */

.grid {
    width: var(--unit-width-2);
    margin-left: var(--visual-start);
    display: grid;
    grid-template-columns: repeat(2, var(--unit-size));
    margin-bottom: 60px;
}

/* Flush — sit this grid directly against the next; no bottom gap.
   Use when two grids form a visual pair (e.g. intro cells + hero image). */
.grid.flush {
    margin-bottom: 0 !important;
}

/* Cell default: 18pt light, 20px gap between children. */
.cell {
    width: var(--unit-size);
    height: var(--unit-size);
    padding-left: var(--text-push);
    padding-right: var(--text-push);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    gap: 20px;
    box-sizing: border-box;
    position: relative;
    overflow: hidden;
    font-size: clamp(12pt, 2vw, 18pt); /* matches f-18 */
    font-weight: 300;
    line-height: 1.5;
}

.column-stack { display: contents; }

/* --- Span modifiers --- */

/* Full width, half height: 900 × 450 */
.cell-wide {
    grid-column: 1 / -1;
    width: 100% !important;
}

/* Full-width text strip — auto height, content top-aligned */
.cell-wide.cell-copy {
    height: auto !important;
    padding-top: 40px;
    padding-bottom: 40px;
    justify-content: flex-start !important;
}

/* Extra vertical breathing room — add to any cell-copy cell */
.pad-v-lg {
    padding-top: 80px !important;
    padding-bottom: 80px !important;
}

/* Full-width video cell — height driven by 16:9 iframe, no cropping */
.cell-wide.cell-video {
    height: auto !important;
    padding: 0 !important;
}

.cell-wide.cell-video iframe {
    width: 100%;
    aspect-ratio: 16 / 9;
    display: block;
    border: none;
}

/* Full width, full height: 900 × 900 */
.cell-full {
    grid-column: 1 / -1;
    grid-row: span 2;
    width: 100% !important;
    height: auto !important;
    min-height: var(--unit-width-2);
}

/* Tall portrait: 450 × 900 — place first, next two cells stack right */
.cell-tall {
    grid-row: span 2;
    height: auto !important;
    min-height: var(--unit-width-2);
}

/* Quad grid — 4 columns of half-unit cells (225×225 at desktop).
   !important required: Tier 2/3 breakpoints set .grid columns with !important,
   which would otherwise collapse this to 2 columns despite higher specificity. */
.grid.quad {
    grid-template-columns: repeat(4, calc(var(--unit-size) / 2)) !important;
}
/* Quarter cells: override .cell's hard-coded 450px width/height; set padding here not inline */
.grid.quad .cell {
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 1 / 1;
    padding: 32px !important;
    justify-content: flex-start !important;
}
.grid.quad .cell h3 { width: 100%; text-align: center; }
/* Full-width cell in quad grid — overrides the 1/1 aspect-ratio set on .grid.quad .cell.
   Padding horizontal uses var(--text-push) to align text with statement blocks. */
.grid.quad .cell-wide {
    aspect-ratio: auto !important;
    padding: 32px var(--text-push) !important;
}

/* Row 1 intro cell — padding matches quad cells, releases aspect-ratio at Tier 5 */
.pad-intro { padding: 32px !important; aspect-ratio: 1 / 1; text-align: center; align-items: center; }

/* Three-column grid — single row of 3 equal squares (300×300 at desktop).
   Add .thirds to any .grid to switch it to 3 columns.
   A cell-wide cell-copy at the top of the same grid works fine — spans all 3 columns. */
.grid.thirds {
    grid-template-columns: repeat(3, 1fr);
}
.grid.thirds .cell {
    width: 100%;
    height: auto;
}
/* Square only the image/content cells, not copy strips */
.grid.thirds .cell:not(.cell-copy) {
    aspect-ratio: 1 / 1;
}
/* Text-only thirds cells — centred */
.grid.thirds .cell.cell-copy {
    text-align: center;
    align-items: center;
    justify-content: center;
    padding-top: 40px;
    padding-bottom: 40px;
}

/* Type scale for thirds cells — remapped to suit 300px cells.
   Write the same f- classes; they resolve to sizes appropriate for the smaller context.
   .cell-copy is excluded so narrative strips keep their normal type sizes. */
.grid.thirds .cell:not(.cell-copy)           { font-size: clamp(9pt,  1.4vw, 12pt); }
.grid.thirds .cell:not(.cell-copy) .f-24     { font-size: clamp(11pt, 1.8vw, 16pt) !important; line-height: 1.3 !important; }
.grid.thirds .cell:not(.cell-copy) .f-18     { font-size: clamp(9pt,  1.4vw, 12pt) !important; }
/* cell-center thirds (index disciplines) — lift f-18 above the default thirds cap */
.grid.thirds .cell.cell-center .f-18         { font-size: clamp(9pt,  1.8vw, 18pt) !important; }
.grid.thirds .cell:not(.cell-copy) .f-14     { font-size: clamp(8pt,  1.2vw, 10pt) !important; }
.grid.thirds .cell:not(.cell-copy) .f-12     { font-size: clamp(7pt,  1.0vw,  9pt) !important; }
/* Copy cells: font matches the statement (full f-18 scale).
   Line breaks in HTML are structured so no segment exceeds the 200px content width at 18pt. */

/* Two-column grid — holds 2-column layout at every tier.
   Use for image pairs or logo grids that should never stack to one column. */
.grid.cols-2 {
    grid-template-columns: repeat(2, 1fr) !important;
}

/* Cases grid — 3 auto-height text columns.
   Use for short anonymous case studies or any list of text-only entries.
   Drops to 2 columns at Tier 3 (narrow tablet), 1 column at Tier 4+.
   Usage: <div class="grid cases"> */
.grid.cases {
    grid-template-columns: repeat(3, 1fr);
}
.grid.cases .cell {
    width: 100% !important;
    min-width: 0 !important;
    height: auto !important;
    aspect-ratio: unset !important;
    min-height: 0 !important;
    justify-content: flex-start !important;
    align-items: flex-start !important;
    padding-top: var(--text-push) !important;
    padding-bottom: var(--text-push) !important;
}

/* Video cell — 16:9 responsive embed, full width of the cell.
   Usage: add has-video to the cell, wrap iframe in <div class="cell-video">.
   Works with cell-wide (900px) or cell-full. */
.cell.has-video {
    height: auto !important;
    padding: 0 !important;
}
.cell-video {
    position: relative;
    width: 100%;
    padding-bottom: 56.25%; /* 16:9 */
    height: 0;
}
.cell-video iframe {
    position: absolute;
    top: 0; left: 0;
    width: 100%;
    height: 100%;
    display: block;
}

/* Frame modifier — cell background becomes the frame colour, inner div provides the content surface.
   Usage: add cell-frame to the cell, wrap cell content in <div class="cell-frame-inner">.
   Set bg-black (or any colour) on the cell itself for the frame colour. */
.cell-frame {
    padding: 20px !important;
}
.cell-frame-inner {
    background: var(--color-white);
    color: var(--color-text);
    width: 100%;
    height: 100%;
    padding: var(--text-push);
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 20px;
}

.cell-frame-inner.centered {
    align-items: center;
    text-align: center;
}

.cell-frame-inner.dark {
    background: var(--color-text);
    color: var(--color-white);
}

.clear { display: none; }

/* Centred cell — content centred horizontally and text-aligned centre.
   Replaces cell-frame-inner.centered when no frame is needed. */
.cell-center {
    align-items: center !important;
    text-align: center !important;
}

/* Right-aligned cell — content pushed right, text right.
   Overridden to left at T4 (see media query). */
.cell-right {
    align-items: flex-end !important;
    text-align: right !important;
}

/* Shallow cell — square at T1–T3 (default cell behaviour), auto-height at T4.
   Used for step sections where mobile needs flex height, not locked squares. */

/* steps-fluid: UpSchema step grid — auto-height above T4 only.
   T4 is handled entirely by the cell-shallow rule in the T4 media query below.
   Value's step grid (no modifier) stays square at T1–T3. */
@media (min-width: 751px) {
    .steps-fluid .cell.cell-shallow {
        height: auto !important;
        aspect-ratio: unset !important;
        /* padding controlled per-cell via inline styles in upschema.md */
    }
}

/* --- Background colours --- */
.bg-white  { background-color: var(--color-white); }
.bg-page   { background-color: var(--color-bg); }
.bg-grey   { background-color: var(--color-grey); }
.bg-black  { background-color: var(--color-text); color: var(--color-white); }
.bg-black a { color: var(--color-white); text-decoration-color: rgba(255,255,255,0.4); }
.cell-caption-light a { color: var(--color-text); text-decoration-color: var(--color-text); }
.bg-yellow { background-color: var(--color-yellow); }


/* ============================================================
   8. IMAGES & TEXT IN CELLS
   ─────────────────────────────────────────────────────────
   .cell-img      Absolute-fills the cell with an image
   .cell-overlay  Positions text over the image (z-index 5)
   .cell-caption  Small tag pinned bottom-right
   .hl-span       Highlight text — coloured band behind words
   ============================================================ */

/* Image fill — absolutely covers the cell */
.cell-img {
    position: absolute;
    top: 0; left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
}

.cell-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}


/* Text overlay — floats above the image */
.cell.has-img .cell-overlay {
    position: relative;
    z-index: 5;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
}

/* Pinned overlay — absolutely positioned, inset by --text-push from any corner.
   Use with a position modifier class (e.g. .pin-tl for top-left).
   z-index 5 keeps it above .cell-img. */
.cell-overlay-pin {
    position: absolute;
    z-index: 5;
}
.pin-tl {
    top:  var(--text-push);
    left: var(--text-push);
}
.pin-br {
    bottom: var(--text-push);
    right:  var(--text-push);
}

/* Caption tag — bottom-right corner */
.cell-caption {
    position: absolute;
    bottom: 0;
    right: 0;
    background: var(--color-text);
    color: #fff;
    padding: 8px 12px;
    z-index: 10;
    font-size: clamp(9pt, 1.3vw, 12pt);
    font-weight: 300;
}

/* Light caption variant — white background, dark text, full-width centred.
   Use on cells where a heavy dark tab would feel out of place (e.g. logo grids). */
.cell-caption-light {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: #fff;
    color: var(--color-text);
    padding: 8px 12px;
    z-index: 10;
    font-size: clamp(9pt, 1.3vw, 12pt);
    font-weight: 300;
    text-align: center;
}

/* Highlight text — coloured band behind words.
   Apply .hl-span plus a colour class to the parent. */
.hl-span span {
    padding: 0.08em 0.3em 0.22em;  /* more below baseline — protects descenders (g, y, p) */
    box-decoration-break: clone;
    -webkit-box-decoration-break: clone;
    display: inline;
    line-height: inherit;
}

/* When large type wraps inside a highlight, the next line's background box
   (box-decoration-break: clone) can paint over the descenders of the line above
   at line-height 1.2. Looser leading fixes this without affecting non-highlighted uses. */
.hl-span .f-72,
.hl-span .f-48,
.hl-span .f-32 { line-height: 1.4 !important; }

.hl-yellow span { background-color: var(--color-yellow); color: #000; }
.hl-black span  { background-color: var(--color-text);   color: #fff; }
.hl-white span  { background-color: #fff;                color: #000; }
.hl-page span   { background-color: var(--color-bg);     color: #000; }


/* ============================================================
   9. FOOTER
   ============================================================ */

.footer-system {
    width: var(--unit-width-2);
    margin-left: var(--visual-start);
    background-color: var(--color-bg);
    color: var(--color-text);
    padding: 60px 50px;
    box-sizing: border-box;
    margin-top: 60px;
}

.footer-system .f-24 { margin-bottom: 2px; }
.footer-system .footer-title { margin-bottom: 40px; }
.footer-system .f-18 { margin-bottom: 16px; }

.footer-row {
    display: block;
    margin-bottom: 24px;
    line-height: 1.4;
}

.footer-system a {
    color: var(--color-text);
    margin-right: 20px;
    text-decoration-color: var(--color-text);
}

.footer-system a:hover {
    color: #888 !important;
    text-decoration-color: #888 !important;
}

.footer-system .active-page {
    color: inherit;
    margin-right: 20px;
}

/* Footer rows: pin font above the f-12 clamp minimum so mid-tiers stay readable */
.footer-system .footer-row { font-size: 13pt !important; line-height: 1.7 !important; }


/* ============================================================
   10. ARTICLE LAYOUT
   ─────────────────────────────────────────────────────────
   Used by layout: article. Long-form reading layout on the
   same text-start / visual-start spine as all other pages.
   Grids and cells drop straight in — no wrapper needed.

   Frontmatter fields:
     kicker  — small label rendered above the h1
     date    — rendered below the h1, formatted "Month Year"

   In the page body:
     Wrap running text in .article-text blocks.
     Use .grid / .cell as normal for visual elements.
     Inside .article-text, --- renders as a section rule.
   ============================================================ */

.article-kicker {
    display: block;
    margin-left: var(--text-start);
    margin-top: 40px;
    margin-bottom: 6px;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    opacity: 0.45;
}

/* Collapse h1 top margin when a kicker sits above it */
.has-kicker h1 { margin-top: 8px !important; }

.article-date {
    display: block;
    margin-left: var(--text-start);
    margin-top: 10px;
    margin-bottom: 80px;
    opacity: 0.4;
}

/* Reading text — same spine as .statement, comfortable measure */
.article-text {
    margin-left: var(--text-start);
    max-width: 700px;
    margin-bottom: 60px;
    font-size: clamp(11pt, 1.6vw, 15pt);
    font-weight: 300;
    line-height: 1.85;
}

.article-text p {
    margin: 0 0 1.4em 0;
    font-size: inherit;
    font-weight: inherit;
    line-height: inherit;
}

.article-text p:last-child { margin-bottom: 0; }

.article-text h2 {
    font-size: clamp(13pt, 1.8vw, 20pt);
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 1.3;
    margin: 1.8em 0 0.5em 0;
}

.article-text h3 {
    font-size: clamp(11pt, 1.5vw, 15pt);
    font-weight: 700;
    line-height: 1.4;
    margin: 1.5em 0 0.3em 0;
}

.article-text hr {
    border: none;
    border-top: 1px solid rgba(26, 26, 26, 0.15);
    margin: 2.5em 0;
}

.article-text strong { font-weight: 700; }
.article-text em     { font-style: italic; }

/* --- Main column + sidebar grid ---
   Two-thirds / one-third split within the standard 900px grid.
   Add .main-sidebar to any .grid. Put the wider content cell
   first, the narrower sidebar cell second.
   Both cells use .cell-copy so height follows content.
   width: 100% on cells lets them fill their grid track —
   without this, the cell's default 450px overrides the column. */
.grid.main-sidebar {
    grid-template-columns: 2fr 1fr !important;
}
.grid.main-sidebar .cell {
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    padding-top: var(--text-push) !important;
    padding-bottom: var(--text-push) !important;
    justify-content: flex-start !important;
    align-items: flex-start !important;
}

/* --- Drop cap: CSS first-letter ---
   Add .drop-cap to any .article-text block.
   Selector targets the block directly — works whether or not the content
   is wrapped in <p> tags (the ::first-letter propagates into the first
   block-level child automatically).
   initial-letter: N is used where supported; the browser reads the font's
   actual cap-height metric and sizes the letter to span exactly N lines.
   -webkit-initial-letter covers Safari < 17.2.
   Float fallback for older browsers. */
.article-text.drop-cap::first-letter {
    font-family: 'Inter', sans-serif;
    font-weight: 900;
    -webkit-initial-letter: 2;
    initial-letter: 2;
    margin-right: 0.3em;
    margin-bottom: 0.08em;
    letter-spacing: -0.03em;
}
@supports not ((initial-letter: 2) or (-webkit-initial-letter: 2)) {
    .article-text.drop-cap::first-letter {
        font-size: 4.74em;
        float: left;
        line-height: 0.78;
        margin: 0.04em 0.3em 0.08em 0;
    }
}
/* Three-line variant — use .drop-cap-3 instead of .drop-cap */
.article-text.drop-cap-3::first-letter {
    font-family: 'Inter', sans-serif;
    font-weight: 900;
    -webkit-initial-letter: 3;
    initial-letter: 3;
    margin-right: 0.14em;
    letter-spacing: -0.03em;
}
@supports not ((initial-letter: 3) or (-webkit-initial-letter: 3)) {
    .article-text.drop-cap-3::first-letter {
        font-size: 6.8em;
        float: left;
        line-height: 0.78;
        margin: 0.04em 0.14em 0 0;
    }
}

/* --- Drop cap: black block initial ---
   Place a .initial-cap div before the first <p> inside
   .article-text. The letter floats left of the opening text.
   Set the text inside to 1–2 characters.
   Adjust width/height for longer initials. */
.initial-cap {
    float: left;
    background: #000;
    color: #fff;
    width: 110px;
    height: 110px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Inter', sans-serif;
    font-size: 56pt;
    font-weight: 900;
    letter-spacing: -0.04em;
    margin-right: 18px;
    margin-bottom: 10px;
    flex-shrink: 0;
}


/* ============================================================
   11. RESPONSIVE
   ─────────────────────────────────────────────────────────
   Type scales automatically via clamp() — no font overrides here.
   These breakpoints handle layout widths and grid structure only.

   Tier 2 — Wide tablet   max 1150px   grid: 375px units / 750px wide
   Tier 3 — Narrow tablet max 950px    grid: 300px units / 600px wide
   Tier 4 — Mobile        max 750px    single column, fluid width capped at 450px
   ============================================================ */


/* --- Tier 2: Wide tablet (max 1150px) --- */
@media screen and (max-width: 1150px) {
    :root {
        --unit-size:    375px;
        --unit-width-2: 750px;
        --visual-start: 80px;
        --text-push:    40px;
    }
    .grid, .render-container,
    .footer-system, .statement, .mark, .menu, h1 {
        width: 750px !important;
        margin-left: 80px !important;
    }
    .grid         { grid-template-columns: repeat(2, var(--unit-size)) !important; margin-bottom: 60px !important; }
    .grid.flush   { margin-bottom: 0 !important; }
    .grid.thirds  { grid-template-columns: repeat(3, 1fr) !important; }
    .grid.cases   { grid-template-columns: repeat(3, 1fr) !important; }
    .cell         { display: flex !important; flex-direction: column !important;
                    justify-content: center !important; overflow: hidden !important; gap: 16px !important; }
    .render-container { aspect-ratio: 1/1 !important; height: auto !important;
                        margin-top: 60px !important; margin-bottom: 60px !important; }
    .statement        { margin-bottom: 60px !important; }
    .menu             { margin-top: 60px !important; font-size: 14pt !important; gap: 0 20px !important; }
    .mark             { margin-top: 80px !important; gap: 52px !important; }
    .mark-title       { font-size: 14pt !important; }
    .nav-trim         { display: none; }
    .footer-system    { padding: 60px 50px !important; margin-top: 60px !important; }
    /* Quad + intro padding: Tier 2 cells are 187px — step padding down */
    .grid.quad .cell          { aspect-ratio: auto !important; padding: 24px !important; justify-content: flex-start !important; }
    .grid.quad .cell-wide { padding: 24px var(--text-push) !important; }
    .pad-intro                { padding: 24px !important; }
    /* Thirds copy: 250px cells, cap font so long lines don't wrap */
    .grid.thirds .cell.cell-copy .f-18 { font-size: clamp(11pt, 2vw, 14pt) !important; }
    /* Article: match grid margin */
    .article-kicker, .article-date, .article-text { margin-left: 80px !important; }
}


/* --- Tier 3: Narrow tablet (max 950px) --- */
@media screen and (max-width: 950px) {
    :root {
        --unit-size:    300px;
        --unit-width-2: 600px;
        --visual-start: 60px;
        --text-push:    30px;
    }
    .grid, .render-container,
    .footer-system, .statement, .mark, .menu, h1 {
        width: 600px !important;
        margin-left: 60px !important;
    }
    .cell        { gap: 12px !important; }
    .grid        { margin-bottom: 40px !important; }
    .grid.flush  { margin-bottom: 0 !important; }
    .grid.thirds { grid-template-columns: repeat(3, 1fr) !important; }
    .grid.cases  { grid-template-columns: repeat(2, 1fr) !important; }
    .render-container { margin-top: 40px !important; margin-bottom: 40px !important; }
    .statement        { margin-bottom: 40px !important; }
    .menu             { margin-top: 40px !important; font-size: 14pt !important; gap: 0 14px !important; }
    .mark             { margin-top: 60px !important; gap: 50px !important; }
    .mark-title { font-size: 11pt !important; }
    .mark-pipe  { display: none !important; }
    .footer-system    { padding: 40px 40px !important; margin-top: 40px !important; }
    /* Quad + intro padding: Tier 3 cells are 150px — step padding down further */
    .grid.quad .cell          { aspect-ratio: auto !important; padding: 16px !important; justify-content: flex-start !important; }
    .grid.quad .cell-wide { padding: 16px var(--text-push) !important; }
    .pad-intro                { padding: 16px !important; }
    /* Thirds copy: 200px cells / 30px text-push = 140px content — 11pt matches T4 max */
    .grid.thirds .cell.cell-copy .f-18 { font-size: clamp(9pt, 1.8vw, 11pt) !important; }
    .grid.thirds .cell.cell-copy { padding-top: 24px !important; padding-bottom: 24px !important; }
    /* Article: match grid margin */
    .article-kicker, .article-date, .article-text { margin-left: 60px !important; }
}


/* --- Tier 4: Mobile (max 750px) ---
   Single column, fluid width capped at 450px.
   Covers both phablet (551–750px) and phone (≤550px) — no fifth tier needed.
   Type uses clamp() so it scales smoothly on all phone sizes. */
@media screen and (max-width: 750px) {
    :root {
        --text-push: 25px;
    }
    .grid, .render-container,
    .footer-system, .statement, .mark, .menu, h1 {
        width: calc(100% - 40px) !important;
        max-width: 450px !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }
    .grid         { grid-template-columns: 1fr !important; margin-bottom: 28px !important; }
    .grid.flush   { margin-bottom: 0 !important; }
    .render-container { margin-top: 28px !important; margin-bottom: 28px !important; }
    .statement        { margin-bottom: 28px !important; }
    .menu             { margin-top: 28px !important; flex-wrap: nowrap !important; }
    .mark             { margin-top: 36px !important; gap: 32px !important; }
    .cell         { width: 100% !important; aspect-ratio: 1/1 !important; height: auto !important; gap: 12px !important;
                    font-size: clamp(11pt, 4vw, 14pt) !important; line-height: 1.5 !important; }
    .cell-wide.cell-copy { aspect-ratio: auto !important; }
    .cell.cell-fluid     { aspect-ratio: auto !important; padding-top: 40px !important; padding-bottom: 40px !important; }
    .cell.cell-crop      { aspect-ratio: 4/3 !important; }
    .cell.has-video      { aspect-ratio: unset !important; height: auto !important; }
    .cell-order-1 { order: 1 !important; }
    .cell-order-2 { order: 2 !important; }
    .cell-order-3 { order: 3 !important; }
    .cell-order-4 { order: 4 !important; }
    .cell-hide    { display: none !important; }
    .cell-tall    { grid-row: auto !important; min-height: 0 !important; }
    .cell-full    { grid-row: auto !important; min-height: 0 !important; }
    /* Thirds: single column strips at T4 */
    .grid.thirds      { grid-template-columns: 1fr !important; }
    .grid.thirds .cell { aspect-ratio: auto !important; height: auto !important;
                         padding: 32px var(--text-push) !important; }
    .grid.cases       { grid-template-columns: 1fr !important; }
    /* Cols-2: always 2 columns */
    .grid.cols-2      { grid-template-columns: repeat(2, 1fr) !important; }
    /* Quad grid: 2 columns, cells shrink to content height */
    .grid.quad        { grid-template-columns: repeat(2, 1fr) !important; }
    .grid.quad .cell  { aspect-ratio: auto !important; padding: 20px !important; justify-content: flex-start !important; }
    .grid.quad .cell-wide { aspect-ratio: auto !important; padding: 20px var(--text-push) !important; }
    .pad-intro        { padding: 20px !important; aspect-ratio: 3 / 2 !important; }
    /* Clockwise reading order: ↑(1) →(2) ↓(4→3) ←(3→4) wide(5) */
    .grid.quad .cell:nth-child(3) { order: 4; }
    .grid.quad .cell:nth-child(4) { order: 3; }
    .grid.quad .cell-wide   { order: 5; }
    .f-72 { font-size: clamp(28pt, 10vw, 36pt) !important; line-height: 1.3 !important; }
    .f-48 { font-size: clamp(20pt, 14.2vw, 48pt) !important; line-height: 1.2 !important; }
    .f-32 { font-size: clamp(18pt,  9.5vw, 32pt) !important; line-height: 1.2 !important; }
    .f-24 { font-size: clamp(14pt,  7.1vw, 24pt) !important; line-height: 1.3 !important; }
    .f-18 { font-size: clamp(11pt,  4vw,   14pt) !important; line-height: 1.5 !important; }
    .f-14 { font-size: clamp(10pt,  3.6vw, 12pt) !important; line-height: 1.4 !important; }
    .f-12 { font-size: clamp( 9pt,  3.2vw, 11pt) !important; line-height: 1.2 !important; }
    .menu           { font-size: clamp(10pt, 3vw, 12pt) !important; gap: 0 10px !important; letter-spacing: -0.01em !important; }
    .footer-system  { padding: 28px 28px !important; margin-top: 28px !important; }
    .footer-system .footer-title { font-size: clamp(18pt, 2.5vw, 24pt) !important; }
    .footer-system a  { line-height: 2.0 !important; margin-right: 10px !important; }
    .footer-system .not-live { margin-right: 10px !important; }
    .footer-system .active-page { margin-right: 10px !important; }
    /* Thirds copy: narrow cells need smaller type */
    .grid.thirds .cell.cell-copy .f-18 { font-size: clamp(9pt, 2.5vw, 11pt) !important; }
    /* Shallow cells at T4: all flex to content height, evenly padded */
    .cell.cell-shallow { aspect-ratio: unset !important; height: auto !important;
                         padding-top: 40px !important; padding-bottom: 40px !important; }
    /* Shallow numbered cells: scale back f-32 slightly so it fits compact cell */
    .cell.cell-shallow .f-32 { font-size: clamp(16pt, 6.5vw, 24pt) !important; }
    /* h3 numbers: remove the override so they inherit cell font-size, staying
       proportionally smaller than the f-32 title — same ratio as T1 */
    /* Subheads in copy cells: centre-align at T4 */
    .cell.cell-shallow:not(.cell-center) h4 { text-align: center !important; align-self: stretch !important; }
    /* Right-aligned cells: revert to left on mobile */
    .cell-right { align-items: flex-start !important; text-align: left !important; }
    /* UpSchema steps: isolated in their own grid so order only affects those 6 cells.
       HTML order is 1,identity,market,2,3,structural (desktop visual layout);
       step-o classes give explicit mobile order: 1→identity→2→market→3→structural */
    .step-o1 { order: 1 !important; }
    .step-o2 { order: 2 !important; }
    .step-o3 { order: 3 !important; }
    .step-o4 { order: 4 !important; }
    .step-o5 { order: 5 !important; }
    .step-o6 { order: 6 !important; }
    /* UpSchema frontier text: nudge down just enough to fix widow, not a big reduction.
       Also release the square aspect-ratio — this cell is too tall at mobile. */
    .us-frontier { font-size: clamp(13pt, 6vw, 20pt) !important; line-height: 1.5 !important;
                   aspect-ratio: unset !important; height: auto !important;
                   padding-top: 60px !important; padding-bottom: 60px !important; }
    /* Main-sidebar: collapse to single column on mobile */
    .grid.main-sidebar { grid-template-columns: 1fr !important; }
    /* Article: fluid, matches grid behaviour */
    .article-kicker, .article-date, .article-text {
        width: calc(100% - 40px) !important; max-width: 450px !important;
        margin-left: auto !important; margin-right: auto !important;
    }
    /* no-shrink: lock content at desktop scale — apply to any cell whose type
       should not reduce at T4. Reverts all f-* clamps to their maximum values. */
    .cell-no-shrink .f-72 { font-size: 72pt !important; line-height: 1.1 !important; }
    .cell-no-shrink .f-48 { font-size: 48pt !important; line-height: 1.2 !important; }
    .cell-no-shrink .f-32 { font-size: 32pt !important; line-height: 1.2 !important; }
    .cell-no-shrink .f-24 { font-size: 24pt !important; line-height: 1.3 !important; }
    .cell-no-shrink .f-18 { font-size: 18pt !important; line-height: 1.5 !important; }
    .cell-no-shrink .f-14 { font-size: 14pt !important; line-height: 1.4 !important; }
    .cell-no-shrink .f-12 { font-size: 12pt !important; line-height: 1.2 !important; }
}