/* ==========================================================================
   Amami Italia — home page (2026 comp, "Amami Website.svg")
   Loaded by / only, so the rest of the site is untouched: the comp's ground
   is cream and its accent is the red the artwork is built around, neither of
   which belongs in amami.css, where --cocoa is the brown the client asked
   for in September.

   The comp is a 1366-wide artboard and the page is that artboard scaled:
   every length below is the comp's own number over 1366, written as vw, so
   the proportions hold at any width. max() only adds a floor, for phones,
   where the artboard has nothing to say; the narrow block at the end is the
   one place this file departs from the drawing.

   Type positions are set from measured baselines, not guessed leading —
   Cormorant Garamond's advance widths match the comp's to a tenth of a
   pixel, so both full-bleed lines are sized to land exactly edge to edge.
   ========================================================================== */

body.is-home{
  --hm-cream:#eee9da;      /* the artboard ground */
  --hm-red:#812b28;        /* the band, and the type that sits on cream */
  --hm-panel:#161616;      /* the two split panels */
  --hm-silver:#cbd6e3;     /* panel titles and the line icons */
  --hm-scrim:#080809;      /* both photographic gradients */
  background:var(--hm-cream);
  color:var(--hm-panel);
}
/* The two full-bleed lines are set to exactly 100vw; clip keeps a rounding
   error from becoming a horizontal scrollbar. */
body.is-home main{overflow-x:clip}
/* <picture> wraps every photograph for its WebP source; contents keeps the <img> as the layout child */
body.is-home picture{display:contents}
body.is-home picture > source{display:none} /* else it becomes a grid item; see amami-pages.css */
/* The header used to stay hidden over the hero until the visitor moved or
   scrolled; it now shows from the start, so the site menu is findable on
   arrival (and on phones, where there is no pointer move to reveal it). */
/* amami.css gives every <section> block padding. Each section below sets
   its own padding shorthand, which clears it without editing that file. */

/* The comp has no button of its own: a 1px rule, a wide-tracked label, and
   nothing else. One rule, two colourways — white on photography, red on
   cream. text-indent puts back the space .2em tracking steals from the
   right, so the label sits optically centred. */
.hm-btn{
  display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;
  min-width:max(112px,12.027vw);
  height:max(36px,3.226vw);
  padding-inline:max(9px,.886vw);
  border:1px solid var(--hm-cream);color:var(--hm-cream);background:transparent;
  font-family:var(--sans);font-weight:300;
  font-size:max(9.5px,1.16vw);
  letter-spacing:.2em;text-indent:.2em;
  text-transform:uppercase;text-decoration:none;white-space:nowrap;
  transition:background .25s,color .25s,border-color .25s;
}
.hm-btn:hover,.hm-btn:focus-visible{background:var(--hm-cream);color:var(--hm-panel)}
.hm-btn--red{border-color:var(--hm-red);color:var(--hm-red)}
/* the one filled button: the brand book's red, cream label, inverts on hover */
.hm-btn--fill{background:var(--hm-red);border-color:var(--hm-red);color:var(--hm-cream)}
.hm-btn--fill:hover,.hm-btn--fill:focus-visible{background:var(--hm-cream);border-color:var(--hm-cream);color:var(--hm-red)}
.hm-btn--red:hover,.hm-btn--red:focus-visible{background:var(--hm-red);color:var(--hm-cream)}

/* --- 1. hero -------------------------------------------------------------
   762.2 of 1366 tall. The scrim is the comp's gradient exactly: nothing at
   all until 40.6% down, then to solid by the bottom edge, which is what lets
   cream type sit over a photograph of a white tablecloth. */
.hm-hero{
  position:relative;isolation:isolate;overflow:hidden;padding:0;
  /* the comp's 762.2/1366, but never taller than the screen, so the hero
     word on the bottom edge is always above the fold on a wide monitor */
  /* was the comp's 55.797vw; the client's hero photographs (2026-09-24) are
     composed collages at 2880x1220, so the hero takes their frame, 42.361vw,
     and nothing is cropped off the sides */
  height:42.361vw;min-height:420px;
  /* and it starts under the fixed 76px header, which would otherwise sit on
     the top of every photograph */
  margin-top:76px;
  background:var(--hm-scrim);
}
.hm-hero__img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
/* Four photographs, the client's numbered set: 1-4 on desktop, 5-8 on a phone
   (swapped by <source media> in the markup). The inline script drives the crossfade; without it
   these keyframes run: three seconds a photograph (client, 2026-09-24), .8s
   dissolves, 12s a turn. */
