:root{
  /* ink */
  --ink:#1E1A16;
  --ink-2:#5B5148;
  --ink-3:#8B8076;
  --on-dark:#F6F1E9;
  --on-dark-2:#C9BCAA;

  /* ground */
  --paper:#FBF8F3;
  --surface:#FFFFFF;
  --band:#F3EDE3;
  --plate:#EFE7DA;
  --line:#E5DBCB;
  --line-2:#D6C9B4;

  /* wood and metal, straight off the product photographs */
  --walnut:#3B2C21;
  --walnut-2:#54402F;
  --oak:#C9A87C;
  --brass:#A9793C;
  --brass-ink:#875E2C;
  --sage:#7C8A76;
  --sage-pale:#E7EAE2;

  /* geometry */
  --r-xs:6px;
  --r-sm:10px;
  --r-md:16px;
  --r-lg:24px;
  --r-xl:34px;
  --r-pill:999px;

  --sh-1:0 1px 2px rgba(37,27,18,.05), 0 2px 8px rgba(37,27,18,.04);
  --sh-2:0 2px 6px rgba(37,27,18,.06), 0 12px 28px rgba(37,27,18,.07);
  --sh-3:0 8px 20px rgba(37,27,18,.08), 0 28px 60px rgba(37,27,18,.10);
  --ring:0 0 0 3px rgba(169,121,60,.35);
  --ease:cubic-bezier(.2,.7,.3,1);

  --wrap:1240px;
  --gut:clamp(16px,4vw,40px);
}

@font-face{
  font-family:"Fraunces";
  src:url("/assets/fraunces-latin.7234ed86.woff2") format("woff2");
  font-weight:300 700;
  font-style:normal;
  font-display:swap;
}
@font-face{
  font-family:"Manrope";
  src:url("/assets/manrope-latin.a30ddcd3.woff2") format("woff2");
  font-weight:400 700;
  font-style:normal;
  font-display:swap;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:"Manrope",ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  font-size:17px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;height:auto}
a{color:var(--brass-ink);text-decoration:none}
a:hover{text-decoration:underline;text-underline-offset:3px}
:focus-visible{outline:none;box-shadow:var(--ring);border-radius:var(--r-xs)}
[hidden]{display:none!important}

h1,h2,h3,h4{
  font-family:"Fraunces",ui-serif,Georgia,serif;
  font-weight:500;
  line-height:1.12;
  letter-spacing:-.012em;
  margin:0 0 .5em;
  color:var(--ink);
}
h1{font-size:clamp(2.2rem,1.3rem + 3.6vw,3.9rem)}
h2{font-size:clamp(1.7rem,1.15rem + 2.1vw,2.6rem)}
h3{font-size:clamp(1.18rem,1.02rem + .7vw,1.5rem)}
h4{font-size:1.06rem;font-family:"Manrope",sans-serif;font-weight:700;letter-spacing:0}
p{margin:0 0 1.05em}
ul,ol{margin:0 0 1.15em;padding-left:1.25em}
li{margin:.3em 0}
small{font-size:.86rem}
strong{font-weight:700}

.wrap{max-width:var(--wrap);margin-inline:auto;padding-inline:var(--gut)}
.lede{font-size:clamp(1.06rem,1rem + .35vw,1.24rem);color:var(--ink-2);max-width:62ch}
.eyebrow{
  font-size:.75rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  color:var(--brass-ink);margin:0 0 .8em;
}
.muted{color:var(--ink-2)}
.tiny{font-size:.82rem;color:var(--ink-3)}

/* ---------------------------------------------------------------- reeding */
.reed{
  background-image:repeating-linear-gradient(90deg,
    rgba(59,44,33,.055) 0 2px, rgba(59,44,33,0) 2px 9px);
}
.reed-dark{
  background-image:repeating-linear-gradient(90deg,
    rgba(246,241,233,.10) 0 2px, rgba(246,241,233,0) 2px 9px);
}
.rule{
  height:1px;background:var(--line);border:0;margin:0;
}

