/* ============================================================
   THE CHARACTER FORMATION PROFILE · Blueprint & Cornerstone
   Design system v1 · Character Formation Coaching · 2026
   ============================================================ */

:root{
  --paper:#FAF7F1;
  --paper-deep:#F1EDE6;
  --card:#FFFFFF;
  --ink:#26231F;
  --soft:#5C564C;
  --rule:#D9D2C6;
  --rule-soft:#E7E1D6;

  /* The four structures — sampled from the Character Structures Map artwork */
  --rose:#CD1956;      --rose-deep:#A41445;   --rose-t:#FAE8EE;
  --amber:#F09511;     --amber-ink:#9E620B;   --amber-t:#FDF4E7;
  --cobalt:#2C6EAA;    --cobalt-deep:#235888; --cobalt-t:#E9F0F6;
  --emerald:#139B6D;   --emerald-ink:#0F7F59; --emerald-t:#E7F5F0;

  /* The four states — sampled from the CFC states triangle artwork */
  --slate:#7196B1;  --slate-ink:#557186;
  --lime:#92D14F;   --lime-ink:#54792D;
  --teal:#4BB796;   --teal-ink:#327C65;
  --kelly:#00AF50;  --kelly-ink:#00813B;

  --maxw:1180px;
  --gutter:clamp(20px,5vw,60px);
  --shadow:0 1px 2px rgba(38,35,31,.04), 0 10px 30px -12px rgba(38,35,31,.16);
  --shadow-lift:0 2px 4px rgba(38,35,31,.05), 0 24px 46px -16px rgba(38,35,31,.24);
  --serif:"Fraunces", Georgia, serif;
  --sans:"Public Sans", Calibri, Arial, system-ui, sans-serif;
  --mono:"JetBrains Mono", Consolas, monospace;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; color:var(--ink); background:var(--paper);
  font-family:var(--sans); font-size:17px; line-height:1.65;
  /* faint drafting grid, pure CSS */
  background-image:
    repeating-linear-gradient(90deg, rgba(38,35,31,.025) 0 1px, transparent 1px 96px),
    repeating-linear-gradient(0deg, rgba(38,35,31,.02) 0 1px, transparent 1px 96px);
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
h1,h2,h3{font-family:var(--serif); font-weight:550; line-height:1.06; margin:0 0 .45em; letter-spacing:-.01em}
h1{font-size:clamp(38px,6vw,68px)}
h2{font-size:clamp(28px,4vw,44px)}
h3{font-size:clamp(20px,2.4vw,26px); line-height:1.2}
p{margin:0 0 1em}
a{color:var(--cobalt-deep)}
img{max-width:100%}
.wrap{max-width:var(--maxw); margin:0 auto; padding:0 var(--gutter)}
section{padding:clamp(56px,9vw,100px) 0}
.kicker{
  font-family:var(--mono); font-size:12px; letter-spacing:.22em; text-transform:uppercase;
  color:var(--soft); display:flex; align-items:center; gap:10px; margin-bottom:14px;
}
.kicker::before{content:""; width:7px; height:7px; border-radius:50%; background:var(--rose); flex:none}
.kicker.k-amber::before{background:var(--amber)}
.kicker.k-cobalt::before{background:var(--cobalt)}
.kicker.k-emerald::before{background:var(--emerald)}
.lede{font-size:clamp(18px,2vw,21px); color:var(--soft); max-width:62ch}
.hairline{border:0; border-top:1px solid var(--rule); margin:0;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);
          mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent)}

/* ---------- Navigation ---------- */
.nav{position:sticky; top:0; z-index:60; background:rgba(250,247,241,.88); backdrop-filter:blur(10px);
  border-bottom:1px solid var(--rule-soft)}
.nav .wrap{display:flex; align-items:center; gap:26px; min-height:64px}
.brand{display:flex; align-items:center; gap:10px; text-decoration:none; color:var(--ink);
  font-family:var(--serif); font-size:19px; font-weight:600; margin-right:auto; letter-spacing:-.01em}
