/* ==========================================================================
   Nao Portfolio — Graphic Editorial
   Black ground / Archivo 800 display / JetBrains Mono meta / Lime accent
   No border-radius, no elevation shadows. Hierarchy = surfaces + 1px hairlines.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Tokens
   -------------------------------------------------------------------------- */
:root {
  --bg:      #000000;
  --bg-1:    #0a0a0a;
  --bg-2:    #121212;
  --fg:      #ffffff;
  --fg-dim:  #8a8a8a;
  --fg-mute: #767676;   /* AA 4.54:1 on black */
  --line:    rgba(255, 255, 255, 0.14);
  --line-2:  rgba(255, 255, 255, 0.07);
  --accent:  #d8fb4f;
  --accent-d:#b8db2f;

  --display: 'Archivo', 'Noto Sans JP', sans-serif;
  --sans:    'Archivo', 'Noto Sans JP', sans-serif;
  --jp:      'Noto Sans JP', sans-serif;
  --mono:    'JetBrains Mono', monospace;

  --maxw: 1320px;
  --pad: 56px;

  --nav-h: 76px;
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);

  /* one motion language: everything reactive is --dur-hover,
     everything that enters the page is --dur-reveal. No overshoot. */
  --dur-hover: 280ms;
  --dur-reveal: 700ms;
}

/* --------------------------------------------------------------------------
   2. Reset / base
   -------------------------------------------------------------------------- */
*,
*::before,
*::after {
  box-sizing: border-box;
  border-radius: 0;
}

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

body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--sans);
  font-weight: 400;
  font-size: 15px;
  line-height: 1.7;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, p, figure, ul, ol {
  margin: 0;
  padding: 0;
}

ul, ol {
  list-style: none;
}

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

a {
  color: inherit;
  text-decoration: none;
}

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

::selection {
  background: var(--accent);
  color: #000;
}

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

/* --------------------------------------------------------------------------
   3. Shared utilities
   -------------------------------------------------------------------------- */
.reveal {
  opacity: 0;
  transform: translateY(36px);
  transition: opacity var(--dur-reveal) var(--ease-out), transform var(--dur-reveal) var(--ease-out);
}

.reveal.in {
  opacity: 1;
  transform: none;
}

.section {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 140px var(--pad);
}

.section-head {
  margin-bottom: 72px;
}

.section-num {
  display: block;
  font-family: var(--mono);
  font-weight: 500;
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--fg-dim);
  margin-bottom: 26px;
}

.section-title {
  font-family: var(--display);
  font-weight: 800;
  font-size: clamp(40px, 6.4vw, 96px);
  letter-spacing: -0.04em;
  line-height: 0.88;
  text-transform: uppercase;
}

.section-lead {
  margin-top: 30px;
  max-width: 34em;
  font-family: var(--jp);
  font-weight: 300;
  font-size: 15px;
  line-height: 2;
  color: var(--fg-dim);
}

/* --------------------------------------------------------------------------
   4. Global nav (3.2)
   -------------------------------------------------------------------------- */
.global-nav {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 24px var(--pad);
  border-bottom: 1px solid transparent;
  background: transparent;
  transition: padding var(--dur-hover) var(--ease), background var(--dur-hover) var(--ease),
    border-color var(--dur-hover) var(--ease);
}

.global-nav.scrolled {
  padding: 14px var(--pad);
  background: rgba(0, 0, 0, 0.82);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  border-bottom-color: var(--line);
}

.nav-logo {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-family: var(--display);
  font-weight: 800;
  font-size: 18px;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  line-height: 1;
  transition: opacity var(--dur-hover) var(--ease);
}

.nav-logo .dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--accent);
  display: inline-block;
  flex: 0 0 auto;
}

.nav-list {
  display: flex;
  align-items: center;
  gap: 34px;
}

.nav-list a {
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
  font-family: var(--mono);
  font-weight: 400;
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--fg-dim);
  transition: color var(--dur-hover) var(--ease);
}

.nav-list a i {
  font-style: normal;
  font-size: 10px;
  letter-spacing: 0.1em;
  color: var(--fg-mute);
  transition: color var(--dur-hover) var(--ease);
}

.nav-list a:hover {
  color: var(--fg);
}

.nav-list a:hover i {
  color: var(--fg);
}

.nav-cta {
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--accent);
  color: var(--accent);
  font-family: var(--mono);
  font-weight: 500;
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  padding: 10px 20px;
  line-height: 1;
  transition: background var(--dur-hover) var(--ease), color var(--dur-hover) var(--ease),
    opacity var(--dur-hover) var(--ease);
}

.nav-cta:hover {
  background: var(--accent);
  color: #000;
}

/* --- scroll progress (M-7) ----------------------------------------------- */
/* the one deliberate exception to the reduced-lime rule: this reports
   "you are here", which is exactly what the accent is reserved for */
.scroll-progress {
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 2px;
  pointer-events: none;
  overflow: hidden;
}

.scroll-progress span {
  display: block;
  width: 0;
  height: 100%;
  background: var(--accent);
}

/* --- mobile nav (addendum A) --------------------------------------------- */
.nav-toggle {
  display: none;
  width: 44px;
  height: 44px;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-right: -10px;
  flex: 0 0 auto;
}

.nav-toggle span {
  display: block;
  width: 22px;
  height: 1px;
  background: var(--fg);
  transition: transform var(--dur-hover) var(--ease), opacity var(--dur-hover) var(--ease);
}

.nav-toggle[aria-expanded="true"] span:first-child {
  transform: translateY(4.5px) rotate(45deg);
}

.nav-toggle[aria-expanded="true"] span:last-child {
  transform: translateY(-4.5px) rotate(-45deg);
}

.nav-drawer {
  position: fixed;
  inset: 0;
  z-index: 190;
  background: rgba(0, 0, 0, 0.96);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  display: flex;
  align-items: center;
  padding: calc(var(--nav-h) + 20px) var(--pad) var(--pad);
  overflow-y: auto;
  overflow-x: hidden;   /* the hover shift must not open a sideways scroll */
}

.nav-drawer[hidden] {
  display: none;
}

