/* Real Agency member hub — shared shell
   Type: Archivo (display) + Inter (UI/body), matching www.realagency.network.
   Display headings are heavy Archivo, uppercase, on tight negative tracking;
   the scale is set for a heavy grotesque, not for the serif that came before. */

:root{
  --lime:#CCFF00;--lime-dim:#BEEE00;--lime-type:#6E8C00;
  --carbon:#0E0E0E;--grey:#6B6B66;--line:#E4E4E0;
  --paper:#FAFAF8;--raised:#FFFFFF;
  --display:'Archivo',system-ui,-apple-system,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
  --sans:'Inter',system-ui,-apple-system,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
  --dw:800;--qw:800;--stw:900;
  --stls:-.045em;--dls:-.028em;--h1ls:-.038em;
  --barh:70px;
  /* the shell runs edge to edge; these three keep it readable while it does.
     --gutter is the breathing room at the page edge, --prose is the widest a
     reading column is allowed to get, and --rail is the sidebar. */
  --gutter:clamp(22px,3.2vw,56px);
  --prose:86ch;
  --rail:236px;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--carbon);font-family:var(--sans);
  font-weight:400;font-size:16px;line-height:1.6;overflow-x:hidden}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
button{font:inherit;color:inherit}
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ---------- top bar ---------- */
/* The bar is three tracks: left, wordmark, right. The two outer tracks are
   forced to the same width (minmax(0,1fr)), so the wordmark sits on the exact
   centre line of the bar whatever the burger or the account block weigh. */
.top{position:sticky;top:0;z-index:60;background:var(--raised);border-bottom:1px solid var(--line);
  display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:center;
  gap:16px;padding:0 26px;min-height:var(--barh)}
.tleft{display:flex;align-items:center;justify-self:start;min-width:0}
.tright{display:flex;align-items:center;justify-self:end;min-width:0}
.mark{font-family:var(--sans);font-weight:800;text-transform:uppercase;letter-spacing:.16em;
  line-height:1;white-space:nowrap;font-size:.98rem;justify-self:center;text-align:center}
.mark .blk{position:relative;display:inline-block;line-height:1;margin-left:.06em}
.mark .blk>i{position:relative;z-index:1;font-style:normal;color:var(--carbon)}
.mark .blk::before{content:"";position:absolute;z-index:0;background:var(--lime);
  left:-.15em;right:.04em;top:-.02em;bottom:-.02em}

.search{position:relative;width:100%}
.search input{width:100%;font-family:var(--sans);font-size:.9rem;color:var(--carbon);
  background:var(--paper);border:1px solid var(--line);border-radius:0;padding:11px 14px 11px 38px}
.search input::placeholder{color:var(--grey)}
.search input:focus{outline:2px solid var(--lime);outline-offset:-1px;border-color:var(--carbon)}
.search>svg{position:absolute;left:13px;top:50%;transform:translateY(-50%);pointer-events:none}

/* The field sits low in the sidebar and the sidebar is pinned, so the panel
   cannot rely on page scroll to reveal its foot: it is capped to the room
   left below the field and scrolls inside itself. */
.results{position:absolute;left:0;top:calc(100% + 6px);width:min(430px,calc(100vw - 48px));
  background:var(--raised);border:1px solid var(--carbon);
  max-height:max(240px,min(60vh,calc(100vh - 500px)));overflow-y:auto;
  display:none;z-index:80;box-shadow:0 14px 34px rgba(14,14,14,.10)}
.results.on{display:block}
.results .rgrp{font-weight:700;font-size:.6rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--grey);padding:12px 15px 6px;border-top:1px solid var(--line)}
.results .rgrp:first-child{border-top:0}
.results a{display:block;padding:10px 15px;border-top:1px solid var(--line)}
.results a:hover,.results a.sel{background:var(--lime)}
.results a b{display:block;font-weight:600;font-size:.9rem;line-height:1.3}
.results a span{display:block;font-size:.74rem;color:var(--grey);margin-top:3px}
.results a:hover span,.results a.sel span{color:var(--lime-type)}
.results .none{padding:16px 15px;font-size:.86rem;color:var(--grey)}
.results mark{background:transparent;color:inherit;font-weight:800;border-bottom:2px solid var(--lime)}

.acct{display:flex;align-items:center;gap:11px;flex:0 0 auto}
.acct .av{width:32px;height:32px;background:var(--lime);color:var(--carbon);display:flex;
  align-items:center;justify-content:center;font-weight:800;font-size:.72rem;letter-spacing:.04em}
.acct b{font-weight:700;font-size:.68rem;letter-spacing:.16em;text-transform:uppercase}

.burger{display:none;background:var(--raised);border:1px solid var(--line);
  padding:9px 12px;cursor:pointer;font-weight:700;font-size:.64rem;letter-spacing:.16em;
  text-transform:uppercase;align-items:center;gap:8px}
.burger:hover{border-color:var(--carbon)}
.burger span{display:inline}
.burger i{display:block;width:14px;height:9px;border-top:2px solid var(--carbon);
  border-bottom:2px solid var(--carbon);position:relative}
.burger i::after{content:"";position:absolute;left:0;right:0;top:calc(50% - 1px);
  border-top:2px solid var(--carbon)}

/* ---------- shell ---------- */
.shell{display:grid;grid-template-columns:236px minmax(0,1fr);align-items:start;
  background:linear-gradient(to right,var(--raised) 0 235px,var(--line) 235px 236px,transparent 236px)}
/* sticky makes this a stacking context of its own, so it needs a layer above
   the page content or the search panel would be painted over by the cards. */
aside{background:var(--raised);border-right:1px solid var(--line);
  position:sticky;top:var(--barh);z-index:50;min-height:calc(100vh - var(--barh));
  padding:22px 0 30px;overflow:visible}
aside .lbl{display:block;font-weight:700;font-size:.6rem;letter-spacing:.22em;text-transform:uppercase;
  color:var(--grey);padding:0 26px;margin:0 0 12px}
/* Search lives in the sidebar, under Real Podcasts: a clear gap, a small
   heading, then the field. The dropdown overhangs the sidebar into the page,
   which is why the sidebar does not clip its overflow. */
.sidesearch{margin-top:40px;padding:0 26px}
.sidesearch .lbl{padding:0;margin:0 0 9px}

aside .foot{border-top:1px solid var(--line);margin-top:30px;padding:18px 26px 0;
  font-size:.74rem;color:var(--grey);line-height:1.55}
aside .foot b{font-weight:700;color:var(--carbon)}

/* The page fills the window. Nothing is capped at the shell; the reading
   width is held further in, by the grids and by the prose rule below, so a
   wide monitor buys more cards rather than a wider white margin. */
main{padding:clamp(28px,3.6vw,48px) var(--gutter) 90px;max-width:none;min-width:0}

/* A lesson is the one page made of nothing but paragraphs, so it is the one
   page that cannot fill the window: text set 200 characters across is
   unreadable. The column holds its measure and sits on the centre line of the
   space left beside the sidebar, rather than pinned left with the whole of a
   wide screen empty to its right. */
main:has(.les){max-width:calc(var(--prose) + var(--gutter) * 2);margin-inline:auto}

/* ---------- type roles ---------- */
.d{font-family:var(--display);font-weight:var(--dw);line-height:1.02;letter-spacing:var(--dls);
  text-transform:uppercase;margin:0}
h1.d{font-weight:900;font-size:clamp(1.72rem,3.05vw,2.42rem);line-height:.98;
  letter-spacing:var(--h1ls);margin:0 0 12px}
h2.d{font-weight:900;font-size:clamp(1.08rem,1.62vw,1.32rem);line-height:1;margin:0}
h3.d{font-size:clamp(.95rem,1.32vw,1.06rem);line-height:1.02;margin:0}
.sub{font-size:1.02rem;color:var(--grey);margin:0;max-width:62ch}
.kick{display:block;font-weight:700;font-size:.65rem;letter-spacing:.22em;text-transform:uppercase;
  color:var(--grey);margin:0 0 12px}
.rowhead{display:flex;align-items:baseline;justify-content:space-between;gap:20px;
  border-bottom:1px solid var(--line);padding-bottom:12px;margin:0 0 20px}
