/* THE OATH — field dossier design system (ChristCode / Miracle Academy brand) */
:root{
  /* ChristCode field-dossier register — parchment (paper #EBE9E5 / ink #3E3B32 / gold #604905) */
  --paper:#EBE9E5; --paper2:#E1DED6; --ink:#3E3B32; --ink-soft:#6B665B;
  --ink-faint:#9C958A; --gold:#604905; --gold-pale:#CBB37E; --line:#CFC9BC;
  /* epistemic lanes — documented / inference / hypothesis */
  --doc:#4a6b4a; --inf:#8a6d2f; --hyp:#9a5b3c;
  --lane-doc:var(--doc); --lane-inf:var(--inf); --lane-hyp:var(--hyp);
  --serif:'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  --sans:'Inter', system-ui, -apple-system, sans-serif;
  --mono:'JetBrains Mono', ui-monospace, 'SFMono-Regular', monospace;
}
*{box-sizing:border-box; margin:0; padding:0;}
html{scroll-behavior:smooth;}
body{
  background:var(--paper); color:var(--ink);
  font-family:var(--sans); font-weight:300; font-size:17px; line-height:1.72;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
/* fixed grain overlay */
body::before{
  content:""; position:fixed; inset:0; z-index:9998; pointer-events:none;
  background-image:radial-gradient(var(--ink-faint) 0.5px, transparent 0.5px);
  background-size:4px 4px; opacity:.5; mix-blend-mode:multiply;
}
.wrap{max-width:1040px; margin:0 auto; padding:0 28px;}
a{color:var(--gold); text-decoration:none;}
a:hover{color:var(--ink);}

/* MASTHEAD */
.masthead{
  display:flex; align-items:center; justify-content:space-between;
  padding:20px 0; border-bottom:1px solid var(--line);
}
.masthead .mark{display:flex; align-items:center; gap:12px; text-decoration:none; color:var(--ink);}
.masthead .mark img{height:34px; width:34px; object-fit:contain;}
.masthead .mark .word{font-family:var(--mono); font-size:11px; letter-spacing:.2em; text-transform:uppercase; color:var(--ink-soft);}
.masthead .doc-tag{font-family:var(--mono); font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--gold);}

/* HERO */
.hero{padding:96px 0 64px; position:relative;}
.hero .kicker{font-family:var(--mono); font-size:11px; letter-spacing:.22em; text-transform:uppercase; color:var(--gold); margin-bottom:26px; display:flex; align-items:center; gap:14px;}
.hero .kicker::after{content:""; flex:1; max-width:220px; height:1px; background:var(--line);}
.hero h1{font-family:var(--serif); font-weight:500; font-size:clamp(2.9rem,8vw,5.6rem); line-height:1.02; letter-spacing:-.015em;}
.hero h1 em{font-style:italic; color:var(--gold);}
.hero .sub{max-width:640px; margin-top:30px; font-size:19px; color:var(--ink-soft); font-weight:300;}
.hero .lede{margin-top:46px; font-family:var(--mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-faint);}
.hero .lede b{color:var(--gold); font-weight:500;}

/* MODULE */
.module{position:relative; padding:88px 0; border-top:1px solid var(--line);}
.module::before{
  content:attr(data-num); position:absolute; top:30px; right:0;
  font-family:var(--serif); font-weight:500; font-size:130px; color:var(--gold);
  opacity:.08; line-height:.8; pointer-events:none;
}
.kicker-row{display:flex; align-items:center; gap:16px; margin-bottom:26px;}
.kicker-row .k{font-family:var(--mono); font-size:11px; letter-spacing:.2em; text-transform:uppercase; color:var(--gold); white-space:nowrap;}
.kicker-row .rule{flex:1; height:1px; background:var(--line);}
.module h2{font-family:var(--serif); font-weight:500; font-size:clamp(1.9rem,4.6vw,3rem); line-height:1.08; margin-bottom:26px; letter-spacing:-.01em;}
.module h2 em{font-style:italic; color:var(--gold);}
.module p{margin-bottom:20px; max-width:70ch;}
.module p b{font-weight:500; color:var(--ink);}

