/* Self-hosted type (no Google Fonts). Files from @fontsource, OFL. Peignot:
   George Williams' 2000 digitisation, bundled with the store theme. */
@font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:400;font-display:swap;src:url(/assets/fonts/ibm-plex-sans-latin-400-normal.woff2) format('woff2');}
@font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:500;font-display:swap;src:url(/assets/fonts/ibm-plex-sans-latin-500-normal.woff2) format('woff2');}
@font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:600;font-display:swap;src:url(/assets/fonts/ibm-plex-sans-latin-600-normal.woff2) format('woff2');}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:400;font-display:swap;src:url(/assets/fonts/ibm-plex-mono-latin-400-normal.woff2) format('woff2');}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:500;font-display:swap;src:url(/assets/fonts/ibm-plex-mono-latin-500-normal.woff2) format('woff2');}
@font-face{font-family:'Young Serif';font-style:normal;font-weight:400;font-display:swap;src:url(/assets/fonts/young-serif-latin-400-normal.woff2) format('woff2');}
@font-face{font-family:'Archivo';font-style:normal;font-weight:100 900;font-stretch:62% 125%;font-display:swap;src:url(/assets/fonts/archivo-latin-wdth-normal.woff2) format('woff2');}
@font-face{font-family:'Peignot';font-style:normal;font-weight:400;font-display:swap;size-adjust:112%;src:url(/assets/fonts/peignot.woff2) format('woff2');}
:root{
      --ink:#131211; --ink-2:#1e1c1a; --ink-3:#332f2b;
      --paper:#f7f5f2; --paper-2:#eeebe6; --line:#ddd8d1;
      --grey:#8d8781; --grey-2:#5d5852;
      --brass:#9a7b3d; --brass-hi:#c0a066;
      --container:78rem;
      --marquee:'Peignot','Young Serif',Georgia,serif;
      --display:'Young Serif',Georgia,'Times New Roman',serif;
      --body:'IBM Plex Sans',system-ui,-apple-system,'Segoe UI',sans-serif;
      --mono:'IBM Plex Mono',ui-monospace,'SF Mono',Menlo,monospace;
      --logo:'Archivo','Helvetica Neue',Helvetica,Arial,sans-serif;
    }
*,*::before,*::after{box-sizing:border-box;}
body{margin:0; background:var(--paper); color:var(--ink); font-family:var(--body); font-size:15px; line-height:1.6; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;}
a{color:var(--ink); text-decoration:none;}
a:hover{color:var(--brass);}
.marquee{font-family:var(--marquee); font-weight:400; letter-spacing:.006em; line-height:1.16;}
h1,h2,h3{font-family:var(--display); font-weight:400; line-height:1.1; letter-spacing:-.008em; margin:0 0 .6rem;}
h1{font-size:2.6rem;}
h2{font-size:1.65rem;}
h3{font-size:1rem; font-family:var(--body); font-weight:600; letter-spacing:0;}
p{margin:0 0 1rem;}
.container{max-width:var(--container); margin:0 auto; padding:0 2rem;}
.eyebrow{font-family:var(--mono); font-size:.68rem; font-weight:500; letter-spacing:.18em; text-transform:uppercase; color:var(--grey-2); margin:0 0 .7rem;}
.btn{display:inline-flex; align-items:center; justify-content:center; gap:.5rem; font-family:var(--body); font-size:.76rem; font-weight:600; letter-spacing:.08em; text-transform:uppercase; padding:.85rem 1.5rem; border:1px solid transparent; border-radius:2px; cursor:pointer; transition:all .15s ease;}
.btn-ink{background:var(--ink); color:var(--paper);}
.btn-ink:hover{background:var(--ink-2); color:var(--paper);}
.btn-line{background:transparent; border-color:var(--line); color:var(--ink);}
.btn-line:hover{border-color:var(--ink); color:var(--ink);}
.btn-sm{padding:.6rem 1rem; font-size:.7rem;}
/* utility + header */
    .util{background:var(--ink); color:var(--grey);}
.util .container{display:flex; align-items:center; justify-content:space-between; height:36px; font-family:var(--mono); font-size:.68rem; letter-spacing:.1em; text-transform:uppercase;}
.util span{color:var(--grey);}
.util .u-mid{color:var(--brass-hi);}
.site-header{background:var(--paper); border-bottom:1px solid var(--line); position:relative; z-index:5;}
.site-header .container{display:flex; align-items:center; justify-content:space-between; gap:2rem; height:128px;}
.wordmark{display:inline-block; text-align:center;}
.wm-name{display:block; font-family:var(--logo); font-size:3.4rem; font-weight:600; letter-spacing:.005em; line-height:.92; margin-bottom:-.062em; color:var(--ink); font-variation-settings:'wdth' 100;}
.wm-name i{font-style:normal;}
.wm-name i.nx{font-variation-settings:'wdth' 80;}
.wm-lens{display:block; width:96%; height:11px; margin:.16rem auto .2rem; background:var(--ink);
             clip-path:polygon(0 50%, 50% 8.2%, 100% 50%, 50% 91.8%);}
.wm-sub{display:block; font-family:var(--logo); font-size:.895rem; font-weight:600; letter-spacing:.54em; line-height:1; color:var(--ink); padding-left:.54em;}
.site-footer .wm-name{font-size:1.9rem; margin-bottom:-.051em;}
.site-footer .wm-lens{height:7px; background:var(--paper);}
.site-footer .wm-sub{font-size:.5rem; letter-spacing:.54em; padding-left:.54em; color:var(--paper);}
.primary-nav{display:flex; align-items:center; gap:1.45rem; white-space:nowrap;}
.primary-nav a{font-size:.76rem; font-weight:600; letter-spacing:.07em; text-transform:uppercase; color:var(--grey-2); padding-bottom:4px; border-bottom:1px solid transparent;}
.primary-nav a:hover,.primary-nav a.current{color:var(--ink); border-bottom-color:var(--brass);}
.header-actions{display:flex; align-items:center; gap:1rem; color:var(--grey-2);}
.icon-btn{display:inline-flex; align-items:center; gap:.35rem; color:var(--grey-2); background:none; border:0; padding:0; cursor:pointer;}
.icon-btn:hover{color:var(--ink);}
.cart-count{font-family:var(--mono); font-size:.68rem; color:var(--ink);}
/* hero */
    .hero{position:relative; overflow:hidden; background:var(--paper); border-bottom:1px solid var(--line);}
.hero-media{position:absolute; right:0; top:0; bottom:0; width:64%;}
.hero-media img{width:100%; height:100%; object-fit:cover; object-position:54% 52%; display:block;}
.hero-media::after{content:''; position:absolute; inset:0;
      background:linear-gradient(90deg, var(--paper) 0%, rgba(247,245,242,.94) 20%,
                 rgba(247,245,242,.42) 50%, rgba(247,245,242,0) 76%);}
.hero-inner{position:relative; z-index:2; padding:5rem 0 4.75rem; max-width:33rem;}
.hero h1{margin-bottom:.9rem;}
.hero p{color:var(--grey-2); font-size:1rem; margin-bottom:1.6rem; max-width:29rem;}
.hero-actions{display:flex; gap:.75rem;}
.hero-note{position:absolute; right:2rem; bottom:1.5rem; z-index:2; text-align:right;
      font-family:var(--mono); font-size:.66rem; letter-spacing:.1em; text-transform:uppercase; color:var(--grey-2);}
.hero-note b{display:block; font-weight:500; color:var(--ink); letter-spacing:.06em;}
/* category strip */
    .cats{border-bottom:1px solid var(--line); background:var(--paper-2);}
.cat-grid{display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:1px; background:var(--line);}
.cat{background:var(--paper-2); padding:1.4rem 1rem; text-align:center; transition:background .15s ease;}
.cat:hover{background:var(--paper);}
.cat svg{width:44px; height:44px; margin:0 auto .7rem; display:block; color:var(--grey-2);}
.cat:hover svg{color:var(--ink);}
.cat-name{display:block; font-size:.78rem; font-weight:600; letter-spacing:.04em; color:var(--ink);}
.cat-n{display:block; font-family:var(--mono); font-size:.66rem; color:var(--grey); margin-top:.2rem;}
.section{padding:3.25rem 0;}
.sec-head{display:flex; align-items:flex-end; justify-content:space-between; gap:2rem; margin-bottom:1.75rem;}
.sec-head h2{margin:0;}
.link-more{font-family:var(--body); font-size:.72rem; font-weight:600; letter-spacing:.09em; text-transform:uppercase; color:var(--grey-2); border-bottom:1px solid var(--line); padding-bottom:.25rem;}
.link-more:hover{color:var(--ink); border-bottom-color:var(--brass);}
/* finder */
    .finder{border:1px solid var(--line); background:var(--paper); padding:1.75rem;}