.nav-drawer-list {
  width: 100%;
  border-top: 1px solid var(--line);
}

.nav-drawer-list li {
  border-bottom: 1px solid var(--line);
}

.nav-drawer-list a {
  display: flex;
  align-items: baseline;
  gap: 16px;
  padding: 18px 0;
  font-family: var(--display);
  font-weight: 800;
  font-size: clamp(32px, 9vw, 40px);
  letter-spacing: -0.03em;
  line-height: 1;
  text-transform: uppercase;
  color: var(--fg);
  transition: transform var(--dur-hover) var(--ease-out);
}

.nav-drawer-list a i {
  font-family: var(--mono);
  font-style: normal;
  font-weight: 500;
  font-size: 11px;
  letter-spacing: 0.18em;
  color: var(--fg-mute);
}

.nav-drawer-list a:hover,
.nav-drawer-list a:focus-visible {
  transform: translateX(8px);
}

/* the header paints above the drawer (z-index 200 vs 190), so while the
   drawer is open its logo and CTA must not be clickable. The toggle stays
   live - it is how the drawer is closed. */
body.drawer-open .nav-logo,
body.drawer-open .nav-cta {
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--dur-hover) var(--ease);
}

/* the drawer belongs to narrow widths only */
@media (min-width: 561px) {
  .nav-drawer {
    display: none !important;
  }
}

/* --------------------------------------------------------------------------
   5. Hero (3.3)
   -------------------------------------------------------------------------- */
.hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  border-bottom: 1px solid var(--line);
}

.hero-media {
  position: absolute;
  inset: 0;
  z-index: 0;
  will-change: transform;
}

.hero-layer {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  opacity: 0;
  transition: opacity var(--dur-reveal) var(--ease-out);
  will-change: opacity;
}

.hero-layer.is-active {
  opacity: 1;
  animation: kenburns 24s ease-in-out infinite alternate;
}

@keyframes kenburns {
  from { transform: scale(1); }
  to   { transform: scale(1.08); }
}

/* Readability of the oversized type is the priority. */
.hero-scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(to bottom,
      rgba(0, 0, 0, 0.88) 0%,
      rgba(0, 0, 0, 0.45) 26%,
      rgba(0, 0, 0, 0.62) 62%,
      rgba(0, 0, 0, 0.94) 100%),
    linear-gradient(to right,
      rgba(0, 0, 0, 0.7) 0%,
      rgba(0, 0, 0, 0.35) 55%,
      rgba(0, 0, 0, 0.55) 100%),
    rgba(0, 0, 0, 0.55);
  pointer-events: none;
}

.hero-inner {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: var(--maxw);
  margin: 0 auto;
  padding: calc(var(--nav-h) + 20px) var(--pad) 44px;
}

.hero-eyebrow {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--mono);
  font-weight: 500;
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--fg-dim);
  margin-bottom: 22px;
}

.hero-eyebrow .mark {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--accent);
  flex: 0 0 auto;
}

/* --- craft list : the hero's lead actor ---------------------------------- */
.craft-list {
  border-top: 1px solid var(--line);
}

.craft-line {
  position: relative;
  padding-right: 14px;         /* slack so the hover shift stays inside */
  border-bottom: 1px solid var(--line);
  transition: border-color var(--dur-hover) var(--ease);
}

.craft-line:hover,
.craft-line:focus-within {
  border-bottom-color: var(--fg);
}

.craft-link {
  display: grid;
  width: 100%;
  grid-template-columns: 74px 1fr auto;
  align-items: baseline;
  gap: 0 20px;
  padding: 7px 0 9px;
  color: inherit;
  text-decoration: none;
  transition: transform var(--dur-hover) var(--ease);
}

.craft-link:hover,
.craft-link:focus-visible {
  transform: translateX(10px);
}

.craft-idx {
  font-family: var(--mono);
  font-weight: 500;
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--fg-mute);
  transition: color var(--dur-hover) var(--ease);
}

.craft-link:hover .craft-idx,
.craft-link:focus-visible .craft-idx {
  color: var(--fg);
}

.craft-name {
  font-family: var(--display);
  font-weight: 800;
  font-size: clamp(40px, 6.8vw, 110px);
  letter-spacing: -0.04em;
  line-height: 0.9;
  text-transform: uppercase;
  color: var(--fg);
  transition: color var(--dur-hover) var(--ease);
}

.craft-link:hover .craft-jp,
.craft-link:focus-visible .craft-jp {
  color: var(--fg);
}

/* the first two rows are the primary fields; the rest step down in size and
   sit one step back in colour, so the ranking reads without being counted.
   The clamp minimums match what the <=560 rules yield at 560px (68 / 56),
   which keeps the 560/561 boundary continuous. */
.craft-line:nth-child(1) .craft-name,
.craft-line:nth-child(2) .craft-name {
  font-size: clamp(68px, 7.5vw, 122px);
}

.craft-line:nth-child(n + 3) .craft-name {
  font-size: clamp(56px, 5.9vw, 96px);
  color: var(--fg-dim);
}

/* ...but every row must still read as interactive on hover / focus */
.craft-line .craft-link:hover .craft-name,
.craft-line .craft-link:focus-visible .craft-name {
  color: var(--fg);
}

.craft-jp {
  justify-self: end;
  font-family: var(--jp);
  font-weight: 300;
  font-size: 12px;
  letter-spacing: 0.06em;
  line-height: 1.8;
  color: var(--fg-dim);
  white-space: nowrap;
}

.hero-foot {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 40px;
  margin-top: 20px;
  padding-right: 78px;   /* keeps the motto clear of .scroll-indicator */
}

.hero-claim {
  font-family: var(--jp);
  font-weight: 300;
  font-size: 15px;
  line-height: 2;
  color: var(--fg);
  max-width: 30em;
}

.hero-claim b {
  font-weight: 500;
  color: var(--fg);
}

.hero-motto {
  font-family: var(--jp);
  font-weight: 400;
  font-size: 13px;
  letter-spacing: 0.3em;
  color: var(--fg-dim);
  white-space: nowrap;
}

.scroll-indicator {
  position: absolute;
  right: var(--pad);
  bottom: 40px;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}

