/* ============================================================
   外から — общий лист стилей
   Токены → база → компоненты главной → компоненты статьи
   Палитра: токийская ночь сквозь стекло (не крем+терракота)
   ============================================================ */

:root{
  --sumi:#16181D;        /* indigo-чёрный, фон */
  --sumi-soft:#1E2128;   /* приподнятые блоки */
  --kiri:#D9DBD6;        /* туман, основной текст */
  --kiri-dim:#7E8389;    /* приглушённый текст (на основном фоне sumi: 4.65:1 AA) */
  --kiri-dim-2:#8E9399;  /* приглушённый текст на приподнятых блоках sumi-soft (5.2:1 AA) */
  --glass:rgba(217,219,214,.06);
  --hairline:rgba(217,219,214,.14);
  --neon:#3DD4E0;        /* cyan вывески конбини в дождь — единственный акцент */
  --neon-dim:rgba(61,212,224,.18);

  --display:'Manrope',system-ui,sans-serif;
  --jp:'Noto Serif JP',serif;
  --mono:'JetBrains Mono',monospace;

  --bp-md:48rem;
  --bp-lg:64rem;

  --ease:cubic-bezier(.22,1,.36,1);
}

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

html{scroll-behavior:smooth;}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;}
  *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important;}
}

body{
  margin:0;background:var(--sumi);color:var(--kiri);
  font-family:var(--display);font-weight:400;
  font-size:clamp(1rem,.95rem + .3vw,1.125rem);line-height:1.65;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  overflow-x:hidden;
}

a{color:inherit;}
::selection{background:var(--neon);color:var(--sumi);}
:focus-visible{outline:2px solid var(--neon);outline-offset:3px;border-radius:2px;}

.skip{position:absolute;left:-999px;top:0;background:var(--neon);color:var(--sumi);padding:.6rem 1rem;z-index:100;font-weight:700;}
.skip:focus{left:0;}

.wrap{width:min(100% - 2.5rem,76rem);margin-inline:auto;}
.narrow{width:min(100% - 2.5rem,42rem);margin-inline:auto;}

/* ---------- Header (общий) ---------- */
header{position:sticky;top:0;z-index:50;backdrop-filter:blur(12px);background:rgba(22,24,29,.72);border-bottom:1px solid var(--hairline);}
.bar{display:flex;align-items:center;justify-content:space-between;padding-block:1rem;}
.logo{font-family:var(--jp);font-weight:900;font-size:1.5rem;text-decoration:none;letter-spacing:.04em;line-height:1;display:flex;align-items:baseline;gap:.55rem;}
.logo small{font-family:var(--mono);font-size:.66rem;font-weight:400;color:var(--kiri-dim);letter-spacing:.18em;text-transform:uppercase;}
nav ul{display:flex;gap:.25rem;list-style:none;margin:0;padding:0;flex-wrap:wrap;}
nav a{text-decoration:none;font-size:.82rem;font-weight:500;padding:.5rem .7rem;color:var(--kiri-dim);transition:color .25s var(--ease);white-space:nowrap;display:inline-flex;align-items:baseline;gap:.4rem;}
nav a:hover,nav a[aria-current="page"]{color:var(--kiri);}
nav a[aria-current="page"] .jp{color:var(--neon);}
nav a .jp{font-family:var(--jp);font-size:.92rem;color:var(--kiri-dim);transition:color .25s var(--ease);}
nav a:hover .jp{color:var(--neon);}

/* lang switch (главная) */
.lang{display:inline-flex;gap:0;border:1px solid var(--hairline);border-radius:2px;overflow:hidden;}
.lang a{display:inline-flex;align-items:center;font-family:var(--mono);font-size:.7rem;letter-spacing:.08em;background:transparent;color:var(--kiri-dim);text-decoration:none;cursor:pointer;padding:.55rem .7rem;min-height:2.75rem;transition:all .2s var(--ease);}
.lang a[lang="ja"]{font-family:var(--jp);font-size:.82rem;}
.lang a[aria-current="true"]{background:var(--neon);color:var(--sumi);}
.lang a:not([aria-current="true"]):hover{color:var(--kiri);}

