/* ============================================================ a course page
 * Only what this page adds to base.css. Everything shared, including the whole
 * token set, the bar, the reveals, the buttons, the .q accordion, the .deliver
 * rows, the .who band and the footer, is in that file.
 *
 * Most of these rules came from the old course.html, which carried a private
 * copy of an entire stylesheet and drifted a palette generation behind. What
 * survived that move is only what is genuinely specific to a syllabus page,
 * and everything in it that named a colour now names a token.
 */

/* ---- the hero */
.chero{padding:clamp(96px,12vw,170px) 0 clamp(40px,5vw,80px);position:relative;overflow:hidden}
.cgrid{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);
  gap:clamp(26px,4vw,72px);align-items:end}
@media(max-width:920px){.cgrid{grid-template-columns:1fr}}
/* Smaller than the landing page's headline, because these are titles and not
   a slogan. "Grasshopper for Landscape Architecture" is thirty-seven
   characters against "Learn Grasshopper"'s seventeen, and at the hero size it
   set four lines, one word each, in a column that is not even the full page. */
.chero .h-xl{font-size:clamp(30px,4.4vw,68px);line-height:1.02}
.crumbs{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-bottom:26px}
.pill{font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;
  border:1px solid var(--line2);border-radius:var(--r-ctl);padding:5px 12px;color:var(--ink2)}
/* --acid-ink and not --acid: the accent as a LINE or a LETTER has to be the
   darker olive on a light ground, where #C8F44E is not a colour, it is a
   rumour. Only a filled thing keeps the raw accent. */
.pill.hot{border-color:var(--acid-ink);color:var(--acid-ink)}
/* The cover is drawn here as it is on the shelf, not photographed. A course
   page that showed a JPEG of the cover the shelf draws live would be the one
   place on the site where the geometry stops moving. */
.coverbox{border:1px solid var(--line);border-radius:4px;overflow:hidden;
  background:var(--surface);aspect-ratio:1}
.coverbox canvas{width:100%;height:100%;display:block}

/* ---- the figures under the headline */
.specs{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:1px;
  background:var(--line);border:1px solid var(--line);margin-top:clamp(30px,4vw,54px)}
.spec{background:var(--bg);padding:18px 20px}
.spec b{display:block;font-size:clamp(19px,1.8vw,26px);font-weight:500;letter-spacing:-.024em;
  font-variant-numeric:tabular-nums}
.spec span{display:block;margin-top:4px}
/* auto-fit picks the column count off the width, and the moment five specs do
   not divide by it the leftover track is left as a hole in the grid's own rule
   colour - a grey slab sitting beside the price, which on a phone is the first
   thing you see under the cover. The count is pinned where wrapping starts, and
   an odd last cell takes the width it would otherwise leave empty. Five is odd
   and four is not, so both shapes the builder emits come out square. */
@media(max-width:760px){
  .specs{grid-template-columns:repeat(2,minmax(0,1fr))}
  .spec:nth-child(odd):last-child{grid-column:1 / -1}
}

/* ---- the syllabus, with a sticky rail beside it */
.mgrid{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:clamp(28px,4vw,72px);
  align-items:start;margin-top:clamp(26px,3vw,44px)}
@media(max-width:1040px){.mgrid{grid-template-columns:1fr}}
.rail{position:sticky;top:88px;border:1px solid var(--line);border-radius:4px;
  background:var(--surface);padding:24px}
@media(max-width:1040px){.rail{position:static}}
.rail .pv{font-size:clamp(32px,3.4vw,46px);font-weight:500;letter-spacing:-.035em;
  font-variant-numeric:tabular-nums;margin:0}
.rail ul{list-style:none;margin:20px 0;padding:0;display:grid;gap:11px}
.rail li{display:flex;gap:11px;align-items:flex-start;font-size:14px;color:var(--ink2);
  line-height:1.45}
.rail li i{width:14px;height:14px;flex:0 0 auto;margin-top:3px;border-radius:50%;
  border:1px solid var(--acid-ink);position:relative}
.rail li i::after{content:'';position:absolute;inset:3px;border-radius:50%;background:var(--acid-ink)}
/* The rail offers the course's next workshop, or says there are no dates yet.
   It held a launch price and a waitlist form while the courses were going to
   be recordings; they are taught live now and booked by phone. The month sits
   under the dates the way it does in the workshop rows on the landing page. */
.rmonth{margin:8px 0 0}
/* display:flex, because the button here is a link now and .btn sets no
   display: an inline <a> ignores width, so it sat at the width of its words
   with the number centred under a different edge. The old button was inside
   the waitlist form, whose flex row was doing this job without saying so. */
