/* Hallmark · shape: Split Studio · genre: editorial · theme: Loom (deal 3/3, seed wooden-spoon-manufacturer-wood-9360·76684d9c·2026-11-14·r0) · redesign: full
 * hero: Stage, product photographs refuse the drawn Ledge · nav: edge-aligned bar · footer: mast · imagery: credited photographs · signature: wooden spoons and their grain · loom: ecru
 * axes: light/roman-serif/warm-ink · posture: restrained · draw: 1cf473 · v2.0.0 */
/* Hallmark · pre-emit critique: P4 H4 E4 S4 R5 V4 · weakest: S, replaced generic scenery with wooden utensils and product-specific copy */
/* waive 83: a product catalogue needs comparable product photographs on narrow screens; text-led craft and detail sections separate them. */
/* waive 25: one-sentence product captions use a shorter measure than long prose. */
@import url("./hallmark/tokens.css");
@import url("./hallmark/base.css");

@font-face { font-family: "Libre Caslon Display"; src: url("./fonts/libre-caslon-display.ttf") format("truetype"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Hanken Grotesk"; src: url("./fonts/hanken-regular.ttf") format("truetype"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Hanken Grotesk"; src: url("./fonts/hanken-medium.ttf") format("truetype"); font-weight: 500 600; font-style: normal; font-display: swap; }

:root {
  --space-4: var(--space-2xs); --space-8: var(--space-xs); --space-12: var(--space-sm); --space-16: var(--space-md); --space-24: var(--space-lg);
  --space-32: 32px; --space-40: var(--space-xl); --space-48: 48px; --space-56: 56px; --space-64: var(--space-2xl); --space-96: var(--space-3xl); --space-128: 128px;
  --color-accent: var(--color-ink);
  --color-accent-2: var(--color-ink-2);
  --color-accent-ink: var(--color-paper);
  --color-focus: var(--color-ink);
  --font-display: "Libre Caslon Display", "Microsoft YaHei", Georgia, serif;
  --font-body: "Hanken Grotesk", "Microsoft YaHei", system-ui, sans-serif;
  --paper: var(--color-paper);
  --ink: var(--color-ink);
  --muted: var(--color-muted);
  --line: var(--color-rule);
  --accent: var(--color-accent);
  --white: var(--color-paper);
  --container: 1440px;
  --gutter: clamp(24px, 5vw, 80px);
  --gap-columns: 40px;
  --photo-treatment: saturate(.88) contrast(.96);
}

html, body { overflow-x: clip; }
body { font-family: var(--font-body); font-size: 17px; line-height: 1.6; background: var(--color-paper); color: var(--color-ink); }
h1, h2 { font-family: var(--font-display); font-weight: 400; letter-spacing: -.015em; line-height: 1.08; overflow-wrap: break-word; min-width: 0; }
h3 { font-family: var(--font-body); font-weight: 500; letter-spacing: 0; line-height: 1.3; }
p { max-width: 65ch; }
.wrap { max-width: var(--container); }
.section { padding-block: clamp(var(--space-64), 8vw, var(--space-128)); }
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible, summary:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 4px; }
.site-header { min-height: 88px; max-width: var(--container); margin-inline: auto; padding-block: 20px; border-bottom: 1px solid var(--color-rule); gap: var(--space-32); }
.site-header > .brand, .site-footer .brand { font-family: var(--font-display); font-size: 36px; font-weight: 400; letter-spacing: -.025em; line-height: 1; }
.nav-list { gap: var(--space-32); }
.nav-list a, .language-switch a { font-size: 15px; }
.nav-list a { border-bottom: 1px solid transparent; }
.nav-list a[aria-current], .nav-list .current-menu-item > a { border-color: currentColor; }
.menu-toggle { border: 1px solid var(--color-rule); color: var(--color-ink); background: var(--color-paper); }
.menu-toggle:active, .button:active { transform: scale(.97); }
.menu-toggle[hidden] { display: none; }
.site-nav { box-shadow: none; }
.button { min-height: 52px; border-radius: 0; padding: var(--space-12) var(--space-24); border-color: var(--color-accent); background: var(--color-accent); color: var(--color-accent-ink); font-size: 16px; font-weight: 500; }
.button:hover { background: var(--color-accent); }
.button.light, .button.light:hover { background: var(--color-paper); border-color: var(--color-paper); color: var(--color-ink); }
.button.outline, .button.outline:hover { background: transparent; color: var(--color-ink); border-color: var(--color-ink); }
.button:disabled { background: var(--color-paper-3); border-color: var(--color-rule); color: var(--color-muted); cursor: wait; transform: none; }
.text-link { padding-block: var(--space-8); border-bottom: 1px solid currentColor; font-size: 16px; font-weight: 500; }

