/* ==========================================================================
   Amami Italia — the rebuilt inner pages.
   Loaded by pages rebuilt to the homepage system (design-system.md), after
   amami.css. Everything here is a homepage pattern reused under a .pg-
   prefix, with the homepage's own lengths (comp px over 1366, as vw, floors
   only). No new type sizes, no new button, no new colours.
   ========================================================================== */
body.is-page{
  --hm-cream:#eee9da;--hm-red:#812b28;--hm-panel:#161616;--hm-silver:#cbd6e3;--hm-scrim:#080809;
  background:var(--hm-cream);color:var(--hm-panel);
}
body.is-page main{overflow-x:clip}
body.is-page picture{display:contents}
/* <source> has no UA display:none, so under display:contents it became a grid
   item, took the first cell and pushed the photo and panel out of line. */
body.is-page picture > source{display:none}

/* the homepage button, verbatim */
.pg-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 ease-out,color .25s ease-out,border-color .25s ease-out}
.pg-btn:hover,.pg-btn:focus-visible{background:var(--hm-cream);color:var(--hm-panel)}
.pg-btn--red{border-color:var(--hm-red);color:var(--hm-red)}
.pg-btn--red:hover,.pg-btn--red:focus-visible{background:var(--hm-red);color:var(--hm-cream)}
.pg-btn--fill{background:var(--hm-red);border-color:var(--hm-red);color:var(--hm-cream)}
.pg-btn--fill:hover,.pg-btn--fill:focus-visible{background:var(--hm-cream);border-color:var(--hm-cream);color:var(--hm-red)}

/* --- hero: the closing section's grammar, photograph + scrim + type -------- */
.pg-hero{position:relative;isolation:isolate;overflow:hidden;padding:0;
  min-height:max(420px,45vw);display:flex;flex-direction:column;justify-content:flex-end;align-items:center;
  text-align:center;padding-block:max(28px,5.304vw) max(34px,6.958vw)}
.pg-hero__img{position:absolute;inset:0;z-index:-2;width:100%;height:100%;object-fit:cover}
.pg-hero__scrim{position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:linear-gradient(to bottom,rgba(8,9,9,.35) 0%,rgba(8,9,9,0) 30%,var(--hm-scrim) 100%)}
.pg-hero__h{margin:0;font-family:var(--serif);font-weight:300;color:var(--hm-cream);
  font-size:max(38px,7.63vw);line-height:1;letter-spacing:-.05em;text-transform:uppercase}
.pg-hero__sub{margin:max(12px,1.6vw) auto 0;max-width:max(30ch,44vw);
  font-family:var(--accent);font-style:italic;color:var(--hm-cream);
  font-size:max(14px,1.5vw);line-height:1.45}

/* --- a cream section: title, accent line, one action --------------------- */
.pg-sec{background:var(--hm-cream);text-align:center;
  padding:max(30px,7.031vw) max(14px,4vw) max(34px,6.958vw)}
.pg-sec--tight{padding-top:max(24px,4.2vw)}
.pg-sec__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}
.pg-sec__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}
.pg-sec__sub span{display:block}
.pg-sec__cta{margin-top:max(22px,3.051vw)}

/* --- two cards: photograph over a black panel, the split block turned ----- */
.pg-cards{display:grid;grid-template-columns:1fr 1fr;gap:max(10px,1.2vw);
  width:81.226vw;margin:0 auto;padding:0}
.pg-card{display:flex;flex-direction:column;background:var(--hm-panel);color:var(--hm-cream);text-align:center}
.pg-card__img{display:block;width:100%;height:auto;aspect-ratio:1109.55/605.18;object-fit:cover}
.pg-card__body{display:flex;flex-direction:column;align-items:center;flex:1;
  gap:max(12px,1.4vw);padding:max(20px,3.861vw) max(12px,2.196vw) max(26px,5.036vw)}
.pg-card__it{margin: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}
.pg-card__en{margin:0;font-family:var(--sans);font-weight:400;color:rgba(238,233,218,.62);
  font-size:max(9px,.95vw);letter-spacing:.2em;text-transform:uppercase}
.pg-card__lede{margin:0;max-width:34ch;font-family:var(--sans);font-size:max(11px,1.282vw);line-height:1.5}
.pg-card__cta{margin-top:auto}

/* --- the lists still being written: muted, not links --------------------- */
.pg-soon{display:flex;flex-wrap:wrap;justify-content:center;gap:max(10px,1.2vw) max(18px,2.6vw);
  margin:max(20px,2.6vw) auto 0;max-width:81.226vw;list-style:none;padding:0}
