/* ==========================================================================
   base.css — the constitution. Tokens, reset, type, layout, header, footer,
   buttons, cards, grids. Every page loads this first.

   Frozen after P3. page-index / page-popup / page-women / page-men add
   page-specific rules on top and never edit this file; if something here has
   to change, it changes here once, for all four pages.

   Every number below is measured from the reference this design follows —
   its home page and its seasonal feature page — and translated, not copied.
   Where the reference uses a licensed typeface the site uses Zen Kaku Gothic
   New at the matching weights.

   ⚠ Where this file and 設計図 §3 disagree, THIS FILE IS CORRECT. The design
   document was written before the forensic pass and six of its values did not
   survive measurement — container width, section rhythm, the ground colour,
   the slider arrows, the reveal timing, and where red is allowed. Each
   correction is annotated at the token. The flow document's own rule applies:
   印象と実測は食い違う、実測が正.

   Rules that hold everywhere:

   1. No shadows. `box-shadow` and `text-shadow` alike. Copy set over imagery
      is made readable by whitespace composed into the photograph (設計図 §8-3),
      never by a halo added in CSS. Reaching for a shadow means the image is
      wrong.
   2. No raw colour values outside this :root block. The previous build kept
      26 tokens and then wrote ~36 loose `rgba()` alongside them, so replacing
      the palette missed a third of the site. Everything is `var()`.
   3. `overflow-x: clip`, always as the second of two declarations. Plain
      `overflow-x:hidden` promotes overflow-y to `auto` and turns the block
      into an inner scroller on iOS.
   4. Grid cards never combine a stretched track with `aspect-ratio` and an
      absolutely positioned child — that trio collapses the box to 0×0 in
      WebKit. Card media gets an explicit height instead.
   5. Japanese line breaking is `line-break: strict` only. Adding
      `word-break: keep-all` with `overflow-wrap: anywhere` strands particles
      at the end of a line at narrow widths.
   6. State is carried on `data-*` attributes, not on toggled classes — the
      anchor does this throughout (`data-visible`, `data-expanded`,
      `data-scroll`) and CSS reads far better for it.
   7. Two hover transitions exist on the anchor and no others: links move
      `color` over 0.2s ease (121 elements), buttons move `color` and
      `background` over 0.3s ease (8). Anything else is invention.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Tokens
   -------------------------------------------------------------------------- */