.hero { display: block; min-height: 0; background: var(--color-paper); color: var(--color-ink); overflow: visible; }
.hero::after { display: none; }
.hero-shell { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); align-items: center; gap: var(--gap-columns); min-height: calc(100svh - 88px); padding-block: var(--space-48); }
.hero-copy { position: static; z-index: auto; max-width: none; padding: 0; }
.hero h1 { font-size: clamp(56px, 6.5vw, 96px); max-width: 11ch; margin: 0 0 var(--space-32); line-height: 1.02; white-space: pre-line; }
.hero p { max-width: 34ch; margin-bottom: var(--space-32); font-size: 18px; color: var(--color-muted); line-height: 1.55; }
.hero .actions { gap: var(--space-32); align-items: center; }
.hero-art { margin: 0; min-width: 0; }
.hero .hero-media { position: static; width: 100%; height: min(67svh, 640px); object-fit: cover; object-position: 65% center; filter: var(--photo-treatment); }
.intro-section { border-top: 1px solid var(--color-rule); }
.intro { max-width: 28ch; font-family: var(--font-display); font-size: clamp(32px, 4vw, 52px); line-height: 1.22; letter-spacing: -.015em; margin: 0; }
.section-head { gap: var(--gap-columns); margin-bottom: var(--space-40); }
.section-head h2 { font-size: var(--text-section); }
.category-tabs { gap: var(--space-32); margin-bottom: var(--space-40); border-color: var(--color-rule); }
.category-tabs button { font-size: 17px; color: var(--color-muted); padding: var(--space-16) 0; }
.category-tabs button[aria-selected="true"] { color: var(--color-ink); }
.category-indicator { background: var(--color-ink); }
.category-panel { grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: var(--gap-columns); padding: var(--space-4); }
.category-picture img { aspect-ratio: 4 / 3; width: 100%; object-fit: cover; filter: var(--photo-treatment); }
.category-copy { padding: var(--space-24); }
.category-copy h3 { margin: 0 0 var(--space-24); font-family: var(--font-display); font-size: clamp(32px, 3.5vw, 48px); font-weight: 400; line-height: 1.15; }
.category-copy p { max-width: 40ch; margin-bottom: var(--space-24); color: var(--color-muted); }

.craft-section { background: var(--color-paper-2); }
.craft-heading { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--gap-columns); align-items: end; margin-bottom: var(--space-56); }
.craft-heading h2 { font-size: var(--text-section); max-width: 14ch; }
.craft-heading p { color: var(--color-muted); max-width: 45ch; }
.craft-list { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); padding: 0; margin: 0; list-style: none; gap: var(--gap-columns); }
.craft-list li { padding-top: var(--space-24); border-top: 1px solid var(--color-rule-ink); }
.craft-list h3 { margin-bottom: var(--space-16); font-size: 22px; }
.craft-list p { color: var(--color-muted); font-size: 16px; }
.craft-section .text-link { margin-top: var(--space-40); }
.collection .product-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-48) var(--gap-columns); }
.product-media { background: var(--color-paper-2); }
.product-card .product-media img { filter: var(--photo-treatment); aspect-ratio: 4 / 3; transform: none; }
.product-card > a:hover .product-media img { transform: none; }
.product-card h2 { font-family: var(--font-body); font-size: 21px; font-weight: 500; letter-spacing: 0; margin-top: var(--space-24); }
.product-card p { font-size: 16px; max-width: 36ch; }
.details-section { border-top: 1px solid var(--color-rule); }
.details-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--gap-columns); }
.details-layout h2 { max-width: 13ch; font-size: var(--text-section); }
.detail-rows { margin: 0; border-top: 2px solid var(--color-rule-ink); }
.detail-rows div { padding-block: var(--space-24); border-bottom: 1px solid var(--color-rule); }
.detail-rows dt { font-weight: 500; font-size: 18px; margin-bottom: var(--space-8); }
.detail-rows dd { margin: 0; color: var(--color-muted); font-size: 16px; }
.contact-band { background: var(--color-paper-2); color: var(--color-ink); }
.contact-band .split { grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); gap: var(--gap-columns); }
.contact-band h2 { font-size: var(--text-section); max-width: 15ch; }
.contact-band .split p { color: var(--color-muted); margin-bottom: var(--space-24); }
.contact-band .button.light { color: var(--color-ink); background: transparent; border-color: var(--color-ink); }

