/* L'Arc Patisserie — design tokens and the styles that inline attributes can't
   express (hover, focus, media queries, routing). Layout and typography stay as
   inline styles on the elements so this file stays diffable against the Claude
   Design source, LArc Patisserie.dc.html. */

/* ---- tokens: _ds/.../tokens/*.css ---------------------------------------- */

:root {
  --cream-50: #FBF6EC;
  --cream-100: #F4E9D6;
  --cream-200: #EBDBBE;
  --cream-300: #DDC6A0;
  --espresso-900: #2A1B12;
  --espresso-700: #4B3320;
  --espresso-500: #6E4D34;
  --espresso-300: #9C7E63;
  --caramel-600: #C2652A;
  --caramel-700: #A24F1F;
  --caramel-400: #DE9257;
  --gold-500: #B08A50;
  --gold-700: #8A6A3A;
  --white: #FFFFFF;

  --surface-page: var(--cream-100);
  --surface-card: var(--white);
  --surface-inset: var(--cream-200);
  --text-primary: var(--espresso-900);
  --text-secondary: var(--espresso-500);
  --text-on-dark: var(--cream-50);
  --text-accent: var(--caramel-700);
  --border-subtle: var(--cream-300);
  --border-strong: var(--espresso-300);
  --accent-primary: var(--caramel-600);
  --accent-primary-hover: var(--caramel-700);
  --accent-metallic: var(--gold-500);

  --font-display: 'Libre Caslon Display', Georgia, serif;
  --font-accent-italic: 'Cormorant Garamond', Georgia, serif;
  --font-body: 'Work Sans', -apple-system, sans-serif;
  --tracking-wide: 0.14em;
  --tracking-label: 0.22em;
  --leading-body: 1.55;

  --radius-sm: 2px;
  --radius-pill: 999px;
  --rule-thin: 1px solid var(--border-subtle);
  --rule-strong: 1px solid var(--border-strong);
  --ease-standard: cubic-bezier(.4, 0, .2, 1);
  --ease-arc: cubic-bezier(.22, .61, .36, 1);
  --duration-fast: 150ms;
  --duration-standard: 280ms;
}

/* ---- base ---------------------------------------------------------------- */

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--cream-50);
  color: var(--espresso-900);
  font-family: var(--font-body);
  -webkit-font-smoothing: antialiased;
}

a {
  color: var(--accent-primary);
  text-decoration: none;
}

a:hover {
  color: var(--accent-primary-hover);
}

::selection {
  background: var(--cream-300);
}

img {
  max-width: 100%;
}

/* The menu overlay and form confirmations carry an inline `display`, which
   would otherwise win over the UA stylesheet's [hidden] rule. */
[hidden] {
  display: none !important;
}

:focus-visible {
  outline: 2px solid var(--accent-primary);
  outline-offset: 3px;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* Skip link, revealed on keyboard focus. */
.skip-link {
  position: fixed;
  top: 12px;
  left: 12px;
  z-index: 300;
  transform: translateY(-200%);
  background: var(--espresso-900);
  color: var(--cream-50);
  font-size: 11px;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  padding: 12px 20px;
  border-radius: var(--radius-sm);
}

.skip-link:focus {
  transform: translateY(0);
  color: var(--cream-50);
}

/* ---- routing ------------------------------------------------------------- */

/* Every page ships in the document; the hash router shows one at a time. */
.page {
  display: none;
}

.page.is-current {
  display: block;
}

/* ---- responsive: replaces the design's JS `isMobile` switch -------------- */

@media (max-width: 859px) {
  .desktop-only {
    display: none !important;
  }
}

@media (min-width: 860px) {
  .mobile-only {
    display: none !important;
  }
}

/* The method column tracks the scroll on desktop, flows inline on mobile. */
@media (min-width: 860px) {
  .method-column {
    position: sticky;
    top: 22vh;
  }
}

/* ---- cursor label -------------------------------------------------------- */

/* Only for devices that actually have a hovering pointer. */
.cursor-label {
  display: none;
}

@media (hover: hover) and (pointer: fine) {
  .cursor-label {
    display: block;
  }
}

/* ---- hero carousel ------------------------------------------------------- */

.hero-arrow:hover {
  color: var(--espresso-900);
}

.hero-track {
  cursor: grab;
}

/* The design hangs the pastry name off the right of the image and pins the two
   hero facts to the bottom corners. These live here rather than inline so the
   narrow-screen rules below can override them — an inline style would win. */
.hero-label {
  position: absolute;
  right: clamp(-80px, -5vw, -36px);
  bottom: 24%;
}

.hero-meta {
  position: absolute;
  bottom: clamp(24px, 4.5vh, 48px);
}

.hero-meta-hours {
  left: clamp(20px, 5vw, 80px);
  text-align: left;
}

.hero-meta-address {
  right: clamp(20px, 5vw, 80px);
  text-align: right;
}

.hero-cta {
  margin-top: clamp(14px, 2.6vh, 26px);
}

/* Narrow screens have room for neither: the name centres under the image and
   the two facts stack. Positional properties only — [data-arc] animates
   `transform`, which must stay free. */
@media (max-width: 700px) {
  .hero-label {
    right: auto;
    left: 0;
    width: 100%;
    bottom: -30px;
    justify-content: center;
  }

  .hero-meta {
    left: 0;
    right: 0;
    text-align: center;
  }

  .hero-meta-hours {
    bottom: calc(clamp(24px, 4.5vh, 48px) + 22px);
  }

  /* Clear the name that now sits under the image. */
  .hero-cta {
    margin-top: 52px;
  }
}

.hero-track.is-dragging {
  cursor: grabbing;
}

/* ---- design-system components ------------------------------------------- */

/* Input — components/core/Input.jsx */
.field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-family: var(--font-body);
  width: 100%;
}

.field-label {
  font-size: 12px;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--text-secondary);
}

.field-input,
.field-textarea {
  font-family: var(--font-body);
  font-size: 15px;
  color: var(--text-primary);
  background: var(--white);
  border: var(--rule-thin);
  border-radius: var(--radius-sm);
  padding: 12px 14px;
  outline: none;
  transition: border-color var(--duration-standard) var(--ease-standard);
}

.field-textarea {
  line-height: 1.6;
  resize: vertical;
}

.field-input:focus,
.field-textarea:focus {
  border-color: var(--accent-primary);
}

/* Button — components/core/Button.jsx, primary variant */
.btn {
  font-family: var(--font-body);
  font-size: 13px;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  border: none;
  border-radius: var(--radius-sm);
  cursor: pointer;
  padding: 13px 26px;
  background: var(--espresso-900);
  color: var(--cream-50);
  transition: opacity var(--duration-fast) var(--ease-standard);
}

.btn:active {
  opacity: .85;
}

/* SectionDivider — components/core/SectionDivider.jsx */
.divider {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  font-family: var(--font-body);
  color: var(--border-strong);
  font-size: 14px;
}

.divider::before,
.divider::after {
  content: "";
  width: 64px;
  height: 1px;
  background: var(--border-strong);
}

/* ---- motion preferences -------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}