/* Freedom Carver — single-page site
   Warm ivory paper, ink-dark serif type, one walnut accent. */

:root {
  color-scheme: light;
  --paper: #f6f2ea;
  --paper-deep: #efe8dc;
  --ink: #1f1a16;
  --ink-soft: #4a4038;
  --muted: #7d7064;
  --rule: #dcd2c3;
  --walnut: #3b2a20;
  --walnut-deep: #251912;
  --ok: #3f5a3a;
  --err: #8a2f2a;

  --display: "Cormorant Garamond", "Cormorant", Garamond, "Times New Roman", serif;
  --text: "EB Garamond", Garamond, Georgia, serif;

  --gutter: clamp(16px, 4vw, 48px);
  --section: clamp(72px, 11vw, 148px);
  --measure: 40rem;
  --header-h: 76px;
}

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

html {
  scroll-behavior: smooth;
  scroll-padding-top: var(--header-h);
  -webkit-text-size-adjust: 100%;
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--text);
  font-size: clamp(1.0625rem, 0.98rem + 0.3vw, 1.1875rem);
  line-height: 1.65;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img { display: block; max-width: 100%; height: auto; }
picture { display: block; }
figure { margin: 0; }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 0.18em; }
a:hover { color: var(--walnut); }
:focus-visible { outline: 2px solid var(--walnut); outline-offset: 3px; }

.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 {
  position: absolute; left: 12px; top: -48px; z-index: 100;
  background: var(--ink); color: var(--paper); padding: 8px 14px; text-decoration: none;
}
.skip:focus { top: 12px; }

/* ── Type ─────────────────────────────────────────────── */

.eyebrow {
  margin: 0 0 1.4rem;
  font-family: var(--text);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--muted);
}
.display, .display-2 {
  margin: 0 0 1.75rem;
  font-family: var(--display);
  font-weight: 400;
  line-height: 1.12;
  letter-spacing: -0.005em;
  text-wrap: balance;
}
.display { font-size: clamp(2.25rem, 1.4rem + 3.6vw, 4.25rem); }
.display-2 { font-size: clamp(2rem, 1.35rem + 2.6vw, 3.4rem); }
.lede { color: var(--ink-soft); text-wrap: pretty; }
.center { text-align: center; }
.narrow { max-width: var(--measure); margin-inline: auto; }

/* ── Buttons ──────────────────────────────────────────── */

.btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 44px;
  padding: 0.7rem 1.6rem;
  font-family: var(--text);
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  text-decoration: none;
  border-radius: 1px;
  cursor: pointer;
  transition: background-color .2s ease, color .2s ease, border-color .2s ease;
}
.btn-outline { border: 1px solid var(--rule); color: var(--ink); background: transparent; }
.btn-outline:hover { border-color: var(--ink); color: var(--ink); }
.btn-solid { border: 1px solid var(--walnut); background: var(--walnut); color: #f6efe4; padding-inline: 2.4rem; }
.btn-solid:hover { background: var(--walnut-deep); border-color: var(--walnut-deep); color: #fff; }
.btn-solid[disabled] { opacity: .6; cursor: progress; }

/* ── Announcement + header ────────────────────────────── */

.announce {
  padding: 0.7rem var(--gutter);
  border-bottom: 1px solid var(--rule);
}
/* Liberty Bell divider (bell-stars.svg, ~33.5:1). The bell keeps its size; on narrower screens
   the thin outer ends of the rules are trimmed evenly instead of shrinking the bell. */
.announce img { display: block; width: 100%; max-width: 872px; height: 26px; object-fit: cover; margin-inline: auto; }
/* where the ends are trimmed (below ~920px), taper them back to a point as in the drawing */
@media (max-width: 920px) {
  .announce img {
    -webkit-mask-image: linear-gradient(to right, transparent, #000 22%, #000 78%, transparent);
    mask-image: linear-gradient(to right, transparent, #000 22%, #000 78%, transparent);
  }
}
@media (max-width: 760px) { .announce img { height: 20px; } }

.site-header {
  position: sticky; top: 0; z-index: 50;
  /* translucent so content scrolling behind it stays faintly visible */
  background: color-mix(in srgb, var(--paper) 80%, transparent);
  -webkit-backdrop-filter: saturate(1.2) blur(4px);
  backdrop-filter: saturate(1.2) blur(4px);
  transition: box-shadow .25s ease, border-color .25s ease;
  border-bottom: 1px solid transparent;
}
.site-header.is-scrolled { border-bottom-color: var(--rule); box-shadow: 0 6px 24px -18px rgba(31, 26, 22, .35); }

.header-inner {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 1rem;
  min-height: var(--header-h);
  max-width: 1320px;
  margin-inline: auto;
  padding-inline: var(--gutter);
}
/* Navigation is a hamburger menu at every width: the toggle sits left, the wordmark
   stays centred, and the links drop down below the header. */
.site-nav {
  position: absolute; top: 100%; left: 0; right: 0;
  display: flex; flex-direction: column; gap: 0;
  /* line the links up with the header content on wide screens */
  padding: 0.5rem max(var(--gutter), calc((100% - 1320px) / 2 + var(--gutter))) 1.25rem;
  background: var(--paper);
  border-bottom: 1px solid var(--rule);
  box-shadow: 0 16px 30px -24px rgba(31, 26, 22, .4);
}
.js .site-nav:not(.is-open) { display: none; }
.site-nav a {
  max-width: 22rem;
  padding-block: 0.9rem;
  border-bottom: 1px solid var(--rule);
  white-space: nowrap;
  font-size: 0.86rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--ink-soft);
  padding-block: 0.5rem;
}
.site-nav a:last-child { border-bottom: 0; }
.site-nav a:hover { color: var(--ink); }

/* Logo (public/logo.svg, viewBox 211.67 x 41.84). Height drives the size; width follows
   the SVG's aspect ratio. */
.wordmark {
  display: block;
  line-height: 0;
  text-decoration: none;
}
.wordmark img {
  display: block;
  height: 40px;
  width: auto;
}
.header-cta { justify-self: end; }
.nav-toggle {
  justify-self: start;
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; margin-left: -10px;
  background: none; border: 0; cursor: pointer; color: var(--ink);
}
.nav-toggle-bars, .nav-toggle-bars::before, .nav-toggle-bars::after {
  display: block; width: 22px; height: 1.5px; background: currentColor; position: relative;
  transition: transform .25s ease, background-color .25s ease;
}
.nav-toggle-bars::before, .nav-toggle-bars::after { content: ""; position: absolute; left: 0; }
.nav-toggle-bars::before { top: -7px; }
.nav-toggle-bars::after { top: 7px; }
.nav-toggle[aria-expanded="true"] .nav-toggle-bars { background: transparent; }
.nav-toggle[aria-expanded="true"] .nav-toggle-bars::before { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle-bars::after { transform: translateY(-7px) rotate(-45deg); }

/* ── Hero ─────────────────────────────────────────────── */

/* Up to 1440px wide (full width below that), centred, flush under the header, at
   the photo's natural height (never cropped). Its left, right and bottom edges fade
   into the page; each fade ends exactly at the image edge. */
.hero {
  --hero-pad: clamp(40px, 6vw, 80px);
  position: relative;
  padding: 0 0 var(--hero-pad);
}
.hero-figure {
  max-width: 1440px;
  margin-inline: auto;
  -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 12%, #000 88%, transparent 100%),
                      linear-gradient(to bottom, #000 72%, transparent 100%);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(to right, transparent 0%, #000 12%, #000 88%, transparent 100%),
              linear-gradient(to bottom, #000 72%, transparent 100%);
  mask-composite: intersect;
}
.hero-figure img {
  width: 100%;
  height: auto;
}
/* Tagline overlays the bottom of the hero. main.js places it just above the bottom of
   what is visible on load (the photo's bottom edge, or the window's if the photo is
   taller), with The Piece starting directly beneath it. Without JS it sits near the
   photo's bottom edge. */
.hero-line {
  position: absolute;
  left: 0;
  right: 0;
  bottom: calc(var(--hero-pad) + 28px);
  z-index: 3; /* above The Piece's soft top edge */
  max-width: 1320px;
  margin: 0 auto;
  padding-inline: var(--gutter);
  text-shadow: 0 0 18px var(--paper), 0 0 6px var(--paper);
  font-family: var(--display);
  font-style: italic;
  font-size: clamp(1.5rem, 1.1rem + 1.4vw, 2.25rem);
  color: var(--ink-soft);
}
/* ── Sections ─────────────────────────────────────────── */

.section { padding: var(--section) var(--gutter); }
.piece { padding-top: calc(var(--section) * .6); }
/* main.js pulls The Piece up to start directly under the hero tagline. It carries the
   paper background over the rest of the photo, with a soft top edge. */
.piece.is-pulled {
  position: relative;
  z-index: 2;
  background: var(--paper);
  padding-top: 48px;
}
.piece.is-pulled::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 100%;
  height: 90px;
  background: linear-gradient(to bottom, rgba(246, 242, 234, 0), var(--paper));
  pointer-events: none;
}

.offer-line {
  margin: 2.25rem 0 0;
  font-size: 0.72rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--muted);
}

.stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  max-width: 960px;
  margin: clamp(64px, 9vw, 120px) auto 0;
  padding: 0;
}
.stats > div {
  display: flex; flex-direction: column-reverse; align-items: center;
  gap: 0.6rem;
  padding: 1.5rem 1rem;
  text-align: center;
}
.stats > div + div { border-left: 1px solid var(--rule); }
@media (max-width: 560px) {
  /* phones: the three figures stack, a rule between each */
  .stats { grid-template-columns: 1fr; max-width: 20rem; }
  .stats > div + div { border-left: 0; border-top: 1px solid var(--rule); }
}
.stats dd {
  margin: 0;
  font-family: var(--display);
  font-size: clamp(2rem, 1.5rem + 1.8vw, 3rem);
  line-height: 1;
}
.stats dt {
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--muted);
}

/* Craft: image + text */
.split {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: clamp(32px, 6vw, 96px);
  align-items: center;
  max-width: 1240px;
  margin-inline: auto;
}
.split-media img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.split-text { max-width: 34rem; }
.split-text p:not(.eyebrow) { color: var(--ink-soft); }

/* Woods */
.woods { background: var(--paper-deep); }
.wood-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(20px, 3vw, 40px);
  max-width: 1160px;
  margin: clamp(48px, 6vw, 80px) auto 0;
  padding: 0;
  list-style: none;
}
.wood-swatch img { width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; }
.wood h3 {
  margin: 1.4rem 0 0.4rem;
  font-family: var(--display);
  font-weight: 500;
  font-size: 1.7rem;
}
.wood p { margin: 0; color: var(--ink-soft); }
.solid-note {
  max-width: var(--measure);
  margin: clamp(40px, 5vw, 64px) auto 0;
  text-align: center;
  color: var(--ink-soft);
}
.solid-note a { white-space: nowrap; color: var(--walnut); }

/* Edition */
.edition {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: var(--paper); /* the photo's multiply blend needs a backdrop inside this isolated group */
}
.edition-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(32px, 6vw, 96px);
  align-items: center;
  max-width: 1160px;
  margin-inline: auto;
}
.edition-text p:not(.eyebrow) { color: var(--ink-soft); max-width: 32rem; }
.edition-mark img { width: 100%; box-shadow: 0 24px 50px -36px rgba(31, 26, 22, .5); }
.edition-mark figcaption {
  margin-top: 0.9rem;
  font-family: var(--display);
  font-style: italic;
  font-size: 1.1rem;
  color: var(--muted);
}

