/* Hallmark · macrostructure: split hero + entrance cards + list pricing (structure from benchmark: Kohaku Aimiya, HAKU)
 * tone: clean white editorial · anchor hue: pink 10.5 (#ff0066, accent only)
 * palette: white base, black (#181818) for text and solid surfaces, pink as accent; logo image keeps its own colours
 * type: Noto Sans JP 500/700/900, Latin labels in Arial 900
 * layout rule: no text is ever positioned over an image — media and text live in separate grid cells
 * status: MOCK — not published
 */

:root {
  --color-ink: oklch(20.5% 0 0);          /* #181818 */
  --color-paper: oklch(100% 0 0);
  --color-soft: oklch(97.4% 0 0);         /* section background */
  --color-media: oklch(95.8% 0.004 10);   /* image boxes, faint warm */
  --color-line: oklch(89.5% 0 0);
  --color-gray: oklch(45% 0 0);           /* body secondary, 7:1 on white */
  --color-on-ink: oklch(86% 0 0);
  --color-pink: oklch(63.9% 0.255 10.5);  /* #ff0066 — marks, rules, large text */
  --color-pink-text: oklch(56.1% 0.225 8.5); /* #d6005a — small pink text, 5.2:1 on white */
  --color-pink-tint: oklch(97% 0.02 10);

  --font-ui: "Noto Sans JP", "Hiragino Sans", "Helvetica Neue", Arial, sans-serif;
  --font-latin: Arial, "Helvetica Neue", "Noto Sans JP", sans-serif;

  --space-2xs: 4px; --space-xs: 8px; --space-sm: 12px; --space-md: 16px;
  --space-lg: 24px; --space-xl: 40px; --space-2xl: 64px; --space-3xl: 96px;

  --text-xs: 12px; --text-sm: 14px; --text-md: 16px; --text-lg: 19px;
  --text-h2: clamp(24px, 2.6vw, 32px);
  --text-h1: clamp(28px, 3.4vw, 42px);
  --text-wordmark: clamp(52px, 8vw, 116px);

  --clip-sm: polygon(0 0, calc(100% - 10px) 0, 100% 10px, 100% 100%, 10px 100%, 0 calc(100% - 10px));
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --dur-fast: 160ms;
  --dur-mid: 300ms;
  --wrap: 1120px;
  --gutter: 5vw;
  --header-h: 68px;
  --edge: max(var(--gutter), calc((100% - var(--wrap)) / 2));
}

*, *::before, *::after { box-sizing: border-box; }
html, body { overflow-x: clip; }
html { scroll-padding-top: calc(var(--header-h) + 16px); }
body { margin: 0; background: var(--color-paper); color: var(--color-ink); font: 500 var(--text-md)/1.9 var(--font-ui); -webkit-font-smoothing: antialiased; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
h1, h2, h3, p, ul, ol, dl { margin: 0; }
h1, h2, h3 { font-style: normal; line-height: 1.35; font-weight: 900; overflow-wrap: anywhere; min-width: 0; }
h1, h2, h3, summary { text-wrap: balance; }
p, li, dd { text-wrap: pretty; }
:focus-visible { outline: 3px solid var(--color-pink); outline-offset: 3px; }
::selection { background: var(--color-pink); color: var(--color-paper); }

.wrap { width: min(100% - var(--gutter) * 2, var(--wrap)); margin-inline: auto; }
.label { font: 900 var(--text-xs)/1 var(--font-latin); letter-spacing: .16em; color: var(--color-pink-text); }
.label--light { color: var(--color-pink); }

.mock-tag { flex: none; border: 1px solid var(--color-ink); font: 900 10px/1 var(--font-latin); letter-spacing: .14em; padding: 4px 6px; white-space: nowrap; }

/* ---------- header ---------- */
.site-header { position: sticky; top: 0; z-index: 40; height: var(--header-h); display: flex; align-items: center; gap: var(--space-lg); padding-left: var(--edge); background: var(--color-paper); border-bottom: 1px solid var(--color-line); }
.brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; font: 900 15px/1 var(--font-latin); letter-spacing: .04em; white-space: nowrap; }
.brand img { width: 40px; height: 40px; object-fit: contain; }
.site-nav { display: flex; align-items: center; gap: 28px; margin-left: auto; font-size: 13px; font-weight: 700; }
.site-nav a { position: relative; text-decoration: none; white-space: nowrap; padding: 8px 0; transition: color var(--dur-fast) var(--ease-out); }
.site-nav a::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--color-pink); transform: scaleX(0); transform-origin: left; transition: transform var(--dur-mid) var(--ease-out); }
.site-nav a:hover { color: var(--color-pink-text); }
.site-nav a:hover::after, .site-nav a[aria-current="page"]::after { transform: scaleX(1); }
.menu-btn { display: none; margin-left: auto; align-self: stretch; width: var(--header-h); border: 0; background: var(--color-ink); color: var(--color-paper); cursor: pointer; place-content: center; gap: 5px; font: 900 10px/1 var(--font-latin); letter-spacing: .14em; }
.menu-btn i { display: block; width: 20px; height: 2px; margin: 0 auto; background: var(--color-pink); }
.menu-btn:hover { background: oklch(30% 0 0); }
.menu-panel { display: none; }

