/* ==========================================================================
   GOOGIE — one page. Loaded on a/googie.html.

   Founder, 2026-09-26: the page is Annie's Claude artifact, shell excepted.
   A roadside sign under a dusk sky, its neon lit in sequence (steps, never
   easing; fully lit under reduced motion), cut off by a diagonal roofline
   into the cream record: boomerang panels, script headings tilted off the
   baseline, every third rule card lifted. The shell (rail, top bar,
   community drawer) is never restyled: every rule here is scoped to
   .gg-hero or .gg-rec.

   Palette (curatorial from material, ours):
   navy #16323E · cream #F6EEDD · teal #2FA8A0 · coral #E8604C
   yellow #F2C230 · slate #22303A · salmon neon #FF7A5C · white #FFFDF6
   Text contrast (WCAG AA): coral and teal fail as text on cream, so text
   uses the deep pair: coral-deep #B8412F 4.8:1 on cream, teal-deep #1D6F69
   5.1:1 on cream; navy on teal 4.6:1; cream on coral-deep 5.3:1; teal on
   navy 4.6:1 (headings only, large); yellow on navy 9:1.
   ========================================================================== */

@font-face {
  font-family: "CaveatX";
  src: url("fonts/caveat.woff2") format("woff2-variations");
  font-weight: 400 700;
  font-display: swap;
}
@font-face {
  font-family: "GabaritoX";
  src: url("fonts/gabarito.woff2") format("woff2-variations");
  font-weight: 400 900;
  font-display: swap;
}

.gg-page {
  --gg-navy: #16323E;
  --gg-cream: #F6EEDD;
  --gg-teal: #2FA8A0;
  --gg-teal-deep: #1D6F69;
  --gg-coral: #E8604C;
  --gg-coral-deep: #B8412F;
  --gg-yel: #F2C230;
  --gg-slate: #22303A;
  --gg-white: #FFFDF6;
  --gg-script: "CaveatX", "Brush Script MT", cursive;
  --gg-sans: "GabaritoX", "Trebuchet MS", sans-serif;
}
.gg-page main { background: var(--gg-cream); color: var(--gg-slate); overflow-x: clip; }

/* ---- shared register: both roots, nothing outside them ---------------- */
.gg-hero, .gg-rec {
  font: 400 18px/1.6 var(--gg-sans);
  color: var(--gg-slate);
  /* Gabarito has no italic; the shell turns synthesis off, this page needs it. */
  font-synthesis: style;
}
.gg-rec a { color: var(--gg-coral-deep); text-underline-offset: 3px; }
.gg-rec a:hover { color: var(--gg-navy); }
.gg-hero :focus-visible, .gg-rec :focus-visible { outline: 3px solid var(--gg-coral-deep); outline-offset: 3px; }
.gg-vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; margin: 0; }

