@charset "UTF-8";
/* ---------------------------------------------------------------------------
   common.css
   Layout system, components and responsive rules.

   Naming follows the same FLOCSS-ish convention as the reference build:
     l-  layout      (l-main, l-nav, l-footer, l-flex)
     p-  project     (p-idxMain, p-pickupArticle, p-newsArticle ...)
     c-  component   (c-media, c-viewMore)
     js- behaviour hook only, never styled

   Breakpoints: 750px (handset), 960px, 1080px.
--------------------------------------------------------------------------- */

/* ===========================================================================
   1. Tokens
   ======================================================================== */
:root {
  /* Palette */
  --c-black: #000000;
  --c-white: #ffffff;
  --c-footer: #222222;
  --c-panel: #272727;
  --c-panel-2: #2f2f2f;
  --c-line: #363636;
  --c-grey: #808080;
  --c-grey-d: #616161;
  --c-grey-l: #b0b0b0;
  --c-grey-xl: #c6c6c6;
  --c-accent: #b10e81;
  --c-alert: #ff0000;
  --c-gold: #ddb40f;
  --c-ember: #dd3f0f;

  /* Type */
  --f-en: "Oswald", "Montserrat", "Helvetica Neue", Arial, sans-serif;
  --f-mont: "Montserrat", "Helvetica Neue", Arial, sans-serif;
  --f-jp: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Yu Gothic", Meiryo, sans-serif;

  /* Metrics measured off the reference layout */
  --thumb-w: 276px;
  --thumb-h: 392px;
  --thumb-gap: 24px;
  --header-h: 88px;
  --gutter: 40px;
  --maxw: 1200px;

  /* Pickup gallery. The card is sized by HEIGHT, not width: posters are tall,
     and the binding constraint is the space between the section title and the
     caption below. The subtracted figure reserves that furniture, so the card
     shrinks on short viewports instead of colliding with the text. Width then
     follows from the 2:3 poster ratio. */
  /* Initial value only — deliberately conservative so nothing can collide
     before JS runs. main.js's fit() measures the real gap between the stage and
     the caption and overrides this on the section. Do not tune it to fill the
     space; that is fit()'s job, and a generous value here just causes a flash
     of overlap on first paint. */
  --pk-h: clamp(140px, calc((100vh - 620px) / 1.2), 320px);
  --pk-gap: 52px;
  --pk-count: 6;
  --pk-step-h: 72vh;
  /* Half a step of dwell held at each end of the track, so the first and last
     cards get a band of scroll to rest in rather than a single position at the
     track's edge. Must match LEAD in main.js. */
  --pk-lead: 0.5;

  /* Motion */
  --e-out: cubic-bezier(0.22, 1, 0.36, 1);
  --e-inout: cubic-bezier(0.76, 0, 0.24, 1);
  --d-1: 0.4s;
  --d-2: 0.8s;
}

@media only screen and (max-width: 1080px) {
  :root {
    --thumb-w: 220px;
    --thumb-h: 312px;
    --gutter: 32px;
    --pk-h: clamp(150px, calc((100vh - 500px) / 1.2), 360px);
    --pk-gap: 38px;
  }
}

@media only screen and (max-width: 750px) {
  :root {
    --thumb-w: 148px;
    --thumb-h: 210px;
    --thumb-gap: 12px;
    --header-h: 64px;
    --gutter: 20px;
    /* Handsets reserve more: caption, pager row, rail and the news ticker. */
    --pk-h: clamp(140px, calc((100vh - 545px) / 1.2), 300px);
    --pk-gap: 24px;
    --pk-step-h: 62vh;
  }
}

/* ===========================================================================
   2. Base
   ======================================================================== */
html {
  background: var(--c-black);
}

body {
  font-family: var(--f-jp);
  font-size: 15px;
  line-height: 1.9;
  color: var(--c-white);
  background: var(--c-black);
  overflow-x: hidden;
  font-feature-settings: "palt" 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Lenis owns the scroll; these are its required host rules. */
html.lenis,
html.lenis body {
  height: auto;
}

.lenis.lenis-smooth {
  scroll-behavior: auto !important;
}

.lenis.lenis-stopped {
  overflow: hidden;
}

body.is-navOpen {
  overflow: hidden;
}

.montserrat {
  font-family: var(--f-mont);
  font-weight: 600;
  letter-spacing: 0.14em;
}

.oswald {
  font-family: var(--f-en);
  letter-spacing: 0.08em;
}

.l-main {
  position: relative;
  z-index: 1;
}

/* Visually hidden but available to assistive tech. */
.u-visuallyHidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

/* Skip link -- absent from the reference build, added for keyboard users. */
.u-skip {
  position: fixed;
  top: 8px;
  left: 8px;
  z-index: 999;
  padding: 10px 18px;
  font-family: var(--f-mont);
  font-size: 12px;
  letter-spacing: 0.1em;
  color: var(--c-black);
  background: var(--c-white);
  transform: translateY(-160%);
  transition: transform 0.25s var(--e-out);
}

.u-skip:focus {
  transform: translateY(0);
}

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

/* ===========================================================================
   3. Flex helpers
   ======================================================================== */
.l-flex {
  display: flex;
}

.l-flex--wrap    { flex-wrap: wrap; }
.l-flex--center  { align-items: center; justify-content: center; }
.l-flex--spb     { justify-content: space-between; }
.l-flex--v-center{ align-items: center; }

/* ===========================================================================
   4. c-media -- the universal image frame
   Every picture on the page sits in one of these: a fixed-ratio box that
   crops with object-fit and scales its child on hover.
   ======================================================================== */
.c-media {
  position: relative;
  overflow: hidden;
  background: #0b0b0b;
}

.c-media img,
.c-media video,
.c-media svg {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.c-media__image {
  width: 100%;
  height: 100%;
}

/* Reveal: frames wipe up from the bottom when scrolled into view. */
.c-media.js-reveal img,
.c-media.js-reveal svg {
  transform: scale(1.14);
  opacity: 0;
  transition: transform 1.2s var(--e-out), opacity 1s linear;
}

.c-media.js-reveal.is-inview img,
.c-media.js-reveal.is-inview svg {
  transform: scale(1);
  opacity: 1;
}

/* ===========================================================================
   5. Hero -- fixed plate + scrolling thumbnail field behind it
   ======================================================================== */
.p-idxBackground {
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
  transition: opacity 1.2s linear;
}

.p-idxBackground.is-active {
  opacity: 1;
}

.p-idxBackground__inner {
  position: absolute;
  top: 50%;
  left: 50%;
  display: flex;
  flex-direction: column;
  gap: var(--thumb-gap);
  transform: translate(-50%, -50%) rotate(-8deg) scale(1.25);
}

/* One marquee row. Duplicated inline in the markup so the loop is seamless. */
.p-idxMainBackground {
  display: flex;
  gap: var(--thumb-gap);
  width: max-content;
  will-change: transform;
  animation: marquee-l 64s linear infinite;
}

.p-idxMainBackground:nth-child(even) {
  animation-name: marquee-r;
  animation-duration: 78s;
}

.p-idxMainBackground:nth-child(3) { animation-duration: 92s; }
.p-idxMainBackground:nth-child(5) { animation-duration: 71s; }

.p-idxMainBackground__thumb {
  flex: 0 0 auto;
  width: var(--thumb-w);
  height: var(--thumb-h);
  opacity: 0.55;
}

@keyframes marquee-l {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(-50%, 0, 0); }
}

@keyframes marquee-r {
  from { transform: translate3d(-50%, 0, 0); }
  to   { transform: translate3d(0, 0, 0); }
}

/* The fixed hero plate.

   Deliberately quiet: black ground, one photograph at close to its native size,
   the name, and nothing else moving. The source portrait is 620px wide, so it
   is contained rather than stretched full-bleed — at these sizes it renders
   above 1.4x density and stays sharp, where a full-bleed crop would be soft.
   The drifting page field sits behind this plate and only appears as the hero
   fades on scroll, so the introduction itself stays still. */
.p-idxMainImage {
  position: fixed;
  top: 0;
  left: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100vh;
  height: 100svh;
  padding-bottom: 56px;          /* leaves the scroll cue its own air */
  z-index: 1;
  background: var(--c-black);
}

.p-hero {
  width: 100%;
}

.p-hero__inner {
  display: flex;
  align-items: center;
  gap: clamp(30px, 6vw, 88px);
  width: 100%;
  max-width: 1060px;
  margin: 0 auto;
  padding: 0 var(--gutter);
}

/* --- type ---------------------------------------------------------------- */
.p-hero__type {
  flex: 1 1 auto;
  min-width: 0;
}

.p-hero__name {
  font-family: var(--f-en);
  font-size: clamp(38px, 6.2vw, 80px);
  font-weight: 300;
  line-height: 1.02;
  letter-spacing: 0.015em;
  color: var(--c-white);
}

.p-hero__role {
  margin-top: 18px;
  font-size: clamp(11px, 1.25vw, 14px);
  font-weight: 600;
  letter-spacing: 0.38em;
  color: rgba(255, 255, 255, 0.66);
}

.p-hero__line {
  margin-top: 26px;
  max-width: 26em;
  font-size: 13px;
  line-height: 1.95;
  color: var(--c-grey-l);
}

.p-hero__line em {
  font-style: italic;
  color: var(--c-white);
}

/* --- portrait ------------------------------------------------------------ */
.p-hero__portrait {
  flex: 0 0 clamp(190px, 30vw, 400px);
  margin: 0;
  aspect-ratio: 620 / 725;
  overflow: hidden;
  background: #0b0b0b;
}

.p-hero__portrait img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Guards the look if a colour frame is ever swapped in. */
  filter: grayscale(1) contrast(1.05);
}

