/* Natsunoya Tea House theme.
   Loaded after site.css, which is the shared structure. Nothing here is layout - only the
   palette, the type and the few surfaces where the shared sheet carries a brand colour.

   The palette comes off their own logo: a black brush-stroke wordmark, a lavender lotus, and a
   lime swirl in the O. Not our idea of a tea house - theirs.

   Their site should look nothing like Keneke's, so: a white masthead with the black wordmark,
   a sumi band above it, lavender for emphasis, lime for "open" and "good", thin rules instead of
   heavy ink borders, and soft shadows instead of hard offsets. */

:root {
  /* Sumi and washi */
  --ink: #17151C;
  --muted: #6A6572;
  --line: #E3E0E8;
  --line-strong: #B8B2C2;
  --paper: #F6F4F0;
  --page: #FFFFFF;

  /* The lotus. This is the brand highlight the shared sheet calls --yellow. */
  --yellow: #C9BCE6;
  --yellow-soft: #E7E0F4;
  --yellow-wash: #F7F4FC;

  /* The swirl. --leaf is the "open now / included / good" colour. */
  --leaf: #5C7A12; /* darkened from the logo lime to clear 4.5:1 on white */
  --leaf-soft: #EDF4D8;

  /* Links and focus. */
  --navy: #5B4B8A;
  --navy-soft: #E4DEF0;

  /* --red stays a red: the shared sheet uses it for form errors, double-booked crew, overdue
     flags and the delete button. It is not a brand colour, and repurposing it would quietly
     strip the meaning out of every warning in the desk. */
  --red: #A83232;
  --red-soft: #F7E4E4;

  /* Mincho for display - it matches the brushed wordmark. Gothic for text. */
  --display: "Shippori Mincho", "Hiragino Mincho ProN", Georgia, serif;
  --body: "Zen Kaku Gothic New", "Hiragino Sans", "Helvetica Neue", Arial, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, Menlo, monospace;
  --script: "Shippori Mincho", Georgia, serif;

  --r: 4px;
  --shadow: 0 1px 2px rgba(23, 21, 28, 0.10);
  --shadow-lg: 0 10px 28px rgba(23, 21, 28, 0.13);
}

/* --- the surfaces where the shared sheet paints a brand colour --- */

