@charset "UTF-8";

/* ==================================================================
   Duke Kahanamoku Gallery

   Palette, type and spacing follow DUKE-BRAND-CORE.md section 5.
   Two rules shaped this file more than any taste of mine:

   1. No photograph of Duke may appear until it is cleared in writing,
      per image. So the design cannot lean on a portrait. It is type-led,
      and the page has to carry itself on rhythm and space.

   2. The restraint rule: two brand colours plus one neutral on any one
      surface. Gold is used five times and only five: the hero waterline,
      the list bullet, the pull-quote rule, the footer tagline, and the
      primary button on hover. Four of those are non-text marks. The one
      that is text, the tagline, is set at 24px, because gold on Duke Blue
      is 3.8:1 and clears the 3:1 large-text bar and nothing below it.

   Colour values are marked PROVISIONAL in the canon pending Kenneth
   Berger's confirmation of the blue. They are variables for that reason.
   ================================================================== */

:root {
  /* brand */
  --duke-blue: #003b5c;
  --olympic-gold: #b08d57;
  --waikiki-sand: #dfd3c3;
  --surf-white: #edece6;
  --koa-brown: #4d3930;

  /* derived. tints are for backgrounds and UI only, never the logo */
  --blue-80: #336277;
  --blue-60: #668992;
  --rule: rgba(0, 59, 92, 0.22);
  --rule-link: rgba(0, 59, 92, 0.55);   /* 3.1:1 on Surf White, for 1.4.1 */
  --rule-soft: rgba(0, 59, 92, 0.12);

  /* surfaces */
  --bg: var(--surf-white);
  --ink: var(--duke-blue);
  --ink-quiet: #3d5a6b;

  /* type */
  --serif: "EB Garamond", "EBGaramond", Garamond, "Times New Roman", Times, serif;
  --sans: Arial, "Helvetica Neue", Helvetica, sans-serif;
  /* EB Garamond has no Japanese glyphs and Arial's coverage depends on the
     platform. The /ja/ page hands off to whatever the reader's system has,
     which is what a Japanese reader expects anyway. */
  --ja: "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Yu Gothic Medium",
        "Noto Sans JP", "Meiryo", sans-serif;

  /* measure and rhythm */
  /* 30rem is 480px, which measures 62 characters in Arial 16. 34rem measured
     71, which is too many for a face whose x-height is 28% larger than the
     serif it sits under. */
  --measure: 30rem;
  --wrap: 68rem;

  --pad-x: clamp(1.25rem, 5vw, 3rem);
  --sect-y: clamp(3.75rem, 9vw, 7rem);
  /* A hero is not a body section. It was getting the same 112px standoff as
     the gap between two paragraphs of history. */
  --hero-y: clamp(4.5rem, 13vw, 10.5rem);
  /* One breakpoint for every two-column collapse. The plates grid broke at
     46rem and the visit blocks at 52rem, so 768px showed 2-up plates beside
     1-up blocks on the same site. */
  --bp-two-col: 48rem;
}

/* ------------------------------------------------------------------
   EB Garamond, self-hosted. Nothing is fetched from Google at runtime,
   which is what lets the CSP in static/_headers stay strict.

   Two subsets per face, and both are needed:
     latin      carries U+02BB, the ʻokina
     latin-ext  carries the kahakō, ā ē ī ō ū

   Drop latin-ext and Waikīkī loses both its marks while the ʻokina in
   Hawaiʻi survives, which is the worst possible failure because it looks
   deliberate.

   Four files. Three actually load on any page: regular-latin, regular-
   latin-ext and medium-latin, about 104KB. medium-latin-ext is here for the
   day a Hawaiian word lands in a 500-weight string, and browsers will not
   fetch it until then. There is no italic: nothing on the site is italic,
   and shipping two faces nobody requests is 70KB of dead weight in every
   deploy. If you add an <em>, add the face back.
   ------------------------------------------------------------------ */

