@font-face { font-family: "CYO Zen"; src: url("/fonts/zen-400.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "CYO Zen"; src: url("/fonts/zen-700.woff2") format("woff2"); font-weight: 700; font-display: swap; }
@font-face { font-family: "CYO Noto"; src: url("/fonts/noto-400.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "CYO Noto"; src: url("/fonts/noto-700.woff2") format("woff2"); font-weight: 700; font-display: swap; }
@font-face { font-family: "CYO Sym"; src: url("/fonts/sym-400.woff2") format("woff2"); font-weight: 400; font-display: swap; }

:root {
  --fog: #e6eaec;
  --ink: #14202b;
  /* 紙が焼けて暗くなる分、薄い文字は読めるように少しずつ濃くする */
  --sub: color-mix(in srgb, #5b6670, #2a2118 calc(var(--age, 0) * 45%));
  --rule: #c3cbd0;
  --key: #fff200;
  --gutter: clamp(20px, 4vw, 56px);
  /* 異形文字の候補も同じフォント群で描く（tools/build_glyphs.py が作るサブセット） */
  --jp: "CYO Zen", "CYO Noto", "CYO Sym", "Hiragino Sans", sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--fog);
  color: var(--ink);
  font-family: var(--jp);
  font-size: 15px;
  line-height: 1.85;
  font-feature-settings: "palt";
  line-break: strict; /* glyph.js の禁則と揃える */
  letter-spacing: 0.02em;
}

::selection { background: var(--key); color: var(--ink); }

a { color: inherit; text-underline-offset: 0.25em; text-decoration-thickness: 1px; }
a:hover { background-color: var(--key); color: var(--ink); }
a:focus-visible { outline: 2px solid var(--ink); outline-offset: 4px; border-radius: 2px; }

/* ---------- hero ---------- */
.hero {
  min-height: 72svh;
  padding: var(--gutter);
  background: var(--key);
  color: #000;
  overflow-x: clip;
  display: grid;
  grid-template-rows: 1fr auto;
  gap: 32px;
}

.mark {
  margin: 0;
  align-self: end;
  width: min(100%, 72vw);
  line-height: 0;
}
.mark svg { display: block; width: 100%; height: auto; }

.sr-only {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
}

.lede {
  margin: 0;
  max-width: 34em;
  font-size: clamp(15px, 1.25vw, 18px);
  font-weight: 700;
  line-height: 1.9;
  /* ロゴと同じく紙に押し込んだ見え方: 下縁に光 */
  text-shadow: 0 1px 0 rgba(255, 255, 255, .65);
}

.pc { display: none; }
@media (min-width: 800px) { .pc { display: inline; } }

@media (min-width: 800px) { .hero { min-height: 92svh; } .mark { width: min(100%, 62vw, calc((92svh - 260px) * 4.62)); } }

/* ---------- rows ---------- */
main { margin: 0 var(--gutter); }

.row {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px 40px;
  padding: 36px 0 48px;
  border-bottom: 1px solid var(--rule);
}

@media (min-width: 800px) {
  .row { grid-template-columns: minmax(10em, 3fr) 9fr; padding: 48px 0 64px; }
}

.row__label {
  margin: 0;
  font-size: 13px;
  font-weight: 700;
  color: var(--sub);
}

.row__body { margin: 0; padding: 0; }

.business section + section { margin-top: 32px; }
.business h3 { margin: 0 0 8px; font-size: clamp(16px, 1.5vw, 20px); font-weight: 700; line-height: 1.6; }
.business p { margin: 0; max-width: 40em; }
.business p + p { margin-top: 0.8em; }

/* works */
.works {
  list-style: none;
  margin: 0;
  padding: 0;
  columns: 2 16em;
  column-gap: 40px;
}
.works li { break-inside: avoid; padding: 3px 0; }
.works__sub { margin: 28px 0 6px; font-size: 13px; font-weight: 700; color: var(--sub); }

/* profile */
.profile div {
  display: grid;
  grid-template-columns: 6em 1fr;
  gap: 16px;
  padding: 10px 0;
  border-top: 1px solid var(--rule);
}
.profile div:first-child { border-top: 0; padding-top: 0; }
.profile dt { color: var(--sub); }
.profile dd { margin: 0; }
.aside { margin-left: 1em; font-size: 13px; font-weight: 400; color: var(--sub); }

/* contact */
.mail {
  font-family: var(--jp);
  font-weight: 700;
  font-size: clamp(32px, 6vw, 80px);
  line-height: 1.1;
  letter-spacing: -0.01em;
  text-decoration: none;
  background: linear-gradient(currentColor, currentColor) 0 100% / 100% 2px no-repeat;
  transition: background-size 240ms cubic-bezier(.2,.8,.2,1);
}
.mail:hover { background-color: var(--key); background-size: 0 2px; background-position: 100% 100%; }

.foot { padding: 32px var(--gutter) 40px; color: var(--sub); }
.foot small { font-size: 12px; }

/* ---------- aging ---------- */
/* 開いている時間で紙が褪せていく（age.js が --age を 0→1 へ上げる）。
   汚れは足さない。ムラのない色の変化だけで、黄は淡く、グレーは温かい紙の色に、インクはわずかに薄くなる */
body {
  background: color-mix(in srgb, var(--fog), #efe6d3 calc(var(--age, 0) * 85%));
  color: color-mix(in srgb, var(--ink), #5c4a36 calc(var(--age, 0) * 40%));
}
.hero {
  background: color-mix(in srgb, var(--key), #f4e9b4 calc(var(--age, 0) * 70%));
  color: color-mix(in srgb, #000, #43362a calc(var(--age, 0) * 45%));
}

/* ---------- paper ---------- */
/* ページ全体に紙の粒子とムラを重ねる。文字（インク）にも乗るので刷ったように見える。
   クリックを邪魔しないよう pointer-events: none */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 10;
  pointer-events: none;
  background: url("/paper.svg") repeat;
  background-size: 480px;
  mix-blend-mode: multiply;
  opacity: 0.1;
}

/* ---------- glyph ---------- */
/* 異形文字エフェクト用に1文字ずつ分けた span。幅は glyph.js が元の文字の幅で固定する */
.g { display: inline-block; text-align: center; white-space: pre; }
.gw { white-space: nowrap; }
.sr-only { user-select: none; }
/* 分割後は行末の誤差で1文字あふれることがあるので、幅の上限に少しだけ余裕を持たせる */
.glyph-on .business p { max-width: calc(40em + 2px); }
.glyph-on .lede { max-width: calc(34em + 2px); }