/* Mike's Woodwork — mikeswood.work
   Variant B, "After dark": the whole page lives on the flyer's footer band.
   Bark ground, cream type, orange only where it earns it. An autumn evening,
   not Halloween.

   Two compositional rules carry the page:
   1. The roundel is the shop sign — centred, large, with the nav as two short
      wings either side, and the photograph as the full-width floor beneath it.
   2. A range is one block: its set is a photographed plate, its single sizes are
      a ledger. The dotted leader runs through both, so the halves rhyme.

   Type comes from the tokens only — --font-display carries headlines, product
   names and prices, --font-serif runs the body. No family name is written here. */

/* ---------- Local tokens ---------- */

:root {
  --rule: rgba(252, 241, 238, 0.15);
  --rule-strong: rgba(252, 241, 238, 0.34);
  --muted: var(--wood);
  --step: clamp(3.5rem, 9vw, 7rem);

  /* One lever for the optical size of the display face. */
  --display-nudge: 1.045;

  /* Fallbacks in case the shared tokens are ever missing. */
  --pad: var(--gutter, clamp(16px, 4vw, 48px));
  --r: var(--radius, 14px);
  --r-lg: var(--radius-lg, 28px);
  --shell: min(1140px, 100% - (var(--pad) * 2));
}

/* ---------- Base ---------- */

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

html {
  scroll-behavior: smooth;
  scroll-padding-top: 2rem;
  overflow-x: clip;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--bark);
  color: var(--cream);
  font-family: var(--font-serif);
  font-optical-sizing: auto;
  font-weight: var(--font-body-weight);
  font-size: clamp(1.0625rem, 0.99rem + 0.34vw, 1.1875rem);
  line-height: 1.78;
  overflow-x: hidden;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; display: block; }

/* The display face is a single upright weight — take it from the token and never
   let the browser fake a bold or an italic. */
h1, h2, h3, h4,
.price {
  font-family: var(--font-display);
  font-weight: var(--font-display-weight);
  font-style: normal;
  line-height: 1.12;
  letter-spacing: -0.004em;
  margin: 0;
}

h1, h2 { letter-spacing: -0.014em; }

p { margin: 0; }
ul { margin: 0; padding: 0; list-style: none; }

a { color: inherit; }

a:focus-visible {
  outline: 2px solid var(--glow);
  outline-offset: 4px;
  border-radius: 3px;
}

.wrap {
  width: var(--shell);
  margin-inline: auto;
}

.skip {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--cream);
  color: var(--bark);
  padding: 0.75rem 1.25rem;
  font-weight: var(--font-body-weight-strong);
  z-index: 50;
}
.skip:focus { left: 1rem; top: 1rem; }

/* ---------- Header: the sign over the door ----------
   The roundel is the whole header. The nav is two short wings either side of it
   on desktop and a single centred line underneath on a phone, so the mark is
   always the first thing and always dead centre. Nothing else competes. */

.site-header { padding-top: clamp(1.5rem, 4vw, 2.5rem); }

.header-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 1rem 1.75rem;
}

.header-mark {
  flex: 0 0 100%;
  display: flex;
  justify-content: center;
  line-height: 0;
}

.header-mark img {
  width: clamp(152px, 17vw, 200px);
  height: auto;
}

.header-nav {
  display: flex;
  align-items: center;
  gap: clamp(1.1rem, 3vw, 2.25rem);
  font-size: clamp(0.9375rem, 0.85rem + 0.36vw, 1.0625rem);
  font-weight: var(--font-body-weight-strong);
}

.header-nav a {
  text-decoration: none;
  white-space: nowrap;
  transition: color 0.2s ease;
}
.header-nav a:hover { color: var(--pumpkin-2); }

.header-ig svg {
  width: 22px;
  height: 22px;
  display: block;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
}
.header-ig svg .dot { fill: currentColor; stroke: none; }

/* ---------- Hero: centred type, then the photo across the full width ---------- */