/* ---- hero: the sign under a dusk sky ----------------------------------- */
.gg-hero {
  position: relative;
  background: radial-gradient(120% 80% at 70% 0%, #24505F, var(--gg-navy) 60%);
  color: var(--gg-cream);
  padding: 40px 16px 90px;
  overflow: hidden;
  min-height: min(90vh, 820px);
}
.gg-sign { display: block; width: min(820px, 100%); height: auto; margin: 0 auto; }
.gg-sign__script { font: 700 150px var(--gg-script); }
.gg-neon { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.gg-glow-y { filter: drop-shadow(0 0 4px #F2C230) drop-shadow(0 0 12px #F2C230); }
.gg-glow-c { filter: drop-shadow(0 0 4px #FF7A5C) drop-shadow(0 0 14px #E8604C); }
.gg-glow-t { filter: drop-shadow(0 0 4px #2FA8A0) drop-shadow(0 0 12px #2FA8A0); }
@media (prefers-reduced-motion: no-preference) {
  .gg-seq { opacity: 0.18; animation: gg-seq 2.4s steps(1) infinite; }
  .gg-s2 { animation-delay: 0.3s; }
  .gg-s3 { animation-delay: 0.6s; }
  .gg-s4 { animation-delay: 0.9s; }
  .gg-s5 { animation-delay: 1.2s; }
  @keyframes gg-seq { 0%, 40% { opacity: 1; } 41%, 100% { opacity: 0.18; } }
  .gg-blink { animation: gg-bl 3.5s steps(1) infinite; }
  @keyframes gg-bl { 0%, 88%, 100% { opacity: 1; } 89% { opacity: 0.3; } 91% { opacity: 1; } 93% { opacity: 0.4; } }
}
.gg-tag { position: relative; text-align: center; margin: 10px auto 0; max-width: 34ch; font-weight: 600; color: var(--gg-cream); }
.gg-roof {
  position: absolute; left: -5%; right: -5%; bottom: -2px; height: 90px;
  background: var(--gg-cream);
  clip-path: polygon(0 100%, 0 60%, 45% 100%, 100% 0, 100% 100%);
}
.gg-star { position: absolute; width: 40px; height: 40px; }
.gg-star--1 { left: 8%; top: 12%; }
.gg-star--2 { right: 6%; top: 52%; transform: scale(0.6); }
.gg-star--3 { left: 18%; bottom: 26%; transform: scale(0.5); }

/* ---- the record -------------------------------------------------------- */
.gg-w { max-width: 1100px; margin: 0 auto; padding: 0 clamp(14px, 4vw, 40px) 60px; }
.gg-s { margin-top: clamp(70px, 9vw, 110px); position: relative; }
.gg-rec p { margin: 0 0 14px; }
.gg-rec h2 {
  margin: 0 0 20px;
  font: 700 clamp(48px, 7vw, 84px)/1 var(--gg-script);
  color: var(--gg-coral-deep);
  transform: rotate(-6deg); transform-origin: left bottom;
  display: inline-block;
}
.gg-rec h2.gg-up { transform: rotate(-10deg) translateY(-10px); color: var(--gg-teal-deep); }

/* boomerang panels: one long swept corner */
.gg-boom {
  position: relative;
  padding: 36px clamp(20px, 4vw, 48px);
  background: var(--gg-white);
  border: 3px solid var(--gg-slate);
  border-radius: 60px 10px 160px 10px / 40px 10px 60px 10px;
}
.gg-boom > p:last-child, .gg-boom > div:last-child { margin-bottom: 0; }
.gg-boom--navy { background: var(--gg-navy); color: var(--gg-cream); border-color: var(--gg-navy); }
.gg-boom--navy h2.gg-up { color: var(--gg-teal); }
.gg-boom--navy :focus-visible { outline-color: var(--gg-yel); }
.gg-boom--yel { background: var(--gg-yel); }
.gg-boom--teal { background: var(--gg-teal); color: var(--gg-navy); }
.gg-boom--teal a { color: var(--gg-navy); }
.gg-boom--teal :focus-visible { outline-color: var(--gg-navy); }

.gg-meta { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px 22px; margin: 0; }
.gg-meta dt { font: 800 13px/1.4 var(--gg-sans); letter-spacing: 0.14em; text-transform: uppercase; color: var(--gg-yel); }
.gg-meta dd { margin: 0; font-weight: 600; }

.gg-big { font: 900 clamp(26px, 3.6vw, 42px)/1.1 var(--gg-sans); transform: rotate(-2deg); margin: 0 0 16px !important; }
.gg-big--s { font-size: clamp(20px, 2.6vw, 28px); }
.gg-refuse {
  display: inline-block; margin-top: 10px !important;
  background: var(--gg-navy); color: var(--gg-cream);
  padding: 12px 18px; transform: rotate(-2deg);
  border-radius: 6px 30px 6px 30px;
}
.gg-refuse b { color: var(--gg-yel); }

/* what it was made of: three drawn material samples (documented at Johnie's) */
.gg-mat { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; }
.gg-mat li { margin: 0; }
.gg-mat li:nth-child(2) { transform: translateY(-12px) rotate(-2deg); }
.gg-mat p { margin: 10px 0 0; font-size: 16px; }
.gg-mat__s { display: block; height: 110px; border: 3px solid var(--gg-slate); border-radius: 40px 6px 60px 6px / 30px 6px 40px 6px; overflow: hidden; }
.gg-mat__s--egg {
  background-color: var(--gg-cream);
  background-image:
    radial-gradient(circle at 35% 35%, var(--gg-white) 0 3px, transparent 7px),
    radial-gradient(circle at 60% 60%, rgba(34, 48, 58, 0.32) 0 4px, transparent 8px);
  background-size: 18px 18px, 18px 18px;
}
.gg-mat__s--terr {
  background-color: var(--gg-cream);
  background-image:
    radial-gradient(ellipse 4px 3px at 30% 40%, var(--gg-teal) 98%, transparent),
    radial-gradient(ellipse 3px 4px at 70% 20%, var(--gg-coral) 98%, transparent),
    radial-gradient(ellipse 5px 3px at 55% 75%, var(--gg-yel) 98%, transparent),
    radial-gradient(circle 1.5px at 20% 80%, var(--gg-slate) 98%, transparent),
    radial-gradient(circle 2px at 85% 60%, var(--gg-slate) 98%, transparent);
  background-size: 37px 29px, 41px 23px, 43px 37px, 19px 17px, 29px 31px;
  background-position: 0 0, 11px 7px, 5px 13px, 3px 2px, 9px 4px;
}
.gg-mat__s--stone { background: var(--gg-navy); }
.gg-mat__s--stone svg { display: block; width: 100%; height: 100%; }
.gg-mat__s--stone .gg-neon { filter: drop-shadow(0 0 3px #2FA8A0); }
@media (max-width: 820px) {
  .gg-mat { grid-template-columns: 1fr; }
  .gg-mat li:nth-child(2) { transform: none; }
}

/* what carries the look */
.gg-nl { font-style: italic; color: #4A555E; }
.gg-boom--teal .gg-nl, .gg-boom--navy .gg-nl { color: inherit; }
.gg-tw { overflow-x: auto; }
.gg-ct, .gg-rt { width: 100%; border-collapse: collapse; }
.gg-ct th, .gg-ct td, .gg-rt th, .gg-rt td { padding: 9px 8px; border-bottom: 2px dotted rgba(34, 48, 58, 0.35); text-align: left; vertical-align: top; }
.gg-ct th { width: 12em; }
.gg-ct th a { display: inline-flex; align-items: center; min-height: 44px; }
.gg-ct th small { display: block; color: var(--gg-coral-deep); font-size: 13px; font-weight: 600; }
.gg-ct td { padding-top: 18px; }
.gg-tags { display: flex; flex-wrap: wrap; gap: 6px 14px; margin: 0 0 6px !important; }
.gg-tags a { display: inline-flex; align-items: center; min-height: 44px; }
.gg-swatch { display: flex; flex-wrap: wrap; gap: 6px; }
.gg-swatch span { width: 74px; height: 74px; display: flex; align-items: flex-end; padding: 5px; font: 600 11px/1.2 var(--gg-sans); border-radius: 40px 4px 40px 4px; box-shadow: inset 0 0 0 1px rgba(34, 48, 58, 0.25); }
.gg-asbuilt { margin: 6px 0 0 !important; font-style: italic; }

/* rules: three columns, the middle of each row lifted and tilted */
.gg-rules { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; align-items: start; }
.gg-rules article { padding: 22px 18px; background: var(--gg-white); border: 3px solid var(--gg-slate); border-radius: 10px 60px 10px 10px; }
.gg-rules article:nth-child(3n+2) { transform: translateY(-18px) rotate(-2deg); }
.gg-rules h3 { margin: 0; font: 700 36px/1 var(--gg-script); color: var(--gg-teal-deep); }
.gg-k { display: block; font-size: 13px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--gg-coral-deep); margin: 4px 0 6px; }
.gg-rules p { margin: 0; }
.gg-rules small { display: block; color: #4A555E; font-style: italic; margin-top: 6px; font-size: 15px; }
.gg-rules .gg-wide { grid-column: 1 / -1; }

/* the ledger */
.gg-rt { min-width: 440px; margin-top: 14px; font-size: 16px; }
.gg-rt th, .gg-rt td { border-bottom-color: rgba(22, 50, 62, 0.4); }
.gg-rt thead th { border-bottom: 2px solid var(--gg-navy); }
.gg-rt tbody th { font-weight: 400; }

/* neighbours */
.gg-conf a { display: inline-block; min-height: 44px; }
.gg-conf b { font: 700 34px/1.3 var(--gg-script); }
.gg-conf__k { color: #4A555E; }

/* use it */
.gg-use { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.gg-use a { display: block; padding: 24px; background: var(--gg-coral-deep); color: var(--gg-white); text-decoration: none; border-radius: 80px 8px 80px 8px; }
.gg-use a:nth-child(2) { background: var(--gg-teal); color: var(--gg-navy); }
.gg-use a:nth-child(3) { background: var(--gg-yel); color: var(--gg-navy); }
.gg-use a b { display: block; font: 700 36px/1 var(--gg-script); margin-bottom: 6px; }
.gg-use a:hover { background: var(--gg-navy); color: var(--gg-cream); }
.gg-mach { margin-top: 18px !important; }
.gg-mach a, .gg-foot a { display: inline-block; padding: 11px 0; }

@media (max-width: 820px) {
  .gg-meta { grid-template-columns: 1fr 1fr; }
  .gg-rules, .gg-use { grid-template-columns: 1fr; }
  .gg-rules article:nth-child(3n+2) { transform: none; }
  .gg-ct th { width: auto; }
  .gg-ct, .gg-ct tbody, .gg-ct tr, .gg-ct th, .gg-ct td { display: block; }
  .gg-ct th { border-bottom: 0; padding-bottom: 0; }
  .gg-ct td { padding-top: 0; }
  .gg-hero { min-height: 0; padding-bottom: 70px; }
  .gg-roof { height: 50px; }
}
@media (max-width: 420px) {
  .gg-meta { grid-template-columns: 1fr; }
  .gg-boom { border-radius: 36px 8px 80px 8px / 28px 8px 40px 8px; }
}