/* Hallmark · macrostructure: Split Studio · tone: moonlit intimate · anchor hue: champagne
 * genre: atmospheric · theme: custom moonlit gold · nav: N9 · footer: Ft1
 * pre-emit critique: P5 H5 E4 S5 R5 V4 · enrichment: generated character illustration
 */
@import url('./tokens.css');
*,*::before,*::after { box-sizing: border-box; }
html,body { margin:0; overflow-x:clip; }
html { scroll-padding-top:var(--space-lg); }
body { background:var(--color-paper); color:var(--color-ink); font:400 var(--text-base)/1.85 var(--font-body); -webkit-font-smoothing:antialiased; }
a { color:inherit; text-decoration:none; text-underline-offset:.3em; }
a,button,summary { -webkit-tap-highlight-color:var(--color-transparent); }
a:focus-visible,button:focus-visible,summary:focus-visible { outline:var(--rule-focus) solid var(--color-focus); outline-offset:4px; }
a:active,button:active { opacity:.8; }
[aria-disabled=true],button:disabled { opacity:.55; cursor:not-allowed; }
[aria-busy=true] { cursor:progress; }
[data-state=error] { color:var(--color-error); }
[data-state=success] { color:var(--color-success); }
img { display:block; max-width:100%; height:auto; }
button { font:inherit; }
h1,h2,h3,p,figure { margin:0; }
h1,h2,h3 { font-style:normal; overflow-wrap:anywhere; min-width:0; }
h2 { font:500 clamp(1.75rem,3vw,2.5rem)/1.5 var(--font-display); letter-spacing:.035em; }
h3 { font-size:var(--text-xl); line-height:1.5; font-weight:500; }
p { color:var(--color-ink-2); }
svg { width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:1.5; flex-shrink:0; }
.wrap { width:min(1200px, calc(100% - 96px)); margin-inline:auto; }
.skip-link { position:absolute; top:-100px; left:var(--space-sm); z-index:100; padding:var(--space-sm); background:var(--color-accent); color:var(--color-accent-ink); }
.skip-link:focus { top:var(--space-sm); }
.site-header { position:relative; z-index:5; }
.header-inner { display:flex; min-height:96px; align-items:center; justify-content:space-between; gap:var(--space-md); }
.wordmark { display:inline-flex; align-items:center; gap:var(--space-xs); flex-shrink:0; line-height:1; }
.wordmark svg { width:32px; height:32px; color:var(--color-accent); }
.wordmark strong { font:600 1.55rem/1 var(--font-display); letter-spacing:.07em; }
.wordmark small { display:block; margin-top:var(--space-2xs); font:400 var(--text-xs)/1 var(--font-body); color:var(--color-muted); letter-spacing:.12em; }
.desktop-nav { display:flex; gap:var(--space-lg); align-items:center; line-height:1; }
.desktop-nav>a:not(.button) { color:var(--color-ink-2); font-size:var(--text-sm); padding-block:var(--space-sm); white-space:nowrap; }
.desktop-nav>a[aria-current=page] { color:var(--color-accent); }
.button { display:inline-flex; align-items:center; justify-content:center; gap:var(--space-xs); min-height:48px; padding:var(--space-sm) var(--space-md); border:var(--rule-thin) solid var(--color-accent); border-radius:var(--radius-sm); background:var(--color-accent); color:var(--color-accent-ink); line-height:1; font-size:var(--text-base); font-weight:500; white-space:nowrap; }
.button-outline { background:var(--color-transparent); color:var(--color-accent); border-color:var(--color-rule); }
.button-small { font-size:var(--text-sm); min-height:44px; padding:var(--space-xs) var(--space-md); }
.text-link { display:inline-flex; align-items:center; gap:var(--space-xs); min-height:44px; font-size:var(--text-sm); color:var(--color-accent); white-space:nowrap; }
.mobile-nav { display:none; position:relative; }
.mobile-nav>summary { display:flex; align-items:center; justify-content:center; width:44px; height:44px; list-style:none; cursor:pointer; }
.mobile-nav>summary::-webkit-details-marker { display:none; }
.mobile-nav nav { position:absolute; top:52px; right:0; min-width:200px; background:var(--color-paper-2); color:var(--color-ink); border:var(--rule-thin) solid var(--color-rule); border-radius:var(--radius-md); padding:var(--space-xs); }
.mobile-nav nav a { display:block; padding:var(--space-xs) var(--space-sm); white-space:nowrap; }
.hero { position:relative; display:grid; grid-template-columns:minmax(0,1.06fr) minmax(0,1fr); gap:var(--space-xl); align-items:center; padding-block:var(--space-lg) var(--space-2xl); }
.hero-copy { position:relative; z-index:2; padding-block:var(--space-lg); }
.site-role { display:flex; align-items:center; gap:var(--space-2xs); color:var(--color-muted); font-size:var(--text-sm); margin-bottom:var(--space-lg); }
.site-role svg { width:16px; height:16px; }
.hero h1 { font:500 var(--text-display)/1.28 var(--font-display); letter-spacing:.06em; }
.hero h1 span { display:block; font:400 clamp(1.25rem,2vw,1.75rem)/1.5 var(--font-body); letter-spacing:.12em; margin-top:var(--space-xs); color:var(--color-ink-2); }
.hero-tagline { display:block; margin-top:var(--space-lg); font-size:var(--text-lg); color:var(--color-accent); max-width:24em; line-height:1.8; }
.hero-description { margin-top:var(--space-sm); font-size:var(--text-base); max-width:28em; }
.hero-actions { display:flex; align-items:center; gap:var(--space-lg); flex-wrap:wrap; margin-top:var(--space-lg); }
.disclosure { font-size:var(--text-xs); color:var(--color-muted); margin-top:var(--space-sm); line-height:1.7; max-width:34em; }
.hero-art { position:relative; margin:0; min-width:0; }
.hero-art img { width:100%; height:584px; object-fit:cover; object-position:60% 37%; border-radius:48% 48% var(--radius-md) var(--radius-md); }
.hero-art::after { content:''; position:absolute; inset:55% 0 0; pointer-events:none; background:linear-gradient(var(--color-transparent),var(--color-paper)); }
.hero-art figcaption { position:absolute; bottom:var(--space-md); left:var(--space-md); right:var(--space-md); z-index:1; font-size:var(--text-xs); color:var(--color-ink-2); letter-spacing:.08em; }
.hero-art figcaption span { display:block; color:var(--color-muted); font-size:var(--text-xs); letter-spacing:0; }
.section { padding-block:var(--space-3xl); }
.section-head { display:flex; align-items:end; justify-content:space-between; gap:var(--space-lg); margin-bottom:var(--space-xl); }
.section-head p { max-width:28em; margin-top:var(--space-xs); }
.entry-band { padding:var(--space-xl); border:var(--rule-thin) solid var(--color-rule); border-radius:var(--radius-md); display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:var(--space-2xl); background:var(--color-paper-2); color:var(--color-ink); }
.entry-band h2 { font-size:var(--text-2xl); }
.entry-band p { margin-top:var(--space-sm); }
.entry-details { border-left:var(--rule-thin) solid var(--color-rule); padding-left:var(--space-xl); }
.entry-details dl { margin:0; }
.entry-details dl>div { display:flex; justify-content:space-between; gap:var(--space-md); padding-block:var(--space-2xs); font-size:var(--text-sm); }
dt { color:var(--color-muted); } dd { margin:0; overflow-wrap:anywhere; }
.entry-details .text-link { margin-top:var(--space-xs); }
.site-footer { margin-top:var(--space-3xl); padding-block:var(--space-xl); border-top:var(--rule-thin) solid var(--color-rule); }
.footer-top,.footer-bottom { display:flex; align-items:center; justify-content:space-between; gap:var(--space-lg); flex-wrap:wrap; }
.footer-links { display:flex; align-items:center; gap:var(--space-lg); flex-wrap:wrap; }
.footer-links a { font-size:var(--text-sm); min-height:44px; display:inline-flex; align-items:center; white-space:nowrap; }
.footer-bottom { margin-top:var(--space-lg); font-size:var(--text-xs); color:var(--color-muted); }
@media(hover:hover) { a:hover { color:var(--color-accent); } .button:hover { background:var(--color-accent-hover); color:var(--color-accent-ink); } .button-outline:hover { background:var(--color-paper-3); color:var(--color-accent); } }
@media(max-width:1000px) { .wrap { width:calc(100% - 64px); } .desktop-nav { gap:var(--space-md); } .hero { gap:var(--space-lg); } .hero-art img { height:520px; } }
@media(max-width:768px) { .wrap { width:calc(100% - 40px); } .header-inner { min-height:80px; } .desktop-nav { display:none; } .mobile-nav { display:block; } .hero { grid-template-columns:minmax(0,1fr); padding-top:var(--space-xs); gap:var(--space-md); } .hero-copy { padding-top:var(--space-sm); padding-bottom:0; } .site-role { margin-bottom:var(--space-md); } .hero h1 { font-size:3.25rem; } .hero h1 span { font-size:1.25rem; margin-top:var(--space-2xs); } .hero-tagline { margin-top:var(--space-md); } .hero-description { max-width:34em; } .hero-actions { gap:var(--space-md); margin-top:var(--space-md); } .hero-art { width:min(100%,460px); margin-inline:auto; } .hero-art img { height:360px; object-position:50% 27%; border-radius:var(--radius-md); } .hero-art figcaption { bottom:var(--space-xs); } .entry-band { grid-template-columns:minmax(0,1fr); padding:var(--space-md); gap:var(--space-md); } .entry-details { border-left:0; border-top:var(--rule-thin) solid var(--color-rule); padding:var(--space-md) 0 0; } .section { padding-block:var(--space-xl); } .section-head { display:block; margin-bottom:var(--space-lg); } .section-head>.text-link { margin-top:var(--space-sm); } .site-footer { margin-top:var(--space-xl); } .footer-top,.footer-bottom { align-items:flex-start; flex-direction:column; gap:var(--space-md); } .footer-links { gap:var(--space-sm) var(--space-md); } }
@media(max-width:375px) { .hero h1 { font-size:3rem; } .hero-tagline { font-size:var(--text-base); } .hero-actions { gap:var(--space-xs); } .hero-actions .button { padding-inline:var(--space-sm); } }
@media(prefers-reduced-motion:reduce) { *,*::before,*::after { animation:none!important; transition:none!important; scroll-behavior:auto!important; } }
/* Content pages and quiet supporting surfaces */
.small-copy { font-size:var(--text-sm); line-height:1.8; color:var(--color-muted); }
.entry-band .small-copy { margin-top:var(--space-xs); }
.footer-disclosure { font-size:var(--text-xs); margin-top:var(--space-sm); max-width:70em; color:var(--color-muted); }
.inspiration { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.15fr); align-items:center; gap:var(--space-3xl); }
.inspiration-intro>p { margin-top:var(--space-lg); max-width:24em; }
.inspiration-intro>.text-link { margin-top:var(--space-md); }
.story-examples { display:grid; gap:var(--space-md); }
.story-examples>article { padding:var(--space-lg); background:var(--color-paper-2); color:var(--color-ink); border-radius:var(--radius-md); }
.story-examples>article:nth-child(2) { margin-left:var(--space-lg); }
.example-label { color:var(--color-accent); font-size:var(--text-sm); display:block; margin-bottom:var(--space-xs); }
.story-examples h3 { font-family:var(--font-display); font-size:var(--text-xl); }
.story-examples article p { margin-top:var(--space-sm); font-size:var(--text-sm); }
.steps-surface { background:var(--color-paper-2); color:var(--color-ink); }
.steps { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:var(--space-lg); list-style:none; padding:0; margin:0; }
.steps li { padding-right:var(--space-md); }
.steps li>span { font-family:var(--font-display); font-size:var(--text-3xl); line-height:1; color:var(--color-accent); }
.steps li h3 { font-size:var(--text-lg); margin-top:var(--space-md); }
.steps li p { font-size:var(--text-sm); margin-top:var(--space-xs); }
.steps-note { margin-top:var(--space-lg); }
.credits-section { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.15fr); gap:var(--space-3xl); align-items:start; }
.credits-section .text-link { margin-top:var(--space-md); }
.faq-section { padding-top:var(--space-lg); }
.faq-list { border-top:var(--rule-thin) solid var(--color-rule); }
.faq-item { border-bottom:var(--rule-thin) solid var(--color-rule); }
.faq-item>summary { list-style:none; display:flex; align-items:center; justify-content:space-between; gap:var(--space-md); font-size:var(--text-lg); cursor:pointer; padding-block:var(--space-md); }
.faq-item>summary::-webkit-details-marker { display:none; }
.faq-item>summary>span { font-size:var(--text-2xl); color:var(--color-accent); line-height:1; flex-shrink:0; transition:transform var(--dur-fast) var(--ease-out); }
.faq-item[open]>summary>span { transform:rotate(45deg); }
.faq-answer { padding:0 var(--space-2xl) var(--space-md) 0; max-width:58em; }
.faq-answer a,.document-body p a,.document-body li a { color:var(--color-accent); text-decoration:underline; }
.articles-section { padding-top:var(--space-lg); }
.article-list { border-top:var(--rule-thin) solid var(--color-rule); }
.article-row { display:grid; grid-template-columns:100px minmax(0,1fr) 32px; align-items:start; gap:var(--space-xl); padding-block:var(--space-lg); border-bottom:var(--rule-thin) solid var(--color-rule); }
.article-row h3 { color:var(--color-ink); font-size:var(--text-xl); }
.article-row p { margin-top:var(--space-2xs); font-size:var(--text-sm); }
.article-topic { color:var(--color-accent); font-size:var(--text-sm); padding-top:var(--space-3xs); }
.article-meta { display:block; color:var(--color-muted); font-size:var(--text-xs); margin-top:var(--space-xs); }
.row-arrow { font-size:var(--text-xl); color:var(--color-accent); }
.closing { background:var(--color-paper-2); color:var(--color-ink); border-radius:var(--radius-md); display:flex; align-items:center; justify-content:space-between; gap:var(--space-xl); padding:var(--space-xl); }
.closing h2 { font-size:clamp(1.75rem,2.6vw,2.25rem); }
.closing p { margin-top:var(--space-xs); }
.closing>.disclosure { max-width:20em; }
.closing>div:last-child { flex-shrink:0; }
.document-hero { padding-block:var(--space-xl) var(--space-2xl); }
.breadcrumb { display:flex; align-items:center; gap:var(--space-xs); color:var(--color-muted); font-size:var(--text-sm); margin-bottom:var(--space-lg); line-height:1.2; }
.breadcrumb>a { display:inline-flex; align-items:center; min-height:44px; white-space:nowrap; }
.document-hero h1,.not-found h1 { max-width:20em; font:500 clamp(1.875rem,3.7vw,3.25rem)/1.5 var(--font-display); letter-spacing:.025em; }
.document-lead { max-width:46em; margin-top:var(--space-md); font-size:var(--text-lg); }
.document-meta { display:flex; flex-wrap:wrap; gap:var(--space-sm) var(--space-lg); font-size:var(--text-sm); color:var(--color-muted); margin-top:var(--space-lg); }
.document-layout { display:grid; grid-template-columns:220px minmax(0,1fr); gap:var(--space-3xl); align-items:start; }
.document-toc { position:sticky; top:var(--space-lg); display:grid; padding-top:var(--space-3xs); }
.document-toc>p { color:var(--color-accent); font-size:var(--text-sm); margin-bottom:var(--space-sm); }
.document-toc>a { font-size:var(--text-sm); color:var(--color-muted); min-height:44px; display:flex; align-items:center; padding-block:var(--space-2xs); }
.document-body { min-width:0; max-width:760px; }
.document-body>section { margin-bottom:var(--space-2xl); scroll-margin-top:var(--space-lg); }
.document-body h2 { font-family:var(--font-body); font-size:var(--text-xl); font-weight:500; letter-spacing:0; margin-bottom:var(--space-md); }
.document-body p+p { margin-top:var(--space-sm); }
.document-body p+.button { margin-top:var(--space-md); }
.document-body ul,.document-body ol { padding-left:var(--space-md); margin:var(--space-md) 0; color:var(--color-ink-2); }
.document-body li { padding-left:var(--space-3xs); margin-bottom:var(--space-xs); }
.document-body strong { color:var(--color-ink); font-weight:500; }
.document-body blockquote { margin:var(--space-md) 0; padding:var(--space-lg); border:var(--rule-thin) solid var(--color-rule); border-radius:var(--radius-sm); background:var(--color-paper-2); color:var(--color-ink); font-family:var(--font-display); font-size:var(--text-lg); line-height:1.9; }
.note { padding:var(--space-md); background:var(--color-paper-2); color:var(--color-ink); border-radius:var(--radius-sm); margin-bottom:var(--space-md); }
.definition-list { margin:var(--space-lg) 0; }
.definition-list>div { display:grid; grid-template-columns:64px minmax(0,1fr); gap:var(--space-lg); margin-bottom:var(--space-sm); }
.definition-list dt { color:var(--color-accent); }
.definition-list dd { color:var(--color-ink-2); }
.template-block { background:var(--color-paper-2); color:var(--color-ink); border-radius:var(--radius-md); border:var(--rule-thin) solid var(--color-rule); padding:var(--space-md); margin-bottom:var(--space-md); }
.template-toolbar { display:flex; align-items:center; justify-content:space-between; gap:var(--space-sm); font-size:var(--text-sm); color:var(--color-muted); }
.copy-button { display:inline-flex; align-items:center; justify-content:center; min-height:44px; padding:var(--space-xs) var(--space-sm); border-radius:var(--radius-sm); border:var(--rule-thin) solid var(--color-rule); background:var(--color-paper-3); color:var(--color-accent); cursor:pointer; white-space:nowrap; flex-shrink:0; font-size:var(--text-sm); line-height:1; }
.template-block pre { white-space:pre-wrap; overflow-wrap:anywhere; font:400 var(--text-base)/1.9 var(--font-body); color:var(--color-ink-2); margin:var(--space-md) 0 0; }
.copy-status { min-height:1.8em; font-size:var(--text-sm); margin-top:var(--space-xs); }
.document-next { padding-top:var(--space-lg); border-top:var(--rule-thin) solid var(--color-rule); }
.document-next h2 { font-family:var(--font-display); font-size:var(--text-2xl); }
.not-found { padding-block:var(--space-3xl); min-height:55vh; }
.not-found>p:not(.site-role) { margin-top:var(--space-lg); }
@media(hover:hover) { .article-row:hover h3 { color:var(--color-accent); } .copy-button:hover { color:var(--color-ink); } .document-toc>a:hover { color:var(--color-accent); } }
@media(max-width:1000px) { .inspiration,.credits-section { gap:var(--space-xl); } .document-layout { grid-template-columns:180px minmax(0,1fr); gap:var(--space-xl); } .closing { gap:var(--space-lg); } .desktop-nav { gap:var(--space-sm); } }
@media(max-width:768px) {
  .inspiration,.credits-section { grid-template-columns:minmax(0,1fr); gap:var(--space-lg); }
  .inspiration-intro>p { max-width:100%; margin-top:var(--space-sm); }
  .inspiration-intro h2 br,.credits-section h2 br { display:none; }
  .story-examples>article { padding:var(--space-md); }
  .story-examples>article:nth-child(2) { margin-left:0; }
  .steps { grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--space-xl) var(--space-md); }
  .steps li { padding-right:0; }
  .credits-section { padding-bottom:var(--space-xl); }
  .faq-item>summary { font-size:var(--text-base); }
  .faq-answer { padding-right:0; }
  .article-row { grid-template-columns:minmax(0,1fr) 24px; gap:var(--space-xs) var(--space-md); padding-block:var(--space-md); }
  .article-topic { grid-column:1; }
  .article-row>div { grid-column:1; }
  .article-row h3 { font-size:var(--text-lg); }
  .row-arrow { grid-column:2; grid-row:1 / 3; align-self:center; }
  .closing { flex-direction:column; align-items:flex-start; padding:var(--space-lg) var(--space-md); }
  .closing h2 { font-size:var(--text-2xl); }
  .closing>div:last-child { flex-shrink:1; }
  .document-hero { padding-block:var(--space-md) var(--space-xl); }
  .document-hero h1 { font-size:clamp(1.875rem,6vw,2.5rem); }
  .document-lead { font-size:var(--text-base); }
  .document-layout { grid-template-columns:minmax(0,1fr); gap:var(--space-xl); }
  .document-toc { position:static; padding:var(--space-md); background:var(--color-paper-2); color:var(--color-ink); border-radius:var(--radius-sm); }
  .document-toc>a { color:var(--color-ink-2); }
  .document-body>section { margin-bottom:var(--space-xl); }
  .document-body blockquote { padding:var(--space-md); font-size:var(--text-base); }
  .document-meta { font-size:var(--text-xs); gap:var(--space-2xs) var(--space-md); }
  .template-block { padding:var(--space-sm); }
  .template-toolbar { flex-wrap:wrap; }
  .template-block pre { font-size:var(--text-sm); }
  .definition-list>div { grid-template-columns:48px minmax(0,1fr); gap:var(--space-sm); }
}

.button:not(.button-outline):focus-visible { outline-color:var(--color-focus-on-accent); }