/* Sumi band, inverted from Keneke's. */
.topbar { background: var(--ink); color: #EDEAF2; border-bottom: 0; font-weight: 500; }
.topbar a { color: #EDEAF2; }

/* White masthead so the black brush wordmark reads as itself. */
.masthead { background: var(--page); border-bottom: 1px solid var(--line-strong); }
.nav a { color: var(--ink); font-weight: 500; }
.nav a:hover { border-bottom-color: var(--ink); }
.nav a[aria-current="page"] { border-bottom-color: var(--leaf); }
.masthead a:focus-visible { outline: 3px solid var(--navy); }

.book { background: var(--yellow-wash); border-block: 1px solid var(--line); }
.hero { border-bottom: 1px solid var(--line); }
.special-tag { background: var(--navy); }
.loc-sign { background: var(--yellow-wash); }
.footer-top { color: var(--yellow); }

/* --- weight --- */
/* Keneke's chrome is deliberately loud: 2-4px ink borders and hard offset shadows. A tea house
   from 1921 is the opposite. Same structure, quieter. */
.btn--primary { color: var(--ink); }
.btn--primary:hover { transform: none; box-shadow: var(--shadow-lg); }
.cta-box,
.picker,
.q-approve,
.phone-quote { border-width: 1px; }
.tile:hover { transform: none; box-shadow: var(--shadow-lg); }

/* Mincho runs large for its size, and headings are set at display weights the mincho doesn't
   have - so lighten the tracking rather than faking a bold. */
.hero h1,
.page-head h1,
.section-head h2,
.cat-head h2,
.h-section,
.book-head h2 { letter-spacing: -0.01em; }
.eyebrow { letter-spacing: 0.14em; }

/* Keneke's frames its logo like a sign board on the side of the building. Natsunoya's logo is a
   brush wordmark on white - it needs no frame. */
.brand { padding: 0; border: 0; border-radius: 0; background: none; }
.brand img { width: 240px; }

/* The booking section is white-on-dark in the shared sheet, because Keneke's paints it red.
   Natsunoya's is a pale lotus wash, so every light text colour in it has to come back to ink or
   it disappears. (The paper section is dark here too - see the lotus band below.) */
.book-head h2,
.book .step legend,
.book .menu-lines-h,
.book .sent h3 { color: var(--ink); }
.book .opt,
.book .rental-name,
.book .menu-intro,
.book .sent p,
.book .fine { color: var(--ink); }
.book .menu-lines-h small { color: var(--muted); }
.book .hint--warn { color: var(--red); }
.book-head p:last-child { color: var(--muted); }
.book-head p a { color: var(--navy); }

/* The full white-on-red set from site.css lines 265-268. Missing any one of these leaves a
   label invisible on the pale wash, so they're listed exactly as the shared sheet lists them. */
.book-head .eyebrow,
.book .book-head p,
.book .book-head p:last-child,
.book .field > span,
.book .hint,
.book .pan-note summary,
.book .opt,
.book .rental-name,
.book .menu-intro,
.book .sent p,
.book .fine { color: var(--ink); }
.book .hint--good { color: var(--leaf); }
.book-head .eyebrow,
.book .hint,
.book .book-head p:last-child { color: var(--muted); }
.book .step legend small,
.book .field > span small,
.book .opt small,
.book .rental-name small,
.book .menu-lines-h small { color: var(--muted); }

/* Their logo as the footer mark, in place of the shape Keneke's uses. */
.footer-top { padding-block: 40px 16px; }
.footer-top .mark { width: 260px; max-width: 60%; height: auto; }
/* Grows with the page. Keoki asked for 25% bigger than the first pass (200-340px), so 250-425px.
   Worth knowing what that costs: logo-mark.png is only 546px wide, so on a 2x screen it is fully
   sharp to ~273px and this now runs to 425px - about 1.56x upscale at the top end. It is a brush
   wordmark, so it softens rather than pixelates, but a higher-resolution logo from them is the
   only thing that would make this genuinely crisp at size. */
.places-teaser .mark {
  width: clamp(250px, 27.5vw, 425px);
  max-width: 70%;
  height: auto;
  margin-inline: auto;
}
.loc-sign .mark { width: 150px; max-width: 80%; height: auto; }

/* --- full-bleed photo hero ---
   Structural, not Natsunoya-specific: it belongs in the shared site.css once site/public/ stops
   being copied per client. Until then it lives here so Keneke's sheet is untouched. */
.hero--photo {
  position: relative;
  display: grid;
  align-items: end;
  min-height: clamp(420px, 66vh, 680px);
  border-bottom: 0;
  isolation: isolate;
  overflow: hidden;
}
.hero--photo .hero-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Vertical position is what matters on a wide screen (the 4:3 photo overflows top and bottom);
     horizontal is what matters on a phone, where the container is portrait. 35% keeps the teapot
     and cups in frame on wide screens - they're what makes it read as a tea house rather than a
     plate of food - and stays centred for the phone crop. */
  object-position: center 35%;
  z-index: -2;
}
/* A scrim, so the words hold up over any photo they send us later. */
.hero--photo::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  /* Two scrims: one from the left, because the words sit in a left column, and a softer one from
     the bottom. Keeps the right side of the photo visible while the text stays readable. */
  /* Three layers, and the order matters. The flat one is a floor: it bounds how bright the photo
     can be behind any word at any width, which is what stops the readability from depending on
     where the breakpoints happen to fall. The two directional ones only shape it from there. */
  background:
    linear-gradient(to right, rgba(12, 10, 16, 0.82) 0%, rgba(12, 10, 16, 0.66) 46%, rgba(12, 10, 16, 0.14) 80%, rgba(12, 10, 16, 0) 100%),
    linear-gradient(to top, rgba(12, 10, 16, 0.42) 0%, rgba(12, 10, 16, 0.1) 45%, rgba(12, 10, 16, 0.22) 100%),
    linear-gradient(rgba(12, 10, 16, 0.34), rgba(12, 10, 16, 0.34));
}
.hero-photo-in {
  padding-block: 56px clamp(36px, 6vw, 72px);
  max-width: 44rem;
  color: #fff;
}
.hero-photo-in .eyebrow { color: #fff; }
.hero-photo-in h1 {
  font: 400 clamp(2.25rem, 5.4vw, 4rem)/1.05 var(--display);
  margin: 10px 0 14px;
  text-wrap: balance;
}
.hero-photo-in .lede {
  font-size: clamp(1.0625rem, 1.5vw, 1.25rem);
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.92);
  margin-bottom: 26px;
}
.hero-photo-in .actions { display: flex; flex-wrap: wrap; gap: 12px; }
/* The outline button has to read on the photo, not on paper. */
.hero-photo-in .btn {
  background: transparent;
  color: #fff;
  border-color: rgba(255, 255, 255, 0.7);
}
.hero-photo-in .btn:hover { background: rgba(255, 255, 255, 0.14); border-color: #fff; }
.hero-photo-in .btn--primary {
  background: var(--yellow);
  color: var(--ink);
  border-color: var(--yellow);
}
.hero-photo-in .btn--primary:hover { background: var(--yellow-soft); border-color: var(--yellow-soft); }

/* 900px, not 640: the text column is 44rem wide, so anything narrower than about 900 has words
   reaching into the weak end of the left-hand scrim. */
/* At 1850px the hero was 2.8:1, which crops a 4:3 photo down to under half its height. More
   height at wide widths keeps the composition intact. */
@media (min-width: 1500px) {
  .hero--photo { min-height: min(72vh, 780px); }
}

@media (max-width: 900px) {
  .hero--photo { min-height: min(78vh, 620px); }
  .hero-photo-in { padding-block: 40px 44px; }
  /* On a phone the words run the full width, so a scrim from the left does nothing for the end
     of each line. Use a single strong one from the bottom instead. */
  .hero--photo::after {
    background: linear-gradient(to top, rgba(12, 10, 16, 0.92) 0%, rgba(12, 10, 16, 0.78) 52%, rgba(12, 10, 16, 0.5) 100%);
  }
}

/* --- a photo on a menu ---
   Structural, like the photo hero: belongs in the shared sheet once site/public/ is unified. */
.menu-photo { margin: 0 0 30px; }
.menu-photo img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--r);
  border: 1px solid var(--line);
}
.menu-photo figcaption {
  margin-top: 8px;
  font-size: 0.875rem;
  color: var(--muted);
}
/* Their only room photographs are from 2012 and small. Cap the display width near the file's own
   size so they stay sharp instead of being blown up across the column. */