/* --- entrance ------------------------------------------------------------
   One settle on load, then nothing. No looping ken-burns: a hero that never
   stops moving reads as a screensaver, not an introduction. */
.p-hero__portrait img {
  opacity: 0;
  transform: scale(1.05);
  transition: opacity 1.4s linear, transform 2s var(--e-out);
}

.is-loaded .p-hero__portrait img {
  opacity: 1;
  transform: none;
}

.p-hero__name,
.p-hero__role,
.p-hero__line {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.9s linear, transform 1.1s var(--e-out);
}

.is-loaded .p-hero__name,
.is-loaded .p-hero__role,
.is-loaded .p-hero__line {
  opacity: 1;
  transform: none;
}

.is-loaded .p-hero__name { transition-delay: 0.15s; }
.is-loaded .p-hero__role { transition-delay: 0.30s; }
.is-loaded .p-hero__line { transition-delay: 0.45s; }

/* --- responsive ---------------------------------------------------------- */
@media only screen and (max-width: 960px) {
  .p-hero__inner { gap: clamp(24px, 4vw, 48px); }
  .p-hero__portrait { flex-basis: clamp(170px, 28vw, 280px); }
}

@media only screen and (max-width: 750px) {
  /* column-reverse puts the photograph above the name while keeping the name
     first in the DOM, where it belongs for reading order. */
  .p-hero__inner {
    flex-direction: column-reverse;
    align-items: center;
    gap: 30px;
    text-align: center;
  }
  .p-hero__portrait { flex: 0 0 auto; width: min(56vw, 230px); }
  .p-hero__role { margin-top: 14px; }
  .p-hero__line { display: none; }
}

@media only screen and (max-height: 620px) {
  .p-hero__line { display: none; }
}
/* Scroll hint. */
.p-idxMainImage__fvScroll {
  position: absolute;
  bottom: 34px;
  left: 50%;
  z-index: 3;
  transform: translateX(-50%);
  opacity: 0;
  transition: opacity 0.6s linear;
}

.p-idxMainImage__fvScroll.p-idxMainImage__scrollOn {
  opacity: 1;
}

.p-idxMainImage__scrlWrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  font-family: var(--f-mont);
  font-size: 10px;
  letter-spacing: 0.3em;
  color: var(--c-white);
}

.p-idxMainImage__scrlInner {
  position: relative;
  width: 1px;
  height: 56px;
  background: rgba(255, 255, 255, 0.28);
  overflow: hidden;
}

.p-idxMainImage__scrlInner::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 40%;
  background: var(--c-white);
  animation: scrollLine 2.2s var(--e-inout) infinite;
}

@keyframes scrollLine {
  0%   { transform: translateY(-100%); }
  60%  { transform: translateY(250%); }
  100% { transform: translateY(250%); }
}

/* Rights line, bottom-left of the hero. */
.p-idxMainImage__copyright {
  position: absolute;
  bottom: 14px;
  left: var(--gutter);
  z-index: 3;
  font-size: 10px;
  line-height: 1.6;
  letter-spacing: 0.02em;
  color: rgba(255, 255, 255, 0.62);
  max-width: 62%;
}

.p-idxMainImage__copyright.sp { display: none; }

@media only screen and (max-width: 750px) {
  .p-idxMainImage__copyright.pc { display: none; }
  .p-idxMainImage__copyright.sp {
    display: block;
    position: static;
    max-width: none;
    padding: 0 var(--gutter) 10px;
  }
}

/* ===========================================================================
   6. Fixed chrome -- header wordmark, nav toggle, news ticker
   ======================================================================== */
.p-idxHeaderLogo {
  position: fixed;
  top: 30px;
  left: var(--gutter);
  z-index: 60;
  width: 98px;
  height: 28px;
  opacity: 0;
  transform: translateY(-12px);
  transition: opacity var(--d-1) linear, transform var(--d-1) var(--e-out);
  pointer-events: none;
  background: none;
}