.finder-top{display:flex; align-items:baseline; justify-content:space-between; gap:2rem; margin-bottom:1.4rem;}
.finder-top h2{margin:0; font-size:1.4rem;}
.finder-top p{margin:0; font-size:.86rem; color:var(--grey-2);}
.fstep{display:flex; align-items:baseline; gap:.7rem; margin-bottom:.7rem;}
.step-num{font-family:var(--mono); font-size:.68rem; letter-spacing:.14em; color:var(--brass);}
.step-label{font-size:.76rem; font-weight:600; letter-spacing:.06em; text-transform:uppercase;}
.chips{display:flex; flex-wrap:wrap; gap:.45rem; margin-bottom:1.5rem;}
.chip{font-size:.8rem; padding:.5rem .85rem; border:1px solid var(--line); border-radius:2px; background:var(--paper); color:var(--grey-2); cursor:pointer; transition:all .15s ease;}
.chip:hover{border-color:var(--grey); color:var(--ink);}
.chip.on{background:var(--ink); border-color:var(--ink); color:var(--paper);}
.fresult{display:flex; align-items:center; justify-content:space-between; gap:2rem; border-top:1px solid var(--line); padding-top:1.4rem;}
.fr-left{display:flex; align-items:center; gap:1rem;}
.fr-thumb{width:64px; height:64px; flex:none; background:var(--paper-2); border:1px solid var(--line); border-radius:2px; padding:8px;}
.fr-name{font-family:var(--display); font-size:1.1rem; margin:0 0 .15rem;}
.fr-meta{font-family:var(--mono); font-size:.7rem; letter-spacing:.06em; color:var(--grey-2); margin:0;}
.fr-right{display:flex; align-items:center; gap:1.25rem;}
.fr-price{font-family:var(--mono); font-size:1.15rem;}
/* product grid */
    .grid-4{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:1.5rem 1.25rem;}
.card{display:block; position:relative;}
.frame{overflow:hidden; background:var(--paper-2); border:1px solid var(--line); aspect-ratio:1; margin-bottom:.8rem; display:grid; place-items:center; padding:1.5rem; position:relative;}
.frame svg{width:100%; height:100%; filter:grayscale(.85) contrast(1.02); transition:filter .3s ease, transform .4s ease;}
.card:hover .frame svg{filter:grayscale(0) contrast(1); transform:scale(1.03);}
.quick{position:absolute; left:.6rem; right:.6rem; bottom:.6rem; opacity:0; transform:translateY(4px); transition:all .18s ease;}
.card:hover .quick{opacity:1; transform:none;}
.quick .btn{width:100%;}
.tag{position:absolute; top:.55rem; left:.55rem; font-family:var(--mono); font-size:.6rem; letter-spacing:.11em; text-transform:uppercase; padding:.25rem .45rem; background:var(--ink); color:var(--paper); border-radius:2px;}
.tag.alt{background:var(--paper); color:var(--ink); border:1px solid var(--line);}
.card .kicker{font-family:var(--mono); font-size:.63rem; letter-spacing:.13em; text-transform:uppercase; color:var(--grey); display:block; margin-bottom:.28rem;}
.card h3{font-size:.94rem; line-height:1.35; margin-bottom:.4rem;}
.card-foot{display:flex; align-items:baseline; justify-content:space-between; gap:.75rem;}
.price{font-family:var(--mono); font-size:.9rem;}
.guide-flag{display:inline-flex; align-items:center; gap:.28rem; font-family:var(--mono); font-size:.62rem; letter-spacing:.08em; text-transform:uppercase; color:var(--brass);}
/* instructions band */
    .docs{background:var(--ink); color:var(--paper); border-block:1px solid var(--ink-3);}
.docs-inner{padding:3.5rem 0;}
.docs-head{display:flex; align-items:flex-end; justify-content:space-between; gap:2rem; margin-bottom:2rem;}
.docs-head h2{color:var(--paper); margin:0 0 .4rem;}
.docs-head p{color:var(--grey); margin:0; max-width:34rem; font-size:.92rem;}
.docs-head .eyebrow{color:var(--brass-hi);}
.docs-head .link-more{color:var(--grey); border-bottom-color:var(--ink-3);}
.docs-head .link-more:hover{color:var(--paper); border-bottom-color:var(--brass);}
.guide-grid{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:1.25rem;}
.guide-card{border:1px solid var(--ink-3); background:var(--ink-2); padding:1.35rem; display:block;}
.guide-card:hover{border-color:var(--brass);}
.gc-type{font-family:var(--mono); font-size:.62rem; letter-spacing:.13em; text-transform:uppercase; color:var(--brass-hi); display:block; margin-bottom:.7rem;}
.guide-card h3{color:var(--paper); font-size:1.02rem; font-family:var(--display); font-weight:400; letter-spacing:-.01em; line-height:1.25; margin-bottom:.9rem;}
.gc-meta{display:flex; gap:1.25rem; border-top:1px solid var(--ink-3); padding-top:.85rem;}
.gc-meta div{display:flex; flex-direction:column; gap:.15rem;}
.gc-k{font-family:var(--mono); font-size:.6rem; letter-spacing:.11em; text-transform:uppercase; color:var(--grey-2);}
.gc-v{font-family:var(--mono); font-size:.82rem; color:var(--grey);}
/* shop work */
    .work{background:var(--paper-2); border-bottom:1px solid var(--line);}
.work-grid{display:grid; grid-template-columns:1fr 1fr; gap:4rem; align-items:center; padding:3.25rem 0;}
.work h2{margin-bottom:.5rem;}
.work p{color:var(--grey-2); font-size:.95rem; margin-bottom:1.4rem;}
.spec-list{border-top:1px solid var(--line);}
.spec-row{display:flex; justify-content:space-between; gap:2rem; padding:.8rem 0; border-bottom:1px solid var(--line);}
.spec-k{font-family:var(--mono); font-size:.68rem; letter-spacing:.11em; text-transform:uppercase; color:var(--grey-2);}
.spec-v{font-family:var(--mono); font-size:.84rem; text-align:right;}
/* ---- banners ---- */
    .band{position:relative; overflow:hidden; border-block:1px solid var(--line);}
