/* KENGO UMETANI — shared stylesheet
   Layout: gallery rows — a large image on the left, a narrow text column on the right (label left / data right lists).
   Single white theme by choice.
   Breakpoints: two columns ≥ 901px (and ≥ 1025px in portrait) · stacked below · compact two columns on short landscape screens. */
:root{
  --bg:#f7f5ee;
  --ink:#000000;
  --mute:#8a8a8a;
  --rule:#e6e6e6;
  --sub:#3a3a3a;
  --f:"Helvetica Neue",Helvetica,Arial,"Zen Kaku Gothic New","Hiragino Kaku Gothic ProN","Yu Gothic",sans-serif;
  --fs:10px;        /* labels, nav, lists: smallest size that stays legible in uppercase Helvetica */
  --fs-body:11px;   /* running text, Japanese and English */
  --gut:max(clamp(16px,3vw,40px), env(safe-area-inset-left,0px), env(safe-area-inset-right,0px));
  --side:clamp(260px, 26vw, 440px);
  --gap:clamp(24px,3vw,56px);
  --hdr:118px;
  --img-w:clamp(420px, 44vw, 820px);
  --img-h:68svh;
  color-scheme:only light;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-padding-top:var(--hdr)}
html,body{background:var(--bg);color:var(--ink)}
/* uncoated-paper white with a fine grain and soft cloudiness, like a printed book cover */
body,.top{background:url("paper.png") repeat,var(--bg);background-size:320px 320px}
body{margin:0;font-family:var(--f);font-size:var(--fs);line-height:1.45;letter-spacing:.01em;-webkit-font-smoothing:antialiased;padding-inline:var(--gut);-webkit-tap-highlight-color:transparent}
a{color:inherit;text-decoration:none}
a:hover{color:var(--mute)}
a.u{text-decoration:underline;text-underline-offset:2px}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer;letter-spacing:inherit}
a:focus-visible,button:focus-visible{outline:1px solid var(--ink);outline-offset:2px}
p{margin:0}
h1,h2{margin:0;font-size:inherit}
.b{font-weight:700}
.mute{color:var(--mute)}
[hidden]{display:none!important}
.visually-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* header */
.top{position:sticky;top:0;z-index:10;display:flex;justify-content:space-between;align-items:flex-start;gap:var(--gap);padding-block:calc(env(safe-area-inset-top,0px) + 22px) 18px;min-height:var(--hdr)}
.mark{font-weight:700;text-transform:uppercase;align-self:start;font-size:calc(var(--fs) * 1.4);letter-spacing:.02em;line-height:1.3}
.mark span{display:block;font-weight:400}
.mark .l2{display:inline;font-weight:inherit}
.nav{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:6px clamp(16px,2.4vw,40px);text-transform:uppercase}
.nav a{width:max-content;max-width:100%}
.nav a.on{font-weight:700}

/* rows */
main{display:grid}
.row{display:grid;grid-template-columns:minmax(0,1fr) var(--side);gap:var(--gap);padding-block:clamp(40px,7vw,96px) 0;align-items:start}
.row.first{padding-top:clamp(12px,2vw,28px)}
.row .l{min-width:0}
.row .r{min-width:0;position:sticky;top:calc(var(--hdr) + 8px)}
.row.text .r{position:static}

.frame{position:relative;display:flex;align-items:flex-start;touch-action:pan-y}
.frame picture{display:contents}
.frame img{display:block;max-width:min(100%, var(--img-w));max-height:min(var(--img-h), calc(100svh - var(--hdr) - 70px));width:auto;height:auto;object-fit:contain;object-position:left top;user-select:none;-webkit-user-drag:none;animation:fade .35s ease}
.show[data-count]:not([data-count="1"]) .frame img{cursor:pointer}
@keyframes fade{from{opacity:.001}to{opacity:1}}
.counter{margin-top:10px;display:flex;gap:18px;align-items:center;text-transform:uppercase}
.counter button:hover{color:var(--mute)}