.p-idxHeaderLogo.is-visible {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.p-idxHeaderLogo svg { width: 100%; height: 100%; fill: var(--c-white); }

.l-nav {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 0;
  z-index: 80;
}

.l-nav__toggleBtn {
  position: absolute;
  top: 24px;
  right: var(--gutter);
  /* Must outrank .l-toggleNavContainer (70) inside .l-nav's stacking context.
     Without this the open overlay paints over the button, so the close "X" is
     drawn but invisible and unclickable. */
  z-index: 90;
  width: 48px;
  height: 48px;
  background: var(--c-white);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background var(--d-1) linear;
}

.l-nav__toggleBtn:hover { background: var(--c-grey-xl); }

/* Inverted state, applied by main.js while the fixed chrome sits over one of
   the white sections. Without it the white mark disappears into the page. */
.is-onLight .p-idxHeaderLogo svg { fill: var(--c-black); }
.is-onLight .p-idxHeaderLogo svg text { fill: var(--c-black); }
.is-onLight .p-idxHeaderLogo svg path { stroke: var(--c-black); }
.is-onLight .l-nav__toggleBtn { background: var(--c-black); }
.is-onLight .l-nav__toggleBtn:hover { background: var(--c-panel-2); }
.is-onLight .l-nav__toggleBtnIcon span { background: var(--c-white); }
.is-onLight .p-pagetop { border-color: rgba(0, 0, 0, .25); background: rgba(255, 255, 255, .8); }
.is-onLight .p-pagetop::before { border-color: var(--c-black); }
.is-onLight .p-pagetop:hover { background: var(--c-black); }
.is-onLight .p-pagetop:hover::before { border-color: var(--c-white); }

/* The overlay nav sits above everything, so it always uses the dark scheme. */
.is-navOpen .p-idxHeaderLogo svg,
.is-navOpen .p-idxHeaderLogo svg text { fill: var(--c-white); }
.is-navOpen .p-idxHeaderLogo svg path { stroke: var(--c-white); }
.is-navOpen .l-nav__toggleBtn { background: var(--c-white); }
.is-navOpen .l-nav__toggleBtnIcon span { background: var(--c-black); }

.l-nav__toggleBtnIcon {
  position: relative;
  width: 20px;
  height: 12px;
}

.l-nav__toggleBtnIcon span {
  position: absolute;
  left: 0;
  width: 100%;
  height: 2px;
  background: var(--c-black);
  transition: transform var(--d-1) var(--e-inout), opacity 0.2s linear;
}

.l-nav__toggleBtnIcon span:nth-child(1) { top: 0; }
.l-nav__toggleBtnIcon span:nth-child(2) { top: 5px; }
.l-nav__toggleBtnIcon span:nth-child(3) { top: 10px; }

.is-navOpen .l-nav__toggleBtnIcon span:nth-child(1) { transform: translateY(5px) rotate(45deg); }
.is-navOpen .l-nav__toggleBtnIcon span:nth-child(2) { opacity: 0; }
.is-navOpen .l-nav__toggleBtnIcon span:nth-child(3) { transform: translateY(-5px) rotate(-45deg); }

/* ---------------------------------------------------------------------------
   Language switch — sits immediately left of the nav toggle.
   ------------------------------------------------------------------------ */
.l-lang {
  position: absolute;
  top: 24px;
  right: calc(var(--gutter) + 58px);
  z-index: 90;                       /* same reasoning as .l-nav__toggleBtn */
  display: flex;
  align-items: stretch;
  height: 48px;
  overflow: hidden;
  font-family: var(--f-mont);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.14em;
  border: 1px solid rgba(255, 255, 255, 0.32);
  background: rgba(0, 0, 0, 0.4);
  -webkit-backdrop-filter: blur(6px);
          backdrop-filter: blur(6px);
}

.l-lang__opt {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 36px;
  padding: 0 9px;
  color: rgba(255, 255, 255, 0.55);
  transition: background var(--d-1) linear, color var(--d-1) linear;
}

.l-lang__opt.is-on {
  color: var(--c-black);
  background: var(--c-white);
}

.l-lang:hover .l-lang__opt:not(.is-on) { color: var(--c-white); }

/* ---------------------------------------------------------------------------
   Japanese view.

   The display faces (Oswald, Montserrat) carry no kana or kanji, so translated
   strings fall back to the JP stack — set it explicitly. Their wide tracking is
   also a Latin convention: at 0.38em, kana read as separated characters rather
   than words, so it is pulled in wherever Japanese replaces English.
   ------------------------------------------------------------------------ */
.is-ja .p-hero__role,
.is-ja .p-scriptMeta__specs,
.is-ja .p-scriptMeta__cat,
.is-ja .p-pickupCap__specs,
.is-ja .p-pickupCap__status,
.is-ja .p-pickupThumb__tag,
.is-ja .p-aboutMeta__row dt,
.is-ja .p-viewMore--light {
  font-family: var(--f-jp);
  letter-spacing: 0.08em;
}

.is-ja .p-hero__role { letter-spacing: 0.24em; }

.is-ja .p-hero__line,
.is-ja .p-aboutBody__lead p,
.is-ja .p-contact__sub,
.is-ja .p-pickupCap__text {
  line-height: 2.05;                 /* Japanese needs more leading than Latin */
}

/* Pseudo-element copy has to be swapped in CSS rather than by i18n.js. */
.is-ja .p-pickupArticle__elem.is-slot .p-pickupThumb::before { content: "空きスロット"; }
.is-ja .p-pickupArticle__elem.has-link.is-current .p-pickupThumb::before { content: "読む"; }

@media only screen and (max-width: 750px) {
  .p-idxHeaderLogo { top: 20px; width: 78px; height: 22px; }
  .l-nav__toggleBtn { top: 14px; width: 44px; height: 44px; }
  .l-lang {
    top: 14px;
    right: calc(var(--gutter) + 52px);
    height: 44px;
    font-size: 9px;
  }
  .l-lang__opt { min-width: 30px; padding: 0 7px; }
}

/* News ticker, pinned bottom-right. */
.p-idxFooterNews {
  position: fixed;
  right: 0;
  bottom: 0;
  z-index: 55;
  display: flex;
  align-items: center;
  gap: 14px;
  width: 480px;
  height: 72px;
  padding: 0 22px;
  background: rgba(0, 0, 0, 0.78);
  -webkit-backdrop-filter: blur(6px);
          backdrop-filter: blur(6px);
  transform: translateY(100%);
  transition: transform var(--d-2) var(--e-out);
}

.p-idxFooterNews.is-visible { transform: translateY(0); }

.p-idxFooterNews__label {
  flex: 0 0 auto;
  font-family: var(--f-mont);
  font-size: 10px;
  letter-spacing: 0.22em;
  color: var(--c-grey-l);
}

.p-idxFooterNews__body {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 12px;
  line-height: 1.5;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--c-white);
}

.p-idxFooterNews__arrow {
  flex: 0 0 auto;
  width: 22px;
  height: 8px;
  position: relative;
}

.p-idxFooterNews__arrow::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  height: 1px;
  background: var(--c-white);
  transition: transform var(--d-1) var(--e-out);
}

