/* Javdoe: paper and ink. Off-white washi, sumi black, a vermilion seal, indigo for quiet things; Shippori Mincho
   over Zen Kaku Gothic, square corners. Laid over the engine's tokens, then the front door and pages (sm-*). */
:root {
  --bg: #f3f1ec;
  --bg-2: #e9e6de;
  --card: #fbfaf7;
  --card-2: #efece5;
  --ink: #161616;
  --ink-2: #4a4844;
  --ink-3: #8a867e;
  --line: #dcd8ce;
  --line-2: #c9c4b8;
  --brand: #c73a22;
  --brand-2: #253858;
  --grad: linear-gradient(135deg, #c73a22 0%, #a8321f 100%);
  --grad-soft: rgba(199, 58, 34, .08);
  --violet: #253858;
  --violet-soft: rgba(37, 56, 88, .1);
  --green: #3f7a4f;
  --danger: #b3261e;
  --glass: rgba(243, 241, 236, .9);
  --r-sm: 0;
  --r: 2px;
  --r-lg: 3px;
  --r-xl: 4px;
  --sh-1: none;
  --sh-2: 0 1px 0 var(--line);
  --sh-3: 0 18px 40px rgba(20, 20, 20, .12);
  --sh-brand: none;
  --font: "Zen Kaku Gothic New", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --mincho: "Shippori Mincho B1", "Yu Mincho", Georgia, serif;
  color-scheme: light;
}
h1, h2, h3, .logo-word { font-family: var(--mincho); font-weight: 800; letter-spacing: .01em; }
.btn-primary { color: #fff; }
.thread { background-color: #f6f4ef; background-image: none; }
.msg.her .bubble { background: var(--card); border: 1px solid var(--line); }
.thread-head { background: rgba(251, 250, 247, .94); }
.hw { background: var(--card-2); box-shadow: none; border: 1px solid var(--line); height: clamp(300px, 32vw, 380px); }
.hw-bg { display: none; }
.hw-portrait { width: auto; height: 64%; top: 18%; right: 7%; aspect-ratio: 1; object-fit: cover; }
.hw-slide::after { background: none; }
.hw-text { color: var(--ink); bottom: 64px; }
.hw-name .badge-ai { background: var(--violet-soft); color: var(--violet); }
.hw-ghost { color: var(--ink); box-shadow: inset 0 0 0 1px var(--line-2); }
.hw-nav .stage-arrow { background: var(--card); color: var(--ink); }
.gallery-main .photo-bars { display: none; }
.pstats { grid-template-columns: repeat(3, 1fr); }

/* ---- the front door ---- */
.sm-front { max-width: 1080px; margin: 0 auto; padding: 28px 18px 48px; }
.sm-door { display: grid; grid-template-columns: 1.1fr .9fr; gap: 34px; align-items: start; padding-bottom: 28px; border-bottom: 2px solid var(--ink); }
.sm-tag { font-size: 13px; letter-spacing: .14em; color: var(--brand); font-weight: 700; }
.sm-door h1 { font-size: clamp(32px, 4.6vw, 54px); line-height: 1.12; margin: 12px 0 16px; }
.sm-lead { color: var(--ink-2); font-size: 17px; line-height: 1.75; }
.sm-cta { display: flex; align-items: center; gap: 22px; margin-top: 24px; flex-wrap: wrap; }
.sm-plain { font-weight: 700; border-bottom: 2px solid var(--brand); padding-bottom: 2px; }
.sm-board { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--ink); }
.sm-board a { display: grid; grid-template-columns: 44px 1fr; gap: 2px 12px; align-items: center; padding: 11px 4px; border-bottom: 1px solid var(--line); }
.sm-board a:hover { background: var(--card); }
.sm-board img { grid-row: span 2; width: 44px; height: 44px; }
.sm-name { font-family: var(--mincho); font-weight: 800; font-size: 17px; }
.sm-name i { font-style: normal; color: var(--ink-3); font-family: var(--font); font-weight: 500; font-size: 14px; margin-left: 4px; }
.sm-job { color: var(--ink-3); font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sm-numbers { display: grid; grid-template-columns: repeat(4, 1fr); border-bottom: 1px solid var(--line); }
.sm-numbers p { padding: 18px 14px; color: var(--ink-2); font-size: 14px; border-right: 1px solid var(--line); }
.sm-numbers p:last-child { border-right: 0; }
.sm-numbers b { display: block; font-family: var(--mincho); font-size: 28px; color: var(--ink); }
.sm-sec { margin-top: 52px; }
.sm-sec h2, .sm-close h2, .sm-more h2 { font-size: clamp(26px, 3vw, 34px); margin-bottom: 14px; }
.sm-sec > p { color: var(--ink-2); max-width: 70ch; line-height: 1.8; }
.sm-three { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; margin: 24px 0; border-top: 1px solid var(--line); }
.sm-three > div { padding: 18px 18px 18px 0; border-right: 1px solid var(--line); }
.sm-three > div + div { padding-left: 18px; }
.sm-three > div:last-child { border-right: 0; }
.sm-three h3 { font-size: 19px; margin-bottom: 8px; }
.sm-three p { color: var(--ink-2); line-height: 1.7; font-size: 15px; }
.sm-pairs { display: grid; grid-template-columns: 220px 1fr; gap: 0; margin: 0; border-top: 1px solid var(--line); }
.sm-pairs dt { font-family: var(--mincho); font-weight: 800; padding: 14px 0; border-bottom: 1px solid var(--line); }
.sm-pairs dd { margin: 0; padding: 14px 0; color: var(--ink-2); border-bottom: 1px solid var(--line); line-height: 1.7; }
.sm-steps { counter-reset: st; list-style: none; padding: 0; margin: 0; }
.sm-steps li { counter-increment: st; display: grid; grid-template-columns: 54px 1fr; align-items: baseline; padding: 12px 0; border-bottom: 1px dashed var(--line-2); color: var(--ink-2); }
.sm-steps li::before { content: counter(st, cjk-ideographic); font-family: var(--mincho); font-size: 24px; color: var(--brand); font-weight: 800; }
.sm-qa details { border-bottom: 1px solid var(--line); padding: 14px 0; }
.sm-qa summary { font-family: var(--mincho); font-weight: 800; font-size: 18px; cursor: pointer; }
.sm-qa details p { margin-top: 8px; color: var(--ink-2); line-height: 1.75; }
.sm-close { margin-top: 56px; padding: 40px 28px; background: var(--ink); color: var(--bg); }
.sm-close p { color: #cfcac0; margin: 0 0 22px; }
.sm-more { margin-top: 42px; }
.sm-more ul { list-style: none; margin: 0; padding: 0; columns: 2; column-gap: 30px; }
.sm-more li { padding: 7px 0; border-bottom: 1px solid var(--line); break-inside: avoid; }
.sm-more a:hover { color: var(--brand); }
.sm-foot { margin-top: 34px; color: var(--ink-3); font-size: 13px; line-height: 1.9; }
.sm-foot a { color: var(--ink-2); }

/* ---- pages: story, help desk, manners, terms, privacy, diary ---- */
.sm-doc { max-width: 720px; margin: 0 auto; padding: 32px 18px 56px; }
.sm-doc h1 { font-size: clamp(32px, 4.4vw, 46px); padding-bottom: 12px; border-bottom: 2px solid var(--ink); margin-bottom: 18px; }
.sm-doc h3 { font-size: 20px; margin: 28px 0 8px; }
.sm-doc p, .sm-doc li { color: var(--ink-2); font-size: 16px; line-height: 1.8; }
.sm-doc a { color: var(--brand); border-bottom: 1px solid currentColor; }
.sm-doc ul, .sm-doc ol { padding-left: 22px; }
.sm-doc-lead { font-size: 18px !important; color: var(--ink) !important; }
.sm-doc-date { font-size: 13px !important; color: var(--ink-3) !important; }
.sm-manners li { margin-bottom: 10px; }
.sm-day { padding: 18px 0; border-bottom: 1px solid var(--line); }
.sm-date { font-family: var(--mincho); color: var(--brand); font-weight: 800; }
.sm-day h3 { margin-top: 4px; }

@media (max-width: 820px) {
  .sm-door { grid-template-columns: 1fr; }
  .sm-numbers { grid-template-columns: repeat(2, 1fr); }
  .sm-numbers p:nth-child(2) { border-right: 0; }
  .sm-three { grid-template-columns: 1fr; }
  .sm-three > div, .sm-three > div + div { padding: 16px 0; border-right: 0; border-bottom: 1px solid var(--line); }
  .sm-pairs { grid-template-columns: 1fr; }
  .sm-pairs dt { border-bottom: 0; padding-bottom: 2px; }
  .sm-more ul { columns: 1; }
}