/* Layout: one column of evidence under a full-bleed "signal" hero; a 12-col grid that collapses to one column on phones.
   Dark-only by design: the site lives on charred wood. */
:root{
  --char:#0e0d0c;
  --ash:#171512;
  --soot:#2a2622;
  --bone:#ede6da;
  --smoke:#a1988d;
  --honey:#c9a874;
  --line:rgba(237,230,218,.12);
  --f-display:"Shippori Mincho","Hiragino Mincho ProN","Yu Mincho","Times New Roman",serif;
  --f-body:"Hanken Grotesk",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --f-mono:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  --s--1:clamp(.78rem,.76rem + .1vw,.85rem);
  --s-0:clamp(1rem,.96rem + .2vw,1.1rem);
  --s-1:clamp(1.2rem,1.1rem + .5vw,1.45rem);
  --s-2:clamp(1.7rem,1.35rem + 1.4vw,2.5rem);
  --s-hero:clamp(3.1rem,1.6rem + 6.4vw,7.4rem);
  color-scheme:dark;
}
html[lang="ru"]{
  --f-display:"Noto Serif JP","Hiragino Mincho ProN","Yu Mincho","Times New Roman",serif;
  --f-body:"Onest",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
}
html[lang="ja"]{
  --f-body:"Hanken Grotesk","Hiragino Sans","Hiragino Kaku Gothic ProN","Noto Sans JP","Yu Gothic UI","Yu Gothic",Meiryo,sans-serif;
  --f-mono:"JetBrains Mono","Hiragino Sans","Hiragino Kaku Gothic ProN","Noto Sans JP","Yu Gothic UI","Yu Gothic",Meiryo,ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
}
html[lang="ja"] body{line-height:1.8}
html[lang="ja"] h1,html[lang="ja"] h2,html[lang="ja"] h3{word-break:auto-phrase}
/* 26ch is about 13 full-width characters; phrase breaks keep words like the review gate in one piece. */
html[lang="ja"] .promise{word-break:auto-phrase;max-width:20em}
*{box-sizing:border-box}
[hidden]{display:none !important}
html{scroll-behavior:smooth}
body{margin:0;background:var(--char);color:var(--bone);font-family:var(--f-body);font-size:var(--s-0);line-height:1.6;overflow-wrap:break-word}
a{color:inherit}
.skip{position:absolute;top:0;left:16px;z-index:10;padding:8px 12px;background:var(--bone);color:var(--char);font-family:var(--f-mono);font-size:var(--s--1);transform:translateY(-200%)}
.skip:focus{transform:none}
:focus-visible{outline:2px solid var(--honey);outline-offset:3px;border-radius:2px}
h1,h2,h3{margin:0;font-family:var(--f-display);font-weight:600;text-wrap:balance;letter-spacing:.005em}
p{margin:0}
.mono,.eyebrow{font-family:var(--f-mono);font-size:var(--s--1);letter-spacing:.08em;text-transform:uppercase;color:var(--smoke)}
.wrap{max-width:1240px;margin:0 auto;padding-inline:clamp(16px,4vw,48px)}
.btn{font-family:var(--f-mono);font-size:var(--s--1);letter-spacing:.08em;text-transform:uppercase;color:var(--bone);background:transparent;border:1px solid var(--soot);border-radius:2px;padding:10px 14px;cursor:pointer;text-decoration:none;display:inline-flex;align-items:center;gap:8px}
.btn:hover{border-color:var(--honey);color:var(--honey)}
.btn.primary{background:var(--bone);color:var(--char);border-color:var(--bone)}
.btn.primary:hover{background:var(--honey);border-color:var(--honey);color:var(--char)}

