/* Scribe Class — shared public-page styles.
   Tokens are lifted verbatim from the original landing page so the four
   public pages and the course itself stay one object. Anything added here
   is new structure, not a new palette. */

:root{
  --ground:#1C1330;--inset:#150E26;--panel:#291D45;--panel-2:#332450;--line:#4A3670;
  --bone:#F3EDE4;--muted:#BAACD0;
  --gold:#F2B134;--violet:#B49BE8;--aqua:#D6C6FF;--blue:#7FB3E8;--rose:#F08CA0;
  --good:#7BD88F;--bad:#FF8A73;
  --display:"Bricolage Grotesque",system-ui,sans-serif;
  --brand:"Cinzel",Georgia,serif;
  --body:"Public Sans",system-ui,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,monospace;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{background:var(--ground);color:var(--bone);font-family:var(--body);
  line-height:1.55;-webkit-font-smoothing:antialiased}
a{color:var(--aqua)}
button{font-family:inherit;cursor:pointer}
:focus-visible{outline:3px solid var(--aqua);outline-offset:3px;border-radius:5px}
img{max-width:100%}
.wrap{max-width:760px;margin:0 auto;padding:18px 16px 72px}

/* ---------- masthead nav ---------- */
.nav{display:flex;align-items:center;gap:16px;flex-wrap:wrap;
  padding:6px 0 14px;margin-bottom:22px;border-bottom:1px solid var(--line)}
.nav a.n{font-family:var(--mono);font-size:clamp(15px,3.4vw,17px);letter-spacing:.07em;
  text-transform:uppercase;color:var(--muted);text-decoration:none;
  padding:8px 0;border-bottom:2px solid transparent}
.nav a.n:hover{color:var(--bone)}
.nav a.n[aria-current="page"]{color:var(--bone);border-bottom-color:var(--gold)}

/* Every page leads with the drawn title lockup, so the masthead carries the
   section links only — a wordmark there would be a second copy of what the
   artwork already says. On the inner pages the lockup is also the home link. */
.nav.linksonly{justify-content:flex-start;gap:28px;padding-top:14px}
.nav.linksonly a.n{font-size:clamp(16px,3.8vw,19px)}
.titleart{display:block;margin:2px 0 22px;max-width:640px}
.titleart img{width:100%;height:auto;display:block}
@media (max-width:560px){ .titleart{margin:0 0 16px} }

/* ---------- headings and text ---------- */
.brand{font-family:var(--brand);font-weight:600;font-size:15px;letter-spacing:.22em;
  text-transform:uppercase;color:var(--gold);margin:0 0 8px}
.pill{display:inline-block;font-family:var(--mono);font-size:clamp(13px,3vw,15px);
  letter-spacing:.13em;text-transform:uppercase;color:var(--ground);background:var(--gold);
  border-radius:99px;padding:8px 18px;margin-bottom:20px;font-weight:700}
h1{font-family:var(--brand);font-weight:600;font-size:clamp(32px,8.4vw,54px);line-height:1.06;
  letter-spacing:.015em;margin:0 0 16px}
.lede{font-size:clamp(18px,4.4vw,22px);color:var(--muted);margin:0 0 10px;max-width:52ch;line-height:1.5}
.lede b{color:var(--bone)}
h2{font-family:var(--display);font-weight:800;font-size:clamp(21px,5vw,27px);margin:46px 0 8px}
h3{font-family:var(--display);font-weight:800;font-size:18px;margin:0 0 6px}
p{font-size:17px;margin:0 0 15px}
p.dim{color:var(--muted);font-size:14.5px}
.meta{display:flex;gap:14px 24px;flex-wrap:wrap;font-family:var(--mono);
  font-size:clamp(14px,3.4vw,15.5px);letter-spacing:.01em;
  color:var(--bone);margin:24px 0 0;padding-top:20px;border-top:1px solid var(--line)}
.meta b{color:var(--gold);font-weight:700;font-size:1.12em}


/* ---------- badge rows ----------
   The medallions are the identity, so they get real size and real space.
   Each row is a scroll-snap strip on a phone rather than a squashed grid. */
/* Flex rather than grid: with 5 or 6 badges the last row is always partial,
   and grid pins the leftovers to the left edge. Flex-wrap centres them. */
.badges{display:flex;flex-wrap:wrap;justify-content:center;gap:22px 16px;margin:22px 0 8px}
.badges .bg{flex:0 0 128px}
.badges.tight{gap:18px 12px}
.badges.tight .bg{flex:0 0 106px}
.bg{text-align:center}
.bg img{width:104px;height:104px;object-fit:contain;display:block;margin:0 auto 9px}
.badges.tight .bg img{width:80px;height:80px;margin-bottom:7px}
.bg .bt{font-family:var(--display);font-weight:800;font-size:14.5px;line-height:1.25;display:block}
.bg .bd{color:var(--muted);font-size:13px;line-height:1.4;display:block;margin-top:3px}
.badges.tight .bg .bt{font-size:13px}

/* ---------- the four essences ---------- */
/* Four cards, so the columns are fixed rather than auto-fit — auto-fit gave
   3 across and left Master orphaned on a row of its own. 2x2, then 4 across. */
.essence{display:grid;gap:16px;margin:20px 0 6px;grid-template-columns:repeat(2,1fr)}
@media (min-width:660px){ .essence{grid-template-columns:repeat(4,1fr)} }
.es{background:var(--panel);border:1px solid var(--line);border-radius:14px;
  padding:18px 15px;text-align:center}
.es img{width:66px;height:66px;display:block;margin:0 auto 11px}
.es .k{font-family:var(--brand);font-weight:600;font-size:13px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--gold);margin:0 0 5px}
.es p{font-size:14.5px;color:var(--muted);margin:0;line-height:1.5}

