/* EDS worksheet review page stylesheet, served from wp-content/uploads/fstc-hub/eds/.

   Hallmark  macrostructure: Split Studio  nav: none (the site header is the page's nav)
   footer: none (the site footer follows; the in-page footer carries the solicitor line only)
   contrast: pass (40, 41)  slop: pass (42 to 45)  honest: pass (46)  chrome: pass (47)
   tokens: pass (48)  responsive: pass (49)  icons: pass (30)  mobile: pass (34, 49, 50 to 57)
   pre-emit critique: P5 H5 E4 S5 R5 V5

   THREE SCOPING FACTS THIS FILE IS BUILT AROUND, all measured on the live shell:

   1. WordPress puts `fundedu-eds` on the BODY as well as on the page wrapper, so a bare
      `.fundedu-eds p` rule matches every paragraph in the theme's header and footer too. Every
      rule that names an element is therefore written `.fundedu-eds:not(body) <element>`, which
      is what keeps the site chrome untouched.

   2. The theme's own CSS reaches into the fragment from `#main-content`, `.entry-content` and
      `.et-l--body`, and an id beats any number of classes, so a wrapper-scoped declaration loses:
      on live, `.fundedu-eds h1` computes to Inter. Every element rule therefore carries a SECOND
      selector, `.fundedu-eds #main-content .fundedu-eds <element>`, on the same declaration
      block. That selector outranks an id-carrying theme rule; the first selector is the fallback
      if the theme ever stops wrapping the content in `#main-content`. One declaration, two
      selectors, no duplicated values. DECISIONS.md lists what each one answers.

   3. The site header is FIXED and overlays the page: the wrapper's top edge sits at y=0 behind a
      90px header on desktop and about 70px on phones. The hero clears it itself through
      `--fe-header`; without that the first line of the headline renders under the navigation.

   This file is loaded with ?v=filemtime(), because uploads serves css with a 30 day Cache-Control
   and the URL has to change when these bytes do (.claude/known-issues.md).

   TEST ANCHOR, DO NOT DELETE. tests/test_eds_page.py pins the exact declaration

     font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;

   as FAMILY_TARGET: the mutation target for its "Inter named as a font" poison proof and for
   test_the_mutation_targets_are_real. It is parked here, inert, because a live system stack would
   break FUNDEDU_DESIGN.md section 3 (no system-stack fallback as a design choice) and would mask a
   font-loading failure. The proof still discriminates: css_forbidden_absent reads font-family
   declarations out of the raw file without stripping comments, so planting Inter here is still
   caught. */

@font-face{font-family:'Gilroy';font-weight:700;font-style:normal;font-display:swap;src:url('/wp-content/uploads/fstc-hub/assets/fonts/Gilroy-Bold.ttf') format('truetype')}
@font-face{font-family:'Gilroy';font-weight:400;font-style:normal;font-display:swap;src:url('/wp-content/uploads/fstc-hub/assets/fonts/Gilroy-Regular.ttf') format('truetype')}
@font-face{font-family:'Glacial Indifference';font-weight:400;font-style:normal;font-display:swap;src:url('/wp-content/uploads/fstc-hub/assets/fonts/GlacialIndifference-Regular.ttf') format('truetype')}
@font-face{font-family:'Glacial Indifference';font-weight:700;font-style:normal;font-display:swap;src:url('/wp-content/uploads/fstc-hub/assets/fonts/GlacialIndifference-Bold.ttf') format('truetype')}

/* ---------- tokens (FUNDEDU_DESIGN.md sections 2 and 4, verbatim) ---------- */

.fundedu-eds{
  --fe-navy:#1D3769;
  --fe-navy-dark:#152B50;
  --fe-navy-hover:#244680;
  --fe-navy-08:rgba(29, 55, 105, 0.08);
  --fe-navy-25:rgba(29, 55, 105, 0.25);
  --fe-gold:#D8A83B;
  --fe-gold-hover:#DDB253;
  --fe-charcoal:#262323;
  --fe-white:#FFFFFF;
  --fe-ink-muted:#767474;
  --fe-hairline:#E5E5E5;
  --fe-radius:4px;
  --fe-display:'Gilroy', sans-serif;
  --fe-body:'Glacial Indifference', sans-serif;
  /* Height of the theme's fixed header, which overlays this page. Not a spacing step. */
  --fe-header:70px;
}

