/* UTIMCO Brand Style Guide — shared stylesheet
   Extracted from index.html. Linked by index.html and construction.html.
   Asset paths are relative to this file (assets/). */
/* ─── FONTS (UTIMCO — Aptos family, unchanged) ──────────────── */
    @font-face { font-family: 'Aptos'; src: url('fonts/Aptos.ttf'); font-weight: 400; }
    @font-face { font-family: 'Aptos'; src: url('fonts/Aptos-Italic.ttf'); font-weight: 400; font-style: italic; }
    @font-face { font-family: 'Aptos'; src: url('fonts/Aptos-Light.ttf'); font-weight: 300; }
    @font-face { font-family: 'Aptos'; src: url('fonts/Aptos-SemiBold.ttf'); font-weight: 600; }
    @font-face { font-family: 'Aptos'; src: url('fonts/Aptos-Bold.ttf'); font-weight: 700; }
    @font-face { font-family: 'Aptos'; src: url('fonts/Aptos-Black.ttf'); font-weight: 900; }
    @font-face { font-family: 'Aptos Display'; src: url('fonts/Aptos-Display.ttf'); font-weight: 400; }
    @font-face { font-family: 'Aptos Display'; src: url('fonts/Aptos-Display-Bold.ttf'); font-weight: 700; }
    @font-face { font-family: 'Aptos Display'; src: url('fonts/Aptos-Display-Italic.ttf'); font-weight: 400; font-style: italic; }
    @font-face { font-family: 'Aptos Serif'; src: url('fonts/Aptos-Serif.ttf'); font-weight: 400; }
    @font-face { font-family: 'Aptos Serif'; src: url('fonts/Aptos-Serif-Italic.ttf'); font-weight: 400; font-style: italic; }
    @font-face { font-family: 'Aptos Serif'; src: url('fonts/Aptos-Serif-Bold.ttf'); font-weight: 700; }
    @font-face { font-family: 'Aptos Narrow'; src: url('fonts/Aptos-Narrow.ttf'); font-weight: 400; }
    @font-face { font-family: 'Aptos Narrow'; src: url('fonts/Aptos-Narrow-Bold.ttf'); font-weight: 700; }
    @font-face { font-family: 'Aptos Mono'; src: url('fonts/Aptos-Mono.ttf'); font-weight: 400; }
    @font-face { font-family: 'Aptos Mono'; src: url('fonts/Aptos-Mono-Bold.ttf'); font-weight: 700; }

    /* ─── TOKENS ─────────────────────────────────────────────────
       UTIMCO colors retained verbatim. Layout adopts the standards.site
       (EXP Makerspace) framework: one shared 12-col grid, generous air,
       hairline rules instead of boxed cards, oversized medium-weight
       display, confident fluid body copy, and a single accent rail that
       doubles as the collapsed flyout navigation. */
    :root {
      --dark-blue:    #113865;
      --mid-blue:     #0D5172;
      --aqua:         #3D97B5;
      --dark-teal:    #004D59;
      --green:        #94B8AD;
      --burnt-orange: #BF5700;
      --maroon:       #500000;
      --white:        #FFFFFF;
      --gray-100:     #EFEFEF;
      --gray-200:     #E2E2E2;
      --gray-300:     #CDCDCD;
      --black:        #000000;

      --canvas:    #F3F3F0;
      --ink:       #0E2E47;   /* deep navy — body + labels, high legibility */
      --ink-soft:  #2C4760;   /* secondary navy (AA on canvas ≈ 7:1) */
      --rule:      rgba(14,46,71,0.24);
      --accent:    #3D97B5;
      --accent-deep:#2A7E9C;  /* flyout panel — white text passes large AA */
      --rail:      40px;
      --block-h:   clamp(300px, 40vw, 480px);  /* image/logo box height */
      --radius:    clamp(6px, 0.8vw, 10px);     /* image + color box corners */

      /* shared layout grid */
      --mx:       clamp(24px, 5vw, 84px);
      --sy:       clamp(80px, 11vw, 168px);
      --sy-sm:    clamp(48px, 7vw, 96px);
      --col-gap:  clamp(16px, 2.2vw, 36px);
      --stack:    clamp(32px, 4.4vw, 64px);

      /* fluid type — larger than typical, scales with viewport */
      --fs-body:   clamp(17px, 0.92rem + 0.42vw, 22px);
      --fs-label:  clamp(16px, 0.86rem + 0.4vw, 21px);
      --fs-sm:     clamp(15px, 0.82rem + 0.34vw, 19px);
      --fs-meta:   clamp(13px, 0.72rem + 0.28vw, 17px);
      --fs-lead:   clamp(23px, 1.1rem + 1.25vw, 38px);
      --lh-body:   1.55;

      --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; --space-10: 128px;
    }

    /* ─── GRAIN (retained from UTIMCO source) ───────────────────── */
    .grainy { position: relative; isolation: isolate; }
    .grainy::after {
      content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none;
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='512' height='512'%3E%3Cfilter id='grain'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.72' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='512' height='512' filter='url(%23grain)'/%3E%3C/svg%3E");
      background-size: 256px 256px; background-repeat: repeat; opacity: 0.26; mix-blend-mode: soft-light;
    }
    .grainy > * { position: relative; z-index: 1; }
    .cover-gradient {
      background:
        radial-gradient(ellipse 80% 70% at 16% 64%, #1f7fa3 0%, transparent 60%),
        radial-gradient(ellipse 60% 50% at 80% 10%, #0d5172 0%, transparent 55%),
        linear-gradient(135deg, #173f58 0%, #113865 45%, #09202f 100%);
    }

    /* ─── RESET ──────────────────────────────────────────────────── */
    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
    html { scroll-behavior: auto; }   /* JS handles smooth scrolling manually */
    body {
      font-family: 'Aptos', system-ui, sans-serif;
      font-size: var(--fs-body); line-height: var(--lh-body);
      color: var(--ink); background: var(--canvas);
      padding-right: var(--rail);
      -webkit-font-smoothing: antialiased;
    }
    a { color: inherit; }
    img, svg { display: block; }
    :focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }

    /* ─── SHARED 12-COL GRID ─────────────────────────────────────── */
    .g12 {
      display: grid;
      grid-template-columns: repeat(12, minmax(0, 1fr));
      column-gap: var(--col-gap);
      padding-left: var(--mx);
      padding-right: var(--mx);
    }
    .c-1-7   { grid-column: 1 / 7; }
    .c-7-13  { grid-column: 7 / 13; }
    .c-1-3   { grid-column: 1 / 4; }
    .c-1-10  { grid-column: 1 / 10; }
    .c-4-6   { grid-column: 4 / 6; }
    .c-6-13  { grid-column: 6 / 13; }
    .c-4-5   { grid-column: 4 / 5; }
    .c-5-12  { grid-column: 5 / 12; }
    .c-1-4   { grid-column: 4 / 13; }   /* indented: content starts at column 4 */
    .c-4-13  { grid-column: 4 / 13; }
    .c-4-8   { grid-column: 4 / 8; }
    .c-8-12  { grid-column: 8 / 12; }
    .c-1-9   { grid-column: 1 / 9; }
    .c-full  { grid-column: 4 / 13; }

    /* ─── GRID OVERLAY (toggle via ?grid in the URL) ─────────────── */
    .grid-overlay { position: fixed; inset: 0; padding-right: var(--rail); z-index: 75; pointer-events: none; display: none; }
    body.show-grid .grid-overlay {
      display: grid;
      grid-template-columns: repeat(12, minmax(0, 1fr));
      column-gap: var(--col-gap);
      padding-left: var(--mx);
      padding-right: calc(var(--mx) + var(--rail));
    }
    .grid-overlay span { height: 100%; background: rgba(191,87,0,0.10); box-shadow: inset 1px 0 0 rgba(191,87,0,0.32), inset -1px 0 0 rgba(191,87,0,0.32); }

    /* ─── TYPE SCALE ─────────────────────────────────────────────── */
    .display {
      font-family: 'Aptos Display', 'Aptos', sans-serif; font-weight: 700;
      font-size: clamp(60px, 11vw, 132px); line-height: 0.88; letter-spacing: -0.03em;
    }
    .chapter-title {
      font-family: 'Aptos Display', 'Aptos', sans-serif; font-weight: 500;
      font-size: clamp(40px, 5.6vw, 70px); line-height: 0.98; letter-spacing: -0.015em;
    }
    .lead {
      font-family: 'Aptos', sans-serif; font-weight: 500;
      font-size: var(--fs-lead); line-height: 1.24; letter-spacing: -0.01em;
    }
    .label, .row-label { font-family: 'Aptos', sans-serif; font-weight: 600; font-size: var(--fs-label); line-height: 1.35; color: var(--ink); }
    .eyebrow-num { font-family: 'Aptos Mono', monospace; font-size: var(--fs-meta); letter-spacing: 0.02em; color: var(--accent); margin-bottom: 0; }
    /* section header: title on top, number beneath — title aligns to the descriptor */
    .sec-head .c-1-3 { display: flex; flex-direction: column-reverse; gap: var(--space-3); align-items: flex-start; }
    .sec-head .chapter-title { font-size: clamp(28px, 3.2vw, 46px); line-height: 1.05; }
    .meta { font-family: 'Aptos Mono', monospace; font-size: var(--fs-meta); line-height: 1.4; color: var(--ink-soft); }
    p.body { font-size: var(--fs-body); line-height: var(--lh-body); color: var(--ink); }
    p.body + p.body { margin-top: var(--space-4); }

    /* ─── ACCENT RAIL (collapsed flyout nav) ─────────────────────── */
    /* the accent rail IS the menu button — burger docked at the top, wide
       enough (with padding) that the overlay scrollbar can't hide it */
    .rail {
      position: fixed; top: 0; right: 0; bottom: 0; width: var(--rail);
      background: var(--accent); z-index: 80; cursor: pointer; border: none;
      padding: 26px 0 0; display: flex; justify-content: center; align-items: flex-start;
      transition: background .15s;
    }
    .rail:hover, .rail:focus-visible { background: var(--mid-blue); }
    .rail-burger { display: flex; flex-direction: column; gap: 4px; align-items: center; padding-right: 4px; }
    .rail-burger i { display: block; width: 18px; height: 2px; background: var(--white); border-radius: 1px; }

    /* ─── FLYOUT NAV (deep-aqua panel from the right) ────────────── */
    .flyout {
      position: fixed; top: 0; right: 0; bottom: 0; z-index: 140;
      width: min(480px, 48vw); background: var(--accent-deep);
      transform: translateX(100%); transition: transform .38s cubic-bezier(.4,0,.2,1);
      padding: clamp(40px, 6vw, 80px) clamp(28px, 4vw, 56px);
      display: flex; flex-direction: column;
    }
    .flyout.open { transform: translateX(0); }
    .flyout-close {
      position: absolute; top: 24px; right: 28px; background: none; border: none; cursor: pointer;
      font-size: 34px; line-height: 1; color: var(--white); font-family: 'Aptos', sans-serif;
    }
    .flyout a.flyout-brand { display: block; color: rgba(255,255,255,0.9); font-family: 'Aptos', sans-serif; font-weight: 400; font-size: var(--fs-sm); line-height: 1.4; letter-spacing: 0; padding: 0; margin-bottom: var(--space-7); transition: color .15s; }
    .flyout a.flyout-brand:hover { color: var(--white); padding-left: 0; }
    .flyout ul { list-style: none; display: flex; flex-direction: column; }
    .flyout a {
      display: block; text-decoration: none; color: var(--white);
      font-family: 'Aptos Display', 'Aptos', sans-serif; font-weight: 600;
      font-size: clamp(28px, 3.6vw, 42px); line-height: 1.16; letter-spacing: -0.01em;
      padding: 8px 0; transition: color .15s, padding-left .15s;
    }
    .flyout a:hover { color: var(--dark-blue); padding-left: 10px; }
    .flyout-icon-item { margin-top: var(--space-5); }
    .flyout-icon-item a { display: inline-block; padding: 8px 0; }
    .flyout-icon-item img { width: 44px; filter: brightness(0) invert(1); opacity: 0.95; transition: opacity .15s; }
    .flyout-icon-item a:hover img { opacity: 0.65; }
    .flyout-overlay {
      position: fixed; inset: 0 var(--rail) 0 0; z-index: 135;
      background: rgba(9,32,47,0.45); opacity: 0; pointer-events: none; transition: opacity .3s;
    }
    .flyout-overlay.open { opacity: 1; pointer-events: auto; }

    /* ─── COVER / HERO ───────────────────────────────────────────── */
    /* hero is static behind the content — sections scroll up and cover it */
    .cover {
      min-height: 100vh; display: flex; flex-direction: column;
      padding: clamp(40px,6vw,88px) var(--mx) clamp(48px,7vw,96px);
      position: sticky; top: 0; z-index: 0; overflow: hidden; color: var(--white);
    }
    .cover-top { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--space-5); }
    .cover-eyebrow { font-weight: 600; font-size: var(--fs-sm); color: var(--accent); max-width: 60ch; }
    .cover-top .meta { color: rgba(255,255,255,0.6); text-align: right; }
    .cover-fill { flex: 1; min-height: clamp(48px, 8vw, 120px); }
    .cover-title { max-width: 12ch; margin-bottom: var(--space-7); }
    .cover-title b { color: var(--accent); font-weight: inherit; }
    .cover-intro { max-width: 58ch; font-size: clamp(19px,1.4rem + 0.5vw,26px); line-height: 1.45; color: rgba(255,255,255,0.86); margin-bottom: var(--space-5); }
    .cover-sub { max-width: 66ch; font-size: var(--fs-sm); line-height: 1.55; color: rgba(255,255,255,0.62); margin-bottom: clamp(32px,5vw,72px); }
    .cover-strip { display: flex; margin: 0 calc(-1 * var(--mx)); height: clamp(48px,7vw,84px); }
    .cover-strip span { flex: 1; }
    /* 30-year anniversary seal — animated hero mark, kept fully on-canvas (no crop) */
    .cover-seal { position: absolute; right: clamp(16px, 6vw, 112px); top: 50%; transform: translateY(-50%); width: clamp(190px, 27vw, 392px); max-width: 40%; opacity: 0.6; pointer-events: none; z-index: 0; filter: drop-shadow(0 0 0 transparent); }
    .cover-seal svg { width: 100%; height: auto; display: block; }
    .cover-seal .cls-12 { fill: #ffffff; }   /* diamonds → white on navy */
    .cover-seal .cls-1  { fill: #bfdcea; }    /* lettering ring → light blue */
    .cover-seal #diamonds .arm, .cover-seal #facets .facet-arm, .cover-seal #textRing { transform-box: view-box; transform-origin: 150.53px 152.28px; opacity: 0; }
    .cover-seal.play { animation: sealGlow 1s ease-out forwards; animation-delay: 2.3s; }
    @keyframes sealGlow { to { filter: drop-shadow(0 6px 34px rgba(61,151,181,0.45)); } }
    .cover-seal.play #diamonds .arm, .cover-seal.play #facets .facet-arm { animation: sealBloom .9s ease-out both; }
    .cover-seal.play #diamonds .arm:nth-child(1), .cover-seal.play #facets .facet-arm:nth-child(1) { animation-delay: 0s; }
    .cover-seal.play #diamonds .arm:nth-child(2), .cover-seal.play #facets .facet-arm:nth-child(2) { animation-delay: .1s; }
    .cover-seal.play #diamonds .arm:nth-child(3), .cover-seal.play #facets .facet-arm:nth-child(3) { animation-delay: .2s; }
    .cover-seal.play #diamonds .arm:nth-child(4), .cover-seal.play #facets .facet-arm:nth-child(4) { animation-delay: .3s; }
    .cover-seal.play #diamonds .arm:nth-child(5), .cover-seal.play #facets .facet-arm:nth-child(5) { animation-delay: .4s; }
    .cover-seal.play #textRing { animation: sealRingIn 1.25s cubic-bezier(.22,1,.36,1) both; animation-delay: 1.35s; }
    @keyframes sealBloom { 0% { opacity: 0; } 100% { opacity: 1; } }
    @keyframes sealRingIn { 0% { opacity: 0; transform: rotate(-38deg) scale(.94); } 60% { opacity: 1; } 100% { opacity: 1; transform: rotate(0) scale(1); } }
    @media (prefers-reduced-motion: reduce) {
      .cover-seal #diamonds .arm, .cover-seal #facets .facet-arm, .cover-seal #textRing { opacity: 1; animation: none !important; }
      .cover-seal { filter: drop-shadow(0 6px 34px rgba(61,151,181,0.32)); }
    }
    @media (max-width: 900px) {
      .cover-seal { right: clamp(4px, 3vw, 28px); transform: translateY(-50%); top: 30%; width: min(54vw, 270px); max-width: none; opacity: 0.22; }
    }

    /* ─── INDEX (dark directory, shares the 12-col grid) ─────────── */
    .index { position: relative; z-index: 1; background: var(--dark-blue); color: var(--white); padding: var(--sy) 0; }
    .index-head { padding-bottom: var(--space-6); margin-bottom: var(--space-4); }
    .index-head .meta { color: rgba(255,255,255,0.6); }
    .index-row { padding-top: clamp(30px,3.6vw,50px); padding-bottom: clamp(30px,3.6vw,50px); align-items: start; border-top: 1px solid rgba(255,255,255,0.18); }
    .index-row:last-of-type { border-bottom: 1px solid rgba(255,255,255,0.18); }
    .index-row-title { display: flex; gap: var(--space-4); align-items: baseline; text-decoration: none; color: var(--white); }
    .index-row-title .num { font-family: 'Aptos Mono', monospace; font-size: var(--fs-meta); color: var(--accent); }
    .index-row-title .chapter-title { transition: color .15s; }
    .index-row-title:hover .chapter-title { color: var(--accent); }
    .index-subs { list-style: none; display: flex; flex-direction: column; gap: 12px; padding-top: 14px; }
    .index-subs a { text-decoration: none; color: rgba(255,255,255,0.74); font-size: var(--fs-sm); line-height: 1.4; transition: color .15s; }
    .index-subs a:hover { color: var(--white); }

    /* ─── SECTION SCAFFOLDING ────────────────────────────────────── */
    .section { position: relative; z-index: 1; background: var(--canvas); padding: var(--sy) 0; }
    .rule { height: 1px; background: var(--rule); margin: 0 var(--mx); }
    .rule.tight { margin-top: var(--stack); }
    .sec-head { padding-top: var(--stack); padding-bottom: var(--stack); align-items: start; }
    .sec-head .lead { color: var(--ink-soft); }
    .top-link { display: inline-block; text-decoration: none; color: var(--ink-soft); font-family: 'Aptos Mono', monospace; font-size: var(--fs-meta); padding-bottom: var(--space-5); transition: color .15s; }
    .top-link:hover { color: var(--ink); }
    /* back-to-contents circle, right-aligned */
    .top-row { display: flex; justify-content: flex-end; padding: 0 var(--mx); }
    .top-circle {
      width: 48px; height: 48px; border-radius: 50%; border: 1px solid var(--rule);
      color: var(--ink-soft); display: flex; align-items: center; justify-content: center;
      text-decoration: none; font-size: 19px; line-height: 1; transition: background .15s, color .15s, border-color .15s;
    }
    .top-circle:hover { background: var(--ink); color: var(--white); border-color: var(--ink); }
    .index-intro { font-family: 'Aptos', sans-serif; font-weight: 500; font-size: clamp(20px, 1.2rem + 0.7vw, 30px); line-height: 1.3; color: var(--white); max-width: 52ch; }

    .row { padding-top: var(--stack); align-items: start; row-gap: var(--space-3); }
    .row-note { font-size: var(--fs-sm); line-height: 1.4; color: var(--ink-soft); margin-top: 6px; font-weight: 400; }

    /* ─── DEMO BLOCKS (logos / imagery) ──────────────────────────── */
    .block {
      position: relative; width: 100%; display: flex; align-items: center; justify-content: center;
      padding: clamp(20px, 3vw, 48px) clamp(16px, 2.5vw, 40px);
      min-height: var(--block-h); border-radius: var(--radius); overflow: hidden;
    }
    .block.navy  { background: var(--dark-blue); }
    .block.mid   { background: var(--mid-blue); }
    .block.teal  { background: var(--dark-teal); }
    .block.grey  { background: var(--gray-100); }
    .block.white { background: #fff; box-shadow: inset 0 0 0 1px var(--gray-200); }
    .block img { max-width: 92%; max-height: clamp(150px, 22vw, 300px); object-fit: contain; }
    .block.icon img { max-height: clamp(140px, 17vw, 230px); }
    .block.seal img { max-height: clamp(170px, 21vw, 280px); }
    .block.wide img { max-width: 88%; max-height: clamp(110px, 13vw, 190px); }
    /* reversed icon over a photograph — anchored low, with a dark scrim for contrast */
    .block.photo-mark { align-items: flex-end; justify-content: flex-end; padding: 0 clamp(22px, 3.5vw, 40px) clamp(22px, 3.5vw, 40px) 0; background-size: cover; background-position: center; }
    .block.photo-mark::before { content: ''; position: absolute; inset: 0; z-index: 0; background: linear-gradient(to bottom, rgba(17,56,86,0.08) 0%, rgba(17,56,86,0.30) 48%, rgba(17,56,86,0.86) 100%); }
    .block.photo-mark img { position: relative; z-index: 1; max-height: clamp(52px, 6.5vw, 82px); }
    /* clear-space diagram is a self-contained figure — let it fill the box */
    .block.spacing img { max-width: 90%; max-height: clamp(150px, 19vw, 250px); }
    .block.spacing-h img { max-width: 82%; max-height: clamp(150px, 22vw, 300px); }

    /* Construction: description left, build diagram right */
    .construct-split { grid-column: 4 / 13; display: grid; grid-template-columns: 3fr 6fr; gap: var(--col-gap); align-items: stretch; }
    .construct-copy { align-self: center; }
    .construct-copy .name { font-weight: 600; font-size: var(--fs-label); color: var(--ink); margin-bottom: var(--space-3); }
    .construct-copy .body { max-width: 38ch; }
    .block.construct-diagram { padding: clamp(14px, 1.8vw, 26px); }
    .block.construct-diagram img { max-width: 100%; max-height: calc(var(--block-h) - clamp(28px, 3.6vw, 52px)); }

    .blocks-2 { grid-column: 4 / 13; display: grid; grid-template-columns: 1fr 1fr; gap: var(--col-gap); }
    .blocks-3 { grid-column: 4 / 13; display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--col-gap); }
    .block-wrap { position: relative; display: flex; flex-direction: column; }
    .block-wrap.thin { --block-h: clamp(170px, 20vw, 240px); }   /* shorter rectangle boxes */

    /* description flows full width under the image */
    .cap { margin-top: var(--space-4); }
    .cap .name { font-weight: 600; font-size: var(--fs-label); color: var(--ink); }
    .cap .use  { font-size: var(--fs-sm); line-height: 1.45; color: var(--ink-soft); margin-top: 6px; }
    /* filename — tiny, tucked inside the image box, revealed on hover */
    .cap-file { position: absolute; top: calc(var(--block-h) - 30px); right: 12px; opacity: 0; pointer-events: none; transition: opacity .15s; z-index: 2; }
    .block-wrap:hover .cap-file, .block-wrap:focus-within .cap-file { opacity: 1; }
    .cap-file .file, .cap-file .file.primary, .cap-file .file.anniversary {
      display: inline-block; font-family: 'Aptos Mono', monospace; font-size: 9px; line-height: 1.3;
      padding: 3px 7px; border-radius: 5px; word-break: break-all;
      background: rgba(255,255,255,0.18); color: rgba(255,255,255,0.92);
    }
    .block-wrap:has(.block.grey) .cap-file .file,
    .block-wrap:has(.block.white) .cap-file .file { background: rgba(14,46,71,0.10); color: rgba(14,46,71,0.72); }

    /* ─── BUTTONS (pill) ─────────────────────────────────────────── */
    .btn {
      display: inline-flex; align-items: center; gap: var(--space-3);
      padding: 16px 34px; border-radius: 999px; border: 1px solid var(--ink);
      background: var(--ink); color: var(--white);
      font-family: 'Aptos', sans-serif; font-size: var(--fs-sm); font-weight: 700; line-height: 1;
      text-decoration: none; cursor: pointer; transition: background .15s, transform .15s;
    }
    .btn:hover { background: var(--mid-blue); border-color: var(--mid-blue); transform: translateY(-1px); }
    .btn.ghost { background: transparent; color: var(--ink); }
    .btn.ghost:hover { background: var(--ink); color: var(--white); }
    .btn.soft { background: var(--gray-100); color: var(--ink); border-color: var(--gray-200); }
    .btn.soft:hover { background: var(--gray-200); color: var(--ink); border-color: var(--gray-300); }
    .btn-group { display: flex; flex-wrap: wrap; gap: var(--space-4); }

    /* ─── COLOR SWATCHES ─────────────────────────────────────────── */
    .swatch-grid { grid-column: 4 / 13; display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: var(--col-gap); }
    .swatch { min-height: clamp(250px, 27vw, 340px); padding: var(--space-5); display: flex; flex-direction: column; justify-content: flex-start; border-radius: var(--radius); }
    .swatch.on-dark { color: #fff; }
    .swatch.on-light { color: var(--ink); }
    .swatch.bordered { box-shadow: inset 0 0 0 1px var(--gray-200); }
    .swatch-name { font-weight: 600; font-size: clamp(19px,1rem + 0.4vw,23px); margin-bottom: var(--space-3); }
    .swatch-specs { font-family: 'Aptos Mono', monospace; font-size: var(--fs-meta); line-height: 1.5; }
    .swatch-specs .k { opacity: 0.7; display: inline-block; width: 46px; }
    .swatch-usage { margin-top: var(--space-3); font-size: var(--fs-sm); line-height: 1.4; opacity: 0.92; }
    /* one-click hex copy — injected next to each HEX value, inherits the swatch text color */
    .copy-hex { -webkit-appearance: none; appearance: none; border: 0; background: transparent; color: currentColor; cursor: pointer; font-family: inherit; font-size: 10px; line-height: 1; padding: 3px; margin-left: 7px; border-radius: 4px; opacity: 0.55; vertical-align: middle; display: inline-flex; align-items: center; gap: 4px; transition: opacity .15s; }
    .copy-hex:hover { opacity: 1; }
    .copy-hex:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; opacity: 1; }
    .copy-hex svg { width: 13px; height: 13px; display: block; }
    .copy-hex .ico-check, .copy-hex .copied-label { display: none; }
    .copy-hex .copied-label { letter-spacing: 0.04em; text-transform: uppercase; }
    .copy-hex.copied { opacity: 1; }
    .copy-hex.copied .ico-copy { display: none; }
    .copy-hex.copied .ico-check, .copy-hex.copied .copied-label { display: inline-block; }
    .swatch-grid.reserved { grid-template-columns: repeat(auto-fit, minmax(280px, 0.5fr)); max-width: 820px; }

    /* rule lists (no boxes) */
    .ruleset { list-style: none; display: flex; flex-direction: column; gap: var(--space-3); }
    .ruleset li { font-size: var(--fs-body); line-height: 1.5; color: var(--ink); padding-left: var(--space-5); position: relative; }
    .ruleset li::before { content: "—"; position: absolute; left: 0; color: var(--accent); }
    .ruleset.warn li::before { content: "\2715"; color: #B0190E; font-weight: 700; }
    .minrow { display: flex; flex-wrap: wrap; gap: var(--space-7); font-size: var(--fs-sm); color: var(--ink-soft); margin-top: var(--space-4); }
    .minrow strong { color: var(--ink); }

    /* light-gray band (anniversary marks) */
    .band-grey { background: var(--gray-100); padding: var(--sy-sm) 0; margin-top: var(--stack); }

    /* ─── TYPOGRAPHY SECTION ─────────────────────────────────────── */
    .type-table { grid-column: 4 / 13; width: 100%; border-collapse: collapse; }
    .type-table th { text-align: left; font-family: 'Aptos Mono', monospace; font-weight: 400; font-size: var(--fs-meta); color: var(--ink-soft); padding: var(--space-3) 0; border-bottom: 1px solid var(--rule); }
    .type-table td { padding: var(--space-6) var(--space-5) var(--space-6) 0; border-bottom: 1px solid var(--rule); vertical-align: middle; }
    .type-table td:first-child { width: 26%; }
    .type-role { font-family: 'Aptos Mono', monospace; font-size: var(--fs-sm); color: var(--ink); }
    .type-spec { font-family: 'Aptos Mono', monospace; font-size: var(--fs-meta); color: var(--ink-soft); margin-top: 4px; }
    .type-specimen { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    /* specimen sizes mirror the documented scale; Display XL = the cover title */
    .sp-display-xl { font-family: 'Aptos Display','Aptos',sans-serif; font-weight: 700; font-size: clamp(60px,11vw,132px); line-height: 1.08; letter-spacing: -0.03em; color: var(--ink); padding-bottom: 0.06em; }
    .sp-display-l  { font-family: 'Aptos Display','Aptos',sans-serif; font-weight: 700; font-size: clamp(48px,6vw,80px); line-height: 1.1; letter-spacing: -0.01em; color: var(--ink); }
    .sp-h1 { font-family: 'Aptos Display','Aptos',sans-serif; font-weight: 600; font-size: clamp(40px,4.6vw,56px); line-height: 1.14; color: var(--ink); }
    .sp-h2 { font-family: 'Aptos',sans-serif; font-weight: 600; font-size: 40px; line-height: 48px; color: var(--ink); }
    .sp-h3 { font-family: 'Aptos',sans-serif; font-weight: 600; font-size: 30px; line-height: 36px; color: var(--ink); }
    .sp-h4 { font-family: 'Aptos',sans-serif; font-weight: 600; font-size: 22px; line-height: 28px; color: var(--ink); }
    .sp-body-lg { font-family: 'Aptos',sans-serif; font-size: 24px; line-height: 32px; color: var(--ink); }
    .sp-body { font-family: 'Aptos',sans-serif; font-size: 20px; line-height: 28px; color: var(--ink); }
    .sp-body-sm { font-family: 'Aptos',sans-serif; font-size: 18px; line-height: 25px; color: var(--ink-soft); }
    .sp-caption { font-family: 'Aptos',sans-serif; font-size: 11px; line-height: 14px; color: var(--ink-soft); }
    .sp-eyebrow { font-family: 'Aptos',sans-serif; font-weight: 600; font-size: 16px; line-height: 20px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--accent); }
    .sp-quote { font-family: 'Aptos Serif',Georgia,serif; font-style: italic; font-size: 24px; line-height: 32px; color: var(--mid-blue); }
    .sp-mono { font-family: 'Aptos Mono',monospace; font-size: 13px; line-height: 18px; color: var(--dark-teal); }
    .sp-narrow { font-family: 'Aptos Narrow','Aptos',sans-serif; font-size: 14px; line-height: 19px; color: var(--ink); }

    .specimen { grid-column: 4 / 13; background: var(--dark-blue); padding: clamp(48px,7vw,112px) clamp(32px,5vw,80px); }
    .specimen .eyebrow-live { font-weight: 600; font-size: var(--fs-sm); color: var(--accent); margin-bottom: var(--space-4); }
    .specimen .headline-live { font-family: 'Aptos Display','Aptos',sans-serif; font-weight: 700; font-size: clamp(40px,7vw,80px); line-height: 0.95; letter-spacing: -0.025em; color: var(--white); margin-bottom: var(--space-5); }
    .specimen .body-live { font-size: clamp(17px,1rem + 0.4vw,21px); line-height: 1.5; color: rgba(255,255,255,0.82); max-width: 56ch; }
    .specimen .quote-live { font-family: 'Aptos Serif',Georgia,serif; font-style: italic; font-size: clamp(22px,1.2rem + 0.7vw,28px); line-height: 1.4; color: var(--accent); max-width: 50ch; margin-top: var(--space-7); }
    /* faded duotone photo behind the reversed type — scrim is heaviest on the left where the copy sits, keeping the subject visible on the right */
    .specimen.has-photo {
      background:
        linear-gradient(90deg, rgba(17,56,86,0.97) 0%, rgba(17,56,86,0.90) 30%, rgba(17,56,86,0.74) 64%, rgba(17,56,86,0.62) 100%),
        url('images/meeting-blue.png') center/cover no-repeat,
        var(--dark-blue);
    }

    /* ─── VISUALS ────────────────────────────────────────────────── */
    .diamond-grid { grid-column: 4 / 13; display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--col-gap); }
    .diamond-block { background: var(--gray-100); min-height: clamp(240px, 25vw, 320px); display: flex; align-items: center; justify-content: center; padding: clamp(40px,5vw,72px); border-radius: var(--radius); overflow: hidden; }
    .diamond-block img { max-width: 80%; max-height: clamp(100px,11vw,150px); object-fit: contain; }
    .diamond-grid .cap { grid-template-columns: 1fr; }

    .pillars { grid-column: 4 / 13; display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--col-gap); }
    .pillar { padding-top: var(--space-5); border-top: 2px solid var(--ink); }
    .pillar-num { font-family: 'Aptos Display','Aptos',sans-serif; font-weight: 700; font-size: clamp(44px,4.6vw,64px); line-height: 1; color: var(--accent); margin-bottom: var(--space-4); }
    .pillar-title { font-weight: 600; font-size: var(--fs-label); color: var(--ink); margin-bottom: var(--space-2); }
    .pillar-desc { font-size: var(--fs-sm); line-height: 1.45; color: var(--ink-soft); }

    /* ─── VISUALS (applied mockups) ─────────────────────────────── */
    .vis-grid { grid-column: 4 / 13; display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--col-gap); }
    .vis-grid .cap { grid-template-columns: 1fr; }
    .vis-block { background: var(--gray-100); border-radius: var(--radius); overflow: hidden; display: flex; align-items: center; justify-content: center; }
    .vis-block img { width: 100%; height: 100%; object-fit: cover; display: block; }
    .vis-block.paper img { object-fit: contain; padding: clamp(12px, 2vw, 28px); background: #e8e8e4; }
    .vis-block.envelope img { object-fit: cover; }

    .vis-wide { grid-column: 4 / 13; }
    .vis-wide img { width: 100%; border-radius: var(--radius); display: block; box-shadow: 0 6px 32px rgba(0,0,0,0.12); }

    /* ── Email mockup (Gmail-style compose window) ─────────────── */
    .email-mockup-stack { grid-column: 4 / 13; display: flex; flex-direction: column; gap: clamp(48px, 6vw, 80px); }
    .email-mockup-item {}
    .email-mockup {
      background: #fff; border-radius: 10px; overflow: hidden;
      box-shadow: 0 4px 28px rgba(0,0,0,0.16), 0 1px 4px rgba(0,0,0,0.08);
      max-width: 580px;
    }
    .em-header {
      background: #404040; padding: 9px 14px;
      display: flex; align-items: center; justify-content: space-between;
    }
    .em-title { color: #fff; font-size: 13px; font-weight: 500; font-family: system-ui, sans-serif; }
    .em-controls { display: flex; gap: 14px; align-items: center; }
    .em-ctrl { color: rgba(255,255,255,0.65); font-size: 15px; line-height: 1; }
    .em-field {
      border-bottom: 1px solid #e8e8e8; padding: 7px 14px;
      font-size: 12px; color: #aaa; font-family: system-ui, sans-serif;
    }
    .em-body { padding: 12px 14px 0; }
    .em-body-lines { display: flex; flex-direction: column; gap: 6px; margin-bottom: 18px; }
    .em-line { height: 11px; background: #f0f0f0; border-radius: 2px; }
    .em-sig-rule { border: none; border-top: 1px solid #e0e0e0; margin: 0 0 14px; }
    .em-sig-img { width: 100%; display: block; margin-bottom: 20px; }
    .em-toolbar {
      background: #f6f8fc; border-top: 1px solid #e8e8e8;
      padding: 8px 12px; display: flex; align-items: center; justify-content: space-between;
    }
    .em-send {
      display: flex; align-items: center; border-radius: 4px; overflow: hidden;
      background: #e8eaed; box-shadow: 0 1px 2px rgba(0,0,0,0.1);
    }
    .em-send-main {
      background: transparent; color: #444; padding: 6px 14px;
      font-size: 12px; font-weight: 500; font-family: system-ui, sans-serif;
      white-space: nowrap;
    }
    .em-send-arrow {
      background: transparent; color: #666; padding: 6px 8px;
      font-size: 9px; border-left: 1px solid rgba(0,0,0,0.12);
    }
    .em-icons { display: flex; gap: 8px; align-items: center; opacity: 0.45; }
    .em-icon { width: 16px; height: 16px; }
    .email-mockup-label { font-weight: 600; font-size: var(--fs-label); color: var(--ink); margin-top: var(--space-5); }
    .email-mockup-use { font-size: var(--fs-sm); color: var(--ink-soft); margin-top: var(--space-2); max-width: 52ch; }

    /* Laptop video-call mockup */
    .vid-grid { grid-column: 4 / 13; display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--col-gap); }
    .vid-grid .cap { grid-template-columns: 1fr; }
    .laptop-wrap { position: relative; user-select: none; }
    .laptop-lid {
      background: #2b2b2b;
      border-radius: clamp(6px, 0.8vw, 12px) clamp(6px, 0.8vw, 12px) 0 0;
      padding: clamp(6px, 0.9vw, 12px) clamp(6px, 0.9vw, 12px) 0;
      box-shadow: 0 -2px 0 #1a1a1a inset;
    }
    .laptop-screen-inner {
      position: relative;
      width: 100%;
      aspect-ratio: 16 / 10;
      border-radius: clamp(3px, 0.4vw, 6px);
      overflow: hidden;
      background: #000;
    }
    .laptop-vid-bg {
      position: absolute; inset: 0;
      width: 100%; height: 100%;
      object-fit: cover;
    }
    .laptop-chrome {
      position: absolute; inset: 0;
      display: flex; flex-direction: column;
      background: linear-gradient(to bottom, rgba(0,0,0,0.18) 0%, transparent 28%, transparent 68%, rgba(0,0,0,0.52) 100%);
    }
    .laptop-chrome-top {
      display: flex; justify-content: flex-end;
      padding: clamp(4px, 0.6vw, 8px) clamp(6px, 0.9vw, 12px);
    }
    .laptop-rec-dot {
      width: clamp(5px, 0.6vw, 8px); height: clamp(5px, 0.6vw, 8px);
      background: #e63946; border-radius: 50%; margin-top: 2px;
    }
    .laptop-chrome-bottom {
      margin-top: auto;
      padding: clamp(4px, 0.5vw, 6px) clamp(6px, 0.9vw, 12px) clamp(6px, 0.8vw, 10px);
      display: flex; align-items: flex-end; justify-content: space-between; gap: 8px;
    }
    .laptop-name-badge {
      background: rgba(0,0,0,0.54); color: #fff; backdrop-filter: blur(4px);
      font-size: clamp(7px, 0.6vw, 11px); font-weight: 600; letter-spacing: 0.03em;
      padding: clamp(2px, 0.25vw, 4px) clamp(5px, 0.5vw, 8px);
      border-radius: 4px; white-space: nowrap;
    }
    .laptop-controls {
      display: flex; align-items: center; gap: clamp(3px, 0.4vw, 6px);
      padding: 0 0 clamp(2px, 0.25vw, 4px);
      margin: 0 auto;
    }
    .laptop-btn {
      width: clamp(14px, 1.5vw, 22px); height: clamp(14px, 1.5vw, 22px);
      border-radius: 50%; background: rgba(255,255,255,0.18); display: flex;
      align-items: center; justify-content: center;
    }
    .laptop-btn svg { width: 55%; height: 55%; }
    .laptop-btn.end { background: #e63946; }
    .laptop-selfview {
      position: absolute;
      bottom: clamp(14px, 1.5vw, 24px);
      right: clamp(8px, 0.9vw, 14px);
      width: clamp(52px, 6vw, 92px);
      aspect-ratio: 16/9;
      border-radius: 4px;
      overflow: hidden;
      border: 1.5px solid rgba(255,255,255,0.25);
      background: #113865;
      display: flex; align-items: center; justify-content: center;
    }
    .laptop-selfview svg { width: 40%; height: 40%; opacity: 0.4; }
    .laptop-base {
      height: clamp(10px, 1.2vw, 18px);
      background: linear-gradient(to bottom, #3a3a3a, #2a2a2a);
      border-radius: 0 0 clamp(4px, 0.5vw, 8px) clamp(4px, 0.5vw, 8px);
      display: flex; justify-content: center; align-items: center;
    }
    .laptop-notch {
      width: 18%; height: 45%;
      background: #222;
      border-radius: 0 0 4px 4px;
    }
    .laptop-foot {
      height: clamp(4px, 0.5vw, 7px);
      background: linear-gradient(to bottom, #222, #1a1a1a);
      border-radius: 0 0 clamp(3px, 0.4vw, 5px) clamp(3px, 0.4vw, 5px);
      margin: 0 8%;
    }

    /* ─── APPLICATIONS ───────────────────────────────────────────── */
    .app-grid { grid-column: 4 / 13; display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--col-gap); }
    .app-grid .cap { grid-template-columns: 1fr; }
    .app-preview { background: var(--gray-100); min-height: clamp(280px, 32vw, 400px); display: flex; align-items: center; justify-content: center; overflow: hidden; border-radius: var(--radius); }
    .onepager { background: var(--white); width: 172px; height: 222px; border: 1px solid var(--gray-200); padding: 11px; display: flex; flex-direction: column; gap: 5px; box-shadow: 0 3px 18px rgba(0,0,0,0.1); }
    .op-header { background: var(--dark-blue); height: 19px; display: flex; align-items: center; padding: 0 5px; }
    .op-hero { height: 32px; background: var(--gray-100); }
    .op-body { flex: 1; display: flex; flex-direction: column; gap: 4px; }
    .op-line { background: var(--gray-200); height: 5px; }
    .op-line.short { width: 60%; } .op-line.medium { width: 80%; }
    .op-stats { display: flex; gap: 4px; }
    .op-stat { flex: 1; height: 23px; }
    .op-footer { height: 11px; background: var(--gray-100); }

    .treatment { grid-column: 4 / 13; display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--col-gap); }
    .treatment .bar { height: clamp(100px, 11vw, 140px); border-radius: var(--radius); }
    .treatment .cap2 { margin-top: var(--space-3); font-size: var(--fs-sm); color: var(--ink-soft); }

    /* ─── RESOURCES ──────────────────────────────────────────────── */
    .res-row { position: relative; padding-top: var(--space-6); padding-bottom: var(--space-6); align-items: start; row-gap: var(--space-3); }
    .res-row::before { content: ''; position: absolute; top: 0; left: var(--mx); right: var(--mx); height: 1px; background: var(--rule); }
    .res-row:last-of-type::after { content: ''; position: absolute; bottom: 0; left: var(--mx); right: var(--mx); height: 1px; background: var(--rule); }
    .res-thumb { aspect-ratio: 1; background: var(--gray-100); border: 1px solid var(--gray-200); border-radius: var(--radius); display: flex; align-items: center; justify-content: center; overflow: hidden; }
    .res-thumb::after { content: ""; width: 36%; height: 36%; opacity: 0.3; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230E2E47' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='16' rx='2'/%3E%3Ccircle cx='8.5' cy='9.5' r='1.5'/%3E%3Cpath d='M21 16l-5-5L5 20'/%3E%3C/svg%3E") center/contain no-repeat; }
    /* 3D shape thumbnails — overrides the placeholder above */
    .res-thumb.has-shape { background: var(--dark-blue); border-color: transparent; }
    .res-thumb.has-shape::after { display: none; }
    .res-thumb.has-shape img { width: 80%; height: 80%; object-fit: contain; mix-blend-mode: screen; filter: hue-rotate(210deg) saturate(0.75) brightness(1.15); }
    .res-body { display: flex; flex-direction: column; gap: var(--space-3); align-items: flex-start; }
    .res-name { font-weight: 600; font-size: var(--fs-label); color: var(--ink); }
    .res-path {
      display: inline-flex; align-items: center; gap: 9px; margin-top: 12px;
      font-family: 'Aptos Mono', monospace; font-size: var(--fs-meta); color: var(--ink);
      text-decoration: none; border: 1px solid var(--gray-300); border-radius: 8px;
      padding: 9px 15px; background: transparent; word-break: break-word;
      transition: background .15s, border-color .15s;
    }
    .res-path::before {
      content: ""; flex-shrink: 0; width: 15px; height: 15px;
      background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230E2E47' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3v12M7 10l5 5 5-5M5 21h14'/%3E%3C/svg%3E") center/contain no-repeat;
    }
    .res-path:hover { background: var(--gray-100); border-color: var(--ink); }
    .res-path.coming-soon {
      color: var(--ink-soft); border-color: var(--gray-200); border-style: dashed;
      background: transparent; cursor: default;
    }
    .res-path.coming-soon::before { display: none; }
    .res-path.coming-soon:hover { background: transparent; border-color: var(--gray-200); }
    .res-desc { font-size: var(--fs-sm); line-height: 1.5; color: var(--ink-soft); }
    .dev-notes { padding-left: var(--space-5); border-left: 3px solid var(--accent); }
    .dev-notes h4 { font-weight: 600; font-size: var(--fs-label); color: var(--ink); margin-bottom: var(--space-3); }
    .dev-notes p { font-size: var(--fs-body); line-height: var(--lh-body); color: var(--ink-soft); max-width: 70ch; }
    .dev-notes code { font-family: 'Aptos Mono', monospace; background: var(--gray-200); padding: 1px 6px; color: var(--mid-blue); }

    /* ─── FOOTER ─────────────────────────────────────────────────── */
    .page-footer {
      background: var(--dark-blue); color: rgba(255,255,255,0.6);
      padding: var(--sy-sm) var(--mx); display: flex; justify-content: space-between;
      align-items: flex-start; gap: var(--space-7); flex-wrap: wrap;
      position: relative; z-index: 1;
    }
    /* 8 of 12 columns wide; translateX cancels the wordmark SVG's internal left
       inset so its visible left edge aligns with the meta text below */
    .footer-lockup { width: calc((100vw - 2 * var(--mx)) * 0.6667); max-width: 880px; filter: brightness(0) invert(1); opacity: 0.92; margin-bottom: var(--space-5); transform: translateX(-8%); }
    .footer-meta { font-size: var(--fs-sm); line-height: 1.5; color: rgba(255,255,255,0.6); max-width: 46ch; }
    .footer-icon { width: clamp(52px, 6vw, 96px); filter: brightness(0) invert(1); opacity: 0.92; }

    /* brand chip — top-left, revealed only after the hero scrolls away */
    .brand-pill {
      position: fixed; top: 18px; left: var(--mx); z-index: 70;
      display: inline-flex; align-items: center; gap: 8px;
      background: var(--ink); color: var(--white); font-size: var(--fs-meta); font-weight: 700;
      padding: 10px 20px 10px 15px; border-radius: 999px; text-decoration: none;
      box-shadow: 0 4px 18px rgba(0,0,0,0.22);
      opacity: 0; transform: translateY(-8px); pointer-events: none;
      transition: opacity .28s ease, transform .28s ease, background .15s;
    }
    body.is-scrolled .brand-pill { opacity: 1; transform: none; pointer-events: auto; }
    .brand-pill:hover { background: var(--mid-blue); }
    .brand-pill-icon { width: 1.15em; height: auto; filter: brightness(0) invert(1); }
    .brand-pill b { color: var(--accent); }

    /* ─── RESPONSIVE ─────────────────────────────────────────────── */
    @media (max-width: 900px) {
      .g12 { grid-template-columns: 1fr; row-gap: var(--space-4); }
      .c-1-7, .c-7-13, .c-1-4, .c-4-13, .c-4-8, .c-8-12, .c-1-9, .c-full, .c-1-3, .c-1-10, .c-4-6, .c-6-13, .c-4-5, .c-5-12 { grid-column: 1 / -1; }
      .res-thumb { max-width: 240px; }   /* keep placeholder small when stacked */
      .blocks-2, .blocks-3, .swatch-grid, .diamond-grid, .pillars, .app-grid, .treatment, .type-table, .specimen, .construct-split { grid-column: 1 / -1; }
      .construct-split { grid-template-columns: 1fr; }
      .blocks-3, .diamond-grid { grid-template-columns: repeat(2, 1fr); }
      .pillars { grid-template-columns: repeat(2, 1fr); }
      .treatment { grid-template-columns: repeat(2, 1fr); }
      .cap { grid-template-columns: 1fr; }
      .type-table td:first-child { width: 34%; }
      .flyout { width: min(440px, 84vw); }
      body.show-grid .grid-overlay { grid-template-columns: 1fr; }
    }
    @media (max-width: 560px) {
      .blocks-2, .blocks-3, .diamond-grid, .app-grid, .pillars, .treatment { grid-template-columns: 1fr; }
      .type-table th:last-child, .type-table td:last-child { display: none; }
      .brand-pill { left: var(--mx); top: 12px; padding: 9px 15px; }
    }