.pg-soon li{display:flex;flex-direction:column;align-items:center;gap:max(4px,.4vw);
  padding:max(14px,1.6vw) max(16px,2vw);border:1px solid rgba(22,22,22,.14);min-width:max(120px,13vw)}
.pg-soon__it{font-family:var(--serif);font-weight:300;color:rgba(22,22,22,.55);
  font-size:max(18px,2vw);line-height:1;letter-spacing:-.03em;text-transform:uppercase}
.pg-soon__tag{font-family:var(--sans);font-weight:400;color:var(--hm-red);
  font-size:max(9px,.75vw);letter-spacing:.2em;text-transform:uppercase}

/* --- the page-ending action, on the dark ground ------------------------- */
.pg-end{background:var(--hm-panel);text-align:center;padding:max(34px,6vw) max(14px,4vw)}
.pg-end__h{margin:0 0 max(18px,2.2vw);font-family:var(--accent);font-style:italic;font-weight:400;
  color:var(--hm-cream);font-size:max(22px,2.304vw);line-height:1.2}

@media (max-width:760px){
  .pg-hero{min-height:max(380px,70svh);padding-block:30px 34px}
  .pg-hero__h{font-size:max(34px,11vw)}
  .pg-hero__sub,.pg-sec__sub{font-size:15px;max-width:30ch}
  .pg-sec{padding:max(34px,9vw) 16px 34px}
  .pg-sec__h{font-size:max(30px,9.4vw)}
  .pg-cards{grid-template-columns:1fr;width:min(88vw,520px);gap:14px}
  .pg-card__img{aspect-ratio:4/3}
  .pg-card__it{font-size:max(26px,8.4vw)}
  .pg-card__lede{font-size:14px}
  .pg-soon{max-width:min(88vw,520px);gap:10px}
  .pg-soon li{min-width:calc(50% - 5px);padding:12px 10px}
  .pg-soon__it{font-size:18px}
  .pg-end{padding:36px 16px}
  .pg-end__h{font-size:22px}
}
@media (prefers-reduced-motion:reduce){.pg-btn{transition:none}}

/* --- the split block: photograph beside a black panel ---------------------
   The homepage's, at 81.226vw; --bleed runs it edge to edge for a portrait. */
.pg-split{display:grid;grid-template-columns:51.7% 48.3%;width:81.226vw;margin:0 auto;padding:0}
.pg-split--bleed{width:100%}
.pg-split--flip{grid-template-columns:48.3% 51.7%}
.pg-split__img{display:block;width:100%;height:100%;object-fit:cover;aspect-ratio:573.5/605.18}
.pg-split--bleed .pg-split__img{aspect-ratio:auto;min-height:max(420px,42vw)}
.pg-split__panel{background:var(--hm-panel);color:var(--hm-cream);
  display:flex;flex-direction:column;justify-content:center;align-items:flex-start;text-align:left;
  gap:max(14px,1.6vw);padding:max(28px,4.5vw) max(22px,4.2vw)}
.pg-split__panel--center{align-items:center;text-align:center}
/* an inset split's black panel ran straight into the dark closing band and
   read as one block; give it the homepage's cream gap below */
.pg-split:not(.pg-split--bleed) + .pg-end{margin-top:max(34px,6.958vw)}
.pg-label{margin:0;font-family:var(--sans);font-weight:400;color:rgba(238,233,218,.62);
  font-size:max(9px,.95vw);letter-spacing:.2em;text-transform:uppercase}
.pg-split__h{margin: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}
.pg-split__lede{margin:0;max-width:40ch;font-family:var(--sans);font-size:max(11px,1.282vw);line-height:1.5}
.pg-quote{margin:0;max-width:34ch;font-family:var(--accent);font-style:italic;font-weight:400;
  color:var(--hm-cream);font-size:max(20px,2.304vw);line-height:1.25}
.pg-quote__it{display:block;margin-top:max(8px,.8vw);font-size:max(13px,1.28vw);color:rgba(238,233,218,.62);line-height:1.4}
.pg-quote__it:empty{display:none}

/* two or three short paragraphs of body copy, centred, one measure */
.pg-body{margin:max(14px,1.6vw) auto 0;max-width:max(34ch,46vw);text-align:center;
  font-family:var(--sans);color:var(--hm-panel);font-size:max(12px,1.282vw);line-height:1.6}
.pg-body p{margin:0}
.pg-body p+p{margin-top:max(10px,1.1vw)}

/* --- three tiles: name and one line, on the dark ground ------------------ */
.pg-tiles{display:grid;grid-template-columns:repeat(3,1fr);gap:max(10px,1.2vw);
  width:81.226vw;margin:max(22px,3.051vw) auto 0;padding:0;list-style:none}
