/* ============================================================
   DN COLLEGES GROUP — "One Prospectus" preview
   Editorial / industrial system. Warm newsprint + furnace ember.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,300..900;1,9..144,300..900&family=Archivo:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500;700&display=swap');

:root {
  --ink:        #0C1116;
  --ink-2:      #161D25;
  --ink-3:      #222C36;
  --paper:      #F5F1EA;
  --paper-2:    #EBE5DA;
  --paper-3:    #DED6C7;
  --ember:      #CE4119;   /* white text on this = 4.87:1 */
  --ember-ink:  #9C3208;   /* ember as TEXT on paper = 6.5:1 */
  --ember-lift: #F26B3E;
  --signal:     #0C6B5E;
  --signal-lift:#12A08C;
  --alarm:      #A82817;
  --slate:      #59636E;
  --slate-lt:   #8B949D;

  --rule:       1px solid var(--paper-3);
  --rule-dark:  1px solid rgba(245,241,234,.16);

  --display: 'Fraunces', 'Iowan Old Style', Georgia, serif;
  --body:    'Archivo', 'Helvetica Neue', sans-serif;
  --mono:    'JetBrains Mono', ui-monospace, monospace;

  --gut: clamp(1.25rem, 4vw, 4.5rem);
  --maxw: 1360px;
  --ease: cubic-bezier(.22,.61,.36,1);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; }
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--body);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

/* ---------- Accessibility primitives ---------- */
.skip {
  position: absolute; left: -9999px; top: 0; z-index: 999;
  background: var(--ink); color: var(--paper); padding: .9rem 1.4rem;
  font-weight: 700; text-decoration: none;
}
.skip:focus { left: 0; }
:focus-visible {
  outline: 3px solid var(--ember);
  outline-offset: 3px;
  border-radius: 2px;
}
.dark :focus-visible { outline-color: var(--ember-lift); }
.vh {
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}

/* ---------- Layout ---------- */
.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 var(--gut); }
section { position: relative; }
.dark { background: var(--ink); color: var(--paper); }
.dark a { color: var(--paper); }

/* grain overlay for dark blocks */
.dark::before {
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .35;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='.42'/%3E%3C/svg%3E");
  mix-blend-mode: overlay;
}
.dark > * { position: relative; z-index: 1; }

