/* Shared styles for every page. Not under /assets, so it isn't cached for a week. */
:root{
  --slate:#16242C; --slate-2:#1F333D; --slate-3:#2C4550;
  --paper:#F1F5F6; --white:#FFFFFF; --steel:#51626A; --rule:#D3DDE0;
  --orange:#FF7A1A; --orange-ink:#B84C00;
  --display:"Barlow Semi Condensed","Arial Narrow",system-ui,sans-serif;
  --body:"Barlow",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --wrap:72rem;
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:5rem;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--slate);font:400 1.0625rem/1.6 var(--body)}
img,svg{max-width:100%;display:block}
a{color:inherit}
h1,h2,h3{font-family:var(--display);font-weight:700;line-height:1.05;margin:0;letter-spacing:-.005em}
h2{font-size:clamp(2rem,4.5vw,3rem)}
h3{font-size:1.5rem;font-weight:600}
p{margin:0 0 1em;max-width:62ch}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 1.25rem}
.skip{position:absolute;left:-999px;top:.5rem;background:var(--orange);color:var(--slate);padding:.5rem 1rem;z-index:99}
.skip:focus{left:.5rem}
:focus-visible{outline:3px solid var(--orange);outline-offset:3px}

/* header */
.site-head{position:sticky;top:0;z-index:20;background:var(--slate);color:var(--paper);padding-top:env(safe-area-inset-top,0px);border-bottom:1px solid var(--slate-3)}
.site-head .wrap{display:flex;align-items:center;justify-content:space-between;gap:1rem;height:4rem}
.brand{display:flex;align-items:center;gap:.65rem;text-decoration:none;white-space:nowrap;font:700 1.35rem/1 var(--display)}
.brand img{width:2.25rem;height:2.25rem}
.nav{display:flex;align-items:center;gap:1.5rem;font-weight:500}
.nav a{text-decoration:none;opacity:.85}
.nav a:hover{opacity:1;text-decoration:underline;text-underline-offset:4px}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;min-height:2.75rem;padding:.6rem 1.25rem;border-radius:999px;border:2px solid transparent;font:600 1.0625rem/1 var(--body);text-decoration:none;cursor:pointer}
.btn-hot{background:var(--orange);color:var(--slate)}
.btn-hot:hover{background:#FF8F3D}
.btn-line{border-color:currentColor;color:var(--paper);background:none}
.btn-line:hover{background:var(--slate-2)}
.nav .btn{opacity:1;text-decoration:none;min-height:2.4rem;padding:.45rem 1rem}
@media (max-width:760px){.nav a:not(.btn):not(.keep){display:none}}

/* hero: the layer stack */
.hero{background:var(--slate);color:var(--paper);padding:clamp(2rem,5vw,3.5rem) 0 clamp(3rem,7vw,5rem);overflow:hidden}
.hero .wrap{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,26rem);gap:2rem clamp(2rem,5vw,4rem);align-items:end}
.hero-head{grid-column:1/-1}
.stack{margin:0;display:flex;flex-direction:column;gap:.18em;font:700 clamp(2.1rem,7vw,5.6rem)/1 var(--display)}
.layer{display:block;width:fit-content;max-width:100%;padding:.12em .5em .16em;border-radius:.64em;background:var(--paper);color:var(--slate)}
.layer.hot{background:var(--orange)}
.bead{width:.42em;height:.42em;border-radius:50%;background:var(--orange);margin:0 0 .3em 1.1em;font-size:clamp(2.1rem,7vw,5.6rem)}
.hero-copy{grid-column:2}
.hero-copy p{font-size:1.1875rem;color:#C9D4D8}
.hero-copy .actions{display:flex;flex-wrap:wrap;gap:.75rem;margin-top:1.5rem}
.facts{grid-column:1/-1;display:flex;flex-wrap:wrap;gap:.5rem 2rem;margin:1rem 0 0;padding:1.25rem 0 0;border-top:1px solid var(--slate-3);list-style:none;color:#C9D4D8;font-weight:500}
.facts li::before{content:"";display:inline-block;width:.55rem;height:.55rem;border-radius:50%;background:var(--orange);margin-right:.55rem;vertical-align:.1em}
@media (max-width:860px){.hero .wrap{grid-template-columns:1fr;align-items:start}.hero-copy{grid-column:1}}

@media (prefers-reduced-motion:no-preference){
  .layer{animation:extrude .7s cubic-bezier(.3,.7,.2,1) both}
  .layer:nth-child(3){animation-delay:.1s}
  .layer:nth-child(2){animation-delay:.55s}
  .layer:nth-child(1){animation-delay:1s}
  .bead{animation:drip .45s ease-out 1.6s both}
  @keyframes extrude{from{clip-path:inset(0 100% 0 0 round .64em)}to{clip-path:inset(0 0 0 0 round .64em)}}
  @keyframes drip{from{transform:translateY(-.6em);opacity:0}to{transform:none;opacity:1}}
}

/* sections */
section{padding:clamp(3.5rem,8vw,6rem) 0}
.intro{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.6fr);gap:2rem 4rem;margin-bottom:2.5rem}
.intro p{color:var(--steel);margin:0}
@media (max-width:760px){.intro{grid-template-columns:1fr}}

.caps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0;border-top:2px solid var(--slate)}
.cap{padding:1.75rem 1.75rem 0 0}
.cap + .cap{padding-left:1.75rem;border-left:1px solid var(--rule)}
.cap h3{margin-bottom:.6rem}
.cap p{color:var(--steel)}
.cap ul{margin:0;padding-left:1.1rem;color:var(--steel)}
@media (max-width:860px){.caps{grid-template-columns:1fr}.cap,.cap + .cap{padding:1.5rem 0;border-left:0;border-bottom:1px solid var(--rule)}}

