/* ============================================================
   The Canon — consolidated Canon-specific styles
   Extracted verbatim from the design HTML prototypes.
   Fonts are loaded globally by the site (Google Font @imports omitted).

   Sections:
     1. Landing bookshelf  (.cvols / .cvol*)      — TheCanon.html
     2. Manifesto          (.cwhy*)               — TheCanon.html
     3. Contribute form    (#contribute ...)       — TheCanon.html
     4. Volume page        (.vol-*)               — Volume.html
     5. Entry page         (.ce-*)                — Canon Entry.html
     6. Nav additions      (.nav__mega / .nav__vol) — home/home.css
   ============================================================ */


/* ============================================================
   1. LANDING BOOKSHELF — the six volumes (bookshelf)
   ============================================================ */
.cvols { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
.cvol { position:relative; display:flex; flex-direction:column; gap:10px; min-height:250px; padding:26px 26px 22px; text-decoration:none;
  border:1px solid rgba(35,50,61,.18); background:linear-gradient(160deg, rgba(255,255,255,.5), rgba(255,255,255,0)); transition:border-color .2s, transform .2s; }
.cvol:hover { border-color:var(--champagne-deep); transform:translateY(-3px); }
.cvol__no { font-family:var(--caps); font-size:11px; letter-spacing:.24em; text-transform:uppercase; color:var(--champagne-deep); }
.cvol__name { font-family:var(--serif); font-weight:500; font-size:clamp(28px,2.6vw,36px); line-height:1.02; letter-spacing:-.015em; color:var(--ink); }
.cvol__name em { font-style:italic; }
.cvol__fa { font-family:'Noto Nastaliq Urdu',serif; font-size:17px; color:var(--champagne-deep); direction:rtl; line-height:1.8; align-self:flex-start; }
.cvol__scope { font-family:var(--serif); font-size:15.5px; line-height:1.5; color:var(--ink-mut); margin-top:auto; }
.cvol__foot { display:flex; align-items:center; justify-content:space-between; gap:10px; border-top:1px solid rgba(35,50,61,.14); padding-top:14px; margin-top:14px; }
.cvol__status { font-family:var(--caps); font-size:9.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--ink-faint,#8597A2); display:inline-flex; align-items:center; gap:8px; }
.cvol__status--live { color:var(--champagne-deep); }
.cvol__status--live::before { content:""; width:6px; height:6px; border-radius:999px; background:var(--champagne-deep); }
.cvol__go { font-family:var(--caps); font-size:10px; letter-spacing:.14em; text-transform:uppercase; color:var(--ink); opacity:0; transform:translateX(-4px); transition:opacity .2s, transform .2s; }
.cvol:hover .cvol__go { opacity:1; transform:none; }
@media (max-width:900px){ .cvols { grid-template-columns:1fr 1fr; } }
@media (max-width:560px){ .cvols { grid-template-columns:1fr; } .cvol { min-height:0; } }


/* ============================================================
   2. MANIFESTO — why we are doing this
   ============================================================ */
.cwhy { background: radial-gradient(ellipse 100% 130% at 50% 0%, var(--slate-lift,#24404F) 0%, var(--slate-deep,#1E3340) 60%, #172935 100%); padding: clamp(88px,11vw,150px) 40px; position: relative; overflow: hidden; }
.cwhy__fa { position:absolute; top:50%; right:0; transform:translateY(-50%); font-family:'Aref Ruqaa',serif; font-weight:700; font-size:clamp(160px,24vw,360px); line-height:1; direction:rtl; color:rgba(199,164,104,.05); pointer-events:none; user-select:none; }
.cwhy__in { position:relative; max-width: 860px; margin: 0 auto; }
.cwhy__eyebrow { font-family: var(--caps); font-size: 11px; letter-spacing: .26em; text-transform: uppercase; color: var(--champagne); display: flex; align-items: center; gap: 14px; }
.cwhy__eyebrow::before { content:""; width: 26px; height: 1px; background: var(--champagne); }
.cwhy__h { font-family: var(--serif); font-weight: 500; font-size: clamp(34px,4.6vw,56px); line-height: 1.02; letter-spacing: -.02em; color: var(--ivory); margin: 18px 0 0; }
.cwhy__h em { font-style: italic; color: var(--champagne-soft); }
.cwhy__in p { font-family: var(--serif); font-size: clamp(18.5px,2vw,21px); line-height: 1.7; color: rgba(236,233,226,.82); margin: 26px 0 0; }
.cwhy__in p em { font-style: italic; color: var(--champagne-soft); }
.cwhy__precs { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 1px; background: rgba(199,164,104,.2); border: 1px solid rgba(199,164,104,.2); margin: 44px 0 0; }
.cwhy__prec { background: var(--slate-deep,#1E3340); padding: 24px 26px; }
.cwhy__prec-name { font-family: var(--serif); font-weight: 500; font-size: 21px; line-height: 1.15; color: var(--ivory); }
.cwhy__prec-d { font-family: var(--serif); font-size: 15.5px; line-height: 1.5; color: rgba(236,233,226,.6); margin-top: 8px; }
.cwhy__close { border-left: 2px solid var(--champagne); padding-left: 26px; margin-top: 44px; }
.cwhy__close p { font-family: var(--serif); font-size: clamp(21px,2.4vw,26px); line-height: 1.5; color: var(--ivory); margin: 0; }
.cwhy__close p em { font-style: italic; color: var(--champagne-soft); }
@media (max-width: 760px){ .cwhy__precs { grid-template-columns: 1fr; } }


/* ============================================================
   3. CONTRIBUTE FORM — Canon contributor form (FORMS.md compliant)
   ============================================================ */
#contribute .cform { gap: 32px; }
#contribute .hoa-field { display: flex; flex-direction: column; gap: 11px; }
#contribute .hoa-label { font-family: 'Inter', sans-serif; font-size: 14px; font-weight: 600; letter-spacing: .005em; color: var(--ivory, #ECE9E2); }
#contribute .hoa-label .hoa-req { color: var(--champagne, #C7A468); }
#contribute .hoa-ctl { font-family: 'Lora', serif; font-size: 18px; line-height: 1.5; padding: 18px 22px; border-radius: 12px; background: rgba(13,24,32,.45); border: 1px solid rgba(236,233,226,.24); color: var(--ivory, #ECE9E2); box-shadow: inset 0 1px 3px rgba(0,0,0,.2); transition: border-color .22s, box-shadow .22s, background .22s; width: 100%; box-sizing: border-box; appearance: none; display: block; }
#contribute .hoa-ctl::placeholder { color: rgba(236,233,226,.35); }
#contribute .hoa-ctl:hover { border-color: rgba(236,233,226,.4); }
#contribute .hoa-ctl:focus { border-color: var(--champagne, #C7A468); box-shadow: 0 0 0 4px rgba(199,164,104,.2), inset 0 1px 2px rgba(0,0,0,.1); background: rgba(236,233,226,.08); outline: none; }
#contribute textarea.hoa-ctl { resize: vertical; min-height: 130px; }
#contribute .cform__block-l { font-family: 'Inter', sans-serif; font-size: 14px; font-weight: 600; letter-spacing: .005em; text-transform: none; color: var(--ivory, #ECE9E2); }
/* choice cards (FORMS.md — .hoa-choice pattern) */
#contribute .cchecks { display: grid; grid-template-columns: repeat(3,1fr); gap: 10px; }
#contribute .ccheck { border: 1px solid rgba(236,233,226,.2); border-radius: 12px; padding: 13px 15px; background: rgba(13,24,32,.3); font-family: 'Lora', serif; font-size: 15.5px; align-items: center; transition: border-color .2s, background .2s; }
#contribute .ccheck:hover { border-color: rgba(236,233,226,.42); }
#contribute .ccheck:has(input:checked) { border-color: var(--champagne); background: rgba(199,164,104,.1); color: var(--ivory, #ECE9E2); }
#contribute .ccheck input { margin-top: 0; background: rgba(13,24,32,.45); border-color: rgba(236,233,226,.35); appearance: none; -webkit-appearance: none; opacity: 1; position: static; width: 18px; height: 18px; flex: 0 0 auto; border-radius: 4px; border-style: solid; border-width: 1px; cursor: pointer; }
#contribute .ccheck input:checked::after { content: ""; display: block; position: relative; left: 5px; top: 1px; width: 5px; height: 10px; border: solid var(--slate-deep, #1E3340); border-width: 0 2px 2px 0; transform: rotate(45deg); }
#contribute .cradio { gap: 10px; }
#contribute .cradio label { border-radius: 12px; border: 1px solid rgba(236,233,226,.2); background: rgba(13,24,32,.3); font-family: 'Lora', serif; font-size: 15.5px; padding: 12px 18px; transition: border-color .2s, background .2s; }
#contribute .cradio label:hover { border-color: rgba(236,233,226,.42); background: rgba(236,233,226,.05); }
#contribute .cradio label:has(input:checked) { border-color: var(--champagne); background: rgba(199,164,104,.1); }
#contribute .cradio input { background: rgba(13,24,32,.45); border-color: rgba(236,233,226,.35); }
#contribute .ccheck input:checked, #contribute .cradio input:checked { background: var(--champagne); border-color: var(--champagne); }
#contribute .ccheck input:focus-visible, #contribute .cradio input:focus-visible { outline: none; box-shadow: 0 0 0 4px rgba(199,164,104,.2); }
@media (max-width: 680px) { #contribute .cchecks { grid-template-columns: 1fr 1fr; } }


/* ============================================================
   4. VOLUME PAGE — volume landing (.vol-*)
   ============================================================ */
/* ---- volume landing ---- */
.vol-hero { position:relative; overflow:hidden; background:radial-gradient(ellipse 120% 140% at 50% -10%, #24404F 0%, #1E3340 55%, #182A35 100%); padding:clamp(120px,13vw,170px) 40px clamp(56px,7vw,92px); }
.vol-hero__fa { position:absolute; top:50%; right:1.5%; transform:translateY(-50%); font-family:'Aref Ruqaa',serif; font-weight:700; font-size:clamp(150px,26vw,400px); line-height:1; direction:rtl; color:rgba(199,164,104,.07); pointer-events:none; user-select:none; z-index:0; -webkit-mask-image:linear-gradient(to left,#000 46%,transparent 92%); mask-image:linear-gradient(to left,#000 46%,transparent 92%); }
.vol-hero__in { position:relative; z-index:1; max-width:1160px; margin:0 auto; }
.vol-hero__rule { height:1px; background:linear-gradient(to right, var(--champagne) 0%, rgba(199,164,104,.16) 42%, transparent 100%); margin:26px 0 40px; }
.vol-eyebrow { font-family:var(--caps); font-size:11px; letter-spacing:.26em; text-transform:uppercase; color:var(--champagne); }
.vol-title { font-family:var(--serif); font-weight:500; font-size:clamp(54px,8.5vw,110px); line-height:.92; letter-spacing:-.03em; color:#F3F0E9; margin:20px 0 0; }
.vol-title em { font-style:italic; font-weight:400; color:var(--champagne-soft); }
.vol-faline { font-family:'Noto Nastaliq Urdu',serif; font-size:clamp(20px,2.4vw,28px); color:var(--champagne-soft); line-height:1.9; margin-top:14px; display:inline-flex; align-items:baseline; gap:16px; }
.vol-faline small { font-family:var(--caps); font-size:11px; letter-spacing:.2em; text-transform:uppercase; color:rgba(236,233,226,.42); }
.vol-dek { font-family:var(--serif); font-size:clamp(19px,2.1vw,25px); line-height:1.56; color:rgba(236,233,226,.82); max-width:58ch; margin-top:24px; }
.vol-dek em { color:var(--champagne-soft); font-style:italic; }
.vol-meta { display:flex; flex-wrap:wrap; gap:10px; margin-top:34px; }
.vol-chip { font-family:var(--caps); font-size:10.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--champagne-soft); border:1px solid rgba(199,164,104,.34); border-radius:999px; padding:8px 16px; display:inline-flex; gap:9px; align-items:center; }
.vol-chip b { color:rgba(236,233,226,.6); font-weight:400; }
.vol-chip--live::before { content:""; width:6px; height:6px; border-radius:999px; background:var(--champagne); box-shadow:0 0 0 3px rgba(199,164,104,.18); }

/* curation notice */
.vol-notice { position:relative; z-index:1; max-width:1160px; margin:34px auto 0; display:flex; align-items:flex-start; gap:14px; border:1px solid rgba(199,164,104,.3); background:rgba(199,164,104,.07); padding:16px 20px; }
.vol-notice::before { content:""; flex:0 0 auto; width:8px; height:8px; margin-top:7px; background:var(--champagne); transform:rotate(45deg); }
.vol-notice p { margin:0; font-family:var(--serif); font-size:16.5px; line-height:1.55; color:rgba(236,233,226,.8); }
.vol-notice p b { color:var(--champagne-soft); font-weight:600; }

/* body — cream shelf */
.vol-body { background:var(--cream); padding:clamp(56px,7vw,96px) 40px clamp(72px,9vw,120px); }
.vol-body__in { max-width:1160px; margin:0 auto; }
.vol-sec__eyebrow { font-family:var(--caps); font-size:11px; letter-spacing:.24em; text-transform:uppercase; color:var(--champagne-deep); }
.vol-sec__h { font-family:var(--serif); font-weight:500; font-size:clamp(30px,4vw,46px); line-height:1.04; letter-spacing:-.02em; color:var(--ink); margin:10px 0 0; }
.vol-sec__h em { font-style:italic; }
.vol-sec__rule { height:1px; background:rgba(199,164,104,.34); margin:22px 0 30px; }

/* chapter block */
.vol-chap { margin-top:clamp(40px,5vw,64px); }
.vol-chap__head { display:flex; align-items:baseline; gap:18px; flex-wrap:wrap; }
.vol-chap__k { font-family:var(--caps); font-size:10px; letter-spacing:.2em; text-transform:uppercase; color:var(--champagne-deep); }
.vol-chap__name { font-family:var(--serif); font-weight:500; font-size:clamp(24px,2.6vw,32px); color:var(--ink); }
.vol-chap__fa { font-family:'Noto Nastaliq Urdu',serif; font-size:16px; color:var(--champagne-deep); direction:rtl; }
.vol-entries { display:grid; grid-template-columns:1fr 1fr; gap:18px; margin-top:20px; }
.vol-entry { display:flex; flex-direction:column; gap:8px; padding:24px 26px; border:1px solid rgba(35,50,61,.18); background:var(--ivory-warm,#F4F1EA); text-decoration:none; transition:border-color .2s, transform .2s; }
.vol-entry:hover { border-color:var(--champagne-deep); transform:translateY(-2px); }
.vol-entry__id { font-family:var(--caps); font-size:9.5px; letter-spacing:.18em; text-transform:uppercase; color:var(--champagne-deep); display:flex; justify-content:space-between; gap:10px; }
.vol-entry__id b { font-weight:400; color:var(--ink-faint,#8597A2); }
.vol-entry__name { font-family:var(--serif); font-weight:500; font-size:clamp(24px,2.4vw,30px); line-height:1.05; color:var(--ink); }
.vol-entry__name em { font-style:italic; }
.vol-entry__fa { font-family:'Noto Nastaliq Urdu',serif; font-size:16px; color:var(--champagne-deep); direction:rtl; align-self:flex-start; }
.vol-entry__dek { font-family:var(--serif); font-size:15.5px; line-height:1.5; color:var(--ink-mut); }
.vol-entry__go { font-family:var(--caps); font-size:10px; letter-spacing:.14em; text-transform:uppercase; color:var(--ink); margin-top:6px; }

/* what belongs here */
.vol-belongs { display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:rgba(35,50,61,.14); border:1px solid rgba(35,50,61,.14); margin-top:20px; }
.vol-belongs__cell { background:var(--cream-warm,#F1EBDE); padding:20px 22px; }
.vol-belongs__k { font-family:var(--caps); font-size:9.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--champagne-deep); }
.vol-belongs__t { font-family:var(--serif); font-size:16px; line-height:1.45; color:var(--ink-mut); margin-top:6px; }

/* gathering state */
.vol-gather { margin-top:clamp(48px,6vw,72px); padding:clamp(36px,4.5vw,54px) clamp(30px,4vw,52px); background:radial-gradient(ellipse 130% 150% at 100% 0%, #24404F 0%, #1E3340 60%, #172935 100%); position:relative; overflow:hidden; }
.vol-gather__fa { position:absolute; bottom:-40px; left:-10px; font-family:'Aref Ruqaa',serif; font-weight:700; font-size:clamp(120px,20vw,220px); line-height:1; color:rgba(199,164,104,.06); direction:rtl; pointer-events:none; }
.vol-gather__in { position:relative; z-index:1; max-width:640px; }
.vol-gather__k { font-family:var(--caps); font-size:11px; letter-spacing:.24em; text-transform:uppercase; color:var(--champagne); }
.vol-gather__q { font-family:var(--serif); font-weight:500; font-size:clamp(26px,3.4vw,40px); line-height:1.1; letter-spacing:-.015em; color:#F3F0E9; margin:14px 0 0; text-wrap:balance; }
.vol-gather__p { font-family:var(--serif); font-size:18.5px; line-height:1.55; color:rgba(236,233,226,.75); margin:16px 0 0; }
.vol-gather__cta { display:inline-flex; align-items:center; gap:12px; margin-top:24px; font-family:var(--caps); font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:#1E3340; background:var(--champagne); padding:15px 26px; border-radius:999px; text-decoration:none; transition:background .2s; }
.vol-gather__cta:hover { background:var(--champagne-soft); }

/* other volumes strip */
.vol-others { margin-top:clamp(48px,6vw,72px); }
.vol-others__grid { display:grid; grid-template-columns:repeat(5,1fr); gap:12px; margin-top:20px; }
.vol-other { display:flex; flex-direction:column; gap:5px; padding:16px 18px; border:1px solid rgba(35,50,61,.16); text-decoration:none; transition:border-color .2s; }
.vol-other:hover { border-color:var(--champagne-deep); }
.vol-other__no { font-family:var(--caps); font-size:9px; letter-spacing:.18em; text-transform:uppercase; color:var(--champagne-deep); }
.vol-other__n { font-family:var(--serif); font-weight:500; font-size:19px; color:var(--ink); }
@media (max-width:900px){ .vol-entries { grid-template-columns:1fr; } .vol-belongs { grid-template-columns:1fr; } .vol-others__grid { grid-template-columns:1fr 1fr; } }


/* ============================================================
   5. ENTRY PAGE — a single documented entry (scholarly record)
   Scoped under .ce  ·  museum + library + journal
   ============================================================ */
.ce { --gold:#C7A468; --gold-soft:#DcC190; --gold-deep:#A98A55;
      --slate:#2B4A5C; --slate-deep:#1E3340; --ink:#20303C; --ink-mut:#4E6472; --ink-faint:#7C8D98;
      --cream:#EBE4D6; --cream-warm:#F1EBDE; --line:rgba(43,74,92,.16); --line-gold:rgba(199,164,104,.34);
      --serif:'Cormorant Garamond',Garamond,serif; --caps:'Cinzel',serif;
      --fa:'Noto Nastaliq Urdu',serif; --faceremony:'Aref Ruqaa',serif;
      background:var(--cream); color:var(--ink); }

/* ---------- ceremonial masthead (dark) ---------- */
.ce-mast { position:relative; overflow:hidden; background:
    radial-gradient(ellipse 120% 140% at 50% -10%, #24404F 0%, var(--slate-deep) 55%, #182A35 100%);
    color:var(--soft-ivory,#ECE9E2); padding:clamp(120px,13vw,168px) 40px clamp(52px,6vw,84px); }
.ce-mast__fa { position:absolute; top:50%; right:1.5%; transform:translateY(-50%);
    font-family:var(--faceremony); font-weight:700; font-size:clamp(150px,26vw,400px); line-height:1;
    direction:rtl; color:rgba(199,164,104,.07); pointer-events:none; user-select:none; z-index:0;
    -webkit-mask-image:linear-gradient(to left,#000 46%,transparent 92%); mask-image:linear-gradient(to left,#000 46%,transparent 92%); }
.ce-mast__in { position:relative; z-index:1; max-width:1160px; margin:0 auto; }
.ce-crumbs { font-family:var(--caps); font-size:11.5px; letter-spacing:.24em; text-transform:uppercase; color:rgba(236,233,226,.5); display:flex; gap:12px; align-items:center; flex-wrap:wrap; }
.ce-crumbs a { color:rgba(236,233,226,.5); text-decoration:none; }
.ce-crumbs a:hover { color:var(--gold-soft); }
.ce-crumbs span { color:rgba(199,164,104,.5); }
.ce-mast__rule { height:1px; background:linear-gradient(to right, var(--gold) 0%, rgba(199,164,104,.16) 42%, transparent 100%); margin:26px 0 40px; }
.ce-mast__grid { display:grid; grid-template-columns:1fr auto; gap:clamp(28px,5vw,72px); align-items:start; }
.ce-reg { font-family:var(--caps); font-size:11px; letter-spacing:.26em; text-transform:uppercase; color:var(--gold); display:flex; gap:14px; align-items:center; }
.ce-reg__no { color:rgba(236,233,226,.62); }
.ce-headword { font-family:var(--serif); font-weight:500; font-size:clamp(58px,9vw,120px); line-height:.9; letter-spacing:-.03em; color:#F3F0E9; margin:22px 0 0; }
.ce-headword em { font-style:italic; font-weight:400; color:var(--gold-soft); }
.ce-translit { font-family:var(--serif); font-style:italic; font-size:clamp(22px,2.6vw,34px); color:var(--gold-soft); margin-top:14px; }
.ce-translit small { font-family:var(--caps); font-style:normal; font-size:11px; letter-spacing:.2em; text-transform:uppercase; color:rgba(236,233,226,.42); margin-left:14px; }
.ce-dek { font-family:var(--serif); font-size:clamp(19px,2.1vw,25px); line-height:1.56; color:rgba(236,233,226,.82); max-width:60ch; margin-top:26px; }
.ce-dek em { color:var(--gold-soft); font-style:italic; }
.ce-mast__fahead { text-align:right; }
.ce-mast__fahead .fa { font-family:var(--fa); font-weight:500; font-size:clamp(46px,7vw,104px); line-height:1.5; color:var(--gold-soft); direction:rtl; }
.ce-mast__fahead .en { font-family:var(--caps); font-size:11px; letter-spacing:.22em; text-transform:uppercase; color:rgba(236,233,226,.42); margin-top:10px; }
/* taxonomy tree — upper right */
.ce-tree { align-self:start; justify-self:end; border:1px solid rgba(199,164,104,.28); background:rgba(0,0,0,.14); padding:22px 26px 24px; min-width:280px; }
.ce-tree__h { font-family:var(--caps); font-size:10px; letter-spacing:.24em; text-transform:uppercase; color:var(--gold); padding-bottom:14px; border-bottom:1px solid rgba(199,164,104,.2); margin-bottom:16px; }
.ce-tree__list { list-style:none; margin:0; padding:0; }
.ce-tree__node { position:relative; padding:0 0 0 22px; }
.ce-tree__node + .ce-tree__node { margin-top:14px; }
.ce-tree__node::before { content:""; position:absolute; left:5px; top:-10px; bottom:auto; height:calc(100% - 2px); width:1px; background:rgba(199,164,104,.35); }
.ce-tree__node::after { content:""; position:absolute; left:5px; top:11px; width:12px; height:1px; background:rgba(199,164,104,.35); }
.ce-tree__node--root { padding-left:0; }
.ce-tree__node--root::before, .ce-tree__node--root::after { display:none; }
.ce-tree__node--l2 { margin-left:22px; }
.ce-tree__node--l3 { margin-left:44px; }
.ce-tree__k { font-family:var(--caps); font-size:9px; letter-spacing:.2em; text-transform:uppercase; color:rgba(236,233,226,.45); display:block; }
.ce-tree__v { font-family:var(--serif); font-size:21px; line-height:1.15; color:#F3F0E9; }
.ce-tree__v em { font-style:italic; color:var(--gold-soft); }
.ce-tree__v small { font-family:var(--caps); font-size:10px; letter-spacing:.14em; text-transform:uppercase; color:rgba(236,233,226,.45); margin-left:8px; }
.ce-chips { display:flex; flex-wrap:wrap; gap:10px; margin-top:38px; }
.ce-chip { font-family:var(--caps); font-size:10.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--gold-soft);
    border:1px solid rgba(199,164,104,.34); border-radius:999px; padding:8px 16px; display:inline-flex; gap:9px; align-items:center; }
.ce-chip b { color:rgba(236,233,226,.6); font-weight:400; }
.ce-chip--live::before { content:""; width:6px; height:6px; border-radius:999px; background:var(--gold); box-shadow:0 0 0 3px rgba(199,164,104,.18); }

/* ---------- the codex (light scholarly body) ---------- */
.ce-codex { max-width:1160px; margin:0 auto; padding:clamp(56px,7vw,104px) 40px clamp(72px,9vw,120px);
    display:grid; grid-template-columns:300px 1fr; gap:clamp(40px,5vw,88px); align-items:start; }

/* apparatus rail */
.ce-rail { position:sticky; top:96px; display:flex; flex-direction:column; gap:26px; }
.ce-card { border:1px solid var(--line); background:var(--cream-warm); }
.ce-card__h { font-family:var(--caps); font-size:10.5px; letter-spacing:.2em; text-transform:uppercase; color:var(--gold-deep);
    padding:16px 20px; border-bottom:1px solid var(--line); background:rgba(199,164,104,.06); }
.ce-spec { list-style:none; margin:0; padding:6px 0; }
.ce-spec li { display:grid; grid-template-columns:1fr; gap:2px; padding:12px 20px; border-bottom:1px solid var(--line); }
.ce-spec li:last-child { border-bottom:none; }
.ce-spec dt { font-family:var(--caps); font-size:9.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--ink-faint); }
.ce-spec dd { margin:0; font-family:var(--serif); font-size:18.5px; line-height:1.28; color:var(--ink); }
.ce-spec dd .fa { font-family:var(--fa); font-size:16px; color:var(--slate); direction:rtl; }
.ce-spec dd em { color:var(--gold-deep); font-style:italic; }
.ce-cite { padding:18px 20px; }
.ce-cite__body { font-family:var(--serif); font-size:15.5px; line-height:1.5; color:var(--ink-mut); }
.ce-cite__body b { color:var(--ink); font-weight:600; }
.ce-cite__id { font-family:var(--caps); font-size:9.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--gold-deep); margin-top:14px; display:block; }
.ce-rev { padding:16px 20px; display:flex; flex-direction:column; gap:9px; }
.ce-rev__row { display:flex; justify-content:space-between; gap:12px; font-family:var(--caps); font-size:10px; letter-spacing:.1em; text-transform:uppercase; }
.ce-rev__row span:first-child { color:var(--ink-faint); }
.ce-rev__row span:last-child { color:var(--ink); }

/* main scholarly column */
.ce-main { max-width:760px; }
.ce-abstract { font-family:var(--serif); font-size:clamp(21px,2.3vw,27px); line-height:1.5; color:var(--slate); border-left:2px solid var(--gold); padding:2px 0 2px 28px; }
.ce-abstract em { font-style:italic; color:var(--gold-deep); }

.ce-sec { margin-top:clamp(52px,6vw,84px); }
.ce-sec__no { font-family:var(--caps); font-size:11px; letter-spacing:.24em; text-transform:uppercase; color:var(--gold-deep); }
.ce-sec__h { font-family:var(--serif); font-weight:500; font-size:clamp(30px,4vw,46px); line-height:1.04; letter-spacing:-.02em; color:var(--ink); margin:10px 0 0; }
.ce-sec__h em { font-style:italic; color:var(--slate); }
.ce-sec__rule { height:1px; background:var(--line-gold); margin:22px 0 26px; }
.ce-main p { font-family:var(--serif); font-size:19.5px; line-height:1.68; color:var(--ink); margin:0 0 20px; }
.ce-main p.ce-lead::first-letter { font-size:3.4em; float:left; line-height:.78; padding:6px 12px 0 0; font-weight:500; color:var(--slate); font-family:var(--serif); }
.ce-main p em { color:var(--slate); font-style:italic; }
.ce-main a.ce-ref { color:var(--gold-deep); text-decoration:none; border-bottom:1px solid rgba(199,164,104,.4); }
.ce-main a.ce-ref:hover { color:var(--slate); border-bottom-color:var(--slate); }
sup.ce-fn { font-family:var(--caps); font-size:.62em; color:var(--gold-deep); letter-spacing:.02em; padding-left:1px; }

/* the truth — pull */
.ce-truth { margin:40px 0; padding:34px 36px; background:var(--slate-deep); color:#F3F0E9; position:relative; overflow:hidden; }
.ce-truth__mark { position:absolute; top:-24px; right:18px; font-family:var(--serif); font-size:150px; color:rgba(199,164,104,.14); line-height:1; }
.ce-truth__label { position:relative; font-family:var(--caps); font-size:10px; letter-spacing:.24em; text-transform:uppercase; color:var(--gold); }
.ce-truth__q { position:relative; font-family:var(--serif); font-style:italic; font-weight:500; font-size:clamp(25px,3vw,33px); line-height:1.32; color:#F3F0E9; margin-top:14px; }
.ce-truth__q b { color:var(--gold-soft); font-weight:500; }
.ce-truth__src { position:relative; font-family:var(--caps); font-size:9.5px; letter-spacing:.18em; text-transform:uppercase; color:rgba(236,233,226,.5); margin-top:16px; }

/* anatomy enumeration */
.ce-stages { list-style:none; margin:8px 0 0; padding:0; border-top:1px solid var(--line); }
.ce-stage { display:grid; grid-template-columns:56px 1fr; gap:8px 22px; padding:20px 0; border-bottom:1px solid var(--line); align-items:baseline; }
.ce-stage__n { font-family:var(--serif); font-size:34px; line-height:1; color:var(--gold-deep); font-style:italic; }
.ce-stage__b { display:flex; flex-direction:column; gap:6px; }
.ce-stage__name { font-family:var(--serif); font-weight:500; font-size:24px; line-height:1.1; color:var(--ink); }
.ce-stage__name .fa { font-family:var(--fa); font-size:17px; color:var(--gold-deep); direction:rtl; margin-left:10px; }
.ce-stage__d { font-family:var(--serif); font-size:17.5px; line-height:1.5; color:var(--ink-mut); }

/* source / etymology block */
.ce-ety { display:grid; grid-template-columns:auto 1fr; gap:26px; align-items:center; padding:26px 30px; border:1px solid var(--line-gold); background:var(--cream-warm); margin:6px 0 26px; }
.ce-ety__fa { font-family:var(--fa); font-size:clamp(40px,6vw,66px); color:var(--slate); direction:rtl; line-height:1.4; }
.ce-ety__t .r { font-family:var(--serif); font-style:italic; font-size:22px; color:var(--gold-deep); }
.ce-ety__t p { font-size:17px !important; line-height:1.55 !important; margin:8px 0 0 !important; color:var(--ink-mut) !important; }
.ce-couplet { text-align:center; margin:34px 0; }
.ce-couplet__fa { font-family:var(--faceremony); font-weight:700; font-size:clamp(24px,3.4vw,36px); line-height:2; color:var(--slate); direction:rtl; }
.ce-couplet__tr { font-family:var(--serif); font-style:italic; font-size:19px; color:var(--ink-mut); margin-top:10px; }
.ce-couplet__c { font-family:var(--caps); font-size:9.5px; letter-spacing:.2em; text-transform:uppercase; color:var(--gold-deep); margin-top:12px; }

/* variations */
.ce-var { display:grid; grid-template-columns:1fr 1fr; gap:1px; background:var(--line); border:1px solid var(--line); margin-top:6px; }
.ce-var__cell { background:var(--cream-warm); padding:22px 24px; }
.ce-var__reg { font-family:var(--caps); font-size:10px; letter-spacing:.16em; text-transform:uppercase; color:var(--gold-deep); }
.ce-var__t { font-family:var(--serif); font-size:17.5px; line-height:1.5; color:var(--ink); margin-top:8px; }

/* method */
.ce-method { display:grid; grid-template-columns:1fr 1fr; gap:26px 40px; margin-top:6px; }
.ce-method__k { font-family:var(--caps); font-size:10px; letter-spacing:.18em; text-transform:uppercase; color:var(--gold-deep); border-top:1px solid var(--line-gold); padding-top:14px; }
.ce-method__v { font-family:var(--serif); font-size:17.5px; line-height:1.56; color:var(--ink-mut); margin-top:6px; }
.ce-method__v b { color:var(--ink); font-weight:600; }

/* the open question — gather */
.ce-gather { margin:clamp(56px,7vw,88px) 0 0; padding:clamp(40px,5vw,60px) clamp(32px,4vw,56px);
    background:radial-gradient(ellipse 130% 150% at 100% 0%, #24404F 0%, var(--slate-deep) 60%, #172935 100%);
    color:#F3F0E9; position:relative; overflow:hidden; }
.ce-gather__fa { position:absolute; bottom:-40px; left:-10px; font-family:var(--faceremony); font-weight:700; font-size:clamp(120px,20vw,240px); line-height:1; color:rgba(199,164,104,.06); direction:rtl; pointer-events:none; }
.ce-gather__in { position:relative; z-index:1; max-width:640px; }
.ce-gather__k { font-family:var(--caps); font-size:11px; letter-spacing:.24em; text-transform:uppercase; color:var(--gold); }
.ce-gather__q { font-family:var(--serif); font-weight:500; font-size:clamp(28px,3.6vw,42px); line-height:1.1; letter-spacing:-.015em; color:#F3F0E9; margin:14px 0 0; text-wrap:balance; }
.ce-gather__p { font-family:var(--serif); font-size:19px; line-height:1.55; color:rgba(236,233,226,.75); margin:18px 0 0; }
.ce-gather__cta { display:inline-flex; align-items:center; gap:12px; margin-top:26px; font-family:var(--caps); font-size:12px; letter-spacing:.14em; text-transform:uppercase;
    color:var(--slate-deep); background:var(--gold); padding:15px 26px; border-radius:999px; text-decoration:none; transition:background .2s; }
.ce-gather__cta:hover { background:var(--gold-soft); }
.ce-gather__note { font-family:var(--serif); font-style:italic; font-size:15px; color:rgba(236,233,226,.5); margin-top:16px; }

/* bibliography */
.ce-biblio { list-style:none; margin:6px 0 0; padding:0; }
.ce-biblio li { font-family:var(--serif); font-size:17px; line-height:1.5; color:var(--ink-mut); padding:14px 0; border-bottom:1px solid var(--line); text-indent:-22px; padding-left:22px; }
.ce-biblio li:last-child { border-bottom:none; }
.ce-biblio li b { color:var(--ink); font-weight:600; font-style:normal; }
.ce-biblio li i { font-style:italic; color:var(--ink); }

.ce-endnote { margin-top:36px; padding-top:22px; border-top:1px solid var(--line-gold); font-family:var(--serif); font-style:italic; font-size:16px; line-height:1.6; color:var(--ink-faint); }

@media (max-width:1000px){
  .ce-codex { grid-template-columns:1fr; gap:44px; }
  .ce-rail { position:static; flex-direction:row; flex-wrap:wrap; }
  .ce-card { flex:1 1 260px; }
  .ce-mast__grid { grid-template-columns:1fr; }
  .ce-mast__fahead { text-align:left; }
}
@media (max-width:620px){
  .ce-var, .ce-method, .ce-ety { grid-template-columns:1fr; }
  .ce-ety { gap:14px; }
  .ce-stage { grid-template-columns:40px 1fr; gap:6px 16px; }
}