/* ============================================================
   Page-level composition
   ============================================================ */

/* ---------- search drawer ---------- */
.searchbar{
  border-bottom:1px solid var(--ink);
  background:var(--paper-2);
  max-height:0; overflow:hidden;
  transition:max-height .3s cubic-bezier(.2,.8,.2,1);
}
.searchbar.open{ max-height:190px; }
.searchform{ display:flex; align-items:flex-end; gap:14px; padding:22px 0 8px; flex-wrap:wrap; }
.searchform label{ color:var(--ink-3); padding-bottom:12px; }
.searchform input{
  flex:1; min-width:220px; background:transparent; border:0;
  border-bottom:1px solid var(--ink);
  font-family:var(--display); font-size:clamp(1.3rem,3vw,2rem);
  padding:4px 2px 8px; letter-spacing:-.015em;
}
.searchform input:focus{ outline:0; border-bottom-color:var(--madder); }
.searchhint{ color:var(--ink-3); padding-bottom:20px; }

/* ---------- HERO ---------- */
.hero{ border-bottom:1px solid var(--ink); }
.hero-in{
  display:grid; grid-template-columns:1.05fr .95fr;
  align-items:stretch;
}
.hero-copy{
  padding:clamp(34px,5vw,72px) clamp(26px,4vw,60px) clamp(34px,4vw,56px) 0;
  border-right:1px solid var(--ink);
  display:flex; flex-direction:column; justify-content:center;
}
.hero-kick{
  font-family:var(--mono); font-size:.6rem; letter-spacing:.26em; text-transform:uppercase;
  color:var(--madder); display:flex; align-items:center; gap:12px; margin-bottom:22px;
}
.hero-kick::after{ content:""; flex:1; height:1px; background:var(--rule); }
.hero h1{ font-size:clamp(2.7rem,6.5vw,5.4rem); margin-bottom:22px; }
.hero h1 em{ color:var(--madder); }
.hero-copy p{ max-width:44ch; }
.hero-actions{ display:flex; gap:14px; margin-top:14px; flex-wrap:wrap; align-items:center; }
.hero-figs{ position:relative; display:grid; grid-template-rows:1fr auto; }
.hero-fig{ position:relative; background:var(--plate); overflow:hidden; min-height:340px; }
.hero-fig img{ width:100%; height:100%; object-fit:cover; }
.hero-cap{
  border-top:1px solid var(--ink); padding:12px 4px 12px 22px;
  display:flex; justify-content:space-between; gap:18px; align-items:baseline;
  font-family:var(--mono); font-size:.58rem; letter-spacing:.16em; text-transform:uppercase; color:var(--ink-3);
}
.stamp{
  position:absolute; z-index:5; right:18px; top:18px;
  width:104px; height:104px; border:1px solid var(--madder); border-radius:50%;
  color:var(--madder); display:grid; place-items:center; text-align:center;
  transform:rotate(-11deg); background:rgba(242,238,226,.82);
  font-family:var(--mono); font-size:.5rem; letter-spacing:.16em; text-transform:uppercase; line-height:1.7;
  padding:8px;
}
.stamp b{ display:block; font-size:1.35rem; letter-spacing:0; font-family:var(--display); font-weight:600; }

@media (max-width:900px){
  .hero-in{ grid-template-columns:1fr; }
  .hero-copy{ border-right:0; border-bottom:1px solid var(--ink); padding:34px 0 34px; }
  .hero-fig{ min-height:56vw; }
  .hero-cap{ padding-left:0; }
}

/* ---------- almanac strip (three facts) ---------- */
.almanac{ border-bottom:1px solid var(--ink); background:var(--paper-2); }
.almanac-in{ display:grid; grid-template-columns:repeat(4,1fr); }
.alm{
  padding:24px 24px 22px; border-left:1px solid var(--rule);
}
.alm:first-child{ border-left:0; padding-left:0; }
.alm h4{ font-family:var(--mono); font-size:.56rem; letter-spacing:.2em; text-transform:uppercase; color:var(--madder); font-weight:400; margin:0 0 9px; }
.alm p{ margin:0; font-size:.94rem; line-height:1.5; color:var(--ink-2); }
.alm strong{ font-family:var(--display); font-weight:500; font-size:1.5rem; display:block; color:var(--ink); letter-spacing:-.02em; line-height:1; margin-bottom:6px; }
@media (max-width:860px){
  .almanac-in{ grid-template-columns:1fr 1fr; }
  .alm{ padding:18px; }
  .alm:nth-child(odd){ border-left:0; padding-left:0; }
  .alm:nth-child(n+3){ border-top:1px solid var(--rule); }
}

