@import url('https://fonts.googleapis.com/css2?family=Baloo+2:wght@500;600;700;800&family=Nunito+Sans:opsz,wght@6..12,400;6..12,600;6..12,700;6..12,800&family=Caveat:wght@600;700&display=swap');

:root{
--paper:#FFFFFF;
--paper-soft:#F2FAF9;
--card:#FFFFFF;
--card-border:#E4EBEA;
--ink:#1B2436;
--ink-soft:#5B6472;
--teal:#0E6D82;
--teal-strong:#094F60;
--navy:#14213F;
--gold:#F6BD2C;
--gold-strong:#C99312;
--leaf:#6F8F3E;
--leaf-strong:#55702E;
--shelf:#FBEBCB;
--shadow:rgba(20,33,63,0.09);
--focus:#0E6D82;
--panel-navy:#12203C;
--ink-on-gold:#14213F;
--danger:#B3261E;
--input-border:#9DACAB;
}
@media (prefers-color-scheme: dark){
:root:not([data-theme="light"]){
--paper:#10151F;
--paper-soft:#171E2C;
--card:#1B2333;
--card-border:#2C3750;
--ink:#F1ECDF;
--ink-soft:#ABB4C6;
--teal:#5FC9DE;
--teal-strong:#8CDCEC;
--navy:#DCE3F5;
--gold:#FFD966;
--gold-strong:#FFE596;
--leaf:#9BC46A;
--leaf-strong:#B7D998;
--shelf:#3A2C20;
--shadow:rgba(0,0,0,0.35);
--focus:#8CDCEC;
--danger:#FF8A80;
--input-border:#4C5B80;
}
}
:root[data-theme="dark"]{
--paper:#10151F;
--paper-soft:#171E2C;
--card:#1B2333;
--card-border:#2C3750;
--ink:#F1ECDF;
--ink-soft:#ABB4C6;
--teal:#5FC9DE;
--teal-strong:#8CDCEC;
--navy:#DCE3F5;
--gold:#FFD966;
--gold-strong:#FFE596;
--leaf:#9BC46A;
--leaf-strong:#B7D998;
--shelf:#3A2C20;
--shadow:rgba(0,0,0,0.35);
--focus:#8CDCEC;
--danger:#FF8A80;
--input-border:#4C5B80;
}

*{box-sizing:border-box;}
[hidden]{display:none !important;}
html{scroll-behavior:smooth;}
@media (prefers-reduced-motion: reduce){
html{scroll-behavior:auto;}
*{animation-duration:0.01ms !important; transition-duration:0.01ms !important;}
}

body{
margin:0;
background:var(--paper);
color:var(--ink);
font-family:'Nunito Sans','Segoe UI',system-ui,sans-serif;
line-height:1.6;
padding-inline:0;
}

a{color:inherit;}
img{display:block;max-width:100%;}

.wrap{
max-width:1180px;
margin-inline:auto;
padding-inline:20px;
}

h1,h2,h3{
font-family:'Baloo 2','Segoe UI',sans-serif;
text-wrap:balance;
margin:0;
}

.eyebrow{
display:inline-flex;
align-items:center;
gap:6px;
font-size:0.78rem;
font-weight:800;
letter-spacing:0.09em;
text-transform:uppercase;
color:var(--teal-strong);
}

.script{
font-family:'Caveat',cursive;
font-weight:700;
}

button{font-family:inherit;}

.icon{width:26px;height:26px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;}

/* ---------- utility bar ---------- */
.utility-bar{
background:var(--panel-navy);
color:#F3EFE4;
}
.utility-inner{
display:flex;
justify-content:center;
align-items:center;
gap:14px;
padding-block:8px;
font-size:0.82rem;
font-weight:600;
flex-wrap:wrap;
position:relative;
}
.utility-tagline{
display:flex;
align-items:center;
gap:8px;
}
.utility-tagline svg{width:16px;height:16px;flex:none;}

