/* ThePenMarket.com. White pages, one pale grey panel, his logo red for the single accent.
   Layout follows the Shopify reference Brittany chose (small logo, thin centered nav, big serif
   headline in a grey hero panel with spec columns, one solid button, product thumbnails under it,
   large product photo right with a vertical category list). Colours and words are the client's. */
:root{
  --white:#FFFFFF; --grey:#F3F3F1; --grey-2:#E9E9E6; --line:#E2E2DF; --line-2:#CFCFCB;
  --ink:#1B1B1B; --ink-2:#464646; --muted:#6B6B6B; --muted-2:#6B6B6B;
  --red:#ED1C24; --red-dark:#C4121A; --red-soft:#FBE9EA;
  --serif:'Playfair Display',Georgia,serif; --sans:'Outfit','Helvetica Neue',Arial,sans-serif; --mono:var(--sans);
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:24px; --s6:32px; --s7:48px; --s8:64px; --s9:96px;
  --wrap:1200px; --gutter:32px; --pill:0;
  --ivory:var(--white); --paper:var(--white); --navy:var(--ink); --navy-deep:var(--ink); --gold:var(--red); --gold-soft:var(--red-soft); --sale:var(--red-dark); --ok:#2E6B47;
}
*{box-sizing:border-box;margin:0;padding:0}
html{overflow-x:clip;-webkit-text-size-adjust:100%}
body{overflow-x:clip;background:var(--white);color:var(--ink);font-family:var(--sans);font-size:16px;line-height:1.6;font-weight:400}
img{max-width:100%;height:auto;display:block}
a{color:var(--ink);text-decoration:none}
a:hover{text-decoration:underline;text-underline-offset:3px}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,summary:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
h1,h2,h3{font-family:var(--sans);font-weight:700;line-height:1.15;letter-spacing:-.01em;text-wrap:balance;overflow-wrap:break-word;color:var(--ink)}
h1{font-size:clamp(32px,1rem + 2.4vw,46px);margin-bottom:var(--s4)}
h2{font-size:clamp(24px,1rem + 1vw,30px)}
h3{font-size:19px}
p{text-wrap:pretty}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 var(--gutter)}
.narrow{max-width:800px}
.mono{font-family:var(--sans);font-variant-numeric:tabular-nums}
.muted{color:var(--muted)}
.small{font-size:13px}
.gold{color:var(--red)}
.navy{color:var(--ink)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:.01}
.skip{position:absolute;left:-9999px;top:8px;background:var(--ink);color:#fff;padding:8px 12px}
.skip:focus{left:8px;z-index:100}
.eyebrow,.kicker{font-family:var(--sans);font-size:11px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-2);margin-bottom:var(--s3)}
.lede{font-size:17px;line-height:1.6;max-width:64ch;color:var(--ink-2)}
.lede-short{color:var(--ink-2);margin-bottom:var(--s4)}
code{font-family:Menlo,Consolas,monospace;font-size:.9em;background:var(--grey);padding:1px 4px}

