
@import url('https://cdn.jsdelivr.net/fontsource/css/zen-kaku-gothic-new@latest/300.css');
@import url('https://cdn.jsdelivr.net/fontsource/css/zen-kaku-gothic-new@latest/400.css');
@import url('https://cdn.jsdelivr.net/fontsource/css/zen-kaku-gothic-new@latest/700.css');
:root{
 --bg:#ffffff; --ink:#7d7d7d; --strong:#5c5c5c; --faint:#a9a9a9; --furn:#c2c2c2;
 --tile:#f4f4f4; --yellow:#FFEE00; --accent:#0000FF; --imgdim:1;
}
[data-theme="dark"]{
 --bg:#121212; --ink:#9d9d9d; --strong:#d2d2d2; --faint:#7a7a7a; --furn:#5a5a5a;
 --tile:#1d1d1d; --accent:#7a7aff; --imgdim:.88;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{font-family:'Zen Kaku Gothic New',sans-serif;font-weight:300;color:var(--ink);
 background:var(--bg);line-height:1.8;transition:background .25s,color .25s}
a{color:inherit;text-decoration:none}
img{filter:brightness(var(--imgdim))}
.gut{padding-left:clamp(20px,4vw,56px);padding-right:clamp(20px,4vw,56px)}
nav{display:flex;justify-content:space-between;align-items:center;padding-top:26px;padding-bottom:26px}
nav .brand{display:flex;align-items:center;gap:14px}
nav .brand img{height:22px;opacity:.85}
[data-theme="dark"] nav .brand img{filter:invert(.85)}
nav .brand span{font-weight:700;font-size:13px;letter-spacing:.14em;color:var(--strong);text-transform:uppercase}
nav .links{display:flex;align-items:center}
nav .links a,nav .links button{font-family:inherit;font-weight:300;background:none;border:none;cursor:pointer;
 font-size:13px;letter-spacing:.06em;color:var(--faint);margin-left:26px}
nav .links a:hover,nav .links button:hover{color:var(--strong)}
nav .links a.on{color:var(--strong);border-bottom:2px solid var(--yellow);padding-bottom:3px}
.intro{padding-top:26px;padding-bottom:44px;max-width:760px}
.intro h1{font-weight:300;font-size:clamp(22px,2.6vw,30px);line-height:1.5;color:var(--ink)}
.intro h1 b{font-weight:400;color:var(--strong)}
.intro .rule{height:3px;background:var(--yellow);width:120px;margin-top:18px}
.mosaic{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:14px;padding-bottom:64px}
.tile{position:relative;display:block;overflow:hidden;background:var(--tile)}
.tile img{width:100%;height:100%;aspect-ratio:4/3;object-fit:cover;display:block;
 transition:transform .5s ease, filter .3s}
.tile:hover img{transform:scale(1.025)}
.tile .cap{position:absolute;left:0;right:0;bottom:0;padding:14px 16px;
 background:linear-gradient(transparent, rgba(0,0,0,.55));color:#fff}
.tile .cap .t{font-size:14px;font-weight:400}
.tile .cap .m{font-size:11.5px;opacity:.75;letter-spacing:.04em}
.tile.text{aspect-ratio:4/3;display:flex;align-items:center;justify-content:center;
 color:var(--furn);font-size:12px;letter-spacing:.14em;text-transform:uppercase}
.tile.text .cap{background:none;color:var(--faint);position:absolute}
.section{padding-top:48px;padding-bottom:56px}
h1.title{font-weight:300;font-size:clamp(26px,3.4vw,40px);line-height:1.3;color:var(--ink);max-width:760px}
.rule{height:3px;background:var(--yellow);width:180px;margin:16px 0 0}
.sechead{font-weight:700;font-size:12px;letter-spacing:.1em;color:var(--strong);text-transform:uppercase}
.sechead.accent{color:var(--accent)}
.meta{font-size:13px;line-height:2;display:grid;grid-template-columns:auto 1fr;column-gap:32px;max-width:480px;margin-top:26px}
.meta .k{color:var(--faint)}.meta .v{color:var(--ink);text-align:right}
.prose{max-width:680px;font-size:15px;margin-top:30px}
.prose p{margin-bottom:18px}
.hero{margin-top:40px}
.hero img{width:100%;max-height:74vh;object-fit:cover;display:block}
.gallery{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:14px;margin-top:14px}
.gallery img{width:100%;display:block}
.stats{margin-top:26px;font-size:13px;color:var(--faint)}
.stats b{color:var(--ink);font-weight:400}
footer{padding-top:48px;padding-bottom:40px;font-size:12px;color:var(--furn);letter-spacing:.08em;
 display:flex;justify-content:space-between;flex-wrap:wrap;gap:8px}
footer a{color:var(--faint)}
.awards li{margin-bottom:12px;font-size:14px;list-style:none}
.awards b{font-weight:700;color:var(--strong);font-size:12px;letter-spacing:.06em;text-transform:uppercase;margin-right:8px}
.slidehero{position:relative;height:calc(100vh - 78px);min-height:520px;overflow:hidden}
.slide{position:absolute;inset:0;background-size:cover;background-position:center;opacity:0;
 transition:opacity 1.4s ease;pointer-events:none}
.slide.on{opacity:1;pointer-events:auto}
.scrim{position:absolute;inset:0;pointer-events:none;
 background:linear-gradient(90deg,rgba(0,0,0,.62) 0%,rgba(0,0,0,.28) 45%,rgba(0,0,0,.05) 70%),
 linear-gradient(0deg,rgba(0,0,0,.45) 0%,transparent 30%)}
.overlay{position:absolute;left:0;right:0;top:50%;transform:translateY(-58%);pointer-events:none}
.overlay h1{font-weight:300;font-size:clamp(22px,2.6vw,30px);line-height:1.5;color:#ececec;max-width:700px}
.overlay .att{font-size:12.5px;color:rgba(255,255,255,.65);margin-top:10px;letter-spacing:.04em}
.overlay .sub{font-size:15px;line-height:1.8;color:rgba(255,255,255,.82);max-width:640px;margin-top:18px}
.overlay .rule{height:3px;background:var(--yellow);width:120px;margin-top:22px}
.slidecap{position:absolute;right:0;bottom:0;left:0;display:flex;justify-content:flex-end;align-items:center;
 gap:22px;padding-bottom:22px}
.slidecap a{color:#fff;font-size:13px;letter-spacing:.05em;border-bottom:2px solid var(--yellow);padding-bottom:3px}
.slidecap button{background:none;border:1px solid rgba(255,255,255,.45);color:rgba(255,255,255,.85);
 font-family:inherit;font-size:11px;letter-spacing:.1em;padding:6px 12px;cursor:pointer}
.slidecap button:hover{border-color:#fff;color:#fff}
@media(max-width:640px){.mosaic{grid-template-columns:1fr 1fr}.tile img,.tile.text{aspect-ratio:1/1}}
