:root{
  color-scheme:light;
  --bg:#f0eeeb;
  --surface:#e6e0d6;
  --ink:#1c1c1c;
  --muted:#4a453f;
  --orange:#ea580c;
  --accent:#ea580c;
  --accent-ink:#1c1c1c;
  --accent-hover:#f06820;
  --link:#9a3412;
  --field:#d4cdc1;
  --media:#e6e0d6;
  --media-ink:#1c1c1c;
  --chip-bg:#d8d0c4;
  --chip-ink:#1c1c1c;
  --input-bg:#f7f5f1;
  --input-ink:#1c1c1c;
  --input-border:#6b6560;
  --input-placeholder:#5c564e;
  --focus:#1c1c1c;
  --bone:#f0eeeb;
  --max:1180px;
  --display:"League Spartan",Figtree,sans-serif;
  --text:Figtree,system-ui,-apple-system,"Segoe UI",sans-serif;
  --ease-out:cubic-bezier(0.23,1,0.32,1);
  --ease-in-out:cubic-bezier(0.77,0,0.175,1);
}
*{box-sizing:border-box}
html{
  -webkit-text-size-adjust:100%;
  -webkit-tap-highlight-color:transparent;
  scroll-padding-top:calc(72px + env(safe-area-inset-top));
  scrollbar-color:var(--ink) var(--bg);
}
body{
  margin:0;
  font-family:var(--text);
  font-size:1.0625rem;
  font-weight:400;
  line-height:1.5;
  color:var(--ink);
  background:var(--bg);
}
p{text-wrap:pretty}
img{max-width:100%;height:auto}
a{color:inherit;text-underline-offset:.18em}
h1,h2,h3,.brand,.mark,.price{
  font-family:var(--display);
  font-weight:700;
  letter-spacing:-.04em;
  line-height:.9;
}
.wrap{
  max-width:var(--max);
  margin:0 auto;
  padding:0 max(20px,env(safe-area-inset-right)) 0 max(20px,env(safe-area-inset-left));
}
.ph{
  background:var(--chip-bg);
  color:var(--chip-ink);
  border-radius:2px;
  padding:0 .3em;
  font-family:inherit;
  font-size:inherit;
  font-weight:600;
  letter-spacing:0;
  white-space:normal;
  word-break:break-word;
}
.skip{position:absolute;left:-999px}
.skip:focus{
  left:12px;
  top:calc(12px + env(safe-area-inset-top));
  background:var(--bone);
  color:var(--ink);
  padding:10px 14px;
  z-index:20;
  text-decoration:none;
}
.site-header{
  background:var(--bg);
  color:var(--ink);
  position:sticky;
  top:0;
  z-index:5;
  padding-top:env(safe-area-inset-top);
  transition:background-color 280ms ease,color 280ms ease;
}
.site-header[data-chapter="orange"]{background:var(--orange);color:var(--ink)}
.site-header[data-chapter="ink"]{background:var(--ink);color:var(--bone)}
.site-header[data-chapter="bone"]{background:var(--bg);color:var(--ink)}
.site-header .wrap{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  min-height:64px;
  flex-wrap:nowrap;
}
.brand{
  color:inherit;
  text-decoration:none;
  font-size:1.25rem;
  letter-spacing:-.04em;
  flex:0 0 auto;
}
.nav{display:flex;gap:18px;align-items:center}
.nav a{
  color:inherit;
  text-decoration:none;
  padding:16px 0;
  font-weight:600;
  min-height:44px;
  display:inline-flex;
  align-items:center;
}
.site-header:not([data-chapter="orange"]):not([data-chapter="ink"]) .nav a[aria-current=page]{color:var(--link)}
.chap{padding:28px 0 56px}
.chap-orange{background:var(--orange);color:var(--ink)}
.chap-ink{background:var(--ink);color:var(--bone)}
.chap-bone{background:var(--bg);color:var(--ink)}
.chap h1{
  font-size:clamp(3.25rem,9vw,8.5rem);
  line-height:.86;
  letter-spacing:-.04em;
  margin:8px 0 18px;
}
.chap-hero{padding-bottom:18px}
.lead-band{background:var(--bone);color:var(--ink);padding:20px 0 12px}
#products.chap{padding-top:0}
.lead,.product-copy p{
  max-width:40rem;
  margin:0 0 16px;
  font-size:1.25rem;
  line-height:1.45;
  color:inherit;
}
.ticker{overflow:hidden;background:var(--ink);color:var(--bone);margin:0}
.ticker-track{display:flex;width:max-content}
.ticker-set{display:flex;gap:0 2.75rem;padding-right:2.75rem}
.ticker-set span{
  font-family:var(--display);
  font-weight:700;
  font-size:clamp(1.35rem,2.6vw,2.15rem);
  letter-spacing:-.03em;
  line-height:1;
  white-space:nowrap;
  padding:16px 0;
}
.product-copy h2{
  text-wrap:balance;
  margin:0 0 12px;
  font-size:clamp(1.85rem,3vw,2.75rem);
  line-height:.95;
  letter-spacing:-.04em;
}
.chap-orange .product-body{margin-top:28px}
.product-copy p.price-line{
  margin:2px 0 14px;
  font-family:var(--text);
  font-weight:600;
  font-size:1.25rem;
  letter-spacing:0;
  line-height:1.3;
}
.price-note{
  display:block;
  margin-top:6px;
  font-family:var(--text);
  font-weight:600;
  font-size:1.0625rem;
  letter-spacing:0;
  line-height:1.35;
}
.product-copy p.delivery,.buy-box .delivery{
  font-family:var(--text);
  font-weight:400;
  font-size:1.0625rem;
  letter-spacing:0;
  line-height:1.4;
}
.product-copy p.delivery{margin:12px 0 0}
.buy-box .delivery{margin:8px 0 16px}
.product-body{display:grid;gap:22px;align-items:start}
.media{
  aspect-ratio:16/9;
  background:var(--media);
  color:var(--media-ink);
  margin:0;
  min-width:0;
  overflow:hidden;
}
.media picture,.media img{display:block;width:100%;height:100%;object-fit:cover}
.media .ph,.img .ph{background:transparent;color:inherit;padding:0}
.actions{display:flex;align-items:center;gap:16px 22px;flex-wrap:wrap;margin:4px 0 0}
.actions a:not(.btn){font-weight:600;text-decoration:underline;text-underline-offset:.18em}
.trade h2,.trade .row{
  font-family:var(--display);
  font-weight:700;
  font-size:clamp(1.75rem,4vw,3.15rem);
  line-height:1;
  letter-spacing:-.04em;
  margin:0;
  padding:14px 0 6px;
}
.trade .facts .row{
  font-size:clamp(1rem,3.6vw,1.55rem);
  line-height:1.15;
  white-space:nowrap;
  padding:8px 0;
}
.trade .row a{text-decoration:none}
.trade-grid{display:grid;gap:18px 48px;align-items:start}
.trade-intro h2{margin:0}
.trade-action{margin:16px 0 0}
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  text-decoration:none;
  font-family:var(--text);
  font-weight:600;
  font-size:1.0625rem;
  line-height:1.2;
  min-height:48px;
  padding:12px 20px;
  border-radius:4px;
  border:0;
  background:var(--accent);
  color:var(--accent-ink);
  text-align:center;
  cursor:pointer;
  user-select:none;
  touch-action:manipulation;
  transition:transform 160ms var(--ease-out),background-color 180ms ease;
}
.btn:active{transform:scale(0.97)}
.btn-lg{min-height:52px;padding:14px 22px}
button.btn{font-family:var(--text)}
.chap-orange .btn{background:var(--ink);color:var(--bone)}
.chap-ink .btn{background:var(--orange);color:var(--ink)}
section{padding:48px 0}
section.chap{padding:28px 0 56px}
section.alt{background:var(--surface)}
h2{font-size:clamp(1.75rem,3vw,2.5rem);margin:0 0 12px;line-height:1.05}
h3{margin:0 0 8px;font-size:1.35rem;line-height:1.15}
.section-intro{color:var(--muted);max-width:40rem;margin:0 0 16px}
.grid{display:grid;gap:28px}
.grid-2{grid-template-columns:1fr}
.tag{display:block;color:var(--muted);font-size:1rem;font-weight:600;margin-bottom:8px}
.contact-list{list-style:none;padding:0;margin:16px 0 20px}
.contact-list li{padding:8px 0}
.contact-list strong{display:inline-block;min-width:5.5rem;font-weight:600}
.breadcrumb{font-size:1rem;color:var(--muted);padding:22px 0 0}
.breadcrumb a{color:var(--muted)}
.product-top{display:grid;grid-template-columns:1fr;gap:28px;align-items:start;padding:18px 0 56px}
.product-top h1{font-size:clamp(2.5rem,6vw,4.5rem);margin:0 0 14px}
.product-top .img{
  aspect-ratio:4/3;
  margin:0;
  background:var(--surface);
  color:var(--ink);
  display:block;
  padding:0;
  min-width:0;
  overflow:hidden;
}
.product-top .img picture,.product-top .img > img{display:block;width:100%;height:100%}
.product-top .img img{width:100%;height:100%;object-fit:cover;display:block}
.product-top .img img.is-native{width:auto;height:auto;max-height:100%;object-fit:contain}
.gallery{display:flex;flex-wrap:wrap;gap:10px;margin-top:12px}
.gallery button{
  width:96px;
  margin:0;
  padding:0;
  border:0;
  background:transparent;
  color:inherit;
  font:inherit;
  font-size:1rem;
  font-weight:600;
  text-align:left;
  cursor:pointer;
}
.gallery img{width:96px;height:72px;object-fit:cover;display:block;background:var(--surface)}
.gallery button[aria-current="true"] img{outline:2px solid var(--ink);outline-offset:2px}
.variants{display:grid;gap:22px;margin-top:8px}
.variant h2{font-size:1.5rem;margin:0 0 6px}
.buy-box{background:var(--surface);padding:24px;margin-top:22px}
.buy-box .price{font-size:clamp(1.75rem,3vw,2.25rem);line-height:1.05;margin:0 0 8px}
.buy-box .unit{color:var(--muted);margin:0 0 18px}
.buy-box .btn{width:100%}
.buy-box small{display:block;color:var(--muted);margin-top:14px}
.buy-box .alt-link{display:block;text-align:center;margin-top:14px;font-weight:600}
.cross{margin:18px 0 0}
.cross a{font-weight:600}
table.specs{width:100%;border-collapse:collapse;background:var(--surface)}
table.specs th,table.specs td{text-align:left;padding:14px 16px;vertical-align:top;overflow-wrap:anywhere}
table.specs tr:nth-child(even){background:var(--bg)}
table.specs th{width:42%;font-weight:600}
.note{background:var(--surface);padding:16px 18px;color:var(--ink)}
.prose{max-width:42rem}
.prose h1{margin-top:0}
.prose h2{margin-top:36px}
.prose p,.prose li{line-height:1.55}
ul.ticks{padding-left:0;list-style:none}
ul.ticks li{padding-left:22px;position:relative;margin:10px 0}
ul.ticks li::before{
  content:"";
  position:absolute;
  left:0;
  top:.55em;
  width:8px;
  height:8px;
  background:var(--accent);
}
form.quote{
  display:grid;
  gap:16px;
  background:var(--surface);
  padding:20px;
  color-scheme:light;
}
form.quote label{font-weight:600;display:block;margin-bottom:6px}
form.quote input,form.quote select,form.quote textarea{
  width:100%;
  min-height:48px;
  padding:12px;
  border:1px solid var(--input-border);
  border-radius:4px;
  font:inherit;
  font-size:1.0625rem;
  background:var(--input-bg);
  color:var(--input-ink);
  caret-color:var(--input-ink);
}
form.quote textarea{min-height:8rem}
form.quote input::placeholder,form.quote textarea::placeholder{color:var(--input-placeholder);opacity:1}
form.quote .row{display:grid;grid-template-columns:1fr;gap:16px}
.site-footer{
  background:var(--ink);
  color:var(--bone);
  padding:36px 0 calc(28px + env(safe-area-inset-bottom));
  font-size:1.0625rem;
  overflow:hidden;
}
.mark{
  font-size:clamp(4.5rem,18vw,11rem);
  line-height:.78;
  letter-spacing:-.045em;
  margin:0 0 18px;
}
.site-footer a{color:inherit;text-decoration:none}
.foot-links{display:flex;flex-wrap:wrap;gap:8px 22px;list-style:none;margin:0 0 16px;padding:0}
.foot-links a{min-height:44px;display:inline-flex;align-items:center;font-weight:600}
.foot-meta{margin:0 0 10px;color:inherit}
.legal{margin:0;font-size:1.0625rem;color:inherit}
.site-footer .ph{background:var(--bone);color:var(--ink)}
#main:focus,#main:focus-visible{outline:none}
:focus-visible{outline:2px solid var(--focus);outline-offset:3px}
.chap-ink :focus-visible,.site-header[data-chapter="ink"] :focus-visible,.site-footer :focus-visible{outline-color:var(--bone)}
form.quote :focus-visible{outline-color:var(--input-ink)}
::selection{background:var(--orange);color:var(--ink)}
.chap-orange ::selection,.site-footer ::selection{background:var(--ink);color:var(--bone)}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);clip-path:inset(50%);white-space:nowrap;border:0}
#products,#sarking{scroll-margin-top:calc(76px + env(safe-area-inset-top))}
@media (hover:hover) and (pointer:fine){
  .btn:hover{background:var(--accent-hover)}
  .chap-orange .btn:hover{background:#2a2a2a}
  .chap-ink .btn:hover{background:var(--accent-hover)}
  .product:hover{transform:translateY(-6px)}
  .product:hover .media{background:#ddd6cb}
  .site-header a:hover,.site-footer a:hover{text-decoration:underline}
  .prose a:not(.btn):hover,.breadcrumb a:hover,.cross a:hover,.alt-link:hover,.trade .row a:hover{text-decoration:underline}
  .prose a:not(.btn):hover,.breadcrumb a:hover,.cross a:hover,.alt-link:hover{color:var(--link)}
}
@media (prefers-reduced-motion:no-preference){
  .arrive{animation:arrive 280ms var(--ease-out) both}
  .ticker-track{animation:ticker 28s linear infinite}
  .product{transition:transform 180ms var(--ease-out)}
}
@keyframes arrive{
  from{opacity:0;transform:translateY(22px)}
  to{opacity:1;transform:none}
}
@keyframes ticker{to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){
  .btn{transition:background-color 180ms ease}
  .btn:active{transform:none}
  .ticker-track{animation:none;transform:none;width:auto;max-width:100%}
  .ticker-set+.ticker-set{display:none}
  .ticker-set{flex-wrap:wrap;width:100%;padding-right:0}
  .ticker-set span{white-space:normal}
  .product:hover{transform:none}
}
@media (min-width:640px){
  form.quote{padding:28px}
  form.quote .row{grid-template-columns:1fr 1fr}
}
@media (min-width:700px){
  .trade-grid{grid-template-columns:1fr 1fr}
  .facts{text-align:right}
}
@media (max-width:799px){
  .product .media{
    width:100vw;
    max-width:100vw;
    margin-left:calc(50% - 50vw);
  }
}
@media (min-width:800px){
  .chap-orange .product-body{grid-template-columns:minmax(0,2fr) minmax(0,3fr);gap:32px 40px;align-items:start}
  .chap-ink .product-body{grid-template-columns:minmax(0,3fr) minmax(0,2fr);gap:32px 40px;align-items:start}
  .chap-ink .product-body .media{order:-1}
  .chap-orange .media{
    width:min(1280px, calc(100% + max(20px, env(safe-area-inset-right)) + max(0px, (100vw - var(--max)) / 2)));
    margin-right:calc(-1 * max(20px, env(safe-area-inset-right)) - max(0px, (100vw - var(--max)) / 2));
    justify-self:end;
  }
  .chap-ink .media{
    width:min(1280px, calc(100% + max(20px, env(safe-area-inset-left)) + max(0px, (100vw - var(--max)) / 2)));
    margin-left:calc(-1 * max(20px, env(safe-area-inset-left)) - max(0px, (100vw - var(--max)) / 2));
    justify-self:start;
  }
  .grid-2{grid-template-columns:1fr 1fr}
  .product-top{grid-template-columns:1.05fr .95fr;gap:56px;padding-top:28px}
  table.specs th{width:38%}
  .foot-links{justify-content:space-between}
}