/* ---------- Hero: 外 сквозь стекло (главная) ---------- */
.hero{position:relative;padding-block:clamp(3rem,10vh,7rem) clamp(4rem,12vh,9rem);}
.hero-grid{display:grid;gap:2rem;grid-template-columns:1fr;align-items:center;}
@media (min-width:48rem){.hero-grid{grid-template-columns:1.05fr 1fr;gap:3rem;}}
.glyph-stage{position:relative;display:grid;place-items:center;min-height:38vh;}
.glyph{font-family:var(--jp);font-weight:900;font-size:clamp(13rem,42vw,30rem);line-height:.8;color:transparent;-webkit-text-stroke:1.5px var(--kiri-dim);text-stroke:1.5px var(--kiri-dim);position:relative;user-select:none;background:linear-gradient(160deg,var(--neon-dim),transparent 60%);-webkit-background-clip:text;background-clip:text;}
.glyph::after{content:'soto kara';position:absolute;inset:0;display:grid;place-items:center;font-family:var(--mono);font-size:.85rem;letter-spacing:.5em;color:var(--kiri-dim);-webkit-text-fill-color:var(--kiri-dim);text-transform:uppercase;pointer-events:none;}
.hero-text .eyebrow{font-family:var(--mono);font-size:.72rem;letter-spacing:.24em;text-transform:uppercase;color:var(--neon);margin:0 0 1.4rem;}
.hero-text h1{font-size:clamp(1.9rem,1.4rem + 2.4vw,3.1rem);line-height:1.12;font-weight:800;letter-spacing:-.02em;margin:0 0 1.5rem;max-width:18ch;}
.hero-text h1 em{font-style:normal;color:var(--neon);}
.hero-text p{color:var(--kiri-dim);max-width:42ch;margin:0 0 2rem;}
.hero-text .jp-line{font-family:var(--jp);font-size:1.05rem;color:var(--kiri);line-height:1.9;border-inline-start:2px solid var(--neon);padding-inline-start:1rem;margin:0 0 2rem;}
.cta{display:inline-flex;align-items:center;gap:.6rem;text-decoration:none;font-weight:700;font-size:.92rem;color:var(--sumi);background:var(--neon);padding:.85rem 1.4rem;border-radius:2px;transition:transform .25s var(--ease),box-shadow .25s var(--ease);}
.cta:hover{transform:translateY(-2px);box-shadow:0 8px 24px var(--neon-dim);}
.cta:hover .arrow{transform:translateX(4px);}
.arrow{transition:transform .25s var(--ease);}

/* ---------- Sections grid (главная) ---------- */
.sections{padding-block:clamp(3rem,8vh,6rem);border-top:1px solid var(--hairline);}
.sec-head{display:flex;align-items:baseline;justify-content:space-between;flex-wrap:wrap;gap:1rem;margin-bottom:3rem;}
.sec-head h2{font-size:clamp(1.4rem,1.1rem + 1.2vw,2rem);font-weight:800;letter-spacing:-.02em;margin:0;}
.sec-head .note{font-family:var(--mono);font-size:.74rem;color:var(--kiri-dim);max-width:36ch;}
.sec-head .note.lang-only{margin-top:-1.5rem;color:var(--kiri-dim-2);}
.cards{display:grid;gap:1px;background:var(--hairline);border:1px solid var(--hairline);}
@media (min-width:48rem){.cards{grid-template-columns:repeat(2,1fr);}}
.card{background:var(--sumi);padding:clamp(1.6rem,4vw,2.6rem);text-decoration:none;color:inherit;position:relative;display:flex;flex-direction:column;gap:1rem;transition:background .3s var(--ease);min-height:17rem;}
.card:hover{background:var(--sumi-soft);}
.card .idx{font-family:var(--mono);font-size:.74rem;color:var(--neon);letter-spacing:.1em;}
.card .titles{display:flex;align-items:baseline;gap:.8rem;flex-wrap:wrap;}
.card .titles h3{font-size:1.6rem;font-weight:800;margin:0;letter-spacing:-.01em;}
.card .titles .jp{font-family:var(--jp);font-size:1.7rem;font-weight:600;color:var(--kiri-dim);transition:color .3s var(--ease);}
.card:hover .titles .jp{color:var(--neon);}
.card .lens{font-family:var(--mono);font-size:.72rem;color:var(--kiri-dim);text-transform:uppercase;letter-spacing:.12em;}
.card p{color:var(--kiri-dim);margin:0;font-size:.96rem;line-height:1.6;}
.card .read{margin-top:auto;font-weight:700;font-size:.86rem;color:var(--kiri);display:inline-flex;align-items:center;gap:.5rem;}
.card:hover .read .arrow{transform:translateX(4px);}

/* ---------- Manifest strip (главная) ---------- */
.manifest{padding-block:clamp(4rem,10vh,7rem);border-top:1px solid var(--hairline);}
.manifest blockquote{margin:0;font-family:var(--jp);font-weight:300;font-size:clamp(1.3rem,1rem + 1.8vw,2.2rem);line-height:1.7;max-width:26ch;}
.manifest .src{font-family:var(--mono);font-size:.74rem;color:var(--kiri-dim);margin-top:1.6rem;letter-spacing:.06em;}
.manifest .src em{color:var(--neon);font-style:normal;}
.mix-test{margin-top:2.5rem;padding:1.2rem 1.4rem;border:1px dashed var(--hairline);border-radius:2px;font-size:.98rem;color:var(--kiri);line-height:1.9;}
.mix-test .jp{font-family:var(--jp);}
.mix-test code{font-family:var(--mono);color:var(--neon);font-size:.9em;}

/* ---------- Breadcrumb + page head (статья) ---------- */
.crumb{font-family:var(--mono);font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--kiri-dim);padding-block:2rem .5rem;}
.crumb a{text-decoration:none;color:var(--kiri-dim);}
.crumb a:hover{color:var(--neon);}
.crumb span{color:var(--neon);}
.phead{padding-block:1rem clamp(3rem,7vh,5rem);position:relative;}
.phead .glyph-bg{position:absolute;right:-2vw;top:-4vh;font-family:var(--jp);font-weight:900;font-size:clamp(12rem,30vw,24rem);line-height:.8;color:transparent;-webkit-text-stroke:1px var(--hairline);user-select:none;pointer-events:none;z-index:0;}
.phead .inner{position:relative;z-index:1;}
.phead .idx{font-family:var(--mono);font-size:.78rem;letter-spacing:.18em;color:var(--neon);}
.phead h1{font-size:clamp(2.2rem,1.6rem + 3vw,4rem);font-weight:800;letter-spacing:-.025em;line-height:1.05;margin:1rem 0 1.2rem;}
.phead h1 .jp{font-family:var(--jp);font-weight:600;color:var(--kiri-dim);margin-inline-start:.6rem;}
.phead .lead{font-size:clamp(1.1rem,1rem + .6vw,1.35rem);color:var(--kiri);max-width:40ch;line-height:1.55;}

