:root{
  --ink:#1E1B16; --ink-soft:#4A4338; --ink-faint:#6D6455;
  --paper:#F4F0E8; --card:#FFFFFF; --quiet:#EAE2D4;
  --line:#DBD2C1; --line-soft:#EBE4D8;
  --pine:#20372E; --pine-soft:#2C4A3E;
  --clay:#9C4519; --clay-soft:#C66A3C;
  --on-dark:#F4F0E8; --on-dark-soft:#C4CFC6;
  --good:#2F6B3F;
  --hue-s1: #20372E;
  --hue-s2: #3A4E63;
  --hue-s3: #6B4A2A;
  --hue-s4: #5A5A52;
  --hue-s5: #4A6034;
  --hue-s6: #7A4444;
  --wrap: 1220px;
  --read: 72ch;
  --radius: 14px;
  --shadow: 0 1px 2px rgba(31,28,22,.05), 0 8px 24px rgba(31,28,22,.06);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:'Hanken Grotesk', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; font-size:17px; line-height:1.62;
  font-weight:400; -webkit-font-smoothing:antialiased;
}
/* height:auto globally, because the width and height ATTRIBUTES beat
   aspect-ratio: without this a card frame written as 1600x1200 renders 1600px
   tall inside a 4:3 box. Captions that carry an inline height in em are
   unaffected, an inline style wins over a rule. */
img,video{max-width:100%; height:auto}
a{color:var(--clay); text-decoration:none}
a:hover{text-decoration:underline}
h1,h2,h3,h4{font-family:'Faustina', Georgia, 'Times New Roman', serif; font-weight:700; line-height:1.14; margin:0 0 .5em; letter-spacing:-.005em}
h1{font-size:clamp(30px,4vw,46px)}
h2{font-size:clamp(24px,2.7vw,34px)}
h3{font-size:21px; font-weight:600}
h4{font-size:18px; font-weight:600}
h1 a,h2 a,h3 a,h4 a{color:inherit; text-decoration:none}
h1 a:hover,h2 a:hover,h3 a:hover,h4 a:hover{color:var(--clay); text-decoration:none}
p{margin:0 0 1em}
p:last-child{margin-bottom:0}
ul,ol{margin:0 0 1em; padding-left:1.25em}
small,.small{font-size:14px; color:var(--ink-faint)}
hr{border:0; border-top:1px solid var(--line); margin:34px 0}
:focus-visible{outline:3px solid var(--clay); outline-offset:2px}

/* Shopware calls its page-width wrapper "container". Side padding lives here
   and nowhere else: a block that sets its own padding shorthand on this element
   zeroes the gutter, which is the defect check-gutter.js watches for. */
.container{width:100%; max-width:var(--wrap); margin-inline:auto; padding-inline:30px}
.container-narrow{max-width:900px}
@media (max-width:860px){ .container{padding-inline:24px} }
@media (max-width:520px){ .container{padding-inline:18px} }

/* ------------------------------------------------------------ header ----- */
.header-main{background:var(--card); border-bottom:1px solid var(--line)}
.top-bar{background:var(--pine); color:var(--on-dark-soft); font-size:13.5px}
.top-bar .container{display:flex; gap:18px; align-items:center; justify-content:space-between; padding-block:8px}
.top-bar a{color:var(--on-dark)}
.top-bar-note{margin:0}
.header-row{display:flex; align-items:center; gap:22px; padding-block:14px}
.header-logo-col{flex:0 0 auto}
.header-logo-main{display:flex; align-items:center; gap:11px; color:var(--ink)}
.header-logo-main:hover{text-decoration:none}
.header-logo-main img{display:block; width:34px; height:34px}
.mark-word{font-family:'Faustina', Georgia, 'Times New Roman', serif; font-size:25px; font-weight:700; letter-spacing:.01em}
.mark-sub{display:block; font-family:'Hanken Grotesk', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; font-size:11px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--ink-faint); font-weight:600; margin-top:-3px}
.nav-main{margin-left:auto}
.main-navigation-menu{display:flex; gap:22px; list-style:none; margin:0; padding:0}
.main-navigation-link{color:var(--ink); font-weight:500; font-size:15.5px; white-space:nowrap}
.main-navigation-link:hover{color:var(--clay); text-decoration:none}
.header-actions{display:flex; align-items:center; gap:10px; flex:0 0 auto}
/* The toggle is also a .btn, and .btn sets display:inline-flex later in this
   file at the same specificity. So it is hidden and shown through the masthead,
   which outranks it. */
