@font-face{
  font-family:'Inter';font-style:normal;font-weight:400 800;font-display:swap;
  src:url(../fonts/inter-latin.woff2) format('woff2');
}
  :root{
    --bg:#170f08;
    --peach:#f6c28e;
    --peach-hover:#f8cd9f;
    --ink:#170f08;
    --text:#ffffff;
    --muted:#a8a29e;
    --line:rgba(255,255,255,.12);
    --field:#fffaf4;
    --error:#ffb4a2;
  }
  *{box-sizing:border-box}
  html,body{margin:0;padding:0}
  body{
    background:var(--bg);color:var(--text);
    font-family:Inter,system-ui,-apple-system,"Segoe UI",Arial,sans-serif;
    -webkit-font-smoothing:antialiased;
    min-height:100vh;
  }
  .wrap{max-width:580px;margin:0 auto;padding:0 16px 48px}

  /* site background: the Weekly Jungle cover, fixed behind everything.
     Two layers: a blurred, darkened copy that fills any screen shape, and the
     sharp cover on top, never wider than 900px so the logo is never cropped. */
  .bg{position:fixed;inset:0;z-index:-1;overflow:hidden;background:var(--bg)}
  .bg-blur{position:absolute;inset:-60px;background:url(hero-wj.jpg) center/cover no-repeat;
    filter:blur(24px) brightness(.42) saturate(1.1)}
  .bg-sharp{position:absolute;top:0;left:50%;transform:translateX(-50%);
    width:min(100vw,900px);aspect-ratio:1/1;
    background:url(hero-wj.jpg) center top/100% auto no-repeat;
    -webkit-mask-image:linear-gradient(to right,transparent 0,#000 6%,#000 94%,transparent 100%);
            mask-image:linear-gradient(to right,transparent 0,#000 6%,#000 94%,transparent 100%)}
  .bg-sharp:after{content:"";position:absolute;inset:0;
    background:linear-gradient(to bottom,rgba(23,15,8,0) 0%,rgba(23,15,8,0) 34%,rgba(23,15,8,.62) 50%,rgba(23,15,8,.84) 66%,rgba(23,15,8,.92) 100%)}

  header.intro{text-align:center;padding-top:min(68vw,500px);position:relative}
  /* the title is already in the cover, so the h1 stays for screen readers only */
  h1{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);margin:0}
  .tagline{font-size:16px;line-height:1.45;font-weight:500;margin:0 auto 16px;max-width:420px;
    text-shadow:0 1px 10px rgba(23,15,8,.85)}
  .socials{display:flex;justify-content:center;gap:22px;margin:0 0 26px}
  .socials a{color:var(--text);display:inline-flex;opacity:.95}
  .socials a:hover{opacity:1;transform:translateY(-1px)}
  .socials svg{width:26px;height:26px}

  /* peach blocks, same as the Linktree buttons */
  .card,.link{
    background:var(--peach);color:var(--ink);border-radius:12px;
  }
  .card{padding:20px 18px 18px;margin:0 0 14px}
  .card h2{font-size:18px;line-height:1.3;margin:0 0 4px;font-weight:700}
  .card p.lead{font-size:14px;line-height:1.5;margin:0 0 14px}
  label.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
  .row{display:flex;gap:8px}
  input[type=email],input.code{
    flex:1;min-width:0;height:48px;border-radius:10px;border:2px solid transparent;
    background:var(--field);color:var(--ink);font:inherit;font-size:16px;padding:0 14px;outline:none;
  }
  input:focus{border-color:var(--ink)}
  input.code{text-align:center;font-size:24px;font-weight:700;letter-spacing:.42em;padding-left:.42em}
  button.go{
    height:48px;border:0;border-radius:10px;background:var(--ink);color:var(--peach);
    font:inherit;font-size:15px;font-weight:700;padding:0 18px;cursor:pointer;white-space:nowrap;
  }
  button.go:hover{background:#2a1c10}
  button.go[disabled]{opacity:.55;cursor:wait}
  .small{font-size:13px;line-height:1.5;margin:12px 0 0;color:#4a3a2b}
  .linkish{background:none;border:0;padding:0;font:inherit;color:var(--ink);text-decoration:underline;cursor:pointer;font-weight:600}
  .msg{font-size:14px;font-weight:600;margin:10px 0 0;min-height:0;color:#8a2a12}
  .msg:empty{display:none}

  /* link rows: thumbnail on the left, centered text */
  .link{
    display:flex;align-items:center;min-height:64px;padding:8px;margin:0 0 12px;
    text-decoration:none;position:relative;transition:transform .12s ease, background .12s ease;
  }
  .link:hover{background:var(--peach-hover);transform:translateY(-1px)}
  .link img{width:48px;height:48px;border-radius:8px;object-fit:cover;flex:0 0 48px}
  .link span{flex:1;text-align:center;font-size:15px;font-weight:500;padding:0 56px 0 8px;line-height:1.35}
  .link span b{font-weight:700}
  .link .n{display:block;font-size:12px;font-weight:600;opacity:.65;letter-spacing:.06em}

  h3.section{font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);
    font-weight:700;margin:28px 0 12px;text-align:center}
  .who{text-align:center;color:var(--muted);font-size:13px;margin:-8px 0 18px}
  .who .linkish{color:var(--muted)}
  [hidden]{display:none !important}

  /* footer, shared by every page */
  footer{text-align:center;color:var(--muted);font-size:12px;margin-top:36px;line-height:1.7}
  footer nav.legal{margin:0 0 8px;font-size:13px}
  footer nav.legal a{color:var(--text);text-decoration:none;font-weight:600}
  footer nav.legal a:hover{text-decoration:underline}
  footer p{margin:0 0 4px}

  /* long-form pages: privacy, terms, newsletter issues */
  .doc-head{padding-top:min(40vw,280px);text-align:center;margin-bottom:18px}
  .doc-head a.back{display:inline-block;color:var(--text);font-size:13px;font-weight:600;text-decoration:none;
    background:rgba(23,15,8,.6);border-radius:999px;padding:6px 12px;margin:0 0 14px}
  .doc-head h1.page{position:static;width:auto;height:auto;clip:auto;overflow:visible;
    font-size:30px;line-height:1.15;font-weight:800;margin:0;text-shadow:0 1px 12px rgba(23,15,8,.9)}
  .doc-head p.meta{color:var(--muted);font-size:13px;margin:8px 0 0;text-shadow:0 1px 8px rgba(23,15,8,.9)}
  .doc{background:rgba(23,15,8,.9);border-radius:16px;padding:26px 22px;font-size:15.5px;line-height:1.7;color:#f3ede6}
  .doc h2{color:var(--peach);font-size:18px;line-height:1.3;margin:26px 0 8px}
  .doc h2:first-child{margin-top:0}
  .doc p,.doc ul{margin:0 0 12px}
  .doc ul{padding-left:20px}
  .doc li{margin:0 0 6px}
  .doc a{color:var(--peach)}
  .doc strong{color:#fff}

  /* wide screens taller than 900px: the cover grows to fill the whole height,
     so no blurred strip is left under it, and the text moves down in
     proportion to stay below the logo */
  @media (min-aspect-ratio:1/1) and (min-height:900px){
    .bg-sharp{width:100vh}
    header.intro{padding-top:55.6vh}
    .doc-head{padding-top:31.1vh}
  }