.hm-hero__img{opacity:0;animation:hm-hero-fade 12s linear infinite}
.hm-hero__img--1{opacity:1;animation-delay:-.8s}
.hm-hero__img--2{animation-delay:2.2s}
.hm-hero__img--3{animation-delay:5.2s}
.hm-hero__img--4{animation-delay:8.2s}
@keyframes hm-hero-fade{
  0%,100%{opacity:0}
  6.667%,25%{opacity:1}
  31.667%{opacity:0}
}

.hm-hero__scrim{
  position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(to bottom,rgba(8,9,9,0) 40.6%,var(--hm-scrim) 100%);
}
/* Copy left, mark on the centre line, action right — a three-column grid
   rather than space-between, so the mark stays centred however long the two
   outer items get in Italian. 24.21% is the comp's button centre. */
.hm-hero__row{
  /* 24.21% is the comp's button centre; the floor keeps the row clear of
     the hero word when the height is capped to a short screen */
  position:absolute;left:0;right:0;bottom:max(24.21%,11vw);z-index:2;
  display:grid;grid-template-columns:1fr auto 1fr;align-items:center;
  gap:max(10px,2vw);
  padding-inline:max(14px,6.142vw);
}
.hm-hero__claim{
  margin:0;max-width:max(18ch,22vw);color:var(--hm-cream);
  font-family:var(--sans);font-weight:400;
  font-size:max(8.5px,1.14vw);
  letter-spacing:.2em;line-height:2.057;text-transform:uppercase;
}
.hm-hero__mid{display:block}
/* Slide controls in the row's empty centre: four short cream rules, the
   current one solid. With script, the crossfade is driven from amami's
   inline hero script (.hm-hero--js) so a click can jump to a photograph;
   without it the CSS keyframes below still run and the dots stay hidden. */
.hm-dots{display:none}
.hm-hero--js .hm-dots{display:flex;justify-content:center;align-items:center;gap:max(10px,.9vw)}
.hm-dot{appearance:none;-webkit-appearance:none;background:none;border:0;margin:0;cursor:pointer;
  width:max(28px,2.4vw);padding:max(12px,.9vw) 0}
.hm-dot::before{content:"";display:block;height:2px;background:var(--hm-cream);opacity:.45;transition:opacity .3s ease-out}
.hm-dot:hover::before{opacity:.8}
.hm-dot[aria-pressed="true"]::before{opacity:1}
.hm-dot:focus-visible{outline:1px solid var(--hm-cream);outline-offset:3px}
.hm-hero--js .hm-hero__img{animation:none;opacity:0;transition:opacity .8s linear}
.hm-hero--js .hm-hero__img.is-on{opacity:1}
/* bottom:24.21% puts the row's bottom edge on the comp's button centre; the
   comp centres the row there, so shift it down by half its own height. */
@media (min-width:761px){.hm-hero__row{transform:translateY(50%)}}
.hm-hero__act{justify-self:end}

/* The hero word is one sentence in two halves that trade places: "AMAMI
   MEANS LOVE ME." holds, wipes out behind a mask, and "SO DOES THE FOOD."
   wipes in to take its place. Each half is the full width of the artboard —
   its size is 100vw over its own measured width-to-size ratio, so a 20-char
   line and a 17-char line both land exactly edge to edge, and the Italian
   halves get their own sizes the same way. Baseline on the hero's bottom
   edge as before: line-height 1 puts it .818em down, the comp wants 1.013em,
   hence the .195em nudge. All caps, so the crop below costs nothing. */
