/* PAKT - one stylesheet, no external fonts, no external requests. */
:root{
  --ink:#11100e; --char:#1b1815; --char-2:#24201b; --tobacco:#3a2a1d; --leaf:#7a5a3a;
  --brass:#c19a5b; --parchment:#efe6d6; --ash:#a89f90; --ember:#b01e1e; --ember-hi:#c92a2a; --line:#38312a;
  --serif:"Iowan Old Style","Palatino Linotype",Palatino,"Book Antiqua",Georgia,serif;
  --sans:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --max:68rem; --gutter:1.25rem;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--ink);color:var(--parchment);font:1.0625rem/1.65 var(--sans);min-height:100vh;display:flex;flex-direction:column}
main{flex:1}
img,svg{max-width:100%}
a{color:var(--brass);text-underline-offset:.2em}
a:hover{color:var(--parchment)}
:focus-visible{outline:2px solid var(--brass);outline-offset:3px}
.skip{position:absolute;left:-999px;top:0;background:var(--parchment);color:var(--ink);padding:.5rem 1rem;z-index:10}
.skip:focus{left:0}
.wrap{max-width:var(--max);margin:0 auto;padding:0 var(--gutter)}
.narrow{max-width:42rem}
h1,h2,h3{font-family:var(--serif);font-weight:500;line-height:1.15;letter-spacing:.005em;margin:0 0 .6em}
h1{font-size:clamp(2.4rem,7vw,4.4rem)}
h2{font-size:clamp(1.6rem,4vw,2.3rem)}
h3{font-size:1.25rem}
p{margin:0 0 1.1em}
.eyebrow{font:600 .78rem/1 var(--sans);letter-spacing:.22em;text-transform:uppercase;color:var(--brass);margin:0 0 1.2rem}
.lede{font-family:var(--serif);font-size:clamp(1.2rem,2.6vw,1.5rem);line-height:1.5;color:var(--parchment);max-width:36rem}
.muted{color:var(--ash)}
.small{font-size:.875rem}

/* header */
.site-head{border-bottom:1px solid var(--line)}
.site-head .wrap{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding-top:1rem;padding-bottom:1rem;flex-wrap:wrap}
.brand{display:inline-flex;align-items:center;color:var(--parchment);text-decoration:none}
.brand svg{height:2.1rem;width:auto;display:block}
nav ul{display:flex;gap:.25rem 1.4rem;list-style:none;margin:0;padding:0;flex-wrap:wrap}
nav a{color:var(--ash);text-decoration:none;font-size:.95rem;padding:.3rem 0;border-bottom:1px solid transparent}
nav a:hover,nav a[aria-current=page]{color:var(--parchment);border-bottom-color:var(--brass)}

/* sections */
section{padding:clamp(3rem,8vw,6rem) 0}
.hero{padding:clamp(3.5rem,11vw,8rem) 0 clamp(3rem,8vw,6rem);background:radial-gradient(60rem 28rem at 78% 0%,rgba(176,30,30,.16),transparent 70%),radial-gradient(40rem 24rem at 0% 100%,rgba(193,154,91,.07),transparent 70%)}
.hero h1{max-width:14ch}
.band{background:var(--char);border-block:1px solid var(--line)}
.grid{display:grid;gap:1.5rem;grid-template-columns:repeat(auto-fit,minmax(15rem,1fr))}
.card{background:var(--char);border:1px solid var(--line);border-radius:.25rem;padding:1.5rem}
.band .card{background:var(--ink)}
.card h3{color:var(--brass)}
.steps{list-style:none;counter-reset:s;padding:0;margin:0;display:grid;gap:1.25rem}
.steps li{counter-increment:s;display:grid;grid-template-columns:3rem 1fr;gap:1rem;align-items:start;padding:1.25rem 0;border-top:1px solid var(--line)}
.steps li::before{content:counter(s);font:500 2rem/1 var(--serif);color:var(--brass)}
.steps h3{margin-bottom:.3em}
.steps p{margin:0}
.parts{display:grid;gap:.75rem 2rem;grid-template-columns:repeat(auto-fit,minmax(16rem,1fr));margin:0;padding:0;list-style:none}
.parts li{border-left:2px solid var(--leaf);padding-left:1rem}
.parts strong{display:block;color:var(--parchment)}
.badge{display:inline-block;border:1px solid var(--brass);color:var(--brass);padding:.35rem .8rem;font:600 .75rem/1 var(--sans);letter-spacing:.18em;text-transform:uppercase;border-radius:2rem}
.rule{width:3rem;height:2px;background:var(--ember);border:0;margin:0 0 1.5rem}

