/* ESL School of Open Scholarship — house style
   Woven-textile palette on warm stone; navy/gilt banner; woven-check band */
@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,400;0,9..144,600;0,9..144,800;1,9..144,400&family=Archivo:wght@400;500;600;700&family=Newsreader:ital,opsz,wght@0,6..72,400;0,6..72,500;1,6..72,400&display=swap');

:root{
  --loom-ink:#1c1930;
  --navy:#16213f;
  --royal-violet:#4b2a7b;
  --orchid:#a8559f;
  --periwinkle:#8592d6;
  --warp-white:#f6f2ea;
  --fuchsia:#b8296f;
  --crimson:#9c1f37;
  --teal:#23706e;
  --gilt:#c9a43a;
  --bronze:#86663a;
  --stone:#e9e5dd;
  --stone-2:#dcd6cb;
  --ink:#1b1a1f;
  --ink-soft:#4a4752;
  --rule:#b9b1a3;
  --card:#fbf9f5;
  --ok:#23706e;
  --bad:#9c1f37;
  --serif:'Fraunces', Georgia, serif;
  --body:'Newsreader', Georgia, serif;
  --sans:'Archivo', system-ui, sans-serif;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --stone:#16151c; --stone-2:#22202b; --ink:#ece7de; --ink-soft:#b4adbf;
    --rule:#4a4556; --card:#1e1c26; --warp-white:#ece7de;
  }
}
:root[data-theme="dark"]{
  --stone:#16151c; --stone-2:#22202b; --ink:#ece7de; --ink-soft:#b4adbf;
  --rule:#4a4556; --card:#1e1c26; --warp-white:#ece7de;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--stone);color:var(--ink);font-family:var(--body);font-size:19px;line-height:1.55}
a{color:var(--royal-violet);text-underline-offset:3px}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) a{color:var(--periwinkle)}}
:root[data-theme="dark"] a{color:var(--periwinkle)}
img,svg{max-width:100%}