.hm-hero__word{position:absolute;left:0;right:0;bottom:0;z-index:2;margin:0;height:0}
.hm-hero__line{
  position:absolute;left:0;right:0;bottom:0;display:block;
  font-family:var(--serif);font-weight:300;color:var(--hm-cream);
  line-height:1;letter-spacing:-.05em;
  text-align:center;white-space:nowrap;text-transform:uppercase;
  transform:translateY(.195em);
  clip-path:inset(0 0 0 0);
  animation:hm-word-swap 9s linear infinite;
}
.hm-hero__line--a{font-size:9.625vw}
.hm-hero__line--b{font-size:11.927vw;animation-delay:-4.5s}
[data-lang="it"] .hm-hero__line--a{font-size:8.736vw}
[data-lang="it"] .hm-hero__line--b{font-size:13.149vw}
/* hold 3.6s -> wipe out left-to-right over .7s -> stay hidden -> wipe back
   in left-to-right. Line B runs the same track half a cycle behind, so one
   is always arriving as the other leaves. */
@keyframes hm-word-swap{
  0%,40%     {clip-path:inset(0 0 0 0);animation-timing-function:cubic-bezier(.22,1,.36,1)}
  47.8%,92%  {clip-path:inset(0 0 0 100%)}
  92.01%     {clip-path:inset(0 100% 0 0);animation-timing-function:cubic-bezier(.22,1,.36,1)}
  100%       {clip-path:inset(0 0 0 0)}
}

/* --- 1b. proof bar -------------------------------------------------------
   One tracked line directly under the hero, on the same cream, no box. The
   Room's top padding is pulled in behind it so its title still lands where
   the comp put it. */
.hm-proof{
  background:var(--hm-cream);text-align:center;
  padding:max(14px,1.9vw) max(14px,4vw) 0;
}
.hm-proof__line{
  margin:0;font-family:var(--sans);font-weight:400;color:var(--hm-red);
  font-size:max(9px,.95vw);letter-spacing:.2em;text-transform:uppercase;line-height:1.9;
}
.hm-proof__sep{margin:0 .9em;opacity:.55}
.hm-proof + .hm-room{padding-top:max(22px,3.31vw)} /* was 4.2vw; title baseline sat 12 comp px low */

/* --- 2. the room ---------------------------------------------------------
   Cream, centred, and the one drawing on the page. The four gaps here are
   the comp's: 96.04 to the title's cap, 3.83 and 19.27 between the three
   things, 41.68 to the action and 95.04 out. */
.hm-room{
  background:var(--hm-cream);text-align:center;
  padding:max(30px,7.031vw) max(14px,4vw) max(34px,6.958vw);
}
.hm-room__h{
  margin:0;font-family:var(--serif);font-weight:300;color:var(--hm-red);
  font-size:max(30px,5.748vw);line-height:1;
  letter-spacing:-.05em;text-transform:uppercase;
}
.hm-room__sub{
  margin:max(3px,.28vw) auto 0;max-width:max(30ch,50vw);
  font-family:var(--accent);font-style:italic;
  color:var(--hm-panel);font-size:max(14px,1.5vw);line-height:1.45;
}
.hm-room__sub span{display:block}
/* Desktop: one line, as the comp has it (two stacked lines pushed the
   drawing and the button 48 comp px low). */
@media (min-width:761px){
  .hm-room__sub{max-width:none;font-size:max(14px,1.133vw);line-height:1.3;margin-top:.41vw}
  .hm-room__sub span{display:inline}
  .hm-room__sub span + span::before{content:" "}
}
/* The drawing is a one-second film on a loop: the team walk on the spot,
   exactly where the illustration always had them, nobody travelling and
   no fade at either end. One second is the stride period — the cut lands
   where the cycle closes on itself, so the repeat reads as just another
   frame. The poster is the opening frame, so before it plays — and for
   anyone who has asked for less motion — the section looks exactly like
   the original artwork. */
.hm-room__illo{
  position:relative;display:block;width:70.278vw;
  margin:max(16px,1.411vw) auto 0;
}
/* The film is drawn on white paper; multiply lets the cream ground through it,
   so there is no white box. The wash still is placed in the film's own
   1440x810 frame: 100,70 and 1270 wide. */
