/* Hatch & Wren — styles.css — 2026-09-16 */
:root {
  --parchment: #efe9df; --parchment-2: #e4dccd; --ink: #141a22; --ink-2: rgba(20, 26, 34, 0.64); --ink-3: rgba(20, 26, 34, 0.4);
  --paper: rgba(239, 233, 223, 0.7); --oxblood: #7a2e2e; --line: rgba(20, 26, 34, 0.14); --line-light: rgba(239, 233, 223, 0.16);
  --serif: "Bodoni Moda", "Didot", Georgia, serif; --sans: "Hanken Grotesk", system-ui, sans-serif;
  --pad: clamp(20px, 4vw, 64px); --nav-h: 84px;
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body { margin: 0; background: var(--parchment); color: var(--ink); font: 400 15px/1.6 var(--sans); -webkit-font-smoothing: antialiased; }
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, p, ul, figure, dl, dd { margin: 0; }
ul { padding: 0; list-style: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
[hidden] { display: none !important; }
:focus-visible { outline: 2px solid var(--oxblood); outline-offset: 3px; }
.caps { font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; }
.display { font-family: var(--serif); font-weight: 400; text-transform: uppercase; letter-spacing: 0.02em; line-height: 0.98; font-variation-settings: "opsz" 96; }
.d1 { font-size: clamp(44px, 8vw, 118px); }
.d2 { font-size: clamp(34px, 5vw, 72px); }
.d3 { font-size: clamp(26px, 3vw, 40px); }
.italic { font-family: var(--serif); font-style: italic; font-weight: 400; letter-spacing: 0; text-transform: none; }
.btn { display: inline-flex; align-items: center; justify-content: center; height: 48px; padding: 0 30px; background: var(--ink); color: var(--parchment); font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; transition: background 0.2s; }
.btn:hover { background: var(--oxblood); }
.btn-light { background: var(--parchment); color: var(--ink); }
.btn-light:hover { background: var(--parchment-2); color: var(--ink); }
.dark { background: var(--ink); color: var(--parchment); }

/* nav */
.nav { position: fixed; inset: 0 0 auto 0; z-index: 30; height: var(--nav-h); display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; padding: 0 var(--pad); mix-blend-mode: difference; color: #fff; }
.brand { font-family: var(--serif); font-style: italic; font-size: 28px; letter-spacing: -0.01em; justify-self: start; }
.nav-links { display: flex; gap: 28px; }
.nav-links a { font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; opacity: 0.8; transition: opacity 0.2s; }
.nav-links a:hover, .nav-links a[aria-current] { opacity: 1; }
.nav-book { justify-self: end; display: flex; gap: 14px; align-items: center; font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; }
.nav-book span { opacity: 0.5; }
.nav-toggle { display: none; justify-self: end; font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; }
.sheet { position: fixed; inset: 0; z-index: 40; background: var(--ink); color: var(--parchment); display: grid; grid-template-rows: var(--nav-h) 1fr auto; padding: 0 var(--pad) 32px; }
.sheet-top { display: flex; align-items: center; justify-content: space-between; }
.sheet nav { align-self: center; display: grid; gap: 10px; }
.sheet nav a { font-family: var(--serif); text-transform: uppercase; font-size: clamp(32px, 9vw, 52px); letter-spacing: 0.02em; }
.sheet p { font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--paper); }

/* hero */
.hero { position: relative; min-height: 100vh; min-height: 100svh; display: grid; place-items: center; text-align: center; padding: calc(var(--nav-h) + 40px) var(--pad) 80px; }
.hero-inner { position: relative; display: grid; justify-items: center; gap: 36px; }
.hero h1 { max-width: 12ch; }
.hero-still { position: absolute; left: -22%; top: -14%; width: clamp(140px, 22vw, 300px); aspect-ratio: 3 / 2; overflow: hidden; box-shadow: 0 30px 60px rgba(20, 26, 34, 0.18); }
.hero-still img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(0.2); }
.hero .caps { color: var(--ink-2); }

/* the ritual band */
.ritual { position: relative; overflow: hidden; min-height: 130vh; }
.marquee { position: absolute; left: 0; right: 0; top: 10%; display: grid; gap: 0.1em; pointer-events: none; opacity: 0.9; }
.marquee div { white-space: nowrap; font-size: clamp(64px, 11vw, 170px); display: flex; gap: 0.6em; will-change: transform; }
.marquee div span { flex: none; }
.collage { position: relative; width: min(1200px, 100% - 2 * var(--pad)); margin-inline: auto; height: 130vh; }
.collage figure { position: absolute; overflow: hidden; will-change: transform; box-shadow: 0 40px 80px rgba(0, 0, 0, 0.35); }
.collage img { width: 100%; height: 100%; object-fit: cover; }
.collage .c1 { left: 34%; top: 12%; width: 32%; aspect-ratio: 3 / 4; }
.collage .c2 { left: 4%; top: 46%; width: 24%; aspect-ratio: 4 / 5; }
.collage .c3 { right: 2%; top: 38%; width: 30%; aspect-ratio: 5 / 4; }
.collage .c4 { left: 38%; top: 74%; width: 20%; aspect-ratio: 1; }
.ritual .caption { position: absolute; left: var(--pad); bottom: 48px; max-width: 34ch; color: var(--paper); font-size: 14px; }

/* full-bleed */
.bleed { position: relative; min-height: 90vh; display: grid; align-items: end; padding: var(--pad); isolation: isolate; color: var(--parchment); }
.bleed img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -1; }
.bleed::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(20, 26, 34, 0) 40%, rgba(20, 26, 34, 0.75)); }
.bleed-copy { display: grid; gap: 18px; justify-items: start; max-width: 720px; }
.bleed-copy p { font-size: 15px; color: var(--paper); max-width: 48ch; }
.link { display: inline-flex; align-items: center; gap: 10px; font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; border-bottom: 1px solid currentColor; padding-bottom: 4px; }
.link:hover { color: var(--oxblood); }
.dark .link:hover, .bleed .link:hover { color: var(--parchment-2); }