.materials{background:var(--white)}
.table-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}
table{width:100%;min-width:38rem;border-collapse:collapse;font-size:1rem}
th,td{text-align:left;padding:1rem 1rem 1rem 0;border-bottom:1px solid var(--rule);vertical-align:top}
thead th{font:600 1.125rem/1.2 var(--display);border-bottom:2px solid var(--slate)}
tbody th{font:600 1.25rem/1.2 var(--display);white-space:nowrap}
td{color:var(--steel)}
@media (max-width:640px){table{min-width:0}thead{display:none}table,tbody,tr,th,td{display:block}tr{padding:1rem 0;border-bottom:1px solid var(--rule)}tbody th,td{border:0;padding:.15rem 0}tbody th{white-space:normal;margin-bottom:.35rem}td::before{content:attr(data-label) ": ";font-weight:600;color:var(--slate)}td:last-child::before{display:block;margin-bottom:.3rem}}
.swatches{display:flex;gap:.3rem;flex-wrap:wrap}
.sw{width:1.1rem;height:1.1rem;border-radius:50%;border:1px solid rgba(22,36,44,.2)}
.note{margin-top:1.25rem;color:var(--steel);font-size:.975rem}

.steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1.5rem;counter-reset:s}
.steps li{counter-increment:s;position:relative;padding-top:3.25rem}
.steps li::before{content:counter(s);position:absolute;top:0;left:0;width:2.4rem;height:2.4rem;border-radius:50%;display:grid;place-items:center;background:var(--slate);color:var(--paper);font:700 1.2rem/1 var(--display)}
.steps li:last-child::before{background:var(--orange);color:var(--slate)}
.steps li:not(:last-child)::after{content:"";position:absolute;top:1.15rem;left:3rem;right:.25rem;height:2px;background:var(--rule)}
.steps h3{font-size:1.35rem;margin-bottom:.4rem}
.steps p{color:var(--steel);font-size:1rem}
@media (max-width:860px){.steps{grid-template-columns:1fr 1fr}.steps li::after{display:none}}
@media (max-width:520px){.steps{grid-template-columns:1fr}}