.pg-tile{background:var(--hm-panel);color:var(--hm-cream);text-align:center;
  padding:max(24px,3.2vw) max(14px,1.8vw)}
.pg-tile__h{margin:0 0 max(8px,.8vw);font-family:var(--serif);font-weight:300;color:var(--hm-silver);
  font-size:max(22px,2.6vw);line-height:1;letter-spacing:-.04em;text-transform:uppercase}
.pg-tile__p{margin:0;font-family:var(--accent);font-style:italic;font-size:max(13px,1.28vw);line-height:1.45;color:rgba(238,233,218,.85)}

@media (max-width:760px){
  .pg-split,.pg-split--flip,.pg-split--bleed{grid-template-columns:1fr;width:min(88vw,520px)}
  .pg-split--bleed{width:100%}
  .pg-split__img{aspect-ratio:4/3;height:auto}
  .pg-split--bleed .pg-split__img{min-height:0;aspect-ratio:4/5}
  .pg-split--flip .pg-split__panel{order:2}
  .pg-split__panel{padding:30px 22px;gap:14px}
  .pg-split__h{font-size:max(26px,8.4vw)}
  .pg-split__lede,.pg-body{font-size:14px}
  .pg-quote{font-size:22px}
  .pg-tiles{grid-template-columns:1fr;width:min(88vw,520px);gap:10px}
  .pg-tile__h{font-size:24px}.pg-tile__p{font-size:14px}
}

/* --- four text cards (rooms): the card without its photograph ------------ */
.pg-cards--4{grid-template-columns:repeat(2,1fr)}
.pg-card--text .pg-card__body{padding-top:max(26px,4.2vw)}
.pg-card__cap{margin:0;font-family:var(--sans);font-weight:400;color:rgba(238,233,218,.62);
  font-size:max(9px,.95vw);letter-spacing:.2em;text-transform:uppercase}

/* --- a line of contact, and small facts ---------------------------------- */
.pg-contact{margin:max(12px,1.6vw) auto 0;font-family:var(--sans);color:var(--hm-panel);
  font-size:max(12px,1.282vw);line-height:1.6}
.pg-contact a{color:inherit;text-decoration:none;border-bottom:1px solid rgba(22,22,22,.28)}
.pg-contact a:hover{border-color:var(--hm-red);color:var(--hm-red)}
.pg-facts{display:grid;grid-template-columns:repeat(4,1fr);gap:max(16px,2.2vw);
  width:81.226vw;margin:max(22px,3.051vw) auto 0;padding:0;text-align:left}
.pg-fact{margin:0}
.pg-fact dt{font-family:var(--sans);font-weight:400;color:var(--hm-red);
  font-size:max(9px,.95vw);letter-spacing:.2em;text-transform:uppercase;margin:0 0 max(6px,.6vw)}
.pg-fact dd{margin:0;font-family:var(--sans);color:var(--hm-panel);font-size:max(12px,1.282vw);line-height:1.55}
.pg-fact dd a{color:inherit;text-decoration:none;border-bottom:1px solid rgba(22,22,22,.28)}
.pg-fact dd a:hover{color:var(--hm-red);border-color:var(--hm-red)}

/* --- the enquiry form: the footer's fields, at page scale ---------------- */
.pg-form{display:grid;grid-template-columns:1fr 1fr;gap:max(14px,1.6vw) max(14px,1.6vw);
  width:min(81.226vw,820px);margin:max(22px,3.051vw) auto 0;text-align:left}
.pg-form label{display:block}
.pg-form label span{display:block;margin:0 0 max(6px,.5vw);font-family:var(--sans);font-weight:400;color:var(--hm-panel);
  font-size:max(9px,.95vw);letter-spacing:.2em;text-transform:uppercase}
.pg-form input,.pg-form textarea{display:block;width:100%;box-sizing:border-box;background:transparent;
  border:1px solid rgba(22,22,22,.28);color:var(--hm-panel);font:inherit;font-family:var(--sans);
  font-size:max(13px,1.1vw);padding:.75em .9em;border-radius:0;margin:0}
