/*
  Hazel & Hyacinth
  Harmony: triadic, three hues about 120deg apart, all pulled from the photo shoot: aubergine violet (about 290deg,
  the dark shop corners and lilac), daffodil yellow (about 45deg) and hyacinth leaf teal green (about 160deg).
  A moody, grown up take on a flower shop instead of the expected blush pink and white.
  60%  --night   #2A1630  page background
  30%  --plum    #3C2444  surfaces (cards, panels, map)
       --petal   #F3E9EE  main text on dark
       --mauve   #C9B6C6  secondary text on dark
  10%  --daffy   #F2C230  buttons, highlights, map pin
       --leaf    #7CC4B0  open now status, small marks
  Contrast (WCAG): petal on night 14.09, petal on plum 11.58, mauve on night 8.75, mauve on plum 7.19,
  daffy on night 9.98, daffy on plum 8.20, night on daffy 9.98 (buttons), leaf on night 8.26, night on petal 14.09.
*/
:root {
  --night: #2A1630;
  --plum: #3C2444;
  --petal: #F3E9EE;
  --mauve: #C9B6C6;
  --daffy: #F2C230;
  --leaf: #7CC4B0;
  --serif: "Instrument Serif", Georgia, serif;
  --sans: "Schibsted Grotesk", system-ui, sans-serif;
  --pad: clamp(1rem, 4vw, 3.5rem);
}
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--night); color: var(--petal); font: 400 1.0625rem/1.6 var(--sans); overflow-x: hidden; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
h1, h2, h3 { font-family: var(--serif); font-weight: 400; line-height: 1; margin: 0; letter-spacing: -.01em; text-wrap: balance; }
h1 em, h2 em { color: var(--daffy); }
p { margin: 0; }
:focus-visible { outline: 3px solid var(--daffy); outline-offset: 3px; border-radius: 4px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.hide { display: none; }
.skip { position: absolute; left: 1rem; top: -4rem; background: var(--daffy); color: var(--night); padding: .6rem 1rem; z-index: 60; }
.skip:focus { top: 1rem; }

.btn { display: inline-flex; align-items: center; justify-content: center; min-height: 52px; padding: .85rem 1.6rem; font: 600 1rem/1 var(--sans); text-decoration: none; border: 2px solid transparent; border-radius: 4px; cursor: pointer; transition: transform .2s ease, background-color .2s ease, color .2s ease; }
.btn:hover { transform: translateY(-2px); }
.btn--sun { background: var(--daffy); color: var(--night); }
.btn--sun:hover { background: #f6d25f; }
.btn--line { border-color: var(--petal); color: var(--petal); }
.btn--line:hover { background: var(--petal); color: var(--night); }

/* Header */
.head { position: sticky; top: 0; z-index: 30; display: flex; align-items: center; gap: clamp(1rem, 3vw, 2.6rem); padding: .9rem var(--pad); background: color-mix(in srgb, var(--night) 94%, transparent); backdrop-filter: blur(8px); border-bottom: 1px solid rgba(243, 233, 238, .12); }
.brand { font: 400 clamp(1.6rem, 2.4vw, 2rem)/1 var(--serif); text-decoration: none; white-space: nowrap; margin-right: auto; }
.brand i, .foot__name i { color: var(--daffy); }
.nav { display: flex; gap: clamp(1rem, 2.4vw, 2.2rem); font-weight: 500; }
.nav a { text-decoration: none; padding: .4rem 0; border-bottom: 1px solid transparent; }
.nav a:hover { border-bottom-color: var(--mauve); }
.nav a[aria-current="page"] { border-bottom-color: var(--daffy); color: var(--daffy); }
.burger { display: none; min-height: 46px; padding: 0 1rem; border: 1px solid var(--petal); border-radius: 4px; background: transparent; color: var(--petal); font: 600 .95rem/1 var(--sans); cursor: pointer; }

/* Open now status: signature */
.now { display: inline-flex; align-items: center; gap: .6rem; font-weight: 600; font-size: .95rem; }
.now__dot { width: 10px; height: 10px; border-radius: 50%; background: var(--mauve); flex: none; }
.is-open .now__dot, .now.is-open .now__dot { background: var(--leaf); box-shadow: 0 0 0 0 rgba(124, 196, 176, .6); animation: pulse 2.4s ease-out infinite; }
.now.is-open { color: var(--leaf); }
.now.is-soon { color: var(--daffy); }
.now.is-soon .now__dot { background: var(--daffy); }
.now.is-closed { color: var(--mauve); }
@keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(124, 196, 176, .6); } 70% { box-shadow: 0 0 0 12px rgba(124, 196, 176, 0); } 100% { box-shadow: 0 0 0 0 rgba(124, 196, 176, 0); } }
.now--head { border: 1px solid rgba(243, 233, 238, .25); border-radius: 999px; padding: .5rem .9rem; font-size: .88rem; }
.now--big { border: 1px solid currentColor; border-radius: 999px; padding: .55rem 1.1rem; margin-bottom: 1.8rem; align-self: flex-start; }
.now--huge { font: 400 clamp(2.4rem, 4.6vw, 4rem)/1.05 var(--serif); gap: 1rem; align-items: baseline; }
.now--huge .now__dot { width: 22px; height: 22px; transform: translateY(-4px); }