/* ---------- Thesis (статья) ---------- */
.thesis{border-top:1px solid var(--hairline);border-bottom:1px solid var(--hairline);padding-block:2.5rem;}
.thesis .narrow{display:grid;gap:1.5rem;}
.thesis .obs{font-family:var(--mono);font-size:.74rem;letter-spacing:.1em;text-transform:uppercase;color:var(--kiri-dim);}
.thesis p{margin:0;font-family:var(--jp);font-weight:300;font-size:clamp(1.3rem,1.1rem + 1vw,1.8rem);line-height:1.6;}
.thesis p em{font-style:normal;color:var(--neon);}

/* ---------- Article body (статья) ---------- */
article{padding-block:clamp(3rem,7vh,5rem);}
article h2{font-size:clamp(1.5rem,1.2rem + 1.4vw,2.2rem);font-weight:800;letter-spacing:-.02em;margin:3rem 0 1.2rem;line-height:1.15;}
article h2:first-child{margin-top:0;}
article h2 .num{font-family:var(--mono);font-size:.7em;color:var(--neon);margin-inline-end:.6rem;font-weight:500;}
article p{margin:0 0 1.4rem;color:var(--kiri);}
article p.dim{color:var(--kiri-dim);}
article strong{color:var(--kiri);font-weight:700;}
article .jp{font-family:var(--jp);}
article code{font-family:var(--mono);font-size:.88em;color:var(--neon);background:var(--glass);padding:.1em .4em;border-radius:2px;}

/* ---------- Diagram (статья, сигнатура) ---------- */
.diagram{margin:3rem 0;border:1px solid var(--hairline);background:linear-gradient(180deg,var(--sumi-soft),var(--sumi));border-radius:2px;overflow:hidden;}
.diagram figcaption{font-family:var(--mono);font-size:.74rem;color:var(--kiri-dim);padding:1rem 1.4rem;border-top:1px solid var(--hairline);letter-spacing:.04em;}
.diagram figcaption b{color:var(--neon);font-weight:500;}
.diagram svg{display:block;width:100%;height:auto;}
.node-label{font-family:var(--mono);font-size:11px;fill:var(--kiri);}
.node-jp{font-family:'Noto Serif JP',serif;font-size:15px;font-weight:600;fill:var(--kiri);}
.node-sub{font-family:var(--mono);font-size:9px;fill:var(--kiri-dim);letter-spacing:.05em;}
.edge{stroke:var(--kiri-dim);stroke-width:1;fill:none;}
.edge-hot{stroke:var(--neon);stroke-width:1.5;fill:none;stroke-dasharray:4 4;}
.box{fill:var(--sumi-soft);stroke:var(--hairline);stroke-width:1;}
.box-hub{fill:var(--sumi);stroke:var(--neon);stroke-width:1.5;}

/* ---------- Spec table (статья) ---------- */
.spec{margin:3rem 0;border:1px solid var(--hairline);border-radius:2px;overflow:hidden;}
.spec table{width:100%;border-collapse:collapse;font-size:.92rem;}
.spec caption{text-align:start;font-family:var(--mono);font-size:.74rem;letter-spacing:.1em;text-transform:uppercase;color:var(--kiri-dim-2);padding:1rem 1.2rem;background:var(--sumi-soft);border-bottom:1px solid var(--hairline);}
.spec th{text-align:start;font-family:var(--mono);font-size:.7rem;letter-spacing:.08em;text-transform:uppercase;color:var(--kiri-dim);font-weight:400;padding:.9rem 1.2rem;border-bottom:1px solid var(--hairline);}
.spec td{padding:1rem 1.2rem;border-bottom:1px solid var(--hairline);vertical-align:top;color:var(--kiri);}
.spec tr:last-child td{border-bottom:none;}
.spec td:first-child{font-family:var(--jp);color:var(--neon);white-space:nowrap;}
.spec td .en{display:block;font-family:var(--mono);font-size:.72rem;color:var(--kiri-dim);margin-top:.2rem;}

/* ---------- Pull-quote (статья) ---------- */
.pull{margin:3rem 0;padding-inline-start:1.5rem;border-inline-start:2px solid var(--neon);}
.pull p{font-family:var(--jp);font-weight:300;font-size:clamp(1.2rem,1rem + 1vw,1.6rem);line-height:1.6;color:var(--kiri);margin:0;}

/* ---------- Caveat (статья) ---------- */
.caveat{margin-top:3rem;padding:1.4rem 1.6rem;border:1px dashed var(--hairline);border-radius:2px;}
.caveat--spaced{margin-top:3rem;}
.caveat .tag{font-family:var(--mono);font-size:.7rem;letter-spacing:.12em;text-transform:uppercase;color:var(--neon);}
.caveat p{margin:.6rem 0 0;color:var(--kiri-dim);font-size:.95rem;}

