/* ==========================================================================
   Nori Kai - coming-soon page
   ==========================================================================

   Layout, not content. To change wording or the address, edit index.html.

   Two things here are load-bearing:

   1. The colours below are taken from the vector logo itself, not invented.
      The page logo is a transparent SVG, so --ink can change without leaving a
      seam - but the favicon and social card are rasters baked on --ink, so if
      you change it, also change BG in tools/build-assets.py and re-run it.

   2. There is no webfont, on purpose. The logo carries the identity; the page
      has one short line and an address. A self-hosted subset face would cost
      real bytes and risk a flash of unstyled text to render ~50 characters.
      The system stack renders instantly and costs nothing.
   ========================================================================== */

:root {
  --ink:    #0c0c0c;  /* page background. See note 1 above. */
  --cream:  #f4eee5;  /* the wordmark colour in the logo; the opening line */
  --muted:  #8c867e;  /* footer address. 5.4:1 on --ink, passes AA */
  --faint:  #888179;  /* "Operated by" label. 5.1:1 - dimmest step that still
                         passes AA. Do not darken without re-measuring. */
  --olive:  #6d6a45;  /* the brush ring in the logo */
  --focus:  #a8a46b;  /* brighter olive, for visible keyboard focus */

  /* The logo's vermilion is #9a492c. It appears in the mark only - nothing on
     the page uses it as an accent, and it should stay that way. */

  --sans: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto,
          Helvetica, Arial, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  min-height: 100vh;
  min-height: 100svh;          /* avoids a jump when mobile browser chrome hides */
  display: flex;
  flex-direction: column;
  background: var(--ink);
  color: var(--cream);
  font-family: var(--sans);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* --- the logo and the one line ------------------------------------------- */

.stage {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 3rem 1.25rem 1.5rem;
  text-align: center;
}

/* The <h1> is the logo: the mark is the page's heading, and the img's alt text
   is what a screen reader announces. No separate hidden heading needed. */
/* Sized with % + max-width rather than vw on purpose: vw includes the width of
   a desktop scrollbar, so a vw-sized element can overflow horizontally. The
   side breathing room comes from .stage's padding. */
.mark {
  margin: 0;
  width: 100%;
  max-width: 20rem;
  line-height: 0;
}

.mark img {
  display: block;
  width: 100%;
  height: auto;
}

/* Sentence case, per the voice rule. An earlier version set this in
   letterspaced caps to echo the logo's SUSHI - SAKE subline; Charlie chose the
   voice rule over the visual echo. Do not re-uppercase it.
   The tracking stays light because heavy tracking on lowercase reads as a
   mistake rather than as a decision. */
.opening {
  margin: 2.25rem 0 0;
  font-size: 1rem;
  font-weight: 400;
  letter-spacing: 0.02em;
  color: var(--cream);
}

/* --- 404 page only ------------------------------------------------------- */

/* The 404 shows the real logo at the same size as the home page, so it reuses
   .mark and .opening as-is. Nothing here overrides the mark's size on purpose -
   one consistent scale across the site. */

.lede {
  margin: 2rem 0 0;
  font-size: 0.875rem;
  letter-spacing: 0.04em;
}

.lede a {
  color: var(--muted);
  text-decoration: underline;
  text-underline-offset: 0.25em;
}

.lede a:hover,
.lede a:focus-visible { color: var(--cream); }

/* --- footer -------------------------------------------------------------- */

.foot {
  padding: 1.5rem 1.25rem 2.5rem;
  text-align: center;
}

.foot address {
  font-style: normal;          /* <address> italicises by default */
  font-size: 0.8125rem;
  line-height: 1.7;
  letter-spacing: 0.06em;
}

.foot a {
  color: var(--muted);
  text-decoration: none;
}

.foot address a:hover,
.foot address a:focus-visible {
  color: var(--cream);
  text-decoration: underline;
  text-underline-offset: 0.25em;
  text-decoration-thickness: 1px;
}

/* --- operator credit ----------------------------------------------------- */

/* Small caps label. Sits a step below the address in the hierarchy - this is
   attribution, not something anyone came here for - but it still has to pass
   AA, so --faint is the dimmest warm grey that clears 4.5:1 on --ink.
   Measured 5.09:1, against the address's 5.43:1. An earlier value (#7c766e)
   looked right and measured 4.35:1, i.e. it failed. Don't darken this without
   re-measuring. */
.orglabel {
  margin: 2rem 0 0.625rem;
  font-size: 0.6875rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--faint);
}

.orglink {
  display: inline-block;
  line-height: 0;
}

/* The mark is white artwork, so it sits slightly back at rest and comes fully
   forward on hover or keyboard focus - affordance without adding a colour. */
.orglink img {
  display: block;
  width: 130px;
  height: auto;
  opacity: 0.78;
  transition: opacity 120ms ease;
}

.orglink:hover img,
.orglink:focus-visible img { opacity: 1; }

:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 4px;
  border-radius: 2px;
}

/* --- short screens ------------------------------------------------------- */

/* Short portrait phones - 320x568 and 360x640. The operator credit pushed these
   ~53px into scrolling. Cannot overlap the two rules below: anything portrait
   and at least 40em wide is necessarily taller than 40em. */
@media (max-height: 40em) and (orientation: portrait) {
  .stage    { padding: 2rem 1.25rem 1rem; }
  .mark     { max-width: 17rem; }
  .opening  { margin-top: 1.5rem; }
  .orglabel { margin: 1.25rem 0 0.5rem; }
  .foot     { padding-bottom: 1.5rem; }
}

/* --- wider screens ------------------------------------------------------- */

@media (min-width: 40em) {
  .stage  { padding: 4rem 2rem 2rem; }
  .mark   { max-width: 26rem; }
  .opening {
    margin-top: 2.75rem;
    font-size: 1.0625rem;
    letter-spacing: 0.03em;
  }
  .foot   { padding-bottom: 3rem; }
}

/* Short desktop windows. A maximised 1280x800 laptop leaves roughly 720px of
   viewport once browser chrome is taken off, and at the full desktop sizes the
   operator credit pushed the page 79px into scrolling. Trimming the mark and
   the vertical padding keeps the whole page on one screen down to ~670px tall.
   Below that it does scroll a little, which is normal and not worth shrinking
   the mark further for. */
@media (min-width: 40em) and (max-height: 52em) {
  .stage   { padding: 3rem 2rem 1.5rem; }
  .mark    { max-width: 21rem; }
  .opening { margin-top: 2.25rem; }
  .foot    { padding-bottom: 2rem; }
}

/* Short landscape phones. Tuned so the whole page still fits in 375px of
   height without scrolling - at the default sizes it overflowed by ~58px. */
@media (max-height: 34em) and (orientation: landscape) {
  .stage   { padding: 1.5rem 1.25rem 1rem; }
  .mark    { max-width: 8rem; }
  .opening { margin-top: 1rem; font-size: 0.8125rem; }
  .foot    { padding: 1rem 1.25rem 1.5rem; }
  /* The operator credit adds ~94px of footer; without these the page
     overflows a 375px-tall screen. */
  .orglabel    { margin: 1rem 0 0.5rem; }
  .orglink img { width: 104px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}