.page-head { padding-block: var(--space-64) var(--space-48); }
.page-head h1, .contact-page > h1 { font-size: clamp(48px, 6vw, 80px); }
.product-detail { grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: var(--gap-columns); }
.product-detail h1 { font-size: clamp(40px, 5vw, 64px); }
.product-detail .product-image { filter: var(--photo-treatment); }
.specs div { border-color: var(--color-rule); }
.filters { gap: var(--space-8); }
.filters a { color: var(--color-muted); border-color: var(--color-rule); }
.filters a[aria-current] { color: var(--color-accent-ink); background: var(--color-accent); }
.content h2 { margin-block: var(--space-40) var(--space-24); }
.content p + p { margin-top: var(--space-24); }
.contact-page > h1 { margin-bottom: var(--space-40); }
.contact-layout { grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: var(--gap-columns); }
.contact-layout .enquiry-intro { margin-bottom: var(--space-32); color: var(--color-muted); }
.inquiry-form { display: grid; gap: var(--space-24); }
.inquiry-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-24); }
.inquiry-form label { display: block; font-size: 16px; font-weight: 500; margin-bottom: var(--space-8); }
.inquiry-form input, .inquiry-form textarea { width: 100%; min-height: 48px; padding: var(--space-12) var(--space-16); border: 1px solid var(--color-rule); border-radius: 0; background: var(--color-paper-2); color: var(--color-ink); font-family: var(--font-body); }
.inquiry-form textarea { resize: vertical; }
.inquiry-form input:user-invalid, .inquiry-form textarea:user-invalid { border-color: var(--color-error); }
.inquiry-form [role="status"] { min-height: 24px; color: var(--color-muted); font-size: 16px; }
.inquiry-aside { padding: var(--space-32); background: var(--color-paper-2); align-self: start; }
.inquiry-aside h2 { font-size: 32px; margin-bottom: var(--space-24); }
.inquiry-aside p { color: var(--color-muted); margin-bottom: var(--space-24); }
.site-footer { padding: var(--space-64) var(--gutter) var(--space-32); max-width: var(--container); margin-inline: auto; background: var(--color-paper); }
.footer-top { padding-bottom: var(--space-48); gap: var(--gap-columns); }
.footer-top p { font-size: 16px; }
.footer-links { gap: var(--space-32); }
.footer-bottom { padding-top: var(--space-24); gap: var(--space-24); align-items: start; font-size: 14px; }
.photo-credits summary { cursor: pointer; min-height: 32px; }
.photo-credits p { margin-top: var(--space-16); font-size: 14px; line-height: 1.8; }
.photo-credits a { text-decoration: underline; }

@media (hover: hover) and (pointer: fine) {
  .button:hover { background: var(--color-accent-2); }
  .contact-band .button.light:hover { background: var(--color-paper-3); }
  .button.light:hover { background: var(--color-paper-2); }
  .button.outline:hover { background: var(--color-paper-2); }
  .text-link:hover { border-color: var(--color-accent-2); border-bottom-width: 1px; padding-bottom: var(--space-8); }
  .product-card > a:hover h2 { text-decoration: underline; text-underline-offset: 6px; }
  .filters a:not([aria-current]):hover { background: var(--color-paper-2); }
}
@media (min-width: 901px) { .site-header { display: flex; } .site-nav[hidden] { display: block !important; } }
@media (max-width: 900px) {
  .site-header { min-height: 80px; padding-block: var(--space-16); gap: var(--space-16); }
  .site-header > .brand { font-size: 32px; }
  .hero-shell { min-height: 0; padding-block: var(--space-56); gap: var(--space-32); }
  .hero h1 { font-size: 56px; }
  .hero .hero-media { height: 480px; }
  .site-nav { background: var(--color-paper); border-color: var(--color-rule); }
  .category-panel, .details-layout, .craft-heading, .product-detail, .contact-layout { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .craft-list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-32); }
  .collection .product-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .contact-band .split { grid-template-columns: minmax(0, 1fr); }
  .footer-links { gap: var(--space-24); }
}
@media (max-width: 640px) {
  :root { --gap-columns: 24px; }
  .hero-shell { grid-template-columns: minmax(0, 1fr); padding-block: var(--space-40); gap: var(--space-40); }
  .hero h1 { max-width: 12ch; font-size: 52px; margin-bottom: var(--space-24); }
  .hero p { font-size: 17px; margin-bottom: var(--space-24); }
  .hero .actions { gap: var(--space-24); }
  .hero .actions .button { width: auto; }
  .hero .hero-media { height: auto; aspect-ratio: 4 / 3; }
  .section-head { flex-direction: row; align-items: baseline; gap: var(--space-16); margin-bottom: var(--space-32); }
  .section-head .text-link { flex-shrink: 0; font-size: 14px; }
  .section-head h2 { font-size: 32px; }
  .category-panel, .details-layout, .craft-heading, .product-detail, .contact-layout { grid-template-columns: minmax(0, 1fr); }
  .category-copy { padding: var(--space-16) 0; }
  .category-copy h3 { margin-bottom: var(--space-16); font-size: 32px; }
  .category-copy p { margin-bottom: var(--space-16); }
  .category-tabs { margin-bottom: var(--space-24); }
  .craft-heading { margin-bottom: var(--space-32); gap: var(--space-24); }
  .craft-list { gap: var(--space-32) var(--space-24); }
  .craft-list h3 { font-size: 20px; }
  .collection .product-grid { grid-template-columns: minmax(0, 1fr); gap: var(--space-40); }
  .product-card .product-media { aspect-ratio: 2 / 1; }
  .product-card .product-media img { aspect-ratio: auto; }
  .product-card h2 { margin-top: var(--space-16); font-size: 22px; }
  .product-card p { max-width: 45ch; }
  .details-layout { gap: var(--space-32); }
  .contact-band .split { gap: var(--space-32); }
  .contact-band .button { width: auto; }
  .inquiry-aside { padding: var(--space-24); }
  .inquiry-row { gap: var(--space-16); }
  .footer-top { gap: var(--space-32); }
  .footer-links { flex-direction: row; flex-wrap: wrap; gap: var(--space-16) var(--space-24); }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  html body *:not(.keep-motion), html body *:not(.keep-motion)::before, html body *:not(.keep-motion)::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
  .button:active, .menu-toggle:active { transform: none; }
}

