/* ==========================================================================
   Burl & Beam — design system
   --------------------------------------------------------------------------
   One idea governs every choice here: the wood is the only color that matters.
   The page is a gallery wall. It is dark, quiet, and gets out of the way.
   Brass is an accent, never a theme. Nothing is decorated that could be plain.
   ========================================================================== */

/* --- tokens ---------------------------------------------------------------
   Light is the default definition; dark overrides only what must change.
   Both themes are defined on :root so a color never exists solely inside a
   media query.
   ------------------------------------------------------------------------- */
:root {
  /* Ground */
  --ink:            #14110C;   /* warm near-black — text on paper */
  --paper:          #F4F0E7;   /* warm off-white — the page */
  --surface:        #FBF8F2;   /* raised card on paper */
  --surface-sunk:   #EAE4D7;   /* recessed band */
  --rule:           #D8D0BE;   /* hairlines */

  /* Type */
  --fg:             #14110C;
  --fg-muted:       #554C3D;
  --fg-faint:       #7C7161;

  /* Brass — the single accent.
     --brass is the AA-safe text value; --brass-disp is display-size only
     (it measures 3.2:1 on paper, which fails AA for body copy). */
  --brass:          #7A5A1C;
  --brass-disp:     #A9803C;
  --brass-line:     #C9A462;

  /* Deep water — used only where a piece's own material calls for it */
  --ocean:          #2C4450;
  --ocean-light:    #4A6B7C;

  --focus:          #A9803C;

  /* Rhythm */
  --measure:        68ch;
  --gutter:         clamp(1.25rem, 5vw, 4rem);
  --bay:            clamp(4.5rem, 11vw, 9rem);   /* vertical section rhythm */
  --shell:          80rem;

  --ease:           cubic-bezier(.22, .61, .36, 1);

  color-scheme: light dark;
}

:root:not([data-theme="light"]) {
  --ink:            #F1EBDF;
  --paper:          #100E0B;
  --surface:        #17140F;
  --surface-sunk:   #0A0908;
  --rule:           #2C2721;

  --fg:             #EDE6D8;
  --fg-muted:       #A79C89;
  --fg-faint:       #7C7263;

  --brass:          #C9A462;   /* on near-black this is the readable value */
  --brass-disp:     #C9A462;
  --brass-line:     #6B5628;

  --ocean:          #8FB4C6;
  --ocean-light:    #A9C8D6;

  --focus:          #C9A462;
}

@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    --ink:          #14110C;
    --paper:        #F4F0E7;
    --surface:      #FBF8F2;
    --surface-sunk: #EAE4D7;
    --rule:         #D8D0BE;
    --fg:           #14110C;
    --fg-muted:     #554C3D;
    --fg-faint:     #7C7161;
    --brass:        #7A5A1C;
    --brass-disp:   #A9803C;
    --brass-line:   #C9A462;
    --ocean:        #2C4450;
    --ocean-light:  #4A6B7C;
    --focus:        #A9803C;
  }
}

/* --- reset ---------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--paper);
  color: var(--fg);
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-size: clamp(1rem, .96rem + .18vw, 1.0625rem);
  line-height: 1.68;
  font-weight: 350;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img, svg, video { display: block; max-width: 100%; height: auto; }
a { color: inherit; }

/* --- type ---------------------------------------------------------------- */
h1, h2, h3, h4, .display {
  font-family: "Cormorant Garamond", "Iowan Old Style", Georgia, serif;
  font-weight: 300;
  line-height: 1.06;
  letter-spacing: -0.005em;
  margin: 0;
  text-wrap: balance;
}

.d1 { font-size: clamp(2.75rem, 1.6rem + 5.6vw, 6.5rem); }
.d2 { font-size: clamp(2.1rem, 1.4rem + 3.2vw, 4rem); }
.d3 { font-size: clamp(1.6rem, 1.25rem + 1.6vw, 2.5rem); }
.d4 { font-size: clamp(1.25rem, 1.1rem + .8vw, 1.6rem); }

/* The eyebrow is the workhorse label of the whole site: letter-spaced small
   caps in brass. Used for section kickers, edition marks, and spec keys. */
.eyebrow {
  font-family: "Inter", sans-serif;
  font-size: .6875rem;
  font-weight: 500;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--brass);
  margin: 0 0 1.25rem;
}
.eyebrow--plain { color: var(--fg-faint); }

