/* Hallmark · genre: editorial · macrostructure: Long Document (CTA-bearing variant)
 * theme: custom — DOLL house palette (locked by brand, not rotated)
 * paper oklch(98.4% 0.004 106.5) · accent oklch(41.8% 0.037 161.6) fir-green (cool-chromatic)
 * display Zen Old Mincho + body Zen Kaku Gothic New
 * nav: N9 edge-aligned minimal · footer: Ft6 letter close · enrichment: none (typography only)
 * pre-emit critique: P5 H4 E4 S4 R5 V4
 * deviation: Long Document normally hides CTAs; the brief fixes 3 (FV / 商品情報 / クロージング).
 * deviation: brief asked for scroll-fade; cut it. One entrance only (the strike-through draw).
 */

/* ─── tokens ─────────────────────────────────────────────── */
:root{
  --color-paper:      oklch(98.4% 0.004 106.5); /* #FAFAF7 */
  --color-paper-2:    oklch(94.2% 0.012 79.8);  /* #F0EBE3 */
  --color-paper-3:    oklch(90.7% 0.018 78.2);  /* #E7DFD3 */
  --color-beige:      oklch(75.2% 0.064 70.5);  /* #C9A882 */
  --color-ink:        oklch(29.4% 0.006 78.2);  /* #2E2C29 */
  --color-ink-soft:   oklch(50.7% 0.015 71.2);
  --color-green:      oklch(41.8% 0.037 161.6); /* #3A5346 */
  --color-green-deep: oklch(35.0% 0.033 157.8);
  --color-rule:       oklch(87.6% 0.020 80.1);  /* #DDD5C8 */
  --color-focus:      oklch(41.8% 0.037 161.6);
  --color-flag:       oklch(75.2% 0.064 70.5);

  --font-display: "Zen Old Mincho", "Hiragino Mincho ProN", "Yu Mincho", "YuMincho", serif;
  --font-body: "Zen Kaku Gothic New", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic", sans-serif;

  --space-2xs: 4px;  --space-xs: 8px;   --space-sm: 12px;
  --space-md: 20px;  --space-lg: 32px;  --space-xl: 48px;
  --space-2xl: 72px; --space-3xl: 104px;

  --text-xs: 0.75rem;  --text-sm: 0.875rem; --text-base: 1rem;
  --text-lg: 1.125rem; --text-xl: 1.375rem; --text-2xl: 1.75rem;
  --text-3xl: 2.25rem; --text-display-s: 2.75rem;

  --rule-hair: 1px;
  --radius-sm: 2px;
  --dur-short: 120ms; --dur-mid: 320ms; --dur-long: 620ms;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --measure: 34em;
}

/* ─── base ───────────────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box}
html,body{overflow-x:clip}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  background:var(--color-paper);
  color:var(--color-ink);
  font-family:var(--font-body);
  font-size:var(--text-base);
  line-height:1.9;
  font-feature-settings:"palt";
  text-spacing-trim:trim-start;
}
h2{font-size:var(--text-2xl)}
h1,h2,h3{
  font-family:var(--font-display);
  font-style:normal;
  font-weight:500;
  line-height:1.45;
  margin:0;
  overflow-wrap:anywhere;
  min-width:0;
}
p{margin:0}
img{max-width:100%;height:auto;display:block}

.wrap{width:100%;max-width:41rem;margin-inline:auto;padding-inline:var(--space-md)}
.stack>*+*{margin-top:var(--space-md)}
section{padding-block:var(--space-2xl)}
.band{background:var(--color-paper-2)}
.band-3{background:var(--color-paper-3)}

.label{
  font-size:var(--text-xs);
  letter-spacing:0.14em;
  color:var(--color-ink-soft);
  display:block;
}
.mark{
  writing-mode:vertical-rl;
  font-family:var(--font-display);
  font-size:var(--text-sm);
  letter-spacing:0.24em;
  color:var(--color-green);
  border-inline-start:var(--rule-hair) solid var(--color-rule);
  padding-inline-start:var(--space-xs);
  block-size:4.2em;
  margin-block-end:var(--space-sm);
}
.lede{font-size:var(--text-lg);line-height:2.05}
.soft{color:var(--color-ink-soft)}
.measure{max-width:var(--measure)}

/* ─── nav · N9 edge-aligned minimal ──────────────────────── */
.masthead{
  display:flex;justify-content:space-between;align-items:baseline;gap:var(--space-sm);
  padding-block:var(--space-md);
  border-block-end:var(--rule-hair) solid var(--color-rule);
}
.masthead b{font-family:var(--font-display);font-weight:500;font-size:var(--text-sm);letter-spacing:0.16em}
.masthead span{font-size:var(--text-xs);color:var(--color-ink-soft);letter-spacing:0.1em}

