/* iuliana.art — система «Ма» (間): светлая «Между» на васи. Основа — concepts/6 (демо), дальше — компоненты полного сайта. */
@font-face{font-family:"Noto Serif Display";src:url("/fonts/noto-serif-display-italic-var.24ab9163.woff2") format("woff2");font-style:italic;font-weight:300 450;font-stretch:62.5% 100%;font-display:swap}
@font-face{font-family:"Ysabeau";src:url("/fonts/ysabeau-var.ca05f597.woff2") format("woff2");font-style:normal;font-weight:300 500;font-display:swap}

:root{
  --kinari:#FBFAF5; --torinoko:#F2EBDD; --sakura:#E8D3D1; --kuro:#544A47;
  --kuchiba:#917347; --sumi:#595857; --rikyu:#6A6E62; --ai:#165E83; --ai-dk:#104A68;
  --bg:var(--kinari); --fg:var(--sumi); --fg-2:var(--rikyu); --plank:var(--kuchiba); --link:var(--ai);
  --paper:url("/img/washi-kinari.f3c68238.webp");
  --voice:"Noto Serif Display", "Times New Roman", serif;
  --world:"Ysabeau", "Helvetica Neue", Arial, sans-serif;
  --fs-name:clamp(3.5rem, 1.9rem + 6.8vw, 8.25rem);
  --fs-h1:clamp(2.6rem, 1.6rem + 4.2vw, 5.75rem);
  --fs-h2:clamp(2.1rem, 1.5rem + 2.6vw, 4rem);
  --fs-lead:clamp(1.9rem, 1.4rem + 2.1vw, 3.25rem);
  --fs-voice:clamp(1.25rem, 1.12rem + .6vw, 1.6875rem);
  --fs-door:clamp(1.9rem, 1.4rem + 2vw, 3.25rem);
  --fs-body:clamp(1.0625rem, 1rem + .2vw, 1.1875rem);
  --fs-label:.71875rem;
  --margin:clamp(18px, 4vw, 64px); --gutter:clamp(12px, 1.7vw, 24px);
  --sec:clamp(88px, 9vw + 40px, 184px);
  --e-soft:cubic-bezier(.22,.61,.36,1); --e-ink:cubic-bezier(.45,.05,.25,1);
  --t-shoji:1100ms; --t-photo:700ms; --t-text:900ms; --t-write:1000ms; --t-line:1100ms;
}
@media (min-width:1100px){ :root{ --fs-label:.75rem } }