.social-row{display:flex;align-items:center;gap:8px;}
.social-row.follow-label::before{
content:"Follow along:";
font-size:0.8rem;
font-weight:700;
color:#C9D2E8;
margin-right:2px;
}
.social-icon{
width:26px;height:26px;
border-radius:50%;
background:rgba(255,255,255,0.14);
display:flex;align-items:center;justify-content:center;
flex:none;
transition:background .15s ease;
}
.social-icon:hover{background:rgba(255,255,255,0.28);}
.social-icon:focus-visible{outline:2px solid #fff;outline-offset:2px;}
.social-icon svg{width:14px;height:14px;}

@media (max-width:600px){
.utility-inner{justify-content:center;text-align:center;}
}

/* ---------- nav ---------- */
header.site-nav{
position:sticky;
top:0;
z-index:40;
background:var(--paper);
border-bottom:1px solid var(--card-border);
}
.nav-inner{
display:flex;
align-items:center;
justify-content:space-between;
gap:16px;
padding-block:12px;
}
.brand{
display:flex;
align-items:center;
gap:10px;
font-family:'Baloo 2',sans-serif;
font-weight:800;
font-size:1.25rem;
text-decoration:none;
color:var(--ink);
flex:none;
}
.brand-mark{
width:38px;height:38px;flex:none;
display:flex;align-items:center;justify-content:center;
}
.brand-word-genius{color:var(--teal);}
.brand-word-house{color:var(--navy);}

nav.primary-links{
display:flex;
align-items:center;
gap:26px;
font-weight:700;
font-size:0.96rem;
}
nav.primary-links a{text-decoration:none;color:var(--ink);}
nav.primary-links a:hover{color:var(--teal);}
nav.primary-links a[aria-current="page"]{color:var(--teal-strong);}

.btn{
display:inline-flex;
align-items:center;
gap:8px;
border-radius:999px;
padding:11px 22px;
font-weight:800;
font-size:0.95rem;
text-decoration:none;
border:2px solid transparent;
cursor:pointer;
white-space:nowrap;
}
.btn:focus-visible{outline:3px solid var(--focus);outline-offset:2px;}
.btn-gold{background:var(--gold);color:var(--ink-on-gold);}
.btn-gold:hover{background:var(--gold-strong);}
.btn-outline{background:transparent;border-color:var(--card-border);color:var(--ink);}
.btn-outline:hover{border-color:var(--teal);color:var(--teal);}
.btn-teal{background:var(--teal);color:#fff;}
.btn-teal:hover{background:var(--teal-strong);}

.nav-cta{display:flex;align-items:center;gap:12px;flex:none;margin-left:auto;}

@media (max-width:960px){
/* Raised from 860px: a 6th nav link (Ask the Genius) made the in-between
tablet widths too tight to fit the full link row without wrapping. */
nav.primary-links{display:none;}
}

@media (max-width:560px){
/* Brand wordmark + "Search Hacks" button + the subscribe icon don't all
fit on one row on a phone -- drop the button to icon-only (same pattern
as the subscribe icon) so everything stays on one line and nothing
runs off the edge of the screen. */
.nav-cta .btn .btn-label{display:none;}
.nav-cta .btn{padding:11px 14px;}
}

@media (max-width:380px){
/* Extra-narrow phones: let the nav wrap rather than risk overflow. */
.nav-inner{flex-wrap:wrap;row-gap:10px;}
}

/* ---------- hero ---------- */
.hero{padding-block:44px 0;}
.hero-banner{
border-radius:22px;
overflow:hidden;
box-shadow:0 18px 40px var(--shadow);
border:1px solid var(--card-border);
}
.hero-banner img{width:100%;height:auto;}
.hero-sub{
max-width:640px;
margin:26px auto 0;
text-align:center;
color:var(--ink-soft);
font-size:1.08rem;
}

/* ---------- sub-page header ---------- */
.page-hero{padding-block:40px 8px;}
.page-hero h1{font-size:clamp(1.8rem,4vw,2.6rem);}
.page-hero p{color:var(--ink-soft);max-width:640px;margin-top:10px;font-size:1.05rem;}

/* ---------- ask the genius ---------- */
.genius-card{
background:var(--card);
border:1px solid var(--card-border);
border-radius:24px;
box-shadow:0 14px 34px var(--shadow);
padding:30px clamp(18px,4vw,44px);
margin:34px auto 0;
max-width:920px;
}
.genius-card.full{max-width:none;}
.genius-head{
display:flex;
align-items:flex-start;
gap:16px;
margin-bottom:18px;
}
.genius-bulb{
flex:none;width:52px;height:52px;
border-radius:16px;
background:var(--gold);
display:flex;align-items:center;justify-content:center;
}
.genius-bulb svg{width:30px;height:30px;stroke:var(--ink-on-gold);}
.genius-head h2{font-size:1.5rem;color:var(--ink);}
.genius-head p{margin:4px 0 0;color:var(--ink-soft);font-size:0.98rem;}

/* Slide-left / answer-to-the-right layout: before a question is asked,
   .genius-ask (the chip row + input form + note) fills the full width and
   .chat-log is collapsed to nothing so only the ask box shows. Once
   site-data.js adds .has-answer (a real question was submitted), the ask
   box shrinks to a fixed column and the log expands and fades in to its
   right. Below 760px there isn't room for two columns, so it always falls
   back to the older stacked layout regardless of .has-answer. */
.genius-body{
  display:flex;
  align-items:flex-start;
  gap:28px;
}
.genius-ask{
  flex:1 1 100%;
  min-width:0;
  transition:flex-basis .35s ease, max-width .35s ease;
}
.genius-body .chat-log{
  flex:0 1 0;
  max-width:0;
  max-height:0;
  opacity:0;
  overflow:hidden;
  margin-top:0;
  transition:flex-basis .35s ease, max-width .35s ease, opacity .3s ease .05s, transform .35s ease;
  transform:translateX(12px);
}
.genius-body.has-answer .genius-ask{
  flex:0 0 380px;
  max-width:380px;
}
.genius-body.has-answer .chat-log{
  flex:1 1 320px;max-height:none;
  max-width:none;
  opacity:1;
  margin-top:18px;
  transform:translateX(0);
}
@media (max-width:760px){
  .genius-body{
    flex-direction:column;
    align-items:stretch;
  }
  .genius-body .genius-ask,
  .genius-body.has-answer .genius-ask{
    flex:1 1 auto;
    max-width:none;
  }
  .genius-body .chat-log,
  .genius-body.has-answer .chat-log{
    flex:1 1 auto;
    max-width:none;
    opacity:1;
    overflow:visible;
    transform:none;
    margin-top:18px;
  }
}

.search-row{
display:flex;
gap:10px;
flex-wrap:wrap;
}
.search-row input[type="text"]{
flex:1 1 260px;
min-width:0;
padding:14px 18px;
border-radius:14px;
border:1.5px solid var(--input-border);
background:var(--paper);
color:var(--ink);
font-size:1rem;
font-family:inherit;
}
.search-row input[type="text"]:focus-visible{outline:3px solid var(--focus);outline-offset:1px;border-color:var(--teal);}

.chip-row{
display:flex;
flex-wrap:wrap;
gap:8px;
margin-top:14px;
}
.chip{
border:1.5px solid var(--card-border);
background:var(--paper-soft);
color:var(--ink);
border-radius:999px;
padding:7px 14px;
font-size:0.86rem;
font-weight:700;
cursor:pointer;
}
.chip:hover{border-color:var(--teal);color:var(--teal);}
.chip:focus-visible{outline:3px solid var(--focus);}
.chip[aria-pressed="true"]{background:var(--teal);border-color:var(--teal);color:#fff;}

.results{
margin-top:22px;
display:grid;
gap:14px;
}
.results.grid-2{grid-template-columns:repeat(auto-fit,minmax(280px,1fr));}
.result-card{
border:1px solid var(--card-border);
background:var(--paper-soft);
border-radius:16px;
padding:16px 18px;
}
.result-card .tag{
font-size:0.72rem;
font-weight:800;
text-transform:uppercase;
letter-spacing:0.06em;
color:var(--teal-strong);
}
.result-card h3{font-size:1.05rem;margin:4px 0 6px;font-family:'Baloo 2',sans-serif;}
.result-card p{margin:0;color:var(--ink-soft);font-size:0.95rem;}
.no-results{color:var(--ink-soft);font-style:italic;padding:8px 2px;}

/* ---------- ask the genius: live chat ---------- */
.chat-log{
margin-top:18px;
display:flex;
flex-direction:column;
gap:14px;
padding:6px 4px;
}
.chat-log:empty::before{
content:"Ask a question to get started\2026";
color:var(--ink-soft);
font-style:italic;
font-size:0.95rem;
}
.chat-msg{display:flex;gap:10px;align-items:flex-start;}
.chat-question{
font-weight:800;
color:var(--ink);
font-size:0.98rem;
margin:0 0 2px;
}
.chat-avatar{
flex:none;width:32px;height:32px;border-radius:50%;
background:var(--gold);
display:flex;align-items:center;justify-content:center;
}
.chat-avatar svg{width:18px;height:18px;stroke:var(--ink-on-gold);}
.chat-bubble{
max-width:min(82%,520px);
padding:12px 16px;
border-radius:16px;
font-size:0.96rem;
line-height:1.55;
overflow-wrap:anywhere;
}
.chat-msg.genius .chat-bubble{
background:var(--paper-soft);
border:1px solid var(--card-border);
border-top-left-radius:4px;
color:var(--ink);
}
.chat-thinking{display:inline-flex;gap:5px;align-items:center;color:var(--ink-soft);font-style:italic;}
.chat-thinking::after{
content:"";
width:6px;height:6px;border-radius:50%;
background:currentColor;
animation:chatPulse 1s ease-in-out infinite;
}
@keyframes chatPulse{0%,80%,100%{opacity:0.25;}40%{opacity:1;}}

.chat-note{
min-height:1.2em;
margin:10px 2px 0;
font-size:0.86rem;
}
.chat-note.muted{color:var(--ink-soft);}
.chat-note.error{color:var(--danger);font-weight:700;}

.chat-input-row{margin-top:14px;}

.btn:disabled,
.search-row input[type="text"]:disabled{opacity:0.55;cursor:not-allowed;}

/* ---------- category pill row (condensed, homepage) ---------- */
.cat-pill-row{
display:flex;
gap:10px;
overflow-x:auto;
padding:4px 2px 12px;
}
.cat-pill{
flex:none;
display:inline-flex;
align-items:center;
gap:8px;
background:var(--card);
border:1px solid var(--card-border);
border-radius:999px;
padding:10px 16px;
font-weight:700;
font-size:0.9rem;
color:var(--ink);
cursor:pointer;
}
.cat-pill:hover{border-color:var(--teal);color:var(--teal);}
.cat-pill:focus-visible{outline:3px solid var(--focus);}
.cat-pill svg{width:18px;height:18px;}

/* ---------- section shell ---------- */
section{padding-block:64px;}
.section-head{
display:flex;
justify-content:space-between;
align-items:flex-end;
gap:20px;
margin-bottom:30px;
flex-wrap:wrap;
}
.section-head h2{font-size:clamp(1.5rem,3vw,2.1rem);}
.section-head .lead{color:var(--ink-soft);max-width:520px;font-size:1rem;margin-top:6px;}

.alt{background:var(--paper-soft);}

/* ---------- categories grid (full, hacks page) ---------- */
.cat-grid{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
gap:16px;
}
.cat-tile{
background:var(--card);
border:1px solid var(--card-border);
border-radius:18px;
padding:22px;
text-align:left;
cursor:pointer;
font-family:inherit;
color:var(--ink);
display:flex;
flex-direction:column;
gap:12px;
transition:transform .15s ease, box-shadow .15s ease;
}
.cat-tile:hover{transform:translateY(-3px);box-shadow:0 12px 24px var(--shadow);}
.cat-tile:focus-visible{outline:3px solid var(--focus);}
.cat-tile.active{border-color:var(--teal);box-shadow:0 0 0 2px var(--teal) inset;}
a.cat-tile{text-decoration:none;}
.cat-icon{
width:46px;height:46px;
border-radius:12px;
display:flex;align-items:center;justify-content:center;
}
.cat-tile h3{font-size:1.08rem;font-family:'Baloo 2',sans-serif;}
.cat-tile span{color:var(--ink-soft);font-size:0.88rem;}

.archive-group{margin-top:8px;}
.archive-group + .archive-group{margin-top:40px;}
.archive-group h2{font-size:1.15rem;margin-bottom:14px;}

/* ---------- hack of the day ---------- */
.spotlight{
display:grid;
grid-template-columns:1.1fr 1fr;
gap:34px;
align-items:center;
background:var(--card);
border:1px solid var(--card-border);
border-radius:26px;
padding:clamp(22px,4vw,44px);
box-shadow:0 14px 34px var(--shadow);
}
@media (max-width:760px){.spotlight{grid-template-columns:1fr;}}
.badge{
display:inline-flex;
align-items:center;
gap:8px;
background:var(--gold);
color:var(--ink-on-gold);
padding:7px 16px 9px;
border-radius:999px;
font-family:'Caveat',cursive;
font-size:1.2rem;
font-weight:700;
transform:rotate(-3deg);
}
.spotlight h2{font-size:clamp(1.5rem,3vw,2rem);margin-top:14px;}
.spotlight p{color:var(--ink-soft);margin-top:14px;font-size:1.03rem;}
.spotlight-art{
background:linear-gradient(155deg,var(--teal) 0%,var(--teal-strong) 100%);
border-radius:20px;
aspect-ratio:4/3;
display:flex;
align-items:center;
justify-content:center;
position:relative;
overflow:hidden;
}
.spotlight-art svg{width:46%;height:46%;stroke:#fff;opacity:0.92;}
.spotlight-art::after{
content:"";
position:absolute;inset:0;
background:radial-gradient(circle at 30% 20%, rgba(255,255,255,0.18), transparent 55%);
}

/* ---------- video ---------- */
.video-grid{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
gap:22px;
}
.video-card{
background:var(--card);
border:1px solid var(--card-border);
border-radius:18px;
overflow:hidden;
}
.video-thumb{
aspect-ratio:16/9;
background:linear-gradient(140deg,var(--panel-navy),var(--teal-strong));
display:flex;align-items:center;justify-content:center;
position:relative;
}
.video-thumb .play{
width:58px;height:58px;
border-radius:50%;
background:rgba(255,255,255,0.92);
display:flex;align-items:center;justify-content:center;
}
.video-thumb .play svg{width:22px;height:22px;fill:var(--ink-on-gold);stroke:none;margin-left:3px;}
.video-info{padding:16px 18px 20px;}
.video-info h3{font-size:1.02rem;font-family:'Baloo 2',sans-serif;}
.video-info span{color:var(--ink-soft);font-size:0.86rem;}
.video-note{
margin-top:18px;
font-size:0.86rem;
color:var(--ink-soft);
font-style:italic;
}

/* ---------- shop shelf ---------- */
.shelf-wrap{
background:var(--shelf);
border-radius:26px;
padding:clamp(20px,4vw,40px);
}
.shop-grid{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(210px,1fr));
gap:18px;
}
.shop-card{
background:var(--card);
border-radius:18px;
padding:20px;
display:flex;
flex-direction:column;
gap:10px;
box-shadow:0 10px 22px var(--shadow);
}
.shop-thumb{
display:block;
aspect-ratio:1/1;
border-radius:14px;
background:var(--paper-soft);
border:1px solid var(--card-border);
overflow:hidden;
padding:10px;
}
.shop-thumb:focus-visible{outline:3px solid var(--focus);outline-offset:2px;}
.shop-thumb img{width:100%;height:100%;object-fit:contain;display:block;}
.shop-name-link{text-decoration:none;color:inherit;display:block;}
.shop-name-link:hover h3{color:var(--teal);}
.shop-name-link:focus-visible{outline:3px solid var(--focus);outline-offset:2px;border-radius:6px;}
.shop-card h3{font-size:1.02rem;font-family:'Baloo 2',sans-serif;}
.shop-card p{margin:0;color:var(--ink-soft);font-size:0.9rem;flex:1;}
.shop-price{font-family:'Baloo 2',sans-serif;font-size:1.15rem;font-weight:700;color:var(--gold-strong);}
.shop-compare{font-size:0.78rem;font-weight:600;color:var(--ink-soft);margin-right:0.5rem;white-space:nowrap;}
.shop-compare s{text-decoration:line-through;}

/* ---------- newsletter ---------- */
.newsletter{
background:var(--panel-navy);
border-radius:26px;
padding:clamp(28px,5vw,48px);
display:flex;
align-items:center;
gap:28px;
flex-wrap:wrap;
color:#F3EFE4;
}
.newsletter h2{color:#fff;font-size:clamp(1.4rem,3vw,1.9rem);}
.newsletter p{color:#C9D2E8;margin-top:8px;max-width:420px;}
.newsletter-text{flex:1 1 220px;}
.newsletter-cta{flex:0 1 380px;display:flex;flex-direction:column;gap:8px;}
.newsletter-photo{
width:76px;height:76px;flex-shrink:0;
border-radius:18px;overflow:hidden;
box-shadow:0 8px 20px rgba(0,0,0,0.25);
}
.newsletter-photo img{width:100%;height:100%;object-fit:cover;display:block;}
.newsletter-form{display:flex;gap:8px;flex-wrap:wrap;}
.newsletter-input{
flex:1 1 200px;
min-width:0;
padding:12px 14px;
border-radius:10px;
border:1.5px solid var(--input-border);
background:#fff;
color:var(--ink);
font-size:0.92rem;
font-family:inherit;
}
.newsletter-input:focus-visible{outline:3px solid var(--focus);outline-offset:1px;}
.newsletter-submit{flex:none;}
.newsletter-success{
margin:0;
font-size:0.92rem;
color:#fff;
font-weight:700;
}
.newsletter-success[hidden]{display:none;}

@media (max-width:760px){
/* Once the row can't fit photo + text + form on one line, drop the form
   to its own full-width line under the photo+headline row instead of
   letting flexbox squeeze it or wrap it under the photo alone. */
.newsletter-cta{flex-basis:100%;}
}

/* ---------- newsletter photo gallery ---------- */
.nl-gallery{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:20px;
}
.nl-photo{
   margin:0;border-radius:16px;overflow:hidden;
   background:var(--card);
   border:1px solid var(--card-border);
   box-shadow:0 6px 18px rgba(20,33,63,0.08);
   text-decoration:none;color:inherit;display:block;
   transition:transform 0.15s ease,box-shadow 0.15s ease;
}
.nl-photo:hover{transform:translateY(-3px);box-shadow:0 12px 24px var(--shadow);}
.nl-photo img{width:100%;aspect-ratio:2/1;object-fit:cover;display:block;}
.nl-caption{
   padding:12px 14px;font-size:0.88rem;font-weight:700;
   color:var(--ink);display:block;
}
.nl-photo:hover .nl-caption{color:var(--teal-strong);}
@media (max-width:760px){
.nl-gallery{grid-template-columns:repeat(2,1fr);}
}
@media (max-width:480px){
.nl-gallery{grid-template-columns:1fr;}
.newsletter-photo{display:none;}
/* flex-basis values sized for the one-line row (.newsletter-text,
.newsletter-input) need resetting to flex:none here, otherwise they can
leave dead space once the row no longer has its normal width to size
against. */
.newsletter-text{flex:none;}
.newsletter-cta{flex:none;width:100%;}
.newsletter-form{flex-direction:column;}
.newsletter-input{flex:none;width:100%;}
.newsletter-submit{width:100%;justify-content:center;}
}

/* ---------- footer ---------- */
footer{padding-block:40px;border-top:1px solid var(--card-border);}
.footer-inner{
display:flex;
justify-content:space-between;
align-items:center;
gap:20px;
flex-wrap:wrap;
}
.footer-links{display:flex;gap:22px;flex-wrap:wrap;font-weight:700;font-size:0.92rem;}
.footer-links a{text-decoration:none;}
.footer-links a:hover{color:var(--teal);}
.copyright{color:var(--ink-soft);font-size:0.85rem;}

@keyframes fadeUp{from{opacity:0;transform:translateY(16px);}to{opacity:1;transform:translateY(0);}}
.fade-up{animation:fadeUp .6s ease both;}

/* ---------- nav subscribe box ---------- */
.sr-only{
position:absolute;width:1px;height:1px;padding:0;margin:-1px;
overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;
}
.nav-subscribe{position:relative;}
.nav-subscribe-toggle{
display:flex;align-items:center;justify-content:center;
width:42px;height:42px;flex:none;
border-radius:50%;
border:2px solid var(--card-border);
background:var(--paper);
color:var(--ink);
cursor:pointer;
transition:border-color .15s ease, background .15s ease, color .15s ease;
}
.nav-subscribe-toggle:hover{border-color:var(--teal);color:var(--teal);}
.nav-subscribe-toggle:focus-visible{outline:3px solid var(--focus);outline-offset:2px;}
.nav-subscribe-toggle[aria-expanded="true"]{background:var(--paper-soft);border-color:var(--teal);color:var(--teal);}
.nav-subscribe-panel{
position:absolute;
top:calc(100% + 12px);
right:0;
width:280px;
max-width:92vw;
background:var(--card);
border:1px solid var(--card-border);
border-radius:18px;
box-shadow:0 18px 40px var(--shadow);
padding:18px;
z-index:50;
overflow-x:auto;
}
.nav-subscribe-panel[hidden]{display:none;}
.nav-subscribe-close{
position:absolute;
top:10px;
right:10px;
display:flex;
align-items:center;
justify-content:center;
width:26px;
height:26px;
flex:none;
border-radius:50%;
border:none;
background:transparent;
color:var(--ink-soft);
cursor:pointer;
transition:background .15s ease, color .15s ease;
}
.nav-subscribe-close:hover{background:var(--paper-soft);color:var(--ink);}
.nav-subscribe-close:focus-visible{outline:3px solid var(--focus);outline-offset:2px;}
.nav-subscribe-title{
margin:0 22px 12px 0;
font-weight:800;
font-size:0.95rem;
color:var(--ink);
font-family:'Baloo 2',sans-serif;
}
.nav-subscribe-form{
display:flex;
flex-direction:column;
gap:10px;
}
.nav-subscribe-input{
width:100%;
padding:10px 12px;
border-radius:10px;
border:1.5px solid var(--input-border);
background:var(--paper);
color:var(--ink);
font-size:0.9rem;
font-family:inherit;
}
.nav-subscribe-input:focus-visible{outline:3px solid var(--focus);outline-offset:1px;}
.nav-subscribe-submit{
width:100%;
justify-content:center;
}
.nav-subscribe-success{
display:flex;
flex-direction:column;
gap:12px;
}
.nav-subscribe-success[hidden]{display:none;}
.nav-subscribe-success-text{
margin:0;
font-size:0.9rem;
color:var(--ink);
}
.nav-subscribe-done{
width:100%;
justify-content:center;
}
/* Real POST target for the form above -- keeps the visible page from ever
navigating away while the subscription request goes through. */
.nav-subscribe-frame{
display:none;
width:0;
height:0;
border:0;
}

@media (max-width:480px){
/* Stay anchored right under the mail icon, same as desktop (right:0 is
inherited from the base rule above, unchanged) -- a fixed panel pinned
to the bottom of the screen (the old behavior here) opens far away from
the icon someone just tapped and reads as broken/"pushed down too low,"
so this only widens the panel to fit small screens rather than
relocating it. */
.nav-subscribe-panel{
width:min(300px, calc(100vw - 32px));
}
}