/* =====================================================================
   THE ORDER tab — order.php (hub), about.php, regions.php, credentials.php
   One bold element: the Charter, set as an engraved instrument on paper.
   Everything else stays quiet: hairline registers, mono codes, serif headings.
   ===================================================================== */

/* ---- the Charter (the one bold moment) ------------------------------- */
.charter-sec{background:linear-gradient(180deg,var(--vault) 0,var(--vault) 340px,var(--paper2) 340px,var(--paper2) 100%)}
.charter{position:relative;max-width:1040px;margin:0 auto;background:#fbfbfc;color:var(--ink);padding:clamp(28px,6vw,92px) clamp(20px,6vw,96px) clamp(36px,5vw,72px);
  border:1px solid #cfd5df;box-shadow:0 1px 0 #fff inset,0 40px 80px rgba(4,10,20,.18);isolation:isolate;overflow:hidden}
/* double engraved rule inside the sheet */
.charter::before{content:"";position:absolute;inset:clamp(10px,1.6vw,18px);border:1px solid rgba(143,112,18,.45);outline:1px solid rgba(143,112,18,.18);outline-offset:4px;pointer-events:none;z-index:-1}
/* guilloche watermark, printed in gold through a mask */
.charter::after{content:"";position:absolute;right:-90px;top:120px;width:520px;height:520px;background:var(--gold);opacity:.07;pointer-events:none;z-index:-1;
  -webkit-mask:url(../../brand/guilloche.svg) center/contain no-repeat;mask:url(../../brand/guilloche.svg) center/contain no-repeat}
.charter-head{display:grid;grid-template-columns:auto 1fr;gap:clamp(18px,3vw,36px);align-items:center;padding-bottom:clamp(22px,3vw,34px);border-bottom:1px solid #d6dbe3;margin-bottom:clamp(26px,3vw,40px)}
.charter-head img{width:clamp(76px,9vw,112px);height:auto;border-radius:50%;box-shadow:0 0 0 1px rgba(143,112,18,.35),0 8px 26px rgba(4,10,20,.18)}
.charter-head .reg{font:500 12px/1.4 var(--mono);letter-spacing:.08em;color:#6b5410;margin-bottom:10px}
.charter-head h2{font-size:clamp(34px,4.4vw,62px);line-height:1;color:var(--ink);max-width:none}
.charter-head p{margin-top:12px;font-size:15px;color:var(--ink3)}
.charter .preamble{font:500 clamp(20px,1.9vw,25px)/1.5 var(--serif);color:var(--ink);max-width:60ch;margin-bottom:clamp(30px,4vw,48px)}
.charter .preamble::first-letter{float:left;font:600 4.1em/.8 var(--serif);color:#8f7012;margin:.08em .1em 0 0}
.articles{list-style:none;counter-reset:art;border-top:1px solid #d6dbe3}
.articles>li{counter-increment:art;display:grid;grid-template-columns:minmax(64px,120px) minmax(0,1fr);gap:clamp(14px,3vw,40px);padding:clamp(18px,2.2vw,28px) 0;border-bottom:1px solid #e1e5eb}
.articles>li::before{content:counter(art,upper-roman);font:600 clamp(26px,2.6vw,38px)/1 var(--serif);color:#8f7012;letter-spacing:.02em;padding-top:2px}
.articles h3{font-size:clamp(22px,1.9vw,27px);color:var(--ink);margin-bottom:8px}
.articles p{color:var(--ink2);font-size:16.5px;line-height:1.7;max-width:64ch}
.articles p+p{margin-top:.7em}
.articles b{color:var(--ink);font-weight:600}
.articles a{color:#6b5410;text-decoration:underline;text-decoration-color:rgba(143,112,18,.45);text-underline-offset:3px}
.articles a:hover{color:var(--ink)}
.charter-seal{display:grid;grid-template-columns:auto minmax(0,1fr);gap:clamp(20px,4vw,48px);align-items:center;margin-top:clamp(30px,4vw,52px);padding:clamp(22px,3vw,34px);border:1px solid #d6dbe3;background:linear-gradient(180deg,#fff,#f6f7f9)}
.charter-seal img{width:clamp(110px,15vw,180px);height:auto;border-radius:50%;box-shadow:0 0 0 1px rgba(143,112,18,.4),0 14px 40px rgba(4,10,20,.22)}
.charter-seal h3{font-size:clamp(24px,2.2vw,30px);color:var(--ink);margin-bottom:6px}
.charter-seal .motto{font:600 clamp(20px,2vw,26px)/1.2 var(--serif);color:#6b5410;letter-spacing:.04em;margin-bottom:12px}
.charter-seal dl{display:grid;grid-template-columns:auto 1fr;gap:6px 16px;font-size:15px;color:var(--ink2)}
.charter-seal dt{font:600 16px/1.5 var(--serif);color:var(--ink)}
.charter-colophon{display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px 24px;margin-top:clamp(24px,3vw,36px);padding-top:18px;border-top:1px solid #d6dbe3;font:400 12.5px/1.5 var(--mono);letter-spacing:.06em;color:var(--ink3)}
.charter-colophon b{color:var(--ink);font-weight:500}
.charter-tools{max-width:1040px;margin:22px auto 0;display:flex;flex-wrap:wrap;gap:8px;justify-content:flex-end}
.charter-tools .btn-quiet{color:var(--ink2);border-color:#c5ccd6}
.charter-tools .btn-quiet:hover{color:#6b5410;border-color:#8f7012}
.charter-tools .share-pop{left:auto;right:0}

/* ---- quiet building blocks ------------------------------------------- */
.split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(28px,5vw,80px);align-items:start}
.split.wide-left{grid-template-columns:minmax(0,1.35fr) minmax(0,1fr)}
.stack>*+*{margin-top:1em}
.stack p{color:var(--text2)}
.paper .stack p{color:var(--ink2)}
.lead-text{font:500 clamp(21px,1.8vw,26px)/1.45 var(--serif);color:var(--text);max-width:52ch}
.paper .lead-text{color:var(--ink)}
.note-ncage{margin-top:18px;padding:12px 14px;border-left:2px solid var(--silver);background:rgba(185,194,207,.05);font-size:13.5px;color:var(--text3);max-width:70ch}
.paper .note-ncage{border-left-color:#9aa5b5;background:#eef0f4;color:var(--ink3)}

/* lists of duties: does / never does */
.duty{border-top:1px solid var(--line2)}
.duty h3{font-size:24px;padding:18px 0 8px}
.duty ul{list-style:none}
.duty li{padding:12px 0 12px 26px;border-bottom:1px solid var(--line);position:relative;color:var(--text2)}
.duty li::before{content:"";position:absolute;left:2px;top:22px;width:12px;height:1px;background:var(--gold)}
.duty.never li::before{background:var(--bad);height:1px;transform:rotate(45deg);box-shadow:0 0 0 0 transparent}
.duty.never li::after{content:"";position:absolute;left:2px;top:22px;width:12px;height:1px;background:var(--bad);transform:rotate(-45deg)}
.duty b{color:var(--text);font-weight:500}

/* sequence (a true sequence only) */
.seq{list-style:none;counter-reset:seq;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border-top:1px solid var(--line2)}
.seq li{counter-increment:seq;padding:22px 22px 24px 0;border-right:1px solid var(--line);position:relative}
.seq li+li{padding-left:22px}
.seq li:last-child{border-right:0}
.seq li::before{content:counter(seq);display:block;font:600 34px/1 var(--serif);color:var(--gold-l);margin-bottom:12px}
.seq h3,.seq h4{font-size:22px;margin-bottom:6px}
.seq p{font-size:14.5px;color:var(--text2)}
.paper .seq{border-top-color:#c9d0da}
.paper .seq li{border-right-color:var(--pline)}
.paper .seq li::before{color:#8f7012}
@media (max-width:1023px){.seq{grid-template-columns:repeat(2,minmax(0,1fr))}.seq li:nth-child(2){border-right:0}.seq li:nth-child(3){padding-left:0}.seq li:nth-child(-n+2){border-bottom:1px solid var(--line)}.paper .seq li:nth-child(-n+2){border-bottom-color:var(--pline)}}
@media (max-width:560px){.seq{grid-template-columns:1fr}.seq li,.seq li+li{padding:20px 0;border-right:0;border-bottom:1px solid var(--line)}.paper .seq li{border-bottom-color:var(--pline)}}

/* register ledger: one row per jurisdiction */
.ledger{border-top:1px solid var(--line2)}
.ledger-row{display:grid;grid-template-columns:72px minmax(0,1.2fr) minmax(0,1.4fr) minmax(0,1fr);gap:18px 28px;align-items:baseline;padding:22px 0;border-bottom:1px solid var(--line)}
.ledger-row .cc{font:500 13px/1 var(--mono);letter-spacing:.12em;color:var(--gold-l)}
.ledger-row h3{font-size:26px}
.ledger-row .cov{display:block;margin-top:4px;font:400 12.5px/1.4 var(--mono);color:var(--text3);letter-spacing:.04em}
.ledger-row p{font-size:15px;color:var(--text2)}
.ledger-row .codes{display:flex;flex-direction:column;gap:4px;font:400 13px/1.5 var(--mono);color:var(--text2)}
.ledger-row .codes span{color:var(--text3)}
.ledger-row .more{grid-column:2/-1;font-size:14px}
.ledger-row .more a{color:var(--gold-l)}
.ledger-row .more a:hover{text-decoration:underline;text-underline-offset:3px}
@media (max-width:900px){.ledger-row{grid-template-columns:52px minmax(0,1fr)}.ledger-row>p,.ledger-row .codes,.ledger-row .more{grid-column:2}}

.reach{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px;list-style:none}
.reach li{padding:7px 12px;border:1px solid var(--line2);border-radius:2px;font-size:14px;color:var(--text2)}
.paper .reach li{border-color:#c5ccd6;color:var(--ink2)}

/* credential panels (by type) */
.cred{display:flex;flex-direction:column;gap:12px}
.cred h3{font-size:25px;margin:0}
.cred p{font-size:15px}
.cred .codes{list-style:none;border-top:1px solid var(--line);font:400 14px/1.4 var(--mono)}
.cred .codes li{display:flex;justify-content:space-between;gap:12px;padding:9px 0;border-bottom:1px solid var(--line)}
.cred .codes li span{color:var(--text3);font-family:var(--sans);font-size:13.5px}
.cred .codes li b{font-weight:500;color:var(--text);letter-spacing:.04em}
.cred .card-foot{margin-top:auto;padding-top:6px}
.paper .cred .codes,.paper .cred .codes li{border-color:var(--pline)}
.paper .cred .codes li b{color:var(--ink)}
.paper .cred .codes li span{color:var(--ink3)}

/* official registers, per jurisdiction */
.regs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(16px,2vw,26px)}
.regbox{position:relative;border:1px solid var(--pline);background:#fff;padding:clamp(20px,2.4vw,30px)}
.regbox header{display:flex;justify-content:space-between;align-items:baseline;gap:12px;flex-wrap:wrap;padding-bottom:12px;border-bottom:1px solid var(--pline);margin-bottom:6px}
.regbox h3{font-size:27px;color:var(--ink)}
.regbox header span{font:400 12.5px/1.3 var(--mono);color:var(--ink3);letter-spacing:.04em}
.regbox table{width:100%;border-collapse:collapse;font-size:14.5px}
.regbox th,.regbox td{text-align:left;padding:11px 0;border-bottom:1px solid #e6e9ee;vertical-align:baseline}
.regbox th{font:400 13.5px/1.35 var(--sans);color:var(--ink3);width:32%;padding-right:12px}
.regbox td.v{font:500 14px/1.3 var(--mono);color:var(--ink);letter-spacing:.02em;padding-right:12px;white-space:nowrap}
.regbox td.go{text-align:right;white-space:nowrap}
.regbox td.go a{color:#6b5410;font-size:13.5px;border-bottom:1px solid rgba(143,112,18,.4)}
.regbox td.go a:hover{color:var(--ink);border-bottom-color:var(--ink)}
.regbox address{font-style:normal;margin-top:14px;font-size:14px;color:var(--ink2)}
.regbox address b{display:block;font:500 11.5px/1 var(--mono);letter-spacing:.1em;color:var(--ink3);margin-bottom:6px}
@media (max-width:1023px){.regs{grid-template-columns:1fr}}
@media (max-width:520px){.regbox th{width:auto;display:block;border:0;padding:10px 0 0}.regbox tr{display:grid;grid-template-columns:1fr auto;border-bottom:1px solid #e6e9ee}.regbox th{grid-column:1/-1}.regbox td{border:0;padding:4px 0 10px}}

/* summary table */
.sumtable td.mono a{border-bottom:1px solid var(--line2)}
.sumtable td.mono a:hover{color:var(--gold-l);border-bottom-color:var(--gold)}
.sumtable .na{color:var(--text3)}
.sumtable td:first-child{white-space:nowrap}

/* notice (official disclaimer) */
.notice{position:relative;border:1px solid var(--line2);padding:clamp(20px,2.6vw,32px) clamp(20px,2.6vw,36px);background:linear-gradient(180deg,rgba(13,35,65,.5),rgba(7,19,38,.4))}
.notice h2{font-size:clamp(24px,2.2vw,30px);margin-bottom:12px}
.notice p{color:var(--text2);font-size:15.5px}
.notice p+p{margin-top:.8em}

/* region plates (regions.php) */
.region{padding:clamp(56px,7vw,96px) 0;border-top:1px solid var(--line)}
.region:first-child{border-top:0;padding-top:0}
.region-head{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:18px 40px;align-items:end;margin-bottom:28px}
.region-head .cc{font:500 13px/1 var(--mono);letter-spacing:.14em;color:var(--gold-l);margin-bottom:12px;display:flex;gap:10px;align-items:center}
.region-head .cc i{font-style:normal;font-size:18px;letter-spacing:0}
.region-head h2{font-size:clamp(36px,4.2vw,60px)}
.region-head .co{margin-top:8px;font-size:15.5px;color:var(--text2)}
.region-head .co span{font-family:var(--mono);color:var(--text3);font-size:13px;margin-left:8px}
.region-codes{display:flex;flex-wrap:wrap;gap:8px;justify-content:flex-end}
.region-codes a,.region-codes span{display:inline-flex;gap:8px;align-items:center;padding:8px 11px;border:1px solid var(--line2);border-radius:2px;font:400 12.5px/1 var(--mono);color:var(--text2);letter-spacing:.04em}
.region-codes a b,.region-codes span b{color:var(--text);font-weight:500}
.region-codes a:hover{border-color:var(--gold);color:var(--gold-l)}
.region-desc{font:500 clamp(20px,1.7vw,24px)/1.45 var(--serif);color:var(--text);max-width:56ch;margin-bottom:30px}
.region-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border-top:1px solid var(--line2)}
.region-grid>div{padding:20px 22px 22px 0;border-right:1px solid var(--line)}
.region-grid>div+div{padding-left:22px}
.region-grid>div:last-child{border-right:0}
.region-grid h3{font:500 11.5px/1.2 var(--mono);letter-spacing:.12em;color:var(--gold-l);margin-bottom:12px}
.region-grid p{font-size:15px;color:var(--text);margin-bottom:8px}
.region-grid ul{list-style:none;font-size:14.5px;color:var(--text2)}
.region-grid li{padding:6px 0;border-bottom:1px solid var(--line)}
.region-grid li:last-child{border-bottom:0}
.region-grid address{font-style:normal;font-size:14.5px;line-height:1.7;color:var(--text2)}
.region-foot{display:flex;flex-wrap:wrap;gap:8px;margin-top:22px}
@media (max-width:1023px){.region-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.region-grid>div:nth-child(2){border-right:0}.region-grid>div:nth-child(3){padding-left:0}.region-grid>div:nth-child(-n+2){border-bottom:1px solid var(--line)}.region-head{grid-template-columns:1fr}.region-codes{justify-content:flex-start}}
@media (max-width:560px){.region-grid{grid-template-columns:1fr}.region-grid>div,.region-grid>div+div{padding:18px 0;border-right:0;border-bottom:1px solid var(--line)}}

/* product tags */
.tags{display:flex;flex-wrap:wrap;gap:6px;list-style:none}
.tags li{padding:6px 10px;border:1px solid var(--line2);border-radius:2px;font:400 12.5px/1.2 var(--mono);color:var(--text2);letter-spacing:.03em}
.paper .tags li{border-color:#c5ccd6;color:var(--ink2)}

/* story: timeline */
.timeline{list-style:none;position:relative;border-left:1px solid var(--line2);margin-left:6px}
.timeline li{position:relative;padding:0 0 30px 30px}
.timeline li:last-child{padding-bottom:0}
.timeline li::before{content:"";position:absolute;left:-6px;top:9px;width:11px;height:11px;border-radius:50%;background:var(--vault);border:1px solid var(--gold)}
.timeline li.now::before{background:var(--gold-l);box-shadow:0 0 0 5px rgba(226,195,90,.15)}
.timeline h3{font-size:24px;margin-bottom:6px}
.timeline p{color:var(--text2);font-size:15.5px}
.paper .timeline{border-left-color:#c5ccd6}
.paper .timeline li::before{background:var(--paper);border-color:#8f7012}
.paper .timeline li.now::before{background:#8f7012;box-shadow:0 0 0 5px rgba(143,112,18,.14)}

.quote{position:relative;padding:clamp(24px,3vw,40px) 0 0;border-top:1px solid var(--line2)}
.quote blockquote{font:500 clamp(24px,2.4vw,34px)/1.35 var(--serif);color:var(--text);max-width:34ch}
.quote blockquote::before{content:"\201C";display:block;font:600 72px/.6 var(--serif);color:var(--gold);margin-bottom:12px}
.quote figcaption{margin-top:18px;font-size:14.5px;color:var(--text3)}
.quote figcaption b{display:block;font:600 19px/1.3 var(--serif);color:var(--text2);margin-bottom:2px}
.quote figcaption a{color:var(--gold-l)}
.paper .quote{border-top-color:#c5ccd6}
.paper .quote blockquote{color:var(--ink)}
.paper .quote blockquote::before{color:#8f7012}
.paper .quote figcaption b{color:var(--ink)}
.paper .quote figcaption a{color:#6b5410}

/* figures line (4 · 4 · 4 · 100) */
.figures{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border-top:1px solid var(--line2);border-bottom:1px solid var(--line2);margin-top:clamp(28px,3vw,40px)}
.figures div{padding:18px 18px 16px 0;border-right:1px solid var(--line)}
.figures div+div{padding-left:18px}
.figures div:last-child{border-right:0}
.figures b{display:block;font:600 clamp(36px,4vw,54px)/1 var(--serif);color:var(--gold-l)}
.figures span{display:block;margin-top:6px;font-size:13.5px;color:var(--text3)}
@media (max-width:640px){.figures{grid-template-columns:repeat(2,minmax(0,1fr))}.figures div:nth-child(2){border-right:0}.figures div:nth-child(3){padding-left:0}.figures div:nth-child(-n+2){border-bottom:1px solid var(--line)}}

/* plain principle items (no numbering: not a sequence) */
.items{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 clamp(28px,4vw,64px)}
.items>div{padding:22px 0;border-top:1px solid var(--line2)}
.items h3{font-size:25px;margin-bottom:8px}
.items p{font-size:15.5px;color:var(--text2)}
.items.three{grid-template-columns:repeat(3,minmax(0,1fr))}
.paper .items>div{border-top-color:#c9d0da}
.paper .items p{color:var(--ink2)}
@media (max-width:900px){.items.three{grid-template-columns:1fr}}
@media (max-width:640px){.items{grid-template-columns:1fr}}

/* closing call */
.closing{text-align:left;display:grid;grid-template-columns:minmax(0,1.3fr) auto;gap:24px 48px;align-items:center}
.closing h2{font-size:clamp(30px,3vw,44px);margin-bottom:10px}
.closing p{color:var(--text2)}
@media (max-width:760px){.closing{grid-template-columns:1fr}}

/* hub: leadership plate */
.custodians{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(28px,5vw,80px);align-items:center}
.warn-line{padding:16px 18px;border:1px solid rgba(226,115,111,.35);background:rgba(226,115,111,.06);font-size:15px;color:var(--text2)}
.warn-line b{color:var(--text);font-weight:500}
.warn-line a{color:var(--gold-l);border-bottom:1px solid rgba(226,195,90,.4)}

@media (max-width:900px){.split,.split.wide-left,.custodians{grid-template-columns:1fr}}
@media (max-width:640px){
  .charter-head{grid-template-columns:1fr}
  .charter-seal{grid-template-columns:1fr;justify-items:start}
  .articles>li{grid-template-columns:1fr;gap:8px}
  .charter .preamble::first-letter{font-size:3.4em}
  .charter-seal dl{grid-template-columns:1fr;gap:2px}
  .charter-seal dd{margin-bottom:8px}
}
@media print{.charter-sec{background:none}.charter{box-shadow:none}.charter-tools{display:none}}

/* links on registry codes */
.cred .codes b a{border-bottom:1px solid var(--line2)}
.cred .codes b a:hover{color:var(--gold-l);border-bottom-color:var(--gold)}
.cred .codes b a.ext::after{font-size:.8em}
.cred .codes li{flex-wrap:wrap;min-width:0}
.cred .codes li b{overflow-wrap:anywhere}
.cred .card-foot .btn{white-space:normal;text-align:left;line-height:1.25}

/* paper (light) reading sections: ink colours for every quiet block */
.paper .timeline p,.paper .seq p,.paper .items p,.paper .stack p{color:var(--ink2)}
.paper .quote figcaption{color:var(--ink3)}
.paper .timeline h3,.paper .seq h3,.paper .seq h4,.paper .items h3{color:var(--ink)}
.region:last-child{padding-bottom:0}
.paper .btn-quiet{color:var(--ink2);border-color:#c5ccd6}.paper .btn-quiet:hover{color:#6b5410;border-color:#8f7012}
.sumtable tbody th{font:400 15px/1.4 var(--sans);letter-spacing:0;color:var(--text);white-space:nowrap}
.sumtable{min-width:760px}
