/* Hallmark · shape: Quiet range house, brand first then the shop · genre: editorial · theme: custom · job: buy · idea: "Nasra Wellness sells stone jewellery online and to hotel spas, in a calm hotel-spa look." · vibe: "calm, premium, cream and deep purple"
 * paper: oklch(95.5% 0.014 80) · accent: oklch(46% 0.07 80) · display: Cormorant Garamond · body: Jost · hero: Night hero, headline and one sentence on the left, one portrait photo slot on the right · nav: wordmark left, three links right, over a preview band · footer: wordmark and contact on night · imagery: photographs (placeholders until Nusra's photos arrive) · signature: five story tiles in the brand's own five colours
 * axes: cream/serif/dark gold · posture: split stage · contrast: pass · fold: pass · v2.0.0 */
/* Hallmark · pre-emit critique: P3 H4 E4 S4 R4 V3 · weakest: P, the page argues little beyond calm; kept it quiet on purpose and let the five story tiles carry the brand's own idea */
/* Hallmark · waive 68 · every empty slot is a data-slot that Nusra’s photos replace tomorrow, the shop and founder photos stay placeholders · the page is a labelled preview of photographs and shop ranges */
@import url("./tokens.css");
@import url("./base.css");

/* Layout helpers */
.preview-band { background: var(--color-gold); color: var(--color-gold-ink); font-size: var(--text-sm); text-align: center; padding: var(--space-xs) var(--gutter); }
.site-header { background: var(--color-night); color: var(--color-night-ink); }
.site-header .container { display: flex; align-items: center; justify-content: space-between; gap: var(--space-lg); min-height: 72px; flex-wrap: wrap; }
.wordmark { font-family: var(--font-display); font-weight: 600; font-size: var(--text-xl); text-decoration: none; color: var(--color-gold); }
.site-nav { display: flex; gap: var(--space-lg); flex-wrap: wrap; }
.site-nav a { color: var(--color-night-ink); text-decoration: none; font-size: var(--text-md); padding: var(--space-xs) 0; border-bottom: 1px solid transparent; transition: border-color var(--dur-short) var(--ease-out); }
.site-nav a:hover, .site-nav a[aria-current="page"] { border-bottom-color: var(--color-gold); }

.section { padding-block: var(--section-gap); }
.section--tight { padding-block: var(--section-gap-s); }
.on-paper { background: var(--color-paper); color: var(--color-ink); }
.on-paper-2 { background: var(--color-paper-2); color: var(--color-ink); }
.on-night { background: var(--color-night); color: var(--color-night-ink); --color-paper-2: var(--color-night-2); --color-paper-3: var(--color-night-3); --color-muted: var(--color-night-muted); }

h1 { font-weight: 600; font-size: var(--text-display); line-height: 1.02; }
h2 { font-weight: 600; font-size: var(--text-section); line-height: 1.08; }
h3 { font-weight: 600; font-size: var(--text-title); line-height: 1.2; }
.lead { font-size: var(--text-lead); line-height: 1.5; }
.muted { color: var(--color-ink-2); }
.on-night .muted { color: var(--color-night-muted); }

/* Buttons */
.actions { display: flex; flex-wrap: wrap; gap: var(--space-md); margin-top: var(--space-xl); }
.btn { display: inline-flex; align-items: center; min-height: 48px; padding: 0 var(--space-lg); border: 1px solid var(--color-gold); border-radius: var(--radius-pill); background: var(--color-gold); color: var(--color-gold-ink); font: 500 var(--text-md)/1 var(--font-body); 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); border-color: var(--color-paper-3); }
.btn:active { transform: translateY(1px); }
.btn:disabled, .btn[aria-disabled="true"] { opacity: 0.55; cursor: not-allowed; transform: none; }
.btn:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.on-night .btn:focus-visible { outline-color: var(--color-gold); }
.btn--dark { background: var(--color-night); border-color: var(--color-night); color: var(--color-night-ink); }
.btn--dark:hover { background: var(--color-night-2); border-color: var(--color-night-2); }
.btn--quiet { background: transparent; border-color: currentColor; color: inherit; }
.btn--quiet:hover { background: color-mix(in oklab, currentColor 12%, transparent); border-color: currentColor; }
@media (prefers-reduced-motion: reduce) { .btn, .site-nav a { transition: none; } }