/* Spec table on the left; the carved-script photo sits to its right in full colour
   and dissolves into the paper on its left, top and bottom edges. */
.edition-lower {
  position: relative;
  max-width: 1160px;
  margin: clamp(64px, 8vw, 112px) auto 0;
}
.edition-lower::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: -10%;
  left: 52%;
  aspect-ratio: 1.1;
  right: calc(50% - 50vw); /* bleed to the viewport edge */
  background: url("/img/edition-script-1500.webp") left center / cover no-repeat;
  mix-blend-mode: multiply; /* white wood takes on the paper colour */
  pointer-events: none;
  -webkit-mask-image: linear-gradient(to right, transparent 0%, rgba(0, 0, 0, .45) 28%, #000 62%),
                      linear-gradient(to bottom, transparent 0%, #000 16%, #000 74%, transparent 100%);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(to right, transparent 0%, rgba(0, 0, 0, .45) 28%, #000 62%),
              linear-gradient(to bottom, transparent 0%, #000 16%, #000 74%, transparent 100%);
  mask-composite: intersect;
}
.specs {
  max-width: 610px;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--rule);
}
.specs > div {
  display: grid;
  grid-template-columns: 11rem 1fr;
  gap: 1.5rem;
  padding: 1.15rem 0;
  border-bottom: 1px solid var(--rule);
}
.specs dt {
  padding-top: 0.3rem;
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--muted);
}
.specs dd { margin: 0; }
.spec-line { display: block; }

/* Acquire + form */
.acquire { padding-bottom: calc(var(--section) * 1.1); }
.acquire .narrow { max-width: 50rem; }
.inquiry-wrap { max-width: 44rem; margin: clamp(40px, 5vw, 64px) auto 0; }

