/* Hallmark · shape: Catalogue (swapped from the draw's Workbench) · genre: editorial · theme: Ink (deal 1/3, seed f07d7d7e) · job: buy · draw: c292f3
 * hero: Counter, a compact specimen plate of the shop's own category photos (swapped from the draw's Poster) · nav: slab · footer: mast · imagery: product photographs, 31 source thumbnails at native size · signature: the specimen plate, Bob's own catalog photos as doors to each shelf · ink: paper
 * axes: light/grotesk-sans/chromatic-olive · posture: restrained · brand: Bob's Custom Trophies (source CSS #000000 #FFFFFF #87876a) · contrast: pass · fold: pass · v2.0.0 */
/* Hallmark · pre-emit critique: P4 H5 E4 S5 R5 V4 · weakest: P, a calm shop page argues little; the plate and the ruled shelves put the real catalog first instead of a slogan */
/* Hallmark · waive 22 · ink and greys at zero chroma · the trophy shop source brand is plain black on white, and a notice board is printed in plain black */
@import url("./tokens.css");
@import url("./base.css");

/* Chrome */
.skip { position: absolute; left: var(--space-md); top: calc(-1 * var(--space-3xl)); z-index: var(--z-toast); padding: var(--space-xs) var(--space-md); background: var(--color-ink); color: var(--color-paper); border-radius: var(--radius-control); }
.skip:focus-visible { top: var(--space-md); }

.concept-bar { margin: 0; padding: var(--space-xs) var(--gutter); background: var(--color-paper-3); color: var(--color-ink); font-size: var(--text-sm); text-align: center; max-width: none; }
.concept-bar a { font-weight: 600; white-space: nowrap; margin-inline-start: var(--space-xs); }

.slab { background: var(--color-ink); color: var(--color-on-ink); }
.slab__row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-xs) var(--space-xl); min-height: 64px; padding-block: var(--space-sm); }
.wordmark { font-weight: 700; font-size: var(--text-lg); letter-spacing: -0.02em; text-decoration: none; white-space: nowrap; }
.slab__links { display: flex; flex-wrap: wrap; gap: var(--space-xs) var(--space-lg); margin: 0; padding: 0; list-style: none; }
.slab__links a { display: inline-block; padding-block: var(--space-xs); white-space: nowrap; text-decoration: none; font-weight: 600; }
.slab a:hover { text-decoration: underline; text-decoration-color: var(--color-focus-on-ink); }
.slab a:focus-visible { outline-color: var(--color-focus-on-ink); }

a { font-weight: 600; transition: text-decoration-color var(--dur-micro) var(--ease-out); }
a:hover { text-decoration-color: var(--color-accent); }

/* Controls: Ink's pair */
.btn { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 0 var(--space-lg); border: var(--rule-hair) solid var(--color-rule); border-radius: var(--radius-control); background: var(--color-paper-2); color: var(--color-ink); font-weight: 600; white-space: nowrap; text-decoration: none; cursor: pointer; transition: background-color var(--dur-short) var(--ease-out), transform var(--dur-micro) var(--ease-out); }
.btn:hover { background: var(--color-paper-3); }
.btn:active { transform: translateY(1px); }
.btn:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.btn:disabled, .btn[aria-disabled="true"] { opacity: 0.55; cursor: not-allowed; transform: none; }
.btn--primary { background: var(--color-ink); border-color: var(--color-ink); color: var(--color-paper); }
.btn--primary:hover { background: var(--color-ink-2); }
@media (pointer: coarse) { .btn { min-height: 48px; } }

/* Hero: text on five columns, the specimen plate on seven */
.hero { min-height: calc(100svh - 7rem); display: grid; align-items: center; padding-block: var(--space-2xl); }
.hero__grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--space-3xl); align-items: center; }
.hero__text { display: grid; gap: var(--space-lg); }
.hero h1 { line-height: 1; max-width: 12ch; }
.hero .lead { color: var(--color-ink-2); max-width: 34ch; }
.actions { display: flex; flex-wrap: wrap; gap: var(--space-sm); padding-top: var(--space-xs); }

.plate { border-top: var(--rule-hair) solid var(--color-ink); }
.plate__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 0; padding: 0; list-style: none; }
.plate__grid li { border-bottom: var(--rule-hair) solid var(--color-rule); border-inline-end: var(--rule-hair) solid var(--color-rule); }
.plate__grid li:nth-child(3n) { border-inline-end: 0; }
.plate__grid a { display: grid; grid-template-rows: 1fr auto; gap: var(--space-md); height: 100%; min-height: 15rem; padding: var(--space-lg); text-decoration: none; transition: background-color var(--dur-short) var(--ease-out); }
.plate__grid a:hover { background: var(--color-paper-2); }
.plate__grid a:focus-visible { outline-offset: -2px; }
.plate__pic { display: grid; place-items: center; }
.plate__pic img, .thumb img { mix-blend-mode: multiply; }
.plate__name { font-weight: 600; overflow-wrap: break-word; min-width: 0; }
.plate__grid a:hover .plate__name { text-decoration: underline; text-decoration-color: var(--color-accent); }

