/* goldengoat.cc. Dark throughout, topo texture under everything, gold as the only accent. */

:root {
  --gg-gold: #DAA513;
  --gg-gold-dim: #9c7a1d;
  --gg-black: #0B0906;
  --gg-panel: #13100B;
  --gg-text: #D8D0BF;
  --gg-mute: #8C8271;
  --gg-line: rgba(218, 165, 19, .22);
  --gg-line-soft: rgba(218, 165, 19, .10);
  --gg-ease: cubic-bezier(.2,.7,.2,1);
  --gg-wide: 64rem;
  --gg-measure: 36rem;
  --gg-pad: clamp(1.25rem, 5vw, 4rem);
  --gg-rail: clamp(1rem, 4vw, 2.75rem);
  --gg-top: max(1.05rem, env(safe-area-inset-top));
  --gg-eye-x: 43.286%;
  --gg-eye-y: 51.857%;
  --gg-eye-w: 4.143%;
  --gg-eye-h: 3.714%;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--gg-black);
  color: var(--gg-text);
  font: 400 1.0625rem/1.8 Lato, system-ui, sans-serif;
  position: relative;
  overflow-x: hidden;
}

body::before {
  content: "";
  position: fixed;
  inset: -8vh -8vw;
  background: url(topo.webp) center / cover no-repeat;
  opacity: .26;
  z-index: -2;
  animation: gg-drift 50s linear infinite alternate;
}

body::after {
  content: "";
  position: fixed;
  inset: 0;
  background: radial-gradient(120% 90% at 50% 12%, rgba(11,9,6,.25), rgba(11,9,6,.92) 78%);
  z-index: -1;
}

@keyframes gg-drift {
  from { transform: translate3d(0, 0, 0) scale(1.02); }
  to { transform: translate3d(-3%, 2%, 0) scale(1.08); }
}

h1, h2, h3, .gg-btn, .gg-pack__price, .gg-pack__tier, .gg-pack__plus, .gg-spine {
  font-family: Oswald, Impact, sans-serif;
  text-transform: uppercase;
  letter-spacing: .06em;
  font-weight: 500;
}