.menu-photo { max-width: 560px; }

/* Location media: Keneke's frames every photo in a 3px ink border with a hard drop shadow. */
.place-media img,
.loc-sign { border-width: 1px; border-color: var(--line-strong); box-shadow: var(--shadow); }
/* The mark inside the name plate is an <img> in .place-media, so it was picking up the photo
   frame - a bordered white box around the logo. */
.loc-sign .mark { border: 0; box-shadow: none; }
.loc-sign { aspect-ratio: 4 / 3; gap: 20px; }

/* --- a selection's photos ---
   The picture is the button. No label beside it: a photo that lifts on hover reads as pressable,
   and a word like "see the photo" just takes up room the photo could use. */
.pkg-photo {
  position: relative;
  display: block;
  width: 100%;
  padding: 0;
  margin: 2px 0 12px;
  background: none;
  border: 0;
  border-radius: var(--r);
  overflow: hidden;
  cursor: pointer;
  line-height: 0;
}
.pkg-photo img {
  display: block;
  width: 100%;
  height: 160px;
  object-fit: cover;
  border-radius: var(--r);
  transition: transform .18s ease-out;
}
.pkg-photo:hover img { transform: scale(1.03); }
.pkg-photo:focus-visible { outline: 3px solid var(--navy); outline-offset: 2px; }
/* The only mark on it: how many more there are, so it's clear there's something behind the one
   you can see. Nothing at all when there's only one. */
