/* BOMATERIAL — shared styles for category and product pages.
   The home page carries its own inline hero styles; tokens here match it. */
:root{
  --dusk:#2B2F5A;
  --night:#0A0D22;
  --night-2:#11153A;
  --night-ground:#05071A;
  --led:#FFD28A;
  --led-soft:rgba(255,210,138,.55);
  --ember:#D9784F;
  --tile:#E9EDF1;

  --ink:#F2EEE6;
  --ink-2:rgba(242,238,230,.66);
  --ink-3:rgba(242,238,230,.45);
  --rule:rgba(242,238,230,.14);

  --serif:"Newsreader", Georgia, "Times New Roman", serif;
  --sans:"Geist", system-ui, -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;

  --gutter:clamp(16px, 4vw, 48px);
  --max:1180px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:88px}
@media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto} *{transition:none !important} }
body{margin:0;font-family:var(--sans);font-size:17px;line-height:1.55;color:var(--ink);background:var(--night);-webkit-font-smoothing:antialiased;overflow-x:hidden}
a{color:inherit}
img{display:block;max-width:100%;height:auto}
h1,h2,h3,p,ul,ol,dl,figure{margin:0}
ul,ol{padding:0;list-style:none}
button,input,textarea{font:inherit;color:inherit}
.wrap{width:min(100% - 2*var(--gutter), var(--max));margin-inline:auto}
:focus-visible{outline:2px solid var(--led);outline-offset:3px;border-radius:2px}
.num{font-variant-numeric:tabular-nums}
.muted{color:var(--ink-2)}

/* type */
.display{font-family:var(--serif);font-weight:300;font-optical-sizing:auto;letter-spacing:-.012em;line-height:1.04}
h1.display{font-size:clamp(2.3rem, 5.4vw, 4.4rem);max-width:18ch}
h2.display{font-size:clamp(1.8rem, 3.6vw, 2.8rem);line-height:1.08;max-width:24ch}
h3{font-size:1.08rem;font-weight:500;line-height:1.35}
.lede{font-size:clamp(1.02rem, 1.3vw, 1.18rem);line-height:1.55;max-width:62ch}
.prose p{max-width:68ch;color:var(--ink-2)}
.prose p + p{margin-top:.9em}

/* nav */
.nav{position:sticky;top:0;z-index:20;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:16px var(--gutter);background:rgba(10,13,34,.72);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border-bottom:1px solid var(--rule)}
.brand{display:inline-flex;align-items:center;gap:10px;text-decoration:none;font-weight:600;letter-spacing:.06em;font-size:.95rem}
.brand i{width:10px;height:10px;border-radius:50%;background:var(--led);box-shadow:0 0 12px var(--led-soft)}
.nav ul{display:none;gap:28px;font-size:.92rem}
.nav ul a{text-decoration:none;opacity:.75}
.nav ul a:hover,.nav ul a[aria-current]{opacity:1}
.nav ul a[aria-current]{color:var(--led)}
@media (min-width:900px){ .nav ul{display:flex} }

.btn{display:inline-flex;align-items:center;gap:8px;padding:11px 18px;border-radius:999px;border:1px solid currentColor;text-decoration:none;font-size:.92rem;font-weight:500;line-height:1;background:transparent;cursor:pointer;transition:background .25s,color .25s,border-color .25s}
.btn:hover{background:var(--ink);color:var(--night);border-color:var(--ink)}
.btn.solid{background:var(--led);color:var(--night);border-color:var(--led)}
.btn.solid:hover{background:#fff;border-color:#fff}

/* page scaffolding */
.crumbs{padding-top:28px;font-size:.88rem;color:var(--ink-3)}
.crumbs ol{display:flex;flex-wrap:wrap;gap:6px}
.crumbs li + li::before{content:"/";margin-right:6px;opacity:.6}
.crumbs a{text-decoration:none;color:var(--ink-2)}
.crumbs a:hover{color:var(--ink)}
.block{padding-block:clamp(56px, 8vw, 104px);border-top:1px solid var(--rule)}
.block__head{display:grid;gap:18px;margin-bottom:clamp(28px, 4vw, 48px)}
@media (min-width:900px){ .block__head{grid-template-columns:7fr 5fr;align-items:end;gap:48px} }

/* image tiles: studio shots sit on a light tile, lifestyle photos fill */
.tile{background:var(--tile);border-radius:6px;overflow:hidden;position:relative}
.tile img{width:100%;height:100%;object-fit:contain}
.tile.photo{background:var(--night-ground)}
.tile.photo img{object-fit:cover}

/* category / product hero */
.phead{display:grid;gap:32px;padding-block:28px clamp(48px, 7vw, 88px)}
@media (min-width:960px){ .phead{grid-template-columns:7fr 5fr;gap:56px;align-items:start} }
.phead__text .model{font-size:.9rem;color:var(--led);font-variant-numeric:tabular-nums;margin-bottom:12px}
.phead__text .lede{margin-top:20px;color:var(--ink-2)}
.phead__text .lede + .lede{margin-top:12px}
.phead__actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:28px}
.keyspecs{margin-top:32px;border-top:1px solid var(--rule)}
.keyspecs div{display:grid;grid-template-columns:minmax(110px, 38%) 1fr;gap:16px;padding:10px 0;border-bottom:1px solid var(--rule);font-size:.94rem}
.keyspecs dt{color:var(--ink-3)}
.keyspecs dd{margin:0}

