/* ==========================================================================
   Outpost Oops — homepage skin (ported from the "Three Skins" mockup).
   Playful "sticker" arena: rounded everything, 3px navy outlines, hard offset
   shadows, Niv's running cutout in a big gradient stage. Uses the shared font
   tokens (Fraunces / Source Serif 4 / system-ui) + this skin's palette
   (oops/theme.css). Desktop-first at the mockup's 1180px; responsive = TODO.
   ========================================================================== */

* { box-sizing: border-box; }
@keyframes oo-float  { 0%,100%{ transform:translateY(0) }   50%{ transform:translateY(-13px) } }
@keyframes oo-wiggle { 0%,100%{ transform:rotate(-3deg) }   50%{ transform:rotate(3deg) } }
@keyframes oo-spin   { to{ transform:rotate(360deg) } }

body { margin:0; background:var(--c-bg); color:var(--c-ink); overflow-x:hidden; }
.oo-page { width:min(1180px,100%); margin-inline:auto; }
a { color:inherit; }
.mark { flex:none; display:block; }
.bfree { font-family:var(--font-ui); font-size:11px; font-weight:600; color:#fff; background:#4F9A77; padding:2px 9px; border-radius:999px; }

/* --- nav --- */
.oo-nav { display:flex; align-items:center; justify-content:space-between; padding:22px 44px; }
.oo-wm { display:flex; align-items:center; gap:10px; text-decoration:none; }
.oo-wmt { font-family:var(--font-display); font-size:22px; font-weight:700; color:var(--c-ink); }
.oo-wmt span { color:var(--c-coral); }
.oo-pills { display:flex; align-items:center; gap:6px; background:#fff; border:2px solid var(--c-ink); padding:5px; border-radius:999px; box-shadow:0 3px 0 rgba(32,36,58,.16); }
.oo-pills a { font-family:var(--font-ui); font-weight:600; font-size:14.5px; text-decoration:none; color:var(--c-ink); padding:8px 15px; border-radius:999px; }
.oo-pills a:hover { background:#FFE6B8; }
.oo-read { background:var(--c-gold); color:var(--c-ink); font-family:var(--font-ui); font-weight:700; font-size:15px; padding:11px 20px; border-radius:999px; text-decoration:none; box-shadow:0 4px 0 var(--c-gold-deep); }
.oo-pills a.oo-join-link { color:var(--c-gold-deep); font-weight:700; }
/* nav right group (pills + member chip) */
.oo-navend { display:flex; align-items:center; gap:16px; }
.oo-mem { display:inline-flex; align-items:center; gap:10px; font-family:var(--font-ui); font-size:14px; }
.oo-mem-badge { color:#4F9A77; font-weight:700; }
.oo-mem-link { color:var(--c-ink); text-decoration:none; border-bottom:1px solid rgba(32,36,58,.25); }
.oo-mem-link:hover { color:var(--c-gold-deep); }

/* --- hero --- */
.oo-hero { display:grid; grid-template-columns:1.02fr .98fr; gap:36px; align-items:center; padding:30px 44px 56px; }
.oo-tag { display:inline-flex; align-items:center; gap:8px; font-family:var(--font-ui); font-size:13.5px; font-weight:700; color:#fff; background:var(--c-coral); padding:8px 16px; border-radius:999px; margin-bottom:22px; transform:rotate(-2.5deg); box-shadow:0 4px 0 rgba(166,77,49,.5); }
.oo-h1 { font-family:var(--font-display); font-weight:700; font-size:72px; line-height:.95; letter-spacing:-.025em; margin:0 0 22px; }
.oo-pop { color:var(--c-coral); position:relative; white-space:nowrap; }
.oo-pop::after { content:""; position:absolute; left:-2px; right:-2px; bottom:.02em; height:11px; background:var(--c-pop); border-radius:6px; z-index:-1; transform:rotate(-1deg); }
.oo-sub { font-family:var(--font-serif); font-size:20px; line-height:1.58; color:var(--c-ink-sub); margin:0 0 30px; max-width:46ch; }
.oo-herobtns { display:flex; align-items:center; gap:22px; }
.oo-btn { display:inline-flex; align-items:center; gap:9px; background:var(--c-gold); color:var(--c-ink); font-family:var(--font-ui); font-weight:700; font-size:18px; padding:17px 32px; border-radius:999px; text-decoration:none; box-shadow:0 6px 0 var(--c-gold-deep); }
.oo-how { font-family:var(--font-ui); font-size:15px; color:var(--c-gold-deep); text-decoration:none; border-bottom:1px solid rgba(201,138,18,.4); padding-bottom:2px; }
.oo-arena { position:relative; height:444px; border-radius:42px; background:linear-gradient(180deg,#BFE3F2 0%,#DCEFDB 60%,#F7E7BE 100%); overflow:hidden; box-shadow:inset 0 0 0 5px #fff,0 14px 34px -20px rgba(32,36,58,.4); }
.oo-blob { position:absolute; width:118px; height:118px; border-radius:50%; background:var(--c-pop); top:40px; left:42px; box-shadow:0 0 0 14px rgba(255,210,74,.26),0 0 0 30px rgba(255,210,74,.13); animation:oo-spin 26s linear infinite; }
.oo-hill { position:absolute; left:0; right:0; bottom:0; height:120px; background:#9ED39A; border-radius:50% 50% 0 0/70px 70px 0 0; }
.oo-spk { position:absolute; border-radius:50%; }
.oo-niv { position:absolute; bottom:-6px; left:50%; margin-left:-54%; width:108%; max-width:none; animation:oo-float 6s ease-in-out infinite; }

/* --- free-reader strip --- */
.oo-strip { margin:6px 44px 60px; background:#fff; border-radius:28px; padding:16px; border:3px solid var(--c-ink); box-shadow:9px 11px 0 rgba(242,180,58,.6); display:grid; grid-template-columns:170px 1fr auto; gap:28px; align-items:center; transform:rotate(-1deg); }
.oo-strip img { width:100%; display:block; border-radius:16px; }
.oo-bubble { font-family:var(--font-display); font-size:26px; font-weight:600; line-height:1.12; margin:0; }
.oo-bubble2 { font-family:var(--font-serif); font-size:17px; color:var(--c-ink-sub); margin:10px 0 0; max-width:52ch; }
.oo-stickerbtn { background:var(--c-gold); color:var(--c-ink); font-family:var(--font-ui); font-weight:700; font-size:16px; padding:15px 26px; border-radius:999px; text-decoration:none; white-space:nowrap; margin-right:14px; box-shadow:0 5px 0 var(--c-gold-deep); transform:rotate(2deg); }

/* --- sections --- */
.oo-sec { padding:8px 44px 56px; }
.oo-h2 { font-family:var(--font-display); font-weight:600; font-size:34px; letter-spacing:-.01em; margin:0 0 6px; }
.oo-lead { font-family:var(--font-serif); font-size:17px; color:var(--c-ink-dim); margin:0 0 30px; }
.oo-tiles { display:grid; grid-template-columns:repeat(3,1fr); gap:22px; }
.oo-tile { border-radius:28px; padding:30px; position:relative; overflow:hidden; border:3px solid var(--c-ink); box-shadow:6px 8px 0 rgba(32,36,58,.14); }
.oo-tile h3 { font-family:var(--font-display); font-size:24px; font-weight:700; margin:0 0 8px; }
.oo-tile p { font-family:var(--font-serif); font-size:16px; line-height:1.55; color:var(--c-ink-sub); margin:0; }
.oo-circ { width:90px; height:90px; border-radius:50%; overflow:hidden; background:#fff; margin-bottom:18px; border:3px solid var(--c-ink); }
.oo-circ img { width:100%; height:100%; object-fit:cover; }

/* --- psychology band --- */
.oo-band { background:var(--oo-band); border:3px solid var(--c-ink); border-radius:34px; margin:0 44px 56px; padding:46px; box-shadow:9px 11px 0 rgba(207,107,71,.45); }
.oo-bcards { display:grid; grid-template-columns:repeat(2,1fr); gap:18px; margin-top:30px; }
.oo-bc { background:#fff; border:2.5px solid var(--c-ink); border-radius:18px; padding:24px; box-shadow:4px 5px 0 rgba(32,36,58,.14); }
.oo-bc h3 { font-family:var(--font-display); font-size:19px; font-weight:700; margin:0 0 7px; }
.oo-bc p { font-family:var(--font-serif); font-size:15px; line-height:1.55; color:var(--c-ink-sub); margin:0; }

/* --- browse rail --- */
.oo-railhead { display:flex; align-items:baseline; justify-content:space-between; margin-bottom:28px; }
.oo-rail { display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
.oo-cover { width:100%; aspect-ratio:4/5; display:block; object-fit:cover; border-radius:20px; border:3px solid var(--c-ink); box-shadow:6px 7px 0 rgba(32,36,58,.16); background:#fff; }
.oo-cover--empty { display:grid; place-items:center; font-family:var(--font-ui); font-size:13px; color:var(--c-ink-dim); }
.oo-stt { font-family:var(--font-display); font-size:18px; font-weight:700; margin-top:15px; }
.oo-row { display:flex; align-items:center; gap:10px; margin-top:6px; }
.oo-age { font-family:var(--font-ui); font-size:13px; color:var(--c-ink-dim); }
.oo-prem { font-family:var(--font-ui); font-size:11px; font-weight:600; color:var(--c-gold-deep); background:rgba(242,180,58,.18); padding:2px 9px; border-radius:999px; }
.oo-viewall { font-family:var(--font-ui); font-size:15px; color:var(--c-coral); text-decoration:none; }

/* --- mail capture --- */
.oo-mail { background:var(--c-gold); border:3px solid var(--c-ink); border-radius:34px; margin:0 44px 56px; padding:46px; display:grid; grid-template-columns:1fr 1fr; gap:36px; align-items:center; box-shadow:9px 11px 0 rgba(32,36,58,.2); }
.oo-mailh { font-family:var(--font-display); font-size:34px; font-weight:700; letter-spacing:-.01em; margin:0 0 10px; }
.oo-mailp { font-family:var(--font-serif); font-size:18px; line-height:1.5; color:#5a4a1f; margin:0; max-width:42ch; }
.oo-mf { display:flex; gap:12px; }
.oo-mi { flex:1; font-family:var(--font-serif); font-size:16px; padding:15px 18px; border-radius:999px; border:2.5px solid var(--c-ink); background:#FFFDF9; color:var(--c-ink); outline:none; }
.oo-mb { background:var(--c-ink); color:#FBF7EF; font-family:var(--font-ui); font-weight:700; font-size:16px; padding:15px 24px; border-radius:999px; border:none; cursor:pointer; }
.oo-ok { font-family:var(--font-ui); font-size:14px; color:#3a4a2a; font-weight:600; margin-top:12px; }

/* --- footer (carries the Micbren legal line) --- */
.oo-foot { background:var(--oo-foot); padding:46px 44px; border-radius:34px 34px 0 0; }
.oo-fg { display:grid; grid-template-columns:1.5fr 1fr 1fr; gap:36px; }
.oo-fwm { font-family:var(--font-display); font-size:21px; font-weight:600; color:#F6F1E7; margin-bottom:12px; }
.oo-fwm span { color:var(--c-gold); }
.oo-fp { font-family:var(--font-serif); font-size:15px; line-height:1.6; color:rgba(246,241,231,.6); margin:0; max-width:40ch; }
.oo-fc { display:flex; flex-direction:column; gap:10px; font-family:var(--font-ui); font-size:15px; }
.oo-fc a { color:rgba(246,241,231,.78); text-decoration:none; }
.oo-fr { border-top:1px solid rgba(246,241,231,.14); margin-top:34px; padding-top:18px; font-family:var(--font-ui); font-size:13px; color:rgba(246,241,231,.45); }
.oo-fr b { color:rgba(246,241,231,.7); font-weight:600; }

/* ==========================================================================
   Responsive — desktop-first above; collapse the multi-column grids and
   dial type/padding down for tablet (≤880px) and phone (≤560px).
   ========================================================================== */
@media (max-width: 880px) {
  .oo-hero { grid-template-columns:1fr; gap:28px; padding:18px 24px 40px; }
  .oo-h1 { font-size:clamp(40px,8.5vw,60px); }
  .oo-arena { height:340px; }
  .oo-tiles { grid-template-columns:repeat(2,1fr); }
  .oo-rail  { grid-template-columns:repeat(2,1fr); }
  .oo-bcards { grid-template-columns:1fr; }
  .oo-mail  { grid-template-columns:1fr; }
  .oo-foot .oo-fg { grid-template-columns:1fr 1fr; }
  .oo-nav, .oo-sec { padding-left:24px; padding-right:24px; }
  .oo-band, .oo-mail, .oo-strip { margin-left:24px; margin-right:24px; }
}
@media (max-width: 560px) {
  .oo-nav { padding:16px 18px; }
  .oo-pills { gap:0; padding:4px; }
  .oo-pills a:not(.oo-read) { display:none; }   /* collapse secondary links, keep the CTA */
  .oo-h1 { font-size:clamp(33px,10.5vw,46px); }
  .oo-h2 { font-size:27px; }
  .oo-sub { font-size:18px; }
  .oo-herobtns { flex-direction:column; align-items:flex-start; gap:14px; }
  .oo-arena { height:270px; border-radius:30px; }
  .oo-strip { grid-template-columns:1fr; gap:16px; transform:none; margin:6px 18px 44px; }
  .oo-strip img { max-width:160px; }
  .oo-stickerbtn { transform:none; margin-right:0; justify-self:start; }
  .oo-tiles { grid-template-columns:1fr; }
  .oo-tile { transform:none !important; }        /* override inline rotations */
  .oo-rail { grid-template-columns:1fr; }
  .oo-sec  { padding-left:18px; padding-right:18px; }
  .oo-band, .oo-mail { padding:28px; margin-left:18px; margin-right:18px; }
  .oo-mailh { font-size:27px; }
  .oo-mf { flex-direction:column; }
  .oo-foot { padding:36px 22px; }
  .oo-foot .oo-fg { grid-template-columns:1fr; gap:24px; }
}