@font-face {
  font-family: "EB Garamond"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("/assets/fonts/EBGaramond-regular-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "EB Garamond"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("/assets/fonts/EBGaramond-regular-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "EB Garamond"; font-style: normal; font-weight: 500; font-display: swap;
  src: url("/assets/fonts/EBGaramond-medium-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "EB Garamond"; font-style: normal; font-weight: 500; font-display: swap;
  src: url("/assets/fonts/EBGaramond-medium-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ------------------------------------------------------------------
   reset, minimal
   ------------------------------------------------------------------ */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  /* canon: body never below 16px */
  font-size: 1rem;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3 { margin: 0; font-weight: 400; }
p { margin: 0 0 1.15em; }
ul { margin: 0; padding: 0; list-style: none; }
img, svg { max-width: 100%; height: auto; display: block; }

/* Links carry no colour difference from body text, so the underline is the
   only thing distinguishing them and it has to clear 3:1 against the
   background on its own. --rule is 1.49:1 and was not enough. */
a {
  color: inherit;
  text-decoration: none;
  text-underline-offset: 0.22em;
  text-decoration-thickness: 1px;
  border-bottom: 1px solid var(--rule-link);
  transition: border-color 140ms ease, color 140ms ease;
}
a:hover { border-bottom-color: currentColor; }

:focus-visible {
  outline: 2px solid var(--duke-blue);
  outline-offset: 3px;
  border-radius: 1px;
}

.skip {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  background: var(--duke-blue);
  color: var(--surf-white);
  padding: 0.75rem 1.25rem;
  border: 0;
}
.skip:focus { left: 0; }

/* ------------------------------------------------------------------
   layout
   ------------------------------------------------------------------ */

.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--pad-x);
}
/* Reading sections keep the same left edge as everything else and constrain
   the line length on the inner elements instead. Centring a narrow column
   inside a wide page gives every other section a different left margin, and
   the eye reads that as sloppiness before it reads anything else. */
.wrap--reading { max-width: var(--wrap); }
.wrap--reading > .lede,
.wrap--reading > .closing,
.wrap--reading > .more,
.wrap--reading > p { max-width: var(--measure); }

.main > .section,
.main > .orient { padding-block: var(--sect-y); }
/* Generous above, restrained below. Symmetric hero padding put 280px of
   nothing between the subhead and the first paragraph at 1280, because the
   hero's own bottom padding and the next section's top padding stacked. */
.main > .hero { padding-block: var(--hero-y) calc(var(--sect-y) * 0.4); }

/* .orient carried no .section class, so it got zero padding and
   .section + .section never fired across it. Home's rule system started
   three sections in. */
.orient + .section { border-top: 1px solid var(--rule-soft); }

.section + .section { border-top: 1px solid var(--rule-soft); }

/* ------------------------------------------------------------------
   masthead
   ------------------------------------------------------------------ */

.masthead {
  border-bottom: 1px solid var(--rule-soft);
  background: var(--bg);
}
.masthead__inner {
  max-width: var(--wrap);
  margin-inline: auto;
  padding: 1.35rem var(--pad-x);
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1.5rem;
  flex-wrap: wrap;
}

.lockup {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  border: 0;
}
.lockup__descriptor {
  font-family: var(--sans);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.24em;
  color: var(--ink-quiet);
  /* the descriptor is the one place we uppercase, and it is an English
     word with no diacriticals in it, which is the only reason it is safe */
  text-transform: uppercase;
}

/* The licensed signature, once it exists. Placed as artwork, once. */
.signature {
  display: block;
  max-width: 15rem;
}

/* The interim wordmark. Duke Blue on Surf White, EB Garamond, letterspaced,
   and deliberately nothing like a signature: no script face, no slant, no
   underline that could read as a hand-drawn rule. It carries no diacriticals,
   which is the only reason it is safe to letterspace at this size. */
.wordmark {
  font-family: var(--serif);
  font-size: 1.35rem;
  line-height: 1;
  letter-spacing: 0.03em;
  color: var(--ink);
}

.nav ul {
  display: flex;
  gap: clamp(1rem, 3vw, 2rem);
  flex-wrap: wrap;
}
/* Measured tap targets were 19px tall. The negative margin on the list keeps
   the visual position while the padding does the work. */
.nav ul { margin-block: -0.65rem; }
.nav a {
  display: inline-block;
  font-size: 1rem;
  letter-spacing: 0.02em;
  border-bottom: 1px solid transparent;
  padding-block: 0.65rem;
}
.nav a:hover,
.nav a[aria-current="page"] { border-bottom-color: var(--duke-blue); }
.nav a[aria-current="page"] { color: var(--duke-blue); }

/* ------------------------------------------------------------------
   type
   ------------------------------------------------------------------ */

/* Eyebrows are NOT uppercased in CSS, and this is deliberate. They carry
   Waikīkī and Kalākaua, and text-transform: uppercase is where the ʻokina
   and the kahakō die: the browser transforms the codepoint, the font
   substitutes what it has, and nobody sees it until it is on a live page.
   Small size plus wide tracking gives the same label reading without ever
   putting a Hawaiian word through a transform. The only uppercased strings
   on this site are GALLERY and ALOHA TO YOU, both English, both mark-free,
   and both checked by scripts/brand-check.mjs. */
.eyebrow {
  font-family: var(--sans);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  color: var(--ink-quiet);
  margin: 0 0 0.9rem;
}

.hero__headline {
  font-family: var(--serif);
  /* The floor was 2.1rem, and the vw term did not engage until 542px, so
     every phone got 33.6px. Against Arial 16, whose x-height makes it read
     like 20.5px, that is a display-to-body ratio of 1.6 on the screen where
     the site is most likely to be read. */
  font-size: clamp(2.5rem, 8.5vw, 3.9rem);
  line-height: 1.12;
  letter-spacing: -0.005em;
  max-width: 18ch;
  /* NOT uppercased. The canon's sample stack sets titles in caps, but
     uppercase is where the ʻokina and kahakō die, and this page carries
     Kalākaua, Waikīkī and Hawaiʻi in headings. Sentence case is the
     safer reading of a rule whose purpose is to protect the marks. */
}
@media (min-width: 46rem) { .hero__headline { line-height: 1.08; } }
.hero--wide .hero__headline { max-width: 15ch; }

.hero__sub {
  font-family: var(--serif);
  font-size: clamp(1.15rem, 2.4vw, 1.4rem);
  line-height: 1.5;
  max-width: 44ch;
  margin-top: 1.5rem;
  color: var(--ink-quiet);
}

.section__head {
  font-family: var(--serif);
  font-size: clamp(1.65rem, 3.6vw, 2.4rem);
  line-height: 1.15;
  max-width: 20ch;
}
.section__head--small { font-size: clamp(1.3rem, 2.6vw, 1.6rem); }

.prose { max-width: var(--measure); }
.prose p { margin-bottom: 1.35em; }
.prose p:last-child { margin-bottom: 0; }

.para--emphasis {
  font-family: var(--serif);
  font-size: 1.35rem;
  line-height: 1.45;
  color: var(--duke-blue);
}

.lede { max-width: var(--measure); }
/* A lede following prose was butting straight onto the last paragraph. */
.prose + .lede,
.prose + .roster { margin-top: 2rem; }

/* .note carries real information, not decoration: parking is unconfirmed,
   the mailbox is closed, the film rights are not cleared. Canon puts the
   floor for body copy at 16px and this is body copy. */
.note {
  font-size: 1rem;
  color: var(--ink-quiet);
  max-width: var(--measure);
  padding-left: 1rem;
  border-left: 2px solid var(--waikiki-sand);
}

/* ------------------------------------------------------------------
   waterline rule, from the brand book: three lines
   ------------------------------------------------------------------ */

/* It was 168px fixed: 17% of the content column at 1280 and 53% at 375, so
   the same mark had three different weights against the type it divides. */
.waterline {
  color: rgba(0, 59, 92, 0.34);
  width: min(168px, 34%);
  height: auto;
  margin: 1.5rem 0;
}
.waterline--hero {
  margin: 2.25rem 0 0;
  width: min(220px, 44%);
  color: var(--olympic-gold);
}
.waterline--footer { margin: 0 auto 1.5rem; }

/* ------------------------------------------------------------------
   home: the three questions
   ------------------------------------------------------------------ */

.orient__grid {
  display: grid;
  gap: clamp(1.75rem, 4vw, 3rem);
  grid-template-columns: 1fr;
}
@media (min-width: 52rem) {
  .orient__grid { grid-template-columns: repeat(3, 1fr); }
}
.orient__q {
  font-family: var(--sans);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink-quiet);
  margin-bottom: 0.8rem;
  padding-bottom: 0.8rem;
  border-bottom: 1px solid var(--rule-soft);
}
/* Once the three-column grid collapses at --bp-two-col these run the full
   column: 90 characters at 768px. */
.orient__a { margin: 0; max-width: var(--measure); }

/* ------------------------------------------------------------------
   pull quote, handoff, aside
   ------------------------------------------------------------------ */

.pull {
  margin: 2.5rem 0 0;
  padding-left: 1.5rem;
  border-left: 2px solid var(--olympic-gold);
  max-width: var(--measure);
}
.pull p {
  font-family: var(--serif);
  font-size: clamp(1.25rem, 2.6vw, 1.5rem);
  line-height: 1.45;
  margin: 0;
}

.handoff {
  margin-top: 2.25rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--rule-soft);
  max-width: var(--measure);
  font-family: var(--serif);
  font-size: 1.2rem;
  line-height: 1.55;
}