.name{font-weight:700;text-transform:uppercase;margin-bottom:20px}
.name span{display:block}
.h2{font-weight:700;text-transform:uppercase;margin-bottom:16px}
.h2 span{display:block;font-weight:400}
.label{font-weight:700;text-transform:uppercase}
.label span{display:block;font-weight:400}
.loc{text-transform:uppercase;margin:-10px 0 16px}
.role{margin:-8px 0 16px;font-weight:700;text-transform:uppercase}
.role .sub{display:block;font-weight:400;color:var(--mute);text-transform:none}
.lead{font-weight:700;font-size:12px;line-height:1.5;margin-bottom:6px;text-transform:uppercase}
.lead.ja{font-weight:400;font-size:var(--fs-body);line-height:1.6;margin-bottom:18px;text-transform:none}
.h{text-transform:uppercase;margin:26px 0 10px;font-weight:700}

.txt{display:grid;gap:.9em;font-size:var(--fs-body);line-height:1.85;letter-spacing:.02em;max-width:40em}
.txt.en{font-size:var(--fs-body);line-height:1.6;letter-spacing:.01em}
.txt.second{font-size:var(--fs-body);color:var(--sub);margin-top:18px;padding-top:14px;border-top:1px solid var(--rule)}
.txt.ja{line-height:1.6}
.more{display:inline-block;margin-top:22px;text-transform:uppercase;font-weight:700}
.note{margin-top:12px;color:var(--mute)}

.list{list-style:none;margin:0;padding:0;text-transform:uppercase;max-width:40em}
.list.norm{text-transform:none}
.list.gap{display:grid;gap:8px}
.list li{display:flex;justify-content:space-between;gap:16px}
.list li > *:first-child{min-width:0;overflow-wrap:anywhere}
.list li > *:last-child:not(:first-child){text-align:right;flex-shrink:0}
.list .row-a{display:flex;justify-content:space-between;gap:16px;width:100%}
.list .sub{display:block;color:var(--mute);text-transform:none}
.list .sub[lang="ja"]{color:var(--ink)}

.video{display:block;position:relative}
.video img{display:block;max-width:100%;height:auto}
.video .play{position:absolute;left:12px;bottom:12px;background:var(--bg);color:var(--ink);padding:8px 10px;text-transform:uppercase;font-weight:700}

.thumbs{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px;margin-top:6px}
.thumb{display:block;position:relative;aspect-ratio:3/4;overflow:hidden;opacity:.45;transition:opacity .2s}
.thumb picture{display:contents}
.thumb img{width:100%;height:100%;object-fit:cover;display:block}
.thumb:hover,.thumb.on{opacity:1}

.foot{display:flex;justify-content:space-between;align-items:flex-end;flex-wrap:wrap;gap:16px;padding-block:clamp(64px,9vw,120px) calc(env(safe-area-inset-bottom,0px) + 22px);text-transform:uppercase}
.nav-foot{display:flex;gap:6px 16px;flex-wrap:wrap}
.nav-foot a.on{font-weight:700}
.foot > span{width:100%}
.list li > span:last-child:not(:first-child) .sub{text-align:right}

.ig-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:28px 10px;max-width:var(--img-w);align-items:start}
.ig-post{display:grid;gap:4px;min-width:0}
.ig-post:hover{color:inherit}
.ig-tile{display:block;aspect-ratio:4/5;overflow:hidden;background:var(--rule);margin-bottom:4px}
.ig-tile picture{display:contents}
.ig-tile img{width:100%;height:100%;object-fit:cover;display:block;transition:opacity .2s}
.ig-post:hover img{opacity:.75}
.ig-title{font-weight:400;line-height:1.5;overflow-wrap:anywhere}
.ig-text{color:var(--sub);line-height:1.5;overflow-wrap:anywhere;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;line-clamp:3;overflow:hidden}

/* CREATIVE: photos change slowly on their own with a soft cross-fade */
.fade .frame{display:grid;justify-items:start;align-items:start}
.fade .frame > picture{display:block;grid-area:1/1;opacity:0;transition:opacity 1.8s ease-in-out}
.fade .frame > picture.on{opacity:1}
.fade:not(.ready) .frame > picture:first-child{opacity:1}
.fade .frame img{animation:none}

@media (min-width:1800px){:root{--fs:10.5px;--fs-body:11.5px}}

