@import url('https://fonts.googleapis.com/css2?family=Shippori+Antique+B1&family=Noto+Sans+JP:wght@400;500;700;900&family=JetBrains+Mono:wght@400;500;700&display=swap');

:root {
  --ink: #0c1524;
  --surface: #142338;
  --paper: #f3efe4;
  --garnet: #8e1f2b;
  --garnet-deep: #5e1420;
  --brass: #c8a049;
  --ash: #9aa5b1;
  --text: var(--paper);
  --text-muted: #b3bbc4;
  --text-on-light: var(--ink);
  --muted-on-light: #4d5661;
  --line: #435064;
  --line-light: #c4bdaf;
  --error: #ffb7b7;
  --error-on-light: #8e1f2b;
  --success: #b7d4c1;
  --focus: var(--brass);
  --pera-508: 'Shippori Antique B1', 'Noto Sans JP', sans-serif;
  --pera-3f2: 'Noto Sans JP', sans-serif;
  --pera-ace: 'JetBrains Mono', 'Noto Sans JP', monospace;
  --weight-regular: 400;
  --weight-medium: 500;
  --weight-bold: 700;
  --weight-heavy: 900;
  --text-xs: clamp(.75rem, .73rem + .1vw, .8125rem);
  --text-sm: clamp(.875rem, .84rem + .16vw, 1rem);
  --text-base: clamp(1rem, .965rem + .16vw, 1.125rem);
  --text-lg: clamp(1.125rem, 1.03rem + .42vw, 1.4375rem);
  --text-xl: clamp(1.375rem, 1.17rem + .92vw, 2rem);
  --text-2xl: clamp(1.625rem, 1.2rem + 1.9vw, 3rem);
  --text-3xl: clamp(2rem, 1.3rem + 3vw, 4.5rem);
  --text-4xl: clamp(2.375rem, 1.2rem + 5vw, 6.5rem);
  --text-hero: clamp(2.625rem, 1.15rem + 6.4vw, 8rem);
  --leading-body: 1.95;
  --leading-heading: 1.4;
  --leading-display: 1.22;
  --tracking-display: -.045em;
  --tracking-label: .075em;
  --space-1: .25rem;
  --space-2: .5rem;
  --space-3: .75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-20: 5rem;
  --space-24: 6rem;
  --space-32: 8rem;
  --gutter: clamp(24px, 4.45vw, 64px);
  --shell-max: 1280px;
  --measure: 44rem;
  --measure-narrow: 34rem;
  --section-space: clamp(64px, 9vw, 128px);
  --block-gap: clamp(2rem, 4vw, 4rem);
  --header-height: 6rem;
  --control-min: 44px;
  --rule-width: 2px;
  --radius: 0;
  --document-shadow: 0 20px 60px rgb(0 0 0 / .2);
  --duration-fast: 120ms;
  --duration-control: 160ms;
  --duration-base: 200ms;
  --duration-reveal: 900ms;
  --duration-wipe: 1150ms;
  --duration-stamp: 700ms;
  --stagger-line: 140ms;
  --stagger-image: 220ms;
  --ease-standard: cubic-bezier(.2, .65, .3, 1);
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --ease-wipe: cubic-bezier(.76, 0, .24, 1);
  --ease-stamp: cubic-bezier(.2, .85, .25, 1);
  --z-header: 30;
  --z-chat: 50;
  --z-consent: 70;
  --z-dialog: 90;
  --z-skip: 100;
  --consent-offset: 0px;
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: calc(var(--header-height) + 1.5rem); }
body { margin: 0; min-width: 0; background: var(--ink); color: var(--text); font-family: var(--pera-3f2); font-size: var(--text-base); font-weight: 400; line-height: var(--leading-body); -webkit-font-smoothing: antialiased; }
h1, h2, h3, h4, h5, h6, p, figure, blockquote, dl, dd { margin: 0; }
h1, h2, h3, h4, h5, h6 { font-family: var(--pera-508); font-weight: 400; line-height: var(--leading-heading); letter-spacing: -.025em; line-break: strict; overflow-wrap: anywhere; text-wrap: pretty; }
h1 { font-size: var(--text-4xl); }
h2 { font-size: var(--text-3xl); }
h3 { font-size: var(--text-2xl); }
h4 { font-size: var(--text-xl); }
h5, h6 { font-size: var(--text-lg); }
p, li, dd, dt, a, label, button, summary { overflow-wrap: anywhere; }
a { color: inherit; text-underline-offset: .25em; text-decoration-thickness: 1px; }
button, input, select, textarea { margin: 0; font: inherit; color: inherit; border-radius: 0; }
button, select { text-transform: none; }
button { cursor: pointer; }
button, [type='button'], [type='submit'] { -webkit-appearance: button; }
button, a, input, select, textarea, summary { -webkit-tap-highlight-color: rgb(200 160 73 / .2); }
button:disabled, input:disabled, select:disabled, textarea:disabled { cursor: not-allowed; }
textarea { resize: vertical; }
fieldset { margin: 0; padding: 0; min-width: 0; border: 0; }
legend { max-width: 100%; padding: 0; }
img, picture, video, canvas { display: block; max-width: 100%; }
img, video { height: auto; }
iframe { max-width: 100%; border: 0; }
svg { max-width: 100%; }
ul, ol { padding-inline-start: 1.4em; }
nav ul, nav ol { list-style: none; margin: 0; padding: 0; }
table { width: 100%; border-collapse: collapse; border-spacing: 0; }
th { text-align: start; font-weight: 500; }
hr { margin: 0; border: 0; border-top: var(--rule-width) solid var(--brass); }
address { font-style: normal; }
small { font-size: var(--text-sm); }
strong, b { font-weight: 700; }
code, kbd, samp, pre { font-family: var(--pera-ace); }
code { overflow-wrap: anywhere; font-size: .875em; }
pre { max-width: 100%; overflow-x: auto; padding: 1.25rem; background: var(--surface); white-space: pre; }
sub, sup { font-size: .75em; line-height: 0; position: relative; vertical-align: baseline; }
sup { top: -.5em; }
sub { bottom: -.25em; }
[hidden] { display: none !important; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 4px; }
:target { scroll-margin-block-start: calc(var(--header-height) + 1.5rem); }
::selection { background: var(--garnet); color: var(--paper); }

