/* ===== Lord Ponsfield — $PONSFIELD =====
   Bright storybook-cartoon style, palette + type system lifted from
   jimothy.world: sky wash, cream paper cards, marigold/salmonberry/grass
   accents, thick ink outlines, soft green drop shadows. */

:root{
  --cloud: #FFFFFF;
  --ink: #1E4438;
  --marigold: #FFC02E;
  --marigold-dark: #E8A400;
  --salmonberry: #FF7A57;
  --grass: #79C24A;
  --grass-dark: #3F8B36;
  --leaf: #2C6A38;
  --leaf-light: #A7D65C;
  --fence: #B88C5A;
  --fence-light: #D8B47E;
  --sky-wash: #BFE6F0;
  --sky-wash-2: #DFF3F7;
  --paper: #FFF8E8;

  --shadow-sm: 0 6px 0 rgba(30,68,56,0.9);
  --shadow-card: 0 10px 24px rgba(30,68,56,0.14);
  --radius-lg: 28px;
  --radius-md: 18px;
  --radius-sm: 12px;

  --font-display: "Bricolage Grotesque", "Baloo 2", sans-serif;
  --font-hero: "Titan One", "Baloo 2", sans-serif;
  --font-body: "Overpass", sans-serif;
}

*{box-sizing:border-box; margin:0; padding:0;}
html{scroll-behavior:smooth;}

body{
  background: var(--sky-wash-2);
  color: var(--ink);
  font-family: var(--font-body);
  line-height:1.55;
  overflow-x:hidden;
}

img{max-width:100%; display:block;}
a{color:inherit; text-decoration:none;}
ol,ul{list-style:none;}
button{font-family:inherit;}

.section-kicker{
  font-family: var(--font-body);
  font-weight:700;
  font-size:0.78rem;
  letter-spacing:0.16em;
  color: var(--leaf);
  text-transform:uppercase;
  margin-bottom:0.6rem;
}
.section-title{
  font-family: var(--font-display);
  font-weight:800;
  font-size: clamp(1.7rem, 3.6vw, 2.8rem);
  color: var(--ink);
  margin-bottom:1.2rem;
  max-width: 42rem;
  line-height:1.12;
}

/* ===== TOPBAR ===== */
.topbar{
  position:sticky; top:0; z-index:50;
  background: rgba(255,248,232,0.92);
  backdrop-filter: blur(8px);
  border-bottom:3px solid var(--ink);
}
.topbar__inner{
  max-width:1180px; margin:0 auto;
  padding:0.8rem 1.5rem;
  display:flex; align-items:center; justify-content:space-between;
}
.brand{
  display:flex; align-items:center; gap:0.6rem;
  font-family: var(--font-display);
  font-weight:800;
  font-size:1.1rem;
  color: var(--ink);
}
.brand__thumb{
  width:34px; height:34px; border-radius:50%;
  object-fit:cover; object-position:center 25%;
  border:2.5px solid var(--ink);
}
.topbar__links{display:flex; align-items:center; gap:1.5rem; font-size:0.92rem; font-weight:600;}
.topbar__links a{opacity:0.85; transition:opacity 0.2s;}
.topbar__links a:hover{opacity:1;}
.topbar__cta{
  background: var(--marigold);
  color: var(--ink);
  padding:0.5rem 1.2rem;
  border-radius:999px;
  font-weight:800;
  border:2.5px solid var(--ink);
  box-shadow: 0 4px 0 var(--ink);
}
.topbar__cta:hover{ transform: translateY(2px); box-shadow:0 2px 0 var(--ink); }

/* ===== BUTTONS ===== */
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  padding:0.95rem 1.8rem;
  border-radius:999px;
  font-family: var(--font-body);
  font-weight:800;
  font-size:0.95rem;
  border:3px solid var(--ink);
  transition: transform 0.12s ease, box-shadow 0.12s ease;
}
.btn--marigold{ background: var(--marigold); color: var(--ink); box-shadow: 0 6px 0 var(--ink); }
.btn--marigold:hover{ transform: translateY(3px); box-shadow: 0 3px 0 var(--ink); }
.btn--outline{ background: var(--cloud); color: var(--ink); box-shadow: 0 6px 0 rgba(30,68,56,0.35); }
.btn--outline:hover{ transform: translateY(3px); box-shadow: 0 3px 0 rgba(30,68,56,0.35); }