/* ------------------------------------------------------------------ header */
.cr-topbar{
  background:var(--walnut);color:var(--on-dark-2);
  font-size:.8rem;letter-spacing:.03em;
}
.cr-topbar .wrap{display:flex;gap:18px;justify-content:center;align-items:center;
  min-height:38px;flex-wrap:wrap;text-align:center}
.cr-topbar span{white-space:nowrap}
.cr-topbar b{color:var(--on-dark);font-weight:600}

.cr-head{
  position:sticky;top:0;z-index:40;
  background:rgba(251,248,243,.92);
  backdrop-filter:saturate(1.4) blur(10px);
  border-bottom:1px solid var(--line);
}
.cr-head .wrap{display:flex;align-items:center;gap:22px;min-height:74px}
.wordmark{
  font-family:"Fraunces",serif;font-weight:600;font-size:1.5rem;letter-spacing:.10em;
  color:var(--ink);text-decoration:none;line-height:1;
}
.wordmark:hover{text-decoration:none;color:var(--brass-ink)}
.wordmark small{display:block;font-family:"Manrope",sans-serif;font-size:.6rem;
  letter-spacing:.28em;color:var(--ink-3);font-weight:600;margin-top:4px}
.cr-nav{display:flex;align-items:center;gap:4px;margin-left:auto;flex-wrap:wrap}
.cr-nav a,.cr-nav button{
  font:inherit;font-size:.93rem;font-weight:600;color:var(--ink);
  background:none;border:0;padding:9px 13px;border-radius:var(--r-pill);cursor:pointer;
  text-decoration:none;transition:background .18s var(--ease),color .18s var(--ease);
}
.cr-nav a:hover,.cr-nav button:hover{background:var(--band);text-decoration:none;color:var(--brass-ink)}
.cr-nav a[aria-current="page"]{background:var(--plate)}
.cr-nav .caret{display:inline-block;margin-left:6px;font-size:.66em;transform:translateY(-1px)}

/* department panel */
.cr-panel{
  position:absolute;left:0;right:0;top:100%;
  background:var(--surface);border-bottom:1px solid var(--line);
  box-shadow:var(--sh-2);
}
.cr-panel .wrap{display:grid;grid-template-columns:repeat(auto-fit,minmax(215px,1fr));
  gap:4px 26px;padding-block:24px}
.cr-panel a{
  display:flex;justify-content:space-between;gap:12px;align-items:baseline;
  padding:9px 12px;border-radius:var(--r-sm);color:var(--ink);font-weight:600;font-size:.95rem;
}
.cr-panel a:hover{background:var(--band);text-decoration:none}
.cr-panel .n{color:var(--ink-3);font-weight:600;font-size:.82rem;font-variant-numeric:tabular-nums}

/* ------------------------------------------------------------------- hero */
.cr-hero{position:relative;overflow:hidden;background:var(--band)}
.cr-hero::before{
  content:"";position:absolute;inset:0;
  background-image:repeating-linear-gradient(90deg,
    rgba(59,44,33,.06) 0 3px, rgba(59,44,33,0) 3px 14px);
  opacity:.9;pointer-events:none;
}
.cr-hero .wrap{
  position:relative;display:grid;gap:clamp(26px,4vw,58px);
  grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);
  align-items:center;padding-block:clamp(38px,6vw,78px);
}
.cr-hero h1{margin-bottom:.34em}
.cr-hero .lede{margin-bottom:1.5em}
.hero-art{
  position:relative;justify-self:end;width:min(100%,520px);
  background:var(--plate);border-radius:var(--r-xl);padding:22px;
  box-shadow:var(--sh-3);
}
.hero-art img{
  display:block;width:100%;height:auto;border-radius:var(--r-lg);
}
.hero-art figcaption{
  margin-top:12px;font-size:.82rem;color:var(--ink-2);text-align:center;
}
.hero-actions{display:flex;gap:12px;flex-wrap:wrap;align-items:center}