.band-grid{display:grid; grid-template-columns:1fr 1fr; min-height:26rem;}
.band-copy{display:flex; flex-direction:column; justify-content:center; padding:3.25rem clamp(2rem,5vw,4.5rem);}
.band-copy h2{margin:0 0 .7rem;}
.band-copy p{margin:0 0 1.5rem; max-width:26rem; font-size:.97rem;}
.band-media{position:relative; overflow:hidden; background:var(--paper-2);}
.band-media img{width:100%; height:100%; object-fit:cover; display:block;}
.band-media.contain{background:#fff;}
.band-media.contain img{object-fit:contain; padding:1.5rem;}
.band.on-ink{background:var(--ink); color:var(--paper); border-color:var(--ink-3);}
.band.on-ink h2{color:var(--paper);}
.band.on-ink p{color:var(--grey);}
.band.on-ink .eyebrow{color:var(--brass-hi);}
.band.on-ink .btn-ink{background:var(--paper); color:var(--ink);}
.band.on-ink .btn-ink:hover{background:var(--brass-hi);}
.band.flip .band-media{order:-1;}
.band-stat{display:flex; gap:2.25rem; margin-bottom:1.6rem; padding-top:1.1rem; border-top:1px solid var(--ink-3);}
.band.on-paper .band-stat{border-top-color:var(--line);}
.band-stat div{display:flex; flex-direction:column; gap:.2rem;}
.bs-k{font-family:var(--mono); font-size:.6rem; letter-spacing:.13em; text-transform:uppercase; color:var(--grey-2);}
.bs-v{font-family:var(--mono); font-size:.88rem;}
.band.on-ink .bs-v{color:var(--paper);}
/* footer */
    .site-footer{background:var(--ink); color:var(--grey); padding:3.25rem 0 1.75rem; font-size:.86rem;}
.footer-grid{display:grid; grid-template-columns:1.4fr repeat(4,1fr); gap:2.5rem; margin-bottom:2.5rem;}
.footer-grid h4{font-family:var(--mono); font-size:.66rem; letter-spacing:.14em; text-transform:uppercase; color:var(--brass-hi); margin:0 0 .9rem;}
.footer-grid ul{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:.5rem;}
.footer-grid a{color:var(--grey);}
.footer-grid a:hover{color:var(--paper);}
.footer-grid .wm-name{color:var(--paper);}
.footer-bottom{border-top:1px solid var(--ink-3); padding-top:1.25rem; display:flex; justify-content:space-between; flex-wrap:wrap; gap:1rem; font-family:var(--mono); font-size:.66rem; letter-spacing:.06em; color:var(--grey-2);}
/* ---- responsive ------------------------------------------------ */
    .nav-toggle{display:none; align-items:center; gap:.45rem; background:none; border:1px solid var(--line);
                border-radius:2px; padding:.5rem .7rem; color:var(--ink); cursor:pointer;
                font-family:var(--mono); font-size:.64rem; letter-spacing:.12em; text-transform:uppercase;}
@media (max-width:1180px){
      .primary-nav{gap:1.1rem;}
      .primary-nav a{font-size:.72rem;}
      .wm-name{font-size:2.7rem;}
    }
@media (max-width:1024px){
      .grid-4{grid-template-columns:repeat(3,minmax(0,1fr));}
      .cat-grid{grid-template-columns:repeat(3,minmax(0,1fr));}
      .footer-grid{grid-template-columns:repeat(3,minmax(0,1fr));}
      .layout{grid-template-columns:1fr; gap:2rem;}
      .rail{position:static;}
      .band-grid{min-height:0;}
    }
@media (max-width:820px){
      .container{padding:0 1.25rem;}
      .site-header .container{height:96px;}
      .wm-name{font-size:2.1rem;}
      .wm-sub{font-size:.56rem; letter-spacing:.4em; padding-left:.4em;}
      .primary-nav{display:none;}
      .nav-toggle{display:inline-flex;}
      .util .container{height:auto; padding:.4rem 1.25rem; font-size:.6rem;}
      .util span:nth-child(2){display:none;}

      .hero-inner{padding:2.5rem 0 2.75rem; max-width:none;}
      .hero-media{position:relative; width:100%; height:210px;}
      .hero-media::after{background:linear-gradient(180deg, rgba(19,18,17,.15), rgba(19,18,17,.9));}
      .hero h1{font-size:1.85rem;}
      .hero-note{position:static; text-align:left; padding:0 1.25rem 1.25rem;}

      .grid-4{grid-template-columns:repeat(2,minmax(0,1fr)); gap:1.1rem .8rem;}
      .grid-3{grid-template-columns:repeat(2,minmax(0,1fr));}
      .cat-grid{grid-template-columns:repeat(2,minmax(0,1fr));}
      .footer-grid{grid-template-columns:repeat(2,minmax(0,1fr)); gap:1.75rem;}

      .pdp{grid-template-columns:1fr; gap:1.75rem; padding:1.5rem 0 2rem;}
      .specs-grid{grid-template-columns:1fr; gap:1.5rem;}
      .work-grid{grid-template-columns:1fr; gap:1.75rem; padding:2.25rem 0;}
      .band-grid{grid-template-columns:1fr;}
      .band.flip .band-media{order:0;}
      .band-copy{padding:2rem 1.25rem;}
      .band-media{min-height:230px;}
      .step-body{grid-template-columns:1fr; gap:1rem;}
      .shot{max-width:260px;}
      .finder{padding:1.1rem;}
      .finder-top,.docs-head,.sec-head,.arrival-heading{flex-direction:column; align-items:flex-start; gap:.6rem;}
      .guide-grid{grid-template-columns:1fr;}
      .th-grid{grid-template-columns:repeat(2,minmax(0,1fr));}
      .toolbar .container{height:auto; padding-top:.7rem; padding-bottom:.7rem; flex-wrap:wrap; gap:.6rem;}
      .fresult{flex-direction:column; align-items:flex-start; gap:1rem;}
      .more-steps{flex-direction:column; align-items:flex-start; gap:.9rem;}
      h1{font-size:1.85rem;} h2{font-size:1.3rem;}
      .section{padding:2.25rem 0;}
    }
@media (max-width:820px){
      /* both duplicate what the nav already offers — cut on a 10,000px scroll */
      .cats{display:none;}
      .finder-section{display:none;}
    }
@media (max-width:440px){
      .grid-4,.grid-3{grid-template-columns:1fr;}
      .cat-grid{grid-template-columns:repeat(2,minmax(0,1fr));}
      .footer-grid{grid-template-columns:1fr;}
      .thumbs{grid-template-columns:repeat(4,1fr);}
      .buyrow{grid-template-columns:1fr; gap:.5rem;}
      .qty{justify-self:start; min-width:120px;}
      .th-grid{grid-template-columns:1fr;}
      .gmeta{flex-wrap:wrap; gap:1rem 1.5rem;}
      .band-stat,.spec-row{flex-wrap:wrap;}
    }
::selection{background:var(--brass); color:var(--paper);}
:root{
      --ink:#131211; --ink-2:#1e1c1a; --ink-3:#332f2b;
      --paper:#f7f5f2; --paper-2:#eeebe6; --line:#ddd8d1;
      --grey:#8d8781; --grey-2:#5d5852;
      --brass:#9a7b3d; --brass-hi:#c0a066; --danger:#8c3a2e;
      --container:78rem;
      --marquee:'Peignot','Young Serif',Georgia,serif;
      --display:'Young Serif',Georgia,'Times New Roman',serif;
      --body:'IBM Plex Sans',system-ui,-apple-system,'Segoe UI',sans-serif;
      --mono:'IBM Plex Mono',ui-monospace,'SF Mono',Menlo,monospace;
      --logo:'Archivo','Helvetica Neue',Helvetica,Arial,sans-serif;
    }
h1,h2,h3{font-family:var(--display); font-weight:400; line-height:1.12; letter-spacing:-.008em; margin:0 0 .6rem;}
h1{font-size:2.3rem;}
h3{font-size:.94rem; font-family:var(--body); font-weight:600; letter-spacing:0;}
.btn-line:hover{border-color:var(--ink);}
.util{background:var(--ink); color:var(--grey);}
.site-header{background:var(--paper); border-bottom:1px solid var(--line);}
.chead{border-bottom:1px solid var(--line); background:var(--paper-2); padding:2.25rem 0;}
.crumb{font-family:var(--mono); font-size:.68rem; letter-spacing:.11em; text-transform:uppercase; color:var(--grey-2); margin:0 0 .9rem;}
.crumb s{color:var(--line); margin:0 .5rem; text-decoration:none;}
.chead h1{margin:0 0 .5rem;}
.chead p{max-width:44rem; color:var(--grey-2); font-size:.95rem; margin:0;}
.toolbar{border-bottom:1px solid var(--line);}
.toolbar .container{display:flex; align-items:center; justify-content:space-between; height:60px; gap:2rem;}
.count{font-family:var(--mono); font-size:.74rem; letter-spacing:.07em; color:var(--grey-2);}
.tools-right{display:flex; align-items:center; gap:1.5rem;}
.toggle{display:flex; align-items:center; gap:.55rem; font-family:var(--mono); font-size:.7rem; letter-spacing:.09em; text-transform:uppercase; color:var(--grey-2); cursor:pointer;}
.sw{width:30px; height:16px; border-radius:9px; background:var(--ink); position:relative; flex:none;}
.sw::after{content:''; position:absolute; top:2px; right:2px; width:12px; height:12px; border-radius:50%; background:var(--paper);}
.sortbox{display:inline-flex; align-items:center; gap:.6rem; font-size:.84rem; border:1px solid var(--line); border-radius:2px; padding:.45rem .8rem;}
.layout{display:grid; grid-template-columns:212px minmax(0,1fr); gap:2.75rem; padding:2.25rem 0 3rem;}
.facet{margin-bottom:1.9rem;}
.facet h4{font-family:var(--mono); font-size:.66rem; letter-spacing:.14em; text-transform:uppercase; color:var(--grey-2); margin:0 0 .8rem; padding-bottom:.55rem; border-bottom:1px solid var(--line);}
.facet ul{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:.55rem;}
.facet li{display:flex; align-items:center; justify-content:space-between; gap:.7rem; font-size:.87rem; color:var(--grey-2); cursor:pointer;}
.facet li:hover{color:var(--ink);}
.fbox{display:flex; align-items:center; gap:.55rem;}
.box{width:13px; height:13px; flex:none; border:1px solid var(--grey); border-radius:2px;}
.box.on{background:var(--ink); border-color:var(--ink); position:relative;}
.box.on::after{content:''; position:absolute; left:3.5px; top:.5px; width:4px; height:8px; border:solid var(--paper); border-width:0 1.6px 1.6px 0; transform:rotate(42deg);}
.fcount{font-family:var(--mono); font-size:.7rem; color:var(--grey);}
.active-filters{display:flex; flex-wrap:wrap; gap:.45rem; margin-bottom:1.4rem;}
.pill{display:inline-flex; align-items:center; gap:.45rem; font-size:.75rem; padding:.38rem .65rem; border:1px solid var(--ink); background:var(--ink); color:var(--paper); border-radius:2px;}
.pill-clear{border-color:var(--line); background:transparent; color:var(--grey-2);}
.grid-4{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:1.5rem 1.25rem;}
.frame{overflow:hidden; background:var(--paper-2); border:1px solid var(--line); aspect-ratio:1; margin-bottom:.75rem; display:grid; place-items:center; padding:1.4rem; position:relative;}
.card:hover .frame svg{filter:grayscale(0); transform:scale(1.03);}
.quick{position:absolute; left:.55rem; right:.55rem; bottom:.55rem; opacity:0; transform:translateY(4px); transition:all .18s ease;}
.tag{position:absolute; top:.5rem; left:.5rem; font-family:var(--mono); font-size:.58rem; letter-spacing:.11em; text-transform:uppercase; padding:.22rem .42rem; background:var(--ink); color:var(--paper); border-radius:2px;}
.kicker{font-family:var(--mono); font-size:.62rem; letter-spacing:.13em; text-transform:uppercase; color:var(--grey); display:block; margin-bottom:.26rem;}
.card h3{line-height:1.35; margin-bottom:.38rem;}
.card-foot{display:flex; align-items:baseline; justify-content:space-between; gap:.7rem;}
.price{font-family:var(--mono); font-size:.88rem;}
.guide-flag{display:inline-flex; align-items:center; gap:.26rem; font-family:var(--mono); font-size:.61rem; letter-spacing:.08em; text-transform:uppercase; color:var(--brass);}
.pager{display:flex; align-items:center; justify-content:center; gap:.4rem; padding:2rem 0 0;}
.pg{font-family:var(--mono); font-size:.78rem; min-width:34px; height:34px; display:grid; place-items:center; border:1px solid var(--line); border-radius:2px; color:var(--grey-2);}
.pg.on{background:var(--ink); border-color:var(--ink); color:var(--paper);}
.site-footer{background:var(--ink); color:var(--grey); padding:3.25rem 0 1.75rem; font-size:.86rem;}
h1{font-size:2.1rem;}
h2{font-size:1.4rem;}
h3{font-size:.95rem; font-family:var(--body); font-weight:600; letter-spacing:0;}
.eyebrow{font-family:var(--mono); font-size:.66rem; font-weight:500; letter-spacing:.18em; text-transform:uppercase; color:var(--grey-2); margin:0 0 .7rem;}
.btn{display:inline-flex; align-items:center; justify-content:center; gap:.5rem; font-family:var(--body); font-size:.76rem; font-weight:600; letter-spacing:.08em; text-transform:uppercase; padding:.9rem 1.5rem; border:1px solid transparent; border-radius:2px; cursor:pointer; transition:all .15s ease;}
.crumbbar{border-bottom:1px solid var(--line);}
.crumbbar .container{height:52px; display:flex; align-items:center;}
.crumb{font-family:var(--mono); font-size:.68rem; letter-spacing:.11em; text-transform:uppercase; color:var(--grey-2); margin:0;}
.pdp{display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr); gap:3.5rem; padding:2.5rem 0 3rem;}
.gmain{background:var(--paper-2); border:1px solid var(--line); aspect-ratio:1; display:grid; place-items:center; padding:3rem; margin-bottom:.65rem;}
.gmain svg{width:100%; height:100%;}
.thumbs{display:grid; grid-template-columns:repeat(5,1fr); gap:.6rem;}
.thumb{background:var(--paper-2); border:1px solid var(--line); aspect-ratio:1; display:grid; place-items:center; padding:.85rem; cursor:pointer;}
.thumb.on{border-color:var(--ink);}
.thumb svg{width:100%; height:100%;}
.price{font-family:var(--mono); font-size:1.7rem; display:block; margin:.3rem 0 .25rem;}
.rating{display:flex; align-items:center; gap:.55rem; font-family:var(--mono); font-size:.72rem; color:var(--grey-2); margin-bottom:1.4rem;}
.stars{color:var(--grey); letter-spacing:.14em;}
.short{color:var(--grey-2); border-top:1px solid var(--line); padding-top:1.3rem; margin-bottom:1.6rem; font-size:.95rem;}
/* ---- variant tiers ---- */
    .tiers{display:flex; flex-direction:column; gap:.5rem; margin:1.3rem 0 1.1rem;}
