/* RULER GOLF — portable homepage implementation kit */

:root {
  color-scheme: light;
  --paper: #f7f3e3;
  --paper-deep: #efe9d4;
  --paper-light: #fbf8ee;
  --ink: #2f281d;
  --graphite: #6b6152;
  --pencil: #b9ae97;
  --rule: rgba(47, 40, 29, 0.14);
  --rule-soft: rgba(47, 40, 29, 0.08);
  --marker: #d8452f;
  --fairway: #4a8a4b;
  --leaf: #bcdd77;
  --sand: #f2e2ac;
  --water: #7cc0e6;
  --start: #f3b12e;
  --display: "Futura", "Futura PT", "Century Gothic", "Avenir Next", "Trebuchet MS", system-ui, sans-serif;
  --body: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", Georgia, serif;
  --mono: "SF Mono", ui-monospace, Menlo, Consolas, monospace;
  --spine: 60px;
  --measure: 1680px;
  --gutter: clamp(1.25rem, 4vw, 3.25rem);
  --section-space: clamp(5.5rem, 10vw, 9rem);
  --shadow-paper: 0 24px 65px rgba(47, 40, 29, 0.12), 0 2px 6px rgba(47, 40, 29, 0.07);
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: 105px;
}

body {
  min-width: 320px;
  margin: 0;
  color: var(--ink);
  background-color: var(--paper);
  background-image: radial-gradient(rgba(47, 40, 29, 0.045) 0.55px, transparent 0.55px);
  background-size: 5px 5px;
  font-family: var(--body);
  font-size: 18px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

img {
  display: block;
  max-width: 100%;
}

a {
  color: inherit;
  text-decoration-color: var(--marker);
  text-underline-offset: 0.18em;
}

a:focus-visible,
button:focus-visible {
  outline: 2px solid var(--marker);
  outline-offset: 5px;
}

h1,
h2,
h3,
h4,
p {
  margin: 0;
}

h1,
h2,
h3,
h4 {
  font-family: var(--display);
  font-weight: 500;
  letter-spacing: -0.045em;
  line-height: 1.03;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.site-shell {
  min-height: 100vh;
  margin-left: var(--spine);
}

.measure {
  width: min(100%, var(--measure));
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.ruler-spine {
  position: fixed;
  z-index: 10;
  inset: 0 auto 0 0;
  width: var(--spine);
  overflow: hidden;
  border-right: 1px solid rgba(47, 40, 29, 0.17);
  background-color: var(--paper-deep);
  background-image:
    repeating-linear-gradient(to bottom, transparent 0 7px, rgba(47, 40, 29, 0.25) 7px 8px),
    repeating-linear-gradient(to bottom, transparent 0 39px, rgba(47, 40, 29, 0.35) 39px 40px);
  background-size: 13px 8px, 23px 40px;
  background-repeat: repeat-y;
  background-position: right top;
}

.ruler-spine__unit {
  position: absolute;
  top: 18px;
  left: 11px;
  color: var(--graphite);
  font: 10px var(--mono);
}

.ruler-spine__labels {
  display: grid;
  gap: 26px;
  padding: 48px 18px 0 10px;
  color: var(--graphite);
  font: 11px var(--mono);
}

.site-header {
  position: sticky;
  z-index: 8;
  top: 0;
  border-bottom: 1px solid var(--rule);
  background: rgba(247, 243, 227, 0.93);
  backdrop-filter: blur(12px);
}

.site-header__inner {
  display: flex;
  min-height: 82px;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

.brand {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
}

.brand__logo {
  width: clamp(158px, 18vw, 214px);
  height: auto;
}

.site-nav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: clamp(13px, 2.2vw, 32px);
}

.site-nav__link,
.mono-label {
  font-family: var(--mono);
  font-size: clamp(10px, 1vw, 11.5px);
  font-weight: 400;
  letter-spacing: 0.115em;
  text-transform: uppercase;
}

.site-nav__link {
  color: var(--graphite);
  text-decoration: none;
  transition: color 160ms ease;
}

.site-nav__link:hover,
.site-nav__link:focus-visible,
.site-nav__link[aria-current="location"] {
  color: var(--marker);
}

.hero {
  position: relative;
  display: grid;
  min-height: min(680px, 84vh);
  grid-template-columns: minmax(560px, 0.95fr) minmax(520px, 1.05fr);
  align-items: center;
  gap: clamp(18px, 3vw, 52px);
  padding-block: clamp(72px, 11vw, 138px);
}

.hero__copy {
  position: relative;
  z-index: 1;
}

.hero__eyebrow,
.section-eyebrow {
  margin-bottom: 22px;
  color: var(--graphite);
  font-size: 10.5px;
  letter-spacing: 0.17em;
}

.hero__headline {
  /* Wide enough for "Rule the course." to hold one line at every width the
     grid allows — the line break is authored in the markup, not left to luck. */
  max-width: 15ch;
  font-size: clamp(48px, 5.6vw, 88px);
  text-wrap: balance;
}

.hero__headline-accent {
  position: relative;
  display: inline-block;
  white-space: nowrap;
}

.hero__headline-accent::after,
.marker-underline::after {
  position: absolute;
  right: 3%;
  bottom: -0.07em;
  left: 1%;
  height: 0.075em;
  transform: rotate(-1.2deg);
  border-radius: 99px;
  background: var(--marker);
  content: "";
}

.hero__lede {
  max-width: 400px;
  margin-top: 26px;
  color: var(--graphite);
  font-size: clamp(19px, 2vw, 23px);
  line-height: 1.43;
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 29px;
}

.button {
  display: inline-flex;
  min-height: 47px;
  align-items: center;
  justify-content: center;
  padding: 0 18px;
  border: 1px solid var(--ink);
  color: var(--ink);
  font: 10.5px var(--mono);
  letter-spacing: 0.095em;
  text-decoration: none;
  text-transform: uppercase;
  transition: transform 180ms ease, background-color 180ms ease, box-shadow 180ms ease;
}

.button:hover,
.button:focus-visible {
  transform: translateY(-2px);
  box-shadow: 0 5px 0 rgba(47, 40, 29, 0.09);
}

.button--primary {
  border-color: #c18315;
  background: var(--start);
}

.button--ghost {
  background: rgba(247, 243, 227, 0.74);
}

.hero__reassurance {
  margin-top: 30px;
  color: var(--graphite);
  font-size: 9px;
  letter-spacing: 0.14em;
}

.hero__art {
  position: relative;
  display: grid;
  min-height: 380px;
  place-items: center;
}

.hero__image {
  width: min(720px, 118%);
  max-width: none;
  height: auto;
  margin-left: 35px;
  filter: drop-shadow(0 18px 28px rgba(47, 40, 29, 0.12));
}

.section {
  padding-block: var(--section-space);
}

.section--tight {
  padding-block: clamp(4rem, 7vw, 6.5rem);
}

.section-heading {
  max-width: 790px;
  margin-inline: auto;
  text-align: center;
}

.section-heading__title {
  font-size: clamp(39px, 6vw, 65px);
}

.section-heading__description {
  max-width: 600px;
  margin: 14px auto 0;
  color: var(--graphite);
  font-size: clamp(18px, 2.1vw, 21px);
  line-height: 1.45;
}

.how-it-works {
  position: relative;
  padding-top: clamp(42px, 7vw, 85px);
}

.step-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
  margin-top: 45px;
}

.step-card {
  position: relative;
  min-height: 233px;
  padding: 20px 15px 16px;
  border: 1px solid var(--rule);
  background: rgba(251, 248, 238, 0.55);
  text-align: center;
}

.step-card__number {
  color: var(--marker);
  font: 16px var(--mono);
}

.step-card__name {
  margin-top: 4px;
  font-size: 11px;
}

.step-card__icon {
  width: 96px;
  height: 88px;
  margin: 16px auto 8px;
}

.step-card__description {
  color: var(--graphite);
  font-size: 15px;
  line-height: 1.35;
}

.driver-note {
  max-width: 520px;
  margin: 22px auto 0;
  color: var(--marker);
  font: 14px var(--mono);
  text-align: center;
}

.driver-note__arrow {
  display: inline-block;
  transform: translateY(-2px) rotate(-19deg);
  font-size: 24px;
}

.moment-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
  margin-top: 43px;
}

.moment-card {
  overflow: hidden;
  border: 1px solid var(--rule);
  background: rgba(251, 248, 238, 0.57);
}

.moment-card__copy {
  min-height: 164px;
  padding: 25px 20px 12px;
}

.moment-card__title {
  font-size: clamp(22px, 2.4vw, 29px);
  line-height: 1.14;
}

.moment-card__description {
  margin-top: 12px;
  color: var(--graphite);
  font-size: 16px;
  line-height: 1.38;
}

.moment-card__image {
  width: 100%;
  height: 166px;
  object-fit: cover;
  object-position: center;
}

.world-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 21px;
  margin-top: 46px;
}