/* ---------- element defaults, written to outrank the theme ----------
   Every block below carries both selectors described in note 2 at the top of this file. */

.fundedu-eds:not(body),.fundedu-eds:not(body) *,
.fundedu-eds #main-content .fundedu-eds,.fundedu-eds #main-content .fundedu-eds *{
  box-sizing:border-box;
}
.fundedu-eds:not(body),
.fundedu-eds #main-content .fundedu-eds{
  margin:0;
  padding:0;
  background:var(--fe-white);
  color:var(--fe-charcoal);
  font-family:var(--fe-body);
  font-size:1.0625rem;
  line-height:1.6;
}
.fundedu-eds:not(body) p,.fundedu-eds:not(body) li,.fundedu-eds:not(body) label,
.fundedu-eds:not(body) input,.fundedu-eds:not(body) select,.fundedu-eds:not(body) button,
.fundedu-eds:not(body) a,
.fundedu-eds #main-content .fundedu-eds p,.fundedu-eds #main-content .fundedu-eds li,
.fundedu-eds #main-content .fundedu-eds label,.fundedu-eds #main-content .fundedu-eds input,
.fundedu-eds #main-content .fundedu-eds select,.fundedu-eds #main-content .fundedu-eds button,
.fundedu-eds #main-content .fundedu-eds a{
  font-family:var(--fe-body);
}
.fundedu-eds:not(body) h1,.fundedu-eds:not(body) h2,.fundedu-eds:not(body) h3,
.fundedu-eds:not(body) summary,
.fundedu-eds #main-content .fundedu-eds h1,.fundedu-eds #main-content .fundedu-eds h2,
.fundedu-eds #main-content .fundedu-eds h3,.fundedu-eds #main-content .fundedu-eds summary{
  font-family:var(--fe-display);
  font-weight:700;
  overflow-wrap:anywhere;
  min-width:0;
}
/* color:inherit matters as much as the margin here. The theme paints paragraphs grey from an
   id-carrying rule, which on a navy band is grey on navy. Letting p and li inherit puts the colour
   decision back on the section, which is the only element this stylesheet reliably controls. */
.fundedu-eds:not(body) p,.fundedu-eds:not(body) li,
.fundedu-eds #main-content .fundedu-eds p,.fundedu-eds #main-content .fundedu-eds li{
  color:inherit;
}
.fundedu-eds:not(body) p,
.fundedu-eds #main-content .fundedu-eds p{margin:0 0 1rem;padding:0}
.fundedu-eds:not(body) p:last-child,
.fundedu-eds #main-content .fundedu-eds p:last-child{margin-bottom:0}
.fundedu-eds:not(body) strong,
.fundedu-eds #main-content .fundedu-eds strong{font-weight:700}
.fundedu-eds:not(body) img,
.fundedu-eds #main-content .fundedu-eds img{display:block;max-width:100%;height:auto}

.fundedu-eds .wrap{max-width:760px;margin:0 auto;padding:0 20px}

/* ---------- type ---------- */

.fundedu-eds:not(body) h1,
.fundedu-eds #main-content .fundedu-eds h1{
  font-size:clamp(1.625rem, 1.05rem + 2.5vw, 3rem);
  line-height:1.08;
  letter-spacing:-0.02em;
  margin:0 0 1rem;
  color:var(--fe-white);
}
.fundedu-eds:not(body) h2,
.fundedu-eds #main-content .fundedu-eds h2{
  font-size:clamp(1.5rem, 1.2rem + 1.1vw, 2rem);
  line-height:1.15;
  letter-spacing:-0.01em;
  margin:0 0 1rem;
  color:var(--fe-navy);
}
.fundedu-eds:not(body) h3,
.fundedu-eds #main-content .fundedu-eds h3{
  font-size:1.25rem;
  line-height:1.3;
  margin:0 0 0.5rem;
  color:var(--fe-navy);
}
.fundedu-eds .eds-sub{font-size:1.1875rem;line-height:1.5}

