/* dsl-status — Prayas's painted register, plain words.
 *
 * Ground: hot saffron with fourteen standing stripes, one per teaching day. Every surface that
 * holds words is the night cut into that ground. Type is Asar with Spline Sans Mono.
 *
 * 🔴 THE STRIPES ARE ALL THE SAME HEIGHT. A first version varied their height by state and read as
 * a bar chart. Days differ by COLOUR alone — cobalt where a line stands, vermilion for today, low
 * umber where nothing is written. Nothing on any page can be added up, and no change may bring
 * height back as a variable.
 *
 * 🔴 NOTHING HERE IS A MEASURE. No bar, no percentage, no streak, no count of who wrote most, no
 * cohort average. The only number anywhere is a student's own strike count, which the course
 * document requires her to be told.
 *
 * 🔴 Plain words on every surface. No epigrams, no clever labels. Say what a thing is and what to
 * do with it.
 */

@import url('https://fonts.googleapis.com/css2?family=Asar&family=Spline+Sans+Mono:wght@300;400;600&display=swap');

:root {
  --ochre:    #e6a01e;
  --ochre-lo: #c9761a;
  --ochre-hi: #f2c14a;
  --night:    #17120c;
  --night-lo: #241a10;
  --cobalt:   #1a49b8;
  --cobalt-hi:#2f6fd0;
  --teal:     #12a89a;
  --verm:     #e0442a;
  --verm-hi:  #ff6a3c;
  --cream:    #f7f0e0;
  --cream-dim:#c9bda3;
  --display: 'Asar', Georgia, 'Times New Roman', serif;
  --mono: 'Spline Sans Mono', ui-monospace, 'SF Mono', Menlo, monospace;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  min-height: 100vh; color: var(--night); background: var(--ochre);
  font-family: var(--display); font-size: 18px; line-height: 1.5; overflow-x: hidden;
}

.ground {
  position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(120% 80% at 12% 4%,  rgba(255,214,110,.95) 0%, rgba(255,214,110,0) 58%),
    radial-gradient(95% 70% at 88% 92%,  rgba(201,118,26,.92) 0%,  rgba(201,118,26,0) 62%),
    radial-gradient(70% 55% at 62% 30%,  rgba(255,180,40,.55) 0%,  rgba(255,180,40,0) 70%),
    linear-gradient(168deg, var(--ochre-hi) 0%, var(--ochre) 46%, var(--ochre-lo) 100%);
  filter: saturate(1.12);
}
.ground::after {
  content: ''; position: absolute; inset: -10%;
  background-image:
    radial-gradient(rgba(23,18,12,.16) 1px, transparent 1.6px),
    radial-gradient(rgba(255,235,180,.20) 1px, transparent 1.8px);
  background-size: 5px 5px, 7px 7px; background-position: 0 0, 3px 4px;
  mix-blend-mode: multiply; opacity: .5;
}
.days { position: fixed; inset: 0; z-index: 1; pointer-events: none; }
.days svg { width: 100%; height: 100%; display: block; }

.page { position: relative; z-index: 2; max-width: 940px; margin: 0 auto; padding: 40px 26px 130px; }

/* ---- header and the three sections ---- */
.crown { margin-bottom: 4px; }
.crown .who { font-size: clamp(1.4rem, 3vw, 2.1rem); line-height: 1.1; margin: 0 0 6px; }
.crown .course {
  font-family: var(--mono); font-size: .64rem; font-weight: 600; letter-spacing: .2em;
  text-transform: uppercase; color: rgba(23,18,12,.62); margin: 0;
}
.crown .course a, .out, .back { color: rgba(23,18,12,.62); text-decoration: none; }
.crown .course a:hover, .out:hover, .back:hover { color: var(--night); }