.world-card {
  overflow: hidden;
  border: 1px solid var(--rule);
  background: rgba(251, 248, 238, 0.8);
  box-shadow: 0 3px 10px rgba(47, 40, 29, 0.035);
  transition: transform 180ms ease, box-shadow 180ms ease;
}

.world-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 30px rgba(47, 40, 29, 0.1);
}

/* A glimpse of each world, not the whole sheet.
 *
 * These renders are the product. At this width a full A3 sheet is close enough
 * to legible that six of them on a public page would hand over what the shop
 * sells. So each card is zoomed into the middle of the course: enough terrain
 * to show that a lava field and a candy river are genuinely different places,
 * not enough to play a hole from.
 *
 * It also crops out the sheet furniture — masthead, par box, legend — which is
 * what the untuned 4/3 crop was showing instead of course. */
.world-card__frame {
  position: relative;
  overflow: hidden;
  aspect-ratio: 4 / 3;
}

.world-card__image {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 172%;
  height: auto;
  /* Pulled off-centre: the sheet's own middle sits low, so centring lands on
     the legend rather than on the fairway. */
  transform: translate(-50%, -46%);
}

/* The lower edge fades out, so the crop reads as a glimpse rather than a
   photograph with its bottom sliced off. */
.world-card__frame::after {
  content: '';
  position: absolute;
  inset: auto 0 0 0;
  height: 34%;
  background: linear-gradient(to bottom, rgba(251, 248, 238, 0), rgba(251, 248, 238, 0.92));
  pointer-events: none;
}

