/* Siwaak Woodcrafts site. Every value comes from tokens.css; component styles are in siwaak-components.css. */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--surface);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: 16px; line-height: 26px; font-weight: 400;
  -webkit-font-smoothing: antialiased;
}
img, svg { display: block; max-width: 100%; }
a { color: inherit; }
p { margin: 0; }
h1, h2, h3 { margin: 0; }
:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
[data-theme] { background: var(--surface); color: var(--ink); }

[id] { scroll-margin-top: 96px; }
.skip { position: absolute; left: var(--space-4); top: -100px; z-index: 100; }
.skip:focus { top: var(--space-4); }

/* ---------- Type, one style per token ---------- */
.display-2xl, .display-xl, .display-lg { font-weight: 600; text-transform: uppercase; color: var(--ink-brand); text-wrap: balance; }
.display-2xl { font-size: 48px; line-height: 56px; letter-spacing: 0.1em; }
.display-xl  { font-size: 36px; line-height: 44px; letter-spacing: 0.1em; }
.display-lg  { font-size: 26px; line-height: 34px; letter-spacing: 0.12em; }
.display-md  { font-size: 24px; line-height: 30px; font-weight: 600; letter-spacing: -0.01em; color: var(--ink-brand); }
.display-sm  { font-size: 18px; line-height: 24px; font-weight: 600; letter-spacing: -0.005em; color: var(--ink-brand); }
.body-lg { font-family: var(--font-body); font-size: 19px; line-height: 31px; }
.body    { font-family: var(--font-body); font-size: 17px; line-height: 27px; }
.body-sm { font-family: var(--font-body); font-size: 15px; line-height: 23px; }
.caption { font-family: var(--font-body); font-size: 14px; line-height: 20px; color: var(--ink-muted); }
.eyebrow { font-size: 12px; line-height: 16px; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-accent); }
.nav-text { font-size: 13px; line-height: 16px; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; }
.meta { font-size: 12px; line-height: 16px; font-weight: 500; letter-spacing: 0.04em; }
.muted { color: var(--ink-muted); }
.lead-time { font-family: var(--font-sans); color: var(--warning); }
.lead-time b { font-weight: 600; }

@media (max-width: 720px) {
  .display-2xl { font-size: 36px; line-height: 44px; }   /* steps down to display-xl */
  .display-xl  { font-size: 26px; line-height: 34px; letter-spacing: 0.12em; } /* steps down to display-lg */
}

/* ---------- Layout ---------- */
.page { width: 100%; max-width: var(--page-normal); margin-inline: auto; padding-inline: var(--space-6); }
.section { padding-block: var(--space-24); }
@media (max-width: 720px) { .section { padding-block: var(--space-16); } .page { padding-inline: var(--space-4); } }
.stack-8 > * + * { margin-top: var(--space-8); }
.measure { max-width: var(--content-normal); }
.actions { display: flex; flex-wrap: wrap; gap: var(--space-3); }

/* photo frames */
.frame { position: relative; overflow: hidden; border-radius: var(--radius-md); background: var(--surface-sunken); }
.frame img { display: block; width: 100%; height: 100%; object-fit: cover; aspect-ratio: auto; }
.frame--4x3 { aspect-ratio: 4 / 3; }
.about > .page > * + * { margin-top: var(--space-6); }
.about-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-16); align-items: center; }
.about-split > * + * { margin-top: 0; }
.about-copy > * + * { margin-top: var(--space-6); }
.bench > * + * { margin-top: var(--space-4); }
.bench-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); }
.bench-tile { margin: 0; overflow: hidden; border-radius: var(--radius-md); background: var(--surface-sunken); aspect-ratio: 1 / 1; }
.bench-tile img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .25s ease-out; }
.bench-tile:hover img { transform: scale(1.04); }
.bench-links { display: flex; flex-wrap: wrap; gap: var(--space-3); }
@media (max-width: 900px) { .about-split { grid-template-columns: 1fr; gap: var(--space-8); align-items: start; } }
@media (prefers-reduced-motion: reduce) { .bench-tile img { transition: none; } .bench-tile:hover img { transform: none; } }
.frame--4x5 { aspect-ratio: 4 / 5; }