.pg-form select{display:block;width:100%;box-sizing:border-box;background:transparent;appearance:none;-webkit-appearance:none;
  border:1px solid rgba(22,22,22,.28);color:var(--hm-panel);font-family:var(--sans);font-size:max(13px,1.1vw);
  padding:.75em 2.4em .75em .9em;border-radius:0;margin:0;cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23812b28' stroke-width='1.4'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right .9em center}
.pg-form select:focus{outline:none;border-color:var(--hm-red)}
.pg-form select:invalid{color:rgba(22,22,22,.5)}
.pg-form input::placeholder,.pg-form textarea::placeholder{color:rgba(22,22,22,.4)}
.pg-form input:focus,.pg-form textarea:focus{outline:none;border-color:var(--hm-red)}
.pg-form .pg-form__wide{grid-column:1/-1}
.pg-form .pg-form__act{grid-column:1/-1;text-align:center;margin-top:max(6px,.6vw)}
.pg-form .form-status{grid-column:1/-1;margin:0;text-align:center;font-family:var(--sans);
  font-size:max(12px,1vw);color:var(--hm-panel);min-height:1.4em}

/* --- the booking widget, and the map ------------------------------------- */
.pg-widget{display:flex;justify-content:center;width:100%;margin:max(20px,2.6vw) auto 0;min-height:270px}
.pg-map{display:block;width:81.226vw;aspect-ratio:16/8;margin:max(22px,3.051vw) auto 0;border:0;
  filter:grayscale(1) contrast(1.05);background:#ddd}

@media (max-width:760px){
  .pg-cards--4{grid-template-columns:1fr}
  .pg-facts{grid-template-columns:1fr 1fr;width:min(88vw,520px);gap:18px 14px}
  .pg-fact dt{font-size:9px}.pg-fact dd{font-size:14px}
  .pg-contact{font-size:14px}
  .pg-form{grid-template-columns:1fr;width:min(88vw,520px);gap:14px}
  .pg-form label span{font-size:9px}.pg-form input,.pg-form textarea,.pg-form select{font-size:16px}
  .pg-map{width:min(88vw,520px);aspect-ratio:4/3}
}

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

/* ==========================================================================
   §4 Motion — expensive and calm. Everything is transform and opacity only,
   triggers once at ~20% visibility, and stays. If it reads as an animation
   it is too much. Reduced motion: nothing moves.
   ========================================================================== */
/* section entrance: 20px up, 700ms. :where() keeps the exclusions at zero
   specificity so the .is-in state below always wins. */
.motion main > section:where(:not(.pg-hero):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}
/* photographs settle from 1.04 to 1 over 900ms as their section arrives */
.motion main > section:where(:not(.pg-hero):not(.hm-hero):not(:first-child)) img{transform:scale(1.04);
  transition:transform .9s cubic-bezier(.22,1,.36,1)}
.motion main > section.is-in img{transform:none}
/* H1 only: one line revealed behind a mask */
.motion .pg-hero__h{clip-path:inset(0 0 100% 0);transition:clip-path .8s cubic-bezier(.22,1,.36,1) .1s}
.motion .pg-hero.is-in .pg-hero__h,.motion .pg-hero.is-ready .pg-hero__h{clip-path:inset(0 0 0 0)}
/* buttons: colour transition (already) and a 1px lift, nothing else */
.motion .pg-btn,.motion .hm-btn{transition:background .25s ease-out,color .25s ease-out,border-color .25s ease-out,transform .25s ease-out}
.motion .pg-btn:hover,.motion .hm-btn:hover{transform:translateY(-1px)}
/* links in copy: underline wipes in from the left, 200ms */
.motion .pg-contact a,.motion .pg-fact dd a,.motion .ftr__link{border-bottom:0;background:linear-gradient(currentColor,currentColor) no-repeat 0 100%/0 1px;transition:background-size .2s ease-out}
.motion .pg-contact a:hover,.motion .pg-fact dd a:hover,.motion .ftr__link:hover{background-size:100% 1px}
/* cards: the photograph eases to 1.03 and darkens a touch on hover, 400ms */
.motion .pg-card__img,.motion .pg-split__img{transition:transform .4s cubic-bezier(.22,1,.36,1),filter .4s ease-out}
.motion .pg-card:hover .pg-card__img{transform:scale(1.03);filter:brightness(.92)}
/* header on scroll: a shade more solid, a shade shorter, 300ms */
.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)}
/* proof bar and stat-like lines: plain fade only */
.motion .hm-proof{transform:none}
@media (prefers-reduced-motion:reduce){
  .motion main > section:not(.pg-hero):not(.hm-hero){opacity:1;transform:none;transition:none}
  .motion main > section img{transform:none;transition:none}
  .motion .pg-hero__h{clip-path:none;transition:none}
  .motion .pg-btn:hover,.motion .hm-btn:hover{transform:none}
  .motion .pg-card:hover .pg-card__img{transform:none}
  .motion .hdr,.motion.is-scrolled .hdr{transition:none;height:var(--h-hdr,76px)}
}

/* ==========================================================================
   The kit, extended for the pages rebuilt from the legacy set (menus, legal,
   journal, FAQ, the landing pages). Same rule: homepage sizes and colours only.
   ========================================================================== */
/* a cream page head for pages without a photograph: the Room section's title
   and accent line, sitting under the fixed header */
