/* Hallmark · shape: Catalogue (swapped from drawn Conversational FAQ) · genre: editorial · theme: Atelier (deal 2/3, seed indonesian-fashion-shop-verdi-b9e5·3a9d39d0·2026-10-25·r0) · job: buy · draw: c9984c
 * hero: Stage · nav: masthead · footer: mast · imagery: photographs, nine from the shop · signature: the twenty-colour lace wall, each colour writing its own WhatsApp message
 * axes: light/roman-serif/cool · posture: restrained · contrast: pass · fold: pass · v2.0.0 */
/* Hallmark · pre-emit critique: P5 H4 E5 S5 R4 V4 · weakest: E, the shop photos come from different rooms; one 4:5 crop and the warm Atelier grade hold the collection together */
@import url("./tokens.css");
@import url("./base.css");

@font-face {
  font-family: "Sentient";
  src: url("assets/fonts/sentient-300.woff2") format("woff2");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Sentient";
  src: url("assets/fonts/sentient-400.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Hanken Grotesk";
  src: url("assets/fonts/hanken-400.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root {
  --nav-h: 4.5rem;
  --photo-filter: sepia(0.16) saturate(0.93) contrast(0.96);
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='.055'/%3E%3C/svg%3E");
}

html { scroll-behavior: smooth; }
body {
  background-color: var(--color-paper);
  background-image: var(--grain);
  background-size: 180px 180px;
  font-synthesis: none;
}
::selection { background: color-mix(in oklab, var(--color-accent) 18%, transparent); }
img { filter: var(--photo-filter); }
p { line-height: 1.6; }
address { font-style: normal; }

.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);
}
.skip:focus-visible { top: var(--space-md); }

.site-header {
  border-bottom: var(--rule-hair) solid var(--color-rule);
}
.nav {
  min-height: var(--nav-h);
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: var(--space-lg);
}
.nav-links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-lg);
  font-size: var(--text-sm);
}
.nav-links a {
  text-decoration: none;
  color: var(--color-ink-2);
  padding: var(--space-xs) 0;
}
.nav-links a:hover { color: var(--color-ink); text-decoration: underline; text-decoration-color: var(--color-accent); text-underline-offset: 0.2em; }
.nav-links a:active { color: var(--color-muted); }
.brand {
  justify-self: center;
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: 400;
  line-height: 1;
  letter-spacing: -0.01em;
  text-decoration: none;
  white-space: nowrap;
}
.brand:hover { text-decoration: underline; text-decoration-color: var(--color-accent); text-underline-offset: 0.2em; }

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 52px;
  padding: 0 var(--space-lg);
  border: var(--rule-hair) solid var(--color-ink);
  border-radius: var(--radius-pill);
  background: transparent;
  color: var(--color-ink);
  font-family: var(--font-body);
  font-size: var(--text-md);
  font-weight: 400;
  line-height: 1;
  text-align: center;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color var(--dur-short) var(--ease-out), color var(--dur-short) var(--ease-out), transform var(--dur-micro) var(--ease-out);
}
.btn:hover { background: var(--color-ink); color: var(--color-paper); }
.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--nav { justify-self: end; min-height: 44px; padding: 0 var(--space-md); font-size: var(--text-sm); }

.text-link {
  display: inline-block;
  color: var(--color-ink);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-decoration-color: var(--color-accent);
  text-underline-offset: 0.18em;
}
.text-link:hover { text-decoration-thickness: 2px; }
.text-link:active { color: var(--color-ink-2); }
.text-link:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }

.js-only { display: none; }
.js .js-only { display: block; }

.hero {
  display: flex;
  align-items: center;
  min-height: calc(100svh - var(--nav-h));
  padding-block: var(--space-xl) var(--space-2xl);
}
.hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  align-items: center;
  gap: var(--space-2xl);
}
.stage-copy { min-width: 0; }
.hero h1 { line-height: 1.03; }
.hero-lead { margin-top: var(--space-lg); max-width: 36ch; }
.hero-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-lg);
  margin-top: var(--space-2xl);
}
.stage-visual {
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: var(--space-sm);
}
.wall-figure {
  width: 100%;
  margin: 0;
}
.print-mat {
  position: relative;
  width: 100%;
  padding: var(--space-sm);
  border-radius: 2px;
  background: linear-gradient(150deg, var(--card-lit), var(--color-card) 58%, var(--card-shade));
  box-shadow: var(--shadow-card), inset 1px 1px 0 var(--lit);
}
.wall-frame {
  position: relative;
  aspect-ratio: 1;
  overflow: hidden;
  background: var(--color-paper-2);
}
.wall-frame > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.colour-picker {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  grid-template-rows: repeat(4, minmax(0, 1fr));
}
.colour-cell {
  position: relative;
  min-width: 0;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
}
.colour-cell::after {
  content: "";
  position: absolute;
  inset: var(--space-2xs);
  border: 2px solid transparent;
  pointer-events: none;
  transition: border-color var(--dur-micro) var(--ease-out);
}
.colour-cell:hover::after,
.colour-cell[aria-pressed="true"]::after {
  border-color: var(--color-paper);
  box-shadow: 0 0 0 1px var(--color-ink);
}
.colour-cell:focus-visible {
  z-index: 2;
  outline: 3px solid var(--color-ink);
  outline-offset: -3px;
  box-shadow: inset 0 0 0 6px var(--color-paper);
}
.colour-cell:active::after { transform: scale(0.985); }
.colour-cell:disabled { cursor: not-allowed; opacity: 0.55; }
.wall-caption {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--space-md);
  margin-top: var(--space-md);
  padding-top: var(--space-sm);
  border-top: var(--rule-hair) solid var(--color-rule);
  font-size: var(--text-sm);
  color: var(--color-ink-2);
}
.wall-choice { color: var(--color-ink); font-size: var(--text-md); }
.wall-hint {
  margin: 0;
  font-size: var(--text-sm);
  color: var(--color-muted);
  text-align: right;
}