.rail .btn{display:flex;width:100%;text-align:center;justify-content:center}

/* ---- modules */
.mod{border-top:1px solid var(--line)}
.mod:last-of-type{border-bottom:1px solid var(--line)}
.mod summary{list-style:none;cursor:pointer;display:flex;align-items:baseline;gap:18px;
  padding:clamp(18px,2.1vw,26px) 0;transition:color var(--t1)}
.mod summary::-webkit-details-marker{display:none}
@media(hover:hover){.mod summary:hover{color:var(--acid-ink)}}
.mod .mn{font-family:var(--mono);font-size:11px;color:var(--ink3);flex:0 0 auto;width:32px}
.mod .mt{font-size:clamp(17px,1.55vw,24px);font-weight:500;letter-spacing:-.022em;flex:1}
.mod .md{font-family:var(--mono);font-size:11px;color:var(--ink3);flex:0 0 auto}
.mod .mi{width:13px;height:13px;position:relative;flex:0 0 auto;margin-left:6px}
.mod .mi::before,.mod .mi::after{content:'';position:absolute;inset:50% 0 auto 0;height:1px;
  background:currentColor;transition:transform var(--t2) var(--ease)}
.mod .mi::after{transform:rotate(90deg)}
.mod[open] .mi::after{transform:rotate(0)}
.lessons{list-style:none;margin:0;padding:0 0 18px 50px}
@media(max-width:640px){.lessons{padding-left:0}}
.lessons li{display:flex;gap:16px;align-items:baseline;padding:9px 0;
  border-top:1px solid var(--line);font-size:15px;color:var(--ink2)}
.lessons li .lt{flex:1}
.lessons li .ld{font-family:var(--mono);font-size:11px;color:var(--ink3);flex:0 0 auto}
.free{font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--amber);background:var(--amber-bg);border-radius:var(--r-ctl);padding:2px 8px;flex:0 0 auto}
/* The one lesson in a module that leaves you holding something. */
.deliv{color:var(--ink)}
.deliv::before{content:'\25c6';color:var(--acid-ink);font-size:9px;margin-right:8px;
  vertical-align:2px}

/* An unwritten syllabus says so, rather than showing an empty accordion. */
.nosyl{border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  padding:clamp(30px,4vw,52px) 0}
.nosyl h3{margin:0 0 10px;font-size:clamp(17px,1.55vw,24px);font-weight:500;letter-spacing:-.022em}
.nosyl p{margin:0;color:var(--ink2);max-width:52ch}

/* ---- the files a course leaves you with, in the deep block */
.filelist{list-style:none;margin:clamp(22px,2.6vw,34px) 0 0;padding:0;display:grid;
  grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:1px;
  background:var(--line);border:1px solid var(--line)}
.filelist li{background:var(--deep);padding:16px 18px;display:flex;align-items:baseline;gap:12px}
.filelist .fx{font-family:var(--mono);font-size:11px;letter-spacing:.1em;color:var(--ink3);
  flex:0 0 auto}
.filelist .fn{flex:1;font-size:15px}
.filelist a{color:var(--acid-ink);text-decoration:underline;text-underline-offset:3px;
  text-decoration-thickness:1px;text-decoration-color:color-mix(in srgb,var(--acid-ink) 45%,transparent)}
@media(hover:hover){.filelist a:hover{text-decoration-color:var(--acid-ink)}}

/* The prerequisite, under the hero, in the course's own article so that it is
   there without JavaScript. */
.cprereq{margin:0 0 clamp(10px,1.2vw,16px);padding:0 max(var(--gut),env(safe-area-inset-left))}

/* ---- the rest of the catalogue */
.next{border-top:1px solid var(--line);padding:clamp(50px,6vw,90px) 0}
.nextgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
  gap:clamp(14px,1.6vw,24px);margin-top:32px}
.ncard .shot{border:1px solid var(--line);border-radius:3px;overflow:hidden;aspect-ratio:1;
  background:var(--surface)}
/* No grayscale filter. That was a photograph's treatment, and these are
   drawings: there is no colour in them to drain. */
/* No zoom on hover. NOTHING MOVES ON HOVER, since 14 Sep 2026: Jad's call,
   for the whole site but the landing page's row of courses. */
.ncard canvas{width:100%;height:100%;display:block}
.ncard h3{margin:13px 0 4px;font-size:16px;font-weight:500;letter-spacing:-.018em}