/* ===== HERO ===== */
.hero{
  position:relative;
  overflow:hidden;
  background: linear-gradient(180deg, var(--sky-wash) 0%, var(--sky-wash-2) 70%, var(--paper) 100%);
  padding: 3.5rem 1.5rem 3rem;
  text-align:center;
}
.hero__sun{
  position:absolute; top:-60px; right:-40px;
  width:260px; height:260px; border-radius:50%;
  background: radial-gradient(circle at 35% 35%, #FFE08A, var(--marigold) 65%, var(--marigold-dark) 100%);
  box-shadow: 0 0 0 18px rgba(255,192,46,0.18);
  z-index:0;
}
.hero__blob{
  position:absolute; border-radius:50%;
  background: rgba(255,255,255,0.55);
  filter: blur(2px);
  z-index:0;
}
.hero__blob--left{ width:340px; height:340px; top:-80px; left:-140px; }
.hero__blob--right{ width:280px; height:280px; bottom:-60px; right:10%; opacity:0.6; }

.doodle{ position:absolute; z-index:1; }
.doodle--sparkle1{ width:34px; top:14%; left:8%; opacity:0.9; }
.doodle--sparkle2{ width:26px; top:60%; left:4%; opacity:0.85; }
.doodle--leaf1{ width:46px; top:20%; right:12%; transform:rotate(-18deg); }
.doodle--leaf2{ width:36px; top:8%; left:30%; transform:rotate(24deg); }
.doodle--coin{ width:44px; top:66%; right:8%; }

.hero__wordmark{ position:relative; z-index:2; max-width:820px; margin:0 auto; }
.hero__sprout{ position:absolute; top:-1.6rem; left:50%; transform:translateX(-50%); font-size:1.5rem; }
.hero__title{
  position:relative;
  font-family: var(--font-hero);
  font-weight:400;
  font-size: clamp(2.8rem, 9vw, 6rem);
  color: var(--paper);
  -webkit-text-stroke: 3px var(--ink);
  paint-order: stroke fill;
  letter-spacing:0.01em;
  line-height:1;
  filter: drop-shadow(0 8px 0 rgba(30,68,56,0.18));
}
.hero__subtitle{
  font-family: var(--font-display);
  font-weight:800;
  font-size: clamp(1.3rem, 3.4vw, 2rem);
  color: var(--grass-dark);
  margin-top:0.4rem;
  letter-spacing:0.02em;
}
.hero__tag{
  font-weight:700;
  font-size:1.1rem;
  color: var(--ink);
  margin-top:1rem;
  display:flex; align-items:center; justify-content:center; gap:0.6rem;
  flex-wrap:wrap;
}
.doodle-heart{ font-size:1.1rem; }

.hero__actions{
  position:relative; z-index:2;
  display:flex; flex-wrap:wrap; gap:1rem; justify-content:center;
  margin: 1.8rem 0 2.4rem;
}

.hero__portrait{
  position:relative; z-index:2;
  max-width:420px; margin:0 auto 2.2rem;
  border-radius: var(--radius-lg);
  overflow:hidden;
  border:4px solid var(--ink);
  box-shadow: 0 10px 0 var(--ink);
  aspect-ratio: 1/0.95;
}
.hero__portrait img{ width:100%; height:100%; object-fit:cover; object-position:center 28%; }

/* stat / patience card */
.stat-card{
  position:relative; z-index:2;
  max-width:640px; margin:0 auto 2.4rem;
  background: var(--paper);
  border:3px solid var(--ink);
  border-radius: var(--radius-md);
  padding:1.3rem 1.6rem;
  box-shadow: var(--shadow-card);
  text-align:left;
}
.stat-card__row{
  display:flex; justify-content:space-between;
  font-weight:800; font-size:0.85rem; letter-spacing:0.04em;
  color: var(--ink);
  margin-bottom:0.6rem;
}
.stat-card__row--small{ font-weight:600; font-size:0.72rem; color: var(--leaf); margin:0.6rem 0 0; letter-spacing:0.08em; }
.stat-card__track{
  position:relative;
  height:18px; border-radius:999px;
  background: rgba(30,68,56,0.1);
  border:2px solid var(--ink);
  overflow:visible;
}
.stat-card__fill{
  position:absolute; inset:0;
  border-radius:999px;
  background: linear-gradient(90deg, var(--grass), var(--marigold));
  width:100%;
}
.stat-card__knob{
  position:absolute; right:-4px; top:50%; transform:translateY(-50%);
  width:26px; height:26px; border-radius:50%;
  background: var(--marigold);
  border:3px solid var(--ink);
  box-shadow: 0 3px 0 rgba(30,68,56,0.4);
}

/* ticker */
.ticker{
  position:relative; z-index:2;
  max-width:900px; margin:0 auto;
  display:grid;
  grid-template-columns: 1fr 1.6fr;
  gap:1.2rem;
  text-align:left;
}
.ticker__card{
  background: var(--paper);
  border:3px solid var(--fence);
  border-radius: var(--radius-md);
  padding:1.2rem 1.4rem;
  box-shadow: var(--shadow-card);
}
.ticker__label{
  display:block;
  font-weight:800; font-size:0.72rem; letter-spacing:0.12em;
  color: var(--leaf); margin-bottom:0.4rem;
}
.ticker__value{ font-family: var(--font-display); font-weight:800; }
.ticker__value--big{ font-size:1.7rem; color: var(--ink); }
.ticker__value--ca{ font-family: var(--font-body); font-weight:600; font-size:0.85rem; color: var(--ink); word-break:break-all; }
.ticker__sub{ display:flex; gap:1rem; margin-top:0.6rem; font-size:0.8rem; font-weight:600; color: var(--ink); flex-wrap:wrap; }
.ca-row{ display:flex; align-items:center; gap:0.8rem; flex-wrap:wrap; }
.copy-btn{
  font-weight:800; font-size:0.8rem;
  padding:0.5rem 1rem;
  border-radius:999px;
  border:2.5px solid var(--ink);
  background: var(--marigold);
  color: var(--ink);
  cursor:pointer;
  box-shadow: 0 4px 0 var(--ink);
}
.copy-btn:hover{ transform: translateY(2px); box-shadow: 0 2px 0 var(--ink); }
.ticker__note{ font-size:0.8rem; color: rgba(30,68,56,0.75); margin-top:0.8rem; line-height:1.6; }

/* ===== YARD / SOCIALS ===== */
.yard{
  position:relative;
  background: linear-gradient(180deg, var(--grass) 0%, var(--grass-dark) 100%);
  padding: 2.5rem 1.5rem 3.5rem;
  overflow:hidden;
}
.fence{
  height:70px;
  margin: -2.5rem -1.5rem 1.5rem;
  background-image: repeating-linear-gradient(
    90deg,
    var(--fence) 0, var(--fence) 22px,
    var(--fence-light) 22px, var(--fence-light) 30px,
    transparent 30px, transparent 44px
  );
  border-bottom: 4px solid var(--ink);
  clip-path: polygon(0 30%, 3% 0, 6% 30%, 9% 0, 12% 30%, 15% 0, 18% 30%, 21% 0, 24% 30%, 27% 0, 30% 30%, 33% 0, 36% 30%, 39% 0, 42% 30%, 45% 0, 48% 30%, 51% 0, 54% 30%, 57% 0, 60% 30%, 63% 0, 66% 30%, 69% 0, 72% 30%, 75% 0, 78% 30%, 81% 0, 84% 30%, 87% 0, 90% 30%, 93% 0, 96% 30%, 99% 0, 100% 30%, 100% 100%, 0 100%);
}
.yard__inner{ position:relative; z-index:2; max-width:900px; margin:0 auto; text-align:center; }
.yard__trees{ position:absolute; inset:0; pointer-events:none; z-index:0; }
.tree{
  position:absolute; bottom:-10px;
  width:0; height:0;
  border-left:44px solid transparent;
  border-right:44px solid transparent;
  border-bottom:90px solid var(--leaf);
  filter: drop-shadow(0 0 0 var(--ink));
}
.tree::after{
  content:""; position:absolute; left:-6px; bottom:-90px;
  width:12px; height:26px; background: var(--fence);
}
.tree--1{ left:-2%; transform:scale(0.8); }
.tree--2{ left:8%; transform:scale(1.1); bottom:-20px;}
.tree--3{ right:6%; transform:scale(1.2); }
.tree--4{ right:-3%; transform:scale(0.75); }

.yard__mascot{
  position:relative; z-index:2;
  width:200px; height:200px;
  margin:0 auto 1.6rem;
  border-radius:50%;
  object-fit:cover; object-position:center 25%;
  border:4px solid var(--ink);
  box-shadow: 0 8px 0 rgba(30,68,56,0.35);
  background: var(--paper);
}

.yard__buttons{
  position:relative; z-index:2;
  display:flex; flex-wrap:wrap; gap:0.9rem; justify-content:center;
  margin-bottom:1.4rem;
}
.pill{
  display:inline-flex; align-items:center;
  padding:0.85rem 1.5rem;
  border-radius:999px;
  font-weight:800; font-size:0.95rem;
  border:3px solid var(--ink);
}
.pill--marigold{ background: var(--marigold); color: var(--ink); box-shadow: 0 5px 0 var(--ink); }
.pill--cloud{ background: var(--cloud); color: var(--ink); box-shadow: 0 5px 0 rgba(30,68,56,0.5); }
.pill:hover{ transform: translateY(2px); }

.cta-bar{
  position:relative; z-index:2;
  display:block;
  background: var(--marigold);
  color: var(--ink);
  font-weight:800; font-size:1.05rem;
  text-align:center;
  padding:1.1rem 1.5rem;
  border-radius:999px;
  border:3px solid var(--ink);
  box-shadow: 0 6px 0 var(--ink);
}
.cta-bar:hover{ transform: translateY(3px); box-shadow: 0 3px 0 var(--ink); }

/* ===== MARQUEE ===== */
.marquee{
  background: var(--leaf);
  border-top:4px solid var(--ink);
  border-bottom:4px solid var(--ink);
  padding: 1.1rem 0;
  overflow:hidden;
}
.marquee__track{
  display:flex; gap:2.5rem; white-space:nowrap;
  animation: scroll-left 24s linear infinite;
  width:max-content;
}
.marquee__track span{
  font-family: var(--font-display);
  font-weight:800;
  font-size:1.4rem;
  color: var(--paper);
}
@keyframes scroll-left{ from{transform:translateX(0);} to{transform:translateX(-100%);} }
@media (prefers-reduced-motion: reduce){ .marquee__track{animation:none;} }

/* ===== SECTIONS shared ===== */
section:not(.hero):not(.yard){
  max-width:1100px; margin:0 auto;
  padding: 4rem 1.5rem;
}

/* GAZETTE */
.gazette__lede{ max-width:34rem; color: rgba(30,68,56,0.8); font-weight:500; margin-bottom:2rem; }
.gazette__grid{ display:grid; grid-template-columns: repeat(auto-fit, minmax(230px,1fr)); gap:1.2rem; }
.gazette__card{
  background: var(--cloud);
  border:3px solid var(--ink);
  border-radius: var(--radius-md);
  padding:1.4rem;
  box-shadow: 0 6px 0 rgba(30,68,56,0.4);
}
.gazette__card p{ font-weight:600; margin-bottom:0.8rem; }
.gazette__card cite{ font-style:normal; font-weight:700; font-size:0.78rem; color: var(--leaf); }
.gazette__card--empty{ opacity:0.55; border-style:dashed; box-shadow:none; }

/* SIGHTING */
.polaroid{
  max-width:420px;
  background: var(--cloud);
  border:1px solid rgba(30,68,56,0.15);
  border-radius: 6px;
  padding:0.9rem 0.9rem 1.3rem;
  transform: rotate(-2deg);
  box-shadow: 10px 14px 0 var(--grass-dark), 0 10px 24px rgba(30,68,56,0.2);
}
.polaroid img{ width:100%; aspect-ratio: 4/3.4; object-fit:cover; object-position:center 25%; border-radius:2px; }
.polaroid figcaption{
  font-weight:700; font-size:0.75rem; letter-spacing:0.06em;
  color: var(--leaf); text-align:center; margin-top:0.8rem;
}

/* HOUSEHOLD */
.ranks{ display:flex; flex-direction:column; gap:0.9rem; }
.ranks__item{
  display:flex; gap:1.2rem; align-items:flex-start;
  background: var(--paper);
  border:3px solid var(--ink);
  border-radius: var(--radius-md);
  padding:1.1rem 1.4rem;
  box-shadow: 0 5px 0 rgba(30,68,56,0.3);
}
.ranks__num{ font-family: var(--font-display); font-weight:800; color: var(--grass-dark); font-size:0.95rem; padding-top:0.15rem; }
.ranks__item h3{ font-family: var(--font-display); font-weight:800; font-size:1.05rem; margin-bottom:0.25rem; }
.ranks__item p{ color: rgba(30,68,56,0.8); font-size:0.92rem; font-weight:500; }
.ranks__item--top{ background: linear-gradient(90deg, rgba(255,192,46,0.28), var(--paper)); border-color: var(--marigold-dark); }
.ranks__item--top h3{ color: var(--marigold-dark); }

/* PASSPORT */
.passport__grid{ display:grid; grid-template-columns: repeat(auto-fit, minmax(220px,1fr)); gap:1.2rem; }
.passport__card{
  background: var(--paper);
  border:3px solid var(--ink);
  border-radius: var(--radius-md);
  padding:1.2rem 1.3rem;
  box-shadow: 0 6px 0 rgba(30,68,56,0.35);
  position:relative;
  overflow:hidden;
}
.passport__card::before{ content:""; position:absolute; top:0; left:0; right:0; height:6px; }
.passport__card--grass::before{ background: var(--grass); }
.passport__card--leaf::before{ background: var(--leaf); }
.passport__card--marigold::before{ background: var(--marigold); }
.passport__k{ display:block; font-weight:800; font-size:0.7rem; letter-spacing:0.12em; color: var(--leaf); margin-bottom:0.4rem; }
.passport__v{ display:block; font-weight:700; font-size:1.02rem; color: var(--ink); }

/* HOWTO */
.howto__grid{ display:grid; grid-template-columns: repeat(auto-fit, minmax(220px,1fr)); gap:1.2rem; }
.howto__card{
  background: var(--cloud);
  border:3px solid var(--ink);
  border-radius: var(--radius-md);
  padding:1.4rem;
  box-shadow: 0 6px 0 rgba(30,68,56,0.25);
}
.howto__num{
  display:inline-flex; align-items:center; justify-content:center;
  width:36px; height:36px; border-radius:50%;
  background: var(--marigold);
  border:2.5px solid var(--ink);
  font-family: var(--font-display); font-weight:800;
  margin-bottom:0.8rem;
}
.howto__card h3{ font-family: var(--font-display); font-weight:800; margin-bottom:0.4rem; }
.howto__card p{ color: rgba(30,68,56,0.8); font-size:0.92rem; font-weight:500; }

/* FOOTER */
.footer{
  background: var(--ink);
  padding: 2.6rem 1.5rem 2rem;
  color: var(--paper);
}
.footer__inner{
  max-width:1100px; margin:0 auto;
  display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:1.5rem;
  margin-bottom:1.6rem;
}
.footer__brand{ display:flex; align-items:center; gap:0.9rem; }
.footer__thumb{ width:46px; height:46px; border-radius:50%; object-fit:cover; object-position:center 25%; border:2.5px solid var(--paper); }
.footer__name{ font-family: var(--font-display); font-weight:800; }
.footer__note{ font-size:0.82rem; opacity:0.8; max-width:26rem; }
.footer__links{ display:flex; gap:1.4rem; font-weight:700; font-size:0.9rem; }
.footer__links a{ opacity:0.85; }
.footer__links a:hover{ opacity:1; color: var(--marigold); }
.footer__legal{
  max-width:1100px; margin:0 auto;
  font-size:0.74rem; opacity:0.65; line-height:1.7;
}

/* ===== RESPONSIVE ===== */
@media (max-width:760px){
  .ticker{ grid-template-columns:1fr; }
  .passport__grid{ grid-template-columns: 1fr 1fr; }
}
@media (max-width:560px){
  .topbar__links a:not(.topbar__cta){ display:none; }
  .passport__grid{ grid-template-columns: 1fr; }
  .tree{ display:none; }
}