.container, .shell { width: min(calc(100% - var(--gutter) * 2), var(--shell-max)); margin-inline: auto; }
.container--narrow { max-width: var(--measure); }
.container--wide { max-width: 1440px; }
.section { padding-block: var(--section-space); border-block-start: var(--rule-width) solid var(--brass); }
.section--ink { background: var(--ink); color: var(--paper); }
.section--surface { background: var(--surface); color: var(--paper); }
.section--paper, .on-light { --text: var(--ink); --text-muted: var(--muted-on-light); --line: var(--line-light); --error: var(--error-on-light); --focus: var(--garnet); background: var(--paper); color: var(--ink); color-scheme: light; }
.section--garnet { background: var(--garnet); color: var(--paper); --line: #b7656f; --text-muted: #ead2cf; }
.stack { display: flex; flex-direction: column; gap: var(--stack-space, 1.5rem); }
.cluster { display: flex; flex-wrap: wrap; align-items: center; gap: var(--cluster-space, 1rem); }
.split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--block-gap); }
.grid { display: grid; grid-template-columns: repeat(var(--columns, 2), minmax(0, 1fr)); gap: var(--block-gap); }
.stack > *, .cluster > *, .split > *, .grid > *, .container > *, .shell > * { min-width: 0; }
.flow > * + * { margin-block-start: var(--flow-space, 1.5rem); }
.align-start { align-items: start; }
.align-end { align-items: end; }
.measure { max-width: var(--measure); }
.measure--narrow { max-width: var(--measure-narrow); }
.full-width { width: 100%; }
.rule { border-block-start: var(--rule-width) solid var(--brass); }
.hairline { border-block-start: 1px solid var(--brass); }
.eyebrow, .meta, .label { font-family: var(--pera-ace); font-size: var(--text-xs); font-weight: 500; line-height: 1.65; letter-spacing: var(--tracking-label); text-transform: uppercase; }
.eyebrow { margin-block-end: 1.5rem; color: var(--text-muted); }
.display { font-family: var(--pera-508); font-size: var(--text-hero); line-height: var(--leading-display); letter-spacing: var(--tracking-display); overflow-wrap: anywhere; }
.lead { font-size: var(--text-lg); line-height: 1.9; max-width: var(--measure); }
.muted { color: var(--text-muted); }
.mono, .price, time { font-family: var(--pera-ace); font-variant-numeric: tabular-nums; }
.prose { max-width: var(--measure); hanging-punctuation: first allow-end; }
.prose > * + * { margin-block-start: 1.5rem; }
.prose :is(h2, h3, h4) { margin-block-start: 3rem; margin-block-end: 1rem; }
.prose > :first-child { margin-block-start: 0; }
.prose h2 { font-size: var(--text-2xl); }
.prose h3 { font-size: var(--text-xl); }
.prose li + li { margin-block-start: .75rem; }
.prose ul, .prose ol { margin-block-end: 1.5rem; }
.prose li::marker { color: var(--text-muted); }
.prose blockquote { padding: 1.5rem 0 1.5rem 1.5rem; border-inline-start: 2px solid var(--brass); font-size: var(--text-lg); }
.prose dt { margin-block-start: 1.5rem; font-weight: 700; }
.prose dd { margin-block-start: .5rem; color: var(--text-muted); }
.prose figure { margin-block: 2.5rem; }
figcaption { padding-block-start: .875rem; color: var(--text-muted); font-size: var(--text-sm); line-height: 1.75; }
.media { margin: 0; min-width: 0; }
.media img { width: 100%; object-fit: cover; }
.media--landscape img { aspect-ratio: 3 / 2; }
.media--square img { aspect-ratio: 1; }
.media--portrait img { aspect-ratio: 4 / 5; }
.site0b1 { max-width: 100%; overflow-x: auto; overscroll-behavior-inline: contain; scrollbar-color: var(--brass) var(--surface); }
.visually-hidden, .sr-only { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect(0, 0, 0, 0) !important; white-space: nowrap !important; border: 0 !important; }
.form-honeypot { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); pointer-events: none; }
.line-reveal, .reveal-line, [data-reveal-line] { display: block; }
.line-reveal__inner, .reveal-line__inner { display: block; }
.image-wipe, [data-image-wipe] { position: relative; }
.image-wipe img, [data-image-wipe] img { width: 100%; }
[data-reveal], [data-line-reveal], [data-stamp] { visibility: visible; }

