/* Oshi Yorisoi v3 design system (2026-10-03). Mobile first; PC from 900px.
   Shared by /, /fans/, /creators/, /creators/man/ */
:root {
  /* Color */
  --paper: #EEE9E3; --ink: #1C1517; --mist: #857B78; --bx: #5A1424;
  --line: #D3CAC1; --shade: #E6E0D9;
  /* Type */
  --jp-display: "Shippori Mincho B1", "Hiragino Mincho ProN", "Yu Mincho", serif;
  --jp-body: "Zen Kaku Gothic New", "Hiragino Sans", "Yu Gothic", system-ui, sans-serif;
  --en: "Instrument Serif", "Times New Roman", serif;
  --mono: "DM Mono", ui-monospace, Menlo, monospace;
  --fs-display: clamp(31px, 8.6vw, 76px);
  --fs-h2: clamp(24px, 6.2vw, 40px);
  --fs-poem: clamp(19px, 5.1vw, 28px);
  --fs-body: 15px;
  --fs-lbl: 10.5px;
  /* Space: deliberately uneven steps */
  --s1: 8px; --s2: 16px; --s3: 24px; --s4: 40px; --s5: 64px; --s6: 104px; --s7: 168px; --s8: 240px;
  --edge: 20px;
  --hd: 56px;
  /* Motion */
  --ease: cubic-bezier(.22, .61, .21, 1);
  --t-text: 1100ms; --t-photo: 1400ms;
  color-scheme: light;
}
* { box-sizing: border-box; }
html { overflow-x: clip; -webkit-text-size-adjust: 100%; scroll-padding-top: var(--hd); }
body { margin: 0; background: var(--paper); color: var(--ink); font-family: var(--jp-body); font-size: var(--fs-body); line-height: 2; letter-spacing: .04em; overflow-x: clip; font-feature-settings: "palt" 0; }
img { display: block; width: 100%; height: auto; }
picture { display: block; }
h1, h2, h3, p, figure, ol, ul { margin: 0; padding: 0; }
h1, h2, h3 { font-family: var(--jp-display); font-weight: 500; }
a { color: inherit; }
:focus-visible { outline: 1px solid var(--bx); outline-offset: 4px; }
[hidden] { display: none !important; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* Type roles */
.lbl { font-family: var(--mono); font-size: var(--fs-lbl); line-height: 1.6; letter-spacing: .2em; text-transform: uppercase; color: var(--mist); font-weight: 400; }
.en { font-family: var(--en); font-style: italic; font-weight: 400; letter-spacing: .01em; line-height: 1.2; }
.display { font-size: var(--fs-display); line-height: 1.36; letter-spacing: .06em; }
.h2 { font-size: var(--fs-h2); line-height: 1.5; letter-spacing: .08em; }
.body { line-height: 2.05; }
.vt { writing-mode: vertical-rl; text-orientation: mixed; }
.tcy { text-combine-upright: all; -webkit-text-combine: horizontal; }

/* Text link: arrow, hairline underline */
.tl { display: inline-flex; align-items: center; gap: .8em; font-size: 14px; font-weight: 500; letter-spacing: .14em; text-decoration: none; padding-block: 10px; border-bottom: 1px solid currentColor; }
.tl::after { content: "→"; font-family: var(--en); font-size: 1.2em; transition: transform .6s var(--ease); }
a:hover .tl::after, .tl:hover::after { transform: translateX(4px); }
.bx { color: var(--bx); }

/* Header */
.hd { position: fixed; inset: 0 0 auto; z-index: 20; height: var(--hd); display: flex; align-items: center; justify-content: space-between; padding-inline: var(--edge); background: var(--paper); transition: transform .7s var(--ease); }
.hd.away { transform: translateY(-100%); }
.wm { display: inline-flex; flex-direction: column; gap: 5px; font-family: var(--en); font-size: 21px; line-height: 1; text-decoration: none; }
.wm small { font-family: var(--mono); font-size: 7.5px; letter-spacing: .36em; text-transform: uppercase; color: var(--mist); }
.nav { display: none; }
.nav a { font-family: var(--mono); font-size: 11px; letter-spacing: .2em; text-transform: uppercase; text-decoration: none; padding-block: 8px; }
.nav a:hover, .nav a[aria-current] { text-decoration: underline; text-underline-offset: 7px; text-decoration-thickness: 1px; }
.menu-btn { font: inherit; font-family: var(--mono); font-size: 11px; letter-spacing: .2em; text-transform: uppercase; background: none; border: 0; color: inherit; padding: 14px 0 14px 16px; cursor: pointer; }

/* Menu (phone) */
.menu { position: fixed; inset: 0; z-index: 30; background: var(--paper); padding: 0 var(--edge) var(--s5); overflow-y: auto; opacity: 0; transition: opacity .5s var(--ease); }
.menu.open { opacity: 1; }
.menu-top { height: var(--hd); display: flex; align-items: center; justify-content: space-between; }
.menu-top button { font: inherit; font-family: var(--mono); font-size: 11px; letter-spacing: .2em; text-transform: uppercase; background: none; border: 0; padding: 14px 0 14px 16px; color: inherit; cursor: pointer; }
.menu ul { list-style: none; margin-top: var(--s5); border-top: 1px solid var(--line); }
.menu li a { display: grid; gap: 2px; padding: 18px 0; border-bottom: 1px solid var(--line); text-decoration: none; font-family: var(--jp-display); font-size: 19px; letter-spacing: .08em; line-height: 1.6; }
.menu-ft { display: flex; gap: var(--s3); margin-top: var(--s4); }
.menu-ft a { text-decoration: none; }

/* ---------- Top: hero ---------- */
/* Phone: photo bleeds off the left edge; the brand line stands vertically in a narrow right column. */
.hero { height: 100svh; min-height: 600px; display: grid; grid-template-columns: minmax(0, 1fr) 60px; overflow: hidden; grid-template-rows: var(--hd) minmax(0, 1fr) auto auto; }
.hero-ph { grid-column: 1; grid-row: 2; position: relative; overflow: hidden; background: var(--shade); }
.hero-ph picture, .hero-ph img { position: absolute; inset: 0; width: 100%; height: 100%; }
.hero-ph img { object-fit: cover; object-position: 50% 62%; }
.hero-v { grid-column: 2; grid-row: 2; align-self: start; justify-self: center; padding-top: var(--s3); writing-mode: vertical-rl; font-family: var(--jp-display); font-size: 13.5px; line-height: 1.85; letter-spacing: .3em; color: var(--ink); white-space: nowrap; }
.hero-v span { padding-inline-start: 2.6em; }
.hero-tx { grid-column: 1 / -1; grid-row: 3; padding: var(--s3) var(--edge) 0; display: grid; gap: 6px; }
.hero-tx .en { font-size: 15px; color: var(--mist); }
.doors { grid-column: 1 / -1; grid-row: 4; display: grid; grid-template-columns: 1fr 1fr; margin: var(--s3) var(--edge) calc(var(--s2) + env(safe-area-inset-bottom)); border-top: 1px solid var(--ink); }
.door { display: grid; gap: 4px; padding: 14px 0 6px; text-decoration: none; min-height: 64px; }
.door + .door { border-left: 1px solid var(--line); padding-left: 14px; }
.door .t { font-size: 13.5px; font-weight: 500; letter-spacing: .06em; line-height: 1.5; white-space: nowrap; }
.door .t::after { content: "→"; display: inline-block; margin-left: .5em; font-family: var(--en); font-size: 1.2em; transition: transform .6s var(--ease); }
.door:hover .t::after { transform: translateX(4px); }
.door.is-fan .t { color: var(--bx); }

/* ---------- Top: intro ---------- */
.intro { padding: var(--s6) var(--edge) var(--s7); display: grid; }
.intro .biz { max-width: 22em; margin-bottom: var(--s7); }
.poem { padding-left: 14%; display: grid; gap: 2px; font-family: var(--jp-display); font-size: var(--fs-poem); line-height: 2; letter-spacing: .14em; }
.poem2 { margin-top: var(--s6); justify-self: end; padding-right: 4%; font-family: var(--jp-display); font-size: calc(var(--fs-poem) * 1.18); line-height: 1.95; letter-spacing: .12em; }
.intro-body { margin-top: var(--s7); max-width: 21em; }
.intro-body p { line-height: 2.2; }
.card { margin-top: var(--s6); width: 58%; justify-self: end; margin-right: calc(var(--edge) * -1 + 28px); }
.card figcaption { margin-top: var(--s2); display: grid; gap: 4px; }
.card figcaption span { font-family: var(--jp-body); text-transform: none; letter-spacing: .06em; font-size: 12px; color: var(--mist); }

/* ---------- Top: six memories ---------- */
.mem { padding-bottom: var(--s7); }
.mem-hd { padding: 0 var(--edge); display: grid; gap: var(--s2); margin-bottom: var(--s7); }
.mem-hd .body { margin-top: var(--s2); color: var(--ink); }
.m { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); column-gap: 12px; padding-inline: var(--edge); }
.m + .m { margin-top: var(--s7); }
.m-ph { position: relative; background: var(--shade); }
.m-ph img { height: 100%; object-fit: cover; }
.m-h { display: grid; gap: 10px; }
.m-t { font-size: var(--fs-poem); line-height: 1.8; letter-spacing: .12em; }
.m-v { display: flex; flex-direction: row-reverse; gap: 14px; justify-content: flex-start; }
.m-v .m-t { writing-mode: vertical-rl; font-size: clamp(17px, 4.6vw, 24px); line-height: 1.9; letter-spacing: .22em; white-space: nowrap; }
.m-k { writing-mode: vertical-rl; font-family: var(--jp-display); font-size: 11px; letter-spacing: .5em; color: var(--mist); }
.m-f { align-self: end; }
.m-f span { display: inline-block; border-top: 1px solid var(--line); padding-top: 8px; }