/* ---------- Header ---------- */
.site-header { position: sticky; top: 0; z-index: 40; }
.site-header .sw-header { flex-wrap: nowrap; padding-block: var(--space-4); }
.site-header .sw-header > a { flex: none; }
.site-header .sw-header__nav { flex-wrap: nowrap; }
.theme-switch { display: inline-flex; border: 1px solid var(--border-control); border-radius: var(--radius-pill); padding: 2px; }
.theme-switch button {
  font: 500 12px/16px var(--font-sans); letter-spacing: 0.04em; color: var(--ink-muted);
  background: transparent; border: 0; border-radius: var(--radius-pill); padding: var(--space-1) var(--space-3); cursor: pointer;
  transition: background-color .25s ease-out, color .25s ease-out;
}
.theme-switch button[aria-pressed="true"] { background: var(--action); color: var(--ink-on-action); }
.menu-btn { display: none; align-items: center; gap: var(--space-2); background: transparent; border: 1px solid var(--border-control); color: var(--ink); border-radius: var(--radius-pill); padding: var(--space-2) var(--space-4); cursor: pointer; }
.menu-btn svg { width: 20px; height: 20px; }
@media (max-width: 960px) {
  .menu-btn { display: inline-flex; }
  .site-header .sw-header__nav {
    display: none; position: absolute; left: 0; right: 0; top: 100%;
    flex-direction: column; align-items: flex-start; gap: var(--space-4);
    padding: var(--space-6); background: var(--surface); border-bottom: 1px solid var(--border-hairline);
  }
  .site-header.is-open .sw-header__nav { display: flex; }
  .site-header .sw-header__link { font-size: 15px; line-height: 20px; }
}

/* ---------- Home: full-width photo hero ---------- */
.hero { position: relative; min-height: min(88svh, 900px); display: grid; align-items: end; overflow: hidden; background: var(--surface-sunken); }
.hero-media { position: absolute; inset: 0; }
.hero-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; }
.hero-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; opacity: 0; transition: opacity 900ms ease; pointer-events: none; }
.hero-video.is-playing { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .hero-video { display: none; } }
.hero-plate { position: relative; padding-block: var(--space-12); }
/* the pine label plate the guide asks for when type sits over footage */
.hero-copy { max-width: 40rem; background: var(--surface-plate); color: var(--paper-50); border-radius: var(--radius-md); padding: var(--space-8); }
.hero-copy > * + * { margin-top: var(--space-4); }
.hero-copy .display-2xl { margin-top: var(--space-3); }
.hero-copy .actions { margin-top: var(--space-6); }
@media (max-width: 720px) {
  /* on phones the footage stands alone and the copy follows on the page ground */
  .hero { display: block; min-height: 0; background: var(--surface); }
  .hero-media { position: relative; aspect-ratio: 4 / 5; background: var(--surface-sunken); }
  .hero-plate { padding-block: 0; }
  .hero-copy { max-width: none; border-radius: 0; margin-inline: calc(-1 * var(--space-4)); padding: var(--space-8) var(--space-4) var(--space-12); background: var(--surface); }
}

/* ---------- Home: collections ---------- */
.collections-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-6); margin-top: var(--space-12); }
.collections-grid .sw-card__frame { aspect-ratio: 4 / 5; }
.collections-grid .sw-img { width: 100%; height: 100%; aspect-ratio: 4 / 5; }
.section-foot { margin-top: var(--space-12); display: flex; justify-content: center; }
@media (max-width: 900px) { .collections-grid { grid-template-columns: 1fr; } }
@media (min-width: 600px) and (max-width: 900px) { .collections-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ---------- Home: before you commission, a band in the opposite theme ---------- */
.answers-grid { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: var(--space-16); align-items: start; }
.answers-list { margin: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-12) var(--space-8); }
.answers-list > div { padding-top: var(--space-6); border-top: 1px solid var(--border-hairline); }
.answers-list dd { margin: var(--space-3) 0 0; }
.answers-list .display-md + p { margin-top: var(--space-3); }
@media (max-width: 900px) {
  .answers-grid { grid-template-columns: 1fr; gap: var(--space-12); }
}
@media (max-width: 600px) { .answers-list { grid-template-columns: 1fr; gap: var(--space-8); } }

/* ---------- Home: commission call to action ---------- */
.commission { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: var(--space-12); align-items: center; }
.commission-copy > * + * { margin-top: var(--space-6); }
.commission-copy .display-lg { margin-top: var(--space-3); }
.commission-copy .actions { margin-top: var(--space-8); }
.commission-list { margin: 0; padding-left: 1.1em; color: var(--ink-muted); }
.commission-list li + li { margin-top: var(--space-2); }
@media (max-width: 900px) { .commission { grid-template-columns: 1fr; gap: var(--space-8); } }

