/* katibkhan.com discipline pages.
   Loaded ONLY by the five discipline pages, after style.css. The homepage does
   not link this file, so nothing here can reach it, and style.css itself is
   left alone.

   The point of this sheet is that the five pages do not share a layout. Each
   one sets data-arch on <body> and gets a genuinely different page shape:

     ledger     growth-performance   two-column log entries, tabular figures
     approval   brand-management     a vertical spine, one gate per stop
     toolshelf  ai-systems           named tools as cards in a grid
     notebook   personal-finance     narrow column, handwritten margin notes
     manifesto  personal-brand       display type, almost no furniture
*/

/* ── hero: text left, photograph RIGHT (never at the foot of the page) ── */
.ph { padding: clamp(104px,16vh,166px) 0 clamp(16px,2.4vw,28px); text-align: left }
.dhero {
  display: grid;
  grid-template-columns: minmax(0,1fr) clamp(236px,28vw,330px);
  gap: clamp(26px,5vw,62px);
  align-items: center;
}
.dhero-t { min-width: 0 }
.ph h1 {
  margin: 13px 0 0; max-width: 20ch;
  font-size: clamp(31px,4.6vw,56px); font-weight: 800;
  line-height: 1.06; letter-spacing: -.042em;
}
.ph .lead {
  margin: clamp(15px,2vw,22px) 0 0; max-width: 54ch;
  font-size: clamp(16.5px,1.8vw,20px); color: var(--ink2); line-height: 1.58;
}
.dhero-ph { margin: 0; width: 100% }
.dhero-ph .pol { transform: rotate(var(--r,-2deg)) }

@media (max-width: 880px) {
  .dhero { grid-template-columns: 1fr; gap: clamp(22px,5vw,30px) }
  .dhero-ph { width: min(74%,290px); margin-inline: auto }
}

/* facts sit under the hero, flush left, and only exist where a page has them */
.facts {
  display: flex; flex-wrap: wrap; gap: clamp(22px,4.6vw,58px);
  padding: clamp(20px,2.6vw,30px) 0;
  border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
  margin-top: clamp(24px,3.4vw,40px); text-align: left;
}
.fact b {
  display: block; font-size: clamp(25px,3.4vw,40px); font-weight: 800;
  letter-spacing: -.04em; line-height: 1;
  font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1;
}
.fact span { display: block; margin-top: 7px; font-size: 14px; color: var(--ink2); max-width: 24ch; line-height: 1.45 }

.prose { padding: clamp(14px,2.4vw,30px) 0 clamp(36px,6vw,80px) }
.prose h2 { font-weight: 800; letter-spacing: -.032em; line-height: 1.16 }
.prose .bd { display: grid; gap: 12px }
.prose .bd p { font-size: 17px; color: var(--ink2); line-height: 1.66 }

/* ══ ledger ══ growth-performance: a log, read top to bottom ══════════ */
[data-arch=ledger] .prose .w { max-width: 980px }
[data-arch=ledger] .blk {
  display: grid; grid-template-columns: minmax(0,190px) minmax(0,1fr);
  gap: clamp(16px,3vw,46px);
  border-top: 1px solid var(--line); padding: clamp(20px,2.8vw,32px) 0;
}
[data-arch=ledger] .blk h2 { font-size: clamp(16px,1.7vw,19px); letter-spacing: -.01em; max-width: none }
[data-arch=ledger] .blk .bd { max-width: 60ch }
[data-arch=ledger] .blk[data-kind=caveat] { border-top-width: 2px; border-top-color: var(--ink) }
[data-arch=ledger] .blk[data-kind=caveat] h2 { color: var(--accent) }
@media (max-width: 760px) {
  [data-arch=ledger] .blk { grid-template-columns: 1fr; gap: 10px }
}

/* ══ approval ══ brand-management: one vertical spine, a dot per gate ══ */
[data-arch=approval] .prose .w { max-width: 820px }
[data-arch=approval] .blk {
  position: relative; border-left: 1px solid var(--line);
  padding: 0 0 clamp(30px,4.6vw,54px) clamp(24px,4vw,46px);
  max-width: 72ch;
}
[data-arch=approval] .blk:last-child { padding-bottom: 0; border-left-color: transparent }
[data-arch=approval] .blk::before {
  content: ""; position: absolute; left: -5px; top: 7px;
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--paper); border: 2px solid var(--accent);
}
[data-arch=approval] .blk h2 { font-size: clamp(20px,2.4vw,27px); max-width: 24ch }
[data-arch=approval] .blk .bd { margin-top: 13px; max-width: 66ch }
[data-arch=approval] .blk .bd p { font-size: 17.5px; line-height: 1.72 }

/* ══ toolshelf ══ ai-systems: the tools ARE the page ══════════════════ */
[data-arch=toolshelf] .prose .w { max-width: 1000px }
/* 380px minimum, not 296px: inside the 1000px column that yields two per row,
   so four tools read as a 2x2 block instead of three and a stranded fourth. */