/* Each memory sits differently. Phone: 8 columns inside the 20px edge, some photos break the edge. */
.m1 .m-ph { grid-column: 1 / -1; margin-inline: calc(var(--edge) * -1); aspect-ratio: 3 / 2; }
.m1 .m-h { grid-column: 3 / -1; margin-top: var(--s4); }
.m1 .m-f { grid-column: 3 / -1; margin-top: var(--s3); }

.m2 .m-ph { grid-column: 4 / -1; grid-row: 1 / 3; aspect-ratio: 4 / 5; margin-right: calc(var(--edge) * -1); }
.m2 .m-v { grid-column: 1 / 4; grid-row: 1; justify-content: flex-end; padding-right: 4px; }
.m2 .m-f { grid-column: 1 / 4; grid-row: 2; padding-bottom: 4px; }

.m3 { margin-top: var(--s8) !important; }
.m3 .m-ph { grid-column: 1 / -1; margin-inline: calc(var(--edge) * -1); aspect-ratio: 4 / 5; }
.m3 .m-h { grid-column: 1 / 7; margin-top: var(--s5); }
.m3 .m-t { font-size: calc(var(--fs-poem) * 1.2); }
.m3 .m-f { grid-column: 5 / -1; margin-top: var(--s4); justify-self: end; }

.m4 .m-ph { grid-column: 1 / 5; aspect-ratio: 1; margin-left: calc(var(--edge) * -1); }
.m4 .m-h { grid-column: 5 / -1; align-self: end; padding-left: 4px; }
.m4 .m-t { font-size: clamp(16px, 4.3vw, 22px); }
.m4 .m-f { grid-column: 5 / -1; margin-top: var(--s3); }

