:root{
  --void:#2A060C; --room:#5C0E1A; --room2:#43090F;
  --leather:#3E0C13; --leather2:#4C1119; --umber:#5A1620;
  --line:#A87848; --hair:rgba(210,172,102,.22);
  --brass-dim:#BE9B5E; --brass:#C79E52; --brass-lit:#D2AC66;
  --amber:#E7A94F; --parchment:#ECDEC4; --cream:#E7D9BE; --muted:#C9B48F;
  --oxblood:#7A1822;
  --serif:Georgia,'Times New Roman',serif;
  --sans:ui-sans-serif,-apple-system,'Segoe UI',Helvetica,Arial,sans-serif;
}
*{box-sizing:border-box;} html,body{margin:0;}
body{background:var(--room); color:var(--cream); font-family:var(--serif); line-height:1.55; -webkit-font-smoothing:antialiased;}
a{color:inherit;}
.grain{position:absolute; inset:0; pointer-events:none; opacity:.05; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");}
.eyebrow{font-family:var(--sans); font-size:11px; letter-spacing:.34em; text-transform:uppercase; color:var(--brass-lit); font-weight:600;}
.hair{height:1px; background:linear-gradient(90deg, transparent, var(--hair) 12%, var(--hair) 88%, transparent);}
.wrap{max-width:880px; margin:0 auto; padding:0 24px;}

/* header / nav */
header.site{position:relative; z-index:3; display:flex; align-items:center; justify-content:space-between; padding:24px 46px 14px; flex-wrap:wrap; gap:14px;}
.mark{display:inline-flex; align-items:center; gap:12px; text-decoration:none;}
.brandlogo{height:42px; width:auto; display:block;}
.markword{font-family:var(--sans); letter-spacing:.42em; font-weight:600; font-size:14px; color:var(--brass-lit); text-transform:uppercase; border-left:1px solid rgba(210,172,102,.35); padding-left:12px;}
.lockup{display:block; margin:0 auto 10px; width:270px; height:auto;}
.seal{display:block; margin:0 auto 4px; width:120px; height:auto; opacity:.96;}
.seal.small{width:74px; opacity:.85; margin-bottom:14px;}
footer.site .fmark{height:30px; width:auto; opacity:.75; margin-bottom:14px;}
nav.top{display:flex; align-items:center; gap:24px; flex-wrap:wrap;}
nav.top a{font-family:var(--sans); font-size:12.5px; letter-spacing:.08em; color:var(--muted); text-decoration:none; transition:color .2s; padding-bottom:2px; border-bottom:1px solid transparent;}
nav.top a:hover{color:var(--parchment);}
nav.top a.active{color:var(--parchment); border-bottom-color:var(--brass);}
.enter{border:1px solid var(--line); border-radius:2px; padding:8px 16px; color:var(--brass-lit)!important; font-size:11.5px!important; letter-spacing:.18em!important; text-transform:uppercase; background:linear-gradient(180deg, rgba(231,169,79,.10), rgba(0,0,0,.15)); border-bottom:1px solid var(--line)!important;}
.enter:hover{border-color:var(--brass-lit); color:var(--cream)!important;}

/* hero / page head */
.hero{position:relative; overflow:hidden; text-align:center; padding:64px 22px 66px;
  background:radial-gradient(56% 54% at 50% 44%, rgba(231,169,79,.16), rgba(231,169,79,0) 70%), linear-gradient(180deg, var(--room2), var(--room) 55%, var(--void));}
.hero.tall{padding:76px 22px 86px;}
.hero .inner{position:relative; z-index:2; max-width:820px; margin:0 auto;}
.hero h1{font-family:var(--serif); font-weight:400; font-size:clamp(30px,4.4vw,52px); line-height:1.2; color:var(--cream); margin:14px auto 10px; max-width:18ch; text-shadow:0 1px 0 rgba(0,0,0,.5);}
.hero h1 .b{color:var(--brass-lit);}
.hero .dek{font-family:var(--serif); font-style:italic; color:var(--parchment); font-size:clamp(16px,2vw,20px); margin:0 auto 30px; max-width:34ch;}
.cta{display:inline-flex; align-items:center; gap:9px; border:1px solid var(--brass); border-radius:2px; padding:13px 26px; color:var(--brass-lit); font-family:var(--sans); font-size:12.5px; letter-spacing:.18em; text-transform:uppercase; text-decoration:none; background:linear-gradient(180deg, rgba(231,169,79,.10), rgba(0,0,0,.2)); transition:color .2s,border-color .2s;}
.cta:hover{color:var(--cream); border-color:var(--brass-lit);}
.start{font-family:var(--sans); font-size:12.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); margin-bottom:18px;}