.hm-room__film{display:block;width:100%;height:auto;aspect-ratio:16/9;mix-blend-mode:multiply}
.hm-room__wash{position:absolute;left:6.944%;top:8.642%;width:88.194%;height:auto;pointer-events:none}
.hm-room__film img{display:block;width:100%;height:auto}
.hm-room__cta{margin-top:max(22px,3.051vw)}

/* --- 3. the red band + after dark ---------------------------------------
   The band is 729.42 of 1366 tall and is painted by ::before, because the
   After Dark photograph hangs 185 past its bottom edge onto the cream. The
   Tuscan drawing is baked into that one JPEG at the blend and opacity the
   comp gives it (soft-light, 30%), which is cheaper and steadier than
   shipping two transparent PNGs for the browser to composite. */
/* --hm-ad-gap is the space between the line and the photograph. It was a
   straight 14.864vw, which grew without limit (285px on a 1920 screen) and
   left a dead block of red; clamped, it reads as one group at any width.
   The red ends where the photograph still hangs 9.375vw past it, as before:
   line block 8.161vw + gap + photograph 43.285vw - 9.375vw. */
/* --hm-ad-w is the photograph's width: the comp's 32.57vw, but never so big
   that the line, the photograph and its button stop fitting one screen
   (header 76px + line block 8.161vw + gap + photo + 24px breathing room;
   the photo is 1532/2036 wide-to-tall). The words, their size and the red
   all follow it, so the composition keeps its proportions on short screens. */
.hm-band{--hm-ad-gap:clamp(40px,3.5vw,72px);
  --hm-ad-w:max(min(32.57vw,260px),min(32.57vw,calc((100svh - 76px - 8.161vw - var(--hm-ad-gap) - 24px) * .75246)));
  position:relative;isolation:isolate;padding:0 max(14px,4vw)}
.hm-band::before{
  content:"";position:absolute;left:0;right:0;top:0;z-index:-1;
  /* line block + gap + the photograph less the 21.66% of it that hangs past
     the red (1.0411 = 2036/1532 x .7834); equals 42.071vw + gap at full size */
  height:calc(8.161vw + var(--hm-ad-gap) + 1.0411 * var(--hm-ad-w)); /* was 53.398vw */
  background:var(--hm-red)
    url(/wp-content/uploads/2026/09/home-band-tuscany-812b28.jpg) bottom center / 100% auto no-repeat;
  /* same picture as WebP (39 KB instead of 154 KB) where supported */
  background-image:image-set(url(/wp-content/uploads/2026/09/home-band-tuscany-812b28.webp) type("image/webp"),
    url(/wp-content/uploads/2026/09/home-band-tuscany-812b28.jpg) type("image/jpeg"));
}
/* The line is sized to the full artboard width, so it spans the band's side
   padding too; the negative margins give it that width to centre in. */
.hm-band__h{
  margin:0 calc(-1 * max(14px,4vw));padding-top:max(18px,2.561vw);
  font-family:var(--serif);font-weight:300;color:var(--hm-cream);
  font-size:5.6vw;line-height:1;letter-spacing:-.05em; /* was 6.232vw, which filled 100vw edge to edge and ran off the right; now ~90vw, centred with margin both sides */
  text-align:center;white-space:nowrap;text-transform:uppercase;
}
/* desktop only: unscoped, it outranked the mobile rule and shrank the IT line to ~21px on phones */
@media (min-width:761px){[data-lang="it"] .hm-band__h{font-size:5.76vw}} /* was 6.409vw */
.hm-band__cta{display:flex;justify-content:center;margin:max(20px,3.551vw) 0 0}
.hm-band__cta .hm-btn{
  min-width:max(180px,24.599vw);
  height:max(38px,3.704vw);
  font-size:max(10px,1.332vw);
}

/* Explore / Menu: the photograph is 32.57% of the artboard and the two words
   straddle it, printed across its top corners. The band's own button is gone,
   so the photograph's top margin absorbs the 99.1 comp px that button and its
   gap used to take, and the picture lands where the comp put it. It is five
   shots on a crossfade — each holds 3.8s and dissolves over 1.2s, 25s a turn,
   the first already at full opacity on load. The shots are pasta being made
   by hand (Unsplash, free licence, 2026-09-23), in colour: the grayscale
   filter came off with them, since the flour and yolk warmth is the point.
   Rule from the client: stock shots are hands-only close-ups. No faces, so
   no stranger passes for Amami's own staff. */