/* buttons: one solid accent, one outline */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--s2);font-family:var(--sans);font-weight:500;font-size:14px;padding:13px 26px;border:1px solid var(--red);background:var(--red);color:#fff;cursor:pointer;text-decoration:none;line-height:1.2}
.btn:hover{background:var(--red-dark);border-color:var(--red-dark);text-decoration:none}
.btn-navy,.btn-gold{background:var(--red);border-color:var(--red);color:#fff}
.btn-navy:hover,.btn-gold:hover{background:var(--red-dark);border-color:var(--red-dark)}
.btn-ghost,.btn-outline,.btn-ghost-light{background:transparent;color:var(--ink);border-color:var(--ink)}
.btn-ghost:hover,.btn-outline:hover,.btn-ghost-light:hover{background:var(--ink);color:#fff;border-color:var(--ink)}
.btn-sm{padding:9px 16px;font-size:13px}
.btn-wide{width:100%;justify-content:space-between}
.demo-tag{font-size:10px;letter-spacing:.06em;text-transform:uppercase;padding:3px 7px;background:var(--grey);color:var(--ink);border:1px solid var(--line-2)}
.demo-note{display:block;font-size:12px;color:var(--muted);margin-top:var(--s2)}
.req{color:var(--muted);font-weight:400;font-size:12px}

/* masthead: small logo left, lowercase nav centred, three icons right (the reference's header) */
.masthead{position:relative;z-index:20;background:transparent}
.masthead-row{display:grid;grid-template-columns:250px minmax(0,1fr) auto;align-items:center;gap:var(--s5);padding-top:30px;padding-bottom:22px}
.logo{display:block;width:250px}
.logo img{width:100%;height:auto}
.mainnav{display:flex;justify-content:center;gap:28px;font-size:16px;font-weight:600;white-space:nowrap;letter-spacing:.005em}
.mainnav a{color:var(--ink);padding:6px 0;border-bottom:2px solid transparent}
.mainnav a:hover{text-decoration:none;border-bottom-color:var(--ink)}
.mainnav a[aria-current=page]{border-bottom-color:var(--red)}
.masthead-tools{display:flex;align-items:center;gap:22px}
.icon-btn{display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;border:0;background:transparent;color:var(--ink);cursor:pointer;padding:0}
.icon-btn:hover{color:var(--red);text-decoration:none}
.menu-btn{display:none;border:1px solid var(--ink);background:var(--white);font:inherit;font-size:14px;font-weight:600;padding:8px 14px;cursor:pointer}
.searchbar{position:relative;z-index:21;padding:8px 0 16px}
.searchbar .search{display:flex;gap:10px}
.searchbar input{flex:1 1 auto;min-width:0;border:1px solid var(--line-2);background:var(--white);padding:14px 16px;font:inherit;font-size:16px}
.sheet{position:relative;z-index:21;background:var(--white);border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:var(--s5) 0 var(--s6)}
.sheet-cols{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s6)}
.sheet-cols h2{font-family:var(--sans);font-size:12px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin-bottom:6px}
.sheet-cols a{display:block;padding:8px 0;border-bottom:1px solid var(--line);color:var(--ink);font-size:16px}
/* eight links: they tighten on narrower screens, then hand over to the Menu button (it lists every page) */
@media (max-width:1440px){.mainnav{gap:clamp(16px,1.9vw,28px)}}
@media (max-width:1240px){.mainnav{gap:16px;font-size:15px}}
html.nav-collapsed .mainnav{display:none}html.nav-collapsed .menu-btn{display:inline-block}html.nav-collapsed .masthead-row{grid-template-columns:250px minmax(0,1fr)}html.nav-collapsed .masthead-tools{justify-content:flex-end}
@media (max-width:1180px){.mainnav{display:none}.menu-btn{display:inline-block}.masthead-row{grid-template-columns:250px minmax(0,1fr)}.masthead-tools{justify-content:flex-end}}
@media (max-width:820px){
  .masthead-row{grid-template-columns:190px minmax(0,1fr);gap:var(--s4);padding-top:20px}
  .logo{width:190px}
  .mainnav{display:none}
  .masthead-tools{justify-content:flex-end;gap:10px}
  .menu-btn{display:inline-block}
  .sheet-cols{grid-template-columns:minmax(0,1fr)}
}

/* hero: the reference's pale panel with a rounded bottom-right corner, copy left, the 3D pen where
   the plant stood, three product cards below the button, the category list on the right edge */
.hero{position:relative;padding-bottom:var(--s6)}
.hero-bg{position:absolute;left:0;top:-140px;bottom:290px;width:min(72vw,1100px);background:var(--grey);border-bottom-right-radius:240px;z-index:-1}
.hero-grid{display:grid;grid-template-columns:minmax(0,11fr) minmax(0,11fr) max-content;gap:var(--s6);align-items:start}
.hero-copy{display:flex;flex-direction:column;align-items:flex-start;gap:22px;min-width:0;padding-top:64px}
.hero-copy > *{max-width:100%}
.hero .kicker{display:inline-flex;align-items:center;gap:8px;margin:0;font-size:15px;font-weight:500;letter-spacing:.12em;color:var(--ink)}
.kicker-nib{color:var(--red)}
/* The pen's name never breaks inside a word; site.js [data-fit-words] shrinks it until the longest word fits. */
.hero h1{font-family:var(--serif);font-weight:800;font-size:clamp(64px,3rem + 6vw,136px);line-height:.92;letter-spacing:-.02em;color:var(--red);margin:0 0 6px;text-wrap:balance;overflow-wrap:normal;word-break:normal;hyphens:manual}
.hero-text{font-size:19px;line-height:1.55;color:var(--ink-2);max-width:min(44ch,100%)}
.hero-specs{display:flex;flex-wrap:wrap;gap:var(--s3) 52px;margin:6px 0 10px;max-width:100%}
.hero-specs div{display:flex;flex-direction:column;gap:6px}
.hero-specs dt{font-size:20px;font-weight:600;color:var(--ink)}
.hero-specs dd{font-size:19px;color:var(--muted)}
.btn-hero{font-size:20px;font-weight:600;padding:22px 40px;min-width:350px}
.hero-thumbs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s5);margin-top:0;width:100%;max-width:700px}
.hero-thumb{display:flex;flex-direction:column;background:var(--grey);border-radius:14px;overflow:hidden;color:var(--ink);min-width:0}
.hero-thumb:hover{text-decoration:none;box-shadow:0 8px 24px rgba(0,0,0,.08)}
.hero-thumb-img{aspect-ratio:4/3;display:block;overflow:hidden;background:var(--grey)}
.hero-thumb-img img{width:100%;height:100%;object-fit:contain;mix-blend-mode:multiply}
.hero-thumb-row{display:flex;flex-direction:column;align-items:flex-start;gap:8px;padding:12px 14px 14px;background:var(--white)}
.hero-thumb-name{font-size:15px;font-weight:600;line-height:1.25;min-width:0;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.hero-thumb-price{flex:none;font-size:15px;color:var(--red);font-weight:500;white-space:nowrap;background:var(--grey);padding:4px 9px;border-radius:8px}
.hero-stage{position:relative;height:760px;min-width:0}
#scene{position:absolute;inset:0;width:100%;height:100%;display:block}
.hero-fallback{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;padding:40px 0}
.hero-fallback img{max-height:100%;width:auto;max-width:100%;object-fit:contain;mix-blend-mode:multiply}
.hero-stage.is-3d .hero-fallback{display:none}
.hotspots{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.hotspot{position:absolute;transform:translate(-50%,-50%);width:30px;height:30px;border-radius:50%;background:var(--white);box-shadow:0 2px 10px rgba(0,0,0,.18);display:flex;align-items:center;justify-content:center;font-size:20px;font-weight:500;line-height:1;color:var(--ink)}
.hotspot-label{position:absolute;transform:translate(0,-50%);background:var(--grey);color:var(--muted);font-size:14px;padding:8px 14px;border-radius:6px;white-space:nowrap}
.hotspot-label::before{content:"";position:absolute;left:-44px;top:50%;width:44px;border-top:2px dashed var(--line-2)}
.hero-cats{display:flex;flex-direction:column;align-items:flex-start;gap:30px;padding-top:270px;font-size:19px;text-align:left;white-space:nowrap}
.hero-cats a{color:var(--ink)}
.hero-cats a:hover{text-decoration:none;color:var(--red)}
@media (max-width:1100px){
  .hero-grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .hero-cats{grid-column:1/-1;flex-direction:row;flex-wrap:wrap;justify-content:center;padding-top:var(--s4);gap:12px var(--s5);white-space:normal}
  .hero-stage{height:560px}
  .hero-bg{width:78vw;bottom:320px}
}
@media (max-width:760px){
  .hero-grid{grid-template-columns:minmax(0,1fr)}
  .hero-copy{padding-top:28px}
  .hero-stage{order:-1;height:380px}
  .hotspot-label{display:none!important}
  .hero-bg{width:100%;top:-120px;bottom:auto;height:520px;border-bottom-right-radius:120px}
  .hero-thumbs{grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
  .hero-thumb-row{flex-direction:column;align-items:flex-start;gap:6px;padding:10px}
  .hero-thumb-name{white-space:normal}
  .btn-hero{min-width:0;width:100%}
  .hero h1{font-size:clamp(48px,14vw,72px)}
}

/* sections */
.section{padding-top:var(--s8)}
.section-head{display:flex;align-items:baseline;justify-content:space-between;gap:var(--s4);margin-bottom:var(--s5);flex-wrap:wrap}
.section-head h2{font-size:clamp(26px,1rem + 1.2vw,32px);font-weight:700}
.more{font-size:14px;color:var(--ink);border-bottom:1px solid var(--ink)}
.more:hover{text-decoration:none;color:var(--red);border-bottom-color:var(--red)}
.band{padding-top:var(--s8);padding-bottom:var(--s2)}
.band-head{display:flex;align-items:baseline;gap:var(--s4);margin-bottom:var(--s5);flex-wrap:wrap}
.band-head h2{font-size:clamp(24px,1rem + 1.1vw,30px);font-weight:700}
.band-link{margin-left:auto;font-size:14px;border-bottom:1px solid var(--ink);color:var(--ink)}
.band-link:hover{text-decoration:none;color:var(--red);border-bottom-color:var(--red)}
.band-more{margin:var(--s6) 0 var(--s4)}
.grid{display:grid;gap:var(--s5) var(--s4)}
.grid-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.grid-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.grid-4{grid-template-columns:repeat(4,minmax(0,1fr))}
.grid-5{grid-template-columns:repeat(5,minmax(0,1fr))}
@media (max-width:1000px){.grid-5,.grid-4{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:700px){.grid-5,.grid-4,.grid-3{grid-template-columns:repeat(2,minmax(0,1fr))}.grid-2{grid-template-columns:1fr}}
@media (max-width:400px){.grid-5,.grid-4,.grid-3{grid-template-columns:1fr}}

/* category tiles */
.tiles{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:var(--s4)}
.tile{display:flex;flex-direction:column;gap:6px;color:var(--ink);min-width:0}
.tile:hover{text-decoration:none}
.tile:hover .tile-name{text-decoration:underline;text-underline-offset:3px}
.tile-img{aspect-ratio:1/1;background:var(--grey);overflow:hidden;display:block;border-radius:14px}
.tile-img img{width:100%;height:100%;object-fit:contain;padding:6%;mix-blend-mode:multiply}
.tile-name{font-size:18px;font-weight:600;margin-top:6px}
.tile-count{font-size:13px;color:var(--muted)}
@media (max-width:1000px){.tiles{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:600px){.tiles{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* product card: photo, name, one grey line, price */
.card{display:flex;flex-direction:column;min-width:0;background:var(--white)}
.card-img{display:block;aspect-ratio:4/3;background:var(--grey);overflow:hidden;border-radius:14px}
.card-img img{width:100%;height:100%;object-fit:contain;padding:4%;mix-blend-mode:multiply}
.noimg{display:flex;align-items:center;justify-content:center;height:100%;color:var(--muted-2);font-size:12px}
.card-body{display:flex;flex-direction:column;gap:3px;padding:12px 0 0}
.card-title{font-family:var(--sans);font-size:15px;font-weight:600;line-height:1.3}
.card-title a{color:var(--ink)}
.card-sub{font-size:13px;color:var(--muted)}
.card-sub a{color:var(--muted)}
.card-price{font-size:15px;font-weight:500;color:var(--ink);margin-top:2px}
.card-price s{color:var(--muted-2);font-weight:400;margin-right:4px}
.card-price .sale{color:var(--red)}
.is-sold .card-img img{filter:grayscale(.7);opacity:.7}
.card-meta{font-size:12px;color:var(--muted)}
.chips{display:flex;gap:6px;flex-wrap:wrap}
.chip{font-size:12px;padding:4px 9px;background:var(--grey);color:var(--ink-2);white-space:nowrap}
.chip-navy{background:var(--grey);color:var(--ink)}
.chip-sale{background:var(--red-soft);color:var(--red-dark)}
.chip-sold{background:var(--ink);color:#fff}
.chip-link{border:1px solid var(--line-2);background:var(--white);color:var(--ink);padding:8px 14px;font-size:13px}
.chip-link:hover{border-color:var(--ink);text-decoration:none}
.chips-row{margin-bottom:var(--s4)}
.chip-applied{background:var(--ink);color:#fff;padding:6px 10px;font-size:12px}
.chip-applied:hover{text-decoration:none;background:var(--red)}

/* services: four plain columns, no icons */
.services{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--s6);padding:var(--s7) 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.service{display:flex;flex-direction:column;gap:var(--s3);align-items:flex-start}
.service h2{font-size:20px;font-weight:700}
.service p{font-size:14px;color:var(--ink-2);flex:1 1 auto}
.service a:not(.btn){font-size:14px;font-weight:500;color:var(--red);border-bottom:1px solid var(--red)}
.service a:not(.btn):hover{text-decoration:none;color:var(--red-dark);border-bottom-color:var(--red-dark)}
@media (max-width:1000px){.services{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.services{grid-template-columns:minmax(0,1fr)}}

/* ask: the assistant, kept plain */
.ask{margin-top:var(--s8);background:var(--grey);padding:var(--s8) 0}
.ask-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--s5);justify-items:center}
.ask-copy{text-align:center}
.ask-copy h2{font-size:clamp(26px,1rem + 1.4vw,34px);font-weight:700;margin-bottom:0}
.ask-grid .guide-phone{width:min(100%,720px)}
.guide-phone{background:var(--white);border:1px solid var(--line);border-radius:14px;overflow:hidden;display:flex;flex-direction:column;min-height:480px}
.guide-phone .who{display:flex;align-items:center;gap:10px;padding:12px 16px;border-bottom:1px solid var(--line)}
.guide-phone .who strong{font-size:16px;font-weight:600}
.guide-phone .who small{margin-left:auto;font-size:12px;color:var(--muted)}
.dot{display:none}
.chat{flex:1 1 auto;overflow-y:auto;padding:16px;display:flex;flex-direction:column;gap:10px;max-height:480px}
.msg{max-width:88%;padding:10px 14px;font-size:14px;line-height:1.5;white-space:pre-wrap;word-wrap:break-word}
.msg.ai{background:var(--grey);align-self:flex-start}
.msg.me{background:var(--ink);color:#fff;align-self:flex-end}
.msg.sys{background:transparent;color:var(--muted);font-size:12px;align-self:center;text-align:center;max-width:100%}
.typing i{display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--muted-2);margin:0 2px;animation:blink 1s infinite}
.typing i:nth-child(2){animation-delay:.2s}.typing i:nth-child(3){animation-delay:.4s}
@keyframes blink{0%,80%,100%{opacity:.2}40%{opacity:1}}
.gcard{background:var(--white);border:1px solid var(--line);padding:12px 14px;font-size:13px;display:grid;gap:8px}
.gcard.ok{border-left:3px solid var(--ok)}
.gcard.no{border-left:3px solid var(--red)}
.gcard .t{display:flex;justify-content:space-between;gap:var(--s3);align-items:baseline;font-weight:600}
.gcard ul{padding-left:18px;color:var(--ink-2)}
.gcard .pen{display:grid;grid-template-columns:72px 1fr auto;gap:10px;align-items:center;border-top:1px solid var(--line);padding-top:8px}
.gcard .pen img{width:72px;height:54px;object-fit:contain;background:var(--grey);mix-blend-mode:multiply}
.gcard .pen b{white-space:nowrap}
.gcard .pen small{display:block;color:var(--muted);font-size:11px}
.quick{display:flex;flex-wrap:wrap;gap:6px;padding:0 16px 10px}
.quick button{border:1px solid var(--line-2);background:var(--white);font:inherit;font-size:12px;padding:6px 10px;cursor:pointer;color:var(--ink)}
.quick button:hover{border-color:var(--ink)}
.chat-input{display:flex;gap:8px;padding:12px 16px;border-top:1px solid var(--line)}
.chat-input input{flex:1 1 auto;min-width:0;border:1px solid var(--line-2);padding:10px 12px;font:inherit;font-size:14px;background:var(--white)}
@media (max-width:900px){.guide-phone{min-height:420px}}
@media (prefers-reduced-motion:reduce){.typing i{animation:none}}

/* footer: light, like his current site */
.footer{background:var(--grey);margin-top:var(--s9);padding:var(--s8) 0 var(--s6);font-size:14px}
.footer-top{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr 1.4fr;gap:var(--s6)}
.footer-brand img{width:220px;height:auto;margin-bottom:var(--s4)}
.footer address{font-style:normal;line-height:1.8;color:var(--ink-2)}
.footer .social{margin-top:var(--s3);display:flex;gap:var(--s4)}
.footer-col h2{font-family:var(--sans);font-size:13px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--ink);margin-bottom:var(--s3)}
.footer-col a{display:block;padding:4px 0;color:var(--ink-2)}
.footer-col a:hover{color:var(--ink)}
.mail-form{display:grid;gap:8px}
.mail-form input:not([type=hidden]):not(.hp){background:var(--white);border:1px solid var(--line-2);color:var(--ink);padding:10px 12px;font:inherit;font-size:14px;width:100%}
.mail-form .btn{justify-self:start}
.footer-legal{display:flex;justify-content:space-between;gap:var(--s4);flex-wrap:wrap;margin-top:var(--s7);padding-top:var(--s4);border-top:1px solid var(--line-2);font-size:12px;color:var(--muted)}
.footer-legal a{color:var(--muted);margin-right:14px;display:inline-block;padding:5px 0;min-height:24px}
@media (max-width:1000px){.footer-top{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.footer-top{grid-template-columns:minmax(0,1fr)}}

/* archive pages: breadcrumb, h1, facet rail, count + sort + view, cards */
.crumbs{display:flex;flex-wrap:wrap;gap:8px;font-size:13px;color:var(--muted);padding:var(--s4) 0 var(--s3)}
.crumbs a{color:var(--muted)}
.crumbs span[aria-current]{color:var(--ink)}
.archive-head{padding-bottom:var(--s5)}
.archive-head h1{margin-bottom:var(--s3)}
.definition{margin-top:var(--s5);padding:18px 22px;background:var(--grey);max-width:70ch}
.definition p:last-child{font-size:15px;color:var(--ink-2)}
.cta-row{display:flex;gap:var(--s3);flex-wrap:wrap;margin:var(--s4) 0}
.disclaimer{margin-top:var(--s5);padding:16px 20px;background:var(--grey);font-size:13.5px;color:var(--ink-2);max-width:80ch}
.shop-layout{display:grid;grid-template-columns:230px minmax(0,1fr);gap:var(--s7);align-items:start;padding-bottom:var(--s8)}
.rail{position:sticky;top:12px}
.rail-head{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:var(--s3)}
.rail-head .eyebrow{margin:0}
.rail-clear{font-size:13px;color:var(--red)}
.rail-search{display:flex;gap:6px;margin:var(--s3) 0 var(--s4)}
.rail-search input{flex:1 1 auto;min-width:0;border:1px solid var(--line-2);padding:8px 10px;font:inherit;font-size:13px;background:var(--white)}
.applied{margin-bottom:var(--s3)}
.facet{border-top:1px solid var(--line);padding:12px 0}
.facet summary{cursor:pointer;font-size:13px;font-weight:600;list-style:none;display:flex;justify-content:space-between}
.facet summary::-webkit-details-marker{display:none}
.facet summary::after{content:"–";color:var(--muted)}
.facet:not([open]) summary::after{content:"+"}
.facet-list{list-style:none;margin-top:8px;display:grid;gap:2px}
.facet-list li a{display:flex;align-items:center;gap:8px;padding:5px 0;font-size:14px;color:var(--ink-2)}
.facet-list li a:hover{text-decoration:none;color:var(--ink)}
.facet-list .box{width:14px;height:14px;border:1.5px solid var(--line-2);background:var(--white);flex:none}
.facet-list .is-selected .box{background:var(--ink);border-color:var(--ink);box-shadow:inset 0 0 0 2px var(--white)}
.facet-list .fname{flex:1 1 auto}
.facet-list .fcount{font-size:12px;color:var(--muted-2)}
.facet-list .is-extra{display:none}
.facet-list.is-open .is-extra{display:block}
.facet-more{border:0;background:none;font:inherit;font-size:13px;color:var(--red);cursor:pointer;padding:6px 0;text-decoration:underline}
.rail-link{font-size:14px}
.results-bar{display:flex;align-items:center;gap:var(--s4);padding:10px 0;border-bottom:1px solid var(--line);margin-bottom:var(--s5);flex-wrap:wrap}
.results-count{font-size:14px;color:var(--muted)}
.results-count strong{color:var(--ink);font-size:16px}
.sort{display:flex;align-items:center;gap:8px;margin-left:auto;font-size:13px}
.sort select{font:inherit;font-size:13px;border:1px solid var(--line-2);background:var(--white);padding:6px 8px}
.view{display:inline-flex;border:1px solid var(--line-2)}
.view-btn{border:0;background:var(--white);font:inherit;font-size:12px;padding:6px 10px;cursor:pointer;color:var(--muted)}
.view-btn.is-on{background:var(--ink);color:#fff}
.rail-toggle{display:none}
.results-grid.is-list{grid-template-columns:1fr}
.results-grid.is-list .card{flex-direction:row;gap:var(--s4)}
.results-grid.is-list .card-img{width:220px;flex:none;aspect-ratio:4/3}
.results-grid.is-list .card-body{justify-content:center;padding:0}
.empty{padding:var(--s7) 0;color:var(--muted)}
.pagination{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin:var(--s6) 0;font-size:14px}
.page-n,.page-prev,.page-next{padding:6px 10px;border:1px solid var(--line-2);background:var(--white);color:var(--ink)}
.page-n.is-current{background:var(--ink);color:#fff;border-color:var(--ink)}
.related-posts{margin-top:var(--s8)}
.related-posts h2{margin-bottom:var(--s4)}
@media (max-width:900px){
  .shop-layout{grid-template-columns:minmax(0,1fr);gap:var(--s5)}
  .rail{position:static;display:none;border:1px solid var(--line);padding:var(--s4);background:var(--white)}
  .rail.is-open{display:block}
  .rail-toggle{display:inline-flex}
}

/* product page: gallery + buy box, specifics table, description */
.product{display:grid;grid-template-columns:7fr 5fr;gap:var(--s7);align-items:start;padding-bottom:var(--s7)}
.product .crumbs{grid-column:1/-1}
.gallery-main{background:var(--grey);padding:var(--s3);border-radius:14px}
.gallery-main img{width:100%;height:auto;aspect-ratio:4/3;object-fit:contain;background:var(--grey);mix-blend-mode:multiply}
.gallery-main figcaption{padding-top:8px;font-size:12px;color:var(--muted)}
.thumbs{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}
.thumb{border:1px solid var(--line-2);background:var(--white);padding:2px;cursor:pointer;width:88px;height:64px}
.thumb img{width:100%;height:100%;object-fit:contain;mix-blend-mode:multiply}
.thumb.is-on{border-color:var(--ink);box-shadow:0 0 0 1px var(--ink)}
.buybox{padding:0}
.buybox h1{font-size:clamp(26px,1rem + 1.6vw,36px)}
.price-row{display:flex;align-items:center;gap:var(--s3);flex-wrap:wrap;margin-bottom:var(--s4)}
.price{font-size:28px;font-weight:500}
.price s{color:var(--muted-2);font-weight:400;font-size:20px;margin-right:6px}
.buy-facts{display:grid;gap:8px;margin:var(--s4) 0;border-top:1px solid var(--line);padding-top:var(--s4)}
.buy-facts > div{display:grid;grid-template-columns:96px 1fr;gap:var(--s3);font-size:13.5px}
.buy-facts dt{color:var(--muted)}
.demo-buy summary{list-style:none;cursor:pointer}
.demo-buy summary::-webkit-details-marker{display:none}
.demo-buy .demo-tag{background:rgba(255,255,255,.18);color:#fff;border-color:rgba(255,255,255,.5)}
.demo-explain{margin-top:var(--s3);padding:var(--s4);background:var(--grey);font-size:13.5px;display:grid;gap:8px}
.buy-form{margin:0}
.buy-form button{cursor:pointer}
.buy-note{margin-top:var(--s2);font-size:13px}
.buy-hold{padding:var(--s4);background:var(--grey);font-size:14px;display:grid;gap:10px}
.buy-hold p{margin:0}
.buy-links{margin-top:var(--s4);font-size:13px}
.buy-links a{color:var(--red)}
.product-body{grid-column:1/-1;display:grid;grid-template-columns:5fr 7fr;gap:var(--s7);align-items:start}
.specifics h2,.description h2{font-size:20px;margin-bottom:var(--s3)}
.specs{width:100%;border-collapse:collapse;font-size:14px}
.specs th,.specs td{text-align:left;padding:10px 12px;border-bottom:1px solid var(--line);vertical-align:top}
.specs th{width:38%;color:var(--muted);font-weight:500}
.specs td a{color:var(--red)}
.prose{font-size:16px;line-height:1.7;color:var(--ink-2);max-width:68ch;overflow-wrap:anywhere}
.prose a{color:var(--red);overflow-wrap:anywhere}
.prose p,.prose ul,.prose ol,.prose blockquote,.prose figure,.prose h2,.prose h3,.prose h4,.prose table{margin-bottom:1.1em}
.prose h2,.prose h3,.prose h4{color:var(--ink);margin-top:1.6em}
.prose ul,.prose ol{padding-left:1.4em}
.prose img{max-width:100%;height:auto;background:var(--grey)}
.prose .wp-caption{width:auto!important;max-width:100%}
.prose .alignright,.prose .alignleft,.prose .wp-caption.alignright,.prose .wp-caption.alignleft,.prose figure.alignright,.prose figure.alignleft{max-width:min(46%,320px)}
.prose .alignright{float:right;margin:4px 0 12px 20px}
.prose .alignleft{float:left;margin:4px 20px 12px 0}
.prose .aligncenter{margin-left:auto;margin-right:auto;display:block}
.prose .wp-caption img{width:100%}
.prose .wp-caption-text,.prose figcaption{font-size:12.5px;color:var(--muted);margin-top:6px}
.prose blockquote{border-left:2px solid var(--red);padding-left:18px;font-size:18px;color:var(--ink)}
.prose iframe{max-width:100%}
.prose table{width:100%;border-collapse:collapse;font-size:14px}
.prose td,.prose th{border:1px solid var(--line);padding:6px 8px}
.prose::after{content:"";display:block;clear:both}
@media (max-width:900px){.product,.product-body{grid-template-columns:minmax(0,1fr)}}

/* posts */
.post{max-width:820px;padding-bottom:var(--s7)}
.post-head{padding:var(--s3) 0 var(--s5)}
.post-head h1{font-weight:700}
.byline{font-size:13px;color:var(--muted)}
.byline a{color:var(--red)}
.post-hero{margin-bottom:var(--s5);background:var(--grey)}
.post-hero img{width:100%;height:auto}
.post-body{font-size:17px}
.post-foot{border-top:1px solid var(--line);padding-top:var(--s4);margin-top:var(--s6)}
.postcard{display:flex;flex-direction:column;min-width:0}
.postcard-img{display:block;aspect-ratio:3/2;background:var(--grey);overflow:hidden;border-radius:14px}
.postcard-img:empty{display:none}
.postcard-img img{width:100%;height:100%;object-fit:cover}
.postcard-body{padding:12px 0 0;display:grid;gap:6px}
.postcard-title{font-size:19px;font-weight:600;line-height:1.25}
.postcard-title a{color:var(--ink)}
.postcard-excerpt{font-size:14px;color:var(--ink-2);display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.posts-grid{gap:var(--s6) var(--s5)}

/* service pages */
.two-col{display:grid;grid-template-columns:7fr 5fr;gap:var(--s7);align-items:start;padding-bottom:var(--s8);min-width:0}
.two-col > *{min-width:0}
.block{margin-bottom:var(--s6);min-width:0;overflow-wrap:anywhere}
.block h2{font-size:22px;margin-bottom:var(--s3)}
.block p,.block li{color:var(--ink-2)}
.block a{color:var(--red)}
.block ol,.block ul:not(.checklist):not(.inline-list):not(.scope-list){padding-left:1.3em;display:grid;gap:6px}
.checklist{list-style:none;display:grid;gap:10px;margin:var(--s4) 0}
.checklist li{padding-left:22px;position:relative;font-size:15px}
.checklist li::before{content:"";position:absolute;left:0;top:9px;width:10px;height:10px;background:var(--red)}
.checklist.small li{font-size:14px}
.scope-list{list-style:none;display:grid;grid-template-columns:repeat(2,1fr);gap:8px}
.scope-list li{padding-left:22px;position:relative;color:var(--ink)}
.scope-list li::before{content:"";position:absolute;left:0;top:9px;width:10px;height:10px;background:var(--red)}
.note{font-size:14px;color:var(--muted);margin:var(--s3) 0}
.inline-list{list-style:none;display:flex;flex-wrap:wrap;gap:8px 16px;font-size:14px}
.before-after .pair{display:grid;grid-template-columns:1fr 1fr;gap:var(--s3)}
.before-after img{background:var(--grey)}
.faq details{border-top:1px solid var(--line);padding:12px 0}
.faq summary{cursor:pointer;font-weight:600;color:var(--ink);list-style:none;display:flex;justify-content:space-between;gap:var(--s3)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";color:var(--muted)}
.faq details[open] summary::after{content:"–"}
.faq details p{margin-top:8px}
.form-col{position:sticky;top:12px}
.form-block{background:var(--grey);padding:var(--s5)}
.form{display:grid;gap:8px}
.form label{font-size:13px;font-weight:600;margin-top:6px}
.form input:not([type=hidden]):not([type=file]):not(.hp),.form textarea,.form select{width:100%;border:1px solid var(--line-2);padding:10px 12px;font:inherit;font-size:14px;background:var(--white)}
.form input[type=file]{font-size:13px}
.form .btn{justify-self:start;margin-top:var(--s3)}
.price-line{display:flex;justify-content:space-between;border-top:1px solid var(--line-2);padding-top:10px;margin-top:6px;font-weight:600}
.contact-card address{font-style:normal;font-size:17px;line-height:1.7}
.inline-search{max-width:520px;margin:var(--s4) 0;display:flex;gap:8px}
.inline-search input{flex:1 1 auto;min-width:0;border:1px solid var(--line-2);padding:10px 12px;font:inherit}
@media (max-width:900px){.two-col{grid-template-columns:minmax(0,1fr)}.form-col{position:static}.scope-list{grid-template-columns:minmax(0,1fr)}}

/* about */
.about-grid{display:grid;grid-template-columns:4fr 7fr;gap:var(--s7);align-items:start;padding-bottom:var(--s6)}
.about-photo img{background:var(--grey)}
.about-photo figcaption{margin-top:8px;color:var(--muted);font-size:13px}
.about-copy blockquote{border-left:2px solid var(--red);padding:4px 0 4px 18px;margin-bottom:var(--s4)}
.about-copy blockquote p{font-size:19px;color:var(--ink);margin-bottom:8px}
.about-copy blockquote footer{font-size:13px;color:var(--muted)}
.about-photos{display:grid;grid-template-columns:1fr 1fr;gap:var(--s4);padding-bottom:var(--s8)}
.about-photos img{background:var(--grey);aspect-ratio:3/2;object-fit:cover;width:100%}
.about-photos figcaption{margin-top:6px;color:var(--muted);font-size:13px}
@media (max-width:900px){.about-grid,.about-photos{grid-template-columns:minmax(0,1fr)}}

.listing-page .specs{margin:var(--s4) 0}

/* ---- 2026-09-14 meeting: clickable pen hotspots, classic view, popular searches, FAQ, site map ---- */
button.hotspot{pointer-events:auto;cursor:pointer;border:0;font:inherit;font-size:20px;line-height:1;color:var(--ink);padding:0}
button.hotspot:hover,button.hotspot.is-on{background:var(--red);color:#fff}
.hotspot-label.is-focus{display:block!important;background:var(--ink);color:#fff}
.hero-stage.is-photo .hero-fallback{display:flex}
.hero-stage.is-photo canvas,.hero-stage.is-photo .hotspots{display:none}
/* his photo with the backdrop removed: just the pen and cap over the page, no multiply blend */
/* his photo without its background, the pen standing beside its cap: every featured pen the same height
   in the same place (the stage is 760 / 560 / 380 px tall by width) */
.hero-stage.is-cutout .hero-fallback{padding:48px 0}
.hero-stage.is-cutout .hero-fallback img{height:100%;width:auto;max-width:100%;object-fit:contain;mix-blend-mode:normal;filter:drop-shadow(0 18px 22px rgba(0,0,0,.12))}
html.classic body{zoom:1.12}
html.classic *{animation:none!important;transition:none!important;scroll-behavior:auto!important}
html.classic .hero-stage canvas,html.classic .hotspots{display:none}
html.classic .hero-stage .hero-fallback{display:flex}
.footer-view{margin-top:var(--s6)}
.view-toggle{font:inherit;font-size:14px;background:transparent;border:1px solid var(--line-2);color:var(--ink);padding:10px 16px;cursor:pointer}
.view-toggle:hover,.view-toggle[aria-pressed=true]{border-color:var(--ink)}
.search-popular{display:flex;flex-wrap:wrap;gap:6px 14px;align-items:baseline;margin-top:10px;font-size:14px;color:var(--muted)}
.search-popular span{font-size:12px;letter-spacing:.1em;text-transform:uppercase}
.search-popular a{text-decoration:underline;text-underline-offset:3px}
.faq-page{padding-bottom:var(--s8)}
.faq-jump{display:flex;flex-wrap:wrap;gap:8px 18px;margin:var(--s5) 0;font-size:15px}
.faq-jump a{text-decoration:underline;text-underline-offset:3px}
.faq-topic{margin-top:var(--s7)}
.faq-topic h2{margin-bottom:var(--s4)}
.faq-item{border-top:1px solid var(--line)}
.faq-item:last-of-type{border-bottom:1px solid var(--line)}
.faq-item summary{cursor:pointer;padding:16px 0;font-weight:600;font-size:17px;list-style-position:outside}
.faq-item .prose{padding:0 0 18px;max-width:70ch;color:var(--ink-2)}
.site-map{padding-bottom:var(--s8)}
.site-map-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:var(--s6) var(--s7);margin-top:var(--s6)}
.site-map-grid h2{font-size:18px;margin-bottom:var(--s3)}
.site-map-grid ul{list-style:none}
.site-map-grid li{padding:4px 0;font-size:15px}
.site-map-grid a{text-decoration:underline;text-underline-offset:3px}
.adm-inline{margin-top:var(--s6)}
.footer-review a{text-decoration:underline;text-underline-offset:3px}
.review{border:1px solid var(--line);padding:22px;display:grid;gap:12px;align-content:start}
.review-stars{color:var(--ink);letter-spacing:.15em;font-size:15px}
.review blockquote{font-size:16px;line-height:1.6;color:var(--ink-2)}
.review figcaption{font-size:13px;color:var(--muted)}

/* glossary */
.gloss-page,.gloss-term{padding-bottom:var(--s8)}
.gloss-search{display:flex;gap:10px;margin:var(--s5) 0 var(--s4)}
.gloss-search input{flex:1 1 auto;min-width:0;border:1px solid var(--line-2);background:var(--white);padding:14px 16px;font:inherit;font-size:16px}
.gloss-kinds{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:var(--s4)}
.gloss-kinds a{border:1px solid var(--line-2);padding:7px 14px;font-size:14px;border-radius:999px}
.gloss-kinds a span{color:var(--muted);font-size:12px;margin-left:4px}
.gloss-kinds a[aria-current]{background:var(--ink);border-color:var(--ink);color:#fff}
.gloss-kinds a[aria-current] span{color:#fff}
.gloss-kinds a:hover{text-decoration:none;border-color:var(--ink)}
.gloss-letters{display:flex;flex-wrap:wrap;gap:4px 12px;font-weight:600;font-size:15px;padding:var(--s3) 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.gloss-letters a{text-decoration:underline;text-underline-offset:3px}
.gloss-letters a.is-off{color:var(--muted-2);text-decoration:none;pointer-events:none}
.gloss-status{min-height:1.6em;margin-top:var(--s4);font-size:14px;color:var(--muted)}
.gloss-empty{margin-top:var(--s4);padding:18px 22px;background:var(--grey);max-width:70ch}
.gloss-letter{margin-top:var(--s6);scroll-margin-top:90px}
.gloss-letter h2{font-size:22px;padding-bottom:var(--s2);border-bottom:2px solid var(--ink)}
.gloss-row{padding:14px 0;border-bottom:1px solid var(--line)}
.gloss-row dt{font-weight:600;font-size:17px}
.gloss-row dt a{text-decoration:underline;text-underline-offset:3px}
.gloss-row dd{margin:4px 0 0;color:var(--ink-2);font-size:15px;max-width:70ch}
.gloss-kind,.gloss-topic{display:inline-block;font-size:11px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-2);background:var(--grey);padding:2px 8px;margin-left:6px;vertical-align:middle}
.gloss-topic{background:transparent;padding-left:0;color:var(--muted)}
.gloss-kind-model,.gloss-kind-make{background:var(--ink);color:#fff}
.gloss-stock{color:var(--red);white-space:nowrap}
.gloss-aka{color:var(--muted);font-size:14px}
.gloss-term h1{margin-bottom:var(--s3)}
.gloss-figure{margin:var(--s5) 0}
.gloss-figure img{max-width:100%;height:auto;display:block}
.gloss-definition{font-size:18px;line-height:1.65;max-width:68ch;margin-top:var(--s5)}
.gloss-definition p+p{margin-top:1em}
.gloss-byline{margin-top:var(--s5);font-size:14px;color:var(--muted);max-width:68ch}
.gloss-byline a,.gloss-see a{text-decoration:underline;text-underline-offset:3px}
.gloss-see{display:flex;flex-wrap:wrap;gap:6px 24px;margin:var(--s4) 0 var(--s5);font-size:15px}
.gloss-card a{text-decoration:underline;text-underline-offset:3px;white-space:nowrap}
.prose a.gl{color:inherit;text-decoration:underline dotted;text-decoration-thickness:1.5px;text-underline-offset:4px;cursor:help}
.prose a.gl:hover{color:var(--red)}
.gl-pop{position:absolute;z-index:60;width:min(340px,calc(100vw - 24px));background:var(--white);border:1px solid var(--ink);box-shadow:0 10px 30px rgba(0,0,0,.16);padding:14px 16px;font-size:14px;line-height:1.5}
.gl-pop b{display:block;font-size:15px;margin-bottom:4px}
.gl-pop p{color:var(--ink-2);margin-bottom:8px}
.gl-pop a{color:var(--red);text-decoration:underline;text-underline-offset:3px}
@media (max-width:600px){.gloss-search{flex-wrap:wrap}.gloss-search .btn{width:100%}}
.buy-ship{border:0;margin:0 0 var(--s2);padding:0;display:flex;flex-wrap:wrap;gap:6px 18px;font-size:15px}
.buy-ship legend{font-weight:600;margin-bottom:6px;padding:0}
.buy-ship label{display:flex;gap:8px;align-items:center;cursor:pointer}
.buy-note p{margin:0 0 4px}

/* Meeting of 2026-10-15 */
/* Sale: the original price struck through beside the sale price, on the pen's page as on the cards */
.price .was{text-decoration:line-through;text-decoration-thickness:1.5px;color:var(--muted);font-weight:400;font-size:.8em;margin-right:4px}
.price.is-sale .sale-edit{color:var(--red-dark)}
.hero-specs dd s{color:var(--muted-2);margin-right:4px}
.hero-specs dd .sale{color:var(--red-dark)}
/* Labels above a pen's name: "New" on its own for 30 days, and his own promotional labels */
.plabels{display:flex;flex-wrap:wrap;gap:4px;margin:0 0 6px;line-height:1}
.plabel{display:inline-block;font:600 11px/1.45 var(--sans);letter-spacing:.06em;text-transform:uppercase;padding:2px 7px;border-radius:3px;background:var(--plabel,var(--red-dark));color:var(--plabel-ink,#fff);white-space:nowrap;max-width:100%;overflow:hidden;text-overflow:ellipsis}
.plabel-new{--plabel:var(--ink);--plabel-ink:#fff}
.plabels-lg{margin-bottom:10px}
.plabels-lg .plabel{font-size:12px;padding:3px 8px}
/* His tags: at the bottom of the description, quiet (meeting: "I don't want it to be prominent") */
.ptags{margin-top:28px;padding-top:12px;border-top:1px solid var(--line,#e6e6e6);font-size:13px;line-height:2;color:var(--muted)}
.ptags-h{font-weight:600;color:var(--ink-2);margin-right:6px}
.ptags .tag{display:inline-block;margin:0 10px 0 0;color:var(--muted);text-decoration:none;font-size:13px}
.ptags .tag:hover{color:var(--ink);text-decoration:underline}
/* New Arrivals and Recently viewed: always one row, the newest first; a narrower screen shows fewer */
.grid.grid-row{grid-template-columns:repeat(4,minmax(0,1fr))}
@media (max-width:1000px){.grid.grid-row{grid-template-columns:repeat(3,minmax(0,1fr))}.grid.grid-row>:nth-child(n+4){display:none}}
@media (max-width:700px){.grid.grid-row{grid-template-columns:repeat(2,minmax(0,1fr))}.grid.grid-row>:nth-child(n+3){display:none}}

/* cart (2026-10-26): count on the bag icon, the /cart/ page, the Add to cart button */
.icon-btn.cart-link{position:relative;overflow:visible}
.cart-badge{position:absolute;top:-2px;right:-6px;min-width:18px;height:18px;padding:0 5px;border-radius:9px;background:var(--red-dark);color:#fff;font-size:11px;font-weight:600;line-height:18px;text-align:center;font-variant-numeric:tabular-nums}
.cart-badge[hidden]{display:none}
.cart-add{margin-top:var(--s3)}
.cart-add .btn[aria-disabled=true]{border-color:var(--line-2);color:var(--ink-2);background:var(--grey)}
.cart-add .btn[aria-disabled=true]:hover{background:var(--grey);color:var(--ink-2);border-color:var(--line-2)}
.cart{padding-bottom:var(--s8)}
.cart-lede{margin-bottom:var(--s5)}
.cart-empty{padding:var(--s6) 0}
.cart-empty[hidden],.cart-head[hidden],.cart-list[hidden],.cart-checkout[hidden]{display:none}
.cart-head{display:flex;justify-content:space-between;align-items:baseline;gap:var(--s4);border-bottom:1px solid var(--line-2);padding-bottom:var(--s3);margin-bottom:var(--s5)}
.cart-count{font-size:15px;font-weight:600}
.cart-list{list-style:none;display:grid;grid-template-columns:repeat(auto-fill,minmax(270px,1fr));gap:var(--s5);margin-bottom:var(--s7)}
.cart-item{display:flex;flex-direction:column;border:1px solid var(--line);background:var(--white)}
.cart-img{display:block;aspect-ratio:4/3;background:var(--grey);overflow:hidden}
.cart-img img{width:100%;height:100%;object-fit:contain}
.cart-img .noimg{display:flex;align-items:center;justify-content:center;height:100%;color:var(--muted);font-size:13px}
.cart-body{padding:var(--s4);flex:1 1 auto}
.cart-name{font-size:19px;margin-bottom:var(--s2)}
.cart-price{font-size:18px;font-weight:500;margin-bottom:var(--s3)}
.cart-price s{color:var(--muted);font-weight:400;margin-right:4px}
.cart-price .sale{color:var(--red-dark)}
.cart-specs{font-size:14px;color:var(--ink-2)}
.cart-specs div{display:flex;justify-content:space-between;gap:var(--s3);padding:5px 0;border-top:1px solid var(--line)}
.cart-specs dt{color:var(--muted)}
.cart-specs dd{text-align:right}
.cart-flag{margin-top:var(--s3);padding:var(--s3);background:var(--grey);border-left:3px solid var(--ink);font-size:14px}
.cart-item.is-off .cart-img img{opacity:.45;filter:grayscale(1)}
.cart-item.is-off .cart-name a{color:var(--ink-2)}
.cart-actions{display:flex;gap:var(--s3);padding:0 var(--s4) var(--s4);align-items:center;flex-wrap:wrap}
.cart-buy{flex:1 1 auto;margin:0}
.cart-buy .btn{width:100%}
.cart-actions>.btn-ghost{flex:0 0 auto}
.cart-checkout{border-top:1px solid var(--line-2);padding-top:var(--s5);max-width:560px}
.cart-checkout h2{margin-bottom:var(--s3)}
.cart-ship{border:0;margin:0 0 var(--s3)}
.cart-ship legend{font-size:12px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin-bottom:var(--s2)}
.cart-ship label{display:flex;align-items:center;gap:var(--s3);padding:12px 0;border-bottom:1px solid var(--line);cursor:pointer;min-height:44px}
.cart-ship label span:nth-of-type(1){flex:1 1 auto}
.cart-ship input{width:20px;height:20px;accent-color:var(--ink)}
.cart-oneship{margin-bottom:var(--s4);color:var(--ink-2);font-size:15px}
.cart-checkout .btn[disabled]{background:var(--grey-2);border-color:var(--grey-2);color:var(--muted);cursor:not-allowed}
@media (max-width:820px){.cart-list{grid-template-columns:minmax(0,1fr)}.cart-badge{right:-4px}}
/* The site's red is 4.38:1 under white; on the cart's small buttons use the darker red so AA (4.5:1) holds. */
.cart .btn-navy,.cart .btn-navy:hover{background:var(--red-dark);border-color:var(--red-dark)}
.cart .btn-navy:hover{background:#9E0F15;border-color:#9E0F15}
.cart .cart-checkout .btn[disabled]{background:var(--grey-2);border-color:var(--grey-2)}
/* Ten links (Pen Grading, Buyer's Guide, Defining Nibs and Glossary once he publishes them) need more room than
   the 1200px page column gives: widen the header row on big screens and tighten the gaps. Where they still do not
   fit, the safety net in site.js hands over to the Menu button, which lists every page. */
@media (min-width:1181px){.masthead-row.wrap{max-width:1480px}.mainnav{gap:clamp(12px,1.25vw,22px);font-size:15px}}

/* Phones (320-499px): the logo gives way so it never runs under the icons. The logo column takes what the
   tools leave (it keeps its shape, 190px at most), the icons and the Menu button tighten. */
@media (max-width:499px){
  .masthead-row{grid-template-columns:minmax(0,1fr) auto;gap:var(--s3)}
  .logo{width:100%;max-width:190px}
  .masthead-tools{gap:0}
  .masthead-tools .icon-btn{width:34px;height:40px}
  .menu-btn{margin-left:var(--s2);padding:8px 10px;font-size:13px}
}

/* Links inside running text are told apart by more than colour (WCAG 1.4.1); buttons, chips and band links keep their own look. */
main p a:not(.btn):not(.chip-link):not(.band-link):not(.gl):not(.card-img){text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
main .eyebrow a{text-decoration:underline;text-underline-offset:3px}
.block li > a{text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}

/* Cookie banner: a small card in the bottom corner, never a bar or a wall; Allow and No thanks look the same. */
.cookie-banner[hidden]{display:none}
.cookie-banner{position:fixed;z-index:60;left:12px;right:12px;bottom:12px;background:var(--white);color:var(--ink);border:2px solid var(--ink);padding:10px 14px 12px;display:flex;flex-direction:column;gap:6px;font-size:14px;line-height:1.35;box-shadow:0 4px 18px rgba(0,0,0,.16)}
.cookie-banner:focus{outline:none}
.cookie-banner:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
.cookie-title{font-weight:700;font-size:15px}
.cookie-actions{display:flex;align-items:center;gap:var(--s2)}
.cookie-actions .btn{flex:1 1 0;min-height:44px;padding:8px 12px}
/* Leave room under the page so the last controls (Buy, the footer links, a form's Submit) can be scrolled above the card. */
body:has(.cookie-banner:not([hidden])){padding-bottom:164px}
.cookie-privacy{color:var(--ink);text-decoration:underline;text-underline-offset:3px;font-size:13px;padding:12px 6px;min-height:44px;display:inline-flex;align-items:center}
@media (min-width:760px){
  body:has(.cookie-banner:not([hidden])){padding-bottom:190px}
  .cookie-banner{left:auto;right:var(--s4);bottom:var(--s4);width:340px;padding:var(--s4)}
}