/* A wall, laid course by course: dark mortar, brick-red accent, and each game offset from the last like running bond. */
:root {
  color-scheme: dark;
  --night: #111012; --lift: #1b191c; --mortar: #2c292c; --ink: #f4efe8; --soft: #b5aea6;
  --brick: #e0553a; --brick-deep: #a93a25; --gold: #f1b53c;
  --show: "Bricolage Grotesque", "Arial Narrow", sans-serif; --plain: "Figtree", system-ui, sans-serif;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--night); color: var(--ink); font: 18px/1.65 var(--plain); }
img { display: block; max-width: 100%; height: auto; }
a { color: var(--gold); }
a:focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; }
h1, h2, h3 { font-family: var(--show); font-weight: 700; line-height: 1.04; letter-spacing: -0.015em; text-wrap: balance; margin: 0; }
p { margin: 0 0 1em; max-width: 38em; }
.wrap { width: 100%; max-width: 1140px; margin-inline: auto; padding-left: max(20px, env(safe-area-inset-left, 0px)); padding-right: max(20px, env(safe-area-inset-right, 0px)); }

/* The wall goes up as you scroll */
.laid { position: fixed; top: 0; left: 0; height: calc(7px + env(safe-area-inset-top, 0px)); width: 0; z-index: 9; background: repeating-linear-gradient(90deg, var(--brick) 0 26px, var(--night) 26px 28px); }

.bar { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 22px; padding-block: 26px 6px; font-weight: 600; font-size: 16px; }
.bar a { color: var(--soft); text-decoration: none; }
.bar a:hover { color: var(--ink); }
.bar .home { font: 700 21px var(--show); color: var(--ink); margin-right: auto; }

/* Opening: running bond drawn behind the words */
.open { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='88'%3E%3Cpath d='M0 1H120M0 45H120M1 0V44M61 44V88' stroke='%23fff' stroke-opacity='.07' stroke-width='2' fill='none'/%3E%3C/svg%3E");
  padding-block: clamp(56px, 11vw, 130px) clamp(56px, 9vw, 110px); }
.open h1 { font-size: clamp(66px, 15vw, 188px); line-height: 0.88; }
.open h1 em { font-style: normal; color: var(--brick); }
.open .lead { font-size: clamp(21px, 2.8vw, 30px); line-height: 1.32; margin: 30px 0 0; max-width: 27em; }

.story { background: var(--lift); padding-block: 72px; }
.story .wrap { display: grid; grid-template-columns: minmax(0, 300px) minmax(0, 1fr); gap: 40px; }
.story h2 { font-size: clamp(32px, 4.2vw, 48px); }

/* The three courses */
.course { padding-block: clamp(60px, 8vw, 104px); border-top: 2px solid var(--mortar); }
.course .wrap { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(30px, 5vw, 72px); align-items: center; }
.course.offset .words { order: 2; }
.tag { font: 600 15px var(--plain); letter-spacing: 0.07em; text-transform: uppercase; color: var(--brick); margin: 0 0 12px; }
.course h2 { font-size: clamp(46px, 7.5vw, 92px); margin-bottom: 8px; }
.what { font: 600 clamp(19px, 2.2vw, 23px)/1.3 var(--show); color: var(--gold); margin-bottom: 22px; }
.pics { display: grid; gap: 14px; }
.pics.two { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }
.pics img { border-radius: 10px; transition: transform .35s cubic-bezier(.2, 1.3, .4, 1); }
.pics.two img:nth-child(2) { margin-top: 42px; }
.pics img:hover { transform: translateY(-6px); }
.go { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 24px; padding: 0; list-style: none; }
.btn { display: inline-block; padding: 12px 20px; font-weight: 700; font-size: 16px; color: var(--night); background: var(--gold); border-radius: 4px; text-decoration: none; box-shadow: 0 4px 0 #a97a1d; transition: transform .1s, box-shadow .1s; }
.btn:hover { transform: translateY(-2px); box-shadow: 0 6px 0 #a97a1d; }
.btn:active { transform: translateY(3px); box-shadow: 0 1px 0 #a97a1d; }
.btn.quiet { color: var(--ink); background: transparent; box-shadow: inset 0 0 0 2px var(--mortar); }
.soon { display: inline-block; padding: 12px 0; color: var(--soft); font-weight: 600; font-size: 16px; }

/* Pipp stands on the winter field */
.pipp { position: relative; }
.pipp .buddy { width: clamp(90px, 13vw, 150px); margin-bottom: 14px; filter: drop-shadow(0 10px 12px rgba(0, 0, 0, .6)); transform-origin: 50% 100%; transition: transform .3s cubic-bezier(.3, 1.8, .5, 1); }
.pipp .buddy:hover { transform: scale(1.09, .93) rotate(-3deg); }

.belong { background: var(--brick-deep); padding-block: clamp(64px, 9vw, 110px); }
.belong h2 { font-size: clamp(38px, 6.5vw, 76px); max-width: 15em; margin-bottom: 26px; }
.belong p { font-size: 20px; }
.belong a { color: #fff; }

footer { padding-block: 40px; font-size: 16px; }
footer .wrap { display: flex; flex-wrap: wrap; gap: 8px 22px; align-items: center; }
footer a { color: var(--ink); }
footer .by { margin-right: auto; color: var(--soft); }

/* The write-up */
.article { padding-block: 40px 80px; }
.article .in { max-width: 720px; }
.article h1 { font-size: clamp(42px, 7vw, 74px); margin-bottom: 22px; }
.article h2 { font-size: clamp(27px, 3.6vw, 36px); margin: 52px 0 12px; }
.article .lead { font-size: 23px; line-height: 1.4; }
.article li { margin-bottom: 8px; }
.article figure { margin: 34px 0; }
.article figure img { border-radius: 10px; }
.article figcaption { color: var(--soft); font-size: 15px; margin-top: 8px; }

@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .pics img, .buddy, .btn { transition: none; } }
@media (max-width: 800px) {
  .story .wrap, .course .wrap { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .course.offset .words { order: 0; }
  .pics.two img:nth-child(2) { margin-top: 24px; }
}