/* PULL QUOTE */
.pull{
  font-family:var(--serif); font-style:italic; font-size:clamp(1.35rem,3vw,1.9rem);
  line-height:1.34; color:var(--ink); border-left:3px solid var(--gold);
  padding:4px 0 4px 26px; margin:40px 0; max-width:62ch;
}
.pull .src{display:block; font-family:var(--mono); font-style:normal; font-size:10px; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-faint); margin-top:14px;}

/* FIGURE */
.figure{position:relative; margin:44px 0; aspect-ratio:21/9; overflow:hidden; background:var(--paper2); border:1px solid var(--line);}
.figure img{width:100%; height:100%; object-fit:cover; display:block;}
.figure .tick{position:absolute; width:22px; height:22px; border:2px solid var(--gold); z-index:2;}
.figure .tick.tl{top:10px; left:10px; border-right:0; border-bottom:0;}
.figure .tick.tr{top:10px; right:10px; border-left:0; border-bottom:0;}
.figure .tick.bl{bottom:10px; left:10px; border-right:0; border-top:0;}
.figure .tick.br{bottom:10px; right:10px; border-left:0; border-top:0;}
.figure .cap{
  position:absolute; left:0; right:0; bottom:0; padding:12px 16px; z-index:2;
  font-family:var(--mono); font-size:10.5px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--paper); background:linear-gradient(transparent, rgba(62,59,50,.78));
}
.figure .figno{position:absolute; top:14px; left:16px; z-index:2; font-family:var(--mono); font-size:10px; letter-spacing:.16em; text-transform:uppercase; color:var(--gold-pale);}

/* LANE TAGS */
.lane{
  display:inline-block; font-family:var(--mono); font-size:9px; letter-spacing:.1em;
  text-transform:uppercase; padding:2px 7px; border-radius:3px; margin-right:8px;
  vertical-align:2px; border:1px solid; font-weight:500;
}
.lane.doc{color:var(--lane-doc); border-color:var(--lane-doc);}
.lane.inf{color:var(--lane-inf); border-color:var(--lane-inf);}
.lane.hyp{color:var(--lane-hyp); border-color:var(--lane-hyp);}

/* LANE FILTER */
.lane-filter{display:flex; gap:10px; margin:0 0 30px; flex-wrap:wrap;}
.lane-filter button{font-family:var(--mono); font-size:10px; letter-spacing:.12em; text-transform:uppercase; padding:7px 15px; border:1px solid var(--line); background:transparent; color:var(--ink-soft); cursor:pointer; border-radius:20px; transition:all .2s;}
.lane-filter button:hover{border-color:var(--gold); color:var(--gold);}
.lane-filter button.active{border-color:var(--gold); color:var(--gold); background:rgba(96,73,5,.08);}
body.lane-only-doc .lane:not(.doc),
body.lane-only-inf .lane:not(.inf),
body.lane-only-hyp .lane:not(.hyp){opacity:.22;}

/* DATA TABLE */
.tablewrap{overflow-x:auto; margin:34px 0;}
.table{width:100%; border-collapse:collapse; font-size:15px; min-width:520px;}
.table th{font-family:var(--mono); font-size:10px; letter-spacing:.12em; text-transform:uppercase; color:var(--gold); text-align:left; padding:12px 14px; border-bottom:2px solid var(--gold); white-space:nowrap;}
.table td{padding:12px 14px; border-bottom:1px solid var(--line); color:var(--ink-soft); vertical-align:top;}
.table td.num{font-family:var(--serif); font-size:1.35rem; color:var(--ink); white-space:nowrap;}
.table tr.hl td{background:rgba(96,73,5,.1);}
.table tr.hl td:first-child{border-left:3px solid var(--gold);}

/* STAT ROW */
.stats{display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); gap:18px; margin:38px 0;}
.stat{background:var(--paper2); border:1px solid var(--line); border-radius:10px; padding:24px;}
.stat .n{font-family:var(--serif); font-weight:500; font-size:2.5rem; color:var(--gold); line-height:1;}
.stat .l{font-family:var(--mono); font-size:10px; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-faint); margin-top:12px; line-height:1.5;}

