/* Self-hosted, subset, no third-party requests. The em dash is absent from every
   character set here by design: it cannot render even if someone types one.
   Wimzy Display is currently a Bodoni Moda instance (opsz 14, wght 600) standing in
   for the proprietary face. Swapping it is one file: replace WimzyDisplay-Interim.woff2
   and change the src below. Nothing else in this stylesheet changes. */
@font-face{font-family:"Wimzy Display";src:url("font/WimzyDisplay-Interim.woff2") format("woff2");font-weight:400 700;font-style:normal;font-display:swap}
@font-face{font-family:"Wimzy Text";src:url("font/WimzyText-Regular.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Wimzy Text";src:url("font/WimzyText-Medium.woff2") format("woff2");font-weight:500 700;font-style:normal;font-display:swap}
@font-face{font-family:"Wimzy Label";src:url("font/WimzyLabel-Regular.woff2") format("woff2");font-weight:400 500;font-style:normal;font-display:swap}


/* Image-led dark retail. Prints carry the page because prints are what we can show. */
:root{
  --void:#16111C; --void-2:#1E1726; --void-3:#282032;
  --milk:#F5F0E6; --dim:#A79FB2; --dimmer:#6E6678;
  --teal:#2E8C86; --teal-lo:#1F3B3C;
  --line:#30273B;
  --d:"Wimzy Display",Georgia,serif; --b:"Wimzy Text","Helvetica Neue",Arial,sans-serif; --m:"Wimzy Label",ui-monospace,monospace;
  color-scheme:dark;
}
*{box-sizing:border-box}
body{background:var(--void);color:var(--milk);font-family:var(--b);margin:0;line-height:1.55;font-size:16px;-webkit-font-smoothing:antialiased}
.w{max-width:1160px;margin:0 auto;padding-left:max(18px,env(safe-area-inset-left,0px));padding-right:max(18px,env(safe-area-inset-right,0px))}
h1,h2,h3{font-family:var(--d);font-weight:400;margin:0;line-height:1.04;letter-spacing:-.012em;text-wrap:balance}
h1{font-size:clamp(2.2rem,5vw,3.75rem)}
h2{font-size:clamp(1.7rem,3.8vw,2.7rem)}
h3{font-size:1.02rem;letter-spacing:-.01em;line-height:1.25}
p{margin:0}
a{color:inherit}
img{display:block;width:100%;height:auto}
.m{font-family:var(--m);font-size:.67rem;letter-spacing:.17em;text-transform:uppercase;color:var(--dim)}
.price{font-family:var(--m);color:var(--milk);font-size:.92rem;font-weight:500}
.tag{font-family:var(--m);font-size:.58rem;letter-spacing:.11em;text-transform:uppercase;color:var(--dimmer);border:1px solid var(--line);border-radius:3px;padding:2px 6px;display:inline-block}

body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);z-index:30;background:var(--void)}
.ann{background:var(--void-2);color:var(--dim);border-bottom:1px solid var(--teal-lo);font-family:var(--m);font-size:.66rem;letter-spacing:.13em;text-transform:uppercase;text-align:center;padding-block:9px}
header{position:sticky;top:env(safe-area-inset-top,0px);z-index:29;background:rgba(22,17,28,.93);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.bar{display:flex;align-items:center;gap:22px;padding-block:15px;flex-wrap:wrap}
.mark{display:inline-flex;align-items:center;text-decoration:none}
.mark img{display:block;width:208px;height:auto}
@media(max-width:560px){.mark img{width:164px}}
nav{display:flex;gap:20px;flex-wrap:wrap;margin-left:auto}
nav a{font-size:.83rem;font-weight:500;text-decoration:none;color:var(--dim);padding-block:3px;border-bottom:1px solid transparent}
nav a:hover,nav a:focus-visible{color:var(--milk);border-bottom-color:var(--teal)}
.cartb{font-family:var(--m);font-size:.69rem;letter-spacing:.08em;border:1px solid var(--line);border-radius:6px;padding:7px 11px;text-decoration:none}
section{display:none}
section.on{display:block}

/* hero */
.hero{position:relative}
.hero img{max-height:min(70vh,580px);object-fit:cover;object-position:50% 44%}
.hero .veil{position:absolute;inset:0;background:linear-gradient(90deg,rgba(22,17,28,.97) 0%,rgba(22,17,28,.88) 34%,rgba(22,17,28,.3) 72%,rgba(22,17,28,.08) 100%)}
@media(max-width:760px){.hero .veil{background:linear-gradient(180deg,rgba(22,17,28,.55) 0%,rgba(22,17,28,.9) 58%)}}
.hero .in{position:absolute;inset:0;display:flex;align-items:center}
.hero .box{max-width:35rem}
.hero h1{margin-block:14px 0}
.lede{margin-top:18px;font-size:1.05rem;color:var(--dim)}
.lede b{color:var(--milk);font-weight:500}
.cta{display:flex;gap:11px;flex-wrap:wrap;margin-top:26px}
.btn{font-family:var(--b);font-weight:700;font-size:.87rem;border-radius:6px;padding:13px 22px;text-decoration:none;border:1px solid var(--teal);color:var(--void);background:var(--teal);transition:transform .1s ease}
.btn:active{transform:scale(.985)}
.btn.g{background:transparent;color:var(--milk);border-color:var(--line)}
.btn.g:hover{border-color:var(--milk)}

.creed{border-block:1px solid var(--line);background:var(--void-2)}
.creed .w{display:grid;grid-template-columns:repeat(4,1fr)}
/* divider is a border-LEFT so each cell owns the rule it sits after, and the
   padding is symmetric, so text never touches a rule. First cell aligns to
   the page gutter. Centring makes a one-line and a two-line cell read alike. */
.creed div{display:flex;align-items:center;min-height:74px;padding:20px 26px;border-left:1px solid var(--line)}
.creed div:first-child{padding-left:0;border-left:0}
.creed p{font-family:var(--d);font-size:.95rem;font-weight:500;line-height:1.35;text-wrap:balance}
@media(max-width:900px){
  .creed .w{grid-template-columns:repeat(2,1fr)}
  .creed div{padding:18px 24px;min-height:66px}
  .creed div:nth-child(odd){padding-left:0;border-left:0}
  .creed div:nth-child(n+3){border-top:1px solid var(--line)}
}

.band{padding-block:clamp(44px,6vw,78px)}
.bhead{display:flex;justify-content:space-between;align-items:flex-end;gap:20px;flex-wrap:wrap;margin-bottom:28px}
.more{font-family:var(--m);font-size:.69rem;letter-spacing:.12em;text-transform:uppercase;text-decoration:none;color:var(--milk);border-bottom:1px solid var(--teal);padding-bottom:3px;white-space:nowrap}

/* prints */
.prints{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
@media(max-width:900px){.prints{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.prints{grid-template-columns:1fr}}
.pc{text-decoration:none;display:block}
.pc .f{overflow:hidden;border:1px solid var(--line);border-radius:3px;background:var(--void-2);aspect-ratio:4/5;display:grid;place-items:center}
.pc img{width:100%;height:100%;object-fit:contain;transition:transform .5s cubic-bezier(.2,.7,.3,1)}
.pc:hover img,.pc:focus-visible img{transform:scale(1.035)}
.pc .r{display:flex;justify-content:space-between;align-items:baseline;gap:10px;margin-top:12px}
.pc .sub{font-size:.83rem;color:var(--dim);margin-top:4px}

/* objects */
.objs{display:grid;grid-template-columns:repeat(auto-fill,minmax(216px,1fr));gap:24px 18px}
.oc{text-decoration:none;display:block}
.oc .f{aspect-ratio:1;border:1px solid var(--line);border-radius:3px;background:
  radial-gradient(70% 58% at 50% 42%,rgba(46,140,134,.13),transparent 72%),var(--void-2);
  display:grid;place-items:center;text-align:center;padding:18px;transition:border-color .18s ease}
.oc:hover .f,.oc:focus-visible .f{border-color:var(--teal)}
.oc .f{position:relative;overflow:hidden}
.oc .f span{font-family:var(--d);font-size:1.05rem;color:var(--dim);line-height:1.2}
.oc .f.ph{padding:0;background:var(--void-2)}
.oc .f.ph img{width:100%;height:100%;object-fit:cover;transition:transform .5s cubic-bezier(.2,.7,.3,1)}
.oc:hover .f.ph img,.oc:focus-visible .f.ph img{transform:scale(1.035)}
.pend{position:absolute;left:11px;bottom:11px;font-style:normal;font-family:var(--m);font-size:.53rem;letter-spacing:.12em;text-transform:uppercase;color:var(--dimmer);border:1px solid var(--line);border-radius:3px;padding:3px 7px;background:rgba(22,17,28,.75)}
.oc .r{display:flex;justify-content:space-between;align-items:baseline;gap:10px;margin-top:12px}
.oc .sub{font-size:.83rem;color:var(--dim);margin-top:4px}
.oc .mt{margin-top:8px}
.shot{margin-top:22px;border-left:2px solid var(--teal);padding:4px 0 4px 15px;font-size:.88rem;color:var(--dim);max-width:62ch}

/* rooms */
.rooms{display:grid;grid-template-columns:repeat(auto-fit,minmax(186px,1fr));border:1px solid var(--line);border-radius:4px;overflow:hidden}
.room{border-right:1px solid var(--line);border-bottom:1px solid var(--line)}
@media(max-width:760px){.rooms{grid-template-columns:repeat(2,1fr)}}
.room{background:var(--void);padding:20px 18px 22px;text-decoration:none;display:block;transition:background .18s ease}
.room:hover,.room:focus-visible{background:var(--void-2)}
.room .n{display:flex;justify-content:space-between;align-items:baseline;gap:10px}
.room h3{font-size:1.14rem}
.room .ct{font-family:var(--m);font-size:.69rem;color:var(--dimmer)}
.room p{font-size:.84rem;color:var(--dim);margin-top:6px}

.cutx{background:var(--void-2);border:1px solid var(--line);border-radius:4px;padding:clamp(26px,4vw,46px);display:grid;grid-template-columns:1fr auto;gap:30px;align-items:center}
@media(max-width:760px){.cutx{grid-template-columns:1fr}}
.cutx p{margin-top:14px;color:var(--dim);max-width:54ch}
.mail{border:1px solid var(--line);border-radius:4px;padding:clamp(24px,4vw,40px);display:grid;grid-template-columns:1fr 1fr;gap:28px;align-items:center}
@media(max-width:760px){.mail{grid-template-columns:1fr}}
.field{display:flex;gap:9px;flex-wrap:wrap}
.field input{flex:1;min-width:0;background:var(--void);border:1px solid var(--line);border-radius:6px;color:var(--milk);font-family:var(--b);font-size:.9rem;padding:12px 14px}
.field input:focus-visible{outline:2px solid var(--teal);outline-offset:1px}

/* pdp */
.pdp{display:grid;grid-template-columns:1.1fr .9fr;gap:46px;align-items:start;padding-block:32px}
@media(max-width:860px){.pdp{grid-template-columns:1fr;gap:26px}}
.gal .main{border:1px solid var(--line);border-radius:3px;overflow:hidden}
.thumbs{display:grid;grid-template-columns:repeat(4,1fr);gap:7px;margin-top:7px}
.thumbs div{aspect-ratio:1;border:1px solid var(--line);border-radius:3px;background:var(--void-2);display:grid;place-items:center;font-family:var(--m);font-size:.54rem;color:var(--dimmer);text-align:center;padding:5px;line-height:1.3}
.hook{font-family:var(--d);font-size:clamp(1.12rem,2.1vw,1.38rem);font-weight:500;margin-top:15px;line-height:1.3}
.buy{display:block;width:100%;text-align:center;margin-top:22px}
.under{font-family:var(--m);font-size:.66rem;letter-spacing:.09em;text-transform:uppercase;color:var(--dimmer);text-align:center;margin-top:10px}
.body p{color:var(--dim);font-size:.94rem;margin-top:13px}
.spec{width:100%;border-collapse:collapse;margin-top:26px;font-family:var(--m);font-size:.75rem}
.spec th,.spec td{text-align:left;padding:9px 0;border-bottom:1px solid var(--line);vertical-align:top}
.spec th{color:var(--dimmer);font-weight:400;width:42%;letter-spacing:.06em;text-transform:uppercase}
.ship{margin-top:22px;border-left:2px solid var(--teal);padding:4px 0 4px 15px;font-size:.89rem;color:var(--dim)}
.ship b{color:var(--milk);font-weight:500;display:block;margin-bottom:4px}
.was{font-family:var(--m);font-size:.72rem;color:var(--dimmer);margin-top:5px;letter-spacing:.04em}
.pdret{font-size:.82rem;color:var(--dimmer);margin-top:16px;max-width:54ch;line-height:1.5}
.gal .main img{width:100%;height:auto;display:block}


.cws{display:flex;align-items:center;gap:9px;flex-wrap:wrap;margin-top:18px}
.cws .lab{font-family:var(--m);font-size:.62rem;letter-spacing:.13em;text-transform:uppercase;color:var(--dimmer)}
.cw{width:22px;height:22px;border-radius:50%;border:1px solid var(--line);display:inline-block}
.cw-black{background:#15131A}
.cw-heather-grey{background:#B4B1AC}
.cw-oxblood{background:#5A1A22}
.cw-bark{background:#4A382C}

/* cart */
.lines{margin-top:24px;border-top:1px solid var(--line)}
.ln{display:flex;gap:16px;padding-block:18px;border-bottom:1px solid var(--line);align-items:center}
.ln .t{width:72px;height:72px;flex:none;border:1px solid var(--line);border-radius:3px;overflow:hidden;background:var(--void-2)}
.ln .t img{height:100%;object-fit:cover}
.ln .g{flex:1;min-width:0}
.split{margin-top:22px;border-left:2px solid var(--teal);padding:4px 0 4px 15px;font-size:.89rem;color:var(--dim)}
.split b{color:var(--milk);font-weight:500;display:block;margin-bottom:4px}
.track{height:3px;background:var(--void-3);overflow:hidden;margin-top:10px}
.fill{height:100%;width:84%;background:var(--teal)}
.tot{margin-top:26px;font-family:var(--m);font-size:.81rem}
.tot div{display:flex;justify-content:space-between;padding-block:9px;border-bottom:1px solid var(--line)}
.tot div:last-child{border-bottom:0;color:var(--milk);font-size:1.12rem;padding-top:14px}

.cutl{margin-top:30px;border-top:1px solid var(--line)}
.cr{display:grid;grid-template-columns:.85fr 1.45fr;gap:22px;padding-block:20px;border-bottom:1px solid var(--line)}
@media(max-width:640px){.cr{grid-template-columns:1fr;gap:6px}}
.cr h3{font-size:1.05rem}
.cr p{font-size:.89rem;color:var(--dim)}

.tiers{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:30px}
@media(max-width:760px){.tiers{grid-template-columns:1fr}}
.tier{border:1px solid var(--line);border-radius:4px;padding:24px 22px;background:var(--void-2)}
.tier .n{font-family:var(--m);font-size:.62rem;letter-spacing:.13em;text-transform:uppercase;color:var(--teal)}
.tier h3{font-size:1.5rem;margin-top:10px}
.tier p{font-size:.89rem;color:var(--dim);margin-top:10px}
.plain{margin-top:26px;border-left:2px solid var(--teal);padding:4px 0 4px 15px;font-size:.89rem;color:var(--dim);max-width:62ch}
.plain b{color:var(--milk);font-weight:500;display:block;margin-bottom:4px}
footer{border-top:1px solid var(--line);margin-top:70px;padding-block:34px 46px;font-size:.83rem;color:var(--dim)}
.fl{display:flex;gap:24px;flex-wrap:wrap;margin-bottom:18px}
footer a{text-decoration:none}
footer a:hover{color:var(--milk)}
/* ---- narrow viewports -------------------------------------------------
   Two structural faults lived here. The hero laid its copy out with
   position:absolute, so on a phone the copy could not push the container
   open and spilled onto the band below. And the header was a wrapping flex
   row, so nav and the bag fell to extra lines inside a sticky element and
   covered the hero. Both are fixed by changing the mechanism, not the sizes. */
@media(max-width:760px){
  .bar{display:grid;grid-template-columns:auto auto;grid-template-areas:"mark bag" "nav nav";row-gap:13px;column-gap:14px;align-items:center;justify-content:space-between;flex-wrap:nowrap;padding-block:13px}
  .mark{grid-area:mark}
  .cartb{grid-area:bag;justify-self:end;white-space:nowrap}
  nav{grid-area:nav;margin-left:0;gap:18px;flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch}
  nav::-webkit-scrollbar{display:none}
  nav a{white-space:nowrap}

  .hero{min-height:600px}
  .hero img{position:absolute;inset:0;width:100%;height:100%;max-height:none;object-fit:cover;object-position:50% 38%}
  .hero .veil{z-index:1}
  .hero .in{position:relative;inset:auto;z-index:2;min-height:600px;align-items:flex-end;padding-block:44px}
  .hero .box{max-width:none}
  .cta{margin-top:22px}
  .btn{flex:1 1 auto;text-align:center}

  .creed div{padding:15px 18px;min-height:0}
  .creed p{font-size:.88rem}
  .cutx{gap:22px}
  .ann{font-size:.6rem;letter-spacing:.09em;padding-inline:14px;line-height:1.5}
}
@media(max-width:400px){
  nav{gap:15px}
  nav a{font-size:.79rem}
}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}


/* ---- added for the live store: variant pickers, cart controls ---- */
.opt{display:flex;align-items:center;gap:9px;flex-wrap:wrap;margin-top:18px}
.opt .lab{font-family:var(--m);font-size:.62rem;letter-spacing:.13em;text-transform:uppercase;color:var(--dimmer);flex:none;min-width:58px}
.szb{font-family:var(--m);font-size:.72rem;letter-spacing:.06em;background:none;color:var(--dim);
  border:1px solid var(--line);border-radius:4px;padding:7px 12px;cursor:pointer}
.szb:hover:not(:disabled){color:var(--milk);border-color:var(--dim)}
.szb[aria-pressed="true"]{color:var(--void);background:var(--milk);border-color:var(--milk)}
.szb:disabled{opacity:.3;cursor:not-allowed;text-decoration:line-through}
.cw{cursor:pointer;padding:0;position:relative}
.cw[aria-pressed="true"]{box-shadow:0 0 0 2px var(--void),0 0 0 3px var(--milk)}
.optnote{font-family:var(--m);font-size:.62rem;letter-spacing:.08em;text-transform:uppercase;color:var(--dimmer);margin-top:8px}
.err{color:#E8A0A0;font-size:.86rem;margin-top:12px;min-height:1px}
.soldout{font-family:var(--m);font-size:.7rem;letter-spacing:.09em;text-transform:uppercase;
  color:var(--dimmer);border:1px dashed var(--line);border-radius:6px;padding:14px;text-align:center;margin-top:22px}
.qty{display:flex;align-items:center;gap:2px;margin-top:7px}
.qty button{font-family:var(--m);background:none;border:1px solid var(--line);color:var(--dim);
  width:26px;height:26px;line-height:1;cursor:pointer;border-radius:3px;font-size:.9rem}
.qty button:hover{color:var(--milk);border-color:var(--dim)}
.qty span{font-family:var(--m);font-size:.8rem;min-width:28px;text-align:center;color:var(--milk)}
.rm{font-family:var(--m);font-size:.6rem;letter-spacing:.1em;text-transform:uppercase;color:var(--dimmer);
  background:none;border:0;padding:0;margin-top:9px;cursor:pointer;text-align:left}
.rm:hover{color:#E8A0A0}
.ln .t img{width:100%;height:100%;object-fit:cover}
.empty{padding:42px 0;color:var(--dim)}
.btn:disabled{opacity:.5;cursor:wait}
.legal{max-width:68ch}
.legal h3{font-family:var(--d);font-size:1.15rem;margin-top:30px;color:var(--milk)}
.legal p,.legal li{color:var(--dim);font-size:.94rem;line-height:1.72;margin-top:12px}
.legal ul{margin-top:10px;padding-left:20px}
.legal a{color:var(--teal)}
footer{border-top:1px solid var(--line);margin-top:70px;padding:34px 0 60px}
footer .fl{display:flex;gap:20px;flex-wrap:wrap;font-family:var(--m);font-size:.66rem;
  letter-spacing:.09em;text-transform:uppercase}
footer a{color:var(--dimmer);text-decoration:none}
footer a:hover{color:var(--milk)}

/* A gated product keeps its card and its page so it can be crawled out of
   season. Saying so on the card is the other half of that. */
.mt.drop{font-family:var(--m);font-size:.6rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--dimmer);border:1px dashed var(--line);border-radius:4px;
  padding:4px 8px;display:inline-block;margin-top:9px}

/* ---- silo chips above a grid -------------------------------------------
   Static in the HTML so a crawler reads the silo names and their counts;
   app.js only adds the behaviour. */
/* The grids set display on the card, which beats the user-agent rule for
   [hidden]. Without this the filter marks cards hidden and nothing moves. */
a.oc[hidden],a.pc[hidden]{display:none !important}
.silos{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 14px}
.silo{font-family:var(--m);font-size:.68rem;letter-spacing:.09em;text-transform:uppercase;
  background:none;color:var(--dim);border:1px solid var(--line);border-radius:999px;
  padding:8px 14px;cursor:pointer;display:inline-flex;align-items:center;gap:7px;line-height:1}
.silo:hover{color:var(--milk);border-color:var(--dim)}
.silo .n{font-size:.6rem;color:var(--dimmer)}
.silo.on{color:var(--void);background:var(--milk);border-color:var(--milk)}
.silo.on .n{color:var(--void);opacity:.55}
.silonote{max-width:62ch;margin:0 0 24px;color:var(--dim);font-size:.92rem;line-height:1.65}
.silonote:empty{margin:0}
@media (max-width:640px){
  .silos{gap:6px;overflow-x:auto;flex-wrap:nowrap;padding-bottom:4px;
    scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .silos::-webkit-scrollbar{display:none}
  .silo{flex:0 0 auto;padding:7px 12px}
}

/* ---- generated pages (/p/<slug>, /c/<silo>) ---------------------------- */
.crumb{font-family:var(--m);font-size:.64rem;letter-spacing:.1em;text-transform:uppercase;
  display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin:0 0 26px;color:var(--dimmer)}
.crumb a{color:var(--dim);text-decoration:none}
.crumb a:hover{color:var(--milk)}
.crumb a::after{content:"\00a0\00b7";margin-left:8px;color:var(--dimmer)}
.crumb span{color:var(--milk)}
main h1{font-family:var(--d);font-size:clamp(1.9rem,3.6vw,2.7rem);line-height:1.05;
  margin:10px 0 0;color:var(--milk)}
main .pdprice{font-size:1.4rem;display:block;margin-top:10px}
main .bhead h1{margin-top:12px}

/* Every silo, linked from every page as a real path. A crawler that lands on
   one product otherwise has nowhere to go, and the silo pages are reachable
   from nothing it will follow. */
.silonav{display:flex;flex-wrap:wrap;gap:10px 18px;align-items:baseline;
  border-top:1px solid var(--line);margin-top:60px;padding-top:26px}
.silonav .m{flex:0 0 100%;margin-bottom:4px}
.silonav a{font-family:var(--m);font-size:.66rem;letter-spacing:.09em;text-transform:uppercase;
  color:var(--dimmer);text-decoration:none}
.silonav a:hover{color:var(--milk)}
.silonav a.here{color:var(--milk)}

.bhead-more{margin-top:46px}
.silomore{margin-top:36px}

/* ---- Start here ---------------------------------------------------------
   Four ways in, written as the decision somebody is actually making rather
   than as a category name. The first one is the fit-risk answer, because a
   no-returns policy makes that the question. */
.starts{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.start{display:block;text-decoration:none;border:1px solid var(--line);border-radius:10px;
  padding:22px 20px 24px;background:rgba(255,255,255,.012);transition:border-color .15s}
.start:hover{border-color:var(--dim)}
.start h3{font-family:var(--d);font-size:1.12rem;line-height:1.2;margin:0 0 10px;color:var(--milk)}
.start p{margin:0;color:var(--dim);font-size:.88rem;line-height:1.6}
@media (max-width:900px){.starts{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){.starts{grid-template-columns:1fr}}

/* ---- Journal ------------------------------------------------------------
   Long-form reading on a dark page. The measure is capped at about 68
   characters because anything wider is hard to track on a dark background,
   and the body size steps up from the shop's UI text. */
.jart article{max-width:68ch}
.jhead{margin:0 0 18px}
.jhead h1{margin:6px 0 8px}
.jmeta{font-family:var(--m);font-size:.7rem;letter-spacing:.06em;text-transform:uppercase;
  color:var(--dimmer);margin:0}
.jart .lede{font-size:1.1rem;line-height:1.65;color:var(--milk);margin:0 0 24px}
.jart article p{line-height:1.74;margin:0 0 16px;color:var(--dim)}
.jart article h2{font-family:var(--d);font-size:1.16rem;line-height:1.25;
  margin:34px 0 10px;color:var(--milk)}
.jart article a{color:var(--milk);text-decoration:underline;text-underline-offset:2px}
.faq{margin:6px 0 0;max-width:68ch}
.faq dt{color:var(--milk);font-weight:600;margin:18px 0 4px}
.faq dd{margin:0;line-height:1.74;color:var(--dim)}
.jrail{margin:44px 0 0}
.jrail h2,.jrel h2{font-family:var(--d);font-size:1.05rem;margin:0 0 12px;color:var(--milk)}
.jrel{margin:40px 0 0;max-width:68ch}
.jrel ul{list-style:none;padding:0;margin:0}
.jrel li{border-top:1px solid var(--line)}
.jrel li a{display:block;padding:12px 0 4px;text-decoration:none;color:var(--milk)}
.jrel li .sub{display:block;margin:2px 0 12px;color:var(--dim);font-size:.86rem}
.jsec{margin:0 0 40px}
.jsec h2{font-family:var(--d);font-size:1.1rem;margin:0 0 4px}
.jsec h2 a{color:var(--milk);text-decoration:none}
.jsec h2 a:hover{text-decoration:underline}
.jlist{list-style:none;padding:0;margin:12px 0 0}
.jlist li{border-top:1px solid var(--line)}
.jlist li a{display:block;padding:14px 0;text-decoration:none}
.jlist h3{font-family:var(--d);font-size:1rem;margin:0 0 4px;color:var(--milk)}
.jlist .sub{margin:0;color:var(--dim);font-size:.88rem;line-height:1.55}
.jlist .m{display:block;margin:6px 0 0}
.ptype{font-family:var(--m);font-size:.72rem;letter-spacing:.07em;text-transform:uppercase;
  color:var(--dimmer);margin:2px 0 14px}
.pjrel{margin:52px 0 0;max-width:68ch}
.jnote{max-width:68ch;margin:-6px 0 0;opacity:.72}

/* The shop is a hash router: section{display:none} and JS adds .on to the one
   section in view. Static pages outside the app have no JS to do that, so any
   <section> they emit would be invisible. This is how the journal index lost
   all 14 of its topic blocks while every test still passed, because the tests
   read the HTML and not the rendering. */
section.jsec{display:block;margin:40px 0 0}