/* Hero */
.hero { display: grid; grid-template-columns: 1.1fr .9fr; min-height: calc(100vh - 72px); }
.hero__copy { padding: clamp(2.5rem, 6vw, 5rem) var(--pad); display: flex; flex-direction: column; justify-content: center; }
.hero h1 { font-size: clamp(3.4rem, 7.2vw, 7.2rem); line-height: .95; }
.hero h1 em { font-style: italic; }
.hero__lede { margin-top: 1.6rem; font-size: 1.18rem; max-width: 40ch; color: var(--mauve); }
.hero__cta { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: 2.2rem; }
.hero__img { margin: 0; position: relative; overflow: hidden; }
.hero__img img { width: 100%; height: 100%; object-fit: cover; animation: bloom 1.6s cubic-bezier(.2, .7, .2, 1) both; }
@keyframes bloom { from { opacity: 0; transform: scale(1.06); } to { opacity: 1; transform: none; } }

/* This week */
.today { display: grid; grid-template-columns: .9fr 1.1fr; gap: clamp(2rem, 5vw, 5rem); padding: clamp(4rem, 8vw, 7rem) var(--pad); align-items: center; max-width: 1440px; margin: 0 auto; }
.today__board { background: var(--plum); padding: clamp(1.6rem, 3vw, 2.6rem); border-radius: 4px; }
.today h2 { font-size: clamp(2.4rem, 4vw, 3.6rem); }
.today__list { list-style: none; padding: 0; margin: 1.8rem 0 1.4rem; }
.today__list li { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; padding: .85rem 0; border-bottom: 1px dashed rgba(201, 182, 198, .4); }
.today__list b { font: 400 1.7rem/1 var(--serif); color: var(--daffy); }
.today__list span { color: var(--mauve); text-align: right; }
.today__note { color: var(--mauve); font-size: .95rem; }
.today__mosaic { display: grid; grid-template-columns: 1.2fr 1fr; grid-template-rows: 1fr 1fr; gap: 1rem; }
.today__mosaic img { width: 100%; height: 100%; object-fit: cover; border-radius: 4px; }
.m1 { grid-row: span 2; aspect-ratio: 7 / 9; }
.m2, .m3 { aspect-ratio: 1; }

/* Categories */
.cats { padding: 0 var(--pad) clamp(4rem, 8vw, 7rem); max-width: 1440px; margin: 0 auto; }
.cats h2 { font-size: clamp(2.4rem, 4vw, 3.6rem); margin-bottom: 2rem; }
.cats__row { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(.8rem, 2vw, 1.5rem); }
.cat { text-decoration: none; display: grid; gap: .9rem; }
.cat img { aspect-ratio: 6 / 7.6; object-fit: cover; width: 100%; border-radius: 999px 999px 4px 4px; transition: border-radius .5s ease; }
.cat:hover img { border-radius: 4px; }
.cat span { font: 400 1.6rem/1.1 var(--serif); }
.cat small { display: block; font: 500 .92rem/1.4 var(--sans); color: var(--mauve); margin-top: .3rem; }

