/* =====================================================================
   1SSW — site styles
   Built from the 1SSW Brand Identity System v1.0:
   warm neutrals, generous white space, light oversized grotesk
   headlines, Bodoni caps for section names. Photography carries colour.
   ===================================================================== */

/* ---------- Brand tokens (from the style guide, section 02 Colour) ---------- */
:root {
  --gallery: #EFEEEB;   /* page ground */
  --paper: #FAF9F7;     /* cards, reversed type */
  --stone: #D9D6D1;     /* panels, image fill, hairline rules */
  --clay: #8C6A47;      /* accent panels, numerals — max one panel per spread */
  --charcoal: #262523;  /* dark spreads */
  --ink: #1F1E1C;       /* type, logo, rules */
  --body: #3A3936;      /* body text */
  --caption: #6B6863;   /* captions */

  --grotesk: "Hanken Grotesk", system-ui, sans-serif;
  --bodoni: "Bodoni Moda", Georgia, serif;

  /* Layout (section 04): 88px outer margin, 96px top, 40–64px gutters */
  --margin: 88px;
  --gutter: 64px;
  --section-space: 144px;
  --max: 1744px; /* 1920 − 2 × 88 */
}

@media (max-width: 1100px) {
  :root { --margin: 48px; --gutter: 40px; --section-space: 112px; }
}
@media (max-width: 640px) {
  :root { --margin: 20px; --gutter: 28px; --section-space: 80px; }
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; scroll-padding-top: 80px; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--gallery);
  color: var(--body);
  font-family: var(--grotesk);
  font-weight: 400;
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
h1, h2, h3, p, ul, ol, dl, dd, figure, blockquote { margin: 0; padding: 0; }
ul, ol { list-style: none; }

:focus-visible { outline: 2px solid var(--clay); outline-offset: 3px; }

.container {
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 var(--margin);
}
.section { padding: var(--section-space) 0; }

/* ---------- Type scale (section 03 Typography) ---------- */

/* Display — Grotesk 300, tracking −5.5% */
.display {
  font-weight: 300;
  font-size: clamp(48px, 7.2vw, 128px);
  line-height: 0.98;
  letter-spacing: -0.055em;
  color: var(--ink);
}
.display-sm {
  font-weight: 300;
  font-size: clamp(40px, 4.6vw, 80px);
  line-height: 1.02;
  letter-spacing: -0.05em;
  color: var(--ink);
}

/* Feature title — Bodoni, uppercase only */
.feature-title {
  font-family: var(--bodoni);
  font-weight: 400;
  text-transform: uppercase;
  font-size: clamp(30px, 3vw, 48px);
  line-height: 1.05;
  letter-spacing: 0.02em;
  color: var(--ink);
}

/* Lead — Grotesk 300, tracking −3% */
.lead, .section-lead, .statement {
  font-weight: 300;
  letter-spacing: -0.03em;
  color: var(--ink);
}
.lead { font-size: clamp(20px, 1.7vw, 26px); line-height: 1.35; max-width: 30ch; }
.section-lead { font-size: clamp(19px, 1.5vw, 23px); line-height: 1.4; max-width: 34ch; }
.statement { font-size: clamp(26px, 2.8vw, 44px); line-height: 1.18; max-width: 26ch; }

/* Label — Grotesk 600, tracking +18%, uppercase */
.label, .kicker, .tag, .folio, dt, .piece-meta, .filter, .btn, .site-nav a, .nav-toggle,
.values li, .workshop-strip p, .field label, .folio-row, .footer-nav a, .spec-meta {
  font-family: var(--grotesk);
  font-weight: 600;
  font-size: 12px;
  line-height: 1.4;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
.label, .kicker { color: var(--ink); }
.num { color: var(--clay); } /* clay for numerals */

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 52px;
  padding: 0 28px;
  border: 1px solid var(--ink);
  border-radius: 0;
  text-decoration: none;
  cursor: pointer;
  transition: background-color .2s, color .2s;
}
.btn-ink { background: var(--ink); color: var(--paper); }
.btn-ink:hover { background: var(--charcoal); }
.btn-line { background: transparent; color: var(--ink); }
.btn-line:hover { background: var(--ink); color: var(--paper); }