/* prose */
.prose{position:relative; z-index:2; padding:56px 22px 66px;}
.prose .col{max-width:680px; margin:0 auto;}
.prose h2{font-family:var(--serif); font-weight:400; font-size:26px; color:var(--parchment); margin:34px 0 12px;}
.prose h2:first-child{margin-top:0;}
.prose p{font-family:var(--serif); font-size:18px; line-height:1.8; color:var(--cream); margin:0 0 18px;}
.prose p .b{color:var(--brass-lit);}
.prose .lead{font-size:20px; color:var(--parchment);}
.quote{position:relative; z-index:2; text-align:center; padding:8px 22px;}
.quote p{font-family:var(--serif); font-style:italic; font-size:clamp(20px,2.6vw,26px); color:var(--brass-lit); line-height:1.5; max-width:24ch; margin:0 auto;}

/* bands */
.band{position:relative; z-index:2; padding:52px 46px; border-top:1px solid rgba(210,172,102,.12); border-bottom:1px solid rgba(210,172,102,.12);}
.band .eyebrow{display:block; text-align:center; margin-bottom:6px;}
.band h2{text-align:center; font-family:var(--serif); font-weight:400; font-size:26px; color:var(--parchment); margin:0 0 32px;}

/* grids / cards */
.grid4{display:grid; grid-template-columns:repeat(4,1fr); gap:16px; max-width:1000px; margin:0 auto;}
.grid2{display:grid; grid-template-columns:1fr 1fr; gap:18px; max-width:840px; margin:20px auto 0;}
.card{position:relative; padding:22px 22px 24px; border:1px solid var(--line); border-radius:3px;
  background:radial-gradient(120% 90% at 50% 0%, rgba(231,169,79,.08), rgba(0,0,0,0) 62%), linear-gradient(180deg,var(--leather2),var(--leather));}
.card .n{font-family:var(--sans); font-size:10px; letter-spacing:.24em; color:var(--brass-dim); text-transform:uppercase;}
.card h3{font-family:var(--serif); font-weight:400; font-size:20px; color:var(--parchment); margin:8px 0 8px;}
.card p{margin:0; font-family:var(--sans); font-size:13px; line-height:1.6; color:var(--muted);}
.card ul{margin:0; padding-left:18px; font-family:var(--sans); font-size:13.5px; line-height:1.9; color:var(--muted);}

/* gate / cta band */
.gate{position:relative; overflow:hidden; text-align:center; padding:66px 22px;
  background:radial-gradient(52% 60% at 50% 46%, rgba(231,169,79,.14), rgba(231,169,79,0) 66%), linear-gradient(180deg,var(--void),var(--room2));}
.gate .inner{position:relative; z-index:2; max-width:640px; margin:0 auto;}
.gate .q{font-family:var(--serif); font-style:italic; font-size:clamp(20px,2.6vw,26px); color:var(--parchment); line-height:1.5; margin:14px 0 28px;}

