/* ---------- fonts, self-hosted ----------
   These were loaded from fonts.googleapis.com until 2026-09-09. The font FILES
   are byte-identical to what Google served (latin subset, variable weight axis,
   89 KB for the three of them); what self-hosting removes is the 28 KB
   render-blocking stylesheet Google returns to describe them, plus a DNS
   lookup, a TLS handshake and a round trip to each of two more origins before
   a phone can paint any text. Measured: the per-page floor went from 188 KB to
   about 130 KB on every one of the 29 pages.

   Deliberately NO unicode-range. Copying Google's latin block WITH its
   unicode-range but without its sibling subset blocks is a known trap that
   silently renders everything in Arial. With no range declared the font applies
   to every character and any glyph it lacks falls through to the stack below.

   The weight values are RANGES because these are variable fonts: Archivo's
   wght axis covers 400 to 600 and Bodoni Moda's covers 400 to 500, which is
   every weight this stylesheet actually asks for. If a new rule needs a weight
   outside those ranges the browser will synthesise it, so re-fetch a wider
   axis rather than letting it fake one. */
@font-face{
  font-family:"Archivo"; font-style:normal; font-weight:400 600; font-stretch:100%;
  font-display:swap; src:url(/fonts/archivo-latin-var.woff2) format("woff2");
}
@font-face{
  font-family:"Bodoni Moda"; font-style:normal; font-weight:400 500;
  font-display:swap; src:url(/fonts/bodoni-moda-latin-var.woff2) format("woff2");
}
@font-face{
  font-family:"Bodoni Moda"; font-style:italic; font-weight:400 500;
  font-display:swap; src:url(/fonts/bodoni-moda-italic-latin-var.woff2) format("woff2");
}

/* Amarettos, amarettos.ca
   Editorial boutique look, tuned for readers aged 40 to 80: larger base type,
   darker secondary text, generous tap targets, no tiny letterspaced labels
   carrying real information. */

:root{
  --ivory:#f3eee6;
  --ivory-2:#ece3d3;
  --ink:#1b1812;
  --ink-dim:#4a4438;        /* was #5c5646; darkened for contrast on ivory */
  --taupe:#7a6a56;
  --bronze:#a47b3f;
  --bronze-deep:#8a6530;    /* bronze on ivory for text needs this depth to pass 4.5:1 */
  --bronze-dim:#c9ab77;
  --charcoal:#211d17;
  --charcoal-2:#2b251c;
  --line:rgba(27,24,18,0.14);
  --line-on-dark:rgba(243,238,230,0.16);
  --serif:"Bodoni Moda", Georgia, "Times New Roman", serif;
  --sans:"Archivo", "Segoe UI", system-ui, sans-serif;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth; font-size:106.25%;} /* 17px base */
:target, section[id]{ scroll-margin-top:7rem; }
body{
  margin:0; background:var(--ivory); color:var(--ink);
  font-family:var(--sans); line-height:1.65;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%; height:auto; display:block;}
figure{margin:0;}   /* the UA default is `margin: 1em 40px`, which is never what a figure in a grid cell wants */
h1,h2,h3{ font-family:var(--serif); font-weight:500; text-wrap:balance; margin:0; color:var(--ink); line-height:1.12; }
h1{ font-size:clamp(2.2rem, 5vw, 3.4rem); font-style:italic; }
h2{ font-size:clamp(1.7rem, 3.4vw, 2.4rem); font-style:italic; }
h3{ font-size:1.3rem; }
p{ margin:0; }
a{ color:inherit; text-underline-offset:0.18em; }
strong{ font-weight:600; }
.wrap{ max-width:1200px; margin:0 auto; padding-inline:clamp(1.25rem, 4vw, 3rem); }
section{ padding-block:clamp(3rem, 8vw, 6.5rem); }
address{ font-style:normal; }

.skip{ position:absolute; left:-999px; top:0; background:var(--ink); color:var(--ivory); padding:0.75rem 1rem; z-index:100; }
.skip:focus{ left:1rem; top:1rem; }

/* ---------- ticker ---------- */
.ticker{ background:var(--ink); color:var(--ivory); overflow:hidden; white-space:nowrap; padding-block:0.55rem; }
/* Duration is tied to the CONTENT, not picked by feel. The animation moves one
   full copy of the list (translateX(-50%)), so the on-screen speed is
   copyWidth/duration. Ten brand names measure 2539px a copy against the old
   four-item strip's ~1294px, so keeping 36s would have doubled the speed to
   70 px/s and made the names unreadable. 70s holds the original ~36 px/s,
   which is a comfortable reading pace. Re-measure if the brand list changes. */