h1 { font-size: clamp(2.2rem, 6.4vw, 4.2rem); line-height: 1.04; color: var(--gg-gold); margin: 0 0 1.25rem; }
h2 { font-size: clamp(1.35rem, 2.6vw, 1.85rem); color: #EFE7D6; margin: 0 0 1.4rem; }
h3 { font-size: 1.1rem; color: var(--gg-gold); letter-spacing: .08em; margin: 2.75rem 0 .9rem; }
.gg-detail > h3:first-child { margin: 0 0 1.5rem; }
p, ul, blockquote { max-width: var(--gg-measure); }
p { margin: 0 0 1.3em; }
a { color: var(--gg-gold); text-underline-offset: .25em; }

.gg-skip { position: absolute; left: -999px; }
.gg-skip:focus { left: 1rem; top: 1rem; background: var(--gg-gold); color: var(--gg-black); padding: .5rem 1rem; z-index: 9; }

.gg-lid {
  position: absolute;
  left: var(--gg-eye-x); top: var(--gg-eye-y);
  width: var(--gg-eye-w); height: var(--gg-eye-h);
  background: url(lid.png) no-repeat 0 0 / 100% 500%;
  pointer-events: none;
}
.is-blinking .gg-lid, .is-winking .gg-lid { animation: gg-blink .26s steps(1, end); }
@keyframes gg-blink {
  0%, 100% { background-position-y: 0; }
  10%, 88% { background-position-y: 25%; }
  20%, 78% { background-position-y: 50%; }
  30%, 68% { background-position-y: 75%; }
  40%, 58% { background-position-y: 100%; }
}


/* The nav is not a bar. A mark top left, an index top right, and the index
   itself opens over the page. */
.gg-home {
  position: fixed; left: var(--gg-rail); top: var(--gg-top); z-index: 7;
  display: flex; align-items: center; gap: .6rem; text-decoration: none;
  padding: .35rem 1rem .35rem .35rem;
  background: rgba(11, 9, 6, .74); backdrop-filter: blur(8px);
  border: 1px solid var(--gg-line); border-radius: 999px;
  color: var(--gg-mute); font-family: Oswald, Impact, sans-serif;
  font-size: .64rem; letter-spacing: .22em; text-transform: uppercase;
  transition: color .3s var(--gg-ease), border-color .3s var(--gg-ease);
}
.gg-home__img { position: relative; display: block; width: 26px; height: 26px; }
.gg-home__img img { width: 100%; height: 100%; display: block; }
.gg-home:focus-visible { color: var(--gg-gold); border-color: var(--gg-gold); }
.gg-is-home .gg-home { display: none; }

.gg-index-toggle {
  position: fixed; right: var(--gg-rail); top: var(--gg-top); z-index: 9;
  width: 1px; height: 1px; opacity: 0; margin: 0;
}
.gg-index-btn {
  position: fixed; right: var(--gg-rail); top: var(--gg-top); z-index: 9;
  display: flex; align-items: center; gap: .65rem; cursor: pointer;
  padding: .55rem 1.05rem .55rem .85rem;
  background: rgba(11, 9, 6, .74); backdrop-filter: blur(8px);
  border: 1px solid var(--gg-line); border-radius: 999px;
  color: var(--gg-gold); font-family: Oswald, Impact, sans-serif;
  font-size: .66rem; letter-spacing: .24em; text-transform: uppercase;
  transition: border-color .3s var(--gg-ease);
}
.gg-index-toggle:focus-visible ~ .gg-index-btn { outline: 2px solid var(--gg-gold); outline-offset: 3px; }
.gg-index-btn__bars {
  position: relative; display: block; width: 20px; height: 11px;
  background: linear-gradient(currentColor, currentColor) left center / 100% 1px no-repeat;
}
.gg-index-btn__bars::before, .gg-index-btn__bars::after {
  content: ""; position: absolute; left: 0; height: 1px; background: currentColor;
  transition: transform .45s var(--gg-ease);
}
.gg-index-btn__bars::before { top: 0; width: 72%; }
.gg-index-btn__bars::after { bottom: 0; width: 48%; }
.gg-index-toggle:checked ~ .gg-index-btn .gg-index-btn__bars::before { transform: translateY(5px) scaleX(.25); }
.gg-index-toggle:checked ~ .gg-index-btn .gg-index-btn__bars::after { transform: translateY(-5px) scaleX(.25); }

.gg-index {
  position: fixed; inset: 0; z-index: 8;
  display: flex; justify-content: flex-end;
  background: rgba(5, 4, 3, 0); visibility: hidden;
  transition: background .42s var(--gg-ease), visibility .42s;
}
.gg-index-toggle:checked ~ .gg-index { visibility: visible; background: rgba(5, 4, 3, .58); }
.gg-index__inner {
  width: min(22rem, 86vw); height: 100%; overflow-y: auto;
  padding: 4.25rem clamp(1.5rem, 4vw, 2.25rem) calc(2.5rem + env(safe-area-inset-bottom));
  background: #090705; border-left: 1px solid var(--gg-line);
  box-shadow: -28px 0 60px rgba(0, 0, 0, .55);
  transform: translateX(100%);
  transition: transform .45s var(--gg-ease);
}
.gg-index-toggle:checked ~ .gg-index .gg-index__inner { transform: none; }
.gg-index__eyebrow {
  margin: 0 0 1.4rem; max-width: none; color: var(--gg-gold-dim);
  font-family: Oswald, Impact, sans-serif; font-size: .62rem;
  letter-spacing: .32em; text-transform: uppercase;
}
.gg-index__foot { margin: 1.8rem 0 0; max-width: none; color: var(--gg-mute); font-size: .78rem; line-height: 1.6; }

.gg-index__list { list-style: none; margin: 0; padding: 0; max-width: none; }
.gg-row { border-top: 1px solid var(--gg-line-soft); }
.gg-row:last-child { border-bottom: 1px solid var(--gg-line-soft); }
.gg-row a {
  position: relative; display: grid; align-items: baseline;
  grid-template-columns: 2.6rem 1fr; gap: .15rem .9rem;
  padding: .95rem 0; text-decoration: none; color: #EFE7D6;
}
.gg-row__n {
  font-family: Oswald, Impact, sans-serif; font-size: .74rem;
  letter-spacing: .14em; color: var(--gg-gold-dim);
  transition: color .3s var(--gg-ease);
}
.gg-row__name {
  font-family: Oswald, Impact, sans-serif; text-transform: uppercase;
  letter-spacing: .05em; line-height: 1.05;
  font-size: clamp(1.3rem, 3.6vw, 2.05rem);
  transition: color .3s var(--gg-ease);
}
.gg-row__line { grid-column: 2; color: var(--gg-mute); font-size: .84rem; letter-spacing: .04em; }
.gg-row a::after {
  content: ""; position: absolute; left: 0; bottom: -1px; height: 1px; width: 0;
  background: var(--gg-gold); transition: width .55s var(--gg-ease);
}
.gg-row a:focus-visible::after { width: 100%; }
.gg-row a:focus-visible .gg-row__name, .gg-row a[aria-current] .gg-row__name { color: var(--gg-gold); }
.gg-row a:focus-visible .gg-row__n { color: var(--gg-gold); }
.gg-index .gg-row a { grid-template-columns: 2rem 1fr; padding: .85rem 0; }
.gg-index .gg-row__name { font-size: 1.02rem; letter-spacing: .07em; }
.gg-index .gg-row__n { font-size: .62rem; }
.gg-index .gg-row__line { grid-column: 2; justify-self: start; text-align: left; font-size: .76rem; }
.gg-index-toggle:checked ~ .gg-index .gg-row { animation: gg-slide .45s var(--gg-ease) both; animation-delay: calc(var(--i) * 30ms); }
@keyframes gg-slide { from { opacity: 0; transform: translateX(16px); } to { opacity: 1; transform: none; } }

.gg-quick {
  margin-top: clamp(2rem, 6vh, 3.25rem);
  margin-bottom: clamp(1.75rem, 4vh, 2.75rem);
  text-align: center;
  border-top: 1px solid var(--gg-line-soft); border-bottom: 1px solid var(--gg-line-soft);
}
.gg-quick a, .gg-quick__more {
  display: block; padding: 1.15rem .95rem;
  font-family: Oswald, Impact, sans-serif; font-size: 1.05rem;
  letter-spacing: .2em; text-transform: uppercase; text-decoration: none;
  color: var(--gg-text); border-top: 1px solid var(--gg-line-soft);
  transition: color .3s var(--gg-ease);
}
.gg-quick > :first-child { border-top: 0; }
.gg-quick a:focus-visible { color: var(--gg-gold); }
.gg-quick__more { color: var(--gg-gold-dim); cursor: pointer; }

.gg-advocates { list-style: none; margin: .4rem 0 0; padding: 0; max-width: none; }
.gg-advocates li::before { content: none; }
.gg-advocates li {
  display: grid; gap: .25rem; padding: 1.05rem 0;
  border-top: 1px solid var(--gg-line-soft);
}
.gg-advocates li:first-child { border-top: 0; }
.gg-advocates a { font-family: Oswald, Impact, sans-serif; text-transform: uppercase; letter-spacing: .06em; }
.gg-advocates span { color: var(--gg-mute); font-size: .92rem; max-width: var(--gg-measure); }

/* Kevin's two route lists sit side by side once there's room for both names. */
.gg-routes { display: grid; gap: 1rem 3rem; margin: 3.5rem auto 2.5rem; }
@media (min-width: 48rem) { .gg-routes { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.gg-routes__h {
  margin: 0; padding-bottom: .9rem; border-bottom: 1px solid var(--gg-line);
  font-size: clamp(1.15rem, 2vw, 1.4rem);
}
.gg-routes .gg-advocates { margin-top: 0; }
.gg-routes .gg-advocates li:first-child { border-top: 0; }
.gg-routes strong { font-family: Oswald, Impact, sans-serif; font-weight: 500; text-transform: uppercase; letter-spacing: .06em; color: var(--gg-mute); }
.gg-routes__note { color: var(--gg-text); }

.gg-reach { position: relative; display: inline-block; margin: 0 0 1.3em; }
.gg-reach > summary { list-style: none; cursor: pointer; }
.gg-reach > summary::-webkit-details-marker { display: none; }
.gg-reach__menu {
  position: absolute; left: 0; top: calc(100% + .4rem); z-index: 5;
  display: grid; min-width: 100%;
  background: #0E0B07; border: 1px solid var(--gg-line);
}
.gg-reach__menu a {
  padding: .9rem 1.25rem; text-decoration: none; color: #EFE7D6; text-align: left;
  font-family: Oswald, Impact, sans-serif; font-size: .8rem; letter-spacing: .16em; text-transform: uppercase;
}
.gg-reach__menu a + a { border-top: 1px solid var(--gg-line-soft); }
.gg-reach__menu a:focus-visible { color: var(--gg-gold); }

.gg-facts {
  display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr);
  margin: 2.5rem 0; border-top: 1px solid var(--gg-line-soft); border-bottom: 1px solid var(--gg-line-soft);
}
.gg-facts > div { padding: 1.4rem 1.25rem 1.3rem 0; }
/* At the top level the column padding would carry the rules out to the edge. */
.gg-main > .gg-facts {
  border: 0;
  background:
    linear-gradient(var(--gg-line-soft), var(--gg-line-soft)) center top / calc(100% - 2 * var(--gg-pad)) 1px no-repeat,
    linear-gradient(var(--gg-line-soft), var(--gg-line-soft)) center bottom / calc(100% - 2 * var(--gg-pad)) 1px no-repeat;
}
.gg-facts > div + div { padding-left: 1.25rem; border-left: 1px solid var(--gg-line-soft); }
@media (max-width: 39.99rem) {
  .gg-facts { grid-auto-flow: row; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .gg-facts > div:nth-child(odd) { padding-left: 0; border-left: 0; }
  .gg-facts > div:nth-child(n+3) { border-top: 1px solid var(--gg-line-soft); }
  .gg-facts > div:last-child:nth-child(odd) { grid-column: 1 / -1; }
}
.gg-facts dt {
  font-family: Oswald, Impact, sans-serif; color: var(--gg-gold); line-height: 1.08;
  font-size: clamp(1.5rem, 7.5vw, 2.75rem); letter-spacing: .02em; overflow-wrap: break-word;
}
.gg-facts dd { margin: .55rem 0 0; color: var(--gg-mute); font-size: .82rem; line-height: 1.45; }

.gg-scope { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); gap: 1.25rem; margin: 1.75rem 0; }
.gg-scope__col { border-top: 2px solid var(--gg-gold); padding-top: 1rem; }
.gg-scope__col--no { border-top-color: var(--gg-line); }
.gg-scope h3 { margin: 0 0 .9rem; font-size: .8rem; letter-spacing: .22em; }
.gg-scope__col--no h3 { color: var(--gg-mute); }
.gg-scope ul { list-style: none; margin: 0; padding: 0; }
.gg-scope li { position: relative; padding: .6rem 0 .6rem 1.4rem; border-bottom: 1px solid var(--gg-line-soft); line-height: 1.55; }
.gg-scope li::before { content: "+"; position: absolute; left: 0; top: .55rem; color: var(--gg-gold); font-family: Oswald, Impact, sans-serif; }
.gg-scope__col--no li, .gg-scope__col--no p { color: var(--gg-mute); }
.gg-scope p { margin: 0 0 .9rem; line-height: 1.6; }
.gg-scope__col--no li::before { content: "\2013"; color: var(--gg-mute); }

.gg-chips { list-style: none; display: flex; flex-wrap: wrap; gap: .55rem; margin: 1.25rem 0 1.5rem; padding: 0; max-width: none; }
.gg-chips li {
  border: 1px solid var(--gg-line); border-radius: 999px; padding: .45rem 1rem;
  font-family: Oswald, Impact, sans-serif; font-size: .74rem; letter-spacing: .16em; text-transform: uppercase; color: #EFE7D6;
}

.gg-checks { list-style: none; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr)); gap: 0 1.5rem; margin: 1.25rem 0; padding: 0; max-width: none; }
.gg-checks li { position: relative; padding: .75rem 0 .75rem 1.9rem; border-bottom: 1px solid var(--gg-line-soft); }
.gg-checks li::before {
  content: ""; position: absolute; left: 0; top: 1.15rem; width: .8rem; height: .45rem;
  border-left: 2px solid var(--gg-gold); border-bottom: 2px solid var(--gg-gold); transform: rotate(-45deg);
}