.aside {
  margin-top: 2.5rem;
  padding: 1.75rem;
  background: rgba(223, 211, 195, 0.4);
  max-width: var(--measure);
}
.aside__head {
  font-family: var(--serif);
  font-size: 1.3rem;
  margin-bottom: 0.6rem;
}
.aside p:last-child { margin-bottom: 0; }

/* The makers are the whole proposition and the roster is not built. A maker
   who lands here should have a way in, and this is it. */
.makers__call {
  margin-top: 1.75rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--rule-soft);
  font-family: var(--serif);
  font-size: 1.2rem;
  line-height: 1.55;
  max-width: var(--measure);
}

.more { margin-top: 2rem; }
.closing {
  font-family: var(--serif);
  font-size: 1.35rem;
  margin-top: 1.5rem;
}

/* ------------------------------------------------------------------
   lists
   ------------------------------------------------------------------ */

.list { max-width: var(--measure); }
.list li {
  padding: 0.85rem 0 0.85rem 1.5rem;
  border-bottom: 1px solid var(--rule-soft);
  position: relative;
}
.list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 1.55rem;
  width: 0.55rem;
  height: 1px;
  background: var(--olympic-gold);
}
.list li:last-child { border-bottom: 0; }

.list--unverified li { color: var(--ink-quiet); }
.list--elsewhere li { padding-left: 0; }
.list--elsewhere li::before { display: none; }
.elsewhere__text { display: block; color: var(--ink-quiet); font-size: 0.9375rem; }