.nav { display: flex; gap: 8px; flex-wrap: wrap; margin: 22px 0 34px; }
.nav a {
  font-family: var(--mono); font-size: .68rem; font-weight: 600; letter-spacing: .16em;
  text-transform: uppercase; text-decoration: none;
  color: rgba(23,18,12,.66); background: rgba(23,18,12,.09);
  padding: 9px 16px; clip-path: polygon(2% 0, 98% 4%, 100% 96%, 1% 100%);
}
.nav a:hover { background: rgba(23,18,12,.2); color: var(--night); }
.nav a[aria-current="page"] { background: var(--night); color: var(--ochre-hi); }
.nav .admin { margin-left: auto; background: transparent; border: 1px solid rgba(224,68,42,.6); color: var(--verm); }

/* ---- night cut into the ground: anything holding words ---- */
.carve, .now, .leaf, .panel, .compose, .gate, .sheet, .verdict, .standfirst, .splash {
  position: relative; background: var(--night); color: var(--cream);
  border-radius: 3px 26px 5px 22px / 22px 4px 24px 6px;
  box-shadow: 0 22px 50px -20px rgba(23,18,12,.7), 0 3px 0 rgba(255,224,150,.28);
}
.now, .panel, .compose, .standfirst { padding: 26px clamp(20px, 3vw, 34px) 28px; margin-bottom: 26px; }
.leaf { padding: 18px clamp(18px, 2.6vw, 28px) 20px; margin-bottom: 16px; width: min(700px, 100%); }
.leaf:nth-child(even) { margin-left: auto; }

h2.sec {
  font-family: var(--mono); font-size: .68rem; font-weight: 600; letter-spacing: .2em;
  text-transform: uppercase; color: rgba(23,18,12,.66); margin: 38px 0 14px;
}
h2.sec:first-child { margin-top: 0; }
p.hint { color: rgba(23,18,12,.66); font-size: .92rem; margin: 0 0 18px; max-width: 66ch; }
.panel p.hint, .now p.hint, .leaf p.hint { color: var(--cream-dim); }

/* ---- writing today's line ---- */
.now .stamp {
  font-family: var(--mono); font-size: .64rem; font-weight: 600; letter-spacing: .18em;
  text-transform: uppercase; color: var(--verm-hi); margin: 0 0 14px;
}
.now .ask { font-size: clamp(1.25rem, 2.6vw, 1.8rem); line-height: 1.25; margin: 0 0 20px; color: var(--cream); }
.now .marker {
  display: inline-block; font-family: var(--mono); font-size: .62rem; letter-spacing: .1em;
  text-transform: uppercase; color: var(--ochre-hi); border: 1px solid rgba(242,193,74,.42);
  padding: 3px 10px; border-radius: 20px; margin: 0 7px 12px 0;
}

textarea, input[type=text], input[type=date], select {
  font-family: var(--display); font-size: 1.02rem; color: var(--cream);
  background: transparent; border: 0; border-bottom: 2px solid rgba(247,240,224,.3);
  width: 100%; padding: 5px 0 10px;
}
textarea { min-height: 88px; resize: vertical; }
textarea::placeholder, input::placeholder { color: rgba(247,240,224,.34); }
textarea:focus, input:focus, select:focus { outline: none; border-bottom-color: var(--verm-hi); }
select { font-family: var(--mono); font-size: .74rem; width: auto; padding-right: 10px; }
select option { background: var(--night); color: var(--cream); }

button, .go {
  font-family: var(--mono); font-size: .7rem; font-weight: 600; letter-spacing: .16em;
  text-transform: uppercase; color: var(--night); background: var(--verm);
  border: 0; padding: 11px 22px; cursor: pointer; text-decoration: none; display: inline-block;
  clip-path: polygon(2% 0, 98% 4%, 100% 96%, 1% 100%);
  transition: background .4s cubic-bezier(.22,.9,.3,1);
}
button:hover, .go:hover { background: var(--verm-hi); }
button.thin {
  background: transparent; color: var(--cream-dim); padding: 0; clip-path: none;
  border-bottom: 1px solid rgba(247,240,224,.3); font-size: .6rem;
}
button.thin:hover { background: transparent; color: var(--ochre-hi); }
button.thin.danger:hover { color: var(--verm-hi); border-bottom-color: var(--verm-hi); }
.act { display: flex; align-items: center; gap: 16px; margin-top: 18px; flex-wrap: wrap; }
.said { font-family: var(--mono); font-size: .64rem; letter-spacing: .14em; text-transform: uppercase;
        color: var(--ochre-hi); opacity: 0; transition: opacity .6s; }