.m5 { margin-top: var(--s7) !important; }
.m5 .m-ph { grid-column: 2 / -1; aspect-ratio: 3 / 2; margin-right: calc(var(--edge) * -1); }
.m5 .m-h { grid-column: 1 / 7; margin-top: var(--s4); }
.m5 .m-f { grid-column: 2 / -1; margin-top: var(--s3); }

.m6 .m-ph { grid-column: 1 / 6; grid-row: 1 / 3; aspect-ratio: 4 / 5; }
.m6 .m-v { grid-column: 6 / -1; grid-row: 1; justify-content: center; }
.m6 .m-f { grid-column: 6 / -1; grid-row: 2; justify-self: center; text-align: center; }

.m7 { margin-top: var(--s8) !important; }
.m7 .m-ph { grid-column: 3 / -1; aspect-ratio: 1; margin-right: calc(var(--edge) * -1); }
.m7 .m-h { grid-column: 1 / 7; margin-top: var(--s4); }
.m7 .m-f { grid-column: 3 / -1; margin-top: var(--s3); }

.m8 .m-ph { grid-column: 1 / 8; aspect-ratio: 3 / 2; margin-left: calc(var(--edge) * -1); }
.m8 .m-h { grid-column: 2 / -1; margin-top: var(--s4); }
.m8 .m-f { grid-column: 2 / -1; margin-top: var(--s3); }

/* ---------- Top: how it works (clarity first) ---------- */
.how { margin: 0 var(--edge); padding: var(--s6) 0 var(--s6); border-top: 1px solid var(--ink); }
.how-hd { display: grid; gap: var(--s2); }
.steps { list-style: none; margin-top: var(--s5); border-top: 1px solid var(--line); }
.steps li { display: grid; grid-template-columns: 3.4em 1fr; align-items: baseline; padding: 20px 0; border-bottom: 1px solid var(--line); }
.steps .n { font-family: var(--mono); font-size: 11px; letter-spacing: .2em; color: var(--mist); }
.steps p { font-family: var(--jp-display); font-size: 18px; letter-spacing: .1em; line-height: 1.6; }
.how-note { margin-top: var(--s4); font-size: 13px; line-height: 2.1; color: var(--ink); max-width: 30em; }

/* ---------- Top: two doors ---------- */
.end { padding: var(--s7) 0 var(--s7); display: grid; gap: var(--s7); }
.ed { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); column-gap: 12px; padding-inline: var(--edge); text-decoration: none; }
.ed-ph { background: var(--shade); }
.ed-ph img { height: 100%; object-fit: cover; }
.ed-tx { display: grid; gap: 10px; justify-items: start; margin-top: var(--s4); }
.ed-t { font-family: var(--jp-display); font-size: var(--fs-h2); line-height: 1.5; letter-spacing: .08em; }
.ed .tl { margin-top: var(--s2); }
.is-fan .ed-ph { grid-column: 1 / 7; aspect-ratio: 4 / 5; margin-left: calc(var(--edge) * -1); }
.is-fan .ed-tx { grid-column: 2 / -1; }
.is-cr .ed-ph { grid-column: 2 / -1; aspect-ratio: 3 / 2; margin-right: calc(var(--edge) * -1); }
.is-cr .ed-tx { grid-column: 1 / -1; }
.ed-t { font-size: clamp(22px, 5.8vw, 34px); }

/* ---------- Footer ---------- */
.ft { margin: 0 var(--edge); padding: var(--s5) 0 calc(var(--s4) + env(safe-area-inset-bottom)); border-top: 1px solid var(--ink); display: grid; gap: var(--s4); }
.ft-st { font-size: 13px; line-height: 2; max-width: 26em; }
.ft-nav { display: grid; grid-template-columns: 1fr 1fr; gap: 4px var(--s3); }
.ft-nav a { font-family: var(--mono); font-size: 10.5px; letter-spacing: .16em; text-transform: uppercase; text-decoration: none; padding-block: 8px; }
.ft-nav a:last-child { font-family: var(--jp-body); letter-spacing: .06em; font-size: 12px; grid-column: 1 / -1; }
.ft-sns { display: flex; gap: var(--s3); }
.ft-sns a { text-decoration: none; color: var(--ink); }
.ft-c { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 8px; }
.ft-c .en { text-transform: none; font-size: 14px; letter-spacing: .02em; }

/* ---------- Creators (/creators/, /creators/man/) ---------- */
.sw { display: flex; align-items: baseline; gap: 18px; height: calc(var(--hd) + 40px); padding: var(--hd) var(--edge) 0; }
.sw .lbl { margin-right: auto; }
.sw a { font-family: var(--mono); font-size: 11px; letter-spacing: .2em; text-transform: uppercase; text-decoration: none; color: var(--mist); padding-block: 10px; }
.sw a[aria-current] { color: var(--ink); text-decoration: underline; text-underline-offset: 7px; text-decoration-thickness: 1px; }
.cr-hero { height: calc(100svh - var(--hd) - 40px); min-height: 560px; grid-template-rows: minmax(0, 1fr) auto auto; }
.cr-hero .hero-ph, .cr-hero .hero-v { grid-row: 1; }
.cr-hero .hero-v { padding-top: var(--s2); }
.cr-hero .hero-tx { grid-row: 2; padding-top: var(--s3); gap: var(--s2); }
.cr-h1 { font-size: clamp(23px, 6.3vw, 64px); line-height: 1.5; }
.cr-h1, .cr-sub { word-break: keep-all; overflow-wrap: anywhere; }
.cr-sub { font-size: 13.5px; line-height: 1.95; }
.cr-cta { grid-column: 1 / -1; grid-row: 3; display: grid; justify-items: start; gap: 2px; padding: var(--s2) var(--edge) calc(var(--s3) + env(safe-area-inset-bottom)); }
.cr-facts { display: flex; flex-wrap: wrap; gap: 4px 14px; margin-top: var(--s2); }
.cr-facts span + span::before { content: "／"; margin-right: 14px; color: var(--line); }