/* поля */
.f-kinari{ --bg:var(--kinari); --fg:var(--sumi); --fg-2:var(--rikyu); --paper:url("/img/washi-kinari.f3c68238.webp") }
.f-tori{ --bg:var(--torinoko); --fg:var(--sumi); --fg-2:#585B51; --paper:url("/img/washi-torinoko.73d22eac.webp") }
.f-sakura{ --bg:var(--sakura); --fg:#4E4C4B; --fg-2:#55524F; --paper:url("/img/washi-haizakura.c52a683f.webp") }
.f-kuro{ --bg:var(--kuro); --fg:#F4F0E6; --fg-2:#D9CFC0; --plank:#C9B48F; --link:#BFD8E6; --paper:none }
.f-kinari,.f-tori,.f-sakura,.f-kuro{ background:var(--bg) var(--paper) 0 0/768px repeat; color:var(--fg) }

*,*::before,*::after{ box-sizing:border-box }
html{ -webkit-text-size-adjust:100%; text-size-adjust:100%; font-synthesis:none; scroll-padding-top:64px }
@media (min-width:1100px){ html{ scroll-padding-top:0 } }
body{ margin:0; background:var(--kinari) url("/img/washi-kinari.f3c68238.webp") 0 0/768px; color:var(--sumi); font:400 var(--fs-body)/1.6 var(--world); letter-spacing:.005em; -webkit-font-smoothing:antialiased; overflow-x:clip }
img{ display:block; max-width:100% }
a{ color:inherit }
p,h1,h2,h3,blockquote,figure{ margin:0 }
h1,h2,h3{ font-weight:inherit }
::selection{ background:var(--sakura); color:var(--sumi) }
:focus-visible{ outline:2px solid var(--link); outline-offset:4px }
.sr{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap }

.voice{ font-family:var(--voice); font-style:italic; font-weight:320; font-stretch:82%; letter-spacing:-.004em }
.disp{ font-family:var(--voice); font-style:italic; font-weight:300; font-stretch:68%; letter-spacing:-.018em; line-height:.94 }
.label{ font-family:var(--world); font-size:var(--fs-label); font-weight:500; letter-spacing:.18em; text-transform:uppercase; line-height:1.45; font-variant-numeric:tabular-nums lining-nums }
.muted{ color:var(--fg-2) }
.dot{ color:var(--plank); padding:0 .2em }
.wrap{ padding-inline:max(var(--margin), env(safe-area-inset-left)) max(var(--margin), env(safe-area-inset-right)) }
.grid{ display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); column-gap:var(--gutter) }
@media (min-width:768px){ .grid{ grid-template-columns:repeat(12, minmax(0,1fr)) } }
.sec{ padding-block:var(--sec) }

/* планка: горизонтальная линия с этикеткой (шов сёдзи) */
.plank{ display:flex; align-items:center; gap:14px; min-height:40px; color:var(--fg-2) }
.plank::after{ content:""; flex:1; height:1px; background:var(--plank); transform-origin:0 50% }
/* номер раздела: римская цифра + этикетка; на десктопе — вертикально, как подпись на свитке */
.no{ display:flex; align-items:center; gap:14px; color:var(--fg-2) }
.no b{ font:300 italic 1.75rem/1 var(--voice); font-stretch:70%; color:var(--plank); letter-spacing:0 }
.no::after{ content:""; width:36px; height:1px; background:var(--plank) }
@media (min-width:1100px){
  .no--v{ writing-mode:vertical-rl; flex-direction:row; align-self:start; gap:16px }
  .no--v b{ writing-mode:horizontal-tb; }
  .no--v::after{ width:1px; height:56px }
}
.ma{ display:inline-grid; place-items:center; width:46px; height:46px; border:1px solid var(--plank); color:var(--plank); background:var(--kinari) }
.ma svg{ width:26px; height:26px }

/* кнопки */
.btn{ display:inline-flex; align-items:center; justify-content:space-between; gap:22px; min-height:54px; padding:0 24px; font:500 1rem/1.2 var(--world); letter-spacing:.04em; text-decoration:none; border:1px solid transparent; border-radius:0; cursor:pointer; transition:background-color .7s var(--e-soft), border-color .7s var(--e-soft), color .7s var(--e-soft) }
.btn--ai{ background:var(--ai); color:var(--kinari) }
.btn--line{ background:transparent; color:var(--fg); border-color:color-mix(in srgb, var(--plank) 70%, transparent) }
.btn .arr{ transition:transform .7s var(--e-soft) }
.btn--block{ width:100% }
@media (min-width:768px){ .btn--block{ width:auto; min-width:300px } }
@media (hover:hover){ .btn--ai:hover{ background:var(--ai-dk) } .btn--line:hover{ border-color:var(--plank); background:color-mix(in srgb, var(--torinoko) 60%, transparent) } .btn:hover .arr{ transform:translateX(5px) } }
.tlink{ color:var(--link); text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:.25em }

/* ───── паспарту torinoko с планкой kuchiba ───── */
.pp{ position:relative; background:var(--torinoko) url("/img/washi-torinoko.73d22eac.webp") 0 0/768px; padding:clamp(12px, 4%, 30px) clamp(12px, 4%, 30px) 0; box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--kuchiba) 75%, transparent) }
.f-tori .pp{ background-color:var(--kinari); background-image:url("/img/washi-kinari.f3c68238.webp") }
.pp__win{ position:relative; overflow:hidden; background:#E9E2D2 }
.pp__win img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover }
.r45{ aspect-ratio:4/5 } .r32{ aspect-ratio:3/2 } .r23{ aspect-ratio:2/3 }
.pp__cap{ display:flex; flex-wrap:wrap; justify-content:space-between; gap:2px 14px; padding:clamp(9px,2.6%,16px) 0 clamp(10px,3%,18px); color:#5E5D58; font-size:.625rem; letter-spacing:.14em }
.pp__cap span:last-child{ margin-left:auto; text-align:right }

/* створки сёдзи: бумага + кумико (решётка планок) */
.sj{ position:absolute; inset:0; z-index:3; pointer-events:none; display:none }
.sj::before,.sj::after{ content:""; position:absolute; top:0; bottom:0; width:50.2%;
  background:
    linear-gradient(90deg, transparent calc(100% - 1px), color-mix(in srgb, var(--kuchiba) 55%, transparent) 0) 0 0/33.4% 100%,
    linear-gradient(transparent calc(100% - 1px), color-mix(in srgb, var(--kuchiba) 55%, transparent) 0) 0 0/100% 25%,
    var(--torinoko) url("/img/washi-torinoko.73d22eac.webp") 0 0/768px }
.sj::before{ left:0; box-shadow:inset -2px 0 0 var(--kuchiba) }
.sj::after{ right:0; box-shadow:inset 2px 0 0 var(--kuchiba) }
.js [data-rv="shoji"]:not(.is-done) .sj, .intro .hero .sj{ display:block }
[data-rv="shoji"].is-in .sj::before, .intro-run .hero .sj::before{ animation:sj-l var(--t-shoji) var(--e-soft) var(--dl,0ms) both }
[data-rv="shoji"].is-in .sj::after, .intro-run .hero .sj::after{ animation:sj-r var(--t-shoji) var(--e-soft) var(--dl,0ms) both }
.js [data-rv="shoji"]:not(.is-in) .pp__win picture, .intro .hero .pp__win picture, .intro .hero .hero__photo picture{ opacity:0 }
[data-rv="shoji"].is-in .pp__win picture{ animation:fade var(--t-photo) var(--e-soft) calc(var(--dl,0ms) + 200ms) both }
.intro-run .hero picture{ animation:fade var(--t-photo) var(--e-soft) 450ms both }
@keyframes sj-l{ from{ transform:none } to{ transform:translateX(-101%) } }
@keyframes sj-r{ from{ transform:none } to{ transform:translateX(101%) } }
@keyframes fade{ from{ opacity:0 } to{ opacity:1 } }

/* появления: только opacity и мягкий clip, ≥ 700 мс */
[data-rv]{ --dl:calc(min(var(--k,0), 5) * 120ms) }
.js [data-rv="text"]:not(.is-in){ opacity:0 }
[data-rv="text"].is-in{ transition:opacity var(--t-text) var(--e-soft) var(--dl) }
.js [data-rv="write"]:not(.is-in){ clip-path:inset(-.3em 100% -.4em -.3em) }
[data-rv="write"]{ clip-path:inset(-.3em -.3em -.4em -.3em) }
[data-rv="write"].is-in{ transition:clip-path var(--t-write) var(--e-ink) var(--dl) }
.js .plank[data-rv]:not(.is-in)::after{ transform:scaleX(0) }
.plank[data-rv].is-in::after{ transition:transform var(--t-line) var(--e-soft) var(--dl) }
[data-rv="list"] > *{ --li:calc(min(var(--i,0), 6) * 110ms) }
.js [data-rv="list"]:not(.is-in) > *{ opacity:0 }
[data-rv="list"].is-in > *{ transition:opacity var(--t-text) var(--e-soft) var(--li) }
.js [data-rv]:focus-within, .js [data-rv]:focus-within > *{ opacity:1 !important; clip-path:none !important }

/* ───── шапка ───── */
.hdr{ position:sticky; top:0; z-index:40; height:calc(58px + env(safe-area-inset-top)); padding-top:env(safe-area-inset-top);
  display:flex; align-items:center; justify-content:space-between; gap:16px; background:var(--kinari) url("/img/washi-kinari.f3c68238.webp") 0 0/768px;
  box-shadow:inset 0 -1px 0 color-mix(in srgb, var(--kuchiba) 60%, transparent) }
.hdr__name{ text-decoration:none; font-size:.78rem; font-weight:500; letter-spacing:.16em; text-transform:uppercase; white-space:nowrap }
.hdr__r{ display:flex; align-items:center; gap:clamp(10px,2vw,36px) }
.nav{ display:none; gap:clamp(16px,1.8vw,30px); font-size:.9375rem; letter-spacing:.02em }
.nav a{ text-decoration:none; padding:8px 0; background:linear-gradient(var(--plank),var(--plank)) 0 100%/0 1px no-repeat; transition:background-size .8s var(--e-soft) }
.nav a[aria-current]{ background-size:100% 1px }
@media (hover:hover){ .nav a:hover{ background-size:100% 1px } }
.lang{ display:flex; gap:2px; font-size:.75rem; font-weight:500; letter-spacing:.16em }
.lang a,.lang span{ display:inline-grid; place-items:center; min-width:30px; height:44px; text-decoration:none }
.lang [aria-current]{ text-decoration:underline; text-decoration-color:var(--plank); text-underline-offset:6px; text-decoration-thickness:1px }
.lang a{ color:var(--fg-2) }
.menu-btn{ font:500 .75rem/1 var(--world); letter-spacing:.18em; text-transform:uppercase; color:inherit; background:none; border:0; height:44px; padding:0 0 0 6px; display:flex; align-items:center; gap:10px; cursor:pointer }
.menu-btn i{ display:block; width:22px; height:7px; border-block:1px solid currentColor }
@media (min-width:1100px){
  .hdr{ position:relative; height:80px; display:grid; grid-template-columns:41.6667% 1fr; padding:0 }
  .is-home .hdr{ position:absolute; left:0; right:0; top:0; background:none; box-shadow:none }
  .hdr__l{ padding-left:var(--margin); display:flex; align-items:center }
  .hdr__r{ justify-content:flex-end; padding:0 var(--margin) 0 calc(var(--gutter)*3) }
  .nav{ display:flex } .menu-btn{ display:none }
}
@media (max-width:1099px){ .hdr{ padding-inline:max(var(--margin), env(safe-area-inset-left)) max(var(--margin), env(safe-area-inset-right)) } }

/* ───── первый экран ───── */
.hero__photo{ position:relative; overflow:hidden; height:max(300px, calc(100svh - 404px)); background:#D8D0C2 }
.hero__photo picture, .hero__photo img{ position:absolute; inset:0; width:100%; height:100% }
.hero__photo img{ object-fit:cover; object-position:50% 30% }
.hero__photo .sj{ z-index:3 }
.hero__seam{ display:flex; align-items:center; gap:14px; margin-top:-23px; position:relative; z-index:4 }
.hero__seam .ma{ margin-left:max(var(--margin), env(safe-area-inset-left)) }
.hero__seam::after{ content:""; flex:1; height:1px; background:var(--kuchiba); margin-top:22px }
.hero__text{ padding:14px max(var(--margin), env(safe-area-inset-right)) 26px max(var(--margin), env(safe-area-inset-left)) }
.hero__name{ font-size:var(--fs-name) }
.hero__name .ink{ display:block; width:fit-content; position:relative }
.hero__role{ margin-top:14px; color:var(--fg-2) }
.hero__dirs{ display:none }
.hero__cta{ margin-top:20px; display:grid; gap:10px }
.hero .btn--line{ display:none }
.hero__vcap{ display:none }
@media (min-width:768px) and (max-width:1099px){ .hero__photo{ height:max(360px, calc(100svh - 430px)) } }
@media (min-width:1100px){
  .hero{ display:grid; grid-template-columns:41.6667% 1fr; min-height:min(100svh, 1000px) }
  .hero__l{ position:relative; display:flex; align-items:flex-end; justify-content:flex-end; padding:96px calc(var(--gutter)*3) 64px var(--margin) }
  .hero__l .pp{ width:min(100%, calc((min(100svh,1000px) - 96px - 64px - 40px) * .8)) }
  .hero__photo{ display:none }
  .hero__seam{ display:none }
  .hero__r{ position:relative; display:flex; flex-direction:column; justify-content:flex-end; padding:96px var(--margin) 64px calc(var(--gutter)*3 + 24px) }
  .hero__r::before{ content:""; position:absolute; left:-1px; top:0; bottom:0; width:2px; background:var(--kuchiba); transform-origin:50% 0 }
  .hero__r > .ma{ position:absolute; left:-23px; top:50%; transform:translateY(-50%); width:46px; height:46px; z-index:2 }
  .hero__text{ padding:0 }
  .hero__dirs{ display:block; margin-top:12px }
  .hero__cta{ display:flex; flex-wrap:wrap; margin-top:32px }
  .hero .btn--line{ display:inline-flex }
  .hero__vcap{ display:block; position:absolute; right:var(--margin); top:120px; writing-mode:vertical-rl; color:var(--fg-2) }
  .intro .hero__r::before{ transform:scaleY(0) } .intro-run .hero__r::before{ animation:ly 1300ms var(--e-soft) 0ms both }
}
@media (max-width:1099px){ .hero__l{ display:none } }
@keyframes ly{ from{ transform:scaleY(0) } to{ transform:scaleY(1) } }
/* имя пишется кистью: шторка цвета бумаги с мягкой кромкой и тонкой планкой-кистью kuchiba, медленно */
.hero__name{ overflow-x:clip }
.intro .ink::after{ content:""; position:absolute; z-index:1; pointer-events:none; top:-.06em; bottom:-.3em; left:-.8em; width:calc(100% + 1.1em);
  background:linear-gradient(var(--kuchiba), var(--kuchiba)) .5em 46% / 1px .8em no-repeat, linear-gradient(90deg, transparent 0, var(--kinari) .8em);
  transform:translateX(0) skewX(-12deg) }
.intro-run .ink:nth-child(1)::after{ animation:ink 1200ms var(--e-ink) 500ms both }
.intro-run .ink:nth-child(2)::after{ animation:ink 1200ms var(--e-ink) 720ms both }
@keyframes ink{ 0%{ transform:translateX(0) skewX(-12deg); opacity:1 } 85%{ opacity:1 } 100%{ transform:translateX(100%) skewX(-12deg); opacity:0 } }
.intro .hero__role,.intro .hero__dirs,.intro .hero__cta,.intro .hero__vcap,.intro .hero__seam .ma{ opacity:0 }
.intro-run .hero__role{ animation:fade 900ms var(--e-soft) 1100ms both }
.intro-run .hero__dirs{ animation:fade 900ms var(--e-soft) 1200ms both }
.intro-run .hero__cta{ animation:fade 900ms var(--e-soft) 1300ms both }
.intro-run .hero__vcap,.intro-run .hero__seam .ma{ animation:fade 900ms var(--e-soft) 900ms both }

/* ───── I. обо мне ───── */
.about{ row-gap:28px }
.about > *{ grid-column:1/-1 }
.about__photo{ grid-column:1 / span 3 }
.about__lead{ font-size:var(--fs-lead); line-height:1.04; font-stretch:70%; font-weight:300 }
.about__text{ display:grid; gap:1em }
.voice-p{ font-size:var(--fs-voice); line-height:1.5; max-width:31em }
.edu{ border-top:1px solid var(--plank); margin-top:8px }
.edu__row{ display:grid; grid-template-columns:1fr 1.4fr; gap:var(--gutter); padding:15px 0; border-bottom:1px solid color-mix(in srgb, var(--plank) 40%, transparent) }
.edu__row b{ font-weight:500 }
@media (min-width:768px){ .about__photo{ grid-column:1 / span 5; grid-row:2 / span 3 } .about__lead,.about__text,.about .edu{ grid-column:7 / -1 } }
@media (min-width:1100px){
  .about{ align-items:start }
  .about .no{ grid-column:1; grid-row:1 / span 3 }
  .about__photo{ grid-column:2 / span 4; grid-row:1 / span 3; max-width:420px }
  .about__lead{ grid-column:7 / span 6; grid-row:1 }
  .about__text{ grid-column:7 / span 5; grid-row:2 }
  .about .edu{ grid-column:7 / span 5; grid-row:3; margin-top:36px }
}

/* ───── II. искусство ───── */
.art-head{ row-gap:24px }
.art-head > *{ grid-column:1/-1 }
.art-title{ font-size:clamp(3.2rem, 1.6rem + 7.4vw, 9rem); line-height:.88 }
.art-title span{ display:block } .art-title span + span{ padding-left:.9em }
.art-feat{ margin-top:8px }
.lead-p{ font-size:clamp(1.0625rem, 1rem + .35vw, 1.3125rem); line-height:1.6; max-width:34em }
@media (min-width:1100px){
  .art-head .no{ grid-column:1; grid-row:1 / span 3 }
  .art-title{ grid-column:2 / span 11; grid-row:1 }
  .art-feat{ grid-column:2 / span 6; grid-row:2 / span 2; margin-top:24px }
  .art-head .lead-p{ grid-column:9 / span 4; grid-row:2; align-self:end }
  .stats{ grid-column:9 / span 4 !important; grid-row:3; align-self:start; margin-top:28px }
}
.stats{ display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); border-top:1px solid var(--plank) }
.stat{ padding:14px 10px 0 0 }
.stat + .stat{ padding-left:12px; border-left:1px solid color-mix(in srgb, var(--plank) 45%, transparent) }
.stat b{ display:block; font:300 italic clamp(3rem, 2rem + 3.6vw, 5rem)/.95 var(--voice); font-stretch:64%; color:var(--kuchiba) }
.stat span{ display:block; margin-top:6px; color:var(--fg-2); font-size:.6875rem; letter-spacing:.14em }

.tl-wrap{ margin-top:clamp(64px, 8vw, 140px) }
.tl-head{ display:flex; flex-wrap:wrap; justify-content:space-between; align-items:end; gap:14px 24px; margin-bottom:clamp(24px,3vw,48px) }
.tl-head h3{ font-size:var(--fs-h2) }
.tl-year + .tl-year{ margin-top:clamp(36px, 4vw, 72px) }
.tl-y{ display:flex; align-items:center; gap:16px; padding:6px 0; position:sticky; top:58px; z-index:2; background:var(--bg) var(--paper) 0 0/768px }
.tl-y b{ font:300 italic var(--fs-h2)/1 var(--voice); font-stretch:66%; color:var(--kuchiba); font-variant-numeric:lining-nums }
.tl-y::after{ content:""; flex:1; height:1px; background:var(--plank) }
.tl-list{ list-style:none; margin:0; padding:0 }
.tl-row{ display:grid; grid-template-columns:1fr auto; column-gap:16px; align-items:center; padding:18px 0 20px; border-bottom:1px solid color-mix(in srgb, var(--plank) 35%, transparent) }
.tl-t{ font-weight:500; font-size:clamp(1.125rem, 1.05rem + .35vw, 1.375rem); line-height:1.3 }
.tl-m{ margin-top:6px; color:var(--fg-2) }
.tl-c{ margin-top:8px; font-family:var(--voice); font-style:italic; font-stretch:82%; font-size:1rem; line-height:1.4; color:var(--fg-2) }
.tl-thumb{ width:112px }
.tl-thumb .pp{ padding:5px 5px 0 } .tl-thumb .pp__cap{ display:none }
@media (min-width:1100px){
  .tl-year{ display:grid; grid-template-columns:repeat(12, minmax(0,1fr)); column-gap:var(--gutter); align-items:start }
  .tl-y{ grid-column:1 / span 3; top:24px; background:none; flex-direction:column; align-items:flex-start; gap:10px }
  .tl-y::after{ width:56px; flex:none }
  .tl-list{ grid-column:4 / -1 }
  .tl-row{ grid-template-columns:repeat(9, minmax(0,1fr)); column-gap:var(--gutter); padding:22px 0 24px }
  .tl-row > div:first-child{ grid-column:1 / span 6 }
  .tl-thumb{ grid-column:7 / span 3; justify-self:end; width:240px }
  .tl-thumb .pp{ padding:9px 9px 0 } .tl-thumb .pp__cap{ display:flex; padding:6px 0 8px; font-size:.5625rem }
}
.intl{ list-style:none; margin:16px 0 0; padding:0; display:grid; grid-template-columns:1fr 1fr; gap:0 var(--gutter); border-top:1px solid var(--plank) }
.intl li{ padding:16px 0 18px; border-bottom:1px solid color-mix(in srgb, var(--plank) 35%, transparent) }
.intl b{ display:block; font:300 italic var(--fs-door)/1 var(--voice); font-stretch:68% }
.intl span{ display:block; margin-top:8px; color:var(--fg-2) }
@media (min-width:1100px){ .intl{ grid-template-columns:repeat(5, 1fr) } .intl li{ border-bottom:0; padding:22px 18px 8px 0 } .intl li + li{ border-left:1px solid color-mix(in srgb, var(--plank) 40%, transparent); padding-left:18px } }

.prod{ row-gap:28px; margin-top:clamp(72px, 9vw, 150px) }
.prod > *{ grid-column:1/-1 }
.prod__small{ grid-column:2 / -1 }
.prod__item{ padding:16px 0 20px; border-bottom:1px solid color-mix(in srgb, var(--plank) 40%, transparent); display:grid; gap:6px }
.prod__item b{ font:300 italic var(--fs-door)/1.02 var(--voice); font-stretch:68% }
.prod__item span{ color:var(--fg-2) }
.prod__list{ border-top:1px solid var(--plank); margin-top:20px }
@media (min-width:1100px){
  .prod{ align-items:end }
  .prod__body{ grid-column:1 / span 5; grid-row:1 }
  .prod__small{ grid-column:7 / span 6; grid-row:1 }
}
.gal{ margin-top:clamp(64px, 8vw, 130px) }
.gal__list{ list-style:none; margin:18px 0 0; padding:0; display:flex; flex-wrap:wrap; gap:4px .6em; font:300 italic clamp(2rem, 1.2rem + 3.6vw, 5rem)/1.1 var(--voice); font-stretch:64% }
.gal__list li:not(:last-child)::after{ content:"·"; color:var(--plank); font-style:normal; padding-left:.4em; font-family:var(--world); font-size:.5em; vertical-align:.3em }

/* ───── III. Живи ───── */
.zh{ row-gap:28px }
.zh > *{ grid-column:1/-1 }
.zh-title{ font-size:clamp(4.6rem, 2rem + 12vw, 13rem); line-height:.85 }
.zh-pair{ margin-top:clamp(24px, 4vw, 64px) }
.zh-photo{ grid-column:1 / span 4 }
.zh-q{ font-size:clamp(1.45rem, 1.15rem + 1.3vw, 2.375rem); line-height:1.3; font-stretch:76%; font-weight:300 }
.zh-small{ grid-column:2 / -1 }
.help{ list-style:none; margin:16px 0 26px; padding:0; border-top:1px solid var(--plank) }
.help li{ padding:14px 0 16px; border-bottom:1px solid color-mix(in srgb, var(--plank) 40%, transparent) }
.help b{ display:block; font:300 italic 1.75rem/1.05 var(--voice); font-stretch:70% }
.help span{ color:var(--fg-2); font-size:.9375rem }
@media (min-width:768px){ .zh-photo{ grid-column:1 / span 5 } .zh-q{ grid-column:7 / -1; align-self:center } .zh-small{ grid-column:1 / span 5 } .zh-help{ grid-column:7 / -1 } }
@media (min-width:1100px){
  .zh .no{ grid-column:1; grid-row:1 / span 2 }
  .zh-title{ grid-column:2 / span 6; grid-row:1 } .zh-lead{ grid-column:9 / span 4; grid-row:1; align-self:end }
  .zh-photo{ grid-column:2 / span 4; grid-row:2 } .zh-q{ grid-column:7 / span 6; grid-row:2 }
  .zh-small{ grid-column:2 / span 3; grid-row:3; align-self:start } .zh-help{ grid-column:7 / span 5; grid-row:3 }
}

/* ───── IV. интерьер ───── */
.in{ row-gap:28px }
.in > *{ grid-column:1/-1 }
.in-title{ font-size:var(--fs-h1); line-height:.96 }
.in-sub{ grid-column:2 / -1 }
@media (min-width:768px){ .in-sub{ grid-column:7 / -1 } }
@media (min-width:1100px){
  .in .no{ grid-column:1; grid-row:1 / span 3 }
  .in-title{ grid-column:2 / span 7; grid-row:1 } .in-lead{ grid-column:9 / span 4; grid-row:1; align-self:end }
  .in-main{ grid-column:2 / span 6; grid-row:2 / span 2 }
}
.in-subs{ display:grid; gap:24px }
@media (min-width:1100px){ .in-subs{ grid-column:9 / span 4; grid-row:2 / span 2; align-self:end } }
.objs{ margin-top:clamp(56px, 7vw, 120px) }
.objs__grid{ list-style:none; margin:18px 0 0; padding:0; display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:var(--gutter) }
.obj .pp__win{ aspect-ratio:4/5; background:var(--torinoko) }
.obj .pp{ padding:0; box-shadow:none; background:none }
.obj figcaption{ padding-top:10px; display:grid; gap:3px }
.obj b{ font-weight:500; font-size:1rem; line-height:1.3 }
.obj span{ color:var(--fg-2); font-size:.625rem }
@media (max-width:767px){ .objs__grid{ grid-template-columns:repeat(2,1fr) } .obj:first-child{ grid-column:1/-1 } .obj:first-child .pp__win{ aspect-ratio:3/2 } .obj:first-child img{ object-fit:contain } }
.doors{ list-style:none; margin:clamp(56px, 7vw, 110px) 0 0; padding:0; border-top:1px solid var(--plank) }
.doors li{ border-bottom:1px solid color-mix(in srgb, var(--plank) 45%, transparent) }
.doors a{ display:grid; grid-template-columns:auto 1fr auto; gap:4px 16px; align-items:baseline; padding:18px 0 20px; text-decoration:none }
.doors .n{ color:var(--kuchiba); font:300 italic 1.25rem/1 var(--voice) }
.doors .t{ font-size:var(--fs-door) }
.doors .d{ grid-column:2 / -1; color:var(--fg-2); font-size:.9375rem }
.doors .a{ grid-column:3; grid-row:1; color:var(--link) }
@media (min-width:1100px){ .doors a{ grid-template-columns:repeat(12, minmax(0,1fr)); column-gap:var(--gutter); align-items:center } .doors .n{ grid-column:1 } .doors .t{ grid-column:2 / span 5 } .doors .d{ grid-column:8 / span 4; grid-row:1; font-size:var(--fs-body) } .doors .a{ grid-column:12; justify-self:end } }

/* ───── V. книга ───── */
.spread{ display:grid }
.spread__l{ display:grid; place-items:center; padding:clamp(56px, 7vw, 120px) var(--margin) 44px }
.cover{ width:min(60%, 340px); position:relative }
.cover .pp__win{ aspect-ratio:2/3; background:var(--kinari) url("/img/washi-kinari.f3c68238.webp") 0 0/768px; box-shadow:0 1px 0 rgba(84,74,71,.08), 0 30px 50px -30px rgba(84,74,71,.45) }
.cover__t{ position:absolute; inset:0; display:flex; flex-direction:column; justify-content:space-between; padding:14% 12% 12% 20%; color:var(--sumi) }
.cover__t b{ font:300 italic clamp(1.5rem, 1rem + 1.6vw, 2.5rem)/1 var(--voice); font-stretch:68% }
.cover__spine{ position:absolute; left:9%; top:0; bottom:0; width:2px; background:var(--kuchiba) }
.cover__ma{ position:absolute; right:10%; bottom:9%; width:30px; height:30px; color:var(--kuchiba); border:1px solid var(--kuchiba); display:grid; place-items:center }
.cover__ma svg{ width:18px; height:18px }
.spread__r{ padding:28px max(var(--margin), env(safe-area-inset-right)) clamp(64px, 8vw, 140px) max(var(--margin), env(safe-area-inset-left)) }
.book-title{ font-size:var(--fs-h1); line-height:.98; margin-top:18px }
.book-title span{ display:block }
.spread__r .voice-p{ margin-top:24px }
@media (min-width:1100px){
  .spread{ grid-template-columns:41.6667% 1fr; min-height:min(100svh, 900px) }
  .spread__l{ padding:96px var(--margin) }
  .spread__r{ position:relative; display:flex; flex-direction:column; justify-content:center; padding:96px var(--margin) 96px calc(var(--gutter)*3 + 24px) }
  .spread__r::before{ content:""; position:absolute; left:-1px; top:0; bottom:0; width:2px; background:var(--kuchiba) }
}
.quotes{ row-gap:24px }
.quotes > *{ grid-column:1/-1 }
.bq{ font-size:var(--fs-h1); line-height:1.02; font-stretch:66%; max-width:13em }
.bq::before{ content:"«" } .bq::after{ content:"»" }
.bq-more p{ padding:18px 0 20px; border-bottom:1px solid color-mix(in srgb, var(--plank) 40%, transparent); font-size:var(--fs-voice); line-height:1.4; max-width:30em }
.bq-more{ border-top:1px solid var(--plank); margin-top:20px }
@media (min-width:1100px){ .quotes .bq{ grid-column:2 / span 8 } .quotes .bq-sub{ grid-column:2 / span 6 } .bq-more{ grid-column:7 / span 6 } }

/* ───── VI. контакты ───── */
.contact{ row-gap:40px }
.contact > *{ grid-column:1/-1 }
.contact__title{ font-size:var(--fs-h1); line-height:1; max-width:11em; margin-top:22px }
.contact__me{ display:grid; grid-template-columns:110px 1fr; gap:18px; align-items:end; margin-top:30px }
.contact__me .pp{ padding:6px 6px 0 } .contact__me .pp__cap{ padding:4px 0 6px; font-size:.5rem }
.c-list{ margin-top:30px; border-top:1px solid var(--plank) }
.c-row{ display:flex; justify-content:space-between; align-items:center; gap:16px; min-height:72px; border-bottom:1px solid color-mix(in srgb, var(--plank) 45%, transparent); text-decoration:none; font-size:clamp(1.2rem, 1.05rem + .6vw, 1.6rem) }
.c-row small{ font-size:var(--fs-label) }
.formbox{ padding:clamp(22px, 3vw, 44px); box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--kuchiba) 70%, transparent) }
@media (min-width:1100px){ .contact__a{ grid-column:1 / span 5 } .contact__b{ grid-column:7 / span 6 } .contact__me{ grid-template-columns:150px 1fr } }
.form{ display:grid; gap:22px }
.form__h{ font:300 italic var(--fs-voice)/1.3 var(--voice); font-stretch:80% }
.fld{ display:grid; gap:6px }
.fld label, .chips legend{ font-size:var(--fs-label); font-weight:500; letter-spacing:.18em; text-transform:uppercase; color:var(--fg-2) }
.fld input, .fld textarea{ font:400 1.0625rem/1.4 var(--world); color:var(--fg); background:transparent; border:0; border-bottom:1px solid color-mix(in srgb, var(--plank) 70%, transparent); border-radius:0; padding:10px 0 12px; min-height:48px; width:100%; -webkit-appearance:none; appearance:none; transition:border-color .7s var(--e-soft) }
.fld textarea{ min-height:104px; resize:vertical }
.fld input::placeholder, .fld textarea::placeholder{ color:#7B7D74; opacity:1 }
.fld input:focus, .fld textarea:focus{ outline:none; border-bottom:1px solid var(--ai); box-shadow:0 1px 0 var(--ai) }
.chips{ border:0; margin:0; padding:0 }
.chips legend{ padding:0; margin-bottom:10px }
.chips__g{ display:flex; flex-wrap:wrap; gap:8px }
.chip{ position:relative }
.chip input{ position:absolute; opacity:0; inset:0; margin:0 }
.chip span{ display:flex; align-items:center; min-height:42px; padding:6px 16px; border:1px solid color-mix(in srgb, var(--plank) 55%, transparent); border-radius:999px; font-size:.9375rem; cursor:pointer; transition:background-color .7s var(--e-soft) }
.chip input:checked + span{ background:var(--sumi); color:var(--kinari); border-color:var(--sumi) }
.chip input:focus-visible + span{ outline:2px solid var(--link); outline-offset:3px }
.consent{ display:grid; grid-template-columns:22px 1fr; gap:12px; font-size:.875rem; line-height:1.5; color:var(--fg-2) }
.consent input{ -webkit-appearance:none; appearance:none; width:22px; height:22px; margin:0; border:1px solid var(--plank); border-radius:0; background:transparent; display:grid; place-items:center }
.consent input:checked{ background:var(--ai); border-color:var(--ai) }
.consent input:checked::after{ content:""; width:9px; height:5px; border:1.5px solid var(--kinari); border-top:0; border-right:0; transform:translateY(-1px) rotate(-45deg) }
.consent a{ color:var(--link) }
.hp{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden }

/* футер */
.ftr{ padding-block:48px calc(44px + env(safe-area-inset-bottom)); font-size:.875rem }
.ftr__g{ display:grid; gap:26px }
.ftr nav{ display:grid; grid-template-columns:1fr 1fr; gap:8px 16px }
.ftr a{ text-decoration:none }
.ftr__fine{ color:var(--fg-2); font-size:.75rem; margin-top:26px; padding-top:16px; border-top:1px solid color-mix(in srgb, var(--plank) 50%, transparent) }
.ftr .ma{ background:none }
@media (min-width:1100px){ .ftr__g{ grid-template-columns:auto 4fr 6fr; align-items:start; gap:40px } .ftr nav{ grid-template-columns:repeat(3, auto); justify-content:start; column-gap:28px } }

/* меню */
.menu{ position:fixed; inset:0; z-index:60; overflow-y:auto; visibility:hidden; opacity:0; transition:opacity .8s var(--e-soft), visibility 0s .8s }
.menu.is-open{ visibility:visible; opacity:1; transition:opacity .8s var(--e-soft) }
.menu .hdr{ position:relative; background:none }
.menu__list{ list-style:none; margin:10px 0 0; padding:0; border-top:1px solid var(--plank) }
.menu__list a{ display:flex; align-items:baseline; gap:18px; min-height:64px; padding:12px 0; text-decoration:none; border-bottom:1px solid color-mix(in srgb, var(--plank) 40%, transparent) }
.menu__list b{ font:300 italic 1.25rem/1 var(--voice); color:var(--kuchiba); min-width:1.8em }
.menu__list span{ font-size:var(--fs-h2) }
.menu__mail{ display:block; margin-top:18px; color:var(--fg-2); text-decoration:none }
html.menu-lock, html.menu-lock body{ overflow:hidden }

/* переход между разделами: створки сёдзи на весь экран, медленно */
.vt{ position:fixed; inset:0; z-index:70; pointer-events:none; visibility:hidden }
.vt::before,.vt::after{ content:""; position:absolute; top:0; bottom:0; width:50.1%;
  background:
    linear-gradient(90deg, transparent calc(100% - 1px), color-mix(in srgb, var(--kuchiba) 45%, transparent) 0) 0 0/25% 100%,
    linear-gradient(transparent calc(100% - 1px), color-mix(in srgb, var(--kuchiba) 45%, transparent) 0) 0 0/100% 16.66%,
    var(--torinoko) url("/img/washi-torinoko.73d22eac.webp") 0 0/768px }
.vt::before{ left:0; transform:translateX(-101%); box-shadow:inset -2px 0 0 var(--kuchiba) }
.vt::after{ right:0; transform:translateX(101%); box-shadow:inset 2px 0 0 var(--kuchiba) }
.vt.is-closing{ visibility:visible }
.vt.is-closing::before,.vt.is-closing::after{ transform:none; transition:transform 760ms var(--e-soft) }
.vt.is-opening{ visibility:visible }
.vt.is-opening::before{ transform:translateX(-101%); transition:transform 1100ms var(--e-soft) 120ms }
.vt.is-opening::after{ transform:translateX(101%); transition:transform 1100ms var(--e-soft) 120ms }

.demo-note{ margin-top:10px; color:var(--fg-2); font-size:.6875rem; letter-spacing:.06em }

@media (prefers-reduced-motion:reduce){
  .js [data-rv]:not(.is-in), .js [data-rv]:not(.is-in) > *{ opacity:1 !important; clip-path:none !important }
  .js .plank[data-rv]:not(.is-in)::after{ transform:none !important }
  .sj, .vt{ display:none !important }
  .js [data-rv] picture, .hero picture{ opacity:1 !important; animation:none !important }
  *{ transition-duration:0s !important }
}
@media print{ [data-rv], [data-rv] > *{ opacity:1 !important; clip-path:none !important } .sj, .vt{ display:none !important } }
@media (max-width:1099px){ .hero__r > .ma{ display:none } }

/* ═════════════ Полный сайт: компоненты ═════════════ */
main{ display:block }
.crumbs{ display:flex; flex-wrap:wrap; gap:4px 0; color:var(--fg-2); font-size:var(--fs-label); letter-spacing:.14em; text-transform:uppercase; font-weight:500 }
.crumbs a{ text-decoration:none } .crumbs a:hover{ color:var(--fg) }
.crumbs li{ list-style:none; display:flex; align-items:center }
.crumbs li + li::before{ content:"·"; color:var(--plank); padding:0 .6em }
.crumbs ol{ display:flex; flex-wrap:wrap; margin:0; padding:0 }

/* заголовок внутренней страницы: текст на бумаге, фото в паспарту — вторая створка */
.ptitle{ padding-block:clamp(28px, 4vw, 64px) clamp(56px, 7vw, 120px) }
.ptitle .grid{ row-gap:22px; align-items:end }
.ptitle .grid > *{ grid-column:1/-1 }
.ptitle h1{ font-size:var(--fs-h1); line-height:.98 }
.ptitle h1.disp--xl{ font-size:clamp(3.4rem, 1.6rem + 8vw, 10rem); line-height:.88 }
.ptitle__lead{ font-size:clamp(1.0625rem, 1rem + .4vw, 1.375rem); line-height:1.55; max-width:30em }
.ptitle__lead.voice{ font-size:var(--fs-voice); line-height:1.45 }
.ptitle__cta{ display:flex; flex-wrap:wrap; gap:10px; margin-top:6px }
.ptitle__photo{ max-width:520px }
.ptitle__photo.is-wide{ max-width:none }
.ptitle .price-tag{ margin-top:4px }
@media (min-width:768px){ .ptitle__photo{ grid-column:7 / -1 !important; grid-row:1 / span 5; align-self:end } .ptitle__text{ grid-column:1 / span 6 !important } }
@media (min-width:1100px){
  .ptitle{ padding-top:clamp(40px, 4vw, 72px) }
  .ptitle__text{ grid-column:1 / span 6 !important; display:grid; gap:24px; align-content:end }
  .ptitle__photo{ grid-column:8 / -1 !important }
  .ptitle__photo.is-wide{ grid-column:7 / -1 !important }
  .ptitle--seam .ptitle__photo{ position:relative }
}
.price-tag{ display:flex; align-items:center; gap:12px; color:var(--fg-2) }
.price-tag::before{ content:""; width:22px; height:1px; background:var(--plank) }

/* заголовок секции */
.sh{ display:grid; gap:14px; margin-bottom:clamp(24px, 3vw, 48px) }
.sh h2{ font-size:var(--fs-h2); line-height:1 }
.sh p{ color:var(--fg-2); max-width:34em }
@media (min-width:1100px){ .sh{ grid-template-columns:repeat(12, minmax(0,1fr)); column-gap:var(--gutter); align-items:end } .sh h2{ grid-column:1 / span 7 } .sh p{ grid-column:8 / span 5 } .sh .no{ grid-column:1 / -1 } }

/* карточки на планках: «для кого», «два пути», «варианты» */
.cards{ list-style:none; margin:0; padding:0; display:grid; gap:0 var(--gutter); grid-template-columns:1fr }
.cards > li{ border-top:1px solid var(--plank); padding:18px 0 26px }
.cards b, .cards h3{ display:block; font:300 italic var(--fs-door)/1.04 var(--voice); font-stretch:68%; margin-bottom:10px }
.cards p{ color:var(--fg-2); max-width:28em }
@media (min-width:768px){ .cards{ grid-template-columns:repeat(2, minmax(0,1fr)) } }
@media (min-width:1100px){ .cards--4{ grid-template-columns:repeat(4, minmax(0,1fr)) } .cards--3{ grid-template-columns:repeat(3, minmax(0,1fr)) } }

/* списки с тире-планкой */
.dash{ list-style:none; margin:0; padding:0; border-top:1px solid var(--plank) }
.dash li{ display:grid; grid-template-columns:28px 1fr; gap:8px; padding:14px 0; border-bottom:1px solid color-mix(in srgb, var(--plank) 35%, transparent); line-height:1.45 }
.dash li::before{ content:""; width:16px; height:1px; background:var(--plank); margin-top:.8em }
.dash--2{ border-top:0 }
@media (min-width:1100px){ .dash--2{ display:grid; grid-template-columns:1fr 1fr; column-gap:var(--gutter) } .dash--2 li:nth-child(1), .dash--2 li:nth-child(2){ border-top:1px solid var(--plank) } }

/* шаги */
.steps{ list-style:none; margin:0; padding:0; counter-reset:s; display:grid; gap:0 var(--gutter); grid-template-columns:1fr }
.steps li{ counter-increment:s; display:grid; grid-template-columns:56px 1fr; gap:4px 12px; padding:18px 0 20px; border-top:1px solid color-mix(in srgb, var(--plank) 55%, transparent) }
.steps li::before{ content:counter(s, decimal-leading-zero); grid-row:1 / span 2; font:300 italic 2rem/1 var(--voice); font-stretch:66%; color:var(--kuchiba) }
.steps b{ font-weight:500; font-size:1.125rem }
.steps span{ color:var(--fg-2) }
@media (min-width:768px){ .steps{ grid-template-columns:repeat(2, 1fr) } }
@media (min-width:1100px){ .steps--3{ grid-template-columns:repeat(3, 1fr) } }

/* услуги: карточка с составом */
.svc{ list-style:none; margin:0; padding:0; display:grid; gap:40px var(--gutter) }
.svc > li{ border-top:1px solid var(--plank); padding-top:20px; display:grid; gap:14px; align-content:start }
.svc h3{ font:300 italic var(--fs-door)/1.04 var(--voice); font-stretch:68% }
.svc ul{ list-style:none; margin:0; padding:0; display:grid; gap:8px }
.svc ul li{ display:grid; grid-template-columns:22px 1fr; gap:6px; line-height:1.45 }
.svc ul li::before{ content:""; width:14px; height:1px; background:var(--plank); margin-top:.75em }
@media (min-width:768px){ .svc{ grid-template-columns:repeat(2, 1fr) } }

/* FAQ */
.faq{ border-top:1px solid var(--plank) }
.faq details{ border-bottom:1px solid color-mix(in srgb, var(--plank) 45%, transparent) }
.faq summary{ list-style:none; display:grid; grid-template-columns:1fr 26px; gap:16px; align-items:center; padding:20px 0; cursor:pointer; font-size:clamp(1.0625rem, 1rem + .35vw, 1.3125rem); line-height:1.35 }
.faq summary::-webkit-details-marker{ display:none }
.faq .pm{ position:relative; width:26px; height:26px }
.faq .pm::before, .faq .pm::after{ content:""; position:absolute; left:50%; top:50%; width:13px; height:1px; background:var(--plank); transform:translate(-50%,-50%) }
.faq .pm::after{ width:1px; height:13px; transition:transform .7s var(--e-soft) }
.faq details[open] .pm::after{ transform:translate(-50%,-50%) scaleY(0) }
.faq .ans{ overflow:hidden }
.faq .ans p{ padding:0 42px 22px 0; color:var(--fg-2); max-width:44em }
@media (min-width:1100px){ .faq-wrap{ display:grid; grid-template-columns:repeat(12, minmax(0,1fr)); column-gap:var(--gutter) } .faq-wrap .sh{ grid-column:1 / span 4; display:block } .faq-wrap .faq{ grid-column:6 / -1 } }

/* секция формы: фраза слева, форма справа в рамке-планке */
.formsec .grid{ row-gap:32px }
.formsec .grid > *{ grid-column:1/-1 }
.formsec__voice{ font-size:var(--fs-lead); line-height:1.06; font-stretch:72%; font-weight:300 }
.formsec__alt{ margin-top:22px; color:var(--fg-2) }
.formsec__alt a{ color:var(--link) }
@media (min-width:1100px){ .formsec__a{ grid-column:1 / span 5 !important } .formsec__b{ grid-column:7 / -1 !important } }
.form__fields{ display:grid; gap:22px }
.form__status{ display:grid; gap:12px }
.form__status[hidden]{ display:none }
.form__status h3{ font:300 italic var(--fs-lead)/1.05 var(--voice); font-stretch:72% }
.form__status .btn{ justify-self:start }
.form__err{ color:#8E2F2B; font-size:.9375rem }
.fld--err input, .fld--err textarea{ border-bottom-color:#8E2F2B; box-shadow:0 1px 0 #8E2F2B }
.consent.is-err input{ border-color:#8E2F2B }
.btn[aria-busy="true"]{ opacity:.7; pointer-events:none }

/* до / после */
.ba{ position:relative; --pos:50%; margin:0 }
.ba__frame{ position:relative; overflow:hidden; aspect-ratio:4/5; touch-action:pan-y; cursor:ew-resize; user-select:none; -webkit-user-select:none }
@media (min-width:768px){ .ba__frame{ aspect-ratio:2/1 } }
.ba__img{ position:absolute; inset:0; background:var(--tex) center/cover }
.ba__img--after{ clip-path:inset(0 0 0 var(--pos)) }
.ba__tag{ position:absolute; top:14px; padding:6px 10px; background:rgba(251,250,245,.86); color:var(--sumi); z-index:2 }
.ba__tag--b{ left:14px } .ba__tag--a{ right:14px }
.ba__seam{ position:absolute; top:0; bottom:0; left:var(--pos); width:44px; margin-left:-22px; display:flex; justify-content:center; pointer-events:none; z-index:2 }
.ba__seam::before{ content:""; width:2px; background:var(--torinoko); box-shadow:0 0 0 1px rgba(145,115,71,.6) }
.ba__knob{ position:absolute; top:50%; left:50%; width:46px; height:46px; transform:translate(-50%,-50%); display:grid; place-items:center; background:var(--kinari); color:var(--kuchiba); border:1px solid var(--kuchiba); font:500 .9rem/1 var(--world) }
.ba__range{ position:absolute; inset:0; width:100%; height:100%; opacity:0; margin:0; pointer-events:none }
.ba__range:focus-visible ~ .ba__seam .ba__knob{ outline:2px solid var(--link); outline-offset:3px }
.ba__wait{ position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); display:grid; gap:8px; justify-items:center; text-align:center; padding:18px 22px; background:rgba(251,250,245,.9); color:var(--sumi); max-width:80%; z-index:3; pointer-events:none; transition:opacity .8s var(--e-soft) }
.ba.is-touched .ba__wait{ opacity:0 }
.ba__note{ margin-top:12px; color:var(--fg-2) }

/* галерея предметов и проектов */
.gal3{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:28px var(--gutter) }
@media (min-width:1100px){ .gal3{ grid-template-columns:repeat(3, minmax(0,1fr)) } .gal3--4{ grid-template-columns:repeat(4, minmax(0,1fr)) } }
.gal3 figure{ margin:0 }
.gal3 .pp__win{ aspect-ratio:4/5; background:var(--torinoko) }
.gal3 figcaption{ padding-top:10px; display:grid; gap:3px }
.gal3 b{ font-weight:500; font-size:1rem; line-height:1.3 }
.gal3 span{ color:var(--fg-2) }
.proj{ display:grid; gap:24px var(--gutter); grid-template-columns:1fr }
@media (min-width:768px){ .proj{ grid-template-columns:repeat(2, minmax(0,1fr)) } .proj > :first-child{ grid-column:1/-1 } }
@media (min-width:1100px){ .proj{ grid-template-columns:repeat(12, minmax(0,1fr)) } .proj > :first-child{ grid-column:1 / span 7; grid-row:1 / span 2 } .proj > :nth-child(2){ grid-column:8 / -1 } .proj > :nth-child(3){ grid-column:8 / -1 } .proj > :nth-child(n+4){ grid-column:span 6 } }

/* двери-ссылки на главной и в хабах */
.doors--home .t{ font-size:var(--fs-door) }
.doors3{ list-style:none; margin:0; padding:0; display:grid; gap:36px var(--gutter) }
.doors3 a{ display:grid; gap:12px; text-decoration:none }
.doors3 .t{ font:300 italic var(--fs-door)/1.02 var(--voice); font-stretch:68%; display:flex; justify-content:space-between; align-items:baseline; gap:12px }
.doors3 .t i{ font-style:normal; font-family:var(--world); font-size:1.1rem; color:var(--link) }
.doors3 .d{ color:var(--fg-2) }
@media (min-width:768px){ .doors3{ grid-template-columns:repeat(3, minmax(0,1fr)) } }

/* «Коротко» */
.facts{ margin:0; border-top:1px solid var(--plank) }
.facts div{ display:grid; gap:4px 24px; padding:16px 0 18px; border-bottom:1px solid color-mix(in srgb, var(--plank) 40%, transparent) }
.facts dt{ font-size:var(--fs-label); font-weight:500; letter-spacing:.18em; text-transform:uppercase; color:var(--kuchiba) }
.facts dd{ margin:0; line-height:1.55; max-width:46em }
@media (min-width:768px){ .facts div{ grid-template-columns:200px 1fr } }

/* следующая страница */
.next{ display:grid; gap:10px; text-decoration:none; padding-block:clamp(56px, 7vw, 120px) }
.next .label{ color:var(--fg-2) }
.next b{ font:300 italic var(--fs-h1)/1 var(--voice); font-stretch:66%; display:flex; align-items:baseline; gap:.3em }
.next b i{ font-style:normal; font-family:var(--world); font-size:.4em; color:var(--link); transition:transform .8s var(--e-soft) }
@media (hover:hover){ .next:hover b i{ transform:translateX(8px) } }

/* текстовая страница (политика) */
.prose{ max-width:44em }
.prose h2{ font:300 italic var(--fs-door)/1.1 var(--voice); font-stretch:70%; margin:36px 0 10px }
.prose p{ color:var(--fg); line-height:1.65 }

/* ссылки внутри текста */
.lnk{ color:var(--link); text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:.22em }

/* блок книги на главной */
.bookt{ row-gap:28px; align-items:center }
.bookt > *{ grid-column:1/-1 }
.bookt .cover{ width:min(56%, 300px) }
@media (min-width:768px){ .bookt .cover{ grid-column:1 / span 4; width:min(100%, 300px) } .bookt__body{ grid-column:6 / -1 } }
@media (min-width:1100px){ .bookt .cover{ grid-column:2 / span 3 } .bookt__body{ grid-column:7 / span 6 } }

/* 404 */
.nf{ min-height:70svh; display:grid; align-content:center; gap:22px; padding-block:80px }
.nf h1{ font-size:var(--fs-h1) }

/* переходы между страницами: страница смыкается к шву-планке, за ней бумага сёдзи; новая раскрывается от шва */
@view-transition{ navigation:auto }
::view-transition{ background:
  linear-gradient(var(--kuchiba), var(--kuchiba)) 50% 0/2px 100% no-repeat,
  linear-gradient(90deg, transparent calc(100% - 1px), rgba(145,115,71,.4) 0) 0 0/12.5% 100%,
  linear-gradient(transparent calc(100% - 1px), rgba(145,115,71,.4) 0) 0 0/100% 16.66%,
  #F2EBDD }
::view-transition-old(root), ::view-transition-new(root){ mix-blend-mode:normal; animation-fill-mode:both }
::view-transition-old(root){ animation:vt-close 700ms cubic-bezier(.45,0,.55,1) both }
::view-transition-new(root){ animation:vt-open 1000ms cubic-bezier(.22,.61,.36,1) 520ms both }
@keyframes vt-close{ from{ clip-path:inset(0 0 0 0) } to{ clip-path:inset(0 50% 0 50%) } }
@keyframes vt-open{ from{ clip-path:inset(0 50% 0 50%) } to{ clip-path:inset(0 0 0 0) } }
@media (prefers-reduced-motion:reduce){ @view-transition{ navigation:none } }

/* мобильная кнопка Telegram в шапке */
.hdr__tg{ display:inline-grid; place-items:center; height:34px; padding:0 12px; border:1px solid color-mix(in srgb, var(--ai) 70%, transparent); color:var(--ai); font-size:.75rem; font-weight:500; letter-spacing:.12em; text-transform:uppercase; text-decoration:none }
@media (min-width:1100px){ .hdr__tg{ display:none } }
@media (max-width:1099px){ .hdr .lang{ display:none } }
@media (max-width:374px){ .hdr__name{ font-size:.68rem; letter-spacing:.1em } .hdr__tg{ padding:0 8px } }
.menu .lang{ display:flex; margin-top:22px }
@media (max-width:1099px){
  .hdr{ gap:10px }
  .hdr__l{ min-width:0; flex:1 1 auto }
  .hdr__name{ display:block; overflow:hidden; text-overflow:ellipsis; font-size:.72rem; letter-spacing:.12em }
  .hdr__r{ flex:none; gap:12px }
  .hdr__tg{ height:32px; padding:0 10px; font-size:.6875rem; letter-spacing:.1em }
  .menu-btn{ letter-spacing:.14em }
}

.stats--wide{ grid-column:1/-1 !important; grid-row:auto !important; margin-top:0 !important }
.stats--wide .stat b{ font-size:clamp(3.4rem, 2rem + 6vw, 8.5rem) }
@media (min-width:1100px){ .stats--wide .stat{ padding:20px 24px 0 0 } .stats--wide .stat + .stat{ padding-left:28px } }
@media (max-width:1099px){ .ptitle__text > * + *{ margin-top:16px } .ptitle__text .ptitle__cta{ margin-top:22px } }
:lang(en) .bq::before{ content:"“" } :lang(en) .bq::after{ content:"”" }
@media (max-width:420px){ .hdr__name{ letter-spacing:.07em; font-size:.68rem } .menu-btn{ letter-spacing:.1em } }
.form__fields[hidden]{ display:none }

/* ═════════════ Правки по ревью 17 ═════════════ */
/* P1-7: золото для текста — тёмнее (≥ 4,5:1 на всех фонах), #917347 остаётся для линий и планок */
:root{ --kuchiba-text:#6E5432 }
.facts dt, .doors .n, .label.gold, .gold, .menu__list b, .no b, .stat b, .tl-y b, .steps li::before{ color:var(--kuchiba-text) }
.pp__cap{ color:#55524F }
.f-sakura{ --fg-2:#55524F }

/* P1-5: 320 px — длинные слова переносятся, а не обрезаются */
h1, .disp, .contact__title, .formsec__voice{ overflow-wrap:break-word }
@media (max-width:360px){ h1, .disp, .contact__title{ hyphens:auto; -webkit-hyphens:auto } }
.ptitle__text:only-child{ grid-column:1 / -1 !important }
@media (min-width:1100px){ .ptitle__text:only-child{ grid-column:1 / span 9 !important } }
@media (max-width:360px){
  :root{ --fs-h1:2.2rem; --fs-h2:1.9rem; --fs-lead:1.7rem; --fs-door:1.7rem }
  .ptitle h1.disp--xl{ font-size:2.6rem }
  .c-row{ flex-wrap:wrap; gap:2px 12px; padding-block:12px; font-size:1.1rem; overflow-wrap:anywhere }
  .c-row small{ flex-basis:100% }
}

/* P2-1: разделитель крошек висит в конце строки, а не в начале следующей */
.crumbs li + li::before{ content:none }
.crumbs li:not(:last-child)::after{ content:"·"; color:var(--plank); padding:0 .6em }

/* P2-2: на узком экране — короткое имя в шапке */
.nm-short{ display:none }
@media (max-width:360px){ .hdr .nm-full{ display:none } .hdr .nm-short{ display:inline } }

/* P2-6: галереи — разделитель перед следующим именем */
.gal__list li:not(:last-child)::after{ content:none }
.gal__list li + li::before{ content:"·"; color:var(--plank); font-style:normal; padding-right:.4em; font-family:var(--world); font-size:.5em; vertical-align:.3em }

/* «Живи»: фото после первого экрана */
.gal3--zh{ grid-template-columns:repeat(3, minmax(0,1fr)); max-width:780px }

/* текст ошибки у полей формы */
.form__err{ display:block; margin-top:2px }
.form__err[hidden]{ display:none }
.consent + .form__err{ margin-top:-12px }
@media (max-width:360px){ .hdr > .hdr__r .menu-btn{ font-size:0; gap:0; padding-left:4px; min-width:44px; justify-content:flex-end } }
/* соцсети: текстом, как Telegram; сноска про Meta (РФ) */
.meta-note{ margin-top:14px; font-size:.75rem; line-height:1.45; color:var(--fg-2); max-width:44em }
.ftr .meta-note{ margin-top:6px; padding-top:0; border:0 }
.menu__soc{ margin-top:10px; color:var(--fg-2) }
.menu__soc a{ text-decoration:none }
.menu__note{ font-size:.6875rem }

/* ═════════════ Соцсети в системе «Ма» (brief/18) ═════════════ */
/* знак-печать: квадрат в рамке, как 間; линия 1 px, без фирменных цветов */
.seal{ position:relative; display:inline-grid; place-items:center; width:30px; height:30px; flex:none; color:var(--fg); transition:color .4s var(--e-soft) }
.seal svg{ display:block; width:30px; height:30px }
.seal .seal__frame{ stroke:var(--plank); transition:stroke .4s var(--e-soft) }
.seal::after{ content:""; position:absolute; left:0; right:0; bottom:-5px; height:1px; background:var(--ai); transform:scaleX(0); transform-origin:0 50%; transition:transform .4s var(--e-soft) }
.f-kuro .seal{ color:#F4F0E6 } .f-kuro .seal .seal__frame{ stroke:#C9B48F } .f-kuro .seal::after{ background:#BFD8E6 }
.seals{ display:flex; gap:4px; align-items:center }
.seal-link{ display:inline-grid; place-items:center; width:44px; height:44px; text-decoration:none }
.seal-link:focus-visible .seal, .c-door:focus-visible .seal{ color:var(--ai) }
.seal-link:focus-visible .seal .seal__frame, .c-door:focus-visible .seal .seal__frame{ stroke:var(--ai) }
.seal-link:focus-visible .seal::after, .c-door:focus-visible .seal::after{ transform:scaleX(1) }
.f-kuro .seal-link:focus-visible .seal{ color:#BFD8E6 }
@media (hover:hover){
  .seal-link:hover .seal, .c-door:hover .seal{ color:var(--ai) }
  .seal-link:hover .seal .seal__frame, .c-door:hover .seal .seal__frame{ stroke:var(--ai) }
  .seal-link:hover .seal::after, .c-door:hover .seal::after{ transform:scaleX(1) }
  .f-kuro .seal-link:hover .seal{ color:#BFD8E6 } .f-kuro .seal-link:hover .seal .seal__frame{ stroke:#BFD8E6 }
}

/* «четыре двери» — Telegram, Instagram, Threads, почта */
.c-doors{ margin-top:28px; border-top:1px solid var(--plank) }
.c-door{ display:grid; grid-template-columns:30px 1fr auto; align-items:center; gap:16px; min-height:76px; padding:12px 0; border-bottom:1px solid color-mix(in srgb, var(--plank) 45%, transparent); text-decoration:none }
.c-door__m{ display:grid; gap:2px; min-width:0 }
.c-door__net{ color:var(--fg-2); font-size:.6875rem }
.c-door__nick{ font-size:clamp(1.125rem, 1.02rem + .5vw, 1.5rem); line-height:1.25; overflow-wrap:anywhere }
.c-door__go{ color:var(--fg-2); white-space:nowrap }
.c-door--primary .c-door__go{ color:var(--link) }
.c-doors--compact .c-door{ min-height:64px; padding:8px 0 }
.c-doors--compact .c-door__nick{ font-size:clamp(1.0625rem, 1rem + .35vw, 1.3125rem) }
.contact__b .c-doors{ margin-top:0 }
@media (max-width:360px){ .c-door{ grid-template-columns:30px 1fr; } .c-door__go{ grid-column:2; justify-self:start } }

/* тихая строка в первом экране */
.soc-quiet{ margin-top:12px; color:var(--fg-2) }
.soc-quiet a{ color:var(--fg-2); text-decoration:none; background:linear-gradient(var(--plank),var(--plank)) 0 100%/100% 1px no-repeat; padding-bottom:2px }
@media (hover:hover){ .soc-quiet a:hover{ color:var(--ai) } }
.intro .soc-quiet{ opacity:0 } .intro-run .soc-quiet{ animation:fade 900ms var(--e-soft) 1400ms both }

/* мобильное меню и футер */
.menu__soc{ display:flex; align-items:center; gap:10px; margin-top:16px; color:var(--fg-2) }
.menu__soc .seals{ margin-left:-7px }
.ftr .seals{ margin:10px 0 0 -7px }

/* «Дневник»: узкие створки-кадры между планками */
.diary .sh{ margin-bottom:18px }
.diary__strip{ list-style:none; margin:0; padding:0; display:grid; grid-auto-flow:column; grid-auto-columns:58vw; gap:0; overflow-x:auto; scroll-snap-type:x mandatory; overscroll-behavior-x:contain;
  border-block:1px solid var(--plank); scrollbar-width:none; margin-inline:calc(-1 * max(var(--margin), env(safe-area-inset-left))); padding-inline:max(var(--margin), env(safe-area-inset-left)) }
.diary__strip::-webkit-scrollbar{ display:none }
.diary__strip li{ scroll-snap-align:start; padding:10px; border-right:1px solid color-mix(in srgb, var(--plank) 60%, transparent) }
.diary__strip li:first-child{ border-left:1px solid color-mix(in srgb, var(--plank) 60%, transparent) }
.diary__strip a{ display:block; position:relative; overflow:hidden; aspect-ratio:2/3; background:#E9E2D2 }
.diary__strip img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:transform 1.1s var(--e-soft) }
@media (hover:hover){ .diary__strip a:hover img{ transform:scale(1.03) } }
@media (min-width:768px){ .diary__strip{ grid-auto-columns:calc((100% - 0px) / 3.4) } }
@media (min-width:1100px){ .diary__strip{ grid-auto-flow:row; grid-template-columns:repeat(6, minmax(0,1fr)); overflow:visible; margin-inline:0; padding-inline:0 } }
.diary__foot{ display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center; gap:14px 24px; margin-top:22px }
.diary__voice{ font-size:var(--fs-voice); line-height:1.3; max-width:24em }
.diary__soc{ display:flex; align-items:center; gap:8px; color:var(--fg-2) }
.diary__soc .label a{ text-decoration:none } .diary__soc .seals{ margin-left:-7px }
@media (prefers-reduced-motion:reduce){ .seal, .seal::after, .diary__strip img{ transition:none } }
.c-door__nick{ overflow-wrap:normal; word-break:normal }
@media (max-width:520px){ .c-door--email .c-door__go{ display:none } .c-door--email{ grid-template-columns:30px 1fr } .c-door__nick{ overflow-wrap:anywhere } }
/* сноска про Meta: одна тихая строка мелкой капителью */
.meta-note{ margin-top:12px; font-size:.625rem; line-height:1.6; letter-spacing:.12em; text-transform:uppercase; font-weight:500; color:var(--fg-2); max-width:56em }
.ftr .meta-note{ margin-top:8px; color:#D9CFC0 }
/* первый экран: соцсети тихой строкой из печатей (вариант A) */
.hsoc{ display:flex; align-items:center; flex-wrap:wrap; gap:4px 18px; margin-top:22px; padding-top:16px; position:relative; color:var(--fg-2) }
.hsoc::before{ content:""; position:absolute; left:0; top:0; width:56px; height:1px; background:var(--plank) }
.hsoc__item{ display:inline-flex; align-items:center; gap:10px; min-height:44px; text-decoration:none; color:var(--fg-2) }
.hsoc__item .seal{ width:26px; height:26px; color:var(--fg-2) } .hsoc__item .seal svg{ width:26px; height:26px }
.hsoc__nick{ color:var(--fg-2); opacity:.85; text-transform:none; letter-spacing:.06em }
@media (hover:hover){ .hsoc__item:hover, .hsoc__item:hover .seal{ color:var(--ai) } .hsoc__item:hover .seal .seal__frame{ stroke:var(--ai) } .hsoc__item:hover .seal::after{ transform:scaleX(1) } }
.hsoc__item:focus-visible .seal{ color:var(--ai) }
.intro .hsoc{ opacity:0 } .intro-run .hsoc{ animation:fade 900ms var(--e-soft) 1400ms both }
@media (max-width:1099px){ .hsoc{ margin-top:14px; padding-top:12px; gap:0 16px } .hsoc__nick{ display:none } .hero__text{ padding-bottom:14px } }