@charset "UTF-8";

/* ============================================================================
   Fonts — self-hosted and subset (see tools/build-fonts.py). Serving these
   ourselves removes two third-party origins, two DNS + TLS handshakes and a
   render-blocking stylesheet from the critical path, and stops every visitor's
   IP reaching Google. All three are SIL OFL 1.1; assets/fonts/OFL.txt.
   ========================================================================== */
@font-face {
  font-family: Cinzel;
  src: url("../fonts/cinzel-400.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Playfair Display";
  src: url("../fonts/playfair-400.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Shippori Mincho";
  src: url("../fonts/shippori-400.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}


/* ============================================================================
   Meditation MTL
   Layout metrics are expressed in vw, mirroring the reference template: every
   box, gap and type size scales with the viewport so proportions hold at any
   width. Desktop rules live in @media(min-width:681px), phone rules in
   @media(max-width:680px); shared structure sits in the base layer.
   ========================================================================== */

/* --- reset ---------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; background-repeat: no-repeat; }
* { margin: 0; padding: 0; }

/* Cross-document view transitions: switching en <-> fr cross-fades instead of
   flashing white. Native, ~zero cost, and simply ignored where unsupported.
   This is the kind of thing a framework's page-transition machinery exists to
   provide, and the platform now does it in three lines. */
@view-transition { navigation: auto; }

@media (prefers-reduced-motion: reduce) {
  @view-transition { navigation: none; }
}

html {
  -webkit-text-size-adjust: 100%;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  touch-action: manipulation;
  scroll-behavior: auto;
}

:root {
  /* Light theme: warm paper ground, ink text, a muted sand for the small
     Cinzel labels (kept dark enough to clear 4.5:1 against the paper). */
  --color-paper: #efece5;
  --color-paper-pure: #fbfaf7;
  --color-ink: #171512;
  --color-ink-strong: #000;
  --color-sand: #6b6152;
  --color-rule: rgba(23, 21, 18, .22);
  --header-index: 80;
  --nav-index: 50;
  --aside-index: 40;
  --ease: cubic-bezier(.22, 1, .36, 1);
}

body {
  background-color: var(--color-paper);
  color: var(--color-ink);
  overflow-wrap: break-word;
  word-break: normal;
  line-break: strict;
  hyphens: auto;
  -webkit-hyphens: auto;
  hyphenate-limit-chars: 7 3 3;
  font-family: "Shippori Mincho", "Hiragino Mincho ProN", Georgia, serif;
}

/* Display type, labels and anything that must never break mid-word. A hyphen in
   56px Playfair reads as a mistake, not as typesetting. */
.paragraph_text,
.stickySection_titleText,
.stickySection_titleNumber,
.stickySection_time,
.hero_title,
.label,
.button_text,
.footer_nextLinkText,
.nav_linkText,
.nav_subLinkText,
.footer_linkText,
.footer_snsLinkText,
.footer_pageTopLinkText,
.header_logoWord,
.openTrigger_text,
.header_langLinkText,
.footer_name,
.footer_locationHead,
.nav_locationHead,
.footer_locationBody,
.nav_locationBody,
.aside_scroll,
.aside_copyright,
.aside_time,
.footer_time { hyphens: manual; -webkit-hyphens: manual; }

/* The <symbol> sprite defines the marks used by <use>; it must draw nothing and
   occupy nothing. This lives here and not in a style attribute on the element,
   because the CSP is `style-src 'self'` with no 'unsafe-inline' — which blocks
   inline style ATTRIBUTES, not just <style> blocks. The attribute version was
   silently dropped in production and the bare <svg> fell back to its default
   300x150 box, pushing the whole page down by 150px. Zero-size and clipped
   rather than display:none, which older engines have refused to resolve <use>
   against. (element.style.foo from JS is CSSOM and is not affected.) */
.svgSprite { position: absolute; width: 0; height: 0; overflow: hidden; }

h1, h2, h3, h4, h5, h6 { font-weight: 400; font-size: inherit; }
li { list-style: none; }
a { color: currentColor; text-decoration: none; }
small { font-size: 100%; }
address { font-style: normal; }
img { width: 100%; height: auto; max-width: 100%; vertical-align: middle; }
svg { width: 100%; height: 100%; overflow: visible; }
button {
  appearance: none; display: inline-block; position: relative; border: none;
  border-radius: 0; background-color: transparent; color: inherit;
  text-align: left; font: inherit; cursor: pointer;
}
::selection { color: var(--color-paper); background-color: var(--color-ink); }
:focus:not(:focus-visible) { outline: 0; }
:focus-visible { outline: 1px solid var(--color-ink); outline-offset: 2px; }

/* --- helpers -------------------------------------------------------------- */
.clip { overflow: clip; }
.justify { text-align: justify; }
.layer { position: relative; z-index: 1; }
.pcBr, .spBr { display: none; }

.visuallyHidden {
  display: block !important; visibility: visible !important; opacity: 0 !important;
  position: fixed !important; inset: 0 !important; inline-size: 4px !important;
  block-size: 4px !important; margin: 0 !important; padding: 0 !important;
  border: none !important; contain: strict !important; pointer-events: none !important;
}

.wrapper {
  display: grid;
  grid-template-rows: auto 1fr auto;
  grid-template-columns: 100%;
  position: relative;
  min-height: 100vh;
  overflow: clip;
}
.main { width: 100vw; }

/* ============================================================================
   Typography scale
   ========================================================================== */
@media (min-width: 681px) {
  .cz_R30_H100 { font-family: Cinzel, serif; font-size: clamp(22.5px, 1.875vw, 33.75px); line-height: 1; }
  .cz_R20_H100 { font-family: Cinzel, serif; font-size: clamp(15px, 1.25vw, 22.5px); line-height: 1; }
  .cz_R18_H100 { font-family: Cinzel, serif; font-size: clamp(13.5px, 1.125vw, 20.25px); line-height: 1; }
  .cz_R16_H100 { font-family: Cinzel, serif; font-size: clamp(12px, 1vw, 18px); line-height: 1; }
  .cz_R14_H100 { font-family: Cinzel, serif; font-size: clamp(10.5px, .875vw, 15.75px); line-height: 1; }
  .pfd_R50_H100 { font-family: "Playfair Display", serif; font-size: clamp(37.5px, 3.125vw, 56.25px); line-height: 1; }
  .pfd_R40_H100 { font-family: "Playfair Display", serif; font-size: clamp(30px, 2.5vw, 45px); line-height: 1; }
  .pfd_R20_H100 { font-family: "Playfair Display", serif; font-size: clamp(15px, 1.25vw, 22.5px); line-height: 1; }
  .sm_R20_H180 { font-size: clamp(15px, 1.25vw, 22.5px); line-height: 1.8; }
  .sm_R16_H240 { font-size: clamp(12px, 1vw, 18px); line-height: 2.4; }
  .sm_R16_H200 { font-size: clamp(12px, 1vw, 18px); line-height: 2; }
}
@media (max-width: 680px) {
  .SP_cz_R24_H100 { font-family: Cinzel, serif; font-size: 5.9701vw; line-height: 1; }
  .SP_cz_R16_H100 { font-family: Cinzel, serif; font-size: 3.9801vw; line-height: 1; }
  .SP_cz_R12_H100 { font-family: Cinzel, serif; font-size: 2.9851vw; line-height: 1; }
  .SP_cz_R11_H100 { font-family: Cinzel, serif; font-size: 2.7363vw; line-height: 1; }
  .SP_pfd_R30_H100 { font-family: "Playfair Display", serif; font-size: 7.4627vw; line-height: 1; }
  .SP_pfd_R26_H100 { font-family: "Playfair Display", serif; font-size: 6.4677vw; line-height: 1; }
  .SP_pfd_M14_H100 { font-family: "Playfair Display", serif; font-size: 3.4826vw; line-height: 1; }
  .SP_sm_R16_H100 { font-size: 3.9801vw; line-height: 1; }
  .SP_sm_R12_H240 { font-size: 2.9851vw; line-height: 2.4; }
  .SP_ms_R12_H200 { font-size: 2.9851vw; line-height: 2; }
}

/* ============================================================================
   Layout primitives
   ========================================================================== */
.sticky { display: grid; height: 100%; }
.sticky_main { grid-area: 1 / 1; }
.sticky_sub { grid-area: 1 / 1; justify-self: start; }

.label {
  grid-area: 1 / 1;
  position: sticky;
  height: fit-content;
  inline-size: max-content;
  writing-mode: vertical-rl;
  color: var(--color-sand);
  letter-spacing: .18em;
  /* the rails run down the left edge of two full-bleed photographs; the halo is
     invisible against the paper ground and lifts them off the imagery */
  text-shadow:
    0 0 1px var(--color-paper), 0 0 1px var(--color-paper), 0 0 2px var(--color-paper),
    0 0 4px var(--color-paper), 0 0 10px var(--color-paper), 0 0 20px var(--color-paper);
  transition: opacity .3s linear;
}
/* On narrow screens the rail shares its column with the copy it labels. Rather
   than let the two print on each other, main.js measures the overlap and the
   rail steps out of the way while it is crossing. */
.label.-faded { opacity: 0; }

.paragraph_text { display: grid; overflow: clip; padding-block-end: .26em; margin-block-end: -.26em; }
.paragraph_text.-nowrap { white-space: nowrap; }
.paragraph_line { display: block; }

@media (min-width: 681px) {
  .inner { padding-inline: 5vw; }
  .label { top: clamp(147.75px, 12.3125vw, 221.625px); }
  .paragraph_text.-end { width: fit-content; margin-inline-start: 15.625vw; }
  .pcBr { display: inline; }
  .pcBr::after { content: "\a"; white-space: pre; }
}
@media (max-width: 680px) {
  .inner { padding-inline: 10.199vw; }
  .label { top: 33.3333vw; }
  .spBr { display: inline; }
  .spBr::after { content: "\a"; white-space: pre; }
}

/* ============================================================================
   Button
   ========================================================================== */
.button { display: inline-grid; position: relative; }
.button_block { display: inline-grid; align-items: center; position: relative; }
.button_lines { display: grid; }
.button_line {
  position: absolute;
  height: 1px;
  background-color: var(--color-ink);
  will-change: transform;
}
/* Two rules share the same slot. The first is the short dash that sits to the
   left of the label and draws itself in when the button scrolls into view; the
   second is the full-width rule that sweeps across on hover, behind the label
   as it rolls over. */
.button_line[data-button-first-line] {
  width: 5vw;
  clip-path: inset(0 0 0 100%);
  transform-origin: 0 50%;
  transition: transform .72s var(--ease);
}
.button_line[data-button-last-line] { width: 100%; transform-origin: 0 50%; transform: translateX(-100%); }
.button_text { overflow: clip; }
.button_textContent { display: grid; }
.button_textItem { grid-area: 1 / 1; display: block; will-change: transform; }
.button_textItem:last-child { transform: translate3d(0, 130%, 0); }

.js .button[data-reveal] .button_line[data-button-first-line] {
  transition: clip-path 1s var(--ease), transform .72s var(--ease);
}
.js .button[data-reveal].-inView .button_line[data-button-first-line] { clip-path: inset(0 0 0 0); }
.js .button:not([data-reveal]) .button_line[data-button-first-line] { clip-path: inset(0 0 0 0); }
html:not(.js) .button_line[data-button-first-line] { clip-path: inset(0 0 0 0); }
html:not(.js) .button_textItem:last-child { display: none; }

@media (min-width: 681px) {
  .button { padding-block: 1.25vw; padding-inline: 1.25vw 0; }
  .button_block { grid-template-columns: 5vw 1fr; gap: 1.25vw; padding-inline-end: 1.25vw; }
}
@media (max-width: 680px) {
  .button { padding-block: 4.9751vw; padding-inline: 4.9751vw 0; }
  .button_block { grid-template-columns: 19.9005vw 1fr; gap: 4.9751vw; padding-inline-end: 4.9751vw; }
  /* the resting dash always fills the rule column, whatever the breakpoint */
  .button_line[data-button-first-line] { width: 19.9005vw; }
}

/* The reference parks the swept rule across the middle of the label. Against a
   dark ground that reads as a sweep; in ink on paper it reads as a strikethrough,
   so here the rule passes all the way through and exits instead of resting. */
@keyframes buttonSweep {
  from { transform: translateX(-100%); }
  to { transform: translateX(100%); }
}

@media (any-hover: hover) {
  .button .button_textItem { transition: transform .72s var(--ease); }
  /* The incoming word starts a beat after the outgoing one leaves, so the two
     hand over rather than moving in lockstep — the difference between a roll
     and a rigid shunt. Leaving reverses it, so the label settles back the way
     it came. */
  .button:hover .button_textItem:last-child { transition-delay: .07s; }
  .button:not(:hover) .button_textItem:first-child { transition-delay: .07s; }

  /* The dash reaches toward the label it points at. 1.22 of a 5vw rule extends
     it by 1.1vw into a 1.25vw gap: it arrives at the word without touching it. */
  .button:hover .button_line[data-button-first-line] { transform: scaleX(1.22); }

  .button:hover .button_line[data-button-last-line],
  .footer_nextLink:hover .footer_nextLinkLine[data-button-last-line] {
    animation: buttonSweep 1s var(--ease);
  }
  .button:hover .button_textItem:first-child { transform: translate3d(0, -130%, 0); }
  .button:hover .button_textItem:last-child { transform: translate3d(0, 0, 0); }
}

/* rolling-text links (nav, footer) */
.footer_linkText, .footer_snsLinkText, .footer_pageTopLinkText, .nav_subLinkText { overflow: clip; }
.footer_linkItem { grid-area: 1 / 1; display: block; will-change: transform; }
.footer_linkItem:last-child { transform: translate3d(0, 130%, 0); }
html:not(.js) .footer_linkItem:last-child { display: none; }

@media (any-hover: hover) {
  .footer_linkItem { transition: transform .6s var(--ease); }
  a:hover > .footer_linkText > .footer_linkItem:first-child,
  a:hover .footer_snsLinkText > .footer_linkItem:first-child,
  a:hover > .footer_pageTopLinkText > .footer_linkItem:first-child { transform: translate3d(0, -130%, 0); }
  a:hover > .footer_linkText > .footer_linkItem:last-child,
  a:hover .footer_snsLinkText > .footer_linkItem:last-child,
  a:hover > .footer_pageTopLinkText > .footer_linkItem:last-child { transform: translate3d(0, 0, 0); }
}

/* ============================================================================
   Header
   ========================================================================== */
.header {
  transition: opacity .45s linear, visibility 0s linear 0s;
  position: fixed;
  z-index: var(--header-index);
  width: 100vw;
  height: 100%;
  pointer-events: none;
}
.header a, .header button { pointer-events: auto; }
/* Over the hero photograph the header reads on its own. Everywhere else it
   floats over body copy in the same ink on the same paper, and the letter
   halos below are not enough to tell the two apart — so once the page has
   scrolled past the hero, a blurred band is laid under it. It fades out
   downward instead of ending on a line, which would read as a bar.

   The band hangs off .header_block rather than off .header, because .header is
   the full viewport and would need a height picked by hand. Every metric in
   this header is a vw, so any fixed number is wrong at some width: the wordmark
   keeps descending past a clamped ceiling and ends up below its own veil. Sized
   from the content it covers, the copy always sits in the same part of the
   band — about the top two-thirds — at every width in both languages. */
.header_block { position: relative; }
.header_block::before {
  content: "";
  position: absolute;
  /* behind the header's own content: an absolutely-positioned box otherwise
     paints above its static siblings whatever the source order says, and the
     veil would wash out the very letters it exists to hold up. .header is a
     stacking context of its own, so -1 stops there rather than at the page. */
  z-index: -1;
  top: 0;
  left: 50%;
  translate: -50% 0;
  /* full-bleed regardless of what padding the ancestors carry */
  width: 100vw;
  height: calc(100% + var(--veil-tail, 14vw));
  background: linear-gradient(to bottom,
    rgba(239, 236, 229, .84) 0%,
    rgba(239, 236, 229, .80) 40%,
    rgba(239, 236, 229, .72) 66%,
    rgba(239, 236, 229, .34) 85%,
    rgba(239, 236, 229, 0) 100%);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 62%, transparent 100%);
  mask-image: linear-gradient(to bottom, #000 0%, #000 62%, transparent 100%);
  opacity: 0;
  transition: opacity .5s var(--ease);
  pointer-events: none;
}
.header.-veiled .header_block::before { opacity: 1; }
/* The wide stops of the halo were doing the veil's job badly and now only
   smudge; the tight ones stay, as the fallback wherever backdrop-filter is
   unsupported and at the very bottom of the band where the veil runs out. */
.header.-veiled .header_logoWord,
.header.-veiled .openTrigger_text,
.header.-veiled .header_langLinkText {
  text-shadow: 0 0 2px var(--color-paper), 0 0 5px var(--color-paper);
}
.header.-veiled .header_logoMark,
.header.-veiled .openTrigger_circle,
.header.-veiled .header_langLinkHead { filter: drop-shadow(0 0 2px var(--color-paper)); }
.header_logoWord, .openTrigger_text, .header_langLinkText {
  text-shadow:
    0 0 2px var(--color-paper), 0 0 5px var(--color-paper),
    0 0 12px var(--color-paper), 0 0 24px var(--color-paper);
}
.header_logoMark, .openTrigger_circle, .header_langLinkHead {
  filter:
    drop-shadow(0 0 2px var(--color-paper)) drop-shadow(0 0 6px var(--color-paper))
    drop-shadow(0 0 14px var(--color-paper));
}
.header.-hidden { opacity: 0; visibility: hidden; transition-delay: 0s, .45s; }
.header_inner { height: 100%; }
.header_block { display: grid; align-items: start; }
.header_block > *:last-child { justify-self: end; }
.header_logo { display: inline-grid; justify-items: start; color: var(--color-ink); }
.header_tools { display: flex; align-items: start; }
.header_lang { display: flex; }
.header_langLink { display: inline-grid; justify-items: center; color: var(--color-ink-strong); }
.header_langLinkHead, .header_langLinkBody { display: inline-grid; }
.header_langLinkCircle {
  aspect-ratio: 1;
  border-radius: 50%;
  background-color: currentColor;
  opacity: 0;
  transition: opacity .4s linear;
}
.header_langLink.-current .header_langLinkCircle { opacity: 1; }
.header_langLinkText { grid-area: 1 / 1; letter-spacing: .18em; }
.header_langLinkLine {
  grid-area: 1 / 1; align-self: end; width: 100%; height: 1px;
  background-color: currentColor; opacity: var(--rule-rest);
  transition: opacity .4s linear;
}
.header_langLink.-current { cursor: default; }
.header_logoMark svg, .footer_snsLinkIcon svg, .about_logo svg {
  display: block;
  aspect-ratio: 1;
  height: auto;
}
.header_logoWord { letter-spacing: .26em; line-height: 1.5; white-space: nowrap; }

.openTrigger { display: inline-grid; justify-items: center; color: var(--color-ink-strong); }
.openTrigger_head, .openTrigger_circle { display: inline-grid; }
.openTrigger_circleInner {
  grid-area: 1 / 1;
  aspect-ratio: 1;
  border-radius: 50%;
  background-color: currentColor;
  transition: transform .6s var(--ease), opacity .6s linear;
}
.openTrigger_circleInner:last-child { transform: translate3d(0, -300%, 0); opacity: 0; }
.openTrigger_body { display: inline-grid; }
.openTrigger_text { grid-area: 1 / 1; display: grid; overflow: clip; letter-spacing: .18em; }
.openTrigger_textInner { grid-area: 1 / 1; display: inline-grid; will-change: transform; }
.openTrigger_textInner:last-child { transform: translate3d(0, 130%, 0); }
.openTrigger_textInner > span { grid-area: 1 / 1; transition: opacity .3s linear; }
.openTrigger_textInner > [data-header-label="close"] { opacity: 0; }
[aria-expanded="true"] .openTrigger_textInner > [data-header-label="menu"] { opacity: 0; }
[aria-expanded="true"] .openTrigger_textInner > [data-header-label="close"] { opacity: 1; }
.openTrigger_line {
  grid-area: 1 / 1; align-self: center; width: 100%; height: 1px;
  background-color: currentColor; transform-origin: 0 50%; transform: scale(0, 1);
  transition: transform .5s var(--ease);
}
html:not(.js) .openTrigger { display: none; }
/* the clock is only meaningful once it is ticking */
html:not(.js) .footer_times, html:not(.js) .aside_times { display: none; }

@media (any-hover: hover) {
  .openTrigger:hover .openTrigger_circleInner:first-child { transform: translate3d(0, 300%, 0); opacity: 0; }
  .openTrigger:hover .openTrigger_circleInner:last-child { transform: translate3d(0, 0, 0); opacity: 1; }
  .openTrigger:hover .openTrigger_textInner:first-child { transform: translate3d(0, -130%, 0); }
  .openTrigger:hover .openTrigger_textInner:last-child { transform: translate3d(0, 0, 0); }
  .openTrigger_textInner { transition: transform .6s var(--ease); }
}

@media (min-width: 681px) {
  .header { --veil-tail: clamp(60px, 5vw, 104px); }
  .header_inner { padding-inline: 5vw; }
  .header_block {
    grid-template-columns: auto 1fr;
    margin-inline: clamp(-11.8125px, -.65625vw, -7.875px);
    padding-block-start: .75vw;
  }
  .header_logo {
    margin-block-start: clamp(21.375px, 1.78125vw, 32.0625px);
    padding: clamp(7.875px, .65625vw, 11.8125px);
    gap: .75vw;
  }
  .header_logoMark { display: block; width: clamp(37px, 3.05vw, 55px); }
  .cz_R11_H100 { font-family: Cinzel, serif; font-size: clamp(8.5px, .7vw, 12.5px); line-height: 1.5; }
  .header_tools { gap: 2.5vw; }
  .header_langLink { gap: 1.25vw; padding: clamp(7.875px, .65625vw, 11.8125px); }
  .header_langLinkCircle { width: clamp(3px, .25vw, 4.5px); }
  .openTrigger { gap: 1.25vw; padding: clamp(7.875px, .65625vw, 11.8125px); }
  .openTrigger_circleInner { width: clamp(3px, .25vw, 4.5px); }
}
@media (max-width: 680px) {
  .header { --veil-tail: 14vw; }
  .header_inner { padding-inline: 5.2239vw; }
  .header_block {
    grid-template-columns: auto 1fr;
    padding-block-start: 1.8657vw;
    padding-inline: 1.5547vw;
  }
  .header_logo { padding: 3.1095vw; gap: 2.4vw; }
  .header_logoMark { display: block; width: 8.7vw; }
  .SP_cz_R9_H100 { font-family: Cinzel, serif; font-size: 2.24vw; line-height: 1.5; }
  .header_tools { gap: 4.5vw; }
  .header_langLink { gap: 5.7214vw; padding: 3.1095vw; }
  .header_langLinkCircle { width: .995vw; }
  .openTrigger { gap: 5.7214vw; padding: 3.1095vw; }
  .openTrigger_circleInner { width: .995vw; }
}

/* ============================================================================
   Nav overlay
   ========================================================================== */
.nav {
  display: grid;
  position: fixed;
  inset: 0;
  z-index: var(--nav-index);
  width: 100vw;
  height: 100%;
  background-color: var(--color-paper);
  opacity: 0;
  visibility: hidden;
  transition: opacity .6s var(--ease), visibility 0s linear .6s;
}
.nav.-open { opacity: 1; visibility: visible; transition-delay: 0s; }
.nav_contents { grid-area: 1 / 1; height: 100%; overflow-y: auto; overscroll-behavior: contain; }
.nav_inner { height: 100%; }
.nav_block { display: grid; height: 100%; }

.nav_link { display: inline-grid; position: relative; }
.nav_link.-current { user-select: none; }
.nav_linkText { grid-area: 1 / 1; letter-spacing: .04em; }
.nav_linkLine {
  grid-area: 1 / 1; align-self: end; width: 100%; height: 1px;
  background-color: currentColor; opacity: var(--rule-rest);
  transition: opacity .4s linear;
}
.nav_linkCircle {
  opacity: 0; position: absolute; top: 50%; translate: 0 -50%;
  border-radius: 50%; background-color: currentColor;
}
.-current .nav_linkCircle { opacity: 1; }
.nav_subList { display: grid; }
.nav_subLink { display: inline-grid; width: fit-content; letter-spacing: .18em; color: var(--color-sand); }
.nav_subLinkText { grid-area: 1 / 1; }
.nav_subLinkLine {
  grid-area: 1 / 1; align-self: end; width: 100%; height: 1px;
  background-color: currentColor; opacity: var(--rule-rest);
  transition: opacity .4s linear;
}
.nav_info { display: grid; }
.nav_locationHead { color: var(--color-sand); letter-spacing: .18em; }
.nav_locationBody[class] { line-height: 1.65; letter-spacing: .05em; }

/* A link is underlined at rest, not only under a pointer. Half the readers here
   are on a phone, where there is no hover at all, and these labels are set in
   the same face and the same ink as the prose beside them — so a rule that only
   appears on hover is a rule most people never see, and the link reads as text.

   It sits under the word now rather than through it (align-self: end, not
   center, which is what it was — a strikethrough is not an affordance). Faint
   at rest so the page keeps its hairline register, full strength on hover:
   the emphasis the wipe used to carry, now that the line itself announces the
   link. The menu trigger keeps the wipe — it is a button with a dot above it,
   not mistakable for prose. */
:root { --rule-rest: .32; }
.header_langLink.-current .header_langLinkLine { opacity: 0; }

@media (any-hover: hover) {
  .openTrigger_line { transform-origin: 100% 50%; transition: transform .55s var(--ease); }
  .openTrigger:hover .openTrigger_line { transform-origin: 0% 50%; transform: scale(1, 1); }

  .nav_link:hover .nav_linkLine,
  .nav_subLink:hover .nav_subLinkLine,
  .footer_link:hover .footer_linkLine,
  .footer_snsLink:hover .footer_snsLinkLine,
  .footer_pageTopLink:hover .footer_pageTopLinkLine,
  .header_langLink:not(.-current):hover .header_langLinkLine { opacity: 1; }
}

/* staggered entrance for the nav items */
.js .nav_item, .js .nav_location {
  opacity: 0;
  transform: translate3d(0, 1.2rem, 0);
  transition: opacity .7s var(--ease), transform .7s var(--ease);
}
.js .nav.-open .nav_item, .js .nav.-open .nav_location { opacity: 1; transform: none; }
.js .nav.-open .nav_item:nth-child(1) { transition-delay: .10s }
.js .nav.-open .nav_item:nth-child(2) { transition-delay: .16s }
.js .nav.-open .nav_item:nth-child(3) { transition-delay: .22s }
.js .nav.-open .nav_item:nth-child(4) { transition-delay: .28s }
.js .nav.-open .nav_item:nth-child(5) { transition-delay: .34s }
.js .nav.-open .nav_item:nth-child(6) { transition-delay: .40s }
.js .nav.-open .nav_location:nth-child(1) { transition-delay: .46s }
.js .nav.-open .nav_location:nth-child(2) { transition-delay: .52s }

@media (min-width: 681px) {
  .nav_inner { padding-inline: 5vw; }
  .nav_block { grid-template-rows: 9.875vw 1fr auto; }
  .nav_body { margin-block-start: 1.34375vw; padding-inline-start: 40vw; }
  .nav_link { padding: clamp(11.25px, .9375vw, 16.875px) .375vw; }
  .nav_linkText { padding-inline: .375vw; }
  .nav_linkCircle { left: -2.5vw; width: .25vw; height: .25vw; }
  .nav_subList {
    grid-auto-flow: column;
    justify-content: start;
    column-gap: 1.875vw;
    margin-block: .4375vw;
    margin-inline-start: .28125vw;
  }
  .nav_subLink { padding: .375vw; }
  .nav_foot { margin-block-start: 6.25vw; padding-block-end: 2.625vw; padding-inline-start: 40vw; }
  /* the same pixel floor the footer carries: below about 830px a bare 15vw
     is too narrow for "bring a cushion", which wraps and makes the when
     column one line longer than the where column beside it */
  .nav_info { grid-template-columns: repeat(2, max(124px, 15vw)); }
  .nav_locationBody { margin-block-start: 1.25vw; }
}
@media (max-width: 680px) {
  .nav_inner { padding-inline: 10.199vw; }
  .nav_block { grid-template-rows: 32vw 1fr auto; }
  .nav_link { padding: 2.4876vw 0; }
  .nav_linkCircle { left: -6.5vw; width: 1.2vw; height: 1.2vw; }
  .nav_subList { grid-auto-flow: column; justify-content: start; column-gap: 4vw; margin-block: 1vw 2vw; }
  .nav_subLink { padding: 1.2vw 0; }
  .nav_foot { padding-block-end: 12vw; }
  .nav_info { grid-template-columns: 34vw 1fr; margin-block-start: 8vw; }
  .nav_locationBody { margin-block-start: 3.4826vw; }
}

/* ============================================================================
   Hero
   ========================================================================== */
.hero { display: grid; align-content: center; position: relative; }
.hero_contents { grid-area: 1 / 1; display: grid; align-content: center; height: 100svh; }
/* Two lines, each typed in turn. The type scale sets line-height: 1, which is
   right for a single line and far too tight for two, so the gap is set here
   rather than by loosening the leading everywhere the utility is used. */
.hero_line { display: block; }
.hero_line + .hero_line { margin-block-start: .62em; }
.hero_title {
  color: var(--color-ink-strong);
  letter-spacing: .06em;
  text-shadow: 0 0 4px var(--color-paper), 0 0 14px var(--color-paper), 0 0 30px var(--color-paper);
}
/* isolate so the scrim's z-index stays inside the frame rather than competing
   with the headline layer above it */
.hero_bg { grid-area: 1 / 1; display: grid; overflow: clip; isolation: isolate; }
.hero_img { grid-area: 1 / 1; }
.hero_img img, .hero_img picture { width: 100%; height: 100%; object-fit: cover; }
.hero_scrim {
  grid-area: 1 / 1;
  position: relative;
  z-index: 1;
  /* Eased rather than linear: a straight ramp to the paper colour leaves a
     visible band where the eye reads the last of the photograph as an edge. */
  background:
    linear-gradient(to bottom,
      rgba(239, 236, 229, .5) 0%,
      rgba(239, 236, 229, 0) 22%,
      rgba(239, 236, 229, 0) 38%,
      rgba(239, 236, 229, .08) 50%,
      rgba(239, 236, 229, .20) 60%,
      rgba(239, 236, 229, .38) 70%,
      rgba(239, 236, 229, .60) 79%,
      rgba(239, 236, 229, .80) 87%,
      rgba(239, 236, 229, .93) 94%,
      var(--color-paper) 100%),
    radial-gradient(90% 55% at 26% 50%, rgba(239, 236, 229, .72) 0%, rgba(239, 236, 229, 0) 72%);
}
@media (min-width: 681px) {
  .hero_inner { padding-inline: 17.5vw; }
  .hero_img, .hero_scrim { width: 100vw; aspect-ratio: 1 / 1; }
}
@media (max-width: 680px) {
  .hero_inner { padding-inline: 20.1493vw; }
  .hero_img, .hero_scrim { width: 100vw; height: 296.2687vw; }
}

/* ============================================================================
   Philosophy
   ========================================================================== */
.philosophy { position: relative; }
.philosophy_block { display: grid; }
.philosophy_head { grid-area: head; }
.philosophy_foot { grid-area: foot; }
.philosophy_imgs { position: relative; }
.philosophy_img:nth-of-type(2) { position: absolute; }
.philosophy_img img, .philosophy_singleImg img { width: 100%; height: 100%; object-fit: cover; }
.philosophy_singleImg { position: absolute; }
.philosophy_description { color: var(--color-ink); }

@media (min-width: 681px) {
  .philosophy { padding-block-start: 68.75vw; }
  .philosophy_content { padding-block-end: 21.25vw; }
  .philosophy_block { grid-template: "head foot" auto "head foot" auto / 1fr 32.5vw; row-gap: 14.5625vw; }
  .philosophy_head { margin-block-start: -.625vw; padding-inline-start: 12.5vw; }
  .philosophy_descriptions { margin-block-start: 1.25vw; width: clamp(300px, 32.5vw, 585px); }
  .philosophy_button { margin-block-start: 8.75vw; margin-inline-start: -1.25vw; }
  .philosophy_foot { margin-block-start: -15.9375vw; }
  .philosophy_img:nth-of-type(1) { width: 32.5vw; height: 50vw; }
  .philosophy_img:nth-of-type(2) { top: -8.75vw; left: 10vw; width: 17.5vw; height: 28.75vw; }
  .philosophy_singleImg { top: 34.1875vw; left: 5vw; width: 20vw; height: 20vw; }
}
@media (max-width: 680px) {
  .philosophy { padding-block-start: 24.8756vw; }
  .philosophy_content { padding-block: 68.408vw 42.2886vw; }
  .philosophy_block { grid-template: "head head" auto "foot foot" auto / 34.8259vw 1fr; }
  .philosophy_descriptions { margin-block-start: 6.2189vw; }
  .philosophy_button { margin-block-start: 7.4627vw; margin-inline-start: -4.9751vw; }
  .philosophy_foot { margin-block-start: 34.3284vw; margin-inline-start: 14.9254vw; }
  .philosophy_img:nth-of-type(1) { width: 52.2388vw; height: 80.597vw; }
  .philosophy_img:nth-of-type(2) { top: -12.4378vw; left: 24.8756vw; width: 29.8507vw; height: 49.2537vw; }
  .philosophy_singleImg { top: 24.8756vw; right: 10.199vw; width: 44.7761vw; height: 44.7761vw; margin-inline-start: auto; }
}

/* ============================================================================
   Master mind
   ========================================================================== */
.mastermind { display: grid; }
.mastermind_contents { grid-area: 1 / 1; }
.mastermind_inner, .mastermind_content { height: 100%; }
.mastermind_bg { grid-area: 1 / 1; display: grid; }
.mastermind_bg picture, .mastermind_bg img { grid-area: 1 / 1; width: 100%; height: 100%; object-fit: cover; }
.mastermind_scrim {
  grid-area: 1 / 1;
  background:
    linear-gradient(to bottom, var(--color-paper) 0%, rgba(239, 236, 229, .1) 18%, rgba(239, 236, 229, .1) 72%, var(--color-paper) 100%),
    linear-gradient(to right, rgba(239, 236, 229, 0) 24%, rgba(239, 236, 229, .58) 52%, rgba(239, 236, 229, .78) 100%);
}
.mastermind_sections { position: relative; z-index: 2; }

@media (min-width: 681px) {
  .mastermind { padding-block-start: 1.875vw; }
  .mastermind_content { padding-block-start: 11.875vw; padding-inline-start: 45vw; }
  .mastermind_descriptions { margin-block-start: 1.25vw; }
  .mastermind_button { margin-block-start: 4.0625vw; margin-inline-start: -1.25vw; }
  .mastermind_bg { width: 100vw; aspect-ratio: 1 / 1; }
}
@media (max-width: 680px) {
  .mastermind { padding-block-start: 7.4627vw; }
  .mastermind_content { height: 223.8806vw; margin-block-start: -1.2438vw; padding-inline-start: 14.9254vw; }
  .mastermind_descriptions { margin-block-start: 6.2189vw; }
  .mastermind_button { margin-block-start: 9.4527vw; margin-inline-start: -4.9751vw; }
  .mastermind_bg { width: 100vw; height: 199.005vw; margin-block-start: 32.3383vw; }
}

/* ============================================================================
   The evening — stacking sticky cards
   ========================================================================== */
.stickySection { position: sticky; top: 0; }
.stickySection::before {
  content: ""; position: absolute; top: 0; left: 50%; translate: -50% 0;
  height: 1px; background-color: var(--color-rule);
}
.stickySection:first-of-type::before { content: none; }
.stickySection::after { content: ""; position: absolute; top: 1px; background-color: var(--color-paper); }
.stickySection:first-of-type::after { content: none; }
.stickySection:first-of-type .stickySection_inner::after { content: none; }
.stickySection_block { display: grid; position: relative; }
.stickySection_label { justify-self: start; }
.stickySection_subBlock { display: grid; }
.stickySection_title { display: flex; align-items: baseline; }
.stickySection_titleNumber { position: absolute; left: 0; color: var(--color-sand); }
.stickySection_time { color: var(--color-sand); letter-spacing: .16em; white-space: nowrap; }
.stickySection_img { overflow: clip; }
.stickySection_img img { width: 100%; height: 100%; object-fit: cover; }

@media (min-width: 681px) {
  .stickySection { padding-block: 6.25vw; }
  .stickySection::before { width: calc(100% - 10vw); }
  .stickySection::after { left: 0; width: 100vw; height: 6.1875vw; }
  .stickySection_inner::after {
    content: ""; position: absolute; top: 0; left: 0; z-index: -1;
    width: calc(100% - 27.5vw); height: 100%; background-color: var(--color-paper);
  }
  .stickySection_block { grid-template-columns: 22.75vw 1fr; }
  .stickySection_subBlock { grid-template-columns: clamp(270px, 22.5vw, 405px) 22.5vw; justify-content: space-between; }
  .stickySection_text { display: grid; grid-template-rows: auto auto auto 1fr; }
  .stickySection_title { margin-inline-end: -13.4375vw; }
  .stickySection_titleNumber { bottom: 0; }
  /* the rail and the numeral share the left column, so end the rail's travel
     above the numeral rather than letting the two print on each other */
  .stickySection_label { margin-bottom: 9vw; }
  .stickySection_EnTitle { padding-inline-end: 1.875vw; }
  .stickySection_time { margin-block-start: 1.25vw; }
  .stickySection_lead { margin-block-start: 1.875vw; }
  .stickySection_description { margin-block-start: 1.875vw; }
  .stickySection_button { align-self: end; margin-block-end: -1.25vw; margin-inline-start: -1.25vw; }
  .stickySection_img { width: 22.5vw; height: 34.375vw; }
  .stickySection:not(:first-of-type) .stickySection_img { height: 46.875vw; margin-block: -6.1875vw; }
}
@media (max-width: 680px) {
  /* The stack is a desktop effect and only works while a card fits the screen.
     On a phone a card runs about 1.5 screens tall, so pinning its top edge puts
     its photograph permanently below the fold — the card can never be scrolled
     through, because it is the thing holding still. So the phone drops the pin
     and lets the cards run in normal flow; the wall between them is drawn
     instead, as a full-bleed rule with a deep gutter either side of it.

     With nothing overlapping, the two paper backdrops that existed to mask the
     card underneath have nothing left to mask. */
  /* relative, not static: the rule above is an absolutely-positioned
     ::before and needs this element to stay its containing block. */
  .stickySection { position: relative; padding-block: 24.8756vw; }
  .stickySection::before { width: 100%; }
  .stickySection::after,
  .stickySection_inner::after { content: none; }
  .stickySection_block { grid-template-columns: 14.9254vw 1fr; }
  .stickySection_subBlock { gap: 7.4627vw; }
  .stickySection_titleNumber { bottom: 89.0547vw; }
  /* as on desktop: end the rail's sticky travel above the numeral, which shares
     its column. The phone numeral sits far higher, so the bound is larger. */
  .stickySection_label { margin-bottom: 100vw; }
  .stickySection_EnTitle { padding-inline-end: 2.4876vw; }
  .stickySection_time { margin-block-start: 3.5vw; }
  .stickySection_lead { margin-block-start: 4.9751vw; line-height: 1.8; }
  .stickySection_description { margin-block-start: 4.9751vw; }
  .stickySection_button { margin-block-start: 7.4627vw; margin-inline-start: -4.9751vw; }
  .stickySection_img { width: 64.6766vw; height: 92.2886vw; }
}

/* ============================================================================
   Who we are
   ========================================================================== */
.about { display: grid; }
.about_contents { grid-area: 1 / 1; }
.about_inner, .about_label { height: 100%; }
.about_content { display: grid; place-content: center; height: 100%; }
.about_logo { margin-inline: auto; color: var(--color-ink); }
.about_text { text-align: center; }
.about_bg { grid-area: 1 / 1; position: relative; }
.about_bg img, .about_bg picture { width: 100%; height: 100%; object-fit: cover; }
.about_bg::after {
  content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(to bottom, var(--color-paper) 0%, rgba(239, 236, 229, .18) 26%, rgba(239, 236, 229, .18) 74%, var(--color-paper) 100%),
    radial-gradient(58% 42% at 50% 50%, rgba(239, 236, 229, .88) 0%, rgba(239, 236, 229, 0) 100%);
}

@media (min-width: 681px) {
  .about_contents { padding-block: 6.25vw; }
  .about_logo { width: 4.6875vw; }
  .about_text { margin-block-start: 4.375vw; }
  .about_descriptions { margin-block-start: 1.25vw; width: clamp(320px, 25vw, 450px); margin-inline: auto; }
  .about_description + .about_description { margin-block-start: 1.25vw; }
  .about_button { margin-block-start: 3.75vw; }
  .about_bg { width: 100vw; aspect-ratio: 1 / 1; }
}
@media (max-width: 680px) {
  .about_contents { padding-block-start: 27.3632vw; }
  .about_content { padding-block-end: 17.4129vw; }
  .about_logo { width: 12.4378vw; margin-block-start: 21.8905vw; }
  .about_text { margin-block-start: 18.6567vw; }
  .about_descriptions { margin-block-start: 6.2189vw; }
  .about_description + .about_description { margin-block-start: 4.9751vw; }
  .about_button { margin-block-start: 7.4627vw; }
  .about_bg { width: 100vw; height: 175.1244vw; }
}

/* ============================================================================
   Footer
   ========================================================================== */
.footer { width: 100vw; position: relative; z-index: 2; background-color: var(--color-paper); }
.footer_name { color: var(--color-sand); letter-spacing: .22em; }
.footer_nextLink { display: inline-grid; position: relative; }
.footer_nextLink::before {
  content: ""; position: absolute; top: 0; left: 0; z-index: 1;
  height: 100%; background-color: var(--color-paper);
}
.footer_nextLinkBlock { display: inline-grid; align-items: center; position: relative; }
.footer_nextLinkLines { display: grid; }
.footer_nextLinkLine {
  position: absolute; left: 0; height: 1px;
  background-color: var(--color-ink); will-change: transform;
}
.footer_nextLinkLine[data-button-first-line] { width: 22.5vw; clip-path: inset(0 0 0 100%); transition: clip-path 1s var(--ease); }
.footer_next.-inView .footer_nextLinkLine[data-button-first-line] { clip-path: inset(0 0 0 0); }
html:not(.js) .footer_nextLinkLine[data-button-first-line] { clip-path: inset(0 0 0 0); }
.footer_nextLinkLine[data-button-last-line] { width: 100%; transform-origin: 0 50%; transform: translateX(-100%); }
.footer_nextLinkText { overflow: clip; }
.footer_nextLinkTextContent { display: grid; }
@media (any-hover: hover) {
  .footer_nextLink:hover .button_textItem:first-child { transform: translate3d(0, -130%, 0); }
  .footer_nextLink:hover .button_textItem:last-child { transform: translate3d(0, 0, 0); }
  .footer_nextLink .button_textItem { transition: transform .72s var(--ease); }
}

.footer_link { display: inline-grid; position: relative; }
.footer_link.-current { user-select: none; }
.footer_linkText { grid-area: 1 / 1; display: grid; letter-spacing: .05em; }
.footer_linkLine {
  grid-area: 1 / 1; align-self: end; width: 100%; height: 1px;
  background-color: currentColor; opacity: var(--rule-rest);
  transition: opacity .4s linear;
}
.footer_linkCircle {
  opacity: 0; position: absolute; top: 50%; translate: 0 -50%;
  border-radius: 50%; background-color: currentColor;
}
.-current .footer_linkCircle { opacity: 1; }
.footer_snsLink { display: grid; align-items: center; width: fit-content; }
.footer_snsLinkBlock { display: grid; }
.footer_snsLinkText { grid-area: 1 / 1; display: grid; letter-spacing: .12em; }
.footer_snsLinkLine {
  grid-area: 1 / 1; align-self: end; width: 100%; height: 1px;
  background-color: currentColor; opacity: var(--rule-rest);
  transition: opacity .4s linear;
}
.footer_snsLinkIcon { display: grid; }
/* These are solid marks in a page built out of hairlines, so they are given a
   little more room to be legible and a little less weight to sit down beside
   the small caps rather than punch through them. */
.footer_snsLinkIcon svg { display: block; aspect-ratio: 1; height: auto; }
.footer_snsLinkIcon { color: var(--color-sand); opacity: .85; transition: opacity .45s linear, color .45s linear; }
/* Meetup's mark is a negative logo — a filled disc with the letter knocked out —
   so at the same opacity it reads several times heavier than WhatsApp's
   outline. Matched by eye, not by number. */
.footer_snsLinkIcon.-solid { opacity: .5; }
.footer_snsLink:hover .footer_snsLinkIcon { color: var(--color-ink); opacity: 1; }
.footer_snsLink:hover .footer_snsLinkIcon.-solid { opacity: .72; }
.footer_info { display: grid; }
.footer_locationHead { color: var(--color-sand); letter-spacing: .18em; }
.footer_locationBody[class] { line-height: 1.65; letter-spacing: .05em; }
.footer_foot { display: grid; align-items: end; }
.footer_times { display: grid; }
.footer_time { display: inline-flex; flex-wrap: wrap; color: var(--color-sand); letter-spacing: .1em; }
/* Cinzel's figures are proportional and the clock ticks every second, so pin
   each pair to the width of its widest rendering or the label beside it jitters */
[data-clock-hours], [data-clock-minutes], [data-clock-seconds] {
  display: inline-block;
  width: 2.1ch;
  text-align: center;
}
.footer_clock, .aside_clock { white-space: nowrap; }
.footer_pageTop { justify-self: end; }
.footer_pageTopLink { display: inline-grid; }
.footer_pageTopLinkText { grid-area: 1 / 1; display: grid; letter-spacing: .18em; }
.footer_pageTopLinkLine {
  grid-area: 1 / 1; align-self: end; width: 100%; height: 1px;
  background-color: currentColor; opacity: var(--rule-rest);
  transition: opacity .4s linear;
}
@media (any-hover: hover) {
}

@media (min-width: 681px) {
  .footer { padding-block: 1.875vw 2.3125vw; }
  .footer_next { margin-block-start: 14.625vw; margin-inline-start: -1.25vw; }
  .footer_nextLink { padding-block: 1.25vw; padding-inline: 1.25vw 0; }
  .footer_nextLink::before { width: 1.25vw; }
  .footer_nextLinkBlock { grid-template-columns: 22.5vw 1fr; gap: 2.5vw; padding-inline-end: 1.25vw; }
  .footer_nextLinkLine[data-button-last-line] { width: 90vw; }
  .footer_body { display: grid; grid-template-columns: max(124px, 12.5vw) 1fr; margin-block-start: 12.75vw; }
  .footer_list { margin-block-start: -.5vw; margin-inline-start: -.5vw; }
  .footer_link { padding: .5vw; }
  .footer_linkCircle { left: -2.5vw; width: .25vw; height: .25vw; }
  .footer_address { display: grid; grid-template-columns: 1fr auto; }
  .footer_snsList { margin-block-start: -.5vw; margin-inline-end: -.375vw; }
  .footer_snsLink { grid-template-columns: 1fr clamp(15px, 1.25vw, 22px); gap: .75vw; margin-inline-start: auto; padding: .5vw; }
  .footer_info { grid-area: 1 / 1; grid-template-columns: repeat(2, max(124px, 12.5vw)); }
  .footer_locationBody { margin-block-start: 1.25vw; }
  .footer_foot { grid-template-columns: repeat(36, 1fr); margin-block-start: 5.125vw; }
  .footer_copyright { grid-column: 1 / 4; }
  .footer_times { grid-column: 6 / 16; }
  .footer_time { gap: .1875vw; }
  .footer_place { margin-inline-start: 1.25vw; }
  .footer_pageTop { grid-column: 34 / 37; margin-block-end: -.625vw; margin-inline-end: -.625vw; }
  .footer_pageTopLink { padding: .625vw; }
}
@media (max-width: 680px) {
  .footer { padding-block: 7.4627vw 12.4378vw; }
  .footer_next { margin-block: 19.9005vw; margin-inline-start: -4.9751vw; }
  .footer_nextLink { padding-block: 4.9751vw; padding-inline: 4.9751vw 0; }
  .footer_nextLink::before { width: 4.9751vw; }
  .footer_nextLinkBlock { grid-template-columns: 9.9502vw 1fr; gap: 4.9751vw; padding-inline-end: 4.9751vw; }
  .footer_nextLinkLine[data-button-first-line] { width: 9.9502vw; }
  .footer_body { margin-block-start: 11.9403vw; padding-inline-start: 14.9254vw; }
  .footer_list { margin-block-start: -2.1144vw; margin-inline-start: -2.1144vw; }
  .footer_link { padding: 2.1144vw; }
  .footer_linkCircle { left: -12.8109vw; width: .995vw; height: .995vw; }
  .footer_address { margin-block-start: 1.9900vw; margin-inline-start: -.7463vw; }
  .footer_snsLink { grid-template-columns: 1fr 4.2vw; gap: 1.8vw; padding: .7463vw; }
  /* the address fills its fixed track exactly at 320px and butts against the
     next column; size the track to its content and put a real gap between them */
  .footer_info {
    grid-template-columns: max-content 1fr;
    column-gap: 5vw;
    margin-block-start: 13.9303vw;
    padding-inline-start: .7463vw;
  }
  .footer_locationBody { margin-block-start: 3.4826vw; }
  .footer_foot { grid-template-columns: repeat(32, 1fr); margin-block-start: 10.9453vw; }
  .footer_copyright { grid-column: 1 / 6; }
  .footer_times { grid-column: 8 / 26; }
  .footer_time { gap: .7463vw; }
  .footer_place { margin-inline-start: 2.4876vw; }
  .footer_pageTop { grid-column: 29 / 33; margin-block-end: -2.4876vw; margin-inline-end: -2.4876vw; }
  .footer_pageTopLink { padding: 2.4876vw; }
}

/* ============================================================================
   Aside (fixed corner furniture)
   ========================================================================== */
.aside {
  display: grid; align-items: end; position: fixed; bottom: 0; left: 0;
  z-index: var(--aside-index); width: 100vw; height: 100%; pointer-events: none;
  opacity: 0; visibility: hidden; transition: opacity .8s linear, visibility 0s linear .8s;
}
.js.-loaded .aside.-visible, html:not(.js) .aside { opacity: 1; visibility: visible; transition-delay: .3s, 0s; }
.aside p, .aside time { pointer-events: auto; }
.aside_block { display: grid; align-items: end; }
.aside_times { display: grid; }
.aside_time { display: inline-flex; flex-wrap: wrap; color: var(--color-ink); letter-spacing: .1em; }
.aside_copyright, .aside_scroll { color: var(--color-ink); letter-spacing: .18em; }
.aside_time, .aside_copyright, .aside_scroll {
  text-shadow:
    0 0 1px var(--color-paper), 0 0 1px var(--color-paper), 0 0 3px var(--color-paper),
    0 0 8px var(--color-paper), 0 0 16px var(--color-paper);
}
.aside_scroll { transition: opacity .5s linear; }
.aside.-scrolled .aside_scroll { opacity: 0; }

@media (min-width: 681px) {
  .aside { padding-block-end: 2.5vw; }
  .aside_block { grid-template-columns: repeat(36, 1fr); }
  .aside_copyright { grid-column: 1 / 4; }
  .aside_times { grid-column: 6 / 16; }
  .aside_time { gap: .1875vw; }
  .aside_place { margin-inline-start: 1.25vw; }
  .aside_scroll { grid-column: 34 / 37; justify-self: end; white-space: nowrap; }
}
@media (max-width: 680px) {
  .aside { padding-block-end: 7.9602vw; }
  .aside_block { grid-template-columns: repeat(32, 1fr); }
  .aside_copyright { grid-column: 1 / 6; }
  .aside_times { grid-column: 8 / 26; }
  .aside_time { gap: .7463vw; }
  .aside_place { margin-inline-start: 2.4876vw; }
  .aside_scroll { grid-column: 25 / 33; justify-self: end; white-space: nowrap; }
}

/* ============================================================================
   Entrance animations (only ever applied when JS is running)
   ========================================================================== */
.js [data-reveal] { opacity: 0; transform: translate3d(0, 1.6rem, 0); }
.js [data-reveal].-inView {
  opacity: 1; transform: none;
  transition: opacity 1.1s var(--ease), transform 1.1s var(--ease);
  transition-delay: var(--reveal-delay, 0s);
}

.js .paragraph_line { transform: translate3d(0, 140%, 0); }
.js [data-reveal-lines].-inView .paragraph_line {
  transform: none;
  transition: transform 1.15s var(--ease);
}
.js [data-reveal-lines].-inView .paragraph_text:nth-of-type(2) .paragraph_line { transition-delay: .1s; }
.js [data-reveal-lines].-inView .paragraph_text:nth-of-type(3) .paragraph_line { transition-delay: .2s; }

/* Every photograph arrives rather than appearing. main.js adds -loaded when the
   bytes land, and an image already in cache is marked before the first paint,
   so a repeat visit does not flicker.

   The gate is .imgFade, which main.js sets on itself — not .js, which the
   document sets in <head>. Hiding content behind a class the document promises
   and a deferred script has to redeem means one failed request leaves a page
   with no photographs in it. This way the worst case is no fade.

   The hero is excluded outright. It is preloaded at high priority precisely so
   it can paint early, and holding it back to wait on a script that arrives
   later would spend exactly what the preload bought. */
.imgFade .content img, .imgFade .footer img { opacity: 0; }
.imgFade .content img.-loaded, .imgFade .footer img.-loaded {
  opacity: 1;
  transition: opacity .85s var(--ease);
}
/* The hero is exempted here rather than with :not() in the rule above, because
   :not() takes the specificity of its argument — :not(.hero_img img) would have
   outweighed the .-loaded rule and held every photograph at zero. */
.imgFade .hero_img img { opacity: 1; transition: none; }

.js [data-img-reveal] { overflow: clip; }
.js [data-img-reveal] img { clip-path: inset(0 0 100% 0); transform: scale(1.14); }
.js [data-img-reveal].-inView img {
  clip-path: inset(0 0 0 0);
  transform: scale(1);
  /* opacity is named here as well because this shorthand would otherwise reset
     transition-property and silently drop the load fade these three share with
     every other photograph */
  transition: opacity .85s var(--ease), clip-path 1.3s var(--ease), transform 1.6s var(--ease);
}

.js [data-hero-title] { opacity: 0; }
.js.-loaded [data-hero-title] { opacity: 1; transition: opacity .4s linear; }

/* The headline is typed in. Words are inline-block so a line can only break
   between them, never mid-word, and the caret is a real element that travels
   with the cursor rather than sitting at the end of the string. */
.hero_word { display: inline-block; }
.hero_char { opacity: 0; }
.hero_char.-in { opacity: 1; }
.hero_caret {
  display: inline-block;
  width: 1px;
  height: 1em;
  margin-inline-start: .09em;
  vertical-align: -.1em;
  background-color: currentColor;
  opacity: .5;
  transition: opacity .45s linear;
}
.hero_caret.-blink { animation: caretBlink 1.05s steps(1) infinite; }
.hero_caret.-out { opacity: 0; }
@keyframes caretBlink { 0%, 50% { opacity: .5 } 50.01%, 100% { opacity: 0 } }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
  .js [data-reveal], .js [data-hero-title] { opacity: 1; transform: none; }
  .js .paragraph_line { transform: none; }
  .js [data-img-reveal] img { clip-path: none; transform: none; }
  .button_line, .footer_nextLinkLine { animation: none !important; }
}