/* ---------- Header ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: color-mix(in srgb, var(--gallery) 94%, transparent);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--stone);
}
.header-inner {
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 var(--margin);
  height: 76px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
/* Logo minimum size is 96px wide — this renders ~104px */
.logo img { height: 36px; width: auto; }

.site-nav { display: flex; align-items: center; gap: 36px; }
.site-nav a { text-decoration: none; color: var(--ink); padding: 6px 0; }
.site-nav a:not(.nav-cta) { background: linear-gradient(var(--ink), var(--ink)) 0 100% / 0 1px no-repeat; transition: background-size .25s; }
.site-nav a:not(.nav-cta):hover { background-size: 100% 1px; }
.nav-cta { border: 1px solid var(--ink); padding: 12px 20px !important; }
.nav-cta:hover { background: var(--ink); color: var(--paper) !important; }

.nav-toggle {
  display: none;
  background: none;
  border: 1px solid var(--ink);
  color: var(--ink);
  padding: 10px 16px;
  cursor: pointer;
}

@media (max-width: 900px) {
  .nav-toggle { display: block; }
  .site-nav {
    position: absolute;
    top: 76px; left: 0; right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    background: var(--gallery);
    border-bottom: 1px solid var(--ink);
    padding: 8px var(--margin) 24px;
    display: none;
  }
  .site-nav.is-open { display: flex; }
  .site-nav a { padding: 18px 0; border-bottom: 1px solid var(--stone); }
  .nav-cta { margin-top: 20px; text-align: center; }
}

/* ---------- Hero · split spread ---------- */
.hero {
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: calc(100vh - 76px);
  min-height: calc(100svh - 76px);
}
.hero-text {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 36px;
  padding: 96px var(--gutter) 96px var(--margin);
  position: relative;
}
.hero-text .display { font-size: clamp(44px, 5.4vw, 112px); }
.hero-text .display span { display: block; white-space: nowrap; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; }
.hero .folio {
  position: absolute;
  bottom: 44px;
  left: var(--margin);
  color: var(--caption);
}
.hero-image { position: relative; background: var(--stone); }
.hero-image img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: 50% 60%;
}

/* Overlay spec card — sits on photography, square corners */
.spec-card {
  position: absolute;
  left: 40px; bottom: 40px;
  display: grid;
  gap: 6px;
  min-width: 260px;
  padding: 22px 26px;
  background: var(--paper);
}
.tag { color: var(--clay); }
.spec-title {
  font-family: var(--bodoni);
  text-transform: uppercase;
  font-size: 20px;
  line-height: 1.15;
  color: var(--ink);
}
.spec-meta { color: var(--caption); font-size: 11px; }

@media (max-width: 900px) {
  .hero { grid-template-columns: 1fr; min-height: 0; }
  .hero-text { padding: 72px var(--margin) 96px; }
  .hero-image { aspect-ratio: 4 / 5; }
  .spec-card { left: var(--margin); bottom: 20px; min-width: 0; }
}

/* ---------- Section heads — a 1px Ink rule opens every group ---------- */
.section-head {
  display: grid;
  gap: 20px;
  padding-top: 28px;
  border-top: 1px solid var(--ink);
}

/* ---------- Intro ---------- */
.intro { background: var(--paper); }
.intro-grid {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: var(--gutter);
  padding-top: 28px;
  border-top: 1px solid var(--ink);
}
.glance { margin-top: 64px; }
.glance div {
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: 24px;
  padding: 18px 0;
  border-top: 1px solid var(--stone);
}
.glance div:last-child { border-bottom: 1px solid var(--stone); }
.glance dt { color: var(--ink); padding-top: 4px; }
.glance dd { color: var(--body); }

