/* ==========================================================================
   HASENSE - glazed ceramics for the table
   Layout note: a fixed index rail runs down the left edge on wide screens and
   the page wrapper is inset by exactly its width. Below 1240px the rail is
   gone and the wrapper is flush.
   ========================================================================== */

:root{
  --paper:#F4F5F2; --paper-up:#E9EBE5; --card:#FFFFFF; --mist:#FAFBF8;
  --ink:#15283C; --ink-soft:#22384F; --body:#465667; --soft:#7C8998;
  --line:#DDE1DB; --line-soft:#EBEEE8;
  --buy:#8E2F33; --buy-deep:#71232A; --buy-bright:#A94146; --buy-pale:#F5E3E2;
  --brass:#A4802F; --brass-pale:#F3EBD8;
  --speck:#CFCBBE; --sand:#E4E0D3;
  --g1:#274B6D; --g2:#6E8570; --g3:#9E6B4A; --g4:#7B6A8C;
  --g5:#3F6F70; --g6:#8A5C5C; --g7:#5E6B44; --g8:#4C6A87;
  --glaze:#274B6D;
  --rail:92px;
  --wrap:1180px;
  --masthead-h:74px;
  --r-sm:8px; --r-md:14px; --r-lg:22px;
  --shadow:0 1px 2px rgba(21,40,60,.05), 0 8px 26px -14px rgba(21,40,60,.28);
  --shadow-up:0 2px 6px rgba(21,40,60,.07), 0 20px 44px -22px rgba(21,40,60,.36);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--paper); color:var(--body);
  font-family:'Geist', 'Segoe UI', system-ui, -apple-system, sans-serif; font-size:17px; line-height:1.62;
  font-feature-settings:"kern" 1; -webkit-font-smoothing:antialiased;
}
/* No overflow-x:clip on the page shell. Hiding the evidence is exactly what
   made an overflowing button invisible on a screenshot: the guard measures
   scrollWidth, and a clipped page never grows one. */
img,svg,video{max-width:100%}
img,video{height:auto}
[hidden]{display:none!important}
a{color:var(--ink); text-decoration-color:color-mix(in srgb, var(--ink) 28%, transparent); text-underline-offset:3px}
a:hover{color:var(--buy)}
h1,h2,h3,h4{font-family:'Newsreader', 'Iowan Old Style', Georgia, serif; color:var(--ink); font-weight:500; line-height:1.12; letter-spacing:-.012em; margin:0 0 .5em}
h1{font-size:clamp(2.5rem,5.4vw,4.15rem); font-weight:400}
h2{font-size:clamp(1.9rem,3.5vw,2.85rem); font-weight:400}
h3{font-size:clamp(1.25rem,1.9vw,1.55rem)}
h4{font-size:1.06rem; font-family:'Geist', 'Segoe UI', system-ui, -apple-system, sans-serif; font-weight:600; letter-spacing:.01em}
p{margin:0 0 1.05em}
ul,ol{margin:0 0 1.1em; padding-left:1.15em}
li{margin:0 0 .45em}
strong{color:var(--ink-soft); font-weight:600}
.skip{position:absolute; left:-9999px}
.skip:focus{left:12px; top:12px; z-index:99; background:var(--card); padding:10px 16px; border-radius:var(--r-sm)}
.mono{font-family:'Geist Mono', ui-monospace, 'SFMono-Regular', Consolas, monospace; font-variant-numeric:tabular-nums}
.mute{color:var(--soft)}