.pkg-photo-more {
  position: absolute;
  right: 8px;
  bottom: 8px;
  display: grid;
  place-items: center;
  min-width: 26px;
  height: 26px;
  padding: 0 7px;
  border-radius: 13px;
  background: rgba(12, 10, 16, 0.72);
  color: #fff;
  font: 500 0.8125rem/1 var(--body);
}

.sheet-photo { margin: 0; display: grid; justify-items: center; }
/* Never upscale. Their station photo is 220px wide; blown up to the panel it turns to mush, and
   a small sharp photo is both more honest and easier to look at. */
.sheet-photo img { display: block; width: auto; max-width: 100%; height: auto; border-radius: var(--r); }
.sheet-photo figcaption { text-align: center; }
.sheet-photo figcaption { margin-top: 10px; font-size: 0.875rem; color: var(--muted); }

/* Photographs of a room, on the rooms page. Never upscaled: their two sushi bar photos are ~500px
   and from 2012, and a small sharp picture beats a big soft one. */
.place-photos { display: flex; flex-wrap: wrap; gap: 14px; margin: 4px 0 18px; }
.place-photos figure { margin: 0; max-width: 100%; }
.place-photos img {
  display: block;
  width: auto;
  max-width: 100%;
  height: auto;
  border-radius: var(--r);
  border: 1px solid var(--line);
}
.place-photos figcaption { margin-top: 6px; font-size: 0.8125rem; color: var(--muted); }

/* Who booked: coordinator, office, mortuary. Sits beside the name on a request. */
.ticket-role {
  /* .ticket-main is a grid, so without this the badge stretches the whole column. */
  justify-self: start;
  margin: 3px 0 1px;
  padding: 2px 8px;
  border-radius: 10px;
  background: var(--yellow-soft);
  color: var(--ink);
  font-size: 0.75rem;
  font-weight: 500;
  white-space: nowrap;
}

/* --- the lotus band and the rooms card ---
   The move Keoki liked on hawaiiancouncil.org: one deep colour with a curved top edge and a
   traditional pattern fading in from one side, then a soft rounded card after it. The pattern is
   seigaiha, the Japanese wave-scale - theirs, not CNHA's motif.
   Each pattern tile fills its scales with the colour it sits on, so the scales hide the rings
   behind them. Change --band or --mist and the fill inside that data URI has to change with it. */
:root {
  --band: #3B3056;
  --mist: #EFEBF6;
}

.section--paper {
  --wave-h: clamp(28px, 4vw, 56px);
  position: relative;
  isolation: isolate;
  margin-top: var(--wave-h);
  padding-block: 64px 80px;
  background: var(--band);
  border-block: 0;
}
/* The curve, as a mask over --band, so it can never be a shade off the section under it. The 1px
   overlap stops a hairline showing between them at fractional zoom. */