.masthead .nav-toggle{display:none}

@media (max-width:1040px){
  .nav-main{display:none; width:100%}
  .header-row{flex-wrap:wrap; gap:12px}
  .masthead .nav-toggle{display:inline-flex}
  .nav-main.open{display:block; order:9; border-top:1px solid var(--line); padding-top:12px}
  .nav-main.open .main-navigation-menu{flex-direction:column; gap:2px}
  .nav-main.open .main-navigation-link{display:block; padding:9px 2px; font-size:17px}
}
@media (max-width:480px){
  .mark-sub{display:none}
  .mark-word{font-size:21px}
}

/* ------------------------------------------------------------ buttons ---- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  font-family:'Hanken Grotesk', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; font-size:15.5px; font-weight:600; line-height:1.15;
  padding:13px 24px; border-radius:999px; border:1px solid transparent;
  cursor:pointer; text-align:center; max-width:100%; flex:0 0 auto;
  transition:background .15s ease, color .15s ease, border-color .15s ease;
}
.btn:hover{text-decoration:none}
.btn img{width:auto; max-width:100%; max-height:1em; display:block}
.btn-buy{background:var(--clay); color:#fff}
.btn-buy:hover{background:#86380F}
.btn-ghost{background:transparent; color:var(--ink); border-color:var(--line)}
.btn-ghost:hover{border-color:var(--ink); background:rgba(31,28,22,.04)}
.btn-light{background:var(--card); color:var(--ink)}
.btn-light:hover{background:#fff}
.btn-sm{font-size:13.5px; padding:9px 16px}
.btn-block{width:100%}
.btn-buy .cta-short{display:none}
@media (max-width:620px){
  .btn-buy .cta-long{display:none}
  .btn-buy .cta-short{display:inline}
  .btn img{height:auto!important; max-height:1em}
}
/* The header and the buy rail keep their buttons inline at every width: a
   full-width rule here pushes the header button off the screen. */
.header-actions .btn, .buy-rail .btn, .btn-sm{width:auto}