.said.on { opacity: 1; }
label.f { display: block; margin: 0 0 16px; }
label.f > span, .compose .fld > span {
  display: block; font-family: var(--mono); font-size: .6rem; font-weight: 600;
  letter-spacing: .14em; text-transform: uppercase; color: var(--ochre-hi); margin-bottom: 5px;
}
.compose .fld { display: block; margin: 0 0 16px; }
.compose .stamp { font-family: var(--mono); font-size: .64rem; font-weight: 600; letter-spacing: .18em;
  text-transform: uppercase; color: var(--verm-hi); margin: 0 0 18px; }

/* ---- the wall ---- */
.said-by { display: flex; align-items: baseline; gap: 12px; margin: 0 0 8px; }
.said-by .nm { font-size: 1rem; color: var(--ochre-hi); }
.mine-tag { font-family: var(--mono); font-size: .56rem; letter-spacing: .16em;
            text-transform: uppercase; color: var(--verm-hi); }
.leaf .d { font-family: var(--mono); font-size: .6rem; font-weight: 600; letter-spacing: .18em;
           text-transform: uppercase; color: var(--ochre-hi); margin: 0 0 8px; }
.leaf .a { font-size: .9rem; color: var(--cream-dim); margin: 0 0 10px; }
.leaf .t { white-space: pre-wrap; margin: 0; color: var(--cream); }
.leaf .r { margin: 14px 0 0; padding: 12px 16px; background: rgba(242,193,74,.12);
  border-left: 4px solid var(--ochre-hi); border-radius: 0 10px 3px 0; font-size: .95rem; color: var(--ochre-hi); }
.leaf .r b { display: block; font-family: var(--mono); font-size: .56rem; font-weight: 600;
             letter-spacing: .18em; text-transform: uppercase; opacity: .8; margin-bottom: 4px; }
.leaf.is-mine { box-shadow: 0 22px 50px -20px rgba(23,18,12,.7), 0 3px 0 var(--verm); }
.quiet { color: var(--cream-dim); }
.day-head { font-family: var(--mono); font-size: .66rem; font-weight: 600; letter-spacing: .18em;
  text-transform: uppercase; color: rgba(23,18,12,.7); margin: 34px 0 6px; }
.day-ask { font-size: .95rem; color: rgba(23,18,12,.68); margin: 0 0 18px; max-width: 66ch; }

/* ---- strikes and attendance ---- */
.strikes { display: flex; gap: 9px; margin: 0 0 16px; }
.strike { width: 34px; height: 34px; flex: 0 0 34px; background: var(--night-lo);
  border: 1px solid rgba(247,240,224,.18); clip-path: polygon(6% 2%, 96% 0, 100% 94%, 3% 100%); }
.strike.on { background: var(--verm); border-color: var(--verm-hi); }
.count { font-size: 1.15rem; color: var(--cream); margin: 0 0 8px; }
table.plain { border-collapse: collapse; width: 100%; margin: 14px 0 0; font-size: .95rem; }
table.plain th, table.plain td {
  text-align: left; padding: 9px 14px 9px 0; vertical-align: top;
  border-bottom: 1px solid rgba(247,240,224,.16); color: var(--cream);
}
table.plain th { font-family: var(--mono); font-size: .58rem; font-weight: 600; letter-spacing: .16em;
  text-transform: uppercase; color: var(--ochre-hi); }
table.plain td.right, table.plain th.right { text-align: right; padding-right: 0; }
.mk { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: 9px;
      background: transparent; border: 1px solid rgba(247,240,224,.4); }
.mk.seen { background: var(--cobalt); border-color: var(--cobalt-hi); }
.mk.lent { background: var(--teal); border-color: var(--teal); }

