@font-face{
  font-family:"NothingWorseSystem";
  src:local("Arial Rounded MT Bold"), local("Avenir Next Rounded"), local("SF Pro Rounded");
  font-weight:700;
}

:root{
  --paper:#fff3c7;
  --card:#fffaf0;
  --ink:#071226;
  --muted:#42536d;
  --orange:#ffb347;
  --blue:#cfefff;
  --green:#9be7b3;
  --warning:#ffe4d6;
  --line:#071226;
  --shadow:0 18px 42px rgba(7,18,38,.16);
  --radius:28px;
}

*{box-sizing:border-box}
html{min-height:100%; scroll-behavior:smooth; -webkit-text-size-adjust:100%}
body{
  margin:0;
  min-height:100%;
  font-family:ui-rounded, "NothingWorseSystem", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background:
    radial-gradient(circle at 12% 10%, rgba(255,255,255,.88), transparent 26%),
    radial-gradient(circle at 86% 14%, rgba(207,239,255,.65), transparent 24%),
    radial-gradient(circle at 20% 86%, rgba(255,179,71,.30), transparent 26%),
    linear-gradient(180deg, #fff3c7 0%, #fff8de 48%, #fff0be 100%);
  color:var(--ink);
  line-height:1.62;
  overflow-x:hidden;
}
body:before{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  opacity:.18;
  background-image:repeating-linear-gradient(0deg, rgba(7,18,38,.10) 0, rgba(7,18,38,.10) 1px, transparent 1px, transparent 6px);
  mix-blend-mode:multiply;
}
a{color:#0b4f6c; text-decoration:none; overflow-wrap:anywhere}
a:hover{text-decoration:underline}
.container{width:min(1120px, calc(100% - 40px)); margin:0 auto}
img,svg{max-width:100%; height:auto}
button,input,textarea{font:inherit}

.nav{
  position:sticky;
  top:0;
  z-index:20;
  backdrop-filter:blur(14px);
  background:rgba(255,243,199,.86);
  border-bottom:3px solid rgba(7,18,38,.18);
}
.nav-inner{display:flex; align-items:center; justify-content:space-between; gap:18px; padding:12px 0}
.brand{display:flex; align-items:center; gap:12px; color:var(--ink); font-weight:950; flex-shrink:0; min-width:0}
.brand-mark{
  width:48px;
  height:48px;
  display:inline-grid;
  place-items:center;
  flex:0 0 auto;
  border:3px solid var(--ink);
  border-radius:18px;
  background:var(--orange);
  box-shadow:4px 4px 0 var(--ink);
  font-size:25px;
  line-height:1;
}
.brand-title{display:block; font-size:25px; line-height:1; letter-spacing:-.03em; text-transform:uppercase}
.brand-sub{display:block; margin-top:2px; font-size:10px; letter-spacing:.08em; text-transform:uppercase; color:#26364a}
.links{display:flex; align-items:center; justify-content:flex-end; gap:14px; flex-wrap:wrap; min-width:0}
.links a{font-weight:900; color:#26364a}
.links a.is-current,
.links a[aria-current]{display:inline-flex; align-items:center; justify-content:center; padding:6px 10px; border-radius:999px; background:var(--orange); color:var(--ink); box-shadow:inset 0 0 0 2px var(--ink); text-decoration:none}

h1,h2,h3{line-height:1.08; margin:0 0 16px; overflow-wrap:anywhere; text-wrap:balance}
h1{font-size:clamp(44px, 8vw, 92px); letter-spacing:-.06em; text-transform:uppercase}
h2{font-size:clamp(30px, 4vw, 52px); letter-spacing:-.04em; text-transform:uppercase}
h3{font-size:24px; letter-spacing:-.02em}
.lead{font-size:clamp(18px, 2vw, 24px); color:var(--muted); max-width:780px; font-weight:750}
.kicker{font-size:13px; font-weight:950; letter-spacing:.08em; text-transform:uppercase; color:#0b4f6c}

.hero{padding:34px 0 46px}
.hero-grid{display:grid; grid-template-columns:1.05fr .95fr; gap:34px; align-items:center}
.hero-actions{display:flex; flex-wrap:wrap; gap:14px; margin:28px 0}
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:50px;
  padding:13px 22px;
  border:3px solid var(--ink);
  border-radius:999px;
  background:var(--card);
  color:var(--ink);
  box-shadow:5px 5px 0 var(--ink);
  font-weight:950;
  text-align:center;
}
.btn:hover{transform:translateY(-2px); text-decoration:none}
.btn.primary{background:var(--orange)}
.btn.soft{background:var(--blue)}
.badge-row{display:flex; gap:10px; flex-wrap:wrap; margin-top:20px}
.pill{display:inline-flex; align-items:center; min-height:34px; padding:7px 12px; border:2px solid var(--ink); border-radius:999px; background:rgba(255,250,240,.92); font-size:13px; font-weight:900}

.comic-card,
.phone-card,
.article,
.empty-gallery,
.feature-card{
  background:rgba(255,250,240,.92);
  border:3px solid var(--ink);
  border-radius:var(--radius);
  box-shadow:8px 8px 0 var(--ink);
}
.phone-card{padding:22px; position:relative; overflow:hidden}
.phone-shell{width:min(100%, 330px); aspect-ratio:9 / 18.5; margin:0 auto; border:4px solid var(--ink); border-radius:42px; background:#111827; padding:10px; box-shadow:0 24px 50px rgba(7,18,38,.22)}
.phone-screen{height:100%; border-radius:32px; overflow:hidden; background:var(--paper); position:relative; padding:26px 18px; display:flex; flex-direction:column; justify-content:space-between; gap:14px}
.phone-logo{text-align:center; font-size:36px; font-weight:950; line-height:.95; letter-spacing:-.06em; text-transform:uppercase}
.phone-stickers{display:flex; justify-content:center; gap:8px; font-size:26px}
.message-panel{background:var(--card); border:3px solid var(--ink); border-radius:22px; padding:16px; box-shadow:5px 5px 0 var(--ink); transform:rotate(-1deg)}
.message-panel small{display:block; font-size:12px; font-weight:950; text-transform:uppercase; color:#42536d; margin-bottom:8px}
.message-panel p{margin:0; font-size:18px; line-height:1.35; font-weight:950}
.choice-row{display:grid; grid-template-columns:1fr 1fr; gap:10px}
.choice{border:3px solid var(--ink); border-radius:18px; padding:10px 8px; text-align:center; font-size:13px; font-weight:950; box-shadow:4px 4px 0 var(--ink)}
.choice.blue{background:var(--blue)}
.choice.warn{background:var(--warning)}
.meme-block{min-height:112px; display:grid; place-items:center; border:3px solid var(--ink); border-radius:24px; background:linear-gradient(135deg, var(--green), var(--blue)); font-size:54px; box-shadow:5px 5px 0 var(--ink)}

.section{padding:44px 0}
.section-lead{max-width:820px}
.cards{display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:18px; margin-top:24px}
.feature-card{padding:22px}
.feature-card p{margin:0; color:var(--muted); font-weight:720}
.feature-card h3{margin-bottom:10px}

.article-page{padding:42px 0 54px}
.article{padding:clamp(22px, 4vw, 42px); max-width:920px; margin:0 auto}
.article h1{font-size:clamp(34px, 6vw, 64px)}
.article h2{font-size:clamp(24px, 3.4vw, 36px); margin-top:30px}
.article h3{margin-top:22px}
.article p,.article li{font-size:17px; color:#1f2937; font-weight:650}
.article ul{padding-left:22px}
.article .lead{font-weight:850}
.callout{padding:16px; border:3px solid var(--ink); border-radius:20px; background:var(--blue); box-shadow:5px 5px 0 var(--ink); margin:16px 0}
.callout.warning{background:var(--warning)}
.callout strong{display:block; margin-bottom:6px; font-size:18px; text-transform:uppercase}
.legal-article h1{font-size:clamp(30px, 5vw, 52px)}
.legal-article p,.legal-article li{font-size:15px; line-height:1.7}
.legal-meta{padding:14px 16px; border:2px solid var(--ink); border-radius:18px; background:var(--paper); font-weight:850}
.empty-gallery{padding:40px 24px; text-align:center; max-width:760px; margin:24px auto 0}
.empty-gallery p{margin:0 auto; max-width:560px; color:var(--muted); font-weight:720}

.footer{padding:38px 0; border-top:3px solid rgba(7,18,38,.18); background:rgba(255,243,199,.78)}
.footer-grid{display:grid; grid-template-columns:1.1fr .9fr; gap:24px; align-items:start}
.footer p{color:var(--muted); font-weight:700}
.footer-meta{font-size:14px; margin:6px 0}
.footer .links{justify-content:flex-start}

@media (max-width: 860px){
  .nav-inner,.footer-grid{display:block}
  .links{justify-content:flex-start; margin-top:14px}
  .hero-grid,.cards{grid-template-columns:1fr}
  .phone-card{order:-1}
}

@media (max-width: 520px){
  .container{width:min(100% - 28px, 1120px)}
  .hero{padding-top:26px}
  .hero-actions{display:grid}
  .btn{width:100%}
  .choice-row{grid-template-columns:1fr}
  .article{box-shadow:5px 5px 0 var(--ink); border-radius:22px}
}