/* Home: the staffroom board.
   One full-width chalkboard: the promise written in chalk on the left with a
   search desk by track, real jobs on the board on the right, and the chalk
   tray along the bottom edge. Square corners throughout; colour is chalk and
   always means a track. Motion lives in css/motion.css. */

:root {
  /* Fine chalk grain: mostly solid, with the board showing through where the chalk skipped. */
  --chalk-grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.15' numOctaves='2' seed='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 -3.1 2.62'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
}

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

.board-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding-top: clamp(32px, 4.4vw, 64px);
  background-color: var(--board);
  background-image: var(--board-surface);
  color: var(--chalk);
  border-top: 1px solid rgba(0, 0, 0, .4);
  box-shadow: inset 0 14px 18px -14px rgba(0, 0, 0, .55);
}
.board-hero__ghosts {
  position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: url("../../assets/chalk/ghosts.svg") center 42% / max(1600px, 118%) auto no-repeat;
}
.board-hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(28px, 4vw, 56px);
}
@media (min-width: 1000px) {
  .board-hero__grid { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(40px, 5vw, 88px); align-items: center; }
}

/* The headline, written in chalk */
.board-hero__title {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 720;
  font-variation-settings: "wdth" 94;
  font-size: clamp(2.6rem, 6.4vw, 5.75rem);
  line-height: .97;
  letter-spacing: -.028em;
  color: var(--chalk);
  text-wrap: balance;
}
.board-hero__title .chalk-write { display: block; }
/* Each word is written on by the chalk tip: a feathered mask edge that motion
   slides across. At rest the mask is fully open. */