/* ---- readings ---- */
.reading { width: min(760px, 100%); }
.reading h2 { font-size: clamp(1.2rem, 2.4vw, 1.6rem); line-height: 1.2; color: var(--cream); margin: 0 0 12px; }
.reading .t { white-space: pre-wrap; margin: 0 0 12px; color: var(--cream); }
.reading .src { margin: 14px 0 0; padding: 12px 16px; background: rgba(247,240,224,.07);
  border-left: 3px solid var(--teal); border-radius: 0 10px 3px 0; font-size: .92rem; color: var(--cream-dim); }
.reading .src b { display: block; font-family: var(--mono); font-size: .56rem; font-weight: 600;
  letter-spacing: .18em; text-transform: uppercase; color: var(--teal); margin-bottom: 4px; }
.reading .lnk { margin: 12px 0 0; }
.reading .lnk a { font-family: var(--mono); font-size: .68rem; color: var(--ochre-hi);
  text-decoration: none; border-bottom: 1px solid rgba(242,193,74,.4); }
.reading .own { display: flex; gap: 16px; margin: 20px 0 0; }
.stance { font-family: var(--mono); font-size: .56rem; font-weight: 600; letter-spacing: .16em;
  text-transform: uppercase; padding: 2px 9px; border-radius: 20px; }
.stance.mine  { color: var(--verm-hi); border: 1px solid rgba(255,106,60,.5); }
.stance.found { color: var(--teal);    border: 1px solid rgba(18,168,154,.55); }
.stances { display: flex; gap: 10px; margin: 0 0 18px; flex-wrap: wrap; }
.stances button { background: rgba(247,240,224,.1); color: var(--cream-dim); }
.stances button[aria-pressed="true"] { background: var(--verm); color: var(--night); }
.stance-ask { font-size: .95rem; color: var(--cream); margin: 0 0 8px; }

/* ---- picking a student (teacher only) ---- */
.who-pick { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin: 0 0 22px; }
.who-pick select { border-bottom-color: rgba(23,18,12,.35); color: var(--night); font-size: .8rem; }
.who-pick select option { background: var(--ochre-hi); color: var(--night); }
.who-pick .lab { font-family: var(--mono); font-size: .6rem; font-weight: 600; letter-spacing: .16em;
  text-transform: uppercase; color: rgba(23,18,12,.66); }

/* ---- sign in ---- */
.gate { max-width: 700px; margin: 12vh auto 0; padding: 32px clamp(22px, 3vw, 38px) 34px; }
.gate .ask { font-size: clamp(1.3rem, 2.6vw, 1.8rem); margin: 0 0 8px; color: var(--cream); }
.gate p { color: var(--cream-dim); margin: 0 0 20px; }
.gate .fine { font-size: .9rem; }
.guests { display: flex; flex-wrap: wrap; gap: 9px; margin: 0 0 18px; }
.guest { font-family: var(--mono); font-size: .66rem; font-weight: 600; letter-spacing: .1em;
  text-transform: uppercase; text-decoration: none; color: var(--cream);
  background: rgba(247,240,224,.1); padding: 10px 15px;
  clip-path: polygon(3% 0, 98% 4%, 100% 96%, 1% 100%); }
.guest:hover { background: var(--cobalt); }
.guest.is-teacher { color: var(--ochre-hi); border: 1px solid rgba(242,193,74,.4); }
.guest.is-teacher:hover { background: var(--verm); color: var(--night); }
.more summary { cursor: pointer; font-family: var(--mono); font-size: .6rem; font-weight: 600;
  letter-spacing: .16em; text-transform: uppercase; color: var(--cream-dim); padding: 6px 0; }
.more .guests { margin-top: 12px; max-height: 42vh; overflow-y: auto; }

/* ---- the sheets ---- */
.howto { font-size: .92rem; color: rgba(23,18,12,.68); margin: 0 0 22px; max-width: 64ch; }
.sheetbar { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; margin: 0 0 12px; }
.sheetbar .lab, .rounds .lab { font-family: var(--mono); font-size: .58rem; font-weight: 600;
  letter-spacing: .18em; text-transform: uppercase; color: rgba(23,18,12,.62); margin-right: 6px; }
