@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')}
html,body{margin:0;background:#F6EFE3}
@media (prefers-color-scheme:dark){html,body{background:#231E1A}}

:root{--bg:#F6EFE3;--ink:#2B2622;--muted:#5E5549;--card:#FFFBF3;--rose:#C8224F;--link:#A81C45;--navy:#0E3A53;--gold:#FFC93C;--s2:#EEE3CF;--s3:#E4D7BE;--line:#D9CCB4;--chip:#FFFBF3}
@media (prefers-color-scheme:dark){:root{--bg:#231E1A;--ink:#F6EFE3;--muted:#BDB3A3;--card:#2E2823;--link:#FF8FA9;--s2:#28231F;--s3:#2F2924;--line:#4A4138;--chip:#2E2823}}
.pro .hl{background:var(--gold)}
.fr{container-type:inline-size;background:var(--bg);color:var(--ink);font:400 18px/1.6 Figtree,sans-serif;overflow:hidden;min-height:100vh}
.fr *{box-sizing:border-box}
.fr a{color:var(--link);text-decoration:underline;text-underline-offset:3px}
.fr a:hover{color:var(--ink)}
.wrap{max-width:1120px;margin:0 auto;padding:0 20px}
.nav{display:flex;align-items:center;justify-content:space-between;gap:12px;padding-top:12px;padding-bottom:12px}
.nav nav{display:flex;gap:4px}
.nav a,.btn{display:inline-flex;align-items:center;min-height:44px;padding:0 12px}
.brand{font:400 30px 'Instrument Serif',serif;text-decoration:none!important;color:var(--ink)!important;padding:0!important}
.serif{font-family:'Instrument Serif',serif;font-weight:400;letter-spacing:-.01em;line-height:1.02;margin:0}
h1.serif{font-size:54px}
h2.serif{font-size:38px;margin-bottom:12px}
.hl{background:linear-gradient(transparent 52%,var(--gold) 52% 90%,transparent 90%);color:#2B2622;padding:0 .1em;margin:0 -.1em;-webkit-box-decoration-break:clone;box-decoration-break:clone}
@media (prefers-color-scheme:dark){.hl{background:var(--gold)}}
.hero{display:grid;gap:32px;padding-top:24px;padding-bottom:48px}
.lede{font-size:20px;color:var(--muted);margin:16px 0 24px;max-width:34em}
.badge{width:168px;height:56px;border:2px dashed var(--muted);border-radius:10px;display:flex;align-items:center;justify-content:center;font:600 16px Figtree;letter-spacing:.12em;color:var(--muted)}
.shots{display:flex;gap:14px;justify-content:center;align-items:flex-start}
.shot{display:block;width:calc(50% - 7px);max-width:250px;aspect-ratio:1206/2622;object-fit:cover;border-radius:26px;background:var(--card);box-shadow:0 10px 24px #2b262233,0 0 0 1px var(--line)}
.shot.b{margin-top:44px}
.sheet{position:relative;background:var(--card);border:1px solid var(--line);border-radius:6px;padding:28px 24px;box-shadow:5px 6px 0 -1px var(--s2),5px 6px 0 0 var(--line),10px 12px 0 -2px var(--s3),10px 12px 0 -1px var(--line);margin:0 12px 28px 0}
.sec{display:grid;gap:24px;align-items:center}
.sec p{margin:0 0 12px}
.sec .art{width:100%;max-width:260px;justify-self:center;display:block}
.chips{display:flex;flex-wrap:wrap;gap:10px;margin:16px 0}
.chip{display:inline-flex;align-items:center;min-height:44px;padding:0 18px;border:2px solid var(--line);border-radius:999px;background:var(--chip);font-weight:600}
.chip.on{background:var(--navy);border-color:var(--navy);color:#fff}
.tag{display:inline-block;font:600 16px Figtree;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin-bottom:8px}
.pro{background:var(--navy);color:#F6EFE3;border-color:var(--navy);box-shadow:5px 6px 0 -1px #1d4f6d,5px 6px 0 0 #0a2b3e,10px 12px 0 -2px #2a6285}
.pro .tag{color:#FFC93C}
.btn{background:var(--rose);color:#fff!important;text-decoration:none!important;border-radius:10px;font-weight:600;padding:0 20px}
.btn:hover{background:#A81C45}
.foot{border-top:1px solid var(--line);margin-top:24px;padding-top:20px;padding-bottom:40px;color:var(--muted);font-size:18px}
.foot .links{display:flex;flex-wrap:wrap;gap:4px 16px;margin-bottom:8px}
.foot .links a{display:inline-flex;align-items:center;min-height:44px}
.foot p{margin:4px 0}
.doc{max-width:760px;margin:0 auto;padding:24px 20px 24px}
.doc h2{font:400 32px 'Instrument Serif',serif;margin:32px 0 8px}
.doc p{margin:0 0 14px}
.doc .meta{color:var(--muted)}
.qa{border-bottom:1px solid var(--line);padding:18px 0}
.qa h3{font:600 20px Figtree;margin:0 0 4px}
.qa p{margin:0;color:var(--muted)}
.thumb{display:block;width:150px;aspect-ratio:683/1024;object-fit:cover;border-radius:6px;border:1px solid var(--line);box-shadow:4px 5px 0 -1px var(--s2),4px 5px 0 0 var(--line)}
.sample{display:flex;gap:20px;align-items:flex-start;flex-wrap:wrap}
.nf{display:grid;gap:24px;justify-items:center;text-align:center;padding:48px 20px 40px}
.tilt{transform:rotate(-1deg)}
.tilt2{transform:rotate(.8deg)}
@container (min-width:800px){
 h1.serif{font-size:96px}
 h2.serif{font-size:56px}
 .hero{grid-template-columns:1.05fr .95fr;align-items:center;padding-top:56px;padding-bottom:72px;gap:56px}
 .sec{grid-template-columns:1fr 300px;gap:48px}
 .sec.rev{grid-template-columns:300px 1fr}
 .sec.rev .art{order:-1}
 .sheet{padding:48px 56px;margin:0 20px 48px 0}
 .doc h2{font-size:40px}
 .doc{padding-top:48px}
 .shot{width:250px}
 .nf{padding:96px 20px}
}
.badge-link{display:inline-block;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{display:flex;align-items:center;gap:16px;margin-bottom:20px}
.i2{width:88px;height:88px;border-radius:20px;box-shadow:0 4px 12px #2b262233}
.i3{font-size:44px}
.i4{width:200px;display:block;margin-top:24px}
.i5{border-style:dashed}
.i6{margin-top:12px}
.i7{margin-top:20px}
.i8{flex:1;min-width:200px}
.i9{display:inline-flex;align-items:center;min-height:44px}
.i10{width:240px;display:block}