:root { --reveal-offset: 20px; --reveal-duration: 500ms; }
.js .reveal-pending { opacity: 0; transform: translateY(var(--reveal-offset)); }
.js .reveal-pending.is-visible { opacity: 1; transform: none; transition: opacity var(--reveal-duration) var(--ease-out), transform var(--reveal-duration) var(--ease-out); transition-delay: var(--reveal-delay, 0ms); }
@media (prefers-reduced-motion: reduce) { .js .reveal-pending { opacity: 1; transform: none; } }

.text-link { position: relative; border-bottom-color: transparent; transition: translate var(--motion-press) var(--ease-out), opacity var(--motion-press) ease; }
.text-link::after { content: ""; position: absolute; inset-inline: 0; bottom: -1px; height: 1px; background: currentColor; transform-origin: left; transform: scaleX(1); transition: transform var(--motion-indicator) var(--ease-out); }
.nav-list a, .footer-links a, .language-switch a, .site-header .brand, .site-footer .brand, .filters a, .nav-links a, .photo-credits summary, .photo-credits a, .specs a { transition: translate var(--motion-press) var(--ease-out), opacity var(--motion-press) ease, color var(--motion-press) ease, background-color var(--motion-press) ease, border-color var(--motion-press) ease; }
.footer-links a, .nav-links a { display: inline-block; text-decoration: underline; text-decoration-color: transparent; text-underline-offset: 6px; transition: translate var(--motion-press) var(--ease-out), opacity var(--motion-press) ease, text-decoration-color var(--motion-press) ease; }
.category-tabs button { transition: color var(--motion-press) ease, background-color var(--motion-press) ease, transform var(--motion-press) var(--ease-out); }
.product-card > a { display: block; transition: transform var(--motion-menu) var(--ease-out), opacity var(--motion-press) ease; }
.category-tabs button:active, .filters a:active { transform: scale(.97); }
.product-card > a:active { transform: scale(.99); opacity: .8; }
@media (hover: hover) and (pointer: fine) {
  .text-link:hover { translate: 3px 0; border-bottom-color: transparent; }
  .text-link:hover::after { transform: scaleX(.6); }
  .nav-list a:hover { border-color: currentColor; opacity: .7; }
  .footer-links a:hover, .nav-links a:hover { translate: 3px 0; text-decoration-color: currentColor; }
  .language-switch a:hover { color: var(--color-ink); background: var(--color-paper-2); }
  .site-header .brand:hover, .site-footer .brand:hover, .photo-credits a:hover, .specs a:hover { opacity: .65; }
  .category-tabs button:hover { color: var(--color-ink); background: var(--color-paper-2); }
  .photo-credits summary:hover { background: var(--color-paper-2); }
  .product-card > a:hover { transform: translateY(-3px); }
  .product-card > a:active { transform: scale(.99); }
}
.text-link:active, .nav-list a:active, .footer-links a:active, .language-switch a:active, .site-header .brand:active, .site-footer .brand:active, .nav-links a:active, .photo-credits summary:active, .photo-credits a:active, .specs a:active { opacity: .6; }
@media (prefers-reduced-motion: reduce) {
  .text-link:hover, .footer-links a:hover, .nav-links a:hover { translate: none; }
  .text-link:hover::after { transform: none; }
  .category-tabs button:active, .filters a:active, .product-card > a:hover, .product-card > a:active { transform: none; }
}