/* ---------- generic page block ---------- */
.block{ padding:clamp(46px,6vw,84px) 0 0; }
.block.tight{ padding-top:clamp(30px,4vw,50px); }

/* ---------- department plates ---------- */
.depts{ display:grid; grid-template-columns:repeat(4,1fr); gap:0; border-top:1px solid var(--ink); }
.dept{
  position:relative; display:block; text-decoration:none;
  border-left:1px solid var(--rule); border-bottom:1px solid var(--ink);
  padding:0 0 20px;
  overflow:hidden;
}
.dept:first-child{ border-left:0; }
.dept .dimg{ display:block; background:var(--plate); aspect-ratio:4/3.2; overflow:hidden; }
.dept .dimg img{ width:100%; height:100%; object-fit:cover; transition:transform .6s cubic-bezier(.2,.7,.2,1); }
.dept:hover .dimg img{ transform:scale(1.05); }
.dept .dtxt{ display:block; padding:16px 18px 0; }
.dept h3{ font-size:1.24rem; margin-bottom:4px; }
.dept:hover h3{ color:var(--madder); }
.dept .lbl{ color:var(--ink-3); }
.dept .dno{
  position:absolute; top:0; left:0; z-index:2;
  font-family:var(--mono); font-size:.55rem; letter-spacing:.14em;
  background:var(--paper); padding:4px 8px 3px;
  border-right:1px solid var(--rule); border-bottom:1px solid var(--rule);
}
@media (max-width:980px){ .depts{ grid-template-columns:1fr 1fr; } .dept:nth-child(odd){ border-left:0; } }
@media (max-width:520px){ .depts{ grid-template-columns:1fr; } .dept{ border-left:0; } }

/* ---------- pattern swatches ---------- */
.swatches{ display:grid; grid-template-columns:repeat(auto-fill,minmax(190px,1fr)); gap:20px 18px; }
.swatch{ text-decoration:none; display:block; }
.swatch .sw{
  display:block; aspect-ratio:1/1; background:var(--plate);
  border:1px solid var(--rule-soft); overflow:hidden; position:relative;
}
.swatch .sw img{ width:100%; height:100%; object-fit:cover; transition:transform .5s ease; }
.swatch:hover .sw{ border-color:var(--ink); }
.swatch:hover .sw img{ transform:scale(1.06) rotate(-.6deg); }
.swatch .swname{ font-family:var(--display); font-size:1.1rem; margin-top:10px; display:block; }
.swatch:hover .swname{ color:var(--madder); }
.swatch .swn{ display:block; font-family:var(--mono); font-size:.58rem; letter-spacing:.16em; text-transform:uppercase; color:var(--ink-3); }

/* ---------- editorial two-up ---------- */
.twoup{ display:grid; grid-template-columns:1fr 1fr; border-top:1px solid var(--ink); border-bottom:1px solid var(--ink); }
.twoup .tcol{ padding:clamp(30px,4vw,56px) clamp(24px,3vw,48px); }
.twoup .tcol:first-child{ border-right:1px solid var(--ink); padding-left:0; }
.twoup .tcol:last-child{ padding-right:0; }
.twoup h2{ margin-bottom:18px; }
.qbox{ background:var(--plate); border:1px solid var(--rule); padding:26px 28px; }
.qbox blockquote{ margin:0; font-family:var(--display); font-size:1.4rem; line-height:1.28; letter-spacing:-.015em; }
.qbox cite{ display:block; margin-top:16px; font-family:var(--mono); font-size:.58rem; letter-spacing:.18em; text-transform:uppercase; font-style:normal; color:var(--ink-3); }
@media (max-width:820px){
  .twoup{ grid-template-columns:1fr; }
  .twoup .tcol:first-child{ border-right:0; border-bottom:1px solid var(--rule); padding-right:0; }
  .twoup .tcol:last-child{ padding-left:0; }
}