.section--paper::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: calc(100% - 1px);
  height: var(--wave-h);
  background: var(--band);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 60' preserveAspectRatio='none'%3E%3Cpath d='M0 60V38C420 52 980-8 1440 12V60Z'/%3E%3C/svg%3E") 0 0 / 100% 100% no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 60' preserveAspectRatio='none'%3E%3Cpath d='M0 60V38C420 52 980-8 1440 12V60Z'/%3E%3C/svg%3E") 0 0 / 100% 100% no-repeat;
}
.section--paper::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 24'%3E%3Cdefs%3E%3Cg id='s' stroke='%23C9BCE6' stroke-width='1.3' fill='none'%3E%3Ccircle r='23.4' fill='%233B3056'/%3E%3Ccircle r='17.4'/%3E%3Ccircle r='11.4'/%3E%3Ccircle r='5.4'/%3E%3C/g%3E%3C/defs%3E%3Cuse href='%23s' x='24' y='-12'/%3E%3Cuse href='%23s'/%3E%3Cuse href='%23s' x='48'/%3E%3Cuse href='%23s' x='24' y='12'/%3E%3Cuse href='%23s' y='24'/%3E%3Cuse href='%23s' x='48' y='24'/%3E%3Cuse href='%23s' x='24' y='36'/%3E%3Cuse href='%23s' y='48'/%3E%3Cuse href='%23s' x='48' y='48'/%3E%3C/svg%3E") 0 0 / 72px 36px;
  opacity: 0.2;
  -webkit-mask-image: linear-gradient(to left, #000 15%, transparent 65%);
  mask-image: linear-gradient(to left, #000 15%, transparent 65%);
}
/* A short lotus rule above the heading, where CNHA underlines its eyebrow. */
.section--paper .section-head::before {
  content: "";
  width: 52px;
  height: 2px;
  margin-bottom: 12px;
  background: var(--yellow);
}
.section--paper .section-head h2 { color: #fff; }
.section--paper .section-head p,
.section--paper .section-foot { color: var(--yellow); }
.section--paper .tile { border: 0; border-radius: 10px; box-shadow: 0 1px 3px rgba(12, 10, 16, 0.3); }
.section--paper .tile:hover { box-shadow: 0 14px 32px rgba(12, 10, 16, 0.4); }

/* On a phone the words run the full width, so the pattern comes up from the bottom instead. */
@media (max-width: 760px) {
  .section--paper { padding-block: 48px 60px; }
  .section--paper::after {
    -webkit-mask-image: linear-gradient(to top, #000 10%, transparent 70%);
    mask-image: linear-gradient(to top, #000 10%, transparent 70%);
  }
}

/* The rooms teaser is a .wrap, so it is the card itself. The width leaves the gutter showing on
   either side on a phone, where a plain .wrap would run edge to edge. */
.places-teaser {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  width: calc(100% - 2 * var(--gutter));
  max-width: calc(1140px - 2 * var(--gutter));
  padding: clamp(40px, 6vw, 72px) clamp(20px, 4vw, 48px);
  justify-items: center;
  text-align: center;
  border-radius: 20px;
  background: var(--mist);
}
.places-teaser::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 24'%3E%3Cdefs%3E%3Cg id='s' stroke='%23FFFFFF' stroke-width='1.6' fill='none'%3E%3Ccircle r='23.4' fill='%23EFEBF6'/%3E%3Ccircle r='17.4'/%3E%3Ccircle r='11.4'/%3E%3Ccircle r='5.4'/%3E%3C/g%3E%3C/defs%3E%3Cuse href='%23s' x='24' y='-12'/%3E%3Cuse href='%23s'/%3E%3Cuse href='%23s' x='48'/%3E%3Cuse href='%23s' x='24' y='12'/%3E%3Cuse href='%23s' y='24'/%3E%3Cuse href='%23s' x='48' y='24'/%3E%3Cuse href='%23s' x='24' y='36'/%3E%3Cuse href='%23s' y='48'/%3E%3Cuse href='%23s' x='48' y='48'/%3E%3C/svg%3E") 0 0 / 64px 32px;
  -webkit-mask-image: linear-gradient(to right, #000 5%, transparent 55%);
  mask-image: linear-gradient(to right, #000 5%, transparent 55%);
}
.places-teaser .featured { margin-inline: auto; }