.hm-ad{position:relative;margin-top:var(--hm-ad-gap)} /* was 14.864vw, then 11.35vw */
.hm-ad__fig{position:relative;width:var(--hm-ad-w,32.57vw);margin:0 auto;aspect-ratio:1532/2036;overflow:hidden}
.hm-ad__img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  opacity:0;animation:hm-ad-fade 25s linear infinite}
.hm-ad__img--1{opacity:1;animation-delay:-1.2s}
.hm-ad__img--2{animation-delay:3.8s}
.hm-ad__img--3{animation-delay:8.8s}
.hm-ad__img--4{animation-delay:13.8s}
.hm-ad__img--5{animation-delay:18.8s}
@keyframes hm-ad-fade{
  0%,100%{opacity:0}
  4.8%,20%{opacity:1}
  24.8%{opacity:0}
}
.hm-ad__cta{position:absolute;left:50%;top:81.71%;transform:translateX(-50%)}
.hm-ad__word{
  position:absolute;top:13.7%;margin:0;z-index:2;
  font-family:var(--sans);font-weight:300;color:var(--hm-cream);
  font-size:max(18px,calc(.11356 * var(--hm-ad-w,32.57vw)));line-height:1; /* 50.52/444.9 of the photo = 3.698vw at full size */
  letter-spacing:.2em;text-transform:uppercase;white-space:nowrap;
}
/* Desktop: the words moved off the photograph (client, 2026-09-23). They sit
   in the cream strip beside the part of the photo that hangs below the red
   (the photo's lower 21.66%), vertically centred on it at 89.17%, each held a
   clear gap off the photo's edge. Red, because cream-on-cream would vanish.
   Positions come from the photo width, so they follow it as it scales.
   EXPLORE drops its trailing .2em of tracking so the gap reads true. */
@media (min-width:761px){
  .hm-ad__word{top:89.17%;transform:translateY(-50%);color:var(--hm-red)}
  .hm-ad__word--l{right:calc(50% + .5 * var(--hm-ad-w,32.57vw) + max(22px,.09 * var(--hm-ad-w,32.57vw)));margin-right:-.2em}
  .hm-ad__word--r{left:calc(50% + .5 * var(--hm-ad-w,32.57vw) + max(22px,.09 * var(--hm-ad-w,32.57vw)))}
}

/* --- 4 & 5. the two split blocks ----------------------------------------
   1109.55 of 1366 wide, centred: a photograph and a black panel, mirrored
   the second time. The photograph's ratio sets the row height and the panel
   stretches to it. Both panels carry the same three things, and the comp
   spaces them evenly inside 52.73 of padding at the top and 68.79 at the
   bottom — which is exactly what space-between gives, for the two-line
   title and the one-line title alike. */
.hm-split{
  display:grid;grid-template-columns:51.7% 48.3%;
  width:81.226vw;margin:0 auto;padding:0;
}
.hm-split--flip{grid-template-columns:48.3% 51.7%}
.hm-split__img{
  display:block;width:100%;height:auto;object-fit:cover;
  aspect-ratio:573.5/605.18;
}
.hm-split__panel{
  background:var(--hm-panel);
  display:flex;flex-direction:column;align-items:center;justify-content:space-between;
  text-align:center;gap:max(16px,2vw);
  padding:max(20px,3.861vw) max(12px,2.196vw) max(26px,5.036vw);
}
.hm-split__lede{
  margin:0;color:var(--hm-cream);font-family:var(--sans);
  font-size:max(11px,1.282vw);line-height:1.2;
}
.hm-split__mid{display:flex;flex-direction:column;align-items:center}
.hm-split__icon{display:block;height:auto}
.hm-split__icon--cloche{width:max(38px,5.214vw)}
.hm-split__icon--chair{width:max(31px,4.241vw)}
.hm-split__h{
  margin:max(12px,1.7vw) 0 0;
  font-family:var(--serif);font-weight:300;color:var(--hm-silver);
  font-size:max(22px,3.469vw);line-height:.94;
  letter-spacing:-.05em;text-transform:uppercase;
}
.hm-private{margin-top:max(40px,9.207vw)}
.hm-catering{margin-top:max(24px,4.701vw)}