/* ============================================================
   SHOP
   ============================================================ */
.shop{ display:grid; grid-template-columns:236px 1fr; gap:38px; align-items:start; padding-bottom:30px; }
.rail{ position:sticky; top:56px; }
.rail-head{
  display:flex; justify-content:space-between; align-items:baseline;
  border-bottom:1px solid var(--ink); padding-bottom:8px; margin-bottom:4px;
}
.rail-head button{ background:none; border:0; cursor:pointer; font-family:var(--mono); font-size:.55rem; letter-spacing:.14em; text-transform:uppercase; color:var(--madder); text-decoration:underline; text-underline-offset:3px; }
.fgroup{ border-bottom:var(--hair-soft); padding:14px 0 12px; }
.fgroup > summary{
  cursor:pointer; list-style:none;
  font-family:var(--mono); font-size:.58rem; letter-spacing:.19em; text-transform:uppercase;
  display:flex; justify-content:space-between; align-items:center;
}
.fgroup > summary::-webkit-details-marker{ display:none; }
.fgroup > summary::after{ content:"+"; font-size:.9rem; line-height:1; color:var(--ink-3); }
.fgroup[open] > summary::after{ content:"\2013"; }
.fopts{ padding-top:11px; display:flex; flex-direction:column; gap:2px; max-height:262px; overflow-y:auto; }
.fopt{
  display:flex; align-items:center; gap:9px; cursor:pointer;
  font-size:.93rem; padding:2px 0; color:var(--ink-2);
}
.fopt:hover{ color:var(--ink); }
.fopt input{ position:absolute; opacity:0; pointer-events:none; }
.fopt .box{
  width:12px; height:12px; border:1px solid var(--ink-3); flex:none; position:relative; background:var(--plate);
}
.fopt input:checked + .box{ background:var(--ink); border-color:var(--ink); }
.fopt input:checked + .box::after{
  content:""; position:absolute; left:2px; top:2px; right:2px; bottom:2px; background:var(--ochre);
}
.fopt input:focus-visible + .box{ outline:2px solid var(--madder); outline-offset:2px; }
.fopt .n{ margin-left:auto; font-family:var(--mono); font-size:.58rem; color:var(--ink-3); }
.fopt.off{ opacity:.4; }

.shop-bar{
  display:flex; justify-content:space-between; align-items:flex-end; gap:20px;
  border-bottom:1px solid var(--ink); padding-bottom:11px; margin-bottom:24px; flex-wrap:wrap;
}
.shop-bar .count{ font-family:var(--mono); font-size:.6rem; letter-spacing:.16em; text-transform:uppercase; color:var(--ink-3); }
.shop-tools{ display:flex; align-items:center; gap:16px; }
.selectwrap{ position:relative; }
.selectwrap select{
  appearance:none; background:transparent; border:1px solid var(--ink);
  padding:8px 30px 8px 11px; cursor:pointer;
  font-family:var(--mono); font-size:.6rem; letter-spacing:.14em; text-transform:uppercase;
}
.selectwrap::after{ content:"\25BE"; position:absolute; right:10px; top:50%; transform:translateY(-50%); pointer-events:none; font-size:.6rem; }
.viewtoggle{ display:flex; border:1px solid var(--ink); }
.viewtoggle button{
  background:transparent; border:0; cursor:pointer; padding:8px 11px;
  font-family:var(--mono); font-size:.6rem; letter-spacing:.14em; text-transform:uppercase;
}
.viewtoggle button + button{ border-left:1px solid var(--ink); }
.viewtoggle button.on{ background:var(--ink); color:var(--paper); }