/* Top bar */
.bar{position:sticky;top:env(safe-area-inset-top,0px);z-index:5;background:color-mix(in srgb,var(--char) 86%,transparent);backdrop-filter:blur(8px);border-bottom:1px solid var(--line)}
.bar .wrap{display:flex;align-items:center;justify-content:space-between;gap:12px;padding-block:12px}
.mark{font-family:var(--f-mono);font-size:var(--s--1);letter-spacing:.12em;text-transform:uppercase}
.bar nav{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.lang{display:flex;gap:2px;font-family:var(--f-mono);font-size:var(--s--1)}
.lang a{color:var(--smoke);padding:4px 6px;text-decoration:none;letter-spacing:.08em}
.lang a:hover{color:var(--honey)}
.lang a[aria-current="page"]{color:var(--bone);text-decoration:underline;text-underline-offset:4px}
.motion{background:none;border:1px solid var(--soot);color:var(--smoke);font-family:var(--f-mono);font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;padding:5px 8px;border-radius:2px;cursor:pointer}
.motion[aria-pressed="true"]{color:var(--honey);border-color:var(--honey)}

/* Hero */
.hero{padding-block:clamp(32px,6vw,80px) clamp(40px,6vw,72px);border-bottom:1px solid var(--line)}
.hero .wrap{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:clamp(28px,5vw,72px);align-items:center}
.hero-copy{display:grid;gap:22px;align-content:center}
.hero h1{font-size:var(--s-hero);line-height:.95;font-weight:800;letter-spacing:-.01em}
.promise{font-family:var(--f-display);font-size:var(--s-1);line-height:1.35;max-width:26ch}
.sub{color:var(--smoke);max-width:52ch}
.cta{display:flex;flex-wrap:wrap;gap:10px;padding-top:6px}
.signal{display:grid;gap:12px;margin:0}
.frame{position:relative;width:100%;max-width:100%;aspect-ratio:1/1;background:#090807;overflow:hidden;border-radius:2px;touch-action:pan-y}
.frame canvas,.frame img{position:absolute;inset:0;width:100%;height:100%;display:block}
.frame img{filter:grayscale(1)}
.dial{display:grid;grid-template-columns:auto minmax(0,1fr) 6.5em;align-items:center;gap:14px}
.dial label{font-family:var(--f-mono);font-size:var(--s--1);letter-spacing:.08em;text-transform:uppercase;color:var(--smoke)}
.dial output{font-family:var(--f-mono);font-size:var(--s--1);text-align:right;font-variant-numeric:tabular-nums;color:var(--bone)}
input[type=range]{width:100%;accent-color:var(--honey)}
.caption{font-size:var(--s--1);color:var(--smoke)}

/* Stats */
.stats-wrap{max-width:1240px;margin:0 auto}
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,170px),1fr));border-bottom:1px solid var(--line)}
.stat{display:grid;gap:4px;padding:22px clamp(16px,2vw,24px);border-right:1px solid var(--line)}
.stat:last-child{border-right:0}
.stat b{font-family:var(--f-mono);font-weight:500;font-size:var(--s-2);line-height:1.1;font-variant-numeric:tabular-nums;white-space:nowrap}
.stat span{font-size:var(--s--1);color:var(--smoke);line-height:1.4}

section.block{padding-block:clamp(56px,8vw,104px);border-bottom:1px solid var(--line)}
.head{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:clamp(16px,3vw,48px);margin-bottom:clamp(28px,4vw,48px)}
.head h2{font-size:var(--s-2);line-height:1.15}
.head p{color:var(--smoke);max-width:60ch;align-self:end}

/* Method */
ol.steps{list-style:none;margin:0;padding:0;display:grid;counter-reset:s}
ol.steps li{counter-increment:s;display:grid;grid-template-columns:minmax(0,4fr) minmax(0,5fr) minmax(0,3fr);gap:clamp(12px,3vw,48px);padding-block:22px;border-top:1px solid var(--line)}
ol.steps li::before{content:none}
.step-t{display:flex;gap:14px;align-items:baseline}
.step-t::before{content:counter(s,decimal-leading-zero);font-family:var(--f-mono);font-size:var(--s--1);color:var(--honey)}
.step-t h3{font-size:var(--s-1);line-height:1.3}
.step-p{color:var(--bone)}
.step-e{font-family:var(--f-mono);font-size:var(--s--1);color:var(--smoke);align-self:start;padding-top:4px}