/* ---------- buttons ---------- */
.btn { display: inline-flex; align-items: center; gap: var(--space-sm); white-space: nowrap; text-decoration: none; background: var(--color-ink); color: var(--color-paper); font: 700 var(--text-sm)/1 var(--font-ui); letter-spacing: .04em; padding: 17px 26px; clip-path: var(--clip-sm); transition: background-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out); }
.btn:hover { background: var(--color-pink); }
.btn:active { transform: translateY(1px); }
.btn--line { background: var(--color-paper); color: var(--color-ink); box-shadow: inset 0 0 0 1px var(--color-ink); clip-path: none; }
.btn--line:hover { background: var(--color-ink); color: var(--color-paper); }
.btn--accent { background: var(--color-pink); color: var(--color-paper); }
.btn--accent:hover { background: var(--color-paper); color: var(--color-ink); }
.arrow { display: inline-block; flex: none; width: 16px; height: 2px; background: currentColor; position: relative; }
.arrow::after { content: ""; position: absolute; right: 0; top: -3px; width: 7px; height: 7px; border-top: 2px solid currentColor; border-right: 2px solid currentColor; transform: rotate(45deg); }

/* ---------- vertical rail (Mika-style, its own column) ---------- */
.vrail { writing-mode: vertical-rl; margin: 0; padding: var(--space-lg) 0; font: 900 clamp(13px, 1.1vw, 15px)/1 var(--font-latin); letter-spacing: .4em; color: var(--color-pink-text); white-space: nowrap; border-left: 1px solid var(--color-line); display: flex; align-items: center; justify-content: center; user-select: none; }

/* ---------- hero ---------- */
.hero { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr) 56px; min-height: calc(100svh - var(--header-h)); padding-left: var(--edge); border-bottom: 1px solid var(--color-line); }
.hero__text { display: grid; align-content: center; gap: var(--space-lg); padding: var(--space-2xl) var(--space-xl) var(--space-2xl) 0; min-width: 0; }
.wordmark { font: 900 var(--text-wordmark)/1.15 var(--font-latin); letter-spacing: -.04em; }
.wordmark span { display: block; }
.wordmark span:last-child { color: var(--color-pink); }
.hero__catch { font-size: clamp(20px, 2vw, 26px); font-weight: 900; line-height: 1.5; }
.hero__sub { color: var(--color-gray); max-width: 30rem; }
.hero__actions { display: flex; flex-wrap: wrap; gap: var(--space-sm); padding-top: var(--space-xs); }
.hero__visual { display: grid; place-items: center; padding: var(--space-xl); background: var(--color-soft); min-width: 0; }
.hero__visual img { width: min(100%, 440px); }