.mark { width: 32px; height: 32px; flex: 0 0 32px; border: 0; padding: 0; cursor: pointer;
  background: var(--night-lo); color: var(--cream-dim); font-family: var(--mono); font-size: .64rem;
  clip-path: polygon(6% 2%, 96% 0, 100% 94%, 3% 100%); }
.mark.has { background: var(--cobalt); color: var(--cream); }
.mark[aria-current="true"] { background: var(--verm); color: var(--cream); }
.mark.last { flex-basis: 50px; width: 50px; }
.rounds { margin-left: auto; display: flex; gap: 7px; align-items: baseline; }
.rounds button { font-size: .62rem; padding: 5px 11px; background: rgba(23,18,12,.12); color: var(--night); }
.rounds button[aria-current="true"] { background: var(--night); color: var(--ochre-hi); }
.sheet { width: min(720px, 100%); padding: 30px clamp(22px, 3.4vw, 40px) 32px; }
.sheet h1 { font-size: clamp(1.4rem, 3vw, 2.1rem); line-height: 1.15; color: var(--cream); margin: 0 0 4px; }
.sheet .num { font-family: var(--mono); font-size: .58rem; font-weight: 600; letter-spacing: .2em;
  text-transform: uppercase; color: var(--ochre-hi); margin: 0 0 14px; }
.sheet p { color: var(--cream); margin: 0 0 12px; }
.sheet p.strong { color: var(--ochre-hi); }
.sheet .note { border-left: 3px solid var(--teal); padding-left: 14px; margin: 16px 0;
  color: var(--cream-dim); font-size: .92rem; }
.sheet label.tick { display: flex; gap: 11px; align-items: flex-start; margin: 0 0 8px;
  color: var(--cream); cursor: pointer; }
.sheet label.tick input[type=checkbox] {
  appearance: none; -webkit-appearance: none; width: 17px; height: 17px; margin-top: 5px;
  flex: 0 0 auto; background: rgba(247,240,224,.08); border: 1px solid rgba(247,240,224,.42);
  clip-path: polygon(7% 2%, 95% 0, 100% 93%, 3% 100%); }
.sheet label.tick input[type=checkbox]:checked { background: var(--verm); border-color: var(--verm-hi); }
.sheet label.tick.struck span { text-decoration: line-through; text-decoration-color: var(--verm);
  text-decoration-thickness: 2px; color: var(--cream-dim); }
.sheet label.tick.struck input[type=checkbox] { background: transparent; border-color: var(--verm);
  background-image: linear-gradient(to bottom right, transparent 44%, var(--verm) 44%, var(--verm) 56%, transparent 56%); }
.sheet label.tick.nested { margin-left: 28px; }
.sheet label.tick input.inline { width: min(300px, 60%); margin-left: 8px; clip-path: none;
  appearance: auto; -webkit-appearance: none; border-bottom: 1px solid rgba(247,240,224,.34); }
.sheet .field { margin: 0 0 14px; }
.sheet .field > span { display: block; font-family: var(--mono); font-size: .6rem; font-weight: 600;
  letter-spacing: .14em; text-transform: uppercase; color: var(--ochre-hi); margin-bottom: 4px; }
.sheet .field.short { display: inline-block; width: min(280px, 100%); margin-right: 16px; }
.sheet .circle { margin: 0 0 16px; }
.sheet .circle > span { display: block; color: var(--cream); margin-bottom: 6px; }
.sheet .circle button { background: rgba(247,240,224,.1); color: var(--cream-dim); margin-right: 8px; }
.sheet .circle button[aria-pressed="true"] { background: var(--verm); color: var(--night); }
.turn { display: flex; gap: 16px; align-items: center; margin-top: 24px; flex-wrap: wrap; }
.verdict { width: min(720px, 100%); padding: 22px 26px; margin: 0 0 24px; }
.verdict .big { font-size: 1.25rem; color: var(--cream); margin: 0 0 6px; }
.verdict .why { color: var(--cream-dim); font-size: .93rem; margin: 0; }
.verdict a.go { margin-top: 16px; }
.front { width: min(720px, 100%); }
.front details { margin-bottom: 8px; }
.front summary { cursor: pointer; font-family: var(--mono); font-size: .62rem; font-weight: 600;
  letter-spacing: .16em; text-transform: uppercase; color: rgba(23,18,12,.7); padding: 7px 0; }
