:root {
      --ink: #222222;
      --text: #4b4b4b;
      --muted: #666666;
      --accent: #282828;
      --line: #dededc;
      --shadow: 0 16px 44px rgba(0, 0, 0, 0.08);
      --serif: 'Lora', Georgia, serif;
      --sans: 'Inter', Arial, sans-serif;
    }

    * { box-sizing: border-box; }
    html { scroll-behavior: smooth; }
    body { margin: 0; background: #fff; color: var(--text); color-scheme: light; font-family: var(--sans); -webkit-font-smoothing: antialiased; }
    body.is-loading { cursor: progress; }
    a { color: inherit; text-decoration: none; }
    button, input { font: inherit; }
    img { display: block; max-width: 100%; }
    svg { display: block; }
    a:focus-visible, button:focus-visible, input:focus-visible { outline:3px solid #525252; outline-offset:3px; }

    .site-shell { width: min(1240px, calc(100% - 64px)); margin: 0 auto; }

    /* Header */
    .site-header {
      height: 92px;
      display: flex;
      align-items: center;
      background: rgba(255,255,255,.97);
      border-bottom: 1px solid var(--line);
      position: sticky;
      top: 0;
      z-index: 50;
      backdrop-filter: blur(12px);
    }
    .header-row { display: grid; grid-template-columns: auto 1fr auto; gap: 44px; align-items: center; }
    .brand { display: inline-flex; align-items: center; gap: 16px; color: var(--ink); white-space: nowrap; }
    .brand-mark {
      width: 48px; height: 48px; border-radius: 12px; display: grid; place-items: center;
      color: #fff; background: var(--accent);
      box-shadow: 0 8px 20px rgba(0,0,0,.12); font-size: 20px; font-weight: 700;
    }
    .brand-name { font: 700 23px/1 var(--serif); }
    .main-nav { display: flex; align-items: stretch; justify-content: center; gap: 34px; height: 92px; }
    .main-nav a { display: inline-flex; align-items: center; position: relative; color: var(--ink); font-weight: 500; font-size: 15px; }
    .main-nav a.active { font-weight: 700; }
    .main-nav a.active::after { content:''; position:absolute; left:0; right:0; bottom:20px; height:2px; border-radius:999px; background:var(--accent); }
    .header-search,.menu-toggle {
      width:48px; height:48px; border-radius:14px; display:grid; place-items:center;
      border:1px solid var(--line); background:#fff; color:var(--ink); cursor:pointer;
    }
    .header-search svg,.menu-toggle svg { width:23px; height:23px; fill:none; stroke:currentColor; stroke-width:1.9; stroke-linecap:round; stroke-linejoin:round; }
    .menu-toggle { display:none; }

    /* Hero */
    .articles-hero {
      min-height:292px;
      position:relative;
      overflow:hidden;
      border-bottom:1px solid #333;
      background:radial-gradient(ellipse at 68% 25%,#353535 0%,#1c1c1c 43%,#141414 78%);
      color-scheme:dark;
    }
    .articles-hero::before, .articles-hero::after { content:none; }
    .hero-copy {
      min-height:292px;
      width:min(1680px, calc(100% - 120px));
      margin:0 auto;
      display:flex;
      flex-direction:column;
      justify-content:center;
      position:relative;
      z-index:2;
      max-width:none;
      padding:44px 0;
      text-align:left;
    }
    .eyebrow { margin-bottom:18px; color:#dedede; text-transform:uppercase; letter-spacing:.24em; font-size:14px; font-weight:800; }
    .hero-copy h1 { margin:0 0 14px; color:#fafafa; font:700 clamp(42px,5vw,62px)/1.07 var(--serif); letter-spacing:-.035em; }
    .hero-copy p { max-width:720px; margin:0; color:#d0d0d0; font-size:18px; line-height:1.65; }

    /* Filters */
    .hub-main { padding:0 0 54px; }
    .filter-panel { padding:28px 0 22px; background:#fff; }
    .category-tabs { display:grid; grid-template-columns:repeat(7,minmax(0,1fr)); gap:10px; margin-bottom:28px; }
    .category-tab {
      min-height:72px; border:1px solid var(--line); border-radius:14px; background:#fff; color:var(--ink);
      padding:9px 9px; display:flex; align-items:center; gap:6px; cursor:pointer; min-width:0;
      box-shadow:0 4px 14px rgba(0,0,0,.025); transition:.18s ease;
    }
    .category-tab:hover { border-color:#888; transform:translateY(-1px); }
    .category-tab.is-active { color:#fff; border-color:var(--accent); background:var(--accent); box-shadow:0 12px 28px rgba(0,0,0,.12); }
    .tab-icon { width:27px; height:27px; display:grid; place-items:center; flex:0 0 auto; color:var(--accent); }
    .tab-icon svg { width:24px; height:24px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
    .category-tab.is-active .tab-icon { color:#fff; }
    .tab-label {
      min-width:0;
      flex:1;
      text-align:left;
      font-size:10.5px;
      line-height:1.22;
      font-weight:700;
      white-space:normal;
      overflow:visible;
      text-overflow:clip;
      display:-webkit-box;
      -webkit-box-orient:vertical;
      -webkit-line-clamp:2;
    }
    .tab-count { width:26px; height:26px; display:grid; place-items:center; flex:0 0 auto; border-radius:999px; background:#f2f2f0; color:var(--ink); font-size:10px; font-weight:800; }
    .category-tab.is-active .tab-count { background:rgba(255,255,255,.17); color:#fff; }

    .toolbar { display:block; }
    .search-form { display:grid; grid-template-columns:minmax(0,1fr) 136px; gap:10px; min-width:0; }
    .search-wrap { height:58px; border:1px solid var(--line); border-radius:14px; display:flex; align-items:center; gap:14px; padding:0 18px; background:#fff; }
    .search-wrap svg { width:24px; height:24px; fill:none; stroke:var(--text); stroke-width:1.9; stroke-linecap:round; stroke-linejoin:round; flex:0 0 auto; }
    .search-wrap input { width:100%; border:0; outline:0; background:transparent; color:var(--ink); font-size:16px; }
    .search-wrap input::placeholder { color:#737373; }
    .search-wrap:focus-within { border-color:#525252; box-shadow:0 0 0 3px rgba(40,40,40,.14); }
    .search-button { display:block; min-width:136px; height:58px; border:0; border-radius:14px; background:var(--accent); color:#fff; font-weight:700; cursor:pointer; padding:0 22px; box-shadow:0 10px 24px rgba(0,0,0,.1); }
    .search-button:hover { background:#444; }
    .sort-toggle { display:grid; grid-template-columns:1fr 1fr; border:1px solid var(--line); border-radius:14px; overflow:hidden; min-width:316px; height:58px; background:#fff; }
    .sort-button { position:relative; border:0; background:#fff; color:var(--text); display:inline-flex; align-items:center; justify-content:center; gap:9px; padding:0 24px; cursor:pointer; font-weight:500; }
    .sort-button + .sort-button { border-left:1px solid var(--line); }
    .sort-button svg { width:22px; height:22px; fill:none; stroke:currentColor; stroke-width:1.9; stroke-linecap:round; stroke-linejoin:round; }
    .sort-button.is-active { color:var(--accent); font-weight:700; }
    .sort-button.is-active::after { content:''; position:absolute; left:14px; right:14px; bottom:0; height:3px; border-radius:999px 999px 0 0; background:var(--accent); }

    /* Articles */
    .articles-section { padding-top:20px; scroll-margin-top:105px; }
    .section-heading { display:flex; align-items:center; justify-content:space-between; gap:24px; margin-bottom:22px; }
    .section-heading h2 { margin:0; color:var(--ink); font:700 clamp(30px,3vw,40px)/1.18 var(--serif); letter-spacing:-.025em; }
    .view-all { border:0; background:transparent; color:var(--accent); font-weight:800; font-size:15px; cursor:pointer; white-space:nowrap; }
    .article-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:18px; }
    .article-card { min-width:0; display:flex; flex-direction:column; overflow:hidden; border:1px solid var(--line); border-radius:14px; background:#fff; box-shadow:0 5px 22px rgba(0,0,0,.035); }
    .article-image { position:relative; display:block; margin:12px 12px 0; height:194px; overflow:hidden; border-radius:8px; background:#f2f2f0; }
    .article-image img { width:100%; height:100%; object-fit:cover; }
    .article-image-placeholder { display:block; width:100%; height:100%; background:radial-gradient(circle at 25% 30%,rgba(255,255,255,.82),transparent 28%),linear-gradient(135deg,#e6e6e3 0%,#f8f8f7 45%,#dededc 100%); }
    .article-badge { position:absolute; left:12px; top:12px; max-width:calc(100% - 24px); padding:8px 13px; border-radius:5px; color:#fff; background:var(--accent); font-size:12px; font-weight:700; line-height:1; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; box-shadow:0 5px 15px rgba(0,0,0,.12); }
    .article-content { padding:12px 18px 18px; display:flex; flex-direction:column; flex:1; }
    .article-content h3 { margin:0 0 10px; color:var(--ink); font:700 20px/1.38 var(--serif); letter-spacing:-.018em; }
    .article-content h3 a:hover { color:#555; }
    .article-content p { margin:0 0 20px; color:var(--muted); font-size:15px; line-height:1.55; }
    .article-meta { display:flex; align-items:center; flex-wrap:wrap; gap:20px; margin-top:auto; margin-bottom:18px; color:var(--muted); font-size:13px; }
    .article-meta span { display:inline-flex; align-items:center; gap:7px; }
    .article-meta svg { width:18px; height:18px; fill:none; stroke:var(--text); stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
    .article-actions { display:flex; align-items:center; justify-content:space-between; gap:16px; }
    .share-actions { display:flex; align-items:center; gap:15px; }
    .share-actions a,.share-actions button { width:22px; height:22px; display:grid; place-items:center; border:0; background:transparent; color:var(--ink); padding:0; cursor:pointer; }
    .share-actions svg { width:19px; height:19px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
    .x-mark { font-size:18px; font-weight:500; }
    .read-link { color:var(--accent); display:inline-flex; align-items:center; gap:8px; font-size:15px; font-weight:800; white-space:nowrap; }
    .read-link:hover, .view-all:hover { text-decoration:underline; text-underline-offset:3px; }
    .empty-state { grid-column:1 / -1; min-height:150px; display:grid; place-items:center; padding:28px; border:1px dashed #b5b5b2; border-radius:14px; background:#fafaf9; color:var(--muted); text-align:center; font-weight:600; }
    .loading-state { opacity:.5; pointer-events:none; }

    /* Subscribe */
    .subscribe-panel { margin-top:48px; min-height:170px; display:grid; grid-template-columns:auto minmax(0,1fr) minmax(360px,.8fr); gap:24px; align-items:center; padding:34px 38px; border:1px solid var(--line); border-radius:18px; background:#f8f8f7; }
    .subscribe-icon { width:74px; height:74px; border-radius:50%; display:grid; place-items:center; background:#ededeb; color:var(--accent); }
    .subscribe-icon svg { width:36px; height:36px; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
    .subscribe-copy h2 { margin:0 0 8px; color:var(--ink); font:700 25px/1.28 var(--serif); }
    .subscribe-copy p { margin:0; color:var(--muted); font-size:15px; line-height:1.55; }
    .subscribe-form { display:grid; grid-template-columns:1fr auto; gap:12px; }
    .subscribe-form input[type="email"] { min-width:0; height:54px; padding:0 18px; border:1px solid #b5b5b2; border-radius:10px; background:#fff; color:var(--ink); }
    .subscribe-form input[type="email"]::placeholder { color:#737373; }
    .subscribe-form button { height:54px; padding:0 28px; border:0; border-radius:10px; background:var(--accent); color:#fff; font-weight:700; cursor:pointer; }
    .subscribe-form button:hover { background:#444; }
    .subscribe-note { grid-column:1 / -1; margin-top:-3px; color:var(--muted); font-size:12px; }
    .hp-field { position:absolute!important; left:-10000px!important; width:1px!important; height:1px!important; opacity:0!important; pointer-events:none!important; }

    .site-footer { border-top:1px solid var(--line); padding:36px 0 44px; margin-top:22px; color:var(--muted); font-size:14px; }
    .footer-row { display:flex; align-items:center; justify-content:space-between; gap:24px; }
    .footer-row strong { color:var(--ink); }

    @media (max-width:1100px) {
      .site-shell { width:min(100% - 40px,980px); }
      .category-tabs { grid-template-columns:repeat(4,minmax(0,1fr)); }
      .article-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
      .subscribe-panel { grid-template-columns:auto 1fr; }
      .subscribe-form { grid-column:1 / -1; }
    }

    @media (max-width:760px) {
      .site-shell { width:calc(100% - 30px); }
      .site-header { height:84px; }
      .header-row { grid-template-columns:1fr auto; gap:16px; }
      .brand { gap:12px; }
      .brand-mark { width:44px; height:44px; border-radius:10px; font-size:18px; }
      .brand-name { font-size:20px; }
      .header-search { display:none; }
      .menu-toggle { display:grid; }
      .main-nav { display:none; position:absolute; top:84px; left:15px; right:15px; height:auto; padding:12px; border:1px solid var(--line); border-radius:14px; background:#fff; box-shadow:var(--shadow); flex-direction:column; gap:0; }
      .main-nav.is-open { display:flex; }
      .main-nav a { min-height:46px; padding:0 12px; }
      .main-nav a.active::after { display:none; }

      .articles-hero { min-height:290px; }
      .hero-copy { min-height:290px; width:calc(100% - 30px); margin:0 auto; padding:30px 0; max-width:none; justify-content:center; }
      .hero-copy h1, .hero-copy p, .eyebrow { max-width:78%; }
      .eyebrow { font-size:12px; margin-bottom:14px; }
      .hero-copy h1 { font-size:clamp(34px,10vw,45px); margin-bottom:12px; }
      .hero-copy p { font-size:16px; line-height:1.6; }

      .filter-panel { padding-top:24px; }
      .category-tabs { grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; margin-bottom:24px; }
      .category-tab { min-height:64px; padding:8px 10px; }
      .tab-label { font-size:11px; line-height:1.2; -webkit-line-clamp:2; }
      .tab-count { width:28px; height:28px; }

      .toolbar { display:block; }
      .search-form { grid-template-columns:minmax(0,1fr) 124px; }
      .search-button { min-width:124px; height:56px; }
      .search-wrap { height:56px; }

      .articles-section { padding-top:14px; }
      .section-heading { margin-bottom:16px; }
      .section-heading h2 { font-size:32px; }
      .view-all { display:none; }
      .article-grid { grid-template-columns:1fr; gap:14px; }
      .article-image { height:190px; margin:10px 10px 0; }
      .article-content { padding:10px 16px 18px; }
      .article-content h3 { font-size:20px; }
      .article-content p { font-size:15px; margin-bottom:16px; }
      .article-meta { margin-bottom:16px; }

      .subscribe-panel { grid-template-columns:1fr; text-align:center; padding:28px 20px; margin-top:34px; }
      .subscribe-icon { margin:0 auto; }
      .subscribe-form { grid-column:auto; grid-template-columns:1fr; }
      .subscribe-note { grid-column:auto; }
      .footer-row { flex-direction:column; align-items:flex-start; }
    }

    @media (max-width:430px) {
      .site-shell { width:calc(100% - 24px); }
      .category-tab { gap:7px; }
      .tab-icon { width:28px; height:28px; }
      .tab-icon svg { width:24px; height:24px; }
      .tab-count { width:28px; height:28px; font-size:11px; }
      .search-form { grid-template-columns:minmax(0,1fr) 112px; }
      .search-button { min-width:0; padding:0 14px; }
    }