/* forms & buttons */
.btn{display:inline-block;background:var(--ember);color:var(--parchment);border:1px solid var(--ember);padding:.85rem 1.6rem;font:600 .95rem/1 var(--sans);letter-spacing:.06em;text-decoration:none;cursor:pointer;border-radius:.2rem}
.btn:hover{background:var(--ember-hi);color:#fff}
.btn.ghost{background:transparent;color:var(--parchment);border-color:var(--ash)}
.btn.ghost:hover{border-color:var(--parchment);background:var(--char-2)}
.btn[disabled]{opacity:.5;cursor:not-allowed}
form{display:grid;gap:1rem;max-width:30rem}
label{display:block;font-size:.9rem;color:var(--ash);margin-bottom:.3rem}
input[type=email],input[type=text],textarea,select{width:100%;background:var(--char-2);color:var(--parchment);border:1px solid #4a4238;border-radius:.2rem;padding:.8rem .9rem;font:inherit}
textarea{min-height:9rem}
.check{display:flex;gap:.7rem;align-items:flex-start;color:var(--parchment);font-size:.95rem;line-height:1.5}
.check input{margin-top:.3rem;width:1.15rem;height:1.15rem;accent-color:var(--ember);flex:none}
.hp{position:absolute;left:-9999px;height:0;overflow:hidden}
.msg{padding:.9rem 1.1rem;border-radius:.2rem;border:1px solid}
.msg.err{border-color:#8a2f2f;background:#2a1414;color:#f0c9c4}
.msg.ok{border-color:#5a6a3a;background:#1c2214;color:#d6e3b9}
.todo{border:1px dashed var(--brass);background:rgba(193,154,91,.08);color:var(--brass);padding:.7rem .9rem;margin:1rem 0;font-size:.9rem;border-radius:.2rem}
.todo strong{letter-spacing:.1em;text-transform:uppercase;font-size:.75rem;margin-right:.5rem}

/* gate */
.gate{min-height:100vh;display:grid;place-items:center;padding:2rem var(--gutter);text-align:center;background:radial-gradient(50rem 30rem at 50% 0%,rgba(176,30,30,.2),transparent 70%),var(--ink)}
.gate .box{max-width:30rem}
.gate .brand{margin-bottom:2.5rem}
.gate .brand svg{height:3.2rem}
.gate form{max-width:none;display:flex;gap:.8rem;justify-content:center;flex-wrap:wrap}

/* faq */
details{border-top:1px solid var(--line);padding:1rem 0}
details:last-of-type{border-bottom:1px solid var(--line)}
summary{cursor:pointer;font:500 1.15rem/1.4 var(--serif);list-style:none;display:flex;justify-content:space-between;gap:1rem}
summary::-webkit-details-marker{display:none}
summary::after{content:"+";color:var(--brass);font-size:1.4rem;line-height:1}
details[open] summary::after{content:"\2212"}
details p{margin:.8rem 0 0;color:var(--ash)}

/* tables (brand page, cart) */
table{border-collapse:collapse;width:100%}
th,td{text-align:left;padding:.6rem .5rem;border-bottom:1px solid var(--line);vertical-align:top}
.swatches{display:grid;gap:1rem;grid-template-columns:repeat(auto-fit,minmax(9rem,1fr))}
.sw{border:1px solid var(--line);border-radius:.25rem;overflow:hidden;font-size:.85rem}
.sw i{display:block;height:4.5rem}
.sw span{display:block;padding:.5rem .7rem;background:var(--char)}

/* footer */
.site-foot{border-top:1px solid var(--line);padding:2.5rem 0 3rem;color:var(--ash);font-size:.9rem}
.site-foot .cols{display:grid;gap:2rem;grid-template-columns:repeat(auto-fit,minmax(13rem,1fr))}
.site-foot ul{list-style:none;margin:0;padding:0;display:grid;gap:.4rem}
.site-foot a{color:var(--ash)}
.site-foot a:hover{color:var(--parchment)}
.brandline{color:var(--parchment);font:500 1.1rem var(--serif);letter-spacing:.25em}
.fine{margin-top:2rem;padding-top:1.5rem;border-top:1px solid var(--line);font-size:.8rem;line-height:1.6}

@media (max-width:40rem){
  nav ul{gap:.1rem 1rem}
  .steps li{grid-template-columns:2.2rem 1fr}
}
@media (prefers-reduced-motion:no-preference){ .btn{transition:background .15s,border-color .15s} }

.gate h1{font-size:clamp(2rem,6vw,3rem)}
.gate-fine{margin-top:2rem}
.sw-ink{background:#11100e}
.sw-char{background:#1b1815}
.sw-tobacco{background:#3a2a1d}
.sw-leaf{background:#7a5a3a}
.sw-brass{background:#c19a5b}
.sw-parchment{background:#efe6d6}
.sw-ash{background:#a89f90}
.sw-ember{background:#b01e1e}

/* product imagery */
.hero-grid{display:grid;gap:clamp(1.5rem,4vw,3rem);align-items:center;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr)}
.hero-photo{margin:0;justify-self:center;max-width:28rem}
.hero-photo img{display:block;width:100%;height:auto;-webkit-mask-image:radial-gradient(ellipse 50% 50% at 50% 50%,#000 55%,transparent 100%);mask-image:radial-gradient(ellipse 50% 50% at 50% 50%,#000 55%,transparent 100%)}
.press-figure{margin:0;justify-self:center;width:min(15rem,60vw);color:var(--ember)}
.press-figure svg{display:block;width:100%;height:auto}
@media (max-width:52rem){.hero-grid{grid-template-columns:1fr}.hero-photo{max-width:20rem;order:-1}.press-figure{width:min(11rem,50vw)}}