.scroll-indicator span {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--fg-mute);
  writing-mode: vertical-rl;
}

.scroll-line {
  width: 1px;
  height: 64px;
  background: var(--line);
  position: relative;
  overflow: hidden;
}

.scroll-line::after {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  width: 1px;
  height: 40%;
  background: var(--fg-dim);
  animation: scrollDrop 2.2s var(--ease) infinite;
}

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

/* --------------------------------------------------------------------------
   6. Marquee (3.4)
   -------------------------------------------------------------------------- */
.marquee {
  overflow: hidden;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: var(--bg);
  padding: 18px 0;
  user-select: none;
}

.marquee-track {
  display: flex;
  align-items: center;
  width: max-content;
  animation: marqueeScroll 38s linear infinite;
}

@keyframes marqueeScroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

.marquee-track span {
  flex: 0 0 auto;
  font-family: var(--mono);
  font-weight: 400;
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--fg-dim);
  padding: 0 20px;
  white-space: nowrap;
}

.marquee-track span.sep {
  color: var(--fg-mute);
  padding: 0;
}

/* --------------------------------------------------------------------------
   7. Strength (3.5)
   -------------------------------------------------------------------------- */
.strength {
  padding-top: 120px;
}

.strength-list {
  border-bottom: 1px solid var(--line);
}

.strength-item {
  display: grid;
  grid-template-columns: 120px 1fr;
  gap: 0 24px;
  align-items: start;
  border-top: 1px solid var(--line);
  padding: 38px 20px 38px 0;
  transition: opacity var(--dur-reveal) var(--ease-out), transform var(--dur-reveal) var(--ease-out),
    background var(--dur-hover) var(--ease), padding var(--dur-hover) var(--ease);
}

.strength-item:hover {
  background: var(--bg-1);
  padding-left: 20px;
}

.s-num {
  font-family: var(--mono);
  font-weight: 500;
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--fg-mute);
  padding-top: 8px;
  transition: color var(--dur-hover) var(--ease);
}

.strength-item:hover .s-num {
  color: var(--fg);
}

.s-body h3 {
  font-family: var(--jp);
  font-weight: 500;
  font-size: clamp(21px, 2.5vw, 32px);
  line-height: 1.45;
  letter-spacing: 0.01em;
  color: var(--fg);
  max-width: 22em;
}

.s-body .s-skills {
  margin-top: 12px;
  font-family: var(--mono);
  font-weight: 400;
  font-size: 11px;
  letter-spacing: 0.1em;
  line-height: 1.9;
  color: var(--fg-mute);
}

.s-body p {
  margin-top: 16px;
  max-width: 38em;
  font-family: var(--jp);
  font-weight: 300;
  font-size: 14px;
  line-height: 2;
  color: var(--fg-dim);
}




/* --- chain --------------------------------------------------------------- */
.chain {
  background: var(--bg-1);
  border: 1px solid var(--line-2);
  border-left: 1px solid var(--line);
  padding: 44px 40px;
  margin-top: 80px;
}

.chain-label {
  font-family: var(--mono);
  font-weight: 500;
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--fg-dim);
  margin-bottom: 24px;
}

.chain-flow {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 0;
}

/* each li is a square 1px chip; the arrow lives in the reserved right margin
   so it renders outside the frame */
.chain-flow li {
  position: relative;
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--line);
  padding: 9px 14px;
  margin-right: 28px;
  font-family: var(--jp);
  font-weight: 400;
  font-size: 12px;
  letter-spacing: 0.1em;
  line-height: 1;
  color: var(--fg);
  white-space: nowrap;
  transition: border-color var(--dur-hover) var(--ease);
}

.chain-flow li::after {
  content: '\2192';
  position: absolute;
  left: 100%;
  top: 50%;
  transform: translateY(-50%);
  margin-left: 9px;
  font-family: var(--mono);
  font-size: 12px;
  line-height: 1;
  color: var(--fg-mute);
}

.chain-flow li:last-child {
  margin-right: 0;
}

.chain-flow li:last-child::after {
  content: none;
}

.chain-flow.is-process {
  margin-top: 4px;
}

/* the second label needs air once a rail sits above it */
.chain-flow + .chain-label {
  margin-top: 34px;
}

.chain-note {
  margin-top: 26px;
  font-family: var(--jp);
  font-weight: 300;
  font-size: 13px;
  line-height: 2;
  color: var(--fg-dim);
}

/* --- facts --------------------------------------------------------------- */
.facts {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border-top: 1px solid var(--line);
  border-left: 1px solid var(--line);
  margin-top: 80px;
}

.fact {
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  padding: 34px 26px 30px;
  min-width: 0;
}

.f-num {
  display: block;
  font-family: var(--display);
  font-weight: 800;
  font-size: clamp(48px, 6vw, 88px);
  letter-spacing: -0.04em;
  line-height: 0.88;
  color: var(--fg);
}

.f-label {
  display: block;
  margin-top: 18px;
  font-family: var(--mono);
  font-weight: 500;
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--fg);
}

.f-label em {
  display: block;
  margin-top: 8px;
  font-family: var(--jp);
  font-style: normal;
  font-weight: 300;
  font-size: 12px;
  letter-spacing: 0.04em;
  line-height: 1.8;
  text-transform: none;
  color: var(--fg-dim);
}

/* --------------------------------------------------------------------------
   8. Works (3.6)
   -------------------------------------------------------------------------- */
.works {
  padding-top: 130px;
}

.works-tabs {
  display: flex;
  gap: 0;
  overflow-x: auto;
  overflow-y: hidden;   /* otherwise overflow-y computes to auto and steals
                           the first ArrowDown with a 1px scroll */
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  margin-bottom: 64px;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}

.works-tabs::-webkit-scrollbar {
  display: none;
}

.tab {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: baseline;
  gap: 9px;
  position: relative;
  padding: 18px 26px;
  border-right: 1px solid var(--line);
  font-family: var(--mono);
  font-weight: 400;
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--fg-dim);
  line-height: 1;
  transition: color var(--dur-hover) var(--ease), background var(--dur-hover) var(--ease);
}