/* gallery */
.gallery__main{aspect-ratio:1}
.gallery__thumbs{display:grid;grid-template-columns:repeat(auto-fill, minmax(72px, 1fr));gap:8px;margin-top:10px}
.gallery__thumbs button{padding:0;border:1px solid transparent;border-radius:4px;overflow:hidden;cursor:pointer;aspect-ratio:1;background:var(--tile)}
.gallery__thumbs button.photo{background:var(--night-ground)}
.gallery__thumbs button img{width:100%;height:100%;object-fit:contain}
.gallery__thumbs button.photo img{object-fit:cover}
.gallery__thumbs button[aria-pressed="true"]{border-color:var(--led)}
.gallery__thumbs button:hover{border-color:var(--ink-3)}

/* in-page section links */
.jump{position:sticky;top:61px;z-index:10;background:rgba(10,13,34,.85);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-bottom:1px solid var(--rule)}
.jump ul{display:flex;gap:24px;overflow-x:auto;padding-block:12px;font-size:.9rem;scrollbar-width:none}
.jump a{text-decoration:none;color:var(--ink-2);white-space:nowrap}
.jump a:hover{color:var(--ink)}

/* highlights */
.highlights{display:grid;gap:0 40px;grid-template-columns:repeat(auto-fill, minmax(260px, 1fr))}
.highlights li{padding:10px 0 10px 20px;border-top:1px solid var(--rule);position:relative;font-size:.96rem}
.highlights li::before{content:"";position:absolute;left:0;top:19px;width:6px;height:6px;border-radius:50%;background:var(--led)}

/* spec table */
.specs{width:100%;border-collapse:collapse;font-size:.95rem}
.specs th,.specs td{text-align:left;vertical-align:top;padding:12px 16px 12px 0;border-bottom:1px solid var(--rule)}
.specs th{font-weight:400;color:var(--ink-3);width:34%}
.specs thead th{color:var(--ink-2);font-weight:500}
.specs-wrap{overflow-x:auto;border-top:1px solid var(--rule)}

/* feature lists */
.items{display:grid;gap:0 48px}
@media (min-width:760px){ .items{grid-template-columns:1fr 1fr} }
.items > div{padding:20px 0;border-top:1px solid var(--rule)}
.items h3{margin-bottom:6px}
.items p,.items li{color:var(--ink-2);font-size:.96rem}
.items p + p{margin-top:.6em}
.items ul{margin-top:8px}
.items li{padding-left:16px;position:relative}
.items li::before{content:"–";position:absolute;left:0;color:var(--ink-3)}
.lead-list{display:flex;flex-wrap:wrap;gap:8px 10px;margin-top:14px}
.lead-list li{border:1px solid var(--rule);border-radius:999px;padding:6px 14px;font-size:.9rem;color:var(--ink-2)}

/* product cards */
.cards{display:grid;gap:28px 20px;grid-template-columns:repeat(auto-fill, minmax(240px, 1fr))}
.card{text-decoration:none;display:block}
.card .tile{aspect-ratio:1;transition:transform .35s ease}
.card:hover .tile{transform:translateY(-3px)}
.card .model{display:block;margin-top:14px;font-size:.84rem;color:var(--led);font-variant-numeric:tabular-nums}
.card h3{margin-top:4px}
.card p{margin-top:6px;font-size:.9rem;color:var(--ink-2);display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}

