/* Hallmark · design-system: design.md · shared tokens + chrome — 中華そば 金ちゃん */
:root{
  --color-paper:  oklch(96% 0.015 90);
  --color-paper-2:oklch(92.5% 0.02 88);
  --color-ink:    oklch(25% 0.025 60);
  --color-ink-2:  oklch(46% 0.03 70);
  --color-rule:   oklch(85% 0.02 85);
  --color-accent: oklch(62% 0.11 75);
  --color-accent-deep: oklch(50% 0.1 70);
  --color-cream:  oklch(96% 0.02 90);
  --color-focus:  oklch(55% 0.15 255);
  --color-scrim:  oklch(20% 0.03 55);
  --color-cream-70:oklch(96% 0.02 90 / .8);
  --color-cream-55:oklch(96% 0.02 90 / .55);
  --color-scrim-78:oklch(20% 0.03 55 / .78);
  --color-wash:   oklch(62% 0.11 75 / .07);
  --color-cream-2:oklch(88% 0.02 85);
  --color-mute-dk:oklch(70% 0.02 80);
  --color-rule-dk:oklch(70% 0.05 75);

  --font-display:'Shippori Mincho B1',serif;
  --font-body:'Zen Kaku Gothic New',sans-serif;

  --space-2xs:.5rem; --space-xs:.75rem; --space-sm:1rem; --space-md:1.5rem;
  --space-lg:2rem; --space-xl:3rem; --space-2xl:4.5rem; --space-3xl:7rem;

  --text-sm:.8rem; --text-md:.95rem; --text-lg:1.15rem;
  --text-display:clamp(2.1rem,5.2vw,3.6rem);

  --ease-out:cubic-bezier(.16,1,.3,1);
  --measure:36em;
}
*{margin:0;padding:0;box-sizing:border-box}
html,body{overflow-x:clip}
html{scroll-behavior:smooth}
body{
  font-family:var(--font-body);font-weight:400;
  background:var(--color-paper);color:var(--color-ink);
  line-height:1.95;-webkit-font-smoothing:antialiased;
}
::selection{background:var(--color-accent);color:var(--color-ink)}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
:focus-visible{outline:2px solid var(--color-focus);outline-offset:3px}

.pad{padding-inline:clamp(1.1rem,4vw,2.5rem)}

/* ---- サイトナビ(全ページ共通・両端寄せ) ---- */
.sitenav{
  display:flex;align-items:center;justify-content:space-between;gap:var(--space-md);
  padding-block:var(--space-md);flex-wrap:wrap;
}
.sitenav .mark{font-family:var(--font-display);font-weight:700;font-size:1.05rem;letter-spacing:.18em;min-height:44px;display:inline-flex;align-items:center}
.sitenav ul{display:flex;gap:var(--space-md);list-style:none;flex-wrap:wrap}
.sitenav ul a{
  display:inline-flex;align-items:center;min-height:44px;
  font-size:var(--text-sm);letter-spacing:.18em;
  border-bottom:1px solid transparent;
  transition:border-color .3s var(--ease-out);
}
.sitenav ul a:hover{border-color:var(--color-accent)}
.sitenav ul a[aria-current="page"]{border-color:var(--color-accent-deep);color:var(--color-accent-deep)}
.sitenav--overlay{position:absolute;top:0;left:0;right:0;z-index:10;color:var(--color-cream)}
.sitenav--overlay ul a[aria-current="page"]{border-color:var(--color-accent);color:var(--color-cream)}
.sitenav--paper{border-bottom:1px solid var(--color-rule)}

/* ---- C3 タイポグラフィックリンク ---- */
.tlink{
  display:inline-flex;align-items:center;font-family:var(--font-display);font-weight:700;
  font-size:var(--text-md);letter-spacing:.24em;padding:.55em 0;
  border-bottom:1.5px solid var(--color-accent);
  transition:letter-spacing .35s var(--ease-out);
  min-height:44px;
}
.tlink:hover{letter-spacing:.32em}
.tlink .ar{color:var(--color-accent-deep)}

/* ---- 写真フォールド ---- */
.fold{position:relative}
.fold img{width:100%;height:100%;object-fit:cover;filter:saturate(.94) contrast(1.03)}
.fold::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:var(--color-wash);mix-blend-mode:multiply;
}
.fold-band{aspect-ratio:16/7;min-height:340px;max-height:78vh;overflow:clip}
.caption{
  display:flex;gap:var(--space-md);align-items:baseline;flex-wrap:wrap;
  padding-block:var(--space-sm) var(--space-2xl);
  font-size:var(--text-sm);color:var(--color-ink-2);letter-spacing:.12em;
}
.caption b{
  font-family:var(--font-display);font-weight:700;color:var(--color-ink);
  font-size:var(--text-md);letter-spacing:.16em;
}
.caption .no{color:var(--color-accent-deep);letter-spacing:.2em}

/* ---- 小見出し(S4 inline) ---- */
.kicker{
  font-size:var(--text-sm);letter-spacing:.4em;color:var(--color-accent-deep);
  font-weight:700;margin-bottom:var(--space-md);
}
.page-title{
  font-family:var(--font-display);font-weight:800;
  font-size:var(--text-display);letter-spacing:.1em;line-height:1.5;
}

/* ---- Ft4 コロフォン(全ページ共通) ---- */
.colofoot{
  background:var(--color-scrim);color:var(--color-cream-2);
  padding-block:var(--space-2xl);font-size:var(--text-sm);line-height:2.2;
}
.colofoot .colo{max-width:52rem;margin-inline:auto}
.colofoot .mark{font-family:var(--font-display);font-weight:700;font-size:1.1rem;letter-spacing:.2em;color:var(--color-cream);display:block;margin-bottom:var(--space-md)}
.colofoot p{margin-bottom:var(--space-sm);letter-spacing:.04em}
.colofoot .fine{color:var(--color-mute-dk);font-size:.72rem}
.colofoot a{border-bottom:1px solid var(--color-rule-dk);padding-bottom:1px}
.colofoot nav{display:flex;gap:var(--space-md);flex-wrap:wrap;margin-bottom:var(--space-md)}
.colofoot nav a{border-bottom-color:transparent}
.colofoot nav a:hover{border-bottom-color:var(--color-rule-dk)}

@media(max-width:60rem){
  .fold-band{aspect-ratio:4/3;max-height:60vh}
}
@media(max-width:40rem){
  body{line-height:1.85}
  .sitenav ul{gap:var(--space-sm)}
}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .tlink,.sitenav ul a{transition:none}
}