/* Catalogue: ruled shelves, one per award type */
.catalog { padding-block: var(--section-gap-s) var(--section-gap); }
.catalog__head { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--space-lg) var(--gap-columns); align-items: end; margin-bottom: var(--space-2xl); }
.filter { display: grid; gap: var(--space-md); }
.seg { display: flex; flex-wrap: wrap; gap: var(--space-xs); margin: 0; padding: 0; border: 0; min-width: 0; }
.seg legend { padding: 0; margin-bottom: var(--space-xs); font-size: var(--text-sm); color: var(--color-ink-2); }
.seg input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; }
.seg label { display: inline-flex; align-items: center; min-height: 44px; padding: 0 var(--space-md); border: var(--rule-hair) solid var(--color-rule); border-radius: var(--radius-pill); background: var(--color-paper); font-weight: 600; font-size: var(--text-sm); white-space: nowrap; cursor: pointer; transition: background-color var(--dur-micro) var(--ease-out), color var(--dur-micro) var(--ease-out); }
.seg label:hover { background: var(--color-paper-2); }
.seg input:checked + label { background: var(--color-ink); border-color: var(--color-ink); color: var(--color-paper); }
.seg input:focus-visible + label { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.seg input:disabled + label { opacity: 0.55; cursor: not-allowed; }
.filter__field { display: grid; gap: var(--space-xs); }
.filter__field label { font-size: var(--text-sm); color: var(--color-ink-2); }
.filter__field input { width: 100%; max-width: 24rem; min-height: 48px; padding: 0 var(--space-md); border: var(--rule-hair) solid var(--color-muted); border-radius: var(--radius-control); background: var(--color-paper); color: var(--color-ink); outline: 2px solid transparent; outline-offset: -3px; }
.filter__field input::placeholder { color: var(--color-muted); }
.filter__field input:focus-visible { outline-color: var(--color-focus); }
.filter__field input:disabled { opacity: 0.55; cursor: not-allowed; }
.filter__status { min-height: 1lh; font-size: var(--text-sm); color: var(--color-ink-2); }

.shelves { border-top: var(--rule-hair) solid var(--color-ink); }
.shelf { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 9fr); gap: var(--space-lg) var(--gap-columns); padding-block: var(--space-xl); border-bottom: var(--rule-hair) solid var(--color-rule); scroll-margin-top: var(--space-xl); }
.shelf h3 { font-size: var(--text-xl); }
.shelf__items { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 8.5rem), 1fr)); gap: var(--space-lg) var(--space-md); margin: 0; padding: 0; list-style: none; }
.shelf__items .product { display: grid; gap: var(--space-sm); text-decoration: none; }
.thumb { display: grid; place-items: center; height: 8.5rem; padding: var(--space-md); background: var(--color-paper-2); border-radius: var(--radius-card); outline: var(--rule-hair) solid var(--color-rule); outline-offset: -1px; transition: background-color var(--dur-short) var(--ease-out); }

.name { font-size: var(--text-sm); line-height: 1.35; overflow-wrap: break-word; min-width: 0; }
.filter__empty { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-md); padding-block: var(--space-xl); }

/* Custom orders: the route as a numbered notice */
.custom { padding-block: var(--section-gap) var(--section-gap-s); }
.custom__head { display: grid; gap: var(--space-md); margin-bottom: var(--space-2xl); }
.custom__head .lead { color: var(--color-ink-2); }
.route { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gap-columns); margin: 0; padding: 0; list-style: none; counter-reset: route; }
.route li { display: grid; grid-template-rows: auto auto 1fr auto; gap: var(--space-sm); padding-top: var(--space-lg); border-top: var(--rule-hair) solid var(--color-ink); counter-increment: route; justify-items: start; }
.route li::before { content: counter(route); font-weight: 700; font-size: var(--text-display-s); line-height: 1; letter-spacing: var(--tracking-display); font-variant-numeric: tabular-nums; }
.route p { color: var(--color-ink-2); }
.route .num { font-size: var(--text-xl); font-weight: 700; color: var(--color-ink); font-variant-numeric: tabular-nums; }
.route__email { overflow-wrap: anywhere; min-width: 0; }

