/* Fieldnote Academy — education. Reference pattern: Reducations (huge condensed caps with inline photo, rotating word, sticker, numbered tracks, dated course cards). */
:root {
  --bg: #f4f0e8; --fg: #10110f; --muted: #4a4c47; --surface: #e9e3d6; --card: #ffffff; --line: #10110f;
  --accent: #10110f; --accent-fg: #c9f755; --lime: #c9f755;
  --font-head: "Anton", Impact, sans-serif; --font-body: "Space Grotesk", system-ui, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, monospace;
  --h-weight: 400; --h-track: 0; --radius: 6px;
}
.eyebrow { font-family: var(--mono); font-weight: 500; color: var(--fg); }
.mega { font: 400 clamp(2.75rem, 1.2rem + 6vw, 7rem)/.9 var(--font-head); text-transform: uppercase; }
.mega--sm { font-size: clamp(2.5rem, 1.4rem + 4vw, 5rem); }
.section--dark { background: var(--fg); color: var(--bg); }
.section--dark .eyebrow { color: var(--lime); }

/* Hero */
.hero { position: relative; display: flex; flex-direction: column; min-height: calc(100svh - 2.5rem); color: #fff; overflow: hidden; isolation: isolate; }
.hero__img { position: absolute; inset: 0; z-index: -2; width: 100%; height: 115%; object-fit: cover; transform: translateY(calc(var(--py, 0px) * -.35)); }
.hero::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgb(16 17 15 / .55), rgb(16 17 15 / .35) 40%, rgb(16 17 15 / .8)); }
.nav__brand { font: 400 1.75rem/1 var(--font-head); letter-spacing: .02em; }
.hero .btn { background: var(--lime); color: var(--fg); }
.hero__copy { margin-top: auto; padding-bottom: clamp(2rem, 1rem + 4vw, 4.5rem); }
.hero__title { font: 400 clamp(3.25rem, 1rem + 10vw, 11rem)/.86 var(--font-head); text-transform: uppercase; letter-spacing: .005em; }
.hero__rotate { color: var(--lime); }
.hero__inline { display: inline-block; width: 1.6em; height: .78em; margin-right: .12em; border-radius: 999px; overflow: hidden; vertical-align: -.02em; border: 3px solid var(--lime); }
.hero__inline img { width: 100%; height: 100%; object-fit: cover; }
.hero__cta { margin-top: 2rem; }
.sticker { position: absolute; right: clamp(1rem, 4vw, 4rem); top: clamp(6rem, 18vh, 10rem); width: clamp(7rem, 5rem + 6vw, 11rem); height: auto; }
.motion .sticker text:first-of-type { animation: sticker-spin 18s linear infinite; transform-origin: 100px 100px; transform-box: view-box; }
@keyframes sticker-spin { to { transform: rotate(360deg); } }

/* Intro */
.intro__grid { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: 2rem clamp(2rem, 6vw, 5rem); align-items: end; }
.intro .lead { margin-bottom: 1rem; }

/* Tracks */
.tracks li { display: grid; grid-template-columns: 5rem minmax(0, 1fr) minmax(0, 1fr); gap: 1rem; align-items: baseline; padding-block: 1.25rem; border-top: 1px solid #3a3d38; transition: background-color 250ms, color 250ms, padding 250ms; }
.tracks li:last-child { border-bottom: 1px solid #3a3d38; }
.tracks span { font: 500 .875rem/1 var(--mono); color: var(--lime); }
.tracks h3 { font: 400 clamp(2rem, 1.4rem + 2.5vw, 3.5rem)/1 var(--font-head); text-transform: uppercase; }
.tracks p { color: #b7b9b2; }
.tracks li:hover { background: var(--lime); color: var(--fg); padding-inline: 1rem; }
.tracks li:hover span, .tracks li:hover p { color: var(--fg); }

/* Courses */
.courses { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.25rem; }
.course { position: relative; display: grid; gap: .5rem; align-content: start; padding: .75rem .75rem 1.5rem; background: var(--card); border: 2px solid var(--fg); border-radius: var(--radius); }
.course__img { aspect-ratio: 4 / 3; overflow: hidden; border-radius: 3px; margin-bottom: .75rem; }
.course__date { position: absolute; top: 1.25rem; left: 1.25rem; display: grid; place-items: center; width: 4.25rem; height: 4.25rem; background: var(--lime); color: var(--fg); border: 2px solid var(--fg); border-radius: 50%; line-height: 1; }
.course__date b { font: 400 1.6rem/1 var(--font-head); }
.course__date span { font: 500 .6875rem/1 var(--mono); text-transform: uppercase; margin-top: -.6rem; }
.course__date--soon b { font-size: 1.05rem; }
.course h3 { font: 400 1.75rem/1 var(--font-head); text-transform: uppercase; padding-inline: .5rem; }
.course > p { padding-inline: .5rem; color: var(--muted); font-size: .9375rem; }
.course__meta { display: flex; justify-content: space-between; gap: 1rem; margin-top: .5rem; padding-top: .75rem; border-top: 2px solid var(--fg); color: var(--fg) !important; font-weight: 500; }
.course__fee { font-family: var(--mono); }
.note { margin-top: 1rem; font-size: .8125rem; }

/* Rows tweaks */
.rows > li { border-top-width: 2px; }
.rows > li:last-child { border-bottom-width: 2px; }
.rows b:first-child { font-family: var(--mono); font-weight: 500; }

/* Apply */
.apply { background: var(--fg); color: var(--bg); }
.apply .muted { color: #b7b9b2; }
.apply .demo-note { background: transparent; border: 2px dashed #5a5e57; }
.apply a { color: var(--lime); }
.btn { border-radius: 0; }

@media (max-width: 860px) {
  .intro__grid, .courses { grid-template-columns: 1fr; }
  .tracks li { grid-template-columns: 3rem 1fr; }
  .tracks p { grid-column: 2; }
  .sticker { top: auto; bottom: 45%; }
}
/* On phones the photo pill pushed "by building" onto two cramped lines */
@media (max-width: 480px) {
  .hero__inline { display: none; }
}