/* thelupercarnican.com — self-hosted fonts, no trackers */
@font-face{font-family:"Bagel Fat One";src:url("fonts/bagel-fat-one-latin-400-normal.woff2") format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Silkscreen";src:url("fonts/silkscreen-latin-400-normal.woff2") format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Atkinson Hyperlegible";src:url("fonts/atkinson-hyperlegible-latin-400-normal.woff2") format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Atkinson Hyperlegible";src:url("fonts/atkinson-hyperlegible-latin-700-normal.woff2") format("woff2");font-weight:700;font-display:swap}

:root{
  --bg:#ECE6FF; --grid:#DCD3FF; --ink:#1F1A3D; --muted:#514A78;
  --pink:#FF8AC4; --blue:#BFD3FF; --lime:#D4FF3A; --btn:#3557E8; --soft:#F4F0FF; --stripe:#E4DCFF;
  --display:"Bagel Fat One",system-ui,sans-serif; --pixel:"Silkscreen",ui-monospace,monospace; --body:"Atkinson Hyperlegible",system-ui,sans-serif;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background-color:var(--bg);background-image:linear-gradient(var(--grid) 1px,transparent 1px),linear-gradient(90deg,var(--grid) 1px,transparent 1px);background-size:32px 32px;font-family:var(--body);color:var(--ink);line-height:1.5}
a{color:var(--btn)} a:hover{color:var(--ink)}
img{max-width:100%;display:block}
.skip{position:absolute;left:-999px;top:0;background:var(--ink);color:#fff;padding:10px 14px;z-index:10}
.skip:focus{left:8px}

.ticker{background:var(--ink);color:var(--lime);font-family:var(--pixel);font-size:13px;padding:8px 16px;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.wrap{max-width:1120px;margin:0 auto;padding:0 20px}

.site-head{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:20px;padding:28px 0 32px}
.logo{text-decoration:none;color:var(--ink);display:flex;align-items:center;gap:12px}
.logo span{font-family:var(--display);font-size:clamp(30px,5vw,42px);line-height:1}
.logo:hover{color:var(--ink)}
nav ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:10px}
.tab{font-family:var(--pixel);font-size:14px;text-decoration:none;color:var(--ink);background:#fff;border:2px solid var(--ink);border-radius:999px;padding:10px 18px;min-height:44px;display:inline-flex;align-items:center;box-shadow:3px 3px 0 var(--ink)}
.tab:hover{background:var(--lime);color:var(--ink)}
.tab[aria-current="page"]{background:var(--ink);color:#fff}

.win{background:#fff;border:2px solid var(--ink);border-radius:14px;box-shadow:6px 6px 0 var(--ink);overflow:hidden}
.bar{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:8px 12px;border-bottom:2px solid var(--ink);font-family:var(--pixel);font-size:13px;background:var(--pink)}
.bar.blue{background:var(--blue)} .bar.lime{background:var(--lime)}
.dots{display:flex;gap:6px}
.dots i{width:10px;height:10px;border:2px solid var(--ink);border-radius:50%;background:#fff;display:block}
.pad{padding:24px}

.row{display:flex;flex-wrap:wrap;gap:28px;align-items:stretch}
.grow{flex:999 1 520px;min-width:0}
.side{flex:1 1 280px;min-width:0}
section{margin-top:64px}
h1,h2{font-family:var(--display);font-weight:400;line-height:1.05;margin:0}
h1{font-size:clamp(44px,8vw,64px)}
h2{font-size:clamp(28px,4vw,34px);margin-bottom:20px}
.lede{font-size:20px;max-width:36ch;margin:0}
.label{font-family:var(--pixel);font-size:12px;color:var(--muted)}

.btn{font-family:var(--pixel);font-size:14px;text-decoration:none;border:2px solid var(--ink);border-radius:999px;padding:12px 20px;min-height:44px;display:inline-flex;align-items:center;gap:8px;box-shadow:3px 3px 0 var(--ink);background:#fff;color:var(--ink);cursor:pointer}
.btn.primary{background:var(--btn);color:#fff}
.btn:hover{background:var(--lime);color:var(--ink)}
.btns{display:flex;flex-wrap:wrap;gap:12px}

.hero{position:relative}
.hero .pad{padding:40px 36px 36px;display:flex;flex-direction:column;gap:20px}
.sticker{position:absolute;top:-18px;right:-8px;width:112px;height:112px;border-radius:50%;background:var(--lime);border:2px solid var(--ink);display:flex;align-items:center;justify-content:center;text-align:center;font-family:var(--pixel);font-size:13px;line-height:1.2;transform:rotate(12deg);box-shadow:3px 3px 0 var(--ink)}
.badge{display:inline-block;background:var(--lime);border:2px solid var(--ink);border-radius:999px;padding:6px 12px;font-family:var(--pixel);font-size:12px}

dl.now{margin:0;display:flex;flex-direction:column;gap:16px}
dl.now dd{margin:4px 0 0;font-size:18px;font-weight:700}

.doors{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:24px}
.door{text-decoration:none;color:var(--ink);display:flex;flex-direction:column;gap:10px;padding:22px;background:#fff;border:2px solid var(--ink);border-radius:14px;box-shadow:6px 6px 0 var(--ink)}
.door:hover{background:var(--lime);color:var(--ink)}
.door strong{font-family:var(--display);font-weight:400;font-size:26px}

.ph{background-color:var(--soft);background-image:repeating-linear-gradient(45deg,var(--stripe) 0 10px,var(--soft) 10px 20px);border:2px solid var(--ink);border-radius:10px;display:flex;flex-direction:column;gap:10px;align-items:center;justify-content:center;font-family:var(--pixel);font-size:12px;color:var(--muted);text-align:center;padding:12px;aspect-ratio:16/9}
.play{width:64px;height:64px;border-radius:50%;background:#fff;border:2px solid var(--ink);display:flex;align-items:center;justify-content:center}

.posts a{text-decoration:none;color:var(--ink);display:flex;flex-direction:column;gap:4px}
.posts a span:last-child{font-size:19px;font-weight:700}

.thesis{display:flex;flex-wrap:wrap;gap:32px;padding:32px;align-items:center}
.thesis h3{font-family:var(--display);font-weight:400;font-size:clamp(28px,4vw,38px);line-height:1.1;margin:0}
blockquote{margin:0;padding:24px;border:2px solid var(--ink);border-radius:14px;background:var(--soft);font-family:var(--display);font-size:24px;line-height:1.25}

form.gb{display:flex;flex-direction:column;gap:10px}
form.gb input,form.gb textarea{font:inherit;font-size:17px;padding:12px 14px;min-height:44px;border:2px solid var(--ink);border-radius:10px;background:var(--soft);color:var(--ink)}
form.gb button[disabled]{opacity:.6;cursor:not-allowed;background:#fff;color:var(--ink)}
.empty{flex:1;min-height:300px;display:flex;align-items:flex-end;justify-content:center;padding:24px}

.construction{height:28px;background:repeating-linear-gradient(-45deg,var(--lime) 0 18px,var(--ink) 18px 36px);border-bottom:2px solid var(--ink)}
.wip{text-align:center;padding:56px 28px;display:flex;flex-direction:column;align-items:center;gap:18px}
.wip ul{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:8px;font-size:18px}

.site-foot{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:16px;padding:64px 0 48px;font-family:var(--pixel);font-size:12px}
.site-foot .pill{background:var(--ink);color:var(--lime);padding:6px 10px;border-radius:6px}

@media (max-width:600px){
  .hero .pad{padding:32px 22px 26px}
  .sticker{width:88px;height:88px;font-size:11px;top:-14px;right:-4px}
  .thesis{padding:22px}
}

/* photo gallery */
.gallery{columns:3 280px;column-gap:20px}
.shot{display:block;width:100%;break-inside:avoid;margin:0 0 20px;padding:8px;background:#fff;border:2px solid var(--ink);border-radius:12px;box-shadow:5px 5px 0 var(--ink);cursor:zoom-in;text-align:left;font:inherit;color:var(--ink)}
.shot:hover,.shot:focus-visible{background:var(--lime)}
.shot img{width:100%;height:auto;border-radius:6px;background:var(--soft)}
.shot span{display:block;padding:8px 4px 2px;font-size:14px;line-height:1.3}
.lightbox{position:fixed;inset:0;z-index:50;background:rgba(20,16,40,.92);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;padding:20px;cursor:zoom-out;border:0;width:100%;height:100%}
.lightbox[hidden]{display:none}
.lightbox img{max-width:100%;max-height:calc(100vh - 90px);object-fit:contain;border:2px solid #fff;border-radius:6px;background:#2a2550}
.lightbox p{margin:0;color:#fff;font-family:var(--pixel);font-size:13px;text-align:center}
.gallery-note{margin:0 0 24px;color:var(--muted)}