/* ---------- Pager (статья) ---------- */
.pager{border-top:1px solid var(--hairline);padding-block:2.5rem;display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;}
.pager a{text-decoration:none;display:flex;flex-direction:column;gap:.3rem;padding:1rem 1.2rem;border:1px solid var(--hairline);border-radius:2px;transition:border-color .25s var(--ease),background .25s var(--ease);min-width:13rem;}
.pager a:hover{border-color:var(--neon);background:var(--sumi-soft);}
.pager .dir{font-family:var(--mono);font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;color:var(--kiri-dim);}
.pager .ttl{font-weight:700;display:flex;align-items:baseline;gap:.5rem;}
.pager .ttl .jp{font-family:var(--jp);color:var(--neon);font-weight:600;}
.pager .next{text-align:end;align-items:flex-end;}

/* ---------- Footer (общий) ---------- */
footer{border-top:1px solid var(--hairline);padding-block:3rem;}
.foot{display:flex;justify-content:space-between;align-items:flex-start;flex-wrap:wrap;gap:1.5rem;}
.foot .col h4{font-family:var(--mono);font-size:.72rem;letter-spacing:.18em;text-transform:uppercase;color:var(--kiri-dim);margin:0 0 .8rem;font-weight:400;}
.foot a{display:block;text-decoration:none;color:var(--kiri-dim);font-size:.9rem;padding:.2rem 0;transition:color .2s var(--ease);}
.foot a:hover{color:var(--neon);}
.foot .sig{font-family:var(--jp);font-size:1.3rem;font-weight:900;}
.foot .meta{font-family:var(--mono);font-size:.7rem;color:var(--kiri-dim);margin-top:.6rem;}

/* ---------- Reveal on scroll (общий) ---------- */
.reveal{opacity:0;transform:translateY(20px);transition:opacity .7s var(--ease),transform .7s var(--ease);}
.reveal.in{opacity:1;transform:none;}
@media (prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none;}}

/* ============================================================
   Тишина · 静寂 — страница-контрапункт к «Системам».
   Минимализм: вес несёт ритм пустот, а не украшения.
   Те же токены, другая интонация: больше воздуха, медленнее темп.
   ============================================================ */

/* фоновый глиф 静 — почти растворён, на грани видимости (не контур, как 外) */
.sil-head{position:relative;padding-block:clamp(4rem,16vh,11rem) clamp(3rem,9vh,6rem);overflow:hidden;}
.sil-head .ghost{position:absolute;inset:0;display:grid;place-items:center;font-family:var(--jp);font-weight:300;font-size:clamp(18rem,50vw,40rem);line-height:1;color:var(--kiri);opacity:.035;user-select:none;pointer-events:none;z-index:0;}
.sil-head .inner{position:relative;z-index:1;}
.sil-head .idx{font-family:var(--mono);font-size:.78rem;letter-spacing:.2em;color:var(--neon);text-transform:uppercase;}
.sil-head h1{font-size:clamp(2.2rem,1.6rem + 3vw,4rem);font-weight:300;letter-spacing:-.02em;line-height:1.1;margin:1.2rem 0 0;}
.sil-head h1 .jp{font-family:var(--jp);font-weight:300;color:var(--kiri-dim);margin-inline-start:.6rem;}

/* поток моментов: вместо нумерации — временные/пространственные метки.
   порядок здесь НЕ несёт смысла (в отличие от ① ② ③ в «Системах»). */
.moments{padding-block:clamp(2rem,6vh,4rem);}
.moment{display:grid;gap:1.5rem;padding-block:clamp(3rem,10vh,7rem);}
@media (min-width:48rem){.moment{grid-template-columns:9rem 1fr;gap:3rem;}}
.moment + .moment{border-top:1px solid var(--hairline);}
.moment .when{font-family:var(--mono);font-size:.74rem;letter-spacing:.1em;color:var(--kiri-dim);text-transform:uppercase;line-height:1.8;}
.moment .when .jp{display:block;font-family:var(--jp);font-size:1.4rem;color:var(--neon);letter-spacing:0;margin-bottom:.4rem;text-transform:none;}
.moment .body p{font-size:clamp(1.15rem,1rem + .7vw,1.5rem);font-weight:300;line-height:1.75;color:var(--kiri);margin:0 0 1.4rem;max-width:34ch;}
.moment .body p:last-child{margin-bottom:0;}
.moment .body .soft{color:var(--kiri-dim);font-size:1.05rem;line-height:1.7;}

/* кода страницы — одна строка, максимум воздуха вокруг */
.sil-coda{padding-block:clamp(5rem,16vh,11rem);text-align:center;border-top:1px solid var(--hairline);}
.sil-coda p{font-family:var(--jp);font-weight:300;font-size:clamp(1.4rem,1.1rem + 1.6vw,2.4rem);line-height:1.6;color:var(--kiri);max-width:24ch;margin:0 auto;}
.sil-coda .romaji{font-family:var(--mono);font-size:.74rem;letter-spacing:.18em;color:var(--kiri-dim);text-transform:uppercase;margin-top:2rem;}