/* Work */
.filters{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:22px}
.filters button{font-family:var(--f-mono);font-size:.78rem;letter-spacing:.04em;color:var(--smoke);background:none;border:1px solid var(--soot);border-radius:2px;padding:6px 10px;cursor:pointer}
.filters button[aria-pressed="true"]{color:var(--char);background:var(--bone);border-color:var(--bone)}
.cases{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,330px),1fr));gap:1px;background:var(--line);border:1px solid var(--line)}
.case{display:grid;grid-template-rows:auto auto 1fr auto;gap:10px;padding:24px;background:var(--char);transition:opacity .25s ease}
.case .dom{font-family:var(--f-mono);font-size:.74rem;letter-spacing:.08em;text-transform:uppercase;color:var(--honey)}
.case h3{font-size:var(--s-1);line-height:1.25}
.case p{color:var(--smoke);font-size:.95rem;line-height:1.55}
.case .metric{font-family:var(--f-mono);font-size:var(--s--1);color:var(--bone);padding-top:10px;border-top:1px solid var(--line);font-variant-numeric:tabular-nums}
.case.dim{opacity:.22}

/* Skills */
.areas{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,340px),1fr));gap:28px 40px}
.area{display:grid;gap:12px;align-content:start;padding-top:14px;border-top:1px solid var(--line)}
.area h3{font-family:var(--f-body);font-weight:600;font-size:var(--s-0)}
.tags{display:flex;flex-wrap:wrap;gap:6px}
.tag{font-family:var(--f-mono);font-size:.76rem;padding:3px 8px;border:1px solid var(--soot);border-radius:2px;white-space:normal;max-width:100%}

/* Services */
.services{display:grid;grid-template-columns:minmax(0,1fr);gap:1px;background:var(--line);border:1px solid var(--line)}
.service{display:grid;gap:10px;align-content:start;padding:26px;background:var(--char)}
.service .eyebrow{overflow-wrap:anywhere}
.service h3{font-size:var(--s-1);line-height:1.3}
.service p{color:var(--smoke)}

/* Contact */
.contact .wrap{display:grid;gap:28px}
.contact .cta{align-items:center}
.contact .btn{text-transform:none;letter-spacing:.04em}
.contact .email-line{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 14px;max-width:none}
.email-link{font:inherit;font-size:var(--s-1);color:var(--bone);background:none;border:0;padding:0;cursor:pointer;text-decoration-line:underline;text-decoration-style:dotted;text-decoration-thickness:1.5px;text-underline-offset:.28em;overflow-wrap:anywhere;text-align:left}
.email-link:hover,.email-link:focus-visible{color:var(--honey)}
.email-status{font-family:var(--f-mono);font-size:var(--s--1);color:var(--smoke);min-height:1.2em}
.note{font-family:var(--f-mono);font-size:var(--s--1);color:var(--smoke)}
.contact h2{font-size:var(--s-hero);line-height:1;font-weight:800}
.contact p{color:var(--smoke);max-width:52ch}
footer .wrap{display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px;padding-block:28px;font-family:var(--f-mono);font-size:var(--s--1);color:var(--smoke)}

@media (min-width: 640px){.services{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width: 1100px){.services{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media (max-width: 900px){
  .hero .wrap{grid-template-columns:minmax(0,1fr)}
  .signal{order:-1}
  .head{grid-template-columns:minmax(0,1fr)}
  ol.steps li{grid-template-columns:minmax(0,1fr)}
  .stat{border-right:0;border-bottom:1px solid var(--line)}
}
@media (prefers-reduced-motion: reduce){html{scroll-behavior:auto}.case{transition:none}}