/* house (people) */
.house { padding: clamp(96px, 12vw, 160px) var(--pad); display: grid; gap: 56px; }
.house-head { display: grid; gap: 14px; }
.people { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px 24px; }
.person { display: grid; gap: 16px; }
.person figure { aspect-ratio: 4 / 5; overflow: hidden; background: var(--parchment-2); }
.person img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(1) contrast(1.05); transition: filter 0.6s, transform 1.2s cubic-bezier(0.2, 0.7, 0.2, 1); }
.person:hover img { filter: grayscale(0); transform: scale(1.02); }
.person h3 { font-family: var(--serif); text-transform: uppercase; letter-spacing: 0.04em; font-weight: 400; font-size: 22px; }
.person .caps { color: var(--ink-2); }
.person p { font-size: 14px; color: var(--ink-2); }
.person.is-wide { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr 1fr; gap: 32px; align-items: end; }
.person.is-wide figure { aspect-ratio: 4 / 3; }
.person.is-wide h3 { font-size: clamp(30px, 4vw, 56px); }
.person.is-wide p { font-size: 16px; max-width: 46ch; }

/* treatments */
.treatments { padding: clamp(96px, 12vw, 160px) var(--pad); display: grid; grid-template-columns: 1fr 1.2fr; gap: 64px; align-items: start; }
.treatments .display { position: sticky; top: 120px; }
.menu { display: grid; }
.menu li { display: grid; grid-template-columns: 1fr auto; gap: 24px; padding: 22px 0; border-top: 1px solid var(--line-light); }
.menu li:last-child { border-bottom: 1px solid var(--line-light); }
.menu b { font-family: var(--serif); font-weight: 400; text-transform: uppercase; letter-spacing: 0.04em; font-size: 20px; display: block; }
.menu small { font-size: 13px; color: var(--paper); display: block; margin-top: 4px; }
.menu span { font-family: var(--serif); font-size: 22px; }

/* rooms */
.rooms { display: grid; grid-template-columns: 1fr 1fr; }
.room { position: relative; min-height: 70vh; display: grid; align-items: end; padding: var(--pad); isolation: isolate; color: var(--parchment); }
.room img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -1; transition: transform 1.2s cubic-bezier(0.2, 0.7, 0.2, 1); }
.room:hover img { transform: scale(1.03); }
.room::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(20, 26, 34, 0.05), rgba(20, 26, 34, 0.7)); }
.room div { display: grid; gap: 8px; }
.room .caps { color: var(--paper); }