/* category tiles (products index) */
.catrow{display:flex;gap:10px;flex-wrap:wrap}
.catrow a{text-decoration:none;border:1px solid var(--rule);border-radius:999px;padding:8px 14px;font-size:.9rem;color:var(--ink-2)}
.catrow a:hover{border-color:var(--led);color:var(--ink)}
.catrow a span{color:var(--ink-3);margin-left:6px;font-variant-numeric:tabular-nums}
.catgroup + .catgroup{margin-top:clamp(56px, 7vw, 88px)}
.catgroup__head{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:12px;margin-bottom:24px;padding-bottom:16px;border-bottom:1px solid var(--rule)}
.catgroup__head a{font-size:.92rem;color:var(--ink-2)}

/* faq */
.faq{max-width:820px}
.faq details{border-top:1px solid var(--rule)}
.faq details:last-child{border-bottom:1px solid var(--rule)}
.faq summary{cursor:pointer;list-style:none;padding:18px 40px 18px 0;position:relative;font-weight:500}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";position:absolute;right:4px;top:14px;font-family:var(--serif);font-weight:300;font-size:1.6rem;line-height:1;color:var(--led);transition:transform .3s}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq details > div{padding:0 0 20px;color:var(--ink-2);max-width:66ch}
.faq details > div p + p{margin-top:.6em}

/* links to other categories */
.links{display:grid;gap:0 40px;grid-template-columns:repeat(auto-fill, minmax(260px, 1fr))}
.links a{display:block;padding:16px 0;border-top:1px solid var(--rule);text-decoration:none}
.links a b{font-weight:500;display:block}
.links a span{font-size:.9rem;color:var(--ink-2)}
.links a:hover b{color:var(--led)}

/* quote */
.quote{display:grid;gap:40px}
@media (min-width:900px){ .quote{grid-template-columns:5fr 7fr;gap:64px} }
.quote__ways{display:grid;margin-top:28px}
.quote__ways a{text-decoration:none;display:block;padding:14px 0;border-top:1px solid var(--rule)}
.quote__ways a:last-child{border-bottom:1px solid var(--rule)}
.quote__ways small{display:block;color:var(--ink-2);font-size:.85rem;margin-bottom:2px}
.quote__ways span{font-size:1.1rem}
.quote h3{margin-top:28px;font-size:.95rem;color:var(--ink-2);font-weight:400}
.form{display:grid;gap:18px;align-content:start}
.form .row{display:grid;gap:18px}
@media (min-width:640px){ .form .row{grid-template-columns:1fr 1fr} }
.field{display:grid;gap:6px}
.field label{font-size:.88rem;color:var(--ink-2)}
.field input,.field textarea{width:100%;background:rgba(255,255,255,.04);border:1px solid var(--rule);border-radius:4px;padding:12px 14px;color:var(--ink)}
.field input:focus,.field textarea:focus{outline:none;border-color:var(--led);background:rgba(255,255,255,.06)}
.field textarea{min-height:150px;resize:vertical}
.form__foot{display:flex;flex-wrap:wrap;gap:16px;align-items:center;justify-content:space-between}
.form__foot small{color:var(--ink-2);max-width:40ch}
.form__note{display:none;color:var(--led);font-size:.92rem}
.form.is-sent .form__note{display:block}

/* footer */
.footer{padding:40px 0 48px;border-top:1px solid var(--rule);font-size:.88rem;color:var(--ink-2)}
.footer .wrap{display:flex;flex-wrap:wrap;gap:12px 32px;justify-content:space-between}
.footer a{text-decoration:none}
.footer a:hover{color:var(--ink)}

/* ---- keeping long copy light ---- */

/* headline numbers: the one loud thing on a product page */
.band{display:grid;grid-template-columns:repeat(2, 1fr);gap:0;margin:0 0 clamp(40px, 6vw, 72px);border-top:1px solid var(--rule);border-bottom:1px solid var(--rule)}
@media (min-width:760px){ .band{grid-template-columns:repeat(4, 1fr)} }
.band > div{padding:clamp(20px, 3vw, 32px) 20px clamp(20px, 3vw, 32px) 0}
.band > div + div{border-left:1px solid var(--rule);padding-left:20px}
@media (max-width:759px){ .band > div:nth-child(3){border-left:0;padding-left:0} .band > div:nth-child(n+3){border-top:1px solid var(--rule)} }
.band dt{font-family:var(--serif);font-weight:300;line-height:1;color:var(--led);text-shadow:0 0 28px rgba(255,210,138,.35);display:flex;align-items:baseline;gap:6px;flex-wrap:wrap}
.band .n{font-size:clamp(2.2rem, 4.6vw, 3.6rem);letter-spacing:-.01em;font-variant-numeric:tabular-nums}
.band .u{font-size:clamp(1rem, 1.6vw, 1.3rem)}
.band dd{margin:10px 0 0;font-size:.88rem;color:var(--ink-2)}