@media (max-width: 60rem) {
  :root { --nav-h: 4rem; }
  .nav { grid-template-columns: minmax(0, 1fr) auto; }
  .nav-links { display: none; }
  .brand { justify-self: start; font-size: var(--text-lg); }
  .btn--nav { justify-self: end; }
  .hero { min-height: 0; padding-block: var(--space-2xl); }
  .hero-grid { grid-template-columns: minmax(0, 1fr); gap: var(--space-2xl); }
  .stage-copy { max-width: 40rem; }
  .stage-visual { align-items: stretch; }
  .wall-figure { max-width: 33rem; margin-inline: auto; }
  .wall-hint { max-width: 33rem; margin-inline: auto; text-align: left; }
}

@media (max-width: 40rem) {
  .hero { padding-block: var(--space-xl) var(--space-2xl); }
  .hero-actions { gap: var(--space-md); margin-top: var(--space-xl); }
  .btn { min-height: 48px; }
  .btn--nav { min-height: 44px; }
  .colour-cell::after { inset: var(--space-3xs); }
  .colour-cell:focus-visible { box-shadow: inset 0 0 0 4px var(--color-paper); }
}

.band {
  background-color: var(--color-paper-2);
  background-image: var(--grain);
  background-size: 180px 180px;
}
.statement { padding-block: var(--space-3xl) var(--space-2xl); }
.statement-layout {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  align-items: start;
  gap: var(--space-2xl);
}
.statement h2 {
  max-width: 10ch;
  font-size: var(--text-display);
  font-weight: 300;
  line-height: 1.02;
}
.statement-copy {
  min-width: 0;
  max-width: 43rem;
  padding-left: var(--space-2xl);
  border-left: var(--rule-hair) solid var(--color-rule);
}
.statement-copy > p:first-child {
  max-width: 44ch;
  font-size: var(--text-lead);
  line-height: 1.55;
  color: var(--color-ink-2);
}
.dropcap::first-letter {
  float: left;
  padding: 0.08em 0.1em 0 0;
  font-family: var(--font-display);
  font-size: 3.3em;
  font-weight: 400;
  line-height: 0.78;
  color: var(--color-ink);
}
.statement-note {
  margin-top: var(--space-lg);
  padding-top: var(--space-sm);
  border-top: var(--rule-hair) solid var(--color-rule);
  max-width: 20ch;
  font-size: var(--text-sm);
  color: var(--color-muted);
}

.collection { padding-block: var(--space-2xl) var(--space-3xl); }
.section-head {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  align-items: end;
  gap: var(--space-2xl);
  margin-bottom: var(--space-2xl);
}
.section-head h2 { max-width: 14ch; }
.section-head .lead {
  max-width: 30ch;
  justify-self: end;
  color: var(--color-ink-2);
}
.product-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-2xl) var(--gap-columns);
  margin: 0;
  padding: 0;
  list-style: none;
}
.product-grid > li { min-width: 0; }
.product {
  display: flex;
  flex-direction: column;
  min-width: 0;
  height: 100%;
  margin: 0;
  padding-top: var(--space-sm);
  border-top: var(--rule-hair) solid var(--color-rule);
}
.product img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  background: var(--color-paper-2);
  outline: 1px solid color-mix(in oklab, var(--color-ink) 8%, transparent);
  outline-offset: -1px;
}
.product figcaption {
  display: flex;
  flex: 1;
  flex-direction: column;
  justify-content: space-between;
  gap: var(--space-md);
  padding-top: var(--space-md);
}
.product h3 {
  max-width: 18ch;
  font-family: var(--font-display);
  font-size: var(--text-title);
  font-weight: 400;
  line-height: 1.2;
}
.product-link {
  align-self: flex-start;
  font-size: var(--text-sm);
  color: var(--color-ink-2);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-decoration-color: var(--color-accent);
  text-underline-offset: 0.18em;
}
.product-link:hover { color: var(--color-ink); text-decoration-thickness: 2px; }
.product-link:active { color: var(--color-muted); }