[data-arch=toolshelf] .tools {
  display: grid; grid-template-columns: repeat(auto-fit,minmax(min(100%,380px),1fr));
  gap: 13px; margin: clamp(10px,2vw,20px) 0 clamp(26px,4vw,42px);
}
[data-arch=toolshelf] .blk[data-kind=tool] {
  background: var(--card); border: 1px solid var(--line); border-radius: 11px;
  padding: clamp(19px,2.3vw,26px); margin: 0;
  transition: transform .3s var(--e), box-shadow .3s var(--e);
}
[data-arch=toolshelf] .blk[data-kind=tool]:hover {
  transform: translateY(-3px); box-shadow: 0 2px 4px rgba(0,0,0,.04), 0 14px 32px rgba(0,0,0,.08);
}
[data-arch=toolshelf] .blk[data-kind=tool] h2 { font-size: 19px; letter-spacing: -.02em }
[data-arch=toolshelf] .blk[data-kind=tool] .bd { margin-top: 10px }
[data-arch=toolshelf] .blk[data-kind=tool] .bd p { font-size: 16px; line-height: 1.6 }
[data-arch=toolshelf] .blk:not([data-kind=tool]) {
  max-width: 68ch; padding: clamp(20px,2.8vw,32px) 0; border-top: 1px solid var(--line);
}
[data-arch=toolshelf] .blk:not([data-kind=tool]) h2 { font-size: clamp(19px,2.2vw,25px) }
[data-arch=toolshelf] .blk:not([data-kind=tool]) .bd { margin-top: 12px }

/* ══ notebook ══ personal-finance: narrow, with notes in the margin ═══ */
[data-arch=notebook] .prose .w { max-width: 940px }
[data-arch=notebook] .blk { padding: clamp(20px,3vw,32px) 0; border-bottom: 1px solid var(--line) }
[data-arch=notebook] .blk:last-child { border-bottom: 0 }
[data-arch=notebook] .blk h2 { font-size: clamp(19px,2.2vw,26px); max-width: 22ch }
[data-arch=notebook] .blk .main { max-width: 64ch }
[data-arch=notebook] .blk .bd { margin-top: 12px }
[data-arch=notebook] .mnote {
  font-family: Caveat, cursive; font-size: 20px; line-height: 1.32;
  color: var(--accent); margin-top: 14px; max-width: 34ch;
  padding-left: 13px; border-left: 2px solid var(--line);
}
@media (min-width: 1000px) {
  [data-arch=notebook] .blk { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,212px); gap: clamp(28px,4vw,54px) }
  [data-arch=notebook] .mnote { margin-top: 4px; border-left: 0; padding-left: 0; max-width: none; align-self: start }
}

/* ══ manifesto ══ personal-brand: type, and nothing else ══════════════ */
[data-arch=manifesto] .ph h1 { font-size: clamp(34px,6.4vw,74px); max-width: 17ch; letter-spacing: -.048em }
[data-arch=manifesto] .ph .lead { font-size: clamp(17px,2.1vw,22px); max-width: 48ch }
[data-arch=manifesto] .prose .w { max-width: 860px }
[data-arch=manifesto] .blk { padding: clamp(32px,5.6vw,72px) 0; border-bottom: 1px solid var(--line) }
[data-arch=manifesto] .blk:last-child { border-bottom: 0 }
[data-arch=manifesto] .blk h2 {
  font-size: clamp(26px,4.6vw,52px); letter-spacing: -.046em; line-height: 1.05; max-width: 17ch;
}
[data-arch=manifesto] .blk .bd { margin-top: clamp(14px,2vw,22px) }
[data-arch=manifesto] .blk .bd p { font-size: clamp(17px,1.9vw,19.5px); max-width: 54ch; line-height: 1.68 }


/* ── close ──────────────────────────────────────────────────────────── */
.end { padding: clamp(50px,8vw,106px) 0 clamp(42px,6vw,82px); border-top: 1px solid var(--line) }
.end h2 { font-size: clamp(24px,3.9vw,44px); font-weight: 800; letter-spacing: -.044em; line-height: 1.08; max-width: 22ch }
.btns { margin-top: 26px; display: flex; gap: 10px; flex-wrap: wrap }

/* ── scroll reveal. Visible by default: a stalled transition must never
      leave the page blank, which it has done on this site before. ────── */
.rv { opacity: 1 }
html.js .rv { opacity: 0; transform: translateY(14px) }
html.js .rv.in { opacity: 1; transform: none; transition: opacity .55s var(--e), transform .55s var(--e) }
@media (prefers-reduced-motion: reduce) {
  html.js .rv { opacity: 1; transform: none; transition: none }
}

/* the strip is left-aligned here, centred on the homepage */
[data-arch] .accounts{text-align:left}
[data-arch] .accounts .logos{justify-content:flex-start}