.overview{display:grid;gap:40px}
@media (min-width:960px){ .overview{grid-template-columns:7fr 5fr;gap:64px} }

/* disclosures: text stays in the page for search, out of the way for people */
details.more{margin-top:20px}
details.more > summary{cursor:pointer;list-style:none;display:inline-flex;align-items:center;gap:10px;font-size:.92rem;color:var(--led);padding:6px 0}
details.more > summary::-webkit-details-marker{display:none}
details.more > summary::before{content:"+";font-family:var(--serif);font-size:1.3rem;line-height:1;transition:transform .3s}
details.more[open] > summary::before{transform:rotate(45deg)}
details.more[open] > summary{margin-bottom:12px}

/* photo breaks between sections */
.break{display:grid;gap:12px;padding-bottom:clamp(56px, 8vw, 104px)}
.break.n2{grid-template-columns:1fr}
@media (min-width:760px){ .break.n2{grid-template-columns:3fr 2fr} }
.break img{width:100%;height:clamp(220px, 34vw, 460px);object-fit:cover;border-radius:6px}
.break + .block{border-top:0;padding-top:0}

/* category hero */
.chead{display:grid;gap:32px;padding-block:28px clamp(40px, 6vw, 72px);align-items:center}
@media (min-width:960px){ .chead{grid-template-columns:6fr 6fr;gap:56px} }
.chead .model{font-size:.9rem;color:var(--led);margin-bottom:12px}
.chead .lede{margin-top:20px;color:var(--ink-2)}
.chead__img{aspect-ratio:4/3}

.items.compact{gap:0 40px}
@media (min-width:1100px){ .items.compact{grid-template-columns:repeat(3, 1fr)} }
.items.compact > div{padding:18px 0 22px}
.items.compact p{font-size:.93rem;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.tags{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px !important}
.tags li{padding:3px 10px !important;border-radius:999px;background:rgba(255,210,138,.1);color:var(--led) !important;font-size:.82rem !important;font-variant-numeric:tabular-nums}
.tags li::before{content:none !important}

/* form states */
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.form-error{color:#FFB199;font-size:.94rem}
.form-done{align-self:start;border:1px solid var(--rule);border-radius:6px;padding:28px}
.form-done h3{font-family:var(--serif);font-weight:300;font-size:1.6rem;color:var(--led);margin-bottom:10px}
.form-done p{color:var(--ink-2)}

/* pages and posts */
.page{padding-block:28px clamp(56px, 8vw, 104px)}
.page__head{padding-block:28px 32px}
.page__head .model{font-size:.9rem;color:var(--led);margin-bottom:12px}
.entry__img img{border-radius:6px;width:100%;height:auto;margin-bottom:32px}
.entry__body{max-width:70ch;color:var(--ink-2)}
.entry__body > * + *{margin-top:1em}
.entry__body h2,.entry__body h3{color:var(--ink);font-family:var(--serif);font-weight:300;margin-top:1.6em}
.entry__body h2{font-size:1.9rem}
.entry__body h3{font-size:1.4rem}
.entry__body a{color:var(--led)}
.entry__body img{border-radius:6px;height:auto}
.entry__body ul{list-style:disc;padding-left:1.2em}
.entry__body ol{list-style:decimal;padding-left:1.2em}
.posts{display:grid;gap:0}
.post-row{display:grid;gap:20px;padding:24px 0;border-top:1px solid var(--rule)}
@media (min-width:760px){ .post-row{grid-template-columns:220px 1fr;gap:32px} }
.post-row img{border-radius:6px;aspect-ratio:4/3;object-fit:cover;width:100%;height:auto}
.post-row h2{font-family:var(--serif);font-weight:300;font-size:1.6rem;line-height:1.15}
.post-row h2 a{text-decoration:none}
.post-row .model{font-size:.85rem;color:var(--led);margin-bottom:6px}
.post-row .muted{margin-top:8px}
.nav-links{display:flex;gap:12px;margin-top:32px}
.nav-links a,.nav-links span{padding:6px 12px;border:1px solid var(--rule);border-radius:999px;text-decoration:none}