/* ------------------------------------------------------------------ buttons */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  min-width:0;padding:13px 24px;border-radius:var(--r-pill);border:1px solid transparent;
  font:inherit;font-size:.95rem;font-weight:700;letter-spacing:.01em;cursor:pointer;
  text-decoration:none;transition:transform .18s var(--ease),box-shadow .18s var(--ease),
    background .18s var(--ease),color .18s var(--ease);
}
.btn:hover{text-decoration:none;transform:translateY(-1px)}
.btn-primary{background:var(--walnut);color:var(--on-dark);box-shadow:var(--sh-1)}
.btn-primary:hover{background:var(--walnut-2);color:var(--on-dark);box-shadow:var(--sh-2)}
.btn-brass{background:var(--brass);color:#fff;box-shadow:var(--sh-1)}
.btn-brass:hover{background:var(--brass-ink);color:#fff;box-shadow:var(--sh-2)}
.btn-ghost{background:transparent;color:var(--ink);border-color:var(--line-2)}
.btn-ghost:hover{background:var(--surface);color:var(--ink);border-color:var(--ink-3)}
.btn-sm{padding:9px 16px;font-size:.86rem}
.btn-block{width:100%}
/* Inside a dark panel a walnut button disappears, so it inverts. */
.on-dark .btn-primary{background:var(--on-dark);color:var(--walnut)}
.on-dark .btn-primary:hover{background:#fff;color:var(--walnut)}
.on-dark .btn-ghost{color:var(--on-dark);border-color:rgba(246,241,233,.35)}
.on-dark .btn-ghost:hover{background:rgba(246,241,233,.10);color:var(--on-dark)}

/* ---------------------------------------------------------------- sections */
.sec{padding-block:clamp(44px,6vw,86px)}
.sec-band{background:var(--band)}
.sec-surface{background:var(--surface)}
.sec-dark{background:var(--walnut);color:var(--on-dark)}
.sec-dark h2,.sec-dark h3{color:var(--on-dark)}
.sec-dark .lede,.sec-dark .muted{color:var(--on-dark-2)}
.sec-dark a{color:#E7C99A}
.sec-head{max-width:74ch;margin-bottom:clamp(24px,3vw,42px)}
.sec-head.center{margin-inline:auto;text-align:center}
.sec-head h2{position:relative;padding-top:18px}
.sec-head h2::before{
  content:"";position:absolute;top:0;left:0;width:46px;height:4px;border-radius:2px;
  background:var(--brass);
}
.sec-head.center h2::before{left:50%;transform:translateX(-50%)}

/* ------------------------------------------------------------ product cards */
.grid{display:grid;gap:clamp(16px,2vw,26px)}
.grid-4{grid-template-columns:repeat(4,minmax(0,1fr))}
.grid-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.grid-2{grid-template-columns:repeat(2,minmax(0,1fr))}

.card{
  /* The card, not the viewport, decides how its foot is laid out. A grid of
     four at 1550 and a grid of three at 760 give very different card widths at
     similar viewport widths, so a media query is asking the wrong question. */
  container-type:inline-size;
  display:flex;flex-direction:column;min-width:0;
  background:var(--surface);border-radius:var(--r-md);overflow:hidden;
  border:1px solid var(--line);
  transition:transform .2s var(--ease),box-shadow .2s var(--ease),border-color .2s var(--ease);
}
.card:hover{transform:translateY(-3px);box-shadow:var(--sh-2);border-color:var(--line-2)}
.card-media{display:block;background:var(--plate);aspect-ratio:1/1;overflow:hidden}
.card-media img{display:block;width:100%;height:100%;object-fit:cover}
.card-body{display:flex;flex-direction:column;gap:7px;padding:16px 16px 18px;min-width:0;flex:1}
.card-dept{font-size:.72rem;font-weight:700;letter-spacing:.13em;text-transform:uppercase;color:var(--ink-3)}
.card-name{font-size:.98rem;font-weight:700;line-height:1.35;margin:0;min-width:0}
.card-name a{color:var(--ink)}
.card-name a:hover{color:var(--brass-ink)}
.card-spec{font-size:.82rem;color:var(--ink-2);min-width:0}
/* The price and the buy button share one row only while there is room for
   both. What went wrong before is worth writing down, because it is a cousin
   of the myduxtop defect in §5 rather than the same one.
   There the flex child could not shrink (min-width:auto) and pushed the
   container wider. Here the opposite: min-width:0 was set on BOTH children, so
   the button shrank below its own text and broke "Buy on Amazon" across two
   lines, and the price box shrank below its digits, which then spilled out of
   the box and ran underneath the button. The boxes never intersected, so a
   box-versus-box measurement saw nothing while a reader saw a clipped price.
   The rule now: neither child shrinks, and the row wraps instead. */
.card-foot{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;
  margin-top:auto;padding-top:12px}
.price{font-family:"Fraunces",serif;font-size:1.2rem;font-weight:600;
  font-variant-numeric:tabular-nums;flex:0 0 auto;white-space:nowrap}
.price-none{font-family:"Manrope",sans-serif;font-size:.82rem;font-weight:700;
  color:var(--ink-3);line-height:1.25;flex:0 0 auto}
.card-foot .btn{margin-left:auto;flex:0 0 auto;white-space:nowrap}
/* Once the row has wrapped the button is alone on its line, and a right-hugging
   stub under a left-hugging price reads as a mistake. It takes the line. */
/* Below this the two no longer fit side by side, so they stop trying: the
   price sits on its own line and the button takes the width. The number comes
   from the measurement, not from a round guess. The widest price is seven
   characters and the button is 122px, which needs 238px of content box. */
@container (max-width:250px){
  .card-foot{flex-direction:column;align-items:stretch;gap:10px}
  .card-foot .btn{margin-left:0;width:100%}
}
/* Proportion. This is a card in a grid of twelve, not the page's main call to
   action, so it sits a step below the button on a product page. */
.card-foot .btn-sm{padding:8px 15px;font-size:.83rem;letter-spacing:0}

/* ----------------------------------------------------------- department tiles */
.tiles{display:grid;gap:clamp(14px,1.8vw,22px);grid-template-columns:repeat(5,minmax(0,1fr))}
.tile{
  position:relative;display:flex;flex-direction:column;min-width:0;
  border-radius:var(--r-md);overflow:hidden;background:var(--surface);
  border:1px solid var(--line);transition:transform .2s var(--ease),box-shadow .2s var(--ease);
}
.tile:hover{transform:translateY(-3px);box-shadow:var(--sh-2)}
.tile img{display:block;width:100%;aspect-ratio:4/3;object-fit:cover;background:var(--plate)}
.tile-body{padding:13px 14px 16px}
.tile-name{font-weight:700;font-size:.96rem;color:var(--ink);display:block}
.tile a{text-decoration:none}
.tile a:hover{text-decoration:none}
.tile-n{font-size:.79rem;color:var(--ink-3)}

/* ---------------------------------------------------------------- gallery */
.gallery{display:grid;gap:10px;grid-template-columns:repeat(4,minmax(0,1fr))}
.gallery figure{margin:0;position:relative;border-radius:var(--r-sm);overflow:hidden;background:var(--plate)}
.gallery img{display:block;width:100%;aspect-ratio:1/1;object-fit:cover;
  transition:transform .5s var(--ease)}
.gallery a:hover img{transform:scale(1.035)}
.gallery figcaption{
  position:absolute;left:0;right:0;bottom:0;padding:26px 12px 10px;
  font-size:.78rem;color:#fff;line-height:1.35;
  background:linear-gradient(to top,rgba(30,26,22,.72),rgba(30,26,22,0));
  opacity:0;transition:opacity .2s var(--ease);
}
.gallery a:hover figcaption,.gallery a:focus-visible figcaption{opacity:1}

/* ------------------------------------------------------------------ tables */
/* No min-width and no nowrap on headings. Those two were what pushed a table
   past its container and produced a scrollbar on a table that had no need of
   one. The wrap keeps overflow-x as a safety net for a table that genuinely
   cannot narrow further, not as the normal way tables behave here. */
.table-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:var(--r-md);
  background:var(--surface);-webkit-overflow-scrolling:touch}
table{border-collapse:collapse;width:100%;font-size:.92rem}
caption{text-align:left;padding:15px 18px 3px;color:var(--ink-2);font-size:.85rem;line-height:1.45}
th,td{padding:13px 18px;text-align:left;border-bottom:1px solid var(--line);vertical-align:top}
thead th{
  background:var(--band);font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--ink-2);font-weight:700;line-height:1.35;vertical-align:bottom;
}
tbody th[scope="row"]{font-weight:700;color:var(--ink);font-size:.96rem}
/* A row header that links somewhere has to look like it does. Full brass on
   ten department names is too much colour for one table, so the affordance is
   a quiet underline that firms up on hover. */
tbody th[scope="row"] a{color:var(--ink);text-decoration:underline;
  text-decoration-color:var(--line-2);text-decoration-thickness:1px;text-underline-offset:4px}
tbody th[scope="row"] a:hover{color:var(--brass-ink);text-decoration-color:var(--brass)}
/* Not another data row: a count of what the data does not say. */
tbody tr.row-note{background:var(--band)}
tbody tr.row-note:hover{background:var(--band)}
tbody tr.row-note th[scope="row"]{color:var(--ink-2);font-weight:600}
tbody tr.row-note td{color:var(--ink-2)}
tbody tr.row-note th,tbody tr.row-note td{border-top:1px solid var(--line-2)}
/* Zebra rather than a rule per row: with wrapping prose cells the row heights
   vary a lot, and a tint tracks the eye across a wide row better than a line. */
tbody tr:nth-child(even){background:var(--paper)}
tbody tr:last-child td,tbody tr:last-child th{border-bottom:0}
tbody tr:hover{background:var(--plate)}
td b{font-weight:700}
.num{font-variant-numeric:tabular-nums}
th.num,td.num{text-align:right;white-space:nowrap}
.cell-sub{display:block;font-size:.78rem;font-weight:600;color:var(--ink-3);margin-top:2px}
.cell-range{display:block;white-space:nowrap;line-height:1.5;font-variant-numeric:tabular-nums}
.cell-range i{font-style:normal;color:var(--ink-3);font-size:.76rem;
  display:inline-block;width:1.1em;font-weight:700}
.table-note{margin-top:10px}

/* Phone: the head row goes away and each row becomes a small card of
   label and value pairs. A five column comparison cannot be read on a 390px
   screen in any other arrangement, and a scrollbar is not reading. */
@media (max-width:760px){
  .table-wrap{overflow-x:visible;border:0;background:transparent;border-radius:0}
  /* The table box itself has to become a block. Left as display:table it keeps
     sizing itself from the min-content of its cells, and the rows then measure
     wider than the phone even though every one of them is display:block. */
  table.rt{display:block;width:100%;font-size:.94rem}
  table.rt caption{display:block;padding:0 0 12px}
  table.rt colgroup{display:none}
  /* Not visually hidden but removed. With the table box itself turned into a
     block the row and cell semantics are already gone for assistive tech, so a
     clipped head row buys nothing and its inner row still lays out at full
     table width, which the browser audit correctly reported as an element
     wider than the phone. Every label it carried is on the cell instead. */
  table.rt thead{display:none}
  table.rt tbody{display:block}
  table.rt tbody tr{
    display:block;background:var(--surface);border:1px solid var(--line);
    border-radius:var(--r-md);padding:6px 0;margin-bottom:12px;
  }
  table.rt tbody tr:nth-child(even){background:var(--surface)}
  table.rt tbody tr:hover{background:var(--surface)}
  table.rt tbody th[scope="row"]{
    display:block;border-bottom:1px solid var(--line);padding:10px 16px 11px;
    font-size:1.02rem;
  }
  /* The card title needs its label as much as the rows below it do. In the
     hall-width table the row header is the bare figure "36 in", and without
     the label a card opens on a number with no idea what it measures. */
  table.rt tbody th[scope="row"]::before{
    content:attr(data-label);display:block;
    font-size:.7rem;letter-spacing:.08em;text-transform:uppercase;
    color:var(--ink-3);font-weight:700;margin-bottom:1px;
  }
  table.rt tbody td{
    display:flex;gap:14px;align-items:baseline;border-bottom:0;padding:7px 16px;
    text-align:left;
  }
  table.rt tbody td.num{text-align:left;white-space:normal}
  table.rt tbody td::before{
    content:attr(data-label);flex:0 0 36%;min-width:0;
    color:var(--ink-2);font-size:.76rem;font-weight:700;letter-spacing:.04em;
    text-transform:uppercase;line-height:1.4;
  }
  table.rt tbody td > *{min-width:0}
  table.rt tbody tr td:last-child{padding-bottom:12px}
}

/* ------------------------------------------------------------- value blocks */
.panels{display:grid;gap:clamp(16px,2vw,24px);grid-template-columns:repeat(3,minmax(0,1fr))}
.panel{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r-md);
  padding:22px 22px 24px;min-width:0;
}
.panel h3{margin-bottom:.4em}
.panel p:last-child{margin-bottom:0}
.panel-plate{background:var(--plate);border-color:var(--line-2)}
.stat{display:flex;gap:14px;align-items:baseline;min-width:0}
.stat-n{font-family:"Fraunces",serif;font-size:2.1rem;font-weight:600;line-height:1;
  color:var(--brass-ink);font-variant-numeric:tabular-nums}
.stat-l{font-size:.88rem;color:var(--ink-2);min-width:0}
.stats{display:grid;gap:18px 26px;grid-template-columns:repeat(4,minmax(0,1fr))}

.split{display:grid;gap:clamp(24px,3.5vw,48px);grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:center}
.split img{border-radius:var(--r-md);width:100%;display:block}
.split-3-2{grid-template-columns:minmax(0,1.35fr) minmax(0,1fr)}

.facts{list-style:none;padding:0;margin:0}
.facts li{display:flex;gap:12px;padding:11px 0;border-bottom:1px solid var(--line);
  font-size:.93rem;min-width:0}
.facts li:last-child{border-bottom:0}
.facts dt,.facts .k{color:var(--ink-2);flex:0 0 42%;min-width:0}
.facts .v{font-weight:700;min-width:0}

/* ------------------------------------------------------------------- tools */
.tool{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:clamp(20px,3vw,32px);box-shadow:var(--sh-1)}
.tool-row{display:flex;gap:14px;flex-wrap:wrap;align-items:flex-end}
.field{display:flex;flex-direction:column;gap:6px;min-width:0;flex:1 1 150px}
.field label{font-size:.8rem;font-weight:700;color:var(--ink-2);letter-spacing:.04em}
.field input,.field select{
  font:inherit;font-size:.95rem;padding:11px 13px;border:1px solid var(--line-2);
  border-radius:var(--r-sm);background:var(--paper);color:var(--ink);min-width:0;
}
.field input:focus,.field select:focus{outline:none;box-shadow:var(--ring);border-color:var(--brass)}
.tool-out{margin-top:20px;font-size:.95rem}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin:0;padding:0;list-style:none}
.chip{
  display:inline-flex;align-items:center;gap:7px;padding:7px 14px;border-radius:var(--r-pill);
  background:var(--band);border:1px solid var(--line);font-size:.85rem;font-weight:600;color:var(--ink);
}
a.chip:hover{background:var(--plate);text-decoration:none;border-color:var(--line-2)}
.chip[aria-pressed="true"]{background:var(--walnut);color:var(--on-dark);border-color:var(--walnut)}