.story { padding: var(--s7) 0 var(--s6); display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); column-gap: 12px; }
.story-hd { grid-column: 1 / -1; padding-inline: var(--edge); display: grid; gap: var(--s2); }
.traits { grid-column: 2 / -1; margin-top: var(--s6); padding-left: 0; }
.traits p:nth-child(2) { padding-left: 1.5em; }
.traits p:nth-child(3) { padding-left: .5em; }
.traits p:nth-child(4) { padding-left: 2.5em; }
.story-ph { grid-column: 1 / -1; margin-top: var(--s7); }
.story-ph picture { aspect-ratio: 1536 / 658; background: var(--shade); }
.story-ph img { height: 100%; object-fit: cover; }
.man .story-ph img { object-position: 50% 38%; }
.cap { display: flex; flex-wrap: wrap; gap: 4px 10px; padding: 12px var(--edge) 0; font-size: 12px; color: var(--mist); }
.cap > span:last-child { letter-spacing: .06em; }
.story-body { grid-column: 3 / -1; margin-top: var(--s6); padding-right: var(--edge); }
.story-body p { font-family: var(--jp-display); font-size: 17px; line-height: 2.2; letter-spacing: .1em; }

.pers { padding: var(--s6) 0 var(--s7); }
.pers-hd { padding-inline: var(--edge); display: grid; gap: var(--s2); max-width: 34em; margin-bottom: var(--s7); }
.pers-hd .body { margin-top: var(--s2); }
.ps { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); column-gap: 12px; padding-inline: var(--edge); }
.ps + .ps { margin-top: var(--s6); }
.ps-ph { background: var(--shade); }
.ps-ph picture, .ps-ph img { height: 100%; }
.ps-ph img { object-fit: cover; }
.ps-tx { display: grid; gap: 8px; margin-top: var(--s3); align-content: start; }
.ps-n { font-size: clamp(22px, 5.8vw, 32px); line-height: 1.5; letter-spacing: .1em; }
.ps-m { font-family: var(--jp-display); font-size: 15px; letter-spacing: .1em; color: var(--mist); }
.ps-f { margin-top: 6px; font-size: 13.5px; line-height: 2; max-width: 22em; }
/* Phone: alternate sides and sizes, like characters introduced one page at a time */
.ps1 .ps-ph { grid-column: 1 / -1; margin-inline: calc(var(--edge) * -1); aspect-ratio: 3 / 2; }
.ps1 .ps-tx { grid-column: 2 / -1; }
.ps2 .ps-ph { grid-column: 3 / -1; aspect-ratio: 4 / 5; margin-right: calc(var(--edge) * -1); }
.ps2 .ps-tx { grid-column: 1 / -1; }
.ps3 .ps-ph { grid-column: 1 / 7; aspect-ratio: 4 / 5; margin-left: calc(var(--edge) * -1); }
.ps3 .ps-tx { grid-column: 2 / -1; }
.ps4 .ps-ph { grid-column: 4 / -1; aspect-ratio: 1; }
.ps4 .ps-tx { grid-column: 1 / -1; }
.ps5 .ps-ph { grid-column: 1 / -1; aspect-ratio: 3 / 2; margin-right: calc(var(--edge) * -1); margin-left: 12%; }
.ps5 .ps-tx { grid-column: 3 / -1; }
.ps6 .ps-ph { grid-column: 1 / 6; aspect-ratio: 4 / 5; }
.ps6 .ps-tx { grid-column: 2 / -1; }
.pers-note { margin: var(--s6) var(--edge) 0; padding-top: var(--s3); border-top: 1px solid var(--line); font-size: 13px; line-height: 2.1; max-width: 30em; }

.proc { margin: 0 var(--edge); padding: var(--s6) 0; border-top: 1px solid var(--ink); }
.steps small { display: block; margin-top: 6px; font-family: var(--jp-body); font-size: 12.5px; line-height: 1.9; letter-spacing: .04em; color: var(--mist); }

.make { padding: var(--s7) 0 var(--s6); display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); column-gap: 12px; }
.make-hd { grid-column: 1 / -1; padding-inline: var(--edge); display: grid; gap: var(--s2); }
.make-b { grid-column: 3 / -1; margin-top: var(--s6); aspect-ratio: 4 / 5; background: var(--shade); }
.make-b img, .make-c img { height: 100%; object-fit: cover; }
.make-b picture, .make-c picture { height: 100%; }
.make-l { grid-column: 1 / -1; list-style: none; margin: var(--s5) var(--edge) 0; display: grid; grid-template-columns: 1fr 1fr; border-top: 1px solid var(--line); }
.make-l li { padding: 14px 0; border-bottom: 1px solid var(--line); font-family: var(--jp-display); font-size: 17px; letter-spacing: .1em; }
.make-l li:nth-child(even) { padding-left: 14px; border-left: 1px solid var(--line); }
.make-c { grid-column: 1 / 5; margin-top: var(--s5); aspect-ratio: 1; background: var(--shade); }
.make-n { grid-column: 5 / -1; align-self: end; padding: 0 var(--edge) 0 4px; font-size: 13.5px; line-height: 2; }
.roles { grid-column: 1 / -1; margin: var(--s6) var(--edge) 0; display: grid; gap: var(--s5); }
.roles h3 { font-size: 18px; letter-spacing: .1em; padding-bottom: 12px; border-bottom: 1px solid var(--ink); }
.roles ul { list-style: none; }
.roles li { padding: 12px 0; border-bottom: 1px solid var(--line); font-size: 14px; line-height: 1.8; }