.tab i {
  font-style: normal;
  font-size: 10px;
  color: var(--fg-dim);
  transition: color var(--dur-hover) var(--ease);
}

.tab:hover {
  color: var(--fg);
}

.tab:hover i {
  color: var(--fg);
}

.tab.active {
  color: var(--fg);
  background: transparent;
}

.tab.active i {
  color: var(--fg);
}

.tab.active::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 1px;
  background: var(--fg);
  animation: tabRule var(--dur-hover) var(--ease-out);
  transform-origin: left center;
}

@keyframes tabRule {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}

.works-panel {
  display: none;
}

.works-panel.active {
  display: block;
}

.works-note {
  margin-top: 44px;
  padding-top: 22px;
  border-top: 1px solid var(--line-2);
  font-family: var(--jp);
  font-weight: 300;
  font-size: 13px;
  line-height: 2;
  color: var(--fg-dim);
}

.inline-link {
  color: var(--fg);
  border-bottom: 1px solid var(--fg-dim);
  padding-bottom: 1px;
  transition: opacity var(--dur-hover) var(--ease);
}

.inline-link:hover {
  opacity: 0.7;
}

/* --- video --------------------------------------------------------------- */
.video-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--line-2);
  border: 1px solid var(--line-2);
}

.video-card {
  background: var(--bg);
  cursor: pointer;
  transition: background var(--dur-hover) var(--ease);
}

.video-card:hover {
  background: var(--bg-1);
}

.video-card .thumb {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: var(--bg-2);
}

/* a restrained darkening so the play affordance reads on bright frames */
.video-card .thumb::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  background: rgba(0, 0, 0, 0.28);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--dur-hover) var(--ease);
}

.video-card:hover .thumb::after,
.video-card:focus-visible .thumb::after {
  opacity: 1;
}

.video-card .thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(0.4) brightness(0.94);
  transition: transform var(--dur-hover) var(--ease), filter var(--dur-hover) var(--ease);
}

.video-card:hover .thumb img,
.video-card:focus-visible .thumb img {
  transform: scale(1.05);
  filter: none;
}

.video-card .play {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 56px;
  height: 56px;
  display: grid;
  place-items: center;
  z-index: 2;
  border: 1px solid var(--fg);
  background: rgba(0, 0, 0, 0.3);
  color: var(--fg);
  font-size: 14px;
  transition: background var(--dur-hover) var(--ease), color var(--dur-hover) var(--ease),
    border-color var(--dur-hover) var(--ease);
}

.video-card:hover .play,
.video-card:focus-visible .play {
  background: var(--fg);
  border-color: var(--fg);
  color: #000;
}

.thumb-label {
  position: absolute;
  z-index: 2;
  left: 16px;
  bottom: 14px;
  font-family: var(--mono);
  font-weight: 500;
  font-size: 10px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--fg);
  opacity: 0;
  transform: translateY(6px);
  pointer-events: none;
  transition: opacity var(--dur-hover) var(--ease-out),
    transform var(--dur-hover) var(--ease-out);
}

.video-card:hover .thumb-label,
.video-card:focus-visible .thumb-label {
  opacity: 1;
  transform: none;
}

.video-card .meta {
  padding: 20px 20px 24px;
}

.video-card .meta h3 {
  font-family: var(--display);
  font-weight: 700;
  font-size: 15px;
  letter-spacing: 0.01em;
  line-height: 1.3;
  text-transform: uppercase;
}

.video-card .meta p {
  margin-top: 8px;
  font-family: var(--jp);
  font-weight: 300;
  font-size: 12px;
  line-height: 1.8;
  color: var(--fg-dim);
}

.video-card .meta .v-type {
  margin-top: 8px;
  font-family: var(--jp);
  font-weight: 300;
  font-size: 12px;
  line-height: 1.8;
  color: var(--fg-dim);
}

/* facts, not chips - no frames, readable at rest, a touch brighter on focus */
.v-facts {
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid var(--line-2);
  list-style: none;
}

.v-facts li {
  display: flex;
  align-items: baseline;
  gap: 12px;
  font-family: var(--jp);
  font-weight: 300;
  font-size: 12px;
  line-height: 1.7;
  color: var(--fg-dim);
  transition: color var(--dur-hover) var(--ease);
}

.v-facts li span {
  flex: 0 0 auto;
  font-family: var(--mono);
  font-weight: 500;
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--fg-mute);
  transition: color var(--dur-hover) var(--ease);
}

.video-card:hover .v-facts li,
.video-card:focus-visible .v-facts li,
.video-card:hover .v-facts li span,
.video-card:focus-visible .v-facts li span {
  color: var(--fg);
}

/* --- photo --------------------------------------------------------------- */
.photo-category {
  margin-bottom: 72px;
}

.photo-category-head {
  display: flex;
  align-items: baseline;
  gap: 16px;
  flex-wrap: wrap;
  padding-bottom: 16px;
  margin-bottom: 20px;
  border-bottom: 1px solid var(--line);
}

.pc-idx {
  font-family: var(--mono);
  font-weight: 500;
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--fg-mute);
}

.photo-category-head h3 {
  font-family: var(--jp);
  font-weight: 500;
  font-size: 18px;
  letter-spacing: 0.02em;
}

.photo-category-head p {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--fg-dim);
}

.photo-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--line-2);
  border: 1px solid var(--line-2);
}

.photo-item {
  position: relative;
  overflow: hidden;
  background: var(--bg-2);
  aspect-ratio: 1 / 1;
  cursor: pointer;
}

/* The photo work is the content itself — always full colour. */
.photo-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: none;
  transition: transform var(--dur-hover) var(--ease), filter var(--dur-hover) var(--ease);
}

.photo-item:hover img {
  transform: scale(1.06);
  filter: brightness(1.08);
}

/* --- web ----------------------------------------------------------------- */
.web-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1px;
  background: var(--line-2);
  border: 1px solid var(--line-2);
}

.web-card {
  display: block;
  background: var(--bg);
  transition: background var(--dur-hover) var(--ease);
}

.web-card:hover {
  background: var(--bg-1);
}

.web-frame {
  border-bottom: 1px solid var(--line-2);
}