.brand svg{display:block}
.navlinks{display:flex; gap:22px; align-items:center; flex-wrap:wrap}
.navlinks a{font-size:14.5px; font-weight:500; text-decoration:none; color:var(--soft); position:relative; padding:4px 0}
.navlinks a:hover{color:var(--ink)}
.navlinks a.on{color:var(--ink)}
.navlinks a.on::after{content:""; position:absolute; left:0; right:0; bottom:-2px; height:2px; background:var(--rose); border-radius:2px}
.btn{display:inline-flex; align-items:center; gap:9px; background:var(--ink); color:var(--paper);
  font-family:var(--sans); font-weight:600; font-size:15px; text-decoration:none;
  padding:12px 22px; border-radius:999px; border:1px solid var(--ink); cursor:pointer; transition:transform .18s ease, box-shadow .18s ease}
.btn:hover{transform:translateY(-1px); box-shadow:var(--shadow)}
.btn .arr{transition:transform .18s ease}
.btn:hover .arr{transform:translateX(3px)}
.btn-ghost{background:transparent; color:var(--ink); border:1px solid var(--rule)}
.btn-ghost:hover{border-color:var(--ink)}
.btn[disabled]{opacity:.45; pointer-events:none}
.menu-btn{display:none; background:none; border:1px solid var(--rule); border-radius:10px; padding:7px 11px; font-size:18px; cursor:pointer; color:var(--ink)}

/* ---------- Hero ---------- */
.hero{padding:clamp(60px,10vw,120px) 0 clamp(48px,7vw,84px); position:relative; overflow:hidden}
.hero .wrap{display:grid; grid-template-columns:1.15fr .85fr; gap:clamp(28px,5vw,72px); align-items:center}
.hero h1 .it{font-style:italic; font-weight:420}
.hero-actions{display:flex; gap:14px; flex-wrap:wrap; margin-top:26px}
.hero-meta{font-family:var(--mono); font-size:12.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--soft); margin-top:22px}
.plate{background:var(--card); border:1px solid var(--rule); border-radius:20px; box-shadow:var(--shadow); padding:26px; position:relative}
.plate::before,.plate::after{content:""; position:absolute; width:14px; height:14px; border-color:var(--rule); border-style:solid}
.plate::before{top:9px; left:9px; border-width:1px 0 0 1px}
.plate::after{bottom:9px; right:9px; border-width:0 1px 1px 0}
.plate .plateno{font-family:var(--mono); font-size:11px; letter-spacing:.2em; color:var(--soft); text-transform:uppercase; text-align:center; margin-top:14px}

/* ---------- Cards & grids ---------- */
.grid2{display:grid; grid-template-columns:1fr 1fr; gap:22px}
.grid3{display:grid; grid-template-columns:repeat(3,1fr); gap:22px}
.grid4{display:grid; grid-template-columns:repeat(4,1fr); gap:22px}
.card{background:var(--card); border:1px solid var(--rule); border-radius:16px; padding:26px; box-shadow:var(--shadow);
  transition:transform .18s ease, box-shadow .18s ease}
.card:hover{transform:translateY(-3px); box-shadow:var(--shadow-lift)}
.card h3{margin-top:8px}
.scard{border-top:5px solid var(--ink); text-decoration:none; color:var(--ink); display:block}
.scard.rose{border-top-color:var(--rose)} .scard.amber{border-top-color:var(--amber)}
.scard.cobalt{border-top-color:var(--cobalt)} .scard.emerald{border-top-color:var(--emerald)}
.scard .subs{font-family:var(--mono); font-size:12px; color:var(--soft); letter-spacing:.06em; margin-top:10px}
.chip{display:inline-block; font-family:var(--mono); font-size:11.5px; letter-spacing:.08em; padding:4px 11px;
  border-radius:999px; border:1px solid var(--rule); background:var(--card); color:var(--soft); margin:0 6px 6px 0}