.ticker-track{ display:inline-flex; gap:2.5rem; animation:ticker 70s linear infinite; }
.ticker span{ font-size:0.85rem; letter-spacing:0.16em; text-transform:uppercase; display:inline-flex; align-items:center; gap:2.5rem; }
.ticker span::after{ content:"\2014"; color:var(--bronze-dim); margin-left:2.5rem; }
@keyframes ticker{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }
@media (prefers-reduced-motion: reduce){ .ticker-track{ animation:none; } .ticker{ overflow-x:auto; } }

/* ---------- header + nav ---------- */
.site-header{
  position:sticky; top:0; z-index:30;
  background:rgba(243,238,230,0.94);
  -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
  border-bottom:1px solid var(--line);
}
.topbar{ display:flex; align-items:center; justify-content:space-between; gap:1rem; padding-block:0.9rem 0.4rem; }
.wordmark{ font-family:var(--serif); font-size:1.5rem; letter-spacing:0.14em; text-transform:uppercase; text-decoration:none; display:inline-flex; align-items:center; min-height:44px; }
.topbar-right{ display:flex; align-items:center; gap:1.25rem; }
.nav-insta{ font-size:0.85rem; letter-spacing:0.08em; text-transform:uppercase; text-decoration:none; color:var(--ink-dim); display:inline-flex; align-items:center; min-height:44px; }
.nav-insta:hover{ color:var(--bronze-deep); }
.nav-phone{
  display:inline-flex; align-items:center; gap:0.4rem; min-height:44px; padding:0 1rem; white-space:nowrap;
  background:var(--ink); color:var(--ivory); text-decoration:none; font-weight:600; font-size:0.95rem; letter-spacing:0.02em;
}
.nav-phone:hover{ background:var(--charcoal-2); }
.mainnav ul{ list-style:none; margin:0; padding:0; display:flex; gap:0.25rem; overflow-x:auto; -webkit-overflow-scrolling:touch; scrollbar-width:none; }
.mainnav ul::-webkit-scrollbar{ display:none; }
.mainnav a{
  display:inline-flex; align-items:center; min-height:46px; padding:0 0.85rem; white-space:nowrap;
  text-decoration:none; color:var(--ink-dim); font-size:0.95rem; letter-spacing:0.06em; text-transform:uppercase;
  border-bottom:2px solid transparent;
}
.mainnav a:hover, .mainnav a:focus-visible{ color:var(--ink); border-color:var(--bronze); }
.mainnav a[aria-current="true"]{ color:var(--ink); border-color:var(--ink); }
@media (max-width:640px){
  .nav-insta{ display:none; }
  .nav-phone-label{ display:none; }
  .nav-phone{ font-size:0.9rem; padding:0 0.75rem; }
  .wordmark{ font-size:1.25rem; }
  .mainnav{ padding-inline:0.5rem; position:relative; }
  .mainnav a{ font-size:0.88rem; padding:0 0.7rem; }
  /* The nav is a horizontal scroll strip on a phone, and it simply clipped
     mid-word at "FOOTW" with nothing to say the other four sections were
     there. A fade at the right edge is the standard cue for "this scrolls".
     pointer-events:none so it can never swallow a tap on the last item.
     The header is translucent ivory, so the gradient matches it. */
  .mainnav::after{
    content:""; position:absolute; top:0; right:0; bottom:0; width:2.5rem;
    pointer-events:none;
    background:linear-gradient(to right, rgba(243,238,230,0), rgba(243,238,230,0.94));
  }
}

/* ---------- breadcrumbs ---------- */
.crumbs{ padding-top:1.25rem; }
.crumbs ol{ list-style:none; margin:0 auto; padding:0 clamp(1.25rem, 4vw, 3rem); max-width:1200px; display:flex; flex-wrap:wrap; gap:0.35rem 0.6rem; font-size:0.9rem; color:var(--ink-dim); }
.crumbs li + li::before{ content:"/"; margin-right:0.6rem; color:var(--bronze-dim); }
.crumbs a{ color:var(--ink-dim); }
.crumbs a:hover{ color:var(--ink); }