.chips{ display:flex; gap:8px; flex-wrap:wrap; margin-bottom:20px; }
.chip{
  display:inline-flex; align-items:center; gap:8px;
  border:1px solid var(--ink); background:var(--plate); padding:5px 9px; cursor:pointer;
  font-family:var(--mono); font-size:.57rem; letter-spacing:.13em; text-transform:uppercase;
}
.chip:hover{ background:var(--madder); border-color:var(--madder); color:#fff; }
.chip b{ font-weight:400; opacity:.5; }

.morewrap{ padding:44px 0 10px; text-align:center; }
.filterbtn{ display:none; }

@media (max-width:1000px){
  .shop{ grid-template-columns:1fr; gap:0; }
  .rail{
    position:fixed; inset:0 auto 0 0; width:min(88vw,320px); z-index:250;
    background:var(--paper); border-right:1px solid var(--ink);
    padding:20px 20px 60px; overflow-y:auto;
    transform:translateX(-102%); transition:transform .28s cubic-bezier(.2,.8,.2,1);
  }
  body.filtopen .rail{ transform:none; }
  body.filtopen::after{ content:""; position:fixed; inset:0; background:rgba(33,38,29,.35); z-index:240; }
  .filterbtn{ display:inline-flex; }
}

/* ============================================================
   PRODUCT
   ============================================================ */
.pdp{ display:grid; grid-template-columns:1.15fr .85fr; gap:0; border-top:1px solid var(--ink); }
.pdp-gal{ border-right:1px solid var(--ink); padding:0 clamp(20px,3vw,44px) 30px 0; }
.pdp-main{
  background:var(--plate); border:1px solid var(--rule-soft); position:relative; overflow:hidden;
  aspect-ratio:1/1; cursor:zoom-in;
}
.pdp-main img{ width:100%; height:100%; object-fit:cover; transition:transform .45s ease; }
.pdp-main.zoom img{ transform:scale(1.9); cursor:zoom-out; }
.pdp-thumbs{ display:flex; gap:10px; margin-top:12px; }
.pdp-thumbs button{
  width:76px; height:76px; padding:0; background:var(--plate);
  border:1px solid var(--rule-soft); cursor:pointer; overflow:hidden;
}
.pdp-thumbs button.on{ border-color:var(--ink); }
.pdp-thumbs img{ width:100%; height:100%; object-fit:cover; }

.pdp-info{ padding:0 0 40px clamp(20px,3vw,44px); }
.pdp-eyebrow{ display:flex; align-items:center; gap:12px; margin-bottom:16px; }
.pdp-eyebrow .lbl{ color:var(--ink-3); }
.pdp-eyebrow .dot{ width:4px; height:4px; background:var(--madder); }
.pdp h1{ font-size:clamp(2rem,3.6vw,3.05rem); margin-bottom:8px; }
.pdp .psub{ font-style:italic; font-size:1.1rem; color:var(--ink-2); margin-bottom:20px; }
.pdp-price{
  display:flex; align-items:baseline; gap:12px; padding:14px 0;
  border-top:1px solid var(--rule); border-bottom:1px solid var(--rule); margin-bottom:22px;
}
.pdp-price .amt{ font-family:var(--display); font-size:1.8rem; font-weight:500; letter-spacing:-.02em; }
.pdp-price s{ font-family:var(--mono); font-size:.85rem; color:var(--ink-3); }
.pdp-price .stars{ margin-left:auto; font-family:var(--mono); font-size:.62rem; letter-spacing:.1em; color:var(--ink-3); white-space:nowrap; }
.pdp-price .stars b{ color:var(--ochre); font-weight:400; letter-spacing:.1em; }

.vgroup{ margin-bottom:22px; }
.vgroup .lbl{ display:block; color:var(--ink-3); margin-bottom:9px; }
.vopts{ display:flex; flex-wrap:wrap; gap:8px; }
.vopt{
  border:1px solid var(--rule); background:var(--plate); cursor:pointer;
  padding:9px 14px; font-family:var(--mono); font-size:.62rem; letter-spacing:.12em; text-transform:uppercase;
}
.vopt:hover{ border-color:var(--ink); }
.vopt.on{ background:var(--ink); color:var(--paper); border-color:var(--ink); }

.buyrow{ display:flex; gap:12px; align-items:stretch; margin-bottom:14px; }
.stepper{ display:flex; border:1px solid var(--ink); }
.stepper button{
  width:40px; background:transparent; border:0; cursor:pointer; font-family:var(--mono); font-size:1rem;
}
.stepper button:hover{ background:var(--paper-2); }
.stepper input{
  width:46px; border:0; border-left:1px solid var(--rule); border-right:1px solid var(--rule);
  background:transparent; text-align:center; font-family:var(--mono); font-size:.8rem;
}
.buyrow .btn{ flex:1; }
.pdp-assure{ font-family:var(--mono); font-size:.58rem; letter-spacing:.13em; text-transform:uppercase; color:var(--ink-3); line-height:2; }

.pdp-desc{ margin:28px 0 0; border-top:1px solid var(--rule); padding-top:22px; }
.pdp-desc p{ margin:0 0 .7em; }
.spec{ list-style:none; margin:0; padding:0; }
.spec li{
  display:flex; gap:10px; align-items:baseline;
  border-bottom:1px dotted var(--rule); padding:6px 0; font-size:.95rem;
}
.spec li span:first-child{ font-family:var(--mono); font-size:.58rem; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-3); min-width:112px; }
details.acc{ border-bottom:1px solid var(--rule); }
details.acc summary{
  cursor:pointer; list-style:none; padding:13px 0;
  font-family:var(--mono); font-size:.62rem; letter-spacing:.17em; text-transform:uppercase;
  display:flex; justify-content:space-between; align-items:center;
}
details.acc summary::-webkit-details-marker{ display:none; }
details.acc summary::after{ content:"+"; color:var(--ink-3); }
details.acc[open] summary::after{ content:"\2013"; }
details.acc .accbody{ padding:0 0 16px; font-size:.95rem; color:var(--ink-2); }