/* footer */
footer.site{position:relative; z-index:2; text-align:center; padding:34px 22px 46px; border-top:1px solid rgba(210,172,102,.12);}
footer.site .p{font-family:var(--sans); font-size:11px; letter-spacing:.3em; text-transform:uppercase; color:var(--brass-dim);}
footer.site .c{font-family:var(--sans); font-size:11px; color:var(--muted); margin-top:10px; letter-spacing:.06em;}

@media (max-width:760px){
  header.site{flex-direction:column; gap:14px; padding:20px;} nav.top{justify-content:center; gap:16px;}
  .grid4{grid-template-columns:1fr 1fr;} .grid2{grid-template-columns:1fr;}
  .band,.prose,.gate{padding-left:20px; padding-right:20px;}
}

/* ============ GOVERNING DECLARATION (first screen) ============ */
.declare{position:relative; z-index:2; max-width:660px; margin:22px auto 0; padding:22px 26px;
  border-top:1px solid rgba(210,172,102,.30); border-bottom:1px solid rgba(210,172,102,.30);}
.declare p{font-family:var(--serif); font-size:19px; line-height:1.7; color:var(--parchment); margin:0;}
.declare p .b{color:var(--brass-lit);}

/* ============ FORMATION PATH — movement, not a list ============ */
.journey{max-width:900px; margin:0 auto; padding-top:6px;}
.jrow{position:relative; display:grid; grid-template-columns:110px 1fr; gap:22px; padding:0 0 34px 0;}
.jrow:last-child{padding-bottom:0;}
/* the spine: a continuous line the stages hang from */
.jrow::before{content:""; position:absolute; left:15px; top:26px; bottom:-8px; width:1px;
  background:linear-gradient(180deg, rgba(210,172,102,.55), rgba(210,172,102,.18));}
.jrow:last-child::before{display:none;}
.jnode{position:relative; padding-left:0;}
.jdot{position:absolute; left:8px; top:9px; width:15px; height:15px; border-radius:50%;
  border:1px solid var(--brass); background:radial-gradient(circle at 50% 40%, rgba(231,169,79,.65), rgba(231,169,79,.06) 70%);}
.jstage{display:block; margin-left:40px; font-family:var(--sans); font-size:10.5px; letter-spacing:.24em;
  text-transform:uppercase; color:var(--brass-dim); padding-top:6px;}
.jbody h3{font-family:var(--serif); font-weight:400; font-size:23px; color:var(--parchment); margin:0 0 4px;}
.jmove{font-family:var(--sans); font-size:11px; letter-spacing:.18em; text-transform:uppercase; color:var(--brass); margin:0 0 10px;}
.jbody p{font-family:var(--serif); font-size:17px; line-height:1.75; color:var(--cream); margin:0; max-width:52ch;}

/* ============ INSTITUTIONAL WEIGHT — structure, not canon ============ */
.house{position:relative; z-index:2; padding:52px 46px 58px; border-top:1px solid rgba(210,172,102,.12);}
.house .eyebrow{display:block; text-align:center; margin-bottom:6px;}
.house h2{text-align:center; font-family:var(--serif); font-weight:400; font-size:26px; color:var(--parchment); margin:0 0 10px;}
.house .sub{text-align:center; font-family:var(--sans); font-size:13.5px; color:var(--muted); max-width:52ch; margin:0 auto 30px; line-height:1.7;}
.orders{display:grid; grid-template-columns:repeat(3,1fr); gap:16px; max-width:940px; margin:0 auto;}
.order{border:1px solid var(--line); border-radius:3px; padding:20px 20px 22px;
  background:linear-gradient(180deg,var(--leather2),var(--leather));}
.order .tier{font-family:var(--sans); font-size:10px; letter-spacing:.24em; text-transform:uppercase; color:var(--brass-dim);}
.order h3{font-family:var(--serif); font-weight:400; font-size:19px; color:var(--parchment); margin:8px 0 6px;}
.order p{margin:0; font-family:var(--sans); font-size:13px; line-height:1.65; color:var(--muted);}
.standing{max-width:700px; margin:30px auto 0; text-align:center; padding-top:22px; border-top:1px solid rgba(210,172,102,.16);}
.standing p{font-family:var(--serif); font-style:italic; font-size:16.5px; color:var(--brass-lit); margin:0;}
.standing .meta{font-family:var(--sans); font-style:normal; font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--muted); margin-top:12px;}