.inquiry { display: grid; gap: 1.1rem; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1.1rem; }
.field { display: grid; gap: 0.4rem; }
.field > span {
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--muted);
}
.field em { font-style: normal; letter-spacing: 0.1em; text-transform: none; }
.field input, .field select, .field textarea {
  width: 100%;
  min-height: 48px;
  padding: 0.7rem 0.85rem;
  font: inherit;
  font-size: 1.05rem;
  color: var(--ink);
  background: #fbf9f4;
  border: 1px solid var(--rule);
  border-radius: 1px;
  transition: border-color .2s ease, background-color .2s ease;
}
.field select {
  appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--muted) 50%), linear-gradient(135deg, var(--muted) 50%, transparent 50%);
  background-position: calc(100% - 20px) 50%, calc(100% - 15px) 50%;
  background-size: 5px 5px;
  background-repeat: no-repeat;
  padding-right: 2.5rem;
}
.field textarea { resize: vertical; min-height: 7.5rem; }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--walnut); background: #fff; }
.field [aria-invalid="true"] { border-color: var(--err); }

.inquiry .btn-solid { justify-self: center; margin-top: 0.6rem; }
.form-note {
  margin: 0;
  text-align: center;
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--muted);
}
.form-status { margin: 0; min-height: 1.5em; text-align: center; color: var(--err); }
.form-status:empty { min-height: 0; }

.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.notice { display: none; padding: 1.75rem; text-align: center; border: 1px solid var(--rule); background: #fbf9f4; }
.notice:target, .notice.is-shown { display: block; }
.notice-title { margin: 0 0 0.4rem; font-family: var(--display); font-size: 1.9rem; }
.notice p:last-child { margin-bottom: 0; color: var(--ink-soft); }
.notice-err .notice-title { color: var(--err); }
.notice-ok:target ~ .inquiry, .inquiry.is-hidden { display: none; }

/* Footer */
.site-footer {
  padding: 56px var(--gutter) 64px;
  text-align: center;
  border-top: 1px solid var(--rule);
  color: var(--ink-soft);
}
.site-footer p { margin: 0.35rem 0; }
.footer-logo { margin-bottom: 0.9rem !important; line-height: 0; }
.footer-logo img { display: inline-block; height: 34px; width: auto; }
.fine { font-size: 0.85rem; color: var(--muted); }

/* ── Reveal on scroll (only when JS has opted in) ─────── */

.js .reveal { opacity: 0; transform: translateY(14px); transition: opacity .9s ease, transform .9s ease; }
.js .reveal.is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .js .reveal { opacity: 1; transform: none; transition: none; }
}

/* ── Responsive ───────────────────────────────────────── */

/* Phones in portrait: the bottom fade starts much lower so more of the photo shows */
@media (max-width: 760px) and (orientation: portrait) {
  .hero-figure {
    -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 12%, #000 88%, transparent 100%),
                        linear-gradient(to bottom, #000 88%, transparent 100%);
    mask-image: linear-gradient(to right, transparent 0%, #000 12%, #000 88%, transparent 100%),
                linear-gradient(to bottom, #000 88%, transparent 100%);
  }
}

@media (max-width: 760px) {
  :root { --header-h: 64px; }
  .header-inner { grid-template-columns: auto 1fr auto; }
  .wordmark { justify-self: center; }
  .wordmark img { height: 32px; }
  .header-cta { padding-inline: 0.9rem; letter-spacing: 0.2em; }
  .split, .edition-grid { grid-template-columns: 1fr; }
  .split-media { margin-inline: calc(var(--gutter) * -1); }
  .wood-grid { grid-template-columns: 1fr; max-width: 30rem; }
  .field-row { grid-template-columns: 1fr; }
  .specs > div { grid-template-columns: 1fr; gap: 0.25rem; }
  .specs dt { padding-top: 0; }
  /* phones: the photo becomes a faded band above the spec table */
  .edition-lower::before {
    position: relative; display: block; z-index: 0;
    top: auto; bottom: auto; left: auto; right: auto;
    aspect-ratio: auto;
    height: clamp(220px, 60vw, 320px);
    margin: 0 calc(var(--gutter) * -1) 12px;
    -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 18%, #000 62%, transparent 100%);
    mask-image: linear-gradient(to bottom, transparent 0%, #000 18%, #000 62%, transparent 100%);
  }
  .specs { max-width: none; }
  /* phones: every section is centered (Matthew, 2026-10-22); form fields stay full width */
  .hero-line, .split-text, .wood, .edition-text, .edition figcaption, .specs { text-align: center; }
}

@media (max-width: 420px) {
  /* phones: up to ~30px tall (152px wide), shrinking to fit very narrow screens */
  .wordmark { min-width: 0; }
  .wordmark img { height: auto; width: 100%; max-width: 152px; }
  .header-cta { min-height: 40px; padding: 0.5rem 0.7rem; font-size: 0.68rem; }
}
.notfound { min-height: 70vh; display: grid; place-content: center; }