.pg-head{background:var(--hm-cream);text-align:center;
  padding:calc(var(--h-hdr,76px) + max(30px,4.2vw)) max(14px,4vw) max(10px,1.4vw)}
.pg-head__k{margin:0 0 max(10px,1vw);font-family:var(--sans);font-weight:400;color:var(--hm-red);
  font-size:max(9px,.95vw);letter-spacing:.2em;text-transform:uppercase}
.pg-head__k a{color:inherit;text-decoration:none}
.pg-head__k a:hover{text-decoration:underline}
.pg-head__h{margin:0;font-family:var(--serif);font-weight:300;color:var(--hm-red);
  font-size:max(34px,5.748vw);line-height:1;letter-spacing:-.05em;text-transform:uppercase}
.pg-head__sub{margin:max(6px,.6vw) 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}

/* section jump links (menus): the red outline button, small */
.pg-anchors{display:flex;flex-wrap:wrap;justify-content:center;gap:max(8px,.8vw);
  margin:max(20px,2.4vw) auto 0;padding:0;list-style:none}
.pg-anchors a{display:inline-flex;align-items:center;height:max(32px,2.6vw);padding-inline:max(12px,1.2vw);
  border:1px solid var(--hm-red);color:var(--hm-red);text-decoration:none;
  font-family:var(--sans);font-weight:300;font-size:max(9.5px,.95vw);letter-spacing:.2em;text-transform:uppercase;
  transition:background .25s ease-out,color .25s ease-out}
.pg-anchors a:hover,.pg-anchors a:focus-visible{background:var(--hm-red);color:var(--hm-cream)}

/* the jump-link row sits straight on top of the first course, so it drops
   its own bottom padding (the course brings its own top) */
.pg-sec--nav{padding-bottom:0}
/* a menu course: title, accent line, then the dishes, one measure wide */
.pg-menu{background:var(--hm-cream);padding:max(28px,4.6vw) max(14px,4vw) 0;scroll-margin-top:var(--h-hdr,76px)}
.pg-menu .pg-head__k{text-align:center}
.pg-menu__h{margin:0;text-align:center;font-family:var(--serif);font-weight:300;color:var(--hm-red);
  font-size:max(28px,3.469vw);line-height:1;letter-spacing:-.05em;text-transform:uppercase}
.pg-menu__sub{margin:max(6px,.5vw) auto 0;text-align:center;font-family:var(--accent);font-style:italic;
  color:var(--hm-panel);font-size:max(14px,1.3vw);line-height:1.45}
body.is-page .menu-list{width:min(81.226vw,820px);margin:max(16px,1.8vw) auto 0;border-top:1px solid rgba(22,22,22,.14)}
body.is-page .dish{display:grid;grid-template-columns:1fr auto;column-gap:max(16px,2vw);align-items:baseline;
  padding:max(12px,1.1vw) 0;border-bottom:1px solid rgba(22,22,22,.14)}
body.is-page .dish > div{display:flex;flex-wrap:wrap;align-items:baseline;gap:.5em}
body.is-page .dish__name{font-family:var(--serif);font-weight:400;color:var(--hm-panel);font-size:max(18px,1.6vw);line-height:1.15}
body.is-page .dish__tag{font-family:var(--sans);font-size:max(9px,.7vw);letter-spacing:.12em;color:var(--hm-red);
  border:1px solid rgba(129,43,40,.4);padding:.1em .45em;text-decoration:none;line-height:1.4}
body.is-page .dish__price{font-family:var(--sans);font-weight:400;color:var(--hm-red);font-size:max(13px,1.1vw);white-space:nowrap}
body.is-page .dish__desc,body.is-page .dish__add{grid-column:1/-1;margin:max(4px,.35vw) 0 0;font-family:var(--sans);
  color:rgba(22,22,22,.72);font-size:max(12px,1vw);line-height:1.5;max-width:60ch}
body.is-page .dish__add{color:var(--hm-red)}
.pg-notes{width:min(81.226vw,820px);margin:max(22px,2.6vw) auto 0;padding:0;list-style:none;text-align:center;
  font-family:var(--sans);color:rgba(22,22,22,.62);font-size:max(11px,.9vw);line-height:1.7}

/* long-form text (journal posts, legal): left-aligned, one reading measure */
.pg-prose{width:min(88vw,720px);margin:0 auto;padding:max(10px,1.4vw) 0 max(34px,5vw);
  font-family:var(--sans);color:var(--hm-panel);font-size:max(15px,1.14vw);line-height:1.75;text-align:left}