/* ------------------------------------------------------------- product page */
.pdp{display:grid;gap:clamp(26px,4vw,54px);grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);
  align-items:start;padding-block:clamp(26px,3.5vw,44px)}
.pdp-media{min-width:0;position:sticky;top:96px}
.pdp-photo{
  background:var(--plate);border-radius:var(--r-lg);overflow:hidden;border:1px solid var(--line);
}
.pdp-photo img{display:block;width:100%;height:auto}
/* Column count is set inline per product from the real frame count, so a
   filmstrip never leaves one orphan tile on a second row (§5). */
.filmstrip{display:grid;gap:8px;margin-top:10px}
.pdp-info h1{font-size:clamp(1.8rem,1.3rem + 1.7vw,2.7rem)}
.filmstrip button{
  padding:0;border:1px solid var(--line);background:var(--plate);border-radius:var(--r-xs);
  overflow:hidden;cursor:pointer;aspect-ratio:1/1;
}
.filmstrip button[aria-current="true"]{border-color:var(--brass);box-shadow:var(--ring)}
.filmstrip img{display:block;width:100%;height:100%;object-fit:cover}
.pdp-info{min-width:0}
.pdp-price{font-family:"Fraunces",serif;font-size:2.1rem;font-weight:600;
  font-variant-numeric:tabular-nums;margin:.1em 0 .1em}