.web-bar {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 11px 14px;
  border-bottom: 1px solid var(--line-2);
  background: var(--bg-2);
}

.web-bar span {
  width: 7px;
  height: 7px;
  background: var(--fg-mute);
  flex: 0 0 auto;
}

.web-bar em {
  margin-left: 10px;
  font-family: var(--mono);
  font-style: normal;
  font-size: 10px;
  letter-spacing: 0.14em;
  color: var(--fg-dim);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.web-card:hover .web-bar em {
  color: var(--fg);
}

.web-screen {
  position: relative;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: var(--bg-2);
}

.web-screen img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  filter: grayscale(0.4) brightness(0.94);
  transition: transform var(--dur-hover) var(--ease), filter var(--dur-hover) var(--ease);
}

.web-card:hover .web-screen img {
  transform: scale(1.03);
  filter: none;
}

.web-meta {
  padding: 22px 22px 26px;
}

.web-meta h3 {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--jp);
  font-weight: 500;
  font-size: 17px;
  letter-spacing: 0.02em;
}

.web-meta h3 i {
  font-size: 11px;
  color: var(--fg-mute);
  transition: color var(--dur-hover) var(--ease), transform var(--dur-hover) var(--ease);
}

.web-card:hover .web-meta h3 i {
  color: var(--fg);
  transform: translate(3px, -3px);
}

.web-meta p {
  margin-top: 8px;
  font-family: var(--jp);
  font-weight: 300;
  font-size: 12px;
  line-height: 1.8;
  color: var(--fg-dim);
}

/* --- music --------------------------------------------------------------- */
.music-wrap {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 1px;
  background: var(--line-2);
  border: 1px solid var(--line-2);
}

.music-player {
  background: var(--bg);
}

.yt-embed {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: var(--bg-2);
  cursor: pointer;
}

.yt-embed img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(0.4) brightness(0.94);
  transition: transform var(--dur-hover) var(--ease), filter var(--dur-hover) var(--ease);
}

.yt-embed:hover img {
  transform: scale(1.04);
  filter: none;
}

.yt-embed iframe {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}

.yt-play {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 64px;
  height: 64px;
  display: grid;
  place-items: center;
  border: 1px solid var(--fg);
  background: rgba(0, 0, 0, 0.3);
  color: var(--fg);
  font-size: 16px;
  transition: background var(--dur-hover) var(--ease), color var(--dur-hover) var(--ease),
    border-color var(--dur-hover) var(--ease);
}

.yt-embed:hover .yt-play {
  background: var(--fg);
  border-color: var(--fg);
  color: #000;
}

.music-credits {
  background: var(--bg-1);
  padding: 40px 34px;
}

.music-credits h3 {
  font-family: var(--display);
  font-weight: 800;
  font-size: 22px;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  margin-bottom: 22px;
}

.music-credits ul li {
  display: flex;
  align-items: baseline;
  gap: 12px;
  padding: 14px 0;
  border-top: 1px solid var(--line-2);
}

.music-credits ul li::before {
  content: '';
  width: 14px;
  height: 1px;
  background: var(--fg-mute);
  flex: 0 0 auto;
  transform: translateY(-4px);
}

.music-credits ul li span {
  font-family: var(--jp);
  font-weight: 300;
  font-size: 13px;
  line-height: 1.9;
  color: var(--fg-dim);
}

/* --------------------------------------------------------------------------
   9. About (3.7)
   -------------------------------------------------------------------------- */
.about {
  background: var(--bg-1);
  max-width: none;
  padding-left: 0;
  padding-right: 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.about-inner {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 var(--pad);
}

.about-grid {
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: 60px;
  align-items: start;
}

.about-photo {
  position: relative;
  border: 1px solid var(--line);
  background: var(--bg-2);
}

.about-photo img {
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  filter: grayscale(0.7) contrast(1.05);
  transition: filter var(--dur-hover) var(--ease);
}

.about-photo:hover img {
  filter: none;
}

.about-badge {
  position: absolute;
  left: -1px;
  bottom: -1px;
  background: var(--bg-1);
  border: 1px solid var(--line);
  color: var(--fg-dim);
  font-family: var(--mono);
  font-weight: 500;
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  padding: 9px 14px;
  line-height: 1;
}

.about-role {
  font-family: var(--mono);
  font-weight: 400;
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--fg-dim);
  padding-bottom: 24px;
  margin-bottom: 30px;
  border-bottom: 1px solid var(--line);
  line-height: 1.9;
}

.about-text p {
  font-family: var(--jp);
  font-weight: 300;
  font-size: 14px;
  line-height: 2;
  color: var(--fg-dim);
  margin-bottom: 20px;
}

.about-motto {
  margin-top: 30px;
  font-family: var(--jp);
  font-weight: 400;
  font-size: 15px;
  line-height: 2;
  color: var(--fg);
  border-left: 1px solid var(--line);
  padding-left: 18px;
}

.services {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 36px;
}

.services span {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: 1px solid var(--line);
  padding: 9px 14px;
  font-family: var(--mono);
  font-weight: 400;
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--fg-dim);
  line-height: 1;
  transition: border-color var(--dur-hover) var(--ease), color var(--dur-hover) var(--ease);
}

.services span i {
  font-size: 11px;
  color: var(--fg-dim);
}

.services span:hover {
  border-color: var(--fg-dim);
  color: var(--fg);
}

/* --------------------------------------------------------------------------
   10. Contact (3.8)
   -------------------------------------------------------------------------- */
.contact {
  padding-top: 150px;
  padding-bottom: 150px;
}

.contact-inner {
  max-width: 900px;
}

.contact-title {
  font-family: var(--display);
  font-weight: 800;
  font-size: clamp(44px, 8.4vw, 128px);
  letter-spacing: -0.04em;
  line-height: 0.88;
  margin-top: 4px;
}

.contact-lead {
  margin-top: 34px;
  font-family: var(--jp);
  font-weight: 300;
  font-size: 15px;
  line-height: 2;
  color: var(--fg-dim);
}