.tagrow{ display:flex; gap:8px; flex-wrap:wrap; margin-top:20px; }
.tag{
  text-decoration:none; border:1px solid var(--rule); padding:5px 10px;
  font-family:var(--mono); font-size:.56rem; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-2);
}
.tag:hover{ border-color:var(--madder); color:var(--madder); }

@media (max-width:900px){
  .pdp{ grid-template-columns:1fr; }
  .pdp-gal{ border-right:0; padding:0 0 24px; }
  .pdp-info{ padding-left:0; border-top:1px solid var(--rule); padding-top:26px; }
}

/* ============================================================
   CART / CHECKOUT
   ============================================================ */
.cartgrid{ display:grid; grid-template-columns:1fr 348px; gap:44px; align-items:start; }
.clines{ border-top:1px solid var(--ink); }
.cline{
  display:grid; grid-template-columns:96px 1fr auto auto; gap:18px;
  align-items:start; padding:18px 0; border-bottom:var(--hair-soft);
}
.cline .cimg{ width:96px; height:96px; object-fit:cover; background:var(--plate); border:1px solid var(--rule-soft); }
.cline h3{ font-size:1.1rem; }
.cline h3 a{ text-decoration:none; }
.cline h3 a:hover{ color:var(--madder); }
.cline .cmeta{ font-family:var(--mono); font-size:.58rem; letter-spacing:.13em; text-transform:uppercase; color:var(--ink-3); margin-top:6px; }
.cline .cprice{ font-family:var(--mono); font-size:.8rem; text-align:right; min-width:78px; }
.cline .drop-x{ background:none; border:0; cursor:pointer; font-family:var(--mono); font-size:.56rem; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-3); text-decoration:underline; text-underline-offset:3px; }
.cline .drop-x:hover{ color:var(--madder); }
.cline .stepper{ margin-top:8px; }
.cline .stepper button{ width:32px; }
.cline .stepper input{ width:38px; }

.tally{ border:1px solid var(--ink); background:var(--plate); padding:24px; position:sticky; top:56px; }
.tally h3{ font-size:1.3rem; margin-bottom:16px; }
.trow{ display:flex; justify-content:space-between; gap:14px; padding:7px 0; font-family:var(--mono); font-size:.66rem; letter-spacing:.08em; }
.trow.big{
  border-top:1px solid var(--ink); margin-top:12px; padding-top:14px;
  font-family:var(--display); font-size:1.32rem; letter-spacing:-.02em;
}
.tnote{ font-size:.86rem; color:var(--ink-2); margin:14px 0 18px; }
.freebar{ height:5px; background:var(--paper-3); margin:6px 0 10px; }
.freebar i{ display:block; height:100%; background:var(--sage); }