.pg-prose > :first-child{margin-top:0}
.pg-prose p,.pg-prose ul,.pg-prose ol{margin:0 0 1.1em}
.pg-prose ul,.pg-prose ol{padding-left:1.2em}
.pg-prose li{margin:.35em 0}
.pg-prose h2{margin:1.8em 0 .5em;font-family:var(--serif);font-weight:300;color:var(--hm-red);
  font-size:max(26px,2.6vw);line-height:1.05;letter-spacing:-.04em;text-transform:uppercase}
.pg-prose h3{margin:1.4em 0 .4em;font-family:var(--serif);font-weight:500;color:var(--hm-panel);font-size:max(19px,1.5vw);line-height:1.2}
.pg-prose strong,.pg-prose b{font-weight:500}
.pg-prose a{color:var(--hm-red);text-decoration:none;border-bottom:1px solid rgba(129,43,40,.35)}
.pg-prose a:hover{border-color:var(--hm-red)}
.pg-prose blockquote{margin:1.4em 0;padding-left:1em;border-left:2px solid var(--hm-red);
  font-family:var(--accent);font-style:italic;font-size:1.25em;line-height:1.45}
.pg-prose figure{margin:1.6em 0}
.pg-prose figure img{display:block;width:100%;height:auto}
/* a journal post's title runs longer than a page name: the section-title size */
.pg-hero__h--post{font-size:max(34px,5.748vw);max-width:14em;margin-inline:auto}
.pg-hero__sub a{color:inherit;text-decoration:none;border-bottom:1px solid rgba(238,233,218,.4)}
.pg-hero__sub a:hover{border-color:var(--hm-cream)}
.pg-meta{margin:max(10px,1vw) 0 0;font-family:var(--sans);color:rgba(22,22,22,.6);
  font-size:max(10px,.85vw);letter-spacing:.2em;text-transform:uppercase}

/* three facts under a section title (the landing pages) */
.pg-facts--3{grid-template-columns:repeat(3,1fr)}
@media (max-width:760px){.pg-facts--3{grid-template-columns:1fr}}

/* questions and answers */
.pg-faq{width:min(81.226vw,820px);margin:max(18px,2.2vw) auto 0;padding:0;text-align:left;border-top:1px solid rgba(22,22,22,.14)}
.pg-faq > div{padding:max(14px,1.4vw) 0;border-bottom:1px solid rgba(22,22,22,.14)}
.pg-faq dt{font-family:var(--serif);font-weight:400;color:var(--hm-panel);font-size:max(19px,1.7vw);line-height:1.2}
.pg-faq dd{margin:max(6px,.5vw) 0 0;font-family:var(--sans);color:rgba(22,22,22,.78);font-size:max(13px,1.1vw);line-height:1.6}
.pg-faq dd a{color:var(--hm-red);text-decoration:none;border-bottom:1px solid rgba(129,43,40,.35)}

@media (max-width:760px){
  .pg-head{padding:calc(var(--h-hdr,76px) + 34px) 16px 8px}
  .pg-head__h{font-size:max(32px,10vw)}
  .pg-head__sub,.pg-menu__sub{font-size:15px}
  .pg-anchors a{height:40px;font-size:10px}
  .pg-menu{padding:34px 16px 0}
  .pg-menu__h{font-size:max(28px,8.4vw)}
  body.is-page .menu-list,.pg-notes,.pg-faq{width:100%}
  body.is-page .dish__name{font-size:19px}body.is-page .dish__price{font-size:14px}
  body.is-page .dish__desc,body.is-page .dish__add{font-size:13px}
  .pg-prose{font-size:16px}
  .pg-faq dt{font-size:19px}.pg-faq dd{font-size:14px}
}

/* §6 — bare inline links (phone, e-mail) get a 44px hit area on phones without moving the text. */
@media (max-width:760px){body.is-page main a:not([class]){display:inline-block;padding:12px 0;margin:-12px 0}}
/* ...but not the jump-link buttons, which are unclassed <a>s inside .pg-anchors:
   the rule above stripped their side padding and its -12px margin stacked the
   wrapped rows on top of each other (legal, 404, menu section rows). */
@media (max-width:760px){
  body.is-page .pg-anchors{gap:10px 8px;padding-inline:16px}
  body.is-page main .pg-anchors a{display:inline-flex;align-items:center;height:44px;padding:0 14px;margin:0;font-size:10px}
}

/* 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%}

/* Menu hub: the card photographs sit taller (4:3) so the food reads, and a
   row of four plates under "What people order" */
.pg-cards--menu .pg-card__img{aspect-ratio:4/3;object-position:50% 55%}
.pg-plates{list-style:none;padding:0;margin:max(26px,3.2vw) auto 0;width:81.226vw;
  display:grid;grid-template-columns:repeat(4,1fr);gap:max(8px,1vw)}