/* ---------- hero (home) ---------- */
.hero{ position:relative; min-height:min(88vh, 780px); display:flex; align-items:flex-end; overflow:hidden; color:var(--ivory); padding-block:0; }
.hero-media{ position:absolute; inset:0; z-index:0; }
.hero-media img{ width:100%; height:100%; object-fit:cover; animation:hero-kenburns 24s ease-out forwards; }
@keyframes hero-kenburns{ from{ transform:scale(1); } to{ transform:scale(1.08); } }
@media (prefers-reduced-motion: reduce){ .hero-media img{ animation:none; } }
.hero-scrim{ position:absolute; inset:0; background:linear-gradient(0deg, rgba(18,15,11,0.95) 0%, rgba(18,15,11,0.84) 32%, rgba(18,15,11,0.56) 56%, rgba(18,15,11,0.2) 80%, rgba(18,15,11,0.38) 100%); }
.hero-content{ position:relative; z-index:1; width:100%; padding-block:clamp(3rem, 10vw, 5.5rem); }
.hero-copy{ text-align:center; }
@media (min-width:900px){ .hero-copy{ text-align:left; } }
.eyebrow{ display:block; font-size:0.85rem; letter-spacing:0.22em; text-transform:uppercase; color:var(--bronze-dim); margin-bottom:1.2rem; }
.hero h1{ font-size:clamp(2.6rem, 6.2vw, 4.8rem); line-height:1.02; color:var(--ivory); text-shadow:0 2px 28px rgba(0,0,0,0.25); }
.hero p.sub{ margin-top:1.3rem; font-size:1.15rem; color:rgba(243,238,230,0.9); max-width:44ch; margin-inline:auto; }
@media (min-width:900px){ .hero p.sub{ margin-inline:0; } }
.cta-row{ margin-top:2.2rem; display:flex; gap:1rem; justify-content:center; flex-wrap:wrap; }
@media (min-width:900px){ .cta-row{ justify-content:flex-start; } }
.hero .btn-light{ color:var(--ivory); border-color:rgba(243,238,230,0.6); }
.hero .btn-light:hover{ background:rgba(243,238,230,0.14); border-color:var(--ivory); }
/* PHONE: the hero stops being an overlay and becomes a photo band with the
   words underneath on solid ground. Two reasons. (1) A 3:2 storefront cannot
   fill a tall phone screen without cover-cropping away most of its width, and
   what got cropped was the shop's own sign, which read "MARETT". (2) Type on a
   solid dark ground beats type over a photo for a customer base aged 40 to 80.
   Desktop keeps the full-bleed overlay. aspect-ratio matches the phone crop so
   nothing shifts while the image loads. */
@media (max-width:640px){
  .hero{ display:block; min-height:0; background:var(--charcoal); }
  .hero-media{ position:static; }
    /* Matches HERO_CROP in scripts/build-images.py. If that box changes, change
     this too, or the band resizes under the reader as the image arrives. */
  .hero-media img{ width:100%; height:auto; aspect-ratio:1390/940; animation:none; }
  .hero-scrim{ display:none; }
  .hero-content{ padding-block:1.6rem 2rem; }
  .hero-copy{ text-align:center; }
  .hero h1{ text-shadow:none; }
  .eyebrow{ margin-bottom:0.6rem; }
  .hero p.sub{ margin-top:0.85rem; margin-inline:auto; }
  .cta-row{ margin-top:1.4rem; }
  .cta-row .btn{ flex:1 1 100%; }
}
@media (max-width:420px){ .hero h1{ font-size:2.05rem; } }

/* ---------- intro strip (home, directly under the hero photo) ---------- */
/* Ivory rather than ink: the hero's scrim is already almost solid dark at its
   foot, and on a phone the hero copy sits on a charcoal band, so a dark strip
   here would merge into it and make the top of the page one long dark slab.
   This gives the photo somewhere to stop. */
.intro-strip{ background:var(--ivory); border-bottom:1px solid var(--line); text-align:center; padding-block:clamp(1.9rem, 5vw, 2.8rem); }
.intro-depts{ display:flex; flex-wrap:wrap; justify-content:center; align-items:center; gap:0 0.85rem; margin:0; font-size:0.85rem; letter-spacing:0.18em; text-transform:uppercase; }
.intro-depts a{ color:var(--bronze-deep); text-decoration:none; display:inline-flex; align-items:center; min-height:44px; border-bottom:1px solid transparent; }
.intro-depts a:hover, .intro-depts a:focus-visible{ color:var(--ink); border-color:var(--bronze); }
.intro-depts span{ color:var(--bronze-dim); }
.intro-line{ margin:0.35rem auto 0; max-width:36ch; font-family:var(--serif); font-style:italic; font-size:clamp(1.3rem, 3.1vw, 1.8rem); line-height:1.3; color:var(--ink); text-wrap:balance; }
.intro-since{ margin:0.85rem 0 0; font-size:0.95rem; color:var(--ink-dim); }
/* Under 560px the four departments wrap to two rows and flex leaves a middot
   dangling at the end of the first one. Two columns, no separators. */