/* ============ THE PEN — bound to the ecosystem ============ */
.chain{display:grid; grid-template-columns:repeat(5,1fr); gap:10px; max-width:840px; margin:26px auto 0;}
.link{text-align:center; padding:16px 8px; border:1px solid rgba(210,172,102,.28); border-radius:3px;
  background:linear-gradient(180deg, rgba(76,17,25,.7), rgba(62,12,19,.7));}
.link .s{display:block; font-family:var(--sans); font-size:10px; letter-spacing:.2em; text-transform:uppercase; color:var(--brass-dim); margin-bottom:6px;}
.link .t{font-family:var(--serif); font-size:16px; color:var(--parchment);}

@media (max-width:760px){
  .jrow{grid-template-columns:1fr; gap:6px;} .jrow::before{display:none;} .jdot{display:none;}
  .jstage{margin-left:0;}
  .orders{grid-template-columns:1fr;} .chain{grid-template-columns:1fr 1fr;}
  .house{padding-left:20px; padding-right:20px;}
}

/* ============ THE PEN AT WORK — the revealing ============ */
.reveal{position:relative; overflow:hidden; padding:66px 22px 72px;
  background:radial-gradient(54% 62% at 50% 44%, rgba(231,169,79,.15), rgba(231,169,79,0) 68%), linear-gradient(180deg,var(--void),var(--room2));}
.leaf{position:relative; z-index:2; width:min(640px,92%); margin:0 auto;}
.leaf .attrib{font-family:var(--sans); font-size:10.5px; letter-spacing:.24em; text-transform:uppercase; color:var(--brass); text-align:center; margin-bottom:26px;}
.leaf p{font-family:var(--serif); font-size:19px; line-height:1.9; color:var(--parchment); margin:0 0 20px;}
.leaf p.name{font-size:21px; color:var(--cream);}
.leaf p .b{color:var(--brass-lit);}
.leaf .sig{text-align:center; margin-top:30px; padding-top:20px; border-top:1px solid rgba(210,172,102,.22);
  font-family:var(--sans); font-size:11px; letter-spacing:.2em; text-transform:uppercase; color:var(--muted);}

/* ============ INTAKE — precision, restraint ============ */
.intake{max-width:560px; margin:0 auto; text-align:left;}
.field{margin-bottom:22px;}
.field label{display:block; font-family:var(--sans); font-size:10.5px; letter-spacing:.22em; text-transform:uppercase; color:var(--brass); margin-bottom:9px;}
.field .hint{display:block; font-family:var(--serif); font-style:italic; font-size:14px; color:var(--muted); margin-bottom:10px; text-transform:none; letter-spacing:0;}
.field input, .field select, .field textarea{
  width:100%; background:rgba(10,6,3,.34); color:var(--parchment);
  border:1px solid rgba(210,172,102,.30); border-radius:2px; padding:13px 14px;
  font-family:var(--serif); font-size:16px; line-height:1.6; outline:none; transition:border-color .25s, background .25s;}
.field textarea{min-height:120px; resize:vertical;}
.field input:focus, .field select:focus, .field textarea:focus{border-color:var(--brass-lit); background:rgba(10,6,3,.5);}
.field select{appearance:none; cursor:pointer;}
.field select option{background:#3E0C13; color:var(--parchment);}
.submitrow{text-align:center; margin-top:34px;}
button.cta{cursor:pointer; font:inherit; font-family:var(--sans); font-size:12.5px; letter-spacing:.18em; text-transform:uppercase;}
.assure{text-align:center; font-family:var(--sans); font-size:12.5px; color:var(--muted); margin-top:14px; line-height:1.7;}