/* ---------- status ---------- */
.status { padding: var(--space-xl) 0; border-bottom: 1px solid var(--color-line); }
.status__inner { width: min(100% - var(--gutter) * 2, var(--wrap)); margin-inline: auto; display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: var(--space-sm) var(--space-xl); }
.status__title { display: grid; gap: 6px; font-size: var(--text-sm); }
.status__months { display: flex; flex-wrap: wrap; gap: var(--space-sm); padding: 0; list-style: none; }
.status__months li { display: inline-flex; align-items: center; gap: var(--space-xs); padding: 8px 16px; border: 1px solid var(--color-line); font-size: var(--text-sm); font-weight: 700; white-space: nowrap; }
.status__months b { color: var(--color-pink); font-size: var(--text-lg); line-height: 1; }
.status__note { grid-column: 2; font-size: var(--text-xs); color: var(--color-gray); }

/* ---------- sections & headings ---------- */
.section { padding: var(--space-3xl) 0; }
.section--soft { background: var(--color-soft); }
.heading { display: grid; gap: 12px; margin-bottom: var(--space-xl); }
.heading__en { overflow: hidden; font: 900 clamp(40px, 6vw, 80px)/1.12 var(--font-latin); letter-spacing: -.04em; color: var(--color-ink); }
.heading__en span { display: inline-block; }
.heading__en span::after { content: ""; display: inline-block; width: .16em; height: .16em; margin-left: .08em; background: var(--color-pink); }
.heading h2 { display: flex; align-items: center; gap: 12px; font-size: clamp(15px, 1.4vw, 18px); color: var(--color-gray); }
.heading h2::before { content: ""; flex: none; width: 32px; height: 3px; background: var(--color-pink); }

/* ---------- doors (entrances) ---------- */
.doors { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-lg); }
.door { display: grid; grid-template-rows: auto 1fr; text-decoration: none; background: var(--color-paper); border: 1px solid var(--color-ink); transition: border-color var(--dur-fast) var(--ease-out), transform var(--dur-mid) var(--ease-out); }
.door:hover { border-color: var(--color-pink); transform: translateY(-3px); }
.door__media { aspect-ratio: 16 / 9; display: grid; place-items: center; overflow: hidden; background: var(--color-media); border-bottom: 1px solid var(--color-ink); }
.door__media img { transition: transform 700ms var(--ease-out); }
.door:hover .door__media img { transform: scale(1.04); }
.door--creator .door__media img { width: 100%; height: 100%; object-fit: cover; object-position: 60% 18%; }
.door--business .door__media img { width: 46%; }
.door__body { display: grid; align-content: start; gap: var(--space-sm); padding: var(--space-lg) var(--space-lg) var(--space-xl); }
.door h3 { font-size: clamp(21px, 2vw, 26px); }
.door__summary { font-size: var(--text-sm); color: var(--color-gray); }
.door__list { display: grid; padding: 0; list-style: none; border-top: 1px solid var(--color-line); margin-top: var(--space-xs); }
.door__list li { display: flex; justify-content: space-between; gap: var(--space-md); padding: 11px 0; border-bottom: 1px solid var(--color-line); font-size: var(--text-sm); font-weight: 700; }
.door__yen { white-space: nowrap; }
.door .btn { justify-self: start; margin-top: var(--space-sm); }
.door:hover .btn { background: var(--color-pink); }

