
:root{--bg:#fbfbfd;--surface:#fff;--ink:#1d1d1f;--ink-soft:#6e6e73;--hairline:#e3e3e6;
--radius:18px;--maxw:1180px;--gap:clamp(18px,2.5vw,28px);}
*{box-sizing:border-box;margin:0;padding:0;}
html{-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;}
body{background:var(--bg);color:var(--ink);font-family:"Hanken Grotesk",-apple-system,BlinkMacSystemFont,sans-serif;
font-size:17px;line-height:1.5;letter-spacing:-0.01em;}
a{color:inherit;text-decoration:none;}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 24px;}
header.site{position:sticky;top:0;z-index:50;backdrop-filter:saturate(180%) blur(20px);
-webkit-backdrop-filter:saturate(180%) blur(20px);
background:rgba(237,237,240,.82);border-bottom:1px solid rgba(0,0,0,.08);}
header.site .wrap{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;height:48px;}
.brand{font-weight:600;font-size:18px;letter-spacing:-0.02em;justify-self:start;}
nav.site-nav{display:flex;align-items:center;justify-content:center;gap:34px;justify-self:center;}
nav.site-nav a{color:#1d1d1f;font-size:13px;font-weight:400;letter-spacing:-0.01em;
opacity:.82;transition:opacity .2s,color .2s;white-space:nowrap;}
nav.site-nav a:hover{opacity:1;}
nav.site-nav a.nav-read{padding-left:18px;margin-left:6px;border-left:1px solid rgba(0,0,0,.12);}
.nav-spacer{justify-self:end;}
@media(max-width:720px){
  header.site .wrap{grid-template-columns:auto 1fr;height:auto;padding-top:8px;padding-bottom:8px;row-gap:6px;}
  .brand{grid-column:1;}
  nav.site-nav{grid-column:1 / -1;justify-self:start;justify-content:flex-start;
    gap:18px;flex-wrap:wrap;}
  .nav-spacer{display:none;}
  nav.site-nav a{font-size:12px;}
  nav.site-nav a.nav-read{padding-left:0;margin-left:0;border-left:none;}
}
.hero{text-align:center;padding:clamp(64px,10vw,120px) 0 clamp(40px,7vw,80px);}
.hero h1{font-size:clamp(38px,6vw,64px);font-weight:600;letter-spacing:-0.035em;line-height:1.05;max-width:18ch;margin:0 auto;}
.hero p{color:var(--ink-soft);font-size:clamp(17px,2vw,21px);margin:22px auto 0;max-width:46ch;}
.section-head{margin:clamp(36px,5vw,64px) 0 24px;scroll-margin-top:72px;}
.section-head h2{font-size:clamp(20px,3vw,28px);font-weight:600;letter-spacing:-0.02em;}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:var(--gap);}
.card{background:var(--surface);border:1px solid var(--hairline);border-radius:var(--radius);
overflow:hidden;display:flex;flex-direction:column;transition:transform .35s cubic-bezier(.2,.7,.2,1),box-shadow .35s;}
.card:hover{transform:translateY(-4px);box-shadow:0 18px 40px -18px rgba(0,0,0,.18);}
.card .imgwrap{aspect-ratio:1/1;background:#f5f5f7;display:flex;align-items:center;justify-content:center;overflow:hidden;position:relative;}
.badge{position:absolute;top:12px;left:12px;z-index:2;background:var(--ink);color:#fff;font-size:11px;
font-weight:600;letter-spacing:.04em;text-transform:uppercase;padding:4px 10px;border-radius:980px;}
.card .imgwrap img{width:100%;height:100%;object-fit:contain;mix-blend-mode:multiply;padding:22px;
transition:transform .5s cubic-bezier(.2,.7,.2,1);}
.card:hover .imgwrap img{transform:scale(1.05);}
.card .body{padding:16px 18px 20px;display:flex;flex-direction:column;gap:6px;}
.card .name{font-size:15px;font-weight:600;letter-spacing:-0.01em;line-height:1.3;}
.card .desc{font-size:13px;color:var(--ink-soft);line-height:1.45;}
.card .meta{display:flex;align-items:center;justify-content:space-between;margin-top:4px;}
.card .price{font-size:14px;color:var(--ink-soft);font-weight:500;}
.card .out{font-size:13px;color:var(--ink-soft);}
.card:hover .out{color:var(--ink);}
footer.site{border-top:1px solid var(--hairline);margin-top:clamp(56px,9vw,110px);
padding:40px 0 64px;color:var(--ink-soft);font-size:13px;}
footer.site .wrap{display:flex;flex-direction:column;gap:14px;}
footer.site .disclosure{max-width:60ch;line-height:1.6;}
footer.site .contact a{border-bottom:1px solid var(--hairline);padding-bottom:1px;transition:border-color .2s,color .2s;}
footer.site .contact a:hover{color:var(--ink);border-bottom-color:var(--ink-soft);}

/* Hero read-link */
/* (removed — moved Read to nav) */

/* Article page */
article.essay{max-width:680px;margin:clamp(56px,8vw,96px) auto 0;padding:0 24px;}
article.essay .back{display:inline-block;color:var(--ink-soft);font-size:13px;margin-bottom:48px;transition:color .2s;}
article.essay .back:hover{color:var(--ink);}
article.essay h1{font-size:clamp(32px,5vw,52px);font-weight:600;letter-spacing:-0.03em;line-height:1.1;margin-bottom:40px;}
article.essay > p{font-size:18px;line-height:1.65;color:var(--ink);margin-bottom:22px;}
article.essay > p > a{border-bottom:1px solid var(--ink-soft);padding-bottom:1px;transition:border-color .2s;}
article.essay > p > a:hover{border-bottom-color:var(--ink);}
article.essay > p:first-of-type::first-letter{font-size:1.05em;}
article.essay blockquote{margin:32px 0;padding-left:20px;border-left:2px solid var(--hairline);color:var(--ink-soft);font-size:18px;line-height:1.6;}
article.essay h2{font-size:clamp(22px,3vw,32px);font-weight:600;letter-spacing:-0.02em;margin:64px 0 16px;padding-top:20px;border-top:1px solid var(--hairline);}
article.essay h2:first-of-type{border-top:none;padding-top:0;margin-top:56px;}
article.essay .room-intro{color:var(--ink-soft);font-size:17px;line-height:1.6;margin-bottom:36px;font-style:italic;}
article.essay .entry{margin-bottom:48px;}
article.essay .entry .entry-img{aspect-ratio:4/3;background:#f5f5f7;border-radius:14px;overflow:hidden;display:flex;align-items:center;justify-content:center;margin-bottom:20px;}
article.essay .entry .entry-img img{width:100%;height:100%;object-fit:contain;padding:32px;mix-blend-mode:multiply;}
article.essay .entry h3{font-size:21px;font-weight:600;letter-spacing:-0.01em;margin-bottom:10px;line-height:1.3;}
article.essay .entry h3 a{border-bottom:1px solid var(--hairline);transition:border-color .2s;}
article.essay .entry h3 a:hover{border-color:var(--ink);}
article.essay .entry h3 a::after{content:" ↗";color:var(--ink-soft);font-size:14px;}
article.essay .entry p{font-size:17px;line-height:1.6;color:var(--ink);}
article.essay .essay-close{margin-top:32px;}
article.essay .essay-close h2{margin-top:48px;}
article.essay .essay-close p{font-size:18px;line-height:1.65;color:var(--ink);margin-bottom:22px;}
article.essay .essay-credit{margin-top:56px;padding-top:24px;border-top:1px solid var(--hairline);}
article.essay .essay-credit p{font-size:13px;line-height:1.6;color:var(--ink-soft);max-width:60ch;margin-bottom:0;}