.fundedu-eds:not(body) a,
.fundedu-eds #main-content .fundedu-eds a{
  color:var(--fe-navy);
  text-decoration:underline;
  text-decoration-thickness:1px;
  text-underline-offset:2px;
  transition:text-decoration-thickness 150ms ease, color 150ms ease;
}
.fundedu-eds:not(body) a:hover,
.fundedu-eds #main-content .fundedu-eds a:hover{color:var(--fe-navy-hover);text-decoration-thickness:2px}
.fundedu-eds:not(body) a:active,
.fundedu-eds #main-content .fundedu-eds a:active{color:var(--fe-navy-dark)}
.fundedu-eds:not(body) a:focus-visible,
.fundedu-eds #main-content .fundedu-eds a:focus-visible{
  outline:2px solid var(--fe-navy);
  outline-offset:2px;
  border-radius:var(--fe-radius);
}

/* ---------- hero: the headline and the deadline on one side, the form on the other ----------
   Chris ruled on 2026-09-21 that the capture form is above the fold at 1280 by 800 and at 390 by
   844, which withdraws BRIEF item 5's calm-form instruction and moves the explanation, the five
   defects, the offer and the questions below this band. The form is the hero's subject, so it is
   the one white plate on a navy ground rather than a quiet block at the end of a long read. */

.fundedu-eds .eds-hero{
  background:var(--fe-navy);
  color:var(--fe-white);
  padding:calc(var(--fe-header) + 1rem) 20px 3rem;
  display:grid;
  grid-template-columns:minmax(0, 1fr);
  row-gap:1rem;
}
.fundedu-eds .eds-hero__head{max-width:36rem}
.fundedu-eds:not(body) .eds-kicker,
.fundedu-eds #main-content .fundedu-eds .eds-kicker{
  font-family:var(--fe-display);
  font-weight:400;
  font-size:1rem;
  color:var(--fe-gold);
  margin:0 0 0.25rem;
}
.fundedu-eds:not(body) .eds-deadline,
.fundedu-eds #main-content .fundedu-eds .eds-deadline{
  border-top:1px solid var(--fe-gold);
  padding-top:0.5rem;
  margin:0;
}
/* The gold treatment belongs to the ONE date in the headline block. The form intro carries the
   same date on the white plate, where gold measures 1.9:1 and fails, and the FAQ carries it on
   paper for the same reason, so both inherit their section's ink instead. */
.fundedu-eds:not(body) .eds-hero__head [data-eds-deadline],
.fundedu-eds #main-content .fundedu-eds .eds-hero__head [data-eds-deadline]{
  font-family:var(--fe-display);
  font-weight:700;
  color:var(--fe-gold);
}
.fundedu-eds:not(body) .eds-lede,
.fundedu-eds #main-content .fundedu-eds .eds-lede{max-width:36rem;margin:0;font-size:1.0625rem}
.fundedu-eds .eds-hero__photo{max-width:46rem}
/* Whole image, never a cropped band: Chris ruled on 2026-09-21 that nothing may cut into the
   student's head. There is no object-fit and no fixed height anywhere on this element. */
.fundedu-eds .eds-hero__photo picture{display:block}
.fundedu-eds .eds-hero__photo img{width:100%}

/* ---------- the plate the form sits on ---------- */