/* Only on the three you can actually try. Everything else stays unmarked —
   a "locked" badge on the other three would read as a wall rather than an
   invitation. */
.world-card__tag {
  position: absolute;
  left: 10px;
  bottom: 10px;
  z-index: 1;
  padding: 4px 9px;
  border: 1px solid var(--ink);
  border-radius: 2px;
  background: var(--start);
  color: var(--ink);
  font-size: 9.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.world-card__body {
  padding: 16px 14px 18px;
  text-align: center;
}

.world-card__name {
  font-size: 11px;
  letter-spacing: 0.17em;
}

.world-card__description {
  margin-top: 6px;
  color: var(--graphite);
  font-size: 15px;
  line-height: 1.3;
}

.learning-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin-top: 47px;
}

.learning-card {
  padding: 8px 17px;
  border-right: 1px solid var(--rule);
  text-align: center;
}

.learning-card:last-child {
  border-right: 0;
}

.learning-card__icon {
  width: 60px;
  height: 60px;
  margin: 0 auto 13px;
}

.learning-card__name {
  font-size: 10.5px;
  letter-spacing: 0.13em;
}

.learning-card__description {
  margin-top: 8px;
  color: var(--graphite);
  font-size: 15px;
  line-height: 1.37;
}

.printing-note {
  display: grid;
  grid-template-columns: minmax(180px, 0.65fr) 1fr;
  gap: clamp(25px, 6vw, 75px);
  padding-block: 40px;
  border-block: 1px solid var(--rule);
}

.printing-note__title {
  font-size: clamp(34px, 4.3vw, 47px);
}

.printing-note__list {
  display: grid;
  gap: 13px;
  padding-left: 20px;
  color: var(--graphite);
}