.contact-btn {
  display: flex;
  align-items: center;
  gap: 16px;
  width: 100%;
  margin-top: 52px;
  padding: 26px 30px;
  border: 1px solid var(--line);
  color: var(--fg);
  transition: background var(--dur-hover) var(--ease), color var(--dur-hover) var(--ease),
    border-color var(--dur-hover) var(--ease);
}

.contact-btn i {
  font-size: 22px;
  color: var(--fg);
  transition: color var(--dur-hover) var(--ease);
}

.contact-btn span {
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(18px, 2.4vw, 28px);
  letter-spacing: -0.02em;
}

.contact-btn em {
  margin-left: auto;
  font-family: var(--mono);
  font-style: normal;
  font-weight: 500;
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--fg-dim);
  transition: color var(--dur-hover) var(--ease);
}

.contact-btn:hover {
  background: var(--accent);
  border-color: var(--accent);
  color: #000;
}

.contact-btn:hover i,
.contact-btn:hover em {
  color: #000;
}

/* --------------------------------------------------------------------------
   11. Footer (3.9)
   -------------------------------------------------------------------------- */
.footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 30px var(--pad);
  border-top: 1px solid var(--line);
}

.f-left,
.f-right {
  font-family: var(--mono);
  font-weight: 400;
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--fg-dim);
}

/* --------------------------------------------------------------------------
   12. Modal / Lightbox (3.10)
   -------------------------------------------------------------------------- */
.modal {
  position: fixed;
  inset: 0;
  z-index: 400;
  display: none;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.94);
  padding: 60px var(--pad);
}

.modal.open {
  display: flex;
}

.modal-close,
.lightbox-close,
.lightbox-prev,
.lightbox-next {
  position: absolute;
  z-index: 2;
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  border: 1px solid var(--line);
  color: var(--fg);
  font-size: 15px;
  background: rgba(0, 0, 0, 0.5);
  transition: background var(--dur-hover) var(--ease), color var(--dur-hover) var(--ease),
    border-color var(--dur-hover) var(--ease);
}

.modal-close:hover,
.lightbox-close:hover,
.lightbox-prev:hover,
.lightbox-next:hover {
  background: var(--fg);
  border-color: var(--fg);
  color: #000;
}

.modal-close,
.lightbox-close {
  top: 24px;
  right: 24px;
}

.modal-inner {
  width: 100%;
  max-width: 1080px;
}

.modal-frame {
  position: relative;
  aspect-ratio: 16 / 9;
  background: #000;
  border: 1px solid var(--line);
}

.modal-frame iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

.lightbox {
  position: fixed;
  inset: 0;
  z-index: 500;
  display: none;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.96);
  padding: 72px 84px;
}

.lightbox.open {
  display: flex;
}

.lightbox-prev {
  left: 24px;
  top: 50%;
  transform: translateY(-50%);
}

.lightbox-next {
  right: 24px;
  top: 50%;
  transform: translateY(-50%);
}

.lightbox-img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  border: 1px solid var(--line-2);
}

.lightbox-counter {
  position: absolute;
  left: 50%;
  bottom: 26px;
  transform: translateX(-50%);
  font-family: var(--mono);
  font-weight: 500;
  font-size: 11px;
  letter-spacing: 0.18em;
  color: var(--fg-dim);
}

/* --------------------------------------------------------------------------
   13. Motion (addendum 4)
   Only transform / opacity / clip-path are animated. Every entrance uses
   `backwards` fill so the resting state stays declarative and hover still
   works once the animation is done.
   -------------------------------------------------------------------------- */
@keyframes riseMask {
  from { opacity: 0; clip-path: inset(105% 0 0 0); transform: translateY(0.45em); }
  to   { opacity: 1; clip-path: inset(0 0 0 0);    transform: none; }
}

@keyframes fadeUp {
  from { opacity: 0; transform: translateY(36px); }
  to   { opacity: 1; transform: none; }
}

@keyframes cardIn {
  from { opacity: 0; transform: translateY(36px); }
  to   { opacity: 1; transform: none; }
}

@keyframes imgOpen {
  from { clip-path: inset(0 0 100% 0); transform: scale(1.06); }
  to   { clip-path: inset(0 0 0 0);    transform: none; }
}

/* --- M-1 Hero entrance ---------------------------------------------------- */
.hero-eyebrow {
  animation: fadeUp var(--dur-reveal) var(--ease-out) 0.15s backwards;
}

.craft-link {
  animation: riseMask var(--dur-reveal) var(--ease-out) backwards;
}

.craft-line:nth-child(1) .craft-link { animation-delay: 0.34s; }
.craft-line:nth-child(2) .craft-link { animation-delay: 0.43s; }
.craft-line:nth-child(3) .craft-link { animation-delay: 0.52s; }
.craft-line:nth-child(4) .craft-link { animation-delay: 0.61s; }
.craft-line:nth-child(5) .craft-link { animation-delay: 0.70s; }

.hero-foot {
  animation: fadeUp var(--dur-reveal) var(--ease-out) 0.92s backwards;
}

.scroll-indicator {
  animation: fadeUp var(--dur-reveal) var(--ease-out) 1.08s backwards;
}

/* --- M-3 masked reveal for the display headings --------------------------- */
.reveal .section-title,
.reveal .contact-title,
.reveal .s-body h3 {
  clip-path: inset(100% 0 0 0);
  transform: translateY(0.3em);
  transition: clip-path var(--dur-reveal) var(--ease-out), transform var(--dur-reveal) var(--ease-out);
}

.reveal.in .section-title,
.reveal.in .contact-title,
.reveal.in .s-body h3 {
  clip-path: inset(0 0 0 0);
  transform: none;
}

/* --- M-4 staggered reveals ------------------------------------------------ */
/* order matches the transition-property list on .strength-item:
   opacity, transform, background, padding. Only the first two are delayed,
   so hover still answers instantly. */
.strength-item:nth-child(1) { transition-delay: 0ms, 0ms, 0s, 0s; }
.strength-item:nth-child(2) { transition-delay: 100ms, 100ms, 0s, 0s; }
.strength-item:nth-child(3) { transition-delay: 200ms, 200ms, 0s, 0s; }
.strength-item:nth-child(4) { transition-delay: 300ms, 300ms, 0s, 0s; }