.p-idxFooterNews__arrow::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 0;
  width: 7px;
  height: 7px;
  border-top: 1px solid var(--c-white);
  border-right: 1px solid var(--c-white);
  transform: translateY(-50%) rotate(45deg);
}

.p-idxFooterNews:hover .p-idxFooterNews__arrow::before { transform: scaleX(1.25); transform-origin: right; }

@media only screen and (max-width: 750px) {
  .p-idxFooterNews {
    width: 100%;
    height: auto;
    flex-wrap: wrap;
    padding: 12px var(--gutter) 14px;
    gap: 4px 12px;
  }
  .p-idxFooterNews__body { white-space: normal; font-size: 11px; }
}

/* ===========================================================================
   7. Pickup -- scroll-driven highlight gallery

   A tall track with a pinned panel. main.js maps scroll progress across the
   track to a continuous index over the card row: the row translates so the
   active card holds the centre of the viewport, and each card's scale,
   opacity and saturation are a function of its distance from that index.
   One project reads as highlighted; its neighbours stay legible but recede.
   ======================================================================== */
/* The hero is fixed, so it adds no flow height of its own. This spacer gives
   it one viewport of scroll before the pickup track starts stacking over it. */
.p-idxMainSpacer {
  height: 100vh;
  height: 100svh;
  pointer-events: none;
}

/* Track length = one viewport to pin, a step per transition, plus the two
   half-step dwells at the ends (--pk-lead). */
.p-idxPickup {
  position: relative;
  z-index: 2;
  height: calc(100vh + (var(--pk-count) - 1 + 2 * var(--pk-lead)) * var(--pk-step-h));
}

/* Zero-height sticky rail so the section label pins for the whole track. */
#id-pickup-title {
  position: sticky;
  top: 0;
  height: 0;
  z-index: 6;
}

.p-idxPickup__title,
.p-idxNews__title,
.p-idxRelation__title {
  font-family: var(--f-mont);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.32em;
  color: var(--c-white);
}

/* Sits below the fixed header wordmark, which shares this left gutter. */
.p-idxPickup__title {
  position: absolute;
  top: 92px;
  left: var(--gutter);
  z-index: 6;
}

.titleInit {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity var(--d-2) linear, transform var(--d-2) var(--e-out);
}

.titleInit.is-inview {
  opacity: 1;
  transform: translateY(0);
}

/* The pinned panel. Left semi-transparent so the marquee field stays faintly
   visible behind the gallery instead of cutting to flat black. */
.p-pickupArticle {
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100svh;
  overflow: hidden;
  background: rgba(0, 0, 0, 0.8);
}

/* --- the card row ------------------------------------------------------- */
/* Anchored below the section title rather than centred, so a taller card grows
   downward into reserved space instead of over the caption. main.js translates
   on X only. */
.p-pickupStage {
  position: absolute;
  top: 128px;
  left: 50%;
  will-change: transform;
}

.p-pickupStage__row {
  display: flex;
  align-items: flex-start;
  gap: var(--pk-gap);
}

/* Width follows the height token through the 2:3 ratio. */
.p-pickupArticle__elem {
  flex: 0 0 auto;
  width: calc(var(--pk-h) * 2 / 3);
  transform-origin: center top;
  will-change: transform, opacity;
}

.p-pickupThumb__link {
  display: block;
  color: inherit;
}

/* 2:3, the poster standard. Cards prefer film artwork and fall back to the
   title page; a letter-ratio page crops only into its own margin here, whereas
   a poster in a letter-ratio slot would lose its title off the bottom. */
.p-pickupThumb {
  position: relative;
  width: 100%;
  aspect-ratio: 2 / 3;
  background: #0b0b0b;
  box-shadow: 0 26px 60px rgba(0, 0, 0, 0.55);
}

/* Only the highlighted card advertises itself as clickable; the neighbours
   recentre on click instead of navigating. */
.p-pickupArticle__elem.has-link.is-current .p-pickupThumb { cursor: pointer; }

.p-pickupArticle__elem.has-link.is-current .p-pickupThumb::before {
  content: "READ";
  position: absolute;
  z-index: 2;
  right: 0;
  bottom: 0;
  padding: 7px 14px;
  font-family: var(--f-mont);
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.2em;
  color: var(--c-white);
  background: var(--c-accent);
  opacity: 0;
  transform: translateY(100%);
  transition: opacity var(--d-1) linear, transform var(--d-1) var(--e-out);
}

.p-pickupArticle__elem.has-link.is-current:hover .p-pickupThumb::before {
  opacity: 1;
  transform: translateY(0);
}

/* Accent frame on the highlighted card. */
.p-pickupThumb::after {
  content: "";
  position: absolute;
  inset: 0;
  border: 1px solid transparent;
  transition: border-color 0.45s linear;
  pointer-events: none;
}

.p-pickupArticle__elem.is-current .p-pickupThumb::after {
  border-color: rgba(255, 255, 255, 0.55);
}

/* ---------------------------------------------------------------------------
   Empty design slots.

   Deliberately styled as placeholders rather than dressed up to look like
   credits: a dashed frame, a dimmed plate and the words EMPTY SLOT. A slot that
   looks like a finished card is the one that quietly goes live. Replace the
   entry in build.py's WORKS when the script exists.
   ------------------------------------------------------------------------ */
.p-pickupArticle__elem.is-slot .p-pickupThumb {
  background: #0d0d0d;
  box-shadow: none;
}

.p-pickupArticle__elem.is-slot .p-pickupThumb img { opacity: 0.2; }

.p-pickupArticle__elem.is-slot .p-pickupThumb::after {
  border: 1px dashed rgba(255, 255, 255, 0.26);
}

.p-pickupArticle__elem.is-slot .p-pickupThumb::before {
  content: "EMPTY SLOT";
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--f-mont);
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.24em;
  color: rgba(255, 255, 255, 0.5);
}

.p-pickupArticle__elem.is-slot .p-pickupThumb__tag { color: rgba(255, 255, 255, 0.3); }

.p-pickupCap.is-slot .p-pickupCap__cat {
  color: rgba(255, 255, 255, 0.7);
  background: transparent;
  border: 1px dashed rgba(255, 255, 255, 0.35);
}

.p-pickupCap.is-slot .p-pickupCap__title { color: rgba(255, 255, 255, 0.55); }

.p-pickupCap.is-slot .p-pickupCap__status {
  border-style: dashed;
  color: var(--c-grey);
}

.p-pickupPager.is-slot { opacity: 0.5; }

.p-pickupThumb__tag {
  margin-top: 14px;
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-align: center;
  color: rgba(255, 255, 255, 0.45);
  transition: color 0.45s linear;
}

.p-pickupArticle__elem.is-current .p-pickupThumb__tag {
  color: var(--c-white);
}

/* --- caption ------------------------------------------------------------ */
/* Grid stacking: every caption occupies the same cell, so the block sizes to
   the tallest one and they cross-fade in place without any absolute maths. */