.lede {
  font-size: clamp(1.125rem, 1rem + .55vw, 1.5rem);
  line-height: 1.55;
  color: var(--fg-muted);
  font-weight: 300;
  max-width: 46ch;
  text-wrap: pretty;
}

p { margin: 0 0 1.25em; max-width: var(--measure); text-wrap: pretty; }
p:last-child { margin-bottom: 0; }

.prose > * + * { margin-top: 1.25em; }
.prose strong { font-weight: 600; color: var(--fg); }

/* A pull-quote sized statement, used sparingly — once per page at most. */
.statement {
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: clamp(1.5rem, 1.1rem + 1.9vw, 2.75rem);
  font-weight: 300;
  line-height: 1.22;
  color: var(--fg);
  max-width: 24ch;
  margin: 0;
}

/* --- layout -------------------------------------------------------------- */
.shell {
  width: 100%;
  max-width: var(--shell);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.shell--narrow { max-width: 54rem; }

.bay { padding-block: var(--bay); }
.bay--sunk { background: var(--surface-sunk); }
.bay--tight { padding-block: calc(var(--bay) * .6); }

.rule-top { border-top: 1px solid var(--rule); }

.split {
  display: grid;
  gap: clamp(2rem, 5vw, 5rem);
  align-items: center;
}
@media (min-width: 62rem) {
  .split { grid-template-columns: 1fr 1fr; }
  .split--wide-left  { grid-template-columns: 1.25fr 1fr; }
  .split--wide-right { grid-template-columns: 1fr 1.25fr; }
  .split--flip > :first-child { order: 2; }
}

.stack-lg > * + * { margin-top: 2rem; }
.stack   > * + * { margin-top: 1.25rem; }

/* --- links & buttons ----------------------------------------------------- */
a:focus-visible, button:focus-visible, input:focus-visible, summary:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 3px;
  border-radius: 2px;
}

.link {
  color: var(--brass);
  text-decoration: none;
  border-bottom: 1px solid var(--brass-line);
  padding-bottom: 1px;
  transition: border-color .25s var(--ease), color .25s var(--ease);
}
.link:hover { border-color: var(--brass); }

/* The "quiet arrow" link — the site's default call to action. It is a line of
   text with a rule under it, not a box. Boxes would fight the photography. */
.cta {
  display: inline-flex;
  align-items: baseline;
  gap: .6rem;
  font-family: "Inter", sans-serif;
  font-size: .8125rem;
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--brass);
  text-decoration: none;
  padding-bottom: .55rem;
  border-bottom: 1px solid var(--brass-line);
  transition: border-color .3s var(--ease), gap .3s var(--ease);
}
.cta:hover { border-color: var(--brass); gap: 1rem; }
.cta::after { content: "\2192"; font-size: 1rem; line-height: 1; }

/* The one solid button on the site, reserved for reservation submits. */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  font-family: "Inter", sans-serif;
  font-size: .8125rem;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  padding: 1.0625rem 2.25rem;
  border: 1px solid var(--brass);
  background: var(--brass);
  color: var(--paper);
  border-radius: 0;
  cursor: pointer;
  text-decoration: none;
  transition: background .3s var(--ease), color .3s var(--ease);
}
.btn:hover { background: transparent; color: var(--brass); }
.btn[disabled] { opacity: .5; cursor: not-allowed; }
.btn--ghost { background: transparent; color: var(--brass); }
.btn--ghost:hover { background: var(--brass); color: var(--paper); }

/* --- header -------------------------------------------------------------- */
.masthead {
  position: sticky;
  top: 0;
  z-index: 60;
  background: color-mix(in srgb, var(--paper) 88%, transparent);
  backdrop-filter: saturate(160%) blur(14px);
  border-bottom: 1px solid transparent;
  transition: border-color .3s var(--ease), background .3s var(--ease);
}
.masthead[data-scrolled="true"] { border-bottom-color: var(--rule); }

.masthead__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  min-height: 4.75rem;
}

.wordmark {
  display: inline-flex;
  align-items: baseline;
  gap: .5ch;
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: 1.375rem;
  font-weight: 400;
  letter-spacing: .06em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--fg);
  white-space: nowrap;
}
.wordmark__amp { color: var(--brass); font-style: italic; }

.nav { display: none; }
@media (min-width: 54rem) { .nav { display: flex; align-items: center; gap: 2.25rem; } }