.chip.fill-rose{background:var(--rose-t); border-color:transparent; color:var(--rose-deep)}
.chip.fill-amber{background:var(--amber-t); border-color:transparent; color:var(--amber-ink)}
.chip.fill-cobalt{background:var(--cobalt-t); border-color:transparent; color:var(--cobalt-deep)}
.chip.fill-emerald{background:var(--emerald-t); border-color:transparent; color:var(--emerald-ink)}

/* ---------- Section tints ---------- */
.tint-rose{background:linear-gradient(180deg,var(--rose-t),transparent 82%)}
.tint-amber{background:linear-gradient(180deg,var(--amber-t),transparent 82%)}
.tint-cobalt{background:linear-gradient(180deg,var(--cobalt-t),transparent 82%)}
.tint-emerald{background:linear-gradient(180deg,var(--emerald-t),transparent 82%)}
.band-ink{background:var(--ink); color:var(--paper)}
.band-ink h2,.band-ink h3{color:var(--paper)}
.band-ink .lede{color:#C9C2B6}
.band-ink .kicker{color:#A79E8F}

/* ---------- Ladders ---------- */
.ladder{display:grid; gap:12px; counter-reset:rung}
.rung{background:var(--card); border:1px solid var(--rule); border-left-width:5px; border-radius:12px;
  padding:16px 18px 16px 20px; position:relative; transition:transform .15s ease}
.rung .lv{font-family:var(--mono); font-size:11px; letter-spacing:.18em; text-transform:uppercase; color:var(--soft); display:block; margin-bottom:4px}
.rung p{margin:0; font-size:15.5px}
.rung.r1{margin-left:0} .rung.r2{margin-left:clamp(8px,4vw,44px)} .rung.r3{margin-left:clamp(16px,8vw,88px)}
.ladder.rose .rung{border-left-color:var(--rose)} .ladder.amber .rung{border-left-color:var(--amber)}
.ladder.cobalt .rung{border-left-color:var(--cobalt)} .ladder.emerald .rung{border-left-color:var(--emerald)}
.rung.here{box-shadow:var(--shadow-lift); border-width:1px 1px 1px 5px}
.rung.here::after{content:"YOU ARE HERE"; position:absolute; top:-9px; right:12px; font-family:var(--mono);
  font-size:10px; letter-spacing:.14em; background:var(--ink); color:var(--paper); padding:3px 9px; border-radius:999px}
.rung.dim{opacity:.55}
.draft-flag{font-family:var(--mono); font-size:10.5px; letter-spacing:.12em; color:var(--amber-ink);
  border:1px dashed var(--amber); border-radius:999px; padding:2px 9px; margin-left:8px; vertical-align:middle}

/* ---------- Hiding pattern tables ---------- */
.ptable{width:100%; border-collapse:collapse; background:var(--card); border:1px solid var(--rule); border-radius:14px; overflow:hidden; box-shadow:var(--shadow)}
.ptable th{font-family:var(--mono); font-size:11.5px; letter-spacing:.14em; text-transform:uppercase; text-align:left;
  padding:12px 16px; color:var(--paper); background:var(--ink)}
.ptable td{padding:13px 16px; border-top:1px solid var(--rule-soft); vertical-align:top; font-size:15px; width:50%}
.ptable td b{display:block; font-family:var(--sans)}
.ptable td .voice{font-family:var(--serif); font-style:italic; color:var(--soft); display:block; margin:2px 0}
.ptable td .gloss{color:var(--soft); font-size:13.5px}
.pt-rose th{background:var(--rose-deep)} .pt-amber th{background:var(--amber-ink)}
.pt-cobalt th{background:var(--cobalt-deep)} .pt-emerald th{background:var(--emerald-ink)}

/* ---------- Meters ---------- */
.meter{margin:14px 0}
.meter .mhead{display:flex; justify-content:space-between; align-items:baseline; gap:10px; margin-bottom:6px}
.meter .mname{font-weight:600; font-size:15px}
.meter .mval{font-family:var(--mono); font-size:12px; color:var(--soft)}
.meter .track{height:10px; background:var(--paper-deep); border:1px solid var(--rule-soft); border-radius:999px; position:relative; overflow:hidden}
.meter .fill{position:absolute; inset:0 auto 0 0; width:0; border-radius:999px; transition:width .9s cubic-bezier(.2,.7,.2,1)}
.meter.rose .fill{background:var(--rose)} .meter.amber .fill{background:var(--amber)}
.meter.cobalt .fill{background:var(--cobalt)} .meter.emerald .fill{background:var(--emerald)}
.lvlchips{display:flex; gap:6px}
.lvlchips span{font-family:var(--mono); font-size:10.5px; padding:2px 8px; border-radius:6px; border:1px solid var(--rule); color:var(--soft)}
.lvlchips span.won{background:var(--ink); border-color:var(--ink); color:var(--paper)}

/* ---------- Assessment ---------- */
.q{background:var(--card); border:1px solid var(--rule); border-radius:14px; padding:20px 22px; margin-bottom:14px; box-shadow:var(--shadow)}
.q .qt{font-size:16.5px; font-weight:500; margin-bottom:14px}
.q .qno{font-family:var(--mono); font-size:11px; color:var(--soft); letter-spacing:.14em; display:block; margin-bottom:6px}
.likert{display:grid; grid-template-columns:repeat(6,1fr); gap:8px}
.likert label{display:flex; flex-direction:column; align-items:center; gap:6px; cursor:pointer;
  border:1px solid var(--rule); border-radius:10px; padding:10px 4px 8px; font-family:var(--mono); font-size:12px; color:var(--soft);
  transition:all .12s ease; text-align:center; background:var(--paper)}
.likert label:hover{border-color:var(--ink); color:var(--ink)}
.likert input{position:absolute; opacity:0; pointer-events:none}
.likert label.sel{background:var(--ink); border-color:var(--ink); color:var(--paper)}
.likert .lk-cap{font-size:9.5px; letter-spacing:.05em; min-height:2.2em; line-height:1.15}
.scale-legend{display:flex; justify-content:space-between; font-family:var(--mono); font-size:11px; color:var(--soft); letter-spacing:.08em; margin:4px 2px 18px}
.progressbar{position:sticky; top:64px; z-index:50; background:var(--paper); border-bottom:1px solid var(--rule-soft); padding:10px 0}
.progressbar .wrap{display:flex; align-items:center; gap:16px}
.ptrack{flex:1; height:8px; background:var(--paper-deep); border-radius:999px; overflow:hidden; border:1px solid var(--rule-soft)}
.pfill{height:100%; width:0; background:linear-gradient(90deg,var(--rose),var(--amber),var(--cobalt),var(--emerald)); transition:width .3s ease}
.plabel{font-family:var(--mono); font-size:12px; color:var(--soft); white-space:nowrap}
.stage-head{margin:34px 0 18px}
.stage-head .kicker{margin-bottom:6px}
.assess-nav{display:flex; justify-content:space-between; gap:14px; margin:30px 0 60px}

/* ---------- Results ---------- */
.rhead{padding:clamp(48px,7vw,84px) 0 20px}
.rheadline{font-size:clamp(30px,4.6vw,52px)}
.rsub{color:var(--soft); font-size:18px}
.wheelbox{display:grid; grid-template-columns:1fr 1fr; gap:clamp(24px,4vw,56px); align-items:center}
.legend{display:grid; gap:10px}
.legend .li{display:flex; align-items:center; gap:10px; font-size:15px}
.legend .sw{width:14px; height:14px; border-radius:4px; flex:none}
.pcard{background:var(--card); border:1px solid var(--rule); border-radius:14px; padding:20px; box-shadow:var(--shadow)}
.pcard .pv{font-family:var(--serif); font-style:italic; color:var(--soft); margin:4px 0 10px}
.pcard .tag{font-family:var(--mono); font-size:10.5px; letter-spacing:.14em; text-transform:uppercase; padding:3px 9px; border-radius:999px}
.tag.active{background:var(--ink); color:var(--paper)}
.tag.occasional{border:1px solid var(--rule); color:var(--soft)}
.gttrow{display:grid; grid-template-columns:repeat(3,1fr); gap:16px}
.gtt{border-radius:14px; padding:18px; border:1px solid var(--rule); background:var(--card)}
.gtt .gk{font-family:var(--mono); font-size:11px; letter-spacing:.18em; text-transform:uppercase; margin-bottom:8px; display:block}
.gtt.grace .gk{color:var(--rose-deep)} .gtt.truth .gk{color:var(--cobalt-deep)} .gtt.time .gk{color:var(--emerald-ink)}
.care{border:1px solid var(--rule); border-left:5px solid var(--rose); background:var(--card); border-radius:12px; padding:18px 20px; font-size:15px; color:var(--soft)}
.scripture{font-family:var(--serif); font-size:clamp(20px,2.6vw,27px); font-style:italic; line-height:1.5}
.scripture .ref{display:block; font-family:var(--mono); font-style:normal; font-size:12px; letter-spacing:.16em; margin-top:14px; text-transform:uppercase}
.edge{border:1px dashed var(--rule); border-radius:12px; padding:14px 16px; background:var(--paper-deep); font-size:15px}

/* ---------- Timeline ---------- */
.timeline{display:grid; gap:0; position:relative; padding-left:26px}
.timeline::before{content:""; position:absolute; left:8px; top:6px; bottom:6px; width:1px; background:var(--rule)}
.tl{position:relative; padding:0 0 26px}
.tl::before{content:""; position:absolute; left:-23px; top:7px; width:11px; height:11px; border-radius:50%; background:var(--card); border:2px solid var(--ink)}
.tl.rose::before{border-color:var(--rose)} .tl.amber::before{border-color:var(--amber)}
.tl.cobalt::before{border-color:var(--cobalt)} .tl.emerald::before{border-color:var(--emerald)}
.tl .age{font-family:var(--mono); font-size:11.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--soft)}

/* ---------- Footer ---------- */
footer{background:var(--paper-deep); border-top:1px solid var(--rule); padding:44px 0 34px; margin-top:40px}
footer .cols{display:grid; grid-template-columns:2fr 1fr 1fr; gap:28px; margin-bottom:26px}
footer h4{font-family:var(--mono); font-size:11px; letter-spacing:.18em; text-transform:uppercase; color:var(--soft); margin:0 0 10px}
footer a{display:block; color:var(--ink); text-decoration:none; font-size:14.5px; padding:3px 0}
footer a:hover{text-decoration:underline}
.fineprint{font-size:12.5px; color:var(--soft); border-top:1px solid var(--rule); padding-top:18px; line-height:1.6}

/* ---------- Reveal ---------- */
.rv{opacity:0; transform:translateY(16px); transition:opacity .7s ease, transform .7s ease}
.rv.in{opacity:1; transform:none}

/* ---------- Print (report) ---------- */
@media print{
  .nav,.progressbar,footer,.no-print,.btn{display:none !important}
  body{background:#fff; font-size:12px}
  section{padding:18px 0}
  .card,.pcard,.plate,.q{box-shadow:none}
  .rv{opacity:1; transform:none}
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion:reduce){
  *{transition:none !important; animation:none !important; scroll-behavior:auto}
  .rv{opacity:1; transform:none}
}

/* ---------- Mobile ---------- */
@media (max-width:920px){
  .hero .wrap,.wheelbox{grid-template-columns:1fr}
  .grid4{grid-template-columns:1fr 1fr}
  .grid3{grid-template-columns:1fr}
  .navlinks{display:none; position:absolute; top:64px; left:0; right:0; background:var(--paper);
    border-bottom:1px solid var(--rule); flex-direction:column; align-items:flex-start; padding:16px var(--gutter); gap:12px}
  .navlinks.open{display:flex}
  .menu-btn{display:block}
  footer .cols{grid-template-columns:1fr}
  .gttrow{grid-template-columns:1fr}
  .likert{grid-template-columns:repeat(3,1fr)}
}
@media (max-width:560px){
  .grid4,.grid2{grid-template-columns:1fr}
}