/* --- 6. your table is waiting -------------------------------------------
   Full-bleed room, the comp's scrim running the other way: solid at the top
   edge, gone by 61.4% down. The OpenTable widget is not in the comp — see
   the note in index.html — so it keeps its place below the line it belongs
   to rather than being dropped. */
.hm-close{
  position:relative;isolation:isolate;overflow:hidden;
  min-height:53.913vw;
  display:flex;flex-direction:column;align-items:center;text-align:center;
  margin-top:max(44px,11.416vw);
  padding:max(28px,5.304vw) max(14px,4vw) max(30px,4.5vw);
}
.hm-close__img{
  position:absolute;inset:0;z-index:-2;
  width:100%;height:100%;object-fit:cover;object-position:center 55%;
}
.hm-close__scrim{
  position:absolute;left:0;right:0;top:0;z-index:-1;height:61.4%;
  background:linear-gradient(to bottom,var(--hm-scrim),rgba(8,9,9,0));
}
.hm-close__lede{
  margin:0;max-width:max(32ch,37.5vw);color:var(--hm-cream);
  font-family:var(--sans);font-size:max(12px,1.282vw);line-height:1.2;
}
.hm-close__h{
  margin:max(14px,3.208vw) 0 0;
  font-family:var(--accent);font-style:italic;font-weight:400;color:var(--hm-cream);
  font-size:max(22px,2.304vw);line-height:1.2; /* the comp's 31.47px, now the accent face matches it */
}
.hm-close__card{display:flex;justify-content:center;width:100%;margin-top:max(18px,2.6vw)}
/* the large-party line: a dark pill right under the booking bar, so it reads over any photo */
.hm-close__note{
  display:inline-flex;align-items:center;gap:.6em;flex-wrap:wrap;justify-content:center;
  margin:max(14px,1.4vw) 0 0;padding:.7em 1.4em;
  background:rgba(22,22,22,.78);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
  border:1px solid rgba(203,214,227,.28);border-radius:999px;
  color:var(--hm-cream);font-family:var(--sans);font-size:max(14px,1.02vw);line-height:1.35;letter-spacing:.01em;
}
.hm-close__note a{color:var(--hm-silver);font-weight:500;text-decoration:none;border-bottom:1px solid rgba(203,214,227,.5);white-space:nowrap}
.hm-close__note a:hover{color:var(--hm-cream);border-color:var(--hm-cream)}
@media (min-width:761px){.hm-close__note{white-space:nowrap}.hm-close__lede{max-width:none;white-space:nowrap}}
/* the wide widget is a single bar: don't hold 301px for it */
.hm-close .ot-slot[data-ot="wide"]{min-height:0}

/* --- narrow ---------------------------------------------------------------
   The artboard is a desktop drawing, so this is interpretation rather than
   transcription: the split blocks stack, the two After Dark words come off
   the photograph and sit above it, the red headline is allowed to wrap, and
   the hero's three-across row becomes copy over an action. The gold mark
   goes, because at 48px it is a smudge. */