.pg-plates li{overflow:hidden;background:var(--hm-panel)}
.pg-plates img{display:block;width:100%;height:100%;aspect-ratio:4/5;object-fit:cover;
  transition:transform .6s cubic-bezier(.22,1,.36,1)}
.pg-plates li:hover img{transform:scale(1.04)}
@media (max-width:760px){.pg-plates{width:min(88vw,520px);grid-template-columns:1fr 1fr;gap:8px}}
@media (prefers-reduced-motion:reduce){.pg-plates img{transition:none}.pg-plates li:hover img{transform:none}}

/* Our Story: Isabella at the pass is the one chef photograph; framed on her and the plate */
.pg-split__img--chef{object-position:50% 45%}
.pg-split__lede--kitchen{font-family:var(--accent);font-style:italic;font-size:max(14px,1.5vw);line-height:1.45;color:var(--hm-silver)}

/* Our Story kitchen shot: lifted contrast so the steel and the chef's blacks read */
.pg-split__img--kitchen{filter:contrast(1.12) saturate(1.06) brightness(.97);object-position:50% 45%}
.pg-split--bleed .pg-split__img--kitchen{aspect-ratio:1/1;height:auto;min-height:0}

/* --- After Dark, before it opens: a teaser that says something is coming, never what --- */
.pg-hero--hush{min-height:max(520px,min(56vw,100svh));justify-content:center;background:var(--hm-scrim)}
.pg-hero--hush .pg-hero__img{filter:blur(7px) brightness(.42) saturate(.8);transform:scale(1.08)}
.pg-hero--hush .pg-hero__scrim{background:radial-gradient(ellipse at 50% 55%,rgba(8,9,9,0) 0%,rgba(8,9,9,.55) 55%,var(--hm-scrim) 100%)}
.pg-hero--hush .pg-hero__sub{text-wrap:balance}
.pg-hush__tag{margin:0 0 max(14px,1.6vw);font-family:var(--sans);font-weight:400;color:var(--hm-silver);
  font-size:max(9px,.95vw);letter-spacing:.3em;text-indent:.3em;text-transform:uppercase}
.pg-hush{background:var(--hm-panel);color:var(--hm-cream);text-align:center;
  padding:max(40px,7vw) max(14px,4vw) max(44px,7.5vw)}
.pg-hush__lines{list-style:none;margin:0 auto;padding:0;display:grid;gap:max(8px,1vw)}
.pg-hush__lines li{font-family:var(--serif);font-weight:300;font-size:max(26px,3.469vw);line-height:1.05;letter-spacing:-.03em}
.pg-hush__lines li:last-child{font-family:var(--accent);font-style:italic;color:var(--hm-silver)}
.pg-hush__note{margin:max(24px,3vw) 0 max(16px,1.8vw);font-family:var(--accent);font-style:italic;
  font-size:max(14px,1.5vw);color:rgba(238,233,218,.72)}
.pg-wine{margin-top:max(34px,6.958vw)}
.pg-wine__p{margin:0;max-width:40ch;font-family:var(--accent);font-style:italic;font-size:max(14px,1.5vw);line-height:1.45;color:rgba(238,233,218,.8)}
.pg-wine__cta{display:flex;flex-wrap:wrap;align-items:center;gap:max(14px,1.6vw);margin:0}
.pg-wine__tel{color:var(--hm-cream);font-family:var(--sans);font-size:max(11px,1.1vw);letter-spacing:.12em;text-decoration:none;border-bottom:1px solid rgba(238,233,218,.4)}
.pg-wine__tel:hover{border-color:var(--hm-cream)}
/* the three lines arrive one at a time, like someone lowering their voice */
@media (prefers-reduced-motion:no-preference){
  .pg-hush__lines li,.pg-hush__note{opacity:0;animation:pg-hush-in 1.4s cubic-bezier(.22,1,.36,1) forwards}
  .pg-hush__lines li:nth-child(1){animation-delay:.3s}
  .pg-hush__lines li:nth-child(2){animation-delay:1.3s}
  .pg-hush__lines li:nth-child(3){animation-delay:2.3s}
  .pg-hush__note{animation-delay:3.3s}
  .pg-hero--hush .pg-hero__img{animation:pg-hush-breathe 9s ease-in-out infinite alternate}
}
@keyframes pg-hush-in{from{opacity:0;transform:translateY(10px);filter:blur(4px)}to{opacity:1;transform:none;filter:none}}
@keyframes pg-hush-breathe{from{filter:blur(7px) brightness(.36) saturate(.8)}to{filter:blur(5px) brightness(.5) saturate(.9)}}