/* newsletter + footer */
.news { padding: clamp(80px, 10vw, 130px) var(--pad); text-align: center; display: grid; justify-items: center; gap: 22px; }
.news p { max-width: 44ch; color: var(--ink-2); }
.news form { display: flex; gap: 0; width: min(520px, 100%); }
.news input { flex: 1; font: inherit; padding: 0 16px; height: 48px; border: 1px solid var(--line); border-right: 0; background: transparent; color: var(--ink); }
.footer { padding: 40px var(--pad); border-top: 1px solid var(--line); display: flex; justify-content: space-between; gap: 24px; flex-wrap: wrap; align-items: center; }
.footer ul { display: flex; gap: 24px; flex-wrap: wrap; }
.footer a:hover { color: var(--oxblood); }
.footer .caps { color: var(--ink-2); }

/* inner pages */
.page-head { padding: calc(var(--nav-h) + clamp(48px, 8vw, 110px)) var(--pad) clamp(40px, 6vw, 80px); text-align: center; display: grid; justify-items: center; gap: 22px; }
.page-head p { max-width: 54ch; font-size: 16px; color: var(--ink-2); }
.prose { max-width: 720px; margin-inline: auto; padding: 0 var(--pad) clamp(80px, 10vw, 140px); display: grid; gap: 22px; font-size: 17px; line-height: 1.65; }
.prose .italic { font-size: clamp(24px, 3vw, 36px); line-height: 1.2; text-align: center; padding: 20px 0; }
.two { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; padding: 0 var(--pad) clamp(80px, 10vw, 140px); align-items: start; }
.two figure { aspect-ratio: 4 / 5; overflow: hidden; }
.two figure img { width: 100%; height: 100%; object-fit: cover; }
.detail { display: grid; gap: 24px; }
.detail dl { display: grid; grid-template-columns: auto 1fr; gap: 10px 24px; font-size: 15px; }
.detail dt { color: var(--ink-3); font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; padding-top: 3px; }
.form { display: grid; gap: 16px; }
.form label { display: grid; gap: 6px; font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-2); }
.form input, .form select, .form textarea { font: 400 15px/1.5 var(--sans); letter-spacing: 0; text-transform: none; color: var(--ink); background: transparent; border: 0; border-bottom: 1px solid var(--line); padding: 10px 0; border-radius: 0; }
.form textarea { min-height: 100px; resize: vertical; }
.form .btn { justify-self: start; margin-top: 10px; }
.form-status { font-size: 13px; color: var(--oxblood); min-height: 1em; }
.light-menu .menu li { border-color: var(--line); }
.light-menu .menu small { color: var(--ink-2); }

/* demo note */
.demo-note { position: fixed; left: 12px; bottom: 12px; z-index: 50; padding: 6px 10px; border-radius: 999px; background: rgba(20, 26, 34, 0.6); color: rgba(239, 233, 223, 0.7); font: 400 11px/1 var(--sans); backdrop-filter: blur(6px); }
.demo-note:hover { color: var(--parchment); }

@media (prefers-reduced-motion: reduce) { * { transition-duration: 0.001s !important; } html { scroll-behavior: auto; } .marquee div, .collage figure { transform: none !important; } }
@media (max-width: 960px) {
  .nav { grid-template-columns: 1fr auto; }
  .nav-links, .nav-book { display: none; }
  .nav-toggle { display: inline-block; }
  .hero-still { left: auto; right: -6%; top: -18%; width: 34vw; }
  .people { grid-template-columns: 1fr 1fr; }
  .person.is-wide { grid-template-columns: 1fr; }
  .treatments { grid-template-columns: 1fr; gap: 32px; }
  .treatments .display { position: static; }
  .rooms, .two { grid-template-columns: 1fr; }
  .collage .c1 { left: 8%; width: 46%; } .collage .c2 { left: 60%; top: 40%; width: 34%; } .collage .c3 { right: auto; left: 4%; top: 62%; width: 44%; } .collage .c4 { left: 58%; top: 78%; width: 30%; }
}
@media (max-width: 560px) {
  .people { grid-template-columns: 1fr; }
  .footer ul { gap: 14px; }
  .news form { flex-direction: column; }
  .news input { border-right: 1px solid var(--line); }
}