/* banner */
.banner{background:var(--navy);color:var(--gilt)}
.banner-inner{max-width:1120px;margin:0 auto;padding:18px 20px 14px;display:flex;gap:16px;align-items:center;flex-wrap:wrap}
.mark{width:46px;height:46px;flex:none}
.brand{font-family:var(--serif);font-weight:600;font-size:22px;line-height:1.1;letter-spacing:.01em;color:var(--gilt);text-decoration:none}
.brand small{display:block;font-family:var(--sans);font-weight:500;font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;color:#d9c98f;margin-top:4px}
.nav{margin-left:auto;display:flex;gap:18px;flex-wrap:wrap;font-family:var(--sans);font-size:14px}
.nav a{color:#efe3b8;text-decoration:none;border-bottom:1px solid transparent;padding-bottom:2px}
.nav a:hover,.nav a[aria-current="page"]{border-color:var(--gilt)}
.weave{height:12px;background:
  repeating-linear-gradient(90deg,var(--royal-violet) 0 12px,var(--orchid) 12px 18px,var(--periwinkle) 18px 24px,var(--fuchsia) 24px 30px,var(--teal) 30px 36px,var(--gilt) 36px 42px),
  var(--navy);
  -webkit-mask:repeating-linear-gradient(0deg,#000 0 3px,rgba(0,0,0,.55) 3px 6px);
          mask:repeating-linear-gradient(0deg,#000 0 3px,rgba(0,0,0,.55) 3px 6px)}

main{max-width:1120px;margin:0 auto;padding:28px 20px 60px}
.kicker{font-family:var(--sans);font-size:12.5px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--crimson);margin:0 0 6px}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .kicker{color:#e07a92}}
:root[data-theme="dark"] .kicker{color:#e07a92}
h1,h2,h3{font-family:var(--serif);line-height:1.12;margin:.2em 0 .4em;font-weight:600}
h1{font-size:clamp(34px,5.6vw,60px);letter-spacing:-.01em;font-weight:800}
h2{font-size:clamp(25px,3.2vw,34px)}
h3{font-size:22px}
.lede{font-size:clamp(20px,2.2vw,24px);color:var(--ink-soft);max-width:44ch}
hr.rule{border:0;border-top:1px solid var(--rule);margin:30px 0}
hr.rule.thick{border-top:3px double var(--rule)}

/* front page: uneven columns */
.front{display:grid;grid-template-columns:1.6fr 1fr;gap:34px;align-items:start}
.front .aside{border-left:1px solid var(--rule);padding-left:26px}
@media (max-width:820px){.front{grid-template-columns:1fr}.front .aside{border-left:0;padding-left:0;border-top:1px solid var(--rule);padding-top:18px}}

.catalogue{display:grid;grid-template-columns:repeat(12,1fr);gap:0;border-top:2px solid var(--ink)}
.course{grid-column:span 4;padding:18px 18px 20px 0;border-bottom:1px solid var(--rule);text-decoration:none;color:inherit;display:block;position:relative}
.course:nth-child(3n+1){grid-column:span 5}
.course:nth-child(3n+2){grid-column:span 4}
.course:nth-child(3n){grid-column:span 3}
.course + .course{padding-left:18px;border-left:1px solid var(--rule)}
.course:nth-child(3n+1){border-left:0;padding-left:0}
.course .num{font-family:var(--sans);font-size:12px;font-weight:700;letter-spacing:.12em;color:var(--bronze)}
.course h3{margin:.25em 0 .3em}
.course p{margin:0;color:var(--ink-soft);font-size:17px}
.course:hover h3{color:var(--royal-violet)}
.course .status{font-family:var(--sans);font-size:12px;margin-top:10px;display:inline-block;padding:2px 8px;border:1px solid var(--rule);border-radius:2px}
.course .status.done{background:var(--teal);color:#fff;border-color:var(--teal)}
.course .tag{font-family:var(--sans);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--orchid);margin-left:8px}
@media (max-width:820px){.course,.course:nth-child(n){grid-column:span 12;border-left:0!important;padding-left:0!important}}

/* forms & buttons */
label{font-family:var(--sans);font-size:14px;font-weight:600;display:block;margin:12px 0 4px}
input[type=text],input[type=email],input[type=date],select{width:100%;font:inherit;font-size:17px;padding:10px 12px;border:1px solid var(--rule);background:var(--card);color:var(--ink);border-radius:2px}
.btn{font-family:var(--sans);font-weight:600;font-size:15px;padding:11px 18px;border:2px solid var(--navy);background:var(--navy);color:var(--gilt);cursor:pointer;border-radius:2px;text-decoration:none;display:inline-block}
.btn.ghost{background:transparent;color:var(--ink);border-color:var(--ink)}
.btn:disabled{opacity:.45;cursor:not-allowed}
.btn + .btn{margin-left:8px}
.note{font-family:var(--sans);font-size:14px;color:var(--ink-soft)}
.panel{background:var(--card);border-top:3px solid var(--gilt);padding:18px 20px;margin:18px 0}

/* module page */
.module-head{display:grid;grid-template-columns:1fr 280px;gap:30px}
@media (max-width:820px){.module-head{grid-template-columns:1fr}}
.meta{font-family:var(--sans);font-size:14px;border-left:1px solid var(--rule);padding-left:18px}
.meta dt{font-weight:700;margin-top:8px}
.meta dd{margin:0;color:var(--ink-soft)}
.toc{font-family:var(--sans);font-size:15px;columns:2;column-gap:28px;padding-left:18px}
@media (max-width:620px){.toc{columns:1}}
.lesson{max-width:70ch}
.lesson h2{margin-top:1.4em}
.lesson h2 .n{font-family:var(--sans);font-size:14px;color:var(--bronze);display:block;letter-spacing:.12em}
.practice{list-style:none;padding:0}
.practice li{padding:8px 0 8px 30px;border-bottom:1px dotted var(--rule);position:relative}
.practice li::before{content:"";position:absolute;left:4px;top:15px;width:12px;height:12px;border:2px solid var(--teal);transform:rotate(45deg)}
.cite{font-size:16px;color:var(--ink-soft)}
.sources{list-style:none;padding:0;counter-reset:s}
.sources li{counter-increment:s;padding:14px 0 14px 44px;border-bottom:1px solid var(--rule);position:relative}
.sources li::before{content:counter(s);position:absolute;left:0;top:12px;font-family:var(--serif);font-size:26px;color:var(--gilt);font-weight:600}
.sources .ref{font-size:17px}
.sources .what{font-family:var(--sans);font-size:14px;color:var(--ink-soft);margin:4px 0}
.sources ul{margin:6px 0 0;padding-left:18px;font-size:16.5px}
.activity{border:1px solid var(--rule);padding:16px 18px;margin:16px 0;background:var(--card)}
.activity .kicker{color:var(--teal)}

/* quiz */
.q{margin:18px 0;padding:14px 0;border-top:1px solid var(--rule)}
.q p{font-weight:500;margin:0 0 8px}
.q label{font-family:var(--body);font-weight:400;font-size:18px;display:flex;gap:10px;align-items:flex-start;margin:6px 0;cursor:pointer}
.q input{margin-top:6px}
.q .fb{font-family:var(--sans);font-size:14px;margin-top:6px}
.q.right .fb{color:var(--ok)} .q.wrong .fb{color:var(--bad)}
.score{font-family:var(--serif);font-size:28px}

/* progress */
.bar{height:8px;background:var(--stone-2);margin:8px 0}
.bar span{display:block;height:100%;background:linear-gradient(90deg,var(--royal-violet),var(--orchid),var(--gilt))}

/* certificate */
.cert-wrap{background:var(--card);padding:16px;border:1px solid var(--rule);overflow:auto}
.cert-wrap svg{width:100%;height:auto;display:block}
.fingerprint{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:13px;word-break:break-all;background:var(--stone-2);padding:8px 10px}

footer{border-top:1px solid var(--rule);max-width:1120px;margin:0 auto;padding:22px 20px 40px;font-family:var(--sans);font-size:13.5px;color:var(--ink-soft);display:flex;gap:20px;flex-wrap:wrap;justify-content:space-between}

@media print{
  .banner,.weave,footer,.no-print{display:none!important}
  body{background:#fff}
  main{padding:0}
  .cert-wrap{border:0;padding:0}
}