/* ---------- works ---------- */
.works { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-lg); }
.work { display: grid; grid-template-rows: auto 1fr; background: var(--color-paper); clip-path: polygon(0 0, 100% 0, 100% 100%, 22px 100%, 0 calc(100% - 22px)); transition: transform var(--dur-mid) var(--ease-out); }
.work:hover { transform: translateY(-6px); }
.work__media { position: relative; isolation: isolate; overflow: hidden; aspect-ratio: 16 / 9; display: flex; flex-direction: column; justify-content: space-between; align-items: flex-start; padding: 16px 20px; background: var(--color-ink); border-bottom: 3px solid var(--color-pink); }
.work__media::before { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(circle, oklch(100% 0 0 / .14) 1px, transparent 1.3px) 0 0 / 14px 14px; }
.work__media::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(120deg, transparent 40%, oklch(63.9% 0.255 10.5 / .22)); opacity: 0; transition: opacity var(--dur-mid) var(--ease-out); }
.work:hover .work__media::after { opacity: 1; }
.work__tag { font: 900 11px/1 var(--font-latin); letter-spacing: .14em; color: var(--color-on-ink); }
.work__tag::before { content: "[ "; } .work__tag::after { content: " ]"; }
.work__tag--creator { color: var(--color-pink); }
.work__kind { font: 900 clamp(24px, 2.6vw, 34px)/1.1 var(--font-latin); letter-spacing: -.03em; color: transparent; -webkit-text-stroke: 1px oklch(100% 0 0 / .75); white-space: nowrap; transition: transform 600ms var(--ease-out); }
.work:hover .work__kind { transform: translateX(6px); }
.work__ph { position: absolute; right: 20px; top: 16px; font-size: 11px; color: var(--color-on-ink); }
.work__body { display: grid; align-content: start; gap: 8px; padding: 20px 22px 24px; }
.work h3 { font-size: 17px; }
.work__desc { font-size: var(--text-sm); color: var(--color-gray); }
.work__role { font-size: var(--text-xs); font-weight: 700; }

/* ---------- page head (inner pages) ---------- */
.pagehead { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .85fr) 56px; padding-left: var(--edge); border-bottom: 1px solid var(--color-line); }
.pagehead__text { display: grid; align-content: center; gap: var(--space-md); padding: var(--space-3xl) var(--space-xl) var(--space-3xl) 0; min-width: 0; }
.pagehead h1 { font-size: var(--text-h1); }
.pagehead h1::after { content: ""; display: block; width: 40px; height: 3px; margin-top: 16px; background: var(--color-pink); }
.pagehead__name { font-size: var(--text-xs); font-weight: 700; letter-spacing: .06em; color: var(--color-gray); }
.pagehead__lead { max-width: 32rem; }
.pagehead__media { display: grid; place-items: center; overflow: hidden; background: var(--color-media); min-width: 0; min-height: 360px; }
.pagehead--creator .pagehead__media img { width: 100%; height: 100%; object-fit: cover; object-position: 60% 20%; }
.pagehead--business .pagehead__media img { width: min(60%, 320px); }
.pagehead--doc { grid-template-columns: minmax(0, 1fr); padding-left: 0; background: var(--color-soft); }
.pagehead--doc .pagehead__text { width: min(100% - var(--gutter) * 2, 820px); margin-inline: auto; padding: var(--space-2xl) 0; }

/* ---------- price list ---------- */
.prices { display: grid; border-top: 1px solid var(--color-ink); }
.price { display: grid; grid-template-columns: 64px minmax(0, 1fr) auto; gap: var(--space-xs) var(--space-xl); align-items: start; padding: var(--space-lg) 0; border-bottom: 1px solid var(--color-line); }
.price__no { font: 900 22px/1.3 var(--font-latin); color: var(--color-pink); }
.price h3 { font-size: var(--text-lg); }
.price__desc { font-size: var(--text-sm); color: var(--color-gray); margin-top: 4px; }
.price__chips { display: flex; flex-wrap: wrap; gap: 4px 18px; margin-top: 10px; padding: 0; list-style: none; }
.price__chips li { font-size: var(--text-xs); font-weight: 700; color: var(--color-gray); white-space: nowrap; }
.price__chips li::before { content: ""; display: inline-block; width: 6px; height: 6px; margin-right: 7px; background: var(--color-pink); transform: rotate(45deg) translateY(-2px); }
.price__yen { text-align: right; font: 900 24px/1.3 var(--font-latin); white-space: nowrap; }
.price__yen small { display: block; margin-top: 4px; font: 700 var(--text-xs)/1.5 var(--font-ui); color: var(--color-gray); }
.price--later { color: var(--color-gray); }
.price--later .price__no { color: var(--color-line); }
.notes { display: grid; gap: 6px; margin-top: var(--space-lg); padding: 0; list-style: none; font-size: var(--text-xs); color: var(--color-gray); }
.notes li { padding-left: 1.2em; text-indent: -1.2em; }
.notes li::before { content: "※"; margin-right: .2em; }
.notes a { color: var(--color-ink); text-underline-offset: 3px; }

