@import url('https://fonts.googleapis.com/css2?family=Yeseva+One&family=Rye&family=IM+Fell+DW+Pica:ital@0;1&family=Fraunces:ital,opsz,wght,SOFT@0,9..144,400..900,0..100;1,9..144,400..900,0..100&family=Crimson+Pro:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;1,400;1,600&family=DM+Mono:wght@400;500&display=swap');

  :root{
    --paper:     oklch(96.2% 0.013 85);
    --paper-deep: oklch(93% 0.018 80);
    --ink:       #0a0a0a;
    --ink-90:    rgba(10,10,10,0.92);
    --ink-70:    rgba(10,10,10,0.70);
    --ink-55:    rgba(10,10,10,0.55);
    --ink-40:    rgba(10,10,10,0.40);
    --rule:      rgba(10,10,10,0.14);
    --rule-soft: rgba(10,10,10,0.08);
    --saddle:    oklch(38% 0.07 50);
    --saddle-dark: oklch(28% 0.055 50);
    --saddle-deep: oklch(22% 0.04 50);
    --tan:       #d9b48a;
    --tan-soft:  rgba(217, 180, 138, 0.55);

    --serif:     'Crimson Pro', 'Iowan Old Style', Georgia, serif;
    --display:   'Yeseva One', 'Iowan Old Style', Georgia, serif;
    --round:     'Fraunces', 'Iowan Old Style', Georgia, serif;
    --wood:      'Rye', 'Yeseva One', Georgia, serif;
    --fell:      'IM Fell DW Pica', 'Iowan Old Style', Georgia, serif;
    --mono:      'DM Mono', ui-monospace, Menlo, monospace;

    --max:  1180px;
    --gutter: clamp(20px, 4vw, 56px);

    --bezier-pop: cubic-bezier(.34, 1.56, .64, 1);
  }

  *,*::before,*::after{ box-sizing:border-box; }
  html{ -webkit-text-size-adjust:100%; }
  body{
    margin:0;
    background: var(--paper);
    color: var(--ink);
    font-family: var(--serif);
    font-size: 18px;
    line-height: 1.55;
    font-weight: 400;
    -webkit-font-smoothing:antialiased;
    text-rendering:optimizeLegibility;
    overflow-x:clip;
    position: relative;
  }
  /* Subtle paper grain — newsprint feel. Painted directly onto body bg
     instead of a fixed mix-blend overlay, which was forcing a full-viewport
     composite repaint on every scroll (= the lag). */
  body{
    background-image:
      url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.92' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 0.045 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
    background-repeat: repeat;
  }
  ::selection{ background: var(--saddle); color: var(--paper); }

  /* Double-rule used at masthead, section dividers, etc. */
  .drule{
    height: 6px;
    border-top: 1px solid var(--ink);
    border-bottom: 1px solid var(--ink);
    background: var(--paper);
    width: 100%;
  }
  .drule.thin{ height: 4px; border-top-width: 0.5px; border-bottom-width: 0.5px; opacity: .85; }

  img{ max-width:100%; display:block; }
  a{ color: inherit; text-decoration:none; }
  button{ font: inherit; color: inherit; background:none; border:0; cursor:pointer; }

  /* utilities */
  .container{ max-width: var(--max); margin:0 auto; padding: 0 var(--gutter); }
  .display{ font-family: var(--display); font-weight:400; letter-spacing: -0.005em; line-height:1.02; }
  .mono{ font-family: var(--mono); letter-spacing: 0.06em; text-transform:uppercase; font-size:11.5px; }
  .small-caps{ font-variant: all-small-caps; letter-spacing: 0.14em; }
  .rule{ height:1px; background: var(--rule); border:0; margin:0; }
  .rule-bold{ height:2px; background: var(--ink); border:0; }
  .reveal{ opacity:0; transform: translateY(18px); transition: opacity .9s ease, transform .9s cubic-bezier(.2,.7,.2,1); }
  .reveal.is-in{ opacity:1; transform: translateY(0); }

  /* ============ NAV ============ */
  .nav-wrap{
    position: sticky; top: 0; z-index: 60;
    padding: 14px var(--gutter);
    transition: padding .35s ease;
    pointer-events: none;
  }
  .nav-wrap > .nav{
    pointer-events: auto;
  }
  .nav{
    max-width: var(--max);
    margin: 0 auto;
    display:flex; align-items:center; justify-content:space-between;
    gap: 24px;
    padding: 14px 22px;
    background: transparent;   /* no box at top — only paint a bg when floating */
    border: 0;
    border-radius: 0;
    transition: max-width .45s cubic-bezier(.2,.7,.2,1), padding .35s ease, border-radius .45s cubic-bezier(.2,.7,.2,1), background .35s ease, box-shadow .35s ease, border-color .35s ease;
  }
  .nav-wrap.is-floating{ padding-top: 16px; padding-bottom: 0; }
  .nav-wrap.is-floating .nav{
    max-width: 920px;
    padding: 12px 14px 12px 22px;
    border-radius: 999px;
    background: rgb(252,247,239); /* opaque — was rgba(...,0.92) + blur(10px) which forced
                                     a full backdrop re-rasterization on every scroll frame */
    border: 1px solid var(--rule);
    box-shadow: 0 12px 32px -16px rgba(10,10,10,0.20), 0 1px 0 rgba(10,10,10,0.04);
  }

  .brand{
    display:flex; align-items:center; gap:0;
  }
  .brand img.combined{ height: 52px; width:auto; display:block; }
  .nav-wrap.is-floating .brand img.combined{ height: 44px; }
  @media (max-width: 720px){
    .brand img.combined{ height: 44px; }
    .nav-wrap.is-floating .brand img.combined{ height: 38px; }
  }

  .nav-links{
    display:flex; align-items:center; gap: 30px;
  }
  .nav-links a:not(.cta-pill){
    font-family: var(--serif);
    font-size: 16px;
    font-weight: 500;
    color: var(--ink-90);
    position:relative;
    padding: 4px 0;
  }
  .nav-links a:not(.cta-pill)::after{
    content:""; position:absolute; left:0; right:0; bottom:-2px; height:1px; background: var(--ink); transform: scaleX(0); transform-origin: left; transition: transform .35s ease;
  }
  .nav-links a:not(.cta-pill):hover::after,
  .nav-links a:not(.cta-pill):focus-visible::after{ transform: scaleX(1); }

  .cta-pill{
    display:inline-flex; align-items:center; gap: 9px;
    font-family: var(--serif); font-weight:600;
    font-size: 14.5px; letter-spacing: 0.01em;
    color: var(--paper);
    background: var(--saddle);
    padding: 10px 18px;
    border-radius: 999px;
    border: 1px solid var(--saddle-dark);
    transition: transform .25s var(--bezier-pop), background .25s ease, color .25s ease, box-shadow .3s ease, border-color .25s ease;
    will-change: transform;
    white-space: nowrap;
  }
  .nav-links .cta-pill{
    margin-left: 6px;
  }
  .cta-pill:hover, .cta-pill:focus-visible{
    background: var(--saddle-dark);
    border-color: var(--saddle-deep);
    box-shadow: 0 10px 22px -10px rgba(40,20,10,0.45);
    outline: none;
  }
  .cta-pill .arrow{ transition: transform .3s ease; display:inline-block; }
  .cta-pill:hover .arrow{ transform: translateX(4px); }
  /* hero CTA — bigger, brown-filled, the page's primary action */
  .hero-ctas .cta-pill{
    font-size: 16px;
    padding: 13px 24px;
    background: var(--saddle);
    border-color: var(--saddle-dark);
  }
  .hero-ctas .cta-pill:hover, .hero-ctas .cta-pill:focus-visible{
    background: var(--saddle-dark);
  }

  .cta-ghost{
    display:inline-flex; align-items:center; gap:8px;
    font-family: var(--serif); font-weight:600;
    font-size: 15.5px;
    color: var(--ink);
    padding: 10px 20px;
    border-radius: 999px;
    border: 1.5px solid var(--ink);
    background: transparent;
    transition: background .25s ease, color .25s ease;
  }
  .cta-ghost:hover, .cta-ghost:focus-visible{ background: var(--ink); color: var(--paper); outline:none; }

  .nav-cta-mobile{ display:none; }

  @media (max-width: 820px){
    .nav-links a:not(.cta-pill){ display:none; }
    .nav-wrap.is-floating .nav{ max-width: 100%; padding: 10px 12px 10px 18px; }
  }

  /* ============ HERO ============ */
  .hero{
    padding: clamp(40px, 7vw, 84px) 0 clamp(64px, 9vw, 110px);
    position: relative;
    border-bottom: 1px solid var(--rule);
  }

  /* === BROADSHEET NAMEPLATE === */
  .nameplate{
    margin: 0 0 clamp(32px, 5vw, 56px);
    padding: 0;
    position: relative;
  }
  .nameplate .top-rules,
  .nameplate .bot-rules{
    display:flex; flex-direction: column; gap: 3px;
  }
  .nameplate .top-rules > div,
  .nameplate .bot-rules > div{ height: 1px; background: var(--ink); }
  .nameplate .top-rules > div:nth-child(2){ height: 2.5px; }
  .nameplate .bot-rules > div:nth-child(1){ height: 2.5px; }

  .nameplate .ledger{
    display:grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 18px;
    padding: 10px 0;
    font-family: var(--mono);
    font-size: 10.5px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--ink-70);
  }
  .nameplate .ledger .l{ text-align: left; }
  .nameplate .ledger .c{ text-align: center; font-family: var(--fell); font-style: italic; letter-spacing: 0.02em; text-transform: none; font-size: 14.5px; color: var(--ink-90); }
  .nameplate .ledger .r{ text-align: right; }
  .nameplate .ledger b{ font-weight: 500; color: var(--ink); font-family: var(--mono); }

  .nameplate .title-row{
    padding: clamp(14px, 2.4vw, 22px) 0 clamp(10px, 2vw, 16px);
    text-align: center;
    position: relative;
  }
  .nameplate .title{
    font-family: var(--display);
    font-weight: 400;
    font-size: clamp(54px, 10vw, 138px);
    line-height: 0.94;
    letter-spacing: -0.018em;
    color: var(--ink);
    margin: 0;
    display: inline-block;
  }
  .nameplate .title .lift{
    font-style: italic;
    color: var(--saddle);
    font-family: var(--display);
  }
  .nameplate .title .the{
    display: block;
    font-family: var(--fell);
    font-style: italic;
    font-size: clamp(15px, 1.6vw, 20px);
    letter-spacing: 0.32em;
    text-transform: uppercase;
    color: var(--ink-70);
    margin-bottom: clamp(6px, 1vw, 10px);
    font-weight: 400;
  }
  .nameplate .subtitle{
    font-family: var(--fell);
    font-style: italic;
    font-size: clamp(14px, 1.6vw, 19px);
    color: var(--ink-70);
    margin-top: clamp(8px, 1.4vw, 14px);
    letter-spacing: 0.02em;
  }
  .nameplate .subtitle::before, .nameplate .subtitle::after{
    content: " · ";
    color: var(--saddle);
    font-style: normal;
  }

  @media (max-width: 720px){
    .nameplate .ledger{ grid-template-columns: 1fr; gap: 4px; text-align: center; }
    .nameplate .ledger .l, .nameplate .ledger .c, .nameplate .ledger .r{ text-align: center; }
  }

  .hero-eyebrow{
    display: inline-flex; align-items:center; gap: 12px;
    font-family: var(--mono);
    font-size: 12px;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--ink-70);
    margin: 0 0 clamp(28px, 4vw, 40px);
  }
  .hero-eyebrow .dot{
    width: 7px; height: 7px; border-radius: 50%;
    background: var(--tan);
    box-shadow: 0 0 0 4px rgba(217, 180, 138, 0.18);
  }

  .hat-tip{ animation: hatTip 2200ms ease 320ms 1 both; }
  @keyframes hatTip{
    0%   { transform: rotate(0) translateY(0); }
    18%  { transform: rotate(-14deg) translateY(-4px); }
    35%  { transform: rotate(2deg) translateY(0); }
    50%  { transform: rotate(-6deg) translateY(-2px); }
    68%  { transform: rotate(0deg) translateY(0); }
    100% { transform: rotate(0) translateY(0); }
  }

  .hero h1{
    font-family: var(--display);
    font-weight: 400;
    font-size: clamp(56px, 10vw, 132px);
    line-height: 0.98;
    letter-spacing: -0.012em;
    margin: 0 0 clamp(20px, 3vw, 36px);
    color: var(--ink);
    max-width: 14ch;
  }
  .hero h1 em{
    font-style: italic;
    font-family: var(--round);
    font-variation-settings: "opsz" 144, "SOFT" 100, "wght" 700;
    color: var(--saddle);
  }
  .hero-sub{
    font-size: clamp(19px, 1.8vw, 23px);
    line-height: 1.45;
    color: var(--ink-90);
    max-width: 50ch;
    margin: 0 0 clamp(28px, 4vw, 44px);
  }
  .hero-sub b{ font-weight: 700; }

  .hero-ctas{
    display:flex; gap: 14px; flex-wrap:wrap; align-items:center;
  }

  .hero-meta{
    margin-top: clamp(56px, 8vw, 88px);
    display:grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0;
    border-top: 1px solid var(--rule);
    border-bottom: 1px solid var(--rule);
  }
  .hero-meta > div{
    padding: 22px 18px;
    border-right: 1px solid var(--rule);
    display:flex; flex-direction:column; gap: 6px;
  }
  .hero-meta > div:last-child{ border-right: 0; }
  .hero-meta .k{ font-family: var(--mono); font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--saddle); }
  .hero-meta .v{ font-family: var(--round); font-variation-settings: "opsz" 96, "SOFT" 100, "wght" 600; font-size: clamp(24px, 2.4vw, 32px); line-height: 1.05; color: var(--ink); letter-spacing: -0.01em; }
  .hero-meta .v small{ font-family: var(--serif); font-style:italic; font-weight:500; font-size: 14px; color: var(--ink-70); display:block; margin-top:2px; letter-spacing:0; text-transform:none; }
  @media (max-width: 820px){
    .hero-meta{ grid-template-columns: repeat(2, 1fr); }
    .hero-meta > div:nth-child(2){ border-right: 0; }
    .hero-meta > div:nth-child(1), .hero-meta > div:nth-child(2){ border-bottom: 1px solid var(--rule); }
  }

  /* ============ BRANDS STRIP (black, tan letters) ============ */
  .brands-strip{
    background: #0a0a0a;
    color: var(--tan, #d9b48a);
    padding: clamp(38px, 5vw, 64px) 0 clamp(34px, 4.5vw, 56px);
    overflow: hidden;
    position: relative;
    border-top: 1px solid var(--ink);
    border-bottom: 1px solid var(--ink);
  }
  .brands-strip::before,
  .brands-strip::after{
    content:""; position:absolute; top:0; bottom:0; width: clamp(56px, 8vw, 128px);
    z-index: 2; pointer-events:none;
  }
  .brands-strip::before{ left:0; background: linear-gradient(to right, #0a0a0a 0%, rgba(10,10,10,0) 100%); }
  .brands-strip::after{ right:0; background: linear-gradient(to left, #0a0a0a 0%, rgba(10,10,10,0) 100%); }

  .brands-label{
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 18px;
    max-width: var(--max);
    margin: 0 auto clamp(22px, 3vw, 34px);
    padding: 0 var(--gutter);
  }
  .brands-label .rule{
    height: 1px;
    background: rgba(217, 180, 138, 0.32);
  }
  .brands-label .kicker{
    font-family: var(--mono);
    font-size: 11.5px;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    color: rgba(217, 180, 138, 0.85);
    white-space: nowrap;
  }

  .brands-track-wrap{
    position: relative;
    width: 100%;
    overflow: hidden;
  }
  .brands-track{
    display: flex;
    align-items: center;
    gap: clamp(28px, 4vw, 52px);
    width: max-content;
    animation: brandsScroll 64s linear infinite;
    will-change: transform;
  }
  .brands-strip:hover .brands-track{ animation-play-state: paused; }
  @keyframes brandsScroll{
    from { transform: translate3d(0, 0, 0); }
    to   { transform: translate3d(-50%, 0, 0); }
  }

  .brand-name{
    font-family: var(--display);
    font-weight: 400;
    font-size: clamp(28px, 3.6vw, 48px);
    letter-spacing: -0.005em;
    line-height: 1.25; /* was 1 — was clipping g/y descenders */
    color: var(--tan, #d9b48a);
    white-space: nowrap;
    flex-shrink: 0;
    padding-bottom: 0.08em; /* extra breathing room for descenders */
  }
  .brand-sep{
    color: rgba(217, 180, 138, 0.32);
    font-size: clamp(14px, 1.6vw, 20px);
    flex-shrink: 0;
    transform: translateY(-1px);
  }

  /* ============ GAZETTE NAMEPLATE SECTION ============ */
  .gazette{
    background: var(--paper);
    padding: clamp(56px, 8vw, 100px) 0 clamp(40px, 6vw, 72px);
    position: relative;
    border-bottom: 1px solid var(--rule);
  }
  .gazette .nameplate{
    margin: 0;
  }

  /* ============ SECTION HEADER ============ */
  .section{
    padding: clamp(76px, 11vw, 130px) 0;
    border-bottom: 1px solid var(--rule);
    position:relative;
    /* Skip rendering off-screen sections entirely � major scroll perf win on long pages.
       contain-intrinsic-size keeps the scrollbar accurate. */
    content-visibility: auto;
    contain-intrinsic-size: auto 800px;
  }
  .section-marker{
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 18px;
    padding-bottom: 12px;
    margin-bottom: clamp(22px, 3vw, 32px);
    border-bottom: 1px solid var(--ink);
    font-family: var(--mono);
    font-size: 11px;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--ink-70);
  }
  .section-marker .id{
    color: var(--ink);
    font-weight: 500;
  }
  .section-marker .id .letter{
    font-family: var(--wood);
    font-size: 22px;
    font-weight: 400;
    letter-spacing: 0;
    color: var(--saddle);
    margin-right: 6px;
    vertical-align: -1px;
    text-transform: none;
  }
  .section-marker .ed{
    font-family: var(--fell);
    font-style: italic;
    text-transform: none;
    letter-spacing: 0;
    font-size: 14.5px;
    color: var(--ink-70);
  }
  .section-marker .pg{
    color: var(--ink);
    font-weight: 500;
  }
  .consign .section-marker{ border-color: rgba(252,247,239, 0.32); color: rgba(252,247,239, 0.7); }
  .consign .section-marker .id{ color: var(--paper); }
  .consign .section-marker .pg{ color: var(--paper); }
  .consign .section-marker .ed{ color: rgba(252,247,239, 0.7); }

  @media (max-width: 560px){
    .section-marker{ flex-wrap: wrap; gap: 6px 14px; }
    .section-marker .ed{ flex-basis: 100%; order: 3; padding-top: 2px; }
  }

  .eyebrow{
    display:inline-flex; align-items:center; gap: 12px;
    font-family: var(--mono);
    font-size: 11.5px; letter-spacing: 0.22em; text-transform: uppercase;
    color: var(--ink-70);
    margin-bottom: 22px;
  }
  .eyebrow .dot{ width:5px; height:5px; border-radius:50%; background: var(--tan); display:inline-block; }

  .section h2{
    font-family: var(--display);
    font-weight:400;
    font-size: clamp(44px, 6.4vw, 86px);
    line-height: 1.02;
    letter-spacing: -0.01em;
    margin: 0 0 clamp(20px, 3vw, 34px);
    color: var(--ink);
    max-width: 18ch;
  }
  .section h2 em{ font-family: var(--round); font-variation-settings: "opsz" 144, "SOFT" 100, "wght" 600; font-style: italic; color: var(--saddle); }
  .lede{
    font-size: clamp(19px, 1.7vw, 22px);
    line-height: 1.5;
    color: var(--ink-90);
    max-width: 56ch;
  }

  /* ============ LOTS ACCORDION ============ */
  .lots-intro{
    display:grid;
    grid-template-columns: 1.4fr 1fr;
    gap: clamp(24px, 4vw, 56px);
    align-items: end;
    margin: 0 0 clamp(36px, 5vw, 56px);
  }
  @media (max-width: 820px){ .lots-intro{ grid-template-columns: 1fr; align-items: start; } }
  .lots-intro .right{
    font-family: var(--fell);
    font-style: italic;
    font-size: clamp(16px, 1.5vw, 19px);
    color: var(--ink-70);
    line-height: 1.45;
    text-align: right;
    max-width: 36ch;
    justify-self: end;
  }
  @media (max-width: 820px){ .lots-intro .right{ text-align: left; justify-self: start; } }

  .lots-accordion{
    display: flex;
    width: 100%;
    height: clamp(380px, 52vw, 540px);
    gap: 6px;
    border-top: 2px solid var(--ink);
    border-bottom: 2px solid var(--ink);
    padding: 6px 0;
    overflow: hidden;
  }
  .lots-panel{
    position: relative;
    flex: 1 1 0;
    min-width: 0;
    height: 100%;
    overflow: hidden;
    cursor: pointer;
    transition: flex .65s cubic-bezier(.7,.0,.2,1);
    background: var(--paper-deep);
    border: 0;
    padding: 0;
    text-align: left;
    color: inherit;
    border-right: 1px solid var(--rule-soft);
  }
  .lots-panel:last-child{ border-right: 0; }
  .lots-panel.is-active{ flex: 5.2 1 0; }
  .lots-panel:focus-visible{ outline: 3px solid var(--saddle); outline-offset: -3px; }

  .lots-panel .photo{
    position: absolute; inset: 0;
    overflow: hidden;
  }
  /* Lot photo: real product image fills the panel */
  .lots-panel .photo img.bg{
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    object-fit: cover;
    object-position: center;
    background: var(--paper);
    display: block;
  }
  /* Subtle warm wash on the photo for cohesion with the cream paper page */
  .lots-panel .photo::before{
    content:"";
    position:absolute; inset:0;
    background: linear-gradient(180deg, rgba(20,12,4,0.04) 0%, rgba(20,12,4,0.10) 78%, rgba(20,12,4,0.28) 100%);
    z-index: 1;
    pointer-events: none;
  }

  /* Collapsed label (vertical) */
  .lots-panel .rib{
    position: absolute;
    inset: 0;
    display:flex; flex-direction: column; align-items:center; justify-content: space-between;
    padding: 18px 8px;
    z-index: 3;
    pointer-events: none;
    transition: opacity .35s ease;
  }
  .lots-panel.is-active .rib{ opacity: 0; pointer-events: none; }
  .lots-panel .rib .lot-num{
    font-family: var(--mono);
    font-size: 10.5px;
    letter-spacing: 0.18em;
    color: var(--paper);
    background: rgba(10,10,10,0.45);
    border: 1px solid rgba(252,247,239,0.4);
    padding: 4px 8px;
  }
  .lots-panel .rib .rib-title{
    writing-mode: vertical-rl;
    transform: rotate(180deg);
    font-family: var(--display);
    font-size: clamp(18px, 1.8vw, 24px);
    line-height: 1;
    color: var(--paper);
    letter-spacing: 0.01em;
    text-shadow: 0 1px 2px rgba(0,0,0,0.45);
    max-height: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .lots-panel .rib .chev{
    width: 14px; height: 14px;
    border-right: 2px solid var(--paper);
    border-bottom: 2px solid var(--paper);
    transform: rotate(-45deg);
    opacity: 0.85;
  }

  /* Expanded info card */
  .lots-panel .info{
    position: absolute;
    left: clamp(20px, 3vw, 36px);
    right: clamp(20px, 3vw, 36px);
    bottom: clamp(20px, 3vw, 30px);
    color: var(--paper);
    z-index: 4;
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 18px;
    align-items: end;
    opacity: 0;
    transform: translateY(14px);
    transition: opacity .55s ease .15s, transform .55s cubic-bezier(.2,.7,.2,1) .15s;
    pointer-events: none;
  }
  .lots-panel.is-active .info{ opacity:1; transform: translateY(0); pointer-events: auto; }
  .lots-panel .info::before{
    content:"";
    position:absolute; inset: -28px -20px -20px -20px;
    background: linear-gradient(to top, rgba(10,10,10,0.7) 0%, rgba(10,10,10,0.45) 60%, rgba(10,10,10,0) 100%);
    z-index:-1;
    pointer-events: none;
  }
  .lots-panel .info .lot{
    font-family: var(--mono);
    font-size: 11px;
    letter-spacing: 0.22em;
    color: rgba(252,247,239,0.78);
    display: block;
    margin-bottom: 8px;
  }
  .lots-panel .info h3{
    font-family: var(--display);
    font-weight: 400;
    font-size: clamp(28px, 3.6vw, 44px);
    line-height: 1.02;
    margin: 0 0 8px;
    letter-spacing: -0.01em;
    color: var(--paper);
  }
  .lots-panel .info h3 em{
    font-family: var(--round);
    font-variation-settings: "opsz" 144, "SOFT" 100, "wght" 600;
    font-style: italic;
    color: var(--tan);
  }
  .lots-panel .info .desc{
    font-family: var(--serif);
    font-size: 15.5px;
    color: rgba(252,247,239,0.88);
    max-width: 42ch;
    line-height: 1.45;
    margin: 0;
    font-style: italic;
  }
  .lots-panel .info .meta{
    display:flex; flex-direction: column; align-items: flex-end; gap: 6px;
    font-family: var(--mono);
    font-size: 10.5px;
    letter-spacing: 0.16em;
    color: rgba(252,247,239,0.7);
  }
  .lots-panel .info .meta b{
    font-family: var(--round);
    font-variation-settings: "opsz" 96, "SOFT" 100, "wght" 700;
    font-size: 22px;
    letter-spacing: -0.005em;
    color: var(--paper);
    font-weight: 700;
    font-style: normal;
  }
  .lots-panel:hover:not(.is-active) .rib .chev{ transform: rotate(45deg) translate(2px, -2px); transition: transform .3s ease; }

  .lots-foot{
    margin-top: clamp(22px, 3vw, 32px);
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 18px;
    flex-wrap: wrap;
    font-family: var(--fell);
    font-style: italic;
    font-size: clamp(14px, 1.4vw, 17px);
    color: var(--ink-70);
  }
  .lots-foot .more{
    font-family: var(--mono);
    font-style: normal;
    font-size: 11px;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--ink);
    border-bottom: 1.5px solid var(--saddle);
    padding-bottom: 3px;
  }

  /* Mobile fallback: stack panels vertically, fully revealed */
  @media (max-width: 760px){
    .lots-accordion{
      flex-direction: column;
      height: auto;
      gap: 8px;
      padding: 8px 0;
    }
    .lots-panel,
    .lots-panel.is-active{
      flex: 0 0 auto;
      width: 100%;
      height: 240px;
      cursor: default;
    }
    .lots-panel .rib{ display: none; }
    .lots-panel .info{
      opacity: 1; transform: none; pointer-events: auto;
    }
  }

  /* ============ FAMILY ============ */
  .family-grid{
    display:grid;
    grid-template-columns: 1.1fr 1fr;
    gap: clamp(40px, 6vw, 80px);
    align-items: start;
  }
  @media (max-width: 900px){ .family-grid{ grid-template-columns: 1fr; } }

  .family-body p{
    font-size: clamp(19px, 1.6vw, 21px);
    line-height: 1.55;
    color: var(--ink-90);
    margin: 0 0 18px;
  }
  .family-body p:first-of-type::first-letter{
    font-family: var(--display);
    font-size: 5.4em;
    float: left;
    line-height: 0.84;
    padding: 6px 12px 0 0;
    color: var(--saddle);
  }
  .family-body p .lift{ font-variant: all-small-caps; letter-spacing: 0.1em; font-weight:600; }

  .values{
    margin: clamp(28px, 4vw, 40px) 0;
    padding: 22px 0;
    border-top: 1px solid var(--rule);
    border-bottom: 1px solid var(--rule);
    display:flex; gap: 24px; flex-wrap:wrap;
  }
  .values span{
    font-family: var(--display);
    font-size: clamp(18px, 1.7vw, 22px);
    letter-spacing: -0.005em;
    color: var(--ink);
  }
  .values span + span::before{ content:"·"; margin-right: 22px; color: var(--saddle); }

  .signature{
    margin-top: clamp(28px, 4vw, 40px);
    display:flex; align-items: baseline; gap: 18px;
  }
  .signature .name{
    font-family: var(--round);
    font-variation-settings: "opsz" 96, "SOFT" 100, "wght" 600;
    font-style: italic;
    font-size: clamp(22px, 2.1vw, 30px);
    color: var(--saddle);
    letter-spacing: -0.01em;
  }

  .stats-col{
    display:grid; grid-template-columns: 1fr; gap: 0;
    border-top: 2px solid var(--ink);
  }
  .stat{
    padding: 26px 0 22px;
    border-bottom: 1px solid var(--rule);
    display:flex; align-items: baseline; justify-content: space-between; gap: 24px;
  }
  .stat .num{
    font-family: var(--round); font-variation-settings: "opsz" 144, "SOFT" 100, "wght" 700;
    font-size: clamp(54px, 6.4vw, 88px); line-height: 0.92; color: var(--ink);
    letter-spacing: -0.02em;
    font-variant-numeric: tabular-nums lining-nums;
  }
  .stat .lab{
    font-family: var(--serif); font-size: 16px; color: var(--ink-70); text-align: right; max-width: 22ch; font-style: italic;
  }
  .stat .lab b{ display:block; font-style: normal; font-family: var(--mono); font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink); margin-bottom: 4px; }

  /* ============ PULL QUOTE ============ */
  .pull-quote{
    padding: clamp(64px, 9vw, 110px) 0;
    text-align: center;
    position: relative;
    border-bottom: 1px solid var(--rule);
  }
  .pull-quote .mark{
    font-family: var(--display);
    font-size: clamp(80px, 12vw, 160px);
    line-height: 0.6;
    color: var(--saddle);
    display: block;
    margin-bottom: 8px;
    height: clamp(40px, 6vw, 80px);
    overflow: hidden;
  }
  .pull-quote blockquote{
    margin: 0 auto;
    max-width: 22ch;
    font-family: var(--display);
    font-size: clamp(34px, 5.6vw, 76px);
    line-height: 1.04;
    letter-spacing: -0.012em;
    color: var(--ink);
  }
  .pull-quote blockquote em{
    font-family: var(--round);
    font-variation-settings: "opsz" 144, "SOFT" 100, "wght" 600;
    font-style: italic;
    color: var(--saddle);
  }
  .pull-quote .attr{
    margin-top: clamp(24px, 4vw, 38px);
    font-family: var(--fell);
    font-style: italic;
    font-size: clamp(14px, 1.4vw, 17px);
    color: var(--ink-70);
    letter-spacing: 0.02em;
  }
  .pull-quote .attr::before{
    content: "— ";
    color: var(--saddle);
  }
  .pull-quote .ornaments{
    position: absolute;
    left: 50%;
    top: clamp(20px, 3vw, 32px);
    transform: translateX(-50%);
    width: 88px; height: 14px;
    opacity: 0.5;
  }

  /* ============ SHIPPING ============ */
  .ship{
    background: var(--paper);
  }
  .ship-grid{
    display:grid;
    grid-template-columns: 1fr 1.15fr;
    gap: clamp(40px, 6vw, 76px);
    align-items: start;
  }
  @media (max-width: 900px){ .ship-grid{ grid-template-columns: 1fr; } }

  .ship-body p{
    font-size: clamp(18px, 1.6vw, 21px);
    line-height: 1.55;
    color: var(--ink-90);
    margin: 0 0 18px;
    max-width: 48ch;
  }
  .ship-steps{
    margin-top: clamp(30px, 4vw, 42px);
    list-style: none; padding: 0;
    border-top: 2px solid var(--ink);
  }
  .ship-steps li{
    padding: 22px 0;
    border-bottom: 1px solid var(--rule);
    display:grid; grid-template-columns: 64px 1fr; gap: 18px; align-items: baseline;
  }
  .ship-steps .n{
    font-family: var(--display);
    font-size: clamp(28px, 3vw, 38px);
    color: var(--saddle);
    line-height: 1;
  }
  .ship-steps h4{
    margin: 0 0 4px;
    font-family: var(--display);
    font-size: clamp(20px, 2vw, 26px);
    line-height: 1.1;
    color: var(--ink);
    font-weight:400;
  }
  .ship-steps p{
    margin: 0;
    font-size: 16px;
    color: var(--ink-70);
    font-style: italic;
  }

  .map-card{
    background: transparent;
    padding: 0;
    border: 0;
    position: sticky;
    top: clamp(96px, 12vh, 132px);
    align-self: start;
  }
  @media (max-width: 900px){
    .map-card{ position: static; top: auto; }
  }
  .map-frame{
    border: 0;
    padding: 0;
    background: transparent;
    position: relative;
    box-shadow: none;
  }
  .map-cap{
    display:flex; align-items: baseline; justify-content: space-between;
    padding-bottom: 14px; margin-bottom: 18px;
    border-bottom: 1px solid var(--rule);
  }
  .map-cap .title{ font-family: var(--display); font-size: 22px; color: var(--ink); }
  .map-cap .meta{ font-family: var(--mono); font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-55); }
  /* US silhouette — inline SVG, transparent background */
  .us-img-box{
    position: relative;
    width: 100%;
    aspect-ratio: 1.6 / 1;
    overflow: visible;
    background: transparent;
  }
  .us-svg{
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    display: block;
    pointer-events: none;
    object-fit: contain;
  }
  /* New origin marker � replaces the old SVG state-pin grid */
  .us-origin-mark{
    position: absolute;
    width: 0; height: 0;
    pointer-events: none;
    z-index: 5;
  }
  /* Single central beacon at the KS/OK origin — pixel-verified against us-map.png (402/840=47.9%, 251/513=48.9%) */
  .us-pin-origin{ left: 47.9%; top: 48.9%; }
  /* Bigger central origin dot for visual anchor */
  .us-pin-origin .us-origin-dot{ width: 18px; height: 18px; border-width: 4px; }
  .us-pin-origin .us-origin-ring-3{ width: 80px; height: 80px; opacity: 0.20; animation: usOriginPulse 2.4s ease-out infinite 0.8s; border-color: var(--tan); }
  .us-pin-origin .us-origin-ring-2{ border-color: var(--tan); }
  .us-pin-origin .us-origin-ring-1{ border-color: var(--tan); }

  /* Shipping reach overlay — curved tan dashed routes from KS/OK to major cities */
  .us-routes{
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 3;             /* below pin labels but above the silhouette */
    overflow: visible;
  }
  .us-routes .route-paths path{
    opacity: 0.55;
    /* Hand-stroke literal — no fancy line-cap so dashes read clean */
  }
  .us-routes .route-dots circle{
    fill: var(--tan);
    opacity: 0.85;
    filter: drop-shadow(0 0 2px rgba(217, 180, 138, 0.6));
  }
  /* Dash-shimmer animation removed � stroke-dashoffset isn't GPU-accelerated and
     animating it on 10 paths forced a paint every frame, killing scroll performance.
     The dashed routes still read clearly as shipping lanes without movement. */
  .us-origin-dot{
    position: absolute;
    width: 14px; height: 14px;
    border-radius: 50%;
    background: var(--paper);
    border: 3px solid var(--saddle);
    transform: translate(-50%, -50%);
    box-shadow: 0 0 0 1.5px var(--saddle-deep), 0 6px 14px -4px rgba(40,20,10,.6);
    z-index: 6;
  }
  .us-origin-ring{
    position: absolute;
    border-radius: 50%;
    border: 2px solid var(--saddle);
    transform: translate(-50%, -50%);
    will-change: transform, opacity;
  }
  .us-origin-ring-1{ width: 30px; height: 30px; opacity: .65; animation: usOriginPulse 2.4s ease-out infinite; }
  .us-origin-ring-2{ width: 56px; height: 56px; opacity: .40; animation: usOriginPulse 2.4s ease-out infinite .4s; }
  .us-origin-ring-3{ width: 90px; height: 90px; opacity: .22; animation: usOriginPulse 2.4s ease-out infinite .8s; }
  @keyframes usOriginPulse{
    0%   { transform: translate(-50%,-50%) scale(0.7); opacity: var(--start, .55); }
    100% { transform: translate(-50%,-50%) scale(1.7); opacity: 0; }
  }
  .us-origin-label{
    position: absolute;
    bottom: 16px;
    left: 0;
    transform: translate(-50%, 0);
    font-family: var(--display);
    font-size: 16px;
    color: var(--tan);
    white-space: nowrap;
    letter-spacing: -0.005em;
    text-shadow: 0 1px 0 var(--saddle-deep);
  }
  /* Stagger Adair label below the pin so it doesn't collide with Hutchinson's */
  .us-pin-adair .us-origin-label{ bottom: auto; top: 16px; }
/* Old SVG-pin styles removed � using PNG silhouette + .us-origin-mark now */
/* legacy .us-origin removed */
  .us-origin .pin-dot{
    position: absolute;
    width: 16px; height: 16px;
    border-radius: 50%;
    background: var(--saddle);
    border: 2.5px solid var(--paper);
    transform: translate(-50%, -50%);
    box-shadow: 0 1px 0 rgba(10,10,10,0.4), 0 4px 10px -2px rgba(141, 90, 47, 0.45);
    z-index: 3;
  }
  .us-origin .pin-ring{
    position: absolute;
    border-radius: 50%;
    border: 1.5px solid var(--saddle);
    transform: translate(-50%, -50%);
    pointer-events: none;
  }
  .us-origin .pin-ring-1{ width: 36px; height: 36px; opacity: 0.55; animation: usPulse1 2.6s ease-out infinite; }
  .us-origin .pin-ring-2{ width: 56px; height: 56px; opacity: 0.30; animation: usPulse2 2.6s ease-out infinite 0.5s; }
  @keyframes usPulse1{ 0%{ transform: translate(-50%,-50%) scale(0.8); opacity: 0.55; } 100%{ transform: translate(-50%,-50%) scale(1.6); opacity: 0; } }
  @keyframes usPulse2{ 0%{ transform: translate(-50%,-50%) scale(0.85); opacity: 0.30; } 100%{ transform: translate(-50%,-50%) scale(1.7); opacity: 0; } }
  .us-origin .pin-label{
    position: absolute;
    bottom: 14px;
    left: 0;
    transform: translate(-50%, 0);
    font-family: var(--mono);
    font-size: 10.5px;
    letter-spacing: 0.22em;
    color: var(--paper);
    background: var(--saddle);
    padding: 4px 10px;
    border-radius: 999px;
    white-space: nowrap;
    text-transform: uppercase;
    font-weight: 600;
  }
  .us-origin .pin-meta{
    position: absolute;
    top: 14px;
    left: 0;
    transform: translate(-50%, 0);
    font-family: var(--serif);
    font-style: italic;
    font-size: 12px;
    color: rgba(10,10,10,0.7);
    white-space: nowrap;
  }
  .map-foot{
    margin-top: 18px; padding-top: 14px;
    border-top: 1px solid var(--rule);
    display:flex; gap: 14px; flex-wrap:wrap; align-items:center;
    font-family: var(--serif); font-style: italic; color: var(--ink-70); font-size: 15px;
  }
  .map-foot .badge{
    font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.2em; text-transform: uppercase;
    color: var(--saddle); border: 1px solid var(--saddle); padding: 6px 10px; border-radius: 999px;
    font-style: normal;
  }

  /* ============ LOCATIONS ============ */
  .loc-intro{
    display:grid; grid-template-columns: 1fr 1fr; gap: clamp(28px, 4vw, 48px); align-items:end;
    margin-bottom: clamp(40px, 6vw, 64px);
  }
  @media (max-width: 720px){ .loc-intro{ grid-template-columns: 1fr; } }
  .loc-intro .right{
    font-family: var(--serif); font-style: italic; font-size: 18px; color: var(--ink-70); max-width: 38ch;
  }

  .states{
    display:grid; grid-template-columns: 1fr 1fr; gap: clamp(28px, 4vw, 48px);
  }
  @media (max-width: 760px){ .states{ grid-template-columns: 1fr; } }
  .state-card{
    border-top: 2px solid var(--ink);
    padding-top: 22px;
  }
  .state-head{
    display:flex; align-items: baseline; justify-content: space-between;
    margin-bottom: 18px;
  }
  .state-name{
    font-family: var(--display);
    font-size: clamp(40px, 5vw, 64px);
    line-height: 1;
    color: var(--ink);
  }
  .state-abbr{
    font-family: var(--mono); font-size: 14px; letter-spacing: 0.2em; color: var(--ink-70);
  }
  .state-svg-wrap{
    position: relative;
    padding: 0;
    border: 0;
    background: transparent;
    overflow: visible;
  }

  /* Fixed responsive height so KS and OK occupy the IDENTICAL vertical space.
     Both silhouettes scale to fit inside, centered. State-foot below both
     starts at the same Y, so the address/drive-time text lines up. */
  .state-img-box{
    position: relative;
    width: 100%;
    height: clamp(180px, 22vw, 300px);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: visible;
  }
  .state-svg{
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    display: block;
    pointer-events: none;
  }
  .state-silhouette{ fill: var(--saddle-deep); }

  .state-pin{
    position: absolute;
    width: 0; height: 0;
    pointer-events: none;
    z-index: 4;
  }
  .state-pin .pin-dot{
    position: absolute;
    width: 18px; height: 18px;
    border-radius: 50%;
    background: var(--saddle);
    border: 3px solid var(--paper);
    transform: translate(-50%, -50%);
    box-shadow: 0 0 0 1.5px var(--ink), 0 6px 12px -3px rgba(141, 90, 47, 0.55);
    z-index: 3;
  }
  .state-pin .pin-ring{
    position: absolute;
    border-radius: 50%;
    border: 1.5px solid var(--saddle);
    transform: translate(-50%, -50%);
  }
  .state-pin .pin-ring-1{ width: 40px; height: 40px; opacity: 0.55; animation: pinPulse1 2.6s ease-out infinite; }
  .state-pin .pin-ring-2{ width: 64px; height: 64px; opacity: 0.30; animation: pinPulse2 2.6s ease-out infinite 0.55s; }
  @keyframes pinPulse1{ 0%{ transform: translate(-50%,-50%) scale(0.75); opacity: 0.55; } 100%{ transform: translate(-50%,-50%) scale(1.6); opacity: 0; } }
  @keyframes pinPulse2{ 0%{ transform: translate(-50%,-50%) scale(0.8); opacity: 0.30; } 100%{ transform: translate(-50%,-50%) scale(1.7); opacity: 0; } }
  .state-pin .pin-label{
    position: absolute;
    bottom: 14px;
    left: 0;
    transform: translate(-50%, 0);
    font-family: var(--display);
    font-size: 22px;
    color: var(--tan);
    background: transparent;
    padding: 0;
    border: 0;
    white-space: nowrap;
    letter-spacing: -0.01em;
    text-shadow: 0 1px 0 var(--saddle-deep);
  }
  @media (max-width: 760px){
    .state-pin .pin-label{ font-size: 18px; bottom: 12px; }
    .state-pin .pin-dot{ width: 14px; height: 14px; }
    .state-pin .pin-ring-1{ width: 32px; height: 32px; }
    .state-pin .pin-ring-2{ width: 50px; height: 50px; }
  }
  .state-foot{
    margin-top: 18px;
    display: flex; flex-direction: column; gap: 10px;
    font-family: var(--serif); font-style: italic;
    color: var(--ink-70); font-size: 15.5px;
    line-height: 1.45;
  }
  .state-foot span{ display: block; }
  .state-foot b{
    display: block;
    font-family: var(--mono); font-style: normal;
    font-size: 10.5px; letter-spacing: 0.2em;
    color: var(--saddle); text-transform: uppercase;
    margin-bottom: 2px;
    margin-right: 0;
  }

  /* ============ FIRST-TIMER GUIDE ============ */
  .guide-grid{
    display:grid; grid-template-columns: 1fr 1fr 1fr; gap: 0;
    border-top: 2px solid var(--ink);
    margin-top: clamp(40px, 5vw, 56px);
    list-style: none;          /* hide browser's auto "1. 2. 3." — using custom .n labels */
    padding-left: 0;
  }
  @media (max-width: 820px){ .guide-grid{ grid-template-columns: 1fr; } }
  .guide-col{
    padding: 30px 28px;
    border-right: 1px solid var(--rule);
    border-bottom: 1px solid var(--rule);
  }
  .guide-col:last-child{ border-right: 0; }
  @media (max-width: 820px){
    .guide-col{ border-right: 0; }
  }
  .guide-col .n{ font-family: var(--display); font-size: 18px; color: var(--saddle); display:block; margin-bottom: 14px; letter-spacing: 0.06em; }
  .guide-col h4{ font-family: var(--display); font-weight: 400; font-size: clamp(22px, 2.3vw, 28px); margin: 0 0 12px; line-height: 1.1; }
  .guide-col p{ margin:0; font-size: 16.5px; line-height: 1.55; color: var(--ink-70); }

  .guide-note{
    margin-top: 24px;
    font-family: var(--serif); font-style: italic; color: var(--ink-70); font-size: 16px;
  }

  /* ============ TESTIMONIALS ============ */
  .quotes{
    position: relative;
  }
  .quotes-head{
    display:flex; align-items: end; justify-content: space-between;
    gap: 24px;
    margin-bottom: clamp(40px, 5vw, 56px);
  }
  .quotes-controls{ display:flex; gap: 10px; }
  .qc{
    width: 44px; height: 44px; border-radius: 999px;
    border: 1.5px solid var(--ink);
    display:inline-flex; align-items:center; justify-content:center;
    color: var(--ink);
    transition: background .25s ease, color .25s ease, transform .2s ease;
  }
  .qc:hover, .qc:focus-visible{ background: var(--ink); color: var(--paper); outline: none; }
  .qc:active{ transform: scale(0.96); }

  .quote-viewport{
    overflow: hidden;
  }
  .quote-track{
    display:flex;
    will-change: transform;
    transform: translate3d(0,0,0);
    gap: 0;
  }
  .quote-slide{
    flex: 0 0 calc(100% / 3);
    padding: 0 18px;
  }
  @media (max-width: 980px){ .quote-slide{ flex: 0 0 calc(100% / 2); } }
  @media (max-width: 640px){ .quote-slide{ flex: 0 0 100%; padding: 0 8px; } }

  .quote-card{
    border-top: 2px solid var(--ink);
    padding-top: 18px;
    height: 100%;
    display:flex; flex-direction: column;
  }
  .quote-card .dateline{
    font-family: var(--mono);
    font-size: 10.5px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--ink-70);
    padding-bottom: 14px;
    margin-bottom: 16px;
    border-bottom: 1px solid var(--rule);
    display: flex; gap: 10px; align-items: baseline;
  }
  .quote-card .dateline b{
    color: var(--ink);
    font-weight: 500;
  }
  .quote-card .dateline .saddle-dash{
    color: var(--saddle);
  }
  .quote-card .headline{
    font-family: var(--display);
    font-size: clamp(18px, 1.7vw, 22px);
    line-height: 1.1;
    color: var(--ink);
    margin: 0 0 12px;
    letter-spacing: -0.005em;
  }
  .quote-card .qmark{
    font-family: var(--display);
    font-size: 56px; line-height: 0.4;
    color: var(--tan);
    margin-bottom: 6px;
    display: block;
  }
  .quote-card blockquote{
    margin: 0 0 18px;
    font-family: var(--serif);
    font-style: italic;
    font-size: clamp(17.5px, 1.6vw, 20px);
    line-height: 1.5;
    color: var(--ink-90);
    flex: 1;
  }
  .quote-card blockquote p{ margin: 0 0 10px; }
  .quote-card blockquote p:last-child{ margin: 0; }
  .quote-card .signoff{
    padding-top: 14px;
    border-top: 1px solid var(--rule);
    display: flex; flex-direction: column; gap: 2px;
  }
  .quote-card .signoff .name{
    font-family: var(--round);
    font-variation-settings: "opsz" 36, "SOFT" 100, "wght" 600;
    font-size: 17px;
    color: var(--ink);
    letter-spacing: -0.005em;
  }
  .quote-card .signoff .city{
    font-family: var(--mono); font-size: 11px; letter-spacing: 0.18em; color: var(--ink-55); text-transform: uppercase;
    margin-top: 2px;
  }

  .quote-dots{
    display:flex; gap: 8px; justify-content: center; margin-top: clamp(32px, 4vw, 44px);
  }
  .qd{
    width: 7px; height: 7px; border-radius: 50%;
    background: var(--rule);
    transition: background .25s ease, transform .25s ease;
    border: 0;
  }
  .qd.is-on{ background: var(--saddle); transform: scale(1.4); }

  /* ============ CONSIGN CTA ============ */
  .consign{
    background: var(--ink);
    color: var(--paper);
    border-bottom: 0;
  }
  .consign h2{ color: var(--paper); }
  .consign h2 em{ color: var(--saddle); font-family: var(--round); font-variation-settings: "opsz" 144, "SOFT" 100, "wght" 600; font-style: italic; }
  .consign p{
    color: rgba(252,247,239, 0.78);
    font-size: clamp(19px, 1.7vw, 22px); line-height: 1.5; max-width: 56ch;
    font-style: italic;
    margin: 0 0 clamp(28px, 4vw, 40px);
  }
  .consign .eyebrow{ color: var(--tan); }
  .consign .eyebrow .dot{ background: var(--tan); }

  .consign-cta-pill{
    display:inline-flex; align-items:center; gap:10px;
    font-family: var(--serif); font-weight:600;
    font-size: 16.5px;
    color: var(--ink);
    background: var(--paper);
    padding: 14px 28px;
    border-radius: 999px;
    border: 1.5px solid var(--paper);
    transition: transform .25s var(--bezier-pop), background .25s ease;
    will-change: transform;
  }
  .consign-cta-pill:hover, .consign-cta-pill:focus-visible{ background: transparent; color: var(--paper); outline: none; }

  /* ============ FOOTER ============ */
  footer{
    background: var(--paper);
    color: var(--ink);
    padding: clamp(72px, 9vw, 110px) 0 36px;
    border-top: 0;
  }
  .foot-grid{
    display:grid;
    grid-template-columns: 1.4fr 1fr 1fr 1fr;
    gap: clamp(32px, 4vw, 56px);
    padding-bottom: clamp(40px, 5vw, 56px);
    border-bottom: 1px solid var(--rule);
  }
  @media (max-width: 820px){ .foot-grid{ grid-template-columns: 1fr 1fr; } }
  @media (max-width: 520px){ .foot-grid{ grid-template-columns: 1fr; } }
  .foot-brand img.combined{ height: 88px; width:auto; display:block; }
  .foot-brand p{
    margin-top: 18px;
    font-family: var(--serif); font-style: italic; font-size: 16px; color: var(--ink-70); max-width: 32ch; line-height: 1.5;
  }
  .foot-col h5{
    margin: 0 0 14px;
    font-family: var(--mono); font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--tan); font-weight: 500;
  }
  .foot-col ul{ list-style: none; padding: 0; margin: 0; }
  .foot-col li{ margin-bottom: 8px; }
  .foot-col li a{ color: var(--ink-90); font-size: 16px; }
  .foot-col li a:hover{ color: var(--saddle); }
  .foot-col p{ font-family: var(--serif); font-size: 15.5px; color: var(--ink-70); margin: 0 0 6px; line-height: 1.5; }
  .foot-col p b{ font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink); display: block; margin-bottom: 4px; font-weight: 500; }

  .foot-bottom{
    padding-top: 26px;
    display:flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap:wrap;
    font-family: var(--mono); font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-55);
  }
  .colophon{
    margin-top: clamp(32px, 5vw, 56px);
    padding-top: clamp(28px, 4vw, 38px);
    border-top: 1px solid var(--rule);
    text-align: center;
  }
  .colophon .label{
    display: inline-block;
    font-family: var(--wood);
    text-transform: uppercase;
    color: var(--saddle);
    font-size: 22px;
    letter-spacing: 0.04em;
    padding-bottom: 8px;
    margin-bottom: 14px;
    border-bottom: 1px solid var(--ink);
  }
  .colophon p{
    font-family: var(--fell);
    font-style: italic;
    color: var(--ink-70);
    font-size: 15px;
    line-height: 1.55;
    max-width: 60ch;
    margin: 0 auto 8px;
  }
  .colophon p b{
    font-family: var(--mono);
    font-style: normal;
    font-size: 11px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--ink);
    margin: 0 4px;
    font-weight: 500;
  }
  .colophon .press{
    display: inline-flex;
    align-items: center;
    gap: 12px;
    margin-top: 14px;
    font-family: var(--mono);
    font-size: 10.5px;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--ink-70);
  }
  .colophon .press svg{ flex: 0 0 auto; }
  .socials{ display:flex; gap: 10px; }
  .socials a{
    width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--rule);
    display:inline-flex; align-items:center; justify-content: center; color: var(--ink-70);
    transition: border-color .25s ease, color .25s ease, background .25s ease;
  }
  .socials a:hover{ border-color: var(--ink); color: var(--paper); background: var(--ink); }

  /* ============ FOCUS RING ============ */
  a:focus-visible, button:focus-visible, .cta-pill:focus-visible{
    outline: 2px solid var(--saddle);
    outline-offset: 3px;
  }

  /* ============ MOBILE IMPROVEMENTS ============ */
  /* Tighter spacing + smaller display type for phones */
  @media (max-width: 560px){
    /* Sections: less vertical padding */
    .section{ padding: clamp(48px, 9vw, 72px) 0; contain-intrinsic-size: auto 600px; }

    /* Hero: tighter top, smaller meta type */
    .hero{ padding-top: clamp(20px, 5vw, 32px); }
    .hero-eyebrow{ font-size: 11px; gap: 9px; }
    .hero h1{ font-size: clamp(38px, 11vw, 56px); line-height: 1.0; }
    .hero-sub{ font-size: 16px; line-height: 1.45; }
    .hero-ctas{ gap: 10px; flex-wrap: wrap; }
    .hero-ctas .cta-pill, .hero-ctas .cta-ghost{ font-size: 14px; padding: 11px 18px; }
    .hero-meta{ margin-top: clamp(36px, 7vw, 56px); grid-template-columns: 1fr 1fr; }
    .hero-meta > div{ padding: 16px 14px; }
    .hero-meta .v{ font-size: 22px; }

    /* Section headings */
    .section h2{ font-size: clamp(34px, 9vw, 52px); line-height: 1.05; }

    /* Section markers (newspaper letter / page) — wrap and stay legible */
    .section-marker{ font-size: 10px; flex-wrap: wrap; gap: 4px 12px; }
    .section-marker .id .letter{ font-size: 18px; }

    /* Gazette nameplate — much tighter on mobile */
    .gazette{ padding: clamp(40px, 7vw, 64px) 0 clamp(28px, 4vw, 48px); }
    .nameplate .title{ font-size: clamp(40px, 13vw, 64px); }
    .nameplate .ledger{ font-size: 9.5px; gap: 8px; flex-wrap: wrap; }
    .nameplate .ledger .c{ font-size: 11.5px; }

    /* Brand carousel: tighter, slower scroll feels less frantic on small screens */
    .brands-strip{ padding: clamp(28px, 5vw, 44px) 0; }
    .brand-name{ font-size: 26px; }
    .brand-sep{ font-size: 14px; }
    .brands-track{ gap: 22px; animation-duration: 50s; }
    .brands-label{ margin-bottom: 16px; }
    .brands-label .kicker{ font-size: 10px; letter-spacing: 0.18em; }

    /* Map cards: keep map readable, drop the giant title */
    .map-card .map-cap .title{ font-size: 24px; }
    .map-card .map-cap .meta{ font-size: 10px; }

    /* State cards spacing */
    .state-name{ font-size: 38px; }
    .state-img-box{ height: clamp(140px, 38vw, 200px); }

    /* First-timer guide cards */
    .guide-col{ padding: 22px 18px; }

    /* Testimonials: reduce padding */
    .quote-card{ padding-top: 14px; }
    .quote-card blockquote{ font-size: 16.5px; line-height: 1.45; }

    /* Consign CTA */
    .consign h2{ font-size: clamp(38px, 11vw, 64px); }
    .consign p{ font-size: 17px; }
    .consign-cta-pill{ font-size: 15px; padding: 13px 22px; }

    /* Footer: tighter */
    footer{ padding: 48px 0 24px; }
    footer h5{ font-size: 12px; margin-bottom: 14px; }
    .foot-bottom{ font-size: 11px; flex-direction: column; gap: 8px; text-align: center; }
  }

  /* Extra-small: tweak the most pressured elements further */
  @media (max-width: 380px){
    .hero h1{ font-size: 36px; }
    .hero-meta{ grid-template-columns: 1fr; }
    .hero-meta > div{ border-right: 0; border-bottom: 1px solid var(--rule); }
    .hero-meta > div:last-child{ border-bottom: 0; }
    .nameplate .ledger{ display: none; }  /* hide gazette ledgers — they get squeezed */
    .nameplate .title{ font-size: 38px; }
    .section-marker .ed{ display: none; }  /* hide italic editorial subtitle */
  }

  /* ============ REDUCED MOTION ============ */
    /* Hint compositor that these elements will animate so they get GPU layers */
  .us-origin-ring, .state-pin .pin-ring{ will-change: transform, opacity; }
  @media (prefers-reduced-motion: reduce){
    *{ animation: none !important; transition: none !important; }
    .reveal{ opacity:1; transform: none; }
    .hat-tip{ animation: none !important; }
    .state-pin .pin-ring{ animation: none !important; opacity: 0.4; }
    .us-origin .pin-ring{ animation: none !important; opacity: 0.4; }
    .us-state-pin{ opacity: 1 !important; transform: none !important; }
  }