/* ------------------------------------------------------------------
   call to action. Gold ground, blue text: 3.6:1 by ratio, which is why
   the label is set at 1.0625rem semibold, above the large-text
   threshold, and why gold appears nowhere else.
   ------------------------------------------------------------------ */

.cta {
  display: inline-block;
  margin-top: 2rem;
  padding: 0.95rem 1.6rem;
  background: var(--duke-blue);
  color: var(--surf-white);
  border: 1px solid var(--duke-blue);
  font-family: var(--sans);
  font-size: 1.0625rem;
  letter-spacing: 0.01em;
}
.cta:hover {
  background: var(--olympic-gold);
  border-color: var(--olympic-gold);
  color: #1a1409;
}
.cta__ext {
  display: inline-block;
  margin-left: 0.4em;
  font-size: 0.85em;
}
.cta--pending {
  background: transparent;
  color: var(--ink-quiet);
  border: 1px dashed var(--rule);
}

/* a sibling property that is not live yet: named, but not linked */
.sibling { font-family: var(--serif); }
.sibling--pending {
  color: var(--ink-quiet);
  border-bottom: 0;
}

/* ------------------------------------------------------------------
   figures and photograph slots
   ------------------------------------------------------------------ */

.figure { margin: 2.5rem 0 0; }
.figure__img { width: 100%; }