/* ─── ① first view ───────────────────────────────────────── */
.fv{padding-block:var(--space-xl) var(--space-3xl)}
.fv h1{letter-spacing:0.02em}
/* the negated claim is quieter than the answer — and must stay on one line
   so the rule can cross all of it (a wrapped strike-through reads as broken) */
.struck{
  position:relative;display:inline-block;white-space:nowrap;
  font-size:var(--text-xl);color:var(--color-ink-soft);
}
.struck::after{
  content:"";position:absolute;inset-inline:-0.1em;inset-block-start:54%;
  block-size:1.5px;background:var(--color-green);
  transform:scaleX(0);transform-origin:left center;
  animation:draw var(--dur-long) var(--ease-out) 480ms forwards;
}
@keyframes draw{to{transform:scaleX(1)}}
.turn{display:block;font-size:var(--text-3xl);margin-block-start:var(--space-md)}
@media (min-width:600px){
  .struck{font-size:var(--text-2xl)}
  .turn{font-size:var(--text-display-s)}
}

/* ─── buttons ────────────────────────────────────────────── */
.cta{display:flex;flex-direction:column;gap:var(--space-sm);margin-block-start:var(--space-lg)}
@media (min-width:520px){ .cta{flex-direction:row;flex-wrap:wrap} }
.btn{
  --btn-bg:var(--color-green);
  --btn-fg:var(--color-paper);
  display:inline-flex;align-items:center;justify-content:center;
  min-block-size:56px;padding-inline:var(--space-lg);
  background:var(--btn-bg);color:var(--btn-fg);
  font-family:var(--font-body);font-size:var(--text-base);font-weight:500;
  letter-spacing:0.06em;white-space:nowrap;
  border:var(--rule-hair) solid var(--btn-bg);border-radius:var(--radius-sm);
  text-decoration:none;cursor:pointer;
  transition:background-color var(--dur-short) var(--ease-out),
             transform 90ms var(--ease-out);
}
.btn:hover,.btn.is-hover{--btn-bg:var(--color-green-deep)}
.btn:active,.btn.is-active{transform:translateY(1px)}
.btn:focus-visible{outline:2px solid var(--color-focus);outline-offset:3px}
.btn[aria-disabled="true"],.btn:disabled{opacity:.55;cursor:not-allowed;pointer-events:none}
.btn--quiet{
  --btn-bg:transparent;--btn-fg:var(--color-green);
  border-color:var(--color-green);
}
.btn--quiet:hover,.btn--quiet.is-hover{--btn-bg:var(--color-paper-3)}

/* ─── ② problems ─────────────────────────────────────────── */
.gripes{list-style:none;padding:0;margin:var(--space-lg) 0 0}
.gripes li{
  padding-block:var(--space-sm);
  border-block-start:var(--rule-hair) solid var(--color-rule);
  display:grid;grid-template-columns:1.2em minmax(0,1fr);gap:var(--space-xs);
}
.gripes li:last-child{border-block-end:var(--rule-hair) solid var(--color-rule)}
.gripes i{font-style:normal;color:var(--color-beige);font-family:var(--font-display)}

