/* Artizan Governance — AIFMD portal, the written course.
   Loaded after portal.css. Long-form reading: one column at a comfortable
   measure, a contents rail that tracks position, rules and callouts as
   marginal objects rather than boxes stacked in the flow. */

/* ---------- page furniture ---------- */
.readhead{background:radial-gradient(120% 120% at 20% 0%,#16273d 0%,#101d2e 50%,#070e18 100%);
  color:#f4f1ea;padding:calc(var(--shell-h) + 64px) 0 56px;position:relative;overflow:hidden}
.readhead:after{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(60% 60% at 82% 30%,rgba(201,162,39,.10) 0%,transparent 72%)}
.readhead .wrap{position:relative;z-index:2;max-width:1180px}
.readhead .lab{color:var(--gold-2)}
.readhead h1{font:600 clamp(32px,3.6vw,50px)/1.1 var(--serif);letter-spacing:-.025em;margin:16px 0 0;max-width:20ch}
.readhead .standfirst{color:#c3cad4;font-size:19.5px;line-height:1.6;margin:18px 0 0;max-width:60ch}
.readmeta{display:flex;gap:26px;flex-wrap:wrap;margin-top:28px;font:500 12px/1 var(--sans);
  letter-spacing:.1em;text-transform:uppercase;color:#8b9aad;align-items:center}
.readmeta b{color:var(--gold-2);font-weight:600}
.readmeta a{color:#c3cad4;border-bottom:1px solid rgba(201,162,39,.5);padding-bottom:2px}
.readmeta a:hover{color:#fff}

/* ---------- the two-column reading frame ---------- */
.prose,.toc{min-width:0}
.readwrap{max-width:1180px;margin:0 auto;padding:0 32px;display:grid;
  grid-template-columns:232px minmax(0,1fr);gap:56px;align-items:start}
.toc{position:sticky;top:calc(var(--shell-h) + 28px);padding:44px 0 0;font:500 14px/1.5 var(--sans)}
.toc p.lab{margin:0 0 14px}
.toc a{display:block;padding:7px 0 7px 14px;border-left:2px solid var(--rule);color:var(--muted);
  transition:color .18s var(--ease),border-color .18s var(--ease)}
.toc a:hover{color:var(--ink)}
.toc a.on{color:var(--ink);border-left-color:var(--gold);font-weight:600}
.prose{padding:44px 0 90px;max-width:none}
.prose section{scroll-margin-top:calc(var(--shell-h) + 20px)}
.prose h2{font:600 clamp(24px,2.3vw,31px)/1.25 var(--serif);letter-spacing:-.02em;margin:52px 0 0;max-width:26ch}
.prose section:first-of-type h2{margin-top:8px}
.prose h3{font:600 20px/1.35 var(--serif);margin:34px 0 0}
.prose p{margin:16px 0 0;max-width:68ch}
.prose .standfirst{font:500 21px/1.62 var(--serif);color:var(--ink-2);margin:0 0 6px;max-width:64ch}
.prose ul,.prose ol{margin:16px 0 0;padding-left:22px;max-width:66ch}
.prose li{margin:9px 0;padding-left:4px}
.prose li::marker{color:var(--accent)}
.prose strong{font-weight:600}
.prose em{font-style:italic}
.prose a{border-bottom:1px solid rgba(168,118,42,.45)}
.prose a:hover{border-bottom-color:var(--accent);color:var(--accent)}

/* a rule reference: set apart, mono label, never a shouty box */
.prose .rule{height:auto;background:none;display:block;margin:22px 0 0;padding:2px 0 2px 18px;
  border-left:2px solid var(--gold);font:15.5px/1.6 var(--sans);color:var(--ink-2);max-width:64ch}
.prose .rule b{display:block;font:600 11px/1 var(--num);letter-spacing:.12em;color:var(--accent);
  text-transform:uppercase;margin-bottom:7px}

/* a callout: practice, EU-only, proposed */
.prose .callout{margin:26px 0 0;padding:20px 24px;background:var(--paper-2);border-radius:3px;max-width:66ch}
.prose .callout .lab{margin:0 0 8px;color:var(--accent)}
.prose .callout p{margin:0;max-width:none}
.prose .callout p + p{margin-top:10px}
.prose .callout.eu{background:rgba(47,95,149,.07);box-shadow:inset 3px 0 0 var(--blue)}
.prose .callout.eu .lab{color:var(--blue)}
.prose .callout.warn{background:rgba(168,118,42,.08);box-shadow:inset 3px 0 0 var(--accent)}
.prose .callout.warn .lab{color:var(--accent)}

/* steps: numbered work, not a list of nouns */
.prose .steps{margin:26px 0 0;max-width:66ch}
.prose .steps ol{counter-reset:s;list-style:none;padding:0;margin:0}
.prose .steps li{counter-increment:s;position:relative;padding:14px 0 14px 52px;border-top:1px solid var(--rule);margin:0}
.prose .steps li:last-child{border-bottom:1px solid var(--rule)}
.prose .steps li:before{content:counter(s,decimal-leading-zero);position:absolute;left:0;top:15px;
  font:600 13px/1 var(--num);color:var(--accent);letter-spacing:.06em}
.prose .steps li b{font-weight:600}

/* tables read as tables, and scroll on a phone rather than squeezing */
.prose .tablewrap{margin:26px 0 0;overflow-x:auto;-webkit-overflow-scrolling:touch}
.prose table.grid{border-collapse:collapse;width:100%;min-width:560px;font:15.5px/1.55 var(--sans)}
.prose table.grid th{text-align:left;font:600 11px/1.3 var(--sans);letter-spacing:.11em;text-transform:uppercase;
  color:var(--muted);padding:0 18px 10px 0;border-bottom:1.5px solid var(--ink);vertical-align:bottom}
.prose table.grid td{padding:14px 18px 14px 0;border-bottom:1px solid var(--rule);vertical-align:top;color:var(--ink-2)}
.prose table.grid tr td:first-child{color:var(--ink);font-weight:600;width:24%}

.prose blockquote.pull{margin:34px 0 0;padding:0 0 0 22px;border-left:3px solid var(--gold);
  font:italic 600 22px/1.45 var(--serif);color:var(--ink);max-width:56ch}
.prose blockquote.pull p{margin:0;max-width:none}

/* ---------- what sits beside the reading ---------- */
.beside{margin:70px 0 0;padding:30px 0 0;border-top:1px solid var(--rule);max-width:68ch}
.beside h3{font:600 19px/1.3 var(--serif);margin:0 0 4px}
.beside p{color:var(--muted);font-size:16px;margin:4px 0 0}
.linkrow{display:grid;gap:1px;background:var(--rule);border:1px solid var(--rule);margin-top:18px}
.linkrow a{background:var(--paper);padding:16px 20px;display:flex;gap:16px;align-items:baseline;
  transition:background .18s var(--ease)}
.linkrow a:hover{background:#fff}
.linkrow .k{font:600 10px/1.4 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--accent);
  flex:0 0 96px}
.linkrow .t{font:17px/1.4 var(--serif);color:var(--ink)}
.linkrow .m{margin-left:auto;font:500 12px/1.4 var(--num);color:var(--faint);white-space:nowrap}

.pager{display:flex;gap:16px;justify-content:space-between;margin:54px 0 0;padding-top:26px;
  border-top:1px solid var(--rule);flex-wrap:wrap}
.pager a{font:500 15px/1.4 var(--sans);color:var(--ink-2);max-width:44%}
.pager a:hover{color:var(--accent)}
.pager .lab{display:block;margin-bottom:5px}
.pager .r{text-align:right;margin-left:auto}

/* ---------- index pages ---------- */
.partblock{margin:48px 0 0}
.partblock .num{font:600 12px/1 var(--num);letter-spacing:.14em;color:var(--accent)}
.partblock h2{font:600 26px/1.25 var(--serif);margin:10px 0 0}
.partblock p.sub{margin:8px 0 0;color:var(--muted);max-width:62ch}
.modrows{margin-top:20px;border-top:1px solid var(--rule)}
.modrow{display:grid;grid-template-columns:56px 1fr auto;gap:22px;align-items:baseline;padding:18px 6px;
  border-bottom:1px solid var(--rule);transition:background .18s var(--ease)}
.modrow:hover{background:#fff}
.modrow .n{font:500 12px/1 var(--num);color:var(--faint)}
.modrow h3{font:600 20px/1.3 var(--serif)}
.modrow p{margin:5px 0 0;color:var(--muted);font-size:16px;max-width:64ch}
.modrow .meta{font:500 12px/1.5 var(--num);color:var(--faint);text-align:right;white-space:nowrap}
.modrow .vlink{display:inline-block;margin-top:7px;font:600 10px/1 var(--sans);letter-spacing:.12em;
  text-transform:uppercase;color:var(--accent)}

/* ---------- questions ---------- */
.filters{display:flex;gap:8px;flex-wrap:wrap;margin:26px 0 0}
.filters button{border:1px solid var(--rule);background:var(--paper);padding:9px 15px;border-radius:999px;
  font:500 13px/1 var(--sans);color:var(--ink-2);transition:all .18s var(--ease)}
.filters button:hover{border-color:var(--accent);color:var(--accent)}
.filters button[aria-pressed="true"]{background:var(--ink);border-color:var(--ink);color:var(--paper)}
.qlist{margin:26px 0 0;border-top:1px solid var(--rule);max-width:76ch}
.qitem{border-bottom:1px solid var(--rule)}
.qitem summary{list-style:none;cursor:pointer;padding:18px 40px 18px 0;position:relative;
  font:600 18.5px/1.45 var(--serif);color:var(--ink)}
.qitem summary::-webkit-details-marker{display:none}
.qitem summary:after{content:"+";position:absolute;right:8px;top:18px;font:400 22px/1 var(--sans);color:var(--accent)}
.qitem[open] summary:after{content:"–"}
.qitem summary:hover{color:var(--accent)}
.qitem .a{padding:0 40px 22px 0}
.qitem .a p{margin:0 0 12px;max-width:68ch}
.qitem .a .rule{margin:14px 0 0;padding:2px 0 2px 16px;border-left:2px solid var(--gold);
  font:15px/1.55 var(--sans);color:var(--ink-2)}
.qitem .a .rule b{display:block;font:600 10.5px/1 var(--num);letter-spacing:.12em;color:var(--accent);
  text-transform:uppercase;margin-bottom:6px}
.qmeta{display:flex;gap:14px;flex-wrap:wrap;margin-top:12px;font:500 11px/1 var(--sans);
  letter-spacing:.08em;text-transform:uppercase}
.qmeta a{color:var(--accent);border-bottom:1px solid rgba(168,118,42,.4);padding-bottom:2px}
.qmeta span{color:var(--faint)}

/* ---------- assessment ---------- */
.quiz{max-width:74ch;margin:34px 0 0}
.qcard{border:1px solid var(--rule);background:#fff;padding:28px 30px;border-radius:3px}
.qcard .lab{color:var(--accent)}
.qcard h3{font:600 21px/1.45 var(--serif);margin:10px 0 0}
.opts{margin:22px 0 0;display:grid;gap:10px}
.opts button{text-align:left;border:1px solid var(--rule);background:var(--paper);padding:15px 18px;
  border-radius:3px;font:16.5px/1.5 var(--serif);color:var(--ink);transition:all .16s var(--ease)}
.opts button:hover:not(:disabled){border-color:var(--accent);background:#fff}
.opts button.right{border-color:var(--ok,#3a6b4a);background:rgba(58,107,74,.08)}
.opts button.wrong{border-color:#a8392d;background:rgba(168,57,45,.07)}
.opts button:disabled{cursor:default;opacity:.75}
.opts button.right,.opts button.wrong{opacity:1}
.why{margin:20px 0 0;padding:18px 20px;background:var(--paper-2);border-radius:3px;font:16px/1.6 var(--serif)}
.why .lab{margin:0 0 7px;color:var(--accent)}
.quizbar{display:flex;align-items:center;gap:18px;margin:24px 0 0;font:500 13px/1 var(--sans);color:var(--muted)}
.quizbar .track{flex:1;height:3px;background:var(--rule)}
.quizbar .track i{display:block;height:100%;background:var(--gold);width:0;transition:width .4s var(--ease)}
.score{font:600 46px/1 var(--serif);color:var(--ink)}

@media (max-width:900px){
  .readwrap{grid-template-columns:minmax(0,1fr);gap:0;padding:0 20px}
  .toc{position:static;padding:26px 0 0;border-bottom:1px solid var(--rule);padding-bottom:20px}
  .toc a{display:inline-block;border-left:0;border-bottom:2px solid var(--rule);padding:6px 14px 6px 0;margin-right:10px}
  .toc a.on{border-left:0;border-bottom-color:var(--gold)}
  .prose{padding:30px 0 70px;min-width:0}
  .prose p,.prose ul,.prose ol,.prose .rule,.prose .callout{max-width:none}
  .modrow{grid-template-columns:40px 1fr;gap:14px}
  .modrow .meta{grid-column:2;text-align:left;margin-top:6px}
  .readhead{padding:calc(var(--shell-h) + 40px) 0 40px}
}
@media print{
  .shell,.toc,.pager,.beside,.foot{display:none}
  .readwrap{display:block}
  body{background:#fff}
}

/* visually hidden, still read aloud */
.vh{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* phones: tables and long citations must not widen the page */
@media (max-width:760px){
  .readwrap{padding:0 16px}
  .readhead .wrap{padding:0 16px}
  .prose h2{font-size:24px;line-height:1.2}
  .prose .rule{padding-left:14px;font-size:15px}
  .tablewrap{margin-left:-16px;margin-right:-16px;padding:0 16px}
  .linkrow a{grid-template-columns:1fr;gap:4px}
  .qitem summary{padding-right:34px}
}


/* ---------- onboarding: three steps to a pathway ---------- */
.stepview{background:var(--paper);min-height:calc(100vh - var(--shell-h))}
.stepwrap{max-width:720px;margin:0 auto;padding:calc(var(--shell-h) + 64px) 32px 96px}
.stepwrap.wide{max-width:1120px}
.stepwrap h1,.stepwrap h2{font:700 40px/1.08 var(--serif);letter-spacing:-.02em;margin:10px 0 14px;color:var(--ink)}
.stepwrap .standfirst{max-width:60ch}
.fld{margin-top:38px}
.fld label{display:block;font:700 15px/1.4 var(--sans);color:var(--ink)}
.fld .hint{margin:5px 0 14px;font:400 14.5px/1.55 var(--sans);color:var(--muted)}
.opt-note{font-weight:400;color:var(--muted)}
.opts{display:flex;flex-wrap:wrap;gap:10px}
.opt{background:#fff;border:1px solid var(--rule);border-radius:4px;padding:13px 18px;
  font:600 14.5px/1.2 var(--sans);color:var(--ink-2);cursor:pointer;text-align:left;
  transition:border-color .15s var(--ease),color .15s var(--ease),background .15s var(--ease)}
.opt:hover{border-color:var(--accent);color:var(--ink)}
.opt.on{border-color:var(--navy);background:var(--navy);color:#f4f1ea}
.dq{background:#fff;border:1px solid var(--rule);border-radius:5px;padding:24px 26px;margin-top:16px}
.dq h3{font:700 17px/1.35 var(--sans);margin:4px 0 14px;color:var(--ink)}
.dq .opts{flex-direction:column}
.dq .opt{width:100%}
.navrow{display:flex;align-items:center;gap:20px;flex-wrap:wrap;margin-top:40px}
.linkbtn{background:none;border:0;padding:0;font:600 14px/1 var(--sans);color:var(--muted);
  text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.linkbtn:hover{color:var(--ink)}
.cta[disabled]{opacity:.45;cursor:not-allowed}
.paths{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:18px;margin-top:30px}
.pathcard{background:#fff;border:1px solid var(--rule);border-radius:5px;padding:26px 24px;display:flex;flex-direction:column}
.pathcard.rec{border-color:var(--accent);box-shadow:0 10px 34px rgba(11,20,32,.07)}
.pathcard .kick{display:inline-block;font:700 10px/1 var(--sans);letter-spacing:.16em;text-transform:uppercase;
  color:var(--accent);margin-bottom:10px}
.pathcard h3{font:700 21px/1.2 var(--serif);margin:0 0 4px;color:var(--ink)}
.pathcard .meta{font:600 12px/1.4 var(--sans);letter-spacing:.04em;color:var(--muted);margin:0 0 12px}
.pathcard p{font:400 15px/1.6 var(--sans);color:var(--ink-2);margin:0 0 20px}
.pathcard .cta{margin-top:auto;align-self:flex-start}

/* the strip the home page shows once a pathway is set */
.pathstrip{background:var(--navy-3);color:#f4f1ea;border-bottom:1px solid rgba(255,255,255,.07)}
.pathstrip .wrap{display:flex;align-items:center;gap:18px;padding-top:16px;padding-bottom:16px;flex-wrap:wrap}
.pathstrip b{font:600 15px/1.3 var(--sans)}
.pathstrip .meta{font:500 13px/1.3 var(--sans);color:#9fb0c4}
.pathstrip a{font:600 13px/1 var(--sans);color:var(--gold-2);text-decoration:underline;text-underline-offset:3px}
.film.off,.modrow.off{opacity:.44}
.onpath{display:inline-block;font:700 9.5px/1 var(--sans);letter-spacing:.14em;text-transform:uppercase;
  color:var(--accent);border:1px solid var(--accent);border-radius:2px;padding:4px 7px;margin-left:10px;vertical-align:2px}

/* ---------- certificate ---------- */
.cert{background:linear-gradient(180deg,#fdfbf4,#f5efe0);border:2px solid var(--accent);border-radius:10px;
  padding:48px 44px;text-align:center;position:relative;margin:22px 0}
.cert::before{content:"";position:absolute;inset:9px;border:1px solid var(--accent);border-radius:6px;opacity:.55;pointer-events:none}
.cert .seal{width:58px;height:58px;margin:0 auto 22px;border-radius:12px;display:flex;align-items:center;justify-content:center;
  font:600 27px/1 var(--serif);letter-spacing:.02em;background:linear-gradient(145deg,#252e3c,#141a22);color:#b18b55}
.cert .t{font:700 12px/1 var(--sans);letter-spacing:.2em;text-transform:uppercase;color:var(--accent);margin-bottom:22px}
.cert .k{font:600 11px/1 var(--sans);letter-spacing:.18em;text-transform:uppercase;color:var(--muted)}
.cert .nm{font:700 34px/1.1 var(--serif);letter-spacing:-.02em;color:var(--ink);margin:14px 0}
.cert .prog{font:700 19px/1.35 var(--sans);color:var(--ink);margin:6px auto 4px;max-width:30ch;letter-spacing:-.01em}
.cert .meta{display:flex;justify-content:center;gap:40px;flex-wrap:wrap;margin-top:26px;padding-top:22px;border-top:1px solid rgba(168,118,42,.3)}
.cert .meta .v{font:700 20px/1 var(--serif);color:var(--ink)}
.cert .meta .l{font:600 10px/1 var(--sans);letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin-top:7px}
.cert .iss{margin-top:22px;font:600 12px/1.5 var(--sans);letter-spacing:.06em;color:var(--muted)}
.namebox{margin:22px 0 0;max-width:420px}
.namebox label{display:block;font:700 13px/1.4 var(--sans);color:var(--ink);margin-bottom:7px}
.namebox input{width:100%;padding:13px 15px;border:1px solid var(--rule);border-radius:4px;
  font:400 15.5px/1.3 var(--sans);color:var(--ink);background:#fff}
.namebox input:focus{outline:2px solid var(--accent);outline-offset:1px}
.namebox .hint{margin-top:7px;font:400 13px/1.5 var(--sans);color:var(--muted)}
@media print{
  .shell,.readhead,.quizbar,.review,.underbar,.foot,.actions,.namebox{display:none!important}
  .cert{box-shadow:none;margin:0;break-inside:avoid}
  body{background:#fff}
}
@media (max-width:760px){
  .stepwrap{padding:calc(var(--shell-h) + 36px) 18px 70px}
  .stepwrap h1,.stepwrap h2{font-size:30px}
  .opt{width:100%}
  .cert{padding:34px 20px}
  .cert .nm{font-size:26px}
}