:root{color-scheme:dark;--bg:#0c0f13;--surface:#151a20;--line:#343d47;--text:#eef2f5;--muted:#a8b2be;--accent:#a8c9df}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--bg);color:var(--text);font-family:"Yu Gothic","Hiragino Kaku Gothic ProN",Meiryo,sans-serif;line-height:1.7}.site-header{min-height:76px;padding:14px clamp(20px,5vw,84px);display:flex;align-items:center;justify-content:space-between;gap:28px;background:#090b0e;border-bottom:1px solid #28313b}.wordmark{display:flex;align-items:baseline;gap:12px;color:var(--text);text-decoration:none;letter-spacing:.06em;font-weight:700}.wordmark span{font-size:clamp(1.05rem,2vw,1.35rem)}.wordmark small{color:var(--accent);font-size:.68rem;letter-spacing:.12em}nav{display:flex;align-items:center;flex-wrap:wrap;justify-content:flex-end;gap:20px}nav a{color:#d5dee6;text-decoration:none;font-size:.88rem;white-space:nowrap}nav a:hover{color:#fff;text-decoration:underline;text-underline-offset:5px}.hero{min-height:440px;display:grid;align-items:center;background:linear-gradient(90deg,rgba(7,10,13,.88),rgba(7,10,13,.61) 48%,rgba(7,10,13,.28)),url("../picture/pctop.png") center/cover no-repeat;border-bottom:1px solid var(--line)}.hero__inner{width:min(1120px,90%);margin:auto;padding:64px 0}.eyebrow{margin:0 0 9px;color:var(--accent);font-size:.74rem;font-weight:700;letter-spacing:.16em}.hero h1{margin:0;font-family:Georgia,"Yu Mincho",serif;font-size:clamp(3rem,7vw,5.7rem);letter-spacing:.08em;line-height:1.12}.hero h1+p{max-width:35rem;margin:22px 0 0;color:#d9e0e5;font-size:1.04rem}.archive{width:min(1180px,90%);margin:0 auto;padding:92px 0 105px}.section-heading{margin:0 0 34px}.section-heading h2{margin:0;font-size:clamp(1.8rem,4vw,2.5rem);letter-spacing:.08em}.section-heading h2+p{margin:9px 0 0;color:var(--muted);font-size:.94rem}.works-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:17px}.work-card{position:relative;display:flex;min-height:285px;overflow:hidden;flex-direction:column;justify-content:flex-end;background:var(--surface);border:1px solid var(--line);color:var(--text);text-decoration:none;transition:transform .25s ease,border-color .25s ease,box-shadow .25s ease}.work-card img{width:100%;height:156px;object-fit:cover;filter:saturate(.82) contrast(.96);transition:transform .45s ease,filter .45s ease}.work-card>div{min-height:126px;padding:18px 19px 17px;background:linear-gradient(135deg,#1b222a,#12171c)}.work-card h3{margin:0;font-size:1.22rem;letter-spacing:.04em}.work-card p{margin:7px 0 0;color:#b7c0c9;font-size:.82rem}.work-card__number{position:absolute;top:12px;right:13px;padding:3px 8px;background:rgba(5,7,9,.72);color:#dce8ef;font-family:monospace;font-size:.72rem;letter-spacing:.08em}.work-card:hover{transform:translateY(-5px);border-color:#83a8c1;box-shadow:0 16px 28px rgba(0,0,0,.28)}.work-card:hover img{transform:scale(1.045);filter:saturate(1.05) contrast(1)}.work-card--wide{grid-column:span 3;min-height:215px;flex-direction:row;align-items:stretch}.work-card--wide img{width:52%;height:auto}.work-card--wide>div{display:flex;flex:1;justify-content:center;flex-direction:column;background:linear-gradient(135deg,#202a31,#11161b)}footer{padding:30px clamp(20px,5vw,84px);display:flex;justify-content:space-between;gap:20px;background:#090b0e;border-top:1px solid #28313b;color:#9faab5;font-size:.78rem}footer p{margin:0}footer a{color:#c8dce9;text-decoration:none}footer a:hover{text-decoration:underline}@media(max-width:800px){.site-header{align-items:flex-start;flex-direction:column;gap:9px}.works-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.work-card--wide{grid-column:span 2}}@media(max-width:540px){.site-header{padding:15px 20px}.wordmark{flex-direction:column;gap:0;align-items:flex-start}nav{justify-content:flex-start;gap:8px 14px}.hero{min-height:360px;background-position:center}.hero__inner{padding:45px 0}.archive{padding:64px 0 74px}.works-grid{grid-template-columns:1fr;gap:14px}.work-card{min-height:0}.work-card img{height:170px}.work-card--wide{grid-column:auto;flex-direction:column}.work-card--wide img{width:100%;height:170px}.work-card--wide>div{min-height:126px}footer{flex-direction:column;gap:4px}}