.gg-steps { list-style: none; margin: 1.5rem 0; padding: 0; max-width: none; }
.gg-steps li { display: grid; grid-template-columns: 3.5rem minmax(0, 1fr); align-items: baseline; padding: 1.1rem 0; border-top: 1px solid var(--gg-line-soft); }
.gg-steps li:last-child { border-bottom: 1px solid var(--gg-line-soft); }
.gg-steps__n { font-family: Oswald, Impact, sans-serif; font-size: 1.6rem; color: var(--gg-gold); line-height: 1; }
.gg-steps p { margin: 0; }

.gg-match { margin: 1.5rem 0; max-width: none; }
.gg-match > div { display: grid; gap: .35rem 2rem; padding: 1.15rem 0; border-top: 1px solid var(--gg-line-soft); }
.gg-match > div:last-child { border-bottom: 1px solid var(--gg-line-soft); }
.gg-match dt { color: var(--gg-mute); font-size: .95rem; }
.gg-match dd { margin: 0; }
.gg-match strong { font-family: Oswald, Impact, sans-serif; font-weight: 500; color: var(--gg-gold); text-transform: uppercase; letter-spacing: .05em; }

/* Each entry carries its own dot and its own line segment, so both measure from the
   entry's edge. The column padding overrides padding on the list itself, which put
   one long line 40px away from the dots and pushed the dots off a phone screen. */
