:root{
      --ink:#3d1c08; --ink2:#4a2410; --ash:#5a3218; --char:#0d0b08; --close:#2b1408;
      --cream:#f3ecde; --cream2:#e5d9c2; --paper:#faf6ec;
      --sand:#c8b18d; --rust:#9c4a24; --copper:#b0763f;
      /* block tones read off logo.png and favicon.png */
      --brass:#c9a25e; --sage:#5e3418; --sage2:#43380f;
      --steel:#4f6c86; --steel2:#24384a; --ice:#8fb4cf;
      --accent:#c9a25e;
      --disp:"Wellfleet",Rockwell,"Roboto Slab",Georgia,"Times New Roman",serif;
      --slab:"Zilla Slab",Rockwell,Georgia,serif;
      --body:"Source Sans 3",-apple-system,"Segoe UI",system-ui,sans-serif;
      --pad:clamp(24px,5.2vw,96px);
      --bar:39px; --hdr:78px; --stack:117px;
      --grain:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='3'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='.42'/%3E%3C/svg%3E");
    }
    *,*::before,*::after{box-sizing:border-box}
    body{margin:0;background:var(--ink);color:var(--cream);font-family:var(--body);
      font-size:17px;line-height:1.62;-webkit-font-smoothing:antialiased;overflow-x:hidden}
    a{color:var(--accent);text-decoration:none}
    a:hover{color:#e2c48c}
    h1,h2,h3,h4{margin:0;font-weight:400;text-wrap:balance}
    p{margin:0}
    img{display:block;max-width:100%}
    ::selection{background:var(--rust);color:var(--paper)}

    /* ---------- primitives ---------- */
    .wrap{max-width:1320px;margin:0 auto;padding-inline:var(--pad)}
    .grain::after{content:"";position:absolute;inset:0;background-image:var(--grain);
      background-size:180px;opacity:.14;mix-blend-mode:overlay;pointer-events:none;z-index:3}
    .eyebrow{font-family:var(--slab);font-size:11.5px;font-weight:600;letter-spacing:.24em;
      text-transform:uppercase;color:var(--accent);display:flex;align-items:center;gap:14px}
    .eyebrow::before{content:"";width:34px;height:1px;background:currentColor;flex:none;opacity:.75}
    .eyebrow.no-rule::before{display:none}
    .disp{font-family:var(--disp);font-weight:400;line-height:1.04;letter-spacing:-.004em}
    .h-xl{font-size:clamp(33px,min(6.2vw,8.6vh),86px)}
    .h-lg{font-size:clamp(31px,4.3vw,60px)}
    .h-md{font-size:clamp(24px,2.9vw,39px)}
    .lede{font-size:clamp(17px,1.35vw,21px);line-height:1.6;color:#d6cbb4;max-width:62ch}
    .dim{color:#b8ab93}
    .on-cream .lede{color:#4a4034}
    .on-cream .dim{color:#6b5f4e}
    .rule{height:1px;background:currentColor;opacity:.16;border:0;margin:0}

    /* archival caption */
    .cap{font-family:var(--slab);font-size:10.5px;letter-spacing:.15em;text-transform:uppercase;
      line-height:1.5;color:#b8a888;display:flex;gap:10px;align-items:flex-start}
    .cap b{font-weight:600;color:var(--accent);flex:none;font-variant-numeric:tabular-nums}
    .sec-cream .cap b,.on-cream .cap b{color:var(--rust)}
    .on-cream .cap{color:#7a6c58}
    .on-cream .stats b{color:var(--rust)}

    .btn{font-family:var(--slab);font-size:12.5px;font-weight:600;letter-spacing:.16em;
      text-transform:uppercase;padding:15px 30px;border:1px solid var(--accent);color:var(--ink);
      background:var(--accent);display:inline-flex;align-items:center;gap:11px;cursor:pointer;
      transition:background .28s ease,color .28s ease,transform .28s ease;min-height:48px}
    .btn:hover{background:#e2c48c;border-color:#e2c48c;color:var(--ink);transform:translateY(-2px)}
    .btn.ghost{background:transparent;color:var(--cream);border-color:#6d6252}
    .btn.ghost:hover{background:rgba(201,162,94,.13);border-color:var(--accent);color:var(--cream)}
    .btn:focus-visible,a:focus-visible,button:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
    .btn svg{width:15px;height:15px;flex:none}

    /* ---------- reveal / motion ---------- */
    @media (scripting:none){
      .rv,.rv-img,.rv-img > *{opacity:1!important;transform:none!important;clip-path:none!important}
      .hero h1 .ln i{transform:none!important}
    }
    .ln-strip:focus-visible{outline:2px solid var(--accent);outline-offset:4px}
    .on-cream :focus-visible,.sec-cream :focus-visible{outline-color:var(--rust)}
    .rv{opacity:0;transform:translateY(30px);transition:opacity .95s cubic-bezier(.16,1,.3,1),transform .95s cubic-bezier(.16,1,.3,1)}
    .rv.in{opacity:1;transform:none}
    .rv-img{overflow:hidden}
    .rv-img > *{clip-path:inset(0 0 100% 0);transform:scale(1.1);
      transition:clip-path 1.25s cubic-bezier(.16,1,.3,1),transform 1.6s cubic-bezier(.16,1,.3,1)}
    .rv-img.in > *{clip-path:inset(0 0 0 0);transform:scale(1)}
    .par{will-change:transform}
    .no-motion .rv,.no-motion .rv-img,.no-motion .rv-img > *{opacity:1;transform:none;clip-path:none;transition:none}
    .no-motion .par{transform:none!important}
    @media (prefers-reduced-motion:reduce){
      .rv,.rv-img,.rv-img > *{opacity:1!important;transform:none!important;clip-path:none!important;transition:none!important}
      .par{transform:none!important}
    }

    .frame{position:relative;overflow:hidden;background:var(--ash)}
    .frame img{width:100%;height:100%;object-fit:cover}

    /* ---------- preview note ---------- */
    .pv{position:fixed;inset:0;z-index:200;display:grid;place-items:center;padding:20px;
      background:rgba(8,6,4,.84);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
      animation:pv-in .45s ease both}
    .pv[hidden]{display:none}
    .pv-card{position:relative;width:min(560px,100%);max-height:calc(100dvh - 40px);overflow-y:auto;
      background:var(--paper);color:#2a2219;padding:clamp(26px,4vw,42px);
      border:1px solid rgba(42,34,25,.16);box-shadow:0 44px 96px -44px rgba(0,0,0,.85);
      scrollbar-width:thin;scrollbar-color:#c9b9a0 transparent;
      animation:pv-rise .6s cubic-bezier(.16,1,.3,1) both}
    .pv-card::-webkit-scrollbar{width:6px}
    .pv-card::-webkit-scrollbar-thumb{background:#c9b9a0}
    .pv-logo{width:min(290px,78%);height:auto;margin:0 auto 16px}
    .pv-card h2{font-family:var(--disp);font-size:clamp(22px,2.6vw,29px);line-height:1.2;
      text-align:center;color:#211a12;margin-bottom:20px}
    .pv-card p{font-size:15.5px;line-height:1.68;color:#4a3f31;margin-bottom:13px}
    .pv-sign{margin-top:22px;padding-top:17px;border-top:1px solid rgba(42,34,25,.16);
      text-align:center;font-family:var(--slab);font-size:12.5px;font-weight:600;
      letter-spacing:.14em;text-transform:uppercase;color:#211a12}
    .pv-sign span{display:block;margin-top:5px;font-weight:400;font-size:10.5px;
      letter-spacing:.16em;color:#7a6c58}
    .pv-go{width:100%;justify-content:center;margin-top:24px}
    .pv-x{position:absolute;top:10px;right:10px;width:34px;height:34px;display:grid;place-items:center;
      background:none;border:0;padding:0;font-size:23px;line-height:1;color:#8a7c66;cursor:pointer;
      transition:color .25s ease}
    .pv-x:hover{color:var(--rust)}
    .pv-lock{overflow:hidden}
    @keyframes pv-in{from{opacity:0}to{opacity:1}}
    @keyframes pv-rise{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:none}}
    @media (prefers-reduced-motion:reduce){.pv,.pv-card{animation:none}}
    @media(max-width:520px){.pv{padding:12px}.pv-card p{font-size:15px}}

    /* ---------- nav ---------- */
    .nav{position:fixed;top:0;left:0;right:0;z-index:60;transition:background .45s ease,border-color .45s ease,backdrop-filter .45s;
      border-bottom:1px solid transparent}
    .nav.stuck{background:rgba(13,11,8,.93);backdrop-filter:blur(14px);border-bottom-color:#33291d}
    .nav-in{max-width:1320px;margin:0 auto;padding:0 var(--pad);height:78px;display:flex;align-items:center;gap:34px}
    .mark{display:flex;align-items:center;line-height:1;margin-right:auto;min-width:0}
    .mark img{display:block;height:62px;width:auto;max-width:100%;object-fit:contain;object-position:left center}
    @media(max-width:560px){.mark img{height:40px}}
    .nav-links{display:flex;gap:clamp(15px,1.7vw,28px);align-items:center}
    .nav-links a{font-family:var(--slab);font-size:11.5px;font-weight:500;letter-spacing:.13em;
      text-transform:uppercase;color:#cdc2ad;position:relative;padding:6px 0;white-space:nowrap}
    .nav-links a::after{content:"";position:absolute;left:0;right:100%;bottom:0;height:1px;
      background:var(--accent);transition:right .35s cubic-bezier(.16,1,.3,1)}
    .nav-links a:hover{color:var(--cream)}
    .nav-links a:hover::after{right:0}
    .nav .btn{padding:11px 20px;font-size:11px;min-height:auto}
    @media(max-width:1140px){.nav-links{display:none}}

    /* ---------- hero ---------- */
    .hero{position:relative;min-height:min(100vh,940px);display:flex;align-items:flex-end;
      overflow:hidden;background:var(--char);
      padding-top:calc(78px + clamp(24px,5vh,64px));
      padding-bottom:clamp(28px,4vw,58px)}
    .hero-bg{position:absolute;inset:-14% 0 -14% 0;z-index:0}
    .hero-bg img{width:100%;height:100%;object-fit:cover;object-position:50% 62%;
      filter:saturate(.52) contrast(1.06) brightness(.66) sepia(.24)}
    .hero-veil{position:absolute;inset:0;z-index:1;
      background:linear-gradient(180deg,rgba(13,11,8,.86) 0%,rgba(13,11,8,.34) 34%,rgba(13,11,8,.72) 72%,rgba(13,11,8,.97) 100%),
        radial-gradient(120% 78% at 22% 62%,rgba(13,11,8,0) 34%,rgba(13,11,8,.82) 100%)}
    .hero-in{position:relative;z-index:4;width:100%;max-width:1320px;margin:0 auto;padding-inline:var(--pad)}
    .hero h1{margin:22px 0 0;max-width:15ch}
    .hero h1 .ln{display:block;overflow:hidden}
    .hero h1 .ln i{display:block;font-style:normal;transform:translateY(105%);
      transition:transform 1.15s cubic-bezier(.16,1,.3,1)}
    .hero.lit h1 .ln i{transform:none}
    .hero h1 em{font-style:normal;color:var(--accent)}
    .hero-sub{margin-top:clamp(16px,2.4vh,26px);max-width:56ch;font-size:clamp(16px,1.2vw,19.5px);color:#cec2ab;line-height:1.62}
    .hero-cta{display:flex;gap:14px;flex-wrap:wrap;margin-top:clamp(20px,3vh,34px)}
    .hero-facts{margin-top:clamp(22px,4vh,58px);padding-top:clamp(14px,2vh,22px);border-top:1px solid rgba(201,162,94,.28);
      display:flex;gap:clamp(20px,3.6vw,58px);flex-wrap:wrap;align-items:baseline}
    .hero-facts div{display:flex;flex-direction:column;gap:5px}
    .hero-facts span{font-family:var(--slab);font-size:10px;letter-spacing:.24em;text-transform:uppercase;color:#9b8f79}
    .hero-facts strong{font-family:var(--disp);font-size:clamp(16px,1.35vw,19.5px);font-weight:400;color:var(--cream)}
    .hero-cap{position:absolute;right:var(--pad);bottom:clamp(28px,4vw,58px);z-index:4;max-width:210px;
      text-align:right;display:none}
    @media(min-width:1080px){.hero-cap{display:block}}
    .hero-cap .cap{justify-content:flex-end;text-align:right}
    .scroller{display:none;position:absolute;left:var(--pad);bottom:0;z-index:5;align-items:center;gap:12px;
      font-family:var(--slab);font-size:9.5px;letter-spacing:.26em;text-transform:uppercase;color:#8d8069;
      transform:translateY(-10px)}
    .scroller i{display:block;width:1px;height:44px;background:linear-gradient(180deg,var(--accent),transparent);
      animation:drop 2.6s ease-in-out infinite}
    @media(min-height:880px) and (min-width:1080px){.scroller{display:flex}}
    @keyframes drop{0%,100%{opacity:.25;transform:scaleY(.4);transform-origin:top}50%{opacity:1;transform:scaleY(1);transform-origin:top}}

    /* ---------- section shells ---------- */
    .sec-cream{background:var(--cream);color:#2a2219;padding:clamp(78px,10vw,150px) 0;position:relative}
    .sec-dark{background:var(--ink);padding:clamp(78px,10vw,150px) 0;position:relative;overflow:hidden}
    .sec-mid{background:var(--sage2);padding:clamp(78px,10vw,150px) 0;position:relative;overflow:hidden}
    .sec-saddle{background:var(--sage)}
    .sec-mid .eyebrow,.sec-saddle .eyebrow{color:#d9b571}
    .sec-steel{background:var(--steel2);color:#dbe6ee;padding:clamp(78px,10vw,150px) 0;position:relative;overflow:hidden}
    .sec-cream .eyebrow{color:var(--rust)}
    .sec-cream h2,.sec-cream h3{color:#211a12}

    /* 02 statement */
    .st-grid{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:clamp(34px,6vw,90px);align-items:start}
    .st-body .lede{max-width:52ch}
    .stats{margin-top:clamp(38px,4.4vw,56px);display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
      gap:26px 30px;border-top:1px solid rgba(42,34,25,.16);padding-top:30px}
    .stats div{display:flex;flex-direction:column;gap:7px}
    /* the three figures and the button run as one line across the section */
    .st-line{margin-top:clamp(38px,4.6vw,64px);border-top:1px solid rgba(243,236,222,.18);
      padding-top:clamp(24px,2.8vw,36px);display:flex;align-items:center;
      justify-content:space-between;gap:clamp(22px,4vw,56px);flex-wrap:wrap}
    .st-line .stats{margin:0;border-top:0;padding-top:0;flex:1 1 0;min-width:0;
      grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(18px,2.6vw,40px)}
    .st-line .btn{flex:none;margin:0}
    @media(max-width:1080px){
      /* button drops below so the three labels keep one line each */
      .st-line{flex-direction:column;align-items:flex-start;gap:clamp(22px,3vw,34px)}
      .st-line .stats{width:100%}
    }
    @media(max-width:620px){
      .st-line .stats{grid-template-columns:repeat(2,minmax(0,1fr));gap:22px 26px}
      .st-line .btn{width:100%;justify-content:center}
    }
    .stats b{font-family:var(--disp);font-size:clamp(29px,3vw,42px);font-weight:400;line-height:1.04;
      color:var(--brass);font-variant-numeric:tabular-nums}
    .stats span{font-family:var(--slab);font-size:10.5px;letter-spacing:.15em;text-transform:uppercase;
      color:#c2b096;line-height:1.5}
    .on-cream .stats span{color:#6b5f4e}

    /* 03 grounds */
    .gr-head{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:clamp(28px,5vw,80px);
      align-items:end;margin-bottom:clamp(44px,6vw,84px)}
    .gr-stage{max-width:1320px;margin:0 auto;padding-inline:var(--pad);display:grid;
      grid-template-columns:repeat(12,1fr);gap:clamp(18px,2.4vw,34px);align-items:start}
    .gr-stage figure{margin:0;display:flex;flex-direction:column;gap:14px}
    .gr-a{grid-column:1/8}
    .gr-b{grid-column:8/13;margin-top:clamp(40px,7vw,120px)}
    .gr-c{grid-column:3/9;margin-top:clamp(-30px,-2vw,0px)}

    /* 04 timeline */
    .tl-outer{position:relative;background:linear-gradient(180deg,var(--ink) 0%,var(--sage) 26%,var(--sage) 74%,var(--ink) 100%)}
    .tl-sticky{padding-block:clamp(64px,8vw,116px)}
    .tl-head{margin-bottom:clamp(30px,3.8vw,52px)}
    /* before the script runs, and for anyone who asked for no motion, this is a plain strip */
    .tl-track{display:flex;gap:clamp(18px,2vw,30px);align-items:stretch;overflow-x:auto;
      scrollbar-width:thin;scrollbar-color:#6a5f4a transparent;
      padding:4px max(var(--pad),calc((100% - 1320px) / 2 + var(--pad))) 22px;
      scroll-padding-inline:max(var(--pad),calc((100% - 1320px) / 2 + var(--pad)))}
    .tl-track::-webkit-scrollbar{height:6px}
    .tl-track::-webkit-scrollbar-track{background:rgba(243,236,222,.08)}
    .tl-track::-webkit-scrollbar-thumb{background:#6a5f4a}
    .tl-track::-webkit-scrollbar-button{width:0;height:0;display:none}
    /* the strip drifts on its own; on desktop the wheel drives it along faster */
    .tl-stage{position:relative;overflow:hidden}
    .tl-track.drive{overflow:visible;width:max-content;padding-inline:0;
      cursor:default;will-change:transform}
    /* and either way the two arrows hand control back to the reader */
    .tl-arm{display:none;position:absolute;top:50%;transform:translateY(-50%);z-index:2;
      width:clamp(38px,3.2vw,46px);aspect-ratio:1;place-items:center;padding:0;
      background:rgba(13,11,8,.62);border:1px solid rgba(201,162,94,.42);
      color:var(--cream);cursor:pointer;-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);
      transition:background .28s ease,border-color .28s ease,color .28s ease}
    .tl-outer.armed .tl-arm{display:grid}
    .tl-arm:hover{background:var(--accent);border-color:var(--accent);color:var(--char)}
    .tl-arm svg{width:17px;height:17px}
    .tl-prev{left:clamp(10px,1.2vw,20px)}
    .tl-next{right:clamp(10px,1.2vw,20px)}
    .tl-card{flex:0 0 clamp(268px,25vw,352px);background:rgba(243,236,222,.045);
      border:1px solid rgba(243,236,222,.12);border-top:2px solid rgba(201,162,94,.42);
      padding:clamp(22px,2vw,32px);display:flex;flex-direction:column;gap:12px;
      transition:background .4s ease,border-color .4s ease,transform .4s ease}
    .tl-card:hover{background:rgba(243,236,222,.08);border-top-color:var(--accent);transform:translateY(-5px)}
    .tl-card.hi{background:rgba(201,162,94,.09);border-top-color:var(--accent)}
    .tl-card b{font-family:var(--disp);font-size:clamp(26px,2.5vw,37px);font-weight:400;line-height:1.04;
      color:var(--accent);font-variant-numeric:tabular-nums}
    .tl-card h3{font-family:var(--slab);font-size:15px;font-weight:600;letter-spacing:.05em;
      text-transform:uppercase;color:var(--cream)}
    .tl-card p{font-size:15.5px;line-height:1.6;color:#b8ad97}

    /* 05 people */
    .pe-head{max-width:70ch;margin-bottom:clamp(44px,5.6vw,78px)}
    .pe-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(20px,2.4vw,34px);align-items:start}
    .pe-card{margin:0;background:var(--paper);border:1px solid rgba(42,34,25,.1);
      display:flex;flex-direction:column;transition:transform .5s cubic-bezier(.16,1,.3,1),box-shadow .5s ease}
    .pe-card:hover{transform:translateY(-6px);box-shadow:0 26px 54px -30px rgba(42,34,25,.5)}
    .pe-tall{grid-row:span 2;background:var(--sage);color:#f2e7d6;border-color:transparent}
    .pe-quiet{padding:clamp(26px,2.6vw,40px);display:flex;flex-direction:column;gap:16px;height:100%}
    .pe-quiet .cap{color:#cbb99a}
    .pe-quiet .cap b{color:#dcb877}
    .pe-quiet h3{color:#f5ecdc}
    .pe-quiet p{font-size:16.5px;line-height:1.68;color:#e0d3bd}
    .pe-note{margin-top:auto;padding-top:18px;border-top:1px solid rgba(242,231,214,.22);
      font-family:var(--slab);font-size:11px;letter-spacing:.13em;text-transform:uppercase;color:var(--sand)}
    .pe-txt{padding:clamp(22px,2.2vw,30px);display:flex;flex-direction:column;gap:11px}
    .pe-txt h3{font-size:clamp(19px,1.7vw,25px);line-height:1.16}
    .pe-txt p{font-size:15.5px;line-height:1.62;color:#514637}

    /* 06 housework */
    .hw{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:clamp(34px,5vw,84px);align-items:center}
    .hw-imgs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(14px,1.6vw,22px)}

    /* 07 the line */
    .ln-head{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(28px,5vw,80px);
      align-items:end;margin-bottom:clamp(40px,5vw,70px)}
    .ln-strip{display:flex;gap:clamp(18px,2vw,30px);overflow-x:auto;
      padding:4px max(var(--pad),calc((100% - 1320px) / 2 + var(--pad))) 26px;
      scroll-snap-type:x mandatory;scrollbar-width:thin;scrollbar-color:#4a4234 transparent}
    .ln-strip::-webkit-scrollbar{height:6px}
    .ln-strip::-webkit-scrollbar-thumb{background:#4a4234}
    .ln-item{flex:0 0 clamp(300px,34vw,470px);margin:0;scroll-snap-align:start;
      display:flex;flex-direction:column;gap:16px}
    .ln-item figcaption{display:flex;flex-direction:column;gap:11px}
    .ln-item blockquote{margin:0;font-family:var(--disp);font-size:clamp(16px,1.35vw,19px);line-height:1.5;
      color:#e2d8c3;font-style:normal}
    .ln-item cite{font-family:var(--slab);font-size:10px;letter-spacing:.2em;text-transform:uppercase;
      font-style:normal;color:#9b9078}

    /* 08 rooms */
    .rm-head{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:clamp(24px,4vw,70px);
      align-items:end;margin-bottom:clamp(38px,4.6vw,64px)}
    .rm-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(18px,2vw,28px)}
    .rm{display:flex;flex-direction:column;background:var(--paper);border:1px solid rgba(42,34,25,.1);
      color:inherit;transition:transform .5s cubic-bezier(.16,1,.3,1),box-shadow .5s ease,border-color .4s}
    .rm .frame{aspect-ratio:16/10}
    .rm .frame img{transition:transform 1.1s cubic-bezier(.16,1,.3,1);filter:saturate(.82) contrast(1.03)}
    .rm:hover{transform:translateY(-7px);box-shadow:0 30px 58px -34px rgba(42,34,25,.55);border-color:rgba(156,74,36,.4)}
    .rm:hover .frame img{transform:scale(1.07)}
    .rm-b{padding:clamp(20px,2vw,28px);display:flex;flex-direction:column;gap:10px;flex:1}
    .rm-b h3{font-size:clamp(19px,1.6vw,23.5px);line-height:1.18}
    .rm-b p{font-size:15px;line-height:1.6;color:#564a3a;flex:1}
    .rm-b span{font-family:var(--slab);font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;
      color:var(--rust);margin-top:4px}

    /* 09 yucca */
    .yu-bg{position:absolute;inset:-10% 0;z-index:0;opacity:.13}
    .yu-bg img{width:100%;height:100%;object-fit:cover;filter:grayscale(.5) contrast(1.1)}
    .yu-in{position:relative;z-index:2;display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);
      gap:clamp(34px,5vw,80px);align-items:center}
    .yu-years{margin-top:clamp(32px,3.6vw,46px);display:flex;gap:clamp(24px,3.4vw,54px);flex-wrap:wrap;
      border-top:1px solid rgba(143,180,207,.28);padding-top:26px}
    .yu-years div{display:flex;flex-direction:column;gap:6px}
    .yu-years b{font-family:var(--disp);font-size:clamp(24px,2.35vw,34px);font-weight:400;color:var(--ice);
      line-height:1;font-variant-numeric:tabular-nums}
    .yu-years span{font-family:var(--slab);font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:#a3bacb}

    /* 10 visit */
    .vi{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(34px,5vw,86px);align-items:center}
    .vi-rows{margin-top:clamp(30px,3.4vw,44px);display:flex;flex-direction:column}
    .vi-row{display:grid;grid-template-columns:130px minmax(0,1fr);gap:20px;padding:17px 0;
      border-top:1px solid rgba(243,236,222,.13);align-items:baseline}
    .vi-row:last-child{border-bottom:1px solid rgba(243,236,222,.13)}
    .vi-row span{font-family:var(--slab);font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;color:#b8a888}
    .vi-row b{font-weight:400;font-size:16.5px;color:var(--cream)}
    .vi-cta{display:flex;gap:14px;flex-wrap:wrap;margin-top:clamp(28px,3vw,38px)}
    .vi-img{margin:0;display:flex;flex-direction:column;gap:14px}

    /* 11 close */
    .close{position:relative;overflow:hidden;padding:clamp(90px,12vw,180px) 0;text-align:center;background:var(--close)}
    .close-bg{position:absolute;inset:-14% 0;z-index:0}
    .close-bg img{width:100%;height:100%;object-fit:cover;object-position:50% 55%;
      filter:saturate(.4) brightness(.42) sepia(.3) contrast(1.05)}
    .close-veil{position:absolute;inset:0;z-index:1;
      background:radial-gradient(90% 78% at 50% 52%,rgba(13,11,8,.5) 0%,rgba(13,11,8,.93) 78%)}
    .close-in{position:relative;z-index:4;display:flex;flex-direction:column;align-items:center}
    .close-in h2{max-width:16ch}
    .close-in em{font-style:normal;color:var(--accent)}
    .close-cta{display:flex;gap:14px;flex-wrap:wrap;justify-content:center;margin-top:clamp(30px,3.4vw,44px)}

    /* footer */
    .ft{background:var(--char);border-top:1px solid #2a231a;padding:clamp(50px,6vw,84px) 0 clamp(34px,4vw,52px)}
    .ft-in{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.3fr);gap:clamp(30px,5vw,80px)}
    .ft-mark{display:flex;flex-direction:column;align-items:flex-start}
    .ft-mark img{display:block;width:min(310px,100%);height:auto}
    .ft-nav{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px 20px;align-content:start}
    .ft-nav a{font-family:var(--slab);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:#a99b83}
    .ft-nav a:hover{color:var(--accent)}
    /* the credit rides in the right column, bottom-aligned, so it lands level
       with the phone and email line on the left */
    .ft-end{grid-column:2;grid-row:1;align-self:end;justify-self:end;text-align:right}
    .ft-nav{grid-column:2;grid-row:1;align-self:start}

    /* ---------- responsive ---------- */
    @media(max-width:1080px){
      .st-grid,.gr-head,.ln-head,.rm-head,.hw,.yu-in,.vi,.ft-in{grid-template-columns:minmax(0,1fr)}
      .ft-nav,.ft-end{grid-column:1;grid-row:auto;justify-self:start;text-align:left}
      .gr-a{grid-column:1/10}.gr-b{grid-column:5/13;margin-top:0}.gr-c{grid-column:1/9;margin-top:0}
      .pe-grid,.rm-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
      .pe-tall{grid-row:auto;grid-column:1/-1}
      .ft-nav{grid-template-columns:repeat(3,minmax(0,1fr))}
    }
    @media(max-width:720px){
      body{font-size:16px}
      .sec-cream,.sec-dark,.sec-mid,.sec-steel{padding:clamp(50px,13vw,80px) 0}
      .tl-head{margin-bottom:26px}
      .tl-sticky{padding-block:clamp(46px,12vw,74px)}
      .tl-card{flex-basis:min(78vw,320px)}
      .hero{min-height:640px}
      .gr-stage{grid-template-columns:minmax(0,1fr)}
      .gr-a,.gr-b,.gr-c{grid-column:auto;margin-top:0}
      .pe-grid,.rm-grid,.hw-imgs,.stats{grid-template-columns:minmax(0,1fr)}
      .hw-imgs .frame:last-child{grid-column:auto}
      .vi-row{grid-template-columns:minmax(0,1fr);gap:5px}
      /* footer: one left edge for everything, and room to read the address */
      .ft{padding:clamp(44px,11vw,64px) 0 36px}
      .ft-in{gap:26px}
      .ft .cap{font-size:11px;letter-spacing:.1em;line-height:1.85}
      .ft .cap b{display:none}
      .ft-mark .cap{max-width:none!important}
      .ft-nav{grid-template-columns:repeat(2,minmax(0,1fr));gap:15px 18px;
        padding-top:26px;border-top:1px solid #241d16}
      .ft-end{padding-top:22px;border-top:1px solid #241d16}
      .ft-end .cap{margin-top:0!important}
      .btn{width:100%;justify-content:center}
      .nav .btn{width:auto;padding:11px 18px}
      .hero-cta .btn,.close-cta .btn,.vi-cta .btn{width:auto;flex:1 1 auto}
    }
  
    /* ---- site chrome: mobile nav, skip link ---- */
    .burger{display:none;width:46px;height:46px;border:1px solid #4b4234;background:transparent;
      flex-direction:column;gap:4px;align-items:center;justify-content:center;cursor:pointer;flex:none}
    .burger i{display:block;width:18px;height:1.5px;background:var(--cream);transition:transform .3s,opacity .3s}
    .nav.open .burger i:nth-child(1){transform:translateY(5.5px) rotate(45deg)}
    .nav.open .burger i:nth-child(2){opacity:0}
    .nav.open .burger i:nth-child(3){transform:translateY(-5.5px) rotate(-45deg)}
    .drawer{position:fixed;inset:78px 0 auto 0;max-height:calc(100vh - 78px);overflow-y:auto;
      background:rgba(13,11,8,.985);padding:22px var(--pad) 34px;display:none;flex-direction:column;
      border-bottom:1px solid #33291d;z-index:59}
    .nav.open .drawer{display:flex}
    .drawer a{font-family:var(--disp);font-size:23px;color:var(--cream);padding:12px 0;border-bottom:1px solid #2a231a}
    /* the drawer CTA is a button, not a nav link, so it keeps the slab face and its own weight */
    .drawer a.btn{font-family:var(--slab);font-size:12.5px;border-bottom:0}
    .drawer a:last-of-type{border-bottom:0}
    .drawer .btn{margin-top:20px;justify-content:center}
    .skip{position:fixed;left:var(--pad);top:-70px;z-index:99;background:var(--accent);color:var(--ink);
      padding:13px 22px;font-family:var(--slab);font-size:12px;letter-spacing:.14em;text-transform:uppercase;transition:top .2s}
    .skip:focus{top:12px;color:var(--ink)}
    .nav-links a[aria-current="page"]{color:var(--cream)}
    .nav-links a[aria-current="page"]::after{right:0}
    @media(max-width:1140px){.burger{display:flex}
      .nav.open{background:rgba(13,11,8,.97);backdrop-filter:blur(14px)}}
    @media(max-width:560px){.nav-cta{display:none}}

    /* ---- interior page hero ---- */
    .phero{position:relative;min-height:clamp(380px,52vh,560px);display:flex;align-items:flex-end;
      overflow:hidden;background:var(--char);padding-bottom:clamp(34px,4vw,60px);padding-top:120px}
    .phero-bg{position:absolute;inset:-10% 0}
    .phero-bg img{width:100%;height:100%;object-fit:cover;filter:saturate(.5) brightness(.5) sepia(.24) contrast(1.05)}
    .phero-veil{position:absolute;inset:0;background:linear-gradient(180deg,rgba(13,11,8,.9) 0%,rgba(13,11,8,.45) 40%,rgba(13,11,8,.95) 100%)}
    .phero-in{position:relative;z-index:4;width:100%;max-width:1320px;margin:0 auto;padding-inline:var(--pad)}
    .phero h1{margin:20px 0 0;max-width:17ch}
    .phero p{margin-top:20px;max-width:56ch;font-size:clamp(16px,1.2vw,19px);color:#cec2ab}
    .crumb{font-family:var(--slab);font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;color:#9b8f79}
    .crumb a{color:#9b8f79}.crumb a:hover{color:var(--accent)}

    /* ---- prose + interior blocks ---- */
    .prose{max-width:68ch}
    .prose p+p{margin-top:18px}
    .prose h3{font-family:var(--disp);font-size:clamp(21px,2.05vw,29px);margin-top:44px;margin-bottom:14px;line-height:1.16}
    .two{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:clamp(34px,5vw,84px);align-items:start}
    .figs{display:flex;flex-direction:column;gap:26px}
    .figs figure{margin:0;display:flex;flex-direction:column;gap:13px}
    .band{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(18px,2.2vw,30px)}
    .obj{margin:0;display:flex;flex-direction:column;gap:13px}
    .qa{border-top:1px solid rgba(243,236,222,.13);padding:22px 0;display:grid;
      grid-template-columns:minmax(0,220px) minmax(0,1fr);gap:26px}
    .on-cream .qa{border-top-color:rgba(42,34,25,.16)}
    .qa h3{font-family:var(--slab);font-size:13px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--accent)}
    .on-cream .qa h3{color:var(--rust)}
    .qa p{font-size:16px;line-height:1.66;max-width:60ch}
    .pagenav{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:#2a231a;border-top:1px solid #2a231a}
    .pagenav a{background:var(--char);padding:clamp(28px,3.4vw,48px) var(--pad);display:flex;flex-direction:column;gap:9px;
      transition:background .3s}
    .pagenav a:hover{background:#171310}
    .pagenav span{font-family:var(--slab);font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:#9b9078}
    .pagenav b{font-family:var(--disp);font-weight:400;font-size:clamp(19px,1.85vw,26px);color:var(--cream)}
    .pagenav a:last-child{text-align:right;align-items:flex-end}
    @media(max-width:900px){.two{grid-template-columns:minmax(0,1fr)}.band{grid-template-columns:minmax(0,1fr)}
      .qa{grid-template-columns:minmax(0,1fr);gap:8px}.pagenav{grid-template-columns:1fr}
      .pagenav a:last-child{text-align:left;align-items:flex-start}}

    /* ================= MUSEUM FRONT DOOR ================= */

    /* utility bar: hours, admission, address, live open/closed */
    .util{position:fixed;top:0;left:0;right:0;z-index:61;background:#0a0806;
      border-bottom:1px solid #2a231a;height:var(--bar);display:flex;align-items:center}
    .util-in{max-width:1320px;margin:0 auto;padding-inline:var(--pad);width:100%;
      display:flex;align-items:center;gap:clamp(14px,2.2vw,30px);
      font-family:var(--slab);font-size:10.5px;font-weight:500;letter-spacing:.15em;
      text-transform:uppercase;color:#9b9078;height:100%}
    .util-in a{color:#9b9078}
    .util-in a:hover{color:var(--accent)}
    .util .sep{opacity:.32}
    .util .push{margin-left:auto}
    .status{display:inline-flex;align-items:center;gap:9px;color:var(--cream);white-space:nowrap}
    .dot{width:7px;height:7px;border-radius:50%;background:#6ea877;flex:none;
      box-shadow:0 0 0 3px rgba(110,168,119,.2)}
    .dot.shut{background:#c2653c;box-shadow:0 0 0 3px rgba(194,101,60,.2)}
    .util .hide-sm{display:inline}
    @media(max-width:860px){.util .hide-sm,.util .sep{display:none}
      .util-in{gap:14px;font-size:9.5px;letter-spacing:.12em}}

    .nav{top:var(--bar)}
    .drawer{inset:var(--stack) 0 auto 0;max-height:calc(100vh - var(--stack))}
    .hero{padding-top:calc(var(--stack) + clamp(20px,4.5vh,54px))}
    .phero{padding-top:calc(var(--stack) + clamp(24px,4vh,48px))}
    .skip{top:-70px}

    /* hero visit card */
    .hero-in{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:clamp(24px,4vw,64px);align-items:end}
    .hero-copy{min-width:0}
    .vcard{background:var(--cream);color:#241d15;padding:clamp(20px,1.9vw,27px);width:clamp(248px,21vw,296px);
      border-top:3px solid var(--rust);box-shadow:0 30px 70px -34px rgba(0,0,0,.8)}
    .vcard h2{font-family:var(--slab);font-size:11px;font-weight:600;letter-spacing:.2em;
      text-transform:uppercase;color:var(--rust);margin-bottom:16px}
    .vnote{font-size:15px;line-height:1.58;color:#3f3527}
    .vcard .btn{width:100%;justify-content:center;margin-top:20px;background:var(--ink);
      border-color:var(--ink);color:var(--cream)}
    .vcard .btn:hover{background:var(--rust);border-color:var(--rust);color:var(--paper);transform:none}
    @media(max-width:1080px){
      .hero-in{grid-template-columns:minmax(0,1fr)}
      .vcard{width:100%;max-width:none}
    }


    /* on view */
    .ov-head{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);
      gap:clamp(18px,3vw,60px);align-items:end;margin-bottom:clamp(32px,4vw,56px)}
    .ov-head .lede{justify-self:end}
    .ov-head.ov-center{grid-template-columns:minmax(0,1fr);justify-items:center;text-align:center;
      gap:clamp(12px,1.4vw,18px)}
    .ov-head.ov-center .lede{justify-self:center;margin-inline:auto}
    .ov-head.ov-center .eyebrow{justify-content:center}
    @media(max-width:900px){.ov-head{grid-template-columns:minmax(0,1fr)}
      .ov-head .lede{justify-self:start}}
    .ov-grid{display:grid;grid-template-columns:repeat(12,1fr);gap:clamp(18px,2.2vw,30px)}
    .ov{display:flex;flex-direction:column;background:var(--paper);border:1px solid rgba(42,34,25,.11);
      color:inherit;transition:transform .5s cubic-bezier(.16,1,.3,1),box-shadow .5s,border-color .4s}
    .ov:hover{transform:translateY(-7px);box-shadow:0 30px 58px -34px rgba(42,34,25,.5);
      border-color:rgba(156,74,36,.4)}
    .ov .frame{aspect-ratio:16/10;overflow:hidden}
    .ov .frame img{transition:transform 1.1s cubic-bezier(.16,1,.3,1);filter:saturate(.84) contrast(1.03)}
    .ov:hover .frame img{transform:scale(1.06)}
    .ov-b{padding:clamp(20px,2vw,28px);display:flex;flex-direction:column;gap:10px;flex:1}
    .tag{align-self:flex-start;font-family:var(--slab);font-size:9.5px;font-weight:600;letter-spacing:.18em;
      text-transform:uppercase;color:var(--rust);border:1px solid rgba(156,74,36,.35);padding:5px 10px}
    .ov-b h3{font-family:var(--disp);font-size:clamp(19px,1.7vw,25px);line-height:1.16;color:#211a12}
    .ov-b p{font-size:15px;line-height:1.6;color:#564a3a;flex:1}
    .ov-b .where{font-family:var(--slab);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;
      color:#7a6c58;padding-top:12px;border-top:1px solid rgba(42,34,25,.13)}
    .ov-lead{grid-column:span 6}
    .ov-half{grid-column:span 6}
    .ov-third{grid-column:span 4}
    @media(max-width:980px){.ov-lead,.ov-half,.ov-third{grid-column:span 6}}
    @media(max-width:640px){.ov-lead,.ov-half,.ov-third{grid-column:1/-1}}

    /* plan your visit: three practical columns */
    .plan-head{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.02fr);
      gap:clamp(28px,5vw,80px);align-items:center}
    .plan-head .frame{aspect-ratio:16/9}
    .plan{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(24px,3.4vw,54px)}
    .plan section{display:flex;flex-direction:column;gap:14px}
    .plan h3{font-family:var(--slab);font-size:11px;font-weight:600;letter-spacing:.2em;
      text-transform:uppercase;color:var(--accent);padding-bottom:14px;
      border-bottom:1px solid rgba(243,236,222,.16)}
    .plan dl{margin:0;display:flex;flex-direction:column;gap:12px}
    .plan dt{font-family:var(--slab);font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;color:#9b9078}
    .plan dd{margin:2px 0 0;font-size:16px;line-height:1.5;color:var(--cream)}
    .plan p{font-size:15.5px;line-height:1.62;color:#c2b7a1}
    @media(max-width:900px){.plan{grid-template-columns:minmax(0,1fr)}
      .plan-head{grid-template-columns:minmax(0,1fr);gap:32px}}

    /* what's on */
    .ev{display:grid;grid-template-columns:minmax(0,132px) minmax(0,1fr) auto;gap:clamp(18px,2.6vw,40px);
      align-items:baseline;padding:clamp(22px,2.4vw,30px) 0;border-top:1px solid rgba(42,34,25,.16)}
    .ev:last-of-type{border-bottom:1px solid rgba(42,34,25,.16)}
    .ev .when{font-family:var(--disp);font-size:clamp(17px,1.55vw,22px);line-height:1.18;color:var(--rust)}
    .ev .when small{display:block;font-family:var(--slab);font-size:9.5px;letter-spacing:.16em;
      text-transform:uppercase;color:#7a6c58;margin-top:6px}
    .ev h3{font-family:var(--disp);font-size:clamp(18px,1.65vw,23px);line-height:1.2;color:#211a12}
    .ev p{font-size:15px;line-height:1.6;color:#564a3a;margin-top:8px;max-width:62ch}
    .ev .go{font-family:var(--slab);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;
      color:var(--rust);white-space:nowrap}
    .tbc{background:rgba(156,74,36,.09);border:1px dashed rgba(156,74,36,.45);color:var(--rust);
      font-family:var(--slab);font-size:10px;letter-spacing:.13em;text-transform:uppercase;padding:3px 8px;
      display:inline-block}
    @media(max-width:760px){.ev{grid-template-columns:minmax(0,1fr);gap:8px}
      .ev .when{display:flex;align-items:baseline;gap:12px}
      .ev .when small{margin-top:0}}

    /* teaser strip */
    .tease{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(18px,2.2vw,30px)}
    .tz{margin:0;display:flex;flex-direction:column;gap:14px;color:inherit}
    .tz h3{font-family:var(--disp);font-size:clamp(18px,1.65vw,23px);line-height:1.2;color:var(--cream)}
    .tz p{font-size:15px;line-height:1.6;color:#b8ad97}
    .tz .go{font-family:var(--slab);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--accent)}
    .tz .frame{aspect-ratio:4/3;overflow:hidden}
    .tz .frame img{transition:transform 1.1s cubic-bezier(.16,1,.3,1)}
    .tz:hover .frame img{transform:scale(1.05)}
    @media(max-width:820px){.tease{grid-template-columns:minmax(0,1fr)}}

    :target{scroll-margin-top:calc(var(--stack) + 20px)}
    html{scroll-padding-top:calc(var(--stack) + 20px)}