.nav a {
  font-size: .75rem;
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--fg-muted);
  text-decoration: none;
  padding-block: .35rem;
  border-bottom: 1px solid transparent;
  transition: color .25s var(--ease), border-color .25s var(--ease);
}
.nav a:hover { color: var(--fg); }
.nav a[aria-current="page"] { color: var(--fg); border-bottom-color: var(--brass); }

.masthead__tools { display: flex; align-items: center; gap: .5rem; }

.icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  padding: 0;
  border: 1px solid transparent;
  background: transparent;
  color: var(--fg-muted);
  cursor: pointer;
  transition: color .25s var(--ease), border-color .25s var(--ease);
}
.icon-btn:hover { color: var(--fg); border-color: var(--rule); }
@media (min-width: 54rem) { .nav-toggle { display: none; } }

.drawer {
  display: none;
  border-top: 1px solid var(--rule);
  background: var(--paper);
}
.drawer[data-open="true"] { display: block; }
@media (min-width: 54rem) { .drawer { display: none !important; } }
.drawer a {
  display: block;
  padding: 1.05rem 0;
  font-size: .875rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--fg-muted);
  text-decoration: none;
  border-bottom: 1px solid var(--rule);
}
.drawer a:last-child { border-bottom: 0; }
.drawer a[aria-current="page"] { color: var(--brass); }

/* --- hero ---------------------------------------------------------------- */
.hero { position: relative; isolation: isolate; background: var(--surface-sunk); }
.hero__media { position: relative; }
.hero__media img {
  width: 100%;
  height: clamp(30rem, 82vh, 54rem);
  object-fit: cover;
  object-position: center 55%;
}
/* The scrim exists so display type stays legible over any photograph. It is
   heavier at the bottom, where the type sits. */
.hero__media::after {
  content: "";
  position: absolute;
  inset: 0;
  /* Two gradients, not one. The vertical pass grounds the bottom of the frame;
     the horizontal pass darkens the left column specifically, because that is
     where the type sits and the photograph is at its brightest there. Without
     the horizontal pass the eyebrow rides across bright burl and loses contrast. */
  background:
    linear-gradient(to right, rgba(8,7,5,.86) 0%, rgba(8,7,5,.62) 26%, rgba(8,7,5,.18) 52%, rgba(8,7,5,0) 74%),
    linear-gradient(to top,   rgba(8,7,5,.88) 0%, rgba(8,7,5,.46) 34%, rgba(8,7,5,.10) 68%, rgba(8,7,5,.30) 100%);
}
@media (max-width: 48rem) {
  /* On a phone the type spans the full width, so the horizontal pass would
     darken the wrong half. Go back to a single heavier vertical scrim. */
  .hero__media::after {
    background: linear-gradient(to top, rgba(8,7,5,.92) 0%, rgba(8,7,5,.68) 42%, rgba(8,7,5,.22) 78%, rgba(8,7,5,.34) 100%);
  }
}
.hero__body {
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  padding-bottom: clamp(2.5rem, 6vw, 5rem);
  color: #F2EDE2;
}
.hero__body .eyebrow { color: #D9BC7E; }
.hero__body .lede { color: rgba(242,237,226,.82); max-width: 42ch; }
.hero__body .cta { color: #D9BC7E; border-color: rgba(217,188,126,.45); }
.hero__body .cta:hover { border-color: #D9BC7E; }
.hero h1 { color: #F6F2E9; }

/* Page heroes on interior pages: shorter, type-led, no photograph required. */
.pagehead { padding-block: clamp(4rem, 9vw, 7.5rem) clamp(2.5rem, 5vw, 4rem); }
.pagehead .lede { margin-top: 1.75rem; }

/* --- figures ------------------------------------------------------------- */
figure { margin: 0; }
.shot {
  position: relative;
  overflow: hidden;
  background: var(--surface-sunk);
}
.shot img { width: 100%; object-fit: cover; }
.shot--tall img  { aspect-ratio: 4 / 5; }
.shot--wide img  { aspect-ratio: 16 / 9; }
.shot--land img  { aspect-ratio: 3 / 2; }
.shot--square img{ aspect-ratio: 1 / 1; }

figcaption {
  margin-top: .9rem;
  font-size: .75rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--fg-faint);
}

.plate {
  display: grid;
  gap: clamp(1rem, 2.5vw, 1.75rem);
  grid-template-columns: repeat(2, 1fr);
}
@media (min-width: 62rem) { .plate--3 { grid-template-columns: repeat(3, 1fr); } }

/* --- collection cards ---------------------------------------------------- */
.collections {
  display: grid;
  gap: clamp(1.25rem, 3vw, 2rem);
}
@media (min-width: 48rem) { .collections { grid-template-columns: repeat(3, 1fr); } }

.collection {
  position: relative;
  display: block;
  text-decoration: none;
  color: inherit;
  overflow: hidden;
  background: var(--surface-sunk);
}
.collection img {
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  transition: transform 1.1s var(--ease);
}
.collection:hover img { transform: scale(1.045); }
.collection::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(8,7,5,.88) 0%, rgba(8,7,5,.32) 45%, rgba(8,7,5,0) 72%);
}
.collection__body {
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  z-index: 1;
  padding: clamp(1.25rem, 3vw, 2rem);
  color: #F2EDE2;
}
.collection__body h3 { color: #F6F2E9; }
.collection__meta {
  margin-top: .5rem;
  font-size: .75rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(242,237,226,.66);
}

/* --- specification table ------------------------------------------------- */
.specs { border-top: 1px solid var(--rule); }
.specs__row {
  display: grid;
  grid-template-columns: 1fr;
  gap: .25rem;
  padding-block: 1.05rem;
  border-bottom: 1px solid var(--rule);
}
@media (min-width: 40rem) {
  .specs__row { grid-template-columns: 13rem 1fr; gap: 2rem; align-items: baseline; }
}
.specs__key {
  font-size: .6875rem;
  font-weight: 500;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--fg-faint);
}
.specs__val { color: var(--fg); max-width: 52ch; }
.specs__val em { color: var(--brass); font-style: normal; }

/* --- edition mark -------------------------------------------------------- */
.edition {
  display: inline-flex;
  align-items: center;
  gap: .75rem;
  padding: .55rem 1.1rem;
  border: 1px solid var(--brass-line);
  font-size: .6875rem;
  font-weight: 500;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--brass);
}
.edition__dot {
  width: 5px; height: 5px;
  background: var(--brass);
  border-radius: 50%;
  flex: none;
}

