/* Layout: a white sheet. Header on top, footer at the bottom, everything else is space waiting for pages. Single light theme by choice. */
:root{
  --paper:#FFFFFF; --ink:#111111; --muted:#5E5E5A; --line:#D9D9D5;
  --latin:"Josefin Sans","Futura","Century Gothic",sans-serif;
  --ja:"Zen Kaku Gothic New","Hiragino Sans","Yu Gothic",sans-serif;
  --gut:clamp(20px,4.5vw,64px);
  color-scheme:light;
}
*{box-sizing:border-box}
[hidden]{display:none !important}
html,body{background:var(--paper); color:var(--ink)}
body{word-break:auto-phrase; line-break:strict; font-family:var(--ja); font-size:15px; line-height:1.9; -webkit-font-smoothing:antialiased; min-height:100%; display:flex; flex-direction:column}
a{color:inherit; text-decoration:none}
a:hover{color:var(--muted)}
a:focus-visible, button:focus-visible{outline:1px solid var(--ink); outline-offset:4px}
.wrap{padding-left:max(var(--gut), env(safe-area-inset-left,0px)); padding-right:max(var(--gut), env(safe-area-inset-right,0px))}
.en{font-family:var(--latin); letter-spacing:.2em}
.logo{display:block; width:auto; aspect-ratio:4480 / 774; fill:currentColor}

/* header */
.hd{display:flex; align-items:center; justify-content:space-between; gap:24px; padding-block:22px}
.hd .home{display:flex; align-items:center; min-height:44px}
.hd .home svg{height:17px}
.nav{display:flex; align-items:center; gap:clamp(20px,2.8vw,40px)}
.nav a{position:relative; display:flex; align-items:center; min-height:44px; font-family:var(--latin); font-size:12px; letter-spacing:.2em}
.nav a::after{content:""; position:absolute; left:0; right:.2em; bottom:9px; height:1px; background:var(--ink); transform:scaleX(0); transform-origin:left; transition:transform .5s cubic-bezier(.2,.7,.15,1)}
.nav a[aria-current="page"]::after{transform:scaleX(1)}
.nav .sep{width:1px; height:12px; background:var(--line)}
.nav .contact{font-weight:500}
.menu-btn{display:none; appearance:none; border:0; background:none; color:var(--ink); font-family:var(--latin); font-weight:500; font-size:12px; letter-spacing:.2em; min-width:64px; min-height:44px; padding:0; text-align:right; cursor:pointer}
@media (max-width:820px){.nav{display:none}.menu-btn{display:block}.hd{padding-block:10px}.hd .home svg{height:14px}}

/* main: the top page as a table of contents */
main{flex:1 0 auto; padding-bottom:clamp(96px,14vw,200px)}
html,body{overflow-x:clip}
.hero{position:relative; width:100vw; margin-left:calc(50% - 50vw); height:clamp(260px,52vh,520px)}
.hero svg{position:absolute; inset:0; width:100%; height:100%; display:block}
.hero path{opacity:0; fill:none; stroke:var(--ink); stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round; vector-effect:non-scaling-stroke; stroke-dasharray:1 2; stroke-dashoffset:1}
@media (prefers-reduced-motion: reduce){.hero path{stroke-dashoffset:0; opacity:1}}
.toc{display:grid; gap:20px; padding-top:clamp(56px,7vw,96px)}
.toc-head{display:flex; justify-content:space-between; align-items:baseline; gap:16px}
.toc-head h2{margin:0; font-family:var(--latin); font-weight:400; font-size:11px; letter-spacing:.2em; color:var(--muted); line-height:1.6}
.toc-head .all{font-size:12px; color:var(--muted); border-bottom:1px solid var(--line); line-height:1.6}
.toc-head .all:hover{color:var(--ink); border-color:var(--ink)}
.cards{list-style:none; margin:0; padding:0; display:grid; gap:clamp(16px,1.8vw,24px)}
.sp-br{display:none}
@media (max-width:820px){.sp-br{display:inline}}
.cards.c4{grid-template-columns:repeat(4,minmax(0,1fr))}
.cards.c3{grid-template-columns:repeat(3,minmax(0,1fr))}
.cards.c1{grid-template-columns:minmax(0,1fr)}
.cards li{display:flex; min-width:0}
.card{flex:1; position:relative; display:flex; flex-direction:column; justify-content:space-between; gap:28px; min-height:136px; padding:20px 22px 18px; border:1px solid var(--line); background:var(--paper); transition:border-color .35s ease}
.card:hover, .card:focus-visible{border-color:var(--ink); color:var(--ink)}
.card .lb{font-family:var(--latin); font-size:11px; letter-spacing:.2em; color:var(--muted); line-height:1.6}
.card .lb.ja{font-family:var(--ja); letter-spacing:.06em}
.card .nm{font-weight:500; font-size:15px; letter-spacing:.04em; line-height:1.6; padding-right:24px}
.card .nm.latin{font-family:var(--latin); letter-spacing:.1em}
.card .nm.ph{color:var(--muted); font-weight:400}
.card .ar{position:absolute; right:20px; bottom:18px; font-family:var(--latin); font-size:14px; line-height:1.6; color:var(--muted); transition:transform .45s cubic-bezier(.2,.7,.15,1), color .35s ease}
.card:hover .ar{transform:translateX(4px); color:var(--ink)}
/* line drawing on service cards: drawn on hover, retracts on leave */
.card.draw{display:grid; grid-template-columns:minmax(0,1fr); grid-template-rows:auto 1fr auto; gap:12px; min-height:236px}
.card.draw .lb{grid-row:1; grid-column:1}
.card.draw .nm{grid-row:3; grid-column:1}
.art{position:static; display:block; margin:0; grid-row:1 / 3; grid-column:1; justify-self:end; align-self:start; width:120px; height:80px; overflow:visible; pointer-events:none; opacity:0; transition:opacity .4s ease .2s}
@media (max-width:820px){.card.draw{min-height:208px; gap:8px}.art{width:96px; height:64px}}
@media (max-width:640px) and (min-width:481px){.art{grid-row:2; margin-top:4px}}
@media (min-width:821px){
  .card.draw{container-type:inline-size; min-height:252px}
  .art{width:clamp(120px,54cqw,184px); height:auto; aspect-ratio:3 / 2}
  .art *{stroke-width:.8}
}
@container (max-width:330px){.art{grid-row:2; align-self:start; margin-top:2px}}
@container (max-width:260px){.sp-br{display:inline}}
@media (min-width:821px){.card.draw{min-height:264px}.art{width:156px; height:104px}}
@media (min-width:1281px){.art{width:clamp(132px,10.5vw,176px); height:auto; aspect-ratio:3 / 2}}
.card.draw:hover .art, .card.draw:focus-visible .art{opacity:1; transition:opacity 0s}
.art *{fill:none; stroke:var(--ink); stroke-width:1; stroke-linecap:round; stroke-linejoin:round;
  stroke-dasharray:1 1; stroke-dashoffset:1; transition:stroke-dashoffset .5s ease}