/* ------------------------------------------------------------ sections --- */
.cms-sections{display:block}
.cms-section{padding-block:clamp(44px,5vw,72px)}
.cms-section-quiet{background:var(--quiet)}
.cms-section-dark{background:var(--pine); color:var(--on-dark)}
.cms-section-dark h1,.cms-section-dark h2,.cms-section-dark h3{color:var(--on-dark)}
.cms-section-dark p{color:var(--on-dark-soft)}
.cms-section-dark a{color:#fff}
.section-head{display:grid; gap:14px; margin-bottom:28px}
@media (min-width:1080px){
  .section-head-split{grid-template-columns:minmax(0,1.1fr) minmax(0,1fr); gap:38px; align-items:end}
}
.section-head h2{margin:0}
.section-head p{margin:0; color:var(--ink-soft); max-width:62ch}
.cms-section-dark .section-head p{color:var(--on-dark-soft)}
.kicker{font-size:12px; letter-spacing:.15em; text-transform:uppercase;
  font-weight:700; color:var(--ink-faint); margin:0 0 6px}
.cms-section-dark .kicker{color:var(--on-dark-soft)}
.sect-no{font-family:'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace; font-size:12px; color:var(--ink-faint); letter-spacing:.06em}

/* ------------------------------------------------------------- hero ------ */
.cms-block-image-text-cover{padding-block:0}
.hero{background:var(--card); border-bottom:1px solid var(--line)}
.hero-grid{display:grid; gap:30px; align-items:center; padding-block:clamp(34px,4.4vw,64px)}
@media (min-width:1000px){ .hero-grid{grid-template-columns:minmax(0,1fr) minmax(0,1.05fr); gap:52px} }
.hero h1{margin:0 0 16px}
.hero-lede{font-size:19px; color:var(--ink-soft); margin:0 0 22px; max-width:56ch}
.hero-cta{display:flex; flex-wrap:wrap; gap:12px; margin-bottom:22px}
.hero-facts{display:flex; flex-wrap:wrap; gap:10px 26px; margin:0; padding:0; list-style:none;
  border-top:1px solid var(--line); padding-top:16px}
.hero-facts li{font-size:14.5px; color:var(--ink-faint)}
.hero-facts b{display:block; font-family:'Faustina', Georgia, 'Times New Roman', serif; font-size:22px; color:var(--ink); font-weight:700}
.hero-media{position:relative; border-radius:var(--radius); overflow:hidden; background:var(--quiet); min-height:0}
.hero-media img,.hero-media video{display:block; width:100%; height:auto; aspect-ratio:16/10; object-fit:cover}

/* ------------------------------------------------------------- video ----- */
.film{position:relative; background:#12201B}
.film video{display:block; width:100%; height:auto; aspect-ratio:16/9; object-fit:cover; max-width:100%}
.film-over{position:absolute; inset:0; display:flex; align-items:center; pointer-events:none}
.film-over .container{width:100%}
.film-copy{max-width:34ch; color:#fff; text-shadow:0 1px 20px rgba(0,0,0,.45)}
.film-copy h2{color:#fff; margin:0 0 10px}
.film-copy p{color:rgba(255,255,255,.88); margin:0 0 16px}
.film-copy .btn{pointer-events:auto}
.film-controls{position:absolute; right:16px; bottom:16px; display:flex; gap:8px}
.film-controls button{
  font:600 13px 'Hanken Grotesk', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; color:#fff; background:rgba(0,0,0,.45);
  border:1px solid rgba(255,255,255,.35); border-radius:999px; padding:7px 14px; cursor:pointer}
@media (max-width:760px){
  .film-over{position:static; background:var(--pine); padding-block:26px}
  .film-copy{max-width:none; text-shadow:none}
}

/* ------------------------------------------------------------- cards ----- */
.product-listing{display:grid; gap:22px; grid-template-columns:repeat(4,minmax(0,1fr))}
.product-listing.cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.product-listing.cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}
@media (max-width:1020px){ .product-listing,.product-listing.cols-3{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:560px){ .product-listing,.product-listing.cols-3,.product-listing.cols-2{grid-template-columns:minmax(0,1fr)} }
.card.product-box{
  display:flex; flex-direction:column; background:var(--card);
  border:1px solid var(--line-soft); border-radius:var(--radius); overflow:hidden;
  box-shadow:var(--shadow); contain:layout style;
}
.product-image-wrapper{display:block; background:#fff; padding:14px}
.product-image-link{display:block}
.product-image{display:block; width:100%; aspect-ratio:4/3; object-fit:contain}
.product-image.is-photo{object-fit:cover; border-radius:8px}
.card-body{display:flex; flex-direction:column; gap:9px; padding:0 18px 18px; flex:1}
.product-name{margin:0; font-size:17.5px; line-height:1.24; font-weight:600}
.product-facts{display:flex; flex-wrap:wrap; gap:5px; list-style:none; margin:0; padding:0}
.product-facts li{font-size:12.5px; font-weight:600; color:var(--ink-faint);
  background:var(--quiet); border-radius:999px; padding:3px 10px}
.product-description{margin:0; font-size:14.5px; color:var(--ink-soft); flex:1 0 auto}
.product-price-info{display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin-top:auto}
.product-price{font-family:'Faustina', Georgia, 'Times New Roman', serif; font-size:22px; font-weight:700}
.price-from{font-size:13px; color:var(--ink-faint); font-weight:600}
.product-rating{font-size:13.5px; color:var(--ink-faint)}
.product-action{display:flex; flex-wrap:wrap; gap:8px; align-items:center}
.swatches{display:flex; gap:5px; list-style:none; margin:0; padding:0}
.swatches li{width:15px; height:15px; border-radius:50%; border:1px solid rgba(31,28,22,.25)}

/* Tiles: the shelf rail and the "what it hides" row. */
.tile-row{display:grid; gap:16px; grid-template-columns:repeat(3,minmax(0,1fr))}
.tile-row.cols-6{grid-template-columns:repeat(6,minmax(0,1fr))}
.tile-row.cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}
.tile-row.cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.tile-row.cols-1{grid-template-columns:minmax(0,1fr)}
.tile-row.cols-1 .tile{display:grid; grid-template-columns:34px 1fr auto; align-items:center; gap:16px}
.tile-row.cols-1 .tile h3{margin:0}
.tile-row.cols-1 .tile .tile-count{margin:0}
@media (max-width:560px){ .tile-row.cols-1 .tile{grid-template-columns:34px 1fr} .tile-row.cols-1 .tile .tile-count{grid-column:2} }
@media (max-width:980px){ .tile-row,.tile-row.cols-6,.tile-row.cols-4{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:520px){ .tile-row.cols-6{grid-template-columns:repeat(2,minmax(0,1fr))} }
.tile{display:flex; flex-direction:column; gap:6px; background:var(--card); color:var(--ink);
  border:1px solid var(--line-soft); border-radius:var(--radius); padding:18px; box-shadow:var(--shadow)}
.tile:hover{text-decoration:none; border-color:var(--line)}
.tile-chip{display:inline-flex; align-items:center; justify-content:center; width:34px; height:34px;
  border-radius:9px; background:var(--hue); color:#fff; font:700 12px 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing:.04em}
.tile h3{margin:6px 0 0; font-size:18px}
.tile p{margin:0; font-size:14px; color:var(--ink-soft)}
.tile-count{font-size:13px; color:var(--ink-faint); font-weight:600}

/* --------------------------------------------------------- size picker --- */
/* The row that answers "which size" before anything else on the page: the
   silhouettes get wider left to right, so the row is itself a footprint
   diagram. */
.size-row{display:grid; gap:14px; grid-template-columns:repeat(4,minmax(0,1fr)); align-items:end}
@media (max-width:900px){ .size-row{grid-template-columns:repeat(2,minmax(0,1fr))} }
.size-card{display:flex; flex-direction:column; justify-content:flex-end; gap:8px;
  background:var(--card); border:1px solid var(--line-soft); border-radius:var(--radius);
  padding:16px; text-align:left; color:var(--ink); box-shadow:var(--shadow)}
.size-card:hover{text-decoration:none; border-color:var(--clay)}
.size-figure{display:block; width:100%; height:auto}
.size-card b{font-family:'Faustina', Georgia, 'Times New Roman', serif; font-size:19px}
.size-card span{font-size:13.5px; color:var(--ink-faint)}

/* ------------------------------------------------------------ listing ---- */
.cms-element-product-listing-wrapper{display:grid; gap:30px}
@media (min-width:1000px){
  .cms-element-product-listing-wrapper.with-filter{grid-template-columns:262px minmax(0,1fr)}
}
.filter-panel{align-self:start; background:var(--card); border:1px solid var(--line-soft);
  border-radius:var(--radius); padding:18px; box-shadow:var(--shadow)}
.filter-panel h2{font-size:15px; letter-spacing:.06em; text-transform:uppercase;
  font-family:'Hanken Grotesk', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; font-weight:700; color:var(--ink-faint); margin:0 0 12px}
.filter-multi-select{margin:0 0 16px}
.filter-multi-select h3{font-size:14px; margin:0 0 7px; font-family:'Hanken Grotesk', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  font-weight:700; letter-spacing:.02em}
.filter-multi-select ul{list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:6px}
.filter-multi-select label{display:inline-flex; align-items:center; gap:6px; font-size:13.5px;
  border:1px solid var(--line); border-radius:999px; padding:5px 11px; cursor:pointer; background:var(--paper)}
.filter-multi-select input{accent-color:var(--clay)}
.sorting-row{display:flex; flex-wrap:wrap; gap:12px; align-items:center; justify-content:space-between;
  margin-bottom:18px; font-size:14.5px; color:var(--ink-faint)}
@media (max-width:999px){
  .cms-element-product-listing-wrapper.with-filter{display:flex; flex-direction:column}
  .filter-panel{order:2}
  .listing-col{order:1}
}

/* --------------------------------------------------------- product page -- */
.breadcrumb{display:flex; flex-wrap:wrap; gap:8px; list-style:none; margin:0; padding:16px 0 0;
  font-size:13.5px; color:var(--ink-faint)}
.breadcrumb a{color:var(--ink-faint)}
.breadcrumb-item+.breadcrumb-item::before{content:'/'; margin-right:8px; color:var(--line)}
.product-detail{display:grid; gap:34px; padding-block:26px 46px}
@media (min-width:1000px){ .product-detail{grid-template-columns:minmax(0,1.05fr) minmax(0,1fr); gap:46px; align-items:start} }
@media (min-width:1000px){ .product-detail-media{position:sticky; top:16px; align-self:start} }
.gallery-slider{display:grid; gap:12px}
.gallery-slider-main{background:var(--card); border:1px solid var(--line-soft); border-radius:var(--radius); padding:16px}
.gallery-slider-main img{display:block; width:100%; height:auto; aspect-ratio:4/3; object-fit:contain}
.gallery-slider-main img.is-photo{object-fit:cover; border-radius:8px}
.gallery-slider-thumbnails{display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:8px}
.gallery-slider-thumbnails img{display:block; width:100%; aspect-ratio:1/1; object-fit:cover;
  background:#fff; border:1px solid var(--line-soft); border-radius:8px}
.product-detail-name{margin:0 0 10px}
.product-detail-price-container{display:flex; flex-wrap:wrap; align-items:baseline; gap:10px; margin-bottom:6px}
.product-detail-price{font-family:'Faustina', Georgia, 'Times New Roman', serif; font-size:32px; font-weight:700}
.product-detail-ordernumber{font-family:'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace; font-size:13px; color:var(--ink-faint)}
.product-detail-buy{display:flex; flex-wrap:wrap; gap:10px; align-items:center; margin:18px 0}
.product-detail-reviews{font-size:14.5px; color:var(--ink-faint); margin-bottom:14px}
.variant-rows{display:grid; gap:8px; margin:0 0 18px; padding:0; list-style:none}
.variant-row{display:flex; flex-wrap:wrap; gap:10px; align-items:center; justify-content:space-between;
  background:var(--card); border:1px solid var(--line-soft); border-radius:11px; padding:10px 14px}
.variant-row .vname{display:flex; align-items:center; gap:9px; font-weight:600; font-size:15px}
.variant-row .vprice{font-family:'Faustina', Georgia, 'Times New Roman', serif; font-weight:700; font-size:18px}
.dot{width:14px; height:14px; border-radius:50%; border:1px solid rgba(31,28,22,.3); display:inline-block}
.product-detail-properties-table{width:100%; border-collapse:collapse; font-size:15px}
.product-detail-properties-table th,.product-detail-properties-table td{
  text-align:left; padding:9px 10px; border-bottom:1px solid var(--line-soft); vertical-align:top}
.product-detail-properties-table th{width:44%; font-weight:600; color:var(--ink-soft)}
.tbl-wrap{overflow-x:auto}
.tbl-wrap table{width:100%; border-collapse:collapse; font-size:15px}
.tbl-wrap th,.tbl-wrap td{text-align:left; padding:9px 10px; border-bottom:1px solid var(--line-soft)}
.tbl-wrap thead th{font-family:'Hanken Grotesk', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; font-weight:700; font-size:13.5px;
  letter-spacing:.03em; text-transform:uppercase; color:var(--ink-faint)}
@media (max-width:620px){
  .tbl-wrap.stacky thead{display:none}
  .tbl-wrap.stacky tr{display:block; border-bottom:1px solid var(--line); padding:8px 0}
  .tbl-wrap.stacky td{display:flex; justify-content:space-between; gap:12px; border:0; padding:4px 0}
  .tbl-wrap.stacky td::before{content:attr(data-l); font-weight:600; color:var(--ink-faint)}
}
.panel{background:var(--card); border:1px solid var(--line-soft); border-radius:var(--radius);
  padding:20px 22px; box-shadow:var(--shadow); margin-bottom:22px}
.panel h2,.panel h3{margin-top:0}
.chips{display:flex; flex-wrap:wrap; gap:10px; list-style:none; margin:0; padding:0}
.chips li{display:flex; flex-direction:column; gap:2px; background:var(--quiet);
  border-radius:11px; padding:10px 14px; font-size:13.5px; color:var(--ink-faint); font-weight:600}
.chips b{font-family:'Faustina', Georgia, 'Times New Roman', serif; font-size:19px; color:var(--ink); font-weight:700}
.fits-list{display:grid; gap:10px; list-style:none; margin:0; padding:0}
.fits-list a{display:flex; justify-content:space-between; gap:12px; align-items:center;
  border:1px solid var(--line-soft); border-radius:11px; padding:10px 14px; color:var(--ink); background:var(--paper)}
.fits-list a:hover{text-decoration:none; border-color:var(--clay)}

/* ------------------------------------------------------------ fit plan --- */
/* A plan view drawn from the numbers we hold, with a trash can, a mower and a
   bike outlined to scale inside it. None of the three big brands ships this. */
.fitplan{display:block; width:100%; height:auto; background:var(--card);
  border:1px solid var(--line-soft); border-radius:var(--radius)}
.fitplan .wall{fill:none; stroke:#1E1B16; stroke-width:3}
.fitplan .item{fill:rgba(156,69,25,.12); stroke:#9C4519; stroke-width:2}
.fitplan .lbl{font:600 13px 'Hanken Grotesk', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; fill:#6D6455}
.fitplan .dim{font:600 13px 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace; fill:#4A4338}
.fitplan .tick{stroke:#DBD2C1; stroke-width:1.5}

/* ---------------------------------------------------------------- faq ---- */
.faq{display:grid; gap:10px}
@media (min-width:1080px){
  .faq-split{grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr); gap:40px; align-items:start}
  .faq-split .faq-head{position:sticky; top:16px}
}
.faq details{background:var(--card); border:1px solid var(--line-soft); border-radius:12px}
.faq summary{display:flex; justify-content:space-between; align-items:center; gap:14px;
  cursor:pointer; list-style:none; padding:15px 18px; font-weight:600; font-size:17px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:'+'; font-family:'Faustina', Georgia, 'Times New Roman', serif; font-size:22px; color:var(--clay); line-height:1}
.faq details[open] summary::after{content:'\2212'}
.faq details>div{padding:0 18px 16px; color:var(--ink-soft)}

/* ------------------------------------------------------------- prose ----- */
.prose{max-width:var(--read)}
.prose h2{margin-top:1.4em}
.prose h3{margin-top:1.3em}
.prose img{border-radius:var(--radius)}
.article-layout{display:grid; gap:36px; padding-block:26px 50px}
@media (min-width:1080px){
  .article-layout{grid-template-columns:minmax(0,var(--read)) 250px; justify-content:start; gap:54px; align-items:start}
  .article-aside{position:sticky; top:16px}
}
@media (max-width:1079px){ .article-aside{display:none} }
.article-aside h2{font-size:14px; letter-spacing:.07em; text-transform:uppercase;
  font-family:'Hanken Grotesk', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; color:var(--ink-faint)}
.article-aside ul{list-style:none; margin:0; padding:0; display:grid; gap:7px; font-size:14.5px}
.art-meta{font-size:14px; color:var(--ink-faint); margin-bottom:18px}
.sources{background:var(--quiet); border-radius:var(--radius); padding:18px 20px; margin:26px 0}
.sources h2,.sources .src-h{font-family:'Hanken Grotesk', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; font-size:14px; letter-spacing:.06em;
  text-transform:uppercase; color:var(--ink-faint); margin:0 0 10px; font-weight:700}
.sources ol{margin:0; padding-left:1.15em; font-size:14.5px; color:var(--ink-soft)}
.sources .road{margin:12px 0 0; font-size:14px}
.note{background:var(--card); border-left:4px solid var(--clay); border-radius:0 11px 11px 0;
  padding:14px 18px; margin:22px 0; font-size:15px; color:var(--ink-soft)}
.legal{max-width:var(--read)}
.legal h2{margin-top:1.5em}

/* --------------------------------------------------------- journal ------- */
.jcards{display:grid; gap:22px; grid-template-columns:repeat(3,minmax(0,1fr))}
.jcards.jc-4{grid-template-columns:repeat(4,minmax(0,1fr))}
.jcards.jc-2{grid-template-columns:repeat(2,minmax(0,1fr))}
@media (max-width:1180px){ .jcards.jc-4{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:980px){ .jcards,.jcards.jc-4,.jcards.jc-2{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:620px){ .jcards,.jcards.jc-4,.jcards.jc-2{grid-template-columns:minmax(0,1fr)} }
.jcard{display:flex; flex-direction:column; background:var(--card); border:1px solid var(--line-soft);
  border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow)}
.jcard img{display:block; width:100%; aspect-ratio:16/10; object-fit:cover}
.jcard-body{padding:16px 18px 20px; display:flex; flex-direction:column; gap:8px}
.jcard h2,.jcard h3{margin:0; font-size:20px}
.jcard p{margin:0; font-size:14.5px; color:var(--ink-soft)}

/* ------------------------------------------------------------ buy rail --- */
.buy-rail{position:fixed; left:0; right:0; bottom:0; z-index:40; background:var(--pine);
  color:var(--on-dark); box-shadow:0 -6px 24px rgba(0,0,0,.18); transform:translateY(110%);
  transition:transform .2s ease}
.buy-rail.show{transform:none}
.buy-rail .container{display:flex; gap:14px; align-items:center; justify-content:space-between; padding-block:10px}
.buy-rail .rname{font-weight:600; font-size:15px; color:#fff}
.buy-rail .rprice{font-family:'Faustina', Georgia, 'Times New Roman', serif; font-weight:700; font-size:19px; color:#fff}
@media (max-width:620px){ .buy-rail .rname{display:none} }

/* ------------------------------------------------------------- footer ---- */
.footer-main{background:var(--pine); color:var(--on-dark-soft); margin-top:auto; padding-block:44px 26px}
.footer-main a{color:var(--on-dark)}
.footer-columns{display:grid; gap:28px; grid-template-columns:1.4fr 1fr 1fr 1fr}
@media (max-width:900px){ .footer-columns{grid-template-columns:1fr 1fr} }
@media (max-width:560px){ .footer-columns{grid-template-columns:1fr} }
.footer-column h2{font-family:'Hanken Grotesk', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; font-size:13px; letter-spacing:.1em; text-transform:uppercase;
  color:var(--on-dark-soft); margin:0 0 12px; font-weight:700}
.footer-column ul{list-style:none; margin:0; padding:0; display:grid; gap:7px; font-size:14.5px}
.footer-column.wide ul{grid-template-columns:1fr 1fr; gap:7px 18px}
.footer-brand{display:flex; align-items:center; gap:10px; margin-bottom:12px; color:#fff}
.footer-brand img{width:32px; height:32px; display:block}
.footer-note{border-top:1px solid rgba(255,255,255,.14); margin-top:30px; padding-top:18px;
  font-size:13.5px; display:grid; gap:10px}
.footer-note p{margin:0}
/* A row of marks is aligned by HEIGHT, and an inline svg without a size falls
   back to filling its box: both of those have shipped as defects before. */
.pay-row{display:flex; flex-wrap:wrap; gap:10px; align-items:center}
.pay-row img,.pay-row svg{height:26px; width:auto; display:block; flex:0 0 auto}
.disclosure{display:flex; flex-wrap:wrap; align-items:center; gap:8px}
.disclosure img.dsc{width:auto; max-width:100%}
@media (max-width:620px){ .disclosure img.dsc{height:auto!important; max-height:1em} }

/* ---------------------------------------------------------- utilities ---- */
.stack{display:grid; gap:18px}
.split{display:grid; gap:26px}
@media (min-width:920px){ .split{grid-template-columns:minmax(0,1fr) minmax(0,1fr); align-items:center} }
.plate{background:var(--card); border-radius:var(--radius); overflow:hidden; border:1px solid var(--line-soft)}
.plate img{display:block; width:100%; height:auto}
.skip-link{position:absolute; left:-9999px}
.skip-link:focus{position:static; display:inline-block; padding:8px 14px; background:var(--clay); color:#fff}
.sr-only{position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden;
  clip:rect(0,0,0,0); white-space:nowrap; border:0}