.tier{display:grid; grid-template-columns:16px minmax(0,1fr) auto; gap:.85rem; align-items:start;
          border:1px solid var(--line); border-radius:2px; padding:.85rem 1rem; cursor:pointer;
          transition:border-color .15s ease;}
.tier:hover{border-color:var(--grey);}
.tier.on{border-color:var(--ink); box-shadow:inset 0 0 0 1px var(--ink);}
.radio{width:15px; height:15px; border-radius:50%; border:1px solid var(--grey); margin-top:.18rem; position:relative;}
.tier.on .radio{border-color:var(--ink);}
.tier.on .radio::after{content:''; position:absolute; inset:3px; border-radius:50%; background:var(--ink);}
.tier-name{font-weight:600; font-size:.92rem; display:block; margin-bottom:.12rem;}
.tier-desc{font-size:.845rem; color:var(--grey-2); margin:0; line-height:1.45;}
.tier-price{font-family:var(--mono); font-size:.95rem; white-space:nowrap; padding-top:.05rem;}
.tier-badge{font-family:var(--mono); font-size:.56rem; letter-spacing:.11em; text-transform:uppercase;
                background:var(--ink); color:var(--paper); padding:.14rem .36rem; border-radius:2px; margin-left:.45rem; vertical-align:.12em;}
.optlabel{display:flex; align-items:baseline; justify-content:space-between; gap:1rem; margin-bottom:.55rem;}
.optlabel .k{font-family:var(--mono); font-size:.68rem; letter-spacing:.14em; text-transform:uppercase; color:var(--ink);}
.optlabel .v{font-family:var(--mono); font-size:.72rem; color:var(--grey-2);}
.buyrow{display:grid; grid-template-columns:104px minmax(0,1fr); gap:.65rem; margin-bottom:.65rem;}
.qty{display:flex; align-items:center; justify-content:space-between; border:1px solid var(--line); border-radius:2px; padding:0 .75rem;}
.qty button{background:none; border:0; color:var(--grey-2); font-size:1rem; cursor:pointer; padding:.55rem .2rem;}
.qty span{font-family:var(--mono); font-size:.9rem;}
.addon{display:flex; align-items:center; gap:.65rem; border:1px solid var(--line); border-radius:2px; padding:.8rem .9rem; margin:1rem 0 1.1rem; font-size:.88rem; color:var(--grey-2);}
.addon .box{width:14px; height:14px; border:1px solid var(--grey); border-radius:2px; flex:none;}
.addon strong{color:var(--ink); font-weight:600;}
.avail{display:flex; align-items:center; gap:.5rem; font-family:var(--mono); font-size:.72rem; letter-spacing:.06em; color:var(--grey-2); margin-bottom:1.6rem;}
.dot{width:6px; height:6px; border-radius:50%; background:var(--ink); flex:none;}
/* the guide callout — the piece that answers "can I actually do this?" */
    .gcall{border:1px solid var(--ink); background:var(--ink); color:var(--paper); padding:1.3rem; margin-bottom:1.5rem;}
.gcall .eyebrow{color:var(--brass-hi); margin-bottom:.55rem;}
.gcall h3{font-family:var(--display); font-weight:400; font-size:1.08rem; color:var(--paper); margin-bottom:1rem; letter-spacing:-.01em;}
.gcall-meta{display:flex; gap:1.6rem; border-top:1px solid var(--ink-3); border-bottom:1px solid var(--ink-3); padding:.85rem 0; margin-bottom:1rem;}
.gcall-meta div{display:flex; flex-direction:column; gap:.15rem;}
.gm-k{font-family:var(--mono); font-size:.59rem; letter-spacing:.12em; text-transform:uppercase; color:var(--grey-2);}
.gm-v{font-family:var(--mono); font-size:.84rem; color:var(--paper);}
.gcall .btn-line{border-color:rgba(247,245,242,.3); color:var(--paper); width:100%;}
.gcall .btn-line:hover{background:var(--paper); color:var(--ink);}
.acc{border-top:1px solid var(--line);}
.acc-item{border-bottom:1px solid var(--line);}
.acc-sum{display:flex; align-items:center; justify-content:space-between; gap:1rem; padding:1rem 0; font-family:var(--display); font-size:1rem; cursor:pointer;}
.acc-sum .pm{color:var(--grey); font-family:var(--body); font-size:1.05rem;}
.acc-body{padding-bottom:1.2rem; color:var(--grey-2); font-size:.92rem;}
.acc-body ul{margin:0; padding-left:1.1rem; display:flex; flex-direction:column; gap:.35rem;}
.specs{background:var(--paper-2); border-block:1px solid var(--line); padding:3rem 0;}
.specs-grid{display:grid; grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr); gap:4rem; align-items:start;}
.specs p{color:var(--grey-2); font-size:.95rem; max-width:26rem;}
.section{padding:3rem 0;}
.frame{overflow:hidden; background:var(--paper-2); border:1px solid var(--line); aspect-ratio:1; margin-bottom:.75rem; display:grid; place-items:center; padding:1.4rem;}
.frame svg{width:100%; height:100%; filter:grayscale(.85); transition:filter .3s ease, transform .4s ease;}
.cprice{font-family:var(--mono); font-size:.88rem;}
.swatches{display:flex; flex-wrap:wrap; gap:.5rem; margin-bottom:1.5rem;}
.sw-opt{font-family:var(--mono); font-size:.92rem; min-width:62px; text-align:center;
            padding:.62rem .9rem; border:1px solid var(--line); border-radius:2px; cursor:pointer;
            color:var(--grey-2); position:relative; transition:all .15s ease;}