/* the wrapper only fades; its children carry the movement */
.chain.reveal,
.facts.reveal {
  transform: none;
}

.chain.reveal .chain-flow li,
.facts.reveal .fact {
  opacity: 0;
  transform: translateY(24px);
  /* longhand on purpose: the shorthand would reset transition-delay and,
     being more specific than the :nth-child rules below, kill the stagger */
  transition-property: opacity, transform;
  transition-duration: var(--dur-reveal), var(--dur-reveal);
  transition-timing-function: var(--ease-out), var(--ease-out);
}

.chain.reveal.in .chain-flow li,
.facts.reveal.in .fact {
  opacity: 1;
  transform: none;
}

.chain-flow li:nth-child(1) { transition-delay: 60ms; }
.chain-flow li:nth-child(2) { transition-delay: 120ms; }
.chain-flow li:nth-child(3) { transition-delay: 180ms; }
.chain-flow li:nth-child(4) { transition-delay: 240ms; }
.chain-flow li:nth-child(5) { transition-delay: 300ms; }
.chain-flow li:nth-child(6) { transition-delay: 360ms; }
.chain-flow li:nth-child(7) { transition-delay: 420ms; }

.fact:nth-child(1) { transition-delay: 0ms; }
.fact:nth-child(2) { transition-delay: 80ms; }
.fact:nth-child(3) { transition-delay: 160ms; }
.fact:nth-child(4) { transition-delay: 240ms; }

/* --- M-4 / M-5 / M-8 works panels ----------------------------------------
   The panel is display:none until it is active, so these animations run both
   on first sight and on every tab switch. --d is inherited by the image
   inside each card, which keeps card and image on the same beat. */
.works-panel.active.in .video-card,
.works-panel.active.in .web-card,
.works-panel.active.in .photo-item,
.works-panel.active.in .music-wrap,
.works-panel.active.in .photo-category-head,
.works-panel.active.in .works-note {
  animation: cardIn var(--dur-reveal) var(--ease-out) backwards;
  animation-delay: var(--d, 0ms);
}

.works-panel.active.in .video-card .thumb img,
.works-panel.active.in .photo-item img,
.works-panel.active.in .web-screen img,
.works-panel.active.in .yt-embed img {
  animation: imgOpen var(--dur-reveal) var(--ease-out) backwards;
  animation-delay: var(--d, 0ms);
}

.works-panel.active.in .video-card:nth-child(1) { --d: 0ms; }
.works-panel.active.in .video-card:nth-child(2) { --d: 60ms; }
.works-panel.active.in .video-card:nth-child(3) { --d: 120ms; }
.works-panel.active.in .video-card:nth-child(4) { --d: 180ms; }
.works-panel.active.in .video-card:nth-child(5) { --d: 240ms; }
.works-panel.active.in .video-card:nth-child(6) { --d: 300ms; }
.works-panel.active.in .video-card:nth-child(7) { --d: 360ms; }

.works-panel.active.in .web-card:nth-child(1) { --d: 0ms; }
.works-panel.active.in .web-card:nth-child(2) { --d: 60ms; }

/* JS numbers the photos within each .photo-grid, so every category
   staggers from its own first image */
.works-panel.active.in .photo-item {
  --d: calc(var(--reveal-i, 0) * 60ms);
}

/* --------------------------------------------------------------------------
   14. Touch devices — no hover means no way back to colour.
        The work must be full colour from the start.
   -------------------------------------------------------------------------- */
@media (hover: none) {
  .video-card .thumb img,
  .video-card:hover .thumb img,
  .photo-item img,
  .photo-item:hover img,
  .web-screen img,
  .web-card:hover .web-screen img,
  .yt-embed img,
  .yt-embed:hover img,
  .about-photo img,
  .about-photo:hover img {
    filter: none;
  }
}

/* --------------------------------------------------------------------------
   15. Responsive (contract 5.)
   -------------------------------------------------------------------------- */
/* Laptop viewports are much shorter than their screen size suggests once
   browser chrome and the taskbar are removed (1366x768 screen ~= 1366x630
   viewport). The hero scales with width, so height needs its own rule. */
@media (min-width: 901px) and (max-height: 820px) {
  .hero-inner {
    padding: calc(var(--nav-h) + 8px) var(--pad) 28px;
  }

  .hero-eyebrow {
    margin-bottom: 16px;
  }

  .craft-link {
    padding: 4px 0 5px;
  }

  .craft-line:nth-child(1) .craft-name,
  .craft-line:nth-child(2) .craft-name {
    font-size: clamp(68px, 6.2vw, 92px);
  }

  .craft-line:nth-child(n + 3) .craft-name {
    font-size: clamp(56px, 4.9vw, 72px);
  }

  .hero-foot {
    margin-top: 12px;
  }
}

@media (max-width: 1100px) {
  :root {
    --pad: 32px;
  }

  .section {
    padding-top: 110px;
    padding-bottom: 110px;
  }

  .facts {
    grid-template-columns: repeat(2, 1fr);
  }

  .strength-item {
    grid-template-columns: 84px 1fr;
  }

  .video-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .craft-link {
    grid-template-columns: 58px 1fr auto;
  }

  .about-grid {
    gap: 40px;
  }
}

@media (max-width: 1024px) {
  .craft-link {
    grid-template-columns: 52px 1fr auto;
    gap: 0 16px;
  }

  .craft-jp {
    font-size: 11px;
    max-width: 14em;
    white-space: normal;
    text-align: right;
  }

  .video-card .meta {
    padding: 18px 18px 22px;
  }

  .chain {
    padding: 38px 28px;
  }
}