.p-pickupCapSet {
  position: absolute;
  left: 50%;
  bottom: 92px;
  z-index: 4;
  display: grid;
  width: min(640px, 84vw);
  transform: translateX(-50%);
  text-align: center;
  pointer-events: none;
}

/* Flex column, so the status pill and the CTA below it each take their own
   line. As inline-level siblings they share one and overlap. */
.p-pickupCap {
  grid-area: 1 / 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  opacity: 0;
  visibility: hidden;
  transform: translateY(12px);
  transition: opacity 0.45s linear, transform 0.45s var(--e-out), visibility 0.45s linear;
}

.p-pickupCap.is-current {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.p-pickupCap.is-current a {
  pointer-events: auto;
}

.p-pickupCap__cat {
  display: inline-block;
  margin-bottom: 12px;
  padding: 4px 12px;
  font-family: var(--f-mont);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.2em;
  color: var(--c-white);
  background: var(--c-accent);
}

.p-pickupCap__title {
  font-family: var(--f-en);
  font-size: clamp(26px, 3.6vw, 46px);
  font-weight: 400;
  line-height: 1.15;
  letter-spacing: 0.04em;
  margin-bottom: 10px;
}

/* Format, length and year -- the specs a reader scans before the logline. */
.p-pickupCap__specs {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.16em;
  color: var(--c-grey);
  margin-bottom: 12px;
}

.p-pickupCap__text {
  font-size: 13px;
  line-height: 1.9;
  color: var(--c-grey-xl);
}

/* Status pill: in development, optioned, produced. */
.p-pickupCap__status {
  display: inline-block;
  margin-top: 16px;
  padding: 5px 14px;
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--c-white);
  border: 1px solid rgba(255, 255, 255, 0.32);
}

.p-viewMore.p-viewMore--light {
  color: var(--c-white);
  margin-top: 18px;
}

/* --- pagers ------------------------------------------------------------- */
/* Top-aligned with .p-pickupStage, NOT centred. The stage is anchored from the
   top so a tall card grows into reserved space; centring this list against a
   top-anchored row drops it straight through the cards. If you move the stage's
   top, move this with it. */
.p-pickupPagerSet {
  position: absolute;
  top: 128px;
  right: var(--gutter);
  z-index: 5;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 13px;
}

.p-pickupPager {
  display: flex;
  align-items: center;
  font-family: var(--f-mont);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.16em;
  color: rgba(255, 255, 255, 0.38);
  background: none;
  /* The list sits over the receding neighbour cards, so it needs to hold
     against whatever artwork is behind it. */
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.95), 0 0 2px rgba(0, 0, 0, 0.9);
  text-align: right;
  transition: color var(--d-1) linear;
}

.p-pickupPager__no::after {
  content: "";
  display: inline-block;
  width: 18px;
  height: 1px;
  margin: 0 10px;
  vertical-align: middle;
  background: currentColor;
  transition: width var(--d-1) var(--e-out);
}

.p-pickupPager.is-current,
.p-pickupPager:hover { color: var(--c-white); }
.p-pickupPager.is-current .p-pickupPager__no::after { width: 36px; }

/* --- progress rail ------------------------------------------------------ */
.p-pickupProgress {
  position: absolute;
  left: var(--gutter);
  right: var(--gutter);
  bottom: 38px;
  z-index: 4;
  height: 1px;
  background: rgba(255, 255, 255, 0.16);
}

.p-pickupProgress__bar {
  display: block;
  width: 0;
  height: 100%;
  background: var(--c-white);
}

/* --- responsive --------------------------------------------------------- */
@media only screen and (max-width: 1080px) {
  .p-pickupCapSet { bottom: 80px; }
}

@media only screen and (max-width: 750px) {
  .p-pickupStage { top: 104px; }
  .p-idxPickup__title { top: 70px; }

  /* Caption, pagers and rail stack above the docked news ticker. */
  .p-pickupCapSet { bottom: 146px; width: calc(100% - var(--gutter) * 2); }
  .p-pickupCap__text { font-size: 11px; line-height: 1.8; }
  .p-pickupCap__title { margin-bottom: 8px; }
  .p-viewMore.p-viewMore--light { margin-top: 10px; }

  .p-pickupPagerSet {
    top: auto;
    bottom: 92px;
    left: 50%;
    right: auto;
    flex-direction: row;
    align-items: center;
    gap: 6px;
    transform: translateX(-50%);
  }
  /* Numbers only -- six category labels will not fit across a handset. */
  .p-pickupPager { min-height: 44px; }
  .p-pickupPager__cat { display: none; }
  .p-pickupPager__no::after { width: 10px; margin: 0 5px; }
  .p-pickupPager.is-current .p-pickupPager__no::after { width: 18px; }

  .p-pickupProgress { bottom: 74px; }
}

/* Short viewports -- laptops and split-screen windows. Width-based rules do
   not help here: the card has already hit its floor while the caption still
   wants its full height, so the furniture itself has to give. Height queries
   apply at any width, so this must come last to win. */
@media only screen and (max-height: 760px) {
  :root { --pk-h: clamp(130px, calc((100vh - 470px) / 1.2), 400px); }

  .p-pickupStage { top: 92px; }
  .p-idxPickup__title { top: 62px; }

  .p-pickupCapSet { bottom: 62px; }
  .p-pickupCap__cat { margin-bottom: 8px; padding: 3px 10px; }
  .p-pickupCap__title { font-size: clamp(20px, 2.8vw, 30px); margin-bottom: 6px; }
  .p-pickupCap__specs { margin-bottom: 8px; }
  .p-pickupCap__text { font-size: 11px; line-height: 1.65; }
  .p-pickupCap__status { margin-top: 10px; }
  .p-viewMore.p-viewMore--light { margin-top: 10px; }

  .p-pickupProgress { bottom: 26px; }
  .p-pickupThumb__tag { margin-top: 9px; }
}

@media only screen and (min-width: 751px) and (max-height: 760px) {
  .p-pickupPagerSet { top: 92px; gap: 10px; }
}

@media only screen and (max-width: 750px) and (max-height: 760px) {
  /* Keep the mobile pager below the caption. Setting a top as well as a
     bottom would stretch its invisible hit area across the poster. */
  .p-pickupCapSet { bottom: 110px; }
  .p-pickupPagerSet { top: auto; bottom: 48px; }
}
/* ===========================================================================
   7a. Work -- the featured film.

   One credit, given depth: the film itself first, then poster, logline,
   synopsis and credits. A single piece presented properly reads as more
   serious than a grid padded out with placeholders.
   ======================================================================== */
.p-work {
  position: relative;
  z-index: 3;
  background: var(--c-black);
  padding: clamp(80px, 10vw, 140px) var(--gutter) clamp(60px, 8vw, 110px);
}