:root {
  /* --- ground ----------------------------------------------------------
     ⚠ Correction. 設計図 §3-1 gives the brand site #FFFFFF and the card face
     #F4F4F2. Measured, it is the other way round: the page ground samples a
     stable rgb(243,243,241) across every tile and pure white never appears on
     a single pixel, while card faces are transparent. An off-white ground is
     also most of why the anchor reads as printed rather than rendered. */
  --ground:     #F4F4F2;   /* the brand site's ground */
  --ground-alt: #E6E7EB;   /* the band behind COORDINATES and CONTENTS — absent from 設計図, measured on two sections */
  --paper:      #FAEDCD;   /* the feature page's ground, measured rgb(250,237,205) */
  --ink-rev:    #FFFFFF;   /* reversed-out text only — never a surface */

  /* White as a SURFACE, which is a different thing from white as text and is
     needed in exactly two places on the feature page: the border around a
     tilted photograph and the small pill labels. Both are white against the
     cream ground on the anchor. Separate token so `--ink-rev` keeps meaning
     "text knocked out of something dark". */
  --surface-white: #FFFFFF;

  /* --- ink -------------------------------------------------------------
     The home page uses exactly three: --ink (158 elements), --ink-sub (20),
     white (8). --ink-deep appears ONLY on the feature page. Keeping it that
     way is what makes the depth design legible in colour and not just in
     decoration. */
  --ink:        #1C2940;
  --ink-deep:   #193854;   /* ⚠ popup.html only */

  /* Measured #838994 on the reference, darkened to #616670 here. Same hue and
     chroma, lower value — visually the same grey, and the reason is that this
     token does not carry decoration. 57 rules use it, and among them are
     prices, dates and the definition lists in the store and event blocks.
     At the measured value it lands at 3.02 : 1 on the cream ground and
     3.19 : 1 on the off-white — under AA for body text on every surface the
     site has. At #616670: 4.96 / 5.23 / 4.67. Copying a contrast failure is
     not fidelity to the reference, it is inheriting its bug. */
  --ink-sub:    #616670;
  --ink-mute:   #A2A2A0;   /* disabled slider arrow — decorative only */

  /* The pale end of the feature page's first-view gradient. --ink-deep held
     at its own hue and chroma and lifted to 65% lightness, so the ramp reads
     as one colour getting lighter rather than as two colours meeting.
     ⚠ popup.html only, and only inside that gradient. */
  --ink-sky:    #7BAAD1;

  /* --- accent ----------------------------------------------------------
     ⚠ Correction. 設計図 §4-1 puts red circled arrows on the home page's
     sliders. There is no red anywhere in the home page's interface — every
     red pixel across seven full-page tiles falls inside a photograph or an
     illustration. Red is the feature page's colour. Introducing it on
     index.html would spend the loudest note in the palette on the quietest
     page and flatten the whole progression. */
  --red:        #D21D17;   /* ⚠ popup.html, and the POP-UP hand-off band on women/men */
  --red-hair:   rgba(210, 29, 23, .10);

  /* --- line ------------------------------------------------------------ */
  --line:       #E5E7E9;
  --line-soft:  #CCCED3;   /* footer rule */

  /* --- editorial card faces --------------------------------------------
     The anchor gives each reading-card block a different face colour. Using
     one per section is what stops the page reading as a template. */
  --card-blue:    rgba(71, 113, 139, .20);
  --card-gray:    rgba(151, 151, 151, .20);
  --card-mustard: #E3C46A;
  --card-teal:    #7FA3A8;
  --card-sage:    #A8B39A;
  --card-salmon:  #E8A38C;
  --card-cream:   #F1E6CE;

  /* --- type ------------------------------------------------------------ */
  --font: "Zen Kaku Gothic New", system-ui, sans-serif;

  --fs-section: 50px;    /* English section titles — Light, tracked in, sentence case */
  --fs-h1:      clamp(38px, 4.2vw, 60px);
  --fs-h2:      48px;    /* vertical headings — feature page only */
  --fs-lead:    20px;    /* article card titles, measured Bold/1.3 */
  --fs-card:    16px;
  --fs-nav:     16px;
  --fs-body:    14px;
  --fs-small:   12px;
  --fs-label:   10px;
  --fs-marquee: clamp(72px, 9vw, 140px);   /* 140px measured */

  /* --- spacing ---------------------------------------------------------
     ⚠ Correction. 設計図 §3-3 gives 200px between sections, measured on
     #first_articles / #second_articles — both of which are on the FEATURE
     page. The home page, which index.html reproduces, runs a flat 160px
     across all nine gaps (checked one by one), with a single 344px opening
     after the key visual. Carrying 200px onto index would stretch it by
     ~360px of nothing and lose the difference between the two pages. */
  --space-section: 160px;   /* popup.html overrides to 200px */
  --space-hero:    344px;   /* the one deliberate gap, under the key visual */
  --space-head:    108px;   /* section title block: 50px × lh 2.0 + 8px. Identical on all four home sections */
  --space-block:    64px;   /* grid ROW gap — measured, and not equal to the column gap */
  --space-gutter:   80px;   /* page margin at full width */

  /* ⚠ Correction. 1168px does not occur anywhere in the measured data.
     Every home section box is 1280 wide and its rules run x80..x1360. */
  --w-container: 1280px;   /* sliders, feature, news, contents */
  --w-narrow:    1120px;   /* key visual, store block */
  --w-wide:      1360px;   /* feature-page article grid */
  --w-marquee:   1260px;
  --w-article:    800px;

  /* --- shape -----------------------------------------------------------
     Radii are not uniform on the anchor and should not be made uniform here:
     product / news / contents media are square-cornered, only the editorial
     cards are rounded, and the outlined button has no radius at all. */
  --r-card:    10px;   /* editorial cards only */
  --r-button:   6px;   /* filled buttons only */
  --r-round:   50%;

  /* The fixed header's height, in one place. It drives both the space the
     content starts below and how far an in-page anchor stops short — those
     two have to agree or every `#section` link parks its heading underneath
     the header. Measured: all five in-page anchors on index landed with the
     heading fully hidden before this existed. */
  --header-h: 130px;

  /* THE ONE SANCTIONED SHADOW. Rule 1 of this file is that the site has no
     shadows, and that holds for index, women and men, and for `text-shadow`
     everywhere without exception. The feature page is the one place the
     reference itself breaks it: its own feature page measures 15 shadows,
     all on a collage of tilted, white-bordered photographs. Without one they
     read as flat coloured rectangles rather than prints lying on a table.

     It lives here rather than in page-popup.css so that nobody re-derives a
     shadow from scratch when a second collage turns up, and so the exception
     is visible to anyone reading the constitution. Ruling 2026-08-01.
     Use on `.polaroid` and nothing else. */
  --shadow-polaroid: 0 2px 10px rgba(28, 41, 64, .14);
}