.rowhead .more{font-weight:700;font-size:.66rem;letter-spacing:.16em;text-transform:uppercase;
  border-bottom:2px solid var(--carbon);padding-bottom:3px;white-space:nowrap}
.rowhead .more:hover{color:var(--grey);border-bottom-color:var(--grey)}
section{margin:clamp(38px,4.4vw,62px) 0 0}
.lead{font-size:.95rem;color:var(--grey);max-width:70ch;margin:0 0 4px}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;font-family:var(--sans);
  font-weight:700;font-size:.68rem;letter-spacing:.16em;text-transform:uppercase;
  padding:12px 20px;border:2px solid var(--lime);background:var(--lime);color:var(--carbon);cursor:pointer}
.btn:hover{background:var(--lime-dim);border-color:var(--lime-dim)}
.btn.ghost{background:transparent;border-color:var(--carbon);color:var(--carbon)}
.btn.ghost:hover{background:var(--carbon);color:#fff}

/* ---------- cards ---------- */
/* Every card grid counts its own columns from the room it is given. A card has
   a smallest comfortable width and the row takes as many as fit, so a wider
   window adds cards instead of stretching four of them into letterboxes. The
   min() keeps a card from overflowing a window narrower than the card itself. */
.cards{display:grid;gap:18px}
.c2{grid-template-columns:repeat(auto-fill,minmax(min(420px,100%),1fr))}
.c3{grid-template-columns:repeat(auto-fill,minmax(min(290px,100%),1fr))}
.c4{grid-template-columns:repeat(auto-fill,minmax(min(216px,100%),1fr))}
.card{background:var(--raised);border:1px solid var(--line);display:flex;flex-direction:column}
.card:hover{border-color:var(--carbon)}
.thumb{aspect-ratio:16/9;background:linear-gradient(135deg,#F2F2EE,#E4E4E0);position:relative;
  display:flex;align-items:flex-end;padding:12px}
.thumb .dur{background:var(--carbon);color:#fff;font-size:.65rem;font-weight:600;
  letter-spacing:.04em;padding:3px 7px}
.thumb .flag{position:absolute;top:12px;left:12px;background:var(--lime);color:var(--carbon);
  font-size:.6rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase;padding:4px 8px}
.thumb .live{position:absolute;top:12px;left:12px;background:var(--lime);color:var(--carbon);
  font-size:.6rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase;padding:4px 8px;
  display:flex;align-items:center;gap:6px}
.thumb .live::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--carbon)}
.thumb .play{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  width:44px;height:44px;background:rgba(255,255,255,.94);border:1.5px solid var(--carbon);
  display:flex;align-items:center;justify-content:center}
.thumb .play::after{content:"";border-left:11px solid var(--carbon);border-top:7px solid transparent;
  border-bottom:7px solid transparent;margin-left:3px}
.card .body{padding:15px 16px 17px;flex:1;display:flex;flex-direction:column}
.card .tag{display:block;font-weight:700;font-size:.61rem;letter-spacing:.18em;text-transform:uppercase;
  color:var(--grey);margin:0 0 8px}
.card h3{font-family:var(--display);font-weight:var(--dw);letter-spacing:-.018em;
  font-size:.95rem;line-height:1.26;margin:0 0 10px}
.card p{margin:0 0 12px;font-size:.84rem;color:var(--grey);line-height:1.5}
.card .meta{margin-top:auto;font-size:.78rem;color:var(--grey);display:flex;
  justify-content:space-between;gap:10px;align-items:baseline}
.bar{height:4px;background:var(--line);margin-top:11px;position:relative}
.bar i{position:absolute;left:0;top:0;bottom:0;background:var(--lime);display:block}

/* wide featured card */
.wide{display:grid;grid-template-columns:minmax(0,clamp(300px,34%,500px)) minmax(0,1fr);
  background:var(--raised);border:1px solid var(--line)}
.wide:hover{border-color:var(--carbon)}
.wide .thumb{aspect-ratio:auto;min-height:300px;height:100%}
.wide .body{padding:clamp(22px,2.6vw,38px);display:flex;flex-direction:column;justify-content:center}
.wide .body h3{font-family:var(--display);font-weight:900;letter-spacing:var(--h1ls);
  text-transform:uppercase;font-size:clamp(1.15rem,1.95vw,1.6rem);line-height:1;margin:0 0 12px}
.wide .body p{font-size:.95rem;color:var(--grey);margin:0 0 20px;max-width:58ch}
.wide .facts{display:flex;flex-wrap:wrap;gap:10px 26px;margin:0 0 22px;
  border-top:1px solid var(--line);padding-top:18px}
.wide .facts>span b{display:block;font-weight:800;font-size:1.15rem;letter-spacing:-.02em}
.wide .facts>span span{display:block;font-size:.68rem;font-weight:700;letter-spacing:.16em;
  text-transform:uppercase;color:var(--grey);margin-top:2px}
.wide .body .btn{align-self:flex-start}
.wide .body .tag{display:block;font-weight:700;font-size:.61rem;letter-spacing:.18em;
  text-transform:uppercase;color:var(--grey);margin:0 0 10px}

/* ---------- rows (events, resources, lessons) ---------- */
.rows{border-top:1px solid var(--line)}
.ev{display:grid;grid-template-columns:120px minmax(0,1fr) auto;gap:22px;align-items:center;
  background:var(--raised);border:1px solid var(--line);border-top:0;padding:18px 20px}
.ev:hover{background:#FCFCFA}
.ev .when{font-family:var(--display);font-weight:900;letter-spacing:var(--dls);
  text-transform:uppercase;font-size:.98rem;line-height:1.05}
.ev .when span{display:block;font-family:var(--sans);font-weight:600;font-size:.72rem;
  letter-spacing:.14em;color:var(--grey);margin-top:5px}
.ev b{display:block;font-weight:700;font-size:1rem;margin-bottom:3px}
.ev p{margin:0;font-size:.86rem;color:var(--grey)}
.ev .right{display:flex;gap:12px;align-items:center;flex-wrap:wrap;justify-content:flex-end}
.ev .place{font-weight:700;font-size:.64rem;letter-spacing:.16em;text-transform:uppercase;
  border:1.5px solid var(--carbon);padding:6px 11px;white-space:nowrap}
.ev .place.lime{background:var(--lime);border-color:var(--lime)}

.res{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:20px;align-items:center;
  background:var(--raised);border:1px solid var(--line);border-top:0;padding:16px 20px;
  transition:background .12s linear,border-color .12s linear}
.res:hover,.res:focus-visible{background:var(--lime);border-color:var(--lime);outline:0}
.res:hover p,.res:focus-visible p,.res:hover .fmt,.res:focus-visible .fmt{color:var(--lime-type)}
.res:focus-visible{box-shadow:0 0 0 2px var(--carbon)}
.res b{display:block;font-weight:700;font-size:.98rem;margin-bottom:3px}
.res p{margin:0;font-size:.84rem;color:var(--grey);transition:color .12s linear}
.res .fmt{font-weight:700;font-size:.63rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--grey);white-space:nowrap}

/* ---------- filter chips ---------- */
.chips{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 26px}
.chip{font-family:var(--sans);font-weight:700;font-size:.68rem;letter-spacing:.14em;
  text-transform:uppercase;padding:10px 16px;border:1.5px solid var(--line);
  background:var(--raised);color:var(--carbon);cursor:pointer;display:inline-flex;gap:8px;align-items:baseline}
.chip:hover{border-color:var(--carbon)}
.chip em{font-style:normal;color:var(--grey);font-size:.62rem}
.chip[aria-pressed="true"]{background:var(--lime);border-color:var(--lime);font-weight:800}
.chip[aria-pressed="true"] em{color:var(--lime-type)}
.emptynote{display:none;padding:34px 20px;background:var(--raised);border:1px solid var(--line);
  color:var(--grey);font-size:.9rem}
.emptynote.on{display:block}

/* ---------- filter bar: one quiet line ----------
   A short list of choices stays a row of chips. A long one becomes a plain
   dropdown, which is one line whatever the length, works with a keyboard and
   opens as the native picker on a phone. */