/* медленный reveal — на «Тишине» темп ощутимо спокойнее */
.reveal-slow{opacity:0;transform:translateY(14px);transition:opacity 1.1s var(--ease),transform 1.1s var(--ease);}
.reveal-slow.in{opacity:1;transform:none;}
@media (prefers-reduced-motion:reduce){.reveal-slow{opacity:1;transform:none;}}

/* ============================================================
   Стол · 食卓 — третий регистр: тактильный, про сезон и точность.
   Сигнатура — колесо сезонов (旬). Вся смелость здесь; остальное тихо.
   ============================================================ */

/* page head — как у статьи, но глиф-фон тёплого начертания */
.tbl-head{padding-block:clamp(3rem,8vh,6rem) clamp(2rem,5vh,3.5rem);position:relative;}
.tbl-head .idx{font-family:var(--mono);font-size:.78rem;letter-spacing:.18em;color:var(--neon);}
.tbl-head h1{font-size:clamp(2.2rem,1.6rem + 3vw,4rem);font-weight:800;letter-spacing:-.025em;line-height:1.05;margin:1rem 0 1.2rem;}
.tbl-head h1 .jp{font-family:var(--jp);font-weight:600;color:var(--kiri-dim);margin-inline-start:.6rem;}
.tbl-head .lead{font-size:clamp(1.1rem,1rem + .6vw,1.35rem);color:var(--kiri);max-width:42ch;line-height:1.55;}

/* ---- Сигнатура: колесо сезонов 旬 ---- */
.shun{margin:clamp(2rem,6vh,4rem) 0;border-top:1px solid var(--hairline);border-bottom:1px solid var(--hairline);padding-block:clamp(2.5rem,7vh,5rem);}
.shun .shun-grid{display:grid;gap:2.5rem;align-items:center;grid-template-columns:1fr;}
@media (min-width:52rem){.shun .shun-grid{grid-template-columns:minmax(0,1fr) 20rem;gap:3.5rem;}}
.shun figure{margin:0;width:100%;max-width:34rem;margin-inline:auto;}
.shun svg{display:block;width:100%;height:auto;overflow:visible;}
.shun .wedge{fill:var(--sumi-soft);stroke:var(--sumi);stroke-width:1;cursor:pointer;transition:fill .25s var(--ease);}
.shun .wedge:hover,.shun .wedge:focus-visible,.shun .wedge.active{fill:var(--neon-dim);outline:none;}
.shun .month-lbl{font-family:var(--mono);font-size:8.5px;fill:var(--kiri-dim);pointer-events:none;}
.shun .hub-jp{font-family:'Noto Serif JP',serif;font-size:30px;font-weight:600;fill:var(--neon);pointer-events:none;}
.shun .hub-sub{font-family:var(--mono);font-size:8px;fill:var(--kiri-dim);letter-spacing:.12em;pointer-events:none;}

/* панель деталей выбранного месяца */
.shun .detail{background:var(--sumi-soft);border:1px solid var(--hairline);border-radius:2px;padding:1.5rem 1.6rem;min-height:11rem;}
.shun .detail .mon{font-family:var(--mono);font-size:.74rem;letter-spacing:.14em;text-transform:uppercase;color:var(--neon);}
.shun .detail .mon .jp{font-family:var(--jp);font-size:1.5rem;color:var(--kiri);display:block;margin-top:.3rem;letter-spacing:0;}
.shun .detail ul{list-style:none;margin:1rem 0 0;padding:0;display:flex;flex-direction:column;gap:.55rem;}
.shun .detail li{display:flex;align-items:baseline;gap:.6rem;font-size:.95rem;color:var(--kiri);}
.shun .detail li .jp{font-family:var(--jp);color:var(--neon);font-size:1.05rem;min-width:3.2em;}
.shun figcaption{font-family:var(--mono);font-size:.72rem;color:var(--kiri-dim);margin-top:1.5rem;padding-inline:.15rem;letter-spacing:.04em;line-height:1.7;text-wrap:pretty;}
.shun figcaption b{color:var(--neon);font-weight:500;}

/* ---- регионы: не последовательность → без нумерации ---- */
.regions{padding-block:clamp(2.5rem,7vh,4.5rem);}
.regions h2,.kaiseki h2{font-size:clamp(1.5rem,1.2rem + 1.4vw,2.2rem);font-weight:800;letter-spacing:-.02em;margin:0 0 1.5rem;}
.regions .grid{display:grid;gap:1px;background:var(--hairline);border:1px solid var(--hairline);}
@media (min-width:46rem){.regions .grid{grid-template-columns:repeat(3,1fr);}}
.region{background:var(--sumi);padding:1.6rem 1.5rem;display:flex;flex-direction:column;gap:.7rem;}
.region .name{display:flex;align-items:baseline;gap:.6rem;}
.region .name .jp{font-family:var(--jp);font-size:1.5rem;font-weight:600;color:var(--neon);}
.region .name h3{font-size:1.1rem;font-weight:700;margin:0;}
.region .trait{font-family:var(--mono);font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;color:var(--kiri-dim);}
.region p{margin:0;color:var(--kiri-dim);font-size:.94rem;line-height:1.6;}