/* SIDE BY SIDE (traditions) */
.duo{display:grid; grid-template-columns:1fr 1fr; gap:0; border:1px solid var(--line); border-radius:10px; overflow:hidden; margin:40px 0;}
.duo .col{padding:26px 28px;}
.duo .col:first-child{border-right:1px solid var(--line); background:var(--paper2);}
.duo .col h3{font-family:var(--serif); font-weight:500; font-size:1.5rem; margin-bottom:6px; color:var(--gold);}
.duo .col .sub{font-family:var(--mono); font-size:10px; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-faint); margin-bottom:18px;}
.duo .col .row{display:flex; justify-content:space-between; gap:16px; padding:10px 0; border-bottom:1px solid var(--line); font-size:14px; line-height:1.45;}
.duo .col .row:last-child{border-bottom:0;}
.duo .col .row .k{color:var(--ink-faint); font-family:var(--mono); font-size:9.5px; letter-spacing:.08em; text-transform:uppercase; white-space:nowrap; padding-top:2px;}
.duo .col .row .v{color:var(--ink); text-align:right;}

/* PRACTICE CARD ACCORDION */
.practice{margin:38px 0; border:1px solid var(--line); border-radius:10px; overflow:hidden; background:var(--paper2);}
.practice .head{display:flex; align-items:center; justify-content:space-between; padding:18px 24px; cursor:pointer; font-family:var(--mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--gold); user-select:none;}
.practice .head .plus{font-size:20px; line-height:1; transition:transform .3s ease;}
.practice.open .head .plus{transform:rotate(45deg);}
.practice .body{max-height:0; overflow:hidden; transition:max-height .45s ease; padding:0 24px;}
.practice.open .body{max-height:800px; padding:0 24px 26px;}
.practice .body p{font-size:15.5px; color:var(--ink-soft); margin-bottom:14px;}
.practice .body p:last-child{margin-bottom:0;}

/* DOT RAIL */
.rail{position:fixed; right:24px; top:50%; transform:translateY(-50%); z-index:100; display:flex; flex-direction:column; gap:15px;}
.rail a{width:8px; height:8px; border-radius:50%; background:var(--line); position:relative; transition:all .3s; display:block;}
.rail a.active{background:var(--gold); transform:scale(1.4);}
.rail a .n{position:absolute; right:18px; top:50%; transform:translateY(-50%); font-family:var(--mono); font-size:10px; letter-spacing:.1em; color:var(--gold); opacity:0; white-space:nowrap; transition:opacity .3s;}
.rail a.active .n{opacity:1;}

/* FOOTER */
.footer{border-top:1px solid var(--line); padding:70px 0 80px; margin-top:20px;}
.footer .sign{font-family:var(--serif); font-style:italic; font-weight:500; font-size:clamp(1.7rem,4vw,2.4rem); color:var(--ink); line-height:1.25; max-width:24ch; margin-bottom:30px;}
.footer .sign em{color:var(--gold);}
.footer .cta{
  display:inline-block; font-family:var(--mono); font-size:12px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--paper); background:var(--gold); padding:16px 34px; border-radius:4px; transition:background .2s;
}
.footer .cta:hover{background:var(--ink); color:var(--paper);}
.footer .byline{display:flex; align-items:center; gap:12px; margin-top:54px; color:var(--ink-faint); font-size:13px;}
.footer .byline img{height:26px; width:26px; object-fit:contain; opacity:.7;}
.footer .srcs{margin-top:34px; font-size:12.5px; color:var(--ink-faint); line-height:1.9; max-width:70ch;}
.footer .srcs a{color:var(--ink-soft);}

/* SCROLL REVEAL — gated behind html.js so no-JS never blanks */
html.js .reveal{opacity:0; transform:translateY(16px); transition:opacity .55s ease, transform .55s ease;}
html.js .reveal.in{opacity:1; transform:none;}

/* RESPONSIVE */
@media(max-width:1220px){.rail{display:none;}}
@media(max-width:720px){
  body{font-size:16px;}
  .module{padding:60px 0;}
  .hero{padding:60px 0 40px;}
  .duo{grid-template-columns:1fr;}
  .duo .col:first-child{border-right:0; border-bottom:1px solid var(--line);}
  .module::before{font-size:96px;}
}