.hero { padding-top: clamp(2.25rem, 5.5vw, 3.5rem); }

.hero-text {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.hero-text h1 {
  font-size: calc(clamp(2.15rem, 1.05rem + 4.9vw, 4rem) * var(--display-nudge));
  max-width: 17ch;
  text-wrap: balance;
}

.standfirst {
  margin-top: 1.25rem;
  max-width: 52ch;
  font-size: clamp(1.0625rem, 1.01rem + 0.32vw, 1.3125rem);
  line-height: 1.66;
  color: var(--cream);
  text-wrap: pretty;
}

.hero-actions {
  margin-top: 1.9rem;
  margin-bottom: clamp(2.25rem, 6vw, 4.25rem);
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 0.9rem 1.75rem;
}

/* The band. Full width, square corners, no frame — it is the floor of the
   composition rather than a picture hung on it. */

.hero-band { margin: 0; }

.hero-band img {
  width: 100%;
  aspect-ratio: 16 / 11;
  object-fit: cover;
  object-position: 50% 50%;
}

/* ---------- Buttons ---------- */

.btn {
  display: inline-block;
  background: var(--pumpkin);
  color: var(--bark);
  font-weight: var(--font-body-weight-strong);
  font-size: 1.0625rem;
  line-height: 1.3;
  text-decoration: none;
  padding: 0.75rem 1.6rem;
  border-radius: 999px;
  transition: background 0.2s ease, transform 0.2s ease;
}
.btn:hover { background: var(--pumpkin-2); transform: translateY(-1px); }
.btn:active { background: var(--rust); color: var(--cream); transform: none; }

.btn-quiet {
  font-size: 1.0625rem;
  font-weight: var(--font-body-weight-strong);
  text-decoration: none;
  border-bottom: 1px solid var(--rule-strong);
  padding-bottom: 2px;
  transition: color 0.2s ease, border-color 0.2s ease;
}
.btn-quiet:hover { color: var(--glow); border-color: var(--glow); }

.btn-outline {
  margin-top: auto;
  font-size: 1.0625rem;
  font-weight: var(--font-body-weight-strong);
  text-decoration: none;
  border: 1px solid var(--rule-strong);
  border-radius: 999px;
  padding: 0.55rem 1.3rem;
  transition: border-color 0.2s ease, color 0.2s ease;
}
.btn-outline:hover { border-color: var(--pumpkin); color: var(--pumpkin-2); }

/* The order button: quiet outline when it only leads to Instagram, solid orange
   the moment a Stripe link is attached and it becomes a real Buy. */

.order {
  display: inline-block;
  font-size: 0.975rem;
  font-weight: var(--font-body-weight-strong);
  text-decoration: none;
  white-space: nowrap;
  border: 1px solid var(--rule-strong);
  border-radius: 999px;
  padding: 0.45rem 1.15rem;
  transition: border-color 0.2s ease, color 0.2s ease, background 0.2s ease;
}
.order:hover { border-color: var(--pumpkin); color: var(--pumpkin-2); }

.order-buy {
  background: var(--pumpkin);
  border-color: var(--pumpkin);
  color: var(--bark);
}
.order-buy:hover { background: var(--pumpkin-2); border-color: var(--pumpkin-2); color: var(--bark); }

/* ---------- Sections ---------- */

.section {
  padding-block: var(--step);
  border-top: 1px solid var(--rule);
  position: relative;
}

/* The hero's photo band already lands on the bark, so a rule under it is a seam. */
.hero + .section { border-top: 0; }

.section-head h2 {
  font-size: calc(clamp(1.75rem, 1.15rem + 2.4vw, 2.75rem) * var(--display-nudge));
  max-width: 17ch;
  text-wrap: balance;
}

.section-head p {
  margin-top: 1.1rem;
  max-width: 50ch;
  color: var(--muted);
}

/* ---------- A range: heading, plate, ledger ---------- */

.range { margin-top: clamp(2.75rem, 6vw, 4rem); }
.range:first-child { margin-top: 0; }

.range-head h2 {
  font-size: calc(clamp(1.5rem, 1.2rem + 1.3vw, 2rem) * var(--display-nudge));
}

.range-head p {
  margin-top: 0.85rem;
  max-width: 50ch;
  color: var(--muted);
}

/* Beats .range-head p on specificity — the colour and finish line wants to stay
   on one line where there is room for it. */
.range-head .choice {
  margin-top: 0.6rem;
  max-width: 64ch;
  color: var(--muted);
  font-size: 1.0625rem;
  line-height: 1.7;
}

.range-grid {
  margin-top: clamp(1.75rem, 4vw, 2.25rem);
  display: grid;
  gap: clamp(2rem, 4vw, 2.5rem);
  align-items: start;
}

/* The set, as a plate */

.set {
  margin: 0;
  display: flex;
  flex-direction: column;
}

.set-photo {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  object-position: 50% 62%;
  border-radius: var(--r-lg);
  box-shadow: 0 26px 60px rgba(0, 0, 0, 0.55);
}

/* The plate as a carousel: slides stack in one frame and crossfade; the frame
   itself is the click/swipe target, the dots sit just under it. */
.carousel {
  position: relative;
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
  touch-action: pan-y;
  border-radius: var(--r-lg);
}
.carousel:focus-visible { outline: 2px solid var(--glow); outline-offset: 6px; }
.carousel .set-photo {
  position: absolute;
  inset: 0;
  height: 100%;
  opacity: 0;
  transition: opacity 0.45s ease;
}
.carousel .set-photo.is-current { position: relative; opacity: 1; }
.carousel .set-photo:not(.is-current) { box-shadow: none; pointer-events: none; }

.carousel-dots {
  display: flex;
  justify-content: center;
  gap: 0.55rem;
  margin-top: 1rem;
}
.carousel-dots button {
  appearance: none;
  width: 8px;
  height: 8px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--rule-strong);
  cursor: pointer;
  transition: background 0.2s ease, transform 0.2s ease;
}
.carousel-dots button:hover { background: var(--glow); }
.carousel-dots button[aria-current="true"] { background: var(--pumpkin); transform: scale(1.25); }
.carousel-dots button:focus-visible { outline: 2px solid var(--glow); outline-offset: 3px; }