/* ---- кайсэки: ЭТО последовательность → нумерация оправдана ---- */
.kaiseki{padding-block:clamp(2.5rem,7vh,4.5rem);border-top:1px solid var(--hairline);}
.kaiseki .intro{color:var(--kiri-dim);max-width:46ch;margin:0 0 2.5rem;}
.course{display:grid;gap:1rem;padding-block:1.4rem;border-top:1px solid var(--hairline);grid-template-columns:2.5rem 1fr;}
.course:first-of-type{border-top:none;}
@media (min-width:46rem){.course{grid-template-columns:2.5rem 10rem 1fr;gap:1.5rem;align-items:baseline;}}
.course .no{font-family:var(--mono);font-size:.8rem;color:var(--neon);}
.course .nm{display:flex;flex-direction:column;gap:.2rem;}
.course .nm .jp{font-family:var(--jp);font-size:1.15rem;color:var(--kiri);}
.course .nm .ro{font-family:var(--mono);font-size:.7rem;letter-spacing:.08em;color:var(--kiri-dim);text-transform:uppercase;}
.course .desc{color:var(--kiri-dim);font-size:.94rem;line-height:1.6;grid-column:1 / -1;}
@media (min-width:46rem){.course .desc{grid-column:3;}}

/* ============================================================
   Чужой · 外人 — финал. Не про вход внутрь, а про границу.
   Сигнатура — порог: черта, которую текст не переходит.
   Самый сдержанный регистр. Кольцо замыкается с главной (外).
   ============================================================ */

/* head: 外 возвращается, но как контур-черта на краю, не в центре */
.str-head{position:relative;padding-block:clamp(4rem,14vh,9rem) clamp(2.5rem,7vh,5rem);overflow:hidden;}
.str-head .edge-glyph{position:absolute;right:-3vw;top:50%;transform:translateY(-50%);font-family:var(--jp);font-weight:900;font-size:clamp(14rem,34vw,28rem);line-height:.8;color:transparent;-webkit-text-stroke:1px var(--hairline);user-select:none;pointer-events:none;z-index:0;}
.str-head .inner{position:relative;z-index:1;}
.str-head .idx{font-family:var(--mono);font-size:.78rem;letter-spacing:.2em;color:var(--neon);text-transform:uppercase;}
.str-head h1{font-size:clamp(2.2rem,1.6rem + 3vw,4rem);font-weight:800;letter-spacing:-.025em;line-height:1.05;margin:1rem 0 1.2rem;}
.str-head h1 .jp{font-family:var(--jp);font-weight:600;color:var(--kiri-dim);margin-inline-start:.6rem;}
.str-head .lead{font-size:clamp(1.1rem,1rem + .6vw,1.35rem);color:var(--kiri);max-width:44ch;line-height:1.55;}

/* ---- Порог: то, что можешь | черта | то, что нет ---- */
.threshold{padding-block:clamp(2.5rem,7vh,5rem);}
.threshold .row{display:grid;gap:1.5rem;grid-template-columns:1fr;}
@media (min-width:50rem){.threshold .row{grid-template-columns:1fr 1px 1fr;gap:0;align-items:stretch;}}
.threshold .side{padding:1.8rem 0;}
@media (min-width:50rem){.threshold .side{padding:2rem 2.5rem;}}
.threshold .line{display:none;background:linear-gradient(180deg,transparent,var(--neon) 20%,var(--neon) 80%,transparent);}
@media (min-width:50rem){.threshold .line{display:block;}}
/* на мобиле черта — горизонтальная между блоками */
.threshold .side + .side{border-top:1px solid var(--neon-dim);}
@media (min-width:50rem){.threshold .side + .side{border-top:none;}}
.threshold .tag{font-family:var(--mono);font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--kiri-dim);margin-bottom:1.4rem;}
.threshold .can .tag{color:var(--neon);}
.threshold .cannot .tag{color:var(--kiri-dim);}
.threshold ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:1.1rem;}
.threshold li{font-size:1.02rem;line-height:1.6;color:var(--kiri);}
.threshold .cannot li{color:var(--kiri-dim);}
.threshold li .jp{font-family:var(--jp);color:var(--neon);font-size:1.1rem;margin-inline-end:.5rem;}
.threshold .cannot li .jp{color:var(--kiri-dim);}

/* ---- Текстовые блоки финала — узкая колонка, прямая речь ---- */
.str-body{padding-block:clamp(2rem,6vh,4rem);border-top:1px solid var(--hairline);}
.str-body .narrow{display:flex;flex-direction:column;gap:1.6rem;}
.str-body h2{font-size:clamp(1.4rem,1.1rem + 1.2vw,2rem);font-weight:800;letter-spacing:-.02em;margin:1.5rem 0 0;}
.str-body h2:first-child{margin-top:0;}
.str-body p{margin:0;color:var(--kiri);line-height:1.75;}
.str-body p.dim{color:var(--kiri-dim);}
.str-body strong{color:var(--kiri);font-weight:700;}
.str-body .jp{font-family:var(--jp);}

/* ---- Кода: гайдзин принят, но не растворён ---- */
.str-coda{padding-block:clamp(4rem,12vh,8rem);text-align:center;border-top:1px solid var(--hairline);}
.str-coda .jp-big{font-family:var(--jp);font-weight:300;font-size:clamp(1.6rem,1.2rem + 2vw,2.8rem);line-height:1.5;color:var(--kiri);max-width:28ch;margin:0 auto 1.6rem;}
.str-coda .ru{color:var(--kiri-dim);max-width:34ch;margin:0 auto;line-height:1.7;}
.str-coda .sig-line{font-family:var(--mono);font-size:.74rem;letter-spacing:.16em;text-transform:uppercase;color:var(--neon);margin-top:2.5rem;}

