/* ============================================================
   しんのすけ — v8「現場」
   AI現場監督の公開現場。紙白×墨×朱(赤ペン・朱書き)。
   明朝の大組み(美術) × 図面の罫と等幅数字(現場) × 実物だけ置く(AI)。
   グラデーション・絵文字・飾りの演出は使わない。
   ============================================================ */

:root {
  --paper: #fbfaf7;      /* 紙白 */
  --ink: #1b1916;        /* 墨 */
  --body-c: #4a453c;     /* 本文 */
  --note: #6e675c;       /* 注記(小さい文字はこれ以上薄くしない) */
  --shu: #c23b22;        /* 朱。画面の10%未満 */
  --hair: #dcd8ce;       /* 細罫 */
  --hair-strong: #1b1916;
  --serif: "Shippori Mincho", "Hiragino Mincho ProN", "Yu Mincho", serif;
  --sans: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Yu Gothic", sans-serif;
  --num: "Inter", "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --pad: clamp(22px, 6vw, 72px);
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html, body { overflow-x: clip; }

html { background: var(--paper); scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

body {
  background: var(--paper);
  color: var(--body-c);
  font-family: var(--sans);
  font-weight: 400;
  font-size: 16px;
  line-height: 1.95;
  letter-spacing: .02em;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

a { color: inherit; }

h1, h2, h3, p, li { text-wrap: pretty; }
.nw { white-space: nowrap; }

.wrap {
  max-width: 1080px;
  margin-inline: auto;
  padding-inline: var(--pad);
}

/* ---------- 上部(現場の表札) ---------- */

.top {
  position: relative;
  z-index: 10;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  max-width: 1080px;
  margin-inline: auto;
  padding: clamp(18px, 3vw, 28px) var(--pad);
  border-bottom: 1px solid var(--hair);
}

.brand {
  font-family: var(--serif);
  font-size: 16px;
  font-weight: 600;
  letter-spacing: .2em;
  text-decoration: none;
  color: var(--ink);
  white-space: nowrap;
  flex-shrink: 0;
}

.top nav { text-align: right; }

.top nav a {
  font-family: var(--num);
  font-weight: 400;
  font-size: 11px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--note);
  text-decoration: none;
  margin-left: clamp(12px, 2.6vw, 28px);
  padding: 10px 0;
  transition: color .25s ease;
  white-space: nowrap;
  display: inline-block;
  line-height: 1.4;
}
.top nav a:hover { color: var(--shu); }
.top nav a[aria-current="page"] {
  color: var(--ink);
  border-bottom: 1px solid var(--ink);
}

@media (max-width: 700px) {
  .top { flex-direction: column; align-items: stretch; gap: 4px; }
  .top nav { display: flex; justify-content: space-between; width: 100%; text-align: left; }
  .top nav a { font-size: 10px; letter-spacing: .12em; margin-left: 0; }
}

/* ---------- ヒーロー(名乗り) ---------- */

.hero {
  position: relative;
  padding-top: clamp(64px, 12vh, 130px);
  padding-bottom: clamp(48px, 8vh, 88px);
}

.kick,
.kicker {
  display: inline-flex;
  align-items: center;
  gap: .8em;
  font-family: var(--sans);
  font-weight: 500;
  font-size: 13px;
  letter-spacing: .3em;
  color: var(--shu);
}
.kick::before,
.kicker::before {
  content: "";
  width: 2.2em;
  height: 1px;
  background: var(--shu);
}

.hero h1 {
  margin-top: 1.4rem;
  font-family: var(--serif);
  font-size: clamp(26px, 5.2vw, 60px);
  font-weight: 700;
  line-height: 1.62;
  letter-spacing: .04em;
  font-feature-settings: "palt" 1;
  color: var(--ink);
}

.hero-body {
  margin-top: clamp(1.6rem, 3.5vh, 2.4rem);
  max-width: 40em;
  font-size: 16px;
  line-height: 2.05;
  color: var(--body-c);
}

.hero-cta {
  display: flex;
  flex-wrap: wrap;
  gap: .9rem 1rem;
  margin-top: clamp(2rem, 4.5vh, 3rem);
}

.btn {
  display: inline-block;
  font-family: var(--sans);
  font-weight: 500;
  font-size: 15px;
  letter-spacing: .12em;
  color: var(--ink);
  border: 1px solid var(--ink);
  border-radius: 2px;
  text-decoration: none;
  padding: .9em 1.9em;
  transition: background-color .25s ease, color .25s ease, border-color .25s ease;
}
.btn:hover { background: var(--ink); color: var(--paper); }
.btn.main {
  color: #fff;
  background: var(--shu);
  border-color: var(--shu);
}
.btn.main:hover { background: #9e2f1b; border-color: #9e2f1b; }
.btn:focus-visible { outline: 2px solid var(--shu); outline-offset: 3px; }

/* ---------- 数字(寸法線) ---------- */

.stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0 clamp(1.6rem, 3.5vw, 3rem);
  margin-top: clamp(2.6rem, 6vh, 4rem);
}
@media (max-width: 820px) {
  .stats { grid-template-columns: repeat(2, 1fr); gap: 2.2rem clamp(1.6rem, 4vw, 3rem); }
}

.stats > div {
  position: relative;
  padding-top: 1.4rem;
  border-top: 1px solid var(--ink);
}
/* 寸法線の両端の目盛 */
.stats > div::before,
.stats > div::after {
  content: "";
  position: absolute;
  top: -4px;
  width: 1px;
  height: 9px;
  background: var(--ink);
}
.stats > div::before { left: 0; }
.stats > div::after { right: 0; }

.stats em {
  font-style: normal;
  font-family: var(--num);
  font-weight: 400;
  font-size: clamp(32px, 4.2vw, 46px);
  letter-spacing: 0;
  line-height: 1;
  font-feature-settings: "tnum" 1;
  color: var(--ink);
  margin-right: .08em;
}
.stats .u {
  font-family: var(--sans);
  font-size: 14px;
  font-weight: 500;
  color: var(--ink);
}
.stats .k {
  display: block;
  margin-top: .6em;
  font-size: 12px;
  font-weight: 400;
  letter-spacing: .14em;
  color: var(--note);
}

/* ---------- ヒーロー現場写真 ---------- */

.hero-photo {
  margin-top: clamp(2.6rem, 6vh, 4rem);
}
.hero-photo img {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid var(--hair-strong);
  border-radius: 2px;
  background: var(--hair);
}
.hero-photo figcaption {
  display: inline-flex;
  align-items: center;
  gap: .8em;
  margin-top: .9rem;
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 400;
  letter-spacing: .14em;
  color: var(--note);
}
.hero-photo figcaption::before {
  content: "";
  width: 2.2em;
  height: 1px;
  background: var(--shu);
}

/* ---------- 章(図面の区画) ---------- */

.ch { position: relative; padding-block: clamp(56px, 9vh, 100px); }
.ch + .ch { border-top: 1px solid var(--hair); }

.ch-inner {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.ch-marker {
  display: flex;
  align-items: center;
  gap: 1.1em;
  margin-bottom: clamp(1.6rem, 4vh, 2.4rem);
}
.ch-no {
  font-family: var(--num);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .08em;
  font-feature-settings: "tnum" 1;
  color: var(--shu);
}
.ch-rule { width: 2.6em; height: 1px; background: var(--hair); }
.ch-name {
  font-family: var(--sans);
  font-weight: 500;
  font-size: 12px;
  letter-spacing: .3em;
  color: var(--shu);
}

.lead {
  font-family: var(--serif);
  font-size: clamp(22px, 2.9vw, 34px);
  font-weight: 600;
  line-height: 1.85;
  letter-spacing: .05em;
  font-feature-settings: "palt" 1;
  color: var(--ink);
}

.body {
  margin-top: 1.8rem;
  font-size: 16px;
  line-height: 2.05;
  color: var(--body-c);
  max-width: 40em;
}

.aside {
  margin-top: 2rem;
  font-size: 13px;
  letter-spacing: .08em;
  color: var(--note);
}

/* ---------- 歩み(工程表) ---------- */

.arc {
  list-style: none;
  width: 100%;
  margin-top: clamp(2.2rem, 5vh, 3.2rem);
  display: grid;
  grid-template-columns: repeat(5, 1fr);
}
.arc li {
  position: relative;
  padding: 1.2rem 1.2rem 0 0;
  border-top: 1px solid var(--ink);
}
.arc li::before {
  content: "";
  position: absolute;
  top: -4px;
  left: 0;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--paper);
  border: 1px solid var(--ink);
}
.arc li.now { border-top-color: var(--shu); }
.arc li.now::before { background: var(--shu); border-color: var(--shu); }
.arc .y {
  display: block;
  font-family: var(--num);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .06em;
  font-feature-settings: "tnum" 1;
  color: var(--note);
}
.arc li.now .y { color: var(--shu); }
.arc .t {
  display: block;
  margin-top: .5em;
  font-family: var(--serif);
  font-size: clamp(14px, 1.6vw, 17px);
  font-weight: 600;
  line-height: 1.7;
  letter-spacing: .04em;
  color: var(--ink);
}
.arc .d {
  display: block;
  margin-top: .35em;
  font-size: 12.5px;
  line-height: 1.8;
  color: var(--note);
}
@media (max-width: 820px) {
  .arc { grid-template-columns: 1fr; gap: 0; border-left: 1px solid var(--ink); }
  .arc li { border-top: 0; padding: 0 0 1.6rem 1.4rem; }
  .arc li:last-child { padding-bottom: .2rem; }
  .arc li::before { top: .55em; left: -4px; }
  .arc li.now { border-top: 0; }
}

/* ---------- いまの現場(工程ボード) ---------- */

.board {
  list-style: none;
  width: 100%;
  margin-top: clamp(2.2rem, 5vh, 3.2rem);
  border-top: 1px solid var(--ink);
}
.board li { border-bottom: 1px solid var(--hair); }
.board .row {
  display: grid;
  grid-template-columns: 9.5em 1fr;
  gap: .4em 2rem;
  padding: 1.6rem .1rem;
  align-items: baseline;
}
@media (max-width: 640px) {
  .board .row { grid-template-columns: 1fr; gap: .7em; }
}
.board a.row { text-decoration: none; transition: background-color .25s ease; }
.board a.row:hover { background: rgba(194, 59, 34, .04); }

.st {
  display: inline-flex;
  align-items: center;
  gap: .55em;
  justify-self: start;
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .18em;
  padding: .3em 1em;
  border-radius: 999px;
  white-space: nowrap;
}
.st::before { content: ""; width: 7px; height: 7px; flex-shrink: 0; }
.st.live { color: var(--shu); border: 1px solid var(--shu); }
.st.live::before { background: var(--shu); border-radius: 50%; }
.st.build { color: var(--ink); border: 1px solid var(--ink); }
.st.build::before { background: var(--ink); }
.st.run { color: var(--ink); border: 1px solid var(--hair-strong); }
.st.run::before {
  background: transparent;
  border: 1px solid var(--ink);
  border-radius: 50%;
}

.board .b-title {
  font-family: var(--serif);
  font-size: clamp(17px, 2.1vw, 21px);
  font-weight: 600;
  line-height: 1.75;
  letter-spacing: .04em;
  color: var(--ink);
}
.board .b-note {
  grid-column: 2;
  font-size: 14px;
  line-height: 1.95;
  color: var(--body-c);
  max-width: 40em;
}
.board .b-note .go {
  color: var(--shu);
  font-weight: 500;
  white-space: nowrap;
}
@media (max-width: 640px) {
  .board .b-note { grid-column: 1; }
}

/* ---------- 手がけた空間(台帳) ---------- */

.works {
  list-style: none;
  margin-top: clamp(2.2rem, 5vh, 3.2rem);
  border-top: 1px solid var(--ink);
  width: 100%;
}
.works li {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: .3em 1.6em;
  padding: 1.4rem .1rem;
  border-bottom: 1px solid var(--hair);
}
.w-place {
  font-family: var(--serif);
  font-size: 16px;
  font-weight: 600;
  letter-spacing: .08em;
  color: var(--ink);
  white-space: nowrap;
}
.w-what {
  font-size: 13px;
  letter-spacing: .1em;
  color: var(--note);
  white-space: nowrap;
}
.w-result {
  margin-left: auto;
  font-family: var(--num);
  font-feature-settings: "tnum" 1;
  font-size: 13.5px;
  letter-spacing: .04em;
  color: var(--body-c);
}
@media (max-width: 560px) {
  .w-result { margin-left: 0; width: 100%; font-size: 13px; }
}

/* ---------- 書いたもの ---------- */

.posts {
  list-style: none;
  margin-top: clamp(2.2rem, 5vh, 3.2rem);
  border-top: 1px solid var(--ink);
  width: 100%;
  max-width: 46em;
}
.posts li { border-bottom: 1px solid var(--hair); }
.posts a {
  display: flex;
  align-items: baseline;
  gap: 1.6em;
  padding: 1.35rem .1rem;
  text-decoration: none;
  transition: color .25s ease;
}
.posts time {
  font-family: var(--num);
  font-feature-settings: "tnum" 1;
  font-size: 12.5px;
  color: var(--note);
  white-space: nowrap;
}
.posts .p-title {
  font-family: var(--serif);
  font-size: clamp(15px, 1.9vw, 18px);
  font-weight: 600;
  line-height: 1.75;
  letter-spacing: .04em;
  color: var(--ink);
}
.posts a:hover .p-title { color: var(--shu); }
@media (max-width: 560px) {
  .posts a { flex-direction: column; gap: .3em; }
}

/* ---------- 署名・落款 ---------- */

.sig {
  margin-top: clamp(40px, 7vh, 64px);
  padding-top: 2.4rem;
  border-top: 1px solid var(--hair);
  max-width: 40em;
}
.sig-head {
  display: flex;
  align-items: center;
  gap: 1.4rem;
}
.sig-avatar {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  flex-shrink: 0;
  object-fit: cover;
}
.sig-name {
  font-family: var(--serif);
  font-size: 18px;
  font-weight: 600;
  letter-spacing: .2em;
  color: var(--ink);
}
.sig-role {
  margin-top: .4rem;
  font-size: 12px;
  letter-spacing: .18em;
  color: var(--note);
}
.sig-bio {
  margin-top: 1.5rem;
  font-size: 14px;
  line-height: 2.05;
  color: var(--body-c);
}

/* ---------- 導線 ---------- */

.paths {
  margin-top: clamp(40px, 7vh, 64px);
  border-top: 1px solid var(--ink);
  width: 100%;
  max-width: 46em;
}
.paths a {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1.5rem;
  padding: 1.7rem .1rem;
  border-bottom: 1px solid var(--hair);
  text-decoration: none;
  font-family: var(--serif);
  font-size: clamp(16px, 2vw, 18px);
  font-weight: 600;
  letter-spacing: .1em;
  color: var(--ink);
  transition: padding-left .3s ease, color .3s ease;
}
.paths a span {
  font-family: var(--num);
  font-weight: 400;
  font-size: 10.5px;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: var(--note);
  white-space: nowrap;
  transition: color .3s ease;
}
.paths a:hover { padding-left: .8rem; color: var(--shu); }
.paths a:hover span { color: var(--shu); }

/* ---------- 奥付 ---------- */

.dawn { position: relative; background: var(--paper); }

footer, .dawn footer, footer.plain { padding: 3.2rem 0 3.6rem; }
footer p, .dawn footer p, footer.plain p {
  font-family: var(--num);
  font-weight: 400;
  font-size: 11px;
  letter-spacing: .2em;
  color: var(--note);
}

/* ---------- 下層ページの共有補助 ---------- */

.dawn-inner { position: relative; padding-bottom: 0; }
.dawn .ch-no, .dawn .ch-name { color: var(--shu); }
.dawn .ch-rule { background: var(--hair); }
.dawn .lead { color: var(--ink); }
.dawn .body { color: var(--body-c); }

/* ============================================================
   動き: 文字は即読める。動くのは控えめなあらわれだけ。
   JS無効・動きの抑制時は最初から完成形。
   ============================================================ */

.reveal { opacity: 1; transform: none; }
.js-anim .reveal {
  opacity: 0;
  transform: translateY(10px);
  transition: opacity .55s ease, transform .55s ease;
}
.js-anim .reveal.in { opacity: 1; transform: none; }
.js-anim .reveal.d1 { transition-delay: .1s; }
.js-anim .reveal.d2 { transition-delay: .2s; }

.js-anim .draw :is(path, circle, ellipse):not(.pool) {
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
}
.js-anim .draw.in :is(path, circle, ellipse):not(.pool) {
  stroke-dashoffset: 0;
  transition: stroke-dashoffset .6s cubic-bezier(.4, 0, .3, 1);
}
.js-anim .draw .pool { opacity: 0; }
.js-anim .draw.in .pool { opacity: 1; transition: opacity 1.3s ease 1.2s; }

@media (prefers-reduced-motion: reduce) {
  .js-anim .reveal { opacity: 1; transform: none; transition: none; }
  .paths a, .paths a span, .top nav a, .btn, .posts a { transition: none; }
}