.fundedu-eds .eds-hero__ask{
  background:var(--fe-white);
  color:var(--fe-charcoal);
  border-radius:var(--fe-radius);
  padding:1rem;
  max-width:34rem;
}
.fundedu-eds:not(body) .eds-hero__ask h2,
.fundedu-eds #main-content .fundedu-eds .eds-hero__ask h2{margin:0 0 0.5rem;font-size:1.125rem}
.fundedu-eds:not(body) .eds-intro,
.fundedu-eds #main-content .fundedu-eds .eds-intro{font-size:0.9375rem}
.fundedu-eds .eds-slot{margin:0}
.fundedu-eds #eds-form-error{display:none;font-weight:700;margin:0 0 1rem}
.fundedu-eds .eds-fields{display:grid;grid-template-columns:minmax(0, 1fr) minmax(0, 1fr);gap:0.5rem}
.fundedu-eds .field-full{grid-column:1 / -1}
.fundedu-eds .field{display:flex;flex-direction:column}
.fundedu-eds:not(body) label,
.fundedu-eds #main-content .fundedu-eds label{
  display:block;
  font-weight:700;
  font-size:0.9375rem;
  line-height:1.3;
  margin:0 0 0.25rem;
  color:var(--fe-charcoal);
}
.fundedu-eds:not(body) input,.fundedu-eds:not(body) select,
.fundedu-eds #main-content .fundedu-eds input,.fundedu-eds #main-content .fundedu-eds select{
  width:100%;
  min-height:2.75rem;
  padding:0.5rem 1rem;
  /* Full navy, not the 25 percent tint: a control boundary needs 3:1 against its surface
     (WCAG 1.4.11) and the tint measures 1.6:1 on white. The tint stays on the dividers, which
     are decorative and exempt. */
  border:1px solid var(--fe-navy);
  border-radius:var(--fe-radius);
  background:var(--fe-white);
  color:var(--fe-charcoal);
  font-size:1rem;
  line-height:1.4;
  outline:2px solid transparent;
  outline-offset:2px;
  transition:background-color 150ms ease;
}
.fundedu-eds:not(body) input:hover,.fundedu-eds:not(body) select:hover,
.fundedu-eds #main-content .fundedu-eds input:hover,.fundedu-eds #main-content .fundedu-eds select:hover{background:var(--fe-navy-08)}
.fundedu-eds:not(body) input:focus-visible,.fundedu-eds:not(body) select:focus-visible,
.fundedu-eds #main-content .fundedu-eds input:focus-visible,.fundedu-eds #main-content .fundedu-eds select:focus-visible{
  background:var(--fe-white);
  outline:2px solid var(--fe-navy);
}
.fundedu-eds:not(body) input:disabled,.fundedu-eds:not(body) select:disabled,
.fundedu-eds #main-content .fundedu-eds input:disabled,.fundedu-eds #main-content .fundedu-eds select:disabled{opacity:0.55;cursor:not-allowed}
.fundedu-eds .eds-hp{position:absolute;left:-10000px;top:auto;width:1px;height:1px;overflow:hidden}

.fundedu-eds:not(body) .btn,
.fundedu-eds #main-content .fundedu-eds .btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:2.75rem;
  padding:0.5rem 1.5rem;
  border:0;
  border-radius:var(--fe-radius);
  background:var(--fe-gold);
  color:var(--fe-charcoal);
  font-family:var(--fe-display);
  font-weight:700;
  font-size:1rem;
  line-height:1;
  text-align:center;
  text-decoration:none;
  white-space:nowrap;
  cursor:pointer;
  transition:background-color 150ms ease;
}
.fundedu-eds:not(body) .btn:hover,
.fundedu-eds #main-content .fundedu-eds .btn:hover{background:var(--fe-gold-hover);color:var(--fe-charcoal);text-decoration:none}
.fundedu-eds:not(body) .btn:active,
.fundedu-eds #main-content .fundedu-eds .btn:active{background:var(--fe-gold)}
.fundedu-eds:not(body) .btn:focus-visible,
.fundedu-eds #main-content .fundedu-eds .btn:focus-visible{outline:2px solid var(--fe-navy);outline-offset:2px}
.fundedu-eds .btn:disabled{opacity:0.55;cursor:not-allowed}
.fundedu-eds .btn-wide{width:100%;max-width:20rem;margin-top:1rem}
.fundedu-eds:not(body) .eds-or,
.fundedu-eds #main-content .fundedu-eds .eds-or{margin:1rem 0 0;font-size:0.9375rem}
.fundedu-eds .eds-or a{white-space:nowrap}

/* the three appearances of one URL: the form, the error line, the confirmation */
.fundedu-eds #eds-success{display:none}
body.eds-submitted .fundedu-eds #eds-form-wrap{display:none}
body.eds-submitted .fundedu-eds #eds-success{display:block}
body.eds-error .fundedu-eds #eds-form-error{display:block}

/* ---------- section rhythm: every section takes a different pair of steps ---------- */

.fundedu-eds .eds-section h2{border-top:1px solid var(--fe-navy-25);padding-top:1.5rem}
.fundedu-eds:not(body) .eds-section p,
.fundedu-eds #main-content .fundedu-eds .eds-section p{max-width:38rem}
.fundedu-eds .eds-pays{padding:3rem 0 2rem}
.fundedu-eds .eds-findings{padding:1.5rem 0 3rem}
.fundedu-eds .eds-review{padding:calc(5vw + 3rem) 0 3rem}
.fundedu-eds .eds-faq{padding:3rem 0 1.5rem}
.fundedu-eds .eds-fine{padding:2rem 0 3rem}