/* ============================================================
   Об авторе · 著者 — пятый регистр: личный, но сдержанный.
   Не резюме с буллетами, а связь профессии и взгляда.
   Сигнатура — портрет-плашка с мотивом 外 (принадлежность «снаружи»).
   ============================================================ */

.abt-head{padding-block:clamp(3rem,8vh,6rem) clamp(2rem,5vh,3.5rem);}
.abt-head .idx{font-family:var(--mono);font-size:.78rem;letter-spacing:.18em;color:var(--neon);text-transform:uppercase;}
.abt-head h1{font-size:clamp(2.2rem,1.6rem + 3vw,4rem);font-weight:800;letter-spacing:-.025em;line-height:1.05;margin:1rem 0 1.2rem;}
.abt-head h1 .jp{font-family:var(--jp);font-weight:600;color:var(--kiri-dim);margin-inline-start:.6rem;}
.abt-head .lead{font-size:clamp(1.1rem,1rem + .6vw,1.35rem);color:var(--kiri);max-width:46ch;line-height:1.55;}

/* портрет-плашка: фото + имя + роль */
.abt-card{display:grid;gap:2rem;grid-template-columns:1fr;align-items:start;border-top:1px solid var(--hairline);border-bottom:1px solid var(--hairline);padding-block:clamp(2.5rem,7vh,4.5rem);}
@media (min-width:46rem){.abt-card{grid-template-columns:14rem 1fr;gap:3rem;}}
.abt-portrait{position:relative;aspect-ratio:3/4;max-width:14rem;background:var(--sumi-soft);border:1px solid var(--hairline);border-radius:2px;overflow:hidden;display:grid;place-items:center;}
.abt-portrait img{width:100%;height:100%;object-fit:cover;display:block;}
/* плейсхолдер, пока фото нет: контурный 外 */
.abt-portrait .ph{font-family:var(--jp);font-weight:900;font-size:7rem;color:transparent;-webkit-text-stroke:1px var(--kiri-dim);user-select:none;}
.abt-portrait .ph-note{position:absolute;bottom:.6rem;left:0;right:0;text-align:center;font-family:var(--mono);font-size:.62rem;letter-spacing:.1em;color:var(--kiri-dim);text-transform:uppercase;}
.abt-bio .name{font-size:1.6rem;font-weight:800;letter-spacing:-.01em;margin:0 0 .3rem;}
.abt-bio .role{font-family:var(--mono);font-size:.78rem;letter-spacing:.08em;color:var(--neon);text-transform:uppercase;margin:0 0 1.4rem;}
.abt-bio p{color:var(--kiri-dim);margin:0 0 1.1rem;line-height:1.7;max-width:50ch;}
.abt-bio p strong{color:var(--kiri);font-weight:700;}

/* «почему инженер видит так» — связь профессии и взгляда */
.abt-why{padding-block:clamp(2.5rem,7vh,4.5rem);}
.abt-why h2{font-size:clamp(1.4rem,1.1rem + 1.2vw,2rem);font-weight:800;letter-spacing:-.02em;margin:0 0 1.5rem;}
.abt-why .narrow{display:flex;flex-direction:column;gap:1.4rem;}
.abt-why p{margin:0;color:var(--kiri);line-height:1.75;}
.abt-why p.dim{color:var(--kiri-dim);}
.abt-why .jp{font-family:var(--jp);color:var(--neon);}

/* три «зачем» — карточки без нумерации (не последовательность) */
.abt-purpose{padding-block:clamp(2.5rem,7vh,4.5rem);border-top:1px solid var(--hairline);}
.abt-purpose h2{font-size:clamp(1.4rem,1.1rem + 1.2vw,2rem);font-weight:800;letter-spacing:-.02em;margin:0 0 1.8rem;}
.abt-purpose .grid{display:grid;gap:1px;background:var(--hairline);border:1px solid var(--hairline);}
@media (min-width:46rem){.abt-purpose .grid{grid-template-columns:repeat(3,1fr);}}
.abt-purpose .why{background:var(--sumi);padding:1.6rem 1.5rem;display:flex;flex-direction:column;gap:.7rem;}
.abt-purpose .why .jp{font-family:var(--jp);font-size:1.5rem;font-weight:600;color:var(--neon);}
.abt-purpose .why h3{font-size:1.05rem;font-weight:700;margin:0;}
.abt-purpose .why p{margin:0;color:var(--kiri-dim);font-size:.94rem;line-height:1.6;}