@media (max-width:760px){
  /* the phone set (5-8) is 1366x1120, so the hero is that frame, 81.991vw */
  .hm-hero{height:81.991vw;min-height:0}
  /* a 320px-tall frame: the button alone, centred just above the hero word,
     off the middle of the photograph (the slide dots are gone, 2026-09-24) */
  .hm-hero__row{
    grid-template-columns:1fr;justify-items:center;
    bottom:13.5vw;padding-inline:max(14px,4.5vw);
  }
  .hm-hero__mid{display:none}
  .hm-hero__claim{display:none} /* phones: the Caledon line goes; button and dots only */
  .hm-proof__line{font-size:9px;line-height:2;letter-spacing:.16em}
  .hm-proof__sep{margin:0 .5em}
  .hm-hero__act{justify-self:center}

  .hm-room{padding-top:max(34px,9vw)}
  .hm-room__illo{width:92vw;margin-top:max(18px,3vw)}
  .hm-room__sub{margin-top:6px}

  .hm-band{padding-bottom:max(30px,8vw)}
  .hm-band::before{height:auto;bottom:0}
  .hm-band__h{
    white-space:normal;font-size:clamp(30px,9.4vw,48px); /* capped: uncapped it reached 71px at 760px, then dropped to 42px one pixel wider */
    max-width:17ch;margin-inline:auto;line-height:1.02;padding-top:max(26px,7vw);
  }
  .hm-band__cta{margin-top:max(18px,5vw)}

  .hm-ad{margin-top:max(40px,10vw)}
  .hm-ad__fig{width:min(62vw,300px)}
  .hm-ad__words{
    display:flex;justify-content:center;gap:max(14px,5vw);
    margin-bottom:max(16px,4vw);
  }
  .hm-ad__word{position:static;text-align:center;font-size:max(22px,7.4vw)}

  .hm-split,.hm-split--flip{grid-template-columns:1fr;width:min(88vw,520px)}
  .hm-split__img{aspect-ratio:4/3}
  .hm-split--flip .hm-split__panel{order:2}
  .hm-split__panel{gap:max(20px,6vw);padding-block:max(30px,8vw)}
  .hm-split__h{font-size:max(26px,8.4vw);margin-top:max(12px,3.4vw)}
  .hm-split__lede{font-size:14px}
  .hm-private{margin-top:max(36px,11vw)}
  .hm-catering{margin-top:max(20px,5vw)}

  .hm-close{min-height:min(120vw,620px);margin-top:max(40px,12vw);padding-top:max(32px,9vw)}
  .hm-close__lede{font-size:14px;max-width:34ch}
  .hm-close__h{font-size:max(22px,6.6vw);margin-top:max(14px,4vw)}
}

/* Above 760 the two words are placed on the photograph, so their wrapper
   must add nothing of its own. */
@media (min-width:761px){
  .hm-ad__words{display:contents}
}

@media (prefers-reduced-motion:reduce){
  .hm-btn{transition:none}
  .hm-hero__img{animation:none}
  .hm-hero__img--1{opacity:1}
  .hm-hero__line{animation:none}
  .hm-hero__line--b{clip-path:inset(0 0 0 100%)}
  .hm-ad__img{animation:none}
  .hm-ad__img--1{opacity:1}
}

@media (max-width:760px){.hm-btn{height:44px}}

/* §4 Motion on the home page — see amami-pages.css for the full note. The hero is
   left alone (it has its own two-line word and crossfade); the sections after it
   arrive once, 20px up, and the photographs settle from 1.04. */
.motion main > section:where(:not(.hm-hero):not(:first-child)){opacity:0;transform:translateY(20px);
  transition:opacity .7s cubic-bezier(.22,1,.36,1),transform .7s cubic-bezier(.22,1,.36,1)}
.motion main > section.is-in{opacity:1;transform:none}
.motion main > section:where(:not(.hm-hero):not(.hm-band)) img:where(:not(.hm-hero__img)){transform:scale(1.04);transition:transform .9s cubic-bezier(.22,1,.36,1)}
.motion main > section.is-in img{transform:none}
.hm-room .hm-room__wash{transform:none} /* must stay registered to the film */
.motion .hm-btn{transition:background .25s ease-out,color .25s ease-out,border-color .25s ease-out,transform .25s ease-out}
.motion .hm-btn:hover{transform:translateY(-1px)}
/* the Menù button is centred with translateX(-50%); the lift must keep it, or it jumps left */
.motion .hm-ad__cta:hover{transform:translateX(-50%) translateY(-1px)}
.motion .hdr{transition:height .3s ease-out,background-color .3s ease-out,opacity .3s ease-out,transform .3s cubic-bezier(.22,1,.36,1)}
.motion.is-scrolled .hdr{height:66px;background:rgba(22,22,22,.95)}
@media (prefers-reduced-motion:reduce){
  .motion main > section:not(.hm-hero){opacity:1;transform:none;transition:none}
  .motion main > section img{transform:none;transition:none}
  .motion .hm-btn:hover{transform:none}
  .motion .hm-ad__cta:hover{transform:translateX(-50%)}
  .motion .hdr,.motion.is-scrolled .hdr{transition:none;height:var(--h-hdr,76px)}
}