.figure__caption {
  margin-top: 0.75rem;
  font-size: 0.9375rem;
  line-height: 1.5;
  color: var(--ink-quiet);
  max-width: 46ch;
}
.figure__credit { display: block; font-size: 0.8125rem; }

/* A photograph that does not exist yet is written down, not drawn as a hole.
   The first version was a hatched 3:2 box with an 11px label floating in the
   middle of it: six of those came to 43% of /room/ in empty rectangles, while
   the captions, which are the actual content, sat underneath at 15px grey.
   So the entry is inverted. The slot label is the eyebrow, the caption is the
   body, and the block is as tall as its own words. */
.figure--slot .figure__frame {
  border-top: 1px solid var(--rule);
  padding-top: 1.15rem;
}
.figure__slotlabel {
  font-family: var(--sans);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink-quiet);
}
.figure--slot .figure__caption {
  margin-top: 0.55rem;
  font-family: var(--serif);
  font-size: 1.25rem;
  line-height: 1.45;
  color: var(--ink);
  max-width: 40ch;
}
.figure--slot .figure__credit {
  font-family: var(--sans);
  font-size: 0.8125rem;
  color: var(--ink-quiet);
  margin-top: 0.4rem;
}
/* A register entry is a text block, so it obeys the measure like every other
   text block instead of spanning the full wrap. */
.figure--slot.figure--feature { max-width: var(--measure); margin-bottom: 0; }
.plates .figure--slot { margin: 0; }

.figure--inline { max-width: 46rem; }

.plates {
  display: grid;
  gap: clamp(1.75rem, 4vw, 2.5rem);
  grid-template-columns: 1fr;
  margin-top: clamp(1.75rem, 4vw, 2.5rem);
}
@media (min-width: 48rem) {
  .plates { grid-template-columns: repeat(2, 1fr); }
}
.figure--feature { margin-top: 0; }

/* ------------------------------------------------------------------
   visit blocks
   ------------------------------------------------------------------ */