.printing-note__list strong {
  color: var(--ink);
}

.free-courses {
  display: grid;
  min-height: 280px;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 35px;
  padding: clamp(28px, 6vw, 68px);
  border: 1px solid rgba(193, 131, 21, 0.36);
  background: linear-gradient(145deg, rgba(242, 226, 172, 0.79), rgba(247, 243, 227, 0.91));
}

.free-courses__title {
  font-size: clamp(41px, 5.6vw, 66px);
}

.free-courses__description {
  max-width: 490px;
  margin-top: 12px;
  color: var(--graphite);
  font-size: 20px;
}

.free-courses__action {
  display: grid;
  justify-items: center;
  gap: 11px;
}

.free-courses__fine-print {
  color: var(--graphite);
  font-size: 9.5px;
  letter-spacing: 0.1em;
}

.site-footer {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  padding-block: 32px 50px;
  color: var(--graphite);
  font-size: 15px;
}

.site-footer__links {
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
}

.site-footer__links a {
  text-decoration: none;
}

@media (max-width: 900px) {
  :root {
    --spine: 45px;
  }

  .hero {
    min-height: auto;
    grid-template-columns: 1fr;
    gap: 32px;
    padding-block: 86px 30px;
  }

  .hero__copy {
    max-width: 620px;
  }

  .hero__art {
    min-height: 0;
  }

  .hero__image {
    width: min(700px, 107%);
    margin-left: 0;
  }

  .moment-grid,
  .world-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .moment-card:last-child {
    grid-column: 1 / -1;
  }

  .moment-card:last-child .moment-card__copy {
    min-height: auto;
  }
}

@media (max-width: 640px) {
  :root {
    --spine: 34px;
  }

  body {
    font-size: 17px;
  }

  .ruler-spine__unit {
    left: 5px;
  }

  .ruler-spine__labels {
    padding-left: 5px;
  }

  .site-header__inner {
    min-height: 73px;
  }

  .brand__logo {
    width: 157px;
  }

  .site-nav__link:not(.site-nav__link--priority) {
    display: none;
  }

  .hero {
    padding-top: 65px;
  }

  .hero__headline {
    font-size: clamp(48px, 12vw, 75px);
  }

  .hero__lede {
    margin-top: 23px;
  }

  .hero__reassurance {
    font-size: 8px;
  }

  .step-grid,
  .world-grid,
  .learning-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .step-grid,
  .world-grid {
    gap: 12px;
  }

  .step-card {
    min-height: 211px;
    padding-inline: 9px;
  }

  .step-card__icon {
    width: 79px;
    height: 74px;
  }

  .moment-grid {
    grid-template-columns: 1fr;
  }

  .moment-card:last-child {
    grid-column: auto;
  }

  .moment-card__copy {
    min-height: auto;
  }

  .world-card__description {
    font-size: 13px;
  }

  .learning-card {
    min-height: 156px;
    border-bottom: 1px solid var(--rule);
  }

  .learning-card:nth-child(2) {
    border-right: 0;
  }

  .learning-card:nth-child(n + 3) {
    padding-top: 24px;
    border-bottom: 0;
  }

  .printing-note,
  .free-courses {
    grid-template-columns: 1fr;
  }

  .free-courses__action {
    justify-items: start;
  }

  .site-footer {
    display: grid;
    gap: 12px;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
  }
}


/* ---------------------------------------------------------------------------
   Course backdrop
   ---------------------------------------------------------------------------
   Carried over from the live site. The real course render sits fixed behind
   everything and is washed back until it reads as texture, so scrolling feels
   like moving over the course instead of past a decorative panel. */
.course-backdrop {
  position: fixed;
  inset: 0 0 0 var(--spine);
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
}

.course-backdrop__art {
  position: absolute;
  top: 50%;
  right: -6%;
  width: min(60vw, 900px);
  transform: translateY(-50%) rotate(-4deg);
  opacity: 0.13;
}

.course-backdrop__wash {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    100deg,
    var(--paper) 0%,
    rgba(247, 243, 227, 0.94) 46%,
    rgba(247, 243, 227, 0.6) 100%
  );
}