@media (max-width: 900px) {
  .hero-layer {
    background-position: 30% center;
  }

  .hero-scrim {
    background:
      linear-gradient(to bottom,
        rgba(0, 0, 0, 0.72) 0%,
        rgba(0, 0, 0, 0.38) 30%,
        rgba(0, 0, 0, 0.66) 64%,
        rgba(0, 0, 0, 0.94) 100%),
      rgba(0, 0, 0, 0.5);
  }

  .s-body h3 {
    max-width: none;
  }


  .nav-list {
    gap: 18px;
  }

  .nav-list a {
    font-size: 11px;
    letter-spacing: 0.12em;
  }

  .craft-jp {
    display: none;
  }

  .craft-link {
    grid-template-columns: 52px 1fr;
  }

  .hero-foot {
    flex-direction: column;
    align-items: flex-start;
    gap: 22px;
    padding-right: 0;
  }

  .hero-motto {
    white-space: normal;
  }

  .scroll-indicator {
    display: none;
  }

  .about-grid,
  .music-wrap,
  .video-grid,
  .web-grid {
    grid-template-columns: 1fr;
  }

  .photo-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .video-card .meta {
    padding: 20px 20px 24px;
  }

  .v-facts {
    margin-top: 14px;
  }

  .strength-item {
    grid-template-columns: 1fr;
    gap: 14px 0;
  }

  .s-num {
    padding-top: 0;
  }

  .about-photo img {
    aspect-ratio: 4 / 3;
  }

  .chain {
    padding: 34px 24px;
  }

  .contact-btn {
    flex-wrap: wrap;
    gap: 12px;
  }

  .contact-btn em {
    margin-left: 0;
    width: 100%;
  }
}

@media (max-width: 560px) {
  :root {
    --pad: 20px;
  }

  .section {
    padding-top: 88px;
    padding-bottom: 88px;
  }

  .section-head {
    margin-bottom: 48px;
  }

  .nav-list {
    display: none;
  }

  .nav-toggle {
    display: inline-flex;
  }

  .hero-layer {
    background-position: 27% center;
  }

  .hero-scrim {
    background:
      linear-gradient(to bottom,
        rgba(0, 0, 0, 0.58) 0%,
        rgba(0, 0, 0, 0.34) 32%,
        rgba(0, 0, 0, 0.68) 66%,
        rgba(0, 0, 0, 0.95) 100%),
      rgba(0, 0, 0, 0.46);
  }

  .global-nav {
    padding: 18px var(--pad);
  }

  .global-nav.scrolled {
    padding: 12px var(--pad);
  }

  .hero-inner {
    padding-bottom: 80px;
  }

  .craft-line:nth-child(1) .craft-name,
  .craft-line:nth-child(2) .craft-name {
    font-size: clamp(40px, 13.5vw, 68px);
  }

  .craft-line:nth-child(n + 3) .craft-name {
    font-size: clamp(34px, 11vw, 56px);
  }

  .craft-line {
    padding-right: 0;
  }

  .craft-link {
    grid-template-columns: 40px 1fr;
    padding: 8px 0 11px;
  }

  .craft-link:hover {
    transform: none;
  }

  .facts {
    grid-template-columns: 1fr;
  }

  .photo-grid {
    grid-template-columns: 1fr;
  }

  .photo-item {
    aspect-ratio: 4 / 3;
  }

  /* all seven steps must stay visible - the section's claim is that the
     chain is never handed off, so a hidden step breaks the meaning */
  .chain-flow {
    flex-wrap: wrap;
    overflow: visible;
    gap: 8px 0;
  }

  .chain-flow li {
    margin-right: 22px;
    padding: 8px 11px;
    font-size: 11px;
  }

  .chain-flow li::after {
    margin-left: 6px;
  }

  .strength-item {
    padding: 32px 0;
  }

  .strength-item:hover {
    padding-left: 0;
  }

  .music-credits,
  .chain {
    padding: 28px 20px;
  }

  .lightbox {
    padding: 64px 20px;
  }

  .lightbox-prev {
    left: 10px;
  }

  .lightbox-next {
    right: 10px;
  }

  .footer {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }

  /* less motion on small screens: the stagger is halved and the hero rows
     arrive sooner, but the language is unchanged */
  .craft-line:nth-child(1) .craft-link { animation-delay: 0.18s; }
  .craft-line:nth-child(2) .craft-link { animation-delay: 0.24s; }
  .craft-line:nth-child(3) .craft-link { animation-delay: 0.30s; }
  .craft-line:nth-child(4) .craft-link { animation-delay: 0.36s; }
  .craft-line:nth-child(5) .craft-link { animation-delay: 0.42s; }

  .hero-foot { animation-delay: 0.52s; }
  .scroll-indicator { animation-delay: 0.6s; }

  .strength-item:nth-child(1) { transition-delay: 0ms, 0ms, 0s, 0s; }
  .strength-item:nth-child(2) { transition-delay: 60ms, 60ms, 0s, 0s; }
  .strength-item:nth-child(3) { transition-delay: 120ms, 120ms, 0s, 0s; }
  .strength-item:nth-child(4) { transition-delay: 180ms, 180ms, 0s, 0s; }

  .chain-flow li:nth-child(1) { transition-delay: 30ms; }
  .chain-flow li:nth-child(2) { transition-delay: 60ms; }
  .chain-flow li:nth-child(3) { transition-delay: 90ms; }
  .chain-flow li:nth-child(4) { transition-delay: 120ms; }
  .chain-flow li:nth-child(5) { transition-delay: 150ms; }
  .chain-flow li:nth-child(6) { transition-delay: 180ms; }
  .chain-flow li:nth-child(7) { transition-delay: 210ms; }

  .works-panel.active.in .video-card:nth-child(n) { --d: 0ms; }
  .works-panel.active.in .photo-item { --d: 0ms; }
}

/* --------------------------------------------------------------------------
   16. Reduced motion
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation: none !important;
    transition: none !important;
  }

  .reveal {
    opacity: 1;
    transform: none;
  }

  .marquee-track {
    transform: none;
  }

  .hero-layer.is-active {
    transform: none;
  }

  /* everything the motion section hides before it animates must simply be
     visible here, whether or not the observer ever adds .in */
  .reveal .section-title,
  .reveal .contact-title,
  .reveal .s-body h3,
  .chain.reveal .chain-flow li,
  .facts.reveal .fact,
  .works-panel .video-card .thumb img,
  .works-panel .photo-item img,
  .works-panel .web-screen img,
  .works-panel .yt-embed img {
    opacity: 1;
    clip-path: none;
    transform: none;
  }
}