@media (max-width: 900px) {
  .intro-grid { grid-template-columns: 1fr; gap: 28px; }
  .glance { margin-top: 40px; }
  .glance div { grid-template-columns: 1fr; gap: 4px; }
}

/* ---------- 01 · Selected work — numbered collection grid ---------- */
.work .section-head { grid-template-columns: 1fr 1fr; align-items: end; }
.work .section-head .kicker { grid-column: 1 / -1; }
.work .section-lead { justify-self: end; }

.filters { display: flex; flex-wrap: wrap; gap: 8px; margin: 56px 0 32px; }
.filter {
  background: transparent;
  border: 1px solid var(--stone);
  color: var(--ink);
  padding: 10px 18px;
  cursor: pointer;
  border-radius: 0;
}
.filter:hover { border-color: var(--ink); }
.filter.is-active { background: var(--ink); border-color: var(--ink); color: var(--paper); }

.collection {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 56px 40px;
}
.piece-wide { grid-column: span 2; }
.piece.is-hidden { display: none; }

.piece-btn {
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  background: var(--stone);
  cursor: zoom-in;
  overflow: hidden;
  aspect-ratio: 3 / 4;
}
/* Wide pieces span two columns; 8:5 keeps them roughly level with 3:4 neighbours */
.piece-wide .piece-btn { aspect-ratio: 8 / 5; }
.piece-btn img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform .6s ease;
}
.piece-btn:hover img { transform: scale(1.03); }

.piece-caption {
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px solid var(--ink);
  font-family: var(--bodoni);
  text-transform: uppercase;
  font-size: 17px;
  line-height: 1.25;
  color: var(--ink);
}
.piece-caption .num { font-family: var(--grotesk); font-weight: 600; font-size: 12px; letter-spacing: .18em; margin-right: 10px; }
.piece-meta { margin-top: 6px; color: var(--caption); font-size: 11px; }

@media (max-width: 1100px) {
  .collection { grid-template-columns: repeat(2, 1fr); }
  .piece-wide { grid-column: span 2; }
}
@media (max-width: 640px) {
  .work .section-head { grid-template-columns: 1fr; }
  .work .section-lead { justify-self: start; }
  .collection { grid-template-columns: 1fr; gap: 48px; }
  .piece-wide { grid-column: auto; }
  .piece-wide .piece-btn { aspect-ratio: 4 / 3; }
}

/* ---------- 02 · What we make — index rows ---------- */
.make { background: var(--paper); }
.make-grid {
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  gap: var(--gutter);
}
.index-list { border-top: 1px solid var(--ink); }
.index-list li {
  display: grid;
  grid-template-columns: 56px 1fr 1.3fr;
  gap: 24px;
  align-items: baseline;
  padding: 28px 0;
  border-bottom: 1px solid var(--stone);
}
.index-list .num { font-weight: 600; font-size: 12px; letter-spacing: .18em; }
.index-list h3 {
  font-weight: 300;
  font-size: clamp(22px, 1.9vw, 30px);
  letter-spacing: -0.03em;
  line-height: 1.15;
  color: var(--ink);
}
.index-list p { color: var(--body); font-size: 16px; }

@media (max-width: 1100px) {
  .make-grid { grid-template-columns: 1fr; gap: 56px; }
}
@media (max-width: 640px) {
  .index-list li { grid-template-columns: 40px 1fr; gap: 8px 12px; }
  .index-list p { grid-column: 2; }
}

/* ---------- 03 · Process — the clay accent panel ---------- */
.process {
  background: var(--clay);
  color: var(--paper);
  padding: var(--section-space) 0;
}
.process .section-head { border-top-color: var(--paper); }
.process .kicker, .process .feature-title, .process .section-lead { color: var(--paper); }
.process .num { color: var(--paper); opacity: .75; }
.process .section-head { grid-template-columns: 1fr 1fr; align-items: end; }
.process .section-head .kicker { grid-column: 1 / -1; }
.process .section-lead { justify-self: end; }