/* ---------- lists lifted from the original page ---------- */
.units{display:grid;gap:0;margin:18px 0 0}
.u{display:flex;gap:12px;align-items:baseline;font-size:15px;padding:9px 0;border-top:1px solid var(--line)}
.u:first-child{border-top:0}
.u .n{font-family:var(--mono);font-size:13px;color:var(--muted);min-width:20px;flex:none}
.u .t{font-weight:600}
.u .d{color:var(--muted);margin-left:auto;text-align:right;font-size:15px}
@media (max-width:520px){ .u{flex-wrap:wrap} .u .d{margin-left:32px;text-align:left;width:100%} }

.honest{border-left:3px solid var(--bad);background:rgba(255,138,115,.07);
  border-radius:0 12px 12px 0;padding:18px;margin:22px 0}
.honest p{margin:0 0 10px}.honest p:last-child{margin:0}
.honest b{color:var(--bone)}

.note{border-left:3px solid var(--gold);background:rgba(242,177,52,.08);
  border-radius:0 12px 12px 0;padding:18px;margin:22px 0}
.note p{margin:0 0 10px;font-size:15.5px}.note p:last-child{margin:0}

/* ---------- question and answer ---------- */
.qa{border-top:1px solid var(--line);padding:16px 0}
.qa h3{margin:0 0 5px}
.qa p{font-size:15.5px;color:var(--muted);margin:0}
.qa p b{color:var(--bone)}

/* ---------- course objectives ---------- */
.objectives{list-style:none;counter-reset:obj;margin:18px 0 6px;padding:0}
.objectives li{counter-increment:obj;position:relative;padding:12px 0 12px 46px;
  border-top:1px solid var(--line);font-size:16px;line-height:1.55}
.objectives li:first-child{border-top:0}
.objectives li::before{content:counter(obj,decimal-leading-zero);position:absolute;left:0;top:13px;
  font-family:var(--mono);font-size:13px;color:var(--gold);letter-spacing:.05em}
.objectives li b{color:var(--bone)}

/* ---------- alignment table ---------- */
.tbl{width:100%;border-collapse:collapse;margin:18px 0 6px;font-size:15px}
.tbl th,.tbl td{text-align:left;vertical-align:top;padding:11px 12px 11px 0;
  border-top:1px solid var(--line)}
.tbl thead th{border-top:0;border-bottom:1px solid var(--gold);
  font-family:var(--mono);font-size:11.5px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--gold);font-weight:600;padding-bottom:9px}
.tbl td:first-child{color:var(--bone)}
.tbl td.bloom{font-family:var(--mono);font-size:13px;color:var(--violet);white-space:nowrap}
.tbl td:last-child,.tbl th:last-child{padding-right:0}
.tblwrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
@media (max-width:600px){ .tbl{font-size:14px;min-width:520px} }
.sub-h{margin:34px 0 8px}

/* ---------- the three doors ---------- */
.doors{display:grid;gap:14px;margin:20px 0 0;grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}
.door{display:block;background:var(--panel);border:1px solid var(--line);border-radius:16px;
  padding:20px 18px;text-decoration:none;color:inherit;transition:border-color .15s,background .15s}