/* The hero sheet is a printed object, so it gets a paper shadow and a slight
   tilt rather than sitting flat like a screenshot. */
.hero__image {
  border-radius: 3px;
  box-shadow: var(--shadow-paper);
  transform: rotate(1.4deg);
}

@media (prefers-reduced-motion: reduce) {
  .hero__image { transform: none; }
}


/* ---------------------------------------------------------------------------
   The film
   ---------------------------------------------------------------------------
   Shot vertical for social, so it is given a bounded portrait frame rather than
   stretched into a landscape band. It leads "It gets loud." because that claim
   is the one thing prose cannot make: you have to watch somebody groan. */
.moment-film {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  margin-bottom: clamp(38px, 5vw, 62px);
}

.moment-film__video {
  width: min(100%, 380px);
  height: auto;
  border-radius: 4px;
  box-shadow: var(--shadow-paper);
}

.moment-film__caption {
  margin: 0;
  color: var(--graphite);
}


/* ---------------------------------------------------------------------------
   The shot demo
   ---------------------------------------------------------------------------
   Ported from the live site, where it is the one element that explains the game
   without a sentence: aim, commit to the driver, roll, draw. A static sheet
   shows what you get; this shows what you DO, which is the harder sell.

   .sheet and .sheet-caption live in the site's main stylesheet, not demo.css,
   so they come across too or the demo renders unframed with a run-together
   caption. */
.hero__art .sheet {
  width: min(620px, 100%);
  justify-self: center;
  position: relative;
  background: var(--paper);
  border: 1px solid var(--ink);
  padding: 12px 12px 0;
  box-shadow: 0 1px 0 rgba(47, 40, 29, 0.08), 0 18px 40px -28px rgba(47, 40, 29, 0.55);
}

.hero__art .sheet-caption {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.7rem 0.1rem 0.8rem;
  font-family: var(--mono);
  font-size: 0.68rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--graphite);
}

/* The hero has room the live site's narrower column did not, so the demo is
   given it — this is the first thing a visitor should read. */
.hero__art .demo svg {
  display: block;
  width: 100%;
  height: auto;
}


/* The maker's mark, sitting under the wordmark rather than beside the headline:
   it is attribution for the name above it, and it links to the parent brand's
   own shop. Quiet at rest, underlined on hover, so it reads as a credit rather
   than as navigation. */
.brand-block {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 5px;
}

.brand-byline {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0;
  color: var(--graphite);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: lowercase;
}

.brand-byline__mark {
  width: 15px;
  height: 15px;
  flex-shrink: 0;
}

.brand-byline a {
  color: var(--ink);
  text-decoration: none;
  border-bottom: 1px solid transparent;
}

.brand-byline a:hover,
.brand-byline a:focus-visible {
  border-bottom-color: var(--ink);
}


/* The bridge back to /how-to-play.
 *
 * The nav item reads "How it works" and points at the four steps above, which
 * left the rules page with no link from the homepage at all — it was still
 * live, just unreachable. This says the one thing about it worth advertising:
 * the game has a gentler mode, so a six-year-old and an eleven-year-old can
 * play the same sheet without it being a walkover. */
.ways-note {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 10px 22px;
  max-width: 64ch;
  margin-inline: auto;
  margin-top: clamp(26px, 3.5vw, 40px);
  padding-top: clamp(22px, 3vw, 32px);
  border-top: 1px solid var(--rule);
  text-align: center;
}

.ways-note__text {
  margin: 0;
  color: var(--graphite);
}

.ways-note__link {
  flex-shrink: 0;
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink);
  white-space: nowrap;
}


/* One button per free world.
 *
 * The copy said "Meadow · Candy Land · Pirate Lagoon" and "Download all three",
 * and the single button underneath it linked to meadow.pdf — so the page
 * promised three worlds and handed over one. Three named buttons keep the
 * promise, and let someone take just the world their kid will actually pick. */
.free-courses__buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

@media (max-width: 560px) {
  .free-courses__buttons { flex-direction: column; }
  .free-courses__buttons .button { width: 100%; text-align: center; }
}