/* a portrait hero where the face is high in the frame */
.pg-hero__img--face{object-position:50% 18%}

/* menu hub: the menus that are live are links, framed in red */
.pg-soon--live{border-color:var(--hm-red)!important;padding:0!important}
.pg-soon--live a{display:flex;flex-direction:column;align-items:center;gap:max(4px,.4vw);padding:max(14px,1.6vw) max(16px,2vw);text-decoration:none;transition:background .25s ease-out}
.pg-soon--live .pg-soon__it{color:var(--hm-red)}
.pg-soon--live a:hover{background:rgba(129,43,40,.06)}

/* Journal: the selected category filter (tools/build-journal.py) */
.pg-anchors a[aria-current="true"]{background:var(--hm-red);color:var(--hm-cream)}
.pg-anchors--cats{margin-top:max(18px,2vw)}
.pg-card[hidden]{display:none}

/* Journal tables (wine pairings, regions): hairlines and the site type */
.pg-prose table{width:100%;border-collapse:collapse;margin:1em 0 1.6em;font-size:.92em;line-height:1.45}
.pg-prose th{font-family:var(--sans);font-weight:400;font-size:max(9px,.72vw);letter-spacing:.16em;text-transform:uppercase;
  color:var(--hm-red);text-align:left;padding:.7em .8em .7em 0;border-bottom:1px solid rgba(129,43,40,.45);vertical-align:bottom}
.pg-prose td{padding:.75em .8em .75em 0;border-bottom:1px solid rgba(22,22,22,.14);vertical-align:top}
.pg-prose td:first-child{font-weight:500}
.pg-prose small{font-size:.82em;color:rgba(22,22,22,.62)}
@media (max-width:760px){
  .pg-prose table{display:block;overflow-x:auto;-webkit-overflow-scrolling:touch;font-size:14px}
  .pg-prose th{font-size:9px}.pg-prose th,.pg-prose td{min-width:120px}
}

/* ==========================================================================
   Matching the client's preview images ("PREVIEW AMAMI WEB", 2026-09-25) on the
   five comp pages: the comp's red (#77312c), the accent lines in italic (the
   comp's Forward Serif is personal-use only; IM Fell English italic stands in,
   a touch larger and tighter so it sets like it), and the comp's hairline
   button borders.
   ========================================================================== */
body.is-afterdark,body.is-ourstory,body.is-menu,body.is-events,body.is-reservation{--hm-red:#77312c}
body.is-page .ad-hero__p,body.is-page .ad-hush__note,body.is-page .ev-room__lede,body.is-page .ev-incl__list,body.is-page .ev-fio__p,body.is-page .mn-hero__p,body.is-page .mn-order__p,body.is-page .os-hero__p,body.is-page .os-chef__k,body.is-page .os-chef__q p,body.is-page .rs-hero__p{font-style:italic;letter-spacing:.02em}
body.is-page .ad-hero__p,body.is-page .mn-hero__p,body.is-page .os-hero__p{font-size:max(12px,1.36vw)}
body.is-page .rs-hero__p{font-size:max(14px,1.84vw)}
body.is-page .ad-hush__note{font-size:max(17px,2.6vw)}
body.is-page .ev-room__lede{font-size:max(11px,1.12vw)}
body.is-page .ev-incl__list{font-size:max(12px,1.5vw)}
body.is-page .ev-fio__p,body.is-page .mn-order__p{font-size:max(13px,1.46vw);line-height:1.6}
body.is-page .os-chef__k{font-size:max(13px,1.6vw)}
body.is-page .os-chef__q p{font-size:max(14px,1.77vw);line-height:1.55}
body.is-page .rs-book__tel,body.is-page .ev-fio__facts dd{font-variant-numeric:lining-nums}
body.is-page .ad-btn--red,body.is-page .rs-btn,body.is-page .ev-btn{border-color:rgba(119,49,44,.5)}
body.is-page .ad-btn--cream{border-color:rgba(238,233,218,.55)}
@media (max-width:760px){
body.is-page .ad-hero__p,body.is-page .mn-hero__p,body.is-page .os-hero__p{font-size:max(11px,2.7vw)}
body.is-page .rs-hero__p{font-size:max(13px,3.9vw)}
body.is-page .ad-hush__note{font-size:max(15px,4.25vw)}
body.is-page .ev-room__lede{font-size:max(11px,2.13vw)}
body.is-page .ev-incl__list{font-size:max(12px,2.6vw)}
body.is-page .ev-fio__p,body.is-page .mn-order__p{font-size:max(12px,2.8vw)}
body.is-page .os-chef__k{font-size:max(13px,3.77vw)}
body.is-page .os-chef__q p{font-size:max(13px,3.4vw)}
}