/* §6 — bare inline links (phone, e-mail) get a 44px hit area on phones without moving the text. */
@media (max-width:760px){body.is-home main a:not([class]){display:inline-block;padding:12px 0;margin:-12px 0}}

/* OpenTable slot: spans its row so the loader can measure it (wide >= 860px, else tall), widget centred */
.ot-slot{width:100%;display:flex;justify-content:center;min-height:301px}
.ot-slot iframe{max-width:100%}

/* --- AM/0n: the brand book's chapter index, a quiet editorial mark ------------ */
.hm-idx{display:flex;align-items:center;justify-content:center;gap:.9em;margin:0 0 max(10px,1vw);
  font-family:var(--sans);font-weight:400;font-size:max(9px,.8vw);letter-spacing:.32em;text-transform:uppercase;color:rgba(22,22,22,.55)}
.hm-idx__n{color:var(--hm-red)}
.hm-idx::before,.hm-idx::after{content:"";width:max(24px,2.6vw);height:1px;background:currentColor;opacity:.45}
.hm-band .hm-idx,.hm-close .hm-idx,.hm-split__panel .hm-idx{color:rgba(238,233,218,.7)}
.hm-band .hm-idx__n,.hm-close .hm-idx__n,.hm-split__panel .hm-idx__n{color:var(--hm-silver)}
.hm-band > .hm-idx{position:relative;z-index:1;padding-top:max(18px,2vw)}
.hm-split__panel .hm-idx{margin-bottom:0}

/* --- Signature: three plates in hairline frames -------------------------------- */
.hm-sig{background:var(--hm-cream);text-align:center;padding:max(44px,7vw) 0 max(48px,7.5vw)}
.hm-sig__h{margin:0;font-family:var(--serif);font-weight:300;color:var(--hm-red);
  font-size:max(30px,4.2vw);line-height:1;letter-spacing:-.04em;text-transform:uppercase}
.hm-sig__list{list-style:none;margin:max(28px,3.6vw) auto 0;padding:0;width:81.226vw;
  display:grid;grid-template-columns:repeat(3,1fr);gap:max(16px,2.2vw)}
.hm-sig__fig{margin:0}
.hm-sig__frame{padding:max(8px,.75vw);border:1px solid rgba(22,22,22,.18);background:rgba(255,255,255,.28)}
.hm-sig__img{display:block;width:100%;height:auto;aspect-ratio:4/5;object-fit:cover;
  transition:transform .8s cubic-bezier(.22,1,.36,1),filter .8s ease-out}
.hm-sig__frame{overflow:hidden}
.hm-sig__item:hover .hm-sig__img{transform:scale(1.035);filter:brightness(1.04)}
.hm-sig__cap{display:flex;flex-direction:column;align-items:center;gap:max(6px,.5vw);margin-top:max(14px,1.4vw)}
.hm-sig__no{font-family:var(--sans);font-size:max(9px,.75vw);letter-spacing:.3em;color:var(--hm-red)}
.hm-sig__it{font-family:var(--serif);font-weight:400;font-size:max(20px,1.75vw);line-height:1.1;color:var(--hm-panel);letter-spacing:-.01em}
.hm-sig__en{font-family:var(--accent);font-style:italic;font-size:max(14px,1.2vw);color:rgba(22,22,22,.7)}
.hm-sig__cta{margin-top:max(30px,3.4vw)}
@media (max-width:760px){
  .hm-sig{padding:44px 0 48px}
  .hm-sig__list{width:min(88vw,520px);grid-template-columns:1fr;gap:34px}
  .hm-sig__h{font-size:max(28px,8.6vw)}
  .hm-sig__it{font-size:22px}
  .hm-idx{font-size:9px}
}
@media (prefers-reduced-motion:reduce){.hm-sig__img{transition:none}.hm-sig__item:hover .hm-sig__img{transform:none;filter:none}}