:root{
  --bg:#fafaf8; --fg:#1a1a1a; --muted:#8a8a85; --line:#e3e3df; --accent:#c8321e;
  --sans:"Inter","Noto Sans JP",system-ui,sans-serif; --mono:"IBM Plex Mono",ui-monospace,monospace;
  --w:1180px; --pad:clamp(16px,4vw,48px);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:72px}
body{margin:0;background:var(--bg);color:var(--fg);font:300 15px/1.9 var(--sans);letter-spacing:.02em;-webkit-font-smoothing:antialiased}
img{display:block;max-width:100%}
a{color:inherit}
.wrap{max-width:var(--w);margin:0 auto;padding:0 var(--pad)}

/* header */
header{position:sticky;top:0;z-index:10;background:color-mix(in srgb,var(--bg) 88%,transparent);backdrop-filter:blur(8px);border-bottom:1px solid var(--line)}
header .wrap{display:flex;align-items:center;justify-content:space-between;height:60px;gap:16px}
.logo{font-weight:400;letter-spacing:.18em;text-transform:uppercase;font-size:13px;text-decoration:none;white-space:nowrap}
nav{display:flex;gap:clamp(14px,3vw,32px);font-size:13px;align-items:center}
nav a{text-decoration:none;color:var(--muted);transition:color .2s}
nav a:hover{color:var(--fg)}
.lang{font:400 11px var(--mono);border:1px solid var(--line);background:none;padding:4px 8px;cursor:pointer;color:var(--muted)}
.lang:hover{color:var(--fg);border-color:var(--fg)}

/* language switch: data-lang on <html> */
html[data-lang="ja"] [lang="en"]:not(html), html[data-lang="en"] [lang="ja"]:not(html){display:none}