@media (max-width: 1024px) {
  :root { --space-gutter: 40px; }
}

@media (max-width: 900px) {
  :root {
    --space-section: 120px;
    --space-hero:    200px;
    --space-head:     72px;
    --space-block:    48px;
    --fs-section:     34px;
    --fs-h2:          36px;
  }
}

@media (max-width: 540px) {
  :root {
    --space-section: 96px;
    --space-hero:   140px;
    --space-gutter:  20px;
    --fs-section:    28px;
  }
}

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

html {
  overflow-x: hidden;
  overflow-x: clip;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  overflow-x: hidden;
  overflow-x: clip;
  background: var(--ground);
  color: var(--ink);
  font-family: var(--font);
  font-size: var(--fs-body);
  font-weight: 400;
  line-height: 1.86;
  letter-spacing: -.03em;
  line-break: strict;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6, p, figure, blockquote, dl, dd { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }

img, svg, video { max-width: 100%; }
img, video { display: block; height: auto; }

a {
  color: inherit;
  text-decoration: none;
  transition: color .2s ease;   /* the anchor's one link hover, on 121 elements */
}

button {
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  color: inherit;
  cursor: pointer;
}

:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 3px;
}

/* --------------------------------------------------------------------------
   Type
   -------------------------------------------------------------------------- */

/* English section titles. Measured 50px A1 Gothic Light, ls -1.5px, lh 2.0,
   flush left with the container, and set in SENTENCE case — "New arrivals",
   never "NEW ARRIVALS". The lowercase is a large part of why the anchor reads
   as quiet, and all-caps is the single most common tell of a generated page. */
.section-title {
  font-size: var(--fs-section);
  font-weight: 300;
  line-height: 2;
  letter-spacing: -.03em;
}

.h1 {
  font-size: var(--fs-h1);
  font-weight: 300;
  line-height: 1.13;
  letter-spacing: -.05em;
}

/* Vertical headings — feature page only. The anchor alternates which side of
   the block they hang off, and never places one alone: each is accompanied by
   a red triple stamp, a 12px vertical standfirst, or a vertical year.
   `line-height` stays at or above 1.1 so glyphs are not clipped. */
.h2-vertical {
  writing-mode: vertical-rl;
  font-size: var(--fs-h2);
  font-weight: 400;
  line-height: 1.15;
  letter-spacing: .04em;
}

.h-card { font-size: var(--fs-card); font-weight: 500; line-height: 1.6; letter-spacing: -.02em; }
.lead   { font-size: var(--fs-lead); font-weight: 700; line-height: 1.3;  letter-spacing: -.02em; }
.body-sm{ font-size: var(--fs-small); line-height: 1.67; letter-spacing: .04em; }

/* Category labels — 10px, tracked out. Red is the feature page's; on the
   brand pages a label takes --ink-sub. */
.label {
  display: inline-block;
  font-size: var(--fs-label);
  font-weight: 500;
  line-height: 1;
  letter-spacing: .08em;
  color: var(--ink-sub);
}

.label--red { color: var(--red); }

.date {
  font-size: var(--fs-label);
  line-height: 1;
  letter-spacing: .06em;
  color: var(--ink-sub);
}

/* --------------------------------------------------------------------------
   Layout
   -------------------------------------------------------------------------- */