/* контакт — без формы-болтовни, прямые ссылки */
.abt-contact{padding-block:clamp(2.5rem,7vh,4.5rem);border-top:1px solid var(--hairline);}
.abt-contact h2{font-size:clamp(1.4rem,1.1rem + 1.2vw,2rem);font-weight:800;letter-spacing:-.02em;margin:0 0 .8rem;}
.abt-contact p{color:var(--kiri-dim);max-width:44ch;margin:0 0 1.8rem;line-height:1.7;}
.abt-links{display:flex;flex-wrap:wrap;gap:1rem;}
.abt-links a{display:inline-flex;align-items:center;gap:.6rem;text-decoration:none;font-weight:700;font-size:.92rem;color:var(--kiri);border:1px solid var(--hairline);border-radius:2px;padding:.85rem 1.4rem;min-height:2.75rem;transition:border-color .25s var(--ease),color .25s var(--ease),background .25s var(--ease);}
.abt-links a:hover{border-color:var(--neon);color:var(--neon);background:var(--sumi-soft);}
.abt-links a .tag{font-family:var(--mono);font-size:.7rem;letter-spacing:.08em;color:var(--kiri-dim);text-transform:uppercase;}

/* ============================================================
   Mobile · до 48rem (--bp-md)
   Без гамбургера: двухрядный header, сетка nav 2×2, стеки и таблицы-карточки.
   ============================================================ */
@media (max-width:47.99rem){
  .wrap,.narrow{width:min(100% - 1.5rem,76rem);}

  /* header: logo + lang → строка; nav → сетка 2×2 на всю ширину */
  .bar{flex-wrap:wrap;align-items:center;gap:.75rem;padding-block:.75rem;}
  .logo{font-size:1.25rem;flex:1 1 auto;min-width:0;}
  .bar > nav:not(.lang){order:3;flex:1 1 100%;width:100%;}
  .bar > nav:not(.lang) ul{
    display:grid;grid-template-columns:repeat(2,1fr);gap:1px;
    background:var(--hairline);border:1px solid var(--hairline);border-radius:2px;overflow:hidden;
  }
  .bar > nav:not(.lang) li{background:var(--sumi);}
  .bar > nav:not(.lang) a{
    justify-content:center;text-align:center;
    padding:.65rem .45rem;font-size:.76rem;min-height:2.75rem;
    white-space:normal;line-height:1.25;
  }
  .bar > nav:not(.lang) a .jp{font-size:.85rem;}

  /* заголовки: японский подпись — отдельной строкой */
  .phead h1 .jp,.sil-head h1 .jp,.tbl-head h1 .jp,.str-head h1 .jp,.abt-head h1 .jp{
    display:block;margin-inline-start:0;margin-top:.35rem;
  }
  .phead .idx,.tbl-head .idx,.str-head .idx,.sil-head .idx,.abt-head .idx{
    font-size:.7rem;letter-spacing:.12em;line-height:1.55;text-wrap:pretty;
  }

  /* hero: меньше глиф, меньше воздуха */
  .hero{padding-block:clamp(2rem,8vh,4rem) clamp(2.5rem,8vh,5rem);}
  .glyph-stage{min-height:24vh;}
  .glyph{font-size:clamp(8.5rem,36vw,12rem);}
  .glyph::after{font-size:.62rem;letter-spacing:.32em;}
  .hero-text h1{max-width:none;}

  /* секции главной */
  .sec-head{flex-direction:column;align-items:flex-start;gap:.65rem;margin-bottom:2rem;}
  .sec-head .note{max-width:none;}
  .sec-head .note.lang-only{margin-top:0;}
  .card{min-height:auto;padding:1.4rem;}
  .card .titles h3{font-size:1.35rem;}
  .card .titles .jp{font-size:1.4rem;}

  /* таблица омотэнаси → карточки */
  .spec{overflow:hidden;}
  .spec table thead{display:none;}
  .spec tr{display:block;border-bottom:1px solid var(--hairline);}
  .spec tr:last-child{border-bottom:none;}
  .spec td{display:block;padding:.75rem 1.2rem;border-bottom:none;}
  .spec td:first-child{white-space:normal;padding-bottom:.2rem;}
  .spec td:last-child{padding-top:0;padding-bottom:1rem;color:var(--kiri-dim);}

  /* схема конбини: горизонтальный скролл вместо микротекста */
  .diagram{overflow-x:auto;-webkit-overflow-scrolling:touch;}
  .diagram svg{min-width:18rem;}

  /* pager: колонка, полная ширина */
  .pager{flex-direction:column;}
  .pager a{width:100%;min-width:0;box-sizing:border-box;}
  .pager .next{text-align:start;align-items:flex-start;}

  /* footer: колонки на всю ширину */
  .foot{flex-direction:column;gap:2rem;}
  .foot .col{width:100%;}

  /* about: кнопки контакта на всю ширину */
  .abt-links a{flex:1 1 100%;justify-content:flex-start;}
  .abt-portrait{max-width:11rem;}

  /* смешанный набор: перенос длинных строк */
  .mix-test{overflow-wrap:anywhere;font-size:.92rem;padding:1rem 1.1rem;}

  /* фоновые глифы статей — не вылезают за край */
  .phead .glyph-bg{right:-8vw;font-size:clamp(8rem,42vw,14rem);}
  .str-head .edge-glyph{right:-10vw;font-size:clamp(9rem,40vw,16rem);}
  .sil-head .ghost{font-size:clamp(12rem,55vw,22rem);}
}

/* safe area · вырезы и home indicator */
@supports (padding:max(0px)){
  body{
    padding-left:max(0px,env(safe-area-inset-left));
    padding-right:max(0px,env(safe-area-inset-right));
  }
  header{padding-top:max(0px,env(safe-area-inset-top));}
  footer{padding-bottom:max(3rem,env(safe-area-inset-bottom));}
}