/* Inkleaf Paper — flat paper on a table: ivory canvas, ink hairlines, no shadows, no panels. */
@font-face{font-family:"Pinyon Script";src:url(/fonts/pinyon.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Cormorant Garamond";src:url(/fonts/cormorant-400.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Cormorant Garamond";src:url(/fonts/cormorant-500.woff2) format("woff2");font-weight:500;font-display:swap}
@font-face{font-family:"Cormorant Garamond";src:url(/fonts/cormorant-400i.woff2) format("woff2");font-weight:400;font-style:italic;font-display:swap}
@font-face{font-family:Inter;src:url(/fonts/inter-400.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:Inter;src:url(/fonts/inter-500.woff2) format("woff2");font-weight:500;font-display:swap}
:root{
  --ivory:#f7f2e7;--pressed:#efe7d6;--ink:#1e211e;--sage:#7d9a7e;--sage-deep:#5e7a60;--rose:#c9968f;--rose-deep:#a8716b;
  --serif:"Cormorant Garamond","EB Garamond",Georgia,serif;--sans:Inter,ui-sans-serif,system-ui,sans-serif;--script:"Pinyon Script","Allura",cursive;
  --hair:1px solid var(--ink);--soft-hair:1px solid rgba(30,33,30,.18);
}
*{box-sizing:border-box}
html{background:var(--ivory)}
body{margin:0;background:var(--ivory);color:var(--ink);font:400 18px/1.5 var(--serif);-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}
a:hover{text-decoration-thickness:2px}
h1,h2,h3{font-family:var(--serif);font-weight:500;margin:0}
h1{font-size:40px;line-height:1.2;letter-spacing:-.01em}
h2{font-size:26px;line-height:1.4}
small,.small{font-size:14px}
.muted{opacity:.72}
:focus-visible{outline:1px solid var(--ink);outline-offset:3px}
button{font:inherit;color:inherit}

/* header + footer: quiet chrome */
.top{display:flex;align-items:center;justify-content:space-between;gap:20px;height:72px;padding:0 40px;font:400 14px/1.2 var(--sans);letter-spacing:.02em}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;font-weight:500;text-transform:uppercase;letter-spacing:.08em;font-size:13px;line-height:1.15}
.brand img{display:block;width:40px;height:40px}
.top nav{display:flex;gap:30px}.top nav a{text-decoration:none}.top nav a:hover{text-decoration:underline}
.top-cta{font-weight:500}
.foot{display:grid;grid-template-columns:repeat(3,1fr);gap:40px;padding:60px 40px 50px;border-top:var(--hair);font:400 14px/1.6 var(--sans)}
.foot a{display:block;text-decoration:none;margin-bottom:6px}.foot a:hover{text-decoration:underline}.foot p{margin:0 0 8px;max-width:38ch}
.foot strong{font-weight:500;display:block;margin-bottom:8px;text-transform:uppercase;letter-spacing:.08em;font-size:13px}

/* buttons: hairline rectangles and underlined links, never pills */
.btn,.kit .kit-btn,body .kit button{font:500 14px/1 var(--sans);letter-spacing:.04em;border:var(--hair);border-radius:0;background:transparent;color:var(--ink);padding:14px 20px;cursor:pointer;text-decoration:none;display:inline-block}
.btn.primary,body .kit .kit-btn.primary,body .kit button.primary{background:var(--ink);color:var(--ivory);border-color:var(--ink)}
.btn:hover,body .kit button:hover,body .kit .kit-btn:hover{background:var(--ink);color:var(--ivory)}
.btn.primary:hover,body .kit button.primary:hover{background:transparent;color:var(--ink)}
button.link,.ink-link{font:400 14px/1.4 var(--sans);background:none;border:0;padding:0;cursor:pointer;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px;color:var(--ink)}
button.link:hover,.ink-link:hover{text-decoration-thickness:2px}
button.link.on{text-decoration-thickness:2px;font-weight:500}

/* ── the builder (first screen) ── */
.builder{display:grid;grid-template-columns:minmax(360px,5fr) 7fr;min-height:calc(100vh - 72px);border-top:var(--soft-hair)}
.choices{padding:40px 50px 40px 40px;display:flex;flex-direction:column;gap:20px;border-right:var(--soft-hair)}
.kicker{font:400 14px/1.4 var(--sans);letter-spacing:.06em;text-transform:uppercase;margin:0;opacity:.72}
.choices h1{font-size:50px;line-height:1;letter-spacing:-.02em}
.steps{list-style:none;display:flex;flex-wrap:wrap;gap:6px 20px;padding:0 0 14px;margin:0;border-bottom:var(--soft-hair);counter-reset:s}
.steps button{background:none;border:0;padding:0;font:400 14px/1.4 var(--sans);cursor:pointer;opacity:.6}
.steps button[aria-current]{opacity:1;font-weight:500;text-decoration:underline;text-underline-offset:6px}
fieldset{border:0;padding:0;margin:0;display:grid;gap:14px}
fieldset[hidden],[hidden]{display:none!important}
legend{font:500 26px/1.3 var(--serif);padding:0;margin-bottom:6px}
.label{font:500 14px/1.2 var(--sans);margin:6px 0 0;letter-spacing:.02em}
.choices label{display:grid;gap:6px;font:500 14px/1.3 var(--sans)}
.choices label small{font-weight:400;opacity:.65;margin-left:8px}
input,textarea,select{font:400 18px/1.4 var(--serif);color:var(--ink);background:transparent;border:0;border-bottom:var(--hair);border-radius:0;padding:8px 0;width:100%}
textarea{border:var(--hair);padding:10px;resize:vertical}
input:focus,textarea:focus{outline:none;border-bottom-width:2px;padding-bottom:7px}
input::placeholder,textarea::placeholder{color:var(--ink);opacity:.38;font-style:italic}
input[aria-invalid=true]{border-bottom-color:#9b3b2f}
.err{color:#9b3b2f;font:400 14px/1.4 var(--sans)}
.pair{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.swatches{display:flex;flex-wrap:wrap;gap:10px 26px}
.swatch{display:flex!important;align-items:center;gap:8px!important;cursor:pointer;font-weight:400!important}
.swatch input,.opt input{position:absolute;opacity:0;width:1px;height:1px}
.chip{width:26px;height:26px;border:1px solid rgba(30,33,30,.35);display:inline-block}
.chip-sage{background:var(--sage)}.chip-rose{background:var(--rose)}.chip-ink{background:var(--ink)}
.swatch input:checked+.chip{outline:1px solid var(--ink);outline-offset:3px}
.swatch input:checked~span:last-child{text-decoration:underline;text-underline-offset:4px}
.swatch input:focus-visible+.chip{outline:2px solid var(--ink)}
.makes{display:grid;grid-template-columns:1fr 1fr;border-top:var(--soft-hair)}
.makes .opt{display:block!important;cursor:pointer;border-bottom:var(--soft-hair);padding:10px 10px 10px 0}
.makes .opt:nth-child(odd){border-right:var(--soft-hair)}.makes .opt:nth-child(even){padding-left:14px}
.opt span{display:grid;gap:2px}.opt b{font:500 18px/1.2 var(--serif)}.opt em{font:400 13px/1.3 var(--sans);font-style:normal;opacity:.7}
.opt input:checked+span b{text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:1px}
.opt input:checked+span b::before{content:"✓ ";font-size:15px}
.opt input:focus-visible+span{outline:1px solid var(--ink);outline-offset:2px}
.hint{font:400 14px/1.4 var(--sans);opacity:.72;margin:0}
.stepnav{display:flex;justify-content:space-between;min-height:20px}
.stepnav [data-next]{margin-left:auto}
.total{margin-top:auto;border-top:var(--hair);padding-top:20px;display:grid;grid-template-columns:1fr auto;align-items:center;gap:6px 20px}
.total p{margin:0}.total .price{font:500 40px/1 var(--serif)}.total .muted{font:400 14px var(--sans)}
.total .saved{grid-column:1/-1;font:400 13px var(--sans);min-height:18px}

.stage{position:relative;padding:30px 40px 40px;background:linear-gradient(184deg,var(--ivory) 0%,var(--pressed) 100%);display:flex;flex-direction:column;align-items:center;gap:14px;overflow:hidden}
.stage-bar{width:100%;display:flex;justify-content:space-between;align-items:flex-start;gap:20px}
.tabs{display:flex;flex-wrap:wrap;gap:6px 18px}
.tabs button{background:none;border:0;padding:0 0 4px;font:400 14px/1.4 var(--sans);cursor:pointer;opacity:.62;border-bottom:1px solid transparent}
.tabs button[aria-selected=true]{opacity:1;border-bottom:var(--hair);font-weight:500}
.stage-actions{display:flex;gap:18px;white-space:nowrap}
.sheet{width:min(100%,calc((100vh - 230px) * 148 / 210));max-width:560px;aspect-ratio:148/210;flex:none}
.sheet[data-size="5x7"]{aspect-ratio:127/177.8;width:min(92%,calc((100vh - 230px) * 127 / 177.8))}
.sheet svg{width:100%;height:100%;display:block;border-radius:4px;outline:1px solid rgba(30,33,30,.12)}
.caption{font:400 14px/1.4 var(--sans);margin:0;opacity:.75;text-align:center}
.tablepager{display:flex;gap:20px;align-items:center;font:400 14px var(--sans)}

/* ── the suite on the table ── */
.suite{display:grid;grid-template-columns:5fr 7fr;gap:40px;padding:120px 0 120px 40px;border-top:var(--hair);overflow:hidden}
.suite-copy{display:flex;flex-direction:column;gap:20px;max-width:34em}
.suite h2,.printing h2,.page-head h1{font-size:58px;line-height:1;letter-spacing:-.025em}
.suite p{margin:0}
.compare{margin:0;border-top:var(--soft-hair)}
.compare dt{font:500 14px/1.3 var(--sans);letter-spacing:.04em;text-transform:uppercase;padding-top:14px}
.compare dd{margin:4px 0 0;padding-bottom:14px;border-bottom:var(--soft-hair)}
.suite-styles{display:flex;gap:20px}
.table{position:relative;min-height:760px;background:var(--pressed);margin-right:-2px}
.paper{position:absolute;margin:0;width:250px;aspect-ratio:148/210}
.paper svg{width:100%;height:100%;display:block;border-radius:4px;outline:1px solid rgba(30,33,30,.1)}
.paper.p0{left:6%;top:60px;width:300px;transform:rotate(-2deg);z-index:3}
.paper.p1{left:34%;top:30px;transform:rotate(3deg);z-index:2}
.paper.p2{left:56%;top:90px;width:230px;transform:rotate(-1.5deg);z-index:4}
.paper.p3{left:76%;top:40px;width:200px;transform:rotate(2.5deg);z-index:1}
.paper.p4{left:40%;top:330px;width:280px;transform:rotate(-3deg);z-index:5}

/* ── printing FAQ ── */
.printing{padding:120px 40px;border-top:var(--hair);display:grid;grid-template-columns:5fr 7fr;gap:40px}
.faq{border-top:var(--hair)}
.faq details{border-bottom:var(--soft-hair);padding:20px 0}
.faq summary{cursor:pointer;font:500 24px/1.3 var(--serif);list-style:none;display:flex;justify-content:space-between;gap:20px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font:300 24px var(--sans)}.faq details[open] summary::after{content:"–"}
.faq p{margin:10px 0 0;max-width:62ch}

/* ── designs page ── */
.page-head{padding:80px 40px 40px;max-width:60em}.page-head p{max-width:60ch}
.design{display:grid;grid-template-columns:5fr 7fr;gap:40px;padding:60px 40px;border-top:var(--hair);align-items:center}
.design-copy{display:grid;gap:20px;align-content:start}.design-copy p{margin:0;max-width:40ch}
.design h2{font-size:40px}
.flip{display:flex;flex-wrap:wrap;gap:8px 20px}
.design-sheets{background:linear-gradient(184deg,var(--ivory),var(--pressed));padding:40px;display:flex;justify-content:center}
.sheet-one{margin:0;width:min(100%,380px);aspect-ratio:148/210}.sheet-one svg{width:100%;height:100%;display:block;border-radius:4px;outline:1px solid rgba(30,33,30,.12)}

/* ── review ── */
.review{padding:40px}
.review h1{font-size:58px;line-height:1;letter-spacing:-.025em;margin:14px 0 10px}
.lede{max-width:62ch;margin:0 0 30px}
.proofs{display:flex;gap:20px;overflow-x:auto;padding:20px 0 10px}
.proofs.wide{padding:30px;background:linear-gradient(184deg,var(--ivory),var(--pressed))}
.proof{margin:0;flex:0 0 auto;width:220px;display:grid;gap:8px}
.proofs.wide .proof{width:260px}
.proof svg{width:100%;aspect-ratio:148/210;display:block;border-radius:4px;outline:1px solid rgba(30,33,30,.12)}
.proof figcaption{font:400 14px var(--sans);opacity:.75}
.review-grid{display:grid;grid-template-columns:7fr 5fr;gap:60px;margin-top:40px}
.review-grid h2{margin:0 0 14px}
.checklist{display:grid;grid-template-columns:max-content 1fr;margin:0 0 40px;border-top:var(--soft-hair)}
.checklist dt,.checklist dd{padding:10px 0;border-bottom:var(--soft-hair);margin:0}
.checklist dt{font:500 14px/1.6 var(--sans);padding-right:30px}
.gets{padding-left:20px;margin:0}.gets li{margin-bottom:6px}
.payside{border-left:var(--hair);padding-left:40px}
.payform{display:grid;gap:14px;max-width:none!important}
.payform label{display:grid;gap:6px;font:500 14px/1.3 var(--sans)}
.payform label .muted{font-weight:400}
.payform label.check{display:flex;gap:10px;align-items:flex-start;font-weight:400}
.payform label.check input{width:auto;margin-top:2px}
.total-line{display:flex;justify-content:space-between;align-items:baseline;border-bottom:var(--hair);padding-bottom:10px;margin:0}
.total-line span{font:500 14px var(--sans);text-transform:uppercase;letter-spacing:.06em}.total-line strong{font:500 50px/1 var(--serif)}
.payside .err ul{margin:6px 0}

/* ── the customer kit, in our clothes ── */
main>.kit,.kit{max-width:1200px;margin:0 auto;padding:40px}
body .kit h1{font-size:40px;margin-bottom:6px}
body .kit h2{font-size:24px;margin:30px 0 10px}
body .kit .kit-card{border:0;border-top:var(--hair);border-radius:0;padding:14px 0}
body .kit .kit-card:hover{background:var(--pressed)}
body .kit .pill{border-radius:0;font:500 12px/1.4 var(--sans);letter-spacing:.06em;text-transform:uppercase;padding:2px 8px}
body .kit .notice{border:var(--hair);border-radius:0;background:var(--ivory)}
body .kit input,body .kit textarea,body .kit select{border-radius:0;border:0;border-bottom:var(--hair);padding:8px 0}
body .kit textarea{border:var(--hair);padding:10px}
body .kit label{font:500 14px/1.3 var(--sans)}
body .kit .timeline li .dot{border-radius:0;transform:rotate(45deg);width:10px;height:10px}
body .kit .timeline li{font:400 16px/1.4 var(--sans)}
body .kit .msg{border-left:1px solid rgba(30,33,30,.3)}
body .kit .files li{font:400 15px/1.4 var(--sans)}
body .kit nav.muted{font:400 14px var(--sans)}
body .kit nav button{background:none!important;color:inherit!important;text-decoration:underline;padding:0!important;border:0!important;font:400 14px var(--sans)}
.downloads{border:var(--hair);padding:20px 26px;margin:0 0 20px}
.downloads h2{margin-top:0!important}
.tips ul{padding-left:18px;margin:10px 0 0}.tips li{margin-bottom:6px;font-size:16px}
.tips summary,.correct summary{cursor:pointer;font:500 14px var(--sans);text-decoration:underline;text-underline-offset:3px}
.correct{margin:20px 0;border-top:var(--soft-hair);padding-top:14px}
.progress{font:500 15px var(--sans);display:flex;align-items:center;gap:10px;border:var(--hair);padding:14px}
.dotpulse{width:10px;height:10px;background:var(--sage-deep);transform:rotate(45deg);animation:pulse 1s ease-in-out infinite alternate}
@keyframes pulse{from{opacity:.25}to{opacity:1}}
@media (prefers-reduced-motion:reduce){.dotpulse{animation:none}*{scroll-behavior:auto!important;transition:none!important}}

/* ── phone ── */
@media (max-width:900px){
  .top{padding:0 20px;height:64px}.top nav{gap:18px}
  .builder{grid-template-columns:1fr;min-height:0}
  .stage{order:-1;padding:20px 20px 26px}
  .sheet{width:min(78vw,380px)}.sheet[data-size="5x7"]{width:min(80vw,390px)}
  .choices{padding:30px 20px;border-right:0}
  .choices h1{font-size:40px}
  .suite,.printing,.design,.review-grid{grid-template-columns:1fr}
  .suite{padding:80px 0 0 20px;gap:30px}.suite-copy{padding-right:20px}
  .suite h2,.printing h2,.page-head h1,.review h1{font-size:43px}
  .table{min-height:520px;margin-left:-20px}
  .paper{width:170px!important}
  .paper.p0{left:4%;top:30px}.paper.p1{left:40%;top:20px}.paper.p2{left:66%;top:90px}.paper.p3{left:10%;top:280px}.paper.p4{left:46%;top:270px}
  .printing{padding:80px 20px}.page-head{padding:50px 20px 30px}.design{padding:40px 20px}.design-sheets{padding:20px}
  .review{padding:20px}.payside{border-left:0;padding-left:0;border-top:var(--hair);padding-top:20px}
  .proofs.wide{padding:20px}.proofs.wide .proof{width:200px}
  .foot{grid-template-columns:1fr;padding:40px 20px;gap:20px}
  main>.kit,.kit{padding:20px}
}
@media (max-width:420px){.top nav a[href="/#printing"]{display:none}.makes{grid-template-columns:1fr}.makes .opt:nth-child(odd){border-right:0}.makes .opt:nth-child(even){padding-left:0}.pair{grid-template-columns:1fr}.stage-bar{flex-direction:column;gap:10px}}
/* order page: proofs wrap inside the kit's two columns instead of widening them */
body .kit .two>div{min-width:0}
body .kit .proofs{flex-wrap:wrap;overflow:visible}
body .kit .proof{width:150px}
@media (max-width:560px){body .kit .proof{width:calc(50% - 10px)}}
.brand img{width:44px;height:44px}