.front .body { color: var(--cream); font-size: .95rem; background: var(--night);
  padding: 18px 22px; border-radius: 3px 20px 4px 18px / 18px 3px 19px 4px; margin-bottom: 6px; }
.front .body p { margin: 0 0 10px; }
.front .body b { color: var(--ochre-hi); }
.front .body ul { margin: 0 0 12px; padding: 0; list-style: none; }
.front .body li { position: relative; padding-left: 18px; margin: 0 0 9px;
  color: var(--cream-dim); font-size: .9rem; }
.front .body li::before { content: ''; position: absolute; left: 0; top: .62em; width: 8px; height: 8px;
  background: var(--teal); clip-path: polygon(8% 0, 96% 5%, 100% 95%, 2% 100%); }
.front .body a { color: var(--ochre-hi); word-break: break-word; }
.front .body hr { border: 0; border-top: 1px solid rgba(247,240,224,.18); margin: 16px 0; }
.spread { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .8fr);
  gap: clamp(26px, 4vw, 70px); align-items: start; }
@media (max-width: 1000px) { .spread { grid-template-columns: minmax(0, 1fr); } }

@media (max-width: 700px) {
  body { font-size: 17px; }
  .page { padding: 26px 16px 90px; }
  .leaf:nth-child(even) { margin-left: 0; }
  .nav .admin { margin-left: 0; }
}
@keyframes rise { from { transform: translateY(20px); opacity: 0 } to { transform: none; opacity: 1 } }
.now, .leaf, .panel { animation: rise .8s cubic-bezier(.19,.9,.28,1) both; }
@media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important } }

.nav-role { font-family: var(--mono); font-size: .6rem; font-weight: 600; letter-spacing: .16em;
  text-transform: uppercase; color: var(--verm); border: 1px solid rgba(224,68,42,.5);
  padding: 9px 14px; margin-left: auto; align-self: center; }
@media (max-width: 700px) { .nav-role { margin-left: 0; } }

/* ---- day pagination ---- */
.pick { display: flex; gap: 7px; flex-wrap: wrap; margin: 0 0 22px; }
.pick a {
  font-family: var(--mono); font-size: .62rem; font-weight: 600; letter-spacing: .1em;
  text-transform: uppercase; text-decoration: none;
  background: rgba(23,18,12,.1); color: rgba(23,18,12,.66); padding: 6px 12px;
  clip-path: polygon(3% 0, 97% 4%, 100% 96%, 1% 100%);
}
.pick a:hover { background: rgba(23,18,12,.22); color: var(--night); }
.pick a[aria-current="page"] { background: var(--night); color: var(--ochre-hi); }

/* ---- comments under a line ---- */
.cmt { display: flex; gap: 10px; align-items: baseline; flex-wrap: wrap;
  margin: 10px 0 0; padding: 9px 14px; background: rgba(247,240,224,.07);
  border-left: 3px solid var(--teal); border-radius: 0 10px 3px 0; }
.cmt .who { font-family: var(--mono); font-size: .58rem; font-weight: 600; letter-spacing: .14em;
  text-transform: uppercase; color: var(--teal); flex: 0 0 auto; }
.cmt .say { flex: 1 1 200px; color: var(--cream); font-size: .95rem; }
.cmt button.thin { flex: 0 0 auto; }
.cmt-form { display: flex; gap: 12px; align-items: baseline; margin: 14px 0 0; flex-wrap: wrap; }
.cmt-form input { flex: 1 1 220px; width: auto; font-size: .95rem; }
.cmt-form button { flex: 0 0 auto; padding: 8px 16px; font-size: .62rem; }

/* Shown only when the running server is older than the page. */
.stale {
  position: relative; z-index: 5; background: var(--verm); color: var(--night);
  font-family: var(--mono); font-size: .72rem; letter-spacing: .06em; line-height: 1.5;
  padding: 12px 20px; text-align: center;
}
.stale code { background: rgba(23,18,12,.18); padding: 1px 6px; }

