:root {
      --bg:       #F0C400;
      --tile:     #FFFEF5;
      --tile-hi:  #FFFFFF;
      --tile-alt: #FFF9DC;
      --tile-inv: #0F7B78;
      --border:   rgba(100,80,0,0.11);
      --shadow:   rgba(100,70,0,0.11);
      --teal:     #0F7B78;
      --teal-mid: #13958F;
      --teal-dim: rgba(15,123,120,0.10);
      --ink:      #141209;
      --ink-mid:  #3D3818;
      --ink-dim:  #8A7830;

      --serif: 'Fraunces', Georgia, serif;
      --sans:  'Epilogue', system-ui, sans-serif;
      --gap:    10px;
      --radius: 0px;
    }

    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

    body {
      background: var(--bg);
      color: var(--ink);
      font-family: var(--sans);
      font-size: 12px;
      line-height: 1.7;
      -webkit-font-smoothing: antialiased;
    }

    /* grain */
    body::after {
      content: '';
      position: fixed; inset: 0;
      pointer-events: none; z-index: 9999;
      opacity: 0.4;
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23n)' opacity='0.15'/%3E%3C/svg%3E");
      background-size: 200px 200px;
      mix-blend-mode: multiply;
    }

    /* ── Layout shell ──────────────────────────── */
    .wrapper {
      min-height: 100vh;
      padding: 12px;
      display: flex;
      flex-direction: column;
      gap: var(--gap);
    }

    /* ── Topbar ────────────────────────────────── */
    .topbar {
      display: flex; align-items: center; justify-content: space-between;
      padding: 14px 24px;
      background: var(--ink);
      flex-shrink: 0;
    }
    .topbar-left { display: flex; align-items: center; gap: 16px; }
    .logo-badge {
      width: 44px; height: 44px;
      background: var(--ink);
      border: 1px solid rgba(255,255,255,0.12);
      border-radius: 0;
      overflow: hidden;
      display: flex; align-items: center; justify-content: center;
      flex-shrink: 0;
    }
    .logo-badge img { width: 36px; height: 36px; object-fit: contain; }
    .logo-name { font-family: var(--serif); font-size: 18px; font-weight: 500; color: #fff; letter-spacing: -0.01em; }
    .topbar-sep { width: 1px; height: 18px; background: rgba(255,255,255,0.2); }
    .topbar-sub { font-size: 11px; color: var(--bg); font-style: italic; font-family: var(--serif); }
    .topbar-right { display: flex; align-items: center; gap: 18px; }
    .topbar-ts { font-size: 10px; color: rgba(255,255,255,0.6); font-family: 'Courier New', monospace; }
    .topbar-status { display: flex; align-items: center; gap: 7px; font-size: 11px; color: rgba(255,255,255,0.6); font-style: italic; font-family: var(--serif); }
    .pulse { width: 7px; height: 7px; border-radius: 50%; background: var(--teal); animation: blink 3s ease-in-out infinite; }
    @keyframes blink { 0%,100%{opacity:1} 50%{opacity:.2} }

    /* ── Base tile ─────────────────────────────── */
    .tile {
      background: var(--tile);
      border: 1px solid var(--border);
      border-radius: var(--radius);
      padding: 28px 32px;
      position: relative;
      overflow: hidden;
      box-shadow: 0 1px 3px var(--shadow), 0 4px 14px rgba(100,70,0,0.05);
      transition: box-shadow 0.3s, transform 0.25s;
    }
    .tile:hover {
      box-shadow: 0 2px 8px var(--shadow), 0 10px 28px rgba(100,70,0,0.09);
      transform: translateY(-1px);
    }
    .tile::before {
      content: '';
      position: absolute; inset: 0;
      border-radius: inherit;
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23g)' opacity='0.07'/%3E%3C/svg%3E");
      background-size: 160px 160px;
      pointer-events: none; mix-blend-mode: multiply; opacity: 0.5;
    }

    .tile-label {
      font-size: 9px; letter-spacing: 0.18em; text-transform: uppercase;
      color: var(--ink-dim); margin-bottom: 18px;
      display: flex; align-items: center; gap: 10px;
    }
    .tile-label::after { content: ''; flex: 1; height: 1px; background: var(--border); }
    .tile-label .num { color: var(--teal); font-weight: 500; }

    /* ── CTA button ────────────────────────────── */
    .cta {
      display: inline-flex; align-items: center; gap: 9px;
      align-self: flex-start;
      font-family: var(--sans); font-size: 11px; letter-spacing: 0.05em;
      color: #fff; text-decoration: none;
      background: var(--teal); padding: 11px 18px; border-radius: 0;
      transition: background 0.25s, box-shadow 0.25s;
      box-shadow: 0 2px 8px rgba(0,0,0,0.14); white-space: nowrap;
    }
    .cta:hover { background: var(--teal-mid); box-shadow: 0 4px 14px rgba(0,0,0,0.18); }
    .cta svg { transition: transform 0.2s; }
    .cta:hover svg { transform: translateX(3px); }

    /* ═══════════════════════════════════════════
       SECTION 1 — PHILOSOPHY
    ═══════════════════════════════════════════ */
    .section-philosophy {
      display: grid;
      grid-template-columns: 1fr;
      gap: var(--gap);
    }

    .tile-philosophy {
      background: var(--tile-hi);
      display: flex; flex-direction: column; justify-content: space-between;
      padding: 40px 44px;
    }
    .phil-heading {
      font-family: var(--serif);
      font-size: clamp(48px, 5.2vw, 72px);
      font-weight: 700; line-height: 0.95;
      letter-spacing: -0.025em; color: var(--ink);
      margin-bottom: 26px;
    }
    .phil-heading em { font-style: italic; color: var(--teal); font-weight: 300; }
    .phil-body { font-size: 13.5px; color: var(--ink-mid); line-height: 1.85; max-width: 440px; margin-bottom: 8px; font-weight: 300; }
    .phil-body b { color: var(--ink); font-weight: 500; }
    .pull-quote {
      font-family: var(--serif); font-style: italic; font-weight: 300;
      font-size: 18px; color: var(--ink); line-height: 1.6;
      border-left: 2px solid var(--teal); padding-left: 18px;
      margin: 22px 0; max-width: 400px;
    }
    .phil-bottom { display: flex; align-items: flex-end; justify-content: space-between; flex-wrap: wrap; gap: 14px; }
    .phil-tagline { font-size: 11px; color: var(--ink-dim); line-height: 1.8; font-style: italic; font-family: var(--serif); }
    .phil-tagline b { font-style: normal; color: var(--ink-mid); font-weight: 400; }

    /* Meta sidebar tile */
    .tile-meta {
      background: var(--tile-inv);
      display: flex; flex-direction: column; justify-content: space-between;
      padding: 32px 28px;
    }
    .tile-meta .tile-label { color: rgba(255,255,255,0.45); }
    .tile-meta .tile-label::after { background: rgba(255,255,255,0.15); }
    .tile-meta .num { color: var(--bg) !important; }
    .tile-meta::before { mix-blend-mode: screen; opacity: 0.04; }

    .meta-stat {
      display: flex; flex-direction: column; gap: 22px;
      margin-bottom: 28px;
    }
    .stat-item {}
    .stat-num {
      font-family: var(--serif);
      font-size: 42px; font-weight: 700;
      color: var(--bg); line-height: 1;
      letter-spacing: -0.02em; margin-bottom: 4px;
    }
    .stat-label { font-size: 11px; color: rgba(255,255,255,0.35); letter-spacing: 0.04em; font-style: italic; font-family: var(--serif); }

    .meta-quote {
      font-family: var(--serif); font-style: italic; font-weight: 300;
      font-size: 14px; color: rgba(255,255,255,0.75);
      line-height: 1.65; border-left: 2px solid var(--bg);
      padding-left: 14px; margin-bottom: 24px;
    }
    .tile-meta .cta { background: var(--bg); color: var(--ink); box-shadow: 0 2px 8px rgba(0,0,0,0.25); }
    .tile-meta .cta:hover { background: #FFD700; }

    /* ═══════════════════════════════════════════
       SECTION 2 — PERSONAL EXPERIMENTATION
    ═══════════════════════════════════════════ */
    .section-header {
      display: flex; align-items: baseline;
      gap: 16px; padding: 6px 4px 0;
    }
    .section-heading {
      font-family: var(--serif);
      font-size: 13px; font-weight: 500;
      color: rgba(0,0,0,0.45);
      letter-spacing: 0.02em;
    }
    .section-heading em { font-style: italic; }
    .section-rule { flex: 1; height: 1px; background: rgba(0,0,0,0.12); }

    .section-experiments { display: flex; flex-direction: column; gap: var(--gap); }

    /* Full-width experiment card */
    .tile-exp {
      background: var(--tile-hi);
      display: grid;
      grid-template-columns: 280px 1fr;
      gap: 40px;
      align-items: start;
      padding: 32px 36px;
    }

    .exp-left {}
    .exp-num {
      font-family: 'Courier New', monospace;
      font-size: 9px; color: var(--ink-dim);
      letter-spacing: 0.12em; margin-bottom: 10px;
    }
    .exp-status {
      display: inline-flex; align-items: center; gap: 7px;
      font-size: 10px; letter-spacing: 0.04em;
      font-style: italic; font-family: var(--serif);
      margin-bottom: 16px;
    }
    .exp-status.on    { color: var(--teal); }
    .exp-status.proto { color: var(--ink-mid); }
    .exp-status.early { color: var(--ink-dim); }
    .dot { width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0; }
    .on .dot    { background: var(--teal); animation: blink 2.5s ease-in-out infinite; }
    .proto .dot { background: var(--ink-mid); }
    .early .dot { background: var(--ink-dim); }

    .exp-title {
      font-family: var(--serif);
      font-size: 30px; font-weight: 700;
      color: var(--ink); line-height: 1.05;
      letter-spacing: -0.02em; margin-bottom: 8px;
    }
    .exp-subtitle {
      font-size: 12px; color: var(--ink-dim);
      font-style: italic; font-family: var(--serif);
    }

    .exp-mid {}
    .exp-desc {
      font-size: 13px; color: var(--ink-mid);
      line-height: 1.85; font-weight: 300;
      margin-bottom: 16px;
    }
    .exp-desc b { color: var(--ink); font-weight: 500; }

    .exp-tools { display: flex; flex-wrap: wrap; gap: 6px; }
    .tool-tag {
      font-size: 10px; font-family: var(--sans);
      letter-spacing: 0.04em; font-weight: 500;
      padding: 4px 10px; border-radius: 0;
      border: 1px solid transparent;
    }
    /* Brand colors per tool */
    .tool-tag.claude      { background: #FFF0EC; color: #CC3300; border-color: rgba(204,51,0,0.25); }
    .tool-tag.airtable    { background: #E8F0FF; color: #1565C0; border-color: rgba(21,101,192,0.3); }
    .tool-tag.softr       { background: #EEF4FF; color: #1A56DB; border-color: rgba(26,86,219,0.25); }
    .tool-tag.zapier      { background: #FF4A00; color: #FFFFFF; border-color: rgba(255,74,0,0.4); }
    .tool-tag.relevanceai { background: #E8F0FF; color: #1565C0; border-color: rgba(21,101,192,0.3); }
    .tool-tag.openai      { background: #111111; color: #FFFFFF; border-color: rgba(0,0,0,0.8); }
    .tool-tag.voiceflow   { background: #E8E8EA; color: #1A1A1A; border-color: rgba(0,0,0,0.18); }
    .tool-tag.elevenlabs  { background: #FFFFFF; color: #111111; border-color: rgba(0,0,0,0.2); }
    .tool-tag.heygen      { background: #E6F4F1; color: #0D7A5F; border-color: rgba(13,122,95,0.25); }
    .tool-tag.canva       { background: #E8F8FF; color: #00C4CC; border-color: rgba(0,196,204,0.3); }
    .tool-tag.gemini {
      background: linear-gradient(90deg, #4285F4 0%, #EA4335 33%, #FBBC05 66%, #34A853 100%);
      color: #fff;
      border-color: transparent;
      font-weight: 600;
      text-shadow: 0 1px 2px rgba(0,0,0,0.18);
    }

    /* Principle tag */
    .principle-tag {
      display: inline-flex; align-items: center; gap: 6px;
      font-size: 9px; letter-spacing: 0.12em; text-transform: uppercase;
      font-family: var(--sans); font-weight: 500;
      color: #fff; background: var(--teal);
      padding: 4px 10px;
      margin-bottom: 14px;
    }

    .exp-right {
      display: flex; flex-direction: column;
      align-items: flex-end; gap: 10px;
      padding-top: 4px;
    }
    .exp-shot {
      width: 180px; height: 120px;
      background: rgba(0,0,0,0.04);
      border: 1px dashed rgba(100,80,0,0.16);
      border-radius: 0;
      display: flex; align-items: center; justify-content: center;
      font-size: 9px; color: var(--ink-dim);
      font-family: 'Courier New', monospace;
      letter-spacing: 0.06em;
      /* Replace: <img src="paystead.png" style="width:100%;height:100%;object-fit:cover;border-radius:6px;"> */
    }

    /* ═══════════════════════════════════════════
       SECTION 3 — COLLABORATIONS
    ═══════════════════════════════════════════ */
    .section-collaborations {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      grid-template-rows: auto;
      gap: var(--gap);
      align-items: start;
    }

    .tile-collab-card {
      background: var(--tile-alt);
      display: flex; flex-direction: column; justify-content: space-between;
      padding: 28px 28px;
    }
    .collab-top { margin-bottom: 20px; }
    .collab-name {
      font-family: var(--serif);
      font-size: 22px; font-weight: 700;
      color: var(--ink); letter-spacing: -0.01em;
      margin-bottom: 6px; line-height: 1.1;
    }
    .collab-type {
      font-size: 10px; color: var(--ink-dim);
      letter-spacing: 0.08em; text-transform: uppercase;
      margin-bottom: 20px;
    }
    .collab-testimonial {
      font-family: var(--serif);
      font-style: italic; font-weight: 300;
      font-size: 14px; color: var(--ink-mid);
      line-height: 1.7;
      border-left: 2px solid var(--bg);
      padding-left: 14px;
      margin-bottom: 16px;
    }
    /* Yellow border pops on the alt tile */
    .collab-points {
      list-style: none;
      margin-top: 16px;
      display: flex;
      flex-direction: column;
      gap: 10px;
    }
    .collab-points li {
      font-size: 12px;
      color: var(--ink-mid);
      line-height: 1.75;
      font-weight: 300;
      padding-left: 16px;
      position: relative;
    }
    .collab-points li::before {
      content: '—';
      position: absolute;
      left: 0;
      color: var(--teal);
      font-family: var(--serif);
      font-size: 11px;
    }

    /* ── What This Place Is Not ─────────────────── */
    .tile-not { background: var(--tile-hi); padding: 44px 48px; }
    .not-grid {
      display: grid;
      grid-template-columns: 200px 1fr;
      gap: 48px;
      align-items: start;
    }
    .not-left { padding-top: 6px; }
    .not-label {
      font-family: var(--serif);
      font-size: clamp(22px, 2.8vw, 38px);
      font-weight: 300;
      font-style: italic;
      color: var(--ink-dim);
      letter-spacing: -0.01em;
      line-height: 1.2;
    }
    .not-items {
      list-style: none;
      display: flex;
      flex-direction: column;
      gap: 0;
      margin-bottom: 28px;
    }
    .not-items li {
      font-family: var(--serif);
      font-size: clamp(20px, 2.4vw, 30px);
      font-weight: 300;
      color: var(--ink);
      letter-spacing: -0.01em;
      line-height: 1.2;
      padding: 12px 0;
      border-bottom: 1px solid var(--border);
      display: flex;
      align-items: center;
      gap: 16px;
    }
    .not-items li::before {
      content: '—';
      font-family: var(--serif);
      color: var(--ink-dim);
      font-size: 14px;
      flex-shrink: 0;
    }
    .not-items li:first-child { border-top: 1px solid var(--border); }
    .not-closing {
      font-family: var(--serif);
      font-style: italic;
      font-size: 15px;
      font-weight: 300;
      color: var(--teal);
      border-left: 2px solid var(--teal);
      padding-left: 16px;
    }

    /* ── Person Behind the Lab ───────────────────── */
    .tile-person {
      background: var(--teal);
      display: block;
      padding: 48px 56px;
    }
    .tile-person::before { mix-blend-mode: screen; opacity: 0.03; }
    .person-left { display: none; }
    .person-photo { display: none; }
    .person-photo-placeholder { display: none; }
    .person-id { display: none; }
    .person-name { display: none; }
    .person-role { display: none; }
    .person-link {
      display: inline-block;
      font-size: 10px;
      letter-spacing: 0.1em;
      color: var(--bg);
      text-decoration: none;
      border-bottom: 1px solid rgba(240,196,0,0.35);
      padding-bottom: 2px;
      transition: border-color 0.2s;
    }
    .person-link:hover { border-color: var(--bg); }
    .person-right {
      display: flex;
      flex-direction: column;
      gap: 20px;
      max-width: 760px;
    }
    .person-sig {
      margin-top: 12px;
      padding-top: 22px;
      border-top: 1px solid rgba(255,255,255,0.18);
      display: flex;
      align-items: baseline;
      gap: 20px;
      flex-wrap: wrap;
    }
    .person-sig-name {
      font-family: var(--serif);
      font-size: 15px;
      font-weight: 500;
      color: #fff;
      letter-spacing: -0.01em;
    }
    .person-sig-role {
      font-size: 11px;
      color: rgba(255,255,255,0.5);
      letter-spacing: 0.05em;
      font-style: italic;
      font-family: var(--serif);
    }
    .person-line {
      font-size: 14px;
      font-weight: 300;
      color: rgba(255,255,255,0.75);
      line-height: 1.85;
      font-family: var(--sans);
    }
    .person-line em {
      font-style: italic;
      font-family: var(--serif);
      color: rgba(255,255,255,0.95);
      font-size: 15px;
    }
    .person-line--lead {
      font-family: var(--serif);
      font-size: 18px;
      font-weight: 300;
      color: rgba(255,255,255,0.95);
      line-height: 1.6;
    }
    .person-line--beat {
      font-family: var(--serif);
      font-style: italic;
      font-size: 22px;
      font-weight: 300;
      color: var(--bg);
      line-height: 1.3;
      letter-spacing: -0.01em;
    }

    /* ═══════════════════════════════════════════
       SECTION 4 — BOTTOM STRIP
    ═══════════════════════════════════════════ */
    /* ═══════════════════════════════════════════
       SECTION 05 — PRINCIPLES (full width)
    ═══════════════════════════════════════════ */
    .section-principles-process {
      display: block;
    }

    /* Pillars */
    .tile-pillars {}
    .pillars-row {
      display: grid; grid-template-columns: repeat(4, 1fr);
      gap: 10px; margin-top: 20px;
    }
    .pillar {
      background: rgba(0,0,0,0.03);
      border: 1px solid var(--border);
      border-radius: 0; padding: 24px 22px;
      transition: background 0.2s;
    }
    .pillar:hover { background: rgba(0,0,0,0.06); }
    .pillar-mark {
      font-family: var(--serif); font-style: italic;
      font-size: 28px; color: var(--teal);
      opacity: 0.5; line-height: 1; margin-bottom: 14px;
    }
    .pillar h4 { font-size: 16px; font-weight: 500; color: var(--ink); margin-bottom: 9px; }
    .pillar p  { font-size: 13px; color: var(--ink-mid); line-height: 1.8; font-weight: 300; }

    /* ═══════════════════════════════════════════
       SECTIONS 06+07 — PROCESS + WORK TOGETHER
    ═══════════════════════════════════════════ */
    .section-process-cta {
      display: grid;
      grid-template-columns: 1fr 2fr;
      gap: var(--gap);
    }

    /* Process */
    .tile-process {}
    .steps { margin-top: 14px; }
    .step { display: flex; gap: 14px; padding: 12px 0; border-bottom: 1px solid var(--border); }
    .step:last-child { border-bottom: none; }
    .step-n { font-family: var(--serif); font-style: italic; font-size: 14px; color: var(--ink-dim); min-width: 22px; line-height: 1; padding-top: 2px; }
    .step-text h5 { font-size: 13px; font-weight: 500; color: var(--ink); margin-bottom: 4px; }
    .step-text p  { font-size: 12px; color: var(--ink-mid); line-height: 1.7; font-weight: 300; }

    /* ── CTA tile ────────────────────────────── */
    .tile-cta-block {
      background: var(--tile-inv);
      display: flex; flex-direction: column; justify-content: space-between;
    }
    .tile-cta-full { display: block; }
    .cta-full-inner {
      display: flex;
      flex-direction: column;
      gap: 0;
    }
    .tile-cta-block .tile-label { color: rgba(255,255,255,0.45); }
    .tile-cta-block .tile-label::after { background: rgba(255,255,255,0.15); }
    .tile-cta-block .num { color: var(--bg) !important; }
    .tile-cta-block::before { mix-blend-mode: screen; opacity: 0.04; }
    .cta-intro {
      font-size: 12px;
      color: rgba(255,255,255,0.75);
      font-style: italic;
      font-family: var(--serif);
      margin-bottom: 14px;
    }
    .cta-list {
      list-style: none;
      display: flex;
      flex-direction: column;
      gap: 0;
      margin-bottom: 20px;
    }
    .cta-list li {
      font-size: 13px;
      font-weight: 300;
      color: rgba(255,255,255,0.9);
      font-family: var(--sans);
      padding: 9px 0;
      border-bottom: 1px solid rgba(255,255,255,0.1);
      display: flex;
      align-items: center;
      gap: 12px;
    }
    .cta-list li:first-child { border-top: 1px solid rgba(255,255,255,0.1); }
    .cta-list li::before {
      content: '→';
      color: var(--bg);
      font-size: 11px;
      flex-shrink: 0;
    }
    .cta-note {
      font-size: 12px;
      font-family: var(--serif);
      font-style: italic;
      color: rgba(255,255,255,0.5);
      line-height: 1.7;
      margin-bottom: 24px;
    }

    /* ── Footer ──────────────────────────────────── */
    .site-footer {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 14px 24px;
      background: var(--ink);
      flex-wrap: wrap;
      gap: 8px;
    }
    .footer-left {
      font-size: 11px;
      font-family: var(--serif);
      font-style: italic;
      color: rgba(255,255,255,0.6);
    }
    .footer-right {
      font-size: 11px;
      font-family: var(--serif);
      font-style: italic;
      color: var(--bg);
    }
    .tile-cta-block .cta { background: var(--bg); color: var(--ink); box-shadow: 0 2px 8px rgba(0,0,0,0.25); }
    .tile-cta-block .cta:hover { background: #FFD700; }

    /* ── Footbar ────────────────────────────────── */
    .footbar {
      display: flex; align-items: center; justify-content: space-between;
      padding: 11px 20px;
      background: rgba(0,0,0,0.09);
      border-radius: var(--radius); flex-shrink: 0;
    }
    .footbar-left { font-size: 11px; color: rgba(0,0,0,0.38); font-style: italic; font-family: var(--serif); }
    .footbar-right { display: flex; gap: 20px; }
    .footbar-right a { font-size: 11px; color: rgba(0,0,0,0.38); text-decoration: none; transition: color 0.2s; }
    .footbar-right a:hover { color: var(--teal); }

    /* ── Responsive ─────────────────────────────── */
    @media (max-width: 1100px) {
      .section-philosophy { grid-template-columns: 1fr; }
      .tile-meta { display: none; }
      .tile-exp { grid-template-columns: 1fr; gap: 20px; }
      .exp-right { align-items: flex-start; }
      .exp-shot { width: 100%; }
      .pillars-row { grid-template-columns: 1fr 1fr; }
      .section-process-cta { grid-template-columns: 1fr; }
      .tile-person { grid-template-columns: 1fr; gap: 32px; }
    }
    @media (max-width: 780px) {
      .section-collaborations { grid-template-columns: 1fr; }
    }
    @media (max-width: 680px) {
      .wrapper { padding: 8px; }
      .topbar-ts, .topbar-status { display: none; }
    }