/* ─── media slots (honest placeholders) ──────────────────── */
figure{margin:var(--space-lg) 0 0}
.slot{
  display:grid;place-items:center;text-align:center;
  min-block-size:11rem;padding:var(--space-md);
  background:var(--color-paper-3);
  border:var(--rule-hair) dashed var(--color-rule);
  color:var(--color-ink-soft);font-size:var(--text-sm);line-height:1.7;
}
.slot--wide{aspect-ratio:4/3}
.slot--reel{aspect-ratio:9/16;max-inline-size:16rem;margin-inline:auto}
figcaption{font-size:var(--text-xs);color:var(--color-ink-soft);margin-block-start:var(--space-xs)}
.shot{inline-size:100%;block-size:auto;border:var(--rule-hair) solid var(--color-rule)}
.shot--fv{border:0}
.pair{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--space-sm);margin-block-start:var(--space-lg)}
@media (min-width:520px){ .pair{grid-template-columns:repeat(2,minmax(0,1fr))} }
.pair figure{margin:0}
.inset{max-inline-size:20rem}

/* ─── ④ three reasons ────────────────────────────────────── */
.reason{padding-block:var(--space-xl);border-block-start:var(--rule-hair) solid var(--color-rule)}
.reason:first-of-type{border-block-start:0}
.reason h3{font-size:var(--text-xl);margin-block-end:var(--space-sm)}
blockquote{
  margin:var(--space-md) 0 0;padding-inline-start:var(--space-md);
  border-inline-start:2px solid var(--color-beige);
  color:var(--color-ink-soft);font-size:var(--text-sm);line-height:1.95;
}

/* ─── ⑤ checklist ────────────────────────────────────────── */
.fits{list-style:none;padding:0;margin:var(--space-lg) 0 0;display:grid;gap:var(--space-xs)}
.fits li{
  display:grid;grid-template-columns:1.6em minmax(0,1fr);align-items:start;gap:var(--space-xs);
  background:var(--color-paper);padding:var(--space-sm) var(--space-md);
  border:var(--rule-hair) solid var(--color-rule);
}
.fits svg{inline-size:1rem;block-size:1rem;margin-block-start:0.45em;color:var(--color-green)}

/* ─── ⑥ steps ────────────────────────────────────────────── */
.steps{counter-reset:s;list-style:none;padding:0;margin:var(--space-lg) 0 0}
.steps li{
  counter-increment:s;padding-block:var(--space-md);
  border-block-end:var(--rule-hair) solid var(--color-rule);
}
.steps li::before{
  content:"0" counter(s);
  font-family:var(--font-display);font-size:var(--text-sm);letter-spacing:0.1em;
  color:var(--color-green);display:block;margin-block-end:var(--space-2xs);
}
.steps b{font-weight:500}

/* ─── ⑦ voices ───────────────────────────────────────────── */
.voices{display:grid;gap:var(--space-md);margin-block-start:var(--space-lg)}
.voice{padding:var(--space-md);background:var(--color-paper);border:var(--rule-hair) solid var(--color-rule)}
.voice .slot{min-block-size:6rem;border-style:dashed}

/* ─── ⑧ letter from the manager ──────────────────────────── */
.letter{background:var(--color-paper-2)}
.letter h2{font-size:var(--text-2xl)}
.letter p{max-width:var(--measure)}
.sign{
  margin-block-start:var(--space-lg);font-family:var(--font-display);
  font-size:var(--text-sm);letter-spacing:0.14em;color:var(--color-ink-soft);
}

