/* G Franklin Apparel — one stylesheet for every page.
   Built from the approved design (docs/design-source/). Palette: espresso #15110E, deep #0E0B09,
   ivory #F4EEE6, parchment #EAE0D2, tan #C9A27A (accent on dark), cognac #8A4321 (accent on light).
   Type: Cormorant Garamond (headlines) + Jost (text). Square corners, thin rules, no shadows. */

:root{
  --espresso:#15110E;--deep:#0E0B09;--ivory:#F4EEE6;--parch:#EAE0D2;--tan:#C9A27A;--cognac:#8A4321;
  --on-dark:#D8CCBC;--on-dark-muted:#B3A797;--on-light:#4A3F35;--on-light-muted:#5C4F43;--on-light-soft:#6B5D50;
  --line-dark:#2E2620;--line-dark2:#3A2F27;--line-light:#D7CABA;--line-light2:#CDBFAE;
  --serif:'Cormorant Garamond',Georgia,serif;--sans:Jost,system-ui,sans-serif;
  --wrap:1360px;--gutter:16px;
  --micro:12px; /* small capital-letter labels: 12px on phones, 11px on bigger screens */
}
@media (min-width:601px){:root{--gutter:32px;--micro:11px}}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
*{box-sizing:border-box}
img{max-width:100%;display:block}
body{margin:0;font-family:var(--sans);font-weight:400;min-height:100vh}
body.dark{background:var(--espresso);color:var(--ivory)}
body.light{background:var(--ivory);color:var(--espresso)}
a{color:inherit;text-decoration:none}
body.dark a:hover{color:var(--tan)}
body.light a:hover{color:var(--cognac)}
.on-dark a:hover,.site-header a:hover,.site-footer a:hover{color:var(--tan)}
:focus-visible{outline:2px solid var(--tan);outline-offset:3px}
.on-light :focus-visible,body.light main :focus-visible{outline-color:var(--cognac)}
@media (prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important}}
.skip{position:absolute;left:-9999px;top:8px;z-index:100;background:var(--ivory);color:var(--espresso);padding:12px 18px;font-weight:600}
.skip:focus{left:8px}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
p a,li a,.prose a{text-decoration:underline;text-underline-offset:3px}

/* ---------- layout helpers ---------- */
.wrap{max-width:var(--wrap);margin:0 auto;padding-left:var(--gutter);padding-right:var(--gutter)}
.on-dark{background:var(--espresso);color:var(--ivory)}
.on-deep{background:var(--deep);color:var(--ivory)}
.on-light{background:var(--ivory);color:var(--espresso)}
.on-parch{background:var(--parch);color:var(--espresso)}
.stack{display:flex;flex-direction:column}