.steps {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 40px;
  margin-top: 88px;
}
.steps li { border-top: 1px solid color-mix(in srgb, var(--paper) 45%, transparent); padding-top: 24px; }
.step-num {
  display: block;
  font-weight: 300;
  font-size: clamp(64px, 6vw, 104px);
  line-height: 1;
  letter-spacing: -0.055em;
  margin-bottom: 28px;
}
.steps h3 {
  font-family: var(--bodoni);
  font-weight: 400;
  text-transform: uppercase;
  font-size: 22px;
  letter-spacing: .02em;
  margin-bottom: 10px;
}
.steps p { font-size: 16px; color: color-mix(in srgb, var(--paper) 88%, transparent); max-width: 28ch; }

@media (max-width: 1100px) { .steps { grid-template-columns: repeat(2, 1fr); gap: 56px 40px; } }
@media (max-width: 640px) {
  .process .section-head { grid-template-columns: 1fr; }
  .process .section-lead { justify-self: start; }
  .steps { grid-template-columns: 1fr; margin-top: 56px; }
}

/* ---------- 04 · Our makers — dark spread ---------- */
.makers {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  background: var(--charcoal);
  color: color-mix(in srgb, var(--paper) 82%, transparent);
}
.makers-image { position: relative; min-height: 560px; }
.makers-image img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: 60% 40%;
  filter: saturate(.82);
}
.makers-text {
  padding: 120px var(--margin) 120px var(--gutter);
  display: flex;
  flex-direction: column;
  gap: 24px;
  max-width: 760px;
}
.makers .kicker { color: var(--paper); padding-top: 28px; border-top: 1px solid var(--paper); }
.makers .display-sm { color: var(--paper); margin-bottom: 12px; }
.makers p { max-width: 50ch; }

.values {
  display: grid;
  grid-template-columns: 1fr 1fr;
  margin-top: 20px;
  border-top: 1px solid color-mix(in srgb, var(--paper) 30%, transparent);
}
.values li {
  padding: 16px 0;
  border-bottom: 1px solid color-mix(in srgb, var(--paper) 18%, transparent);
  color: var(--paper);
}
.values .num { margin-right: 12px; color: #B8946D; } /* lighter clay tint for contrast on charcoal */
.motto {
  margin-top: 16px;
  font-family: var(--bodoni);
  text-transform: uppercase;
  font-size: 20px;
  line-height: 1.3;
  color: var(--paper);
}

@media (max-width: 900px) {
  .makers { grid-template-columns: 1fr; }
  .makers-image { min-height: 0; aspect-ratio: 4 / 3; }
  .makers-text { padding: 72px var(--margin) 88px; }
}
@media (max-width: 480px) { .values { grid-template-columns: 1fr; } }

/* ---------- Workshop strip + quote ---------- */
.workshop-strip {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 40px;
}
.workshop-strip img { aspect-ratio: 4 / 5; object-fit: cover; width: 100%; background: var(--stone); }
.workshop-strip p { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--stone); color: var(--ink); }
.workshop-strip .num { margin-right: 10px; }

.quote {
  margin: var(--section-space) auto 0;
  max-width: 1100px;
  text-align: center;
}
.quote p {
  font-weight: 300;
  font-size: clamp(26px, 3vw, 46px);
  line-height: 1.2;
  letter-spacing: -0.035em;
  color: var(--ink);
}

@media (max-width: 900px) {
  .workshop-strip { grid-template-columns: 1fr 1fr; gap: 20px; }
  .workshop-strip li:first-child { grid-column: span 2; }
  .workshop-strip li:first-child img { aspect-ratio: 3 / 2; }
}
@media (max-width: 480px) {
  .workshop-strip { grid-template-columns: 1fr; }
  .workshop-strip li:first-child { grid-column: auto; }
}