/* Visit box and hours */
.visitbox { display: grid; grid-template-columns: .9fr 1.1fr; background: var(--plum); }
.visitbox__text { padding: clamp(3rem, 6vw, 5rem) var(--pad); display: grid; gap: 1.2rem; align-content: center; justify-items: start; }
.visitbox h2 { font-size: clamp(2.4rem, 4vw, 3.6rem); }
.visitbox__map .map { width: 100%; height: 100%; display: block; }
.addr { color: var(--mauve); }
.hours { border-collapse: collapse; width: 100%; max-width: 30rem; font-size: .98rem; }
.hours th, .hours td { text-align: left; padding: .6rem .6rem .6rem 0; border-bottom: 1px solid rgba(201, 182, 198, .25); font-weight: 400; }
.hours th { width: 9rem; color: var(--mauve); }
.hours tr.is-today th, .hours tr.is-today td { color: var(--night); font-weight: 700; }
.hours tr.is-today { background: var(--daffy); }
.hours tr.is-today th { padding-left: .8rem; }

.notes { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1.5rem, 4vw, 4rem); padding: clamp(4rem, 8vw, 7rem) var(--pad); max-width: 1440px; margin: 0 auto; }
.notes blockquote { margin: 0; }
.notes p { font: 400 clamp(1.8rem, 3vw, 2.6rem)/1.15 var(--serif); }
.notes p::before { content: "\201C"; color: var(--daffy); }
.notes p::after { content: "\201D"; color: var(--daffy); }
.notes footer { margin-top: 1rem; color: var(--mauve); }

/* Inner page header */
.phead { padding: clamp(3rem, 6vw, 5rem) var(--pad) clamp(2rem, 4vw, 3rem); display: grid; grid-template-columns: 1.1fr .9fr; gap: 1.5rem 3rem; align-items: end; max-width: 1440px; margin: 0 auto; }
.phead h1 { font-size: clamp(3.4rem, 7.5vw, 7rem); line-height: .95; }
.phead p { color: var(--mauve); font-size: 1.12rem; max-width: 44ch; }