.filterbar{display:flex;flex-wrap:wrap;align-items:center;gap:10px 16px;margin:0 0 26px}
.filterbar .chips{margin:0}
.fsel{display:inline-flex;align-items:center;gap:9px;max-width:100%}
.fsel>span{font-family:var(--sans);font-weight:700;font-size:.6rem;letter-spacing:.18em;
  text-transform:uppercase;color:var(--grey);white-space:nowrap}
/* ---------- the dropdown, one treatment for all of them ----------
   These stay real <select> elements: they work with a keyboard, they open the
   phone's own picker and they need no script. CSS reaches the closed control
   only; the open list is drawn by the operating system and is left alone.
   Quiet at rest. Lime on hover, lime on focus, lime filled when a filter is on,
   so a member can see at a glance that something is filtered. */
.fsel select,.results .rfilter select{
  font-family:var(--sans);font-weight:700;font-size:.68rem;letter-spacing:.06em;
  color:var(--carbon);background-color:var(--raised);
  border:1.5px solid var(--line);border-radius:0;cursor:pointer;
  padding:10px 36px 10px 15px;max-width:100%;line-height:1.2;
  -webkit-appearance:none;-moz-appearance:none;appearance:none;
  transition:border-color .12s linear,background-color .12s linear,box-shadow .12s linear;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%236B6B66' stroke-width='1.6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 14px center;background-size:10px 6px}
/* hover: the edge and the chevron pick up the brand green, nothing else moves */
.fsel select:hover,.results .rfilter select:hover{
  border-color:var(--lime);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%236E8C00' stroke-width='1.6'/%3E%3C/svg%3E")}
/* keyboard focus: a carbon edge for contrast inside a green halo */
.fsel select:focus-visible,.results .rfilter select:focus-visible{
  outline:0;border-color:var(--carbon);box-shadow:0 0 0 3px var(--lime);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%230E0E0E' stroke-width='1.6'/%3E%3C/svg%3E")}
/* a filter is on: the whole control fills lime, the same as a pressed chip */
.fsel select[data-on="yes"],.results .rfilter select[data-on="yes"]{
  background-color:var(--lime);border-color:var(--lime);font-weight:800;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%230E0E0E' stroke-width='1.6'/%3E%3C/svg%3E")}
.fsel select[data-on="yes"]:hover,.results .rfilter select[data-on="yes"]:hover{
  border-color:var(--carbon)}
.fclear{font-family:var(--sans);font-weight:700;font-size:.6rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--grey);background:none;border:0;padding:6px 2px;
  cursor:pointer;text-decoration:underline;text-underline-offset:4px}
.fclear:hover,.fclear:focus-visible{color:var(--carbon);outline:0}
.fclear:focus-visible{box-shadow:0 0 0 2px var(--carbon)}
.fclear[hidden]{display:none}
@media(max-width:560px){
  .fsel{width:100%}
  .fsel select{flex:1 1 auto;min-width:0}
}

/* ---------- subject tiles ---------- */
.subs{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(200px,100%),1fr));gap:1px;
  background:var(--line);border:1px solid var(--line)}
/* the box face is never a bare white face: it carries a soft lime tint at rest
   and deepens on hover and on keyboard focus, before the click */
.sub-t{--g2:var(--lime);background:#F6FFE0;color:var(--carbon);
  padding:22px 18px 20px;display:flex;flex-direction:column;gap:12px;
  transition:background .12s linear}
.sub-t:hover,.sub-t:focus-visible{background:#E4FA9C;--g2:#FFFFFF;outline:0}
.sub-t:focus-visible{box-shadow:inset 0 0 0 2px var(--carbon)}
.sub-t:hover p,.sub-t:focus-visible p{color:var(--lime-type)}
.sub-t .ico{width:40px;height:40px;display:block}
.sub-t .ico svg{display:block;width:100%;height:100%;overflow:visible}
.sub-t b{font-family:var(--display);font-weight:800;letter-spacing:var(--dls);
  text-transform:uppercase;font-size:.98rem;line-height:1.06}
.sub-t p{margin:-6px 0 0;font-size:.8rem;color:var(--grey);line-height:1.45}
.cnt{align-self:flex-start;background:var(--lime);color:var(--carbon);font-weight:800;
  font-size:.66rem;letter-spacing:.1em;padding:4px 9px;margin-top:auto}

/* ---------- people ---------- */
.people{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(230px,100%),1fr));gap:18px}
.person{background:var(--raised);border:1px solid var(--line);padding:0 0 20px}
.person .por{aspect-ratio:4/5;background:linear-gradient(135deg,#F2F2EE,#E4E4E0);
  display:flex;align-items:center;justify-content:center;margin:0 0 16px}
.person .por span{font-family:var(--display);font-weight:900;font-size:2rem;color:#B9B9B2;letter-spacing:.02em}
.person b{display:block;font-family:var(--display);font-weight:800;letter-spacing:var(--dls);
  text-transform:uppercase;font-size:1.02rem;line-height:1.08;padding:0 18px;margin:0 0 6px}
.person .role{display:block;font-weight:700;font-size:.63rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--grey);padding:0 18px}
.person p{margin:10px 0 0;padding:0 18px;font-size:.84rem;color:var(--grey);line-height:1.5}

.members{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));
  background:var(--raised);border:1px solid var(--line);border-right:0;border-bottom:0}
.member{background:var(--raised);padding:16px 18px;display:flex;gap:12px;align-items:center;
  border-right:1px solid var(--line);border-bottom:1px solid var(--line)}
.member .av{width:38px;height:38px;background:var(--paper);border:1px solid var(--line);
  display:flex;align-items:center;justify-content:center;font-weight:800;font-size:.72rem;flex:0 0 auto}
.member b{display:block;font-weight:700;font-size:.88rem;line-height:1.25}
.member span{display:block;font-size:.74rem;color:var(--grey)}

/* ---------- numbered path ---------- */
.path{border-top:1px solid var(--line)}
.step{display:grid;grid-template-columns:64px minmax(0,1fr);gap:20px;background:var(--raised);
  border:1px solid var(--line);border-top:0;padding:20px}
.step .n{font-family:var(--display);font-weight:900;font-size:1.7rem;line-height:1;
  letter-spacing:var(--dls);color:var(--grey)}
.step b{display:block;font-weight:700;font-size:1rem;margin-bottom:5px}
.step p{margin:0;font-size:.88rem;color:var(--grey);max-width:62ch}

/* ---------- prose blocks ---------- */
.panel{background:var(--raised);border:1px solid var(--line);padding:clamp(24px,3vw,40px)}
.panel p{font-size:.98rem;color:var(--carbon);max-width:66ch;margin:0}
.panel p+p{margin-top:14px}
.panel .grey{color:var(--grey)}
.two{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(440px,100%),1fr));gap:18px}

.pq{background:var(--raised);border:1px solid var(--line);border-top:3px solid var(--lime);
  padding:clamp(30px,4vw,56px) clamp(24px,3.6vw,52px)}
.pq blockquote{margin:0;font-family:var(--display);font-weight:var(--qw);
  font-size:clamp(1.18rem,2.4vw,1.85rem);line-height:1.08;letter-spacing:var(--h1ls);max-width:26ch}
.pq .by{margin:24px 0 0;font-weight:700;font-size:.68rem;letter-spacing:.2em;
  text-transform:uppercase;color:var(--grey)}

/* ---------- calendar ---------- */
.cal{background:var(--raised);border:1px solid var(--line)}
.calhead{display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:18px 20px;border-bottom:1px solid var(--line)}
.calhead h3{font-family:var(--display);font-weight:900;letter-spacing:var(--dls);
  text-transform:uppercase;font-size:1.14rem;margin:0}
.calnav{display:flex;gap:8px}
.calnav span{border:1.5px solid var(--line);background:var(--paper);padding:7px 13px;
  font-weight:700;font-size:.68rem;letter-spacing:.1em;color:var(--grey)}
.calgrid{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:1px;background:var(--line)}
.calgrid .dow{background:var(--paper);padding:9px 10px;font-weight:700;font-size:.6rem;
  letter-spacing:.16em;text-transform:uppercase;color:var(--grey);text-align:center}
