/* Journal (hair): adapted from bookd-templates-examples-v2 src/templates/hair/theme.css. Pink margins, raspberry
   rules, expressive serif headlines, long photographs. Fonts: Petrona, Figtree (OFL, FONT-LICENCES.md). */
@font-face { font-family: 'Petrona Variable'; font-style: normal; font-weight: 100 900; font-display: swap; src: url('/_t/fonts/petrona.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Petrona Variable'; font-style: italic; font-weight: 100 900; font-display: swap; src: url('/_t/fonts/petrona-italic.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Figtree Variable'; font-style: normal; font-weight: 100 900; font-display: swap; src: url('/_t/fonts/figtree.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
:where(:root) {
  --bg: #FCE9F2; --surface: #F4BFD8; --ink: #3B2132; --muted: #674054; --line: #E2A9C3;
  --accent: #922D60; --on-accent: #FCE9F2; --focus: #922D60; --open: #1F7A45; --on-ink-muted: #E7CFDB; --accent-on-ink: #F4BFD8;
  --font-display: 'Petrona Variable', Georgia, serif; --font-body: 'Figtree Variable', system-ui, sans-serif;
  --radius: 2px; --radius-lg: 2px; --wrap: 1216px;
  --step-0: clamp(1.0625rem, 1rem + .25vw, 1.25rem);
  --step-5: clamp(2.75rem, 1.65rem + 4.5vw, 6rem); --step-4: clamp(2.3rem, 1.5rem + 3.2vw, 4.5rem); --step-3: clamp(1.875rem, 1.4rem + 2vw, 3.75rem);
}
body { line-height: 1.65; }
h1, h2, h3 { font-weight: 500; letter-spacing: -.03em; line-height: 1.08; }
.btn { border-radius: 999px; }
.hd { border-bottom: 1px solid var(--accent); }
.hd__brand { font-weight: 500; font-style: italic; font-size: clamp(1.4rem, 1.2rem + .8vw, 1.8rem); }
.hd__mark { display: none; }
.hd__menu summary { border-width: 1px; border-radius: 999px; }
.kicker { display: block; text-transform: none; letter-spacing: .02em; font-weight: 500; border-top: 1px solid var(--accent); padding-top: 12px; }
.lead { font-family: var(--font-display); font-style: italic; }

/* Hero: a landscape spread with a raspberry margin rule */
@media (min-width: 56rem) { .hero--photo .hero__grid { grid-template-columns: 4fr 6fr; align-items: end; } }
.hero__media { padding-left: 24px; }
.deco--rule { display: block; position: absolute; left: 0; top: 40px; bottom: 0; width: 1px; background: var(--accent); }
.hero__img { aspect-ratio: 3 / 2; }
@media (min-width: 56rem) { .hero__media { padding-left: 64px; } .hero__img { aspect-ratio: 5 / 4; } }

.sec { padding-block: clamp(56px, 7vw, 112px); }
.sec__head { border-top: 1px solid var(--accent); padding-top: var(--s2); }
.sec__head h2 { font-style: italic; font-weight: 400; }

/* Services as a printed menu */
@media (min-width: 56rem) { .svc { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: var(--s6); } }
.svc__item { border-bottom: 1px dotted var(--accent); padding-block: 14px; }
.svc__name { font-family: var(--font-display); font-weight: 500; font-size: var(--step-2); }
.svc__price { font-weight: 600; }

/* Photos: editorial spreads */
.gal { gap: var(--s3); }
@media (min-width: 56rem) {
  .gal { grid-template-columns: repeat(10, minmax(0, 1fr)); gap: var(--s4); }
  .gal__item:nth-child(4n+1), .gal__item:nth-child(4n+4) { grid-column: span 6; }
  .gal__item:nth-child(4n+2), .gal__item:nth-child(4n+3) { grid-column: span 4; }
  .gal__item:nth-child(4n+1) .gal__img, .gal__item:nth-child(4n+4) .gal__img { aspect-ratio: 3 / 2; }
  .gal__item:nth-child(4n+2) .gal__img, .gal__item:nth-child(4n+3) .gal__img { aspect-ratio: 1; height: auto; }
}
.gal__img, .about__img, .video__poster { border-radius: 0; }

.hours th, .hours td { border-color: var(--line); }
.hours th { font-family: var(--font-display); font-size: var(--step-1); }
.status { background: transparent; border: 1px solid var(--accent); }
.facts dt { text-transform: none; letter-spacing: .02em; font-weight: 600; }
.ft { border-top: 1px solid var(--accent); }
.ft__name { font-style: italic; font-weight: 500; }