.door:hover{border-color:var(--violet);background:var(--panel-2)}
.door .k{font-family:var(--mono);font-size:11px;letter-spacing:.15em;text-transform:uppercase;
  color:var(--gold);display:block;margin-bottom:8px}
.door .h{font-family:var(--display);font-weight:800;font-size:19px;display:block;margin-bottom:6px}
.door .d{color:var(--muted);font-size:14.5px;display:block;line-height:1.5}

/* ---------- call to action ---------- */
.cta{background:var(--panel);border:1px solid var(--line);border-radius:16px;
  padding:24px;margin:30px 0 0}
.cta h3{font-size:21px}
.cta p{font-size:15.5px;color:var(--muted);margin:0 0 16px}
.btn{display:inline-block;background:var(--bone);color:var(--ground);border:0;border-radius:11px;
  padding:14px 22px;font-size:15.5px;font-weight:700;text-decoration:none}
.btn:hover{opacity:.92}
.btn.ghost{background:transparent;color:var(--bone);border:1px solid var(--line)}

/* ---------- the map ---------- */
.map{margin:22px 0 30px;padding:0}
.map picture{display:block}
.map img{width:100%;height:auto;display:block;border-radius:14px;border:1px solid var(--line);
  background:#1C1330}
.map figcaption{margin-top:10px;font-size:13.5px;line-height:1.5;color:var(--muted)}
@media (max-width:700px){ .map{margin:16px 0 24px} .map figcaption{font-size:12.5px} }

/* ---------- form ---------- */
.reg{background:var(--panel);border:1px solid var(--line);border-radius:16px;padding:24px;margin-top:16px}
.reg h3{font-family:var(--display);font-weight:800;font-size:21px;margin:0 0 6px}
.reg .sub{color:var(--muted);font-size:14.5px;margin:0 0 20px}
.f{margin-bottom:15px}
.f label{display:block;font-family:var(--mono);font-size:11.5px;letter-spacing:.13em;
  text-transform:uppercase;color:var(--muted);margin-bottom:7px}
/* ⚠️ Side-by-side fields fell out of line whenever one label wrapped to a
   second line and its neighbour did not — the inputs then sat at different
   heights. Reserving two lines for every label in a row keeps the inputs
   on the same baseline whatever the JS writes into them. */
.row.two .f > label,.row.three .f > label{min-height:2.7em}
@media (max-width:559px){ .row.two .f > label,.row.three .f > label{min-height:0} }
.f input,.f select,.f textarea{width:100%;background:var(--inset);border:1px solid var(--line);
  color:var(--bone);border-radius:10px;padding:12px 13px;font-family:var(--body);font-size:15px}
.f input:focus,.f select:focus,.f textarea:focus{border-color:var(--aqua);outline:none}
/* ⚠️ Placeholders were inheriting the input's own colour, so example text
   like a city or a ZIP read as data the applicant had already entered.
   Dimmer and italic so an empty field looks empty. */
.f input::placeholder,.f textarea::placeholder{color:var(--muted);opacity:.6;font-style:italic}
.f input:-ms-input-placeholder,.f textarea:-ms-input-placeholder{color:var(--muted);opacity:.6}
.f textarea{min-height:78px;resize:vertical}
.f .hint{font-size:13.5px;color:var(--muted);margin:7px 0 0;line-height:1.5}
.row{display:grid;gap:15px}
@media (min-width:560px){ .row.two{grid-template-columns:1fr 1fr}
  .row.three{grid-template-columns:1.2fr .9fr .9fr} }
.check{display:flex;gap:11px;align-items:flex-start;margin:18px 0}
/* ⚠️ display:flex beats the browser's own [hidden]{display:none}, so a
   hidden consent block stayed on screen. This has to outrank it. */
[hidden]{display:none !important}
.check input{width:18px;height:18px;flex:none;margin-top:2px;accent-color:var(--aqua)}
.check label{font-size:14.5px;color:var(--bone);line-height:1.6}
.check label b{color:var(--bone)}
.submit{width:100%;background:var(--bone);color:var(--ground);border:0;border-radius:11px;
  padding:15px;font-size:15.5px;font-weight:700}
.submit:hover{opacity:.92}
.submit:disabled{opacity:.5;cursor:default}
.said{margin-top:14px;font-size:14.5px;padding:14px;border-radius:10px;display:none;line-height:1.6}
.said.ok{display:block;background:rgba(123,216,143,.12);border-left:3px solid var(--good)}
.said.err{display:block;background:rgba(255,138,115,.12);border-left:3px solid var(--bad)}

/* ---------- foot ---------- */
.foot{margin-top:52px;padding-top:22px;border-top:1px solid var(--line);
  font-size:13px;color:var(--muted);line-height:1.8}
.foot .legal{margin-top:16px;font-size:13px;line-height:1.75}

/* ---------- light theme ----------
   Same purple identity, inverted. The course units already follow the
   device, so the public pages do too. */
[data-theme="light"]{
  --ground:#F7F5FB; --bone:#1B1030; --muted:#5B5072; --line:#D6CBEC;
  --panel:#EFEAF8; --panel-2:#E6DEF5; --inset:#FFFFFF;
  --gold:#8A5B00; --aqua:#5B3FA8;
  color-scheme: light;
}
[data-theme="light"] body{ background:var(--ground); color:var(--bone); }
[data-theme="light"] .pill{ background:#1B1030; color:#F3EDE4; }
[data-theme="light"] .map img{ background:#1B1030; border-color:var(--line); }
[data-theme="light"] .btn{ background:#1B1030; color:#F3EDE4; }
[data-theme="light"] .btn.ghost{ background:transparent; color:var(--bone); }
[data-theme="light"] .submit{ background:#1B1030; color:#F3EDE4; }

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


/* ---------- the scroll ----------
   Three slices from the commissioned artwork: a top cap, a tile that repeats
   down the middle, and a foot cap. The caps are tone-matched to the tile at
   their mating edges, so the joins are invisible.
   Padding is expressed as a percentage of the container width because the
   background scales with width — the ornaments must never sit under the text. */
.scroll{--scroll-ink:#2B1D06;--scroll-rule:rgba(43,29,6,.20);
  margin:20px 0 14px;
  color:var(--scroll-ink);
  padding:40% 18% 33%;
  background-image:url(../img/scroll/scroll-top.webp),
                   url(../img/scroll/scroll-foot.webp),
                   url(../img/scroll/scroll-tile.webp);
  background-position:center top,center bottom,center top;
  background-repeat:no-repeat,no-repeat,repeat-y;
  background-size:100% auto,100% auto,100% auto}
.scroll .lead{font-family:var(--brand);font-weight:600;font-size:clamp(11px,2.4vw,14px);
  letter-spacing:.2em;text-transform:uppercase;color:#7A5C1C;margin:0 0 16px;text-align:center}
.scroll .u{border-top:1px solid var(--scroll-rule)}
.scroll .u .n{color:#8A6A22}
.scroll .u .t{color:var(--scroll-ink)}
.scroll .u .d{color:#5C4A22}
.scroll p{color:#3A2A0E}
@media (max-width:560px){ .scroll{padding:42% 16% 35%} }

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


/* ---------- the scroll ----------
   Three parts on purpose: a top roll, a parchment sheet that grows with its
   content, and a bottom roll. When the drawn three-part scroll arrives it
   replaces the three backgrounds here and nothing else moves. */
.scroll{--parch:#F8DAAA;--parch-2:#F0D2A0;--scroll-ink:#2B1D06;
  --scroll-rule:rgba(43,29,6,.18);--roll-dark:#6E5218;
  margin:20px 0 12px}
.scroll .roll{position:relative;height:20px;margin:0 -8px;border-radius:10px;
  background:linear-gradient(180deg,#E4C177 0%,#C49041 44%,#8A6522 74%,#DDB65E 100%);
  border:1px solid var(--roll-dark)}
.scroll .roll::before,.scroll .roll::after{content:"";position:absolute;top:-3px;width:26px;
  height:26px;border-radius:50%;border:1px solid var(--roll-dark);
  background:radial-gradient(circle at 38% 32%,#F0D68F,#B98F2C 62%,#7B5C1A)}
.scroll .roll::before{left:-9px}
.scroll .roll::after{right:-9px}
.scroll .sheet{background:linear-gradient(180deg,var(--parch) 0%,var(--parch-2) 100%);
  border-left:1px solid #D8B87A;border-right:1px solid #D8B87A;
  color:var(--scroll-ink);padding:26px 22px 24px;margin:0 4px}
.scroll .sheet .lead{font-family:var(--brand);font-weight:600;font-size:13px;
  letter-spacing:.2em;text-transform:uppercase;color:#7A5C1C;margin:0 0 14px;text-align:center}
.scroll .u{border-top:1px solid var(--scroll-rule)}
.scroll .u .n{color:#8A6A22}
.scroll .u .t{color:var(--scroll-ink)}
.scroll .u .d{color:#5C4A22}
.scroll p{color:#3A2A0E}
@media (max-width:520px){ .scroll .sheet{padding:20px 15px} }