.how { padding-block: var(--space-3xl) var(--space-2xl); }
.how-layout {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  align-items: start;
  gap: var(--space-2xl);
}
.how-head h2 { max-width: 12ch; }
.how-head .lead { margin-top: var(--space-lg); color: var(--color-ink-2); }
.how-body { min-width: 0; }
.steps {
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: step;
  border-top: var(--rule-head) solid var(--color-ink);
}
.steps li {
  display: grid;
  grid-template-columns: 2.5rem minmax(0, 1fr);
  gap: var(--space-md);
  padding-block: var(--space-lg);
  counter-increment: step;
}
.steps li > * { grid-column: 2; }
.steps li + li { border-top: var(--rule-hair) solid var(--color-rule); }
.steps li::before {
  content: counter(step);
  font-family: var(--font-display);
  font-size: var(--text-title);
  font-weight: 300;
  line-height: 1.1;
  color: var(--color-muted);
}
.steps h3 {
  max-width: 26ch;
  margin-bottom: var(--space-xs);
  font-size: var(--text-title);
  font-weight: 400;
}
.steps p { max-width: 46ch; color: var(--color-ink-2); }
.how-link { margin-top: var(--space-lg); }

.visit { padding-block: var(--space-2xl) var(--space-3xl); }
.visit-layout {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  align-items: start;
  gap: var(--space-2xl);
}
.visit-intro { min-width: 0; }
.visit-intro h2 { max-width: 16ch; }
.visit-intro .lead { margin-top: var(--space-lg); max-width: 34ch; color: var(--color-ink-2); }
.visit-address {
  max-width: 20ch;
  margin-top: var(--space-2xl);
  padding-top: var(--space-lg);
  border-top: var(--rule-hair) solid var(--color-rule);
  font-family: var(--font-display);
  font-size: var(--text-display-s);
  font-weight: 300;
  line-height: 1.08;
  letter-spacing: var(--tracking-display);
  color: var(--color-ink);
  overflow-wrap: break-word;
}
.visit-intro > .text-link { margin-top: var(--space-lg); }
.visit-list {
  margin: 0;
  border-top: var(--rule-head) solid var(--color-ink);
}
.visit-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.9fr);
  align-items: baseline;
  gap: var(--space-md);
  padding-block: var(--space-md);
  border-bottom: var(--rule-hair) solid var(--color-rule);
}
.visit-row dt { font-size: var(--text-sm); color: var(--color-muted); }
.visit-row dd { margin: 0; color: var(--color-ink); overflow-wrap: break-word; }
.visit-row a { text-decoration: underline; text-decoration-color: var(--color-accent); text-underline-offset: 0.18em; }
.visit-row a:hover { text-decoration-thickness: 2px; }

.site-footer {
  margin-top: 0;
  padding-block: var(--space-3xl) var(--space-xl);
  border-top: var(--rule-head) solid var(--color-ink);
  background-color: var(--color-paper-2);
  background-image: var(--grain);
  background-size: 180px 180px;
}
.footer-top {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-lg);
}
.footer-wordmark {
  font-family: var(--font-display);
  font-size: var(--text-display-s);
  font-weight: 300;
  line-height: 1;
  letter-spacing: var(--tracking-display);
  color: var(--color-ink);
}
.footer-line { font-size: var(--text-sm); color: var(--color-ink-2); }
.footer-nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--space-lg);
  margin-top: var(--space-2xl);
  padding-top: var(--space-lg);
  border-top: var(--rule-hair) solid var(--color-rule);
  font-size: var(--text-sm);
}
.footer-nav nav,
.footer-contact { display: flex; flex-wrap: wrap; gap: var(--space-lg); }
.footer-nav a {
  color: var(--color-ink-2);
  text-decoration: none;
  white-space: nowrap;
}
.footer-nav a:hover { color: var(--color-ink); text-decoration: underline; text-underline-offset: 0.18em; }
.footer-base {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--space-md);
  margin-top: var(--space-2xl);
  font-size: var(--text-sm);
  color: var(--color-muted);
}
.footer-base a { color: var(--color-ink-2); text-decoration: underline; text-underline-offset: 0.18em; white-space: nowrap; }
.footer-base a:hover { color: var(--color-ink); }

@media (max-width: 68rem) {
  .product-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 60rem) {
  .statement-layout,
  .section-head,
  .how-layout,
  .visit-layout { grid-template-columns: minmax(0, 1fr); gap: var(--space-2xl); }
  .statement-copy {
    max-width: 44rem;
    padding-left: 0;
    border-left: 0;
  }
  .statement h2 { max-width: 14ch; }
  .section-head .lead { justify-self: start; }
  .how-head h2 { max-width: 14ch; }
  .visit-intro h2 { max-width: 18ch; }
  .visit-address { max-width: 22ch; }
  .visit-list { max-width: 40rem; }
}
@media (max-width: 48rem) {
  .product-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 26rem) {
  .footer-top,
  .footer-nav,
  .footer-base { flex-direction: column; align-items: flex-start; }
  .visit-row { grid-template-columns: minmax(0, 1fr); gap: var(--space-2xs); }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .colour-cell::after { transition: none; }
}