.container { width: min(var(--w-container), calc(100% - var(--space-gutter) * 2)); margin-inline: auto; }
.narrow    { width: min(var(--w-narrow),    calc(100% - var(--space-gutter) * 2)); margin-inline: auto; }
.wide      { width: min(var(--w-wide),      calc(100% - var(--space-gutter) * 2)); margin-inline: auto; }
.article   { width: min(var(--w-article),   calc(100% - var(--space-gutter) * 2)); margin-inline: auto; }

/* Every section that carries a decoration layer needs its own containing
   block, or the decoration escapes into the next section. */
.section {
  position: relative;
  margin-top: var(--space-section);
}

/* Anchored sections stop short of the fixed header instead of sliding under
   it. Applies to any element with an id, so a page adding one gets this for
   free rather than having to remember. */
[id] { scroll-margin-top: calc(var(--header-h) + 24px); }

.section--hero-gap { margin-top: var(--space-hero); }

/* The anchor's sections run 970–1722px tall. These exist so pages vary the
   rhythm on purpose rather than every band landing on the same padding —
   the most legible tell of a generated page. */
.section--tight { margin-top: calc(var(--space-section) * .6); }
.section--airy  { margin-top: calc(var(--space-section) * 1.4); }

/* Section head: title flush left, a 12px underlined link flush right on the
   same line. The anchor never places a section title on its own. */
.section__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 24px;
  min-height: var(--space-head);
}

.section__more {
  flex: none;
  font-size: var(--fs-small);
  line-height: 1;
  border-bottom: 1px solid currentColor;
  padding-bottom: 4px;
}

/* At phone widths the title and its link stop fitting on one line and the
   link gets clipped at the viewport edge. Let the row wrap and keep the link
   right-aligned on its own line rather than shrinking either one. */
@media (max-width: 700px) {
  .section__head { flex-wrap: wrap; row-gap: 14px; }
  .section__more { margin-left: auto; }
}

/* Grounds. Bands alternate to build the light/dark rhythm; the anchor draws
   one band's edges as flat horizontals and the next as arcs, so consecutive
   bands never read as the same device. */
.on-ground { background: var(--ground); }
.on-alt    { background: var(--ground-alt); }
.on-paper  { background: var(--paper); }
.on-ink    { background: var(--ink); color: var(--ink-rev); }

/* Which ground this page is built on, for the few chrome elements that have
   to match it — the scrolled header and the menu panel. */
body[data-page="popup"] { --page-ground: var(--paper); }

/* --------------------------------------------------------------------------
   Rules
   -------------------------------------------------------------------------- */
.rule       { border: 0; border-top: 1px solid var(--line); }
.rule--soft { border-top-color: var(--line-soft); }
.rule--red  { border-top-color: var(--red-hair); }

/* --------------------------------------------------------------------------
   Buttons

   The anchor runs three filled sizes on the home page and a fourth on the
   feature page, so a single button size would already be a departure. The
   outlined button has NO radius — a detail worth keeping precisely because
   nobody would invent it.
   -------------------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: min(200px, 100%);
  height: 46px;
  border-radius: var(--r-button);
  background: var(--ink);
  color: var(--ink-rev);
  font-size: var(--fs-nav);
  font-weight: 500;
  letter-spacing: .28px;
  transition: color .3s ease, background-color .3s ease;
}

.btn:hover { background: var(--ink-deep, var(--ink)); }

.btn--lg      { width: min(400px, 100%); height: 64px; }
.btn--sm      { width: min(160px, 100%); height: 36px; font-size: var(--fs-small); }
.btn--feature { width: min(300px, 100%); height: 64px; }

.btn--line {
  width: min(300px, 100%);
  height: 35px;
  border-radius: 0;
  background: none;
  color: var(--ink);
  border: 1px solid var(--line-soft);
  font-size: var(--fs-small);
  font-weight: 400;
  letter-spacing: -.24px;
}

.btn--line:hover { background: none; border-color: var(--ink); }

/* Slider controls — 54φ, 1px outline, no fill. Previous is muted grey, next
   is ink. ⚠ These are NOT red: see the --red token note. */
.arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 54px;
  height: 54px;
  border: 1px solid currentColor;
  border-radius: var(--r-round);
  color: var(--ink);
  font-size: 13px;
  transition: color .3s ease, background-color .3s ease;
}

.arrow:hover { background: var(--ink); color: var(--ink-rev); }
.arrow[disabled],
.arrow[aria-disabled="true"] { color: var(--ink-mute); pointer-events: none; }

/* The feature page's filled red control, the loud cousin of the above. */
.arrow--solid {
  width: 78px;
  height: 78px;
  border-color: var(--red);
  background: var(--red);
  color: var(--ink-rev);
}

.arrow--solid:hover { background: var(--ink-deep); border-color: var(--ink-deep); }

/* --------------------------------------------------------------------------
   Cards

   Media height is set explicitly rather than with `aspect-ratio`, so a card
   can sit in a stretched grid track and still hold a positioned label without
   collapsing to 0×0 in WebKit.

   Measured internals:
     product   400×536  — image only, no text block, square corners
     news      298×493  — image 298×397, then 32px, date, 20px, 2 lines
     contents  624×421  — image 624×336, then 24px, date, 8px, body
     editorial 334×527  — coloured face, 10px radius, 22px inset, round thumb
   -------------------------------------------------------------------------- */
.card { position: relative; }

.card__media {
  position: relative;
  overflow: hidden;
  border-radius: 0;          /* square — only editorial cards are rounded */
  background: var(--ground-alt);
}

.card__media > img { width: 100%; height: 100%; object-fit: cover; }

.card__title { margin-bottom: 6px; }
.card__meta  { display: flex; align-items: center; gap: 12px; }

.card--product .card__media { height: 536px; }
.card--product .card__body  { display: none; }   /* the anchor's product cards carry no caption */

.card--news .card__media { height: 397px; }
.card--news .card__body  { padding-top: 32px; }
.card--news .date        { display: block; margin-bottom: 20px; }

.card--contents .card__media { height: 336px; }
.card--contents .card__body  { padding-top: 24px; }
.card--contents .date        { display: block; margin-bottom: 8px; }

/* Editorial / reading card — the feature page's, and the one the deeper
   pages reuse. Face colour is passed in per section, never defaulted. */
.card--editorial {
  padding: 22px;
  border-radius: var(--r-card);
  background: var(--face, var(--card-cream));
}

.card--editorial .card__title { margin: 12px 0 8px; }

@media (max-width: 900px) {
  .card--product  .card__media { height: 380px; }
  .card--news     .card__media { height: 300px; }
  .card--contents .card__media { height: 260px; }
}

@media (max-width: 540px) {
  .card--product  .card__media { height: 320px; }
  .card--news     .card__media { height: 260px; }
  .card--contents .card__media { height: 220px; }
}

/* Thumbnails — both shapes measure 290×290 on the anchor. The round one
   belongs to the women page's reading cards, the square to the men page's,
   so the two never look like the same block recoloured.

   The 290 is a maximum, not a fixed size, and the square comes from
   `aspect-ratio` rather than a second fixed value. A fixed 290px width sets
   the card's min-content size, a grid track cannot shrink below its items'
   min-content, and a four-up of these overflowed its container by 146px —
   the fourth column was cut off at the viewport edge. Sizing from the track
   instead also keeps the round one round; at a fixed width with a fluid
   parent it flattened into an ellipse at every width but the widest.

   `aspect-ratio` is safe HERE despite rule 4 at the top of this file: the
   WebKit collapse needs a stretched track AND `aspect-ratio` AND an
   absolutely positioned child. A thumbnail holds one static <img> and never
   the third condition. Card MEDIA still takes an explicit height, because
   those do carry positioned labels. */
.thumb { width: 290px; max-width: 100%; aspect-ratio: 1 / 1; overflow: hidden; background: var(--ground-alt); }
.thumb > img { width: 100%; height: 100%; object-fit: cover; }
.thumb--round  { border-radius: var(--r-round); }
.thumb--square { border-radius: 0; }

/* --------------------------------------------------------------------------
   Grids — column gaps 30px on the four-up, 32px on the two-up. The ROW gap
   is 64px on both and is deliberately not equal to the column gap.
   -------------------------------------------------------------------------- */