.faq { margin: 0 var(--edge); padding: var(--s6) 0; border-top: 1px solid var(--ink); }
.faq-l { margin-top: var(--s5); border-top: 1px solid var(--line); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary { list-style: none; cursor: pointer; display: grid; grid-template-columns: 1fr auto; gap: 16px; align-items: baseline; padding: 20px 0; font-family: var(--jp-display); font-size: 16.5px; letter-spacing: .08em; line-height: 1.7; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font-family: var(--en); font-size: 22px; line-height: 1; color: var(--mist); transition: transform .5s var(--ease); }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details p { padding: 0 0 24px; font-size: 14px; line-height: 2.05; max-width: 34em; }

.closing { padding: var(--s6) 0 var(--s7); display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); column-gap: 12px; }
.closing-ph { grid-column: 1 / -1; aspect-ratio: 4 / 5; background: var(--shade); }
.closing-ph img { object-position: 50% 70%; }
.closing-ph picture, .closing-ph img { height: 100%; }
.closing-ph img { object-fit: cover; }
.closing-tx { grid-column: 2 / -1; margin-top: var(--s5); padding-right: var(--edge); display: grid; justify-items: start; gap: 4px; }
.closing-tx .h2 { margin-bottom: var(--s4); }
.closing-tx .note { margin-top: var(--s3); text-transform: none; letter-spacing: .08em; font-family: var(--jp-body); font-size: 11.5px; }

/* Consult: choose X or LINE */
.consult { display: grid; gap: 0; }
.consult-t { font-size: 12px; letter-spacing: .14em; color: var(--bx); padding-top: 6px; }
.consult-l { display: flex; flex-wrap: wrap; gap: 0 28px; }
.consult + .tl { margin-top: 4px; }

/* ---------- Fans (/fans/) ---------- */
.fan-hero { grid-template-rows: var(--hd) minmax(0, 1fr) auto auto; }
.fan-hero .hero-ph { grid-row: 2; }
.fan-hero .hero-ph img { object-position: 50% 70%; }
.fan-hero .hero-tx { grid-row: 3; gap: 10px; }
.fan-hero .cr-cta { grid-row: 4; }
.fan-h1 { font-size: clamp(23px, 6.3vw, 60px); line-height: 1.55; word-break: keep-all; }

/* Diagnosis: words chosen on a sheet of paper. No radio buttons; the chosen word gets a line under it */
.qz { margin: var(--s5) var(--edge) 0; padding: var(--s5) 0 var(--s6); border-top: 1px solid var(--ink); scroll-margin-top: var(--s2); }
.qz-sheet { min-height: 520px; transition: opacity .38s var(--ease), transform .38s var(--ease); }
.qz-sheet.out { opacity: 0; transform: translate3d(0, 8px, 0); }
.qz-t { margin: var(--s3) 0 var(--s4); font-size: clamp(22px, 6vw, 36px); line-height: 1.6; letter-spacing: .1em; }
.qz-o { list-style: none; }
.qz-o button { all: unset; box-sizing: border-box; cursor: pointer; display: grid; grid-template-columns: 2.4em 1fr; align-items: baseline; width: 100%; padding: 15px 0; -webkit-tap-highlight-color: transparent; }
.qz-o .k { font-family: var(--en); font-style: italic; font-size: 17px; color: var(--mist); }
.qz-o .w { justify-self: start; font-family: var(--jp-display); font-size: 18px; letter-spacing: .1em; line-height: 1.7; background: linear-gradient(var(--bx), var(--bx)) 0 100% / 0 1px no-repeat; padding-bottom: 3px; transition: background-size .5s var(--ease), color .3s; }
.qz-o button:hover .w, .qz-o button:focus-visible .w { background-size: 100% 1px; }
.qz-o button.sel .w { color: var(--bx); background-size: 100% 1px; }
.qz-o button.sel .k { color: var(--bx); }
.qz-o button:focus-visible { outline: none; }
.qz-name input { width: 100%; font: inherit; font-family: var(--jp-display); font-size: 21px; letter-spacing: .1em; color: var(--ink); background: transparent; border: 0; border-bottom: 1px solid var(--ink); border-radius: 0; padding: 10px 0; }
.qz-name input::placeholder { color: var(--line); }
.qz-name input:focus { outline: none; border-bottom-color: var(--bx); }
.qz-fine { margin-top: var(--s2); font-size: 12px; line-height: 1.9; color: var(--mist); }
.qz-acts { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 28px; margin-top: var(--s4); }
.qz-acts button.tl { font: inherit; font-size: 14px; font-weight: 500; letter-spacing: .14em; background: none; border: 0; border-bottom: 1px solid currentColor; cursor: pointer; padding: 10px 0; }
.qz-skip, .qz-back { font: inherit; font-size: 12.5px; letter-spacing: .08em; color: var(--mist); background: none; border: 0; padding: 10px 0; cursor: pointer; text-decoration: underline; text-underline-offset: 5px; text-decoration-thickness: 1px; }
.qz-back { margin-top: var(--s4); }
.qz-back::before { content: "← "; font-family: var(--en); }
.qz-r { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); column-gap: 12px; }
.qz-r-ph { grid-column: 3 / -1; aspect-ratio: 4 / 5; background: var(--shade); margin-right: calc(var(--edge) * -1); }
.qz-r-ph picture, .qz-r-ph img { height: 100%; }
.qz-r-ph img { object-fit: cover; }
.qz-r-tx { grid-column: 1 / -1; margin-top: var(--s4); display: grid; gap: 8px; }
.qz-type { font-size: clamp(30px, 8.6vw, 52px); line-height: 1.4; letter-spacing: .1em; }
.qz-sub { font-size: 13px; color: var(--mist); }
.qz-moment { margin: var(--s3) 0 var(--s2); font-family: var(--jp-display); font-size: var(--fs-poem); letter-spacing: .12em; line-height: 1.8; }
.qz-spec { margin: 0; border-top: 1px solid var(--line); }
.qz-spec div { display: grid; grid-template-columns: 6.5em 1fr; gap: 8px; padding: 14px 0; border-bottom: 1px solid var(--line); align-items: baseline; }
.qz-spec dd { margin: 0; font-size: 14px; line-height: 1.85; }