/* ─── ⑨ spec ─────────────────────────────────────────────── */
.spec{width:100%;border-collapse:collapse;margin-block-start:var(--space-lg);font-size:var(--text-sm)}
.spec th,.spec td{
  text-align:start;padding:var(--space-sm) 0;vertical-align:top;
  border-block-end:var(--rule-hair) solid var(--color-rule);
  font-variant-numeric:tabular-nums;
}
.spec th{inline-size:6em;font-weight:500;color:var(--color-ink-soft)}
.ing{font-size:var(--text-xs);line-height:1.85;color:var(--color-ink-soft)}
.aside{margin-block-start:var(--space-2xl)}
.aside>h3{font-size:var(--text-xl);margin-block-end:var(--space-xs)}
.aside>p{font-size:var(--text-sm);color:var(--color-ink-soft)}
.ings{list-style:none;padding:0;margin:var(--space-lg) 0 0}
.ings li{padding-block:var(--space-md);border-block-start:var(--rule-hair) solid var(--color-rule)}
.ings li:last-child{border-block-end:var(--rule-hair) solid var(--color-rule)}
.ing-head{display:flex;align-items:center;gap:var(--space-sm)}
.ing-head svg{inline-size:34px;block-size:34px;flex:0 0 auto;color:var(--color-green)}
.ing-head b{font-family:var(--font-display);font-weight:500;font-size:var(--text-lg);
  line-height:1.3;overflow-wrap:anywhere;min-width:0}
.ings .latin{display:block;font-size:var(--text-xs);color:var(--color-ink-soft);
  letter-spacing:0.04em;margin-block-start:var(--space-2xs)}
.ings .body{margin-block-start:var(--space-xs);font-size:var(--text-sm)}
.ings .note{margin-block-start:var(--space-md);font-size:var(--text-xs);color:var(--color-ink-soft)}
.tbd{
  display:inline-block;padding:2px var(--space-xs);
  background:var(--color-flag);color:var(--color-ink);
  font-size:var(--text-xs);letter-spacing:0.06em;border-radius:var(--radius-sm);
}

/* ─── ⑩ faq ──────────────────────────────────────────────── */
.faq{margin-block-start:var(--space-lg)}
.faq details{border-block-end:var(--rule-hair) solid var(--color-rule)}
.faq summary{
  padding-block:var(--space-md);cursor:pointer;list-style:none;
  display:grid;grid-template-columns:1.4em minmax(0,1fr);gap:var(--space-xs);
  font-weight:500;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::before{content:"Q";font-family:var(--font-display);color:var(--color-green)}
.faq summary:focus-visible{outline:2px solid var(--color-focus);outline-offset:2px}
.faq div{
  padding:0 0 var(--space-md);
  display:grid;grid-template-columns:1.4em minmax(0,1fr);gap:var(--space-xs);
  color:var(--color-ink-soft);font-size:var(--text-sm);
}
.faq div::before{content:"A";font-family:var(--font-display);color:var(--color-beige)}

/* ─── ⑪ close + footer Ft6 ───────────────────────────────── */
.close{text-align:start;padding-block:var(--space-3xl) var(--space-2xl)}
.close h2{font-size:var(--text-2xl);max-width:16em}
footer{
  border-block-start:var(--rule-hair) solid var(--color-rule);
  padding-block:var(--space-xl) var(--space-2xl);
  font-size:var(--text-sm);color:var(--color-ink-soft);
}
footer b{font-family:var(--font-display);font-weight:500;letter-spacing:0.16em;color:var(--color-ink);display:block;margin-block-end:var(--space-2xs)}
footer a{color:var(--color-green)}
footer a:focus-visible{outline:2px solid var(--color-focus);outline-offset:2px}

/* ─── test-only appendix ─────────────────────────────────── */
.devnote{
  border:2px solid var(--color-beige);margin-block:var(--space-2xl);
  padding:var(--space-md);font-size:var(--text-sm);
}
.devnote summary{font-weight:700;cursor:pointer}
.devnote ol{padding-inline-start:1.4em;line-height:1.9}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:1ms !important;animation-delay:0ms !important;transition-duration:1ms !important}
  .struck::after{transform:scaleX(1)}
}