/* HOME: one centered photo, caption left / number right */
.hero{width:fit-content;max-width:100%;margin:clamp(24px,6svh,80px) auto 0;cursor:pointer}
.hero .frame{justify-content:center}
.hero .frame img{max-width:min(100%, 1200px);max-height:calc(100svh - var(--hdr) - 150px);object-position:center top}
/* slow dissolve: photos are stacked and cross-fade */
.hero .frame{display:grid;justify-items:center;align-items:start}
.hero .frame > picture{display:block;grid-area:1/1;position:relative;opacity:0;transition:opacity 0s linear .85s}
.hero .frame > picture.on{opacity:1;transition:opacity 0s linear .85s}
/* photos change through black: the outgoing photo sinks to black, then the next one rises out of black.
   The photos themselves are graded like the reference print (silver black & white with film grain) */
.hero .frame > picture::after{content:"";position:absolute;inset:0;background:rgba(0,0,0,1);mix-blend-mode:multiply;pointer-events:none;transition:background-color .85s ease-in}
.hero .frame > picture.on::after{background:rgba(0,0,0,0);transition:background-color .85s ease-out .85s}
.hero:not(.ready) .frame > picture:first-child{opacity:1}
.hero:not(.ready) .frame > picture:first-child::after{background:rgba(0,0,0,0)}
.hero .frame img{animation:none}
/* black & white with a faint cold tone and deeper contrast */
.mono img{filter:grayscale(1) sepia(.14) hue-rotate(178deg) saturate(1.35) contrast(1.16) brightness(.94)}
.hero-cap{display:flex;justify-content:space-between;gap:16px;margin-top:12px;text-transform:uppercase;color:var(--sub);font-variant-numeric:tabular-nums}
.hero-cap .num{flex-shrink:0}
.home-ig{margin-top:clamp(80px,14svh,160px)}
/* Instagram spans the same width as the top photo */
.home-col{width:fit-content;max-width:100%;margin-inline:auto}
.home-col .hero{margin-inline:0}
.home-ig.wide{contain:inline-size;width:auto}
.ig-head{display:flex;justify-content:space-between;align-items:flex-end;gap:16px;margin-bottom:18px;flex-wrap:wrap}
.ig-head .h2{margin-bottom:0}
.sns-icons{display:flex;gap:18px;align-items:center}
.sns-icons a{display:block;line-height:0;color:var(--ink);transition:opacity .3s,transform .4s cubic-bezier(.2,.7,.2,1)}
.sns-icons a:hover{opacity:.5;transform:translateY(-2px)}
.sns-icons svg{display:block}
.home-ig.wide .ig-grid{max-width:none;grid-template-columns:repeat(6,minmax(0,1fr));gap:28px 12px}

/* touch: larger tap targets */
@media (pointer:coarse){
  .nav a,.nav-foot a,.counter button,.more,.list .row-a{padding-block:6px}
  .counter{gap:24px}
}

/* tablet portrait and phones: stacked */
@media (max-width:900px), (max-width:1024px) and (orientation:portrait){
  :root{--fs:10.5px;--fs-body:11.5px;--hdr:0px}
  .top{position:static;gap:16px;min-height:0;padding-block:calc(env(safe-area-inset-top,0px) + 18px) 4px}
  .nav{display:grid;grid-template-columns:repeat(2,max-content);justify-content:end;gap:2px 16px;max-width:60%}
  .row{grid-template-columns:1fr;gap:18px;padding-top:56px}
  .row .r{position:static;max-width:640px}
  .frame img{max-height:62svh}
  .hero{margin-top:28px}
  .hero .frame img{max-height:70svh}
  :root{--img-w:min(100%, 560px)}
  .thumbs{grid-template-columns:repeat(8,minmax(0,1fr))}
  .home-ig.wide .ig-grid{grid-template-columns:repeat(4,minmax(0,1fr))}
}
@media (max-width:480px){
  .mark .l2{display:block}
  .nav{display:flex;flex-wrap:nowrap;gap:0 clamp(8px,3.2vw,14px);max-width:none;white-space:nowrap}
  .top{gap:12px;align-items:center}
  .mark{white-space:nowrap;align-self:center}
  :root{--fs:10.5px;--fs-body:11.5px}
  .frame img{width:100%;max-height:none}
  .frame img[data-tall]{width:auto;max-height:64svh}
  .thumbs{grid-template-columns:repeat(4,minmax(0,1fr))}
  .ig-grid,.home-ig.wide .ig-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:24px 10px}
}
@media (max-width:380px){
  .mark{font-size:13px}
  .nav{font-size:9.5px;gap:0 8px}
  .home-col .hero .frame{height:calc(100svh - 74px)}
}
/* phone landscape and other short screens */
@media (min-width:640px) and (max-height:560px) and (orientation:landscape){
  :root{--fs:10px;--fs-body:11px;--hdr:0px;--side:clamp(240px,36vw,340px)}
  .top{position:static}
  .row{grid-template-columns:minmax(0,1fr) var(--side);gap:var(--gap);padding-top:36px}
  .row .r{position:sticky;top:12px}
  .frame img{width:auto;max-height:calc(100svh - 90px)}
  :root{--img-w:min(100%, 520px)}
  .thumbs{grid-template-columns:repeat(4,minmax(0,1fr))}
}
@media (prefers-reduced-motion:reduce){.frame img{animation:none}.hero .frame > picture,.hero .frame > picture::after{transition:none}}