.art .cover{fill:var(--paper)}
.art .pent{fill:none; fill-opacity:0; transition:stroke-dashoffset .5s ease, fill-opacity .3s ease}
.card.draw:hover .art .pent, .card.draw:focus-visible .art .pent{fill-opacity:0; transition:stroke-dashoffset 1.1s cubic-bezier(.45,.05,.25,1) calc(var(--i,0) * .12s), fill-opacity .6s ease calc(.9s + var(--i,0) * .12s)}
.card.draw:hover .art *, .card.draw:focus-visible .art *{stroke-dashoffset:0; transition:stroke-dashoffset 1.1s cubic-bezier(.45,.05,.25,1) calc(var(--i,0) * .12s)}
@media (hover:none){
  .js .toc.in .card.draw .art{opacity:1; transition:opacity 0s .5s}
  .js .toc.in .card.draw .art *{stroke-dashoffset:0; transition:stroke-dashoffset 1.4s cubic-bezier(.45,.05,.25,1) calc(.5s + var(--i,0) * .14s)}
  .js .toc.in .card.draw .art .pent{fill-opacity:0; transition:stroke-dashoffset 1.4s cubic-bezier(.45,.05,.25,1) calc(.5s + var(--i,0) * .14s), fill-opacity .6s ease calc(1.6s + var(--i,0) * .14s)}
}
/* WORKS: each job shown by a mockup image; grey at rest, colour when pointed at */
.card.work{justify-content:flex-start; gap:10px; padding-top:12px}
.thumb{display:grid; place-items:center; margin:0 -10px 14px; aspect-ratio:16 / 10; max-width:calc(100% + 20px); background:#EDEDEA; color:var(--muted); font-size:12px; overflow:hidden}
.thumb img{width:100%; height:100%; object-fit:cover; display:block; filter:grayscale(1); transition:filter .6s ease}
.card.work:hover .thumb img, .card.work:focus-visible .thumb img{filter:none}
.card.work .nm{margin-bottom:6px}

/* PROJECTS: banners out to each project's own site */
.card.banner{justify-content:flex-start; gap:14px; padding:12px 12px 16px}
.bn{display:grid; place-items:center; aspect-ratio:16 / 10; max-width:100%; background:var(--stone, #EDEDEA); color:var(--muted); font-size:12px; overflow:hidden}
.bn img{width:100%; height:100%; object-fit:cover; display:block}
.card.banner .nm{padding-inline:10px}
.card.banner .ar{right:16px; bottom:16px}
.card:hover .ar.ext{transform:translate(3px,-3px)}
.sr{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap}

/* JOURNAL: wide rows, date over title */
.card.jr{min-height:0; justify-content:center; gap:6px; padding:22px 64px 22px 24px}
.card.jr .ar{top:50%; bottom:auto; transform:translateY(-50%)}
.card.jr:hover .ar{transform:translate(4px,-50%)}

.card.wide{flex-direction:row; align-items:center; min-height:88px}
.card.wide .ar{position:static}
@media (max-width:1020px){.cards.c4{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:820px){
  .cards.c3{grid-template-columns:minmax(0,1fr)}
  .card{min-height:112px; gap:20px}
  .hero{height:clamp(220px,40vh,320px)}
}
@media (max-width:480px){.cards.c4{grid-template-columns:minmax(0,1fr)}}
/* appear: visible at rest; played once a section scrolls in */
@keyframes up{from{opacity:0; transform:translateY(12px)}to{opacity:1; transform:none}}
.js .toc.in .toc-head{animation:up .8s cubic-bezier(.2,.7,.15,1) both}
.js .toc.in .cards li{animation:up .8s cubic-bezier(.2,.7,.15,1) both}
.js .toc.in .cards li:nth-child(1){animation-delay:.1s}.js .toc.in .cards li:nth-child(2){animation-delay:.18s}.js .toc.in .cards li:nth-child(3){animation-delay:.26s}.js .toc.in .cards li:nth-child(4){animation-delay:.34s}
@media (prefers-reduced-motion: reduce){.js .toc.in .toc-head,.js .toc.in .cards li{animation:none}}

/* footer */
.ft{border-top:1px solid var(--line); padding-block:72px 32px; display:grid; gap:72px}
.ft-grid{display:grid; grid-template-columns:2fr 1fr 1fr 1fr; gap:48px 32px}
.ft-id{display:grid; gap:18px; align-content:start}
.ft-id svg{height:14px}
.ft-id p{margin:0; font-size:13px; color:var(--muted)}
.col{display:flex; flex-direction:column; gap:4px}
.col h2{margin:0 0 8px; font-family:var(--latin); font-weight:400; font-size:11px; letter-spacing:.2em; color:var(--muted)}
.col a{display:flex; align-items:center; min-height:32px; font-size:13px}
.col a.en{letter-spacing:.14em}
.ft-legal{display:flex; justify-content:space-between; align-items:center; gap:14px 32px; flex-wrap:wrap; padding-top:24px; border-top:1px solid var(--line)}
.ft-legal nav{display:flex; gap:8px 28px; flex-wrap:wrap}
.ft-legal a{font-size:12px; color:var(--muted)}
.ft-legal a:hover{color:var(--ink)}
.copy{margin:0; font-family:var(--latin); font-size:11px; letter-spacing:.14em; color:var(--muted)}
.placeholder{color:var(--muted)}
@media (max-width:820px){
  .ft{padding-block:56px 28px; gap:48px}
  .ft-grid{grid-template-columns:repeat(2,minmax(0,1fr)); gap:40px 24px}
  .ft-id{grid-column:1 / -1}
  .ft-legal{flex-direction:column; align-items:flex-start}
  .ft-legal nav{flex-direction:column; gap:14px}
}

/* mobile menu */
.sheet{position:fixed; inset:0; z-index:20; background:var(--paper); display:flex; flex-direction:column;
  padding-top:env(safe-area-inset-top,0px); padding-bottom:env(safe-area-inset-bottom,0px);
  opacity:0; visibility:hidden; transition:opacity .35s ease, visibility 0s linear .35s}
.sheet.open{opacity:1; visibility:visible; transition:opacity .35s ease}
.sheet .hd{padding-block:10px}
.sheet-nav{display:flex; flex-direction:column; padding-top:40px}
.sheet-nav a{display:flex; align-items:baseline; justify-content:space-between; gap:16px; padding-block:18px; border-bottom:1px solid var(--line);
  transform:translateY(10px); opacity:0; transition:transform .5s cubic-bezier(.2,.7,.15,1), opacity .5s ease}
.sheet.open .sheet-nav a{transform:none; opacity:1}
.sheet-nav a:nth-child(2){transition-delay:.04s}.sheet-nav a:nth-child(3){transition-delay:.08s}.sheet-nav a:nth-child(4){transition-delay:.12s}.sheet-nav a:nth-child(5){transition-delay:.16s}.sheet-nav a:nth-child(6){transition-delay:.2s}
.sheet-nav .big{font-family:var(--latin); font-weight:500; font-size:26px; letter-spacing:.14em; line-height:1}
.sheet-nav .ja{font-size:12px; color:var(--muted)}
.sheet-nav a[aria-current="page"] .big{text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:8px}
.sheet-foot .sns{display:flex; gap:20px}.sheet-foot .sns a{letter-spacing:.1em; color:var(--ink)}
.sheet-foot{margin-top:auto; display:flex; justify-content:space-between; align-items:baseline; padding-block:28px; font-size:12px; color:var(--muted)}


/* ABOUT */
.page-head{display:grid; gap:14px; padding-top:clamp(72px,10vw,140px)}
.page-head .eb{margin:0; font-family:var(--latin); font-size:11px; letter-spacing:.2em; color:var(--muted)}
.page-head{justify-items:center; padding-block:clamp(96px,14vw,200px) clamp(16px,3vw,40px)}
.page-logo{display:block; width:min(440px,72%); height:auto; aspect-ratio:4480 / 774; fill:var(--ink); overflow:visible}
.page-logo .wr{fill:none; stroke:var(--ink); stroke-width:190; stroke-linecap:butt; stroke-linejoin:round; stroke-dasharray:1 3; stroke-dashoffset:0}
.page-logo .wr.thin{stroke-width:107}
.page-logo .wr.bar{stroke-width:106}
@keyframes wr{from{stroke-dashoffset:1.02}to{stroke-dashoffset:0}}
.view:not([hidden]) .page-logo .wr{animation:wr var(--t) cubic-bezier(.45,.05,.4,1) var(--d) both}
@media (prefers-reduced-motion: reduce){.page-logo .wr{animation:none !important}}
.toc.ab{grid-template-columns:minmax(140px,1fr) minmax(0,3fr); gap:20px 48px; align-items:start}
.toc.ab .toc-head{padding-top:6px}
.ab-body{display:grid; gap:20px; max-width:38em; min-width:0}
.ab-body h3{margin:0; font-weight:500; font-size:clamp(18px,2vw,22px); line-height:1.6; letter-spacing:.04em; text-wrap:balance; word-break:auto-phrase}
.ab-body p{margin:0}
.ab-body h3 .kana{margin-left:14px; font-family:var(--latin); font-weight:400; font-size:12px; letter-spacing:.14em; color:var(--muted)}
.axis{margin:0; border-top:1px solid var(--line)}
.axis > div{display:grid; grid-template-columns:72px minmax(0,1fr); gap:18px; align-items:center; padding-block:14px; border-bottom:1px solid var(--line)}
.axis dt{font-weight:500; font-size:36px; line-height:1; text-align:center}
.axis dt.sm{font-size:24px}
.axis dd{margin:0; font-size:14px}
.axis .k, .prof dt, .creed .en{display:block; font-family:var(--latin); font-size:10.5px; letter-spacing:.2em; color:var(--muted); line-height:1.8}
.creed{list-style:none; margin:0; padding:0; border-top:1px solid var(--line)}
.creed li{display:grid; grid-template-columns:48px minmax(0,1fr); gap:18px; align-items:baseline; padding-block:16px; border-bottom:1px solid var(--line)}
.creed .ini{font-family:var(--latin); font-weight:500; font-size:28px; line-height:1}
.creed .jp{margin:0; font-weight:500; font-size:16px; letter-spacing:.04em}
.creed .mean{margin:4px 0 0; font-size:13px; color:var(--muted)}
.titles{list-style:none; margin:-6px 0 0; padding:0; display:grid; gap:2px; font-size:13.5px; letter-spacing:.04em}
.prof{margin:0; border-top:1px solid var(--line)}
.hist{list-style:none; margin:0; padding:0; display:grid; gap:4px}
.hist li{display:grid; grid-template-columns:4.2em minmax(0,1fr); gap:12px}
.hist .y{font-family:var(--latin); letter-spacing:.06em; font-variant-numeric:tabular-nums}
.prof > div{display:grid; grid-template-columns:96px minmax(0,1fr); gap:18px; padding-block:12px; border-bottom:1px solid var(--line)}
.prof dt{padding-top:2px}
.prof dd{margin:0; font-size:14px}
.cards.c2{grid-template-columns:repeat(2,minmax(0,1fr))}
.js .toc.in .ab-body, .js .toc.in.ab .cards li{animation:up .8s cubic-bezier(.2,.7,.15,1) .12s both}
@media (max-width:820px){
  .toc.ab{grid-template-columns:minmax(0,1fr); gap:16px}
  .cards.c2{grid-template-columns:minmax(0,1fr)}
  .prof > div{grid-template-columns:minmax(0,1fr); gap:2px}
}
@media (prefers-reduced-motion: reduce){.js .toc.in .ab-body{animation:none}}


/* SERVICE */
.page-head .ttl{margin:0; font-family:var(--latin); font-weight:500; font-size:clamp(28px,3.4vw,44px); line-height:1.2; letter-spacing:.14em}
.svc-head{gap:10px}
.svc-head .eb{margin:18px 0 0}
.svc-head .copy-l{margin:28px 0 0; font-weight:500; font-size:clamp(17px,1.8vw,20px); letter-spacing:.06em; text-align:center; text-wrap:balance; word-break:auto-phrase}
.svc-head h1{margin:0; font-weight:500; font-size:clamp(22px,2.6vw,30px); letter-spacing:.06em}
.ha{width:min(240px,56%); height:auto; aspect-ratio:3 / 2; overflow:visible}
.ha *{fill:none; stroke:var(--ink); stroke-width:.7; stroke-linecap:round; stroke-linejoin:round; stroke-dasharray:1 3; stroke-dashoffset:0}
.ha .cover{fill:var(--paper)}
@keyframes haDraw{from{stroke-dashoffset:1.02}to{stroke-dashoffset:0}}
.view:not([hidden]) .ha *{animation:haDraw 1.2s cubic-bezier(.45,.05,.25,1) calc(.2s + var(--i,0) * .14s) both}
.note{font-size:13px; color:var(--muted)}
.flow{list-style:none; margin:0; padding:0; border-top:1px solid var(--line)}
.flow li{display:grid; grid-template-columns:48px minmax(0,1fr); gap:12px; padding-block:12px; border-bottom:1px solid var(--line); font-size:14px}
.flow .n{font-family:var(--latin); font-size:12px; letter-spacing:.14em; color:var(--muted); font-variant-numeric:tabular-nums; padding-top:2px}
@media (prefers-reduced-motion: reduce){.ha *{animation:none !important}}

.cards.c5{grid-template-columns:repeat(5,minmax(0,1fr))}
@media (max-width:1020px){
  .cards.c5{grid-template-columns:repeat(6,minmax(0,1fr))}
  .cards.c5 li{grid-column:span 2}
  .cards.c5 li:nth-child(n+4){grid-column:span 3}
}
@media (max-width:480px){
  .cards.c5{gap:10px}
  .cards.c5 .card.draw{min-height:150px; padding:14px 8px 14px; gap:6px}
  .cards.c5 .card .lb{font-size:9.5px; letter-spacing:.12em}
  .cards.c5 .card .nm{font-size:13px; letter-spacing:.02em}
  .cards.c5 .art{width:60px; height:40px}
}
.card.static{cursor:default; justify-items:center; text-align:center}
.card.static .lb, .card.static .nm{justify-self:center; padding-right:0}
.card.draw.static .art{grid-row:2; justify-self:center; align-self:center; margin:0}
.card.static:hover{border-color:var(--line)}
.view:not([hidden]) .toc.in .card.static .art{opacity:1; transition:opacity 0s .3s}
.view:not([hidden]) .toc.in .card.static .art *{stroke-dashoffset:0; transition:stroke-dashoffset 1.3s cubic-bezier(.45,.05,.25,1) calc(.4s + var(--i,0) * .14s)}
.br2,.br-m{display:none}
@media (max-width:820px){.br2{display:inline}}
@media (max-width:600px){.br-m{display:inline}}
@container (max-width:180px){.br2{display:inline}}

/* CONTACT */
.notes{list-style:none; margin:0; padding:0; display:grid; gap:10px; font-size:13.5px; color:var(--muted)}
.notes li{position:relative; padding-left:1.2em}
.notes li::before{content:"・"; position:absolute; left:0}
.cf{display:grid; gap:28px; max-width:38em}
.cf .f{border:0; margin:0; padding:0; display:grid; gap:10px; min-width:0}
.cf legend, .cf label, .cf .lbl{font-size:14px; font-weight:500; padding:0}
.cf legend{margin-bottom:10px}
.cf .req{margin-left:10px; font-weight:400; font-size:11px; letter-spacing:.06em; color:var(--muted)}
.cf .sub{margin-left:10px; font-weight:400; font-size:12px; color:var(--muted)}
.cf input[type=text], .cf input[type=email], .cf input[type=tel], .cf textarea{width:100%; box-sizing:border-box; font:inherit; font-size:16px; color:var(--ink); background:var(--paper); border:1px solid var(--line); border-radius:0; padding:12px 14px; min-height:48px; transition:border-color .2s}
.cf textarea{resize:vertical; line-height:1.8}
.cf input:focus, .cf textarea:focus{outline:none; border-color:var(--ink)}
.cf .row2{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px}
.cf .opts{display:flex; flex-direction:column; gap:0}
.cf .opt{display:inline-flex; align-items:center; gap:10px; min-height:40px; font-weight:400; cursor:pointer}
.cf .opt input{width:18px; height:18px; margin:0; accent-color:#111111; flex:none}
.cf .other{margin-top:4px}
.cf .agree a{text-decoration:underline; text-underline-offset:4px}
.cf .err{margin:0; font-size:12.5px; color:var(--ink)}
.cf .err::before{content:"※ "}
.cf .bad input[type=text], .cf .bad input[type=email], .cf .bad input[type=tel], .cf .bad textarea{border-color:var(--ink)}
.send{justify-self:start; appearance:none; display:inline-flex; align-items:center; gap:28px; min-height:52px; padding:0 28px; border:1px solid var(--ink); background:var(--ink); color:var(--paper); font:inherit; font-size:14px; letter-spacing:.08em; cursor:pointer; transition:background .25s, color .25s}
.send:hover{background:var(--paper); color:var(--ink)}
.send .en{font-family:var(--latin)}
.done{margin:0; font-size:13px; color:var(--muted)}
.notes-box{gap:14px}
.notes-box .lbl, .cf-confirm .lbl{margin:0; font-size:14px; font-weight:500}
.notes a{color:inherit; text-decoration:underline; text-underline-offset:4px}
.cf-confirm{display:grid; gap:24px; max-width:38em}
.cf-confirm dd{white-space:pre-wrap; word-break:break-word}
.cf-btns{display:flex; flex-wrap:wrap; gap:12px}
.send.ghost{background:var(--paper); color:var(--ink)}
.send.ghost:hover{background:var(--ink); color:var(--paper)}
@media (max-width:480px){.send{justify-self:stretch; justify-content:space-between}.cf-btns{flex-direction:column-reverse}.cf-btns .send{width:100%}}

/* LEGAL */
.page-head .ttl-ja{margin:0; font-weight:500; font-size:clamp(20px,2.4vw,26px); letter-spacing:.08em}
.toc.legal{justify-items:center}
.legal-body{width:min(40em,100%); display:grid; gap:16px; font-size:14px; line-height:2}
.legal-body p{margin:0}
.legal-body h2{margin:20px 0 0; font-size:15px; font-weight:500; letter-spacing:.04em}
.legal-body ul{margin:0; padding-left:1.4em}
.legal-body a{text-decoration:underline; text-underline-offset:4px}
.legal-sign{margin-top:32px}
.legal-table > div{grid-template-columns:150px minmax(0,1fr)}
.legal-table dt{font-family:var(--ja); font-size:13px; letter-spacing:.04em; color:var(--muted)}
.legal-sign dt{font-family:var(--ja); font-size:13px; letter-spacing:.04em; color:var(--muted)}
@media (max-width:820px){.legal-table > div{grid-template-columns:minmax(0,1fr)}}
/* WORKS index: same cards, narrowed by service */
.wf{display:flex; flex-wrap:nowrap; gap:0 28px; margin:-8px 0 8px; overflow-x:auto; scrollbar-width:none; -webkit-overflow-scrolling:touch}
.wf::-webkit-scrollbar{display:none}
.wf > :first-child{margin-left:auto}.wf > :last-child{margin-right:auto}
@media (max-width:600px){.wf{flex-wrap:wrap; justify-content:center; overflow:visible}.wf > :first-child, .wf > :last-child{margin-inline:0}}
.wf button{appearance:none; position:relative; border:0; background:none; padding:0; min-height:44px; font:inherit; font-size:13px; letter-spacing:.06em; color:var(--muted); white-space:nowrap; cursor:pointer; transition:color .3s ease}
.wf button::after{content:""; position:absolute; left:0; right:0; bottom:9px; height:1px; background:var(--ink); transform:scaleX(0); transform-origin:left; transition:transform .5s cubic-bezier(.2,.7,.15,1)}
.wf button:hover{color:var(--ink)}
.wf button[aria-pressed="true"]{color:var(--ink)}
.wf button[aria-pressed="true"]::after{transform:scaleX(1)}
@media (max-width:480px){.wf{gap:0 14px}.wf button{font-size:12px; letter-spacing:.04em}}
@media (max-width:820px) and (min-width:481px){.cards.c3.wl{grid-template-columns:repeat(2,minmax(0,1fr))}}
@keyframes up2{from{opacity:0; transform:translateY(12px)}to{opacity:1; transform:none}}
.js .toc.in .cards.wl.re li{animation:up2 .7s cubic-bezier(.2,.7,.15,1) both}
@media (prefers-reduced-motion: reduce){.js .toc.in .cards.wl.re li{animation:none}}

/* PROJECTS: one row per project — banner, then name, role and the way out */
.pj-list{list-style:none; margin:0; padding:0; border-top:1px solid var(--line)}
.pj{display:grid; grid-template-columns:minmax(0,1.25fr) minmax(0,1fr); gap:24px 56px; align-items:center; padding-block:clamp(32px,4vw,56px); border-bottom:1px solid var(--line)}
.pj .bn{width:100%}
.pj-tx{display:grid; gap:16px; justify-items:start; min-width:0}
.pj-tx h2{margin:0; font-weight:500; font-size:clamp(20px,2.2vw,26px); letter-spacing:.06em; line-height:1.4}
.pj-tx h2.latin{font-family:var(--latin); letter-spacing:.1em}
.pj-tx p{margin:0; font-size:14.5px}
.pj-tx .nw{display:inline-block}
.pj-tx .v-meta{width:100%; max-width:24em}
.pj-go{display:inline-flex; align-items:center; gap:14px; min-height:44px; font-size:13px; letter-spacing:.06em; border-bottom:1px solid var(--line)}
.pj-go:hover{border-color:var(--ink)}
.pj-go .en{letter-spacing:0; transition:transform .45s cubic-bezier(.2,.7,.15,1)}
.pj-go:hover .en{transform:translate(3px,-3px)}
@media (max-width:820px){.pj{grid-template-columns:minmax(0,1fr)}}
.js .toc.in .pj{animation:up .8s cubic-bezier(.2,.7,.15,1) both}
.js .toc.in .pj:nth-child(2){animation-delay:.1s}.js .toc.in .pj:nth-child(3){animation-delay:.2s}
@media (prefers-reduced-motion: reduce){.js .toc.in .pj{animation:none}}

/* JOURNAL: list of rows, and one reading column per post */
.post{width:min(36em,100%); margin-inline:auto; display:grid; gap:0; padding-top:clamp(72px,10vw,140px)}
.card.jr .cat, .post .cat{margin-left:16px; padding-left:16px; border-left:1px solid var(--line); font-family:var(--ja); letter-spacing:.06em}
.post .p-date{margin:0; font-family:var(--latin); font-size:12px; letter-spacing:.14em; color:var(--muted)}
.post h1{margin:14px 0 0; font-weight:500; font-size:clamp(21px,2.4vw,28px); line-height:1.65; letter-spacing:.04em; text-wrap:balance; word-break:auto-phrase}
.post .p-eye{margin:clamp(32px,4vw,48px) 0 0; aspect-ratio:16 / 10; display:grid; place-items:center; background:#EDEDEA; color:var(--muted); font-size:12px; overflow:hidden}
.post .p-eye img{width:100%; height:100%; object-fit:cover; display:block}
.p-body{margin-top:clamp(36px,5vw,56px); font-size:15.5px; line-height:2.1; letter-spacing:.02em}
.p-body p{margin:0 0 1.7em}
.p-body h2{margin:2.6em 0 1em; font-weight:500; font-size:19px; letter-spacing:.04em; line-height:1.7}
.p-body h3{margin:2.2em 0 .9em; font-weight:500; font-size:17px; letter-spacing:.04em; line-height:1.7}
.p-body h4{margin:1.8em 0 .8em; padding-bottom:6px; border-bottom:1px solid var(--ink); font-weight:500; font-size:15.5px; line-height:1.7}
.p-body blockquote{margin:0 0 1.7em; padding-left:18px; border-left:2px solid var(--line); color:var(--muted)}
.p-body figure img{width:100%; display:block}
.p-body figcaption{margin-top:8px; font-size:12px; color:var(--muted); text-align:center}
.p-body hr{border:0; border-top:1px solid var(--line); width:40%; margin:2.4em auto}
.p-body a{text-decoration:underline; text-underline-offset:4px}
.post h1 + .p-body{margin-top:clamp(36px,5vw,56px)}
.p-body figure{margin:2.2em 0}
.p-nav{margin-top:clamp(48px,6vw,72px); padding-top:24px; border-top:1px solid var(--line); display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:16px 24px; font-size:13px}
.p-nav a{display:grid; gap:4px; color:var(--ink)}
.p-nav a:hover{color:var(--muted)}
.p-nav .k{font-family:var(--latin); font-size:11px; letter-spacing:.2em; color:var(--muted)}
.p-nav .nx{text-align:right; justify-items:end}
.p-nav .back{grid-column:1 / -1; justify-self:center; margin-top:24px; display:inline-flex; min-height:44px; align-items:center; border-bottom:1px solid var(--line); font-size:13px}
.view:not([hidden]) .post > *{animation:up .8s cubic-bezier(.2,.7,.15,1) both}
.view:not([hidden]) .post > :nth-child(2){animation-delay:.08s}.view:not([hidden]) .post > :nth-child(n+3){animation-delay:.16s}
@media (prefers-reduced-motion: reduce){.view:not([hidden]) .post > *{animation:none}}

/* WORKS viewer: one job told as vertical sheets */
.viewer{position:fixed; inset:0; z-index:25; background:var(--paper); display:flex; flex-direction:column;
  padding-top:env(safe-area-inset-top,0px); padding-bottom:env(safe-area-inset-bottom,0px); animation:vIn .45s ease both}
@keyframes vIn{from{opacity:0}to{opacity:1}}
.v-progress{position:absolute; left:0; right:0; top:env(safe-area-inset-top,0px); height:2px; background:var(--line); z-index:2}
.v-progress i{display:block; height:100%; background:var(--ink); transform-origin:left; transform:scaleX(.2); transition:transform .6s cubic-bezier(.2,.7,.15,1)}
.v-top{display:flex; justify-content:space-between; align-items:center; gap:16px; padding-block:12px; position:relative; z-index:2; background:var(--paper)}
.v-id{margin:0; display:flex; gap:14px; align-items:baseline; min-width:0; font-size:12px; color:var(--muted)}
.v-id .en{font-size:11px; color:var(--ink); flex:none}
.v-id #vTitle{white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.v-deck{flex:1; overflow-y:auto; overflow-x:hidden; scroll-snap-type:y mandatory; scroll-behavior:smooth; overscroll-behavior:contain; outline:none}
.v-sheet{min-height:100%; scroll-snap-align:start; scroll-snap-stop:always; display:grid; align-content:center; padding-block:40px 88px;
  padding-left:max(var(--gut), env(safe-area-inset-left,0px)); padding-right:max(var(--gut), env(safe-area-inset-right,0px))}
.v-in{width:min(1040px,100%); margin-inline:auto; display:grid; gap:28px}
.v-split{grid-template-columns:minmax(0,1fr) minmax(0,1.2fr); align-items:center; gap:56px}
@media (max-width:820px){.v-split{grid-template-columns:minmax(0,1fr); gap:32px}}
.v-eb{margin:0; display:flex; gap:14px; font-family:var(--latin); font-size:11px; letter-spacing:.2em; color:var(--muted)}
.v-eb b{font-weight:500; color:var(--ink)}
.v-h{margin:0; word-break:auto-phrase; font-weight:500; font-size:clamp(22px,3vw,32px); line-height:1.55; letter-spacing:.04em; text-wrap:balance}
.v-h.cover{font-size:clamp(26px,4vw,44px)}
.v-body{display:grid; gap:12px; max-width:32em; font-size:15px}
.v-body p{margin:0}
.v-list{list-style:none; margin:0; padding:0; border-top:1px solid var(--line)}
.v-list li{padding-block:12px; border-bottom:1px solid var(--line); font-size:14px}
.v-meta{display:grid; grid-template-columns:auto minmax(0,1fr); gap:0; margin:0; border-top:1px solid var(--line); max-width:30em}
.v-meta dt, .v-meta dd{margin:0; padding-block:10px; border-bottom:1px solid var(--line); font-size:13px}
.v-meta dd{padding-left:28px}
.v-meta dt, .v-meta dd{display:flex; align-items:center}
.v-meta dt{font-family:var(--latin); font-size:11px; letter-spacing:.2em; color:var(--muted)}
.ph{color:var(--muted)}
.v-tb{position:absolute; z-index:2; right:calc(16px + env(safe-area-inset-right,0px)); bottom:calc(14px + env(safe-area-inset-bottom,0px));
  display:grid; border:1px solid var(--line); background:var(--paper); padding:6px 10px; font-family:ui-monospace,Menlo,monospace; font-size:10.5px; line-height:1.4}
.v-tb .k{font-size:9px; letter-spacing:.12em; color:var(--muted)}
.v-tb .v{font-variant-numeric:tabular-nums}
.v-next{display:flex; flex-wrap:wrap; gap:12px}
.v-btn{appearance:none; display:inline-flex; align-items:center; gap:12px; min-height:48px; padding:0 22px; border:1px solid var(--line); background:var(--paper); color:var(--ink); font-family:var(--ja); font-size:14px; cursor:pointer; transition:border-color .3s}
.v-btn:hover{border-color:var(--ink)}
.v-btn .en{font-size:11px}
/* mockups: line frame, screen in grey until pointed at */
.mocks{display:flex; align-items:flex-end; justify-content:center; gap:clamp(16px,3vw,36px); flex-wrap:wrap}
.mock{border:1px solid var(--ink); background:var(--paper); display:flex; flex-direction:column}
.mock.pc{width:min(560px,100%)}
.mock.pc .bar{display:flex; gap:5px; padding:7px 10px; border-bottom:1px solid var(--ink)}
.mock.pc .bar i{width:6px; height:6px; border:1px solid var(--ink); border-radius:50%}
.mock.pc .scr{aspect-ratio:16 / 10}
.mock.sp{width:min(170px,40%); border-radius:20px; padding:12px 8px}
.mock.sp .scr{aspect-ratio:9 / 19; border-radius:6px}
.scr{display:grid; place-items:center; background:#EDEDEA; color:var(--muted); font-size:12px; overflow:hidden; text-align:center; padding:8px}
.scr img{width:100%; height:100%; object-fit:cover; object-position:top; filter:grayscale(1); transition:filter .6s ease}
.mock:hover .scr img{filter:none}
/* sheet entrance */
@keyframes vRise{from{opacity:0; transform:translateY(16px)}to{opacity:1; transform:none}}
.v-sheet.on .r{animation:vRise .9s cubic-bezier(.2,.7,.15,1) calc(.15s + var(--d,0s)) both}
@media (prefers-reduced-motion: reduce){.viewer, .v-sheet.on .r{animation:none}.v-deck{scroll-behavior:auto}}

/* "not ready" note */
.toast{position:fixed; z-index:30; left:50%; bottom:calc(28px + env(safe-area-inset-bottom,0px)); transform:translate(-50%,8px);
  background:var(--ink); color:var(--paper); font-size:12px; letter-spacing:.06em; padding:10px 18px; opacity:0; pointer-events:none; transition:opacity .3s ease, transform .3s ease; white-space:nowrap}
.toast.show{opacity:1; transform:translate(-50%,0)}

@media (prefers-reduced-motion: reduce){*{transition:none !important}}

.hp{position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden}
.nav a[aria-current="page"]::after{transform:scaleX(1)}