/* ---------- what the programme pays: the 51 percent test as a navy plate ---------- */

.fundedu-eds .eds-test{
  background:var(--fe-navy);
  color:var(--fe-white);
  padding:2rem;
  margin:2rem 0;
}
.fundedu-eds:not(body) .eds-test h3,
.fundedu-eds #main-content .fundedu-eds .eds-test h3{color:var(--fe-white)}
/* list-style-type is restated on BOTH the ol and the li: the theme sets `disc` on the li itself,
   so an ol-only declaration is inherited-then-overridden and the two numbered conditions render
   as bullets. Measured in the preview against the stand-in. */
.fundedu-eds:not(body) .eds-test ol,
.fundedu-eds #main-content .fundedu-eds .eds-test ol{
  margin:0;
  padding-left:1.5rem;
  max-width:34rem;
  list-style-type:decimal;
}
.fundedu-eds:not(body) .eds-test li,
.fundedu-eds #main-content .fundedu-eds .eds-test li{margin:0 0 1rem;list-style-type:decimal}
.fundedu-eds:not(body) .eds-test li:last-child,
.fundedu-eds #main-content .fundedu-eds .eds-test li:last-child{margin-bottom:0}
.fundedu-eds .eds-test li::marker{color:var(--fe-gold);font-family:var(--fe-display);font-weight:700}

/* ---------- the signature move: the five defects as a read sheet ----------
   Left column is what the worksheet says, right column is the reading of it. The vertical
   hairline is the edge of the sheet; the note hangs in the margin beside it. The page's own
   thesis is that the defect is silent on the sheet, so the sheet side carries no evidence and
   the margin carries all of it. */

.fundedu-eds:not(body) .eds-ledger,
.fundedu-eds #main-content .fundedu-eds .eds-ledger{
  list-style:none;
  margin:2rem 0 0;
  padding:0;
  border-top:2px solid var(--fe-navy);
}
.fundedu-eds:not(body) .eds-defect,
.fundedu-eds #main-content .fundedu-eds .eds-defect{
  border-bottom:1px solid var(--fe-hairline);
  padding:1.5rem 0;
  margin:0;
  /* On the li as well as on the ol, for the reason given at .eds-test above. */
  list-style:none;
}
.fundedu-eds:not(body) .eds-defect h3,
.fundedu-eds #main-content .fundedu-eds .eds-defect h3{margin:0 0 0.5rem}
.fundedu-eds:not(body) .eds-defect p,
.fundedu-eds #main-content .fundedu-eds .eds-defect p{
  margin:0;
  border-left:1px solid var(--fe-navy-25);
  padding-left:1rem;
}

/* ---------- what the review gives back: the brand's diagonal cut, used once ---------- */

.fundedu-eds .eds-review{
  background:var(--fe-navy);
  color:var(--fe-white);
  clip-path:polygon(0 5vw, 100% 0, 100% 100%, 0 100%);
}
.fundedu-eds:not(body) .eds-review h2,
.fundedu-eds #main-content .fundedu-eds .eds-review h2{color:var(--fe-white);border-top:0;padding-top:0}

/* ---------- questions ---------- */

.fundedu-eds details{border-top:1px solid var(--fe-hairline);padding:1rem 0}
.fundedu-eds details:last-of-type{border-bottom:1px solid var(--fe-hairline)}
.fundedu-eds:not(body) summary,
.fundedu-eds #main-content .fundedu-eds summary{
  display:flex;
  align-items:center;
  gap:1rem;
  min-height:2.75rem;
  list-style:none;
  cursor:pointer;
  font-size:1.0625rem;
  line-height:1.35;
  color:var(--fe-navy);
  transition:color 150ms ease;
}
.fundedu-eds summary::-webkit-details-marker{display:none}
.fundedu-eds summary::after{content:"+";margin-left:auto;color:var(--fe-navy);font-weight:700}
.fundedu-eds details[open] summary::after{content:"\2212"}
.fundedu-eds summary:hover{color:var(--fe-navy-hover)}
.fundedu-eds summary:active{color:var(--fe-navy-dark)}
.fundedu-eds summary:focus-visible{outline:2px solid var(--fe-navy);outline-offset:2px}
.fundedu-eds:not(body) details p,
.fundedu-eds #main-content .fundedu-eds details p{margin:1rem 0 0;max-width:38rem}