.p-work__title {
  font-family: var(--f-mont);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.32em;
  color: var(--c-white);
  margin-bottom: clamp(30px, 4vw, 52px);
}

.p-workFeature__video {
  max-width: 1000px;
  margin: 0 auto clamp(36px, 5vw, 64px);
}

/* Responsive video frame. */
.p-embed {
  position: relative;
  aspect-ratio: 16 / 9;
  background: #000;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.6);
}

.p-embed iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}

/* Featured film: the video carries it, so the text under it stays short. */
.p-filmMeta {
  max-width: 1000px;
  margin: clamp(26px, 3vw, 38px) auto 0;
}

.p-workFeature__body {
  gap: clamp(30px, 5vw, 66px);
  align-items: flex-start;
}

.p-workFeature__poster { flex: 0 0 clamp(170px, 22vw, 260px); }

.p-workPoster {
  width: 100%;
  aspect-ratio: 2 / 3;
  background: #0b0b0b;
  box-shadow: 0 22px 50px rgba(0, 0, 0, 0.55);
}

.p-workPoster img { transition: transform 0.9s var(--e-out); }
.p-workPoster a:hover img { transform: scale(1.04); }

.p-workFeature__meta {
  flex: 1 1 auto;
  min-width: 0;
}

.p-workFeature__title {
  font-family: var(--f-en);
  font-size: clamp(30px, 4.6vw, 56px);
  font-weight: 400;
  line-height: 1.1;
  letter-spacing: 0.03em;
  margin-bottom: 10px;
}

@media only screen and (max-width: 750px) {
  .p-workFeature__body { flex-wrap: wrap; }
  .p-workFeature__poster { flex-basis: 140px; }
}

/* ---------------------------------------------------------------------------
   Shared work metadata -- used by the homepage feature AND the script page.
   ------------------------------------------------------------------------ */
.p-scriptMeta__cat {
  display: inline-block;
  margin-bottom: 14px;
  padding: 5px 13px;
  font-family: var(--f-mont);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.2em;
  color: var(--c-white);
  background: var(--c-accent);
}

.p-scriptMeta__specs {
  font-family: var(--f-mont);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.16em;
  color: var(--c-grey);
  margin-bottom: 22px;
}

.p-scriptMeta__logline {
  font-size: clamp(15px, 1.6vw, 20px);
  line-height: 1.95;
  color: var(--c-grey-xl);
  max-width: 44em;
  margin-bottom: 20px;
}

.p-scriptMeta__synopsis {
  font-size: 13px;
  line-height: 2;
  color: var(--c-grey-l);
  max-width: 46em;
  margin-bottom: 14px;
}

/* Who wrote the summary is what makes it authoritative -- so it is stated on
   the page, visible to readers and machines alike, not hidden in metadata. */
.p-scriptMeta__provenance {
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.14em;
  color: var(--c-grey-d);
  margin-bottom: 26px;
}

.p-scriptMeta__status {
  display: inline-block;
  padding: 5px 14px;
  font-family: var(--f-mont);
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--c-white);
  border: 1px solid rgba(255, 255, 255, 0.32);
  margin-bottom: 34px;
}

.p-scriptCredits { margin-top: 26px; }

.p-scriptCredits__row {
  display: flex;
  gap: 18px;
  padding: 12px 0;
  border-bottom: 1px solid var(--c-line);
}

.p-scriptCredits__row dt {
  flex: 0 0 30%;
  max-width: 190px;
  font-family: var(--f-mont);
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.18em;
  color: var(--c-grey);
  padding-top: 2px;
}

.p-scriptCredits__row dd {
  flex: 1 1 auto;
  margin: 0;
  font-size: 13px;
  line-height: 1.7;
  color: var(--c-white);
}

@media only screen and (max-width: 750px) {
  .p-scriptCredits__row { flex-direction: column; gap: 2px; }
  .p-scriptCredits__row dt { flex-basis: auto; max-width: none; }
}

/* ===========================================================================
   7b. About -- bio plus the at-a-glance facts.
   ======================================================================== */
.p-idxAbout {
  position: relative;
  z-index: 3;
  background: var(--c-black);
  padding: clamp(70px, 9vw, 130px) var(--gutter);
}

.p-idxAbout__title {
  font-family: var(--f-mont);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.32em;
  color: var(--c-white);
  margin-bottom: clamp(32px, 4vw, 56px);
}

.p-aboutBody {
  gap: clamp(36px, 6vw, 90px);
  align-items: flex-start;
}

.p-aboutBody__lead {
  flex: 1 1 58%;
  min-width: 0;
}

.p-aboutBody__lead p {
  font-size: clamp(15px, 1.5vw, 19px);
  line-height: 2.05;
  color: var(--c-grey-xl);
}

.p-aboutBody__lead p + p { margin-top: 1.4em; }

.p-aboutMeta {
  flex: 0 1 34%;
  min-width: 0;
}

.p-aboutMeta__row {
  display: flex;
  gap: 18px;
  padding: 13px 0;
  border-bottom: 1px solid var(--c-line);
}

.p-aboutMeta__row dt {
  flex: 0 0 38%;
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.18em;
  color: var(--c-grey);
  padding-top: 2px;
}

.p-aboutMeta__row dd {
  flex: 1 1 auto;
  margin: 0;
  font-size: 13px;
  line-height: 1.7;
  color: var(--c-white);
}

@media only screen and (max-width: 960px) {
  .p-aboutBody { flex-wrap: wrap; }
  .p-aboutBody__lead,
  .p-aboutMeta { flex-basis: 100%; }
}

/* ===========================================================================
   7c. Contact -- one direct address, no form.
   ======================================================================== */
.p-contact {
  position: relative;
  z-index: 3;
  background: var(--c-black);
  border-top: 1px solid var(--c-line);
  padding: clamp(70px, 9vw, 130px) var(--gutter);
}

.p-contactInner {
  max-width: var(--maxw);
  margin: 0 auto;
  text-align: center;
}

.p-contact__lead {
  font-family: var(--f-en);
  font-size: clamp(30px, 5vw, 58px);
  font-weight: 400;
  letter-spacing: 0.05em;
  margin-bottom: 12px;
}

.p-contact__sub {
  font-size: 13px;
  line-height: 1.9;
  color: var(--c-grey-l);
  max-width: 40em;
  margin: 0 auto 34px;
}

.p-contact__mail {
  display: inline-block;
  font-family: var(--f-mont);
  font-size: clamp(14px, 2vw, 22px);
  font-weight: 600;
  letter-spacing: 0.08em;
  color: var(--c-white);
  padding-bottom: 6px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.4);
  transition: color var(--d-1) linear, border-color var(--d-1) linear;
  word-break: break-word;
}

.p-contact__mail:hover {
  color: var(--c-accent);
  border-color: var(--c-accent);
}

/* ===========================================================================
   8. Shared section furniture for the white blocks
   ======================================================================== */