/* hero */
.hero{position:relative;height:min(88vh,820px);overflow:hidden;background:#111}
.hero img{width:100%;height:100%;object-fit:cover;opacity:.92}
.hero .cap{position:absolute;left:var(--pad);bottom:clamp(24px,6vh,64px);color:#fff;max-width:640px;text-shadow:0 1px 12px rgba(0,0,0,.35)}
.hero h1{margin:0 0 .4em;font-weight:300;font-size:clamp(28px,4.6vw,52px);letter-spacing:.06em;line-height:1.2}
.hero p{margin:0;font-size:clamp(13px,1.4vw,15px)}

/* sections */
section{padding:clamp(64px,10vw,128px) 0}
.eyebrow{font:400 11px var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin:0 0 14px}
h2{font-weight:300;font-size:clamp(24px,3.2vw,38px);letter-spacing:.04em;line-height:1.3;margin:0 0 .5em}
h2 em{font-style:normal;color:var(--accent)}
.lead{font-size:clamp(15px,1.6vw,17px);max-width:46em;margin:0 0 2em}

/* series index on top */
.series-list{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(16px,3vw,40px)}
.series-card{text-decoration:none;display:block}
.series-card .thumb{aspect-ratio:4/3;overflow:hidden;background:#ddd}
.series-card img{width:100%;height:100%;object-fit:cover;transition:transform .8s ease}
.series-card:hover img{transform:scale(1.03)}
.series-card h3{font-weight:400;font-size:17px;margin:18px 0 4px;letter-spacing:.04em}
.series-card p{margin:0;color:var(--muted);font-size:13px}

/* gallery */
.series{border-top:1px solid var(--line)}
.gallery{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(8px,1.4vw,16px);margin:0 0 3em}
.gallery button{all:unset;cursor:zoom-in;display:block;aspect-ratio:1;overflow:hidden}
.gallery button:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.gallery img{width:100%;height:100%;object-fit:cover;transition:opacity .3s}
.gallery button:hover img{opacity:.85}

.statement{max-width:44em}
.statement p{margin:0 0 1.2em}
details.more summary{cursor:pointer;list-style:none;font:400 12px var(--mono);letter-spacing:.1em;color:var(--muted);margin:.5em 0 1.2em}
details.more summary::-webkit-details-marker{display:none}
details.more summary::before{content:"+ "}
details.more[open] summary::before{content:"− "}
details.more summary:hover{color:var(--fg)}

/* about */
.about-grid{display:grid;grid-template-columns:1fr 1.4fr;gap:clamp(32px,6vw,96px)}
.cv{list-style:none;padding:0;margin:0;border-top:1px solid var(--line)}
.cv li{display:grid;grid-template-columns:64px 1fr;gap:16px;padding:16px 0;border-bottom:1px solid var(--line);font-size:14px;line-height:1.7}
.cv .y{font:400 12px/1.9 var(--mono);color:var(--muted)}
.cv b{font-weight:500}
.cv small{color:var(--muted);display:block}

/* contact & footer */
.contact{background:#141414;color:#eee}
.contact .eyebrow{color:#888}
.btn{display:inline-block;border:1px solid currentColor;padding:12px 28px;text-decoration:none;font-size:13px;letter-spacing:.1em;transition:background .2s,color .2s}
.btn:hover{background:#eee;color:#141414}
.social{display:flex;gap:20px;margin-top:28px;font:400 12px var(--mono)}
.social a{color:#999;text-decoration:none}
.social a:hover{color:#fff}
footer{padding:28px 0;font:400 11px var(--mono);color:var(--muted)}

/* lightbox */
dialog{border:0;padding:0;background:transparent;max-width:none;max-height:none;width:100vw;height:100vh}
dialog::backdrop{background:rgba(10,10,10,.94)}
dialog .stage{width:100%;height:100%;display:flex;align-items:center;justify-content:center;padding:56px 64px}
dialog img{max-width:100%;max-height:100%;object-fit:contain}
dialog .ctl{position:fixed;background:none;border:0;color:#ccc;font:300 28px var(--sans);cursor:pointer;padding:12px}
dialog .ctl:hover{color:#fff}
dialog .close{top:8px;right:12px}
dialog .prev{left:8px;top:50%;transform:translateY(-50%)}
dialog .next{right:8px;top:50%;transform:translateY(-50%)}
dialog .count{position:fixed;bottom:16px;left:0;right:0;text-align:center;font:400 11px var(--mono);color:#999}

@media (max-width:720px){
  nav .hide-sm{display:none}
  .series-list,.about-grid{grid-template-columns:1fr}
  .gallery{grid-template-columns:repeat(2,1fr)}
  dialog .stage{padding:48px 8px}
}

/* work pages */
.crumb{font:400 11px var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin:0 0 14px}
.crumb a{text-decoration:none}
.crumb a:hover{color:var(--fg)}
.work-head{padding:clamp(48px,8vw,96px) 0 clamp(24px,4vw,48px)}
.work-head h1{font-weight:300;font-size:clamp(30px,5vw,56px);letter-spacing:.04em;line-height:1.15;margin:0 0 .4em}
.prose{max-width:42em;margin:0 0 clamp(40px,6vw,72px)}
.prose p{margin:0 0 1.1em}
.device{display:grid;grid-template-columns:1.5fr 1fr;gap:clamp(24px,4vw,56px);align-items:start;border-top:1px solid var(--line);padding-top:clamp(40px,6vw,72px)}
.device .prose{margin:0}
.device img{width:100%;height:auto;margin:0 0 1.4em}
.video{position:relative;aspect-ratio:16/9;background:#111}
.video iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
@media (max-width:720px){ .device{grid-template-columns:1fr} }
.masonry{columns:3 260px;column-gap:clamp(8px,1.4vw,16px);margin:0 0 clamp(48px,7vw,88px)}
.masonry button{all:unset;cursor:zoom-in;display:block;width:100%;margin:0 0 clamp(8px,1.4vw,16px);break-inside:avoid}
.masonry button:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.masonry img{width:100%;height:auto;transition:opacity .3s}
.masonry button:hover img{opacity:.85}
.work-nav{margin-top:clamp(48px,7vw,88px);display:flex;justify-content:space-between;gap:16px;border-top:1px solid var(--line);padding:28px 0;font-size:14px}
.work-nav a{text-decoration:none;color:var(--muted)}
.work-nav a:hover{color:var(--fg)}
.work-nav small{display:block;font:400 11px var(--mono);letter-spacing:.12em}

/* work cards on top page */
.works3{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(12px,2vw,24px);margin:0 0 3em}
.works3 a{text-decoration:none;display:block}
.works3 .thumb{aspect-ratio:1;overflow:hidden}
.works3 img{width:100%;height:100%;object-fit:cover;transition:transform .8s ease}
.works3 a:hover img{transform:scale(1.03)}
.works3 h3{font-weight:400;font-size:15px;margin:14px 0 2px;letter-spacing:.04em}
.works3 p{margin:0;color:var(--muted);font-size:12px;line-height:1.7}
.works3 .more{font:400 11px var(--mono);letter-spacing:.1em;color:var(--accent);margin-top:6px}
@media (max-width:720px){ .works3{grid-template-columns:1fr} }
.device.solo{grid-template-columns:1fr}
.h1-sub{display:block;font-size:.38em;letter-spacing:.14em;color:var(--muted);margin-top:.5em}
.works3 .soon{font:400 11px var(--mono);letter-spacing:.1em;color:var(--muted);margin-top:6px}

/* justified rows: every image in a row shares one height */
.jrows{display:block;margin:0 0 clamp(48px,7vw,88px)}
.jrow{display:flex;gap:clamp(8px,1.4vw,16px);margin:0 0 clamp(8px,1.4vw,16px)}
.jrow button{all:unset;cursor:zoom-in;display:block;min-width:0;overflow:hidden}
.jrow button:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.jrow img{width:100%;height:100%;object-fit:cover;display:block;transition:opacity .3s}
.jrow button:hover img{opacity:.85}
@media (max-width:720px){
  .jrow{flex-wrap:wrap}
  .jrow button{flex:1 1 100% !important}
}
footer .wrap{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:12px 24px}
.foot-sns{display:flex;gap:18px}
.foot-sns a{text-decoration:none}
.foot-sns a:hover{color:var(--fg)}

/* ---- time-scale redesign ---- */
.intro{padding:clamp(72px,12vw,160px) 0 clamp(40px,6vw,72px)}
.intro h1{font-weight:300;font-size:clamp(30px,5.4vw,64px);line-height:1.25;letter-spacing:.02em;margin:0 0 .7em}
.intro-text{max-width:40em;font-size:clamp(15px,1.5vw,17px)}
.intro-text p{margin:0}

.tl{border-top:1px solid var(--line)}
.tl-row{display:grid;grid-template-columns:88px minmax(180px,240px) 1fr;gap:clamp(12px,2.4vw,32px);align-items:center;padding:16px 0;border-bottom:1px solid var(--line);text-decoration:none;color:inherit}
.tl-head{padding:10px 0;border-bottom:1px solid var(--line)}
.tl-thumb{display:block;aspect-ratio:1;overflow:hidden;background:#111}
.tl-thumb img{width:100%;height:100%;object-fit:cover;transition:transform .6s ease}
.tl-name{display:flex;flex-direction:column;gap:2px;min-width:0}
.tl-name b{font-weight:400;font-size:16px;letter-spacing:.03em}
.tl-name small{font:400 10px var(--mono);letter-spacing:.12em;color:var(--muted);text-transform:uppercase}
.tl-name em{font:400 12px var(--mono);font-style:normal;color:var(--muted);letter-spacing:.04em}
.tl-head .tl-name em{font-size:10px;letter-spacing:.14em}
.tl-track{position:relative;height:24px}
.tl-track::before{content:"";position:absolute;left:0;right:0;top:50%;border-top:1px solid var(--line)}
.tl-track .tick{position:absolute;top:30%;bottom:30%;border-left:1px solid var(--line)}
.tl-track .span{position:absolute;top:50%;height:6px;margin-top:-3px;background:var(--fg);border-radius:3px;min-width:6px;transition:background .2s}
.tl-track .dot{position:absolute;top:50%;width:9px;height:9px;margin:-4.5px 0 0 -4.5px;border-radius:50%;background:var(--fg);transition:background .2s}
.tl-track .link{position:absolute;top:50%;border-top:1px dashed var(--fg)}
.tl-axis{position:relative;height:16px;font:400 10px var(--mono);color:var(--muted);letter-spacing:.06em}
.tl-axis span{position:absolute;transform:translateX(-50%);white-space:nowrap}
a.tl-row:hover .span,a.tl-row:hover .dot{background:var(--accent)}
a.tl-row:hover .link{border-color:var(--accent)}
a.tl-row:hover .tl-thumb img{transform:scale(1.06)}
a.tl-row:focus-visible{outline:2px solid var(--accent);outline-offset:4px}
.tl-note{font-size:12px;color:var(--muted);margin:14px 0 0}
@media (max-width:720px){
  .tl-row{grid-template-columns:64px 1fr;row-gap:10px}
  .tl-row > .tl-track,.tl-row > .tl-axis{grid-column:1/-1}
  .tl-head > span:first-child,.tl-head .tl-name{display:none}
}

/* work page: time + device readout */
.meta{display:flex;flex-wrap:wrap;gap:8px 40px;margin:28px 0 10px;font:400 12px var(--mono);letter-spacing:.04em}
.meta div{display:flex;gap:12px}
.meta dt{color:var(--muted);text-transform:uppercase;letter-spacing:.12em;font-size:10px;line-height:1.9}
.meta dd{margin:0}
.tl-track.big{height:28px;margin-top:8px}
.tl-track.big .span{background:var(--accent)}
.tl-track.big .dot{background:var(--accent)}
.tl-track.big .link{border-color:var(--accent)}

/* devices page */
.devs{display:grid;gap:clamp(40px,6vw,72px);padding-bottom:clamp(48px,7vw,88px)}
.dev{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.2fr);gap:clamp(20px,4vw,56px);align-items:center;border-top:1px solid var(--line);padding-top:clamp(24px,4vw,40px)}
.dev-img{display:block;aspect-ratio:4/3;overflow:hidden;background:#111}
.dev-img img{width:100%;height:100%;object-fit:cover;transition:transform .6s ease}
.dev-img:hover img{transform:scale(1.03)}
.dev h2{font-size:clamp(20px,2.4vw,28px);margin:0 0 .6em}
.dev p{margin:0 0 1em}
.dev-links{display:flex;gap:24px;font:400 11px var(--mono);letter-spacing:.1em}
.dev-links a{text-decoration:none;color:var(--accent)}
@media (max-width:720px){ .dev{grid-template-columns:1fr} }
/* narrow phones: keep logo + 3 links + language button on one line */
@media (max-width:420px){
  .logo{letter-spacing:.06em;font-size:12px}
  header .wrap{gap:10px}
  nav{gap:12px;font-size:12px}
}
/* span whose start is unknown (e.g. Ancestral Recall: ? – 100 years) fades in from the left */
.tl-track .span.fade{border-radius:0 3px 3px 0;-webkit-mask-image:linear-gradient(90deg,transparent,#000 75%);mask-image:linear-gradient(90deg,transparent,#000 75%)}