/* `min-width: 0` on the items: a grid item's automatic minimum is its
   min-content size, so one fixed-width descendant anywhere inside a card
   silently sets a floor under every track and the row stops fitting. */
.grid   { display: grid; row-gap: var(--space-block); }
.grid > * { min-width: 0; }
.grid--2{ grid-template-columns: repeat(2, 1fr); column-gap: 32px; }
.grid--3{ grid-template-columns: repeat(3, 1fr); column-gap: 30px; }
.grid--4{ grid-template-columns: repeat(4, 1fr); column-gap: 30px; }

@media (max-width: 1024px) { .grid--4 { grid-template-columns: repeat(3, 1fr); } }

@media (max-width: 900px) {
  .grid--3,
  .grid--4 { grid-template-columns: repeat(2, 1fr); column-gap: 24px; }
}

@media (max-width: 540px) {
  .grid--2,
  .grid--3,
  .grid--4 { grid-template-columns: 1fr; column-gap: 0; }
}

/* Horizontal rail — 400px slides, 40px apart, scrolled natively. No wheel
   hijacking anywhere on this site. */
.rail {
  display: flex;
  gap: 40px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}

.rail::-webkit-scrollbar { display: none; }
.rail > * { flex: 0 0 400px; max-width: 78vw; scroll-snap-align: start; }

/* Controls row: a 2px progress track on the left, the two arrows flush right
   on the same centre line, 16px apart. Measured 30px under the slides. */
.rail__controls {
  display: flex;
  align-items: center;
  gap: 20px;
  margin-top: 30px;
}

.rail__progress { flex: 1; height: 2px; background: var(--line); }
.rail__progress > span { display: block; height: 100%; background: var(--ink); }
.rail__nav { flex: none; display: flex; gap: 16px; }

/* --------------------------------------------------------------------------
   Header — measured: transparent, no bottom rule, 130px tall, 80px side
   padding. The logo is FIRST in the DOM and centred visually; the three links
   sit left of centre behind a menu button, the account and cart icons right.
   Putting POP-UP first in the link list is this site's own decision: the
   feature page is what the site is currently for.
   -------------------------------------------------------------------------- */
.site-header {
  position: fixed;
  inset: 0 0 auto;
  z-index: 100;
  height: var(--header-h);
  display: flex;
  align-items: center;
  padding-inline: var(--space-gutter);
  background: none;
  transition: transform .2s cubic-bezier(.77, 0, .175, 1),
              opacity .2s ease,
              background-color .2s ease;
}

.site-header[data-visible="false"] { transform: translateY(-100%); opacity: 0; }

/* Transparent over the key visual, opaque once you have scrolled off it.
   main.js has always set `data-scroll`; nothing read it, so the header stayed
   transparent the whole way down and the centred wordmark sank into whatever
   photograph happened to be behind it — measured unreadable over the navy
   coat at scrollY 6200 on the feature page. The ground is inherited from the
   page rather than hard-coded, so the feature page gets cream and the rest
   get off-white. */
.site-header[data-scroll="true"] { background: var(--page-ground, var(--ground)); }

.site-header__inner {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
}

.site-header__logo {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  width: 84px;
}

.site-header__left  { display: flex; align-items: center; gap: 44px; }
.site-header__right { display: flex; align-items: center; gap: 34px; margin-left: auto; }
.site-header__links { display: flex; gap: 32px; font-size: var(--fs-nav); line-height: 2; }
.site-header__icon  { width: 16px; height: 16px; }

/* The reference's menu mark is not three plain rules: the bars are uneven
   (12 / 6 / 8px) and a 14px ring overlaps the right end. Redrawn, not traced. */
.menu-button { display: flex; flex-direction: column; justify-content: space-between; width: 26px; height: 16px; }
.menu-button > span { display: block; height: 2px; background: currentColor; transition: width .2s ease, transform .2s ease; }
.menu-button > span:nth-child(1) { width: 12px; }
.menu-button > span:nth-child(2) { width: 6px; }
.menu-button > span:nth-child(3) { width: 8px; }