/* ---------- flow ---------- */
.flow { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-lg); padding: 0; list-style: none; counter-reset: step; }
.flow li { counter-increment: step; display: grid; gap: 6px; align-content: start; padding: var(--space-lg); background: var(--color-paper); border-top: 3px solid var(--color-ink); }
.flow li::before { content: counter(step, decimal-leading-zero); font: 900 26px/1 var(--font-latin); color: var(--color-pink); }
.flow b { font-size: 17px; }
.flow span { font-size: var(--text-sm); color: var(--color-gray); }

/* ---------- faq ---------- */
.faq { border-top: 1px solid var(--color-ink); }
.faq details { border-bottom: 1px solid var(--color-line); }
.faq summary { cursor: pointer; list-style: none; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: var(--space-sm); align-items: baseline; padding: 20px 0; font-weight: 700; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::before { content: "Q"; font: 900 18px/1 var(--font-latin); color: var(--color-pink); }
.faq summary::after { content: "+"; font: 900 20px/1 var(--font-latin); }
.faq details[open] summary::after { content: "−"; }
.faq details p { padding: 0 0 22px 30px; font-size: var(--text-sm); color: var(--color-gray); }

/* ---------- cta ---------- */
.cta { padding: var(--space-3xl) 0; background: var(--color-ink); color: var(--color-paper); }
.cta__inner { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--space-xl); align-items: center; }
.cta h2 { font-size: var(--text-h2); margin-top: 10px; }

/* ---------- footer ---------- */
.site-footer { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--space-lg) var(--space-xl); align-items: center; padding: var(--space-2xl) var(--edge) var(--space-xl); background: var(--color-ink); color: var(--color-paper); border-top: 3px solid var(--color-pink); }
.brand--foot img { width: 48px; height: 48px; background: var(--color-paper); padding: 4px; }
.foot-links { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px 28px; padding: 0; list-style: none; font-size: 13px; font-weight: 700; }
.foot-links a { text-decoration: none; white-space: nowrap; color: var(--color-on-ink); }
.foot-links a:hover { color: var(--color-paper); text-decoration: underline; text-underline-offset: 4px; }
.foot-mail { grid-column: 1 / -1; font-size: var(--text-sm); color: var(--color-on-ink); }
.foot-mail a { color: var(--color-paper); white-space: nowrap; text-underline-offset: 4px; }
.copy { grid-column: 1 / -1; font: 700 11px/1 var(--font-latin); letter-spacing: .14em; color: var(--color-on-ink); }

/* ---------- document pages ---------- */
.doc { padding: var(--space-2xl) 0 var(--space-3xl); }
.doc__inner { width: min(100% - var(--gutter) * 2, 820px); margin-inline: auto; display: grid; gap: var(--space-lg); }
.doc__lead { font-weight: 700; }
.doc__group { margin-top: var(--space-md); font: 900 var(--text-xs)/1 var(--font-ui); letter-spacing: .12em; color: var(--color-pink-text); }
.doc__block { display: grid; gap: var(--space-sm); padding: 26px 30px; border: 1px solid var(--color-line); }
.doc__block h2 { display: flex; align-items: baseline; gap: 12px; font-size: 18px; }
.doc__block h2 .no { font: 900 15px/1 var(--font-latin); color: var(--color-pink); }
.doc__block p, .doc__block li { font-size: var(--text-sm); }
.doc__block ul, .doc__block ol { padding-left: 1.3em; display: grid; gap: 6px; }
.doc__block a, .legal a { color: var(--color-ink); text-underline-offset: 3px; }
.legal { border-top: 1px solid var(--color-ink); }
.legal div { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: var(--space-lg); padding: 18px 0; border-bottom: 1px solid var(--color-line); }
.legal dt { font-weight: 900; font-size: var(--text-sm); }
.legal dd { margin: 0; font-size: var(--text-sm); }
.doc__date { font-size: var(--text-xs); color: var(--color-gray); }
.todo { display: inline-block; margin-left: 6px; padding: 2px 8px; background: var(--color-pink); color: var(--color-paper); font: 900 11px/1.6 var(--font-ui); white-space: nowrap; }