.calgrid .day{background:var(--raised);min-height:96px;padding:8px 9px;font-size:.78rem}
.calgrid .day.out{background:var(--paper);color:#BFBFB9}
.calgrid .day .n{font-weight:700;font-size:.76rem;display:block;margin-bottom:6px}
.calgrid .day.today .n{background:var(--carbon);color:#fff;display:inline-block;
  padding:2px 6px;margin-bottom:6px}
.calgrid .day a{display:block;background:var(--lime);color:var(--carbon);font-weight:700;
  font-size:.66rem;line-height:1.25;padding:4px 6px;margin-bottom:4px}
.calgrid .day a.q{background:var(--carbon);color:#fff}
.callegend{display:flex;flex-wrap:wrap;gap:8px 22px;padding:14px 20px;border-top:1px solid var(--line);
  font-size:.76rem;color:var(--grey)}
.callegend span{display:flex;align-items:center;gap:8px}
.callegend i{width:14px;height:14px;background:var(--lime);display:block}
.callegend i.q{background:var(--carbon)}

/* ---------- lesson list ---------- */
.lesson{display:grid;grid-template-columns:46px minmax(0,1fr) auto auto;gap:18px;align-items:center;
  background:var(--raised);border:1px solid var(--line);border-top:0;padding:15px 20px}
.lesson:hover{background:#FCFCFA}
.lesson .n{font-weight:800;font-size:.82rem;color:var(--grey)}
.lesson b{display:block;font-weight:600;font-size:.96rem}
.lesson p{margin:2px 0 0;font-size:.8rem;color:var(--grey)}
.lesson .rt{font-size:.8rem;color:var(--grey);white-space:nowrap}
.lesson .st{font-weight:700;font-size:.61rem;letter-spacing:.14em;text-transform:uppercase;
  padding:5px 9px;border:1.5px solid var(--line);color:var(--grey);white-space:nowrap}
.lesson .st.done{background:var(--lime);border-color:var(--lime);color:var(--carbon)}
.lesson .st.now{border-color:var(--carbon);color:var(--carbon)}

.progpanel{background:var(--raised);border:1px solid var(--line);padding:22px;
  display:grid;grid-template-columns:minmax(0,1fr) auto;gap:20px;align-items:center}
.progpanel .pct{font-family:var(--display);font-weight:900;font-size:2rem;
  letter-spacing:var(--dls);line-height:1}
.progpanel .bar{margin-top:14px;height:6px}

/* ---------- entry cards ---------- */
.entry{background:var(--raised);border:1px solid var(--line);padding:24px;display:flex;
  flex-direction:column;gap:10px}
.entry:hover{border-color:var(--carbon)}
.entry b{font-family:var(--display);font-weight:800;letter-spacing:var(--dls);
  text-transform:uppercase;font-size:1.02rem;line-height:1.06}
.entry p{margin:0;font-size:.86rem;color:var(--grey);line-height:1.5}
.entry .go{margin-top:auto;padding-top:12px;font-weight:700;font-size:.64rem;
  letter-spacing:.16em;text-transform:uppercase}

/* breadcrumb */
.crumb{font-weight:700;font-size:.64rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--grey);margin:0 0 14px}
.crumb a:hover{color:var(--carbon)}

/* ---------- responsive: sidebar becomes a top drawer under 900px ---------- */
@media (max-width:1080px){
  .wide{grid-template-columns:1fr}
  .wide .thumb{aspect-ratio:16/9}
}
@media (max-width:900px){
  .burger{display:inline-flex}
  .top{gap:12px;padding:0 16px}
  .acct b{display:none}
  .sidesearch{margin-top:4px;padding:14px 20px 18px;border-bottom:1px solid var(--line)}
  .results{width:100%;max-height:60vh}
  .shell{grid-template-columns:1fr;background:none}
  /* The drawer is pinned under the bar, not left in the page flow.
     In the flow it opened where the sidebar sits in the document, which is the
     very top of it: a member who had scrolled down pressed Menu and the drawer
     opened nearly two thousand pixels above the screen, so nothing appeared to
     happen. Fixed under the bar it opens where it was asked for, at any scroll
     position, and scrolls inside itself when it is taller than the room left. */
  aside{position:fixed;top:var(--barh);left:0;right:0;z-index:55;
    height:auto;min-height:0;max-height:calc(100vh - var(--barh));overflow-y:auto;
    border-right:0;border-bottom:1px solid var(--line);
    box-shadow:0 18px 34px rgba(14,14,14,.14);padding:0;display:none}
  aside.open{display:block}
  /* the page behind the open drawer holds still, so a swipe moves the drawer.
     Both rules are inside this media block on purpose: holding the page still
     takes the scrolling away from the page element, and anything sticky then
     has nothing to stick to. Above this width the sidebar is on the page in
     its own right and the drawer does not exist, so a lock left over from a
     narrow window must not reach it. */
  html.dlock{overflow:hidden}
  /* the bar loses its stickiness with the page held still, and would ride off
     the top of the screen taking the Menu button with it. Fixed outright while
     the drawer is open, the button that opened it is still there to close it. */
  html.dlock .top{position:fixed;top:0;left:0;right:0}
  aside .lbl{padding:16px 20px 0;margin:0}
  aside nav{display:flex;flex-direction:column;padding:6px 0}
  aside .foot{margin-top:0;padding:16px 20px 20px}
  .ev,.res{grid-template-columns:1fr;gap:12px}
  .ev .right{justify-content:flex-start}
  .lesson{grid-template-columns:34px minmax(0,1fr);gap:12px}
  .lesson .rt,.lesson .st{grid-column:2;justify-self:start}
  .progpanel{grid-template-columns:1fr}
  .calgrid .day{min-height:72px;font-size:.7rem}
}
@media (max-width:560px){
  .burger span{display:none}
  .burger{padding:9px 10px}
  .top{padding:0 12px}
  .calgrid .day{min-height:58px;padding:5px}
  .calgrid .day a{font-size:.55rem}
}
/* ---------- wide screens: lists take two columns ----------
   A row is a title on the left and its meta on the right. Stacked one under
   another on a 2,500 pixel screen the two ends end up a foot apart and the row
   stops reading as one thing. Past this width the list runs in two columns and
   each row goes back to a sensible length. The rows lose their shared stacked
   rule and become separate cards, because a single hairline cannot run down
   two columns at once. */
@media (min-width:1600px){
  .rows,.grp{display:grid;grid-template-columns:1fr 1fr;
    column-gap:var(--gutter);row-gap:8px;border-top:0}
  .rows>.ev,.rows>.res,.grp>.itm{border-top:1px solid var(--line)}
  .rows>.srow{margin:0}
}

@media (prefers-reduced-motion:reduce){*{transition:none!important}}

/* ---------- video cards (podcasts, videos, masterminds, home band) ----------
   One card, one control. The thumbnail is a picture, not a button; the Watch
   button under the title is the only thing that takes focus, and it carries a
   patch stretched over the whole card, so a press anywhere on the card opens
   the video and the card still has exactly one tab stop. Enter and Space come
   free with the button.

   Every card is the same height: the picture is a fixed shape, the title
   always occupies two lines whether it fills them or not, and the button under
   it is a fixed size. A title too long for two lines is cut with an ellipsis;
   the whole title stays in the page for a screen reader and shows as a
   tooltip. */
.pod .thumb{display:block;width:100%;background:linear-gradient(135deg,#F2F2EE,#E4E4E0);
  position:relative;aspect-ratio:16/9;overflow:hidden;padding:0}
.pod .thumb img{width:100%;height:100%;object-fit:cover}
.pod .thumb .dur{position:absolute;right:10px;bottom:10px}
.pod .shot{position:relative;display:block}
.card.pod{position:relative;transition:background .12s linear,border-color .12s linear}
/* the body is a plain block, not a flex column: a flex child cannot be
   clamped to two lines with an ellipsis, and the card needs no stretching
   because every part of it is already a fixed height */
.card.pod .body{display:block;padding:14px 16px 16px}
.card.pod .watch{margin-top:0}
.card.pod h3{margin:0 0 12px;line-height:1.26;height:2.52em;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
  line-clamp:2;overflow:hidden;overflow-wrap:anywhere;word-break:normal}
/* the Watch button on a card: the one control that opens the video */
.watch{display:inline-flex;align-items:center;justify-content:center;align-self:flex-start;
  margin-top:auto;font-family:var(--sans);font-weight:800;font-size:.65rem;letter-spacing:.16em;
  text-transform:uppercase;padding:10px 18px;border:2px solid var(--lime);
  background:var(--lime);color:var(--carbon);cursor:pointer;white-space:nowrap;
  transition:background .12s linear,border-color .12s linear,color .12s linear}
.watch .hit{position:absolute;inset:0;z-index:1}
.watch:focus-visible{outline:0}
/* the whole card answers in lime, on hover and on keyboard focus alike */
.card.pod:hover,.card.pod:focus-within{background:var(--lime);border-color:var(--lime)}
.card.pod:focus-within{box-shadow:0 0 0 2px var(--carbon)}
.card.pod:hover .watch,.card.pod:focus-within .watch{
  background:var(--carbon);border-color:var(--carbon);color:var(--lime)}
@media (max-width:560px){.pod .watch{padding:12px 22px;font-size:.7rem}}

/* The video as a page: a full overlay over the view, the player in it, and a
   Close button. Built and filled by assets/video.js only when Watch is
   pressed, and emptied again on close. */
html.vlock{overflow:hidden}
.vover{position:fixed;inset:0;z-index:400;background:rgba(14,14,14,.94);
  display:flex;align-items:center;justify-content:center;padding:clamp(8px,2.4vw,34px)}
.vover[hidden]{display:none}
.vbox{width:min(1240px,100%);max-height:100%;display:flex;flex-direction:column;
  background:var(--carbon);border:1px solid var(--carbon)}
.vbar{display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:12px 14px;background:var(--carbon);color:#fff}
.vbar .vtitle{font-weight:700;font-size:.92rem;line-height:1.3;min-width:0;
  overflow-wrap:break-word}
.vclose{flex:0 0 auto;font-family:var(--sans);font-weight:800;font-size:.64rem;
  letter-spacing:.16em;text-transform:uppercase;padding:10px 16px;cursor:pointer;
  background:var(--lime);border:2px solid var(--lime);color:var(--carbon)}
.vclose:hover{background:var(--lime-dim);border-color:var(--lime-dim)}
.vclose:focus-visible{outline:0;box-shadow:0 0 0 2px #fff}
.vstage{flex:1 1 auto;min-height:0;aspect-ratio:16/9;background:#000}
.vstage iframe{width:100%;height:100%;border:0;display:block}
@media (max-width:700px){
  .vover{padding:0}
  .vbox{width:100%;height:100%;justify-content:center}
  .vbar .vtitle{font-size:.82rem}
}

.modal{position:fixed;inset:0;z-index:200;background:rgba(14,14,14,.88);
  display:none;align-items:center;justify-content:center;padding:clamp(14px,3vw,36px)}
.modal.on{display:flex}
.modal .box{width:min(980px,100%);background:var(--raised);border:1px solid var(--carbon)}
.modal .mhead{display:flex;align-items:center;justify-content:space-between;gap:18px;
  padding:13px 16px;border-bottom:1px solid var(--line)}
.modal .mhead b{font-weight:700;font-size:.9rem;line-height:1.3}
.modal .mclose{background:var(--lime);border:2px solid var(--lime);cursor:pointer;
  font-weight:800;font-size:.64rem;letter-spacing:.16em;text-transform:uppercase;
  padding:9px 15px;flex:0 0 auto}
.modal .mclose:hover{background:var(--lime-dim);border-color:var(--lime-dim)}
.modal .frame{aspect-ratio:16/9;background:var(--carbon)}
.modal .frame iframe{width:100%;height:100%;border:0;display:block}
.modal .mfoot{padding:12px 16px;border-top:1px solid var(--line)}
.modal .mfoot a{font-weight:700;font-size:.64rem;letter-spacing:.16em;text-transform:uppercase;
  border-bottom:2px solid var(--lime);padding-bottom:2px}

/* ---------- the sidebar ----------
   Seven links and a search field. What holds them apart is space, not rules:
   the six hairlines that used to run between the sections have gone, and the
   one line left is the one that means something, the break between Home and
   the sections it leads to.

   The eye reads down the section words, not down six copies of the word Real,
   so Real is set light and grey and the word that changes is set heavy and
   black. Each of those words keeps its lime, but at rest it is a fine lime
   rule sitting under the word rather than a filled block: six bright blocks
   stacked up is a wall of colour, and the colour then says nothing. The block
   fills in when you point at a section and stays filled on the one you are
   on, so the lime means here rather than decoration. */
aside nav.secnav{display:block;padding:2px 0 0}
.secnav a.navlink{position:relative;display:block;padding:12px 26px;border-left:0;
  font-family:var(--sans);font-size:.95rem;font-weight:600;letter-spacing:-.012em;
  line-height:1.25;color:var(--carbon);border-bottom:0}
/* the mark for the page you are on: a short carbon rule at the left edge,
   inset top and bottom so it reads as a mark rather than a border */
.secnav a.navlink::before{content:"";position:absolute;left:0;top:9px;bottom:9px;width:2px;
  background:var(--carbon);opacity:0;transition:opacity .14s linear}
.secnav a.navlink[aria-current]::before{opacity:1}
/* both :focus and :focus-visible: a nav link is only ever focused by keyboard
   in practice, because a click on one leaves the page, so the ring is safe to
   show for either and a keyboard user is never left guessing where they are */
.secnav a.navlink:focus,
.secnav a.navlink:focus-visible{outline:2px solid var(--carbon);outline-offset:-2px}

.secnav a.navlink b{font-weight:500;color:var(--grey);transition:color .14s linear}
.secnav a.navlink:hover b,
.secnav a.navlink:focus b,
.secnav a.navlink:focus-visible b,
.secnav a.navlink[aria-current] b{color:var(--carbon)}

/* the lime grows from a rule to a block; drawing it as a background image is
   what lets it be animated between the two heights */
.secnav a.navlink span{font-weight:700;color:var(--carbon);padding:1px 6px 2px;
  background-image:linear-gradient(var(--lime),var(--lime));
  background-repeat:no-repeat;background-position:0 100%;background-size:100% .3em;
  transition:background-size .14s ease;
  box-decoration-break:clone;-webkit-box-decoration-break:clone}
.secnav a.navlink:hover span,
.secnav a.navlink:focus span,
.secnav a.navlink:focus-visible span,
.secnav a.navlink[aria-current] span{background-size:100% 100%}
.secnav a.navlink[aria-current] span{font-weight:800}

/* Home has no section word to carry the lime, so it is marked by weight and by
   the same carbon rule, and it is the only item with a line under it */
.secnav a.navlink.home{font-size:.95rem;font-weight:500;letter-spacing:-.012em;
  text-transform:none;color:var(--grey);padding:12px 26px;margin:0 0 16px;
  position:relative;transition:color .14s linear}
.secnav a.navlink.home::after{content:"";position:absolute;left:26px;right:26px;bottom:-7px;
  border-bottom:1px solid var(--line)}
.secnav a.navlink.home:hover,
.secnav a.navlink.home:focus,
.secnav a.navlink.home:focus-visible{color:var(--carbon)}
.secnav a.navlink.home[aria-current]{background:none;color:var(--carbon);font-weight:700}
/* In the drawer the seven links are a list on a panel rather than a rail
   beside the page, so the hairlines come back: without the page behind them
   the rows need an edge to sit on. Everything else about them is unchanged. */
@media (max-width:900px){
  .secnav a.navlink{padding:13px 20px}
  .secnav a.navlink+.navlink{border-top:1px solid var(--line)}
  .secnav a.navlink::before{top:0;bottom:0}
  .secnav a.navlink.home{margin:0}
  .secnav a.navlink.home::after{display:none}
}

/* ---------- long-form lesson prose ---------- */
.lesbar{background:var(--raised);border:1px solid var(--line);padding:18px 22px;
  display:flex;flex-wrap:wrap;gap:10px 26px;align-items:baseline;margin:0 0 30px}
.lesbar b{font-weight:700;font-size:.66rem;letter-spacing:.18em;text-transform:uppercase;color:var(--grey)}
.lesbar span{font-size:.9rem;color:var(--carbon)}
.toc{background:var(--raised);border:1px solid var(--line);padding:22px 24px;margin:0 0 34px}
.toc h2{font-family:var(--display);font-weight:900;letter-spacing:var(--dls);
  text-transform:uppercase;font-size:1.04rem;margin:0 0 14px}
.toc ol{margin:0;padding:0;list-style:none;columns:2;column-gap:34px}
.toc li{break-inside:avoid;margin:0 0 7px;font-size:.9rem;display:flex;gap:10px}
.toc li i{font-style:normal;font-weight:800;font-size:.7rem;letter-spacing:.06em;
  color:var(--grey);min-width:22px;padding-top:3px}
.toc a{border-bottom:1px solid var(--line)}
.toc a:hover{border-bottom-color:var(--carbon)}
@media (max-width:760px){.toc ol{columns:1}}

.les{background:var(--raised);border:1px solid var(--line);padding:30px clamp(20px,3vw,38px);
  margin:0 0 22px;scroll-margin-top:calc(var(--barh) + 16px)}
.les>.hd{display:flex;gap:16px;align-items:baseline;border-bottom:1px solid var(--line);
  padding-bottom:16px;margin:0 0 20px}
.les>.hd .n{font-family:var(--display);font-weight:900;font-size:1.28rem;
  color:var(--grey);min-width:44px;line-height:1}
.les>.hd h2{font-family:var(--display);font-weight:900;letter-spacing:var(--h1ls);
  text-transform:uppercase;font-size:clamp(1.02rem,1.6vw,1.28rem);line-height:1.02;margin:0}
.les>.hd .lede{display:block;font-family:var(--sans);font-weight:500;font-size:.86rem;
  letter-spacing:0;color:var(--grey);margin-top:6px}
.les p{margin:0 0 14px;font-size:.98rem;line-height:1.62;max-width:74ch}
.les h3{font-family:var(--sans);font-weight:800;font-size:.68rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--grey);margin:24px 0 12px}
.les ul,.les ol{margin:0 0 16px;padding-left:0;list-style:none;max-width:74ch}
.les ul li{position:relative;padding-left:22px;margin:0 0 8px;font-size:.96rem;line-height:1.55}
.les ul li::before{content:"";position:absolute;left:2px;top:.6em;width:7px;height:7px;
  background:var(--lime);border:1px solid var(--carbon)}
.les ol{counter-reset:les}
.les ol li{position:relative;padding-left:30px;margin:0 0 8px;font-size:.96rem;line-height:1.55;
  counter-increment:les}
.les ol li::before{content:counter(les);position:absolute;left:0;top:0;
  font-weight:800;font-size:.72rem;letter-spacing:.04em;color:var(--grey);padding-top:3px}
.les blockquote{margin:20px 0;padding:16px 20px;background:var(--paper);
  border-left:3px solid var(--lime);font-size:1rem;line-height:1.55;max-width:74ch}
.les blockquote p:last-child{margin:0}
.les .backtop{display:inline-block;margin-top:6px;font-weight:700;font-size:.62rem;
  letter-spacing:.16em;text-transform:uppercase;color:var(--grey)}
.les .backtop:hover{color:var(--carbon)}

/* ---------- letter blocks (content system course) ---------- */
.letterhd{display:flex;gap:18px;align-items:center;margin:0 0 16px}
.letterhd .big{font-family:var(--display);font-weight:900;font-size:2.1rem;line-height:1;letter-spacing:-.04em;
  background:var(--lime);color:var(--carbon);width:64px;height:64px;flex:none;
  display:flex;align-items:center;justify-content:center;border:1.5px solid var(--carbon)}
.ideas{list-style:none;margin:0;padding:0;columns:2;column-gap:30px}
.ideas li{break-inside:avoid;position:relative;padding-left:20px;margin:0 0 7px;
  font-size:.92rem;line-height:1.5}
.ideas li::before{content:"";position:absolute;left:2px;top:.55em;width:6px;height:6px;
  background:var(--lime);border:1px solid var(--carbon)}
@media (max-width:760px){.ideas{columns:1}}

/* ---------- request form ---------- */
.notice{background:var(--paper);border:1px solid var(--carbon);border-left:4px solid var(--lime);
  padding:18px 22px;margin:0 0 30px;max-width:74ch}
.notice b{display:block;font-weight:800;font-size:.68rem;letter-spacing:.16em;
  text-transform:uppercase;margin:0 0 8px}
.notice p{margin:0 0 8px;font-size:.95rem;line-height:1.6}
.notice p:last-child{margin:0}
.form{background:var(--raised);border:1px solid var(--line);padding:clamp(22px,3vw,34px)}
.form fieldset{border:0;padding:0;margin:0 0 28px}
.form legend{font-weight:800;font-size:.68rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--grey);padding:0;margin:0 0 14px}
.form .founders{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:12px}
.form .founders label{display:flex;gap:12px;align-items:flex-start;border:1px solid var(--line);
  padding:16px;cursor:pointer;background:var(--paper)}
.form .founders label:hover{border-color:var(--carbon)}
.form .founders input{margin-top:3px;accent-color:var(--carbon);flex:none}
.form .founders b{display:block;font-weight:700;font-size:.98rem}
.form .founders span{display:block;font-size:.8rem;color:var(--grey);margin-top:3px;line-height:1.45}
.form label.fld{display:block;margin:0 0 16px}
.form label.fld>span{display:block;font-weight:700;font-size:.66rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--grey);margin:0 0 7px}
.form input[type=text],.form input[type=email],.form select,.form textarea{
  width:100%;font-family:var(--sans);font-size:.95rem;color:var(--carbon);background:var(--paper);
  border:1px solid var(--line);padding:11px 13px}
.form input:focus,.form select:focus,.form textarea:focus{outline:2px solid var(--lime);
  outline-offset:-1px;border-color:var(--carbon)}
.form textarea{min-height:110px;line-height:1.55;resize:vertical}
.form .times{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:10px}
.form .times label{display:flex;gap:10px;align-items:center;border:1px solid var(--line);
  padding:12px 14px;cursor:pointer;background:var(--paper);font-size:.9rem}
.form .times label:hover{border-color:var(--carbon)}
.form .times input{accent-color:var(--carbon);flex:none}
.form .send{display:flex;flex-wrap:wrap;gap:16px;align-items:center;
  border-top:1px solid var(--line);padding-top:22px}
.form button.btn{border:0;cursor:pointer;font-family:var(--sans)}
.form .send p{margin:0;font-size:.84rem;color:var(--grey);max-width:44ch;line-height:1.5}
.soon{opacity:.62}
.soon .thumb{filter:grayscale(1)}

/* ---------- subject tags ---------- */
.tgs{display:flex;flex-wrap:wrap;gap:5px;margin:8px 0 0}
.tg{display:inline-block;font-weight:700;font-size:.6rem;letter-spacing:.11em;text-transform:uppercase;
  padding:4px 8px;background:var(--paper);border:1px solid var(--line);color:var(--grey);cursor:pointer}
/* Every subject, wherever it appears as a link, chip or row, answers in the
   brand lime before the click, and the same state fires on keyboard focus. */
.tg:hover,.tg:focus-visible{background:var(--lime);border-color:var(--lime);
  color:var(--carbon);outline:0}
.tg:focus-visible{box-shadow:0 0 0 2px var(--carbon)}
.tg.on{background:var(--lime);border-color:var(--lime);color:var(--carbon)}
.tg.none{cursor:default;font-style:normal;opacity:.7}
.tg.none:hover,.tg.none:focus-visible{background:var(--paper);border-color:var(--line);
  color:var(--grey);box-shadow:none}
.card .body .tgs{margin:8px 0 2px}
.les>.hd .tgs{margin:9px 0 0}
.toc li{flex-wrap:wrap}
.tgs.mini{gap:4px;margin:3px 0 0;flex-basis:100%;padding-left:26px}
.tgs.mini .tg{font-size:.54rem;padding:2px 6px;letter-spacing:.09em}
.chips.subrow{margin:0 0 22px}
a.chip{display:inline-flex;align-items:center;gap:7px}
/* a subject chip: the "other subjects" links on a subject page, and the
   subject filter row on the library pages. Lime on hover and on focus. */
a.chip:hover,a.chip:focus-visible,
.chip[data-subject]:hover,.chip[data-subject]:focus-visible{
  background:var(--lime);border-color:var(--lime);color:var(--carbon);outline:0}
a.chip:hover em,a.chip:focus-visible em,
.chip[data-subject]:hover em,.chip[data-subject]:focus-visible em{color:var(--lime-type)}
a.chip:focus-visible,.chip[data-subject]:focus-visible{box-shadow:0 0 0 2px var(--carbon)}


/* ---------- search subject filter ---------- */
.results .rfilter{display:flex;flex-wrap:nowrap;align-items:center;gap:9px;padding:9px 15px;
  border-top:1px solid var(--line);background:var(--paper);position:sticky;top:0;z-index:2}
.results .rfilter b{font-weight:700;font-size:.58rem;letter-spacing:.18em;text-transform:uppercase;
  color:var(--grey);margin:0;white-space:nowrap}
/* The panel one is the same dropdown, only smaller. Everything else about it
   comes from the shared rule further up. Its white face sits on the panel's
   off-white strip, so the edge still reads. */
.results .rfilter select{font-size:.6rem;padding:6px 25px 6px 10px;
  flex:1 1 auto;min-width:0;
  background-position:right 9px center;background-size:9px 5px}


/* ---------- card + row wrappers (a tag is a link, so it lives outside the card link) ---------- */
.card>.cardhit{display:flex;flex-direction:column;flex:1 1 auto;min-width:0}
.card>.tgs{padding:0 14px 14px;margin:0}
.card>.cardhit>.body{flex:1 1 auto}
/* A row is plain text: the title, and the smaller line under it naming its
   course or category. Nothing else. The whole row goes lime on hover and on
   keyboard focus, so it is obvious it can be pressed. A row with a video
   behind it carries a plain outline play triangle; a row without carries
   no marker at all. */
.srow{display:flex;align-items:center;gap:16px;background:var(--raised);border:1px solid var(--line);
  padding:14px 18px;margin:0 0 8px;transition:background .12s linear,border-color .12s linear}
.srow:hover,.srow:focus-within{background:var(--lime);border-color:var(--lime)}
.srow:hover p,.srow:focus-within p{color:var(--lime-type)}
.srow:focus-within{box-shadow:0 0 0 2px var(--carbon)}
.srow>.reshit{display:flex;align-items:center;gap:14px;flex:1 1 auto;min-width:0}
.srow>.reshit:focus-visible{outline:0}
.srow b{display:block;font-weight:700;font-size:.98rem;margin-bottom:2px}
.srow p{margin:0;font-size:.82rem;color:var(--grey);transition:color .12s linear}
.srow>.tgs{margin:0;flex:0 0 auto;justify-content:flex-end}
@media (max-width:700px){.srow{flex-wrap:wrap}.srow>.tgs{padding-left:76px}}

/* the play triangle: an outline mark, no box, no fill */
.ply{display:flex;align-items:center;justify-content:center;flex:none;
  width:22px;height:22px;color:var(--carbon)}
.ply svg{display:block;width:100%;height:100%}

/* ---------- the box component (house style, all box grids) ----------
   One component, used by the training subject grid and the subjects grid, and
   by any grid added later. The house rule it carries:

     1. The box is a square. Same width, same height, every time.
     2. One bold graphic sits in the middle, drawn in the brand colours only:
        black, white and the brand lime. No new hues.
     3. The subject name sits under the graphic. Nothing else is on the face:
        no counts, no format labels.
     4. The colour changes on hover, before the click, and the same change
        fires on keyboard focus so a keyboard user sees the same state.

   The markup and the graphics come from assets/boxes.js, so a new subject is
   a line in assets/tags.js plus one graphic, and no rebuild. */
.tgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(158px,1fr));gap:12px}
.tbox{--g2:var(--lime);aspect-ratio:1/1;border:1px solid #E2F3B4;background:#F6FFE0;
  color:var(--carbon);display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:16px;padding:16px 12px;text-align:center;margin:0;
  transition:background .12s linear,color .12s linear,border-color .12s linear}
.tbox .tmark{display:block;width:52%;max-width:104px;aspect-ratio:1/1}
.tbox .tmark svg{display:block;width:100%;height:100%;overflow:visible}
.tbox b{font-family:var(--display);font-weight:800;text-transform:uppercase;
  letter-spacing:-.02em;font-size:.8rem;line-height:1.08;color:inherit;
  max-width:100%;overflow-wrap:break-word}

/* the state change, on hover and on keyboard focus alike: the soft lime face
   deepens to a stronger lime and the graphic's accent goes white, so the tile
   answers before the click. Type stays carbon, so nothing shouts. */
.tbox:hover,.tbox:focus-visible{background:#E4FA9C;color:var(--carbon);
  border-color:#D2EE84;--g2:#FFFFFF;outline:0}
.tbox:focus-visible{box-shadow:0 0 0 2px var(--carbon)}
@media (prefers-reduced-motion:reduce){.tbox{transition:none}}
@media (max-width:560px){.tgrid{grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}
  .tbox{gap:11px;padding:12px 8px}.tbox b{font-size:.7rem}}

/* ---------- resource section page ---------- */
.subsec{background:var(--raised);border:1px solid var(--line);padding:22px 24px;
  margin:0 0 12px}
.subsec h3{font-family:var(--display);font-weight:900;letter-spacing:var(--dls);
  text-transform:uppercase;font-size:1rem;margin:0 0 6px}
.subsec p{font-size:.94rem;line-height:1.6;margin:0 0 16px;color:var(--carbon)}
.subsec .row{display:flex;flex-wrap:wrap;gap:12px 18px;align-items:center}
.subsec .ftype{border:1.5px solid var(--carbon);background:#F4FFCC;padding:7px 12px;
  font-weight:800;font-size:.62rem;letter-spacing:.13em}
.subsec .fmeta{font-size:.8rem;color:var(--grey);margin-right:auto}
.emptynote{background:#E6E6E2;border:1.5px solid var(--carbon);padding:24px 26px;margin:0 0 22px}
.emptynote b{display:block;font-family:var(--display);font-weight:900;
  letter-spacing:var(--dls);text-transform:uppercase;font-size:1rem;margin:0 0 8px}
.emptynote p{font-size:.94rem;line-height:1.6;margin:0}

/* ---------- honest empty state ---------- */
.blank{background:var(--raised);border:1px solid var(--line);padding:26px 28px;max-width:70ch}
.blank b{display:block;font-family:var(--display);font-weight:900;
  letter-spacing:var(--dls);text-transform:uppercase;font-size:1rem;margin:0 0 10px}
.blank p{font-size:.95rem;line-height:1.6;margin:0;color:var(--grey)}
.blank a{color:var(--carbon);border-bottom:2px solid var(--lime)}

/* ---------- saved files ---------- */
.savedrow{background:var(--raised);border:1px solid var(--line);padding:16px 20px;
  margin:0 0 10px;display:flex;flex-wrap:wrap;gap:10px 20px;align-items:center}
.savedrow b{font-weight:700;font-size:.98rem}
.savedrow .when{font-size:.8rem;color:var(--grey);margin-left:auto}
.savednote{background:#F4FFCC;border:1.5px solid var(--carbon);padding:20px 24px;margin:0 0 24px}
.savednote p{margin:0;font-size:.92rem;line-height:1.6}

/* ---------- resource detail page ---------- */
.rmeta{background:var(--raised);border:1px solid var(--line);padding:24px 26px;margin:0 0 26px}
.rmeta h2{font-family:var(--display);font-weight:900;letter-spacing:var(--dls);
  text-transform:uppercase;font-size:1rem;margin:0 0 8px}
.rmeta h2+p{margin:0 0 22px}
.rmeta h2:not(:first-child){margin-top:22px}
.rmeta p{font-size:.94rem;line-height:1.6;margin:0}
.rmeta ul{margin:0;padding-left:20px;font-size:.94rem;line-height:1.7}
.dlbar{background:var(--raised);border:1px solid var(--carbon);padding:22px 26px;
  display:flex;flex-wrap:wrap;gap:16px 24px;align-items:center;justify-content:space-between}
.dlbar .what b{display:block;font-weight:700;font-size:.98rem}
.dlbar .what span{font-size:.8rem;color:var(--grey)}

/* ---------- shared footer directory (assets/footer.js) ----------
   One component rendered into #hub-footer on every page. It sits outside
   .shell so it runs the full width under both the sidebar and the page.
   Deliberately quieter than the page above it: smaller type, grey links that
   only come up to carbon on hover, and a flatter background than the cards. */
.hubfoot{background:#F2F2EE;border-top:1px solid var(--line);
  padding:clamp(30px,3.4vw,46px) clamp(22px,3.4vw,44px) clamp(24px,2.4vw,30px)}
.hubfoot a{color:var(--grey)}
.hubfoot a:hover{color:var(--carbon)}

/* wordmark, one line, search */
.hubfoot .ftop{display:flex;flex-wrap:wrap;gap:24px 48px;align-items:flex-start;
  justify-content:space-between}
.hubfoot .fbrand{flex:1 1 320px;max-width:52ch}
.hubfoot .fmark{display:inline-block;justify-self:auto;color:var(--carbon);font-size:1rem}
.hubfoot .fmark:hover{color:var(--carbon)}
.hubfoot .fline{margin:12px 0 0;font-size:.88rem;line-height:1.6;color:var(--grey)}
.hubfoot .fsearch{flex:0 1 340px;min-width:260px}
.hubfoot .fsearch .search input{background:var(--raised)}

/* three columns, main sections only */
.hubfoot .fcols{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:24px 34px;padding:30px 0 26px;margin:28px 0 0;border-top:1px solid var(--line)}
.hubfoot .fhead{display:block;font-family:var(--display);font-weight:900;
  letter-spacing:var(--dls);text-transform:uppercase;font-size:.72rem;
  color:var(--carbon);margin:0 0 12px}
.hubfoot .flinks{display:flex;flex-direction:column;gap:8px}
.hubfoot .flinks a{font-size:.84rem;line-height:1.4;width:fit-content;
  border-bottom:2px solid transparent}
.hubfoot .flinks a:hover,.hubfoot .flinks a:focus-visible{border-bottom-color:var(--lime);outline:0}
.hubfoot .flinks a[aria-current]{color:var(--carbon);font-weight:700;border-bottom-color:var(--lime)}

/* contact and copyright */
.hubfoot .fbase{display:flex;flex-wrap:wrap;gap:6px 28px;justify-content:space-between;
  padding:18px 0 0;border-top:1px solid var(--line)}
.hubfoot .fbase p{margin:0;font-size:.8rem;color:var(--grey)}
.hubfoot .fbase a{border-bottom:2px solid var(--lime);color:var(--carbon)}

/* the footer search panel opens upward: the field is at the foot of the page,
   so a panel dropped below it would have nowhere to go */
.results.up{top:auto;bottom:calc(100% + 6px);max-height:min(56vh,420px)}

@media (max-width:900px){
  .hubfoot{padding-left:20px;padding-right:20px}
  .hubfoot .fsearch{flex:1 1 100%}
  .results.up{width:100%}
}
@media (max-width:560px){
  .hubfoot{padding-top:26px}
  .hubfoot .fcols{grid-template-columns:1fr;gap:22px;padding:22px 0 20px;margin-top:22px}
  .hubfoot .flinks a{font-size:.88rem;line-height:1.5}
}

/* ---------- the document read on the page (assets/hub.js) ----------
   A resource page shows the file itself above its download bar, using the
   browser's own PDF rendering. No viewer library, nothing loaded off-host.
   The frame carries the top and side rule; the download bar under it closes
   the box, so the document and its button read as one thing. Where the page
   cannot show a document in a frame, the box holds one line of prose instead
   and the download bar carries the page. That line is the default state in
   the markup, so a blank box is never what a member lands on. */
.pdfread{background:var(--raised);border:1px solid var(--carbon);border-bottom:0}
.pdfread object{display:block;width:100%;height:min(76vh,880px);border:0}
.pdfnote{margin:0;padding:22px 26px;font-size:.94rem;line-height:1.6;color:var(--grey)}

/* ---------- the Real Agency page: the film slot and the four groups ----------
   One row per item. The name is on the left; on the right sits whatever is
   true about it, which is a link to the page it already has on the hub, and
   the standing marker that its film is still to come. Nothing describes an
   item, because nothing was supplied to describe it with.

   The film slot is deliberately empty and reads as empty: a dashed edge, the
   film's name, and one line saying the file is not here yet. */
.film{background:var(--paper);border:2px dashed var(--line);text-align:center;
  padding:clamp(34px,6vw,72px) 24px}
.film b{display:block;font-family:var(--display);font-weight:900;text-transform:uppercase;
  letter-spacing:var(--dls);line-height:1.05;font-size:clamp(1.02rem,1.7vw,1.3rem)}
.film p{margin:10px 0 0;font-size:.88rem;color:var(--grey)}

.grp{border-top:1px solid var(--line)}
.itm{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:16px;align-items:center;
  background:var(--raised);border:1px solid var(--line);border-top:0;padding:14px 20px}
.itm>b{font-weight:700;font-size:.98rem;line-height:1.3}
.itm .st{display:flex;align-items:center;gap:16px;flex-wrap:wrap;justify-content:flex-end}
.itm .go{font-weight:700;font-size:.7rem;border-bottom:2px solid var(--lime);padding-bottom:2px}
.itm .go:hover{border-bottom-color:var(--carbon)}
.wait{font-weight:700;font-size:.6rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--grey);white-space:nowrap}
/* a listed row whose file has not been supplied is shown, and shown as not
   there: no link, no hover, and the marker saying so */
.srow.soon,.srow.soon:hover,.srow.soon:focus-within{background:var(--raised);
  border-color:var(--line);box-shadow:none}
.srow.soon>.reshit{cursor:default}
/* a filled item drops the shared Watch control in where the marker was */
.itm .watch{position:static;padding:9px 18px}
@media (max-width:700px){
  .itm{grid-template-columns:1fr;gap:9px}
  .itm .st{justify-content:flex-start}
}

/* ---------- the free view ----------
   What a free member cannot open yet is shown, not removed: the item keeps
   its place, drops to grey, and carries one line saying what opens it. The
   line is the whole item's hit area and it goes to real-agency.html, the page
   that says what the club is. Nothing here is a dead end.

   Applied by assets/tier.js. Nothing carries these classes in the markup. */
.lk{position:relative}
.lk>*{filter:grayscale(1);opacity:.46}
.lk a,.lk button,.lk .watch{pointer-events:none}
.lk:hover{border-color:var(--line)}
.lkgo{position:absolute;inset:0;z-index:2;display:flex;padding:14px;
  align-items:flex-end;justify-content:flex-start;
  opacity:1;filter:none;pointer-events:auto;text-decoration:none}
.lkgo .lkline{font-weight:700;font-size:.6rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--carbon);background:var(--raised);border:1.5px solid var(--carbon);
  padding:7px 12px;white-space:nowrap;transition:background .12s linear}
.lkgo:hover .lkline,.lkgo:focus-visible .lkline{background:var(--lime);border-color:var(--lime)}
.lkgo:focus-visible{outline:0}
/* a row is a line, not a box: the label sits at the end of it */
.srow.lk .lkgo,.ev.lk .lkgo,.res.lk .lkgo{align-items:center;justify-content:flex-end;padding:0 20px}
.srow.lk,.srow.lk:hover,.srow.lk:focus-within{background:var(--raised);
  border-color:var(--line);box-shadow:none}
.res.lk:hover,.ev.lk:hover{background:var(--raised)}

/* a whole page a free member cannot open keeps its heading and says one line */
.lkpanel{background:var(--raised);border:1px solid var(--line);padding:34px;margin:26px 0 0;
  max-width:54ch}
.lkpanel b{display:block;font-family:var(--display);font-weight:var(--dw);
  letter-spacing:-.018em;font-size:1.25rem;line-height:1.2;margin:0 0 10px}
.lkpanel p{margin:0 0 24px;font-size:.95rem;color:var(--grey);line-height:1.55}

/* which view you are looking at. Preview only: one flag in assets/tier.js
   takes this strip off the site. */
.tierbar{background:var(--carbon);color:#fff;display:flex;gap:16px;align-items:center;
  justify-content:center;flex-wrap:wrap;padding:9px 18px;font-weight:700;font-size:.63rem;
  letter-spacing:.18em;text-transform:uppercase}
.tierbar b{color:var(--lime);font-weight:700}
.tierbar a{color:#fff;border-bottom:2px solid var(--lime);padding-bottom:2px}
.tierbar a:hover{color:var(--lime)}