/* ── Masthead ─────────────────────────────── */
    .masthead {
      position: sticky;
      top: 0;
      z-index: 50;
      background: rgba(255,255,255,.86);
      backdrop-filter: saturate(1.4) blur(12px);
      border-bottom: 1px solid var(--divider);
    }
    .masthead-inner {
      max-width: 680px;
      margin: 0 auto;
      padding: 12px 20px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
    }
    .brand { display: flex; align-items: center; gap: 10px; cursor: pointer; }
    .brand:focus-visible { outline: 2px solid var(--ink-muted); outline-offset: 4px; border-radius: 6px; }
    .brand:focus:not(:focus-visible) { outline: none; }
    .brand-icon { width: 32px; height: 32px; flex-shrink: 0; }
    .brand-name { font-weight: 900; font-size: 17px; letter-spacing: -.5px; }
    .brand-tag {
      font-family: var(--mono); font-size: 8.5px; color: var(--ink-muted);
      text-transform: uppercase; letter-spacing: .6px; margin-top: 1px;
    }
    .masthead-actions {
      margin-left: auto; display: flex; flex-direction: column;
      align-items: flex-end; gap: 4px;
    }
    .global-lang {
      flex-shrink: 0;
      display: inline-flex; align-items: center; gap: 6px;
      font-family: var(--mono); font-size: 11px; font-weight: 700; letter-spacing: .3px;
    }
    .global-lang button {
      border: none; background: none; padding: 0; cursor: pointer; font: inherit;
      color: var(--ink); opacity: .3; transition: opacity .15s;
    }
    .global-lang button:hover { opacity: .6; }
    .global-lang button.active, .global-lang button.active:hover { opacity: 1; }
    .global-lang .sep { color: var(--ink-muted); opacity: .4; }
    .dd{position:relative;font-family:var(--mono)}
    .dd-btn{display:inline-flex;align-items:center;gap:7px;background:var(--bg);border:1px solid var(--divider);border-radius:999px;padding:7px 11px;cursor:pointer;font-family:var(--mono);font-size:10px;font-weight:700;letter-spacing:.5px;text-transform:uppercase;color:var(--ink-2);white-space:nowrap}
    .dd-btn:hover{border-color:var(--ink-muted);color:var(--ink-2)}
    .dd-btn .caret{width:6px;height:6px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:rotate(45deg) translateY(-1px);transition:transform .18s}
    .dd.open .dd-btn .caret{transform:rotate(-135deg) translate(-1px,-1px)}
    .dd-panel{position:absolute;left:0;top:calc(100% + 6px);width:168px;background:var(--bg);border:1px solid var(--divider);border-radius:10px;box-shadow:0 8px 30px rgba(0,0,0,.12);padding:4px;display:none;z-index:60}
    .dd.open .dd-panel{display:block}
    .dd-list{max-height:122px;overflow-y:auto;scrollbar-width:none}   /* ≤4 weeks; the rest scroll */
    .dd-list::-webkit-scrollbar{display:none}
    .dd-item{display:block;width:100%;padding:7px 10px;border-radius:6px;cursor:pointer;font-family:var(--mono);font-size:11px;font-weight:600;color:var(--ink-2);text-align:left;background:none;border:none;white-space:nowrap}
    .dd-item:hover{background:var(--bg-subtle);color:var(--ink)}
    .dd-item.sel{color:var(--ink);font-weight:700}
    /* custom scrollbar: plain rail + single thumb whose colour tracks position (design-system ramp) */
    .dd-bar{position:absolute;top:6px;bottom:6px;right:4px;width:6px;display:none}
    .dd-bar::before{content:'';position:absolute;left:2px;width:2px;top:0;bottom:0;border-radius:2px;background:#E4E4E0}
    .dd-thumb{position:absolute;left:0;right:0;top:0;width:6px;border-radius:99px;background:#D54438;box-shadow:0 0 0 2px var(--bg);cursor:grab;touch-action:none}
    .dd-thumb:active{cursor:grabbing}
    .edition-line { display: flex; align-items: center; gap: 8px; flex: 0 0 auto; min-width: max-content; }
    .verified-pill {
      display: inline-flex; align-items: center; gap: 4px;
      background: var(--verified-bg); color: var(--verified);
      font-family: var(--mono); font-size: 9px; font-weight: 700;
      padding: 2px 8px; border-radius: 20px;
      border: 1px solid color-mix(in srgb, var(--verified) 18%, white);
      letter-spacing: .3px;
    }
    .verified-pill::before { content: '●'; font-size: 7px; }

    /* ── Hero ─────────────────────────────────── */
    .hero {
      max-width: 680px; margin: 0 auto;
      padding: 40px 20px 8px;
    }
    .hero h1 {
      font-size: 30px; font-weight: 800; letter-spacing: -.8px;
      line-height: 1.15; text-wrap: balance;
    }
    .hero p {
      margin-top: 10px; color: var(--ink-2); font-size: 14px; max-width: 46ch;
    }

    /* ── Hero subscribe CTA (underline / editorial) ── */
    .sub { margin-top: 22px; max-width: 460px; }
    .sub-row {
      display: flex; align-items: center; gap: 14px;
      border-bottom: 1.5px solid var(--ink); padding-bottom: 9px;
    }
    .sub-email {
      flex: 1; min-width: 0; border: none; background: none; outline: none;
      font-family: var(--sans); font-size: 14px; color: var(--ink);
    }
    .sub-email::placeholder { color: var(--ink-muted); }
    .sub-btn {
      flex-shrink: 0; border: none; background: none; cursor: pointer;
      font-family: var(--mono); font-size: 12px; font-weight: 700;
      letter-spacing: .6px; text-transform: uppercase; color: var(--ink);
      display: inline-flex; align-items: center; gap: 6px; transition: gap .15s;
    }
    .sub-btn:hover { gap: 9px; }
    .sub-btn:disabled { opacity: .5; cursor: default; }
    .sub-meta { display: flex; align-items: center; gap: 10px; margin-top: 12px; }
    .sub-lang {
      display: inline-flex; align-items: center; gap: 6px;
      font-family: var(--mono); font-size: 11px; font-weight: 700; letter-spacing: .3px;
    }
    .sub-lang button {
      border: none; background: none; padding: 0; cursor: pointer; font: inherit;
      color: var(--ink); opacity: .3; transition: opacity .15s;
    }
    .sub-lang button:hover { opacity: .6; }
    .sub-lang button.active, .sub-lang button.active:hover { opacity: 1; }
    .sub-lang .sep { color: var(--ink-muted); opacity: .4; }
    .sub-hint {
      font-family: var(--mono); font-size: 10px; letter-spacing: .06em;
      text-transform: uppercase; color: var(--ink-muted);
    }
    .sub-msg {
      margin-top: 10px; min-height: 16px; font-size: 12.5px; color: var(--ink-2);
      max-width: none; padding-left: 2px;
    }
    .sub-msg.error { color: #B4232A; }
    .sub-msg.ok { color: var(--verified); }
    @media (max-width: 480px) {
      .sub-meta { flex-wrap: wrap; gap: 6px 10px; }
    }

    /* ── Issue + filter toolbar ───────────────── */
    .browse-bar {
      position: sticky; top: 57px; z-index: 45;
      background: rgba(247,247,245,.9); backdrop-filter: saturate(1.2) blur(10px);
    }
    .browse-inner {
      max-width: 680px; margin: 0 auto; padding: 10px 20px;
    }
    .browse-row.filters {
      display: flex; align-items: center; gap: 8px; min-width: 0;
      padding-bottom: 2px;
    }
    .browse-row.filters::-webkit-scrollbar { display: none; }
    .tag-filter-list {
      display: flex; align-items: center; gap: 8px; flex: 1 1 auto; min-width: 0;
      overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch;
    }
    .tag-filter-list::-webkit-scrollbar { display: none; }
    .filter-chip {
      flex: 0 0 auto; border: 1px solid var(--divider); background: var(--bg);
      color: var(--ink-muted); border-radius: 999px; padding: 7px 10px;
      font-family: var(--mono); font-size: 10px; font-weight: 700;
      letter-spacing: .4px; cursor: pointer; white-space: nowrap;
    }
    .filter-chip:hover { border-color: var(--ink-muted); color: var(--ink-2); }
    .filter-chip.active {
      border-color: color-mix(in srgb, var(--ink) 18%, white);
      background: var(--ink); color: var(--bg);
    }
    .filter-chip.tag-filter.active {
      border-color: color-mix(in srgb, var(--verified) 30%, white);
      background: var(--verified-bg); color: var(--verified);
    }
    @media (max-width: 480px) {
      .browse-bar { top: 61px; }
      .browse-inner { padding: 9px 16px; }
    }

    /* ── Feed container ───────────────────────── */
    main {
      max-width: 680px; margin: 0 auto 60px;
      background: var(--bg);
      border: 1px solid var(--divider);
      border-radius: 16px;
      overflow: hidden;
      margin-top: 14px;
    }
    @media (max-width: 720px) {
      main { border-radius: 0; border-left: none; border-right: none; margin-top: 16px; }
    }

    .section-group.collapsed .section-items { display: none; }
    .section-label {
      width: 100%; min-height: 42px; display: flex; align-items: center; justify-content: space-between;
      gap: 12px; padding: 10px 22px;
      background: color-mix(in srgb, var(--section-color, var(--bg-subtle)) 10%, white);
      border-bottom: 1px solid var(--divider);
      border-top: none; border-right: none;
      border-left: 4px solid var(--section-color, var(--divider));
      font-family: var(--mono); font-size: 9.5px;
      text-transform: uppercase; letter-spacing: 1.2px;
      color: var(--section-color, var(--ink-muted)); font-weight: 700;
      cursor: pointer; text-align: left;
    }
    .section-label:hover {
      background: color-mix(in srgb, var(--section-color, var(--bg-subtle)) 14%, white);
    }
    .section-label:focus-visible {
      outline: 2px solid color-mix(in srgb, var(--section-color, var(--ink-muted)) 60%, white);
      outline-offset: -2px;
    }
    .section-title { min-width: 0; }
    .section-meta {
      display: inline-flex; align-items: center; gap: 9px; flex: 0 0 auto;
      color: var(--ink-muted);
    }
    .section-chevron {
      width: 8px; height: 8px; display: inline-block;
      border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor;
      transform: rotate(45deg) translateY(-1px); transition: transform .18s;
    }
    .section-group.collapsed .section-chevron {
      transform: rotate(-45deg) translate(-1px, -1px);
    }
    @media (max-width: 480px) {
      .section-label { min-height: 46px; padding: 12px 20px; }
    }

    /* ── States ───────────────────────────────── */
    .state {
      max-width: 680px; margin: 0 auto; padding: 60px 20px; text-align: center; color: var(--ink-muted);
    }
    .state.error { color: #B4232A; }
    .spinner {
      width: 26px; height: 26px; margin: 0 auto 14px;
      border: 3px solid var(--divider); border-top-color: var(--ink-muted);
      border-radius: 50%; animation: spin .8s linear infinite;
    }
    @keyframes spin { to { transform: rotate(360deg); } }

    footer {
      max-width: 680px; margin: 0 auto; padding: 28px 20px 50px; text-align: center;
      font-family: var(--mono); font-size: 9.5px; color: var(--ink-muted); letter-spacing: .3px;
    }
    .footer-stats { opacity: .85; }
    .footer-contact { margin-top: 6px; }
    .footer-contact a { color: var(--ink-muted); text-decoration: none; }
    .footer-contact a:hover { text-decoration: underline; color: var(--ink-2); }

    /* ── Left rail: scroll-position dots (hang next to the card) + fixed spectrum bar ── */
    .side-rail{position:fixed;top:50%;transform:translateY(-50%);left:calc(50% - 372px);z-index:40}
    .rail-col{display:flex;flex-direction:column;align-items:center;gap:26px;position:relative}
    .rail-line{position:absolute;left:50%;top:3px;bottom:3px;width:2px;transform:translateX(-50%);background:var(--divider);border-radius:2px;z-index:0;pointer-events:none}
    .rail-fill{position:absolute;left:0;top:0;width:100%;border-radius:2px;background:linear-gradient(180deg,#FF2605,#FF6600,#FFB800,#3CB201,#02DEB6,#016FD0)}
    .rail-dot{position:relative;z-index:1;width:7px;height:7px;border-radius:50%;border:none;padding:0;cursor:pointer;box-shadow:0 0 0 3px var(--bg-subtle);opacity:.4;transition:transform .22s cubic-bezier(.2,.8,.2,1),opacity .22s}
    .rail-dot:hover{opacity:.7}
    .rail-dot.active{transform:scale(2.2);opacity:1}
    .rail-dot.passed{opacity:1}
    .rail-dot.passed::after{content:'';position:absolute;top:50%;left:50%;width:3px;height:3px;border-radius:50%;background:var(--bg-subtle);transform:translate(-50%,-50%)}
    .rail-dot[data-section="major_update"]{background:var(--section-major)}
    .rail-dot[data-section="tip_guide"]{background:var(--section-guides)}
    .rail-dot[data-section="editors_pick"]{background:var(--section-picks)}
    @media(max-width:1040px){.side-rail{display:none}}
    /* decorative spectrum bar, fixed near the bottom-left (aligned with the rail) */
    /* Rainbow accent — a short tail just below the scroll dots, so it reads as part of the rail. */
    .rail-deco{position:absolute;top:calc(100% + 24px);left:50%;transform:translateX(-50%);width:5px;height:28px;border-radius:3px;background:linear-gradient(180deg,#FF2605,#FF6600,#FFB800,#3CB201,#02DEB6,#016FD0)}
    @media(max-width:1040px){.rail-deco{display:none}}