/* ---------- Inner pages: title block ---------- */
.page-intro { padding-block: var(--space-16) var(--space-12); border-bottom: 1px solid var(--border-hairline); }
.page-intro > * + * { margin-top: var(--space-6); }
.page-intro .display-xl { margin-top: var(--space-3); }
.crumbs { display: flex; flex-wrap: wrap; gap: var(--space-2); color: var(--ink-muted); }
.crumbs a { text-decoration: none; } .crumbs a:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.jump { display: flex; flex-wrap: wrap; gap: var(--space-3) var(--space-6); }
.jump a { text-decoration: none; color: var(--ink); border-bottom: 1px solid var(--border-hairline); padding-bottom: var(--space-1); }
.jump a:hover { border-bottom-color: var(--ink-accent); }
.section + .section { border-top: 1px solid var(--border-hairline); }
.section[data-band] + .section, .section + .section[data-band] { border-top: 0; }

/* ---------- Pieces: the PieceCard grid ---------- */
.pieces-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-12) var(--space-6); margin-top: var(--space-12); }
.sw-piece__frame .sw-img { aspect-ratio: 4 / 3; }
.sw-piece .sw-btn { align-self: flex-start; margin-top: var(--space-1); }
.collection-empty { margin-top: var(--space-12); padding: var(--space-8); border-radius: var(--radius-md); background: var(--surface-sunken); display: flex; flex-wrap: wrap; gap: var(--space-6); align-items: center; justify-content: space-between; }
@media (max-width: 900px) { .pieces-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .pieces-grid { grid-template-columns: 1fr; } }

/* ---------- Piece details ---------- */
.detail { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--space-12); align-items: start; padding-block: var(--space-12) var(--space-24); }
.gallery { display: grid; gap: var(--space-3); }
.gallery-thumbs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-3); }
.detail-info { position: sticky; top: 104px; }
.detail-info > * + * { margin-top: var(--space-6); }
.detail-info .display-md { margin-top: var(--space-2); }
.options { border: 0; margin-inline: 0; margin-bottom: 0; padding: 0; min-width: 0; }
.options legend { padding: 0; margin-bottom: var(--space-3); }
.option-row { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.option { position: relative; }
.option input { position: absolute; inset: 0; opacity: 0; cursor: pointer; margin: 0; }
.option span { display: inline-block; padding: var(--space-2) var(--space-4); border: 1px solid var(--border-control); border-radius: var(--radius-pill); font-size: 14px; line-height: 22px; transition: border-color .25s ease-out, background-color .25s ease-out; }
.option input:checked + span { border-color: var(--border-strong); box-shadow: inset 0 0 0 1px var(--border-strong); font-weight: 500; }
.option input:focus-visible + span { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
.spec { margin: 0; border-top: 1px solid var(--border-hairline); }
.spec > div { display: grid; grid-template-columns: 9rem 1fr; gap: var(--space-4); padding-block: var(--space-3); border-bottom: 1px solid var(--border-hairline); font-size: 14px; line-height: 22px; }
.spec dt { color: var(--ink-muted); }
.spec dd { margin: 0; }
@media (max-width: 900px) {
  .detail { grid-template-columns: 1fr; padding-block: var(--space-8) var(--space-16); }
  .detail-info { position: static; }
}

/* ---------- Two-column blocks and lists ---------- */
.split { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-12); }
.split > div > * + * { margin-top: var(--space-6); }
.list { margin: 0; padding-left: 1.1em; }
.list li + li { margin-top: var(--space-2); }
@media (max-width: 900px) { .split { grid-template-columns: 1fr; } }

.flow { list-style: none; margin: var(--space-12) 0 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--space-6); counter-reset: flow; }
.flow li { counter-increment: flow; padding-top: var(--space-4); border-top: 1px solid var(--border-hairline); }
.flow li::before { content: counter(flow); display: block; margin-bottom: var(--space-3); font-size: 14px; font-weight: 600; letter-spacing: 0.1em; color: var(--ink-accent); }
.flow h3 { margin-bottom: var(--space-2); }
@media (max-width: 900px) { .flow { grid-template-columns: 1fr; gap: var(--space-4); } }