/* HOME: from INFORMATION down, the page turns black (full width, including the footer) */
.home-ig{background:#000;color:#808080;box-shadow:0 0 0 100vmax #000;clip-path:inset(0 -100vmax);padding-top:clamp(56px,8vw,96px);--sub:#5c5c5c;--mute:#555;--rule:#262626;--ink:#808080}
.home-ig .ig-tile{background:#1a1a1a}
.home-ig .ig-tile img{filter:brightness(.25);transition:opacity .9s ease,transform 1.2s cubic-bezier(.2,.7,.2,1),filter .6s ease}
.home-ig .ig-post:hover .ig-tile img,.home-ig .ig-post.lit .ig-tile img{filter:brightness(.95)}
.home-ig .ig-post.lit .ig-title{color:#fff;transition:color .1s}
/* phones: hold a photo to open it — a glowing line runs around the photo in 1 second */
.home-ig .ig-post{-webkit-touch-callout:none;-webkit-user-select:none;user-select:none}
.home-ig .ig-tile{position:relative}
.ig-trace{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;filter:drop-shadow(0 0 2px rgba(255,255,255,1)) drop-shadow(0 0 6px rgba(255,255,255,.8)) drop-shadow(0 0 14px rgba(255,255,255,.45))}
.ig-trace rect{fill:none;stroke:#fff;stroke-width:.4;stroke-dasharray:100 100;stroke-dashoffset:100;opacity:0;transition:stroke-dashoffset .25s ease,opacity .25s ease}
.home-ig .ig-post.holding .ig-trace rect{stroke-dashoffset:0;opacity:1;transition:stroke-dashoffset 1s linear,opacity .12s ease}
.home-ig .ig-post.ready .ig-trace{animation:trace-glow .6s ease-out}
@keyframes trace-glow{0%{filter:drop-shadow(0 0 2px #fff) drop-shadow(0 0 6px rgba(255,255,255,.8)) drop-shadow(0 0 14px rgba(255,255,255,.45))}40%{filter:drop-shadow(0 0 3px #fff) drop-shadow(0 0 10px #fff) drop-shadow(0 0 24px rgba(255,255,255,.8))}100%{filter:drop-shadow(0 0 2px #fff) drop-shadow(0 0 6px rgba(255,255,255,.8)) drop-shadow(0 0 14px rgba(255,255,255,.45))}}
.home-ig .ig-post.lit .ig-tile img{transition:opacity .9s ease,transform 1.2s cubic-bezier(.2,.7,.2,1),filter .12s ease-out}
.home-ig a:hover{color:#808080}
.home-ig .sns-icons a:hover{color:#fff;opacity:1}
.home-ig .ig-post:hover .ig-title{color:#fff}
body:has(.home-ig) .foot{background:#000;color:#808080;box-shadow:0 0 0 100vmax #000;clip-path:inset(0 -100vmax);--mute:#555;--ink:#808080}
body:has(.home-ig) .foot a:hover{color:#fff}
body:has(.home-ig) .top{box-shadow:0 0 0 100vmax var(--bg);clip-path:inset(0 -100vmax)}
body:has(.home-ig) .top.scrolled{box-shadow:0 0 0 100vmax var(--bg);background:linear-gradient(var(--rule),var(--rule)) bottom/100% 1px no-repeat,url("paper.png") 0 0/320px 320px repeat,var(--bg)}

/* HOME (not phones in portrait): side margins of about 5.5% like the reference cover; the photo spans the width between them */
@media (min-width:601px), (orientation:landscape){
  :root:has(.home-ig){--gut:max(5.5vw,16px)}
  .home-col{width:100%}
  .home-col .hero,.hero{width:100%;max-width:none}
  .hero .frame{width:100%;height:min(calc((100vw - 2 * var(--gut)) * .62), calc(100svh - var(--hdr) - 150px));grid-template:100% / 100%;overflow:hidden}
  .hero .frame > picture{width:100%;height:100%}
  .hero .frame img{width:100%;height:100%;max-width:none;max-height:none;object-fit:cover;object-position:center}
}

/* HOME on phones (portrait): the photo fills the height below the header, with side margins like the
   reference book cover (about 5.5% of the width); caption laid over it */
@media (max-width:600px) and (orientation:portrait){
  :root:has(.home-ig){--gut:5.5vw}
  .home-col{width:auto}
  .home-col .hero,.hero{width:auto;max-width:none;margin:18px 0 0;position:relative}
  .hero .frame{height:calc(100svh - 78px);grid-template:100% / 100%;overflow:hidden}
  .hero .frame > picture{width:100%;height:100%}
  .hero .frame img{width:100%;height:100%;max-width:none;max-height:none;object-fit:cover;object-position:center}
  .hero-cap{position:absolute;left:14px;right:14px;bottom:calc(env(safe-area-inset-bottom,0px) + 20px);margin:0;color:#fff;text-shadow:0 0 14px rgba(0,0,0,.45);z-index:2;pointer-events:none}
}

/* ---------- UX: quiet motion ----------
   Pages fade in, sections rise gently into view, photos fade in once loaded,
   links draw a thin underline, and internal links fade the page out before leaving.
   Everything is switched off for people who prefer reduced motion. */
::selection{background:var(--ink);color:var(--bg)}
html{scroll-behavior:smooth}
main{animation:page-in .9s cubic-bezier(.2,.7,.2,1) both}
@keyframes page-in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
body{transition:opacity .35s ease}
body.leaving{opacity:0}

.reveal{opacity:0;transform:translateY(22px);transition:opacity 1.4s cubic-bezier(.16,1,.3,1),transform 1.4s cubic-bezier(.16,1,.3,1),filter 1.4s cubic-bezier(.16,1,.3,1)}
.reveal.reveal-img{transform:translateY(34px);filter:blur(6px)}
.reveal.in{opacity:1;transform:none;filter:none}

img.ph{transition:opacity .9s ease}
img.ph.wait{opacity:0}

.nav a,.nav-foot a,.more,.to-top,.counter button{background:linear-gradient(currentColor,currentColor) 0 100%/0 1px no-repeat;transition:background-size .45s cubic-bezier(.2,.7,.2,1),color .25s}
.nav a:hover,.nav-foot a:hover,.more:hover,.to-top:hover,.counter button:hover,.nav a.on{background-size:100% 1px}
.nav a:hover,.nav-foot a:hover,.more:hover,.to-top:hover{color:var(--ink)}
.more{transition:background-size .45s cubic-bezier(.2,.7,.2,1),letter-spacing .45s}
.more:hover{letter-spacing:.06em}

.top{transition:box-shadow .4s ease}
.top.scrolled{box-shadow:0 1px 0 var(--rule)}

.ig-tile img{transition:opacity .9s ease,transform 1.2s cubic-bezier(.2,.7,.2,1)}
.ig-post:hover .ig-tile img{transform:scale(1.04);opacity:1}
.ig-post .ig-title{transition:color .25s}
.ig-post:hover .ig-title{color:var(--mute)}
.thumb img{transition:transform 1s cubic-bezier(.2,.7,.2,1)}
.thumb:hover img{transform:scale(1.05)}
.list .row-a span:last-child{transition:transform .35s cubic-bezier(.2,.7,.2,1)}
.list .row-a:hover span:last-child{transform:translateX(-4px)}

.hero-cap .cap{transition:opacity .7s ease}
.hero-cap .cap.swap{opacity:0}

.foot-end{width:100%;display:flex;justify-content:space-between;gap:16px}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  main{animation:none}
  .reveal{opacity:1;transform:none;transition:none}
  body.leaving{opacity:1}
  img.ph.wait{opacity:1}
  .ig-post:hover .ig-tile img,.thumb:hover img{transform:none}
}