/* Hallmark · genre: editorial · macrostructure: Catalogue · F6 product-card grid knobs: ratio=4/5 portrait, density=4-up, price=under name, action=Ask link
 * theme: custom (tuned) · vibe: "quiet catalogue, gilt, forest green, cream paper" · paper: oklch(97.4% 0.013 86) · accent: oklch(64% 0.115 80)
 * display: Cormorant Garamond · body: EB Garamond · axes: light / roman-serif / chromatic-other (antique gold ~80)
 * nav: N9 edge-aligned minimal · footer: Ft6 letter close · enrichment: none (logo lockup + cropped logo ornament; placeholder frames per assets.md)
 * pre-emit critique: P5 H4 E4 S5 R5 V4 · studied: no · context: user-provided
 */
@import url("tokens.css");

*, *::before, *::after { box-sizing: border-box; }
html, body { overflow-x: clip; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--color-paper);
  color: var(--color-ink);
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: var(--leading-body);
  font-kerning: normal;
  font-variant-numeric: oldstyle-nums proportional-nums;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}
img { display: block; max-width: 100%; height: auto; }
h1, h2, h3 {
  font-family: var(--font-display);
  font-style: normal;
  font-weight: 400;
  line-height: var(--leading-tight);
  margin: 0;
  overflow-wrap: anywhere;
  min-width: 0;
  text-wrap: balance;
}
p { margin: 0; text-wrap: pretty; }
p + p { margin-top: var(--space-md); }
em { font-style: italic; }

a { color: inherit; text-decoration-line: underline; text-decoration-color: var(--color-rule); text-decoration-thickness: var(--rule-hair); text-underline-offset: 0.22em; transition: text-decoration-color var(--dur-short) var(--ease-out), color var(--dur-short) var(--ease-out); }
a:hover { text-decoration-color: var(--color-accent); }
a:active { color: var(--color-accent-text); }
:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 3px; border-radius: var(--radius-none); }
a[aria-disabled="true"] { opacity: 0.55; cursor: not-allowed; pointer-events: none; text-decoration: none; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 1ms !important; animation-duration: 1ms !important; }
  .piece:hover .piece__media img { transform: none; }
}

.skip { position: absolute; left: var(--space-md); top: var(--space-md); padding: var(--space-xs) var(--space-md); background: var(--color-ink); color: var(--color-paper); transform: translateY(-200%); }
.skip:focus-visible { transform: none; }

.caps {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--text-sm);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  line-height: 1.4;
}

.wrap { width: 100%; max-width: var(--page-max); margin-inline: auto; padding-inline: var(--page-gutter); }

/* N9 · edge-aligned minimal */
.nav-edge { display: flex; justify-content: space-between; align-items: center; gap: var(--space-lg); padding-block: var(--space-lg); }
.nav-edge__mark { display: block; text-decoration: none; }
.nav-edge__mark img { width: 7.5rem; height: auto; }
.nav-edge__cta {
  white-space: nowrap;
  text-decoration: none;
  color: var(--color-ink);
  padding: var(--space-xs) var(--space-lg);
  border: var(--rule-hair) solid var(--color-accent-text);
  line-height: 1;
  transition: border-color var(--dur-short) var(--ease-out), background-color var(--dur-short) var(--ease-out);
}
.nav-edge__cta:hover { border-color: var(--color-ink-2); background: var(--color-paper-2); }
.nav-edge__cta:active { background: var(--color-paper-3); }
@media (pointer: coarse) { .nav-edge__cta { min-height: 44px; display: inline-flex; align-items: center; } }

/* Masthead: brand mark + tagline only (Catalogue heading rule) */
.mast { display: grid; gap: var(--space-2xl); padding-block: var(--space-xl) var(--space-3xl); border-bottom: var(--rule-hair) solid var(--color-rule-2); }
.mast__logo { margin: 0; }
.mast__logo img { width: 100%; max-width: 40rem; animation: arrive var(--dur-long) var(--ease-out) both; }
.mast__intro { max-width: var(--measure); align-self: end; }
.mast__intro .lede { font-size: var(--text-md); line-height: 1.45; color: var(--color-ink); }
.mast__meta { margin-top: var(--space-lg); color: var(--color-muted); }
@media (min-width: 60rem) {
  .mast { grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); gap: var(--space-3xl); padding-block: var(--space-2xl) var(--space-4xl); }
}
@keyframes arrive { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .mast__logo img { animation-duration: 1ms; } }

/* Section heads: stacked, single column everywhere */
.section { padding-block: var(--space-3xl); }
@media (min-width: 60rem) { .section { padding-block: var(--space-4xl); } }
.section-head { display: grid; gap: var(--space-md); max-width: 40rem; margin-bottom: var(--space-2xl); }
.section-head h2 { font-size: var(--text-xl); }
.section-head p { color: var(--color-ink-2); max-width: var(--measure); }