.p-idxNews,
.p-idxRelation {
  position: relative;
  z-index: 3;
  background: var(--c-white);
  color: var(--c-black);
  padding: clamp(70px, 9vw, 140px) var(--gutter);
}

.p-idxNews .p-idxNews__title,
.p-idxRelation .p-idxRelation__title {
  color: var(--c-black);
  margin-bottom: clamp(32px, 4vw, 56px);
}

.p-sectionInner {
  max-width: var(--maxw);
  margin: 0 auto;
}

/* "VIEW MORE" pill, used by several sections. */
.p-viewMore {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin-top: 48px;
  font-family: var(--f-mont);
  font-size: 11px;
  letter-spacing: 0.24em;
  color: var(--c-black);
}

.p-viewMore::after {
  content: "";
  width: 46px;
  height: 1px;
  background: currentColor;
  transition: width var(--d-1) var(--e-out);
}

.p-viewMore:hover::after { width: 72px; }

/* ===========================================================================
   9. News list
   ======================================================================== */
.p-newsArticle__elem {
  gap: 28px;
  padding: 26px 0;
  border-top: 1px solid #e1dedf;
  align-items: flex-start;
  transition: opacity var(--d-1) linear;
}

.p-newsArticle__elem:last-child { border-bottom: 1px solid #e1dedf; }
.p-newsArticle__elem:hover { opacity: 0.62; }

.p-newsThumb {
  flex: 0 0 200px;
  aspect-ratio: 3 / 2;
  background: #eee;
}

.p-newsDescription {
  flex: 1 1 auto;
  min-width: 0;
}

.p-newsDescription__meta {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 8px;
}

.p-newsDescription__date {
  font-family: var(--f-mont);
  font-size: 11px;
  letter-spacing: 0.12em;
  color: var(--c-grey-d);
}

.p-newsDescription__cat {
  padding: 2px 10px;
  font-family: var(--f-mont);
  font-size: 9px;
  letter-spacing: 0.16em;
  color: var(--c-white);
  background: var(--c-black);
}

.p-newsDescription__title {
  font-size: 15px;
  font-weight: 500;
  line-height: 1.75;
  color: var(--c-black);
}

@media only screen and (max-width: 750px) {
  .p-newsArticle__elem { gap: 14px; padding: 18px 0; }
  .p-newsThumb { flex-basis: 108px; }
  .p-newsDescription__title { font-size: 13px; line-height: 1.6; }
}

/* ===========================================================================
   10. Relation grid
   ======================================================================== */
.p-relationArticle {
  flex-wrap: wrap;
  gap: 28px;
}

.p-relationArticle__elem {
  flex: 1 1 calc((100% - 28px * 2) / 3);
  min-width: 240px;
}

/* First two tiles run wide, mirroring the reference rhythm. */
.p-relationArticle__elem:nth-child(1),
.p-relationArticle__elem:nth-child(2) {
  flex-basis: calc((100% - 28px) / 2);
}

.p-relationArticle__link { display: block; }

.p-relationThumb {
  aspect-ratio: 4 / 3;
  background: #eee;
}

.p-relationThumb img,
.p-relationThumb svg {
  transition: transform 0.9s var(--e-out);
}

.p-relationArticle__link:hover .p-relationThumb img,
.p-relationArticle__link:hover .p-relationThumb svg { transform: scale(1.06); }

.p-relationArticle__cap {
  margin-top: 14px;
  font-size: 13px;
  font-weight: 500;
  color: var(--c-black);
}

.p-relationArticle__sub {
  font-family: var(--f-mont);
  font-size: 10px;
  letter-spacing: 0.16em;
  color: var(--c-grey-d);
}

@media only screen and (max-width: 960px) {
  .p-relationArticle { gap: 20px; }
  .p-relationArticle__elem,
  .p-relationArticle__elem:nth-child(1),
  .p-relationArticle__elem:nth-child(2) {
    flex-basis: calc((100% - 20px) / 2);
    min-width: 0;
  }
}

@media only screen and (max-width: 750px) {
  .p-relationArticle { gap: 14px; }
  .p-relationArticle__elem,
  .p-relationArticle__elem:nth-child(1),
  .p-relationArticle__elem:nth-child(2) {
    flex-basis: calc((100% - 14px) / 2);
  }
  .p-relationArticle__cap { font-size: 11px; margin-top: 10px; }
}

/* ===========================================================================
   11. Contact banner
   ======================================================================== */
.p-relationFooterContainer {
  position: relative;
  z-index: 3;
  background: var(--c-black);
  padding: clamp(60px, 8vw, 110px) var(--gutter);
}

.p-relationFooterInner {
  max-width: var(--maxw);
  margin: 0 auto;
  text-align: center;
}

.p-relationFooterInner__lead {
  font-family: var(--f-en);
  font-size: clamp(26px, 4vw, 48px);
  font-weight: 400;
  letter-spacing: 0.06em;
  margin-bottom: 10px;
}

.p-relationFooterInner__sub {
  font-size: 12px;
  color: var(--c-grey-l);
  margin-bottom: 34px;
}

.p-relationContactBtn {
  display: inline-flex;
  gap: 14px;
  min-width: 300px;
  height: 60px;
  padding: 0 34px;
  font-family: var(--f-mont);
  font-size: 12px;
  letter-spacing: 0.24em;
  color: var(--c-black);
  background: var(--c-white);
  transition: color var(--d-1) linear, background var(--d-1) linear;
}

.p-relationContactBtn::after {
  content: "";
  width: 30px;
  height: 1px;
  background: currentColor;
  transition: width var(--d-1) var(--e-out);
}

.p-relationContactBtn:hover {
  color: var(--c-white);
  background: var(--c-accent);
}

.p-relationContactBtn:hover::after { width: 50px; }

@media only screen and (max-width: 750px) {
  .p-relationContactBtn { min-width: 0; width: 100%; height: 56px; font-size: 11px; }
}

/* ===========================================================================
   12. Overlay navigation
   ======================================================================== */
.l-toggleNavContainer {
  position: fixed;
  inset: 0;
  z-index: 70;
  background: var(--c-black);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--d-2) var(--e-inout), visibility var(--d-2) linear;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

.l-toggleNavContainer.is-open {
  opacity: 1;
  visibility: visible;
}

.l-toggleNavContainer__inner {
  min-height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 48px;
  padding: 120px var(--gutter) 60px;
  max-width: var(--maxw);
  margin: 0 auto;
}

.l-toggleNav {
  gap: 0 40px;
}

.l-toggleNav__elem {
  flex: 0 0 calc((100% - 40px * 3) / 4);
  border-bottom: 1px solid var(--c-line);
}

.l-toggleNav__elem a {
  display: block;
  padding: 18px 0;
  font-family: var(--f-mont);
  font-size: 15px;
  letter-spacing: 0.16em;
  color: var(--c-white);
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.5s linear, transform 0.5s var(--e-out), color var(--d-1) linear;
}

.is-open .l-toggleNav__elem a {
  opacity: 1;
  transform: translateY(0);
}

/* Stagger the reveal across the grid. */
.l-toggleNav__elem:nth-child(1) a { transition-delay: .10s; }
.l-toggleNav__elem:nth-child(2) a { transition-delay: .15s; }
.l-toggleNav__elem:nth-child(3) a { transition-delay: .20s; }
.l-toggleNav__elem:nth-child(4) a { transition-delay: .25s; }
.l-toggleNav__elem:nth-child(5) a { transition-delay: .30s; }
.l-toggleNav__elem:nth-child(6) a { transition-delay: .35s; }
.l-toggleNav__elem:nth-child(7) a { transition-delay: .40s; }
.l-toggleNav__elem:nth-child(8) a { transition-delay: .45s; }

.l-toggleNav__elem a:hover { color: var(--c-accent); }

.l-toggleNav__elem a small {
  display: block;
  font-family: var(--f-jp);
  font-size: 10px;
  letter-spacing: 0.04em;
  color: var(--c-grey);
}

.l-toggleNav__contactBtn {
  display: flex;
  gap: 12px;
  height: 58px;
  font-family: var(--f-mont);
  font-size: 12px;
  letter-spacing: 0.22em;
  color: var(--c-black);
  background: var(--c-white);
  transition: color var(--d-1) linear, background var(--d-1) linear;
}

.l-toggleNav__contactBtn:hover { color: var(--c-white); background: var(--c-accent); }

.l-toggleNav__pickupContainer {
  border-top: 1px solid var(--c-line);
  padding-top: 26px;
}

.l-ftPickupNav { gap: 28px; flex-wrap: wrap; }

.l-ftPickupNav__elem a {
  font-family: var(--f-mont);
  font-size: 11px;
  letter-spacing: 0.18em;
  color: var(--c-grey-l);
  transition: color var(--d-1) linear;
}

.l-ftPickupNav__elem a:hover { color: var(--c-white); }

.l-toggleNavContainer__elem2 {
  border-top: 1px solid var(--c-line);
  padding-top: 26px;
  gap: 20px;
  flex-wrap: wrap;
}

.l-ftShareBtn { gap: 18px; }

.l-ftShareBtn__elem a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border: 1px solid var(--c-line);
  border-radius: 50%;
  transition: background var(--d-1) linear, border-color var(--d-1) linear;
}

