/* Base reset (the page skeleton) */
html{color-scheme:light}body{margin:0}img{max-width:100%}[hidden]{display:none!important}
:root{padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}

/* Layout: editorial salon menu card. Big serif hero beside a framed before/after, a printed price menu with dotted leaders, gold hairlines as the only ornament. */
:root{
  --paper:#ffffff;
  --paper-2:#f7f5f0;
  --ink:#141210;
  --ink-soft:#5b554c;
  --gold:#b8965a;
  --gold-ink:#8a6a32;
  --line:#e4ddcf;
  --on-gold:#141210;
  --display:"Cormorant Garamond","Cormorant",Garamond,"Times New Roman",serif;
  --body:"Jost","Futura","Avenir Next","Helvetica Neue",Arial,sans-serif;
  --wrap:1180px;
}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){
  --paper:#0f0e0c;--paper-2:#191714;--ink:#f3eee4;--ink-soft:#b3aa9b;--gold:#c9a76a;--gold-ink:#d8b97f;--line:#2e2a24;--on-gold:#141210;color-scheme:dark}}
:root[data-theme="dark"]{
  --paper:#0f0e0c;--paper-2:#191714;--ink:#f3eee4;--ink-soft:#b3aa9b;--gold:#c9a76a;--gold-ink:#d8b97f;--line:#2e2a24;--on-gold:#141210;color-scheme:dark}

*{box-sizing:border-box}
[hidden]{display:none!important}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion: reduce){html{scroll-behavior:auto}*{animation:none!important;transition:none!important}}
body{background:var(--paper);color:var(--ink);font-family:var(--body);font-size:16px;line-height:1.6;font-weight:400;-webkit-font-smoothing:antialiased}
a{color:inherit}
:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
.wrap{max-width:var(--wrap);margin-inline:auto;padding-inline:clamp(16px,4vw,40px)}
h1,h2,h3{font-family:var(--display);font-weight:500;line-height:1.05;margin:0;text-wrap:balance}
.eyebrow{font-size:.74rem;letter-spacing:.22em;text-transform:uppercase;font-weight:500;color:var(--gold-ink)}
.btn{display:inline-flex;align-items:center;gap:.6em;font-family:var(--body);font-size:.82rem;font-weight:500;letter-spacing:.16em;text-transform:uppercase;text-decoration:none;padding:1em 1.7em;border:1px solid var(--ink);background:var(--ink);color:var(--paper);transition:background .2s,color .2s,border-color .2s;cursor:pointer}
.btn:hover{background:var(--gold);border-color:var(--gold);color:var(--on-gold)}
.btn.ghost{background:transparent;color:var(--ink)}
.btn.ghost:hover{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.btn svg{width:14px;height:14px}

/* Header */
header.top{position:sticky;top:env(safe-area-inset-top,0px);z-index:20;background:color-mix(in srgb,var(--paper) 92%,transparent);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.top .wrap{display:flex;align-items:center;justify-content:space-between;gap:16px;padding-block:14px}
.mark{font-family:var(--display);font-size:1.45rem;font-weight:600;letter-spacing:.04em;text-decoration:none;white-space:nowrap;display:inline-flex;align-items:center;gap:10px}
.mark img{width:40px;height:auto;flex:none}
.mark em{font-style:italic;color:var(--gold);font-weight:500}
nav.links{display:flex;gap:28px;font-size:.8rem;letter-spacing:.16em;text-transform:uppercase}
nav.links a{text-decoration:none;color:var(--ink-soft)}
nav.links a:hover{color:var(--ink)}
.top .btn{padding:.8em 1.3em}
@media (max-width:860px){nav.links{display:none}}
@media (max-width:420px){.mark{font-size:1.2rem}.top .btn{padding:.75em 1em;letter-spacing:.1em}}

/* Hero */
.hero{padding-block:clamp(40px,7vw,96px) clamp(48px,7vw,88px)}
.hero .wrap{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(32px,6vw,80px);align-items:center}
.hero-copy{min-width:0;display:flex;flex-direction:column;gap:26px}
.hero h1{font-size:clamp(3rem,7.4vw,6.2rem);letter-spacing:-.01em;font-weight:500}
.hero h1 .amp{font-style:italic;color:var(--gold);font-weight:400}
.hero h1 .it{font-style:italic;font-weight:400}
.hero .lede{font-size:1.12rem;color:var(--ink-soft);max-width:34em;margin:0;font-weight:300}
.hero .lede strong{color:var(--ink);font-weight:500}
.cta-row{display:flex;flex-wrap:wrap;gap:12px;align-items:center}
.status{display:inline-flex;align-items:center;gap:10px;font-size:.88rem;color:var(--ink-soft)}
.dot{width:8px;height:8px;border-radius:50%;background:var(--ink-soft);flex:none}
.dot.open{background:#3d9a62;box-shadow:0 0 0 4px color-mix(in srgb,#3d9a62 22%,transparent)}
.frame{position:relative;min-width:0}
.frame img{display:block;width:100%;aspect-ratio:1/1;object-fit:cover;max-width:100%}
.frame::before{content:"";position:absolute;inset:-14px 14px 14px -14px;border:1px solid var(--gold);pointer-events:none}
.frame figcaption{position:absolute;left:0;bottom:-34px;font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-soft)}
.frame .tag{position:absolute;top:12px;padding:.35em .8em;font-size:.7rem;letter-spacing:.18em;text-transform:uppercase;background:var(--paper);color:var(--ink)}
.frame .tag.b{left:12px}.frame .tag.a{right:12px;background:var(--gold);color:var(--on-gold)}
@media (max-width:860px){.hero .wrap{grid-template-columns:1fr}.frame{margin-inline:14px 0}}

/* Promise strip */
.promise{border-block:1px solid var(--line);background:var(--paper-2)}
.promise ul{list-style:none;margin:0;padding-block:26px;display:grid;grid-template-columns:repeat(5,1fr);gap:20px}
.promise li{min-width:0;display:flex;flex-direction:column;gap:4px}
.promise b{font-family:var(--display);font-size:1.28rem;font-weight:600;line-height:1.15}
.promise span{font-size:.86rem;color:var(--ink-soft)}
@media (max-width:980px){.promise ul{grid-template-columns:repeat(2,1fr)}.promise li:last-child{grid-column:1/-1}}
@media (max-width:480px){.promise ul{grid-template-columns:1fr}}

/* Section heads */
section.block{padding-block:clamp(56px,8vw,110px)}
.head{display:grid;grid-template-columns:1fr 1fr;gap:24px 60px;align-items:end;margin-bottom:44px}
.head h2{font-size:clamp(2.4rem,5vw,3.8rem)}
.head h2 em{color:var(--gold);font-weight:400}
.head p{margin:0;color:var(--ink-soft);max-width:36em}
.head > div{display:flex;flex-direction:column;gap:14px;min-width:0}
@media (max-width:760px){.head{grid-template-columns:1fr}}

/* Menu */
.tabs{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:36px}
.tabs button{font-family:var(--body);font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;padding:.75em 1.15em;border:1px solid var(--line);background:transparent;color:var(--ink-soft);cursor:pointer;transition:all .2s}
.tabs button:hover{border-color:var(--ink);color:var(--ink)}
.tabs button[aria-selected="true"]{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.menu{display:grid;grid-template-columns:1fr 1fr;gap:0 64px}
.menu-intro{grid-column:1/-1;display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px 24px;align-items:baseline;padding-bottom:18px;border-bottom:1px solid var(--ink);margin-bottom:6px}
.menu-intro h3{font-size:2rem}
.menu-intro p{margin:0;color:var(--ink-soft);font-size:.92rem;max-width:40em}
.item{min-width:0;padding-block:18px;border-bottom:1px solid var(--line);display:flex;flex-direction:column;gap:6px}
.item .row{display:flex;align-items:baseline;gap:10px}
.item .name{font-family:var(--display);font-size:1.3rem;font-weight:600;line-height:1.2}
.item .lead{flex:1;border-bottom:1px dotted color-mix(in srgb,var(--ink-soft) 60%,transparent);transform:translateY(-5px);min-width:16px}
.item .price{font-variant-numeric:tabular-nums;font-weight:500;white-space:nowrap;font-size:1rem}
.item .note{margin:0;font-size:.88rem;color:var(--ink-soft);max-width:44em}
.item .book{align-self:flex-start;font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;color:var(--gold-ink);text-decoration:none;border-bottom:1px solid currentColor;padding-bottom:1px;margin-top:2px}
.item .book:hover{color:var(--ink)}
.menu-foot{margin-top:28px;font-size:.84rem;color:var(--ink-soft)}
@media (max-width:860px){.menu{grid-template-columns:1fr}}

/* Shop */
.shop{background:var(--paper-2);border-block:1px solid var(--line)}
.ship{display:flex;flex-wrap:wrap;gap:10px 28px;margin:0 0 30px;padding:0;list-style:none;font-size:.86rem;color:var(--ink-soft)}
.ship li{display:flex;align-items:center;gap:8px}
.ship li::before{content:"";width:6px;height:6px;background:var(--gold);transform:rotate(45deg);flex:none}
.pgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:14px}
.prod{min-width:0;background:var(--paper);border:1px solid var(--line);display:flex;flex-direction:column}
.prod .ph{aspect-ratio:1/1;background:var(--paper-2);overflow:hidden;display:flex;align-items:center;justify-content:center}
.prod .ph img{width:100%;height:100%;object-fit:cover;display:block;max-width:100%}
.prod .ph.art{background:radial-gradient(circle at 50% 45%,color-mix(in srgb,var(--gold) 16%,var(--paper)) 0,var(--paper-2) 70%)}
.prod .ph svg{width:58%;height:auto;fill:none;stroke:var(--gold-ink);stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.prod .body{padding:16px 16px 16px;display:flex;flex-direction:column;gap:6px;flex:1}
.prod .cat{font-size:.66rem;letter-spacing:.18em;text-transform:uppercase;color:var(--gold-ink)}
.prod h3{font-size:1.28rem;font-weight:600;line-height:1.15}
.prod .note{margin:0;font-size:.84rem;color:var(--ink-soft)}
.prod .price{font-variant-numeric:tabular-nums;font-weight:500;font-size:1.08rem;margin-top:auto;padding-top:8px}
.prod .ful{font-size:.7rem;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-soft);margin-top:4px}
.prod select{width:100%;font-family:var(--body);font-size:.88rem;padding:.6em .7em;border:1px solid var(--line);background:var(--paper);color:var(--ink);border-radius:0;cursor:pointer}
.prod select:focus-visible{outline:2px solid var(--gold);outline-offset:1px}
.prod .buy{font-family:var(--body);font-size:.76rem;font-weight:500;letter-spacing:.16em;text-transform:uppercase;padding:.95em 1em;background:var(--ink);color:var(--paper);border:0;cursor:pointer;margin-top:4px}
.prod .buy:hover{background:var(--gold);color:var(--on-gold)}
@media (max-width:640px){.prod .ph{aspect-ratio:16/9}.prod .ph svg{width:30%}}
.prod .buy-msg{margin:0;font-size:.8rem;color:var(--gold-ink)}
.shop-note{margin-top:28px;display:flex;flex-wrap:wrap;gap:16px 32px;align-items:center;justify-content:space-between;padding:22px clamp(18px,3vw,32px);border:1px solid var(--line);background:var(--paper)}
.shop-note p{margin:0;max-width:44em;color:var(--ink-soft);font-size:.95rem}
.shop-note b{color:var(--ink);font-weight:500}

/* Gallery */
.gallery{columns:3 260px;column-gap:14px}
.gallery figure{margin:0 0 14px;position:relative;overflow:hidden;break-inside:avoid}
.gallery img{width:100%;height:auto;display:block;max-width:100%;transition:transform .6s ease}
.gallery figure:hover img{transform:scale(1.03)}
.gallery figcaption{position:absolute;left:0;right:0;bottom:0;padding:30px 14px 12px;font-size:.74rem;letter-spacing:.14em;text-transform:uppercase;color:#fff;background:linear-gradient(transparent,rgba(0,0,0,.6))}
.gallery figcaption b{display:block;font-weight:500;color:#e9d3a6;font-size:.66rem;margin-bottom:2px}
.gtabs{margin-bottom:24px}
.ig{margin-top:22px;font-size:.9rem;color:var(--ink-soft)}
.ig a{color:var(--ink);font-weight:500}

/* About */
.about{background:var(--ink);color:var(--paper)}
.about .wrap{display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(32px,6vw,90px);align-items:start}
.about h2{font-size:clamp(2.6rem,5.4vw,4.2rem);color:var(--paper)}
.about h2 em{color:var(--gold);font-weight:400}
.about .eyebrow{color:var(--gold)}
.about .copy{min-width:0;display:flex;flex-direction:column;gap:18px;font-weight:300;font-size:1.06rem;color:color-mix(in srgb,var(--paper) 82%,transparent)}
.about .copy p{margin:0;max-width:36em}
.creds{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:12px;padding-top:24px;border-top:1px solid color-mix(in srgb,var(--paper) 22%,transparent)}
.creds div{display:flex;flex-direction:column;gap:2px;min-width:0}
.creds b{font-family:var(--display);font-size:1.9rem;font-weight:500;color:var(--gold);line-height:1}
.creds span{font-size:.8rem;letter-spacing:.08em;color:color-mix(in srgb,var(--paper) 70%,transparent)}
.about-left{display:flex;flex-direction:column;gap:18px}
@media (max-width:860px){.about .wrap{grid-template-columns:1fr}}
@media (max-width:480px){.creds{grid-template-columns:1fr}}

/* Booking steps */
.steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:0;border-top:1px solid var(--ink)}
.steps li{padding:28px 28px 28px 0;display:flex;flex-direction:column;gap:10px;min-width:0}
.steps li + li{padding-left:28px;border-left:1px solid var(--line)}
.steps .n{font-family:var(--display);font-style:italic;font-size:2.6rem;color:var(--gold);line-height:1}
.steps h3{font-size:1.5rem}
.steps p{margin:0;color:var(--ink-soft);font-size:.94rem}
.book-box{margin-top:40px;display:flex;flex-wrap:wrap;gap:20px 32px;align-items:center;justify-content:space-between;padding:28px clamp(20px,4vw,40px);background:var(--paper-2);border:1px solid var(--line)}
.book-box p{margin:0;max-width:40em;color:var(--ink-soft)}
.book-box p b{color:var(--ink);font-weight:500}
@media (max-width:760px){.steps{grid-template-columns:1fr}.steps li,.steps li + li{padding:22px 0;border-left:0;border-bottom:1px solid var(--line)}}

/* Visit */
.visit{display:grid;grid-template-columns:1fr 1fr 1fr;gap:40px;border-top:1px solid var(--ink);padding-top:32px}
.visit > div{min-width:0;display:flex;flex-direction:column;gap:12px}
.visit h3{font-size:1.6rem}
.visit address{font-style:normal;font-size:1.02rem}
.visit .muted{color:var(--ink-soft);font-size:.9rem;margin:0}
.hours{width:100%;border-collapse:collapse;font-variant-numeric:tabular-nums;font-size:.95rem}
.hours td{padding:7px 0;border-bottom:1px solid var(--line)}
.hours td:last-child{text-align:right}
.hours tr.today td{font-weight:600;color:var(--ink)}
.hours tr.today td:first-child::after{content:"Today";margin-left:8px;font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;padding:.2em .55em;background:var(--gold);color:var(--on-gold);font-weight:500;vertical-align:2px}
.copyline{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px}
.copyline code{font-family:var(--body);font-size:.98rem;user-select:all;word-break:break-all}
.copy-btn{font-family:var(--body);font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;padding:.45em .8em;border:1px solid var(--line);background:transparent;color:var(--ink-soft);cursor:pointer}
.copy-btn:hover{border-color:var(--ink);color:var(--ink)}
.textlink{color:var(--gold-ink);font-weight:500;text-decoration:none;border-bottom:1px solid currentColor;align-self:flex-start}
@media (max-width:860px){.visit{grid-template-columns:1fr}}

/* Gift band */
.gift{border-block:1px solid var(--line)}
.gift{background:var(--paper-2)}
.gift .wrap{display:grid;grid-template-columns:1.2fr 1fr;gap:32px 64px;align-items:center;padding-block:clamp(44px,6vw,72px)}
.gift-copy{min-width:0;display:flex;flex-direction:column;gap:12px}
.gift h3{font-size:clamp(1.9rem,3.4vw,2.7rem)}
.gift h3 em{color:var(--gold);font-weight:400}
.gift p{margin:0;color:var(--ink-soft);max-width:38em}
.gift p.local{font-family:var(--display);font-style:italic;font-size:1.35rem;color:var(--ink);line-height:1.3}
.helium{min-width:0;background:var(--paper);border:1px solid var(--line);padding:26px 28px;display:flex;flex-direction:column;gap:10px}
.helium h4{margin:0;font-family:var(--display);font-size:1.5rem;font-weight:600}
.helium ul{list-style:none;margin:6px 0 0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:8px 18px;font-size:.92rem}
.helium li{display:flex;gap:10px;align-items:baseline}
.helium li::before{content:"";width:7px;height:9px;border-radius:50% 50% 50% 50% / 60% 60% 40% 40%;background:var(--gold);flex:none;transform:translateY(1px)}
@media (max-width:860px){.gift .wrap{grid-template-columns:1fr}}
@media (max-width:400px){.helium ul{grid-template-columns:1fr}}

footer{padding-block:40px 56px;font-size:.84rem;color:var(--ink-soft)}
footer .wrap{display:flex;flex-wrap:wrap;gap:12px 32px;justify-content:space-between}
footer .mark{font-size:1.2rem;color:var(--ink)}
footer .wrap{align-items:center}
.flogo{width:200px;height:auto}

/* Mobile sticky book bar */
.mbar{display:none}
@media (max-width:640px){
  .mbar{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:30;padding:10px 16px calc(10px + env(safe-area-inset-bottom,0px));background:var(--paper);border-top:1px solid var(--line);gap:10px;align-items:center;justify-content:space-between}
  .mbar .btn{flex:1;justify-content:center}
  .mbar .status{font-size:.78rem}
  footer{padding-bottom:110px}
  .top .btn{display:none}
}

/* Header bag button */
.top-actions{display:flex;align-items:center;gap:10px}
.bag-btn{display:inline-flex;align-items:center;gap:8px;font-family:var(--body);font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;padding:.8em 1em;border:1px solid var(--ink);background:transparent;color:var(--ink);cursor:pointer;text-decoration:none}
.bag-btn:hover{background:var(--ink);color:var(--paper)}
.bag-btn svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.6}
.bag-count{font-variant-numeric:tabular-nums;min-width:1.4em;text-align:center;background:var(--gold);color:var(--on-gold);padding:.1em .35em;font-size:.72rem;letter-spacing:0}
nav.links a[aria-current="page"]{color:var(--ink);border-bottom:1px solid var(--gold)}
@media (max-width:640px){.bag-btn{padding:.7em .8em}.bag-btn .lbl{display:none}}

/* Shop teaser on the home page */
.teaser .pgrid{grid-template-columns:repeat(4,minmax(0,1fr))}
@media (max-width:900px){.teaser .pgrid{grid-template-columns:repeat(2,minmax(0,1fr))}}
.teaser-cta{margin-top:28px;display:flex;flex-wrap:wrap;gap:12px;align-items:center}
.prod a.cover{color:inherit;text-decoration:none;display:flex;flex-direction:column;flex:1}
.prod .badge{align-self:flex-start;font-size:.62rem;letter-spacing:.16em;text-transform:uppercase;background:var(--gold);color:var(--on-gold);padding:.3em .6em}

/* Shop page */
.shop-hero{padding-block:clamp(36px,6vw,72px) 8px}
.shop-hero h1{font-size:clamp(2.6rem,6vw,4.6rem)}
.shop-hero h1 em{color:var(--gold);font-weight:400}
.shop-hero p{margin:14px 0 0;color:var(--ink-soft);max-width:40em;font-size:1.05rem}
.prod .qty-row{display:flex;gap:8px;align-items:stretch;margin-top:8px}
.qty{display:inline-flex;align-items:stretch;border:1px solid var(--line)}
.qty button{width:34px;border:0;background:transparent;color:var(--ink);font-size:1rem;cursor:pointer}
.qty button:hover{background:var(--paper-2)}
.qty input{width:34px;border:0;background:transparent;color:var(--ink);text-align:center;font-family:var(--body);font-size:.92rem;font-variant-numeric:tabular-nums;-moz-appearance:textfield}
.qty input::-webkit-outer-spin-button,.qty input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.prod .add{flex:1;font-family:var(--body);font-size:.74rem;font-weight:500;letter-spacing:.14em;text-transform:uppercase;padding:.9em .8em;background:var(--ink);color:var(--paper);border:0;cursor:pointer}
.prod .add:hover{background:var(--gold);color:var(--on-gold)}
.prod .add.done{background:var(--gold);color:var(--on-gold)}
.shop-status{margin:0 0 18px;color:var(--ink-soft);font-size:.9rem}
.thanks{margin-bottom:28px;padding:20px 24px;border:1px solid var(--gold);background:var(--paper);display:flex;flex-direction:column;gap:4px}
.thanks b{font-family:var(--display);font-size:1.5rem;font-weight:600}
.thanks span{color:var(--ink-soft)}

/* Bag drawer */
.bag-scrim{position:fixed;inset:0;background:rgba(10,9,8,.45);z-index:40}
.bag{position:fixed;top:0;right:0;bottom:0;width:min(440px,100%);z-index:41;background:var(--paper);color:var(--ink);display:flex;flex-direction:column;border-left:1px solid var(--line);padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px);box-shadow:-20px 0 60px rgba(0,0,0,.18)}
.bag-head{display:flex;align-items:center;justify-content:space-between;padding:18px 20px;border-bottom:1px solid var(--line)}
.bag-head h2{font-size:1.9rem}
.bag-close{border:1px solid var(--line);background:transparent;color:var(--ink);width:38px;height:38px;font-size:1.2rem;cursor:pointer}
.bag-body{flex:1;overflow:auto;padding:8px 20px 20px}
.bag-empty{color:var(--ink-soft);padding:28px 0}
.line{display:grid;grid-template-columns:1fr auto;gap:6px 12px;padding:14px 0;border-bottom:1px solid var(--line)}
.line .ln{font-family:var(--display);font-size:1.15rem;font-weight:600;line-height:1.2;min-width:0}
.line .lp{font-variant-numeric:tabular-nums;font-weight:500;text-align:right}
.line .lc{display:flex;align-items:center;gap:12px}
.line .rm{border:0;background:transparent;color:var(--ink-soft);font-size:.78rem;text-decoration:underline;cursor:pointer;padding:0}
.bag fieldset{border:0;margin:18px 0 0;padding:0;display:flex;flex-direction:column;gap:8px}
.bag legend{font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-soft);margin-bottom:6px}
.opt{display:flex;align-items:center;gap:10px;padding:12px;border:1px solid var(--line);cursor:pointer}
.opt:has(input:checked){border-color:var(--gold);background:var(--paper-2)}
.opt input{accent-color:var(--gold);margin:0}
.opt span{flex:1}
.opt small{color:var(--ink-soft);font-variant-numeric:tabular-nums}
.appt{display:flex;flex-direction:column;gap:6px;margin-top:4px}
.appt label{font-size:.82rem;color:var(--ink-soft)}
.appt input{font-family:var(--body);font-size:.95rem;padding:.6em .7em;border:1px solid var(--line);background:var(--paper);color:var(--ink)}
.bag-foot{border-top:1px solid var(--line);padding:16px 20px;display:flex;flex-direction:column;gap:8px}
.sum{display:flex;justify-content:space-between;font-variant-numeric:tabular-nums;font-size:.95rem;color:var(--ink-soft)}
.sum.total{color:var(--ink);font-weight:600;font-size:1.08rem}
.bag-foot .btn{justify-content:center;width:100%}
.bag-foot .btn[disabled]{opacity:.5;cursor:not-allowed}
.bag-note{margin:0;font-size:.78rem;color:var(--ink-soft)}
.bag-err{margin:0;font-size:.85rem;color:#b3261e}

/* Header layout: nav moves to its own scrollable row on smaller screens */
nav.links a{white-space:nowrap}
@media (min-width:0px){
  .top .wrap{flex-wrap:wrap;row-gap:6px}
  nav.links{display:flex!important;order:3;width:100%;gap:22px;overflow-x:auto;padding-bottom:6px;scrollbar-width:none;font-size:.74rem}
  nav.links::-webkit-scrollbar{display:none}
}
@media (max-width:640px){.top .top-actions .btn{display:none}}
.top .btn,.bag-btn{white-space:nowrap}
@media (max-width:480px){.mark{font-size:1.02rem;gap:8px;letter-spacing:.02em}.mark img{width:32px}.top .wrap{column-gap:8px}}
.item .pop{display:inline-block;vertical-align:3px;margin-left:6px;font-family:var(--body);font-size:.6rem;font-weight:500;letter-spacing:.14em;text-transform:uppercase;background:var(--gold);color:var(--on-gold);padding:.25em .55em}
.bonnet-tip{grid-column:1/-1;margin:18px 0 0;padding:14px 16px;border:1px dashed var(--gold);font-size:.9rem;color:var(--ink-soft)}
.bonnet-tip a{color:var(--gold-ink);font-weight:500}
footer .giving-links{width:100%;padding-top:14px;border-top:1px solid var(--line)}
footer .giving-links a{color:var(--ink);text-decoration:none;border-bottom:1px solid var(--gold)}
footer .giving-links a:hover{color:var(--gold-ink)}

/* Mission */
.mission-line{margin:-6px 0 0;font-family:var(--display);font-style:italic;font-size:clamp(1.25rem,2.2vw,1.6rem);line-height:1.3;color:var(--gold-ink);max-width:30em;text-wrap:balance}
.about .mission{grid-column:1/-1;display:flex;flex-direction:column;gap:14px;padding-bottom:clamp(36px,5vw,56px);margin-bottom:clamp(8px,2vw,16px);border-bottom:1px solid color-mix(in srgb,var(--paper) 22%,transparent)}
.about .mission h2{font-size:clamp(2.2rem,4.4vw,3.4rem)}
.about .mission p{margin:0;max-width:44em;font-family:var(--display);font-size:clamp(1.3rem,2.2vw,1.7rem);line-height:1.45;color:var(--paper);text-wrap:pretty}
.foot-mission{font-family:var(--display);font-style:italic;font-size:1.05rem;color:var(--ink)}

/* Blog */
.blog-hero p{max-width:60ch}
.btopics{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:28px}
.btopics a{font-size:.74rem;letter-spacing:.16em;text-transform:uppercase;text-decoration:none;padding:.6em 1.1em;border:1px solid var(--line);color:var(--ink-soft)}
.btopics a:hover{border-color:var(--ink);color:var(--ink)}
.btopics a[aria-current="page"]{background:var(--ink);border-color:var(--ink);color:var(--paper)}
.bgrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:32px 28px}
@media (max-width:960px){.bgrid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:600px){.bgrid{grid-template-columns:1fr}}
.bcard .bimg{display:block;aspect-ratio:4/3;overflow:hidden;background:var(--paper-2)}
.bcard .bimg img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .4s}
.bcard:hover .bimg img{transform:scale(1.03)}
.bmeta{display:flex;flex-wrap:wrap;align-items:center;gap:6px 14px;margin:14px 0 8px;font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;color:var(--gold-ink)}
.bmeta a{color:var(--gold-ink);text-decoration:none}
.bmeta time{color:var(--ink-soft);letter-spacing:.08em}
.bcard h2{font-size:1.55rem;line-height:1.15}
.bcard h2 a{text-decoration:none}
.bcard h2 a:hover{color:var(--gold-ink)}
.bcard p{color:var(--ink-soft);margin:.6em 0 0;font-size:.95rem}
.post{padding:36px 0 56px}
.wrap.narrow{max-width:760px}
.post .back{font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;text-decoration:none;color:var(--ink-soft)}
.post h1{font-size:clamp(2.1rem,5vw,3.3rem);margin-top:6px}
.post .byline{color:var(--ink-soft);font-size:.9rem;margin:.8em 0 1.4em}
.post .cover{width:100%;aspect-ratio:3/2;object-fit:cover;display:block;margin-bottom:28px}
.prose{font-size:1.06rem;line-height:1.75}
.prose h2{font-size:1.8rem;margin:1.6em 0 .4em}
.prose h3{font-size:1.4rem;margin:1.4em 0 .3em}
.prose p{margin:0 0 1.1em}
.prose ul,.prose ol{padding-left:1.2em;margin:0 0 1.2em}
.prose li{margin-bottom:.4em}
.prose img{max-width:100%;height:auto;display:block;margin:1.4em auto}
.prose a{color:var(--gold-ink)}
.prose blockquote{margin:1.4em 0;padding-left:1em;border-left:2px solid var(--gold);font-family:var(--display);font-size:1.35rem}
.post-cta{margin-top:40px;padding:26px;border:1px solid var(--line);background:var(--paper-2)}
.post-cta p{margin:0 0 16px}
.post-cta div{display:flex;flex-wrap:wrap;gap:10px}
.blog.more{border-top:1px solid var(--line)}
.more-h{font-size:2rem;margin-bottom:8px}