:root {
      --paper: #f4efe2;
      --paper-deep: #ece4cf;
      --card: #fffdf6;
      --card-soft: #f8f3e6;
      --ink: #23201a;
      --ink-soft: #45423a;
      --muted: #7f7a6b;
      --faint: #a39d8c;
      --line: #e1d9c3;
      --line-strong: #cec4a8;

      --accent: #b4531d;
      --accent-deep: #8f3f12;
      --accent-wash: #f6e3d3;
      --pine: #2f4a3c;
      --pine-soft: #3d5c4b;
      --pine-wash: #e5ebe3;
      --gold: #b0821f;
      --gold-wash: #f6ecd2;
      --green: #2c6e49;
      --green-wash: #e2efe6;
      --red: #a23b2e;
      --red-wash: #f8e6e0;

      --radius: 18px;
      --radius-sm: 13px;

      --shadow-sm: 0 1px 2px rgba(35, 32, 26, .06);
      --shadow: 0 10px 30px -12px rgba(35, 32, 26, .18), 0 2px 8px -2px rgba(35, 32, 26, .08);
      --shadow-lg: 0 20px 50px -16px rgba(35, 32, 26, .35);

      --display: "Fraunces", "Iowan Old Style", Georgia, serif;
      --sans: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
    }

    * { box-sizing: border-box; }
    html { scroll-behavior: smooth; }

    body {
      margin: 0;
      font-family: var(--sans);
      color: var(--ink);
      background-color: var(--paper);
      background-image:
        radial-gradient(900px 420px at 85% -8%, rgba(180, 83, 29, .07), transparent 62%),
        radial-gradient(760px 380px at -10% 4%, rgba(47, 74, 60, .06), transparent 60%),
        radial-gradient(rgba(35, 32, 26, .05) 1px, transparent 1px);
      background-size: auto, auto, 22px 22px;
      font-size: 16px;
      line-height: 1.55;
      -webkit-font-smoothing: antialiased;
    }

    main, header { max-width: 760px; margin: 0 auto; padding: 0 18px; }
    main { padding-bottom: 104px; }

    /* ===== Brand bar ===== */
    header {
      display: flex;
      align-items: center;
      gap: 10px;
      padding-top: 18px;
      padding-bottom: 4px;
    }
    .brand-mark {
      flex: 0 0 34px;
      width: 34px; height: 34px;
      border-radius: 50%;
      background: var(--pine);
      color: #f2efe2;
      display: grid;
      place-items: center;
      box-shadow: var(--shadow-sm);
    }
    .brand-mark svg { width: 19px; height: 19px; }
    header h1 {
      font-family: var(--display);
      font-size: 1.06rem;
      font-weight: 700;
      letter-spacing: .01em;
      margin: 0;
    }
    header .edition {
      margin-left: auto;
      font-size: .68rem;
      font-weight: 700;
      letter-spacing: .12em;
      text-transform: uppercase;
      color: var(--muted);
      border: 1px solid var(--line-strong);
      border-radius: 999px;
      padding: 4px 10px;
      white-space: nowrap;
    }

    /* ===== Pages ===== */
    .page { display: none; }
    .page.active { display: block; animation: pagefade .28s ease; }
    @keyframes pagefade {
      from { opacity: 0; transform: translateY(6px); }
      to { opacity: 1; transform: none; }
    }

    /* ===== Type ===== */
    .kicker {
      text-transform: uppercase;
      letter-spacing: .15em;
      font-size: .7rem;
      font-weight: 800;
      color: var(--accent);
      margin: 0 0 6px;
    }
    .page > h2 {
      font-family: var(--display);
      font-weight: 600;
      letter-spacing: -.015em;
      line-height: 1.05;
      font-size: clamp(1.9rem, 7vw, 2.9rem);
      margin: 4px 0 10px;
    }
    .page-sub { color: var(--ink-soft); font-size: .98rem; margin: 0 0 18px; max-width: 56ch; }

    /* ===== Hero (home) ===== */
    .hero { padding: 26px 0 8px; }
    .hero h2 {
      font-family: var(--display);
      font-weight: 600;
      letter-spacing: -.02em;
      line-height: 1.04;
      font-size: clamp(2.15rem, 9vw, 3.6rem);
      margin: 6px 0 14px;
    }
    .hero h2 em { font-style: italic; color: var(--accent); }
    .hero p { color: var(--ink-soft); font-size: 1.02rem; max-width: 52ch; margin: 0 0 18px; }

    .cta-row { display: flex; gap: 10px; flex-wrap: wrap; margin: 4px 0 26px; }
    .cta-browse {
      font: inherit; font-weight: 700; font-size: .95rem;
      background: var(--accent); color: #fff;
      border: 0; border-radius: 999px;
      padding: 13px 22px;
      cursor: pointer;
      box-shadow: var(--shadow);
      transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
    }
    .cta-browse:hover { background: var(--accent-deep); transform: translateY(-1px); }
    .cta-ghost {
      font: inherit; font-weight: 700; font-size: .95rem;
      background: transparent; color: var(--ink-soft);
      border: 1.5px solid var(--line-strong); border-radius: 999px;
      padding: 12px 20px;
      cursor: pointer;
      transition: border-color .15s ease, color .15s ease;
    }
    .cta-ghost:hover { border-color: var(--ink-soft); color: var(--ink); }

    /* ===== Feature trio ===== */
    .feature-row { display: grid; gap: 10px; margin: 0 0 26px; }
    @media (min-width: 640px) { .feature-row { grid-template-columns: repeat(3, 1fr); } }
    .feature {
      display: flex; gap: 12px; align-items: flex-start;
      background: var(--card);
      border: 1px solid var(--line);
      border-radius: var(--radius-sm);
      padding: 13px 14px;
      box-shadow: var(--shadow-sm);
    }
    .feature svg { flex: 0 0 20px; width: 20px; height: 20px; color: var(--pine); margin-top: 2px; }
    .feature strong { display: block; font-size: .9rem; margin-bottom: 2px; }
    .feature p { margin: 0; font-size: .82rem; color: var(--muted); line-height: 1.45; }

    /* ===== Formula callout ===== */
    .formula {
      background: linear-gradient(135deg, var(--pine), #253b30);
      color: #eee9d8;
      border-radius: var(--radius);
      padding: 18px 20px;
      margin: 0 0 26px;
      box-shadow: var(--shadow);
    }
    .formula .label {
      text-transform: uppercase; letter-spacing: .15em;
      font-size: .66rem; font-weight: 800; color: #c8d3c3;
      display: block; margin-bottom: 6px;
    }
    .formula .big {
      font-family: var(--display); font-weight: 600;
      font-size: 1.5rem; line-height: 1.25; color: #fff;
      display: block; margin-bottom: 6px;
    }
    .formula p { margin: 0; font-size: .88rem; color: #d6d0bc; }

    /* ===== Category cards ===== */
    .cat-intro { color: var(--ink-soft); font-size: .95rem; margin: 0 0 16px; max-width: 56ch; }
    .cat-group { margin: 0 0 24px; }
    .cat-group h3 {
      font-family: var(--display); font-size: 1.2rem; font-weight: 600;
      display: flex; align-items: center; gap: 10px;
      margin: 0 0 10px;
    }
    .cat-group .count {
      font-family: var(--sans); font-size: .72rem; font-weight: 800;
      background: var(--pine-wash); color: var(--pine);
      border-radius: 999px; padding: 3px 9px;
    }
    .cat-grid { display: grid; gap: 10px; }
    @media (min-width: 640px) { .cat-grid { grid-template-columns: repeat(2, 1fr); } }
    .cat-card {
      font: inherit; text-align: left; cursor: pointer;
      display: flex; align-items: center; gap: 14px;
      background: var(--card);
      border: 1px solid var(--line);
      border-radius: var(--radius);
      padding: 12px 14px 12px 12px;
      box-shadow: var(--shadow-sm);
      transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
      position: relative;
    }
    .cat-card:hover { transform: translateY(-2px); box-shadow: var(--shadow); border-color: var(--line-strong); }
    .cat-card img {
      flex: 0 0 62px; width: 62px; height: 62px;
      object-fit: contain;
      background: var(--card-soft);
      border: 1px solid var(--line);
      border-radius: 14px;
      padding: 6px;
    }
    .cat-card .cat-body { flex: 1; min-width: 0; }
    .cat-card strong { display: block; font-family: var(--display); font-weight: 600; font-size: 1.05rem; margin-bottom: 2px; }
    .cat-card .desc { display: block; color: var(--muted); font-size: .82rem; line-height: 1.4; }
    .cat-card::after {
      content: "›";
      font-size: 1.4rem; color: var(--faint);
      flex: 0 0 auto; padding-left: 2px;
    }

    /* ===== Back link ===== */
    .back-link {
      font: inherit; font-size: .82rem; font-weight: 700;
      color: var(--muted); background: transparent;
      border: 0; padding: 14px 0 2px; cursor: pointer;
      display: inline-flex; align-items: center; gap: 6px;
    }
    .back-link:hover { color: var(--accent); }

    /* ===== Numbered sections ===== */
    .sec { margin-top: 30px; }
    .sec-eyebrow {
      display: flex; align-items: center; gap: 10px;
      text-transform: uppercase; letter-spacing: .15em;
      font-size: .68rem; font-weight: 800; color: var(--muted);
    }
    .sec-eyebrow .num { color: var(--accent); font-family: var(--display); font-size: .85rem; }
    .sec-eyebrow::after { content: ""; flex: 1; height: 1px; background: var(--line-strong); }
    .sec > h3 {
      font-family: var(--display); font-weight: 600;
      font-size: 1.5rem; letter-spacing: -.01em; line-height: 1.15;
      margin: 8px 0 12px;
    }

    /* ===== Story ===== */
    .story-panel {
      background: var(--card);
      border: 1px solid var(--line);
      border-radius: var(--radius);
      padding: 20px 20px 16px;
      box-shadow: var(--shadow-sm);
    }
    .story-panel p { margin: 0 0 14px; color: var(--ink-soft); font-size: .97rem; }
    .story-panel p.lede::first-letter {
      font-family: var(--display);
      font-weight: 600;
      font-size: 3.1em;
      float: left;
      line-height: .82;
      padding: 4px 8px 0 0;
      color: var(--accent);
    }
    .story-quote {
      font-family: var(--display);
      font-style: italic;
      font-weight: 500;
      font-size: 1.24rem;
      line-height: 1.5;
      color: var(--ink-soft);
      border-left: 3px solid var(--accent);
      padding: 2px 0 2px 18px;
      margin: 0 0 20px;
    }
    .story-quote em { color: var(--accent); }
    .story-panel h4 {
      font-family: var(--display);
      font-weight: 700;
      font-size: 1.16rem;
      letter-spacing: -.005em;
      line-height: 1.25;
      margin: 26px 0 8px;
    }
    .story-panel h4 .chap {
      display: block;
      font-family: var(--sans);
      font-weight: 800;
      font-size: .66rem;
      letter-spacing: .16em;
      text-transform: uppercase;
      color: var(--accent);
      margin-bottom: 4px;
    }
    .story-figure {
      margin: 20px -20px;
    }
    .story-figure img {
      display: block;
      width: 100%;
      background: var(--paper-deep);
    }
    .story-figure.crop img { aspect-ratio: 16 / 10; object-fit: cover; }
    .story-figure figcaption {
      padding: 10px 20px 0;
      font-size: .78rem;
      color: var(--muted);
      line-height: 1.55;
    }
    .sources {
      margin: 22px 0 0;
      padding-top: 12px;
      border-top: 1px solid var(--line);
      font-size: .78rem;
      color: var(--muted);
      line-height: 1.7;
    }
    .sources a { color: var(--pine); font-weight: 600; }
    .story-grid { display: grid; gap: 10px; margin-top: 4px; }
    @media (max-width: 639px) {
      .story-grid {
        grid-auto-flow: column;
        grid-auto-columns: 80%;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        margin: 4px -20px 0;
        padding: 2px 20px 8px;
        -webkit-overflow-scrolling: touch;
      }
      .story-grid > div { scroll-snap-align: start; }
    }
    @media (min-width: 640px) { .story-grid { grid-template-columns: repeat(3, 1fr); } }
    .story-card {
      background: var(--card-soft);
      border: 1px solid var(--line);
      border-radius: var(--radius-sm);
      padding: 12px 14px;
    }
    .story-card strong { display: block; font-size: .8rem; text-transform: uppercase; letter-spacing: .08em; color: var(--pine); margin-bottom: 4px; }
    .story-card p { margin: 0; font-size: .85rem; color: var(--ink-soft); line-height: 1.5; }

    /* ===== Marker cards ===== */
    .marker-grid { display: grid; gap: 10px; }
    @media (min-width: 720px) { .marker-grid { grid-template-columns: repeat(2, 1fr); } }
    .marker-card {
      display: grid;
      grid-template-columns: 86px 1fr;
      gap: 4px 14px;
      background: var(--card);
      border: 1px solid var(--line);
      border-radius: var(--radius);
      padding: 13px;
      box-shadow: var(--shadow-sm);
    }
    .marker-card img {
      grid-row: span 2;
      width: 86px; height: 86px;
      object-fit: contain;
      background: var(--card-soft);
      border: 1px solid var(--line);
      border-radius: 12px;
      padding: 6px;
    }
    .marker-card strong { font-size: .92rem; line-height: 1.3; align-self: end; }
    .marker-card p { margin: 0; font-size: .84rem; color: var(--ink-soft); line-height: 1.5; }

    /* ===== Steps ===== */
    .steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; counter-reset: step; }
    .steps li {
      display: flex; align-items: flex-start; gap: 12px;
      background: var(--card);
      border: 1px solid var(--line);
      border-radius: var(--radius-sm);
      padding: 11px 13px;
      font-size: .9rem;
      color: var(--ink-soft);
    }
    .steps li::before {
      counter-increment: step;
      content: counter(step);
      flex: 0 0 26px; height: 26px;
      border-radius: 50%;
      background: var(--pine); color: #fff;
      display: grid; place-items: center;
      font-weight: 800; font-size: .78rem;
      margin-top: 1px;
    }
    .steps li strong { color: var(--ink); }

    /* ===== Price list ===== */
    .price-list { display: grid; gap: 10px; }
    .price-row {
      background: var(--card);
      border: 1px solid var(--line);
      border-radius: var(--radius-sm);
      padding: 13px 15px;
      display: flex; gap: 14px; align-items: flex-start;
      box-shadow: var(--shadow-sm);
    }
    .price-row .info { flex: 1; min-width: 0; }
    .price-row strong { display: block; font-size: .93rem; margin-bottom: 2px; }
    .price-row .info p { margin: 0; font-size: .82rem; color: var(--muted); line-height: 1.45; }
    .price-badge {
      flex: 0 0 auto; max-width: 132px;
      text-align: right;
      font-weight: 800; font-size: .82rem; line-height: 1.35;
      color: var(--green);
      background: var(--green-wash);
      border-radius: 12px;
      padding: 6px 10px;
    }
    .price-badge.wild { color: var(--gold); background: var(--gold-wash); }

    /* ===== Series rows ===== */
    .series-list { display: grid; gap: 8px; }
    .series-row {
      display: flex; align-items: center; gap: 12px;
      background: var(--card);
      border: 1px solid var(--line);
      border-radius: var(--radius-sm);
      padding: 10px 13px;
    }
    .series-row .info { flex: 1; min-width: 0; }
    .series-row strong { display: block; font-size: .88rem; }
    .series-row .info span { display: block; font-size: .78rem; color: var(--muted); line-height: 1.4; }
    .series-row a {
      flex: 0 0 auto;
      font-size: .76rem; font-weight: 700;
      color: var(--pine); text-decoration: none;
      border: 1.5px solid var(--line-strong);
      border-radius: 999px;
      padding: 6px 11px;
      white-space: nowrap;
    }
    .series-row a:hover { border-color: var(--pine); }

    /* ===== Checklists & callouts ===== */
    .photo-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
    .photo-list li {
      display: flex; gap: 10px; align-items: flex-start;
      background: var(--card);
      border: 1px solid var(--line);
      border-radius: var(--radius-sm);
      padding: 11px 13px;
      font-size: .87rem; color: var(--ink-soft);
    }
    .photo-list li::before { content: "📷"; font-size: .9rem; margin-top: 1px; }

    .avoid {
      background: var(--red-wash);
      border: 1px solid #ecccc2;
      border-radius: var(--radius);
      padding: 15px 17px;
    }
    .avoid ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 7px; }
    .avoid li { display: flex; gap: 10px; font-size: .88rem; color: #6e3126; line-height: 1.45; }
    .avoid li::before { content: "✕"; font-weight: 800; color: var(--red); flex: 0 0 auto; }

    /* ===== Links & notes ===== */
    .links { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
    .links a, .links button {
      font: inherit; font-size: .8rem; font-weight: 700;
      color: var(--ink-soft); text-decoration: none;
      background: var(--card);
      border: 1.5px solid var(--line-strong);
      border-radius: 999px;
      padding: 8px 14px;
      cursor: pointer;
      transition: border-color .15s ease, color .15s ease;
    }
    .links a::after { content: " ↗"; color: var(--faint); }
    .links a:hover, .links button:hover { border-color: var(--accent); color: var(--accent); }

    .note-date { color: var(--muted); font-size: .78rem; margin: 16px 2px 0; }

    /* ===== About ===== */
    .honesty {
      background: var(--gold-wash);
      border: 1px solid #e6d5a8;
      border-radius: var(--radius);
      padding: 15px 17px;
    }
    .honesty ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
    .honesty li { display: flex; gap: 10px; font-size: .88rem; color: #6d5518; line-height: 1.5; }
    .honesty li::before { content: "•"; font-weight: 800; color: var(--gold); }

    textarea {
      width: 100%;
      font: 500 .86rem/1.55 ui-monospace, "Cascadia Code", Consolas, monospace;
      color: var(--ink-soft);
      background: var(--card);
      border: 1px solid var(--line-strong);
      border-radius: var(--radius-sm);
      padding: 13px 15px;
      resize: vertical;
    }
    textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(180, 83, 29, .18); }

    .sec p { color: var(--ink-soft); font-size: .95rem; margin: 0 0 12px; }

    /* ===== Bottom nav ===== */
    .bottom-nav {
      position: fixed;
      left: 50%;
      transform: translateX(-50%);
      bottom: calc(14px + env(safe-area-inset-bottom, 0px));
      display: flex;
      gap: 4px;
      background: rgba(30, 28, 23, .93);
      -webkit-backdrop-filter: blur(10px);
      backdrop-filter: blur(10px);
      padding: 6px;
      border-radius: 999px;
      box-shadow: var(--shadow-lg);
      z-index: 50;
    }
    .bottom-nav button {
      font: inherit; font-size: .84rem; font-weight: 700;
      display: flex; align-items: center; gap: 7px;
      color: #b9b3a1;
      background: transparent;
      border: 0; border-radius: 999px;
      padding: 10px 15px;
      cursor: pointer;
      transition: background .15s ease, color .15s ease;
      min-height: 42px;
    }
    .bottom-nav button svg { width: 16px; height: 16px; }
    .bottom-nav button.active { background: var(--accent); color: #fff; }
    .bottom-nav button:not(.active):hover { color: #f0ebdc; }

    /* ===== A11y ===== */
    :focus-visible { outline: 3px solid rgba(180, 83, 29, .55); outline-offset: 2px; border-radius: 6px; }
    @media (prefers-reduced-motion: reduce) {
      *, *::before, *::after { animation: none !important; transition: none !important; }
      html { scroll-behavior: auto; }
    }

    /* ===== Edit mode (owner only) ===== */
    #editBar {
      position: fixed; top: 0; left: 0; right: 0; z-index: 200;
      display: flex; align-items: center; gap: 10px;
      background: #23201b; color: #f2efe2;
      padding: 10px 16px;
      box-shadow: 0 6px 24px rgba(0, 0, 0, .35);
      font-family: var(--sans); font-size: .84rem;
    }
    #editBar[hidden] { display: none; }
    #editBar .tag { font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: #e8a34d; }
    #editBar .hint { color: #b9b3a1; }
    #editBar .spacer { flex: 1; }
    #editBar button {
      font: inherit; font-weight: 700; font-size: .8rem;
      border: 1px solid rgba(255, 255, 255, .28); border-radius: 999px;
      padding: 7px 14px; cursor: pointer; color: #f2efe2; background: transparent;
      white-space: nowrap;
    }
    #editBar button.primary { background: var(--accent); border-color: var(--accent); }
    #editBar button:hover { border-color: #fff; }
    body.editing { padding-top: 48px; }
    body.editing [data-edit-text] {
      outline: 2px dashed rgba(180, 83, 29, .5); outline-offset: 3px;
      cursor: text; border-radius: 3px;
    }
    body.editing [data-edit-text]:hover { background: rgba(180, 83, 29, .07); }
    body.editing [data-edit-text]:focus { outline: 2px solid var(--accent); background: #fff; }
    body.editing .story-figure img,
    body.editing .marker-card img {
      outline: 2px dashed rgba(47, 74, 60, .6); outline-offset: 3px; cursor: pointer;
    }
    body.editing .story-figure img:hover,
    body.editing .marker-card img:hover {
      outline-color: var(--pine); box-shadow: 0 0 0 4px rgba(47, 74, 60, .16);
    }
    @media (max-width: 600px) {
      #editBar { flex-wrap: wrap; gap: 6px; padding: 8px 10px; }
      #editBar .hint, #editBar .spacer { display: none; }
      #editBar .tag { flex: 1 0 100%; }
      #editBar button { flex: 1; padding: 7px 9px; font-size: .72rem; }
      body.editing { padding-top: 88px; }
    }
  
/* ===== Generated public-site additions ===== */
body.public-hub .page { display: block; animation: none; }
body.public-hub .page + .page { margin-top: 48px; padding-top: 18px; border-top: 1px solid var(--line-strong); }
header h1 a, .site-name a, .cat-card, .cta-row a, .back-link, .bottom-nav a { color: inherit; text-decoration: none; }
.site-name { font-family: var(--serif); font-size: 1.22rem; font-weight: 700; letter-spacing: -.02em; }
.article-title { margin: 8px 0 6px; font-family: var(--serif); font-size: clamp(2rem, 7vw, 3.25rem); line-height: 1.04; letter-spacing: -.035em; }
.article-meta { display: flex; flex-wrap: wrap; gap: 6px 14px; margin: 0 0 18px; color: var(--muted); font-size: .76rem; line-height: 1.45; }
.article-meta a { color: var(--pine); font-weight: 700; }
.geo-summary { margin: 18px 0 24px; padding: 18px; border: 1px solid var(--line-strong); border-left: 4px solid var(--rust); border-radius: var(--radius); background: var(--card); box-shadow: var(--shadow-sm); }
.geo-summary .geo-label { margin: 0 0 5px; color: var(--rust); font-size: .7rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.geo-summary h2 { margin: 0 0 9px; font-family: var(--serif); font-size: 1.35rem; line-height: 1.18; }
.geo-summary > p:not(.geo-label) { margin: 0; color: var(--ink-soft); line-height: 1.62; }
.geo-summary ul { margin: 12px 0 0; padding-left: 20px; color: var(--ink-soft); }
.geo-summary li + li { margin-top: 5px; }
.field-answers { margin: 0 0 28px; }
.field-answers > h2 { margin: 0 0 12px; font-family: var(--serif); font-size: 1.35rem; line-height: 1.2; }
.field-answer { padding: 14px 0; border-top: 1px solid var(--line); }
.field-answer:last-child { border-bottom: 1px solid var(--line); }
.field-answer h3 { margin: 0 0 6px; font-family: var(--serif); font-size: 1.05rem; line-height: 1.28; }
.field-answer p { margin: 0; color: var(--ink-soft); line-height: 1.62; }
.feedback-panel { margin: 22px 0; padding: 18px; border: 1px solid var(--line-strong); border-radius: var(--radius); background: var(--card-soft); }
.feedback-panel .feedback-kicker { margin: 0 0 5px; color: var(--rust); font-size: .7rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.feedback-panel h2 { margin: 0 0 8px; font-family: var(--serif); font-size: 1.3rem; line-height: 1.2; }
.feedback-panel > p:not(.feedback-kicker) { max-width: 66ch; margin: 0; color: var(--ink-soft); line-height: 1.6; }
.feedback-link { display: inline-block; margin-top: 12px; color: var(--pine); font-size: .78rem; font-weight: 800; letter-spacing: .03em; }
.related-guides { margin: 20px 0 4px; padding: 16px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--card-soft); }
.related-guides h2 { margin: 0 0 8px; font-family: var(--serif); font-size: 1.15rem; }
.related-guides ul { margin: 0; padding-left: 20px; }
.related-guides li + li { margin-top: 6px; }
.related-guides a, .methodology-page a { color: var(--pine); font-weight: 700; }
.methodology-page .story-panel { margin-bottom: 18px; }
.methodology-page h2 { margin: 22px 0 8px; font-family: var(--serif); font-size: 1.3rem; }
.cta-row a { display: inline-flex; align-items: center; justify-content: center; }
.cat-card { width: 100%; }
.back-link { text-decoration: none; }
.affiliate-disclosure { margin: 14px 0 0; padding: 11px 13px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--card-soft); color: var(--muted); font-size: .76rem; line-height: 1.45; }
.bottom-nav a {
  font: inherit; font-size: .84rem; font-weight: 700;
  display: flex; align-items: center; gap: 7px;
  color: #b9b3a1; background: transparent;
  border: 0; border-radius: 999px; padding: 10px 15px;
  transition: background .15s ease, color .15s ease; min-height: 42px;
}
.bottom-nav a svg { width: 16px; height: 16px; }
.bottom-nav a.active { background: var(--accent); color: #fff; }
.bottom-nav a:not(.active):hover { color: #f0ebdc; }
/* ===== Quiet Luxury public hub ===== */
body.public-page {
  --paper: #ffffff;
  --paper-deep: #f5f5f3;
  --card: #ffffff;
  --card-soft: #fafaf8;
  background-color: #ffffff;
  background-image: none;
}
body.public-hub {
  --mag-paper: #ffffff;
  --mag-card: #ffffff;
  --mag-ink: #171714;
  --mag-muted: #68645d;
  --mag-line: #cbc5ba;
  --mag-accent: #741c2d;
  color: var(--mag-ink);
  background: var(--mag-paper);
  background-image: none;
  padding-bottom: 0;
}
.public-hub .mag-header {
  display: block;
  max-width: 1320px;
  margin: 0 auto;
  padding: 20px 28px 16px;
  border-bottom: 1px solid var(--mag-line);
}
.mag-header-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 12px;
  color: var(--mag-accent);
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
}
.mag-header-top span:last-child { color: var(--mag-muted); }
.mag-wordmark {
  display: block;
  color: var(--mag-ink);
  font-family: var(--display);
  font-size: clamp(2.7rem, 6vw, 5.4rem);
  font-weight: 500;
  letter-spacing: -.045em;
  line-height: .95;
  text-align: center;
  text-decoration: none;
}
.mag-nav {
  display: flex;
  justify-content: center;
  gap: clamp(20px, 4vw, 52px);
  margin-top: 16px;
  color: var(--mag-ink);
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .11em;
  text-transform: uppercase;
}
.mag-nav a { color: inherit; text-decoration: none; }
.mag-nav a:hover { color: var(--mag-accent); }
.public-hub main.mag-main {
  max-width: 1320px;
  margin: 0 auto;
  padding: 24px 28px 88px;
}
.mag-section { padding: 52px 0; border-bottom: 1px solid var(--mag-line); }
.mag-section:first-child { padding-top: 0; }
.mag-hero {
  display: grid;
  grid-template-columns: minmax(0, 3.1fr) minmax(240px, 1fr);
  gap: 18px;
  align-items: start;
}
.mag-hero-lead { position: relative; min-width: 0; }
.mag-media { margin: 0; min-width: 0; }
.mag-media a { display: block; color: inherit; text-decoration: none; }
.mag-media-frame { overflow: hidden; background: #ded9cf; }
.mag-media-frame img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .45s ease;
}
.mag-media a:hover img { transform: scale(1.018); }
.mag-hero-lead .mag-media-frame { aspect-ratio: 2 / 1; }
.mag-current .mag-media-frame { aspect-ratio: 3 / 4; }
.mag-concept-media .mag-media-frame { position: relative; }
.mag-concept-media .mag-media-frame img {
  position: absolute;
  max-width: none;
  object-fit: fill;
}
.mag-concept-hero .mag-media-frame img {
  width: 157.43%;
  height: 201.41%;
  left: -4.82%;
  top: -32.33%;
}
.mag-concept-current .mag-media-frame img {
  width: 486.96%;
  height: 233.8%;
  left: -371.43%;
  top: -53.15%;
}
.mag-concept-media a:hover img { transform: none; }
.mag-credit {
  display: block;
  margin-top: 6px;
  color: var(--mag-muted);
  font-size: .61rem;
  line-height: 1.35;
}
.mag-credit a { display: inline; color: inherit; text-decoration: underline; }
.mag-cover-copy {
  position: absolute;
  left: 24px;
  bottom: 34px;
  width: min(610px, calc(100% - 48px));
  padding: 20px 22px 18px;
  background: rgba(244, 241, 234, .95);
}
.mag-kicker {
  margin: 0 0 8px;
  color: var(--mag-accent);
  font-size: .67rem;
  font-weight: 700;
  letter-spacing: .15em;
  text-transform: uppercase;
}
.mag-cover-copy h1 {
  margin: 0;
  font-family: var(--display);
  font-size: clamp(2.1rem, 4.5vw, 4.5rem);
  font-weight: 500;
  letter-spacing: -.045em;
  line-height: .98;
}
.mag-cover-copy p:not(.mag-kicker) {
  max-width: 54ch;
  margin: 12px 0 0;
  color: var(--mag-muted);
  font-size: .95rem;
  line-height: 1.55;
}
.mag-cover-copy--embedded {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  clip-path: inset(50%) !important;
  white-space: nowrap !important;
}
.mag-current { min-width: 0; }
.mag-current-label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
  padding-bottom: 9px;
  border-bottom: 1px solid var(--mag-line);
  color: var(--mag-accent);
  font-size: .66rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.mag-current h2 {
  margin: 14px 0 7px;
  font-family: var(--display);
  font-size: clamp(1.55rem, 2.6vw, 2.4rem);
  font-weight: 500;
  letter-spacing: -.025em;
  line-height: 1.05;
}
.mag-current h2 a, .mag-story-card h3 a, .mag-index-item h3 a { color: inherit; text-decoration: none; }
.mag-current-copy { display: none; }
.mag-current-copy > p { margin: 0; color: var(--mag-muted); font-size: .88rem; line-height: 1.55; }
.mag-section-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 22px;
}
.mag-section-head h2 {
  margin: 0;
  font-family: var(--display);
  font-size: clamp(2rem, 4vw, 3.6rem);
  font-weight: 500;
  letter-spacing: -.04em;
  line-height: 1;
}
.mag-section-head p {
  max-width: 48ch;
  margin: 0;
  color: var(--mag-muted);
  font-size: .84rem;
  line-height: 1.5;
}
.mag-story-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; }
.mag-story-card { min-width: 0; padding-top: 12px; border-top: 1px solid var(--mag-ink); }
.mag-story-card .mag-media-frame { aspect-ratio: 4 / 3; }
.mag-story-card .mag-kicker { margin-top: 14px; }
.mag-story-card h3 {
  margin: 0 0 8px;
  font-family: var(--display);
  font-size: clamp(1.45rem, 2.5vw, 2.15rem);
  font-weight: 500;
  letter-spacing: -.025em;
  line-height: 1.08;
}
.mag-story-card > p { margin: 0; color: var(--mag-muted); font-size: .88rem; line-height: 1.55; }
.mag-read-link {
  display: inline-block;
  margin-top: 13px;
  color: var(--mag-ink);
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-decoration: none;
  text-transform: uppercase;
}
.mag-read-link:hover { color: var(--mag-accent); }
.mag-index-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-top: 1px solid var(--mag-line); }
.mag-index-item {
  display: grid;
  grid-template-columns: 150px minmax(0, 1fr);
  gap: 18px;
  align-items: center;
  min-width: 0;
  padding: 18px 20px 18px 0;
  border-bottom: 1px solid var(--mag-line);
}
.mag-index-item:nth-child(odd) { border-right: 1px solid var(--mag-line); }
.mag-index-item:nth-child(even) { padding-left: 20px; }
.mag-index-item .mag-index-media { display: contents; }
.mag-index-item .mag-index-media > a { grid-column: 1; grid-row: 1; }
.mag-index-item > div { grid-column: 2; grid-row: 1; }
.mag-index-item .mag-media-frame { aspect-ratio: 4 / 3; }
.mag-index-item .mag-credit {
  grid-column: 1 / -1;
  grid-row: 2;
  margin-top: -5px;
  font-size: .57rem;
}
.mag-index-num { color: var(--mag-accent); font-family: var(--display); font-size: 1.15rem; }
.mag-index-item h3 { margin: 3px 0 6px; font-family: var(--display); font-size: 1.35rem; font-weight: 500; line-height: 1.08; }
.mag-index-item p { margin: 0; color: var(--mag-muted); font-size: .78rem; line-height: 1.45; }
.mag-index-hero {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(260px, .65fr);
  gap: 48px;
  align-items: end;
  padding: 54px 0 42px;
  border-bottom: 1px solid var(--mag-ink);
}
.mag-index-hero h1 {
  max-width: 820px;
  margin: 0;
  font-family: var(--display);
  font-size: clamp(3rem, 7vw, 7rem);
  font-weight: 500;
  letter-spacing: -.055em;
  line-height: .88;
}
.mag-index-hero-copy { max-width: 48ch; margin: 0; color: var(--mag-muted); font-size: .92rem; line-height: 1.65; }
.mag-index-hero-copy a { display: inline-block; margin-top: 16px; color: var(--mag-ink); font-size: .7rem; font-weight: 700; letter-spacing: .1em; text-decoration: none; text-transform: uppercase; }
.mag-guide-group { padding: 48px 0 8px; }
.mag-guide-group + .mag-guide-group { border-top: 1px solid var(--mag-line); }
.mag-guide-group-head { display: grid; grid-template-columns: minmax(0, .8fr) minmax(260px, 1.2fr); gap: 32px; align-items: end; margin-bottom: 20px; }
.mag-guide-group-head h2 { margin: 0; font-family: var(--display); font-size: clamp(2rem, 4vw, 4rem); font-weight: 500; letter-spacing: -.04em; line-height: .95; }
.mag-guide-group-head p { max-width: 56ch; margin: 0; color: var(--mag-muted); font-size: .84rem; line-height: 1.55; }
.guides-page .mag-index-grid { margin-bottom: 28px; }
.mag-notes { color: #f5f1e8; background: var(--mag-ink); padding: 36px; }
.mag-notes .mag-section-head { margin-bottom: 26px; }
.mag-notes .mag-section-head h2, .mag-notes .mag-section-head p { color: inherit; }
.mag-note-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.mag-note {
  padding: 0 22px;
  border-left: 1px solid rgba(245, 241, 232, .28);
}
.mag-note:first-child { padding-left: 0; border-left: 0; }
.mag-note:last-child { padding-right: 0; }
.mag-note strong { display: block; margin-bottom: 8px; font-family: var(--display); font-size: 1.45rem; font-weight: 500; }
.mag-note p { margin: 0; color: #c8c2b7; font-size: .82rem; line-height: 1.55; }
.mag-about { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 48px; align-items: start; }
.mag-about h2 { margin: 0; font-family: var(--display); font-size: clamp(2.3rem, 5vw, 4.8rem); font-weight: 500; letter-spacing: -.045em; line-height: .98; }
.mag-about-copy p { max-width: 62ch; margin: 0 0 15px; color: var(--mag-muted); font-size: .95rem; line-height: 1.65; }
.mag-about-links { display: flex; flex-wrap: wrap; gap: 10px 20px; margin-top: 20px; }
.mag-about-links a { color: var(--mag-ink); font-size: .72rem; font-weight: 700; letter-spacing: .08em; text-decoration: none; text-transform: uppercase; }
.mag-footer {
  max-width: 1320px;
  margin: 0 auto;
  padding: 24px 28px 34px;
  border-top: 1px solid var(--mag-line);
  color: var(--mag-muted);
  font-size: .68rem;
  line-height: 1.5;
}
.mag-footer strong { color: var(--mag-ink); }
@media (max-width: 900px) {
  .mag-hero { grid-template-columns: minmax(0, 2.1fr) minmax(210px, 1fr); }
  .mag-cover-copy { left: 16px; bottom: 28px; width: calc(100% - 32px); }
  .mag-story-grid { gap: 16px; }
  .mag-index-item { grid-template-columns: 110px minmax(0, 1fr); }
  .mag-note-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 0; }
  .mag-note:nth-child(3) { padding-left: 0; border-left: 0; }
}
@media (max-width: 700px) {
  .public-hub .mag-header { padding: 16px 16px 12px; }
  .mag-header-top { margin-bottom: 10px; font-size: .61rem; }
  .mag-wordmark { font-size: clamp(2.35rem, 13vw, 3.4rem); text-align: left; }
  .mag-nav { justify-content: flex-start; gap: 24px; overflow-x: auto; margin-top: 13px; padding-bottom: 3px; scrollbar-width: none; }
  .mag-nav::-webkit-scrollbar { display: none; }
  .public-hub main.mag-main { padding: 18px 16px 60px; }
  .mag-section { padding: 40px 0; }
  .mag-hero { grid-template-columns: 1fr; gap: 34px; }
  .mag-cover-copy { position: static; width: auto; padding: 16px 0 0; background: transparent; }
  .mag-cover-copy h1 { font-size: clamp(2.45rem, 12vw, 3.8rem); }
  .mag-current { display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: 15px; padding-top: 16px; border-top: 1px solid var(--mag-ink); }
  .mag-current-label { grid-column: 1 / -1; margin: 0; }
  .mag-current h2 { margin-top: 0; }
  .mag-current-copy { display: block; }
  .mag-current .mag-credit { display: none; }
  .mag-section-head { display: block; }
  .mag-section-head p { margin-top: 10px; }
  .mag-story-grid { grid-template-columns: 1fr; gap: 28px; }
  .mag-story-card { display: grid; grid-template-columns: minmax(120px, 42%) minmax(0, 1fr); gap: 15px; align-items: start; }
  .mag-story-card .mag-media { grid-row: 1 / span 5; }
  .mag-story-card .mag-kicker { margin: 0 0 6px; }
  .mag-story-card h3 { font-size: 1.45rem; }
  .mag-story-card .mag-credit { display: none; }
  .mag-read-link { margin-top: 8px; }
  .mag-index-grid { grid-template-columns: 1fr; }
  .mag-index-item, .mag-index-item:nth-child(even) { grid-template-columns: 96px minmax(0, 1fr); padding: 14px 0; border-right: 0; }
  .mag-index-hero, .mag-guide-group-head { grid-template-columns: 1fr; gap: 18px; }
  .mag-index-hero { padding: 34px 0 28px; }
  .mag-guide-group { padding-top: 34px; }
  .mag-notes { padding: 28px 20px; }
  .mag-about { grid-template-columns: 1fr; gap: 22px; }
  .mag-footer { padding: 22px 16px 28px; }
}
@media (max-width: 420px) {
  .mag-note-grid { grid-template-columns: 1fr; }
  .mag-note, .mag-note:nth-child(3) { padding: 18px 0 0; border-left: 0; border-top: 1px solid rgba(245, 241, 232, .28); }
  .mag-note:first-child { padding-top: 0; border-top: 0; }
}