.req { margin: 0 var(--edge); padding: var(--s6) 0; border-top: 1px solid var(--ink); }
.req-hd { display: grid; gap: var(--s2); max-width: 32em; }
.req-hd .body { margin-top: var(--s2); }
.req-f { margin-top: var(--s5); display: grid; gap: var(--s4); max-width: 32em; }
.fld { display: grid; gap: 4px; }
.fld label { font-size: 13px; font-weight: 500; letter-spacing: .08em; }
.fld label span { margin-left: 1em; font-family: var(--mono); font-size: 10px; letter-spacing: .14em; color: var(--mist); font-weight: 400; }
.fld input, .fld textarea { width: 100%; font: inherit; font-size: 16px; color: var(--ink); background: transparent; border: 0; border-bottom: 1px solid var(--ink); border-radius: 0; padding: 10px 0; resize: vertical; }
.fld input::placeholder, .fld textarea::placeholder { color: var(--line); }
.fld input:focus, .fld textarea:focus { outline: none; border-bottom-color: var(--bx); }
.req-b { justify-self: start; font: inherit; font-size: 14px; font-weight: 500; letter-spacing: .14em; background: none; border: 0; border-bottom: 1px solid currentColor; cursor: pointer; padding: 10px 0; }
.req-b:disabled { opacity: .5; }
.msg { font-size: 13px; min-height: 1em; }
.msg.err { color: var(--bx); }
.req-n { font-size: 12px; line-height: 1.9; color: var(--mist); }
.req-done { margin-top: var(--s5); font-family: var(--jp-display); font-size: 18px; line-height: 2; letter-spacing: .1em; }

.ap { margin: 0 var(--edge); padding: var(--s6) 0; border-top: 1px solid var(--ink); }
.ap-empty { margin-top: var(--s5); padding: var(--s5) 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); display: grid; gap: var(--s2); }
.ap-t { font-family: var(--jp-display); font-size: var(--fs-poem); letter-spacing: .12em; line-height: 1.8; }
.ap-links { display: flex; gap: 28px; }
.ap-list { margin-top: var(--s5); display: grid; gap: var(--s6); }
.ap-i { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); column-gap: 12px; text-decoration: none; }
.ap-ph { grid-column: 1 / 6; aspect-ratio: 4 / 5; background: var(--shade); margin-left: calc(var(--edge) * -1); overflow: hidden; }
.ap-ph img { height: 100%; object-fit: cover; }
.ap-i:nth-child(even) .ap-ph { grid-column: 4 / -1; margin: 0 calc(var(--edge) * -1) 0 0; }
.ap-tx { grid-column: 1 / -1; margin-top: var(--s3); display: grid; gap: 6px; justify-items: start; }
.ap-n { font-size: clamp(24px, 6.4vw, 36px); letter-spacing: .1em; line-height: 1.4; }
.ap-by { font-size: 13px; color: var(--mist); }
.ap-st { display: flex; gap: 18px; font-family: var(--mono); font-size: 11px; letter-spacing: .12em; margin-top: 6px; }
.ap-i.more { display: none; }
.ap-list.open .ap-i.more { display: grid; }
.ap-all { justify-self: start; font: inherit; font-size: 14px; font-weight: 500; letter-spacing: .14em; background: none; border: 0; border-bottom: 1px solid currentColor; padding: 10px 0; cursor: pointer; color: var(--ink); }
.fan-cr { margin: 0 var(--edge); padding: var(--s6) 0 var(--s7); display: grid; justify-items: start; gap: 4px; }
.fan-cr span { font-size: 13px; color: var(--mist); }

