:root{
    --bg: #0b0b0e;
    --bg-card: #16161a;
    --bg-card-2: #1c1c21;
    --ticket: #1c1c21;
    --section-alt: #131317;
    --accent: #41899b;
    --accent-text: #5eb0c3;
    --ink: #f5f4f2;
    --ink-dim: #a2a0a8;
    --ink-faint: #9a989f;
    --border: rgba(245,244,242,0.32);
    --border-soft: rgba(245,244,242,0.22);
    --mono: 'IBM Plex Mono', monospace;
    --display: 'Geist', sans-serif;
    --body: 'Geist', sans-serif;
    --focus: #7ec8d6;
  }
  html[data-theme="light"]{
    --bg: #f2efe8;
    --bg-card: rgba(255,255,255,0.55);
    --bg-card-2: rgba(0,0,0,0.04);
    --ticket: #e9e5db;
    --section-alt: #ece7dc;
    --accent: #2f6d7c;
    --accent-text: #2a6270;
    --ink: #17161a;
    --ink-dim: #5c5a63;
    --ink-faint: #5a5860;
    --border: rgba(23,22,26,0.36);
    --border-soft: rgba(23,22,26,0.26);
    --focus: #2f6d7c;
  }
  *{ margin:0; padding:0; box-sizing:border-box; }
  html{ scroll-behavior:smooth; }
  body{ background: var(--bg); color: var(--ink); font-family: var(--body); font-weight:400; overflow-x:hidden; -webkit-font-smoothing:antialiased; transition: background 0.3s ease, color 0.3s ease; }
  ::selection{ background: var(--accent); color: #f5f4f2; }
  a{ color:inherit; }

  .field{ position:fixed; inset:0; z-index:0; overflow:hidden; height:100vh; background: var(--bg); transition: background 0.3s ease; }
  #dotField{ position:absolute; inset:0; width:100%; height:100%; display:block; }
  .field-fade{ position:fixed; top:0; left:0; right:0; height:100vh; z-index:1; background: linear-gradient(to bottom, transparent 55%, var(--bg) 100%); pointer-events:none; transition: background 0.3s ease; }

  header, main, footer{ position:relative; z-index:2; }
  header{ display:flex; align-items:center; gap:16px; padding: 24px 4vw; padding-right: calc(4vw + 54px); position:fixed; top:0; left:0; right:0; z-index:10; backdrop-filter: blur(12px); background: linear-gradient(to bottom, color-mix(in srgb, var(--bg) 70%, transparent), transparent); }
  .logo{ font-family: var(--mono); font-size:13px; letter-spacing:0.12em; color: var(--ink); text-transform:uppercase; font-weight:500; margin-right:auto; }
  nav{ display:flex; align-items:center; gap:26px; }
  nav a.nav-link{ font-size:16px; color: var(--ink-dim); text-decoration:none; transition: color 0.2s; }
  nav a.nav-link:hover{ color: var(--ink); }
  .theme-toggle{
    position:fixed;
    top: max(20px, env(safe-area-inset-top));
    right: max(4vw, env(safe-area-inset-right));
    z-index: 60;
    width:42px; height:42px; border-radius:999px;
    border:1px solid color-mix(in srgb, var(--ink) 14%, transparent);
    background:
      linear-gradient(
        155deg,
        color-mix(in srgb, var(--ink) 12%, transparent) 0%,
        color-mix(in srgb, var(--bg-card) 40%, transparent) 45%,
        color-mix(in srgb, var(--bg) 30%, transparent) 100%
      );
    backdrop-filter: blur(22px) saturate(1.55);
    -webkit-backdrop-filter: blur(22px) saturate(1.55);
    box-shadow:
      inset 0 1px 0 color-mix(in srgb, var(--ink) 22%, transparent),
      inset 0 -1px 0 color-mix(in srgb, #000 18%, transparent),
      0 10px 28px color-mix(in srgb, #000 22%, transparent),
      0 0 0 1px color-mix(in srgb, var(--ink) 4%, transparent);
    color: var(--ink);
    display:flex; align-items:center; justify-content:center;
    cursor:pointer; font-size:16px; line-height:1;
    flex-shrink:0;
    transition: border-color 0.2s, transform 0.2s, color 0.2s, background 0.3s ease, box-shadow 0.3s ease;
  }
  html[data-theme="light"] .theme-toggle{
    border-color: color-mix(in srgb, var(--ink) 10%, transparent);
    background:
      linear-gradient(
        155deg,
        rgba(255,255,255,0.72) 0%,
        color-mix(in srgb, #ffffff 42%, transparent) 48%,
        color-mix(in srgb, var(--bg) 35%, transparent) 100%
      );
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,0.85),
      inset 0 -1px 0 rgba(23,22,26,0.06),
      0 10px 28px rgba(23,22,26,0.12),
      0 0 0 1px rgba(23,22,26,0.04);
  }
  .theme-toggle:hover{ border-color: color-mix(in srgb, var(--ink) 22%, transparent); color: var(--ink); transform: scale(1.08); }
  .theme-toggle:active{ transform: scale(0.96); }
  .nav-toggle{
    display:none;
    width:42px; height:42px;
    border-radius:12px;
    border:1px solid var(--border);
    background: var(--bg-card);
    color: var(--ink);
    align-items:center; justify-content:center;
    cursor:pointer;
    padding:0;
    position:relative;
    z-index:12;
    transition: border-color 0.2s, background 0.3s ease;
  }
  .nav-toggle:hover{ border-color: rgba(128,128,128,0.45); }
  .nav-toggle span{
    position:absolute;
    left:11px; right:11px;
    height:1.5px;
    background: currentColor;
    border-radius:2px;
    transition: transform 0.25s ease, opacity 0.2s ease, top 0.25s ease;
  }
  .nav-toggle span:nth-child(1){ top:14px; }
  .nav-toggle span:nth-child(2){ top:20px; }
  .nav-toggle span:nth-child(3){ top:26px; }
  header.nav-open .nav-toggle span:nth-child(1){ top:20px; transform: rotate(45deg); }
  header.nav-open .nav-toggle span:nth-child(2){ opacity:0; }
  header.nav-open .nav-toggle span:nth-child(3){ top:20px; transform: rotate(-45deg); }
  body.nav-locked{ overflow:hidden; }
  .sr-only{
    position:absolute; width:1px; height:1px; padding:0; margin:-1px;
    overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
  }

  .skip-link{
    position:absolute; left:16px; top:16px; z-index:200;
    padding:10px 14px; border-radius:10px;
    background:var(--ink); color:var(--bg);
    font-family:var(--mono); font-size:13px; text-decoration:none;
    transform:translateY(-160%);
    transition:transform 0.2s ease;
  }
  .skip-link:focus, .skip-link:focus-visible{
    transform:translateY(0);
    outline:3px solid var(--focus);
    outline-offset:3px;
  }
  :focus{ outline: none; }
  :focus-visible{
    outline:3px solid var(--focus);
    outline-offset:3px;
  }
  .nav-toggle:focus-visible, .theme-toggle:focus-visible, .ticket-close:focus-visible, .ticket-chip:focus-visible{
    outline-offset:2px;
  }
  .btn:focus-visible, a.work-card:focus-visible, nav a:focus-visible{
    outline-offset:3px;
  }
  .live .status-label, .roadmap .status-label{ color: var(--accent-text); }
  .price-card.featured{ border-color: color-mix(in srgb, var(--accent) 75%, var(--ink)); }
  .btn-primary:hover{ background: var(--accent-text); color:#0b0b0e; }
  html[data-theme="light"] .btn-primary:hover{ color:#f5f4f2; }
  @media (prefers-reduced-motion: reduce){
    *, *::before, *::after{
      animation-duration:0.01ms !important;
      animation-iteration-count:1 !important;
      transition-duration:0.01ms !important;
      scroll-behavior:auto !important;
    }
    .reveal{ opacity:1; transform:none; }
  }
  .reveal{ transition: opacity 0.7s cubic-bezier(0.22,1,0.36,1), transform 0.7s cubic-bezier(0.22,1,0.36,1); }
  noscript .reveal, html.no-js .reveal{ opacity:1; transform:none; }

  section{ padding: 130px 4vw; max-width:1480px; margin:0 auto; }
  .hero-section{ padding-top: 200px; padding-bottom: 100px; text-align:center; display:flex; flex-direction:column; align-items:center; }
  .hero-section > *:not(.ticket-overlay){
    opacity:0;
    transform: translateY(18px);
    animation: hero-enter 0.9s cubic-bezier(0.22, 1, 0.36, 1) forwards;
  }
  .hero-section > *:nth-child(1){ animation-delay: 0.06s; }
  .hero-section > *:nth-child(2){ animation-delay: 0.16s; }
  .hero-section > *:nth-child(3){ animation-delay: 0.26s; }
  .hero-section > *:nth-child(4){ animation-delay: 0.38s; }
  .hero-section > *:nth-child(5){ animation-delay: 0.5s; }
  .hero-section .ticket-stack{
    transform: translateY(28px) scale(0.97);
    animation-name: hero-enter-ticket;
    animation-duration: 1s;
  }
  @keyframes hero-enter{
    to{ opacity:1; transform: translateY(0); }
  }
  @keyframes hero-enter-ticket{
    to{ opacity:1; transform: translateY(0) scale(1); }
  }
  @media (prefers-reduced-motion: reduce){
    .hero-section > *:not(.ticket-overlay){
      opacity:1;
      transform:none;
      animation:none;
    }
  }

  .eyebrow{ font-family: var(--mono); font-size:12px; letter-spacing:0.14em; color: var(--ink-dim); text-transform:uppercase; margin-bottom:22px; display:flex; align-items:center; gap:10px; }
  .hero-section .eyebrow{ justify-content:center; }
  .eyebrow::before{ content:''; width:6px; height:6px; border-radius:50%; background: var(--accent); box-shadow:0 0 8px rgba(65,137,155,0.55); }

  h1{ font-family: var(--display); font-weight:400; font-size: clamp(38px, 5.6vw, 72px); line-height:1.08; letter-spacing:-0.02em; max-width: 16ch; }
  .hero-sub{ font-size:18px; line-height:1.6; color: var(--ink-dim); max-width:52ch; margin-top:24px; }
  .hero-cta{ display:flex; gap:14px; margin-top:38px; flex-wrap:wrap; }

  .ticket-prompt{ margin-top:48px; text-align:center; }
  .tp-main{ font-family:var(--display); font-weight:400; font-size:19px; }
  .tp-sub{ font-family:var(--mono); font-size:12px; color:var(--ink-faint); margin-top:6px; letter-spacing:0.04em; }
  .ticket-stack{ position:relative; z-index:20; width:100%; height:300px; perspective:1200px; margin-top:32px; max-width:420px; margin-left:auto; margin-right:auto; align-self:center; flex-shrink:0; }
  .ticket-card{ position:absolute; inset:0; width:100%; height:260px; border-radius:20px; background: transparent; border:none; transition:transform 0.5s cubic-bezier(.2,.9,.3,1); transform-style:preserve-3d; overflow:visible; }
  .ticket-card.d1, .ticket-card.d2{
    background: transparent;
    pointer-events:none;
  }
  .ticket-card.d1{ transform: translateY(10px) rotate(-3deg) scale(0.97); z-index:1; }
  .ticket-card.d2{ transform: translateY(20px) rotate(3deg) scale(0.94); z-index:0; }
  .ticket-card.front{ z-index:9; background:transparent; border:none; overflow:visible; box-shadow:none; }
  .ticket-stack:hover .ticket-card.front:not(.pulled){ transform: translateY(-8px) rotate(-1deg) scale(1.02); }
  .ticket-stack:hover .ticket-card.d1{ transform: translateY(4px) rotate(-7deg) scale(0.96); }
  .ticket-stack:hover .ticket-card.d2{ transform: translateY(16px) rotate(7deg) scale(0.93); }
  .ticket-card.pulled{ transform: translateY(-320px) rotate(0deg) scale(1) !important; }
  .ticket-card.flipped{ height:420px; transform: translateY(-320px) rotate(0deg) scale(1) rotateY(180deg) !important; }

  .ticket-face{ position:absolute; inset:0; border-radius:20px; backface-visibility:hidden; -webkit-backface-visibility:hidden; display:flex; flex-direction:column; align-items:center; justify-content:center; padding:22px 24px; cursor:pointer; }
  .ticket-shape{ position:absolute; inset:0; width:100%; height:100%; z-index:0; pointer-events:none; }
  .ticket-shape{ overflow:visible; }
  .ticket-shape path.ticket-silhouette{
    fill:var(--ticket);
    stroke:var(--border);
    stroke-width:1;
    stroke-linejoin:round;
  }
  .ticket-face, .ticket-back{ overflow:visible; }
  .ticket-face > *:not(.ticket-shape), .ticket-back > *:not(.ticket-shape):not(.ticket-close), .ticket-back form{ position:relative; z-index:1; }
  .ticket-face .num{ font-family:var(--mono); font-size:11.5px; color:var(--ink-dim); letter-spacing:0.06em; }
  .ticket-divider{ width:78%; border-top:1px dashed var(--border); margin:12px 0; }
  .preview-chips{ display:flex; gap:6px; flex-wrap:wrap; justify-content:center; }
  .pv-chip{ font-family:var(--mono); font-size:10.5px; padding:6px 11px; border-radius:999px; border:1px solid var(--border); color:var(--ink-dim); }
  .preview-field{ width:74%; margin-top:4px; }
  .pv-label{ font-family:var(--mono); font-size:9.5px; color:var(--ink-dim); text-transform:uppercase; letter-spacing:0.06em; text-align:left; }
  .pv-line{ border-bottom:1px solid var(--border); height:16px; margin-top:3px; }
  .ticket-face .hint{ font-family:var(--mono); font-size:11px; color:var(--ink-dim); margin-top:14px; }

  .ticket-back{ position:absolute; inset:0; border-radius:20px; backface-visibility:hidden; -webkit-backface-visibility:hidden; transform:rotateY(180deg); padding:48px 30px 28px; text-align:left; display:flex; flex-direction:column; gap:2px; }
  .ticket-back form{ display:flex; flex-direction:column; gap:2px; flex:1; min-height:0; }
  .ticket-chips{ display:flex; gap:8px; flex-wrap:wrap; margin-bottom:14px; }
  .ticket-chip{ font-family:var(--mono); font-size:11.5px; padding:8px 12px; border-radius:999px; border:1px solid var(--border); color:var(--ink-dim); cursor:pointer; transition:all 0.2s; background:transparent; appearance:none; }
  .ticket-chip.active{ background:var(--ink); color:var(--bg); border-color:var(--ink); }
  .ticket-back label{ font-family:var(--mono); font-size:10px; color:var(--ink-dim); text-transform:uppercase; letter-spacing:0.06em; display:block; margin-top:10px; margin-bottom:4px; }
  .ticket-back input, .ticket-back textarea{ width:100%; background:transparent; border:none; border-bottom:1px solid var(--border); color:var(--ink); font-family:var(--body); font-size:14px; padding:6px 0; border-radius:0; }
  .ticket-back input:focus-visible, .ticket-back textarea:focus-visible{ border-bottom-color: var(--focus); outline:none; box-shadow:0 2px 0 0 var(--focus); }
  .ticket-back textarea{ resize:none; min-height:76px; }
  .ticket-close{
    position:absolute;
    top:14px;
    right:14px;
    z-index:4;
    width:36px;
    height:36px;
    border-radius:50%;
    border:1px solid var(--border);
    background: color-mix(in srgb, var(--ticket) 70%, var(--bg));
    color: var(--ink);
    font-size:22px;
    line-height:1;
    cursor:pointer;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:0;
    transition: border-color 0.2s, transform 0.2s;
  }
  .ticket-close:hover{ border-color: rgba(128,128,128,0.45); transform: scale(1.05); }
  .ticket-submit-row{ margin-top:12px; display:flex; justify-content:flex-end; }
  @media (max-width:700px){
    .ticket-stack{
      max-width:min(92vw, 420px);
      height:280px;
      perspective:none;
    }
    .ticket-stack:has(.flipped){
      height:auto;
      min-height:460px;
      z-index:30;
    }
    .ticket-stack:has(.flipped) .ticket-card.d1,
    .ticket-stack:has(.flipped) .ticket-card.d2{
      opacity:0;
      pointer-events:none;
    }
    .ticket-card.pulled{
      transform: translateY(-18px) !important;
    }
    .ticket-card.flipped{
      height:auto;
      min-height:0;
      transform: translateY(-18px) !important;
      background: transparent;
      border: none;
      overflow:visible;
    }
    .ticket-card.flipped .ticket-face{
      visibility:hidden;
      pointer-events:none;
    }
    .ticket-card.flipped .ticket-shape{
      display:block;
    }
    .ticket-back{
      transform:none !important;
      -webkit-transform:none !important;
      backface-visibility:visible;
      -webkit-backface-visibility:visible;
      visibility:hidden;
      pointer-events:none;
      padding:48px 22px 22px;
      gap:0;
    }
    .ticket-card.flipped .ticket-back{
      visibility:visible;
      pointer-events:auto;
      position:relative;
      inset:auto;
      display:flex;
      overflow:visible;
    }
    .ticket-chips{ gap:6px; margin-bottom:6px; }
    .ticket-chip{ font-size:11px; padding:7px 10px; }
    .ticket-back label{ margin-top:12px; margin-bottom:2px; }
    .ticket-back input,
    .ticket-back textarea{
      font-size:16px;
      line-height:1.4;
      padding:8px 0;
      min-height:28px;
    }
    .ticket-back textarea{ min-height:72px; }
    .ticket-submit-row{ margin-top:16px; }
  }

  .ticket-overlay{ position:fixed; inset:0; z-index:8; background:rgba(0,0,0,0.4); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); opacity:0; pointer-events:none; transition: opacity 0.45s ease; }
  .ticket-overlay.show{ opacity:1; pointer-events:auto; }

  .btn{ font-family: var(--body); font-weight:400; font-size:14.5px; padding:15px 28px; border-radius:999px; text-decoration:none; display:inline-flex; align-items:center; gap:8px; transition: all 0.2s ease; white-space:nowrap; }
  .btn-primary{ background: var(--ink); color: var(--bg); }
  .btn-primary:hover{ background: var(--accent-text); color:#0b0b0e; transform: translateY(-1px); }
  html[data-theme="light"] .btn-primary:hover{ color:#f5f4f2; }
  .btn-ghost{ border:1px solid var(--border); color: var(--ink); background: transparent; }
  .btn-ghost:hover{ border-color: rgba(128,128,128,0.4); transform: translateY(-1px); }
  .btn-small{ font-size:13px; padding:11px 20px; }

  .section-head{ margin-bottom:44px; max-width:66ch; display:flex; justify-content:space-between; align-items:flex-end; gap:40px; flex-wrap:wrap; }
  .section-head .htxt h2{ font-family: var(--display); font-weight:400; font-size: clamp(26px, 3.2vw, 40px); line-height:1.2; letter-spacing:-0.01em; }

  .card-grid{ display:grid; grid-template-columns: repeat(3, 1fr); gap:20px; }
  .card-grid-2{ grid-template-columns: repeat(2, 1fr); }

  .section-alt-bg{ position:relative; background:var(--section-alt); box-shadow:0 0 0 100vmax var(--section-alt); clip-path:inset(0 -100vmax); }

  .timeline{ position:relative; margin-top:64px; padding:0 0 40px; transition: padding-bottom 0.35s ease; }
  .timeline:has(.tl-node:hover), .timeline:has(.tl-node:focus-within), .timeline:has(.tl-node.open){ padding-bottom: 250px; }
  .timeline-nodes{ position:relative; display:flex; justify-content:space-between; align-items:flex-start; }
  .timeline-track{ position:absolute; top:7px; left:4%; right:4%; height:1px; background:var(--border); overflow:hidden; }
  .timeline-track::after{ content:''; position:absolute; top:0; left:-30%; width:30%; height:100%; background:linear-gradient(90deg, transparent, var(--accent), transparent); animation: tl-travel 5s linear infinite; }
  @keyframes tl-travel{ 0%{ left:-30%; } 100%{ left:100%; } }

  .tl-node{ position:relative; display:flex; flex-direction:column; align-items:center; cursor:default; flex:1; }
  .tl-dot{ width:14px; height:14px; min-width:14px; min-height:14px; flex-shrink:0; box-sizing:border-box; border-radius:50%; background:var(--ink); border:2px solid transparent; transition:background 0.2s, border-color 0.2s, transform 0.2s; animation: pulse 2.6s ease-in-out infinite; }
  .tl-node:hover .tl-dot, .tl-node:focus-within .tl-dot, .tl-node.open .tl-dot{ transform:scale(1.45); background:var(--accent); border-color:transparent; }
  .tl-label{ margin-top:18px; font-family:var(--display); font-weight:400; font-size:16px; }
  .tl-sub{ font-family:var(--mono); font-size:10.5px; color:var(--ink-faint); margin-top:3px; }

  .tl-branch{ position:absolute; top:calc(100% + 8px); left:50%; transform:translateX(-50%); display:flex; flex-direction:column; align-items:center; z-index:6; }
  .tl-connector{ width:1px; height:16px; background:var(--ink-dim); opacity:0; transition:opacity 0.2s ease; }
  .tl-node:hover .tl-connector, .tl-node:focus-within .tl-connector, .tl-node.open .tl-connector{ opacity:1; background:var(--accent); }
  .tl-subnodes{ display:flex; flex-wrap:wrap; justify-content:center; gap:8px; width:250px; margin-top:10px; }
  .tl-subnode{ background:var(--ticket); border:1px solid var(--border); border-radius:999px; padding:8px 13px; font-family:var(--mono); font-size:11px; color:var(--ink); white-space:nowrap; opacity:0; transform:translateY(-8px) scale(0.92); transition:opacity 0.3s ease, transform 0.3s ease; box-shadow:0 2px 8px rgba(0,0,0,0.08); pointer-events:none; }
  .tl-node:hover .tl-subnode, .tl-node:focus-within .tl-subnode, .tl-node.open .tl-subnode{ opacity:1; transform:translateY(0) scale(1); pointer-events:auto; }
  .tl-subnode:nth-child(1){ transition-delay:0.02s; } .tl-subnode:nth-child(2){ transition-delay:0.06s; }
  .tl-subnode:nth-child(3){ transition-delay:0.10s; } .tl-subnode:nth-child(4){ transition-delay:0.14s; }
  .tl-subnode:nth-child(5){ transition-delay:0.18s; } .tl-subnode:nth-child(6){ transition-delay:0.22s; }
  .tl-subnode:nth-child(7){ transition-delay:0.26s; }

  /* Always-vertical timeline (Studio) */
  .timeline.timeline-vertical{
    margin-top:8px;
    padding-bottom:0;
  }
  .timeline.timeline-vertical:has(.tl-node:hover),
  .timeline.timeline-vertical:has(.tl-node:focus-within),
  .timeline.timeline-vertical:has(.tl-node.open){
    padding-bottom:0;
  }
  .timeline.timeline-vertical .timeline-track{
    display:block;
    top:10px;
    bottom:10px;
    left:6px;
    right:auto;
    width:1px;
    height:auto;
  }
  .timeline.timeline-vertical .timeline-track::after{
    left:0;
    top:-30%;
    width:100%;
    height:30%;
    background:linear-gradient(180deg, transparent, var(--accent), transparent);
    animation: tl-travel-v 5s linear infinite;
  }
  @keyframes tl-travel-v{ 0%{ top:-30%; } 100%{ top:100%; } }
  .timeline.timeline-vertical .timeline-nodes{
    flex-direction:column;
    gap:28px;
    align-items:stretch;
  }
  .timeline.timeline-vertical .tl-node{
    display:grid;
    grid-template-columns: 14px max-content;
    grid-template-rows: auto auto;
    column-gap:14px;
    row-gap:2px;
    align-items:center;
    width:100%;
    cursor:default;
    flex:none;
  }
  .timeline.timeline-vertical .tl-node.open,
  .timeline.timeline-vertical .tl-node:focus-within{
    grid-template-columns: 14px max-content minmax(0, 1fr);
    align-items:start;
  }
  .timeline.timeline-vertical .tl-dot,
  .timeline.timeline-vertical .tl-node:hover .tl-dot,
  .timeline.timeline-vertical .tl-node:focus-within .tl-dot,
  .timeline.timeline-vertical .tl-node.open .tl-dot{
    grid-column:1;
    grid-row:1;
    width:14px;
    height:14px;
    min-width:14px;
    min-height:14px;
    flex:none;
    transform:none;
    margin-top:2px;
  }
  .timeline.timeline-vertical .tl-node:hover .tl-dot,
  .timeline.timeline-vertical .tl-node:focus-within .tl-dot,
  .timeline.timeline-vertical .tl-node.open .tl-dot{ background:var(--accent); }
  .timeline.timeline-vertical .tl-label{
    grid-column:2;
    grid-row:1;
    margin-top:0;
  }
  .timeline.timeline-vertical .tl-sub{
    grid-column:2;
    grid-row:2;
    margin-top:0;
  }
  .timeline.timeline-vertical .tl-branch{
    grid-column:3;
    grid-row:1 / span 2;
    width:auto;
    position:static;
    transform:none;
    display:none;
    flex-direction:row;
    align-items:flex-start;
    gap:0;
    margin:0;
    padding:0;
    align-self:start;
  }
  .timeline.timeline-vertical .tl-node.open .tl-branch,
  .timeline.timeline-vertical .tl-node:focus-within .tl-branch{ display:flex; }
  .timeline.timeline-vertical .tl-connector{ display:none; }
  .timeline.timeline-vertical .tl-tree{
    display:none;
    position:absolute;
    left:0;
    top:0;
    width:100%;
    height:100%;
    overflow:visible;
    pointer-events:none;
    z-index:1;
  }
  .timeline.timeline-vertical .tl-node.open .tl-tree,
  .timeline.timeline-vertical .tl-node:focus-within .tl-tree{ display:block; }
  .timeline.timeline-vertical .tl-subnodes{
    width:auto;
    flex:1;
    min-width:0;
    flex-direction:column;
    align-items:flex-start;
    justify-content:flex-start !important;
    opacity:1;
    position:relative;
    z-index:2;
    margin:0.55em 0 0;
    padding:4px 0 0 28px;
    gap:10px;
    border:none;
  }
  .timeline.timeline-vertical .tl-subnode{
    opacity:1;
    transform:none;
    pointer-events:auto;
    position:relative;
    margin:0;
  }
  /* Desktop: expand on hover */
  @media (hover: hover) and (pointer: fine){
    .timeline.timeline-vertical .tl-node:hover{
      grid-template-columns: 14px max-content minmax(0, 1fr);
      align-items:start;
    }
    .timeline.timeline-vertical .tl-node:hover .tl-branch{ display:flex; }
    .timeline.timeline-vertical .tl-node:hover .tl-tree{ display:block; }
  }
  /* Touch / small screens: click target */
  @media (max-width:700px), (hover: none){
    .timeline.timeline-vertical .tl-node{ cursor:pointer; }
  }

  @media (max-width:700px){
    .timeline{ padding-bottom:0; }
    .timeline-track{ display:none; }
    .timeline-nodes{ flex-direction:column; gap:20px; align-items:stretch; }
    .tl-node{
      display:grid;
      grid-template-columns: 14px max-content;
      grid-template-rows: auto auto;
      column-gap:12px;
      row-gap:2px;
      align-items:center;
      width:100%;
      cursor:pointer;
    }
    .tl-node.open{
      grid-template-columns: 14px max-content minmax(0, 1fr);
      align-items:start;
    }
    .tl-dot,
    .tl-node:hover .tl-dot,
    .tl-node.open .tl-dot{
      grid-column:1;
      grid-row:1;
      width:14px;
      height:14px;
      min-width:14px;
      min-height:14px;
      flex:none;
      transform:none;
      margin-top:2px;
    }
    .tl-node.open .tl-dot{ background:var(--accent); }
    .tl-label{
      grid-column:2;
      grid-row:1;
      margin-top:0;
    }
    .tl-sub{
      grid-column:2;
      grid-row:2;
      margin-top:0;
    }
    .tl-branch{
      grid-column:3;
      grid-row:1 / span 2;
      width:auto;
      position:static;
      transform:none;
      display:none;
      flex-direction:row;
      align-items:flex-start;
      gap:0;
      margin:0;
      padding:0;
      align-self:start;
    }
    .tl-node.open .tl-branch{ display:flex; }
    .tl-connector{ display:none; }
    .tl-tree{
      display:none;
      position:absolute;
      left:0;
      top:0;
      width:100%;
      height:100%;
      overflow:visible;
      pointer-events:none;
      z-index:1;
    }
    .tl-node.open .tl-tree{ display:block; }
    .tl-subnodes{
      width:auto;
      flex:1;
      min-width:0;
      flex-direction:column;
      align-items:flex-start;
      justify-content:flex-start !important;
      opacity:1;
      position:relative;
      z-index:2;
      margin:0.55em 0 0;
      padding:4px 0 0 28px;
      gap:10px;
      border:none;
    }
    .tl-subnode{
      opacity:1;
      transform:none;
      pointer-events:auto;
      position:relative;
      margin:0;
    }
  }
  .card{ background: var(--bg-card); border:1px solid var(--border); border-radius:20px; padding:34px 30px; transition: border-color 0.2s, transform 0.2s; }
  .card:hover{ border-color: rgba(128,128,128,0.3); }

  .stage .num{ font-family: var(--mono); font-size:12px; color: var(--ink-faint); letter-spacing:0.1em; }
  .stage h3{ font-family: var(--display); font-size:20px; font-weight:400; margin:16px 0 10px; }
  .stage p{ color: var(--ink-dim); font-size:14px; line-height:1.6; }

  .founder{ display:grid; grid-template-columns: 0.85fr 1.4fr; gap:24px; align-items:stretch; }
  .founder-card .role{ font-family: var(--mono); font-size:11px; color: var(--ink); text-transform:uppercase; letter-spacing:0.1em; margin-bottom:10px; }
  .founder-card h3{ font-family: var(--display); font-size:21px; font-weight:400; }
  .founder-card .clients{ margin-top:22px; padding-top:22px; border-top:1px solid var(--border); font-family: var(--mono); font-size:11.5px; color: var(--ink-faint); letter-spacing:0.06em; line-height:2; }
  .founder-copy{ display:flex; flex-direction:column; justify-content:center; }
  .founder-copy p{ color: var(--ink-dim); font-size:15.5px; line-height:1.7; }

  .work-card{
    padding:14px 14px 0;
    overflow:hidden;
    display:flex;
    flex-direction:column;
    background: color-mix(in srgb, var(--bg-card) 62%, transparent);
    border: 1px solid color-mix(in srgb, var(--ink) 7%, transparent);
    backdrop-filter: blur(20px) saturate(1.4);
    -webkit-backdrop-filter: blur(20px) saturate(1.4);
    box-shadow:
      inset 0 1px 0 color-mix(in srgb, var(--ink) 10%, transparent),
      0 10px 36px color-mix(in srgb, #000 14%, transparent);
    transition: border-color 0.25s ease, transform 0.25s ease, background 0.3s ease, box-shadow 0.25s ease;
  }
  a.work-card{
    text-decoration:none;
    color: inherit;
    cursor:pointer;
    -webkit-tap-highlight-color: transparent;
  }
  .work-card:hover{
    border-color: color-mix(in srgb, var(--ink) 12%, transparent);
    transform: translateY(-2px);
    box-shadow:
      inset 0 1px 0 color-mix(in srgb, var(--ink) 14%, transparent),
      0 14px 40px color-mix(in srgb, #000 18%, transparent);
  }
  a.work-card:hover .work-link,
  a.work-card:focus-visible .work-link{ color: var(--accent-text); }
  a.work-card:focus-visible{
    outline:3px solid var(--focus);
    outline-offset:3px;
  }
  html[data-theme="light"] .work-card{
    background: color-mix(in srgb, #ffffff 48%, transparent);
    border-color: color-mix(in srgb, var(--ink) 6%, transparent);
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,0.65),
      0 10px 36px rgba(23,22,26,0.06);
  }
  .work-thumb{
    position:relative;
    aspect-ratio: 4/3;
    display:flex;
    align-items:center;
    justify-content:center;
    overflow:hidden;
    border-radius:14px;
  }
  .work-thumb h3{ font-family: var(--display); font-size:24px; font-weight:400; color:#fff; position:relative; z-index:2; letter-spacing:-0.01em; }
  .thumb-combly{ background: radial-gradient(circle at 28% 26%, #f3eadc, transparent 55%), radial-gradient(circle at 78% 74%, #b89672, transparent 58%), linear-gradient(145deg, #d8c4a8, #9a7d5f); }
  .thumb-combly h3{ color:#2a2218; }
  .thumb-thread{ background: radial-gradient(circle at 75% 20%, #6b88c6, transparent 55%), radial-gradient(circle at 25% 75%, #33448c, transparent 60%), linear-gradient(135deg, #0a0e20, #1a2550); }
  .thumb-more{ background: repeating-linear-gradient(135deg, rgba(255,255,255,0.04) 0 2px, transparent 2px 14px), #17171b; }
  .thumb-more h3{ color: var(--ink-faint); font-size:17px; font-weight:500; }
  .thumb-a11xyz{ background: radial-gradient(circle at 22% 20%, rgba(65,137,155,0.55), transparent 52%), radial-gradient(circle at 82% 78%, rgba(120,180,160,0.28), transparent 55%), linear-gradient(150deg, #0e1618, #1a2e32); }
  .thumb-a11xyz h3{ color:#e8f4f2; }
  .thumb-tutu{ background: radial-gradient(circle at 20% 18%, #f2a4b8, transparent 48%), radial-gradient(circle at 78% 72%, #e8c46a, transparent 52%), linear-gradient(145deg, #3a1424, #7a2f45); }
  .thumb-tutu h3{ color:#fff5f0; }
  .work-body{ padding:18px 8px 22px; display:flex; flex-direction:column; flex-grow:1; }
  .work-tag{ font-family: var(--mono); font-size:11px; letter-spacing:0.08em; text-transform:uppercase; color: var(--ink-faint); margin-bottom:12px; }
  .work-body p{ color: var(--ink-dim); font-size:14px; line-height:1.6; flex-grow:1; }
  .work-link{ margin-top:16px; font-size:13px; font-weight:400; text-decoration:none; color: var(--ink); display:inline-flex; align-items:center; gap:6px; align-self:flex-start; }

  .pricing-grid{ display:grid; grid-template-columns: repeat(3, 1fr); gap:20px; }
  .price-card{ display:flex; flex-direction:column; }
  .price-card .tier{ font-family: var(--mono); font-size:11px; letter-spacing:0.1em; color: var(--ink-faint); text-transform:uppercase; margin-bottom:14px; }
  .price-card h3{ font-family: var(--display); font-size:21px; font-weight:400; margin-bottom:6px; }
  .price-card .sub{ color: var(--ink-dim); font-size:13px; margin-bottom:20px; }
  .price-card ul{ list-style:none; margin-bottom:24px; flex-grow:1; }
  .price-card li{ font-size:13.5px; color: var(--ink-dim); padding:8px 0; border-top:1px solid var(--border-soft); }
  .price-card li:first-child{ border-top:none; }
  .price-card .from{ font-family: var(--mono); font-size:11px; color: var(--ink-faint); text-transform:uppercase; margin-bottom:2px; }
  .price-card .amount{ font-family: var(--display); font-size:19px; font-weight:400; }
  .price-card.featured{ background: var(--bg-card-2); border-color: rgba(65,137,155,0.45); }
  .tier-note{ font-family:var(--mono); font-size:11.5px; color:var(--ink-dim); margin-top:8px; margin-bottom:18px; }

  .addon-row{ display:grid; grid-template-columns: 1.2fr 1fr; gap:20px; margin-top:20px; }
  .addon-card h4{ font-family: var(--display); font-size:17px; font-weight:400; margin-bottom:10px; }
  .addon-card p{ color: var(--ink-dim); font-size:13.5px; line-height:1.6; margin-bottom:8px; }
  .addon-card .amount-line{ font-family:var(--mono); font-size:12.5px; color: var(--ink); margin-top:14px; }
  .addon-list{ list-style:none; }
  .addon-list li{ display:flex; justify-content:space-between; padding:11px 0; border-top:1px solid var(--border-soft); font-size:13.5px; color: var(--ink-dim); }
  .addon-list li:first-child{ border-top:none; }
  .addon-list span.tag{ font-family:var(--mono); font-size:11px; color: var(--ink-faint); text-transform:uppercase; }

  .availability{ margin-top:28px; padding:18px 24px; border:1px solid var(--border); border-radius:999px; background: var(--bg-card); font-family: var(--mono); font-size:12.5px; color: var(--ink-dim); display:inline-flex; align-items:center; gap:10px; }
  .availability::before{ content:''; width:7px; height:7px; border-radius:50%; background:#e0a940; flex-shrink:0; animation: pulse 2.4s ease-in-out infinite; }
  @keyframes pulse{ 0%,100%{ opacity:1; } 50%{ opacity:0.35; } }

  .offer-status{ display:flex; align-items:center; gap:10px; margin-bottom:14px; }
  .status-dot{ width:7px; height:7px; border-radius:50%; }
  .live .status-dot{ background: var(--accent); box-shadow:0 0 8px rgba(65,137,155,0.55); animation: pulse 2.4s ease-in-out infinite; }
  .roadmap .status-dot, .coming .status-dot{ background: #e0a940; box-shadow:0 0 8px rgba(224,169,64,0.45); animation: pulse 2.4s ease-in-out infinite; }
  .status-label{ font-family: var(--mono); font-size:11.5px; letter-spacing:0.1em; text-transform:uppercase; }
  .live .status-label{ color: var(--accent-text); }
  .roadmap .status-label, .coming .status-label{ color: var(--ink-dim); }
  .offers{ display:flex; flex-direction:column; gap:20px; }
  .offer{ display:grid; grid-template-columns: 1.5fr 1fr; gap:36px; align-items:center; }
  .offer.roadmap{ opacity:0.7; }
  .offer h3{ font-family: var(--display); font-size:21px; font-weight:400; margin-bottom:10px; }
  .offer p{ color: var(--ink-dim); font-size:14.5px; line-height:1.65; max-width:48ch; }
  .offer-meta{ text-align:right; }
  .offer-meta .amount{ font-size:14.5px; color:var(--ink-dim); font-family:var(--mono); font-weight:400; }

  .faq-list{ display:flex; flex-direction:column; gap:14px; }
  .faq-item{ padding:22px 26px; }
  .faq-item .q{ font-family: var(--display); font-size:15.5px; font-weight:400; margin-bottom:8px; display:flex; gap:14px; color:var(--ink); }
  .faq-item .q .qnum{ font-family:var(--mono); color: var(--ink-faint); font-size:13px; font-weight:400; }
  .faq-item .a{ color: var(--ink-dim); font-size:14px; line-height:1.6; padding-left:32px; }

  .stats{ display:grid; grid-template-columns: repeat(4,1fr); gap:16px; margin-top:52px; }
  .stat{ padding:20px 4px; }
  .stat .num{ font-family: var(--display); font-size:22px; font-weight:400; }
  .stat .label{ font-family: var(--mono); font-size:10.5px; color: var(--ink-faint); text-transform:uppercase; letter-spacing:0.05em; margin-top:4px; }

  /* scroll reveal */
  .reveal{ opacity:0; transform: translateY(14px); transition: opacity 0.6s ease, transform 0.6s ease; }
  .reveal.in{ opacity:1; transform: translateY(0); }
  .card-grid .reveal:nth-child(2){ transition-delay: 0.08s; }
  .card-grid .reveal:nth-child(3){ transition-delay: 0.16s; }
  .card-grid .reveal:nth-child(4){ transition-delay: 0.24s; }

  @media (max-width: 860px){
    .card-grid, .card-grid-2, .pricing-grid, .stats{ grid-template-columns:1fr; }
    .founder{ grid-template-columns:1fr; }
    .offer, .addon-row{ grid-template-columns:1fr; text-align:left; }
    .offer-meta{ text-align:left; }
    section{ padding:90px 4vw; }
    .hero-section h1{ font-size: clamp(46px, 11vw, 64px); max-width: 12ch; }
    .hero-section .hero-sub{ font-size:14px; line-height:1.55; }
    .nav-toggle{ display:flex; }
    header{
      gap:16px;
      padding-right: 4vw;
      /* backdrop-filter makes position:fixed descendants bind to the header; remove so the menu can cover the viewport */
      backdrop-filter:none;
      -webkit-backdrop-filter:none;
      background: color-mix(in srgb, var(--bg) 88%, transparent);
    }
    header.nav-open{
      z-index:100;
      background: var(--bg);
    }
    .logo{ position:relative; z-index:12; }
    header nav,
    #siteNav{
      position:fixed;
      inset:0;
      width:100vw;
      height:100vh;
      height:100dvh;
      z-index:11;
      flex-direction:column;
      align-items:stretch;
      justify-content:flex-start;
      gap:4px;
      padding:96px 8vw 48px;
      background: var(--bg);
      opacity:0;
      visibility:hidden;
      pointer-events:none;
      transition: opacity 0.28s ease, visibility 0.28s ease;
    }
    header.nav-open nav,
    header.nav-open #siteNav{
      opacity:1;
      visibility:visible;
      pointer-events:auto;
    }
    header nav a.nav-link,
    #siteNav a.nav-link{
      font-size:17px;
      color: var(--ink);
      padding:14px 0;
      border-bottom:1px solid var(--border-soft);
    }
    header nav .btn,
    #siteNav .btn{ align-self:flex-start; margin-top:10px; }

    /* Thumb-friendly floating glass toggle on mobile */
    .theme-toggle{
      top: auto;
      right: max(16px, env(safe-area-inset-right));
      bottom: max(20px, env(safe-area-inset-bottom));
      width:48px;
      height:48px;
      font-size:18px;
    }
  }

  footer{ padding: 90px 4vw 60px; border-top:1px solid var(--border); display:flex; justify-content:space-between; align-items:flex-end; flex-wrap:wrap; gap:40px; }
  footer h2{ font-family: var(--display); font-size: clamp(26px,3.8vw,44px); font-weight:400; letter-spacing:-0.01em; max-width:14ch; }
  .footer-meta{ text-align:right; font-family: var(--mono); font-size:12.5px; color: var(--ink-dim); line-height:2; }
  .footer-meta a{ color: var(--ink); text-decoration:none; border-bottom:1px solid var(--border); }
  @media (max-width:700px){ footer{ flex-direction:column; align-items:flex-start; } .footer-meta{ text-align:left; } }

  /* Phase 1 homepage editorial */
  .hero-section.hero-editorial{
    padding-top: 180px;
    padding-bottom: 88px;
    text-align:center;
    align-items:center;
    max-width:1480px;
    margin:0 auto;
    padding-left:4vw;
    padding-right:4vw;
  }
  .hero-editorial h1{
    max-width: 22ch;
    font-size: clamp(42px, 7vw, 78px);
  }
  .hero-editorial h1 .hero-line{
    white-space: nowrap;
  }
  @media (max-width: 860px){
    .hero-editorial h1{
      max-width: 100%;
      width: 100%;
      box-sizing: border-box;
      font-size: clamp(46px, 11vw, 64px);
    }
    .hero-editorial h1 .hero-line{
      white-space: normal;
    }
  }
  .hero-editorial .hero-sub{
    max-width: 42ch;
    margin-top:22px;
    margin-left:auto;
    margin-right:auto;
  }
  .hero-cta{
    display:flex;
    gap:14px;
    margin-top:36px;
    flex-wrap:wrap;
    justify-content:center;
  }
  .section-lede{
    color: var(--ink-dim);
    font-size:17px;
    line-height:1.65;
    max-width:48ch;
    margin-top:14px;
  }
  .studio-points{
    list-style:none;
    margin-top:28px;
    display:flex;
    flex-direction:column;
    gap:14px;
  }
  .studio-points li{
    font-family: var(--mono);
    font-size:13px;
    color: var(--ink-dim);
    letter-spacing:0.04em;
    padding-left:18px;
    position:relative;
  }
  .studio-points li::before{
    content:'';
    position:absolute;
    left:0; top:0.45em;
    width:6px; height:6px;
    border-radius:50%;
    background: var(--accent);
  }
  .health-check{
    padding:28px 26px 30px;
    background: color-mix(in srgb, var(--bg-card) 70%, transparent);
    border:1px solid color-mix(in srgb, var(--ink) 8%, transparent);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border-radius:20px;
  }
  .health-check .tier{
    font-family: var(--mono);
    font-size:11px;
    letter-spacing:0.1em;
    color: var(--ink-faint);
    text-transform:uppercase;
  }
  .health-check .from{
    font-family: var(--mono);
    font-size:11px;
    color: var(--ink-faint);
    text-transform:uppercase;
    margin-top:16px;
  }
  .health-check .amount{
    font-family: var(--display);
    font-size:28px;
    font-weight:400;
    margin:6px 0 6px;
  }
  .health-check .tier-note{
    font-family:var(--mono);
    font-size:11.5px;
    color:var(--ink-dim);
    margin-bottom:4px;
  }
  .health-check .btn{ margin-top:18px; }
  .article-feature{
    display:grid;
    grid-template-columns: 1.15fr 0.85fr;
    gap:36px;
    align-items:stretch;
    margin-top:40px;
  }
  .article-cover{
    display:block;
    border-radius:16px;
    overflow:hidden;
    aspect-ratio: 16/10;
    background: var(--bg-card-2);
  }
  .article-cover img{
    width:100%; height:100%;
    object-fit:cover;
    display:block;
  }
  .article-meta{
    font-family: var(--mono);
    font-size:11px;
    letter-spacing:0.1em;
    text-transform:uppercase;
    color: var(--ink-faint);
    margin-bottom:14px;
  }
  .article-title{
    font-family: var(--display);
    font-size: clamp(24px, 3.2vw, 34px);
    font-weight:400;
    line-height:1.2;
    letter-spacing:-0.015em;
    max-width: 18ch;
  }
  .article-title a{ text-decoration:none; color: var(--ink); }
  .article-title a:hover{ color: var(--accent-text); }
  .article-desc{
    color: var(--ink-dim);
    font-size:15.5px;
    line-height:1.65;
    margin-top:14px;
    max-width: 42ch;
  }
  .article-link{
    margin-top:22px;
    display:inline-flex;
    font-size:14px;
    color: var(--ink);
    text-decoration:none;
    border-bottom:1px solid var(--border);
    padding-bottom:2px;
  }
  .article-link:hover{ border-color: var(--ink); }
  .article-list{
    display:flex;
    flex-direction:column;
    gap:0;
    border-top:1px solid var(--border-soft);
  }
  .article-list a{
    display:flex;
    align-items:flex-start;
    gap:18px;
    padding:22px 0;
    border-bottom:1px solid var(--border-soft);
    text-decoration:none;
    color: inherit;
    transition: color 0.2s;
  }
  .article-list-thumb{
    width:72px;
    height:72px;
    min-width:72px;
    border-radius:12px;
    object-fit:cover;
    display:block;
    background: var(--bg-card-2);
  }
  .article-list-body{ min-width:0; flex:1; }
  .article-list a:hover .article-list-title{ color: var(--accent-text); }
  .article-list-title{
    font-family: var(--display);
    font-size:18px;
    font-weight:400;
    line-height:1.35;
    color: var(--ink);
  }
  .article-list-desc{
    margin-top:8px;
    font-size:14px;
    color: var(--ink-dim);
    line-height:1.55;
  }
  .products-tease{
    margin-top:36px;
    max-width: 52ch;
  }
  .products-tease p{ color: var(--ink-dim); font-size:16px; line-height:1.65; }
  .products-tease .note{
    margin-top:18px;
    font-family: var(--mono);
    font-size:12px;
    color: var(--ink-faint);
    letter-spacing:0.06em;
  }
  .newsletter-band{
    margin-top:8px;
    padding:48px 0;
    border-top:1px solid var(--border-soft);
    border-bottom:1px solid var(--border-soft);
    display:flex;
    flex-wrap:wrap;
    gap:28px 48px;
    align-items:flex-end;
    justify-content:space-between;
  }
  .newsletter-band h2{
    font-family: var(--display);
    font-size: clamp(26px, 3.6vw, 40px);
    font-weight:400;
    letter-spacing:-0.015em;
    max-width: 14ch;
  }
  .newsletter-band p{
    color: var(--ink-dim);
    font-size:15.5px;
    line-height:1.6;
    max-width: 36ch;
    margin-top:12px;
  }
  .home-contact{
    margin-top:20px;
    display:flex;
    flex-wrap:wrap;
    gap:16px 28px;
    align-items:center;
    justify-content:space-between;
  }
  .home-contact p{
    color: var(--ink-dim);
    font-size:15px;
    line-height:1.55;
    max-width: 40ch;
  }
  .ticket-chip-link{
    display:inline-flex;
    align-items:center;
    gap:10px;
    font-family: var(--mono);
    font-size:12px;
    letter-spacing:0.06em;
    color: var(--ink);
    text-decoration:none;
    padding:12px 16px;
    border:1px dashed var(--border);
    border-radius:14px;
    background: color-mix(in srgb, var(--ticket) 55%, transparent);
    transition: border-color 0.2s, transform 0.2s;
  }
  .ticket-chip-link:hover{
    border-color: color-mix(in srgb, var(--ink) 28%, transparent);
    transform: translateY(-1px);
  }
  .ticket-chip-link span.dot{
    width:7px; height:7px; border-radius:50%;
    background: var(--accent);
    box-shadow:0 0 8px rgba(65,137,155,0.45);
  }

  /* Journal publication (magazine layout) */
  .journal-page{
    max-width:1480px;
    margin:0 auto;
    padding:0 4vw 40px;
  }
  .journal-masthead{
    padding-top:140px;
    padding-bottom:0;
    text-align:center;
  }
  .journal-masthead-inner{ max-width:48ch; margin:0 auto 36px; }
  .journal-kicker{
    font-family: var(--mono);
    font-size:12px;
    letter-spacing:0.14em;
    text-transform:uppercase;
    color: var(--ink-dim);
    margin-bottom:18px;
    display:inline-flex;
    align-items:center;
    gap:10px;
  }
  .journal-kicker::before{
    content:'';
    width:6px; height:6px; border-radius:50%;
    background: var(--accent);
    box-shadow:0 0 8px rgba(65,137,155,0.55);
  }
  .journal-name{
    font-family: var(--display);
    font-weight:400;
    font-size: clamp(36px, 5.5vw, 64px);
    line-height:1.08;
    letter-spacing:-0.02em;
  }
  .journal-tagline{
    font-family: var(--mono);
    font-size:12px;
    letter-spacing:0.08em;
    color: var(--ink-faint);
    margin-top:16px;
    text-transform:uppercase;
  }
  .journal-sections{
    display:flex;
    flex-direction:row;
    flex-wrap:wrap;
    align-items:center;
    gap:8px 28px;
    justify-content:center;
    height:auto;
    max-height:none;
    padding:22px 0 28px;
    border-top:1px solid var(--border-soft);
    border-bottom:1px solid var(--border-soft);
    margin:0 0 48px;
    position:sticky;
    top:72px;
    z-index:5;
    background: color-mix(in srgb, var(--bg) 88%, transparent);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
  }
  .journal-sections a{
    font-family: var(--mono);
    font-size:12px;
    letter-spacing:0.08em;
    text-transform:uppercase;
    text-decoration:none;
    color: var(--ink-dim);
    transition: color 0.2s;
    padding:6px 0;
  }
  .journal-sections a:hover{ color: var(--ink); }

  .journal-lead{
    display:grid;
    grid-template-columns: 1.35fr 0.85fr;
    gap:40px;
    align-items:center;
    margin-bottom:72px;
  }
  .journal-lead-media{
    display:block;
    overflow:hidden;
    border-radius:16px;
    aspect-ratio: 16/10;
    background: var(--bg-card-2);
  }
  .journal-lead-media img{
    width:100%; height:100%;
    object-fit:cover;
    display:block;
    transition: transform 0.55s cubic-bezier(0.22, 1, 0.36, 1);
  }
  .journal-lead-media:hover img{ transform: scale(1.03); }
  .journal-lead-title{
    font-family: var(--display);
    font-weight:400;
    font-size: clamp(28px, 3.8vw, 44px);
    line-height:1.12;
    letter-spacing:-0.02em;
    max-width: 16ch;
  }
  .journal-lead-title a{ text-decoration:none; color: var(--ink); }
  .journal-lead-title a:hover{ color: var(--accent-text); }
  .journal-lead-dek{
    color: var(--ink-dim);
    font-size:16.5px;
    line-height:1.65;
    margin-top:16px;
    max-width: 38ch;
  }

  .journal-latest,
  .journal-rail{
    padding:64px 0 72px;
  }
  .journal-rail-head{
    display:flex;
    flex-wrap:wrap;
    align-items:end;
    justify-content:space-between;
    gap:16px 40px;
    margin-bottom:36px;
    padding-bottom:20px;
    border-bottom:1px solid var(--border-soft);
  }
  .journal-rail-head h2{
    font-family: var(--display);
    font-weight:400;
    font-size: clamp(26px, 3.5vw, 38px);
    letter-spacing:-0.02em;
  }
  .journal-rail-head p{
    color: var(--ink-dim);
    font-size:15px;
    line-height:1.55;
    max-width: 42ch;
  }

  .journal-story-grid{
    display:grid;
    grid-template-columns: repeat(2, 1fr);
    gap:36px 28px;
  }
  .journal-story-grid--wide{ grid-template-columns: 1fr; max-width:920px; }
  .journal-story{
    display:flex;
    flex-direction:column;
    text-decoration:none;
    color: inherit;
    min-width:0;
  }
  .journal-story-thumb{
    display:block;
    overflow:hidden;
    border-radius:16px;
    aspect-ratio: 16/10;
    background: var(--bg-card-2);
    margin-bottom:18px;
  }
  .journal-story-thumb img{
    width:100%; height:100%;
    object-fit:cover;
    display:block;
    transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
  }
  .journal-story:hover .journal-story-thumb img{ transform: scale(1.04); }
  .journal-story-thumb--text{
    display:flex;
    align-items:flex-end;
    justify-content:flex-start;
    padding:22px 24px;
    background:
      radial-gradient(circle at 18% 20%, color-mix(in srgb, var(--accent) 35%, transparent), transparent 55%),
      linear-gradient(145deg, #121218, #1a1a22);
  }
  .journal-story-thumb--text span{
    font-family: var(--mono);
    font-size:13px;
    letter-spacing:0.1em;
    text-transform:uppercase;
    color: color-mix(in srgb, var(--ink) 75%, transparent);
  }
  .journal-story-thumb--soon{
    display:flex;
    align-items:center;
    justify-content:center;
    padding:22px 24px;
    border:1px dashed color-mix(in srgb, var(--ink) 18%, transparent);
    background:
      repeating-linear-gradient(
        -45deg,
        transparent,
        transparent 10px,
        color-mix(in srgb, var(--ink) 3%, transparent) 10px,
        color-mix(in srgb, var(--ink) 3%, transparent) 11px
      ),
      color-mix(in srgb, var(--bg-card) 55%, transparent);
  }
  .journal-story-thumb--soon span{
    font-family: var(--mono);
    font-size:12px;
    letter-spacing:0.12em;
    text-transform:uppercase;
    color: var(--ink-faint);
  }
  .journal-story--soon h3{ color: var(--ink-dim); }
  .journal-story--soon:hover h3{ color: var(--accent-text); }
  .journal-story h3{
    font-family: var(--display);
    font-weight:400;
    font-size: clamp(18px, 2.2vw, 24px);
    line-height:1.25;
    letter-spacing:-0.015em;
    color: var(--ink);
    transition: color 0.2s;
  }
  .journal-story:hover h3{ color: var(--accent-text); }
  .journal-story p{
    margin-top:10px;
    color: var(--ink-dim);
    font-size:14.5px;
    line-height:1.55;
  }
  .journal-story--feature h3{
    font-size: clamp(24px, 3vw, 34px);
    max-width: 20ch;
  }
  .journal-story--feature p{ max-width: 48ch; font-size:15.5px; }

  .journal-empty{
    font-family: var(--mono);
    font-size:12.5px;
    letter-spacing:0.08em;
    color: var(--ink-faint);
    text-transform:uppercase;
    padding:8px 0 4px;
  }

  @media (max-width:900px){
    .journal-latest,
    .journal-rail,
    .journal-lead{
      padding:36px 0 40px;
    }
    .journal-lead{
      grid-template-columns:1fr;
      gap:20px;
      margin-bottom:0;
      padding-top:0;
      padding-bottom:32px;
    }
    .journal-story-grid{ grid-template-columns:1fr; gap:24px; }
    .journal-rail-head{
      flex-direction:column;
      align-items:flex-start;
      margin-bottom:20px;
      padding-bottom:14px;
      gap:8px;
    }
    .journal-page > section{
      padding-left:0;
      padding-right:0;
    }
  }
  @media (max-width:700px){
    .journal-masthead{ padding-top:120px; }
    .journal-masthead-inner{ margin-bottom:24px; }
    .journal-sections{
      position: static;
      top: auto;
      height: auto;
      max-height: none;
      flex-direction: row;
      align-items: center;
      gap:6px 18px;
      justify-content:flex-start;
      margin-bottom:24px;
      overflow-x:auto;
      overflow-y:hidden;
      flex-wrap:nowrap;
      -webkit-overflow-scrolling:touch;
      scrollbar-width:none;
      padding:14px 0 16px;
    }
    .journal-sections::-webkit-scrollbar{ display:none; }
    .journal-sections a{ white-space:nowrap; flex-shrink:0; }
    .journal-lead{ margin-bottom:0; padding-bottom:20px; }
    .journal-latest, .journal-rail{ padding:20px 0 24px; }
    .journal-story-grid{ gap:16px; }
    .journal-story-thumb{
      margin-bottom:10px;
      aspect-ratio: 16 / 9;
    }
    .journal-rail-head{ margin-bottom:14px; padding-bottom:10px; }
  }

  @media (max-width: 860px){
    .article-feature{ grid-template-columns:1fr; gap:28px; }
    .hero-section.hero-editorial{ padding-top:140px; padding-bottom:64px; }
  }