@media (min-width: 1920px) {
  :root { --header-height: 6.5rem; }
  .container--wide { max-width: 1560px; }
}
@media (max-width: 767px) {
  :root { --header-height: 5rem; --block-gap: 2rem; }
  .split, .grid { grid-template-columns: minmax(0, 1fr); }
  .prose :is(h2, h3, h4) { margin-block-start: 2.25rem; }
  .cluster { gap: .75rem; }
}
@media (max-width: 359px) {
  :root { --text-hero: 2.625rem; --text-4xl: 2.375rem; }
  .lead { font-size: 1.0625rem; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto !important; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
  [data-reveal], [data-reveal-line], [data-line-reveal], [data-image-wipe], [data-stamp], .line-reveal__inner, .reveal-line__inner { opacity: 1 !important; visibility: visible !important; transform: none !important; clip-path: none !important; }
}
@media (forced-colors: active) {
  :root { --brass: CanvasText; --line: CanvasText; --focus: Highlight; }
  a, button, input, select, textarea, summary { forced-color-adjust: auto; }
  .rule, .hairline, .section { border-color: CanvasText; }
}
@media print {
  :root { --text: #000; --text-muted: #333; --ink: #fff; --paper: #fff; --surface: #fff; --brass: #333; --line: #999; }
  body { background: #fff; color: #000; font-size: 10pt; }
  .container, .shell { width: 100%; max-width: none; }
  .section { padding-block: 1.5rem; background: #fff; color: #000; }
  h1, h2, h3, h4 { break-after: avoid; }
  figure, tr, blockquote { break-inside: avoid; }
  a { text-decoration: underline; }
  .site0b1 { overflow: visible; }
}