/* ---------- Type ---------- */
h1,h2,h3,h4 { font-family: var(--display); font-weight: 600; line-height: 1.02; margin: 0; font-variation-settings: "SOFT" 0, "WONK" 0; }
h1 { font-size: clamp(2.9rem, 7.4vw, 6.4rem); letter-spacing: -.028em; }
h2 { font-size: clamp(2rem, 4.4vw, 3.5rem); letter-spacing: -.022em; }
h3 { font-size: clamp(1.25rem, 2.1vw, 1.7rem); letter-spacing: -.012em; }
p { margin: 0 0 1.1em; max-width: 68ch; }
.lede { font-size: clamp(1.1rem,1.65vw,1.4rem); line-height: 1.5; color: var(--ink-3); }
.dark .lede { color: #C9D0D7; }
strong { font-weight: 700; }

.eyebrow {
  font-family: var(--mono); font-size: .72rem; font-weight: 700;
  letter-spacing: .18em; text-transform: uppercase; color: var(--ember-ink);
  display: flex; align-items: center; gap: .7rem; margin-bottom: 1.5rem;
}
.eyebrow::after { content:""; height:1px; flex:1; background: currentColor; opacity:.4; }
.dark .eyebrow { color: var(--ember-lift); }

/* ---------- Header ---------- */
.masthead {
  position: sticky; top: 0; z-index: 50;
  background: rgba(12,17,22,.93); backdrop-filter: blur(14px);
  border-bottom: var(--rule-dark); color: var(--paper);
}
.masthead .wrap { display: flex; align-items: center; gap: 2rem; height: 62px; }
.brandmark { font-family: var(--display); font-weight: 700; font-size: 1.05rem; letter-spacing: -.01em; text-decoration:none; color: var(--paper); white-space: nowrap; }
.brandmark span { color: var(--ember-lift); }
.masthead nav { margin-left: auto; min-width: 0; display: flex; gap: 1.6rem; overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none; }
.masthead nav::-webkit-scrollbar { display: none; }
.masthead nav a {
  font-size: .82rem; font-weight: 600; text-decoration: none; color: #AEB7C0;
  white-space: nowrap; padding: .35rem 0; border-bottom: 2px solid transparent; transition: color .2s, border-color .2s;
}
.masthead nav a:hover, .masthead nav a[aria-current="true"] { color: var(--paper); border-color: var(--ember); }
.tag-preview {
  font-family: var(--mono); font-size:.62rem; font-weight:700; letter-spacing:.12em;
  background: var(--ember); color:#fff; padding:.2rem .45rem; border-radius:2px; text-transform:uppercase;
}

/* ---------- Hero ---------- */
.hero { padding: clamp(4rem,9vw,8rem) 0 clamp(3rem,6vw,5rem); overflow: hidden; }
.hero-grid { display: grid; grid-template-columns: 1.25fr .85fr; gap: clamp(2rem,5vw,5rem); align-items: end; }
@media (max-width: 900px) { .hero-grid { grid-template-columns: 1fr; } }
.hero h1 em { font-style: italic; color: var(--ember-lift); font-variation-settings: "SOFT" 60, "WONK" 1; }
.hero .lede { margin-top: 1.8rem; max-width: 46ch; }
.hero-stat { border-left: 3px solid var(--ember); padding-left: 1.2rem; }
.hero-stat + .hero-stat { margin-top: 1.9rem; }
.hero-stat b { display:block; font-family: var(--display); font-size: clamp(2.4rem,4.6vw,3.6rem); line-height:1; font-weight:700; letter-spacing:-.02em; }
.hero-stat span { font-size:.88rem; color:#AEB7C0; display:block; margin-top:.45rem; max-width: 30ch; }

.reveal { opacity: 0; transform: translateY(22px); animation: rise .85s var(--ease) forwards; }
@keyframes rise { to { opacity:1; transform:none; } }
.d1{animation-delay:.05s}.d2{animation-delay:.16s}.d3{animation-delay:.27s}.d4{animation-delay:.38s}.d5{animation-delay:.49s}

/* ---------- Estate strip (six sites) ---------- */
.estate { display:grid; grid-template-columns: repeat(6,1fr); gap:1px; background: rgba(245,241,234,.16); border-top: var(--rule-dark); border-bottom: var(--rule-dark); margin-top: clamp(3rem,6vw,5rem); }
@media (max-width: 1000px){ .estate{ grid-template-columns: repeat(3,1fr);} }
@media (max-width: 560px){ .estate{ grid-template-columns: repeat(2,1fr);} }
.estate div { background: var(--ink); padding: 1.4rem 1.1rem; }
.estate dt { font-family: var(--mono); font-size:.7rem; color: var(--ember-lift); letter-spacing:.06em; }
.estate dd { margin:.45rem 0 0; font-size:.82rem; color:#C9D0D7; line-height:1.35; }
.estate dd.sub { font-size:.72rem; color:#98A2AB; margin-top:.3rem; }
.estate dd.big { display:block; font-family:var(--display); font-size:1.5rem; font-weight:700; margin-top:.5rem; }

/* grid/flex children must be allowed to shrink below content width */
.loop > *, .head-2col > *, .hero-grid > *, .ba > div, .phase > *, .price-grid > * { min-width: 0; }

/* ---------- Generic section ---------- */
.band { padding: clamp(4rem,8vw,7rem) 0; }
.band + .band { border-top: var(--rule); }
.dark.band + .dark.band { border-top: var(--rule-dark); }
.head-2col { display:grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem,5vw,4.5rem); align-items:start; margin-bottom: clamp(2.5rem,5vw,4rem); }
@media (max-width: 860px){ .head-2col{ grid-template-columns:1fr; } }

/* ---------- Finding cards ---------- */
.findings { display:grid; grid-template-columns: repeat(auto-fit,minmax(270px,1fr)); gap:1px; background: var(--paper-3); border: var(--rule); }
.finding { background: var(--paper); padding: 1.8rem 1.5rem; }
.finding .n { font-family: var(--display); font-size: clamp(2.6rem,4.4vw,3.4rem); font-weight:800; line-height:.95; letter-spacing:-.03em; color: var(--alarm); }
.finding .n.good { color: var(--signal); }
.finding h3 { font-size: 1.02rem; margin:.7rem 0 .5rem; font-family: var(--body); font-weight:700; }
.finding p { font-size:.88rem; color: var(--slate); margin:0; line-height:1.5; }
.finding .src { font-family: var(--mono); font-size:.66rem; color: var(--slate); margin-top:.9rem; display:block; }

/* ---------- Data table ---------- */
.tablewrap { border: var(--rule); background:#fff; overflow-x:auto; }
table { width:100%; border-collapse: collapse; font-size:.86rem; }
caption { text-align:left; padding:1rem 1.1rem; font-weight:700; border-bottom: var(--rule); background: var(--paper-2); font-size:.86rem; }
th,td { text-align:left; padding:.7rem 1.1rem; border-bottom: 1px solid var(--paper-2); vertical-align: top; }
th { font-family: var(--mono); font-size:.68rem; letter-spacing:.09em; text-transform:uppercase; color: var(--slate); background: var(--paper); position: sticky; top:62px; }
tbody tr:hover { background: var(--paper); }
td.num { font-family: var(--mono); font-variant-numeric: tabular-nums; white-space:nowrap; }
.pos { font-family: var(--mono); font-size:.72rem; font-weight:700; padding:.15rem .4rem; border-radius:2px; background: var(--paper-2); white-space:nowrap; display:inline-block; margin:1px 2px 1px 0;}
.pos.p1 { background: var(--signal); color:#fff; }
.pos.p2 { background: var(--paper-3); color: var(--ink); }
.pos.bad { background: var(--alarm); color:#fff; }

/* ---------- Agentic loop ---------- */
.loop { display:grid; grid-template-columns: 300px 1fr; gap: clamp(1.5rem,3.5vw,3rem); align-items:start; }
@media (max-width: 900px){ .loop{ grid-template-columns:1fr; } }
.loop--wide { grid-template-columns: .8fr 1.2fr; }
@media (max-width: 900px){ .loop--wide{ grid-template-columns:1fr; } }
.loop-steps { list-style:none; margin:0; padding:0; border-top: var(--rule-dark); }
.loop-steps li { border-bottom: var(--rule-dark); }
.loop-steps button {
  width:100%; text-align:left; background:none; border:0; color:#AEB7C0; cursor:pointer;
  padding:1rem .2rem; font-family: var(--body); font-size:.95rem; font-weight:600;
  display:flex; gap:.9rem; align-items:baseline; transition: color .2s;
}
.loop-steps button:hover { color: var(--paper); }
.loop-steps button[aria-selected="true"] { color: var(--paper); }
.loop-steps button[aria-selected="true"] .idx { background: var(--ember); color:#fff; }
.loop-steps .idx { font-family: var(--mono); font-size:.68rem; font-weight:700; background: rgba(245,241,234,.12); padding:.2rem .45rem; border-radius:2px; }
.loop-steps small { display:block; font-weight:400; font-size:.78rem; color:#98A2AB; margin-top:.25rem; }
.loop-panel { background: var(--ink-2); border: var(--rule-dark); min-height: 420px; }
.loop-panel header { padding:1rem 1.3rem; border-bottom: var(--rule-dark); display:flex; align-items:center; gap:.8rem; flex-wrap:wrap; }
.loop-panel header h3 { font-size:1.15rem; color: var(--paper); }
.chip { font-family: var(--mono); font-size:.64rem; letter-spacing:.08em; text-transform:uppercase; padding:.22rem .5rem; border-radius:2px; background: rgba(18,160,140,.18); color: var(--signal-lift); border:1px solid rgba(18,160,140,.35); }
.chip.warn { background: rgba(216,72,31,.16); color: var(--ember-lift); border-color: rgba(216,72,31,.4); }
pre.term {
  margin:0; padding:1.3rem; font-family: var(--mono); font-size:.76rem; line-height:1.65;
  color:#C9D0D7; overflow-x:auto; white-space:pre; tab-size:2;
}
pre.term .k { color: var(--ember-lift); }
pre.term .g { color: var(--signal-lift); }
pre.term .d { color:#828C96; }
pre.term .w { color:#E8B54A; }

/* ---------- Course finder prototype ---------- */
.proto { border: var(--rule); background:#fff; }
.proto-bar { padding: 1.1rem 1.2rem; border-bottom: var(--rule); background: var(--paper); display:grid; grid-template-columns: 1.6fr repeat(3, 1fr); gap:.8rem; align-items:end; }
@media (max-width: 860px){ .proto-bar{ grid-template-columns: 1fr 1fr; } }
.field label { display:block; font-family: var(--mono); font-size:.66rem; letter-spacing:.1em; text-transform:uppercase; color: var(--slate); margin-bottom:.35rem; font-weight:700; }
.field input, .field select {
  width:100%; font-family: var(--body); font-size:.92rem; padding:.62rem .7rem;
  border:1px solid var(--paper-3); border-radius:2px; background:#fff; color: var(--ink);
}
.field input:focus, .field select:focus { border-color: var(--ink); }
.proto-meta { max-width:none; margin:0; padding:.7rem 1.2rem; border-bottom: var(--rule); font-family: var(--mono); font-size:.72rem; color: var(--slate); background: var(--paper-2); display:flex; justify-content:space-between; gap:1rem; flex-wrap:wrap; }
.results { list-style:none; margin:0; padding:0; max-height: 560px; overflow-y:auto; }
.results li { border-bottom: 1px solid var(--paper-2); padding: 1rem 1.2rem; display:grid; grid-template-columns: 1fr auto; gap:1rem; align-items:start; }
.results li:hover { background: var(--paper); }
.results h4 { margin:0 0 .3rem; font-family: var(--body); font-size:.98rem; font-weight:700; line-height:1.35; }
.results h4 a { color: var(--ink); text-decoration:none; }
.results h4 a:hover { text-decoration: underline; text-decoration-color: var(--ember); text-underline-offset:3px; }
.results p { margin:0; font-size:.82rem; color: var(--slate); line-height:1.45; max-width:none; }
.badges { display:flex; gap:.35rem; flex-wrap:wrap; margin-top:.5rem; }
.badge { font-family: var(--mono); font-size:.64rem; font-weight:700; letter-spacing:.05em; padding:.2rem .45rem; border-radius:2px; background: var(--paper-2); color: var(--ink-3); border:1px solid var(--paper-3); }
.badge.lvl { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.badge.camp { background:#fff; }
.badge.multi { background: rgba(216,72,31,.1); border-color: rgba(216,72,31,.35); color: var(--alarm); }
.empty { padding:3rem 1.2rem; text-align:center; color: var(--slate); font-size:.9rem; }

/* ---------- IA tree ---------- */
.tree { font-family: var(--mono); font-size:.8rem; line-height:1.85; color:#C9D0D7; margin:0; padding:1.4rem; overflow-x:auto; }
.tree b { color: var(--paper); font-weight:700; }
.tree .c { color:#6F7983; }
.tree .e { color: var(--ember-lift); }

/* ---------- Before/after ---------- */
.ba { display:grid; grid-template-columns:1fr 1fr; gap:1px; background: rgba(245,241,234,.16); border:var(--rule-dark); }
@media (max-width:760px){ .ba{ grid-template-columns:1fr; } }
.ba > div { background: var(--ink-2); padding:1.5rem; }
.ba h4 { font-family:var(--mono); font-size:.7rem; letter-spacing:.12em; text-transform:uppercase; margin:0 0 1rem; }
.ba .was h4 { color: var(--ember-lift); }
.ba .now h4 { color: var(--signal-lift); }
.ba ul { margin:0; padding-left:1.1rem; font-size:.87rem; color:#C9D0D7; }
.ba li { margin-bottom:.55rem; }

/* ---------- Plan / timeline ---------- */
.phases { border-top: var(--rule); }
.phase { border-bottom: var(--rule); padding: 1.6rem 0; display:grid; grid-template-columns: 90px 1fr 250px; gap: clamp(1rem,3vw,2.5rem); align-items:start; }
@media (max-width: 860px){ .phase{ grid-template-columns:1fr; gap:.7rem; } }
.phase .wk { font-family: var(--mono); font-size:.72rem; font-weight:700; color: var(--ember-ink); letter-spacing:.06em; padding-top:.3rem; }
.phase h3 { font-family: var(--body); font-size:1.05rem; font-weight:700; margin-bottom:.4rem; }
.phase p { font-size:.88rem; color: var(--slate); margin:0; }
.phase ul { margin:0; padding-left:1.05rem; font-size:.83rem; color: var(--slate); }
.phase li { margin-bottom:.3rem; }

/* ---------- Price ---------- */
.price-grid { display:grid; grid-template-columns: 1.1fr .9fr; gap: clamp(2rem,5vw,4rem); align-items:start; }
@media (max-width:900px){ .price-grid{ grid-template-columns:1fr; } }
.pricebox { border:2px solid var(--paper); padding: clamp(1.6rem,3vw,2.4rem); }
.pricebox .amt { font-family: var(--display); font-size: clamp(3.4rem,7vw,5.2rem); font-weight:800; line-height:1.04; letter-spacing:-.035em; }
.pricebox .amt small { font-size:1rem; font-family:var(--body); font-weight:600; letter-spacing:0; display:block; color:#AEB7C0; margin-top:.6rem; }
.breakdown { list-style:none; margin:1.8rem 0 0; padding:0; border-top: var(--rule-dark); }
.breakdown li { display:flex; justify-content:space-between; gap:1rem; padding:.6rem 0; border-bottom: var(--rule-dark); font-size:.88rem; }
.breakdown span:last-child { font-family:var(--mono); white-space:nowrap; color: var(--ember-lift); }
.breakdown .tot { font-weight:700; border-bottom:0; padding-top:.9rem; font-size:1rem; }
.breakdown .tot span:last-child { color: var(--paper); }

.cta {
  display:inline-flex; align-items:center; gap:.6rem; background: var(--ember); color:#fff;
  font-weight:700; font-size:.95rem; padding:.95rem 1.7rem; text-decoration:none; border-radius:2px;
  border:0; cursor:pointer; transition: background .2s, transform .2s;
}
.cta:hover { background: var(--ember-lift); transform: translateY(-1px); }
.cta.ghost { background:none; border:1.5px solid rgba(245,241,234,.35); color: var(--paper); }
.cta.ghost:hover { background: rgba(245,241,234,.1); }
.cta-row { margin-top:2rem; display:flex; flex-wrap:wrap; gap:.7rem; max-width:none; }

/* ---------- Footer ---------- */
footer.foot { padding: 3rem 0; font-size:.8rem; color:#7E8892; border-top: var(--rule-dark); }
footer.foot a { color:#AEB7C0; }
footer.foot p { max-width: 80ch; }

/* ---------- Misc ---------- */
.note { font-size:.78rem; color: var(--slate); font-style:italic; }
.dark .note { color:#7E8892; }
.two-col { columns:2; column-gap: 2.5rem; }
@media (max-width:760px){ .two-col{ columns:1; } }
mark { background: rgba(216,72,31,.22); color: inherit; padding:0 .15em; }
.dark mark { background: rgba(242,107,62,.25); color: var(--paper); }