.pdp-buy{display:flex;gap:12px;flex-wrap:wrap;margin:20px 0 8px}
.pdp-buy .btn{flex:1 1 210px;min-width:0}
.badges{display:flex;flex-wrap:wrap;gap:7px;margin:14px 0 0;padding:0;list-style:none}
.badge{font-size:.78rem;font-weight:700;letter-spacing:.02em;padding:5px 11px;border-radius:var(--r-pill);
  background:var(--sage-pale);color:#3F4A3B}
.pdp-sections{padding-bottom:clamp(30px,4vw,60px)}
.pdp-sec{padding-block:clamp(22px,3vw,34px);border-top:1px solid var(--line)}
.pdp-sec h2{font-size:clamp(1.35rem,1.1rem + 1vw,1.85rem)}

/* --------------------------------------------------------------- breadcrumb */
.crumbs{font-size:.83rem;color:var(--ink-2);padding-block:14px}
.crumbs ol{list-style:none;display:flex;flex-wrap:wrap;gap:8px;margin:0;padding:0}
.crumbs li::after{content:"/";margin-left:8px;color:var(--line-2)}
.crumbs li:last-child::after{content:""}
.crumbs a{color:var(--ink-2)}

/* ------------------------------------------------------------------ article */
.prose{max-width:74ch}
.prose h2{margin-top:1.9em}
.prose h3{margin-top:1.5em}
.prose figure{margin:2em 0}
.prose figure img{width:100%;border-radius:var(--r-md);display:block;background:var(--plate)}
.prose figcaption{font-size:.85rem;color:var(--ink-2);margin-top:9px}
.prose blockquote{
  margin:1.8em 0;padding:4px 0 4px 22px;border-left:4px solid var(--brass);
  color:var(--ink-2);font-size:1.05rem;
}
.prose .table-wrap{margin:1.9em 0}
.toc{background:var(--band);border-radius:var(--r-md);padding:20px 24px;margin:0 0 2.2em}
.toc h2{font-size:1rem;font-family:"Manrope",sans-serif;font-weight:700;margin:0 0 .55em}
.toc ol{margin:0;padding-left:1.1em;font-size:.93rem}
.article-meta{display:flex;flex-wrap:wrap;gap:8px 18px;font-size:.84rem;color:var(--ink-2);
  margin:0 0 1.8em}
/* Two columns so a 500px photograph, which is as large as any source in this
   range gets, has a column its own size instead of a stretched full-width band. */
.article-head{display:grid;gap:clamp(24px,4vw,52px);
  grid-template-columns:minmax(0,1fr) minmax(0,500px);align-items:center;margin-bottom:1em}
.article-hero{margin:0}
.article-hero img{display:block;box-shadow:var(--sh-2)}
@media (max-width:900px){.article-head{grid-template-columns:minmax(0,1fr)}}
.callout{
  background:var(--sage-pale);border-radius:var(--r-md);padding:20px 22px;margin:1.9em 0;
  font-size:.95rem;
}
.callout h3{margin-top:0;font-size:1.05rem}
.callout p:last-child{margin-bottom:0}

/* related */
.related{display:grid;gap:14px;grid-template-columns:repeat(4,minmax(0,1fr))}

/* ------------------------------------------------------------------- footer */
.cr-foot{background:var(--walnut);color:var(--on-dark-2);margin-top:0}
.cr-foot-reed{height:14px;background-color:var(--walnut);border-bottom:1px solid rgba(246,241,233,.10)}
.cr-foot a{color:var(--on-dark-2)}
.cr-foot a:hover{color:var(--on-dark)}
.cr-foot h2,.cr-foot h3{color:var(--on-dark);font-family:"Manrope",sans-serif;
  font-size:.78rem;letter-spacing:.15em;text-transform:uppercase;font-weight:700;margin-bottom:1em}
.foot-top{display:grid;gap:clamp(24px,3vw,44px);
  grid-template-columns:minmax(0,1.4fr) repeat(4,minmax(0,1fr));padding-block:clamp(38px,5vw,60px)}
.foot-brand .wordmark{color:var(--on-dark)}
.foot-brand .wordmark small{color:var(--on-dark-2)}
.foot-brand p{font-size:.9rem;margin-top:14px;max-width:36ch}
.foot-list{list-style:none;margin:0;padding:0;font-size:.9rem}
.foot-list li{margin:0 0 .6em}
.foot-mid{border-top:1px solid rgba(246,241,233,.14);padding-block:26px;
  display:grid;gap:26px;grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
.pay{list-style:none;display:flex;flex-wrap:wrap;gap:10px;margin:0;padding:0}
.pay li{
  display:flex;align-items:center;justify-content:center;
  height:34px;padding:0 12px;border-radius:var(--r-xs);
  background:rgba(246,241,233,.09);border:1px solid rgba(246,241,233,.16);
}
.pay svg{display:block;height:16px;width:auto}
.foot-bot{border-top:1px solid rgba(246,241,233,.14);padding-block:22px;font-size:.82rem;
  display:flex;flex-wrap:wrap;gap:10px 22px;align-items:center}
.foot-bot p{margin:0}
.disclosure{font-size:.82rem;line-height:1.6;max-width:70ch}

/* ------------------------------------------------------------------ filters */
.filterbar{display:flex;flex-wrap:wrap;gap:10px;align-items:center;
  padding:16px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-md);
  margin-bottom:clamp(18px,2.5vw,28px)}
.filterbar .field{flex:0 1 180px}
.count{font-size:.86rem;color:var(--ink-2);margin-left:auto}

/* --------------------------------------------------------------- utilities */
.center{text-align:center}
.mt-0{margin-top:0}
.mb-0{margin-bottom:0}
.stack>*+*{margin-top:1.1em}
.skip{
  position:absolute;left:-9999px;top:0;background:var(--walnut);color:var(--on-dark);
  padding:12px 18px;border-radius:0 0 var(--r-sm) 0;z-index:100;
}
.skip:focus{left:0}

/* ---------------------------------------------------------------- responsive */
@media (max-width:1080px){
  .grid-4{grid-template-columns:repeat(3,minmax(0,1fr))}
  .tiles{grid-template-columns:repeat(3,minmax(0,1fr))}
  .related{grid-template-columns:repeat(3,minmax(0,1fr))}
  .foot-top{grid-template-columns:repeat(3,minmax(0,1fr))}
  .foot-brand{grid-column:1/-1}
}
@media (max-width:900px){
  .cr-hero .wrap{grid-template-columns:minmax(0,1fr)}
  .hero-art{justify-self:start;width:min(100%,460px)}
  .pdp{grid-template-columns:minmax(0,1fr)}
  .pdp-media{position:static}
  .split,.split-3-2{grid-template-columns:minmax(0,1fr)}
  .panels{grid-template-columns:repeat(2,minmax(0,1fr))}
  .stats{grid-template-columns:repeat(2,minmax(0,1fr))}
  .foot-mid{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:700px){
  body{font-size:16px}
  .grid-4,.grid-3{grid-template-columns:repeat(2,minmax(0,1fr))}
  .tiles{grid-template-columns:repeat(2,minmax(0,1fr))}
  .related{grid-template-columns:repeat(2,minmax(0,1fr))}
  .gallery{grid-template-columns:repeat(2,minmax(0,1fr))}
  .panels{grid-template-columns:minmax(0,1fr)}
  .foot-top{grid-template-columns:repeat(2,minmax(0,1fr))}
  .cr-nav{gap:0}
  .cr-nav a,.cr-nav button{padding:8px 10px;font-size:.88rem}
}
@media (max-width:480px){
  .grid-2{grid-template-columns:minmax(0,1fr)}
  .foot-top{grid-template-columns:minmax(0,1fr)}
}

@media (prefers-reduced-motion:reduce){
  *{animation-duration:.01ms!important;transition-duration:.01ms!important}
  .card:hover,.tile:hover,.btn:hover{transform:none}
}

@media print{
  .cr-head,.cr-topbar,.cr-foot,.pdp-buy{display:none}
  body{background:#fff}
}