/* Generated by build/site.py from 13_brand/tokens.py. Editing this file by
   hand means the next build overwrites you -- change the tokens instead. */
:root{
  --ink:#1A2230; --ink-soft:#3D4756; --ink-muted:#6E7787;
  --rule:#C9C6BF; --surface:#FFFFFF; --alt:#F5F4F1;
  --deep:#E6E4DF; --accent:#1F5C63; --accent-soft:#DCE7E7;
  --accent-deep:#14424A; --accent-light:#4FA8AE;
  --measure:70ch;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--surface);color:var(--ink);
  font:17px/1.62 ui-sans-serif,system-ui,"Segoe UI",Roboto,Helvetica,Arial,sans-serif}
img{max-width:100%;height:auto;display:block}
a{color:var(--accent-deep)}
h1,h2,h3{line-height:1.2;letter-spacing:-.012em;margin:0 0 .5em}
h1{font-size:clamp(2rem,5vw,3.1rem)}
h2{font-size:clamp(1.5rem,3.4vw,2.1rem);margin-top:2.2em}
h3{font-size:1.16rem}
p{margin:0 0 1em}
.wrap{max-width:1140px;margin:0 auto;padding:0 20px}
.narrow{max-width:620px}
.small{font-size:.9rem}
.muted{color:var(--ink-muted)}
.lede{font-size:1.1rem;color:var(--ink-soft);max-width:var(--measure)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
/* Where MailerLite's {"success":true} goes when JavaScript is available,
   instead of into a new tab in front of the person who just subscribed. */
.sink{position:absolute;width:0;height:0;border:0;visibility:hidden}
.dl{list-style:none;padding:0;margin:1.4rem 0}
.dl li{margin:0 0 .9rem}

/* The rule sits on the full-width wrapper, not the constrained bar: put it
   on .bar and it stops at 1140px with bare page either side of it. */
.barwrap{border-bottom:1px solid var(--rule)}
.bar{display:flex;align-items:center;justify-content:space-between;
  gap:12px 24px;flex-wrap:wrap;padding:16px 20px;
  max-width:1140px;margin:0 auto}
/* gap, not margin-left: on a narrow screen the nav wraps to its own line,
   and a left margin there indents it past the wordmark above it. */
.bar nav{display:flex;flex-wrap:wrap;gap:8px 20px}
.bar nav a{text-decoration:none;color:var(--ink-soft);font-size:.95rem}
.bar nav a:hover{color:var(--accent-deep)}
.brand img{height:26px;width:auto}

.hero{background:var(--alt);border-bottom:1px solid var(--rule);
  padding:clamp(48px,7vw,86px) 0}
.hero h1{max-width:18ch}
.cta-row{display:flex;gap:12px;flex-wrap:wrap;margin-top:1.4em}
.btn{display:inline-block;background:var(--accent);color:#fff;
  text-decoration:none;padding:13px 22px;border-radius:7px;font-weight:600}
.btn:hover{background:var(--accent-deep)}
.btn.ghost{background:transparent;color:var(--accent-deep);
  box-shadow:inset 0 0 0 2px var(--accent)}
.btn.ghost:hover{background:var(--accent-soft)}

.band{background:var(--surface);border-bottom:1px solid var(--rule);
  padding:40px 0}
.three{display:grid;gap:28px;grid-template-columns:repeat(auto-fit,minmax(250px,1fr))}
.three p{color:var(--ink-soft);font-size:.96rem;margin:0}

.grid{display:grid;gap:22px;
  grid-template-columns:repeat(auto-fill,minmax(266px,1fr));margin:1.2em 0 2.4em}
.card{display:flex;flex-direction:column;text-decoration:none;color:inherit;
  border:1px solid var(--rule);border-radius:10px;overflow:hidden;
  background:var(--surface);transition:box-shadow .15s,transform .15s}
.card:hover{box-shadow:0 6px 22px rgba(26,34,48,.11);transform:translateY(-2px)}
.card img{aspect-ratio:4/3;object-fit:cover;background:var(--alt);
  border-bottom:1px solid var(--rule)}
.card-body{padding:16px 18px 18px}
.card h3{margin:0 0 .3em;font-size:1.02rem}
.card p{margin:0 0 .3em;font-size:.92rem;color:var(--ink-soft)}
.price{font-weight:700;color:var(--ink)}
.price.big{font-size:1.6rem;margin-top:.2em}
.was{font-weight:400;color:var(--ink-muted);font-size:.86rem}
.cat{margin-top:2em;padding-top:1em;border-top:1px solid var(--rule)}

.capture{background:var(--ink);color:#fff;padding:54px 0;margin-top:40px}
.capture h2{margin-top:0;color:#fff}
.capture p{color:var(--rule)}
.capture .muted{color:#8f98a6}
.capture form{display:flex;gap:10px;flex-wrap:wrap;margin:1.1em 0 .8em}
.capture input{flex:1 1 260px;padding:13px 15px;border-radius:7px;
  border:1px solid #3d4756;background:#fff;color:var(--ink);font-size:1rem}
.capture button{padding:13px 24px;border:0;border-radius:7px;
  background:var(--accent-light);color:#10202a;font-weight:700;font-size:1rem;
  cursor:pointer}
.capture button:hover{background:#6fbcc1}

.product .crumb{margin:1.6em 0 .6em;font-size:.9rem}
.shots{display:grid;gap:16px;margin:2em 0;
  grid-template-columns:repeat(auto-fill,minmax(320px,1fr))}
.shots img{border:1px solid var(--rule);border-radius:8px}
.prose{max-width:var(--measure)}
.prose h3{margin-top:1.7em}
.prose ul{padding-left:1.15em}
.prose li{margin-bottom:.4em}

.article h2{font-size:1.45rem;margin-top:1.9em}
.article h3{margin-top:1.6em}
.article blockquote{margin:1.4em 0;padding:.7em 1.1em;
  border-left:3px solid var(--accent);background:var(--alt);font-style:italic}
.article .rule{border:0;border-top:1px solid var(--rule);margin:2.4em 0}
.article em{color:var(--ink-soft)}
.tablewrap{overflow-x:auto;margin:1.4em 0}
.article table{border-collapse:collapse;width:100%;font-size:.95rem}
.article th,.article td{text-align:left;padding:9px 14px;
  border-bottom:1px solid var(--rule)}
.article th{background:var(--alt);font-weight:700}
.arts{list-style:none;padding:0;margin:1.5em 0}
.arts li{padding:16px 0;border-bottom:1px solid var(--rule)}
.arts a{display:block;font-weight:700;font-size:1.06rem;text-decoration:none}
.arts a:hover{text-decoration:underline}
.arts span{display:block;color:var(--ink-soft);font-size:.94rem;margin-top:3px}
.foot{border-top:1px solid var(--rule);margin-top:52px;padding:30px 0 50px;
  color:var(--ink-soft)}
.foot a{color:var(--ink-soft)}

@media (prefers-color-scheme: dark){
  :root{--surface:#12171f;--alt:#171d27;--deep:#1e2530;--rule:#2b3442;
        --ink:#eef1f5;--ink-soft:#b3bccb;--ink-muted:#8892a3}
  body{background:var(--surface);color:var(--ink)}
  a,.btn.ghost{color:var(--accent-light)}
  .btn.ghost{box-shadow:inset 0 0 0 2px var(--accent-light)}
  .btn.ghost:hover{background:rgba(79,168,174,.14)}
  .card{background:var(--alt)}
  .capture{background:#0c1118}
  .capture input{background:#1b2230;border-color:#2b3442;color:var(--ink)}
}