.set-head {
  margin-top: 1.5rem;
  display: flex;
  align-items: baseline;
  gap: 0.7rem;
}

.set-head h4 {
  font-size: calc(clamp(1.25rem, 1.02rem + 0.85vw, 1.5rem) * var(--display-nudge));
  flex: 0 1 auto;
}

/* The dotted leader ties a name to its price, and reappears in every ledger row. */
.leader {
  flex: 1 1 1.5rem;
  min-width: 1.25rem;
  height: 0;
  border-bottom: 1px dotted rgba(252, 241, 238, 0.32);
  transform: translateY(-0.32em);
}

.price {
  color: var(--pumpkin);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.set-head .price {
  font-size: calc(clamp(1.25rem, 1.02rem + 0.85vw, 1.5rem) * var(--display-nudge));
}

.was {
  font-family: var(--font-serif);
  font-weight: var(--font-body-weight);
  font-size: 0.97rem;
  color: var(--muted);
  margin-left: 0.5rem;
}
.was s { text-decoration-thickness: 1px; }

.set-desc {
  margin-top: 0.6rem;
  max-width: 44ch;
  color: var(--muted);
  font-size: 1.0625rem;
  line-height: 1.7;
  text-wrap: pretty;
}

.set-foot {
  margin-top: auto;
  padding-top: 1.15rem;
}

/* The single sizes, as a ledger */

.ledger {
  background: var(--bark-2);
  border-radius: var(--r);
  padding: clamp(1.5rem, 4vw, 2.25rem);
}

.ledger h4 { font-size: 1.35rem; }

.ledger-intro {
  margin-top: 0.7rem;
  max-width: 44ch;
  color: var(--muted);
  font-size: 1.0625rem;
  line-height: 1.7;
}

.ledger ul { margin-top: 0; }
.ledger li:first-child { border-top: 0; padding-top: 0; }

/* The set closes the list: a stronger rule above it and the display face for its name. */
.ledger li.set-row { border-top: 1px solid var(--rule-strong); margin-top: 0.35rem; padding-top: 1.05rem; }
.ledger li.set-row .size { font-family: var(--font-display); font-weight: var(--font-display-weight); font-size: 1.15rem; }
.ledger li.set-row .cm { font-family: var(--font-serif); font-weight: var(--font-body-weight); font-size: 0.95rem; }
.ledger .was { font-family: var(--font-serif); font-weight: var(--font-body-weight); font-size: 0.85rem; color: var(--muted); margin-left: 0.35rem; }

/* The leader takes up the slack, so the price and its button land on the right
   margin. A short "Buy" stays on the line even on a 360px phone; the longer
   "Message to order" fallback wraps underneath instead of overflowing. */
.ledger li {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  column-gap: 0.7rem;
  row-gap: 0.8rem;
  padding-block: 0.7rem;
  border-top: 1px solid var(--rule);
}

.ledger li .size { flex: 0 1 auto; }
.ledger li .price { flex: 0 0 auto; }
.ledger li .order { flex: 0 0 auto; }
/* Centred rows: the leader sits at the row's middle already, so no baseline nudge. */
.ledger li .leader { transform: translateY(0.1em); }

.size { font-size: 1.0625rem; }
.cm { color: var(--muted); }

.ledger .price { font-size: 1.1875rem; }

/* One checkout for the whole range, as a quiet line under the list. */
.ledger-foot {
  margin-top: 1.1rem;
  font-size: 0.975rem;
  color: var(--muted);
}
.order-mix {
  color: var(--glow);
  text-decoration: underline;
  text-underline-offset: 4px;
  text-decoration-color: var(--rule-strong);
}
.order-mix:hover { color: var(--pumpkin-2); text-decoration-color: currentColor; }

/* ---------- Delivery ---------- */

.delivery {
  margin-top: clamp(2.25rem, 5vw, 3rem);
  color: var(--muted);
  font-size: 1.0625rem;
  line-height: 1.7;
  max-width: 68ch;
  text-wrap: pretty;
}

/* ---------- The maker ---------- */

.about-grid {
  display: grid;
  gap: clamp(2.25rem, 5vw, 3.5rem);
  align-items: center;
}

.about-text h2 { font-size: calc(clamp(1.75rem, 1.15rem + 2.4vw, 2.75rem) * var(--display-nudge)); }

.about-text p {
  margin-top: 1.25rem;
  max-width: 52ch;
}

.about-figure { margin: 0; }

/* The roundel stands in for a portrait: big, centred, quiet. */
.about-mark { display: flex; justify-content: center; }
.about-figure.about-mark img {
  width: clamp(200px, 60%, 320px);
  height: auto;
  aspect-ratio: auto;
  object-fit: contain;
  border-radius: 0;
  box-shadow: none;
  opacity: 0.92;
}

.about-figure img {
  width: 100%;
  aspect-ratio: 5 / 4;
  object-fit: cover;
  object-position: 50% 55%;
  border-radius: var(--r-lg);
  box-shadow: 0 22px 50px rgba(0, 0, 0, 0.45);
}

/* ---------- Find us ---------- */

.routes {
  margin-top: clamp(2.5rem, 6vw, 3.5rem);
  display: grid;
  gap: 1.25rem;
}

.route {
  background: var(--bark-2);
  border-radius: var(--r);
  padding: clamp(1.5rem, 3.5vw, 2rem);
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  align-items: flex-start;
}

.route h3 { font-size: 1.3rem; }

.route p {
  color: var(--muted);
  font-size: 1.0625rem;
  line-height: 1.7;
}

.route .fairs { margin-top: auto; }

.aside-line {
  margin-top: clamp(2rem, 4vw, 2.75rem);
  max-width: 62ch;
  color: var(--muted);
}

.email-line {
  margin-top: 0.4rem;
  color: var(--muted);
}
.email-line a,
.aside-line a { color: var(--glow); text-underline-offset: 4px; }
.email-line a:hover,
.aside-line a:hover { color: var(--pumpkin-2); }

/* ---------- Footer ---------- */

.site-footer {
  border-top: 1px solid var(--rule);
  padding-block: clamp(3rem, 7vw, 4.5rem);
  text-align: center;
}

.footer-roundel {
  width: 72px;
  height: auto;
  margin-inline: auto;
  opacity: 0.9;
}

.footer-tagline {
  margin-top: 1.4rem;
  font-family: var(--font-display);
  font-weight: var(--font-display-weight);
  font-size: 1.25rem;
  letter-spacing: -0.01em;
  color: var(--pumpkin);
}

.footer-links {
  margin-top: 1.5rem;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.5rem 2rem;
  font-size: 1.0625rem;
}
.footer-links a {
  text-decoration: none;
  border-bottom: 1px solid var(--rule-strong);
  padding-bottom: 2px;
}
.footer-links a:hover { color: var(--glow); border-color: var(--glow); }

.footer-legal {
  margin-top: 1.6rem;
  font-size: 0.95rem;
  color: var(--muted);
}

/* ---------- Wider screens ---------- */

@media (min-width: 560px) {
  .ledger li { column-gap: 1rem; }
}

@media (min-width: 720px) {
  .routes { grid-template-columns: repeat(3, 1fr); gap: 1.5rem; }
  .about-grid { grid-template-columns: 1.05fr 0.95fr; }

  /* The wings come out either side of the mark and stay tucked in close to it,
     so the header reads as one lockup rather than three things spread over 1140px. */
  .header-inner {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    column-gap: clamp(1.75rem, 4.5vw, 3.5rem);
    align-items: center;
  }
  .header-mark { grid-area: 1 / 2; flex: none; }
  .nav-left { grid-area: 1 / 1; justify-self: end; }
  .nav-right { grid-area: 1 / 3; justify-self: start; }

  .hero-band img { aspect-ratio: 21 / 9; }
}

@media (min-width: 900px) {
  /* The plate and its ledger either side of the gutter, the ledger the wider of
     the two because it carries three prices and three buttons. The second range
     mirrors the first, so the two blocks turn the page rather than repeat it. */
  .range-grid { grid-template-columns: 0.82fr 1.18fr; }
  .range-grid .set-photo { aspect-ratio: 1 / 1; }

  .range:nth-of-type(2) .range-grid { grid-template-columns: 1.18fr 0.82fr; }
  .range:nth-of-type(2) .set { order: 2; }
  .range:nth-of-type(2) .ledger { order: 1; }
}

@media (min-width: 1100px) {
  .hero-band img { aspect-ratio: 12 / 5; }
}

/* The wider the screen, the more the photo is magnified inside the band, so the
   crop travels down to keep the pumpkins and not just their shoulders. */
@media (min-width: 1400px) {
  .hero-band img { object-position: 50% 56%; }
}

/* ---------- One page-load reveal ---------- */

@media (prefers-reduced-motion: no-preference) {
  .header-inner,
  .hero-text,
  .hero-band {
    animation: rise 0.9s cubic-bezier(0.22, 0.8, 0.3, 1) backwards;
  }
  .hero-text { animation-delay: 0.1s; }
  .hero-band { animation-delay: 0.2s; }

  @keyframes rise {
    from { opacity: 0; transform: translateY(14px); }
    to { opacity: 1; transform: none; }
  }
}