@media (max-width:900px){
  .cartgrid{ grid-template-columns:1fr; }
  .tally{ position:static; }
  .cline{ grid-template-columns:74px 1fr auto; }
  .cline .cimg{ width:74px; height:74px; }
  .cline .drop-x{ grid-column:2/4; justify-self:start; }
}

/* checkout */
.cofield{ margin-bottom:16px; }
.cofield label{ display:block; margin-bottom:6px; color:var(--ink-3); }
.cofield input, .cofield select, .cofield textarea{
  width:100%; background:var(--plate); border:1px solid var(--rule);
  padding:11px 12px; font-family:var(--serif); font-size:1rem;
}
.cofield input:focus,.cofield select:focus,.cofield textarea:focus{ outline:0; border-color:var(--ink); }
.corow{ display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.corow.three{ grid-template-columns:1.4fr 1fr 1fr; }
.cosec{ border-top:1px solid var(--ink); padding:24px 0; }
.cosec h3{ margin-bottom:18px; display:flex; align-items:center; gap:12px; }
.cosec h3 i{
  font-style:normal; width:24px; height:24px; border:1px solid var(--ink); display:inline-grid; place-items:center;
  font-family:var(--mono); font-size:.6rem;
}
.method{ display:flex; gap:0; border:1px solid var(--ink); }
.method label{
  flex:1; padding:12px; cursor:pointer; text-align:center;
  font-family:var(--mono); font-size:.6rem; letter-spacing:.13em; text-transform:uppercase;
  display:flex; flex-direction:column; gap:4px;
}
.method label + label{ border-left:1px solid var(--ink); }
.method input{ position:absolute; opacity:0; }
.method label:has(input:checked){ background:var(--ink); color:var(--paper); }
.method label b{ font-family:var(--display); font-size:1rem; letter-spacing:0; text-transform:none; font-weight:500; }
@media (max-width:620px){ .corow,.corow.three{ grid-template-columns:1fr; } }

.receipt{ max-width:600px; margin:0 auto; border:1px solid var(--ink); background:var(--plate); padding:38px 34px; text-align:center; }
.receipt .perf{ border-top:2px dashed var(--rule); margin:26px -34px; }

/* ============================================================
   ABOUT / PATTERNS
   ============================================================ */
.prose{ max-width:66ch; }
.prose h2{ margin:44px 0 14px; }
.prose h3{ margin:30px 0 10px; font-family:var(--mono); font-size:.66rem; letter-spacing:.2em; text-transform:uppercase; color:var(--madder); }
.prose p{ margin-bottom:1.1em; }
.aboutgrid{ display:grid; grid-template-columns:1fr 340px; gap:54px; align-items:start; }
.sidecard{ border:1px solid var(--ink); background:var(--plate); padding:0; position:sticky; top:56px; }
.sidecard img{ width:100%; aspect-ratio:4/5; object-fit:cover; border-bottom:1px solid var(--ink); }
.sidecard .sc{ padding:20px; }
.sidecard h4{ font-family:var(--mono); font-size:.58rem; letter-spacing:.19em; text-transform:uppercase; color:var(--ink-3); font-weight:400; margin:0 0 10px; }
.sidecard p{ font-size:.92rem; color:var(--ink-2); }
@media (max-width:900px){ .aboutgrid{ grid-template-columns:1fr; } .sidecard{ position:static; } }

/* mosaic of images used on about + patterns hero */
.mosaic{ display:grid; grid-template-columns:repeat(6,1fr); gap:2px; border-top:1px solid var(--ink); border-bottom:1px solid var(--ink); }
.mosaic div{ aspect-ratio:1/1; background:var(--plate); overflow:hidden; }
.mosaic img{ width:100%; height:100%; object-fit:cover; }
@media (max-width:700px){ .mosaic{ grid-template-columns:repeat(3,1fr); } }

/* page head used by inner pages */
.phead{ border-bottom:1px solid var(--ink); padding:26px 0 30px; }
.phead h1{ font-size:clamp(2.2rem,5vw,3.9rem); }
.phead .lbl{ color:var(--madder); display:block; margin-bottom:14px; }
.phead p{ margin-top:14px; }