/* Open: the three uneven bars even up. Cheap, but it tells you the button did
   something, which is the one thing it was not doing before. */
.menu-button[aria-expanded="true"] > span { width: 20px; }

/* The panel the button opens.

   It exists because below 1024px the inline links are hidden and the button
   was the only way to reach the other pages — and the button was inert, with
   `aria-controls` pointing at an id that was nowhere in the markup. A phone
   visitor could not leave the page they landed on except through a link in
   the body. It stays available at every width rather than only on phones,
   both because the reference keeps its own menu mark at every width and
   because the panel carries one entry the inline nav does not. */
.site-menu {
  position: absolute;
  inset: var(--header-h) 0 auto;
  padding: 4px var(--space-gutter) 30px;
  background: var(--page-ground, var(--ground));
  border-top: 1px solid var(--line);
}

.site-menu[hidden] { display: none; }

.site-menu a {
  display: block;
  padding: 20px 0;
  font-size: var(--fs-nav);
  line-height: 1.4;
  border-bottom: 1px solid var(--line);
}

.site-menu li:last-child a { border-bottom: 0; }
.site-menu a[aria-current="page"] { color: var(--ink-sub); }

/* Content clears the fixed header. */
.site-main { padding-top: var(--header-h); }

/* Content clears the fixed header. */
.site-main { padding-top: var(--header-h); }

@media (max-width: 1024px) {
  :root { --header-h: 88px; }
  .site-header__links { display: none; }
}

/* --------------------------------------------------------------------------
   Footer — measured 219px tall on both reference pages, container 1280px.
   A 1px rule in --line-soft separates a 145px upper block from a 74px lower
   one. The social links sit ABOVE the rule at its right end even though they
   come first in the lower block's markup.
   -------------------------------------------------------------------------- */
.site-footer { margin-top: var(--space-section); }

.site-footer__upper {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 145px;
}

.site-footer__logo { width: 178px; }
.site-footer__mark { width: 156px; margin-left: 80px; }

.site-footer__social {
  position: absolute;
  right: 0;
  bottom: 24px;
  display: flex;
  align-items: center;
  gap: 36px;
  font-size: var(--fs-small);
}

.site-footer__lower {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  min-height: 74px;
  border-top: 1px solid var(--line-soft);
  font-size: var(--fs-small);
}

.site-footer__links { display: flex; flex-wrap: wrap; gap: 36px; }
.site-footer__right { display: flex; align-items: center; gap: 36px; margin-left: auto; }
.site-footer__lang  { display: flex; gap: 36px; }

/* Credit and the fictional business details, set below the measured block —
   the anchor has no equivalent, so they take the quietest treatment on the
   page rather than inventing a device for them. */
.site-footer__credit,
.site-footer__contact {
  color: var(--ink-sub);
  padding-bottom: 4px;
}

.site-footer__credit { padding-top: 24px; }
.site-footer__credit a { border-bottom: 1px solid currentColor; }
.site-footer__contact { padding-bottom: 40px; }

@media (max-width: 900px) {
  .site-footer__upper  { flex-wrap: wrap; gap: 24px; padding-block: 32px; }
  .site-footer__mark   { margin-left: 0; }
  .site-footer__social { position: static; }
  .site-footer__lower  { flex-direction: column; align-items: flex-start; gap: 20px; padding-block: 24px; }
  .site-footer__right  { margin-left: 0; }
}

/* --------------------------------------------------------------------------
   Utilities
   -------------------------------------------------------------------------- */
.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* Japanese line breaking. `.nb` keeps a short run together; `.br-pc` and
   `.br-sp` place a break at one width without changing the other. Wording is
   never altered to fit — only where it breaks. */
.nb { white-space: nowrap; }
.br-pc { display: none; }
.br-sp { display: none; }

@media (min-width: 901px) { .br-pc { display: inline; } }
@media (max-width: 540px) { .br-sp { display: inline; } }

.only-pc { display: revert; }
.only-sp { display: none; }

@media (max-width: 540px) {
  .only-pc { display: none; }
  .only-sp { display: revert; }
}

/* Without JavaScript nothing is hidden, so the page reads in full. */
html:not(.js) [data-reveal] { opacity: 1; transform: none; }