@media (max-width:560px){
  .intro-depts{ display:grid; grid-template-columns:repeat(2, auto); justify-content:center; gap:0 1.8rem; }
  .intro-depts span{ display:none; }
}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; min-height:48px; padding:0.7rem 1.6rem;
  font-size:0.9rem; font-weight:600; letter-spacing:0.08em; text-transform:uppercase; text-decoration:none;
  transition:transform 0.2s ease, background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.btn-dark{ background:var(--ink); color:var(--ivory); border:1px solid var(--ink); }
.btn-dark:hover{ background:var(--charcoal-2); transform:translateY(-1px); }
.btn-light{ background:transparent; color:var(--ink); border:1px solid var(--ink); }
.btn-light:hover{ background:rgba(27,24,18,0.06); transform:translateY(-1px); }

.grid-head{ font-size:clamp(1.5rem, 3vw, 1.9rem); margin-bottom:clamp(1.2rem, 3vw, 1.8rem); }

/* ---------- reveal ---------- */
.js-ready .reveal{ opacity:0; transform:translateY(18px); transition:opacity 0.7s ease, transform 0.7s ease; }
.reveal.is-visible{ opacity:1; transform:none; }
@media (prefers-reduced-motion: reduce){ .reveal{ opacity:1; transform:none; transition:none; } }

/* ---------- section heads ---------- */
.section-head{ text-align:center; max-width:680px; margin:0 auto clamp(2rem,5vw,3rem); }
.section-head p{ margin-top:0.9rem; color:var(--ink-dim); font-size:1.08rem; }
.eyebrow-dark{ font-size:0.85rem; letter-spacing:0.2em; text-transform:uppercase; color:var(--bronze-deep); display:block; margin-bottom:0.9rem; font-weight:600; }

/* ---------- page hero (inner pages) ---------- */
.page-hero{ padding-block:clamp(2rem, 5vw, 3.5rem) clamp(1.5rem, 4vw, 2.5rem); }
.page-hero .lede{ margin-top:1.1rem; font-size:1.2rem; color:var(--ink-dim); max-width:62ch; }
.page-hero.center{ text-align:center; }
.page-hero.center .lede{ margin-inline:auto; }

/* ---------- prose ---------- */
.prose{ max-width:70ch; font-size:1.08rem; }
.prose p + p, .prose ul + p, .prose p + ul, .prose ol + p, .prose p + ol{ margin-top:1.1rem; }
.prose h2{ margin-top:2.6rem; margin-bottom:0.9rem; font-size:clamp(1.55rem, 2.8vw, 2rem); }
.prose h3{ margin-top:1.8rem; margin-bottom:0.6rem; font-style:italic; font-size:1.3rem; }
.prose ul, .prose ol{ padding-left:1.4rem; }
.prose li + li{ margin-top:0.45rem; }
.prose a{ color:var(--bronze-deep); }
.prose a:hover{ color:var(--ink); }
.prose .lead{ font-size:1.2rem; color:var(--ink-dim); }
.byline{ font-size:0.95rem; color:var(--ink-dim); border-top:1px solid var(--line); border-bottom:1px solid var(--line); padding-block:0.8rem; margin-block:1.5rem 2rem; }
.note{ background:var(--ivory-2); border-left:3px solid var(--bronze); padding:1rem 1.25rem; margin-block:1.5rem; font-size:1rem; }
.fact-list{ list-style:none; padding:0; margin:1.5rem 0; border-top:1px solid var(--line); }
.fact-list li{ display:grid; grid-template-columns:minmax(120px, 34%) 1fr; gap:1rem; padding-block:0.8rem; border-bottom:1px solid var(--line); margin:0; }
.fact-list li span:first-child{ font-size:0.85rem; letter-spacing:0.12em; text-transform:uppercase; color:var(--bronze-deep); font-weight:600; padding-top:0.2rem; }