.faq{border-top:2px solid var(--slate);max-width:52rem}
.faq details{border-bottom:1px solid var(--rule)}
.faq summary{cursor:pointer;list-style:none;padding:1.15rem 2.5rem 1.15rem 0;position:relative;font:600 1.3rem/1.25 var(--display)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";position:absolute;right:.5rem;top:50%;width:.7rem;height:.7rem;border-right:2px solid var(--slate);border-bottom:2px solid var(--slate);transform:translateY(-70%) rotate(45deg);transition:transform .2s}
.faq details[open] summary::after{transform:translateY(-30%) rotate(-135deg)}
.faq details p{color:var(--steel);padding-bottom:1.1rem;margin:0}

/* quote form */
.quote{background:var(--slate);color:var(--paper)}
.quote .intro p{color:#C9D4D8}
form{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1.1rem 1.25rem;max-width:52rem}
.field{display:flex;flex-direction:column;gap:.4rem}
.field.full{grid-column:1/-1}
label{font-weight:600}
label .opt{font-weight:400;color:#9FB0B7}
input,select,textarea{font:inherit;color:var(--slate);background:var(--paper);border:2px solid transparent;border-radius:.6rem;padding:.7rem .85rem;min-height:2.9rem;width:100%}
textarea{min-height:9rem;resize:vertical}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--orange)}
input[aria-invalid="true"],textarea[aria-invalid="true"]{border-color:#FF9C9C}
.hint{font-size:.9rem;color:#9FB0B7}
.hp{position:absolute;left:-10000px;width:1px;height:1px;overflow:hidden}
.form-foot{grid-column:1/-1;display:flex;flex-wrap:wrap;align-items:center;gap:1rem 1.5rem}
.status{grid-column:1/-1;margin:0;padding:.9rem 1rem;border-radius:.6rem;font-weight:500;display:none}
.status.ok{display:block;background:#E3F4E8;color:#14532D}
.status.err{display:block;background:#FDE3E3;color:#7F1D1D}
button[disabled]{opacity:.6;cursor:progress}
@media (max-width:640px){form{grid-template-columns:1fr}}

.site-foot{background:var(--slate);color:#9FB0B7;border-top:1px solid var(--slate-3);padding:2rem 0 calc(2rem + env(safe-area-inset-bottom,0px));font-size:.95rem}
.site-foot .wrap{display:flex;flex-wrap:wrap;justify-content:space-between;gap:1rem}
.site-foot a{color:var(--paper)}
.foot-links{display:flex;flex-wrap:wrap;gap:.5rem 1.5rem}

/* inner pages: shop, thanks, policies */
.page-head{background:var(--slate);color:var(--paper);padding:clamp(2rem,5vw,3rem) 0}
.page-head + section,.hero + section{padding-top:clamp(1.5rem,4vw,2.5rem)}
.page-head h1{font-size:clamp(2.4rem,6vw,4rem)}
.page-head p{color:#C9D4D8;font-size:1.1875rem;margin:1rem 0 0}

.products{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(20rem,100%),1fr));gap:1.5rem;margin:0;padding:0;list-style:none}
.product{display:flex;flex-direction:column;background:var(--white);border:1px solid var(--rule);border-radius:1rem;overflow:hidden}
.product img{width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;background:var(--rule)}
.product-body{display:flex;flex-direction:column;gap:.5rem;padding:1.25rem;flex:1}
.product h2{font-size:1.6rem}
.product p{color:var(--steel);margin:0;font-size:1rem}
.product .meta{font-size:.925rem}
.product h2 a{text-decoration:none}
.product h2 a:hover{text-decoration:underline;text-underline-offset:4px}
.product .more{font-size:.95rem;font-weight:600;color:var(--orange-ink)}
.product-buy{display:flex;align-items:center;justify-content:space-between;gap:1rem;margin-top:auto;padding-top:1rem}
.price{font:700 1.6rem/1 var(--display)}
.product-options{display:flex;flex-wrap:wrap;gap:.75rem;margin-top:.5rem}
.product-options label{display:flex;flex-direction:column;gap:.3rem;font-size:.925rem}
.product-options label:has(select){flex:1 1 9rem}
.product-options input{width:5.5rem}
.cart{margin-bottom:2rem;padding:1.25rem 1.5rem;background:var(--white);border:2px solid var(--slate);border-radius:1rem}
.cart h2{font-size:1.6rem;margin-bottom:.5rem}
.cart-lines{list-style:none;margin:0;padding:0}
.cart-lines li{display:grid;grid-template-columns:1fr 5.5rem 6rem auto;align-items:center;gap:.5rem 1rem;padding:.75rem 0;border-bottom:1px solid var(--rule)}
.cart-name{font-weight:600}
.cart-opts{display:block;font-weight:400;color:var(--steel)}
.cart-amt{text-align:right;font-weight:600}
.cart-remove{background:none;border:0;padding:.5rem;font:inherit;font-size:.95rem;color:var(--orange-ink);text-decoration:underline;cursor:pointer}
.cart-foot{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:1rem;margin-top:1rem}
.cart-total{margin:0}
.cart-total strong{margin-left:.5rem;font:700 1.6rem/1 var(--display)}
.cart-total span{display:block;color:var(--steel);font-size:.925rem}
.cart .status{margin-top:1rem}
@media (max-width:560px){.cart-lines li{grid-template-columns:5.5rem 1fr auto}.cart-name{grid-column:1/-1}}
.products:has(li) ~ .empty{display:none}
.empty{max-width:40rem;padding:2rem;border:2px dashed var(--rule);border-radius:1rem;background:var(--white)}
.empty h2{font-size:1.75rem;margin-bottom:.75rem}
.empty p{color:var(--steel)}
.btn-dark{background:var(--slate);color:var(--paper)}
.btn-dark:hover{background:var(--slate-2)}
.shop-notes{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1.5rem;margin-top:3rem;padding-top:1.5rem;border-top:2px solid var(--slate)}
.shop-notes h3{font-size:1.25rem;margin-bottom:.35rem}
.shop-notes p{color:var(--steel);font-size:1rem;margin:0}
@media (max-width:760px){.shop-notes{grid-template-columns:1fr}}

.prose{max-width:46rem}
.prose h2{font-size:clamp(1.75rem,3.5vw,2.25rem);margin:2.5rem 0 .75rem}
.prose h2:first-child{margin-top:0}
.prose h3{font-size:1.25rem;margin:1.5rem 0 .4rem}
.prose ul{padding-left:1.2rem;margin:0 0 1em}
.prose li{margin-bottom:.35rem}
.prose p,.prose li{color:var(--steel)}
.prose a{color:var(--orange-ink)}
.prose .btn-dark{color:var(--paper)}
.toc{display:flex;flex-wrap:wrap;gap:.5rem 1.5rem;margin:0 0 2.5rem;padding:0;list-style:none;font-weight:600}
.toc a{color:var(--orange-ink)}

/* product detail pages (public/products/) */
.detail-top{padding:clamp(1.5rem,4vw,2.5rem) 0 clamp(2rem,5vw,3rem)}
.detail-body{padding-top:0}
.crumbs{margin:0 0 1.25rem;font-size:.95rem;color:var(--steel)}
.crumbs a{color:var(--orange-ink)}
.detail{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:2rem clamp(2rem,4vw,3.5rem);align-items:start}
@media (max-width:860px){.detail{grid-template-columns:1fr}}
.gallery-main{display:block;width:100%;height:auto;aspect-ratio:1;object-fit:contain;background:#E9EDEF;border:1px solid var(--rule);border-radius:1rem}
.thumbs{display:flex;gap:.6rem;margin:.75rem 0 0;padding:0;list-style:none}
.thumbs a{display:block;width:4.5rem;border:2px solid var(--rule);border-radius:.6rem;overflow:hidden;background:#E9EDEF}
.thumbs a[aria-current]{border-color:var(--orange)}
.thumbs img{display:block;width:100%;height:auto;aspect-ratio:1;object-fit:cover}
.gallery .note{margin-top:.5rem;font-size:.9rem}
.buy{background:var(--white);border:1px solid var(--rule);border-radius:1rem;padding:clamp(1.25rem,3vw,1.75rem)}
.buy h1{font-size:clamp(2rem,4.5vw,2.75rem)}
.buy p{margin:.75rem 0 0;color:var(--steel)}
.buy .lead{color:var(--slate)}
.buy .meta{font-size:.925rem}
.buy .product-options{margin-top:1.25rem}
.buy .status{margin-top:1rem}
.status a{color:inherit}
.keyspecs{display:grid;grid-template-columns:auto 1fr;gap:.45rem 1.25rem;margin:1.5rem 0 0;padding-top:1.25rem;border-top:1px solid var(--rule);font-size:.95rem}
.keyspecs dt{font-weight:600}
.keyspecs dd{margin:0;color:var(--steel)}
.block{scroll-margin-top:5rem}
.block + .block{margin-top:3rem;padding-top:2.5rem;border-top:2px solid var(--slate)}
.block h2{font-size:clamp(1.75rem,3.5vw,2.25rem);margin-bottom:1rem}
.block h3{font-size:1.35rem;margin:2rem 0 .6rem}
.block > p,.block li{color:var(--steel);max-width:52rem}
.block ul,.block ol{padding-left:1.2rem;margin:0 0 1em}
.block li{margin-bottom:.35rem}
.block a:not(.btn){color:var(--orange-ink)}
.features{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(16rem,100%),1fr));gap:1.5rem 2rem;margin:2rem 0 0!important;padding:0!important;list-style:none}
.features li{margin:0;padding-top:.9rem;border-top:3px solid var(--orange)}
.features h3{font-size:1.2rem;margin:0 0 .35rem;color:var(--slate)}
.features p{margin:0;font-size:1rem}
.cols{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 3rem}
.cols p{color:var(--steel)}
@media (max-width:760px){.cols{grid-template-columns:1fr}}
.spec{min-width:0;max-width:52rem}
.spec + .spec{margin-top:1.5rem}
.spec th,.spec td{padding:.7rem 1rem .7rem 0}
.spec tbody th{font:600 1rem/1.5 var(--body);white-space:normal;width:34%}
.spec thead th{font-size:1rem}
@media (max-width:640px){.spec th,.spec td{padding:.15rem 0}.spec tbody th{width:auto}.spec td:not([data-label])::before{content:none}}
.drawings{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(24rem,100%),1fr));gap:1.5rem;margin-top:1.5rem}
.drawings figure{margin:0;background:var(--white);border:1px solid var(--rule);border-radius:1rem;overflow:hidden}
.drawings img{display:block;width:100%;height:auto}
.drawings figcaption{padding:.75rem 1rem;border-top:1px solid var(--rule);color:var(--steel);font-size:.95rem}
.product p.notice,.buy p.notice{margin:.75rem 0 0;padding:.7rem .9rem;border-left:4px solid var(--orange);border-radius:.4rem;background:#FFF1E6;color:var(--slate);font-size:.95rem;line-height:1.5}