.gg-timeline { list-style: none; margin: 2.5rem 0 3rem; max-width: 44rem; }
.gg-timeline li { position: relative; padding: 0 0 2.1rem 2rem; }
.gg-timeline li:last-child { padding-bottom: 0; }
.gg-timeline li::before {
  content: ""; position: absolute; left: 0; top: .3rem; width: .65rem; height: .65rem;
  border-radius: 50%; background: var(--gg-black); border: 1px solid var(--gg-gold); box-sizing: border-box;
}
.gg-timeline li::after {
  content: ""; position: absolute; left: calc(.325rem - .5px); top: 1.15rem; bottom: .15rem;
  width: 1px; background: var(--gg-line);
}
.gg-timeline li:last-child::before { background: var(--gg-gold); }
.gg-timeline li:last-child::after { display: none; }
.gg-timeline__when {
  display: block; font-family: Oswald, Impact, sans-serif; font-size: .74rem;
  letter-spacing: .24em; text-transform: uppercase; color: var(--gg-gold); margin-bottom: .35rem;
}
.gg-timeline h3 { margin: 0 0 .3rem; color: #EFE7D6; font-size: 1.3rem; letter-spacing: .04em; }
.gg-timeline p { margin: 0; color: var(--gg-mute); }

.gg-photo { margin: 2.25rem 0; max-width: 26rem; overflow: hidden; border: 1px solid var(--gg-line); }
.gg-photo--wide { max-width: none; }
/* On its own in the page column it drops the column padding, which would sit inside its border. */
.gg-main > figure.gg-photo { padding: 0; width: min(calc(100% - 2 * var(--gg-pad)), calc(var(--gg-wide) - 2 * var(--gg-pad))); }
.gg-photo img { display: block; width: 100%; height: auto; }
.gg-photo.gg-up img { transform: scale(1.06); transition: transform 1.4s var(--gg-ease); }
.gg-photo.gg-up.is-in img { transform: none; }
.gg-gallery { display: flex; gap: 1rem; margin: 2.5rem 0; }
.gg-gallery .gg-photo { flex: var(--r) 1 0; min-width: 0; max-width: none; margin: 0; }
@media (max-width: 39.99rem) {
  .gg-gallery { flex-direction: column; }
  .gg-gallery .gg-photo { flex: none; }
}

.gg-about { margin: 2.5rem 0 3rem; }
.gg-about .gg-timeline { margin: 0; padding: 0; }
/* Here the timeline carries Kevin's own story, so it reads at body size. */
.gg-about .gg-timeline p { color: var(--gg-text); font-size: 1rem; line-height: 1.7; }
.gg-portrait { margin: 0 0 2.75rem; max-width: 26rem; }
.gg-portrait img { display: block; width: 100%; height: auto; border: 1px solid var(--gg-line); }
.gg-portrait figcaption {
  margin-top: .75rem; color: var(--gg-mute);
  font-family: Oswald, Impact, sans-serif; font-size: .7rem; letter-spacing: .22em; text-transform: uppercase;
}
/* Beside the timeline the portrait stays put while his history scrolls past it. */
@media (min-width: 60rem) {
  .gg-about { display: grid; grid-template-columns: minmax(0, 1fr) 20rem; gap: 0 4rem; align-items: start; }
  .gg-portrait { grid-column: 2; grid-row: 1; position: sticky; top: 5rem; margin: 0; }
  .gg-about .gg-timeline { grid-column: 1; grid-row: 1; }
}

.gg-pull {
  margin: 3rem 0; padding: 0; border: 0; max-width: none;
  font-family: Oswald, Impact, sans-serif; text-transform: uppercase; letter-spacing: .04em;
  font-size: clamp(2rem, 7vw, 3.6rem); line-height: 1.05; color: var(--gg-gold);
}
.gg-pull--line { margin: 2.5rem 0 0; font-size: clamp(1.5rem, 4vw, 2.25rem); line-height: 1.15; }
.gg-pull cite { display: block; margin-top: 1rem; font-style: normal; font-size: .9rem; letter-spacing: .12em; color: var(--gg-mute); }
.gg-pull::before { content: ""; display: block; width: 3rem; height: 2px; background: var(--gg-gold); margin-bottom: 1.25rem; }

.gg-faq { border-top: 1px solid var(--gg-line-soft); padding-top: 1.75rem; }
.gg-faq h3 { font-size: 1.3rem; color: #EFE7D6; }
.gg-faq__a > :first-child { margin-top: 0; }
.gg-faq__a blockquote { margin: 1.25rem 0 0; }
.gg-sign { margin-top: 1.5rem; color: var(--gg-gold); font-family: Oswald, Impact, sans-serif; letter-spacing: .08em; text-transform: uppercase; font-size: .9rem; }

.gg-locked { overflow: hidden; }

.gg-spine {
  display: none;
  position: fixed; left: .9rem; top: 50%; z-index: 4;
  transform: rotate(180deg) translateY(50%);
  writing-mode: vertical-rl;
  font-size: .66rem; letter-spacing: .5em;
  color: var(--gg-gold-dim); opacity: .55;
  pointer-events: none;
}

.gg-main { padding: 0 0 6.5rem; }
/* Centers the column without flattening each block's own vertical rhythm. */
.gg-main > *:not(.gg-hero) {
  max-width: var(--gg-wide); margin-left: auto; margin-right: auto;
  padding-left: var(--gg-pad); padding-right: var(--gg-pad);
}
.gg-main > h1 { padding-top: clamp(5.5rem, 11vw, 7rem); }
.gg-sec { margin-top: 4.5rem; padding-top: 2.1rem; position: relative; }
.gg-sec::before {
  content: ""; position: absolute; top: 0; left: var(--gg-pad); right: var(--gg-pad);
  height: 1px; background: var(--gg-line-soft);
}
.gg-sec::after {
  content: ""; position: absolute; top: 0; left: var(--gg-pad);
  height: 1px; width: 0; background: var(--gg-gold); transition: width .8s var(--gg-ease);
}
.gg-sec.is-in::after { width: 4.5rem; }
.gg-sec__body > :last-child { margin-bottom: 0; }

.gg-hero {
  position: relative; isolation: isolate; overflow: hidden;
  min-height: 100svh;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center;
  padding: 5rem var(--gg-pad) 7.5rem;
}
.gg-hero::before {
  content: ""; position: absolute; inset: -12% -8%; z-index: 0;
  background: url(topo.webp) center / cover no-repeat;
  opacity: .55;
  -webkit-mask-image: radial-gradient(64% 62% at 50% 46%, #000 34%, transparent 100%);
  mask-image: radial-gradient(64% 62% at 50% 46%, #000 34%, transparent 100%);
  animation: gg-drift 65s linear infinite alternate;
}
.gg-hero > * { position: relative; z-index: 1; }
.gg-hero__stage { position: relative; display: block; }
.gg-hero__goat { position: relative; display: block; width: clamp(220px, min(46vw, 60svh), 580px); }
.gg-hero__goat img { width: 100%; height: auto; display: block; }
/* The logo is the whole first screen. The h1 still leads the page for search, set
   small at the foot like a caption. */
.gg-hero__foot {
  position: absolute; left: var(--gg-pad); right: var(--gg-pad); bottom: clamp(1.25rem, 4svh, 2.25rem);
  display: flex; flex-direction: column; align-items: center; gap: 1rem;
}
.gg-hero h1 { margin: 0; max-width: none; font-size: .8rem; font-weight: 500; letter-spacing: .32em; line-height: 1.6; }
.gg-cue {
  width: 1px; height: 2.6rem;
  background: linear-gradient(var(--gg-gold), transparent);
  transform-origin: top;
  animation: gg-cue 2.6s var(--gg-ease) infinite;
}
@keyframes gg-cue {
  0%, 100% { opacity: .25; transform: scaleY(.7); }
  50% { opacity: .9; transform: scaleY(1); }
}

.gg-lead { font-size: 1.22rem; color: #E4DCCB; max-width: 40rem; }
.gg-muted { color: var(--gg-mute); font-size: .95rem; }
.gg-link { border-bottom: 1px solid var(--gg-line); text-decoration: none; }

.gg-btn {
  display: inline-block; border: 1px solid var(--gg-gold); color: var(--gg-gold);
  padding: .8rem 1.5rem; text-decoration: none; font-size: .78rem;
  background: transparent;
  transition: background .3s var(--gg-ease), color .3s var(--gg-ease);
}
.gg-btn--solid { background: var(--gg-gold); color: var(--gg-black); }
/* Every hover on the site lives here, only where there is a pointer. On a phone
   a tap leaves :hover stuck on, which turned the solid button into an outline. */
@media (hover: hover) {
  .gg-btn:hover { background: var(--gg-gold); color: var(--gg-black); }
  .gg-btn--solid:hover { background: transparent; color: var(--gg-gold); }
  .gg-home:hover { color: var(--gg-gold); border-color: var(--gg-gold); }
  .gg-index-btn:hover { border-color: var(--gg-gold); }
  .gg-row a:hover::after { width: 100%; }
  .gg-row a:hover .gg-row__name, .gg-row a:hover .gg-row__n { color: var(--gg-gold); }
  .gg-quick a:hover, .gg-quick__more:hover { color: var(--gg-gold); }
  .gg-reach__menu a:hover { color: var(--gg-gold); }
  .gg-link:hover { border-color: var(--gg-gold); }
  .gg-pack:hover { transform: translateY(-4px); border-color: rgba(218, 165, 19, .55); }
  .gg-pack:hover .gg-pack__land { fill-opacity: 1.8; }
}

.gg-packs { display: grid; gap: 1.25rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr)); margin: 2.75rem 0; }
.gg-packs--full { grid-template-columns: minmax(0, 1fr); }
/* Each card spans its rows of the shared grid, so a name that wraps to two lines
   pushes every price down together and the columns stay level. */
.gg-packs--full .gg-pack { grid-row: span 5; }
.gg-pack {
  position: relative; overflow: hidden;
  display: grid; grid-row: span 4; grid-template-rows: subgrid; row-gap: 0; align-content: start;
  padding: 5.25rem 1.6rem 1.9rem;
  background: linear-gradient(180deg, #17130C, #0E0B07 55%);
  border: 1px solid var(--gg-line);
  transition: transform .45s var(--gg-ease), border-color .45s var(--gg-ease);
}
.gg-pack__ridge { position: absolute; top: .6rem; left: 0; width: 100%; height: 4rem; }
.gg-pack__land { fill: var(--gg-gold); fill-opacity: .07; transition: fill-opacity .45s var(--gg-ease); }
.gg-pack__line {
  fill: none; stroke: var(--gg-gold); stroke-width: 1.5; stroke-linejoin: round;
  vector-effect: non-scaling-stroke; stroke-dasharray: 1;
}
.gg-pack.is-in .gg-pack__line { animation: gg-draw 1.8s var(--gg-ease) .15s both; }
.gg-pack p, .gg-pack ul { max-width: none; }
.gg-pack__tier {
  display: flex; align-items: center; gap: .7rem; margin: 0 0 .9rem;
  color: var(--gg-mute); font-size: .7rem; letter-spacing: .22em; text-transform: uppercase;
}
.gg-pack__tier span { color: var(--gg-gold); border: 1px solid var(--gg-line); border-radius: 999px; padding: .2rem .6rem; letter-spacing: .1em; }
.gg-pack h3 { align-self: end; margin: 0; line-height: 1.15; color: #EFE7D6; font-size: clamp(1.35rem, 2vw, 1.6rem); }
.gg-pack__price { margin: .55rem 0 .9rem; color: var(--gg-gold); font-size: clamp(2.6rem, 4vw, 3.2rem); line-height: 1; }
.gg-pack__who { margin: 0; font-size: .98rem; }
.gg-pack__plus {
  margin: 1.4rem 0 0; padding: .7rem .9rem; border: 1px dashed var(--gg-line);
  color: var(--gg-gold); font-size: .8rem; letter-spacing: .08em; text-transform: uppercase;
}
.gg-pack__work { list-style: none; margin: 1.4rem 0 0; padding: 1.1rem 0 0; border-top: 1px solid var(--gg-line-soft); font-size: .93rem; }
.gg-pack__work li { position: relative; padding: .42rem 0 .42rem 1.6rem; break-inside: avoid; }
.gg-pack__work li::before {
  content: ""; position: absolute; left: .1rem; top: .92rem; width: .6rem; height: .32rem;
  border-left: 1.5px solid var(--gg-gold); border-bottom: 1.5px solid var(--gg-gold); transform: rotate(-45deg);
}
.gg-pack__fine { color: var(--gg-mute); }
@media (min-width: 40rem) and (max-width: 59.99rem) {
  .gg-packs--full .gg-pack__work { columns: 2; column-gap: 2rem; }
}
@media (min-width: 60rem) {
  .gg-packs--full { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 45.99rem) {
  .gg-pack { padding: 4.9rem 1.25rem 1.6rem; }
}

.gg-detail { margin: 4rem 0; }
.gg-detail ul { list-style: none; padding: 0; }
.gg-detail li { padding: .5rem 0 .5rem 1.2rem; position: relative; border-bottom: 1px solid var(--gg-line-soft); }
.gg-detail li::before { content: ""; position: absolute; left: 0; top: 1.05em; width: 5px; height: 1px; background: var(--gg-gold); }

/* Separate borders, not collapse: a collapsed table ignores its own padding, so the
   column's side padding never reached the price rows and they ran to the screen edge. */
.gg-prices { border-collapse: separate; border-spacing: 0; width: 100%; max-width: 40rem; margin: 0; }
.gg-prices th, .gg-prices td { text-align: left; padding: .95rem 0; border-bottom: 1px solid var(--gg-line-soft); font-weight: 400; }
.gg-prices td { text-align: right; white-space: nowrap; color: var(--gg-gold); font-family: Oswald, Impact, sans-serif; letter-spacing: .04em; }
.gg-prices thead th {
  padding: 0 0 .7rem; border-bottom-color: var(--gg-line);
  color: var(--gg-mute); font-family: Oswald, Impact, sans-serif; font-size: .68rem; letter-spacing: .22em; text-transform: uppercase;
}
.gg-prices thead th:last-child { text-align: right; }

blockquote {
  margin: 1.75rem 0; padding: .3rem 0 .3rem 1.35rem;
  border-left: 1px solid var(--gg-gold); color: #E4DCCB; font-size: 1.05rem;
}

.gg-draft, .gg-confirm {
  border: 1px dashed var(--gg-line); background: rgba(218,165,19,.05);
  padding: .9rem 1.1rem; max-width: 40rem; color: var(--gg-mute); font-size: .95rem;
}
.gg-draft { margin: 1.5rem auto 0; }

.gg-foot {
  --gg-valley: clamp(13rem, 36vw, 26rem);
  position: relative; isolation: isolate; overflow: hidden; margin-top: 5rem; padding: 3.5rem var(--gg-pad) var(--gg-valley);
  border-top: 1px solid var(--gg-line-soft);
  color: var(--gg-mute); font-size: .93rem;
}
/* Kevin's engraving of the valley rises out of the black under the footer text,
   never behind it, so the small print keeps its contrast. */
.gg-foot::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; z-index: -1;
  height: var(--gg-valley);
  background: url(missoula-800.webp) center 62% / cover no-repeat;
  -webkit-mask-image: linear-gradient(transparent, #000 55%);
  mask-image: linear-gradient(transparent, #000 55%);
  opacity: .85;
  animation: gg-pan 18s ease-in-out infinite alternate;
}
/* The slow side-to-side pan the old site ran on this same drawing. */
@keyframes gg-pan {
  from { transform: scale(1.1) translateX(-3%); }
  to { transform: scale(1.1) translateX(3%); }
}
@media (min-width: 50rem) {
  .gg-foot::after { background-image: url(missoula-1536.webp); }
}
.gg-brands { list-style: none; display: flex; flex-wrap: wrap; align-items: center; gap: 1.5rem 3rem; margin: 2rem 0 0; padding: 0; max-width: none; }
.gg-brands img { display: block; height: 2.3rem; width: auto; }
.gg-brands .gg-brands__state { height: 3.3rem; }
.gg-foot p { margin: .45rem 0; max-width: none; }
.gg-foot__name { font-family: Oswald, Impact, sans-serif; text-transform: uppercase; letter-spacing: .12em; color: var(--gg-gold); }
.gg-foot__credit { margin-top: 2rem; font-size: .8rem; }

.gg-up { opacity: 0; transform: translateY(14px); transition: opacity .7s var(--gg-ease), transform .7s var(--gg-ease); }
.gg-up.is-in { opacity: 1; transform: none; }
.gg-pack.gg-up { transition: opacity .7s var(--gg-ease), transform .45s var(--gg-ease), border-color .45s var(--gg-ease); }

/* On a phone the badge is the page, so it gets most of the width. */
@media (max-width: 45.99rem) {
  .gg-home { padding: .35rem; }
  .gg-home__name { display: none; }
  .gg-hero__goat { width: min(88vw, 56svh); }
  .gg-hero h1 { font-size: .7rem; letter-spacing: .26em; }
}

@media (min-width: 46rem) {
  .gg-spine { display: block; }
  .gg-row a { grid-template-columns: 3.2rem minmax(0, 20rem) 1fr; }
  .gg-quick { display: flex; flex-wrap: wrap; justify-content: center; }
  .gg-quick a, .gg-quick__more { padding: 1rem clamp(.9rem, 2.2vw, 1.55rem); border-top: 0; font-size: .7rem; }
  .gg-quick > * + * { border-left: 1px solid var(--gg-line-soft); }
  .gg-row__line { grid-column: 3; justify-self: end; text-align: right; }
}

@media (min-width: 60rem) {
  .gg-sec:not(.gg-sec--wide) {
    display: grid; grid-template-columns: minmax(0, 15rem) minmax(0, 1fr); gap: 0 3.5rem; align-items: start;
  }
  .gg-sec:not(.gg-sec--wide) > h2 { position: sticky; top: 2rem; margin: 0; }
  .gg-faq { display: grid; grid-template-columns: minmax(0, 15rem) minmax(0, 1fr); gap: 0 3.5rem; }
  .gg-faq h3 { margin: 0; }
  .gg-match > div { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}

.gg-cta { margin: 2.25rem 0; }
.gg-cta .gg-reach { margin: 0; }
.gg-cta--pair { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem; }

.gg-ico {
  display: block; width: 3rem; height: 3rem; margin: 0 0 .35rem; overflow: visible;
  color: var(--gg-gold); fill: none; stroke: currentColor; stroke-width: 1.6;
  stroke-linecap: round; stroke-linejoin: round;
}
.gg-ico * { transform-box: view-box; }
.gg-ico__dot, .gg-ico__fill { fill: currentColor; stroke: none; }
.gg-ico--bolt path, .gg-ico__draw > * { stroke-dasharray: 1; }
.gg-ico__coil { vector-effect: non-scaling-stroke; }

.is-in .gg-ico--chat { transform-origin: 25% 85%; animation: gg-pop .6s var(--gg-ease) both; }
.is-in .gg-ico__dot { animation: gg-type 1.8s ease-in-out .6s infinite; }
.is-in .gg-ico__dot:nth-of-type(2) { animation-delay: .75s; }
.is-in .gg-ico__dot:nth-of-type(3) { animation-delay: .9s; }
.is-in .gg-ico__turn { transform-origin: 35px 13px; animation: gg-tighten 5s var(--gg-ease) .3s infinite; }
.is-in .gg-ico__spin { transform-origin: 24px 24px; animation: gg-spin 16s linear infinite; }
.is-in .gg-ico__hand { transform-origin: 24px 27px; animation: gg-spin 6s steps(12) infinite; }
.is-in .gg-ico--bolt path { animation: gg-draw 1s var(--gg-ease) both, gg-charge 2.8s ease-in-out 1s infinite; }
.is-in .gg-ico__draw > * { animation: gg-draw 1.1s var(--gg-ease) both; }
.is-in .gg-ico__draw > path { animation-delay: .35s; }
.is-in .gg-ico__coil { transform-origin: 24px 40px; animation: gg-coil 3.2s var(--gg-ease) .3s infinite; }
.is-in .gg-ico__plate { animation: gg-plate 3.2s var(--gg-ease) .3s infinite; }
.is-in .gg-ico__roll { transform-origin: 24px 24px; animation: gg-roll 2.2s cubic-bezier(.15, .6, .25, 1) both, gg-spin 12s linear 2.2s infinite; }
.is-in .gg-ico__drop { animation: gg-drop .9s cubic-bezier(.3, 1.4, .5, 1) both; }
.is-in .gg-ico__ripple { transform-origin: 24px 43px; animation: gg-ripple 2.4s ease-out .8s infinite; }
.gg-timeline li:last-child.is-in::before { animation: gg-ping 2.4s ease-out 1s infinite; }

@keyframes gg-pop { from { transform: scale(.4); opacity: 0; } 60% { transform: scale(1.06); opacity: 1; } to { transform: none; } }
@keyframes gg-type { 0%, 60%, 100% { transform: none; opacity: .45; } 30% { transform: translateY(-3px); opacity: 1; } }
@keyframes gg-tighten {
  0%, 40%, 100% { transform: none; } 10% { transform: rotate(-28deg); } 20% { transform: rotate(4deg); }
  28% { transform: rotate(-20deg); } 36% { transform: rotate(2deg); }
}
@keyframes gg-spin { to { transform: rotate(360deg); } }
@keyframes gg-draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes gg-charge { 0%, 100% { fill: rgba(218, 165, 19, 0); } 45% { fill: rgba(218, 165, 19, .35); } }
/* The top plate rides the coil: 32 units of spring times each scale gives its drop. */
@keyframes gg-coil { 0%, 55%, 100% { transform: none; } 15% { transform: scaleY(.72); } 30% { transform: scaleY(1.06); } 42% { transform: scaleY(.98); } }
@keyframes gg-plate { 0%, 55%, 100% { transform: none; } 15% { transform: translateY(8.96px); } 30% { transform: translateY(-1.92px); } 42% { transform: translateY(.64px); } }
@keyframes gg-roll { from { transform: rotate(-540deg); } to { transform: none; } }
@keyframes gg-drop { from { transform: translateY(-16px); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes gg-ripple { from { transform: scale(.4); opacity: 1; } to { transform: scale(1.6); opacity: 0; } }
@keyframes gg-ping { from { box-shadow: 0 0 0 0 rgba(218, 165, 19, .55); } to { box-shadow: 0 0 0 .7rem rgba(218, 165, 19, 0); } }

.gg-reach__menu a { display: flex; align-items: center; gap: .7rem; }
.gg-reach__menu .gg-ico { width: 1.15rem; height: 1.15rem; margin: 0; stroke-width: 3; }
.gg-reach[open] .gg-ico--phone { animation: gg-ring .7s ease .15s; }
.gg-reach[open] .gg-ico--text { transform-origin: 25% 85%; animation: gg-pop .5s var(--gg-ease) .2s both; }
@keyframes gg-ring {
  0%, 100% { transform: none; } 20% { transform: rotate(-14deg); } 40% { transform: rotate(12deg); }
  60% { transform: rotate(-8deg); } 80% { transform: rotate(5deg); }
}

@media (prefers-reduced-motion: reduce) {
  *, body::before { animation: none !important; transition: none !important; }
  .gg-up { opacity: 1; transform: none; }
  .gg-sec::after { width: 4.5rem; }
}