.l-ftShareBtn__elem a:hover { background: var(--c-panel-2); border-color: var(--c-grey-d); }
.l-ftShareBtn__elem svg { width: 15px; height: 15px; fill: var(--c-white); }

.l-ftShareBtn__en {
  font-family: var(--f-mont);
  font-size: 11px;
  letter-spacing: 0.2em;
  color: var(--c-grey-l);
}

.l-ftShareBtn__en:hover { color: var(--c-white); }

@media only screen and (max-width: 960px) {
  .l-toggleNav__elem { flex-basis: calc((100% - 40px) / 2); }
}

@media only screen and (max-width: 750px) {
  .l-toggleNavContainer__inner { gap: 30px; padding: 92px var(--gutter) 48px; }
  .l-toggleNav { gap: 0; }
  .l-toggleNav__elem { flex-basis: 100%; }
  .l-toggleNav__elem a { padding: 13px 0; font-size: 13px; }
  .l-toggleNavContainer__elem2 { flex-direction: column; align-items: flex-start; }
}

/* ===========================================================================
   13. Footer
   ======================================================================== */
.l-footer {
  position: relative;
  z-index: 3;
  background: var(--c-footer);
  padding: clamp(50px, 6vw, 80px) var(--gutter) 40px;
}

.l-footer__inner {
  max-width: var(--maxw);
  margin: 0 auto;
}

.l-footer__logo {
  width: 140px;
  height: 41px;
  margin-bottom: 44px;
}

.l-footer__logo svg { width: 100%; height: 100%; fill: var(--c-white); }

/* A short, honest nav: a simple row, not a five-column grid with holes in it. */
.l-footerNav {
  gap: 0 36px;
  margin-bottom: 36px;
}

.l-footerNav__elem {
  flex: 0 0 auto;
  border-bottom: 1px solid var(--c-line);
  min-width: 140px;
}

.l-footerNav__elem a {
  display: block;
  padding: 12px 0;
  font-family: var(--f-mont);
  font-size: 11px;
  letter-spacing: 0.14em;
  color: var(--c-grey-xl);
  transition: color var(--d-1) linear;
}

.l-footerNav__elem a:hover { color: var(--c-white); }

.l-footerNav2 {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 26px;
  margin-bottom: 40px;
}

.l-footerNav2__elem a {
  font-size: 11px;
  color: var(--c-grey);
  transition: color var(--d-1) linear;
}

.l-footerNav2__elem a:hover { color: var(--c-white); }

.l-footer__bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
  border-top: 1px solid var(--c-line);
  padding-top: 26px;
}

.l-footer__imagica {
  width: 220px;
  height: 26px;
  margin: 0;
}

.l-footer__imagica svg { width: 100%; height: 100%; fill: var(--c-grey-l); }

.l-footer__copy {
  font-family: var(--f-mont);
  font-size: 10px;
  letter-spacing: 0.1em;
  color: var(--c-grey);
}

@media only screen and (max-width: 960px) {
  .l-footerNav__elem { flex-basis: calc((100% - 32px * 2) / 3); }
}

@media only screen and (max-width: 750px) {
  .l-footer { padding-bottom: 110px; }
  .l-footerNav { gap: 0; margin-bottom: 26px; }
  .l-footerNav__elem { flex-basis: 50%; }
  .l-footerNav__elem:nth-child(odd) { padding-right: 14px; }
  .l-footer__logo { width: 112px; height: 33px; margin-bottom: 30px; }
  .l-footer__bottom { flex-direction: column; align-items: flex-start; }
}

/* ===========================================================================
   14. Page-top button
   ======================================================================== */
.p-pagetop {
  position: fixed;
  right: var(--gutter);
  bottom: 96px;
  z-index: 56;
  width: 46px;
  height: 46px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(255, 255, 255, 0.3);
  background: rgba(0, 0, 0, 0.55);
  opacity: 0;
  visibility: hidden;
  transform: translateY(12px);
  transition: opacity var(--d-1) linear, visibility var(--d-1) linear,
              transform var(--d-1) var(--e-out), background var(--d-1) linear;
}

.p-pagetop.is-visible { opacity: 1; visibility: visible; transform: translateY(0); }
.p-pagetop:hover { background: var(--c-white); }
.p-pagetop:hover::before { border-color: var(--c-black); }

.p-pagetop::before {
  content: "";
  width: 9px;
  height: 9px;
  border-top: 1px solid var(--c-white);
  border-right: 1px solid var(--c-white);
  transform: translateY(2px) rotate(-45deg);
  transition: border-color var(--d-1) linear;
}

@media only screen and (max-width: 750px) {
  .p-pagetop { bottom: 128px; width: 40px; height: 40px; }
}