.sw-opt:hover{border-color:var(--grey); color:var(--ink);}
.sw-opt.on{background:var(--ink); border-color:var(--ink); color:var(--paper);}
.sw-opt.out{color:var(--grey); border-style:dashed; cursor:not-allowed;}
.sw-opt.out::after{content:''; position:absolute; left:8%; right:8%; top:50%;
                       border-top:1px solid var(--grey); transform:rotate(-11deg);}
.xsell{border:1px solid var(--ink); background:var(--ink); color:var(--paper);
           padding:1rem 1.1rem; border-radius:2px; margin-bottom:1.4rem;}
.xsell p{margin:0 0 .8rem; font-size:.9rem; color:var(--grey);}
.xsell .eyebrow{color:var(--brass-hi); margin-bottom:.5rem;}
.xsell .btn-line{border-color:rgba(247,245,242,.32); color:var(--paper); width:100%;}
.xsell .btn-line:hover{background:var(--paper); color:var(--ink);}
.gmain img{width:100%; height:100%; object-fit:contain; display:block;}
.thumb img{width:100%; height:100%; object-fit:contain; display:block;}
.thermal{background:var(--ink); color:var(--paper); border-block:1px solid var(--ink-3); padding:3.25rem 0;}
.thermal .eyebrow{color:var(--brass-hi);}
.thermal h2{color:var(--paper); margin:0 0 .5rem;}
.thermal .lede{color:var(--grey); max-width:34rem; font-size:.96rem; margin:0 0 2rem;}
.th-grid{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:1rem;}
.th{border:1px solid var(--ink-3); background:#0d0b09; overflow:hidden;}
.th img{width:100%; height:auto; display:block;}
.th figcaption{display:flex; align-items:baseline; justify-content:space-between; gap:.6rem;
      font-family:var(--mono); font-size:.66rem; letter-spacing:.08em; text-transform:uppercase;
      color:var(--grey-2); padding:.6rem .7rem;}
.th figcaption b{color:var(--brass-hi); font-weight:500;}
@media (max-width:900px){ .th-grid{grid-template-columns:repeat(2,minmax(0,1fr));} }
.ghero{border-bottom:1px solid var(--line); background:var(--paper-2); padding:2.5rem 0;}
.ghero p.lede{max-width:44rem; color:var(--grey-2); font-size:.98rem; margin:0;}
.masonry{column-count:4; column-gap:1rem; padding:2.5rem 0 3rem;}
.mtile{display:block; width:100%; margin:0 0 1rem; padding:0; border:1px solid var(--line);
            background:var(--paper-2); cursor:zoom-in; break-inside:avoid; line-height:0;
            transition:border-color .15s ease;}
.mtile:hover{border-color:var(--ink);}
.mtile img{width:100%; height:auto; display:block; filter:grayscale(.82) contrast(1.02);
                transition:filter .35s ease;}
.mtile:hover img{filter:grayscale(0) contrast(1);}
@media (max-width:1100px){ .masonry{column-count:3;} }
@media (max-width:760px){ .masonry{column-count:2;} }
.lb{position:fixed; inset:0; z-index:60; background:rgba(19,18,17,.96);
         display:grid; grid-template-rows:auto 1fr auto; padding:1.25rem;}
.lb .slide{display:none; max-width:100%; max-height:100%; margin:auto; object-fit:contain;}
.lb-stage{display:grid; place-items:center; min-height:0;}
.lb[data-n="1"] .slide:nth-of-type(1){display:block;}
.lb[data-n="2"] .slide:nth-of-type(2){display:block;}
.lb[data-n="3"] .slide:nth-of-type(3){display:block;}
.lb[data-n="4"] .slide:nth-of-type(4){display:block;}
.lb[data-n="5"] .slide:nth-of-type(5){display:block;}
.lb[data-n="6"] .slide:nth-of-type(6){display:block;}
.lb[data-n="7"] .slide:nth-of-type(7){display:block;}
.lb[data-n="8"] .slide:nth-of-type(8){display:block;}
.lb[data-n="9"] .slide:nth-of-type(9){display:block;}
.lb[data-n="10"] .slide:nth-of-type(10){display:block;}
.lb[data-n="11"] .slide:nth-of-type(11){display:block;}
.lb[data-n="12"] .slide:nth-of-type(12){display:block;}
.lb[data-n="13"] .slide:nth-of-type(13){display:block;}
.lb[data-n="14"] .slide:nth-of-type(14){display:block;}
.lb-bar{display:flex; align-items:center; justify-content:space-between; gap:1rem;
             font-family:var(--mono); font-size:.7rem; letter-spacing:.12em;
             text-transform:uppercase; color:var(--grey);}
.lb-btn{background:none; border:1px solid var(--ink-3); color:var(--paper);
             font-family:var(--mono); font-size:.7rem; letter-spacing:.12em; text-transform:uppercase;
             padding:.55rem 1rem; border-radius:2px; cursor:pointer;}
.lb-btn:hover{background:var(--paper); color:var(--ink);}
.lb-nav{display:flex; gap:.5rem;}
.lb-cap{color:var(--grey-2);}
:root{
      --ink:#131211; --ink-2:#1e1c1a; --ink-3:#332f2b;
      --paper:#f7f5f2; --paper-2:#eeebe6; --line:#ddd8d1;
      --grey:#8d8781; --grey-2:#5d5852;
      --brass:#9a7b3d; --brass-hi:#c0a066;
      --danger:#8c3a2e;
      --container:78rem;
      --marquee:'Peignot','Young Serif',Georgia,serif;
      --display:'Young Serif',Georgia,'Times New Roman',serif;
      --body:'IBM Plex Sans',system-ui,-apple-system,'Segoe UI',sans-serif;
      --mono:'IBM Plex Mono',ui-monospace,'SF Mono',Menlo,monospace;
      --logo:'Archivo','Helvetica Neue',Helvetica,Arial,sans-serif;
    }
h2{font-size:1.35rem;}
/* guide header */
    .ghead{border-bottom:1px solid var(--line); background:var(--paper-2); padding:2.5rem 0;}
.ghead h1{max-width:24ch;}
.gmeta{display:flex; gap:2.5rem; margin-top:1.5rem; padding-top:1.25rem; border-top:1px solid var(--line);}
.gmeta div{display:flex; flex-direction:column; gap:.2rem;}
.gm-k{font-family:var(--mono); font-size:.62rem; letter-spacing:.13em; text-transform:uppercase; color:var(--grey);}
.gm-v{font-family:var(--mono); font-size:.92rem; color:var(--ink);}
.rev{font-family:var(--mono); font-size:.66rem; letter-spacing:.08em; color:var(--grey); margin-top:1.1rem;}
/* layout */
    .layout{display:grid; grid-template-columns:minmax(0,1fr) 306px; gap:3.5rem; padding:2.75rem 0 3.5rem; align-items:start;}
.step{border-top:1px solid var(--line); padding:2rem 0;}
.step:first-child{border-top:0; padding-top:.25rem;}
.step-head{display:flex; align-items:baseline; gap:.9rem; margin-bottom:1.1rem;}
.step-n{font-family:var(--mono); font-size:.74rem; letter-spacing:.1em; color:var(--paper); background:var(--ink); border-radius:2px; padding:.2rem .5rem; flex:none;}
.step-head h2{margin:0;}
.step-body{display:grid; grid-template-columns:230px minmax(0,1fr); gap:1.75rem; align-items:start;}
.shot{background:var(--paper-2); border:1px solid var(--line); aspect-ratio:4/3; display:grid; place-items:center; color:var(--grey);}
.shot span{font-family:var(--mono); font-size:.6rem; letter-spacing:.1em; text-transform:uppercase; margin-top:.5rem; display:block; text-align:center;}
ul.lines{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:.7rem;}
ul.lines li{display:grid; grid-template-columns:16px minmax(0,1fr); gap:.7rem; font-size:.93rem; line-height:1.55;}
.bl{width:9px; height:9px; border-radius:50%; margin-top:.42rem; background:var(--ink);}
.bl.warn{background:var(--brass);}
.bl.caution{background:var(--danger); border-radius:1px; transform:rotate(45deg); width:10px; height:10px;}
.bl.note{background:transparent; border:1.5px solid var(--grey); }
li.caution{color:var(--danger); font-weight:500;}
li.warn{font-weight:500;}
.inline-buy{margin-top:.6rem; font-family:var(--mono); font-size:.8rem;}
.inline-buy a{color:var(--brass); border-bottom:1px solid var(--line);}
.more-steps{border-top:1px solid var(--line); padding:1.75rem 0; display:flex; align-items:center; justify-content:space-between; gap:2rem;}
.more-steps p{margin:0; color:var(--grey-2); font-size:.9rem;}
/* rail */
    .rail{position:sticky; top:1.5rem; display:flex; flex-direction:column; gap:1.25rem;}
.rcard{border:1px solid var(--line); background:var(--paper);}
.rcard-top{padding:1.1rem 1.1rem .9rem; border-bottom:1px solid var(--line);}
.rcard h3{font-family:var(--mono); font-size:.66rem; letter-spacing:.14em; text-transform:uppercase; color:var(--grey-2); margin:0;}
.rcard-body{padding:1.1rem;}
.kit-row{display:flex; gap:.85rem; align-items:flex-start; margin-bottom:1rem;}
.kit-thumb{width:60px; height:60px; flex:none; background:var(--paper-2); border:1px solid var(--line); padding:8px;}
.kit-name{font-family:var(--display); font-size:1.02rem; line-height:1.2; margin:0 0 .2rem;}
.kit-price{font-family:var(--mono); font-size:1.05rem;}
.avail{display:flex; align-items:center; gap:.45rem; font-family:var(--mono); font-size:.68rem; letter-spacing:.06em; color:var(--grey-2); margin-top:.8rem;}
ul.plain{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:.5rem;}
ul.plain li{display:flex; align-items:center; justify-content:space-between; gap:.75rem; font-size:.85rem; color:var(--grey-2);}
ul.plain li .chk{width:13px; height:13px; border:1px solid var(--line); border-radius:2px; flex:none;}
.lrow{display:flex; align-items:center; gap:.6rem;}
.parts li{font-family:var(--mono); font-size:.78rem; color:var(--grey-2); display:block;}
.ihead{border-bottom:1px solid var(--line); background:var(--paper-2); padding:2.5rem 0;}
.ihead p.lede{max-width:46rem; color:var(--grey-2); font-size:.97rem; margin:0;}
.istats{display:flex; gap:2.5rem; margin-top:1.5rem; padding-top:1.2rem; border-top:1px solid var(--line);}
.istats div{display:flex; flex-direction:column; gap:.2rem;}
.is-k{font-family:var(--mono); font-size:.62rem; letter-spacing:.13em; text-transform:uppercase; color:var(--grey);}
.is-v{font-family:var(--mono); font-size:1.05rem;}
.ibar{border-bottom:1px solid var(--line);}
.ibar .container{display:flex; gap:.5rem; align-items:center; height:58px; flex-wrap:wrap;}
.ichip{font-size:.8rem; padding:.45rem .85rem; border:1px solid var(--line); border-radius:2px; color:var(--grey-2); cursor:pointer;}
.ichip.on{background:var(--ink); border-color:var(--ink); color:var(--paper);}
.gsec{font-size:1.25rem; margin:2.25rem 0 .9rem; display:flex; align-items:baseline; gap:.6rem;}
.gsec span{font-family:var(--mono); font-size:.8rem; color:var(--grey);}
.glist{list-style:none; margin:0; padding:0; border-top:1px solid var(--line);}
.grow{border-bottom:1px solid var(--line);}
.grow a{display:grid; grid-template-columns:200px minmax(0,1fr) 260px; gap:1.25rem;
            align-items:baseline; padding:.85rem .2rem; color:inherit;}
.grow a:hover{background:var(--paper-2); color:var(--ink);}
.gcat{font-family:var(--mono); font-size:.66rem; letter-spacing:.1em; text-transform:uppercase; color:var(--grey);}
.gname{font-size:.95rem;}
.tag-disc{font-family:var(--mono); font-size:.58rem; letter-spacing:.1em; text-transform:uppercase;
              color:var(--danger); border:1px solid var(--danger); border-radius:2px; padding:.06rem .3rem; margin-left:.5rem;}
.gmeta{display:flex; gap:1.1rem; justify-content:flex-end; font-family:var(--mono); font-size:.72rem; color:var(--grey-2);}
.gmeta b{font-weight:500; color:var(--ink);}
.gmeta i{font-style:normal;}
.gmeta s{text-decoration:none; color:var(--grey);}
@media (max-width:820px){
      .grow a{grid-template-columns:1fr; gap:.3rem; padding:.9rem .2rem;}
      .gmeta{justify-content:flex-start;}
      .istats{flex-wrap:wrap; gap:1rem 2rem;}
    }
/* ---- cart drawer ---- */
    .drawer{position:absolute; top:0; right:0; bottom:0; width:400px; background:var(--paper);
            border-left:1px solid var(--line); z-index:40; display:flex; flex-direction:column;}
.dr-top{display:flex; align-items:center; justify-content:space-between; gap:1rem;
            padding:1.1rem 1.25rem; border-bottom:1px solid var(--line);}
.dr-top h2{margin:0; font-size:1.1rem;}
.dr-close{background:none; border:0; cursor:pointer; color:var(--grey-2); font-family:var(--mono);
              font-size:.66rem; letter-spacing:.12em; text-transform:uppercase;}
.dr-body{flex:1; overflow:auto; padding:1.1rem 1.25rem;}
.ci{display:grid; grid-template-columns:64px minmax(0,1fr) auto; gap:.9rem; padding:.9rem 0;
        border-bottom:1px solid var(--line); align-items:start;}
.ci-th{background:var(--paper-2); border:1px solid var(--line); aspect-ratio:1; display:grid; place-items:center; padding:6px;}
.ci-th svg{width:100%; height:100%;}
.ci-name{font-size:.9rem; font-weight:600; display:block; margin-bottom:.15rem;}
.ci-var{font-family:var(--mono); font-size:.68rem; letter-spacing:.06em; color:var(--grey-2); display:block;}
.ci-qty{display:inline-flex; align-items:center; gap:.55rem; border:1px solid var(--line);
            border-radius:2px; padding:.15rem .45rem; margin-top:.5rem; font-family:var(--mono); font-size:.75rem;}
.ci-qty button{background:none;border:0;color:var(--grey-2);cursor:pointer;font-size:.9rem;line-height:1;padding:0 .1rem;}
.ci-price{font-family:var(--mono); font-size:.85rem; text-align:right; white-space:nowrap;}
.ci-rm{display:block; font-family:var(--mono); font-size:.62rem; letter-spacing:.08em;
           text-transform:uppercase; color:var(--grey); margin-top:.4rem; cursor:pointer;}
.dr-add{border:1px solid var(--line); border-radius:2px; padding:.8rem .9rem; margin-top:1rem;
            display:flex; align-items:center; gap:.65rem; font-size:.86rem; color:var(--grey-2);}
.dr-add .box{width:14px;height:14px;border:1px solid var(--grey);border-radius:2px;flex:none;}
.dr-add strong{color:var(--ink); font-weight:600;}
.dr-foot{border-top:1px solid var(--line); padding:1.1rem 1.25rem;}
.dr-line{display:flex; justify-content:space-between; font-family:var(--mono); font-size:.78rem;
             color:var(--grey-2); margin-bottom:.45rem;}
.dr-total{display:flex; justify-content:space-between; align-items:baseline;
              font-family:var(--mono); font-size:1.05rem; color:var(--ink); margin:.6rem 0 .9rem;}
.dr-note{font-family:var(--mono); font-size:.64rem; letter-spacing:.06em; color:var(--grey); margin:.7rem 0 0; text-align:center;}
/* ---- search overlay ---- */
    .srch{position:absolute; left:0; right:0; top:0; background:var(--paper);
          border-bottom:1px solid var(--line); z-index:40; padding:1.25rem 0 1.5rem;}
.srch-in{display:flex; align-items:center; gap:.9rem; border-bottom:1px solid var(--ink); padding-bottom:.7rem;}
.srch-in input{flex:1; border:0; outline:0; background:none; font-family:var(--display);
                   font-size:1.7rem; color:var(--ink);}
.srch-in .esc{font-family:var(--mono); font-size:.64rem; letter-spacing:.12em; text-transform:uppercase;
                  color:var(--grey-2); border:1px solid var(--line); border-radius:2px; padding:.3rem .5rem;}
.srch-cols{display:grid; grid-template-columns:1fr 1fr 1fr; gap:2.25rem; margin-top:1.5rem;}
.srch-cols h4{font-family:var(--mono); font-size:.64rem; letter-spacing:.14em; text-transform:uppercase;
                  color:var(--grey); margin:0 0 .8rem;}
.sres{display:flex; align-items:center; gap:.75rem; padding:.5rem 0; border-bottom:1px solid var(--line);}
.sres-th{width:38px;height:38px;flex:none;background:var(--paper-2);border:1px solid var(--line);}
.sres b{display:block;font-size:.86rem;font-weight:600;}
.sres span{font-family:var(--mono);font-size:.68rem;color:var(--grey-2);}
.sres .pr{margin-left:auto;font-family:var(--mono);font-size:.8rem;}
.sg{display:flex;align-items:baseline;gap:.6rem;padding:.45rem 0;border-bottom:1px solid var(--line);font-size:.85rem;}
.sg i{font-style:normal;font-family:var(--mono);font-size:.66rem;color:var(--grey);margin-left:auto;}
@media (max-width:820px){ .drawer{width:100%;} .srch-cols{grid-template-columns:1fr; gap:1.25rem;} }
/* Peignot — A.M. Cassandre, 1937. Digitised by George Williams (2000), released
   free for commercial use. Subset to Latin + punctuation. The artboards carry
   this as an inline data URI; the site serves the file. Without it the marquee
   headings silently fall back to Young Serif for everyone who is not John. */
/* (Peignot @font-face now lives in fonts.css) */

/* Overrides for the generated site.
   site.css is lifted from the design artboards, which were static mockups: the
   cart drawer and search panel were drawn in their OPEN state, positioned inside
   a stage rather than a viewport. These rules give them a closed state, and add
   the pieces the artboards never needed — real photography in the frames, live
   cart line items, Shopify description HTML, and a working mobile menu. */

/* ---------------------------------------------------------- overlay state */
.dim{position:fixed; inset:0; display:none;}
.dim.on{display:block;}
.drawer{position:fixed; transform:translateX(101%); transition:transform .22s ease;
        box-shadow:-14px 0 40px rgba(19,18,17,.14); max-width:100vw;}
.drawer.open{transform:none;}
.srch{position:fixed; top:0; left:0; right:0; z-index:40; background:var(--paper);
      border-bottom:1px solid var(--line); padding:1.6rem 0 2rem; display:none;
      max-height:100vh; overflow:auto;}
.srch.open{display:block;}
.srch-cols:empty{display:none;}
a.sres{color:inherit;}
a.sres:hover b{color:var(--brass);}

/* ------------------------------------------------------------ photography */
.frame{position:relative; overflow:hidden; background:var(--paper-2);}
.frame img{width:100%; height:100%; object-fit:cover; display:block;}
.gmain{background:var(--paper-2); overflow:hidden;}
.gmain img{width:100%; height:auto; display:block;}
.noimg{display:block; width:100%; aspect-ratio:1; background:var(--paper-2);}
.card .frame{aspect-ratio:1;}

/* ------------------------------------------------------------- cart items */
.li{display:flex; gap:.8rem; align-items:flex-start; padding:.85rem 0; border-bottom:1px solid var(--line);}
.li-th{width:52px; height:52px; flex:none; background:var(--paper-2); border:1px solid var(--line); overflow:hidden;}
.li-th img{width:100%; height:100%; object-fit:cover; display:block;}
.li b{display:block; font-size:.85rem; font-weight:600; line-height:1.3;}
.li-var{display:block; font-family:var(--mono); font-size:.66rem; color:var(--grey-2); margin-top:.15rem;}
.li-rm{display:inline-block; font-family:var(--mono); font-size:.62rem; letter-spacing:.1em;
       text-transform:uppercase; color:var(--grey); cursor:pointer; margin-top:.35rem;}
.li-rm:hover{color:var(--danger,#8c3a2e);}
.li-pr{margin-left:auto; font-family:var(--mono); font-size:.82rem; white-space:nowrap;}
.dr-sum{display:flex; justify-content:space-between; align-items:baseline; padding-top:1rem;
        font-family:var(--mono); font-size:.95rem;}

/* -------------------------------------------- guide cards on a light page */
.docs-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:1.25rem;}
.section .docs-grid .guide-card{border-color:var(--line); background:var(--paper-2);}
.section .docs-grid .guide-card h3{color:var(--ink);}
.section .docs-grid .gc-type{color:var(--grey-2);}
.section .docs-grid .gc-meta{border-top-color:var(--line);}
.tag-disc{display:inline-block; vertical-align:middle; margin-left:.4rem; color:var(--grey-2);
          border:1px solid var(--line); border-radius:2px; padding:.1rem .35rem;}

/* -------------------------------------------- Shopify description markup */
.pdesc{max-width:52rem; color:var(--grey-2);}
.pdesc h2,.pdesc h3,.pdesc h4{color:var(--ink); margin:1.8rem 0 .6rem;}
.pdesc h3{font-family:var(--body); font-size:1rem; font-weight:600;}
.pdesc ul,.pdesc ol{padding-left:1.15rem; margin:0 0 1rem;}
.pdesc li{margin-bottom:.35rem;}
.pdesc img{max-width:100%; height:auto; margin:1rem 0;}
.pdesc a{color:var(--ink); border-bottom:1px solid var(--brass);}
.pdesc a:hover{color:var(--brass);}
.pdesc iframe{max-width:100%;}
.pdesc table{width:100%; border-collapse:collapse; margin:1rem 0;}
.pdesc td,.pdesc th{border:1px solid var(--line); padding:.5rem .7rem; text-align:left;}

/* --------------------------------------------------------------- utility */
.pdp{align-items:start;}
.tier{cursor:pointer;}
.qty button{cursor:pointer;}
.crumb s{text-decoration:none; color:var(--grey); margin:0 .45rem;}
.count{font-family:var(--mono); font-size:.7rem; letter-spacing:.08em; text-transform:uppercase; color:var(--grey-2);}
.cat{cursor:pointer;}

/* ---------------------------------------------------------- mobile menu */
.nav-toggle{display:none;}
@media (max-width:1180px){
  .docs-grid{grid-template-columns:repeat(3,1fr);}
}
@media (max-width:1024px){
  .primary-nav{display:none;}
  .nav-toggle{display:inline-flex; align-items:center; gap:.4rem; background:none; border:1px solid var(--line);
              border-radius:2px; padding:.5rem .7rem; font-family:var(--body); font-size:.7rem; font-weight:600;
              letter-spacing:.08em; text-transform:uppercase; color:var(--ink); cursor:pointer;}
  body.menu-open .primary-nav{display:flex; flex-direction:column; align-items:flex-start; gap:0;
        position:absolute; top:100%; left:0; right:0; background:var(--paper);
        border-bottom:1px solid var(--line); padding:.5rem 2rem 1.25rem; z-index:20;}
  body.menu-open .primary-nav a{padding:.7rem 0; width:100%; border-bottom:1px solid var(--line);}
  .docs-grid{grid-template-columns:repeat(2,1fr);}
  .srch-cols{grid-template-columns:1fr;}
}
@media (max-width:820px){
  .pdp{grid-template-columns:1fr;}
  .drawer{width:min(400px,92vw);}
}
@media (max-width:560px){
  .docs-grid{grid-template-columns:1fr;}
  .util .container span:first-child{display:none;}
}

/* ------------------------------------------------- instruction guides
   Ported from Dozuki rather than linked out. The serif belongs to page
   marquees only — guide titles and step headings are the working sans,
   because these are read while holding a soldering iron. */
.guide-card h3{font-family:var(--body); font-weight:600; letter-spacing:0; font-size:.98rem;}
.guide-title{font-family:var(--body); font-weight:600; font-size:1.75rem; letter-spacing:-.005em;
             line-height:1.22; max-width:34ch;}
.guide-top{padding-bottom:1rem;}
.guide-meta{display:flex; gap:1.8rem; border-top:1px solid var(--line); border-bottom:1px solid var(--line);
            padding:.9rem 0; margin:1.2rem 0 1.5rem; max-width:40rem;}
.guide-intro{max-width:46rem;}

.guide-kit{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:2rem; max-width:46rem;
           border:1px solid var(--line); background:var(--paper-2); padding:1.25rem 1.4rem; margin-top:1.5rem;}
.guide-kit h4{font-family:var(--mono); font-size:.64rem; letter-spacing:.14em; text-transform:uppercase;
              color:var(--grey); margin:0 0 .6rem;}
.guide-kit ul{margin:0; padding-left:1rem; font-size:.88rem; color:var(--grey-2);}
.guide-kit li{margin-bottom:.3rem;}

.guide-steps{border-top:1px solid var(--line); padding-top:2rem;}
.step{display:grid; grid-template-columns:minmax(0,1.35fr) minmax(0,1fr); gap:1.5rem 2.25rem;
      grid-template-areas:"head head" "shots lines";
      padding:2rem 0; border-bottom:1px solid var(--line);}
.step:last-child{border-bottom:0;}
.step.no-media{grid-template-columns:1fr; grid-template-areas:"head" "lines";}
.step.no-media .step-lines{max-width:46rem;}
.step-head{grid-area:head; display:flex; align-items:baseline; gap:.9rem;}
.step-head h3{margin:0; font-family:var(--body); font-weight:600; font-size:1.08rem;}
.step-n{font-family:var(--mono); font-size:.72rem; letter-spacing:.1em; color:var(--paper);
        background:var(--ink); width:26px; height:26px; border-radius:50%; flex:none;
        display:inline-flex; align-items:center; justify-content:center;}
.step-shots{grid-area:shots; display:grid; gap:.6rem;}
.step-shots.n2{grid-template-columns:1fr 1fr;}
.step-shots.n3{grid-template-columns:2fr 1fr 1fr;}
.step-shots img{width:100%; height:100%; object-fit:cover; display:block;
                border:1px solid var(--line); background:var(--paper-2);}
.step-shots.n1 img{aspect-ratio:4/3;}
.step-lines{grid-area:lines; list-style:none; margin:0; padding:0;}
.step-lines li{position:relative; padding-left:1.15rem; margin-bottom:.7rem; font-size:.92rem;
               color:var(--ink); line-height:1.55;}
.step-lines li::before{content:''; position:absolute; left:0; top:.52em; width:7px; height:7px;
                       border-radius:50%; background:var(--bullet);}
.step-lines li.lvl1{padding-left:2.15rem; font-size:.88rem; color:var(--grey-2);}
.step-lines li.lvl1::before{left:1rem; width:5px; height:5px;}
.step-lines li.lvl2,.step-lines li.lvl3{padding-left:3.15rem; font-size:.86rem; color:var(--grey-2);}
.step-lines li.lvl2::before,.step-lines li.lvl3::before{left:2rem; width:5px; height:5px;}

.guide-concl{border-top:1px solid var(--line); padding-top:1.75rem; max-width:46rem;}
.guide-src{font-family:var(--mono); font-size:.68rem; letter-spacing:.08em; text-transform:uppercase;
           color:var(--grey); border-top:1px solid var(--line); padding-top:1.2rem; margin-top:2rem;}
.guide-src a{border-bottom:1px solid var(--line);}

@media (max-width:820px){
  .step{grid-template-columns:1fr; grid-template-areas:"head" "shots" "lines"; gap:1.1rem;}
  .guide-kit{grid-template-columns:1fr; gap:1.2rem;}
  .guide-meta{flex-wrap:wrap; gap:1rem 1.6rem;}
  .step-shots.n3{grid-template-columns:1fr 1fr;}
  .step-shots.n3 img:first-child{grid-column:1 / -1;}
}

/* --------------------------------------------------------- pedal manuals */
.manuals{border-top:1px solid var(--line); max-width:52rem;}
.manual{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr) auto; gap:1rem 1.5rem;
        align-items:center; padding:1rem .25rem; border-bottom:1px solid var(--line);}
.m-name{font-weight:600;}
.m-prod{font-size:.88rem; color:var(--grey-2);}
.m-prod a{border-bottom:1px solid var(--line);}
.m-gone{font-family:var(--mono); font-size:.68rem; letter-spacing:.08em; text-transform:uppercase;
        color:var(--grey);}
.manual-missing .m-name{color:var(--grey-2);}
@media (max-width:640px){
  .manual{grid-template-columns:1fr auto; gap:.5rem 1rem;}
  .m-prod{grid-column:1 / -1;}
}
/* ---- instructions.fromelelectronics.com additions ---- */
/* Large type for older readers (John, 2026-10-21: "bigger so old people can
   read it"). rem-based sizes scale with html; body was a fixed 15px. The
   instruction text itself sits at ~20px and the small mono labels never
   drop below ~14px. */
html{font-size:125%;}
body{font-size:19px;}
.step-lines li,.step-lines li.lvl1,.step-lines li.lvl2,.step-lines li.lvl3{font-size:1rem; line-height:1.6;}
.pdesc,.guide-kit ul,.chead p{font-size:1rem;}
.step-head h3{font-size:1.15rem;}
.eyebrow,.crumb,.gm-k,.gc-type,.h4,.util .container,.footer-grid h4,.footer-bottom{font-size:.72rem;}
.gm-v{font-size:.9rem;}
.primary-nav a{font-size:.72rem;}
.skip{position:absolute; left:-9999px; top:0; z-index:100; background:var(--ink); color:var(--paper); padding:.6rem 1rem;}
.skip:focus{left:1rem; top:1rem;}
main:focus{outline:none;}
:focus-visible{outline:2px solid var(--brass); outline-offset:2px;}
.site-header .container{position:relative;}
.chead .marquee{font-size:clamp(1.9rem,4.2vw,3rem);}
h2.eyebrow{font-weight:500;}
.guide-meta div{display:flex; flex-direction:column; gap:.2rem;}
.h4{font-family:var(--mono); font-size:.64rem; letter-spacing:.14em; text-transform:uppercase; color:var(--grey-2); margin:0 0 .6rem; font-weight:500;}
.kit-link{display:flex; align-items:center; flex-wrap:wrap; gap:.6rem 1rem; margin:0 0 1.5rem;}
.kit-link .btn{text-transform:none; letter-spacing:.01em; font-size:.84rem;}
.footer-bottom a{color:var(--grey); border-bottom:1px solid var(--ink-3);}
.footer-bottom a:hover{color:var(--paper);}
.footer-grid li{color:var(--grey);}
/* step photos: every photo is a link to its large copy, opened in the lightbox */
.step-shots{min-width:0;}
.step-shots.n1{grid-template-columns:minmax(0,1fr);}
.step-shots.n2{grid-template-columns:repeat(2,minmax(0,1fr));}
.step-shots.n3{grid-template-columns:minmax(0,2fr) repeat(2,minmax(0,1fr));}
@media (max-width:820px){ .step-shots.n3{grid-template-columns:repeat(2,minmax(0,1fr));} .step-shots.n3 .shot:first-child{grid-column:1 / -1;} }
.step-shots .shot{display:block; min-width:0; border:1px solid var(--line); background:var(--paper-2); cursor:zoom-in;}
.step-shots img{border:0; aspect-ratio:4/3; height:auto;}
.step-lines li.caution{color:var(--danger,#8c3a2e); font-weight:500;}
.step-lines li.note{font-style:normal;}
.step,.step-lines,.step-lines li,.pdesc,.guide-title{min-width:0; overflow-wrap:anywhere;}
@media (max-width:820px){ .step{grid-template-columns:minmax(0,1fr);} }
.step-lines a{border-bottom:1px solid var(--brass);}
.guide-next{display:flex; flex-wrap:wrap; gap:.75rem; border-top:1px solid var(--line); padding:2rem 0 3.5rem;}
.guide-next .btn{text-transform:none; letter-spacing:.01em; font-size:.84rem;}
/* lightbox — native dialog: focus trap, Esc and inert background come free */
.lbx{border:0; padding:1rem; width:100vw; height:100dvh; max-width:none; max-height:none; margin:0;
     background:rgba(19,18,17,.96); color:var(--grey);}
.lbx[open]{display:grid; grid-template-rows:auto minmax(0,1fr) auto; gap:.75rem;}
.lbx::backdrop{background:transparent;}
.lbx img{max-width:100%; max-height:100%; margin:auto; object-fit:contain; display:block;}
.lbx-bar,.lbx-nav{display:flex; justify-content:space-between; align-items:center; gap:1rem;
     font-family:var(--mono); font-size:.72rem; letter-spacing:.12em; text-transform:uppercase;}
.lbx button{background:none; border:1px solid var(--ink-3); color:var(--paper); font:inherit; letter-spacing:inherit;
     text-transform:inherit; padding:.55rem .9rem; cursor:pointer; border-radius:2px;}
.lbx button:hover{border-color:var(--brass);}
@media (max-width:820px){
  .container{padding:0 16px;}
  body.menu-open .primary-nav{padding:.5rem 16px 1.25rem;}
  .guide-title{font-size:1.4rem;}
  .guide-next .btn{width:100%;}
}
@media (prefers-reduced-motion:reduce){ *{transition:none !important; scroll-behavior:auto !important;} }
/* print: the guide on the bench — no chrome, photos kept, steps unbroken */
@media print{
  .util,.site-header,.site-footer,.crumbbar,.guide-next,.kit-link,.lbx,.skip{display:none !important;}
  body{background:#fff; font-size:11pt;}
  .container{max-width:none; padding:0;}
  .section{padding:.5rem 0;}
  .step{break-inside:avoid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); padding:.6rem 0;}
  .step-shots .shot{border:0;}
  a{color:inherit; border:0 !important;}
}