/* Hero */
.hero { padding-block: var(--space-3xl) var(--section-gap-s); }
.hero .grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); gap: var(--space-2xl); align-items: center; }
.hero h1 { max-width: 14ch; }
.hero .lead { margin-top: var(--space-lg); max-width: 34ch; }
.photo { margin: 0; min-height: 360px; border-radius: var(--radius-card); aspect-ratio: 4 / 5; display: grid; place-items: center; }
.photo--wide { aspect-ratio: 4 / 3; }
.photo--square { aspect-ratio: 1 / 1; min-height: 0; }
.slot-label { font-size: var(--text-sm); color: var(--color-muted); text-align: center; padding: var(--space-md); }

/* Raffles band */
.band { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-lg); }
.band p { font-family: var(--font-display); font-size: var(--text-xl); max-width: 48ch; }

/* Stories */
.section-head { max-width: 40rem; margin-bottom: var(--space-2xl); }
.section-head p { margin-top: var(--space-md); }
.stories { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); gap: var(--gap-columns); list-style: none; margin: 0; padding: 0; }
.story { padding: var(--space-xl) var(--space-lg); border-radius: var(--radius-card); color: var(--color-ink); min-height: 180px; }
.story h3 { font-size: var(--text-xl); }
.story p { margin-top: var(--space-sm); font-size: var(--text-md); }
.story--calm { background: var(--story-calm); } .story--love { background: var(--story-love); } .story--protection { background: var(--story-protection); } .story--confidence { background: var(--story-confidence); } .story--gifting { background: var(--story-gifting); }

/* Range cards */
.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); gap: var(--gap-columns); list-style: none; margin: 0; padding: 0; }
.card { display: grid; gap: var(--space-sm); align-content: start; }
.card h3, .card h2 { font-size: var(--text-xl); margin-top: var(--space-xs); }
.card .price { font-weight: 500; color: var(--color-accent); }
.card .detail { color: var(--color-ink-2); font-size: var(--text-md); }
.card--soon .price { color: var(--color-muted); }
.section-foot { margin-top: var(--space-2xl); }

/* Two columns */
.split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-2xl); align-items: center; }
.split .text > * + * { margin-top: var(--space-md); }
.note { border: 1px dashed var(--color-rule); border-radius: var(--radius-card); padding: var(--space-lg); color: var(--color-ink-2); }
.on-night .note { border-color: var(--color-night-3); color: var(--color-night-muted); }

/* Shop filter, no scripting: the radio choice hides other stories */
.filter { border: 0; padding: 0; margin: 0 0 var(--space-2xl); display: flex; flex-wrap: wrap; gap: var(--space-sm); }
.filter legend { font-size: var(--text-sm); font-weight: 500; color: var(--color-accent); padding: 0; margin-bottom: var(--space-sm); }
.filter input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.filter label { display: inline-flex; align-items: center; min-height: 44px; padding: 0 var(--space-lg); border: 1px solid var(--color-rule); border-radius: var(--radius-pill); cursor: pointer; transition: background-color var(--dur-short) var(--ease-out); }
.filter label:hover { background: var(--color-paper-3); }
.filter input:checked + label { background: var(--color-night); border-color: var(--color-night); color: var(--color-night-ink); }
.filter input:focus-visible + label { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.shop:has(#f-calm:checked) .card:not([data-story~="calm"]),
.shop:has(#f-love:checked) .card:not([data-story~="love"]),
.shop:has(#f-protection:checked) .card:not([data-story~="protection"]),
.shop:has(#f-confidence:checked) .card:not([data-story~="confidence"]),
.shop:has(#f-gifting:checked) .card:not([data-story~="gifting"]) { display: none; }
@media (prefers-reduced-motion: reduce) { .filter label { transition: none; } }

/* Footer */
.site-footer { background: var(--color-night); color: var(--color-night-ink); padding-block: var(--space-2xl); }
.site-footer .container { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); gap: var(--space-xl); }
.site-footer h3 { font-size: var(--text-lg); color: var(--color-gold); margin-bottom: var(--space-sm); }
.site-footer a { color: var(--color-night-ink); }
.site-footer p, .site-footer li { font-size: var(--text-md); color: var(--color-night-muted); }
.site-footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-xs); }
.site-footer a { color: var(--color-night-ink); }

@media (max-width: 60rem) {
  .hero .grid, .split { grid-template-columns: minmax(0, 1fr); gap: var(--space-xl); }
  .hero { padding-block: var(--space-2xl) var(--section-gap-s); }
  .photo { min-height: 280px; }
  .hero .photo { aspect-ratio: 4 / 3; }
}
@media (max-width: 40rem) {
  .site-header .container { padding-block: var(--space-sm); }
  .actions .btn { width: 100%; justify-content: center; }
}