/* Store */
.shop { display: grid; grid-template-columns: 1fr 340px; gap: clamp(1.5rem, 3vw, 3rem); padding: 0 var(--pad) clamp(4rem, 8vw, 6rem); max-width: 1440px; margin: 0 auto; align-items: start; }
.tabs { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 1.8rem; }
.tabs button { min-height: 46px; padding: 0 1.1rem; border-radius: 999px; border: 1px solid rgba(243, 233, 238, .35); background: transparent; color: var(--petal); font: 500 .95rem/1 var(--sans); cursor: pointer; scroll-margin-top: 100px; }
.tabs button[aria-pressed="true"] { background: var(--petal); color: var(--night); border-color: var(--petal); }
.tabs button:hover:not([aria-pressed="true"]) { border-color: var(--petal); }
.cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1rem, 2vw, 1.6rem); }
.card { background: var(--plum); display: flex; flex-direction: column; border-radius: 4px; overflow: hidden; }
.card[hidden] { display: none; }
.card__img { position: relative; }
.card__img img { aspect-ratio: 64 / 76; object-fit: cover; width: 100%; }
.card__flag { position: absolute; left: .7rem; top: .7rem; background: var(--night); color: var(--daffy); font-size: .8rem; font-weight: 600; padding: .3rem .7rem; border-radius: 999px; }
.card__body { padding: 1rem 1.1rem 1.1rem; display: flex; flex-direction: column; gap: .3rem; flex: 1; }
.card h3 { font-size: 1.7rem; }
.card__meta { color: var(--mauve); font-size: .92rem; }
.card__row { display: flex; justify-content: space-between; align-items: center; gap: .8rem; margin-top: auto; padding-top: .8rem; }
.card__price { font: 400 1.6rem/1 var(--serif); color: var(--daffy); }
.hold { min-height: 44px; padding: 0 1rem; border-radius: 4px; border: 1px solid var(--daffy); background: transparent; color: var(--daffy); font: 600 .9rem/1 var(--sans); cursor: pointer; transition: background-color .2s ease, color .2s ease; }
.hold:hover { background: rgba(242, 194, 48, .12); }
.hold__on { display: none; }
.hold[aria-pressed="true"] { background: var(--daffy); color: var(--night); }
.hold[aria-pressed="true"] .hold__add { display: none; }
.hold[aria-pressed="true"] .hold__on { display: inline; }
.hold[aria-pressed="true"] .hold__on::before { content: ""; display: inline-block; width: 8px; height: 13px; border: solid var(--night); border-width: 0 2px 2px 0; transform: rotate(45deg); margin-right: .55rem; vertical-align: 1px; }
.holdlist { position: sticky; top: 92px; background: var(--petal); color: var(--night); padding: 1.5rem; border-radius: 4px; display: grid; gap: 1rem; }
.holdlist h2 { font-size: 2.2rem; }
.holdlist__items { list-style: none; padding: 0; margin: 0; display: grid; gap: .4rem; }
.holdlist__items li { display: flex; justify-content: space-between; gap: .6rem; padding: .55rem 0; border-bottom: 1px solid rgba(42, 22, 48, .15); font-weight: 500; animation: pop .3s ease both; }
.holdlist__items .holdlist__empty { color: #6b5a6c; font-weight: 400; border: 0; }
.holdlist__items button { border: 0; background: none; color: #6b3f71; font: 600 .85rem/1 var(--sans); cursor: pointer; min-height: 32px; text-decoration: underline; }
@keyframes pop { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
.holdform { display: grid; gap: .9rem; }
.f { display: grid; gap: .35rem; font-weight: 600; font-size: .92rem; }
.f input, .f select { font: 400 1rem/1.4 var(--sans); min-height: 48px; padding: .7rem .85rem; border: 1px solid #a893a9; border-radius: 4px; background: #fff; color: var(--night); width: 100%; }
.f input:focus, .f select:focus { outline: none; border-color: var(--night); box-shadow: 0 0 0 3px rgba(42, 22, 48, .2); }
.f input.is-bad { border-color: #A3261B; }
.holdlist .btn--sun { background: var(--night); color: var(--daffy); }
.holdlist .btn--sun:hover { background: var(--plum); }
.status { font-weight: 600; min-height: 1.4em; font-size: .92rem; }
.status.is-ok { color: #1f6b56; }

.holdbar { display: none; }
@media (max-width: 900px) {
  .holdbar:not([hidden]) { display: flex; align-items: center; justify-content: center; position: fixed; left: 1rem; right: 1rem; bottom: 1rem; z-index: 40; min-height: 52px; border-radius: 4px; background: var(--daffy); color: var(--night); font-weight: 700; text-decoration: none; box-shadow: 0 10px 30px -10px rgba(0, 0, 0, .6); }
}
#hold-title { scroll-margin-top: 90px; }

/* Visit page */
.visit { display: grid; grid-template-columns: .9fr 1.1fr; gap: clamp(1.5rem, 4vw, 4rem); padding: 0 var(--pad) clamp(4rem, 8vw, 6rem); max-width: 1440px; margin: 0 auto; align-items: start; }
.status-card { background: var(--plum); padding: clamp(1.6rem, 3vw, 2.6rem); border-radius: 4px; display: grid; gap: 1.2rem; }
.status-card__sub { color: var(--mauve); font-size: 1.05rem; }
.status-card__note { color: var(--mauve); font-size: .92rem; }
.visit__map .map { width: 100%; height: auto; border-radius: 4px; display: block; }
.how { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.2rem; margin-top: 1.6rem; }
.how h3 { font-size: 1.6rem; color: var(--daffy); margin-bottom: .3rem; }
.how p { color: var(--mauve); font-size: .96rem; }
.addr--big { margin-top: 1.6rem; font-size: 1.1rem; color: var(--petal); }

/* About */
.about { display: grid; grid-template-columns: 1.3fr .7fr; gap: clamp(1.5rem, 4vw, 4rem); padding: 0 var(--pad) clamp(3rem, 6vw, 5rem); max-width: 1440px; margin: 0 auto; }
.about figure { margin: 0; }
.about__main { grid-column: 1 / -1; }
.about__main img { width: 100%; aspect-ratio: 11 / 5; object-fit: cover; border-radius: 4px; }
.about__lead { font: 400 clamp(1.8rem, 3vw, 2.6rem)/1.15 var(--serif); margin-bottom: 1.4rem; }
.about__text p:not(.about__lead) { color: var(--mauve); max-width: 58ch; }
.about__text p + p { margin-top: 1rem; }
.about__facts { list-style: none; padding: 0; margin: 2rem 0 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
.about__facts li { border-top: 1px solid var(--daffy); padding-top: .8rem; color: var(--mauve); font-size: .95rem; }
.about__facts b { display: block; font: 400 2.8rem/1 var(--serif); color: var(--daffy); }
.about__side img { aspect-ratio: 7 / 8; object-fit: cover; width: 100%; border-radius: 999px 999px 4px 4px; }
.about__side figcaption { color: var(--mauve); font-size: .92rem; margin-top: .6rem; }

/* Footer */
.foot { border-top: 1px solid rgba(243, 233, 238, .12); padding: clamp(3rem, 6vw, 4.5rem) var(--pad) 2.5rem; }
.foot__top { display: flex; justify-content: space-between; align-items: end; gap: 1.5rem; flex-wrap: wrap; }
.foot__name { font: 400 clamp(2.8rem, 6vw, 5.4rem)/1 var(--serif); }
.foot__line { color: var(--mauve); font-size: 1.1rem; }
.foot__cols { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.5rem; margin-top: 2.5rem; color: var(--mauve); font-size: .96rem; }
.foot a { color: var(--petal); }
.foot a:hover { color: var(--daffy); }
.foot__credit { font-size: .88rem; }

@media (max-width: 1100px) {
  .now--head { display: none; }
  .cards { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 900px) {
  .burger { display: block; }
  .nav { position: absolute; top: 100%; left: 0; right: 0; flex-direction: column; gap: 0; background: var(--night); padding: .4rem var(--pad) 1.2rem; border-bottom: 1px solid rgba(243, 233, 238, .2); display: none; }
  .head.is-open .nav { display: flex; }
  .nav a { padding: 1rem .2rem; border-bottom: 1px solid rgba(243, 233, 238, .12); font-size: 1.1rem; }
  .hero, .today, .visitbox, .notes, .phead, .shop, .visit, .about { grid-template-columns: 1fr; }
  .hero { min-height: 0; }
  .hero__img { height: 70vh; min-height: 420px; order: -1; }
  .cats__row { grid-template-columns: 1fr 1fr; }
  .holdlist { position: static; }
  .about__side { max-width: 420px; }
  .foot__cols { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 600px) {
  body { font-size: 1rem; }
  .hero h1 { font-size: clamp(3rem, 14vw, 3.8rem); }
  .hero__img { height: 46vh; min-height: 300px; }
  .hero__copy { padding-top: 1.8rem; }
  .cards { grid-template-columns: 1fr 1fr; gap: .8rem; }
  .card h3 { font-size: 1.35rem; }
  .card__row { flex-direction: column; align-items: stretch; }
  .hold { width: 100%; }
  .how { grid-template-columns: 1fr; }
  .hours th { width: 7.5rem; }
  .about__facts { grid-template-columns: 1fr 1fr 1fr; }
  .about__main img { aspect-ratio: 4 / 3; }
  .foot__cols { grid-template-columns: 1fr; }
  .today__list b { font-size: 1.4rem; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-delay: 0ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}