/* An empty verdict box rendered as a bare black slab on the last-sheet column. */
.verdict:empty { display: none; }

/* ---- profiles ---- */
a.nm { text-decoration: none; border-bottom: 1px solid rgba(242,193,74,.3); }
a.nm:hover { color: var(--verm-hi); border-bottom-color: var(--verm-hi); }
.profile .role { font-family: var(--mono); font-size: .6rem; font-weight: 600; letter-spacing: .16em;
  text-transform: uppercase; color: var(--ochre-hi); margin: 0 0 12px; }
.profile h2 { font-size: clamp(1.4rem, 3vw, 2.1rem); color: var(--cream); margin: 0 0 14px; }
.profile .field { margin: 0 0 16px; }
.profile .field b { display: block; font-family: var(--mono); font-size: .58rem; font-weight: 600;
  letter-spacing: .18em; text-transform: uppercase; color: var(--ochre-hi); margin-bottom: 5px; }
.profile .field span { color: var(--cream); white-space: pre-wrap; }

/* ---- splash ---- */
.splash { max-width: 760px; margin: 14vh auto 0; padding: 40px clamp(24px, 4vw, 48px) 44px; }
.splash h1 { font-size: clamp(1.8rem, 5vw, 3.2rem); line-height: 1.08; color: var(--cream); margin: 0 0 14px; }
.splash .sub { font-size: 1.1rem; color: var(--cream-dim); margin: 0 0 26px; line-height: 1.5; }
.splash .go { font-size: .78rem; padding: 14px 26px; }
.splash .fine { font-size: .88rem; color: var(--cream-dim); margin-top: 22px; }

/* ---- welcome and help ---- */
.step { counter-increment: step; }
.step h2::before { content: counter(step) ". "; color: var(--verm-hi); }
.doc { counter-reset: step; }
.doc h2 { font-size: 1.15rem; color: var(--cream); margin: 26px 0 8px; }
.doc h2:first-child { margin-top: 0; }
.doc p { color: var(--cream); margin: 0 0 12px; }
.doc p.small { color: var(--cream-dim); font-size: .93rem; }
.doc code { font-family: var(--mono); font-size: .86em; color: var(--ochre-hi); }

.profile .field a, .doc a { color: var(--ochre-hi); text-decoration: none;
  border-bottom: 1px solid rgba(242,193,74,.4); }
.profile .field a:hover, .doc a:hover { color: var(--verm-hi); border-bottom-color: var(--verm-hi); }

/* ---- the lockup: Anant's mark, then the course name ---------------------------
 * 🔴 The mark is Anant National University's and is used verbatim. Never recoloured to
 * this page's palette, never restyled, never redrawn — a logo does not vary.
 */
.lockup { display: inline-flex; align-items: center; gap: clamp(12px, 1.6vw, 20px); }
/* 🔴 Class name is `anant`, NOT `mark`. It was `.mark`, which is also the sheet-bar's button
 * class — and that rule sets `font-size: .64rem`, so every `em` on the logo resolved against
 * 10.24px instead of the title's 51px and the mark rendered at 13 pixels. Measured, not guessed.
 * Two unrelated things must never share a class name.
 *
 * Sized to the cap height of the title beside it: the mark is as tall as the D. */
.lockup .anant {
  display: block; flex: 0 0 auto; border-radius: 2px;
  font-size: inherit; width: .78em; height: .78em;
  box-shadow: 0 6px 18px -8px rgba(23,18,12,.7);
}
.lockup .name { display: block; }
@media (max-width: 620px) { .lockup { gap: 10px; } }

/* Whether a strike actually reached her. Teacher's view only. */
.sent, .unsent { display: block; font-family: var(--mono); font-size: .56rem; font-weight: 600;
  letter-spacing: .14em; text-transform: uppercase; margin-top: 5px; }
.sent { color: var(--teal); }
.unsent { color: var(--verm-hi); }