.section--blocks .wrap {
  display: grid;
  gap: clamp(2rem, 5vw, 3.5rem);
  grid-template-columns: 1fr;
}
@media (min-width: 48rem) {
  .section--blocks .wrap { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.block__head {
  font-family: var(--serif);
  font-size: 1.4rem;
  margin-bottom: 0.9rem;
  padding-bottom: 0.7rem;
  border-bottom: 1px solid var(--rule-soft);
}
.block__after { color: var(--ink-quiet); font-size: 0.9375rem; max-width: var(--measure); }
.block__link { font-size: 0.9375rem; }
.sep { padding: 0 0.4em; color: var(--rule); }

/* aloha@dukekahanamokugallery.com has a min-content width of 322px, which
   overflows a 320px viewport under the 1.4.12 text-spacing overrides. It gets
   worse when contact.emailLive flips and it becomes a link. */
[data-slot="email"],
a[href^="mailto"] { overflow-wrap: anywhere; }

.address {
  font-style: normal;
  font-family: var(--serif);
  font-size: 1.2rem;
  line-height: 1.5;
}
.address > span { display: block; }

/* The build wraps Hawaiian words in <span lang="haw">. A descendant selector
   anywhere will catch those spans: ".address span" turned
   "2365 Kalākaua Avenue" into three lines. The language wrapper is a semantic
   hook and must never change layout, so it is pinned here and every rule that
   styles a span must use the child combinator. */
[lang="haw"] { display: inline; }
.address__venue { color: var(--ink-quiet); font-size: 0.9375rem; font-family: var(--sans); }

/* ------------------------------------------------------------------
   the maker roster
   ------------------------------------------------------------------ */

.roster {
  margin-top: 2.5rem;
  display: grid;
  gap: 2rem;
  grid-template-columns: 1fr;
}
@media (min-width: 48rem) {
  .roster { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.roster__item {
  padding-top: 1.15rem;
  border-top: 1px solid var(--rule);
}
.roster__name {
  font-family: var(--serif);
  font-size: 1.35rem;
  line-height: 1.2;
}
.roster__where {
  font-size: 0.9375rem;
  color: var(--ink-quiet);
  margin: 0.3rem 0 0.8rem;
}
.roster__craft::before { content: "· "; }
.roster__line {
  font-family: var(--serif);
  font-size: 1.15rem;
  line-height: 1.5;
  max-width: 38ch;
}
.roster__handle {
  font-size: 0.9375rem;
  color: var(--ink-quiet);
  margin-bottom: 0;
}

/* The five-line label, shown as the thing it is rather than described.
   It is the most important printed piece in the room, so the web version
   sets it in the same order with the same restraint. */
.label-example {
  margin: 1.75rem 0;
  padding: 1.5rem 1.75rem;
  background: rgba(223, 211, 195, 0.4);
  max-width: var(--measure);
}
.label-example__line { display: block; }
.label-example__line--0 {
  font-family: var(--sans);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  margin-bottom: 0.5rem;
}
.label-example__line--1 {
  font-family: var(--serif);
  font-size: 1.25rem;
  line-height: 1.25;
}
.label-example__line--2 {
  font-size: 0.9375rem;
  color: var(--ink-quiet);
  margin: 0.35rem 0 0.8rem;
}
.label-example__line--3 { font-size: 1rem; line-height: 1.6; }
.label-example__line--4 {
  margin-top: 0.8rem;
  padding-top: 0.8rem;
  border-top: 1px solid var(--rule-soft);
  font-size: 0.9375rem;
}

/* ------------------------------------------------------------------
   press
   ------------------------------------------------------------------ */

/* Boilerplate is meant to be selected and pasted, so it is set to be read
   as a block of copy rather than styled as a quotation. */
.boilerplate {
  margin: 1.5rem 0;
  padding: 1.5rem 1.75rem;
  border-left: 2px solid var(--rule);
  background: rgba(223, 211, 195, 0.28);
  max-width: var(--measure);
}
.boilerplate p {
  margin: 0;
  font-family: var(--serif);
  font-size: 1.15rem;
  line-height: 1.6;
}

.factlist { margin-top: 1.5rem; max-width: var(--measure); }
.factrow {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.2rem;
  padding: 0.85rem 0;
  border-bottom: 1px solid var(--rule-soft);
}
@media (min-width: 34rem) {
  .factrow { grid-template-columns: 7rem 1fr; gap: 1.25rem; }
}
.factrow:last-child { border-bottom: 0; }
.factrow__k {
  font-family: var(--sans);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  color: var(--ink-quiet);
  padding-top: 0.25rem;
}
.factrow__v { margin: 0; }

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

.footer {
  background: var(--duke-blue);
  color: var(--surf-white);
  padding: clamp(3rem, 7vw, 4.5rem) 0 2.5rem;
  margin-top: var(--sect-y);
}
.footer a { border-bottom-color: rgba(237, 236, 230, 0.6); }
.footer :focus-visible { outline-color: var(--surf-white); }

.footer__inner {
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--pad-x);
  display: grid;
  gap: clamp(2rem, 5vw, 3rem);
  grid-template-columns: 1fr;
}
@media (min-width: 52rem) {
  .footer__inner { grid-template-columns: repeat(3, 1fr); }
}

.footer__head {
  font-family: var(--sans);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(237, 236, 230, 0.62);
  margin-bottom: 1rem;
}
.footer .address { font-size: 1.05rem; }
.footer .address__venue { color: rgba(237, 236, 230, 0.62); }
.footer__line { margin-bottom: 0.75rem; }
.footer__note {
  font-size: 1rem;
  color: rgba(237, 236, 230, 0.72);
  margin-top: 0.75rem;
}
.footer .sibling--pending {
  color: rgba(237, 236, 230, 0.72);
  border-bottom: 0;
}
.footer__social { display: flex; gap: 1rem; margin-top: 1rem; }

/* Press and 日本語 live here rather than in the primary nav: they are for
   two specific readers, and the top of the page belongs to the guest. */
.footer__nav {
  display: flex;
  justify-content: center;
  gap: 1.75rem;
  margin-bottom: 2rem;
  font-size: 0.9375rem;
}
.footer__nav a { padding-block: 0.4rem; display: inline-block; }

.footer__base {
  max-width: var(--wrap);
  margin: clamp(2.5rem, 6vw, 4rem) auto 0;
  padding: 2rem var(--pad-x) 0;
  border-top: 1px solid rgba(237, 236, 230, 0.18);
  text-align: center;
}
.footer__base .waterline { color: rgba(237, 236, 230, 0.35); }

/* The tagline is his line. Gold, EB Garamond, tracked wide, never in
   quotes, never with an exclamation mark, never rewritten. It is set at
   1.375rem so that gold on blue clears the large-text threshold. */
.footer__tagline {
  font-family: var(--serif);
  /* 24px. Gold on Duke Blue is 3.8:1, which clears the 3:1 large-text bar at
     24px or above at any weight, and fails the 4.5:1 normal-text bar below
     it. The first version was 22px, which is neither. Weight stays at 500
     because only 400 and 500 are loaded and 700 would be synthesised. */
  font-size: 1.5rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  color: var(--olympic-gold);
  text-transform: uppercase;
  margin-bottom: 0.4rem;
}
/* The tagline is his line, and an unattributed tagline on a commercial site
   reads as a slogan the gallery wrote. One line fixes that. */
.footer__attrib {
  font-size: 0.8125rem;
  letter-spacing: 0.02em;
  color: rgba(237, 236, 230, 0.55);
  margin-bottom: 1.5rem;
}

.footer__fine {
  font-size: 0.8125rem;
  line-height: 1.6;
  color: rgba(237, 236, 230, 0.62);
  max-width: 52ch;
  margin-inline: auto;
}

/* ------------------------------------------------------------------
   the Japanese page
   ------------------------------------------------------------------ */

.page--ja { font-family: var(--ja); }
.page--ja .hero__headline,
.page--ja .section__head,
.page--ja .block__head,
.page--ja .hero__sub,
.page--ja .prose p,
.page--ja .lede { font-family: var(--ja); }
/* Japanese sets without word spaces, so it needs looser leading and it must
   not break mid-word the way the English rules assume. */
.page--ja .hero__headline { font-size: clamp(1.9rem, 6vw, 2.8rem); line-height: 1.35; }
.page--ja .prose p,
.page--ja .lede,
.page--ja .block__after { line-height: 1.9; }
.page--ja .hero__sub { line-height: 1.85; font-size: clamp(1.05rem, 2.2vw, 1.2rem); }
/* The street address stays in Latin script: it is what a taxi driver reads. */
.page--ja .address { font-family: var(--serif); }

/* ------------------------------------------------------------------
   404
   ------------------------------------------------------------------ */

.hero--404 { min-height: 52vh; display: grid; align-content: center; }

/* ------------------------------------------------------------------
   print. People print directions.
   ------------------------------------------------------------------ */

@media print {
  .masthead, .nav, .cta, .waterline { display: none; }
  body { background: #fff; color: #000; font-size: 11pt; }
  .footer { background: #fff; color: #000; padding-top: 1rem; }
  .footer__fine, .footer__note, .footer__head { color: #333; }
  .figure--slot { display: none; }
  a { border: 0; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 9pt; }
}