/* ---------- type ---------- */
.eyebrow{margin:0;font-size:12px;font-weight:500;letter-spacing:.32em;text-transform:uppercase;color:var(--tan)}
.on-light .eyebrow,.on-parch .eyebrow,body.light .eyebrow{color:var(--cognac)}
.on-dark .eyebrow,.on-deep .eyebrow,.hero .eyebrow{color:var(--tan)}
.serif{font-family:var(--serif);font-weight:400}
.h-display{margin:0;font-family:var(--serif);font-weight:400;font-size:clamp(54px,7.5vw,112px);line-height:.95;letter-spacing:-.01em}
.h-xl{margin:0;font-family:var(--serif);font-weight:400;font-size:clamp(52px,6.5vw,96px);line-height:.95}
.h-l{margin:0;font-family:var(--serif);font-weight:400;font-size:clamp(38px,4.5vw,60px);line-height:1}
.h-m{margin:0;font-family:var(--serif);font-weight:400;font-size:clamp(34px,4vw,46px);line-height:1.05}
.lede{margin:0;font-size:17px;font-weight:300;line-height:1.7;color:var(--on-dark)}
.on-light .lede,.on-parch .lede{color:var(--on-light)}
.label{font-size:var(--micro);letter-spacing:.24em;text-transform:uppercase}
.muted{color:var(--on-dark-muted)}
.on-light .muted,.on-parch .muted,body.light .muted{color:var(--on-light-muted)}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:56px;font:600 12px/1.2 var(--sans);letter-spacing:.24em;text-transform:uppercase;padding:18px 32px;border:1px solid transparent;cursor:pointer;text-align:center}
.btn-ivory{background:var(--ivory);color:var(--espresso)}
.btn-ivory:hover{background:#fff;color:var(--espresso)!important}
.btn-line{border-color:var(--ivory);background:transparent;color:inherit}
.btn-line-soft{border-color:#6B5A4B;background:transparent;color:inherit}
.btn-dark{background:var(--espresso);color:var(--ivory)}
.btn-dark:hover{background:#2a221c;color:var(--ivory)!important}
.btn-line-dark{border-color:var(--espresso);background:transparent;color:var(--espresso)}
.btn[disabled]{opacity:.55;cursor:not-allowed}
.link-rule{font-size:12px;font-weight:500;letter-spacing:.24em;text-transform:uppercase;border-bottom:1px solid var(--tan);padding-bottom:6px;text-decoration:none}
.on-light .link-rule,.on-parch .link-rule,body.light main .link-rule{border-color:var(--cognac)}

/* ---------- announcement + header ---------- */
.announce{background:var(--deep);color:var(--on-dark);text-align:center;font-size:var(--micro);letter-spacing:.24em;text-transform:uppercase;padding:11px 16px}
.site-header{border-bottom:1px solid var(--line-dark);background:var(--espresso);color:var(--ivory)}
/* Phone first: these are the phone styles (menu button, small wordmark). Bigger screens add to them below. */
.hdr{max-width:var(--wrap);margin:0 auto;padding:12px var(--gutter);display:flex;flex-wrap:nowrap;align-items:center;justify-content:space-between;gap:4px}
.hdr-nav{display:none;flex:1 1 320px;flex-wrap:wrap;gap:8px 28px;font-size:12px;font-weight:500;letter-spacing:.2em;text-transform:uppercase}
.hdr-nav a{padding:12px 0}
.hdr-nav a[aria-current="page"],.mobile-menu a[aria-current="page"]{color:var(--tan)}
.wordmark{display:flex;flex-direction:column;align-items:center;gap:4px;text-align:center}
.wm-main{font-family:var(--serif);font-weight:500;font-size:20px;letter-spacing:.16em;line-height:1;padding-left:.16em;white-space:nowrap}
.wm-sub{font-size:9px;font-weight:500;letter-spacing:.4em;text-transform:uppercase;color:var(--tan);padding-left:.5em}
.hdr-tools{flex:1 1 0;display:flex;justify-content:flex-end;align-items:center;gap:0;font-size:12px;font-weight:500;letter-spacing:.2em;text-transform:uppercase}
.hdr-maison{display:none;padding:12px 10px}
.icon-btn{min-width:44px;height:44px;display:flex;align-items:center;justify-content:center;gap:6px}
.bag-link{gap:3px}
.menu-btn{display:inline-flex;flex:1 1 0;min-width:44px;min-height:44px;align-items:center;gap:8px;background:transparent;border:0;color:inherit;font:500 12px var(--sans);letter-spacing:.2em;text-transform:uppercase;padding:0 6px 0 0;cursor:pointer}
.menu-btn span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}
.mobile-menu{border-top:1px solid var(--line-dark);padding:8px var(--gutter) 20px;display:flex;flex-direction:column;font-size:13px;font-weight:500;letter-spacing:.2em;text-transform:uppercase}
.mobile-menu[hidden]{display:none}
.mobile-menu a{padding:14px 0;border-bottom:1px solid var(--line-dark)}
/* the smallest phones (320px) need a slightly tighter wordmark so the menu button stays 44px wide */
@media (min-width:361px){.hdr{gap:8px}.wm-main{letter-spacing:.2em;padding-left:.2em}}
@media (min-width:421px){
  .menu-btn span{position:static;width:auto;height:auto;overflow:visible;clip:auto}
  .wm-main{font-size:24px;letter-spacing:.24em;padding-left:.24em}
  .hdr-tools{gap:6px}
  .bag-link{gap:6px}
}
@media (min-width:901px){
  .hdr{flex-wrap:wrap;padding-top:18px;padding-bottom:18px;gap:18px 32px}
  .hdr-nav{display:flex}
  .hdr-maison{display:block}
  .menu-btn{display:none}
  .hdr-tools{flex:1 1 320px}
  .wm-main{font-size:34px;letter-spacing:.32em;padding-left:.32em}
  .wm-sub{letter-spacing:.5em}
  .mobile-menu{display:none!important}
}

/* ---------- footer ---------- */
.site-footer{background:var(--deep);border-top:1px solid var(--line-dark);color:var(--ivory)}
.ftr{max-width:var(--wrap);margin:0 auto;padding:80px var(--gutter) 40px;display:flex;flex-direction:column;gap:56px}
.ftr-top{display:flex;flex-wrap:wrap;justify-content:space-between;gap:48px}
.ftr-brand{display:flex;flex-direction:column;gap:6px;align-items:flex-start}
.ftr-brand .wm-main{font-size:30px;padding-left:0}
.ftr-brand .wm-sub{padding-left:0}
.ftr-nav{display:flex;flex-wrap:wrap;gap:40px 56px;font-size:14px;color:var(--on-dark)}
.ftr-nav>div,.ftr-nav address{display:flex;flex-direction:column;gap:5px;font-style:normal;line-height:1.5}
.ftr-nav a{padding:4px 0}
.ftr-nav h2{margin:0 0 8px;font-size:var(--micro);font-weight:600;letter-spacing:.24em;text-transform:uppercase;color:var(--ivory)}
.ftr-bottom{display:flex;flex-wrap:wrap;justify-content:space-between;gap:16px;border-top:1px solid var(--line-dark);padding-top:28px;font-size:12px;color:#A89B8B}
.ftr-bottom a{text-decoration:underline;text-underline-offset:3px}

/* ---------- photos ---------- */
.cover{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
/* Dark shading behind words on photos. Two layers: from the bottom up, and from the left (where the
   words sit). Strong enough that small text meets WCAG contrast (4.5:1) on bright photos (audit 2026-11-08). */
.shade-up,.shade-soft{position:absolute;inset:0;background:linear-gradient(180deg,rgba(14,11,9,.35) 0%,rgba(14,11,9,.72) 35%,rgba(14,11,9,.93) 100%)}
@media (min-width:701px){
.shade-up{background:linear-gradient(90deg,rgba(14,11,9,.72) 0%,rgba(14,11,9,.45) 45%,rgba(14,11,9,0) 75%),linear-gradient(180deg,rgba(14,11,9,.05) 0%,rgba(14,11,9,.55) 45%,rgba(14,11,9,.92) 100%)}
.shade-soft{background:linear-gradient(90deg,rgba(14,11,9,.7) 0%,rgba(14,11,9,.4) 50%,rgba(14,11,9,.1) 80%),linear-gradient(180deg,rgba(14,11,9,.2) 0%,rgba(14,11,9,.6) 50%,rgba(14,11,9,.9) 100%)}
}
.hero .hero-inner{text-shadow:0 1px 12px rgba(14,11,9,.55)}
.shade-flat{position:absolute;inset:0;background:rgba(14,11,9,.62)}
/* Product photo tile: cut-out photos on white blend into the warm parchment ground */
.tile{position:relative;aspect-ratio:4/5;background:#EFE8DE;display:flex;align-items:center;justify-content:center;overflow:hidden}
.tile img{width:100%;height:100%;object-fit:contain;mix-blend-mode:multiply}
.tile .badge{position:absolute;top:0;left:0;background:var(--espresso);color:var(--ivory);font:500 10px/1.4 var(--sans);letter-spacing:.18em;text-transform:uppercase;padding:7px 11px;margin:14px}

/* ---------- hero (home + collections) ---------- */
.hero{position:relative;display:flex;align-items:flex-end;overflow:hidden;color:var(--ivory);background:var(--deep)}
.hero-home{min-height:620px}
.hero-coll{min-height:440px}
.hero-inner{position:relative;width:100%;max-width:var(--wrap);margin:0 auto;padding:0 var(--gutter) 56px;display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-end;gap:32px}
.hero-coll .hero-inner{padding-bottom:64px;flex-direction:column;align-items:flex-start;gap:16px}
.hero-copy{display:flex;flex-direction:column;gap:20px;max-width:760px}
.hero .lede{color:var(--on-dark);max-width:560px}
.btn-row{display:flex;flex-wrap:wrap;gap:14px}
.crumbs{font-size:var(--micro);letter-spacing:.24em;text-transform:uppercase;color:var(--on-dark)}
.crumbs ol{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:4px 0}
.crumbs li+li::before{content:"/";padding:0 .9em}
.crumbs a{text-decoration:none}
body.light .crumbs:not(.on-photo){color:var(--on-light-soft)}
@media (min-width:601px){.hero-home{min-height:760px}.hero-inner{padding-bottom:88px}}

/* ---------- sections (home) ---------- */
.sec{padding-top:80px;padding-bottom:80px}
.sec-head{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-end;gap:20px}
.manifesto{max-width:1000px;margin:0 auto;padding:88px var(--gutter);display:flex;flex-direction:column;align-items:center;gap:28px;text-align:center}
.manifesto h2{margin:0;font-family:var(--serif);font-weight:400;font-size:clamp(34px,4.2vw,56px);line-height:1.15}
.manifesto .label{color:var(--on-light-soft);letter-spacing:.32em;font-size:12px;font-weight:500}
.cat-grid{display:grid;grid-template-columns:1fr;gap:20px}
@media (min-width:600px){.cat-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1100px){.cat-grid{grid-template-columns:repeat(4,minmax(0,1fr))}}
.cat-card{display:flex;flex-direction:column;gap:18px}
.cat-card .ph{position:relative;aspect-ratio:3/4;overflow:hidden;background:#241D18}
.cat-card .ph img{transition:transform .6s ease}
.cat-card:hover .ph img{transform:scale(1.03)}
.cat-card-meta{display:flex;justify-content:space-between;align-items:baseline;gap:12px;flex-wrap:wrap}
.cat-card-meta .serif{font-size:28px}
.cat-card-meta .label{color:var(--on-dark-muted)}
.split{display:flex;flex-wrap:wrap}
.split-photo{position:relative;flex:1 1 520px;min-height:420px;overflow:hidden}
.split-copy{flex:1 1 520px;padding:72px var(--gutter);display:flex;flex-direction:column;justify-content:center;gap:28px}
@media (min-width:601px){.split-photo{min-height:720px}.split-copy{padding:110px clamp(32px,6vw,96px)}}
.facts{margin:0;display:grid;grid-template-columns:1fr;border-top:1px solid var(--line-dark2)}
.facts>div{padding:18px 0;border-bottom:1px solid var(--line-dark2)}
.facts dt{font-size:var(--micro);letter-spacing:.24em;text-transform:uppercase;color:var(--on-dark-muted)}
.facts dd{margin:6px 0 0;font-family:var(--serif);font-size:20px}
@media (min-width:421px){.facts{grid-template-columns:repeat(2,minmax(0,1fr))}.facts>div:nth-child(even){padding-left:20px}}
.story{padding-top:88px;padding-bottom:88px;display:flex;flex-wrap:wrap;gap:72px;align-items:center}
.story-copy{flex:999 1 520px;min-width:0;display:flex;flex-direction:column;gap:28px}
.story blockquote{margin:0;font-family:var(--serif);font-weight:400;font-size:clamp(30px,3.4vw,46px);line-height:1.2}
.story-photo{position:relative;flex:1 1 380px;aspect-ratio:4/5;overflow:hidden;background:#DED2C1}
.services{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(240px,100%),1fr));gap:32px;padding-top:56px;padding-bottom:56px}
.service{display:flex;gap:16px;align-items:flex-start}
.service svg{flex:none}
.service p{margin:0}
.service .t{font-size:12px;font-weight:600;letter-spacing:.2em;text-transform:uppercase}
.service .d{margin-top:6px;font-size:14px;color:var(--on-dark-muted)}
.band{position:relative;overflow:hidden;color:var(--ivory)}
.band-inner{position:relative;max-width:var(--wrap);margin:0 auto;padding:96px var(--gutter);display:flex;flex-direction:column;align-items:center;gap:22px;text-align:center}
@media (min-width:601px){.sec{padding-top:110px;padding-bottom:110px}.manifesto,.story{padding-top:120px;padding-bottom:120px}.band-inner{padding:130px var(--gutter)}}

/* ---------- product cards + grids ---------- */
.p-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(280px,100%),1fr));gap:48px 22px}
.p-grid.tight{grid-template-columns:repeat(auto-fit,minmax(min(220px,100%),1fr));gap:28px 20px}
.p-card{display:flex;flex-direction:column;gap:12px}
.p-card .name{font-family:var(--serif);font-size:24px;line-height:1.15}
.p-grid.tight .p-card .name{font-size:22px;line-height:1.2}
.p-card .sub{font-size:13px;letter-spacing:.08em;color:var(--on-light-muted)}
.p-card .colors{font-size:12px;letter-spacing:.06em;color:var(--on-light-soft)}
.p-card:hover .name{color:var(--cognac)}
.commission{display:flex;flex-direction:column;justify-content:center;gap:18px;background:var(--espresso);color:var(--ivory);padding:40px 32px;aspect-ratio:4/5}
.commission .serif{font-size:34px;line-height:1.1}
.commission .copy{font-size:15px;font-weight:300;line-height:1.6;color:var(--on-dark)}
.commission .link-rule{border-color:var(--tan);align-self:flex-start;font-weight:600}
.commission:hover{color:var(--ivory)!important}
.commission:hover .link-rule{color:var(--tan)}

/* ---------- collection filter bar ---------- */
.filter-bar{border-bottom:1px solid var(--line-light);background:var(--ivory)}
.filter-inner{padding-top:16px;padding-bottom:16px;display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:14px}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{min-height:44px;display:inline-flex;align-items:center;padding:0 18px;border:1px solid #BFAF9C;font-size:12px;font-weight:500;letter-spacing:.18em;text-transform:uppercase}
.chip[aria-current="page"]{background:var(--espresso);border-color:var(--espresso);color:var(--ivory)!important}
.sort{display:flex;flex-wrap:wrap;align-items:center;gap:14px;font-size:13px;color:var(--on-light-muted)}
.sort label{display:flex;align-items:center;gap:10px}
.sort label span{font-size:var(--micro);letter-spacing:.2em;text-transform:uppercase}
.sort select{font:500 12px var(--sans);letter-spacing:.16em;text-transform:uppercase;color:var(--espresso);background:transparent;border:1px solid #BFAF9C;padding:12px 14px;min-height:44px;border-radius:0}
.sort button{min-height:44px;padding:0 16px;background:var(--espresso);color:var(--ivory);border:0;font:600 var(--micro) var(--sans);letter-spacing:.2em;text-transform:uppercase;cursor:pointer}
.empty{padding:40px 0;font-size:17px;font-weight:300;line-height:1.7;color:var(--on-light)}

/* ---------- product page ---------- */
.pdp{padding-top:28px;padding-bottom:100px;display:flex;flex-direction:column;gap:28px}
.pdp-main{display:flex;flex-wrap:wrap;gap:56px;align-items:flex-start}
/* Phones: photos slide sideways (swipe). Bigger screens: a photo grid. */
.gallery{flex:999 1 560px;min-width:0;display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:8px;margin:0 calc(-1 * var(--gutter));padding:0 var(--gutter)}
.gallery .tile,.gallery .tile:first-child{flex:0 0 86%;aspect-ratio:1/1;scroll-snap-align:center}
@media (min-width:601px){
  .gallery{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;overflow-x:visible;scroll-snap-type:none;margin:0;padding:0}
  .gallery .tile{aspect-ratio:4/5;scroll-snap-align:none}
  .gallery .tile:first-child{grid-column:1/-1;aspect-ratio:5/4}
  .gallery .tile.solo{grid-column:1/-1}
}
.buy{flex:1 1 400px;min-width:0;display:flex;flex-direction:column;gap:26px}
@media (min-width:1000px){.buy{position:sticky;top:24px}}
.buy h1{margin:0;font-family:var(--serif);font-weight:400;font-size:clamp(38px,4.4vw,52px);line-height:1}
.price-row{display:flex;flex-wrap:wrap;align-items:baseline;gap:12px;border-top:1px solid var(--line-light);padding-top:22px}
.price-row .price{font-family:var(--serif);font-size:34px}
.price-row small{font-size:12px;color:var(--on-light-soft)}
.opt{border:0;margin:0;padding:0;display:flex;flex-direction:column;gap:12px;min-width:0}
.opt legend{padding:0;margin-bottom:12px;font-size:var(--micro);font-weight:600;letter-spacing:.24em;text-transform:uppercase}
.opt legend span{font-weight:400;color:var(--on-light-muted);letter-spacing:.12em}
.opt .hint{margin:0;font-size:13px;line-height:1.5;color:var(--on-light-muted)}
.pills{display:flex;flex-wrap:wrap;gap:8px}
.opt-pill{position:relative;display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:0 18px;font:500 12px var(--sans);letter-spacing:.16em;text-transform:uppercase;border:1px solid #BFAF9C;background:transparent;color:var(--espresso);cursor:pointer}
.opt-pill.size{min-width:56px;padding:0 12px;letter-spacing:.06em}
.opt-pill input{position:absolute;opacity:0;width:1px;height:1px;margin:0;pointer-events:none}
.opt-pill:has(input:checked){background:var(--espresso);border-color:var(--espresso);color:var(--ivory)}
.opt-pill:has(input:focus-visible){outline:2px solid var(--cognac);outline-offset:3px}
.opt-pill:has(input:disabled){cursor:not-allowed;opacity:.6}
.buy-form{display:flex;flex-direction:column;gap:26px}
.buy-actions{display:flex;flex-direction:column;gap:10px;padding-top:4px}
.buy-actions .btn{min-height:58px;letter-spacing:.28em;width:100%}
.buy-note{margin:0;font-size:13px;line-height:1.6;color:var(--on-light-muted)}
.buy-status{margin:0;font-size:14px;line-height:1.6;background:var(--parch);padding:14px 16px}
.buy-status:empty{display:none}
.buy-status a{text-decoration:underline;text-underline-offset:3px;white-space:nowrap}
.sold{font-size:12px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--cognac)}
.acc-list{border-top:1px solid var(--line-light)}
.acc{border-bottom:1px solid var(--line-light)}
.acc h2{margin:0;font:inherit}
.acc-btn{width:100%;min-height:56px;background:transparent;border:0;display:flex;justify-content:space-between;align-items:center;padding:0;color:var(--espresso);font:600 12px var(--sans);letter-spacing:.22em;text-transform:uppercase;cursor:pointer;text-align:left}
.acc-sign{font-size:18px;font-weight:300}
.acc-body{margin:0 0 22px;font-size:15px;font-weight:300;line-height:1.7;color:var(--on-light)}
.acc-body p{margin:0 0 12px;white-space:pre-line}
.acc-body ul{margin:0;padding-left:20px}
.acc-body li{margin:4px 0}
.acc-body[hidden]{display:none}
.craft{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(260px,100%),1fr));gap:40px;padding-top:100px;padding-bottom:100px}
.craft div{display:flex;flex-direction:column;gap:12px}
.craft .num{font-family:var(--serif);font-size:44px;color:var(--tan)}
.craft h2{margin:0;font-family:var(--serif);font-weight:400;font-size:28px}
.craft p{margin:0;font-size:15px;font-weight:300;line-height:1.7;color:var(--on-dark)}

/* ---------- simple pages (search, bag, 404, policies) ---------- */
.page-head{padding-top:72px;padding-bottom:40px;display:flex;flex-direction:column;gap:16px}
.page-body{padding-bottom:110px}
.prose{max-width:760px;font-size:16px;font-weight:300;line-height:1.75;color:var(--on-light)}
.prose h2{font-family:var(--serif);font-weight:400;font-size:32px;line-height:1.15;color:var(--espresso);margin:48px 0 12px}
.search-form{display:flex;flex-wrap:wrap;gap:12px;align-items:flex-end;max-width:640px}
.search-form label{flex:1 1 260px;display:flex;flex-direction:column;gap:8px;font:600 var(--micro) var(--sans);letter-spacing:.22em;text-transform:uppercase;color:var(--on-light)}
.search-form input{font:400 16px var(--sans);color:var(--espresso);background:#FBF8F3;border:1px solid var(--line-light2);padding:14px;min-height:52px;width:100%;border-radius:0}
.search-form .btn{min-height:52px;padding:0 28px}

.commission .eyebrow,body.light .commission .eyebrow{color:var(--tan)}

/* ---------- forms ---------- */
.f{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(240px,100%),1fr));gap:20px;min-width:0}
.f .wide{grid-column:1/-1}
.f label{display:flex;flex-direction:column;gap:8px;font:600 var(--micro) var(--sans);letter-spacing:.22em;text-transform:uppercase;color:var(--on-light)}
.f input,.f select,.f textarea{font:400 16px var(--sans);letter-spacing:0;text-transform:none;color:var(--espresso);background:#FBF8F3;border:1px solid var(--line-light2);padding:14px;width:100%;min-height:50px;border-radius:0}
.f textarea{resize:vertical;line-height:1.5}
.f input::placeholder,.f textarea::placeholder{color:#7D7064}
.f [aria-invalid="true"]{border-color:#A3341C;box-shadow:inset 0 0 0 1px #A3341C}
.req{color:var(--cognac)}
.form-note{margin:0;font-size:13px;line-height:1.6;color:var(--on-light-muted);letter-spacing:0;text-transform:none;font-weight:400}
.small{font-size:13px;color:var(--on-light-muted)}
.form-status{margin:14px 0 0;font-size:15px;line-height:1.5;font-weight:600}
.form-status:empty{display:none}
.form-status.is-ok{color:#2E6B3A}
.form-status.is-error{color:#A3341C}
.hp{position:absolute!important;left:-10000px;width:1px;height:1px;overflow:hidden}
/* Inner Circle sign-up on dark */
.signup{width:100%;display:flex;flex-wrap:wrap;gap:16px 24px;align-items:flex-end;padding-top:10px;text-align:left}
.signup label{flex:1 1 200px;display:flex;flex-direction:column;gap:2px}
.signup label>span{font-size:var(--micro);letter-spacing:.24em;text-transform:uppercase;color:var(--on-dark-muted)}
.signup input{font:400 16px var(--sans);color:var(--ivory);background:transparent;border:0;border-bottom:1px solid #6B5A4B;padding:14px 2px;width:100%;border-radius:0}
.signup input::placeholder{color:#9C8F80}
.signup .btn{min-height:52px;padding:0 30px}
.signup .form-status,.signup .form-note{flex:1 1 100%;text-align:center;color:var(--on-dark-muted)}
.signup .form-status.is-ok{color:var(--tan)}
.signup .form-status.is-error{color:#F0A08A}
.signup .req{color:var(--tan)}

/* ---------- bespoke ---------- */
.steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(240px,100%),1fr));border-top:1px solid var(--line-light2)}
.steps li{padding:30px 28px 30px 0;display:flex;flex-direction:column;gap:12px}
.steps .num{font-family:var(--serif);font-size:40px;color:var(--cognac)}
.steps h3{margin:0;font-family:var(--serif);font-weight:500;font-size:26px}
.steps p{margin:0;font-size:15px;font-weight:300;line-height:1.7;color:var(--on-light)}
.decisions{flex:999 1 560px;min-width:0;margin:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(260px,100%),1fr));gap:0 40px;border-top:1px solid var(--line-dark2)}
.decisions>div{padding:24px 0;border-bottom:1px solid var(--line-dark2)}
.decisions dt{font-family:var(--serif);font-size:26px}
.decisions dd{margin:8px 0 0;font-size:15px;font-weight:300;color:var(--on-dark)}
.swatch-photo{position:relative;aspect-ratio:4/3;overflow:hidden;background:#DED2C1}
@media (min-width:601px){.swatch-photo{aspect-ratio:16/7}}
.leather-types,.hardware{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:12px 28px;font-size:13px;letter-spacing:.12em;text-transform:uppercase}
.leather-types li{border:1px solid #BFAF9C;padding:12px 18px}
.hardware{border-top:1px solid var(--line-light2);padding-top:32px}
.hardware li{display:flex;align-items:center;gap:12px}
.hardware span{width:36px;height:36px;border-radius:50%;border:1px solid rgba(21,17,14,.25)}
.examples{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(260px,100%),1fr));gap:14px}
.examples .ex{position:relative;aspect-ratio:4/5;overflow:hidden;background:#241D18}
.contact-facts{display:flex;flex-direction:column;gap:16px;border-top:1px solid var(--line-light2);padding-top:24px;font-size:15px}
.contact-facts .label{margin:0 0 4px;font-weight:600;letter-spacing:.22em;color:var(--on-light-soft)}
.contact-facts a{text-decoration:underline;text-underline-offset:3px}
.contact-facts .small{margin:4px 0 0}
.prose ul{padding-left:22px}
.prose li{margin:6px 0}

/* ---------- bag + order ---------- */
.bag{display:flex;flex-wrap:wrap;gap:48px;align-items:flex-start}
.bag-lines{flex:999 1 560px;min-width:0;list-style:none;margin:0;padding:0;border-top:1px solid var(--line-light)}
.bag-line{display:grid;grid-template-columns:84px 1fr;gap:20px;padding:24px 0;border-bottom:1px solid var(--line-light);align-items:start}
.bag-photo{aspect-ratio:1/1}
.bag-info{display:flex;flex-direction:column;gap:6px;min-width:0}
.bag-name{font-size:24px;line-height:1.15}
.bag-info .muted{font-size:14px}
.bag-actions{display:flex;flex-wrap:wrap;align-items:center;gap:8px 20px;margin-top:8px}
.bag-qty{display:flex;align-items:center;gap:10px}
.bag-qty select{font:500 14px var(--sans);min-height:44px;padding:0 10px;border:1px solid #BFAF9C;background:transparent;color:var(--espresso);border-radius:0}
.link-btn{min-height:44px;background:none;border:0;padding:0 4px;font:500 12px var(--sans);letter-spacing:.16em;text-transform:uppercase;color:var(--espresso);text-decoration:underline;text-underline-offset:4px;cursor:pointer}
.link-btn:hover{color:var(--cognac)}
.bag-line-total{font-family:var(--serif);font-size:22px;white-space:nowrap}
.bag-line-total{grid-column:2}
@media (min-width:601px){.bag-line{grid-template-columns:120px 1fr auto}.bag-line-total{grid-column:auto}}
.bag-summary{flex:1 1 320px;background:var(--parch);padding:32px;display:flex;flex-direction:column;gap:8px}
.bag-summary h2{margin:0 0 8px;font-size:30px}
.bag-summary dl{margin:0 0 16px}
.bag-summary dl>div{display:flex;justify-content:space-between;gap:16px;padding:10px 0;border-bottom:1px solid var(--line-light2);font-size:15px}
.bag-summary dt{color:var(--on-light)}
.bag-summary dd{margin:0}
.bag-summary .total{font-family:var(--serif);font-size:24px;border-bottom:0}
.bag-summary .total dt{color:var(--espresso)}
.bag-summary a{text-decoration:underline;text-underline-offset:3px}
.bag-msg{margin:0;padding:14px 16px;background:var(--parch);font-size:15px;line-height:1.6;color:var(--espresso);max-width:760px}
.bag-summary .bag-msg{background:var(--ivory)}
.bag-code{margin:0 0 8px;border-top:1px solid var(--line-light2);border-bottom:1px solid var(--line-light2);padding:4px 0}
.bag-code summary{cursor:pointer;min-height:44px;display:flex;align-items:center;font:500 12px var(--sans);letter-spacing:.16em;text-transform:uppercase;color:var(--espresso)}
.bag-code-form{display:flex;gap:8px;margin:4px 0 8px}
.bag-code-form input{flex:1;min-width:0;min-height:48px;font:16px var(--sans);padding:10px 12px;border:1px solid var(--line-light2);background:var(--ivory);color:var(--espresso);text-transform:uppercase}
.bag-code-form .btn{min-height:48px;padding:10px 18px}
.bag-code-applied{display:flex;justify-content:space-between;align-items:center;gap:8px;font-size:14px}
/* gift card page */
.gift-form{display:flex;flex-direction:column;gap:18px;max-width:560px}
.gift-form label{display:flex;flex-direction:column;gap:6px;font-size:14px;font-weight:500}
.gift-form input,.gift-form textarea{min-height:48px;font:16px var(--sans);padding:10px 12px;border:1px solid var(--line-light2);background:#fff;color:var(--espresso)}
.gift-form textarea{min-height:96px}
.gift-amounts{display:grid;grid-template-columns:repeat(2,1fr);gap:8px;border:0;padding:0;margin:0}
.gift-amounts legend{font-size:14px;font-weight:500;margin-bottom:8px}
.gift-amounts label{flex-direction:row;align-items:center;justify-content:center;min-height:56px;border:1px solid var(--line-light2);background:#fff;font:400 22px var(--serif);cursor:pointer}
.gift-amounts input{position:absolute;opacity:0;width:1px;height:1px}
.gift-amounts label:has(input:checked){background:var(--espresso);color:var(--ivory);border-color:var(--espresso)}
.gift-amounts label:has(input:focus-visible){outline:2px solid var(--cognac);outline-offset:3px}
@media (min-width:601px){.gift-amounts{grid-template-columns:repeat(4,1fr)}}
.order-lines{list-style:none;margin:0 0 8px;padding:0}
.order-lines li{display:flex;justify-content:space-between;gap:16px;padding:12px 0;border-bottom:1px solid var(--line-light2);font-size:15px;line-height:1.5}
.order-lines .muted{font-size:13px}

/* ---------- accessibility polish (2026-11-08 audit) ---------- */
/* WCAG 2.5.8: footer policy links and contact links get a tap area of at least 24px */
.ftr-bottom a,.contact-facts a{display:inline-block;padding:4px 0;min-height:24px}
/* WCAG 1.4.10 / 1.4.12: long words in big headings wrap instead of running off small screens */
h1,h2,.h-display,.h-xl,.h-l,.h-m{overflow-wrap:break-word;hyphens:auto}
/* text shadow helps words on photos, but not on solid buttons */
.hero .btn{text-shadow:none}
/* "Before you pay" box on the bag page (California 17538(d) disclosures) */
.before-pay{border-top:1px solid var(--line-light2);padding-top:14px;margin-bottom:6px;font-size:13px;line-height:1.6;color:var(--on-light)}
.before-pay h3{margin:0 0 6px;font:600 var(--micro) var(--sans);letter-spacing:.22em;text-transform:uppercase;color:var(--espresso)}
.before-pay p{margin:0 0 8px}
.before-pay a{text-decoration:underline;text-underline-offset:3px}

/* "About our …" write-up under a collection's products (SEO/GEO, 2026-11-08) */
.guide{display:grid;grid-template-columns:1fr;gap:36px;align-items:start;padding-top:56px;padding-bottom:80px;border-top:1px solid var(--line-light)}
.guide .prose h2{margin-top:0}
.guide-facts{margin:0;border-top:1px solid var(--line-light)}
.guide-facts>div{padding:16px 0;border-bottom:1px solid var(--line-light)}
.guide-facts dt{font-size:var(--micro);font-weight:500;letter-spacing:.24em;text-transform:uppercase;color:var(--on-light-muted)}
.guide-facts dd{margin:6px 0 0;font-size:15px;font-weight:300;line-height:1.6;color:var(--on-light)}
@media (min-width:901px){.guide{grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);gap:64px;padding-top:72px;padding-bottom:100px}}
/* Our Story page: the story block also uses .prose, so drop the extra heading space */
.story-copy.prose h2{margin:12px 0 0}
.story-copy.prose blockquote{margin:0}
.story-copy.prose p{margin:0}

/* ---------- phone-first extras (2026-11-08, George's choice) ---------- */
/* Shop grids: 2 bags per row on phones, the original roomy grid from 700px up */
.p-grid,.p-grid.tight{grid-template-columns:repeat(2,minmax(0,1fr));gap:32px 12px}
.p-card{gap:8px}
.p-card .name,.p-grid.tight .p-card .name{font-size:19px;line-height:1.2}
.p-card .sub{letter-spacing:.04em}
.tile .badge{margin:8px}
.p-grid .commission{grid-column:1/-1;aspect-ratio:auto;padding:36px 24px}
@media (min-width:700px){
  .p-grid{grid-template-columns:repeat(auto-fill,minmax(min(280px,100%),1fr));gap:48px 22px}
  .p-grid.tight{grid-template-columns:repeat(auto-fit,minmax(min(220px,100%),1fr));gap:28px 20px}
  .p-card{gap:12px}
  .p-card .name{font-size:24px;line-height:1.15}
  .p-grid.tight .p-card .name{font-size:22px;line-height:1.2}
  .p-card .sub{letter-spacing:.08em}
  .tile .badge{margin:14px}
  .p-grid .commission{grid-column:auto;aspect-ratio:4/5;padding:40px 32px}
}
/* Main buttons fill the width on phones so they're easy to hit */
.btn-row>.btn,form .btn,.band-inner>.btn,main p>.btn{width:100%}
@media (min-width:601px){.btn-row>.btn,form .btn,.band-inner>.btn,main p>.btn{width:auto}}
/* Touch screens first: tap spots at least 44px tall, and boxes at 16px so iPhones don't zoom in.
   Computers with a mouse get the original compact sizes back. */
.ftr-nav a,.ftr-bottom a,.contact-facts a{display:inline-flex;align-items:center;min-height:44px;padding:0}
.ftr-nav>div,.ftr-nav address{gap:0}
.crumbs a{display:inline-block;padding-top:14px;margin-top:-14px}
a.link-rule{display:inline-block;padding-top:20px;margin-top:-20px}
.crumbs a{padding-bottom:14px;margin-bottom:-14px}
.sort select,.bag-qty select{font-size:16px;letter-spacing:.06em}
@media (hover:hover) and (pointer:fine){
  .ftr-nav a{display:block;min-height:0;padding:4px 0}
  .ftr-nav>div,.ftr-nav address{gap:5px}
  .ftr-bottom a,.contact-facts a{display:inline-block;padding:4px 0;min-height:24px}
  .crumbs a{display:inline;padding:0;margin:0}
  a.link-rule{display:inline;padding-top:0;margin-top:0}
  .sort select{font-size:12px;letter-spacing:.16em}
  .bag-qty select{font-size:14px;letter-spacing:normal}
}
/* "Add to Bag" bar at the bottom of the screen on phones and tablets (product pages).
   Hidden until site.js adds .is-shown; never shown on big screens, where the buy box already stays in view. */
.buy-bar{position:fixed;left:0;right:0;bottom:0;z-index:50;display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px;padding:10px var(--gutter) calc(10px + env(safe-area-inset-bottom));background:var(--ivory);border-top:1px solid var(--line-light2);box-shadow:0 -6px 18px rgba(14,11,9,.08);transform:translateY(110%);visibility:hidden;transition:transform .25s ease,visibility .25s}
.buy-bar.is-shown{transform:none;visibility:visible}
.buy-bar-info{flex:1 1 0;min-width:0;display:flex;flex-direction:column;gap:2px}
.buy-bar-name{font-family:var(--serif);font-size:18px;line-height:1.15;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.buy-bar-price{font-size:14px;color:var(--on-light-muted)}
.buy-bar .btn{width:auto;flex:none;min-height:50px;padding:0 22px}
.buy-bar-status{flex:1 1 100%;margin:0;font-size:14px}
.buy-bar-status a{text-decoration:underline;text-underline-offset:3px;white-space:nowrap}
body.has-buy-bar .site-footer{padding-bottom:80px}
@media (min-width:1000px){.buy-bar{display:none!important}body.has-buy-bar .site-footer{padding-bottom:0}}