/* two column: prose + aside */
.two-col{ display:grid; grid-template-columns:1fr; gap:clamp(2rem, 5vw, 4rem); align-items:start; }
@media (min-width:920px){ .two-col{ grid-template-columns:minmax(0, 1.5fr) minmax(280px, 0.8fr); } }
.two-col > *{ min-width:0; }
.aside-card{ border:1px solid var(--line); padding:1.5rem; background:#fff9f0; }
.aside-card h2, .aside-card h3{ font-size:1.25rem; font-style:italic; margin-bottom:0.8rem; }
.aside-card ul{ list-style:none; padding:0; margin:0; }
.aside-card li + li{ margin-top:0.5rem; }
.aside-card a{ color:var(--bronze-deep); }
.aside-card + .aside-card{ margin-top:1.5rem; }
/* margin declared in full, not just margin-bottom: the browser's own
   figure rule is `margin: 1em 40px`, and leaving the sides unset inset this
   photo 40px from the column on every screen. It measured 268px wide inside a
   348px aside on a phone, visibly out of line with the text above it. */
.aside-photo{ border:1px solid var(--line); margin:0 0 1.5rem; }
.aside-photo figcaption{ font-size:0.9rem; color:var(--ink-dim); padding:0.6rem 0.8rem; font-style:italic; font-family:var(--serif); }

/* ---------- old photographs (Our Story history) ---------- */
/* Narrower than the 1200px wrap so a two-column album lands at about 460 css
   px a picture, which is what the 900w WebP variants were generated for. */
.history{ max-width:940px; }
.photo-card{ margin:0; border:1px solid var(--line); background:#fff9f0; }
.photo-card figcaption{ font-size:0.95rem; color:var(--ink-dim); padding:0.7rem 0.9rem; font-style:italic; font-family:var(--serif); }
/* The prints are a mix of portrait and landscape. CSS multi-column flows them
   like a real photo album with no ragged rows, needs no JavaScript, and folds
   to one column on a phone. Every img carries width and height so the column
   balance is right before the lazy images have loaded. */
.album{ columns:2; column-gap:1.25rem; margin-top:2.5rem; }
.album .photo-card{ break-inside:avoid; margin-bottom:1.25rem; }
@media (max-width:720px){ .album{ columns:1; } }
/* align-items:start, not the grid default stretch: the two shopfronts are
   different aspect ratios, and stretching the shorter card left its caption
   floating in dead space instead of sitting under its picture. */
.then-now{ display:grid; grid-template-columns:1fr; gap:1.25rem; margin-top:2rem; align-items:start; }
.then-now > *{ min-width:0; }
@media (min-width:720px){ .then-now{ grid-template-columns:1fr 1fr; } }

/* ---------- cards ---------- */
/* ONE column on a phone. Two columns left each card about 165px on a 390px
   screen, which broke a heading like "Dressing as mother of the bride or
   groom" into a six-line tower and dropped the body copy to three words a
   line. This shop sells to women 40 to 80 and readability beats density; the
   page gets longer and that is the right trade. Two columns return at 560px.
   The exception is `.tiles`, the homepage category tiles, which are pictures
   with two words under them and read fine side by side. Keeping them two-up
   also stops the two monogram placeholders becoming full-width black slabs. */
.card-grid{ display:grid; grid-template-columns:1fr; gap:1rem; }
/* Grid and flex children default to min-width:auto and refuse to shrink below
   their content, which burst the viewport by 17px at 360px. Every grid on the
   site gets the same treatment so the next one added cannot repeat it. */
.card-grid > *, .season-grid > *, .brand-row > *, .footer-grid > *, .story > *, .visit-strip-grid > *{ min-width:0; }
.card-grid.four{ grid-template-columns:1fr; }
.card-grid.tiles{ grid-template-columns:repeat(2, 1fr); }
@media (min-width:560px){
  .card-grid{ grid-template-columns:repeat(2, 1fr); }
  .card-grid.four{ grid-template-columns:repeat(2, 1fr); }
}
@media (min-width:720px){
  .card-grid{ grid-template-columns:repeat(3, 1fr); gap:1.5rem; }
  .card-grid.tiles{ grid-template-columns:repeat(3, 1fr); gap:1.5rem; }
}
@media (min-width:860px){ .card-grid.four{ grid-template-columns:repeat(4, 1fr); } }
.card{ text-decoration:none; color:var(--ink); display:block; border:1px solid var(--line); background:#fff9f0; padding:1.25rem; transition:transform 0.3s ease, border-color 0.3s ease; }
.card:hover{ transform:translateY(-2px); border-color:var(--bronze); }
.card .mark{ font-size:0.85rem; letter-spacing:0.14em; text-transform:uppercase; color:var(--bronze-deep); font-weight:600; }
.card h3{ font-style:italic; font-size:1.35rem; margin-top:0.35rem; }
.card p{ margin-top:0.6rem; color:var(--ink-dim); font-size:0.98rem; }
.card .arrow{ display:inline-block; margin-top:0.8rem; color:var(--bronze-deep); font-weight:600; }
.look-card{ text-decoration:none; color:var(--ink); display:block; }
.look-panel{ aspect-ratio:3/4; position:relative; overflow:hidden; transition:transform 0.5s ease; }
.look-card:hover .look-panel{ transform:scale(1.02); }
.look-panel img{ width:100%; height:100%; object-fit:cover; object-position:top center; }
.look-panel.monogram{ background:var(--charcoal); display:flex; align-items:center; justify-content:center; }
.look-panel.monogram::before{ content:"A"; font-family:var(--serif); font-style:italic; font-size:clamp(3rem, 9vw, 5rem); color:var(--bronze); opacity:0.55; }
.look-panel.monogram::after{ content:""; position:absolute; inset:0; border:1px solid rgba(196,171,119,0.18); margin:0.9rem; }
.look-meta{ display:flex; justify-content:space-between; align-items:baseline; padding-top:0.9rem; gap:0.5rem; }
.look-meta .mark{ font-size:0.85rem; letter-spacing:0.12em; text-transform:uppercase; color:var(--taupe); }
.look-meta h3{ font-size:1.3rem; font-style:italic; }
.look-meta .arrow{ font-size:1.2rem; color:var(--bronze-deep); }
/* At 165px the wide-letterspaced caps label wraps to four lines and buries the
   category name it is meant to introduce, with the arrow stranded at the top.
   On a phone put the name first and let the label sit under it, tightened. */
@media (max-width:640px){
  .look-meta{ align-items:flex-start; }
  .look-meta > div{ display:flex; flex-direction:column-reverse; }
  .look-meta .mark{ letter-spacing:0.05em; line-height:1.35; margin-top:0.25rem; }
}

/* ---------- home: story, season, brands, insta, statement ---------- */
.story{ display:grid; grid-template-columns:1fr; gap:clamp(2rem,6vw,3rem); }
@media (min-width:860px){ .story{ grid-template-columns:0.9fr 1.1fr; align-items:center; } }
.story p{ max-width:56ch; color:var(--ink-dim); font-size:1.08rem; }
.story p + p{ margin-top:1rem; }
.story .sign{ margin-top:1.3rem; font-family:var(--serif); font-style:italic; color:var(--ink); font-size:1.2rem; }
.story-photo{ border:1px solid var(--line); margin:0; }  /* see .aside-photo: figures carry 40px UA side margins */
.season-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:1rem; }
@media (min-width:640px){ .season-grid{ grid-template-columns:repeat(4,1fr); } }
.season-photo{ aspect-ratio:3/4; overflow:hidden; }
.season-photo img{ width:100%; height:100%; object-fit:cover; transition:transform 0.5s ease; }
.season-item:hover .season-photo img{ transform:scale(1.03); }
.season-caption{ margin-top:0.6rem; font-size:0.98rem; font-style:italic; font-family:var(--serif); color:var(--ink-dim); text-align:center; }
.brands{ background:var(--ivory-2); }
.brand-row{ display:grid; grid-template-columns:repeat(2,1fr); gap:0.75rem 1.5rem; text-align:center; }
@media (min-width:720px){ .brand-row{ grid-template-columns:repeat(5,1fr); } }
.brand-row a{ font-family:var(--serif); font-style:italic; font-weight:500; font-size:clamp(1.3rem, 2.6vw, 1.7rem); color:var(--ink); padding-block:1rem; border-top:1px solid var(--line); text-decoration:none; display:block; }
.brand-row a:hover{ color:var(--bronze-deep); }
.insta-grid{ display:grid; grid-template-columns:1fr; gap:2rem; max-width:700px; margin:0 auto; }
@media (min-width:700px){ .insta-grid{ grid-template-columns:1fr 1fr; } }
.insta-embed{ position:relative; aspect-ratio:9/14; min-height:480px; border:1px solid var(--line); background:var(--ivory-2); overflow:hidden; }
.insta-embed iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; }
/* Before it is asked for, a reel panel is a button and a line of text rather
   than 4.5 MB of Instagram, so it does not need the full reel height. */
.insta-embed--idle{ display:flex; flex-direction:column; align-items:center; justify-content:center; gap:0.9rem; padding:1.75rem; text-align:center; aspect-ratio:auto; min-height:220px; }
.insta-follow{ text-align:center; margin-top:2.5rem; }
.statement{ background:var(--charcoal); color:var(--ivory); text-align:center; }
.statement blockquote{ margin:0 auto; max-width:820px; font-family:var(--serif); font-style:italic; font-size:clamp(1.5rem,3.4vw,2.3rem); line-height:1.35; }
.statement cite{ display:block; margin-top:1.4rem; font-style:normal; font-size:0.9rem; letter-spacing:0.16em; text-transform:uppercase; color:var(--bronze-dim); }
.interior-photo{ max-width:960px; margin:0 auto; border:1px solid var(--line); }

/* ---------- hours + visit ---------- */
/* Hours are a real <table> as of 2026-09-29 (they were two spans in a flex
   row). Same picture, but the day is now a <th scope="row"> so a screen reader
   announces the relationship and the block can be parsed. Everything below
   reproduces the old flex behaviour on top of table markup. */
.hours{ font-size:1rem; }
.sr-only{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; }
.hours-table{ width:100%; border-collapse:collapse; }
.hours-table th, .hours-table td{ padding-block:0.45rem; border-bottom:1px solid var(--line); }
.hours-table th{ text-align:left; font-weight:400; font-family:inherit; }
.hours-table td{ text-align:right; font-weight:600; white-space:nowrap; }
/* The footer column is about 340px, so "Monday to Saturday" beside "10:00 am
   to 6:00 pm" does not fit and the label was breaking over three lines. Keep
   the label whole and let the time drop to its own line. A flex <tr> is what
   reproduces that wrap; the border moves to the row so it spans both lines. */
.site-footer .hours-table tr{ display:flex; flex-wrap:wrap; gap:0 1rem; border-bottom:1px solid var(--line-on-dark); }
.site-footer .hours-table th, .site-footer .hours-table td{ border-bottom:0; }
.site-footer .hours-table th{ white-space:nowrap; }
.site-footer .hours-table td{ margin-left:auto; }
.visit-strip{ background:var(--ivory-2); }
.visit-strip-grid{ display:grid; grid-template-columns:1fr; gap:2.5rem; align-items:center; }
@media (min-width:860px){ .visit-strip-grid{ grid-template-columns:1.2fr 0.8fr; } }
.visit-strip p{ margin-top:1rem; color:var(--ink-dim); font-size:1.08rem; max-width:52ch; }
.visit-strip .btn{ margin-top:0.4rem; }
.visit-grid{ display:grid; grid-template-columns:1fr; gap:clamp(2rem,6vw,4rem); }
.visit-grid > *{ min-width:0; }
@media (min-width:860px){ .visit-grid{ grid-template-columns:1fr 1fr; } }
.detail-row{ display:flex; gap:1rem; padding-block:1rem; border-top:1px solid var(--line); }
.detail-row:last-child{ border-bottom:1px solid var(--line); }
.detail-label{ flex:0 0 120px; font-size:0.85rem; letter-spacing:0.12em; text-transform:uppercase; color:var(--bronze-deep); font-weight:600; padding-top:0.25rem; }
.detail-value{ min-width:0; overflow-wrap:break-word; font-size:1.08rem; }
.detail-value a[href^="tel:"]{ display:inline-flex; align-items:center; min-height:44px; font-size:1.25rem; font-weight:600; }
.detail-value .note-inline{ display:block; margin-top:0.2rem; font-size:0.95rem; color:var(--ink-dim); font-style:italic; }
.detail-value a:not([href^="tel:"]){ display:inline-flex; align-items:center; min-height:44px; }
/* On a phone the 120px label column left the hours block ~200px wide, and the
   nowrap hours value pushed the page 37px past the viewport. Stack the row. */
@media (max-width:560px){
  .detail-row{ flex-direction:column; gap:0.25rem; }
  .detail-label{ flex:none; padding-top:0; }
  .hours-table td{ white-space:normal; }
}
.map-wrap{ display:flex; flex-direction:column; gap:1rem; min-width:0; }
.map-panel{ position:relative; width:100%; aspect-ratio:1; max-height:420px; background:var(--ivory-2); border:1px solid var(--line); }
@media (min-width:860px){ .map-panel{ aspect-ratio:4/3; } }
.map-panel iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; }
.map-panel--idle{ display:flex; flex-direction:column; align-items:center; justify-content:center; gap:0.75rem; padding:1.5rem; text-align:center; background:var(--ivory-2); }
.map-show{ font-family:var(--sans); font-size:0.95rem; font-weight:600; letter-spacing:0.06em; text-transform:uppercase; color:var(--ivory); background:var(--ink); border:1px solid var(--ink); min-height:48px; padding:0.7rem 1.6rem; cursor:pointer; }
.map-show:hover{ background:var(--charcoal-2); }
.map-hint{ font-size:0.95rem; color:var(--ink-dim); max-width:34ch; }
.map-cta{ align-self:flex-start; }

