/* ===========================================================
   宵 YOI — reset / typography / shared primitives
   =========================================================== */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: auto;          /* Lenis が制御する */
}

body {
  margin: 0;
  background: var(--ink);
  color: var(--paper-2);
  font-family: var(--font-gothic);
  font-size: var(--t-body);
  line-height: var(--lh-body);
  font-feature-settings: "palt" 1;
  letter-spacing: 0.04em;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

body.is-locked { overflow: hidden; }

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

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

h1, h2, h3, h4, p, figure, blockquote { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }

::selection { background: var(--brass); color: var(--ink); }

:focus-visible {
  outline: 1px solid var(--brass-lit);
  outline-offset: 4px;
}

/* --- 型 --------------------------------------------------- */

.mincho {
  font-family: var(--font-mincho);
  font-weight: 400;
  letter-spacing: var(--ls-mincho);
  color: var(--paper);
}

.label {
  font-family: var(--font-latin);
  font-style: normal;
  font-size: var(--t-label);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--brass);
  line-height: 1;
}

/* Garamond 既定の old-style figures は電話番号・時刻・価格で読みにくい */
.label,
.link-quiet,
.crumb,
.btn,
.footer__bottom,
.card__meta,
.works__item figcaption {
  font-variant-numeric: lining-nums;
}

.lead {
  font-family: var(--font-mincho);
  font-size: var(--t-lead);
  line-height: 2.4;
  letter-spacing: 0.12em;
  color: var(--paper);
  max-width: var(--measure);
}

.body-text {
  max-width: var(--measure);
  color: var(--paper-2);
}

.body-text + .body-text { margin-top: 1.8em; }

/* 縦書き。日本語サイトでしか成立しない武器 */
.tategaki {
  writing-mode: vertical-rl;
  text-orientation: upright;
  font-feature-settings: "palt" 0;
  letter-spacing: 0.28em;
  line-height: 1.9;
}

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

.shell {
  width: 100%;
  max-width: 1560px;
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.shell--narrow { max-width: 1080px; }

.rule {
  height: 1px;
  background: var(--line);
  border: 0;
  margin: 0;
}

/* --- 金銅の細線。区切りではなく「灯」として使う --- */
.hairline {
  position: relative;
  height: 1px;
  background: var(--line-soft);
  overflow: hidden;
}
.hairline::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, var(--brass-lit), transparent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--dur-slow) var(--ease);
}
.hairline.is-in::after { transform: scaleX(1); }

/* --- reveal primitives (JS が is-in を付ける) --- */

.rv {
  opacity: 0;
  transform: translateY(24px);
  transition:
    opacity var(--dur) var(--ease),
    transform var(--dur) var(--ease);
}
.rv.is-in { opacity: 1; transform: none; }

.rv-clip {
  clip-path: inset(100% 0 0 0);
  transition: clip-path var(--dur-slow) var(--ease);
}
.rv-clip.is-in { clip-path: inset(0 0 0 0); }

/* 行単位で立ち上がる見出し */
.rv-line { overflow: hidden; display: block; }
.rv-line > span {
  display: block;
  transform: translateY(105%);
  transition: transform var(--dur-slow) var(--ease);
}
.rv-line.is-in > span { transform: none; }

.rv-d1 { transition-delay: 90ms; }
.rv-d2 { transition-delay: 180ms; }
.rv-d3 { transition-delay: 280ms; }
.rv-d4 { transition-delay: 380ms; }

/* --- media --------------------------------------------- */

.media {
  position: relative;
  overflow: hidden;
  background: var(--ink-1);
}
.media > img,
.media > video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* 暗部を締めて、明部だけ金銅に寄せる。素材が既に暗いので触りは最小 */
.media--graded > img { filter: contrast(1.04) saturate(0.95); }

.media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(7,6,5,.42), transparent 48%);
  pointer-events: none;
}
.media--flat::after { display: none; }

.ratio-3-4  { aspect-ratio: 3 / 4; }
.ratio-4-3  { aspect-ratio: 4 / 3; }
.ratio-1-1  { aspect-ratio: 1 / 1; }
.ratio-16-9 { aspect-ratio: 16 / 9; }
.ratio-21-9 { aspect-ratio: 21 / 9; }

/* --- grain。全面に薄く乗せて写真の粒子と繋ぐ --- */
.grain {
  position: fixed;
  inset: 0;
  z-index: var(--z-grain);
  pointer-events: none;
  opacity: 0.055;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
  animation: grain-shift 7s steps(6) infinite;
}
@keyframes grain-shift {
  0%   { transform: translate(0, 0); }
  20%  { transform: translate(-3%, 2%); }
  40%  { transform: translate(2%, -3%); }
  60%  { transform: translate(-2%, -2%); }
  80%  { transform: translate(3%, 1%); }
  100% { transform: translate(0, 0); }
}

/* --- link / button ------------------------------------- */

.link-quiet {
  position: relative;
  display: inline-block;
  padding-bottom: 0.35em;
  font-family: var(--font-latin);
  font-size: var(--t-label);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--paper);
}
.link-quiet::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  width: 100%; height: 1px;
  background: var(--brass);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform var(--dur) var(--ease);
}
.link-quiet:hover::after { transform: scaleX(1); transform-origin: left; }

.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 1.4em;
  padding: 1.35em 2.6em;
  border: 1px solid var(--brass-dim);
  font-family: var(--font-latin);
  font-size: var(--t-label);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--paper);
  overflow: hidden;
  transition: color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.btn::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--brass-lit);
  transform: translateY(101%);
  transition: transform var(--dur) var(--ease);
  z-index: -1;
}
.btn > * { position: relative; }
.btn:hover { color: var(--ink); border-color: var(--brass-lit); }
.btn:hover::before { transform: none; }

.btn__arrow { display: block; width: 1.6em; height: 1px; background: currentColor; }

@media (prefers-reduced-motion: reduce) {
  .rv, .rv-clip, .rv-line > span { opacity: 1; transform: none; clip-path: none; transition: none; }
  .grain { animation: none; }
}