.ornament { display: flex; justify-content: center; padding-block: var(--space-lg); }
.ornament img { width: min(100%, 24rem); height: auto; }

/* F6 · uniform catalogue grid */
.catalogue { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-xl) var(--space-md); }
@media (min-width: 40rem) { .catalogue { gap: var(--space-2xl) var(--space-lg); } }
@media (min-width: 48rem) { .catalogue { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (min-width: 64rem) { .catalogue { gap: var(--space-3xl) var(--space-xl); } }
.piece { display: grid; gap: var(--space-sm); align-content: start; min-width: 0; }
.piece__media { margin: 0; aspect-ratio: 4 / 5; background: var(--color-paper-2); overflow: hidden; }
.piece__media img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--dur-long) var(--ease-out); }
@media (hover: hover) and (pointer: fine) { .piece:hover .piece__media img { transform: scale(1.02); } }
.piece__name { font-size: var(--text-md); font-weight: 500; }
.piece__detail { color: var(--color-ink-2); font-size: var(--text-sm); }
.piece__price { color: var(--color-ink); font-size: var(--text-sm); font-variant-numeric: lining-nums tabular-nums; }
.piece__ask { justify-self: start; white-space: nowrap; color: var(--color-accent-text); font-size: var(--text-sm); }

/* Placeholder frame: a mat with a hairline inner edge, the logo ornament, and a plain label.
 * One class to remove when real photographs arrive. */
.piece__media--placeholder {
  display: grid; padding: var(--space-md); place-content: center; justify-items: center; gap: var(--space-md);
  background: var(--color-paper-2);
  outline: var(--rule-hair) solid var(--color-rule);
  outline-offset: calc(-1 * var(--space-xs));
}
@media (min-width: 40rem) { .piece__media--placeholder { outline-offset: calc(-1 * var(--space-md)); } }
.piece__media--placeholder img { width: 2.25rem; height: auto; object-fit: contain; }
.piece__media--placeholder figcaption { color: var(--color-muted); letter-spacing: 0.12em; text-align: center; text-wrap: balance; padding-inline: var(--space-xs); }
@media (min-width: 64rem) { .piece__media--placeholder figcaption { letter-spacing: 0.16em; } }

/* About: two short columns of prose */
.about { display: grid; gap: var(--space-xl); }
.about__text { max-width: var(--measure); }
@media (min-width: 60rem) { .about { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: var(--space-3xl); align-items: start; } }
.about h2 { font-size: var(--text-xl); }

/* Inquire */
.inquire { background: var(--color-paper-2); border-block: var(--rule-hair) solid var(--color-rule-2); }
.inquire__inner { display: grid; gap: var(--space-lg); max-width: 46rem; }
.inquire h2 { font-size: var(--text-display); font-weight: 300; }
.inquire p { max-width: var(--measure); color: var(--color-ink-2); }
.inquire__mail {
  justify-self: start;
  white-space: nowrap;
  font-family: var(--font-display);
  font-size: var(--text-md);
  font-weight: 500;
  line-height: 1.2;
  color: var(--color-ink);
  text-decoration-color: var(--color-accent);
  text-underline-offset: 0.18em;
}
.inquire__mail:hover { color: var(--color-accent-text); }
@media (min-width: 22.5rem) { .inquire__mail { font-size: var(--text-xl); } }

/* Ft6 · letter close */
.foot-letter { padding-block: var(--space-3xl) var(--space-2xl); display: grid; gap: var(--space-xl); }
.foot-letter__close { font-family: var(--font-display); font-size: var(--text-md); line-height: 1.4; }
.foot-letter__sign { display: block; font-weight: 600; }
.foot-letter__small { color: var(--color-muted); font-size: var(--text-sm); }
.foot-letter__small a { white-space: nowrap; }
@media (min-width: 60rem) { .foot-letter { grid-template-columns: minmax(0, 1fr) auto; align-items: end; } }

/* 404 */
.lost { min-height: 70dvh; display: grid; align-content: center; gap: var(--space-lg); padding-block: var(--space-3xl); max-width: 40rem; }
.lost img { width: 12rem; }
.lost h1 { font-size: var(--text-xl); }
.lost a { white-space: nowrap; }

/* Sticky top bar (Brandon, 2026-11-11). Full-bleed paper backing via shadow + clip so the .wrap width stays intact. */
.nav-edge {
  position: sticky; top: 0; z-index: 10;
  padding-block: var(--space-sm);
  background: var(--color-paper);
  box-shadow: 0 0 0 100vmax var(--color-paper), 0 1px 0 100vmax var(--color-rule-2);
  clip-path: inset(0 -100vmax -1px);
}
html { scroll-padding-top: 6rem; }