/* Visit: a paper band with the address and the hours set large */
.visit { padding-block: var(--section-gap-s); background: var(--color-paper-2); border-block: var(--rule-hair) solid var(--color-rule); }
.visit__grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--space-xl) var(--gap-columns); align-items: start; }
.visit__place { display: grid; gap: var(--space-lg); justify-items: start; }
.visit address { font-style: normal; font-size: var(--text-xl); line-height: 1.35; color: var(--color-ink); }
.hours { width: 100%; border-collapse: collapse; border-top: var(--rule-hair) solid var(--color-ink); }
.hours caption { caption-side: bottom; padding-top: var(--space-md); text-align: start; font-size: var(--text-sm); color: var(--color-ink-2); }
.hours th, .hours td { padding-block: var(--space-lg); border-bottom: var(--rule-hair) solid var(--color-rule); text-align: start; vertical-align: baseline; }
.hours th { font-weight: 600; padding-inline-end: var(--space-lg); }
.hours td { font-weight: 700; font-size: var(--text-2xl); letter-spacing: -0.02em; text-align: end; white-space: nowrap; font-variant-numeric: tabular-nums; }
.tag { display: inline-flex; margin-inline-start: var(--space-xs); padding: var(--space-3xs) var(--space-sm); border-radius: var(--radius-pill); font-size: var(--text-xs); font-weight: 600; vertical-align: middle; }
.tag--in { background: var(--color-accent-soft); color: var(--color-accent-soft-ink); }

/* Concept note: the ink band every operational action lands on */
.concept { padding-block: var(--section-gap-s); background: var(--color-ink); color: var(--color-on-ink); scroll-margin-top: 0; }
.concept__grid { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: var(--space-xl) var(--gap-columns); }
.concept__list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-xl) var(--gap-columns); margin: 0; }
.concept__list div { padding-top: var(--space-md); border-top: var(--rule-hair) solid var(--color-rule-on-ink); }
.concept__list dt { font-weight: 600; margin-bottom: var(--space-xs); }
.concept__list dd { margin: 0; color: var(--color-on-ink-2); max-width: 45ch; }
.concept a:focus-visible { outline-color: var(--color-focus-on-ink); }
.concept:target h2 { text-decoration: underline; text-decoration-color: var(--color-focus-on-ink); text-decoration-thickness: 2px; text-underline-offset: 0.12em; }

/* Footer: a mast, the wordmark large over the facts and links */
.mast { padding-block: var(--space-3xl) var(--space-xl); }
.mast__word { margin: 0 0 var(--space-xl); font-weight: 700; font-size: var(--text-display-s); line-height: 1; letter-spacing: var(--tracking-display); overflow-wrap: break-word; min-width: 0; max-width: none; }
.mast__cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-lg) var(--gap-columns); padding-top: var(--space-lg); border-top: var(--rule-hair) solid var(--color-ink); }
.mast__cols p { color: var(--color-ink-2); }
.mast__email { overflow-wrap: anywhere; }
.mast__links { display: grid; gap: var(--space-xs); margin: 0; padding: 0; list-style: none; }
.mast__links a { font-weight: 400; white-space: nowrap; }
.mast__legal { margin-top: var(--space-2xl); font-size: var(--text-sm); color: var(--color-ink-2); max-width: none; }

/* Layout breakpoint */
@media (max-width: 60rem) {
  .hero { min-height: auto; }
  .hero__grid, .catalog__head, .visit__grid, .concept__grid { grid-template-columns: minmax(0, 1fr); }
  .hero__grid { gap: var(--space-xl); }
  .plate__grid { grid-template-columns: repeat(auto-fill, minmax(min(100%, 9rem), 1fr)); }
  .plate__grid li, .plate__grid li:nth-child(3n) { border-inline-end: 0; }
  .plate__grid a { min-height: 12rem; }
  .shelf { grid-template-columns: minmax(0, 1fr); }
  .route { grid-template-columns: minmax(0, 1fr); gap: var(--space-xl); }
  .route li { grid-template-rows: none; }
}
/* Type breakpoint */
@media (max-width: 40rem) {
  .concept-bar { text-align: start; }
  .concept__list, .mast__cols { grid-template-columns: minmax(0, 1fr); }
  .hours th, .hours td { display: block; text-align: start; padding-inline-end: 0; }
  .hours th { padding-block: var(--space-md) 0; border-bottom: 0; }
  .hours td { padding-block: var(--space-2xs) var(--space-md); white-space: normal; }
}
@media (max-width: 390px) {
  .hero__text, .route li { grid-template-columns: minmax(0, 1fr); }
  .hero__text > *, .route li > *, .mast__links li { min-width: 0; max-width: 100%; }
  .wordmark, .slab__links a, .mast__links a, .btn { white-space: normal; overflow-wrap: anywhere; }
  .wordmark, .btn { min-width: 0; max-width: 100%; }
  .hero h1 { overflow-wrap: anywhere; }
  .btn { padding-block: var(--space-sm); text-align: center; }
}
@media (prefers-reduced-motion: reduce) {
  .btn, .seg label, .thumb, .plate__grid a, a { transition: none; }
  .btn:active { transform: none; }
}