/* =========================================================
   LightKing — Pattern 04 RAIN
   (type system, layout and motion of the "A RAIN" proposal;
   accent switched from brass to LightKing gold)
   ========================================================= */
:root {
  --ink: #0D0D0C;
  --ink-2: #141413;
  --ink-3: #1B1B1A;
  --bone: #ECE9E2;
  --bone-2: #C9C5BD;
  --ash: #A8A49C;
  --ash-2: #7E7A73;
  --brass: #C9A227;           /* LightKing gold */
  --glow: #E8C766;
  --gold-grad: linear-gradient(135deg, #f3dc8e 0%, #d9b25a 50%, #b8892f 100%);
  --paper: #ECEAE5;
  --paper-ink: #3E3B36;
  --line: rgba(236, 233, 226, 0.14);
  --line-dark: rgba(13, 13, 12, 0.14);

  --f-display: 'Jost', 'Futura', 'Helvetica Neue', sans-serif;
  --f-mincho: 'Shippori Mincho B1', 'Hiragino Mincho ProN', serif;
  --f-body: 'Zen Kaku Gothic New', 'Hiragino Sans', sans-serif;
  --f-mono: 'JetBrains Mono', ui-monospace, monospace;

  --gutter: clamp(20px, 4vw, 64px);
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.76, 0, 0.24, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-stopped { overflow: hidden; }
body {
  margin: 0;
  background: var(--ink);
  color: var(--bone);
  font-family: var(--f-body);
  font-size: 15px;
  font-weight: 400;
  line-height: 1.9;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}
body.is-loading { overflow: hidden; }
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
figure { margin: 0; }
h1, h2, h3, p, dl, dd, ol, ul { margin: 0; }
ol, ul { padding: 0; list-style: none; }
::selection { background: var(--brass); color: var(--ink); }
:focus-visible { outline: 1px solid var(--brass); outline-offset: 4px; }

.wrap { width: 100%; max-width: 1600px; margin: 0 auto; padding-inline: var(--gutter); }
.meta { font-family: var(--f-mono); font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ash); line-height: 1.6; }
.eyebrow { font-family: var(--f-mono); font-size: 11px; letter-spacing: 0.24em; color: var(--ash); margin-bottom: 28px; }
.eyebrow--light { color: rgba(236, 233, 226, 0.75); }
.eyebrow--dark { color: #57534D; }
.mincho { font-family: var(--f-mincho); font-weight: 400; }
.display { font-family: var(--f-display); font-weight: 200; font-size: clamp(36px, 4.6vw, 84px); line-height: 1.08; letter-spacing: 0.14em; text-transform: uppercase; }
.body-text { font-size: 15px; line-height: 2.1; color: var(--bone-2); max-width: 34em; }
.light { background: var(--paper); color: var(--ink); }
.light .body-text { color: var(--paper-ink); }
.light .meta { color: #57534D; }

/* split text */
.char { display: inline-block; will-change: transform; }
.char-wrap { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: 0.04em; }
.word { display: inline-block; white-space: nowrap; }
.word--cjk { display: inline; white-space: normal; }

/* buttons */
.btn { display: inline-flex; align-items: center; gap: 14px; min-height: 52px; padding: 0 28px; font-family: var(--f-mono); font-size: 11px; font-weight: 400; letter-spacing: 0.24em; transition: background .5s var(--ease), color .5s var(--ease), border-color .5s var(--ease); }
.btn--line { border: 1px solid rgba(236, 233, 226, 0.35); margin-top: 40px; }
.btn--line:hover { background: var(--bone); color: var(--ink); border-color: var(--bone); }
.btn--solid { background: var(--bone); color: var(--ink); }
.btn--solid:hover { background: var(--brass); }

/* ---------- LOADER ---------- */
.loader { position: fixed; inset: 0; z-index: 100; background: var(--ink); display: grid; place-items: center; }
.loader__drop { position: absolute; left: 50%; top: 0; width: 14px; height: 21px; margin-left: -7px; fill: var(--bone); opacity: 0; }
.loader__ripple { position: absolute; left: 50%; top: 50%; width: 0; height: 0; }
.loader__ripple span { position: absolute; left: -60px; top: -18px; width: 120px; height: 36px; border: 1px solid rgba(236, 233, 226, 0.5); border-radius: 50%; opacity: 0; transform: scale(0.1); }
.loader__logo { width: 80px; height: 67px; fill: none; stroke: var(--brass); stroke-width: 30; opacity: 0; filter: drop-shadow(0 0 12px rgba(232, 199, 102, .35)); }
.loader__meta { position: absolute; left: var(--gutter); right: var(--gutter); bottom: 32px; display: flex; justify-content: space-between; font-family: var(--f-mono); font-size: 11px; letter-spacing: 0.24em; color: var(--ash); }
.loader__count { color: var(--bone); font-variant-numeric: tabular-nums; }

/* ---------- CURSOR ---------- */
.cursor { position: fixed; left: 0; top: 0; z-index: 99999; pointer-events: none; display: none; }
.has-cursor .cursor { display: block; }
.has-cursor, .has-cursor a, .has-cursor button { cursor: none; }
.has-cursor input { cursor: text; }
.cursor__dot { position: fixed; left: -3px; top: -3px; width: 6px; height: 6px; border-radius: 50%; background: var(--bone); mix-blend-mode: difference; }
.cursor__ring { position: fixed; left: -22px; top: -22px; width: 44px; height: 44px; border-radius: 50%; border: 1px solid rgba(236, 233, 226, 0.45); display: grid; place-items: center; transition: width .5s var(--ease), height .5s var(--ease), left .5s var(--ease), top .5s var(--ease), background .5s var(--ease), border-color .5s var(--ease); mix-blend-mode: difference; }
.cursor__label { font-family: var(--f-mono); font-size: 10px; letter-spacing: 0.2em; color: var(--ink); opacity: 0; transition: opacity .3s; }
.cursor.is-label .cursor__ring { width: 92px; height: 92px; left: -46px; top: -46px; background: var(--bone); border-color: var(--bone); mix-blend-mode: normal; }
.cursor.is-label .cursor__label { opacity: 1; }
.cursor.is-label .cursor__dot { opacity: 0; }
.cursor.is-link .cursor__ring { width: 64px; height: 64px; left: -32px; top: -32px; border-color: var(--bone); }
.cursor.is-hidden { opacity: 0; }
.cursor.is-ring .cursor__ring { width: 120px; height: 120px; left: -60px; top: -60px; border-color: rgba(236,233,226,.7); }
.cursor.is-ring .cursor__label { opacity: 1; color: var(--bone); }
.cursor.is-ring .cursor__dot { opacity: 0; }

/* ---------- AMBIENT / GRAIN ---------- */
.ambient { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 40; pointer-events: none; mix-blend-mode: screen; opacity: 0.55; }
.grain { position: fixed; inset: -50%; z-index: 41; pointer-events: none; opacity: 0.06; background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>"); animation: grain 1.2s steps(6) infinite; }
@keyframes grain {
  0% { transform: translate(0, 0); } 20% { transform: translate(-3%, 2%); } 40% { transform: translate(2%, -3%); }
  60% { transform: translate(-2%, -1%); } 80% { transform: translate(3%, 3%); } 100% { transform: translate(0, 0); }
}

/* ---------- HEADER ---------- */
.header { position: fixed; top: 0; left: 0; right: 0; z-index: 60; display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 22px var(--gutter); mix-blend-mode: difference; color: var(--bone); }
.header__brand { display: flex; align-items: center; gap: 14px; }
.header__logo { width: 34px; height: 29px; fill: none; stroke: currentColor; stroke-width: 54; }
.header__name { font-family: var(--f-display); font-weight: 300; font-size: 17px; letter-spacing: 0.32em; line-height: 1; white-space: nowrap; }
.header__by { font-family: var(--f-mono); font-size: 10px; letter-spacing: 0.22em; padding-left: 14px; border-left: 1px solid rgba(236, 233, 226, 0.35); opacity: .8; white-space: nowrap; }
.header__nav { display: flex; gap: clamp(20px, 2.6vw, 40px); font-family: var(--f-mono); font-size: 11px; letter-spacing: 0.2em; }
.header__nav a { position: relative; padding: 8px 0; }
.header__nav a::after { content: ''; position: absolute; left: 0; right: 0; bottom: 2px; height: 1px; background: currentColor; transform: scaleX(0); transform-origin: right; transition: transform .6s var(--ease); }
.header__nav a:hover::after { transform: scaleX(1); transform-origin: left; }
.header__tools { display: flex; align-items: center; gap: 8px; }
.sound { display: flex; align-items: center; gap: 12px; min-height: 44px; padding: 0 6px; font-family: var(--f-mono); font-size: 10px; letter-spacing: 0.2em; white-space: nowrap; }
.sound b { font-weight: 400; }
.sound__bars { display: flex; align-items: flex-end; gap: 2px; height: 12px; }
.sound__bars i { width: 2px; height: 3px; background: currentColor; transition: height .3s; }
.sound[aria-pressed="true"] .sound__bars i { animation: bars 1s var(--ease) infinite alternate; }
.sound[aria-pressed="true"] .sound__bars i:nth-child(2) { animation-delay: -.3s; }
.sound[aria-pressed="true"] .sound__bars i:nth-child(3) { animation-delay: -.6s; }
.sound[aria-pressed="true"] .sound__bars i:nth-child(4) { animation-delay: -.9s; }
@keyframes bars { from { height: 2px; } to { height: 12px; } }
.menu-btn { display: none; width: 44px; height: 44px; position: relative; }
.menu-btn span { position: absolute; left: 12px; right: 12px; height: 1px; background: currentColor; transition: transform .5s var(--ease); }
.menu-btn span:first-child { top: 18px; } .menu-btn span:last-child { top: 25px; }
.menu-btn[aria-expanded="true"] span:first-child { transform: translateY(3.5px) rotate(45deg); }
.menu-btn[aria-expanded="true"] span:last-child { transform: translateY(-3.5px) rotate(-45deg); }
.mobile-menu { position: fixed; inset: 0; z-index: 55; background: var(--ink); display: flex; flex-direction: column; justify-content: center; padding: 100px var(--gutter) 40px; }
.mobile-menu nav { display: flex; flex-direction: column; gap: 6px; }
.mobile-menu a { font-family: var(--f-display); font-weight: 200; font-size: clamp(28px, 8vw, 44px); line-height: 1.5; letter-spacing: 0.16em; }
.mobile-menu[hidden] { display: none; }
.mobile-menu__foot { margin-top: auto; font-family: var(--f-mono); font-size: 11px; letter-spacing: 0.2em; color: var(--ash); }

/* ---------- HERO ---------- */
.hero { position: relative; height: 100vh; height: 100svh; min-height: 560px; overflow: hidden; background: #050505; }
.hero__glass { position: absolute; inset: 0; width: 100%; height: 100%; display: block; touch-action: pan-y; }
.hero__shade { position: absolute; inset: 0; pointer-events: none; background:
  radial-gradient(120% 90% at 50% 40%, transparent 40%, rgba(5,5,5,0.75) 100%),
  linear-gradient(180deg, rgba(5,5,5,0.45) 0%, transparent 22%, transparent 55%, rgba(5,5,5,0.85) 100%); }
.hero__inner { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: space-between; padding: 110px var(--gutter) 92px; pointer-events: none; }
.hero__top { display: flex; justify-content: space-between; }
.hero__top .meta:first-child { color: var(--glow); }
.hero__bottom { display: flex; align-items: flex-end; justify-content: space-between; gap: 40px; flex-wrap: wrap; }
.hero__title { font-family: var(--f-display); font-weight: 200; font-size: clamp(64px, 10.5vw, 184px); line-height: 1; letter-spacing: 0.36em; margin-right: -0.36em; color: var(--bone); }
.hero__aside { display: flex; flex-direction: column; gap: 28px; padding-bottom: 1.2vw; max-width: 420px; }
.hero__lead { font-size: clamp(18px, 1.7vw, 24px); line-height: 1.9; letter-spacing: 0.08em; }
.hero__sub { margin-top: -14px; color: var(--glow); letter-spacing: .2em; }
.hero__hint { display: flex; align-items: center; gap: 14px; color: var(--bone-2); }
.hero__hint-line { width: 40px; height: 1px; background: currentColor; }
.hero__scroll { position: absolute; right: var(--gutter); top: 50%; transform: translateY(-50%) rotate(90deg); transform-origin: right center; display: flex; align-items: center; gap: 14px; }
.hero__scroll-line { position: relative; display: block; width: 72px; height: 1px; background: rgba(236,233,226,.2); overflow: hidden; }
.hero__scroll-line i { position: absolute; inset: 0; background: var(--bone); animation: drip 2.4s var(--ease-in-out) infinite; }
@keyframes drip { 0% { transform: translateX(-100%); } 60%, 100% { transform: translateX(100%); } }

/* ---------- MANIFESTO ---------- */
.manifesto { padding: clamp(140px, 22vh, 240px) 0 clamp(120px, 18vh, 200px); position: relative; }
.manifesto__title { font-size: clamp(30px, 4.2vw, 68px); line-height: 1.55; letter-spacing: 0.12em; font-weight: 400; margin-bottom: clamp(64px, 10vh, 120px); }
.manifesto__body { font-size: clamp(19px, 2vw, 30px); line-height: 1.9; letter-spacing: 0.04em; max-width: 26em; font-weight: 400; }
.manifesto__body .char { opacity: 0.16; display: inline; } /* inline (not inline-block) so kinsoku / phrase breaking applies */
.manifesto__foot { margin-top: clamp(64px, 10vh, 120px); display: flex; justify-content: space-between; align-items: flex-end; gap: 40px; flex-wrap: wrap; padding-top: 40px; border-top: 1px solid var(--line); }

/* ---------- FLAGSHIP (one of one) ---------- */
.oneofone { position: relative; background: #0C0A08; }
.oo-hero { position: relative; height: 130vh; min-height: 760px; overflow: hidden; }
.oo-hero__media { position: absolute; inset: -10% 0; }
.oo-hero__media img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.25); }
.oo-hero__shade { position: absolute; inset: 0; background: linear-gradient(180deg, #0D0D0C 0%, rgba(12,10,8,0.15) 22%, rgba(12,10,8,0.1) 60%, #0C0A08 100%), linear-gradient(90deg, rgba(12,10,8,0.8) 0%, transparent 60%); }
.oo-hero__content { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: center; }
.oo-hero__title { font-family: var(--f-display); font-weight: 200; font-size: clamp(48px, 7.6vw, 132px); line-height: 1.08; letter-spacing: 0.16em; max-width: 12em; }
.oo-hero__ja { font-size: clamp(22px, 2.4vw, 36px); letter-spacing: 0.3em; margin-top: 28px; }
.oo-hero__copy { font-size: clamp(16px, 1.5vw, 21px); line-height: 2.2; letter-spacing: 0.08em; color: var(--bone-2); margin-top: 32px; }
.oo-badge { display: inline-flex; align-items: baseline; gap: 10px; margin-top: 48px; padding: 14px 22px; border: 1px solid rgba(201,162,39,.6); width: fit-content; font-family: var(--f-mono); color: var(--brass); }
.oo-badge__no, .oo-badge__of { font-size: 11px; letter-spacing: 0.2em; }
.oo-badge__num { font-family: var(--f-display); font-weight: 300; font-size: 24px; letter-spacing: 0.06em; line-height: 1; }
.oo-split { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(40px, 6vw, 120px); padding-top: clamp(80px, 12vh, 160px); padding-bottom: clamp(120px, 18vh, 220px); align-items: start; }
.oo-split__text { position: sticky; top: 140px; }
.oo-points li { padding: 32px 0; border-top: 1px solid var(--line); }
.oo-points li:last-child { border-bottom: 1px solid var(--line); }
.oo-points .meta { display: block; margin-bottom: 14px; color: var(--brass); }
.oo-points p { font-size: clamp(17px, 1.5vw, 21px); line-height: 2; letter-spacing: 0.06em; }
.oo-reveal { position: relative; aspect-ratio: 1206 / 796; overflow: hidden; --x: 50%; --y: 50%; --r: 0px; background: #050403; }
.oo-reveal img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.oo-reveal__base { filter: grayscale(0.8) brightness(0.32) blur(1px); transform: scale(1.02); }
.oo-reveal__top { clip-path: circle(var(--r) at var(--x) var(--y)); }
.oo-reveal figcaption { position: absolute; left: 20px; bottom: 16px; z-index: 2; color: rgba(236,233,226,.7); }

/* ---------- SERVICES (collection) ---------- */
.collection { position: relative; padding: clamp(100px, 14vh, 160px) 0 60px; overflow: hidden; background: var(--ink); }
.collection__head { display: flex; justify-content: space-between; align-items: flex-end; gap: 40px; flex-wrap: wrap; margin-bottom: clamp(48px, 8vh, 88px); }
.collection__note { max-width: 24em; }
.collection__viewport { overflow: hidden; }
.collection__track { display: flex; gap: clamp(16px, 2vw, 32px); padding-inline: var(--gutter); width: max-content; }
.card { width: clamp(280px, 26vw, 420px); flex: 0 0 auto; position: relative; }
.card a { display: block; }
.card__media { position: relative; aspect-ratio: 4 / 5; overflow: hidden; background: #E9E7E2; }
.card__media img { width: 100%; height: 100%; object-fit: cover; transition: scale 1.4s var(--ease), filter 1.4s var(--ease); }
.card--dark .card__media { background: var(--ink-3); }
.card a:hover .card__media img { scale: 1.06; }
.card__badge { position: absolute; top: 14px; left: 14px; z-index: 2; font-family: var(--f-mono); font-size: 10px; letter-spacing: 0.2em; padding: 7px 10px; background: var(--ink); color: var(--brass); border: 1px solid rgba(201,162,39,.5); }
.card__info { display: grid; grid-template-columns: 1fr auto; gap: 6px 16px; padding-top: 18px; }
.card__info .meta { grid-column: 1 / -1; }
.card__info h3 { font-size: 14px; font-weight: 400; line-height: 1.7; letter-spacing: 0.06em; }
.card__price { font-family: var(--f-mono); font-size: 13px; white-space: nowrap; color: var(--glow); }
.collection__progress { display: flex; align-items: center; gap: 20px; margin-top: 56px; }
.collection__bar { position: relative; flex: 1; height: 1px; background: var(--line); overflow: hidden; }
.collection__bar i { position: absolute; inset: 0; background: var(--gold-grad); transform-origin: left; transform: scaleX(0); }

/* ---------- FIXTURE (zip) ---------- */
.zip { position: relative; padding: clamp(80px, 12vh, 140px) 0 clamp(120px, 18vh, 200px); background: var(--ink-2); }
.zip__media { position: relative; height: 92vh; min-height: 520px; overflow: hidden; clip-path: inset(14% 18% 14% 18%); }
.zip__media img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.3); }
.zip__body { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); gap: clamp(40px, 6vw, 120px); margin-top: clamp(-180px, -14vh, -100px); position: relative; z-index: 2; align-items: end; }
.zip__text { padding-top: clamp(140px, 18vh, 220px); }
.zip__text .display { margin-bottom: 40px; }
.specs { margin-top: 48px; border-top: 1px solid var(--line); max-width: 560px; }
.specs div { display: grid; grid-template-columns: 120px 1fr; gap: 16px; padding: 16px 0; border-bottom: 1px solid var(--line); font-size: 14px; }
.specs dt { font-family: var(--f-mono); font-size: 11px; letter-spacing: 0.18em; color: var(--ash); padding-top: 3px; }
.zip__detail { position: relative; }
.zip__detail img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; background: #0a0806; }
.zip__detail figcaption { margin-top: 14px; }

/* ---------- PLAN (print) ---------- */
.print { padding: clamp(120px, 18vh, 200px) 0; }
.print__grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); gap: clamp(40px, 6vw, 120px); align-items: center; }
.print__figure { position: relative; overflow: hidden; aspect-ratio: 4 / 3; background: #101113; }
.print__figure img { width: 100%; height: 100%; object-fit: cover; filter: saturate(.9) contrast(1.04); }
.print__lens { position: absolute; left: 0; top: 0; width: 220px; height: 220px; margin: -110px 0 0 -110px; border-radius: 50%; border: 1px solid rgba(232,199,102,.7); box-shadow: 0 20px 60px rgba(0,0,0,.5), inset 0 0 30px rgba(0,0,0,.35), 0 0 30px rgba(232,199,102,.15); background-color: #101113; background-repeat: no-repeat; opacity: 0; transform: scale(.6); transition: opacity .4s var(--ease), transform .5s var(--ease); pointer-events: none; }
.print__figure.is-zoom .print__lens { opacity: 1; transform: scale(1); }
.print__title { font-size: clamp(24px, 2.4vw, 38px); line-height: 1.7; letter-spacing: 0.06em; margin-bottom: 32px; }
.print__hint { margin-top: 32px; }

/* ---------- SCEPTRE (spatula) ---------- */
.spatula { position: relative; background: #111; }
.spatula__pin { position: relative; height: 100vh; min-height: 620px; overflow: hidden; }
.spatula__media { position: absolute; inset: 0; }
.spatula__media img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.2); }
.spatula__shade { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(13,13,12,.55) 0%, transparent 35%, transparent 60%, rgba(13,13,12,.85) 100%); }
.spatula__content { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: space-between; padding-top: 120px; padding-bottom: 92px; }
.spatula__title { font-size: clamp(36px, 4.8vw, 84px); }
.spatula__lines { position: absolute; left: var(--gutter); right: var(--gutter); top: 50%; height: 1.2em; font-family: var(--f-mono); font-size: clamp(12px, 1vw, 14px); letter-spacing: 0.3em; text-align: center; color: var(--glow); }
.spatula__lines span { position: absolute; left: 0; right: 0; opacity: 0; }
.spatula__copy { max-width: 30em; color: var(--bone-2); }
.spatula__price { margin-top: 16px; }

/* ---------- WORKS (artwork) ---------- */
.artwork { padding: clamp(120px, 18vh, 200px) 0 clamp(80px, 12vh, 140px); }
.artwork__head { display: grid; grid-template-columns: minmax(0, 1fr); gap: 32px; max-width: 980px; margin-bottom: clamp(64px, 10vh, 120px); }
.artwork__head .eyebrow { margin-bottom: 0; }
.artwork__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--gutter); row-gap: clamp(40px, 8vh, 96px); }
.artwork__item--a { grid-column: 1 / span 6; }
.artwork__item--b { grid-column: 8 / span 5; margin-top: 24vh; }
.artwork__frame { overflow: hidden; aspect-ratio: 4 / 5; background: #0d0c0b; }
.artwork__frame img { width: 100%; height: 115%; object-fit: cover; }
.artwork__item figcaption { display: flex; justify-content: space-between; margin-top: 16px; }

/* ---------- KELVIN SWATCHES (stickers) ---------- */
.stickers { padding: clamp(80px, 12vh, 140px) 0 clamp(120px, 18vh, 200px); overflow: hidden; }
.stickers__head { display: flex; justify-content: space-between; align-items: flex-end; gap: 40px; flex-wrap: wrap; margin-bottom: 40px; }
.stickers__ja { font-size: 18px; font-weight: 400; letter-spacing: 0.12em; margin-top: 18px; }
.stickers__wall { position: relative; height: clamp(440px, 64vh, 640px); border-top: 1px solid var(--line-dark); border-bottom: 1px solid var(--line-dark); touch-action: pan-y; }
.sticker { position: absolute; left: var(--x); top: var(--y); width: clamp(110px, 13vw, 190px); height: auto; aspect-ratio: 1; rotate: var(--r); filter: drop-shadow(0 6px 8px rgba(0,0,0,.18)) drop-shadow(0 1px 1px rgba(0,0,0,.2)); user-select: none; -webkit-user-drag: none; touch-action: none; cursor: grab; transition: filter .4s var(--ease); }
.sticker.is-drag { cursor: grabbing; filter: drop-shadow(0 26px 30px rgba(0,0,0,.28)) drop-shadow(0 2px 2px rgba(0,0,0,.2)); }
.stickers__hint { position: absolute; right: 0; bottom: 16px; }
.stickers__list { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 24px; margin-top: 40px; }
.stickers__list li { display: flex; flex-direction: column; gap: 4px; padding-top: 16px; border-top: 1px solid var(--line-dark); font-size: 13px; }
.stickers__list li span:first-child { font-family: var(--f-display); font-weight: 300; font-size: 15px; letter-spacing: 0.18em; }

/* ---------- STUDIO (designer) ---------- */
.designer { padding: clamp(140px, 20vh, 240px) 0; background: var(--ink); }
.designer__grid { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); gap: clamp(40px, 6vw, 120px); align-items: start; }
.designer__media { position: relative; padding-bottom: 28%; }
.designer__p1 { width: 82%; aspect-ratio: 4 / 5; overflow: hidden; background: #0b0a09; }
.designer__p2 { position: absolute; right: 0; bottom: 0; width: 44%; aspect-ratio: 4 / 5; overflow: hidden; border: 10px solid var(--ink); background: #080706; }
.designer__media img { width: 100%; height: 115%; object-fit: cover; }
.designer__text { padding-top: 6vh; }
.designer__name { font-family: var(--f-display); font-weight: 200; font-size: clamp(40px, 5vw, 88px); line-height: 1.1; letter-spacing: 0.14em; }
.designer__kana { font-size: 16px; font-weight: 400; margin-top: 20px; letter-spacing: 0.1em; }
.designer__role { font-size: 13px; color: var(--brass); margin: 6px 0 36px; letter-spacing: 0.06em; word-break: keep-all; }
.credits { margin-top: 56px; border-top: 1px solid var(--line); }
.credits li { display: grid; grid-template-columns: auto 52px 1fr; align-items: baseline; gap: 0 12px; padding: 22px 0; border-bottom: 1px solid var(--line); transition: background .5s var(--ease); }
.credits__num { font-family: var(--f-display); font-weight: 200; font-size: clamp(36px, 3.4vw, 56px); line-height: 1; min-width: 1.6em; font-variant-numeric: tabular-nums; }
.credits__num--sm { font-size: clamp(20px, 1.8vw, 26px); letter-spacing: 0.06em; }
.credits__unit { font-size: 13px; color: var(--ash); }
.credits p { font-size: 14px; line-height: 1.8; color: var(--bone-2); text-wrap: pretty; }
.credits b { display: block; font-family: var(--f-mono); font-size: 10px; font-weight: 400; letter-spacing: 0.2em; color: var(--brass); margin-bottom: 4px; }

/* ---------- SHOWROOM (exhibition) ---------- */
.exhibition { padding: clamp(80px, 12vh, 140px) 0 clamp(140px, 20vh, 240px); }
.exhibition__grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(40px, 7vw, 140px); align-items: center; }
.exhibition__poster { overflow: hidden; aspect-ratio: 1206 / 1567; background: #0a0a0b; }
.exhibition__poster img { width: 100%; height: 100%; object-fit: cover; }
.exhibition__title { display: flex; flex-direction: column; gap: 18px; margin-bottom: 48px; font-weight: 400; }
.exhibition__title .display { font-size: clamp(36px, 4.2vw, 76px); }
.exhibition__sub { font-size: clamp(18px, 1.8vw, 28px); letter-spacing: 0.4em; font-weight: 300; color: var(--glow); }
.exhibition__info { border-top: 1px solid var(--line); }
.exhibition__info div { display: grid; grid-template-columns: 140px 1fr; gap: 16px; padding: 20px 0; border-bottom: 1px solid var(--line); }
.exhibition__info dt { font-family: var(--f-mono); font-size: 11px; letter-spacing: 0.2em; color: var(--ash); padding-top: 4px; }
.exhibition__info dd { font-size: 15px; line-height: 1.9; overflow-wrap: anywhere; }
.exhibition__info dd a { border-bottom: 1px solid rgba(201,162,39,.5); transition: color .3s; }
.exhibition__info dd a:hover { color: var(--glow); }

/* ---------- OUTRO / FOOTER ---------- */
.outro { position: relative; border-top: 1px solid var(--line); overflow: hidden; }
.outro__news { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 520px); gap: 48px; align-items: end; padding-top: clamp(100px, 14vh, 160px); padding-bottom: clamp(80px, 12vh, 140px); }
.outro__title { font-size: clamp(34px, 4.4vw, 76px); margin-bottom: 24px; }
.news__label { display: block; margin-bottom: 10px; }
.news__row { display: flex; border-bottom: 1px solid rgba(236,233,226,.4); }
.news input { flex: 1; min-width: 0; min-height: 56px; background: transparent; border: 0; color: var(--bone); font-family: var(--f-mono); font-size: 15px; padding: 0; }
.news input::placeholder { color: var(--ash-2); }
.news input:focus { outline: none; }
.news__msg { min-height: 1.6em; margin-top: 12px; color: var(--brass); }
.footer { position: relative; padding-bottom: 96px; }
.footer__logo { display: block; width: min(64vw, 760px); height: auto; aspect-ratio: 940 / 790; margin: 0 auto -6vw; fill: none; stroke: rgba(236,233,226,.22); stroke-width: 1.4; vector-effect: non-scaling-stroke; }
.footer__logo path { vector-effect: non-scaling-stroke; }
.footer__row { position: relative; display: flex; justify-content: space-between; align-items: flex-end; gap: 32px; flex-wrap: wrap; padding-top: 32px; border-top: 1px solid var(--line); }
.footer__links { display: flex; flex-wrap: wrap; gap: 12px 32px; font-size: 13px; }
.footer__links a { padding: 6px 0; color: var(--bone-2); transition: color .3s; }
.footer__links a:hover { color: var(--bone); }
.footer__meta { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; }

/* reveal base (JS sets initial states) */
[data-reveal] { will-change: transform, opacity; }

/* ---------- RESPONSIVE ---------- */
@media (max-width: 1080px) {
  .header__nav { display: none; }
  .menu-btn { display: block; }
  .oo-split, .print__grid, .zip__body, .designer__grid, .exhibition__grid, .outro__news { grid-template-columns: minmax(0, 1fr); }
  .oo-split__text { position: static; }
  .zip__body { margin-top: 0; }
  .zip__text { padding-top: 80px; }
  .zip__detail { max-width: 320px; }
  .stickers__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  body { font-size: 14px; }
  .header { padding: 16px var(--gutter); }
  .header__by { display: none; }
  .sound__label { display: none; }
  .hero__inner { padding-top: 92px; padding-bottom: 28px; }
  .hero__coord { display: none; }
  .hero__scroll { display: none; }
  .hero__title { font-size: 17vw; letter-spacing: 0.3em; margin-right: -0.3em; }
  .oo-hero { height: 110vh; min-height: 640px; }
  .collection__viewport { overflow: visible; }
  .collection__track { width: auto; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 12px; }
  .card { width: auto; }
  .card__info { grid-template-columns: 1fr; }
  .card__info h3 { font-size: 13px; }
  .collection__progress { display: none; }
  .zip__media { height: 70vh; }
  .artwork__item--a, .artwork__item--b { grid-column: 1 / -1; margin-top: 0; }
  .artwork__grid { grid-template-columns: minmax(0, 1fr); gap: 56px; }
  .sticker { width: 30vw; }
  .stickers__wall { height: 520px; }
  .designer__media { padding-bottom: 20%; }
  .credits li { grid-template-columns: auto 40px 1fr; }
  .exhibition__info div { grid-template-columns: 1fr; gap: 4px; }
  .footer__meta { align-items: flex-start; }
}

/* ---------- REDUCED MOTION ---------- */
@media (prefers-reduced-motion: reduce) {
  .grain { animation: none; }
  .hero__scroll-line i { animation: none; }
  .zip__media { clip-path: none; }
  .zip__media img, .oo-hero__media img, .spatula__media img { transform: none; }
  .spatula__lines span:first-child { opacity: 1; }
  .manifesto__body .char { opacity: 1; }
  .oo-reveal__top { clip-path: none; }
}

/* ---------- CUTOUT FIXTURES ---------- */
.card--cutout .card__media { background: radial-gradient(70% 60% at 50% 46%, #2B2B29 0%, #171716 62%, #121211 100%); }
.card--cutout .card__media img { object-fit: contain; padding: 6%; filter: drop-shadow(0 24px 30px rgba(0,0,0,.55)); }
.card--cutout a:hover .card__media img { scale: 1.04; }

/* touch / pointer specific copy */
.if-touch { display: none; }
@media (hover: none), (pointer: coarse) {
  .if-fine { display: none; }
  .if-touch { display: inline; }
}

/* =========================================================
   PHONE  (390–402 wide, safe areas)
   ========================================================= */
html { -webkit-tap-highlight-color: transparent; }
.header { padding-top: max(22px, env(safe-area-inset-top)); padding-left: max(var(--gutter), env(safe-area-inset-left)); padding-right: max(var(--gutter), env(safe-area-inset-right)); }
.display, .manifesto__title, .print__title, .oo-hero__title, .designer__name { text-wrap: balance; }
.body-text, .manifesto__body, .oo-hero__copy, .card__info h3 { text-wrap: pretty; }
/* Japanese line breaking: no breaks before ー / punctuation, wrap on phrase boundaries (Chrome 119+; others fall back to normal) */
.hero__lead, .manifesto__title, .manifesto__body, .body-text, .collection__note, .oo-hero__ja, .oo-hero__copy, .oo-points p,
.card__info h3, .specs dd, .print__title, .spatula__copy, .stickers__ja, .stickers__list li, .designer__kana, .designer__role,
.credits p, .exhibition__info dd, .news__msg { line-break: strict; word-break: auto-phrase; }
.designer__role { word-break: keep-all; }
@media (hover: none), (pointer: coarse) {
  .ambient { mix-blend-mode: normal; opacity: .42; height: 100lvh; }
  .grain { inset: 0; animation: none; opacity: .05; }
}

@media (max-width: 760px) {
  :root { --gutter: 20px; }
  body { font-size: 15px; }
  .body-text { font-size: 14.5px; line-height: 2.05; }
  .eyebrow { font-size: 10px; letter-spacing: .26em; margin-bottom: 20px; }
  .meta { font-size: 10px; }
  .display { font-size: clamp(30px, 8.6vw, 40px); letter-spacing: .12em; line-height: 1.16; }

  /* header */
  .header { padding-bottom: 14px; padding-top: max(16px, env(safe-area-inset-top)); }
  .header__logo { width: 29px; height: 25px; }
  .header__name { font-size: 14px; letter-spacing: .26em; }
  .sound { min-width: 44px; justify-content: center; }
  .menu-btn span { left: 11px; right: 11px; }
  .mobile-menu { padding: calc(110px + env(safe-area-inset-top)) var(--gutter) calc(40px + env(safe-area-inset-bottom)); }
  .mobile-menu nav { gap: 2px; }
  .mobile-menu a { display: block; padding: 8px 0; font-size: 30px; letter-spacing: .18em; border-bottom: 1px solid var(--line); }

  /* loader */
  .loader__meta { bottom: calc(28px + env(safe-area-inset-bottom)); }

  /* hero */
  .hero { min-height: 600px; }
  .hero__inner { padding: calc(84px + env(safe-area-inset-top)) var(--gutter) calc(78px + env(safe-area-inset-bottom)); }
  .hero__shade { background:
    radial-gradient(130% 70% at 50% 34%, transparent 30%, rgba(5,5,5,0.7) 100%),
    linear-gradient(180deg, rgba(5,5,5,0.5) 0%, transparent 18%, transparent 46%, rgba(5,5,5,0.92) 100%); }
  .hero__bottom { flex-direction: column; align-items: flex-start; gap: 26px; }
  .hero__title { font-size: 20vw; letter-spacing: .18em; margin-right: -.18em; line-height: .9; margin-left: -.03em; }
  .hero__aside { padding-bottom: 0; gap: 20px; max-width: none; }
  .hero__lead { font-size: 18px; line-height: 1.85; letter-spacing: .1em; }
  .hero__sub { margin-top: -10px; }

  /* manifesto */
  .manifesto { padding: 120px 0 96px; }
  .manifesto__title { font-size: clamp(28px, 8vw, 34px); line-height: 1.6; letter-spacing: .1em; margin-bottom: 52px; }
  .manifesto__body { font-size: 19px; line-height: 2; letter-spacing: .05em; }
  .manifesto__foot { margin-top: 64px; padding-top: 28px; gap: 24px; }

  /* flagship */
  .oo-hero { height: auto; min-height: 0; padding: 0; display: flex; flex-direction: column; }
  .oo-hero__media { position: relative; inset: auto; height: 78svh; min-height: 520px; overflow: hidden; }
  .oo-hero__media img { height: 118%; object-position: 50% 50%; }
  .oo-hero__shade { bottom: auto; height: 78svh; min-height: 520px; background: linear-gradient(180deg, #0D0D0C 0%, rgba(12,10,8,0) 18%, rgba(12,10,8,.1) 44%, rgba(12,10,8,.82) 74%, #0C0A08 100%); }
  .oo-hero__content { position: relative; inset: auto; margin-top: -34svh; padding-bottom: 8px; }
  .oo-hero__title { font-size: clamp(34px, 10vw, 44px); letter-spacing: .14em; }
  .oo-hero__ja { font-size: 22px; letter-spacing: .34em; margin-top: 18px; }
  .oo-hero__copy { font-size: 16px; line-height: 2.1; margin-top: 22px; }
  .oo-badge { margin-top: 32px; padding: 12px 18px; }
  .oo-split { padding-top: 56px; padding-bottom: 104px; gap: 48px; }
  .oo-points li { padding: 24px 0; }
  .oo-points p { font-size: 16px; }
  .oo-split .btn--line { margin-top: 32px; }
  .oo-reveal { touch-action: pan-y; margin-inline: calc(var(--gutter) * -1); }
  .oo-reveal figcaption { left: var(--gutter); }

  /* services */
  .collection { padding: 104px 0 72px; }
  .collection__head { margin-bottom: 40px; gap: 18px; }
  .collection__note { font-size: 14px; }
  .collection__track { gap: 36px 12px; }
  .collection__track > .card:first-child { grid-column: 1 / -1; }
  .collection__track > .card:first-child .card__media { aspect-ratio: 1 / 1; }
  .collection__track > .card:first-child .card__info h3, .collection__track > .card:last-child .card__info h3 { font-size: 15px; }
  .collection__track > .card:last-child { grid-column: 1 / -1; }
  .collection__track > .card:last-child .card__media { aspect-ratio: 16 / 10; }
  .card__info { padding-top: 12px; gap: 4px; }
  .card__info .meta { font-size: 9.5px; }
  .card__info h3 { font-size: 13px; line-height: 1.65; letter-spacing: .03em; }
  .card__price { font-size: 11px; }
  .card__badge { top: 10px; left: 10px; font-size: 9px; padding: 6px 8px; }
  .card--cutout .card__media img { padding: 4%; filter: drop-shadow(0 14px 18px rgba(0,0,0,.55)); }

  /* fixture */
  .zip { padding: 72px 0 96px; }
  .zip__media { height: 72svh; min-height: 460px; }
  .zip__text { padding-top: 56px; }
  .zip__text .display { margin-bottom: 28px; }
  .specs { margin-top: 36px; }
  .specs div { grid-template-columns: 92px 1fr; padding: 14px 0; font-size: 13.5px; }
  .zip__body { gap: 48px; }
  .zip__detail { max-width: none; width: 68%; margin-left: auto; }

  /* plan */
  .print { padding: 72px 0 104px; }
  .print__grid { gap: 40px; }
  .print__figure { margin-inline: calc(var(--gutter) * -1); aspect-ratio: 1 / 1; touch-action: pan-y; }
  .print__figure img { object-position: 50% 50%; }
  .print__lens { width: 150px; height: 150px; margin: -75px 0 0 -75px; }
  .print__title { font-size: 26px; line-height: 1.75; margin-bottom: 24px; }
  .print__hint { margin-top: 24px; }

  /* sceptre */
  .spatula__pin { height: 100svh; min-height: 600px; }
  .spatula__media img { object-position: 50% 50%; }
  .spatula__shade { background: linear-gradient(180deg, rgba(13,13,12,.6) 0%, transparent 26%, transparent 42%, rgba(13,13,12,.92) 74%, #0D0D0C 100%); }
  .spatula__content { justify-content: flex-end; gap: 0; padding-top: calc(92px + env(safe-area-inset-top)); padding-bottom: calc(76px + env(safe-area-inset-bottom)); }
  .spatula__content > .eyebrow { margin-bottom: auto; }
  .spatula__title { font-size: 30px; letter-spacing: .14em; }
  .spatula__lines { position: relative; left: auto; right: auto; top: auto; height: 1.4em; margin: 18px 0 22px; text-align: left; font-size: 11px; color: var(--brass); }
  .spatula__copy { font-size: 14px; line-height: 2; }
  .spatula__price { margin-top: 12px; }

  /* works */
  .artwork { padding: 104px 0 88px; }
  .artwork__head { margin-bottom: 48px; gap: 24px; }
  .artwork__grid { gap: 40px; }
  .artwork__item--b { width: 82%; margin-left: auto; }

  /* kelvin */
  .stickers { padding: 72px 0 104px; }
  .stickers__head { margin-bottom: 28px; gap: 20px; }
  .stickers__ja { font-size: 16px; margin-top: 12px; }
  .stickers__wall { height: 560px; margin-inline: calc(var(--gutter) * -1); }
  .sticker { width: 34vw; }
  .sticker:nth-child(1) { --x: 5% !important;  --y: 5% !important; }
  .sticker:nth-child(2) { --x: 58% !important; --y: 9% !important; }
  .sticker:nth-child(3) { --x: 33% !important; --y: 35% !important; }
  .sticker:nth-child(4) { --x: 7% !important;  --y: 62% !important; }
  .sticker:nth-child(5) { --x: 52% !important; --y: 63% !important; }
  .stickers__hint { right: var(--gutter); bottom: 14px; }
  .stickers__list { gap: 20px 16px; margin-top: 32px; }
  .stickers__list li span:first-child { font-size: 13px; letter-spacing: .14em; }

  /* studio */
  .designer { padding: 112px 0 96px; }
  .designer__name { font-size: clamp(30px, 8.6vw, 42px); letter-spacing: .12em; }
  .designer__role { font-size: 12.5px; line-height: 1.8; margin-bottom: 28px; }
  .credits { margin-top: 40px; }
  .credits li { grid-template-columns: 96px 1fr; gap: 6px 14px; padding: 20px 0; }
  .credits__num { font-size: 36px; grid-row: span 2; }
  .credits__num--sm { font-size: 22px; letter-spacing: .1em; padding-top: 6px; }
  .credits__unit { grid-column: 2; grid-row: 1; font-size: 11px; }
  .credits p { grid-column: 2; font-size: 13.5px; }

  /* showroom */
  .exhibition { padding: 72px 0 112px; }
  .exhibition__grid { gap: 44px; }
  .exhibition__poster { width: 86%; margin: 0 auto; }
  .exhibition__title { margin-bottom: 32px; }
  .exhibition__title .display { font-size: clamp(28px, 8vw, 36px); }
  .exhibition__sub { font-size: 16px; letter-spacing: .3em; }
  .exhibition__info div { padding: 16px 0; }
  .exhibition__info dd { font-size: 14px; }
  .btn { padding: 0 20px; letter-spacing: .18em; }

  /* outro + footer */
  .outro__news { padding-top: 96px; padding-bottom: 72px; gap: 36px; }
  .outro__title { font-size: clamp(28px, 8vw, 36px); }
  .news__row { flex-wrap: nowrap; }
  .news input { font-size: 16px; min-height: 52px; }
  .news .btn { padding: 0 18px; min-height: 52px; }
  .footer { padding-bottom: calc(96px + env(safe-area-inset-bottom)); }
  .footer__logo { width: 84vw; margin-bottom: -10vw; }
  .footer__links { gap: 4px 24px; }
  .footer__links a { padding: 10px 0; font-size: 13px; }
  .footer__meta .meta { text-wrap: balance; }
  .header__brand { min-height: 44px; padding-right: 8px; }
}

@media (max-width: 380px) {
  .hero__title { font-size: 19vw; }
  .news .btn { padding: 0 14px; }
}

/* LightKing pattern switcher — hidden while the full-screen menu is open */
.menu-open .lk-switch { opacity: 0; pointer-events: none; }
.lk-switch img { max-width: none; display: inline-block; }