/* Korra Vastrra: static pages (pieces, guides, about). Same paper, same type, no scroll machinery. */
:root{--paper:#f2ede3;--paper-2:#eae3d5;--paper-3:#e1d9c8;--ink:#231e18;--ink-2:#4a433b;--mute:#8a8176;--leaf:#5c6b4a;--line:rgba(35,30,24,.16);--serif:'Cormorant Garamond',Georgia,serif;--sans:'Satoshi',system-ui,sans-serif;--script:'Mrs Saint Delafield',cursive;--gutter:clamp(18px,4vw,64px)}
*{box-sizing:border-box}
body.page{margin:0;background:var(--paper);color:var(--ink);font-family:var(--sans);font-size:17px;line-height:1.6;-webkit-font-smoothing:antialiased}
img{max-width:100%;height:auto;display:block}
a{color:inherit}
h1,h2,h3{font-family:var(--serif);font-weight:300;margin:0;text-wrap:balance;line-height:1.05}
h1{font-size:clamp(38px,5.2vw,74px)}h2{font-size:clamp(28px,3.2vw,44px);margin-top:1.6em;margin-bottom:.5em}h3{font-size:clamp(22px,2vw,28px);font-weight:400}
p{margin:0 0 1.1em;text-wrap:pretty}
.ov{font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--mute);font-weight:500}
.btn{display:inline-flex;align-items:center;gap:12px;font-size:12px;letter-spacing:.2em;text-transform:uppercase;font-weight:500;padding:15px 24px;border:1px solid var(--ink);border-radius:999px;text-decoration:none;transition:background .4s,color .4s}
.btn:hover{background:var(--ink);color:var(--paper)}
.btn--solid{background:var(--ink);color:var(--paper)}.btn--solid:hover{background:var(--leaf);border-color:var(--leaf)}
.brand{display:flex;flex-direction:column;align-items:center;line-height:1;text-decoration:none}
.brand__word{font-family:var(--serif);font-size:19px;letter-spacing:.34em;text-transform:uppercase;font-weight:500;padding-left:.34em}
.brand__by{font-family:var(--script);font-size:19px;color:var(--ink-2);margin-top:-2px}
.pnav{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;padding:22px var(--gutter);gap:16px}
.pnav a{text-decoration:none}
.pnav__links,.pnav__right{display:flex;gap:24px;font-size:12px;letter-spacing:.18em;text-transform:uppercase;font-weight:500}
.pnav__right{justify-content:flex-end}
.crumbs{display:flex;gap:10px;font-size:12px;letter-spacing:.08em;color:var(--mute);padding:10px var(--gutter) 0;flex-wrap:wrap}
.crumbs a{text-decoration:none}
main{padding:0 var(--gutter) 60px;max-width:1400px;margin:0 auto}
/* piece */
.piece__hero{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(24px,5vw,80px);align-items:start;margin-top:30px}
.piece__fig{margin:0;background:var(--paper-2);padding:8% 12% 6%;position:relative}
.piece__fig::before{content:"";position:absolute;left:0;right:0;top:7%;height:5px;background:linear-gradient(180deg,#d6b683,#a67f4b 55%,#7a5a33);border-radius:3px}
.piece__fig img{filter:drop-shadow(0 30px 24px rgba(50,35,15,.16))}
.piece__body h1{margin:10px 0 8px}
.piece__price{font-family:var(--serif);font-size:26px;font-weight:500}
.piece__price small{display:block;font-family:var(--sans);font-size:13px;color:var(--mute);font-weight:400;margin-top:4px}
.piece__story{font-size:18px;color:var(--ink-2)}
.specs{margin:24px 0;border-top:1px solid var(--line)}
.specs div{display:grid;grid-template-columns:120px 1fr;gap:16px;padding:12px 0;border-bottom:1px solid var(--line);font-size:15px}
.specs dt{font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--mute);padding-top:3px}.specs dd{margin:0}
.piece__cta{display:flex;gap:12px;flex-wrap:wrap;margin:24px 0 36px}
.piece__studio{margin:0;display:grid;grid-template-columns:120px 1fr;gap:16px;align-items:center;padding:12px;border:1px solid var(--line);border-radius:14px}
.piece__studio img{aspect-ratio:3/4;object-fit:cover;border-radius:8px}
.piece__studio figcaption{font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--mute)}
.pfaq{max-width:760px;margin-top:40px}
.pfaq details,.faq details{border-top:1px solid var(--line);padding:14px 0}
.pfaq summary,.faq summary{cursor:pointer;list-style:none}.pfaq summary::-webkit-details-marker,.faq summary::-webkit-details-marker{display:none}
.pfaq p,.faq div{color:var(--ink-2);margin-top:10px}
.pager{display:flex;justify-content:space-between;gap:16px;margin-top:50px;padding-top:20px;border-top:1px solid var(--line);font-family:var(--serif);font-size:18px;flex-wrap:wrap}
.pager a{text-decoration:none}
/* guide */
.guide__head{max-width:900px;margin:30px 0 30px}
.guide__head h1{margin:12px 0 16px}
.guide__by{color:var(--mute);font-size:14px}
.guide__grid{display:grid;grid-template-columns:260px minmax(0,1fr);gap:clamp(24px,5vw,80px);align-items:start}
.guide__rail{position:sticky;top:20px;display:grid;gap:22px}
.toc ol{padding-left:18px;margin:10px 0 0;font-size:14px;line-height:1.5}.toc a{text-decoration:none;color:var(--ink-2)}
.railbox{border:1px solid var(--line);border-radius:14px;padding:18px}.railbox p{font-size:14px;color:var(--ink-2)}
article{max-width:720px;font-size:17px}
article p{margin-bottom:1.2em}
.intro{font-size:19px;color:var(--ink-2)}
.takeaways{border:1px solid var(--line);border-radius:14px;padding:20px 22px;margin:24px 0 10px}
.takeaways ol{margin:10px 0 0;padding-left:20px}.takeaways li{margin-bottom:8px}
.tbl{overflow-x:auto}table{border-collapse:collapse;width:100%;font-size:15px}th,td{text-align:left;padding:10px 12px;border-bottom:1px solid var(--line);vertical-align:top}th{font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--mute)}
.related{padding-left:18px}.related a{text-decoration:none}
.sources{font-size:14px;color:var(--ink-2);padding-left:18px}.sources li{margin-bottom:6px}.sources a{word-break:break-all}
/* hub */
.hub__head{max-width:860px;margin:30px 0 30px}.hub__head p{font-size:18px;color:var(--ink-2)}
.gcards{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:18px}
.gcard{display:block;text-decoration:none;border:1px solid var(--line);border-radius:16px;padding:24px;transition:background .4s}.gcard:hover{background:var(--paper-2)}
.gcard h2{font-size:26px;margin:10px 0}.gcard p{font-size:14px;color:var(--ink-2);margin:0}
/* about */
.about__head{max-width:860px;margin:30px 0}.lede{font-size:19px;color:var(--ink-2)}
.about__grid{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(24px,5vw,80px);align-items:start}
.about__grid figure{margin:0;position:sticky;top:20px}.about__grid h2{margin-top:1.2em;font-size:30px}
blockquote{margin:24px 0 0;padding-left:20px;border-left:1px solid var(--ink);font-family:var(--serif);font-size:24px;line-height:1.3}
blockquote cite{display:block;margin-top:10px;font-family:var(--script);font-style:normal;font-size:28px;color:var(--ink-2)}
/* footer */
.pfoot{padding:50px var(--gutter) 30px;background:var(--ink);color:var(--paper);display:grid;gap:14px;margin-top:40px}
.pfoot .brand__by{color:rgba(242,237,227,.7)}.pfoot p{max-width:70ch;color:rgba(242,237,227,.75);font-size:14px}
.pfoot nav{display:flex;gap:18px;flex-wrap:wrap;font-size:12px;letter-spacing:.16em;text-transform:uppercase}.pfoot nav a{text-decoration:none}
.pfoot small{color:rgba(242,237,227,.5)}
@media (max-width:860px){
  .pnav{grid-template-columns:auto 1fr;}.pnav__links{display:none}.pnav .brand{align-items:flex-start}
  .piece__hero,.guide__grid,.about__grid{grid-template-columns:1fr}.guide__rail,.about__grid figure{position:static}
  .piece__fig{padding:12% 14% 8%}
}