:root {
  color-scheme: light;
  --ink: #262322;
  --text: #342d29;
  --muted: #584944;
  --line: #d9c8bc;
  --paper: #f6f1e7;
  --white: #fff;
  --parchment: #f1e6dd;
  --accent: #7a2d23;
  --focus: #7a2d23;
  font-family: system-ui, sans-serif;
  color: var(--text);
  background: var(--paper);
}
*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
body { margin: 0; font-size: 1rem; line-height: 1.55; overflow-wrap: anywhere; }
main { padding-block: 1.4rem 3.5rem; }
h1, h2, h3, p, ol, ul, figure, dl { margin-block-start: 0; }
h1, h2, h3 { color: var(--ink); line-height: 1.14; margin-block-end: .65em; }
h1 { font-size: clamp(2rem, 5vw, 4.25rem); letter-spacing: -.045em; }
h2 { font-size: clamp(1.25rem, 2.5vw, 1.8rem); }
h3 { font-size: 1.12rem; }
p { margin-block-end: .85rem; }
a { color: var(--accent); text-underline-offset: .19em; }
a:hover { text-decoration-thickness: .15em; }
img { display: block; max-width: 100%; height: auto; }
button, select, input { min-width: 0; max-width: 100%; font: inherit; color: inherit; }
button, .button, .add-cart {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  min-height: 44px; border: 1px solid var(--ink); border-radius: .45rem;
  padding: .47rem .75rem; background: var(--white); color: var(--ink);
  font-weight: 700; text-decoration: none; cursor: pointer; text-align: center;
}
button:hover, .button:hover { background: var(--parchment); }
.button.primary, .add-cart, .site-search button { background: var(--ink); color: var(--white); }
.button.primary:hover, .add-cart:hover, .site-search button:hover { background: var(--accent); }
input, select { width: 100%; min-height: 44px; border: 1px solid #667b82; border-radius: .35rem; padding: .35rem .5rem; background: var(--white); }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }
.frame { width: min(76rem, calc(100% - 2.2rem)); margin-inline: auto; }
.eyebrow, .product-brand, .diagram-number { font: 700 .79rem/1.45 ui-monospace, SFMono-Regular, Consolas, monospace; color: var(--accent); letter-spacing: .055em; }
.visually-hidden, .skip:not(:focus) { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.skip:focus { position: absolute; z-index: 5; padding: .6rem; background: var(--white); }
.masthead { border-top: 4px solid var(--accent); background: var(--white); border-bottom: 1px solid var(--line); }
.masthead-main { display: grid; grid-template-columns: auto minmax(14rem, 1fr) auto; align-items: center; gap: 1.35rem; padding-block: .85rem; }
.wordmark { display: flex; align-items: center; gap: .55rem; font-weight: 700; text-decoration: none; color: var(--ink); line-height: 1.15; }
.wordmark strong { display: block; }
.wordmark img { flex: 0 0 38px; }
.site-search { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: .35rem; }
.utility, .nav-inner { display: flex; align-items: center; flex-wrap: wrap; gap: .25rem 1.05rem; }
.utility a, .nav-inner > a, .department-menu summary { display: inline-flex; align-items: center; gap: .35rem; min-height: 44px; font-weight: 700; }
.utility span { color: var(--ink); font-size: .82em; }
.navigation { border-top: 1px solid var(--line); }
.nav-inner { position: relative; }
.department-menu summary { cursor: pointer; }
.department-menu[open] > div { position: absolute; z-index: 3; inset-inline: 0; display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 1rem; padding: 1rem; border: 1px solid var(--line); background: var(--white); box-shadow: 0 .5rem 1rem #24212626; }
.department-menu a { display: block; padding-block: .25rem; }
.compare-tray { padding-block: .45rem; color: var(--ink); }
.preview-banner { margin: 0; background: var(--parchment); color: var(--ink); padding: .35rem 1rem; text-align: center; }
.filter-toolbar label { display: grid; gap: .18rem; font-weight: 700; }
.section-block { margin-top: 2rem; }
.section-heading { display: flex; align-items: baseline; justify-content: space-between; gap: .7rem; margin-bottom: .55rem; }
.section-heading > h2 { margin: 0; }
.section-heading > a { flex: 0 1 auto; font-weight: 700; }
.product-grid, .guide-grid, .department-grid, .comparison-grid { display: grid; gap: .85rem; grid-template-columns: repeat(3, minmax(0,1fr)); align-items: stretch; }
.supply-card, .guide-card, .department-grid > section, .comparison-item { min-width: 0; border: 1px solid var(--line); background: var(--white); border-radius: .75rem; }
.supply-card { display: flex; flex-direction: column; }
.supply-photo { position: relative; display: grid; place-items: center; min-height: 8rem; padding: .6rem; border-bottom: 1px solid var(--line); background: #fffefa; border-radius: .75rem .75rem 0 0; }
.supply-photo img { width: 100%; height: clamp(8.5rem, 15vw, 13rem); object-fit: contain; mix-blend-mode: multiply; }
.supply-photo .favorite { position: absolute; inset-block-start: .5rem; inset-inline-end: .5rem; }
.favorite { min-width: 44px; font-size: 1.3rem; line-height: 1; }
.favorite[aria-pressed=true], .compare-choice[aria-pressed=true] { background: var(--parchment); }
.supply-copy { padding: .75rem .8rem 0; }
.supply-copy h3 { margin-bottom: .45rem; }
.supply-copy h3 a { color: var(--ink); }
.pack-line, .supply-summary, .merchant-note, figcaption, .research-note { color: var(--muted); }
.pack-line { margin-bottom: .45rem; font-size: .86rem; }
.card-buy { display: grid; align-content: end; gap: .35rem; padding: 0 .8rem .8rem; margin-top: auto; }
.compare-choice { justify-self: start; }
.price-amount { font-weight: 800; font-size: 1.26rem; }
.price-observed, .price-info { color: var(--muted); font-size: .84rem; }
.price-observed { display: block; }
.price-info summary { color: var(--accent); cursor: pointer; padding-block: .18rem; }
.price-info p { margin: .3rem 0; }
.department-grid > section, .guide-card, .comparison-item { padding: .9rem; }
.department-grid ul { padding-inline-start: 1.1rem; margin-bottom: 0; }
.department-grid li { margin-block: .2rem; }
.guide-card { text-decoration: none; }
.guide-card p { color: var(--muted); }
.guide-card span { text-decoration: underline; }
.breadcrumb { display: flex; flex-wrap: wrap; gap: .4rem; font-size: .88rem; margin-bottom: .75rem; }
.page-heading { border-bottom: 1px solid var(--line); padding-bottom: .8rem; margin-bottom: 1rem; }
.page-heading h1, .reading-page h1, .product-title h1 { font-size: clamp(1.85rem, 4vw, 3.2rem); }
.category-jumps, .product-section-nav { display: flex; flex-wrap: wrap; gap: .35rem .9rem; }
.catalogue-layout { display: grid; grid-template-columns: minmax(0,1fr); gap: 1rem; }
.catalogue-rail { display: flex; align-items: flex-start; gap: .85rem; }
.filter-toolbar { flex: 1; min-width: 0; padding: .6rem; border: 1px solid var(--line); border-radius: .65rem; background: var(--white); }
.filter-toolbar summary { cursor: pointer; font-weight: 700; }
.filter-toolbar form { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); align-items: end; gap: .5rem; padding-top: .6rem; }
.measurement-links { font-size: .88rem; max-width: 11rem; }
.results-toolbar { display: flex; align-items: center; justify-content: space-between; gap: .5rem; }
.results-toolbar label { display: flex; align-items: center; gap: .45rem; }
.results-toolbar p { margin-bottom: 0; }
.catalogue-results .product-grid { margin-top: .5rem; }
.detail-layout { display: grid; grid-template-columns: minmax(0,1.3fr) minmax(0, .9fr); grid-template-areas: "photo buy"; gap: 1rem; }
.purchase-panel, .detail-visual, .knowledge-section, .reading-page, .faq-block, .empty-state, .cart-summary { min-width: 0; background: var(--white); border: 1px solid var(--line); border-radius: .75rem; padding: 1rem; }
.purchase-panel { grid-area: buy; align-self: start; }
.detail-visual { grid-area: photo; margin: 0; }
.detail-visual img { width: 100%; max-height: 28rem; object-fit: contain; }
.detail-visual figcaption { margin-top: .5rem; }
.purchase-head, .purchase-row, .selection-actions { display: flex; align-items: flex-start; gap: .45rem; flex-wrap: wrap; }
.purchase-head { justify-content: space-between; }
.purchase-row { align-items: start; }
.purchase-row .add-cart { flex: 1 1 9rem; }
.purchase-panel > .merchant-note { margin-top: .45rem; }
.spec-list { margin-bottom: .5rem; }
.spec-list > div { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1.5fr); gap: .6rem; padding: .25rem 0; border-bottom: 1px solid var(--line); }
dt { font-weight: 700; }
dd { margin-inline: 0; }
.detail-reading { display: grid; grid-template-columns: minmax(0,10rem) minmax(0,1fr); gap: 1rem; margin-top: 1.2rem; }
.product-section-nav { align-content: start; flex-direction: column; }
.detail-sections, .cart-layout { display: grid; gap: .8rem; }
.detail-sections > * { margin: 0; }
.faq-item, .knowledge-section details, .faq-block details { margin-block: .45rem; padding: .55rem; border-top: 1px solid var(--line); }
.faq-item summary, .knowledge-section details summary, .faq-block summary { cursor: pointer; font-weight: 700; }
.faq-item p, .knowledge-section details p, .faq-block details p { margin: .55rem 0 0; }
.reading-page { max-width: 54rem; margin-bottom: 1rem; }
.category-editorial, .guide-connections { margin-top: 1rem; }
.comparison-grid { grid-template-columns: repeat(4,minmax(0,1fr)); }
.comparison-item img, .cart-picture img { aspect-ratio: 1; object-fit: contain; }
.cart-layout { grid-template-columns: minmax(0, 2fr) minmax(0,1fr); }
.cart-item { display: grid; grid-template-columns: minmax(0,6rem) minmax(0,1fr) auto; align-items: start; gap: .7rem; background: var(--white); border: 1px solid var(--line); border-radius: .6rem; padding: .65rem; margin-bottom: .6rem; }
.cart-item h2 { font-size: 1.07rem; }
.quantity-label { display: block; margin: .4rem 0; }
.quantity-label input { display: block; width: 5.3rem; }
.cart-purchase { display: grid; gap: .25rem; }
.cart-summary { align-self: start; }
footer { border-top: 1px solid var(--line); background: var(--white); padding-block: 1.5rem; }
.footer-grid { display: grid; grid-template-columns: minmax(0,1.5fr) minmax(0,1fr); gap: .8rem; }
.footer-grid nav { display: flex; flex-wrap: wrap; align-content: start; gap: .5rem .8rem; }
.footer-brand { font-weight: 700; }
@media (max-width: 900px) {
  .masthead-main { grid-template-columns: auto minmax(0,1fr); gap: .5rem .75rem; }
  .utility { grid-column: 1 / -1; }
  .comparison-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
}
@media (max-width: 700px) {
  .detail-layout, .detail-reading, .cart-layout { grid-template-columns: minmax(0,1fr); }
  .detail-layout { grid-template-areas: "photo" "buy"; gap: .6rem; }
  .detail-visual { padding: .55rem; }
  .detail-visual img { height: clamp(8.5rem, 44vw, 12.5rem); }
  .detail-visual figcaption { margin-top: .15rem; font-size: .87rem; }
  .purchase-row { display: grid; grid-template-columns: minmax(0,1fr) auto; }
  .purchase-row .add-cart:only-child { grid-column: 1 / -1; }
  .purchase-row .detail-price[hidden] + .add-cart { grid-column: 1 / -1; }
  .product-section-nav { flex-direction: row; }
  .catalogue-rail { display: grid; }
  .measurement-links { max-width: none; }
  .filter-toolbar form { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .product-grid, .department-grid, .guide-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
}
@media (max-width: 490px) {
  .frame { width: calc(100% - 1.25rem); }
  main { padding-top: .7rem; }
  .hero-brief .primary { margin-block: 0; }
  .guide-shortcut { margin: .2rem 0 0 .3rem; }
  .masthead-main { grid-template-columns: minmax(0,1fr); }
  .nav-inner { gap: .1rem .68rem; font-size: .89rem; }
  .department-menu[open] > div { position: static; display: block; }
  .department-menu[open] > div section + section { margin-top: .6rem; }
  .product-grid, .comparison-grid, .department-grid, .guide-grid, .footer-grid { grid-template-columns: minmax(0,1fr); }
  .supply-photo img { height: 11rem; }
  .cart-item { grid-template-columns: minmax(0,4.5rem) minmax(0,1fr); }
  .cart-purchase { grid-column: 1 / -1; }
}
.category-reading { display: grid; gap: .85rem; margin-top: 1.3rem; }
.example-grid { display: grid; gap: .65rem; grid-template-columns: repeat(auto-fit,minmax(min(100%,13rem),1fr)); }
.example-grid article { min-width: 0; padding: .65rem; border: 1px solid var(--line); border-radius: .45rem; background: var(--paper); }
.example-grid h4 { margin: 0 0 .4rem; }
.guide-comparison-links { display: flex; flex-wrap: wrap; gap: .4rem .9rem; }
.guide-comparison li { margin-bottom: 1rem; }


/* The numbered darkroom stations and the format-first shop controls. */
.darkroom-start {
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(16rem,.6fr);
  align-items:end;
  gap:1rem 2rem;
  padding:clamp(1rem,3vw,2rem);
  color:#f6f1e7;
  background:#292321;
  border-block-end:.35rem solid var(--accent);
}
.darkroom-start h1 {
  margin:.12rem 0 .45rem;
  color:inherit;
  font-family:Georgia,serif;
  font-weight:600;
  letter-spacing:-.04em;
}
.darkroom-intro p { max-width:52ch; margin:0; }
.darkroom-intro .eyebrow { color:#f2a18c; }
.format-chooser {
  display:grid;
  gap:.4rem;
  padding-block-start:.55rem;
  border-block-start:1px solid #ad8b80;
}
.format-chooser label { font-weight:700; }
.format-chooser div { display:flex; flex-wrap:wrap; gap:.45rem; }
.format-chooser select { flex:1 1 9rem; width:100%; min-width:0; }
.format-chooser button { color:#292321; background:#f5d9cb; border-color:#f5d9cb; }
.format-chooser button:hover { background:#fff2e8; }
.format-chooser :focus-visible { outline:3px solid #f2a18c; }
.bench-featured .supply-card { border-radius:.28rem; }
.bench-stations { display:grid; margin-block:1.6rem; border-block-start:1px solid var(--line); }
.bench-stations > section {
  display:grid;
  grid-template-columns:3.4rem minmax(0,1fr);
  gap:.65rem;
  padding:.8rem 0;
  border-block-end:1px solid var(--line);
}
.station-marker, .format-tab { color:var(--accent); font:700 1rem/1.35 ui-monospace,monospace; }
.bench-stations h2 { margin-bottom:.25rem; }
.bench-stations p { margin-bottom:.4rem; }
.bench-stations ul { display:flex; flex-wrap:wrap; gap:.4rem 1rem; padding:0; margin:0; list-style:none; }
.bench-stations a { display:inline-flex; align-items:center; min-height:44px; font-weight:650; }
.darkroom-rail { display:flex; flex-wrap:wrap; gap:.3rem .9rem; border-block-end:1px solid var(--line); }
.darkroom-rail a { display:inline-flex; align-items:center; min-height:44px; font-weight:700; }
.catalogue-rail .filter-toolbar { width:100%; }
.format-heading { display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:end; gap:.6rem 1rem; }
.format-tab { padding:.5rem .7rem; background:var(--parchment); border-inline-start:.2rem solid var(--accent); }
.detail-layout { grid-template-columns:minmax(0,1fr) minmax(0,1fr); }
.detail-visual { border-radius:.25rem; }
.purchase-panel { border-radius:.25rem; border-top:.22rem solid var(--accent); }
.darkroom-fit { margin:.65rem 0; }
.darkroom-fit h2 { margin:0 0 .35rem; font-size:1.1rem; }
.darkroom-fit p { margin:0; }
.format-spec-strip { display:grid; gap:.25rem; margin:.65rem 0; padding:.55rem .65rem; background:var(--parchment); }
.format-spec-strip > div { display:grid; grid-template-columns:minmax(5rem,.65fr) minmax(0,1fr); gap:.4rem; }
.format-spec-strip dt { color:var(--accent); font-size:.82rem; font-weight:700; }
.format-spec-strip dd { margin:0; font-size:.88rem; }
.product-section-nav a { display:flex; align-items:center; min-height:44px; }

@media (min-width:900px) {
  .filter-toolbar form { grid-template-columns:repeat(5,minmax(0,1fr)) auto; align-items:end; }
  .catalogue-results > .product-grid { grid-template-columns:repeat(4,minmax(0,1fr)); }
}
@media (max-width:700px) {
  .darkroom-start, .format-heading, .detail-layout { grid-template-columns:minmax(0,1fr); }
  .format-tab { justify-self:start; margin-bottom:.6rem; }
  .bench-stations > section { grid-template-columns:2.25rem minmax(0,1fr); }
}