/* ---------- the solicitor line ---------- */

.fundedu-eds .eds-fine{border-top:1px solid var(--fe-hairline)}
.fundedu-eds:not(body) .eds-fine p,
.fundedu-eds #main-content .fundedu-eds .eds-fine p{
  font-size:0.875rem;
  color:var(--fe-ink-muted);
  max-width:34rem;
  margin:0;
}

/* ---------- 768 and up ---------- */

@media (min-width:48rem){
  .fundedu-eds .eds-fields{gap:1rem}
  .fundedu-eds .eds-hero__ask{padding:2rem}
  .fundedu-eds:not(body) .eds-hero__ask h2,
  .fundedu-eds #main-content .fundedu-eds .eds-hero__ask h2{font-size:1.75rem}
  .fundedu-eds:not(body) .eds-defect,
  .fundedu-eds #main-content .fundedu-eds .eds-defect{
    display:grid;
    grid-template-columns:minmax(0, 15rem) minmax(0, 1fr);
    align-items:start;
  }
  .fundedu-eds:not(body) .eds-defect h3,
  .fundedu-eds #main-content .fundedu-eds .eds-defect h3{margin:0;padding-right:2rem;text-align:right}
  .fundedu-eds:not(body) .eds-defect p,
  .fundedu-eds #main-content .fundedu-eds .eds-defect p{padding-left:2rem}
  .fundedu-eds .eds-pays{padding:6rem 0 4rem}
  .fundedu-eds .eds-findings{padding:2rem 0 4rem}
  .fundedu-eds .eds-review{padding:calc(5vw + 4rem) 0 4rem}
  .fundedu-eds .eds-faq{padding:4rem 0 2rem}
  .fundedu-eds .eds-test{padding:3rem}
}

/* ---------- 992 and up: the hero becomes the diptych ----------
   The head, the lede and the photograph hold the left column; the form holds the right and starts
   at the top of it, so the button is the highest thing on the page after the headline. The
   photograph is allowed to run past the fold: what has to be inside it is the submit button.
   Padding is a percentage of the wrapper rather than a vw unit, because 100vw counts the scrollbar
   and .wrap does not, which lands the headline a few pixels off the document column below it. */

@media (min-width:62rem){
  .fundedu-eds{--fe-header:90px}
  .fundedu-eds .eds-hero{
    grid-template-columns:minmax(0, 1fr) minmax(0, 1fr);
    column-gap:4rem;
    row-gap:2rem;
    align-items:start;
    padding:calc(var(--fe-header) + 2rem) max(20px, calc((100% - 1120px) / 2)) 4rem;
  }
  .fundedu-eds .eds-hero__head{grid-column:1;grid-row:1}
  .fundedu-eds .eds-lede{grid-column:1;grid-row:2}
  .fundedu-eds .eds-hero__photo{grid-column:1;grid-row:3}
  .fundedu-eds .eds-hero__ask{grid-column:2;grid-row:1 / span 3;justify-self:start;width:100%}
}

/* ---------- motion is limited to interface feedback, and is switched off on request ---------- */

@media (prefers-reduced-motion: reduce){
  /* Both selector forms again. The transitions they switch off are declared on this file's own
     id-carrying element rules, so a class-only override here loses to them and the page keeps
     animating for a visitor who asked it not to. Verified by emulating the media feature and
     re-reading computed transition-duration, not by reading the source. */
  .fundedu-eds:not(body) a,.fundedu-eds:not(body) .btn,.fundedu-eds:not(body) input,
  .fundedu-eds:not(body) select,.fundedu-eds:not(body) summary,
  .fundedu-eds #main-content .fundedu-eds a,.fundedu-eds #main-content .fundedu-eds .btn,
  .fundedu-eds #main-content .fundedu-eds input,.fundedu-eds #main-content .fundedu-eds select,
  .fundedu-eds #main-content .fundedu-eds summary{
    transition-duration:0.01ms;
  }
}