.board-hero__title .chalk-word {
  display: inline-block;
  padding: 0 .05em .16em 0; margin-bottom: -.16em;
  -webkit-mask-image: linear-gradient(90deg, #000 40%, transparent 46%);
  mask-image: linear-gradient(90deg, #000 40%, transparent 46%);
  -webkit-mask-size: 260% 100%; mask-size: 260% 100%;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-position: 0 0; mask-position: 0 0;
}
.chalk-under { position: relative; display: inline-block; white-space: nowrap; }
.chalk-under__line {
  position: absolute; left: -1%; bottom: -.2em; width: 102%; height: .34em;
  pointer-events: none; user-select: none;
}
.board-hero__lede {
  margin: clamp(18px, 2vw, 26px) 0 0;
  max-width: 40ch;
  font-size: clamp(1.06rem, 1.3vw, 1.22rem);
  line-height: 1.5;
  color: var(--chalk-2);
}

/* What every job shows: three teacher's ticks */
.board-hero__promise {
  display: flex; flex-wrap: wrap; gap: 8px 26px;
  margin: 18px 0 0; padding: 0; list-style: none;
  font-weight: 700; font-size: 1.02rem; color: var(--chalk);
}
.board-hero__promise li { display: inline-flex; align-items: center; gap: 8px; }
.chalk-tick { width: 26px; height: auto; flex: none; margin-top: -4px; }

/* Search desk: pick a track, then search within it */
.board-search { margin-top: clamp(26px, 3vw, 38px); }
.track-tabs {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  min-inline-size: 0; margin: 0; padding: 0; border: 0;
  border-bottom: 1px solid var(--board-line);
}
@media (min-width: 720px) { .track-tabs { display: flex; gap: 6px; } }
.track-tab {
  position: relative;
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px;
  padding: 12px 14px 14px 0;
  cursor: pointer;
  font-weight: 700; font-size: 1rem; line-height: 1.2;
  color: var(--chalk-2);
}
@media (min-width: 720px) { .track-tab { padding: 12px 22px 14px 0; } }
.track-tab input { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.track-tab__name::before {
  content: ""; display: inline-block; width: 18px; height: 7px; margin: 0 9px 2px 0;
  vertical-align: middle; border-radius: 1px; background: var(--track, var(--chalk));
}
.track-tab__count { font-family: var(--font-mono); font-weight: 700; font-size: .9rem; font-variant-numeric: tabular-nums; color: var(--chalk-3); }
.track-tab::after {
  content: ""; position: absolute; left: 0; right: 14px; bottom: -1px; height: 4px;
  background: var(--track, var(--chalk));
  transform: scaleX(0); transform-origin: left center;
}
.track-tab[data-track="english-online"] { --track: var(--track-english); }
.track-tab[data-track="maths-online"] { --track: var(--track-maths); }
.track-tab[data-track="english-in-person"] { --track: var(--track-inperson); }
.track-tab:hover, .track-tab:has(input:checked) { color: var(--chalk); }
.track-tab:has(input:checked)::after { transform: scaleX(1); }
.track-tab:has(input:checked) .track-tab__count { color: var(--chalk-2); }
.track-tab:has(input:focus-visible) { outline: 3px solid var(--focus-board); outline-offset: 2px; }

.board-search__row { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; margin-top: 18px; }
@media (min-width: 560px) { .board-search__row { grid-template-columns: minmax(0, 1fr) auto; gap: 12px; } }
.board-search__row input[type="search"] {
  height: 58px; width: 100%; padding: 0 18px;
  font: 500 1.08rem/1 var(--font-ui);
  color: var(--chalk); caret-color: var(--chalk-yellow);
  background: rgba(20, 36, 32, .55);
  border: 2px solid rgba(243, 241, 232, .7); border-radius: 2px;
  box-shadow: inset 0 2px 6px rgba(0, 0, 0, .25);
}
.board-search__row input[type="search"]::placeholder { color: #B2C0B9; opacity: 1; }
.board-search__row input[type="search"]:hover { border-color: rgba(243, 241, 232, .9); }
.board-search__row input[type="search"]:focus-visible { outline: 3px solid var(--focus-board); outline-offset: 2px; border-color: var(--chalk); }
.board-search__row input[type="search"]::-webkit-search-cancel-button { filter: invert(1); opacity: .7; }

.btn-chalk {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  height: 58px; padding: 0 26px;
  font: 700 1.06rem/1 var(--font-ui);
  color: var(--board-deep); background: var(--chalk);
  border: 0; border-radius: 2px; cursor: pointer;
  box-shadow: 0 2px 0 rgba(0, 0, 0, .28), 0 10px 22px -12px rgba(0, 0, 0, .7);
}
.btn-chalk:hover { background: #FFFFFF; color: var(--board-deep); }
.btn-chalk:active { transform: translateY(1px); box-shadow: 0 1px 0 rgba(0, 0, 0, .28); }
.btn-chalk:focus-visible { outline: 3px solid var(--focus-board); outline-offset: 3px; }
.chalk-arrow { width: 1.1em; height: auto; flex: none; }

.board-hero__employers { margin: 20px 0 0; font-size: 1rem; color: var(--chalk-2); }
.board-hero a:not(.btn-chalk):not(.board-line__link) {
  color: var(--chalk); font-weight: 700;
  text-decoration: underline; text-decoration-color: rgba(243, 241, 232, .55);
  text-underline-offset: .22em; text-decoration-thickness: 1px;
}
.board-hero a:not(.btn-chalk):not(.board-line__link):hover { text-decoration-color: var(--chalk-yellow); }
.board-hero a .chalk-arrow { vertical-align: -.12em; margin-left: 2px; }
.board-hero :focus-visible { outline-color: var(--focus-board); }
.board-hero ::selection { background: rgba(255, 211, 92, .38); color: var(--chalk); }

/* Two notes a teacher would want on the board: the per-class sum and the safety rule */
.board-notes { display: none; }
@media (min-width: 1000px) {
  .board-notes { display: flex; flex-wrap: wrap; gap: 20px 56px; margin-top: clamp(36px, 4vw, 56px); }
  .board-note {
    color: var(--chalk-2);
    font-family: var(--font-display); font-weight: 600; font-variation-settings: "wdth" 94;
  }
  .board-note p { margin: 0; }
  .board-note--sum { transform: rotate(-1.4deg); }
  .board-note--safety { transform: rotate(1.1deg); }
  .board-note__head {
    display: inline-block; margin-bottom: 6px !important;
    font-size: 1.12rem; color: var(--chalk);
  }
  .board-note p + p { max-width: 30ch; color: var(--chalk-2); }
  .board-note a { font-family: var(--font-ui); font-size: .98rem; }
}

/* On the board today */
.board-today { position: relative; }
@media (min-width: 1000px) {
  .board-today { padding-left: clamp(28px, 3vw, 48px); }
  .board-today::before {
    content: ""; position: absolute; left: 0; top: 6px; bottom: 10px; width: 2px;
    background: rgba(243, 241, 232, .2);
  }
}
.board-today__title {
  margin: 0 0 4px;
  font-family: var(--font-display); font-weight: 680; font-variation-settings: "wdth" 94;
  font-size: 1.5rem; letter-spacing: -.01em; color: var(--chalk);
}
.board-list { list-style: none; margin: 0; padding: 0; }
.board-line {
  position: relative;
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 16px; align-items: start;
  padding: 12px 0 12px 16px;
  border-bottom: 1px dashed rgba(243, 241, 232, .16);
}
.board-line::before {
  content: ""; position: absolute; left: 0; top: 17px; width: 5px; height: 16px; border-radius: 1px;
  background: var(--track, var(--chalk));
}
.board-line[data-track="english-online"] { --track: var(--track-english); }
.board-line[data-track="maths-online"] { --track: var(--track-maths); }
.board-line[data-track="english-in-person"] { --track: var(--track-inperson); }
/* Only the chosen track's jobs are on the board; English online is chosen first. */
.board-line:not([data-track="english-online"]) { display: none; }
.board-hero:has(input[value="maths-online"]:checked) .board-line[data-track="english-online"],
.board-hero:has(input[value="english-in-person"]:checked) .board-line[data-track="english-online"] { display: none; }
.board-hero:has(input[value="maths-online"]:checked) .board-line[data-track="maths-online"],
.board-hero:has(input[value="english-in-person"]:checked) .board-line[data-track="english-in-person"] { display: grid; }
.board-line__link { display: grid; gap: 1px; color: inherit; text-decoration: none; min-width: 0; }
.board-line__employer { font-weight: 700; font-size: 1.06rem; color: var(--chalk); }
.board-line__role { font-size: .98rem; color: var(--chalk-2); overflow-wrap: anywhere; }
.board-line__pay { margin-top: 3px; color: var(--chalk-2); font-size: .95rem; }
.board-line__amount { font-family: var(--font-mono); font-weight: 700; font-size: 1.16rem; font-variant-numeric: tabular-nums; color: var(--chalk); }
.board-line__usd { font-size: .82rem; color: var(--chalk-3); }
/* The same figure as the job cards: numbers in the mono face; currency codes, "to" and qualifiers in the reading face. */
.board-line__amount .pay-cur, .board-line__amount .pay-join, .board-line__amount .pay-q { font-family: var(--font-ui); font-weight: 700; font-size: .8rem; letter-spacing: .03em; color: var(--chalk-2); }
.board-line__amount .pay-lead-num, .board-line__amount .pay-num, .board-line__amount .pay-rest { white-space: nowrap; }
.board-line__link:hover .board-line__employer,
.board-line__link:focus-visible .board-line__employer { text-decoration: underline; text-decoration-color: var(--track); text-decoration-thickness: 3px; text-underline-offset: .22em; }
.board-line__link:focus-visible { outline: 3px solid var(--focus-board); outline-offset: 4px; }

.board-hero .stamp--checked {
  align-self: start; margin-top: 2px;
  font: 700 .8125rem/1 var(--font-mono); letter-spacing: .06em; text-transform: uppercase; white-space: nowrap;
  color: var(--stamp-checked-board);
  padding: 5px 8px 4px; border: 2px solid currentColor; border-radius: 2px;
  transform: rotate(-1.5deg);
}
.board-today__all { margin: 18px 0 0; font-size: 1.02rem; }

/* The chalk tray: the aluminium rail that frames the bottom of the board */
.chalk-tray {
  position: relative; height: 16px; margin-top: clamp(40px, 4vw, 56px);
  background: linear-gradient(180deg, var(--tray-lip) 0 2px, var(--tray) 2px 10px, var(--tray-shade) 10px 16px);
  box-shadow: 0 8px 16px -8px rgba(0, 0, 0, .6);
}
.chalk-tray__inner { position: relative; height: 100%; }

/* Phones: the jobs come up into the first screen */
@media (max-width: 719px) {
  .board-hero { padding-top: 28px; }
  .board-hero__title { font-size: clamp(2.6rem, 12.4vw, 3.2rem); }
  .board-hero__lede { font-size: 1.02rem; }
  .board-hero__lede .lede-more { display: none; }
  .board-hero__promise { gap: 6px 14px; font-size: .9rem; margin-top: 14px; }
  .board-hero__promise li { gap: 5px; white-space: nowrap; }
  .chalk-tick { width: 18px; }
  .board-search { margin-top: 20px; }
  .board-search__row { grid-template-columns: minmax(0, 1fr) auto; gap: 8px; margin-top: 14px; }
  .board-search__row input[type="search"], .btn-chalk { height: 52px; }
  /* The whole placeholder, "Job, employer or city", fits beside the button on a 375px phone and up;
     narrower phones put the button under the field (below). */
  .board-search__row input[type="search"] { padding: 0 12px; font-size: 1rem; }
  .btn-chalk { padding: 0 14px; }
  .btn-chalk .btn-more { display: none; }
  .board-hero__employers { margin-top: 14px; font-size: .95rem; }
  .track-tabs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 10px; overflow: visible; }
  .track-tab { display: grid; gap: 2px; padding: 10px 0 12px; font-size: .875rem; white-space: normal; }
  .track-tab::after { right: 0; }
  .board-line { padding-block: 13px; }
  /* B2-7: no stamp rule here. From 561 to 719px the record keeps the desktop
     shape, the stamp top-right in its own column, where there is room for it. */
  .board-list .board-line:nth-child(n + 4 of [data-track="english-online"]),
  .board-list .board-line:nth-child(n + 4 of [data-track="maths-online"]),
  .board-list .board-line:nth-child(n + 4 of [data-track="english-in-person"]) { display: none !important; }
  .chalk-tray { margin-top: 36px; }
}
@media (max-width: 374px) {
  .board-search__row { grid-template-columns: minmax(0, 1fr); }
}

/* The whole card opens the job: one real link on the title, stretched over the
   card, so the target is the card rather than a 26px line of text. The
   requirements disclosure, Save and View job sit above it and keep their own
   actions. */

/* ---------- How a job gets on the board ---------- */
.home-page .home-how { padding-block: clamp(40px, 6vw, 72px) !important; }
.home-how .home-how-layout { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: clamp(28px, 5vw, 72px); align-items: start; }
.home-how h2 { font-size: clamp(1.9rem, 3vw, 2.5rem); line-height: 1.05; letter-spacing: -.03em; max-width: 14ch; }
.home-how .home-how-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin: 0; padding: 0; list-style: none; }
.home-how .home-how-grid > li { display: grid; align-content: start; gap: 8px; padding: 22px 20px; border-radius: 2px; background: var(--surface); border: 1px solid var(--rule); box-shadow: var(--card-pin); }
.home-how .home-how-grid > li .stamp { justify-self: start; margin-bottom: 6px; font-size: .78rem; }
.home-how .home-how-grid > li strong { font: 680 1.08rem/1.3 var(--font-display); color: var(--ink-strong); }
.home-how .home-how-grid > li span:not(.stamp) { color: var(--ink-2); font-size: .98rem; line-height: 1.5; }

/* ---------- Employer band ---------- */
.home-recruiters.board-band { margin-top: clamp(24px, 4vw, 48px); padding-top: clamp(40px, 5vw, 64px); }
.home-recruiters-inner { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 20px 48px; align-items: center; padding-bottom: clamp(36px, 4.5vw, 56px); }
.home-recruiters h2 { margin: 0 0 10px; font-size: clamp(1.9rem, 3.4vw, 2.9rem); line-height: 1.02; letter-spacing: -.03em; font-stretch: 88%; max-width: 20ch; }
.home-recruiters p { margin: 0; max-width: 58ch; font-size: 1.1rem; }
.home-recruiters-actions { display: flex; flex-wrap: wrap; gap: 12px; }
/* B2-13 point 6, before launch: the band's "Post a vacancy" is the chalk button
   the hero's "Search jobs" uses, never the retired yellow. The phone rules above
   shrink .btn-chalk for the search desk; in the band the two actions keep one
   box, side by side or stacked, and the CTA keeps room for its own label. */
.home-recruiters-actions .btn { min-height: 58px; }
.home-recruiters-actions .btn-chalk { padding-inline: 22px; }
@media (max-width: 719px) { .home-recruiters-actions .btn { min-height: 52px; } }

/* ---------- Responsive ---------- */
@media (max-width: 1080px) {
  .home-page .board-hero .hero-grid { grid-template-columns: minmax(0, 1fr) !important; }
  .board-today { padding-left: 0; padding-top: 22px; background-size: 100% 2px; }
  .home-how .home-how-layout { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 720px) {
  .home-page .board-hero .home-job-search { grid-template-columns: minmax(0, 1fr); grid-template-areas: "keyword" "subject" "submit"; }
  .home-page .board-hero .home-job-search button[type="submit"] { width: 100%; }
  .home-how .home-how-grid { grid-template-columns: minmax(0, 1fr); }
  .home-recruiters-inner { grid-template-columns: minmax(0, 1fr); }
  .chalk-tray-note { margin-left: 0; width: 100%; }
  .chalk-tray .btn { flex: 1 1 auto; justify-content: center; }
}
@media (max-width: 560px) {
  .home-page .board-hero .hero-copy h1 { font-size: clamp(2.35rem, 10.6vw, 3rem) !important; max-width: none !important; }
  .board-hero .hero-chalk-phrase { white-space: normal; }
  /* B2-18: the three ticks are a checklist, so on phones they stack one per
     line, ticks aligned, instead of wrapping 2+1 with "When we checked" alone. */
  .board-hero__promise { flex-direction: column; gap: 6px; }
  .board-hero__promise li { white-space: nowrap; }
  .board-line { grid-template-columns: minmax(0, 1fr); }
  .board-line .stamp { justify-self: start; }
}

/* Safety first on phones: the fake-job line sits under the search, the recruiter line after the jobs. */
.board-hero__safety { display: none; margin: 16px 0 0; font-size: .98rem; color: var(--chalk-2); }
.board-hero__employers--after { display: none; }
@media (max-width: 999px) {
  .board-hero__safety { display: block; }
  .board-hero__copy > .board-hero__employers { display: none; }
  .board-hero__employers--after { display: block; margin-top: 14px; }
}
@media (max-width: 560px) {
  .board-line { grid-template-columns: minmax(0, 1fr); }
  /* B2-7: one stamp rule for this breakpoint — under the pay, clearing the
     "about USD" line by 8px. */
  .board-line .stamp--checked { grid-column: 1; grid-row: auto; justify-self: start; margin-top: 8px; font-size: .8125rem; }
}
/* Stamps stay bright chalk-ink on the board, in every motion setting. */
.board-hero .stamp { mix-blend-mode: normal; opacity: 1; }
/* Links big enough to hit */
.board-hero__employers a, .board-hero__safety a, .board-today__all a { display: inline-block; padding-block: 12px; }
.skip-link:hover { color: var(--chalk); }
/* The tray holds the three tracks' chalk; the chosen track's stick lifts. */
.chalk-tray { height: 22px; }
.chalk-tray { background: linear-gradient(180deg, var(--tray-lip) 0 2px, var(--tray) 2px 14px, var(--tray-shade) 14px 22px); }
.chalk-tray__inner { display: flex; align-items: flex-end; gap: 14px; height: 100%; }
.tray-stub { display: block; width: 44px; height: 10px; margin-bottom: 20px; border-radius: 3px 2px 2px 3px; background: var(--track); box-shadow: inset 0 -3px 0 rgba(0, 0, 0, .14), 0 2px 2px rgba(0, 0, 0, .3); }
.tray-stub[data-track="english-online"] { --track: var(--track-english); }
.tray-stub[data-track="maths-online"] { --track: var(--track-maths); }
.tray-stub[data-track="english-in-person"] { --track: var(--track-inperson); }
.board-hero:has(input[value="english-online"]:checked) .tray-stub[data-track="english-online"],
.board-hero:has(input[value="maths-online"]:checked) .tray-stub[data-track="maths-online"],
.board-hero:has(input[value="english-in-person"]:checked) .tray-stub[data-track="english-in-person"] { transform: translateY(-3px); }
/* Seams below the fold */
.next-links a > span:first-child { display: grid; gap: 4px; }
.home-recruiters.board-band::after { display: none; }
/* The first visit (js/intro.js): the logo is written up on a board that covers
   the finished page, then flies into the masthead. js/home-early.js adds
   .pc-intro-on to <html> before first paint, so the plain board is there from the first
   frame; .pc-intro-live means the script has taken over. Motion: css/motion.css. */
html.pc-intro-on:not(.pc-intro-live)::after,
.pc-intro__board { background-color: var(--board); background-image: var(--board-surface); }
html.pc-intro-on:not(.pc-intro-live)::after { content: ""; position: fixed; inset: 0; z-index: 2147483000; }
.pc-intro { position: fixed; inset: 0; z-index: 2147483000; overflow: hidden; cursor: default; user-select: none; -webkit-user-select: none; -webkit-tap-highlight-color: transparent; }
.pc-intro__board { position: absolute; inset: 0; }
.pc-intro__rail.chalk-tray { position: absolute; left: 0; right: 0; bottom: 0; margin: 0; }
.pc-intro__globe,
.pc-intro__word { position: absolute; overflow: visible; transform-origin: 0 0; }
.pc-intro .pci-s { stroke-dasharray: 1 2; stroke-dashoffset: 1; }
.pc-intro .pci-dust,
.pc-intro .pci-mote,
.pc-intro .pci-bloom { transform-box: fill-box; transform-origin: center; }
html.pc-intro-live .nav .logo-lockup { opacity: 0; }
@media print { .pc-intro { display: none; } }
html.pc-intro-on { scrollbar-color: var(--board-3) var(--board); }