/* EARBUD shared styles used by every page (loaded after each page's own CSS). */

/* ---- hand-drawn divider under the nav (the landing page draws its own at the top of the hero) ---- */
nav{position:relative}
nav::after{content:"";position:absolute;left:0;right:0;bottom:-7px;height:14px;background:linear-gradient(var(--dark),var(--dark)) center/100% 3px no-repeat;filter:url(#rough);pointer-events:none}
nav:has(+ .hero)::after{display:none}

/* ---- hamburger: only shows on small screens ---- */
.burger{display:none;position:relative;width:38px;height:38px;padding:0;border:0;background:none;cursor:pointer;flex:none;color:var(--dark)}
.burger .bars{position:absolute;left:6px;right:6px;top:11px;height:16px;filter:url(#rough-art);
  background:linear-gradient(currentColor,currentColor) 0 0/100% 3px no-repeat,linear-gradient(currentColor,currentColor) 0 50%/100% 3px no-repeat,linear-gradient(currentColor,currentColor) 0 100%/100% 3px no-repeat}
.burger:focus-visible{outline:3px dashed var(--dark);outline-offset:3px;border-radius:12px}
@media (max-width:640px){
  nav:has(.burger) .burger{display:block;margin-left:auto}
  nav:has(.burger) .me{margin-left:0}
  nav:has(.burger) .links{display:none;position:absolute;top:calc(100% + 12px);left:14px;right:14px;z-index:60;flex-direction:column;align-items:stretch;gap:0;
    margin:0;padding:6px 20px;font-size:.72rem;letter-spacing:.06em;isolation:isolate;border-radius:20px}
  nav:has(.burger).open .links{display:flex}
  nav:has(.burger) .links::before{content:"";position:absolute;inset:0;z-index:-1;border:3px solid var(--dark);border-radius:inherit;background:var(--white);box-shadow:0 4px 0 var(--dark);filter:url(#rough)}
  nav:has(.burger) .links a{padding:16px 0;border-top:2px dashed var(--mid)}
  nav:has(.burger) .links a:first-child{border-top:0}
  nav:has(.burger) .links a::after{bottom:6px}
}

/* ---- footer credit ---- */
footer .base a{position:relative;display:inline-block;color:inherit;text-decoration:none}
footer .base a::after{content:"";position:absolute;left:-2px;right:-2px;bottom:-9px;height:14px;background:linear-gradient(var(--dark),var(--dark)) center/100% 2px no-repeat;filter:url(#rough);pointer-events:none}

/* ---- "back to reviews" gets the same boiled underline as the nav ---- */
.back{text-decoration:none;position:relative;display:inline-block}
.back::after{content:"";position:absolute;left:-2px;right:-2px;bottom:-10px;height:14px;background:linear-gradient(var(--dark),var(--dark)) center/100% 3px no-repeat;filter:url(#rough);pointer-events:none}

/* ---- landing page: bigger subhead on desktop ---- */
@media (min-width:900px){.hero .sub{font-size:1.2rem;max-width:34ch}}

/* ---- interviews ---- */
.ibadge{align-self:flex-start;display:inline-block;font-family:var(--display);text-transform:uppercase;letter-spacing:.06em;font-size:.55rem;line-height:1.3;color:var(--dark);text-decoration:none;position:relative;z-index:2;padding:5px 11px;border-radius:12px;width:fit-content}
.ibadge.rough::before{--bg:var(--mid);--bw:2px;--sh:2px}
.kicker{font-family:var(--display);text-transform:uppercase;letter-spacing:.14em;font-size:.68rem;opacity:.75}
.pub{width:min(860px,100%)}
.entry{display:grid;gap:8px;padding:26px;border-radius:24px;text-decoration:none;color:var(--dark);transition:transform .12s}
.entry:hover{transform:translateY(2px)}
.entry:focus-visible{outline:3px dashed var(--dark);outline-offset:6px}
.entry .dt{font-family:var(--display);text-transform:uppercase;letter-spacing:.1em;font-size:.62rem;opacity:.7}
.entry h2{margin:0;font-size:clamp(1.15rem,3.4vw,1.6rem);line-height:1.2}
.entry .m{font-weight:700}
.entry .s{line-height:1.35;font-size:1.05rem}
.entry .go{display:block;font-family:var(--display);text-transform:uppercase;letter-spacing:.06em;font-size:.62rem}
.elist{display:grid;gap:30px}
.embed{position:relative;border:3px solid var(--dark);border-radius:20px;overflow:hidden;background:var(--dark);box-shadow:0 4px 0 var(--dark)}
.embed.v{aspect-ratio:16/9}
.embed iframe,.embed video{position:absolute;inset:0;width:100%;height:100%;border:0}
.embed.a{background:none;padding:14px}
.embed audio{width:100%}
.embed.sp{height:180px}
.linklist{list-style:none;padding:0;display:flex;gap:14px;flex-wrap:wrap}
.linklist a.btn{padding:12px 20px}
.reviewcta{display:grid;gap:14px;justify-items:start;padding:24px;border-radius:22px}
.reviewcta::before{--bg:var(--mid)}
.reviewcta p{font-family:var(--display);text-transform:uppercase;letter-spacing:.06em;font-size:.8rem;line-height:1.6}
.rtext h2{font-size:1.05rem;margin:14px 0 0}


/* interview covers: palette tint that fades to true colour on hover */
.cover{position:relative;overflow:hidden;background:var(--mid);border:3px solid var(--dark);border-radius:18px;aspect-ratio:1/1;isolation:isolate}
.cover img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.cover .tint{filter:url(#duo);transition:opacity .45s ease}
.hovercover:hover .cover .tint,.hovercover:focus-visible .cover .tint,.cover:hover .tint{opacity:0}
.cover.ph{display:grid;place-items:center;background:var(--mid)}
.cover.ph span{font-family:var(--display);font-size:clamp(2.2rem,7vw,3.6rem);color:var(--dark);opacity:.55}
.entry.hascover{grid-template-columns:230px 1fr;gap:22px;align-items:center}
.entry .et{display:grid;gap:8px}
.entry .cover{aspect-ratio:1/1}
@media (max-width:640px){.entry.hascover{grid-template-columns:1fr;gap:16px}.entry .cover{aspect-ratio:16/10}}
.icover{aspect-ratio:16/9;max-height:420px;width:100%}
.icover .tint{display:none}
@media (prefers-reduced-motion:reduce){.cover .tint{transition:none}}