@font-face { font-family: "Fraunces"; src: url("/assets/fonts/fraunces-300-normal.woff2") format("woff2"); font-weight: 300; font-display: swap; }
@font-face { font-family: "Fraunces"; src: url("/assets/fonts/fraunces-300-italic.woff2") format("woff2"); font-weight: 300; font-style: italic; font-display: swap; }
@font-face { font-family: "Fraunces"; src: url("/assets/fonts/fraunces-600-normal.woff2") format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Instrument Sans"; src: url("/assets/fonts/instrument-sans-400-normal.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Instrument Sans"; src: url("/assets/fonts/instrument-sans-600-normal.woff2") format("woff2"); font-weight: 600; font-display: swap; }

:root {
  --font-display: "Fraunces", Georgia, serif;
  --font-body: "Instrument Sans", system-ui, sans-serif;
  --text-sm: 0.875rem;
  --text-base: clamp(1rem, 0.96rem + 0.2vw, 1.125rem);
  --text-lead: clamp(1.2rem, 1.05rem + 0.8vw, 1.6rem);
  --text-h2: clamp(2.2rem, 1.3rem + 4.4vw, 5rem);
  --text-title: clamp(3rem, 1.3rem + 8.4vw, 8.5rem);
  --space-xs: 0.5rem;
  --space-sm: 1rem;
  --space-md: 2rem;
  --space-lg: 4rem;
  --space-xl: clamp(6rem, 12vw, 11rem);
  --gutter: clamp(1rem, 4vw, 4rem);
  --content-max: 90rem;
  --prose-max: 58ch;
  --radius-card: 0.25rem;
  --color-night: #0f1220;
  --color-blue: #1a2140;
  --color-plum: #3f2a4f;
  --color-ember: #7c3a2c;
  --color-morning: #f7ecd9;
  --color-ink: #24190f;
  --color-text: #f7ecd9;
  --color-surface: #0f1220;
  --color-accent: #eeb054;
  --color-accent-deep: #8a4510;
  --color-error: #a11212;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 1rem; }
body { margin: 0; background: var(--color-surface); color: var(--color-text); font-family: var(--font-body); font-size: var(--text-base); line-height: 1.6; overflow-wrap: break-word; }
h1, h2, h3 { font-family: var(--font-display); font-weight: 300; line-height: 1.04; letter-spacing: -0.02em; hyphens: auto; margin: 0; }
p { margin: 0 0 var(--space-sm); }
img { display: block; width: 100%; height: auto; }
a { color: inherit; }
:focus-visible { outline: 3px solid var(--color-accent); outline-offset: 3px; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

.skip-link { position: absolute; left: var(--gutter); top: -6rem; z-index: 20; padding: 0.75rem 1rem; background: var(--color-morning); color: var(--color-ink); }
.skip-link:focus { top: 0.5rem; }
.demo-notice { position: relative; z-index: 2; margin: 0; padding-inline: var(--gutter); font-size: var(--text-sm); background: #000; }
.demo-notice a { display: inline-block; padding-block: 0.7rem; min-height: 44px; }

.site-header { position: relative; z-index: 3; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0 var(--space-md); padding: var(--space-xs) var(--gutter); }
.site-header__brand { padding-block: 0.5rem; text-decoration: none; font-family: var(--font-display); font-size: 1.5rem; font-style: italic; font-weight: 300; }
.site-header__nav { display: flex; gap: 0.25rem clamp(0.75rem, 2vw, 2rem); align-items: center; }
.site-header__nav a { display: inline-flex; align-items: center; min-height: 44px; text-underline-offset: 0.3em; text-decoration-color: transparent; transition: text-decoration-color 200ms; }
.site-header__nav a:hover { text-decoration-color: currentColor; }
.site-header__order { color: var(--color-accent); font-weight: 600; }

/* Every moment carries its own colour, so the page reads as a night without JavaScript. */
.moment, .door, .morning { position: relative; padding: var(--space-xl) var(--gutter); }
.moment--deep { background: var(--color-night); }
.moment--blue { background: var(--color-blue); }
.moment--plum { background: var(--color-plum); }
.moment__time { font-family: var(--font-display); font-style: italic; font-weight: 300; font-size: var(--text-lead); color: var(--color-accent); margin-bottom: var(--space-sm); font-variant-numeric: tabular-nums; }

/* With the sky running, the moments turn transparent and the fixed layers take over. */
.has-sky .moment { background: none; }
.sky, .time-rail, .clock { display: none; }
.has-sky .sky { display: block; position: fixed; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
.has-sky main > section { z-index: 1; }
.sky__layer { position: absolute; inset: 0; opacity: 0; will-change: opacity; }
.sky__layer--deep { background: var(--color-night); opacity: 1; }
.sky__layer--blue { background: linear-gradient(#10152b, var(--color-blue)); }
.sky__layer--plum { background: linear-gradient(#1a2140, var(--color-plum)); }
.sky__layer--ember { background: linear-gradient(var(--color-plum), var(--color-ember) 75%, #9c4a30); }
.sky__stars { position: absolute; inset: 0; background-image: radial-gradient(1px 1px at 12% 18%, #fff, transparent), radial-gradient(1px 1px at 31% 62%, #fff, transparent), radial-gradient(1.5px 1.5px at 47% 27%, #fff, transparent), radial-gradient(1px 1px at 66% 12%, #fff, transparent), radial-gradient(1px 1px at 83% 44%, #fff, transparent), radial-gradient(1.5px 1.5px at 91% 8%, #fff, transparent), radial-gradient(1px 1px at 7% 71%, #fff, transparent), radial-gradient(1px 1px at 58% 79%, #fff, transparent); opacity: 0.7; will-change: opacity; }
.sky__sun { position: absolute; left: 50%; bottom: 0; width: min(70vw, 34rem); aspect-ratio: 1; margin-left: calc(min(70vw, 34rem) / -2); border-radius: 50%; background: radial-gradient(circle, #ffd98c 0 42%, rgb(238 176 84 / 0.5) 58%, transparent 71%); transform: translateY(110%); will-change: transform; }

.hero { min-height: 92svh; display: grid; align-content: end; gap: var(--space-sm); padding-top: var(--space-lg); }
.hero__title { font-size: var(--text-title); font-style: italic; max-width: 12ch; position: relative; z-index: 1; hyphens: manual; }
.hero__tagline { max-width: var(--prose-max); font-size: var(--text-lead); line-height: 1.35; position: relative; z-index: 1; }
.hero__media img { border-radius: 50vw 50vw 0 0; }
.hero__cue { font-size: var(--text-sm); }

.feature__title { font-size: var(--text-h2); max-width: 14ch; margin-bottom: var(--space-sm); }
.feature__text { max-width: var(--prose-max); }
.feature__media { margin-bottom: var(--space-md); }
.feature__media img { border-radius: var(--radius-card); }
.text-link { display: inline-flex; align-items: center; min-height: 44px; font-weight: 600; text-underline-offset: 0.3em; }

.numbers { display: grid; gap: var(--space-sm); margin: var(--space-lg) 0 0; }
.numbers div { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-sm); border-top: 1px solid rgb(247 236 217 / 0.35); padding-top: var(--space-xs); }
.numbers dd { margin: 0; font-family: var(--font-display); font-size: var(--text-h2); line-height: 1; font-weight: 300; color: var(--color-accent); }

.morning { background: var(--color-morning); color: var(--color-ink); border-radius: 50vw 50vw 0 0 / 14vw 14vw 0 0; }
.morning .moment__time, .door .moment__time { color: var(--color-accent-deep); }
.morning__title { font-size: var(--text-h2); margin-bottom: var(--space-lg); }
.loaves { list-style: none; margin: 0 0 var(--space-md); padding: 0; display: grid; gap: var(--space-lg); }
.loaf__media { margin-bottom: var(--space-sm); border-radius: var(--radius-card); transition: transform 400ms ease; }
.loaf:hover .loaf__media { transform: translateY(-0.4rem); }
.loaf__title { font-size: 1.9rem; margin-bottom: var(--space-xs); }
.loaf__price { font-weight: 600; color: var(--color-accent-deep); }

.door { background: var(--color-morning); color: var(--color-ink); padding-top: 0; }
.door__title { font-size: var(--text-title); font-style: italic; margin-bottom: var(--space-md); }
.door__status { font-size: var(--text-lead); font-weight: 600; }

.button { display: inline-flex; align-items: center; justify-content: center; min-height: 52px; padding: 0.8rem 1.5rem; border: 0; border-radius: 99px; background: var(--color-ink); color: var(--color-morning); font: 600 1rem/1.2 var(--font-body); text-decoration: none; cursor: pointer; transition: transform 200ms ease; }
.button:hover { transform: translateY(-2px); }
.button:disabled { opacity: 0.55; cursor: not-allowed; transform: none; }
.page .button { background: var(--color-accent); color: var(--color-ink); }

.page { max-width: var(--content-max); margin-inline: auto; padding: var(--space-lg) var(--gutter) var(--space-xl); }
.page h1 { font-size: var(--text-title); font-style: italic; max-width: 13ch; margin-bottom: var(--space-md); }
.page__lead { font-size: var(--text-lead); line-height: 1.35; max-width: var(--prose-max); margin-bottom: var(--space-lg); }
.prices { width: 100%; max-width: 56rem; border-collapse: collapse; margin-bottom: var(--space-lg); }
.prices th, .prices td { padding: 1rem 0.5rem 1rem 0; border-bottom: 1px solid rgb(247 236 217 / 0.3); text-align: left; vertical-align: top; }
.prices thead th { font-size: var(--text-sm); font-weight: 400; }
.prices tbody th { font-family: var(--font-display); font-size: 1.5rem; font-weight: 300; }
.prices tbody th span { display: block; font-family: var(--font-body); font-size: var(--text-sm); }
.prices td:last-child { color: var(--color-accent); white-space: nowrap; font-weight: 600; }
.about { margin-bottom: var(--space-lg); max-width: 60rem; }
.crew { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-md); }
.crew h2 { font-size: 2rem; margin-bottom: var(--space-xs); }

.form { max-width: 36rem; display: grid; gap: var(--space-sm); }
.order__row { display: flex; align-items: center; justify-content: space-between; gap: var(--space-sm); padding-block: 0.5rem; border-bottom: 1px solid rgb(247 236 217 / 0.3); }
.order__row label span { display: block; font-size: var(--text-sm); }
.order__stepper { display: flex; align-items: center; flex: none; }
.order__stepper button { width: 44px; height: 44px; border: 1px solid var(--color-text); background: none; color: inherit; font-size: 1.25rem; cursor: pointer; }
.order__stepper input { width: 3rem; height: 44px; border: 0; background: none; color: inherit; font: inherit; text-align: center; }
.order__total { font-size: var(--text-lead); margin: 0; }
.form__field { display: grid; gap: 0.25rem; }
.form__field input, .form__field select { min-height: 48px; padding: 0.6rem; border: 1px solid var(--color-text); border-radius: var(--radius-card); background: var(--color-blue); color: inherit; font: inherit; }
.radios { border: 0; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 0.25rem 1rem; min-width: 0; }
.radios legend { padding: 0; margin-bottom: 0.25rem; }
.radios label { display: inline-flex; align-items: center; gap: 0.4rem; min-height: 44px; cursor: pointer; }
.radios input { width: 1.15rem; height: 1.15rem; margin: 0; accent-color: var(--color-accent); }
.form__hint { font-size: var(--text-sm); margin: 0; }
.form__status { font-weight: 600; color: var(--color-accent); margin: 0; }

.site-footer { position: relative; z-index: 2; background: var(--color-ink); color: var(--color-morning); padding: var(--space-lg) var(--gutter); }
.site-footer__grid { display: grid; gap: var(--space-md); max-width: var(--content-max); margin-inline: auto; }
.site-footer__name { font-family: var(--font-display); font-size: 1.4rem; margin-bottom: var(--space-xs); }
.site-footer a { display: inline-block; padding-block: 0.65rem; }
.site-footer__nav { display: flex; gap: var(--space-sm); }

.has-sky .clock { display: block; position: fixed; right: var(--gutter); bottom: 1rem; z-index: 5; margin: 0; padding: 0.3rem 0.9rem; border-radius: 99px; background: rgb(15 18 32 / 0.92); color: var(--color-accent); font-family: var(--font-display); font-size: 1.35rem; font-style: italic; font-variant-numeric: tabular-nums; }

@media (min-width: 48rem) {
  .loaves { grid-template-columns: repeat(3, 1fr); gap: var(--space-md); }
  .numbers { grid-template-columns: repeat(3, 1fr); }
  .numbers div { display: block; }
  .site-footer__grid { grid-template-columns: repeat(3, 1fr); }
  .crew { grid-template-columns: repeat(3, 1fr); }
}

@media (min-width: 60rem) {
  .moment, .door, .morning { padding-left: calc(var(--gutter) + 6rem); }
  .hero { grid-template-columns: 1.5fr 1fr; align-items: end; column-gap: var(--space-lg); min-height: 100svh; }
  .hero > * { grid-column: 1; }
  .hero__media { grid-column: 2; grid-row: 1 / span 4; }
  .feature { display: grid; grid-template-columns: repeat(12, 1fr); column-gap: var(--space-md); align-items: end; }
  .feature > .moment__time { grid-column: 1 / -1; }
  .feature__body { grid-column: 1 / span 7; }
  .numbers { grid-column: 8 / -1; grid-template-columns: 1fr; margin: 0; }
  .feature--flip .feature__media { grid-column: 1 / span 7; margin: 0; }
  .feature--flip .feature__body { grid-column: 8 / -1; }
  .has-sky .time-rail { display: flex; flex-direction: column; gap: 0.25rem; position: fixed; left: var(--gutter); top: 50%; transform: translateY(-50%); z-index: 6; }
  .time-rail a { display: inline-flex; align-items: center; min-height: 44px; padding-inline: 0.6rem; border-radius: 99px; background: rgb(15 18 32 / 0.82); color: var(--color-morning); font-size: var(--text-sm); font-variant-numeric: tabular-nums; text-decoration: none; }
  .time-rail a[aria-current] { background: var(--color-accent); color: var(--color-ink); font-weight: 600; }
  .has-sky .clock { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: 0.01ms !important; animation: none !important; }
}