/* ---------- callout ---------- */
.callout{ background:var(--charcoal); color:var(--ivory); padding:clamp(1.5rem, 4vw, 2.5rem); margin-block:clamp(2rem, 5vw, 3rem); }
.callout-h{ color:var(--ivory); font-size:clamp(1.5rem, 3vw, 2rem); margin-bottom:0.9rem; }
.callout p{ font-size:1.08rem; max-width:64ch; }
.callout p + p{ margin-top:0.8rem; }
.callout a{ color:var(--ivory); }
.callout-sub{ color:rgba(243,238,230,0.82); font-size:1rem; }
.callout-links{ margin-top:1.4rem; display:flex; gap:0.8rem; flex-wrap:wrap; }
.callout .btn-dark{ background:var(--ivory); color:var(--ink); border-color:var(--ivory); }
.callout .btn-dark:hover{ background:#fff; }
.callout .btn-light{ color:var(--ivory); border-color:rgba(243,238,230,0.6); }
.callout .btn-light:hover{ background:rgba(243,238,230,0.12); }

/* ---------- footer ---------- */
.site-footer{ background:var(--charcoal); color:var(--ivory); }
.site-footer a{ color:var(--ivory); }
.site-footer a:hover{ color:var(--bronze-dim); }
.footer-grid{ display:grid; grid-template-columns:1fr; gap:2.2rem; padding-block:clamp(3rem,6vw,4.5rem); border-bottom:1px solid var(--line-on-dark); }
@media (min-width:640px){ .footer-grid{ grid-template-columns:1fr 1fr; } }
@media (min-width:1000px){ .footer-grid{ grid-template-columns:1.3fr 1fr 1fr 1fr; } }
.fmark{ font-family:var(--serif); font-style:italic; font-size:1.7rem; margin-bottom:0.6rem; }
.footer-col p{ color:rgba(243,238,230,0.82); font-size:1rem; max-width:40ch; }
.footer-col p + p, .footer-col address + p{ margin-top:0.6rem; }
.footer-h{ font-family:var(--sans); font-style:normal; font-size:0.85rem; letter-spacing:0.18em; text-transform:uppercase; color:var(--bronze-dim); margin-bottom:0.9rem; }
.footer-links{ list-style:none; margin:0; padding:0; }
.footer-links li + li{ margin-top:0.45rem; }
.footer-links a, .footer-insta{ display:inline-flex; align-items:center; min-height:44px; }
.foot-bottom{ display:flex; flex-wrap:wrap; gap:0.6rem 1.5rem; justify-content:space-between; padding-block:1.5rem; font-size:0.9rem; color:rgba(243,238,230,0.72); }
.foot-bottom a{ color:rgba(243,238,230,0.9); display:inline-flex; align-items:center; min-height:44px; }

/* ---------- misc ---------- */
.guide-list{ list-style:none; padding:0; margin:0; border-top:1px solid var(--line); }
.guide-list li{ border-bottom:1px solid var(--line); }
.guide-list a{ display:block; padding:1.2rem 0; text-decoration:none; }
.guide-list a:hover h3{ color:var(--bronze-deep); }
.guide-list h3{ font-style:italic; font-size:1.4rem; }
.guide-list p{ margin-top:0.4rem; color:var(--ink-dim); }
.related{ margin-top:clamp(2rem, 5vw, 3rem); padding-top:2rem; border-top:1px solid var(--line); }
.related h2{ font-size:1.5rem; margin-bottom:1rem; }
.related ul{ list-style:none; padding:0; margin:0; display:grid; gap:0.5rem; }
.related a{ color:var(--bronze-deep); }

/* Standalone links in lists, breadcrumbs and the footer are navigation, not
   prose, so they get a real 44px touch target. Links inline in a sentence are
   deliberately NOT touched: WCAG 2.2 SC 2.5.8 exempts them, and forcing 44px on
   them would wreck the line spacing of every paragraph on the site. */
.crumbs a,
.aside-card li a,
.aside-card p a,
.footer-links a,
.footer-col p a,
.fact-list a,
.related li a,
.foot-bottom a,
.brand-row a,
.detail-value a{ display:inline-flex; align-items:center; min-height:44px; }

a:focus-visible, button:focus-visible{ outline:3px solid var(--bronze); outline-offset:3px; }
::selection{ background:var(--bronze); color:var(--ink); }