@font-face{font-family:'Instrument Serif';font-display:swap;src:url(/assets/InstrumentSerif-Regular.ttf) format('truetype')}
@font-face{font-family:Figtree;font-weight:300 900;font-display:swap;src:url(/assets/Figtree.ttf) format('truetype')}
@font-face{font-family:Caveat;font-weight:700;font-display:swap;src:url(/assets/Caveat-Bold.woff2) format('woff2')}
@font-face{font-family:'Shippori Mincho';font-weight:700;font-display:swap;src:url(/assets/ShipporiMincho-sake.woff2) format('woff2')}
:root{--bg:#FCF1ED;--ink:#2A1714;--muted:#6B4F49;--card:#FFFFFF;--card2:#F3E3DC;--btn:#C73B24;--link:#B0321C;--indigo:#25408A;--plank:#E6D2C8;--edge:#CDB2A7;--shadow:rgba(42,23,20,.22)}
@media(prefers-color-scheme:dark){:root{--bg:#1B1311;--ink:#F7EBE6;--muted:#C9B2AA;--card:#2A1E1B;--card2:#33251F;--link:#FF8670;--plank:#3A2A24;--edge:#4A372F;--shadow:rgba(0,0,0,.55)}}
html.dark{--bg:#1B1311;--ink:#F7EBE6;--muted:#C9B2AA;--card:#2A1E1B;--card2:#33251F;--link:#FF8670;--plank:#3A2A24;--edge:#4A372F;--shadow:rgba(0,0,0,.55)}
*{box-sizing:border-box}
html{color-scheme:light dark}
html.dark{color-scheme:dark}
body{margin:0;background:var(--bg);color:var(--ink);font:400 18px/1.65 Figtree,system-ui,sans-serif;-webkit-text-size-adjust:100%;overflow-x:hidden}
a{color:var(--link);text-underline-offset:3px}
a:hover{color:var(--ink)}
img{display:block;max-width:100%;height:auto}
.wrap{max-width:1120px;margin:0 auto;padding:0 20px}
h1,h2,h3{margin:0;font-weight:400}
p{margin:0}
.serif{font-family:'Instrument Serif',serif}
.jp{font-family:'Shippori Mincho','Hiragino Mincho ProN',serif;font-weight:700}
/* header */
.top{padding:20px 0 0}
.top .wrap{display:flex;align-items:center;gap:12px}
.top a.brand{display:flex;align-items:center;gap:12px;min-height:48px;color:var(--ink);text-decoration:none;font:400 30px/1 'Instrument Serif',serif}
.top img{width:40px;height:40px;border-radius:10px}
/* tag */
.tag{position:relative;display:inline-block;margin:36px 0 20px 6px;background:var(--card2);color:var(--ink);font:700 36px/1.15 Caveat,cursive;padding:12px 24px 10px 46px;border-radius:6px 20px 20px 6px;transform:rotate(-2deg);transform-origin:left top;box-shadow:0 8px 16px -8px var(--shadow)}
.tag::before{content:"";position:absolute;left:16px;top:50%;width:14px;height:14px;margin-top:-7px;border-radius:50%;background:var(--bg);box-shadow:inset 0 2px 3px var(--shadow)}
.tag::after{content:"";position:absolute;left:22px;top:-30px;width:2px;height:34px;background:var(--muted);transform:rotate(8deg);transform-origin:bottom}
.tag.sm{font-size:28px;margin:0;padding:8px 18px 6px 36px}
.tag.sm::before{left:12px;width:11px;height:11px;margin-top:-5px}
.tag.sm::after{display:none}
.tag.big{font-size:44px;padding:14px 28px 12px 52px}
.tag.big::before{left:18px;width:16px;height:16px;margin-top:-8px}
.tag.big::after{display:block}
.tags{display:flex;flex-wrap:wrap;gap:20px 16px;margin-top:28px}
.tags .tag{margin:0}
.tags .tag:nth-child(2n){transform:rotate(1.5deg)}
.tags .tag:nth-child(3n){transform:rotate(-1deg)}
/* shelf */
.sec{padding-top:24px}
.stand{display:flex;align-items:flex-end;justify-content:center;gap:28px;padding-top:28px}
.plank{height:22px;background:var(--plank);border-radius:4px;box-shadow:inset 0 -5px 0 var(--edge),0 14px 20px -10px var(--shadow);margin-top:0}
.sec .copy p+p{margin-top:16px}
.sec .copy{max-width:560px}
.shot{display:block;width:100%;aspect-ratio:1206/2622;object-fit:cover;border-radius:28px;box-shadow:0 18px 32px -14px var(--shadow)}
.shots{display:flex;gap:20px;align-items:flex-end;justify-content:center}
.shots .shot{width:calc((100% - 20px)/2);max-width:240px}
.art{width:100%;max-width:300px}
/* hero */
.hero{padding-top:28px}
.hero .id{display:flex;align-items:center;gap:16px}
.hero .id img{width:80px;height:80px;border-radius:18px;box-shadow:0 10px 20px -10px var(--shadow)}
.hero .id span{font:400 40px/1 'Instrument Serif',serif}
.hero h1{font:400 56px/1.02 'Instrument Serif',serif;margin-top:28px;max-width:11em;text-wrap:balance}
.hero .lede{margin-top:20px;max-width:34em;font-size:20px}
.badge{margin-top:28px;width:168px;height:56px;border:2px dashed var(--muted);border-radius:10px;display:flex;align-items:center;justify-content:center;font:700 16px/1 Figtree,sans-serif;letter-spacing:.12em;color:var(--muted)}
.hero .stand{display:grid;grid-template-columns:1fr 1fr;gap:20px;align-items:end;padding-top:20px}
.hero .stand .art{grid-column:1/-1;justify-self:end;max-width:200px;margin-bottom:-6px}
.hero .stand .shot{max-width:none}
/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:50px;padding:0 24px;border-radius:14px;background:var(--btn);color:#fff;font:700 18px/1 Figtree,sans-serif;text-decoration:none}
.btn:hover{background:#A92F1B;color:#fff}
/* pro */
.pro{background:var(--indigo);color:#fff;border-radius:24px;padding:28px 24px;margin-top:20px;box-shadow:0 18px 32px -14px var(--shadow)}
.pro h3{font:400 36px/1.1 'Instrument Serif',serif}
.pro p{margin-top:12px}
/* footer */
footer{margin-top:72px;padding:36px 0 56px}
footer nav{display:flex;flex-wrap:wrap;gap:0 24px}
footer nav a{display:inline-flex;align-items:center;min-height:48px;font-weight:700}
footer p{margin-top:12px;color:var(--muted)}
/* text pages */
.page{padding:32px 0 0}
.page h1{font:400 52px/1.05 'Instrument Serif',serif}
.page .meta{color:var(--muted);margin-top:12px}
.page .block{margin-top:12px}
.page .block p{max-width:680px}
.page .block p+p{margin-top:14px}
.qa{background:var(--card);border-radius:20px;padding:24px 22px;margin-top:20px;box-shadow:0 10px 22px -14px var(--shadow);max-width:720px}
.qa h2{font:700 20px/1.3 Figtree,sans-serif}
.qa p{margin-top:8px}
.sample{display:flex;flex-wrap:wrap;gap:24px;align-items:flex-end;margin-top:20px}
.sample img{width:150px;aspect-ratio:427/640;object-fit:cover;border-radius:14px;box-shadow:0 14px 24px -12px var(--shadow)}
.sample .t{flex:1 1 240px;max-width:460px}
.sample .btn{margin-top:20px}
.lost{min-height:60vh;text-align:center;padding-top:32px}
.lost h1{font:400 44px/1.1 'Instrument Serif',serif;margin-top:20px}
.lost .art{margin:0 auto;max-width:300px}
.lost .btn{margin-top:28px}
@media(min-width:900px){
.wrap{padding:0 40px}
.top{padding-top:28px}
.hero{padding-top:48px}
.hero h1{font-size:104px;max-width:9.5em}
.hero .lede{font-size:22px}
.hero .stand{display:flex;justify-content:flex-start;gap:36px;padding-top:32px}
.hero .stand .art{width:300px;max-width:300px;margin:0 auto 0 0;grid-column:auto}
.hero .stand .shot{width:260px}
.sec{padding-top:56px}
.sec .row{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:end}
.sec .row.flip .copy{order:2}
.sec .copy{align-self:start;max-width:none}
.sec .stand{padding-top:0}
.sec .stand.col{justify-content:flex-start}
.shots .shot{max-width:260px}
.tag{font-size:42px;margin-top:20px}
.tag.sm{font-size:30px;margin:0}
.tag.big{font-size:56px;padding:18px 36px 16px 60px}
.tag.big::before{left:22px}
.pro{padding:40px;max-width:560px}
.page{padding-top:56px}
.page h1{font-size:76px}
.page .block p,.qa p{font-size:18px}
.lost h1{font-size:64px}
}
.page .tag{margin-top:52px}.sec .shot.fig{width:260px;max-width:100%;height:auto;aspect-ratio:auto}.note-shot{flex:0 1 220px;min-width:0}.note-art{flex:1 1 0;min-width:0;max-width:260px}a[href^='mailto:']{display:inline-block;padding:11px 0}.badge-link{display:inline-block;margin-top:28px;min-height:44px}.badge-link img{display:block;height:56px;width:auto}.badge-link .badge-dark{display:none}@media (prefers-color-scheme:dark){.badge-link .badge-light{display:none}.badge-link .badge-dark{display:block}}
.i1{margin-top:56px}
.i2{margin-top:0}