/* ---------------------------------------------------------------- shell -- */
.master-wrapper-page{padding-left:0}
.content-wrap{width:min(100% - 40px, var(--wrap)); margin-inline:auto}
.content-wrap.narrow{width:min(100% - 40px, 760px)}
.page-section{padding:76px 0}
.page-section.tight{padding:56px 0}
.page-section.pale{background:var(--paper-up)}
.page-section.white{background:var(--card)}
.page-section.dark{background:var(--ink); color:#D7DEE6}
.page-section.dark h2,.page-section.dark h3,.page-section.dark h4{color:#F3F6F8}
.page-section.dark a{color:#EBF0F4}

/* ------------------------------------------------------------- the rail -- */
/* The index rail: a fixed column of glaze chips, one per block of the page.
   It is the site's signature and its fastest route to a shelf. */
.railnav{display:none}
@media (min-width:1240px){
  .master-wrapper-page{padding-left:var(--rail)}
  .railnav{
    display:flex; flex-direction:column; align-items:center; gap:10px;
    position:fixed; left:0; top:0; bottom:0; width:var(--rail); z-index:40;
    padding:14px 0 18px; background:var(--card); border-right:1px solid var(--line);
  }
  /* An inline svg with no width attribute falls back to 300x150, which on a
     92px rail is a blown-up mark across the whole column. */
  .railnav .rail-mark{display:block; width:48px; height:48px; margin-bottom:6px}
  .railnav .rail-mark .mark-tile{display:block; width:100%; height:100%}
  .railnav .rail-list{display:flex; flex-direction:column; gap:9px; align-items:center; overflow:hidden}
  .railnav .rail-chip{
    width:38px; height:38px; border-radius:50%; display:grid; place-items:center;
    background:color-mix(in srgb, var(--c) 15%, #fff); border:1.5px solid color-mix(in srgb, var(--c) 45%, #fff);
    font-family:'Geist Mono', ui-monospace, 'SFMono-Regular', Consolas, monospace; font-size:9.5px; letter-spacing:.02em; color:color-mix(in srgb, var(--c) 82%, #000);
    text-decoration:none; transition:transform .16s ease, background .16s ease;
  }
  .railnav .rail-chip:hover{transform:scale(1.12); background:color-mix(in srgb, var(--c) 30%, #fff)}
  .railnav .rail-word{
    margin-top:auto; writing-mode:vertical-rl; transform:rotate(180deg);
    font-family:'Geist Mono', ui-monospace, 'SFMono-Regular', Consolas, monospace; font-size:11px; letter-spacing:.34em; color:var(--soft); text-transform:uppercase;
  }
}

/* ------------------------------------------------------------- masthead -- */
.header{position:sticky; top:0; z-index:50; background:color-mix(in srgb, var(--paper) 92%, #fff); backdrop-filter:saturate(1.4) blur(8px); border-bottom:1px solid var(--line)}
.header-upper{background:var(--ink); color:#C9D4DE; font-family:'Geist Mono', ui-monospace, 'SFMono-Regular', Consolas, monospace; font-size:11.5px; letter-spacing:.05em}
.header-upper .content-wrap{display:flex; justify-content:space-between; gap:16px; padding:7px 0; align-items:center}
.header-upper a{color:#EAF0F5}
.header-upper .hu2{color:#93A5B4}
.header-lower{display:flex; align-items:center; gap:22px; padding:12px 0; min-width:0}
.header-logo{display:flex; align-items:center; gap:11px; text-decoration:none; flex:0 0 auto; min-width:0}
.header-logo .mark-tile{width:40px; height:40px; flex:0 0 auto; border-radius:11px}
.header-logo .logo-word{display:block; font-family:'Newsreader', 'Iowan Old Style', Georgia, serif; font-size:1.42rem; letter-spacing:.13em; color:var(--ink); line-height:1}
.header-logo .logo-sub{display:block; font-family:'Geist Mono', ui-monospace, 'SFMono-Regular', Consolas, monospace; font-size:9.5px; letter-spacing:.19em; text-transform:uppercase; color:var(--soft); margin-top:3px}
.header-menu{display:flex; gap:20px; margin-left:auto; min-width:0; flex-wrap:wrap}
.header-menu a{font-size:14.5px; text-decoration:none; color:var(--ink-soft); padding:5px 0; border-bottom:2px solid transparent}
.header-menu a:hover,.header-menu a[aria-current="page"]{color:var(--buy); border-bottom-color:var(--buy)}
.header-actions{display:flex; align-items:center; gap:9px; flex:0 0 auto}
.header .nav-toggle{display:none}

@media (max-width:1023px){
  .header-menu{
    display:none; position:absolute; left:0; right:0; top:100%;
    flex-direction:column; gap:0; background:var(--card); border-bottom:1px solid var(--line);
    padding:8px 20px 16px; box-shadow:var(--shadow);
  }
  .header-menu a{padding:11px 0; border-bottom:1px solid var(--line-soft)}
  .header .nav-toggle{display:inline-flex}
  .header-lower{gap:12px}
  .header-logo .logo-sub{display:none}
}
/* The masthead has to survive 360px with the buy button still on it: the
   answer is a smaller masthead and a shorter caption, never a hidden button. */
.header-actions .cta-long{display:inline}
.header-actions .cta-short{display:none}
@media (max-width:479px){
  .header-logo .mark-tile{width:32px; height:32px}
  .header-logo .logo-word{font-size:1.02rem; letter-spacing:.08em}
  .header-upper .hu2{display:none}
  .header-lower{gap:8px; padding:9px 0}
  .header-actions{gap:6px}
  .header-actions .btn{padding:8px 11px; font-size:12.5px}
  .header-actions .cta-long{display:none}
  .header-actions .cta-short{display:inline}
}

/* --------------------------------------------------------------- button -- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  padding:13px 22px; border-radius:999px; border:1.5px solid transparent;
  font-family:'Geist', 'Segoe UI', system-ui, -apple-system, sans-serif; font-size:15px; font-weight:600; line-height:1.1;
  text-decoration:none; cursor:pointer; max-width:100%;
  transition:background .16s ease, color .16s ease, border-color .16s ease, transform .16s ease;
}
.btn svg{width:1.05em; height:1.05em; flex:0 0 auto}
.btn img.cta{width:auto}
.btn-buy{background:var(--buy); color:#fff; border-color:var(--buy)}
.btn-buy:hover{background:var(--buy-deep); border-color:var(--buy-deep); color:#fff; transform:translateY(-1px)}
.btn-line{background:transparent; color:var(--ink); border-color:var(--line)}
.btn-line:hover{border-color:var(--ink); color:var(--ink); background:var(--card)}
.btn-ghost{background:var(--card); color:var(--ink); border-color:var(--line)}
.btn-ghost:hover{border-color:var(--buy); color:var(--buy)}
.btn-sm{padding:9px 15px; font-size:13.5px}
.btn-wide{width:100%}
.page-section.dark .btn-line{color:#EAF0F5; border-color:rgba(255,255,255,.28)}
.page-section.dark .btn-line:hover{background:rgba(255,255,255,.08); color:#fff; border-color:rgba(255,255,255,.5)}

/* ----------------------------------------------------------- section hd -- */
/* Every block opens the same way: an index numeral in the glaze of the block,
   a mono kicker, the title, and a lede that runs the full width. */
.blockhead{display:grid; grid-template-columns:minmax(0,86px) minmax(0,1fr); gap:26px; align-items:start; margin-bottom:36px}
.blockhead .bh-num{
  font-family:'Newsreader', 'Iowan Old Style', Georgia, serif; font-size:4.2rem; line-height:.85; font-weight:300;
  color:color-mix(in srgb, var(--glaze) 55%, transparent); letter-spacing:-.04em;
}
.blockhead .bh-kicker{
  display:inline-flex; align-items:center; gap:8px; font-family:'Geist Mono', ui-monospace, 'SFMono-Regular', Consolas, monospace; font-size:11px;
  letter-spacing:.2em; text-transform:uppercase; color:color-mix(in srgb, var(--glaze) 80%, #000); margin-bottom:10px;
}
.blockhead .bh-kicker::before{content:""; width:22px; height:2px; background:var(--glaze); border-radius:2px}
.blockhead h2{margin-bottom:.3em}
.blockhead .bh-lede{font-size:1.06rem; max-width:66ch}
.blockhead .bh-lede p:last-child{margin-bottom:0}
.blockhead.wide .bh-lede{max-width:none; columns:2; column-gap:44px}
@media (max-width:719px){
  .blockhead{grid-template-columns:minmax(0,1fr); gap:8px}
  .blockhead .bh-num{font-size:2.9rem}
  .blockhead.wide .bh-lede{columns:1}
}

/* ------------------------------------------------------------ the glaze -- */
.glazestrip{display:flex; flex-wrap:wrap; gap:10px; align-items:center}
.glazechip{
  display:inline-flex; align-items:center; gap:8px; padding:6px 13px 6px 6px;
  border:1px solid var(--line); border-radius:999px; background:var(--card);
  font-family:'Geist Mono', ui-monospace, 'SFMono-Regular', Consolas, monospace; font-size:11.5px; letter-spacing:.05em; color:var(--ink-soft); text-decoration:none;
}
.glazechip:hover{border-color:var(--glaze); color:var(--ink)}
.glazechip i{width:17px; height:17px; border-radius:50%; background:var(--c); display:block; flex:0 0 auto; box-shadow:inset 0 0 0 1px rgba(0,0,0,.08)}

/* ----------------------------------------------------------------- hero -- */
.hero{position:relative; background:var(--card); border-bottom:1px solid var(--line); overflow:hidden}
.hero-grid{display:grid; grid-template-columns:minmax(0,1.02fr) minmax(0,1fr); gap:52px; align-items:center; padding:64px 0 68px}
.hero-copy{min-width:0}
.hero-eyebrow{
  display:inline-flex; align-items:center; gap:9px; font-family:'Geist Mono', ui-monospace, 'SFMono-Regular', Consolas, monospace; font-size:11px;
  letter-spacing:.22em; text-transform:uppercase; color:var(--g1); margin-bottom:18px;
}
.hero-eyebrow i{width:9px; height:9px; border-radius:50%; background:var(--g1); display:block}
.hero h1{margin-bottom:.32em}
.hero h1 em{font-style:italic; color:var(--g1)}
.hero-lede{font-size:1.2rem; line-height:1.55; max-width:52ch; color:var(--ink-soft)}
.hero-cta{display:flex; flex-wrap:wrap; gap:12px; margin:26px 0 24px}
.hero-facts{display:flex; flex-wrap:wrap; gap:12px 30px; padding-top:20px; border-top:1px solid var(--line)}
.hero-fact{min-width:0}
.hero-fact b{display:block; font-family:'Newsreader', 'Iowan Old Style', Georgia, serif; font-size:1.72rem; font-weight:500; color:var(--ink); line-height:1.1}
.hero-fact span{display:block; font-family:'Geist Mono', ui-monospace, 'SFMono-Regular', Consolas, monospace; font-size:10.5px; letter-spacing:.13em; text-transform:uppercase; color:var(--soft); margin-top:2px}
.hero-art{position:relative; min-width:0}
.hero-art .disc{
  position:absolute; inset:auto; width:74%; aspect-ratio:1; border-radius:50%;
  background:color-mix(in srgb, var(--g1) 13%, #fff); right:6%; top:-6%; z-index:0;
}
.hero-art img{position:relative; z-index:1; width:100%; border-radius:var(--r-lg); display:block; box-shadow:var(--shadow-up)}
.hero-art .hero-tag{
  position:absolute; z-index:2; left:-18px; bottom:26px; background:var(--card);
  border:1px solid var(--line); border-radius:var(--r-md); padding:11px 15px; box-shadow:var(--shadow);
  display:flex; align-items:center; gap:10px; max-width:80%;
}
.hero-art .hero-tag b{font-family:'Geist Mono', ui-monospace, 'SFMono-Regular', Consolas, monospace; font-size:14px; color:var(--ink)}
.hero-art .hero-tag span{font-size:12.5px; color:var(--soft); line-height:1.3}
@media (max-width:959px){
  .hero-grid{grid-template-columns:minmax(0,1fr); gap:34px; padding:40px 0 46px}
  .hero-art{order:-1}
  .hero-art .hero-tag{left:8px}
  .hero-lede{font-size:1.08rem}
}

/* -------------------------------------------------------------- shelves -- */
.home-page-category-grid{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:14px}
.sub-category-item{
  display:flex; align-items:center; gap:12px; padding:14px 16px; min-width:0;
  background:var(--card); border:1px solid var(--line); border-radius:var(--r-md);
  text-decoration:none; transition:border-color .16s ease, transform .16s ease, box-shadow .16s ease;
}
.sub-category-item:hover{border-color:color-mix(in srgb, var(--c) 60%, #fff); transform:translateY(-2px); box-shadow:var(--shadow)}
.sub-category-item i{width:15px; height:15px; border-radius:50%; background:var(--c); flex:0 0 auto; box-shadow:inset 0 0 0 1px rgba(0,0,0,.08)}
.sub-category-item b{display:block; font-size:14.5px; font-weight:600; color:var(--ink); line-height:1.25; min-width:0}
.sub-category-item span{display:block; font-family:'Geist Mono', ui-monospace, 'SFMono-Regular', Consolas, monospace; font-size:10.5px; color:var(--soft); margin-top:2px}
@media (max-width:1023px){.home-page-category-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:719px){.home-page-category-grid{grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px}
  .sub-category-item{padding:11px 12px; gap:9px}}
@media (max-width:399px){.home-page-category-grid{grid-template-columns:minmax(0,1fr)}}

/* ----------------------------------------------------------- item cards -- */
.product-grid{display:grid; gap:22px; grid-template-columns:repeat(3,minmax(0,1fr))}
.product-grid.cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}
.product-grid.cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}
@media (max-width:1023px){
  .product-grid,.product-grid.cols-4{grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px}
}
@media (max-width:559px){
  .product-grid,.product-grid.cols-4,.product-grid.cols-2{grid-template-columns:minmax(0,1fr)}
}

.item-box{min-width:0}
.product-item{
  display:flex; flex-direction:column; height:100%; min-width:0;
  background:var(--card); border:1px solid var(--line); border-radius:var(--r-md);
  overflow:hidden; transition:border-color .16s ease, box-shadow .16s ease, transform .16s ease;
}
.product-item:hover{border-color:color-mix(in srgb, var(--c,var(--glaze)) 45%, #fff); box-shadow:var(--shadow-up); transform:translateY(-2px)}
.product-item > .picture{position:relative; display:block; padding:18px; background:var(--mist); border-bottom:1px solid var(--line-soft)}
.product-item > .picture::before{
  content:""; position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  width:78%; aspect-ratio:1; border-radius:50%;
  background:color-mix(in srgb, var(--c,var(--glaze)) 11%, transparent);
}
.product-item > .picture img{position:relative; display:block; width:100%; aspect-ratio:1; object-fit:contain}
.product-item .flag{
  position:absolute; z-index:2; left:12px; top:12px; padding:4px 9px; border-radius:999px;
  background:var(--ink); color:#fff; font-family:'Geist Mono', ui-monospace, 'SFMono-Regular', Consolas, monospace; font-size:9.5px; letter-spacing:.12em; text-transform:uppercase;
}
.product-item .details{display:flex; flex-direction:column; gap:9px; padding:15px 16px 16px; flex:1 0 auto; min-width:0}
.product-item .product-title{font-family:'Geist', 'Segoe UI', system-ui, -apple-system, sans-serif; font-size:15px; font-weight:600; line-height:1.34; color:var(--ink); margin:0; min-width:0}
.product-item .attrs{display:flex; flex-wrap:wrap; gap:6px}
.product-item .attr{
  font-family:'Geist Mono', ui-monospace, 'SFMono-Regular', Consolas, monospace; font-size:10.5px; letter-spacing:.04em; color:var(--ink-soft);
  border:1px solid var(--line); border-radius:999px; padding:3px 8px; background:var(--paper); white-space:nowrap;
}
.product-item .attr.dot{display:inline-flex; align-items:center; gap:6px; padding-left:5px}
.product-item .attr.dot i{width:11px; height:11px; border-radius:50%; background:var(--c,var(--glaze)); box-shadow:inset 0 0 0 1px rgba(0,0,0,.1)}
.product-item .blurb{font-size:13.5px; line-height:1.5; color:var(--body); margin:0; flex:1 0 auto}
.product-item .prices{display:flex; align-items:baseline; gap:9px; margin-top:auto; padding-top:4px}
.product-item .actual-price{font-family:'Geist Mono', ui-monospace, 'SFMono-Regular', Consolas, monospace; font-size:1.35rem; font-weight:600; color:var(--ink); letter-spacing:-.02em}
.product-item .per{font-family:'Geist Mono', ui-monospace, 'SFMono-Regular', Consolas, monospace; font-size:11px; color:var(--soft)}
.product-item .buttons{display:flex}

.stars{display:inline-flex; align-items:center; gap:5px; font-family:'Geist Mono', ui-monospace, 'SFMono-Regular', Consolas, monospace; font-size:11.5px; color:var(--ink-soft); white-space:nowrap}
.stars svg{width:13px; height:13px; fill:var(--brass)}
.rstars{display:inline-flex; gap:2px}
.rstars svg{width:15px; height:15px; fill:var(--brass)}
.rstars svg.off{fill:var(--line)}

/* --------------------------------------------------------- lead card ----- */
/* One piece per block stands out: a wide card with the frame on the left. */
.lead-card{
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:0; min-width:0;
  background:var(--card); border:1px solid var(--line); border-radius:var(--r-lg); overflow:hidden;
}
.lead-card > .lead-pic{position:relative; padding:26px; background:var(--mist); display:flex; align-items:center; min-width:0}
.lead-card > .lead-pic::before{
  content:""; position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  width:80%; aspect-ratio:1; border-radius:50%; background:color-mix(in srgb, var(--c,var(--glaze)) 13%, transparent);
}
.lead-card > .lead-pic img{position:relative; width:100%; aspect-ratio:1; object-fit:contain; display:block}
.lead-card > .lead-body{padding:30px 32px; display:flex; flex-direction:column; gap:12px; justify-content:center; min-width:0}
.lead-card .lead-kick{font-family:'Geist Mono', ui-monospace, 'SFMono-Regular', Consolas, monospace; font-size:10.5px; letter-spacing:.18em; text-transform:uppercase; color:color-mix(in srgb, var(--c,var(--glaze)) 80%, #000)}
.lead-card h3{margin:0; font-size:clamp(1.35rem,2.2vw,1.75rem)}
.lead-card .lead-facts{display:flex; flex-wrap:wrap; gap:7px}
.lead-card .lead-buy{display:flex; flex-wrap:wrap; gap:10px; align-items:center; margin-top:6px}
.lead-card .lead-price{font-family:'Geist Mono', ui-monospace, 'SFMono-Regular', Consolas, monospace; font-size:1.5rem; font-weight:600; color:var(--ink)}
@media (max-width:719px){
  .lead-card{grid-template-columns:minmax(0,1fr)}
  .lead-card > .lead-body{padding:22px}
}

/* ------------------------------------------------------------- split ----- */
.split{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:46px; align-items:center}
.split.mirror > .split-art{order:2}
/* A long text column beside one photograph leaves half the screen empty from
   the second paragraph down. The picture rides along instead. */
.split.top{align-items:start}
.split.tallcopy{align-items:start}
.split.tallcopy > .split-art{position:sticky; top:calc(var(--masthead-h) + 22px); align-self:start}
.split > .split-art{min-width:0; position:relative}
.split > .split-art img{width:100%; border-radius:var(--r-lg); display:block; box-shadow:var(--shadow)}
.split > .split-copy{min-width:0}
.split > .split-copy p:last-child{margin-bottom:0}
@media (max-width:899px){
  .split{grid-template-columns:minmax(0,1fr); gap:26px}
  .split.mirror > .split-art{order:0}
}

/* -------------------------------------------------------------- facts ---- */
.factgrid{display:grid; gap:16px}
.factgrid.facts-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.factgrid.facts-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.factgrid.facts-4{grid-template-columns:repeat(4,minmax(0,1fr))}
@media (max-width:899px){.factgrid.facts-3,.factgrid.facts-4{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:539px){.factgrid.facts-2,.factgrid.facts-3,.factgrid.facts-4{grid-template-columns:minmax(0,1fr)}}
.factcard{
  background:var(--card); border:1px solid var(--line); border-radius:var(--r-md);
  padding:20px 20px 22px; min-width:0; color:var(--body);
}
.factcard .fc-ic{width:34px; height:34px; border-radius:9px; display:grid; place-items:center; background:color-mix(in srgb, var(--c,var(--glaze)) 13%, #fff); margin-bottom:12px}
.factcard .fc-ic svg{width:19px; height:19px; stroke:color-mix(in srgb, var(--c,var(--glaze)) 85%, #000); fill:none; stroke-width:1.7}
.factcard h4{margin:0 0 6px}
.factcard p{margin:0; font-size:14.5px; line-height:1.55}
.factcard .fc-num{font-family:'Newsreader', 'Iowan Old Style', Georgia, serif; font-size:2rem; color:var(--ink); line-height:1; display:block; margin-bottom:6px}

/* -------------------------------------------------------------- specs ---- */
.speclist{display:grid; gap:0; border-top:1px solid var(--line); margin:0; padding:0}
.speclist div{display:grid; grid-template-columns:minmax(0,190px) minmax(0,1fr); gap:16px; padding:12px 0; border-bottom:1px solid var(--line-soft); min-width:0}
.speclist dt{font-family:'Geist Mono', ui-monospace, 'SFMono-Regular', Consolas, monospace; font-size:11.5px; letter-spacing:.08em; text-transform:uppercase; color:var(--soft); margin:0}
.speclist dd{margin:0; font-size:15px; color:var(--ink-soft); min-width:0}
@media (max-width:599px){.speclist div{grid-template-columns:minmax(0,1fr); gap:2px}}

/* ------------------------------------------------------------- gallery --- */
/* Twelve columns, spans that add up to full rows: no orphan cell, no gap at
   the right edge. */
.kiln{display:grid; grid-template-columns:repeat(12,minmax(0,1fr)); gap:14px; grid-auto-flow:dense}
.kiln figure{margin:0; min-width:0; position:relative; border-radius:var(--r-md); overflow:hidden; background:var(--mist); border:1px solid var(--line)}
.kiln figure img{display:block; width:100%; height:100%; object-fit:cover; aspect-ratio:4/3}
.kiln figure.tall img{aspect-ratio:3/4}
.kiln figure.wide img{aspect-ratio:16/9}
.kiln .k4{grid-column:span 4}
.kiln .k6{grid-column:span 6}
.kiln .k8{grid-column:span 8}
.kiln .k3{grid-column:span 3}
.kiln figcaption{
  position:absolute; left:0; right:0; bottom:0; padding:22px 14px 10px;
  background:linear-gradient(to top, rgba(12,24,36,.78), rgba(12,24,36,0));
  color:#fff; font-family:'Geist Mono', ui-monospace, 'SFMono-Regular', Consolas, monospace; font-size:11px; letter-spacing:.06em;
}
@media (max-width:899px){
  .kiln{grid-template-columns:repeat(6,minmax(0,1fr))}
  .kiln .k8,.kiln .k6{grid-column:span 6}
  .kiln .k4,.kiln .k3{grid-column:span 3}
}
@media (max-width:539px){
  .kiln{grid-template-columns:minmax(0,1fr); gap:10px}
  .kiln .k8,.kiln .k6,.kiln .k4,.kiln .k3{grid-column:span 1}
}

/* ------------------------------------------------------------ timeline --- */
.timeline{display:grid; gap:0; border-left:2px solid var(--line); padding-left:26px; margin:0}
.tl-row{position:relative; padding:0 0 26px}
.tl-row:last-child{padding-bottom:0}
.tl-row::before{
  content:""; position:absolute; left:-33px; top:6px; width:13px; height:13px; border-radius:50%;
  background:var(--card); border:2.5px solid var(--glaze);
}
.tl-row .tl-when{font-family:'Geist Mono', ui-monospace, 'SFMono-Regular', Consolas, monospace; font-size:11px; letter-spacing:.15em; text-transform:uppercase; color:color-mix(in srgb, var(--glaze) 80%, #000); display:block; margin-bottom:5px}
.tl-row h4{margin:0 0 5px}
.tl-row p{margin:0; font-size:14.8px}

/* --------------------------------------------------------------- table --- */
.table-scroll{overflow-x:auto; -webkit-overflow-scrolling:touch; border:1px solid var(--line); border-radius:var(--r-md); background:var(--card)}
table.data-table{width:100%; border-collapse:collapse; font-size:14.5px; min-width:520px}
table.data-table caption{caption-side:top; text-align:left; padding:15px 18px 0; font-family:'Geist Mono', ui-monospace, 'SFMono-Regular', Consolas, monospace; font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--soft)}
table.data-table th,table.data-table td{padding:12px 16px; text-align:left; border-bottom:1px solid var(--line-soft); vertical-align:top}
table.data-table thead th{font-family:'Geist Mono', ui-monospace, 'SFMono-Regular', Consolas, monospace; font-size:11px; letter-spacing:.09em; text-transform:uppercase; color:var(--soft); font-weight:500; border-bottom:1.5px solid var(--line); white-space:nowrap}
table.data-table tbody th{font-weight:600; color:var(--ink); font-family:'Geist', 'Segoe UI', system-ui, -apple-system, sans-serif}
table.data-table td.is-num{font-family:'Geist Mono', ui-monospace, 'SFMono-Regular', Consolas, monospace; font-variant-numeric:tabular-nums; white-space:nowrap}
table.data-table .ours{background:color-mix(in srgb, var(--g1) 8%, #fff)}
table.data-table thead th.ours{color:var(--g1); background:color-mix(in srgb, var(--g1) 12%, #fff)}
table.data-table tbody tr:last-child th,table.data-table tbody tr:last-child td{border-bottom:0}
.tablenote{font-size:13px; color:var(--soft); margin:9px 0 0}

/* ------------------------------------------------------------- reviews --- */
.reviewgrid{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:18px}
@media (max-width:1023px){.reviewgrid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:659px){.reviewgrid{grid-template-columns:minmax(0,1fr)}}
.reviewcard{
  background:var(--card); border:1px solid var(--line); border-radius:var(--r-md);
  padding:22px 22px 20px; display:flex; flex-direction:column; gap:11px; min-width:0; color:var(--body);
  position:relative;
}
.reviewcard::before{
  content:"\201C"; position:absolute; right:16px; top:2px; font-family:'Newsreader', 'Iowan Old Style', Georgia, serif;
  font-size:4.2rem; line-height:1; color:color-mix(in srgb, var(--g1) 14%, transparent);
}
.reviewcard .rv-top{display:flex; align-items:center; gap:10px; flex-wrap:wrap}
.reviewcard .rv-when{font-family:'Geist Mono', ui-monospace, 'SFMono-Regular', Consolas, monospace; font-size:10.5px; color:var(--soft)}
.reviewcard blockquote{margin:0; font-size:15px; line-height:1.6; color:var(--ink-soft)}
.reviewcard .rv-who{display:flex; align-items:center; gap:9px; margin-top:auto; padding-top:8px; border-top:1px solid var(--line-soft)}
.reviewcard .rv-av{width:31px; height:31px; border-radius:50%; background:color-mix(in srgb, var(--c,var(--g1)) 22%, #fff); display:grid; place-items:center; font-family:'Geist Mono', ui-monospace, 'SFMono-Regular', Consolas, monospace; font-size:12.5px; font-weight:600; color:color-mix(in srgb, var(--c,var(--g1)) 55%, #000); flex:0 0 auto}
.reviewcard .rv-who b{font-size:13.5px; color:var(--ink); display:block; line-height:1.2}
.reviewcard .rv-who span{font-size:11.5px; color:var(--soft); display:block}

/* ---------------------------------------------------------------- quote -- */
.pullquote{
  margin:30px 0; padding:22px 26px; border-left:3px solid var(--glaze); background:var(--mist);
  border-radius:0 var(--r-md) var(--r-md) 0;
}
.pullquote p{font-family:'Newsreader', 'Iowan Old Style', Georgia, serif; font-size:1.24rem; line-height:1.44; color:var(--ink); margin:0}
.pullquote cite{display:block; margin-top:9px; font-family:'Geist Mono', ui-monospace, 'SFMono-Regular', Consolas, monospace; font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--soft); font-style:normal}

/* ------------------------------------------------------------- article --- */
.prose{font-size:17.2px; line-height:1.72}
.prose h2{margin-top:1.7em}
.prose h3{margin-top:1.5em}
.prose figure{margin:30px 0}
.prose figure img{width:100%; border-radius:var(--r-md); display:block; max-height:520px; object-fit:cover; background:var(--mist)}
.prose figcaption{font-family:'Geist Mono', ui-monospace, 'SFMono-Regular', Consolas, monospace; font-size:11.5px; color:var(--soft); margin-top:9px; letter-spacing:.03em}
.prose .table-scroll{margin:26px 0}
.prose .bl{font-weight:600}
.article-head{padding:44px 0 26px; border-bottom:1px solid var(--line); background:var(--card)}
.article-meta{display:flex; flex-wrap:wrap; gap:8px 18px; font-family:'Geist Mono', ui-monospace, 'SFMono-Regular', Consolas, monospace; font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--soft)}
.toc{background:var(--mist); border:1px solid var(--line); border-radius:var(--r-md); padding:18px 22px; margin:28px 0}
.toc h4{margin:0 0 9px; font-family:'Geist Mono', ui-monospace, 'SFMono-Regular', Consolas, monospace; font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--soft)}
.toc ol{margin:0; padding-left:1.2em; columns:2; column-gap:32px}
.toc li{font-size:14.5px; margin-bottom:4px}
@media (max-width:639px){.toc ol{columns:1}}

/* --------------------------------------------------------- inline buy ---- */
.buyinsert{
  display:grid; grid-template-columns:minmax(0,150px) minmax(0,1fr); gap:20px; align-items:center;
  background:var(--card); border:1px solid var(--line); border-left:3px solid var(--glaze);
  border-radius:var(--r-md); padding:18px 20px; margin:30px 0; min-width:0;
}
.buyinsert > .bi-pic{position:relative; min-width:0}
.buyinsert > .bi-pic img{width:100%; aspect-ratio:1; object-fit:contain; display:block}
.buyinsert > .bi-body{min-width:0}
.buyinsert .bi-kick{font-family:'Geist Mono', ui-monospace, 'SFMono-Regular', Consolas, monospace; font-size:10.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--soft); display:block; margin-bottom:5px}
.buyinsert h4{margin:0 0 6px; font-size:1.06rem}
.buyinsert p{margin:0 0 11px; font-size:14px}
.buyinsert .bi-row{display:flex; flex-wrap:wrap; gap:12px; align-items:center}
.buyinsert .bi-price{font-family:'Geist Mono', ui-monospace, 'SFMono-Regular', Consolas, monospace; font-size:1.22rem; font-weight:600; color:var(--ink)}
@media (max-width:559px){.buyinsert{grid-template-columns:minmax(0,1fr)}}

/* ---------------------------------------------------------- card links --- */
.linkgrid{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:18px}
@media (max-width:899px){.linkgrid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:599px){.linkgrid{grid-template-columns:minmax(0,1fr)}}
.linkcard{
  display:flex; flex-direction:column; background:var(--card); border:1px solid var(--line);
  border-radius:var(--r-md); overflow:hidden; text-decoration:none; min-width:0; color:var(--body);
  transition:border-color .16s ease, transform .16s ease, box-shadow .16s ease;
}
.linkcard:hover{border-color:var(--glaze); transform:translateY(-2px); box-shadow:var(--shadow)}
.linkcard img{width:100%; aspect-ratio:16/10; object-fit:cover; display:block; background:var(--mist)}
.linkcard .lc-body{padding:16px 18px 19px; display:flex; flex-direction:column; gap:7px; flex:1 0 auto}
.linkcard .lc-kick{font-family:'Geist Mono', ui-monospace, 'SFMono-Regular', Consolas, monospace; font-size:10.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--soft)}
.linkcard h3{margin:0; font-size:1.14rem}
.linkcard p{margin:0; font-size:14px; line-height:1.52; flex:1 0 auto}
.linkcard .lc-go{font-family:'Geist Mono', ui-monospace, 'SFMono-Regular', Consolas, monospace; font-size:11.5px; color:var(--buy); letter-spacing:.05em; display:inline-flex; align-items:center; gap:6px}
.linkcard .lc-go svg{width:14px; height:14px}

/* -------------------------------------------------------------- crumbs --- */
.crumbs{display:flex; flex-wrap:wrap; gap:7px; align-items:center; padding:16px 0 0; font-family:'Geist Mono', ui-monospace, 'SFMono-Regular', Consolas, monospace; font-size:11.5px; color:var(--soft)}
.crumbs a{color:var(--soft); text-decoration:none}
.crumbs a:hover{color:var(--buy)}

/* ---------------------------------------------------------------- faq ---- */
.faq{display:grid; gap:12px}
.faq details{background:var(--card); border:1px solid var(--line); border-radius:var(--r-md); padding:0}
.faq summary{
  cursor:pointer; padding:16px 20px; font-weight:600; color:var(--ink); list-style:none;
  display:flex; justify-content:space-between; gap:14px; align-items:center; font-size:15.5px;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+"; font-family:'Geist Mono', ui-monospace, 'SFMono-Regular', Consolas, monospace; color:var(--glaze); font-size:19px; flex:0 0 auto}
.faq details[open] summary::after{content:"\2013"}
.faq .faq-body{padding:0 20px 17px; font-size:15px}
.faq .faq-body p:last-child{margin-bottom:0}

/* -------------------------------------------------------------- notice --- */
.notice{background:var(--mist); border:1px solid var(--line); border-left:3px solid var(--g5); border-radius:var(--r-md); padding:18px 22px; margin:26px 0; font-size:14.6px}
.notice h4{margin:0 0 7px}
.notice p:last-child{margin-bottom:0}
.sources{background:var(--card); border:1px solid var(--line); border-radius:var(--r-md); padding:20px 24px; margin:26px 0; font-size:14.2px}
.sources h3{font-size:1.02rem; font-family:'Geist Mono', ui-monospace, 'SFMono-Regular', Consolas, monospace; letter-spacing:.13em; text-transform:uppercase; color:var(--soft); margin:0 0 11px}
.sources ol{margin:0; padding-left:1.2em}
.sources li{margin-bottom:9px; line-height:1.55}

/* -------------------------------------------------------------- footer --- */
.footer{background:var(--ink); color:#9FAEBD; padding:56px 0 26px; font-size:14.5px}
.footer h4{color:#F0F4F7; font-family:'Geist Mono', ui-monospace, 'SFMono-Regular', Consolas, monospace; font-size:11px; letter-spacing:.17em; text-transform:uppercase; margin:0 0 14px}
.footer a{color:#C4D0DA; text-decoration:none}
.footer a:hover{color:#fff; text-decoration:underline}
.footer-upper{display:grid; grid-template-columns:minmax(0,1.6fr) repeat(3,minmax(0,1fr)); gap:34px}
.footer-brand .header-logo .logo-word{color:#F3F6F8}
.footer-brand .header-logo .logo-sub{color:#8397A8; display:block}
.footer-brand p{margin:16px 0 18px; line-height:1.6; max-width:46ch}
.footer ul{list-style:none; margin:0; padding:0}
.footer li{margin-bottom:8px; line-height:1.4}
.footer .social{display:flex; gap:10px; margin-bottom:16px}
.footer .social a{display:grid; place-items:center; width:34px; height:34px; border-radius:50%; background:rgba(255,255,255,.07)}
.footer .social a:hover{background:rgba(255,255,255,.15)}

.footer .pays{display:flex; flex-wrap:wrap; align-items:center; gap:7px}
.footer .pays img{height:26px; width:auto; border-radius:5px}
.footer-lower{margin-top:38px; padding-top:20px; border-top:1px solid rgba(255,255,255,.12); display:flex; flex-wrap:wrap; gap:10px 26px; justify-content:space-between; font-size:13px}
.footer .disclosure{display:flex; flex-wrap:wrap; align-items:center; gap:10px; margin:16px 0 0; font-size:12.4px; color:#8397A8; line-height:1.5}
/* The caption is a picture of a line of text, and its size is set inline in em
   so it matches the type around it. Overriding that with height:auto lets the
   natural 1756px width take over and the line blows up to a headline. Only on a
   screen narrower than the picture does max-width take the wheel. */
.footer .disclosure img.dsc{width:auto; max-width:100%}
@media (max-width:479px){
  .footer .disclosure img.dsc{height:auto!important}
}
@media (max-width:899px){.footer-upper{grid-template-columns:repeat(2,minmax(0,1fr)); gap:28px}}
@media (max-width:539px){.footer-upper{grid-template-columns:minmax(0,1fr)}}

/* -------------------------------------------------------------- buybar --- */
.buybar{
  position:fixed; left:0; right:0; bottom:0; z-index:45; transform:translateY(110%);
  transition:transform .22s ease; background:var(--card); border-top:1px solid var(--line);
  box-shadow:0 -8px 30px -18px rgba(21,40,60,.5);
  display:flex; align-items:center; gap:16px; padding:10px max(20px, calc((100vw - var(--wrap))/2));
}
body.baron .buybar{transform:translateY(0)}
.buybar .bb-note{font-family:'Geist Mono', ui-monospace, 'SFMono-Regular', Consolas, monospace; font-size:12px; color:var(--soft); min-width:0}
.buybar .bb-chips{display:flex; gap:8px; overflow:hidden; flex:1 1 auto; min-width:0}
.buybar .bb-chips a{
  font-family:'Geist Mono', ui-monospace, 'SFMono-Regular', Consolas, monospace; font-size:11.5px; text-decoration:none; color:var(--ink-soft);
  border:1px solid var(--line); border-radius:999px; padding:4px 10px; white-space:nowrap;
}
.buybar .bb-chips a:hover{border-color:var(--buy); color:var(--buy)}
.buybar .btn{flex:0 0 auto}
@media (min-width:1240px){.buybar{left:var(--rail)}}
@media (max-width:719px){
  .buybar{padding:8px 14px; gap:10px}
  .buybar .bb-note,.buybar .bb-chips{display:none}
  .buybar .btn{flex:1 1 auto}
}

/* ------------------------------------------------------------- shelf pg -- */
.page-title{padding:34px 0 0}
.shelf-head{display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,1fr); gap:40px; align-items:stretch; padding:14px 0 46px}
.shelf-head .sh-copy{min-width:0; display:flex; flex-direction:column; justify-content:center}
.shelf-head .sh-art{min-width:0; position:relative}
.shelf-head .sh-art img{width:100%; height:100%; min-height:250px; object-fit:cover; border-radius:var(--r-lg); display:block; background:var(--mist)}
.shelf-head .sh-stats{display:flex; flex-wrap:wrap; gap:10px 26px; margin-top:18px; padding-top:16px; border-top:1px solid var(--line)}
.shelf-head .sh-stat b{font-family:'Geist Mono', ui-monospace, 'SFMono-Regular', Consolas, monospace; font-size:1.2rem; color:var(--ink); display:block}
.shelf-head .sh-stat span{font-family:'Geist Mono', ui-monospace, 'SFMono-Regular', Consolas, monospace; font-size:10px; letter-spacing:.13em; text-transform:uppercase; color:var(--soft)}
@media (max-width:899px){
  .shelf-head{grid-template-columns:minmax(0,1fr); gap:24px; padding-bottom:30px}
  .shelf-head .sh-art{order:-1}
  .shelf-head .sh-art img{min-height:0; aspect-ratio:16/9}
}
.shelf-filters{display:flex; flex-wrap:wrap; gap:8px; margin-bottom:24px}
.shelf-filters .glazechip{cursor:pointer; font:inherit; font-family:'Geist Mono', ui-monospace, 'SFMono-Regular', Consolas, monospace; font-size:11.5px; line-height:1.2}
.shelf-filters .glazechip[aria-pressed="true"]{border-color:var(--c); background:color-mix(in srgb, var(--c) 10%, #fff); color:var(--ink)}

/* ---------------------------------------------------------------- misc --- */
.centered{text-align:center}
.stack-cta{display:flex; flex-wrap:wrap; gap:12px; justify-content:center; margin-top:28px}
.eyebrow{font-family:'Geist Mono', ui-monospace, 'SFMono-Regular', Consolas, monospace; font-size:11px; letter-spacing:.2em; text-transform:uppercase; color:var(--soft)}
.rule{height:1px; background:var(--line); border:0; margin:0}
.bl{color:var(--ink); text-decoration-color:color-mix(in srgb, var(--buy) 45%, transparent)}
.page-block{padding:26px 0 66px}
.page-block h1{margin-bottom:.45em}
.page-block h2{margin-top:1.5em}
.closing{background:var(--ink); color:#CBD6E0; padding:58px 0}
.closing h2{color:#fff; margin-bottom:.4em}
.closing p{max-width:60ch; margin-inline:auto}
.closing .stack-cta .btn-line{color:#fff; border-color:rgba(255,255,255,.32)}
@media (max-width:519px){.closing .stack-cta .btn{width:100%}}