/* --- numbered process list ----------------------------------------------- */
.steps { list-style: none; margin: 0; padding: 0; counter-reset: step; }
.steps li {
  counter-increment: step;
  display: grid;
  grid-template-columns: 3.25rem 1fr;
  gap: 1.25rem;
  padding-block: 1.6rem;
  border-top: 1px solid var(--rule);
}
.steps li::before {
  content: counter(step, decimal-leading-zero);
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: 1.5rem;
  color: var(--brass);
  line-height: 1.1;
}
.steps h3 { margin-bottom: .5rem; }
.steps p { color: var(--fg-muted); margin: 0; }

/* --- reservation form ---------------------------------------------------- */
.reserve { background: var(--surface); border: 1px solid var(--rule); padding: clamp(1.75rem, 4vw, 3rem); }
.reserve__form { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 1.75rem; }
.reserve__form input[type="email"] {
  flex: 1 1 16rem;
  min-width: 0;
  padding: 1rem 1.125rem;
  font-family: inherit;
  font-size: .9375rem;
  color: var(--fg);
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: 0;
}
.reserve__form input[type="email"]::placeholder { color: var(--fg-faint); }
.reserve__form input[type="email"]:focus { border-color: var(--brass); }

.reserve__status { margin-top: 1rem; font-size: .875rem; min-height: 1.4em; }
.reserve__status[data-state="ok"]  { color: var(--brass); }
.reserve__status[data-state="err"] { color: #C0392B; }
:root:not([data-theme="light"]) .reserve__status[data-state="err"] { color: #E8796B; }

.reserve__fine { margin-top: 1.25rem; font-size: .75rem; color: var(--fg-faint); max-width: 48ch; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* --- footer -------------------------------------------------------------- */
.footer { border-top: 1px solid var(--rule); background: var(--surface-sunk); }
.footer__grid {
  display: grid;
  gap: 2.5rem;
  padding-block: clamp(3rem, 6vw, 4.5rem);
}
@media (min-width: 48rem) { .footer__grid { grid-template-columns: 1.4fr 1fr 1fr; } }
.footer h4 {
  font-family: "Inter", sans-serif;
  font-size: .6875rem;
  font-weight: 500;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--fg-faint);
  margin-bottom: 1.1rem;
}
.footer ul { list-style: none; margin: 0; padding: 0; }
.footer li + li { margin-top: .7rem; }
.footer a { color: var(--fg-muted); text-decoration: none; font-size: .9375rem; }
.footer a:hover { color: var(--brass); }
.footer__legal {
  border-top: 1px solid var(--rule);
  padding-block: 1.75rem;
  display: flex;
  flex-wrap: wrap;
  gap: 1rem 2rem;
  justify-content: space-between;
  font-size: .75rem;
  color: var(--fg-faint);
}

/* --- utility ------------------------------------------------------------- */
.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip-link {
  position: absolute; top: -999px; left: var(--gutter); z-index: 100;
  padding: .75rem 1.25rem; background: var(--brass); color: var(--paper);
  text-decoration: none; font-size: .875rem;
}
.skip-link:focus { top: .75rem; }

.muted { color: var(--fg-muted); }
.faint { color: var(--fg-faint); }
.brass { color: var(--brass); }
.center { text-align: center; }
.mx-auto { margin-inline: auto; }
.measure-tight { max-width: 44ch; }

/* --- reveal on scroll ----------------------------------------------------
   Progressive enhancement: the class is only added by JS once the observer is
   wired, so a no-JS visitor sees everything at full opacity. */
.js .reveal { opacity: 0; transform: translateY(18px); }
.js .reveal[data-shown="true"] {
  opacity: 1; transform: none;
  transition: opacity .85s var(--ease), transform .85s var(--ease);
}
@media (prefers-reduced-motion: reduce) {
  .js .reveal { opacity: 1; transform: none; }
  .collection img, .collection:hover img { transition: none; transform: none; }
}

/* --- theme toggle icon swap ----------------------------------------------
   Show the icon for the theme you would switch TO, which is the convention
   users actually expect from a single-button toggle. */
.icon-moon { display: none; }
:root[data-theme="dark"] .icon-sun  { display: none; }
:root[data-theme="dark"] .icon-moon { display: block; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .icon-sun  { display: none; }
  :root:not([data-theme="light"]) .icon-moon { display: block; }
  :root[data-theme="dark"] .icon-sun  { display: none; }
  :root[data-theme="dark"] .icon-moon { display: block; }
}
:root[data-theme="light"] .icon-sun  { display: block; }
:root[data-theme="light"] .icon-moon { display: none; }

/* --- commission form -----------------------------------------------------
   A commission is a conversation, not a signup, so this form asks for more
   than an address and is laid out as stacked fields rather than an inline row. */
.commission__form { margin-top: 1.75rem; display: grid; gap: 1.1rem; max-width: 34rem; }

.field { display: grid; gap: .45rem; }
.field label {
  font-size: .6875rem;
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--fg-faint);
}
.field input[type="email"],
.field select,
.field textarea {
  width: 100%;
  padding: .9rem 1.05rem;
  font-family: inherit;
  font-size: .9375rem;
  line-height: 1.5;
  color: var(--fg);
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: 0;
}
.field textarea { resize: vertical; min-height: 6.5rem; }
.field input::placeholder,
.field textarea::placeholder { color: var(--fg-faint); }
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--brass); }

/* Native select arrow varies wildly across platforms; draw our own so the
   control matches the inputs beside it in both themes. */
.field select {
  appearance: none;
  background-image:
    linear-gradient(45deg, transparent 50%, currentColor 50%),
    linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position: right 1.15rem center, right .95rem center;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
  padding-right: 2.5rem;
  cursor: pointer;
}

.commission__form .btn { justify-self: start; }

/* --- maker portrait ------------------------------------------------------ */
.maker { display: grid; gap: clamp(2rem, 5vw, 4rem); align-items: start; }
@media (min-width: 52rem) { .maker { grid-template-columns: minmax(0, 20rem) 1fr; } }

.maker__portrait {
  position: relative;
  overflow: hidden;
  background: var(--surface-sunk);
  border: 1px solid var(--rule);
}
.maker__portrait img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: center 22%; }
.maker__name { margin-top: 1.1rem; }
.maker__role {
  margin-top: .3rem;
  font-size: .6875rem;
  font-weight: 500;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--brass);
}