/* Men: ink ground, blue-white text, navy accent. No black-and-gold */
body.man { --paper: #15181C; --ink: #E3E8EE; --mist: #8A93A0; --line: #2C323A; --shade: #1E2228; --bx: #9DB4D8; color-scheme: dark; }
body.man .tl.bx { color: var(--bx); }

/* ---------- Motion: memories surface slowly. Opacity + a short rise only ---------- */
.js [data-fade] > * { opacity: 0; transform: translate3d(0, 16px, 0); transition: opacity var(--t-text) var(--ease), transform var(--t-text) var(--ease); }
.js [data-fade].on > * { opacity: 1; transform: none; }
.js [data-fade].on > :nth-child(2) { transition-delay: .14s; }
.js [data-fade].on > :nth-child(3) { transition-delay: .28s; }
.js [data-fade].on > :nth-child(4) { transition-delay: .42s; }
/* Photos arrive a little after their words; box size is reserved by aspect-ratio, so nothing moves around them */
.js [data-ph] picture { opacity: 0; transform: translate3d(0, 12px, 0); transition: opacity var(--t-photo) var(--ease) .15s, transform var(--t-photo) var(--ease) .15s; }
.js [data-ph].on picture { opacity: 1; transform: none; }
.js .hero-ph picture, .js .hero-tx > *, .js .hero-v, .js .doors { opacity: 0; transition: opacity 1300ms var(--ease), transform 1300ms var(--ease); }
.js .hero-tx > *, .js .doors { transform: translate3d(0, 12px, 0); }
.js .ready .hero-ph picture, .js .ready .hero-tx > *, .js .ready .hero-v, .js .ready .doors { opacity: 1; transform: none; }
.js .ready .hero-tx > :nth-child(2) { transition-delay: .2s; }
.js .ready .hero-v { transition-delay: .45s; }
.js .ready .doors { transition-delay: .6s; }
@media (prefers-reduced-motion: reduce) {
  .js [data-fade] > *, .js [data-ph] picture, .js .hero-ph picture, .js .hero-tx > *, .js .hero-v, .js .doors { opacity: 1 !important; transform: none !important; transition: none !important; }
  .hd { transition: none; }
}

/* ---------- PC (provisional until the phone version is approved) ---------- */
@media (min-width: 900px) {
  :root { --edge: 5vw; --hd: 76px; --fs-body: 15px; --fs-display: clamp(40px, 4.4vw, 72px); --fs-poem: clamp(22px, 1.9vw, 30px); --fs-h2: clamp(28px, 2.6vw, 42px); }
  .wm { font-size: 25px; }
  .nav { display: flex; gap: 40px; }
  .menu-btn { display: none; }
  .hero { min-height: 640px; grid-template-columns: var(--edge) minmax(0, 33fr) minmax(0, 9fr) minmax(0, 55fr) 0; grid-template-rows: var(--hd) minmax(0, 1fr) auto auto var(--s5); }
  .hero-ph { grid-column: 4 / 6; grid-row: 2 / 6; }
  .hero-ph img { object-position: 74% 55%; }
  .hero-v { grid-column: 3; grid-row: 2; padding-top: var(--s5); font-size: 16px; }
  .hero-tx { grid-column: 2 / 4; grid-row: 3; padding: 0; gap: 14px; }
  .hero-tx .en { font-size: 19px; }
  .doors { grid-column: 2; grid-row: 4; margin: var(--s5) 0 0; grid-template-columns: 1fr; }
  .door { padding: 18px 0; }
  .door + .door { border-left: 0; padding-left: 0; border-top: 1px solid var(--line); }
  .intro { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; padding: var(--s7) var(--edge) var(--s8); }
  .intro .biz { grid-column: 1 / 5; }
  .poem { grid-column: 3 / 8; padding-left: 0; }
  .poem2 { grid-column: 6 / 10; justify-self: start; }
  .intro-body { grid-column: 3 / 7; }
  .card { grid-column: 10 / 13; width: auto; margin-right: 0; margin-top: calc(var(--s7) * -1); align-self: start; }
  .mem-hd { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; }
  .mem-hd > * { grid-column: 2 / 7; }
  .m { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; }
  .m1 .m-ph { grid-column: 1 / 8; margin-inline: calc(var(--edge) * -1) 0; }
  .m1 .m-h { grid-column: 9 / 12; align-self: end; }
  .m1 .m-f { grid-column: 9 / 12; }
  .m2 .m-ph { grid-column: 9 / 12; margin-right: 0; }
  .m2 .m-v { grid-column: 5 / 9; }
  .m2 .m-f { grid-column: 5 / 9; justify-self: end; }
  .m3 .m-ph { grid-column: 4 / 9; margin-inline: 0; }
  .m3 .m-h { grid-column: 9 / 12; margin-top: 0; align-self: end; }
  .m3 .m-f { grid-column: 9 / 12; justify-self: start; }
  .m4 .m-ph { grid-column: 2 / 5; margin-left: 0; }
  .m4 .m-h { grid-column: 5 / 9; }
  .m4 .m-f { grid-column: 5 / 9; }
  .m5 .m-ph { grid-column: 7 / 13; margin-right: calc(var(--edge) * -1); }
  .m5 .m-h { grid-column: 3 / 7; grid-row: 1; align-self: center; margin-top: 0; }
  .m5 .m-f { grid-column: 7 / 12; }
  .m6 .m-ph { grid-column: 3 / 6; }
  .m6 .m-v { grid-column: 6 / 8; }
  .m6 .m-f { grid-column: 6 / 8; }
  .m7 .m-ph { grid-column: 7 / 11; margin-right: 0; }
  .m7 .m-h { grid-column: 3 / 7; grid-row: 1; align-self: end; margin-top: 0; }
  .m7 .m-f { grid-column: 7 / 11; }
  .m8 .m-ph { grid-column: 2 / 9; margin-left: 0; }
  .m8 .m-h { grid-column: 9 / 12; grid-row: 1; align-self: end; margin-top: 0; }
  .m8 .m-f { grid-column: 9 / 12; }
  .how { padding: var(--s7) 0; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; }
  .how-hd { grid-column: 1 / 5; }
  .steps { grid-column: 6 / 12; margin-top: 0; }
  .how-note { grid-column: 6 / 12; }
  .end { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; padding-inline: var(--edge); }
  .ed { padding: 0; grid-template-columns: 1fr; }
  .is-fan { grid-column: 1 / 6; }
  .is-cr { grid-column: 7 / 13; margin-top: var(--s7); }
  .is-fan .ed-ph, .is-cr .ed-ph { grid-column: 1; margin: 0; }
  .is-fan .ed-tx, .is-cr .ed-tx { grid-column: 1; }
  .ft { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; }
  .ft-st { grid-column: 1 / 6; }
  .ft-nav { grid-column: 7 / 13; grid-template-columns: repeat(3, auto); justify-content: start; }
  .ft-sns { grid-column: 1 / 6; }
  .ft-c { grid-column: 1 / -1; }
  /* Creators */
  .sw { justify-content: flex-start; }
  .sw .lbl { margin-right: 24px; }
  .cr-hero { min-height: 620px; grid-template-columns: var(--edge) minmax(0, 40fr) minmax(0, 6fr) minmax(0, 51fr) 0; grid-template-rows: minmax(0, 1fr) auto auto var(--s5); }
  .cr-hero .hero-ph { grid-column: 4 / 6; grid-row: 1 / 5; }
  .cr-hero .hero-v { grid-column: 3; grid-row: 1; padding-top: var(--s5); font-size: 16px; }
  .cr-hero .hero-tx { grid-column: 2 / 4; grid-row: 2; padding: 0; }
  .cr-hero .cr-cta { grid-column: 2; grid-row: 3; padding: var(--s4) 0 0; }
  .cr-h1 { font-size: clamp(30px, 3vw, 50px); }
  .cr-sub { font-size: 15px; }
  .story { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; padding: var(--s8) var(--edge) var(--s7); }
  .story-hd { grid-column: 1 / 6; padding: 0; }
  .traits { grid-column: 8 / 12; margin-top: var(--s5); }
  .story-ph { grid-column: 1 / -1; margin-inline: calc(var(--edge) * -1); }
  .story-body { grid-column: 7 / 12; padding: 0; }
  .pers-hd { margin-left: calc(var(--edge) + (100vw - var(--edge) * 2) / 12); }
  .ps { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; align-items: end; }
  .ps + .ps { margin-top: var(--s7); }
  .ps-tx { margin-top: 0; }
  .ps1 .ps-ph { grid-column: 1 / 7; margin-inline: calc(var(--edge) * -1) 0; }
  .ps1 .ps-tx { grid-column: 8 / 12; }
  .ps2 .ps-ph { grid-column: 8 / 11; grid-row: 1; margin-right: 0; }
  .ps2 .ps-tx { grid-column: 3 / 7; grid-row: 1; }
  .ps3 .ps-ph { grid-column: 2 / 6; margin-left: 0; }
  .ps3 .ps-tx { grid-column: 7 / 11; align-self: center; }
  .ps4 .ps-ph { grid-column: 9 / 12; grid-row: 1; }
  .ps4 .ps-tx { grid-column: 4 / 8; grid-row: 1; }
  .ps5 .ps-ph { grid-column: 6 / 13; margin: 0 calc(var(--edge) * -1) 0 0; grid-row: 1; }
  .ps5 .ps-tx { grid-column: 2 / 6; grid-row: 1; }
  .ps6 .ps-ph { grid-column: 3 / 6; }
  .ps6 .ps-tx { grid-column: 7 / 11; }
  .pers-note { margin-left: calc(var(--edge) + (100vw - var(--edge) * 2) / 12 * 2); }
  .proc, .faq { padding: var(--s7) 0; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; }
  .proc .how-hd, .faq .how-hd { grid-column: 1 / 5; }
  .proc .steps, .faq-l { grid-column: 6 / 12; margin-top: 0; }
  .proc .how-note { grid-column: 6 / 12; }
  .make { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; padding: var(--s8) var(--edge) var(--s7); }
  .make-hd { grid-column: 1 / 6; padding: 0; }
  .make-b { grid-column: 7 / 11; grid-row: 1 / 3; margin-top: 0; }
  .make-l { grid-column: 1 / 6; margin: var(--s5) 0 0; align-self: start; }
  .make-c { grid-column: 2 / 5; margin-top: var(--s6); }
  .make-n { grid-column: 5 / 8; padding: 0; }
  .roles { grid-column: 1 / -1; margin: var(--s7) 0 0; grid-template-columns: 1fr 1fr; column-gap: 48px; }
  .closing { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; padding: var(--s7) var(--edge) var(--s8); align-items: end; }
  .closing-ph { grid-column: 1 / 8; margin-left: calc(var(--edge) * -1); aspect-ratio: 3 / 2; }
  .closing-ph img { object-position: 50% 50%; }
  .closing-tx { grid-column: 9 / 13; margin: 0; padding: 0; }
  /* Fans */
  .fan-hero { grid-template-columns: var(--edge) minmax(0, 40fr) minmax(0, 6fr) minmax(0, 51fr) 0; grid-template-rows: var(--hd) minmax(0, 1fr) auto auto var(--s5); }
  .fan-hero .hero-ph { grid-column: 4 / 6; grid-row: 2 / 6; }
  .fan-hero .hero-ph img { object-position: 74% 60%; }
  .fan-hero .hero-v { grid-column: 3; grid-row: 2; padding-top: var(--s5); font-size: 16px; }
  .fan-hero .hero-tx { grid-column: 2 / 4; grid-row: 3; padding: 0; }
  .fan-hero .cr-cta { grid-column: 2; grid-row: 4; padding: var(--s4) 0 0; }
  .fan-h1 { font-size: clamp(30px, 3vw, 50px); }
  .qz { margin-top: var(--s7); padding: var(--s6) 0 var(--s7); }
  .qz-sheet { max-width: 1040px; margin-inline: auto; }
  #qz-q { max-width: 620px; margin-inline: auto; }
  .qz-r { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; align-items: center; }
  .qz-r-ph { grid-column: 1 / 6; margin: 0; }
  .qz-r-tx { grid-column: 7 / 13; margin: 0; }
  .req, .ap { padding: var(--s7) 0; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; }
  .req-hd, .ap .how-hd { grid-column: 1 / 5; }
  .req-f, .req-done, .ap-empty, .ap-list { grid-column: 6 / 12; margin-top: 0; }
  .ap-i { grid-template-columns: 1fr 1fr; column-gap: 32px; align-items: end; }
  .ap-ph, .ap-i:nth-child(even) .ap-ph { grid-column: 1; margin: 0; }
  .ap-tx { grid-column: 2; margin: 0; }
  .rsv .steps { grid-column: 6 / 12; }
  .fan-cr { padding-left: calc((100vw - var(--edge) * 2) / 12 * 5 + 24px); }
}