/* ---------- 05 · Contact ---------- */
.contact { background: var(--paper); }
.contact-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: calc(var(--gutter) * 1.5);
  padding-top: 28px;
  border-top: 1px solid var(--ink);
}
.contact .kicker { margin-bottom: 24px; }
.contact .display-sm { margin-bottom: 24px; }
.contact-list { margin-top: 56px; }
.contact-list div {
  display: grid;
  grid-template-columns: 140px 1fr;
  gap: 16px;
  padding: 16px 0;
  border-top: 1px solid var(--stone);
}
.contact-list div:last-child { border-bottom: 1px solid var(--stone); }
.contact-list dt { color: var(--caption); padding-top: 4px; }
.contact-list dd { color: var(--ink); font-size: 18px; }
.contact-list a { text-decoration: none; background: linear-gradient(var(--ink), var(--ink)) 0 100% / 100% 1px no-repeat; }

.enquiry { display: grid; gap: 24px; align-content: start; }
.field { display: grid; gap: 8px; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.field label { color: var(--ink); }
.field input, .field select, .field textarea {
  width: 100%;
  font: inherit;
  font-size: 17px;
  color: var(--ink);
  background: var(--gallery);
  border: 1px solid var(--stone);
  border-radius: 0;
  padding: 14px 16px;
  appearance: none;
}
.field select {
  background-image: linear-gradient(45deg, transparent 50%, var(--ink) 50%), linear-gradient(135deg, var(--ink) 50%, transparent 50%);
  background-position: calc(100% - 22px) 50%, calc(100% - 16px) 50%;
  background-size: 6px 6px;
  background-repeat: no-repeat;
  padding-right: 44px;
}
.field textarea { resize: vertical; min-height: 140px; }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--ink); background: var(--paper); }
.field [aria-invalid="true"] { border-color: var(--clay); }
.form-error { color: var(--clay); font-size: 15px; }
.enquiry .btn { justify-self: start; }

@media (max-width: 900px) {
  .contact-grid { grid-template-columns: 1fr; gap: 64px; }
}
@media (max-width: 480px) {
  .field-row { grid-template-columns: 1fr; }
  .contact-list div { grid-template-columns: 1fr; gap: 2px; }
  .enquiry .btn { justify-self: stretch; }
}

/* ---------- Footer — paper on charcoal ---------- */
.site-footer { background: var(--charcoal); color: color-mix(in srgb, var(--paper) 75%, transparent); padding: 96px 0 44px; }
.footer-inner {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: var(--gutter);
  align-items: start;
}
.footer-logo { height: 44px; width: auto; }
.footer-line { max-width: 36ch; font-size: 16px; }
.footer-nav { display: grid; gap: 12px; }
.footer-nav a { color: var(--paper); text-decoration: none; }
.footer-nav a:hover { text-decoration: underline; text-underline-offset: 4px; }
.folio-row {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin-top: 96px;
  padding-top: 20px;
  border-top: 1px solid color-mix(in srgb, var(--paper) 22%, transparent);
  color: color-mix(in srgb, var(--paper) 60%, transparent);
}

@media (max-width: 900px) {
  .footer-inner { grid-template-columns: 1fr; gap: 36px; }
}

/* ---------- Lightbox ---------- */
.lightbox {
  width: min(92vw, 1200px);
  max-height: 92vh;
  padding: 0;
  border: 0;
  background: var(--charcoal);
  color: var(--paper);
}
.lightbox::backdrop { background: rgba(31, 30, 28, .86); }
.lightbox img { width: 100%; max-height: calc(92vh - 64px); object-fit: contain; background: var(--charcoal); }
.lightbox-caption {
  padding: 18px 24px;
  font-family: var(--bodoni);
  text-transform: uppercase;
  font-size: 16px;
}
.lightbox-close {
  position: absolute;
  top: 12px; right: 12px;
  background: var(--paper);
  color: var(--ink);
  border: 0;
  padding: 10px 16px;
  font: 600 12px/1 var(--grotesk);
  letter-spacing: .18em;
  text-transform: uppercase;
  cursor: pointer;
}

/* ---------- Gentle reveal on scroll ---------- */
.reveal { opacity: 0; transform: translateY(24px); transition: opacity .8s ease, transform .8s ease; }
.reveal.is-visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
}