/* ---------- Email enquiry card ---------- */
.mail-card { padding: var(--space-8); border-radius: var(--radius-md); background: var(--surface-sunken); display: grid; gap: var(--space-6); align-content: start; }
.mail-address { font-weight: 600; overflow-wrap: anywhere; }
.mail-address a { text-underline-offset: 3px; }
.form-wrap { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: var(--space-16); align-items: start; }
.form-wrap aside > * + * { margin-top: var(--space-6); }
.form-aside { position: sticky; top: 6rem; align-self: start; }
@media (max-width: 900px) { .form-wrap { grid-template-columns: 1fr; gap: var(--space-8); } .form-aside { position: static; } }

/* ---------- Our Process ---------- */
.chapter { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: var(--space-12); align-items: center; }
.chapter + .chapter { margin-top: var(--space-24); }
.chapter:nth-child(even) .frame { order: 2; }
.chapter-copy > * + * { margin-top: var(--space-6); }
.chapter-copy .display-lg { margin-top: var(--space-3); }
.maker-plate { display: grid; place-items: center; aspect-ratio: 4 / 3; border-radius: var(--radius-md); background: var(--surface-sunken); }
@media (max-width: 900px) { .chapter { grid-template-columns: 1fr; gap: var(--space-8); } .chapter:nth-child(even) .frame { order: 0; } .chapter + .chapter { margin-top: var(--space-16); } }

/* the siwaak story, on Our Process */
.story-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: var(--space-16); align-items: center; }
.story-mark { display: grid; place-items: center; padding: var(--space-12); border: 1px solid var(--border-hairline); border-radius: var(--radius-lg); }
.story-copy > * + * { margin-top: var(--space-8); }
.story-copy .display-lg { margin-top: var(--space-3); }
.steps { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--space-4); counter-reset: step; }
.steps li { display: grid; grid-template-columns: var(--space-12) 1fr; align-items: baseline; padding-top: var(--space-4); border-top: 1px solid var(--border-hairline); counter-increment: step; }
.steps li::before { content: counter(step); font-weight: 600; font-size: 14px; letter-spacing: 0.1em; color: var(--ink-accent); }
@media (max-width: 900px) { .story-grid { grid-template-columns: 1fr; gap: var(--space-8); } .story-mark { padding: var(--space-8); } }

/* ---------- Care ---------- */
.prose { max-width: var(--content-narrow); }
.prose > * + * { margin-top: var(--space-6); }
.prose h2 { margin-top: var(--space-16); }
.prose h2:first-child { margin-top: 0; }
.care-layout { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--space-16); align-items: start; }
.care-card { position: sticky; top: 104px; }
.care-card > * + * { margin-top: var(--space-4); }
.care-card .sw-care { box-shadow: var(--shadow-print); }
@media (max-width: 900px) { .care-layout { grid-template-columns: 1fr; } .care-card { position: static; } }

/* ---------- Contact ---------- */
.contact-details { margin: 0; display: grid; gap: var(--space-6); }
.contact-details dt { margin-bottom: var(--space-1); }
.contact-details dd { margin: 0; }
.contact-details a { text-underline-offset: 3px; overflow-wrap: anywhere; }

/* ---------- Closing band ---------- */
.closing { text-align: center; }
.closing .sw-heading { margin-bottom: 0; }

/* ---------- Footer: the SiteFooter band, inside the page width ---------- */
.sw-footer { padding-inline: 0; }
.sw-footer .page > .sw-footer__base { margin-top: var(--space-12); }
.sw-footer__cols { gap: var(--space-12) var(--space-16); }

/* ---------- Commission enquiry form ---------- */
.enquiry-form[hidden] { display: none; }
.enquiry-form .field { display: grid; gap: var(--space-2); }
.enquiry-form .field-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-4); }
@media (max-width: 600px) { .enquiry-form .field-row { grid-template-columns: 1fr; } }
.enquiry-form label { font-weight: 500; font-size: 15px; }
.enquiry-form input[type="text"], .enquiry-form input[type="email"], .enquiry-form input[type="tel"], .enquiry-form select, .enquiry-form textarea { width: 100%; font: inherit; font-size: 16px; line-height: 24px; color: var(--ink); background: var(--surface-raised); border: 1px solid var(--border-control); border-radius: var(--radius-sm); padding: var(--space-3) var(--space-4); }
.enquiry-form textarea { resize: vertical; min-height: 8rem; }
.enquiry-form .field-hint { margin: 0; }
.enquiry-form .field-trap { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.enquiry-form .form-status:empty { display: none; }
.enquiry-form .form-status.is-error { color: var(--danger); }
.enquiry-form button[disabled] { opacity: .6; cursor: progress; }