/* ---------- responsive ---------- */
@media (min-width: 961px) {
  .site-header { padding-right: var(--edge); }
}
@media (max-width: 1080px) {
  .site-nav { gap: 20px; font-size: 12px; }
}
@media (max-width: 960px) {
  .site-nav { display: none; }
  .menu-btn { display: grid; }
  .menu-panel.open { display: grid; position: fixed; top: var(--header-h); left: 0; right: 0; z-index: 39; background: var(--color-paper); border-bottom: 1px solid var(--color-ink); padding: var(--space-sm) var(--gutter) var(--space-lg); }
  .menu-panel a { padding: 14px 0; border-bottom: 1px solid var(--color-line); text-decoration: none; font-weight: 700; white-space: nowrap; }
  .hero { grid-template-columns: minmax(0, 1fr); min-height: 0; }
  .hero { padding-left: 0; }
  .hero__visual { order: -1; padding: var(--space-xl) var(--gutter); }
  .hero__visual img { width: min(56%, 300px); }
  .hero__text { padding: var(--space-2xl) var(--gutter); }
  .vrail { display: none; }
  .doors { grid-template-columns: minmax(0, 1fr); }
  .works { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pagehead { grid-template-columns: minmax(0, 1fr); padding-left: 0; }
  .pagehead__media { order: -1; min-height: 0; aspect-ratio: 16 / 9; }
  .pagehead--business .pagehead__media { aspect-ratio: auto; padding: var(--space-xl) 0; }
  .pagehead--business .pagehead__media img { width: min(40%, 220px); }
  .pagehead__text { padding: var(--space-2xl) var(--gutter); }
  .flow { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 600px) {
  :root { --gutter: 20px; --header-h: 60px; }
  .brand img { width: 34px; height: 34px; }
  .section { padding: var(--space-2xl) 0; }
  .hero__actions .btn { width: 100%; justify-content: space-between; }
  .status__inner { grid-template-columns: minmax(0, 1fr); }
  .status__note { grid-column: 1; }
  .works { grid-template-columns: minmax(0, 1fr); }
  .price { grid-template-columns: 36px minmax(0, 1fr); gap: 6px var(--space-sm); }
  .price__no { font-size: 18px; }
  .price__yen { grid-column: 2; text-align: left; font-size: 21px; }
  .flow { grid-template-columns: minmax(0, 1fr); }
  .cta__inner { grid-template-columns: minmax(0, 1fr); }
  .cta .btn { justify-self: start; }
  .site-footer { grid-template-columns: minmax(0, 1fr); }
  .foot-links { justify-content: flex-start; }
  .doc__block { padding: 20px 18px; }
  .legal div { grid-template-columns: minmax(0, 1fr); gap: 4px; }
}
@media (prefers-reduced-motion: reduce) {
  .door, .site-nav a::after, .btn { transition: none; }
  .door:hover { transform: none; }
}

/* ---------- MEDISIA-derived accents ---------- */
.label--bracket::before { content: "[ "; } .label--bracket::after { content: " ]"; }
body::before { content: ""; position: fixed; left: 0; top: 0; z-index: 70; width: 100%; height: 3px; background: var(--color-pink); transform: scaleX(var(--progress, 0)); transform-origin: left; pointer-events: none; }
.site-header { transition: box-shadow var(--dur-mid) var(--ease-out); }
.site-header.is-scrolled { box-shadow: 0 6px 24px oklch(20.5% 0 0 / .08); }
.btn .arrow { transition: transform var(--dur-mid) var(--ease-out); }
.btn:hover .arrow, a:hover > .btn .arrow { transform: translateX(4px); }

/* marquee */
.marquee { overflow: hidden; border-bottom: 1px solid var(--color-line); background: var(--color-paper); padding: 18px 0; }
.marquee__track { display: flex; width: max-content; animation: marquee 48s linear infinite; }
.marquee span { display: flex; align-items: center; font: 900 clamp(16px, 1.6vw, 20px)/1 var(--font-latin); letter-spacing: .02em; text-transform: uppercase; white-space: nowrap; }
.marquee i { display: inline-block; width: 8px; height: 8px; margin: 0 28px; background: var(--color-pink); transform: rotate(45deg); }
@keyframes marquee { to { transform: translateX(-50%); } }

/* price row hover */
.price { position: relative; transition: background-color var(--dur-fast) var(--ease-out); }
.price::before { content: ""; position: absolute; left: -16px; top: var(--space-lg); bottom: var(--space-lg); width: 3px; background: var(--color-pink); transform: scaleY(0); transition: transform var(--dur-mid) var(--ease-out); }
.price:not(.price--later):hover::before { transform: scaleY(1); }

/* ---------- motion (only when JS adds html.motion) ---------- */
html.motion [data-reveal] { opacity: 0; transform: translateY(28px); transition: opacity 700ms var(--ease-out), transform 700ms var(--ease-out); transition-delay: calc(var(--d, 0) * 90ms); }
html.motion [data-reveal].is-in { opacity: 1; transform: none; }
html.motion .heading[data-reveal] { transform: none; opacity: 1; }
html.motion .heading[data-reveal] .heading__en span { transform: translateY(105%); transition: transform 800ms var(--ease-out); }
html.motion .heading[data-reveal] h2 { opacity: 0; transition: opacity 600ms var(--ease-out) 250ms; }
html.motion .heading[data-reveal].is-in .heading__en span { transform: none; }
html.motion .heading[data-reveal].is-in h2 { opacity: 1; }

@keyframes rise { from { transform: translateY(105%); } to { transform: none; } }
@keyframes fadeUp { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
@keyframes float { from { transform: translateY(0) rotate(0deg); } to { transform: translateY(-12px) rotate(-1.5deg); } }
@keyframes settle { from { transform: scale(1.06); } to { transform: scale(1); } }
.wordmark span { overflow: hidden; }
.wordmark b { display: inline-block; font-weight: inherit; }
html.motion .wordmark b { animation: rise 900ms var(--ease-out) both; }
html.motion .wordmark span:last-child b { animation-delay: 120ms; }
html.motion .hero__catch, html.motion .hero__sub, html.motion .hero__actions, html.motion .hero__text > .label { animation: fadeUp 700ms var(--ease-out) both; }
html.motion .hero__text > .label { animation-delay: 0ms; }
html.motion .hero__catch { animation-delay: 320ms; }
html.motion .hero__sub { animation-delay: 420ms; }
html.motion .hero__actions { animation-delay: 520ms; }
html.motion .hero__visual img { animation: fadeUp 900ms var(--ease-out) 200ms both, float 5s ease-in-out 1.1s infinite alternate; }
html.motion .pagehead__text > * { animation: fadeUp 700ms var(--ease-out) both; }
html.motion .pagehead__text > :nth-child(2) { animation-delay: 80ms; }
html.motion .pagehead__text > :nth-child(3) { animation-delay: 160ms; }
html.motion .pagehead__text > :nth-child(4) { animation-delay: 240ms; }
html.motion .pagehead__media img { animation: settle 1400ms var(--ease-out) both; }

@media (prefers-reduced-motion: reduce) {
  .marquee__track { animation: none; }
  .work, .work__kind, .door__media img, .btn .arrow, .price::before { transition: none; }
  .work:hover, .work:hover .work__kind, .door:hover .door__media img { transform: none; }
}

@media (max-width: 400px) {
  .site-header { gap: var(--space-sm); }
  .brand { gap: 8px; font-size: 13px; }
  .brand img { width: 30px; height: 30px; }
  .mock-tag { font-size: 9px; padding: 3px 4px; letter-spacing: .08em; }
}

/* stagger index for reveal (kept out of inline style attributes so CSP can stay strict) */
.d0 { --d: 0; } .d1 { --d: 1; } .d2 { --d: 2; } .d3 { --d: 3; }