/* ======================================================================
   Trades Reconstructed — site stylesheet (single source of truth)
   TR-diverged system: Schibsted Grotesk + Public Sans, navy + steel-blue
   accent on warm paper. This file is the ONLY place the visual system is
   defined; build.js links it into every editorial page. The sibling sites
   (thecrossbench.in, prasenjits.in) are intentionally NOT affected.
   ====================================================================== */

:root{
  --paper:#faf9f6;
  --navy:#14253f;
  --ink:#17253f;
  --body:#39424f;
  --muted:#6b7484;
  --accent:#8a2432;      /* oxblood-maroon — the page accent (kickers, links) */
  --gold:#c4a35e;        /* retained in the logo and on the navy nav hover */
  --rule:#e6e4de;
  --hair:#dcdad2;
  --panel:#f3f1ea;       /* faint on-paper panel for on-ramps/callouts */
  --display:"Schibsted Grotesk", system-ui, sans-serif;
  --sans:"Public Sans", system-ui, sans-serif;
  --measure:42rem;
}

*{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;}
body{
  margin:0; background:var(--paper); color:var(--body);
  font-family:var(--sans); font-size:16px; line-height:1.62;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
a{color:inherit; text-decoration:none;}
.wrap{max-width:66rem; margin:0 auto; padding:0 2rem;}

/* ---- shared inline elements ---- */
.kicker{
  font-family:var(--sans); font-size:.71rem; font-weight:600;
  letter-spacing:.14em; text-transform:uppercase; color:var(--accent);
  margin:0 0 .9rem;
}
.readlink{
  font-family:var(--sans); font-size:.78rem; font-weight:600;
  letter-spacing:.06em; text-transform:uppercase; color:var(--accent);
}
.readlink .arw{display:inline-block; transition:transform .18s ease;}
.readlink:hover .arw, .readlink:focus-visible .arw{transform:translateX(4px);}

a:focus-visible, input:focus-visible, button:focus-visible{
  outline:2px solid var(--accent); outline-offset:3px;
}

/* ======================================================================
   Masthead (logo left, nav right) — injected by build.js at <!--TR:MASTHEAD-->
   ====================================================================== */
.site-head{background:var(--navy); border-bottom:3px solid var(--accent);}
.site-head .wrap{display:flex; align-items:center; justify-content:space-between; gap:2rem; padding:1.2rem 2rem;}
.brand{display:inline-flex; align-items:center;}
.logo{display:block; height:140px; width:auto;}   /* 1.5x the earlier size */
nav.primary{display:flex; align-items:center; gap:.15rem; flex-wrap:wrap;
  font-family:var(--sans); font-size:.78rem; font-weight:600; letter-spacing:.05em;}
nav.primary a{text-transform:uppercase; color:#e7ecf3; padding:2px 0; border-bottom:2px solid transparent; transition:border-color .18s ease;}
nav.primary a:hover, nav.primary a:focus-visible{border-bottom-color:var(--gold);}
nav.primary a.current, nav.primary a[aria-current="page"]{border-bottom-color:var(--gold);}
nav.primary .sep{color:rgba(231,236,243,.32); margin:0 .55rem;}
.site-head a:focus-visible{outline:2px solid var(--gold); outline-offset:3px;}

/* ======================================================================
   Footer — injected by build.js at <!--TR:FOOTER-->
   ====================================================================== */
.site-foot{border-top:1px solid var(--rule); margin-top:1rem;}
.site-foot .foot-cols{display:grid; grid-template-columns:1fr 1fr; gap:2.4rem; padding:2.1rem 2rem 1.4rem; max-width:66rem; margin:0 auto;}
.site-foot .foot-label{font-size:.68rem; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); margin:0 0 .5rem;}
.site-foot .foot-cols p{margin:0; font-size:.84rem; color:var(--body); max-width:52ch;}
.site-foot .foot-bar{display:flex; align-items:center; justify-content:space-between; gap:1rem; flex-wrap:wrap;
  max-width:66rem; margin:0 auto; padding:1rem 2rem 2rem; border-top:1px solid var(--rule);
  font-size:.8rem; color:var(--muted);}
.site-foot .foot-bar a{color:var(--navy); border-bottom:1px solid var(--hair);}
.site-foot .foot-util a{font-weight:600; letter-spacing:.04em; text-transform:uppercase; border:0;}
.site-foot .foot-util a:hover{color:var(--accent);}

/* ======================================================================
   Shared two-column split (one spine down the homepage)
   ====================================================================== */
.split{display:grid; grid-template-columns:1.7fr 1fr; gap:3rem;}
.feature{border-right:1px solid var(--rule); padding-right:3rem;}
.feature .dek{font-size:1.04rem; color:var(--body); margin:0 0 1.15rem; max-width:54ch;}
.feature-title{font-family:var(--display); font-weight:600; font-size:2.5rem; line-height:1.1; letter-spacing:-.01em; color:var(--navy); margin:.4rem 0 .8rem;}
.feature h2{font-family:var(--display); font-weight:600; font-size:1.6rem; letter-spacing:-.005em; color:var(--navy); margin:.2rem 0 .7rem;}

.list{display:flex; flex-direction:column;}
.list > .kicker{margin-bottom:1.05rem;}
.list-item{padding:0 0 1rem; margin-bottom:1rem; border-bottom:1px solid var(--rule);}
.list-item:last-of-type{border-bottom:0;}
.list-item .rk{font-size:.66rem; font-weight:600; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); margin:0;}
.list-title, .list-item h3{font-family:var(--display); font-weight:600; font-size:1.1rem; line-height:1.24; color:var(--navy); margin:.32rem 0 .3rem;}
.list-item p{margin:0; font-size:.88rem; color:var(--body);}
.list-item .readlink{margin-top:.45rem; display:inline-block;}
.list .more{margin-top:auto; padding-top:.4rem;}
.list .more a{font-family:var(--sans); font-size:.75rem; font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:var(--accent); border-bottom:1.5px solid var(--accent); padding-bottom:2px;}

/* homepage section framing */
.hero{padding:2.9rem 0 3rem; border-bottom:1px solid var(--rule);}
.section{padding:2.75rem 0; border-top:1px solid var(--rule);}
.section:first-of-type{border-top:0;}

/* ======================================================================
   Archive (build.js emits arc-* markup into <!--ARCHIVE_ITEMS-->)
   ====================================================================== */
.arc-sec .wrap{padding-top:2.6rem; padding-bottom:1rem;}
.arc-group{padding:2.4rem 0; border-top:1px solid var(--rule);}
.arc-group:first-child{border-top:0;}
.arc-group-head{margin:0 0 1.5rem;}
.arc-group-title{font-family:var(--display); font-weight:600; font-size:1.5rem; letter-spacing:-.005em; color:var(--navy); margin:0;}
.arc-group-sub{font-family:var(--sans); font-size:.7rem; font-weight:600; letter-spacing:.12em; text-transform:uppercase; color:var(--muted); margin:.35rem 0 0;}
.arc-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:2.2rem;}
.arc-card .kicker{margin-bottom:.5rem;}
.arc-card-title{font-family:var(--display); font-weight:600; font-size:1.2rem; line-height:1.24; color:var(--navy); margin:0 0 .5rem;}
.arc-card-title a:hover{color:var(--accent);}
.arc-card-dek{font-size:.9rem; color:var(--body); margin:0 0 .6rem;}
.arc-card-meta{font-family:var(--sans); font-size:.72rem; letter-spacing:.04em; color:var(--muted); margin:0;}

/* ======================================================================
   Essay / reading pages
   ====================================================================== */
.art-head{padding:2.6rem 0 1.2rem; max-width:52rem;}
.art-title{font-family:var(--display); font-weight:600; font-size:clamp(2.1rem,5vw,3rem); line-height:1.06; letter-spacing:-.01em; color:var(--navy); margin:.4rem 0 1rem;}
.art-stand{font-size:1.14rem; line-height:1.55; color:var(--body); margin:0 0 1rem; max-width:48ch;}
.art-date{font-family:var(--sans); font-size:.74rem; letter-spacing:.04em; color:var(--muted); margin:0;}

.reading{max-width:var(--measure); margin:0; padding-bottom:1rem;}

.onramp{background:var(--panel); border:1px solid var(--rule); border-left:3px solid var(--accent); padding:1.5rem 1.8rem; margin:0 0 2.6rem;}
.onramp h2{font-family:var(--display); font-weight:600; font-size:1.35rem; line-height:1.2; color:var(--navy); margin:0 0 .8rem;}
.onramp p{font-size:.98rem; line-height:1.62; color:var(--body); margin:0 0 .8rem;}
.onramp p:last-child{margin-bottom:0;}

.body p{font-size:1.05rem; line-height:1.72; color:var(--body); margin:0 0 1.35rem;}
.body h2{font-family:var(--display); font-weight:600; font-size:1.6rem; line-height:1.2; color:var(--navy); margin:2.6rem 0 1rem;}
.body h3{font-family:var(--display); font-weight:600; font-size:1.25rem; color:var(--navy); margin:2rem 0 .8rem;}
.body a{color:var(--accent); border-bottom:1px solid var(--hair);}
.body a:hover{border-bottom-color:var(--accent);}
.body figure{margin:2rem 0;}
.body figure img, .body img{max-width:100%; height:auto; display:block;}
.body figcaption{font-family:var(--sans); font-size:.8rem; color:var(--muted); margin-top:.6rem;}
.body blockquote{margin:1.6rem 0; padding-left:1.2rem; border-left:3px solid var(--accent); color:var(--ink); font-size:1.05rem;}

sup.fn{line-height:0;}
sup.fn a{font-family:var(--sans); font-size:.68rem; font-weight:600; color:var(--accent); text-decoration:none; padding:0 1px;}
sup.fn a:hover{text-decoration:underline;}

.callouts{margin:2.6rem 0 .5rem; display:flex; flex-direction:column; gap:1.3rem;}
.callout{background:var(--panel); border:1px solid var(--rule); border-top:3px solid var(--accent); padding:1.5rem 1.8rem;}
.callout-kicker{font-family:var(--sans); font-size:.66rem; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); margin:0 0 .6rem;}

.notes{margin:3rem 0 0; border-top:1px solid var(--rule); padding-top:1.6rem;}
.notes h2, .notes .notes-label{font-family:var(--display); font-weight:600; font-size:1.2rem; color:var(--navy); margin:0 0 1rem;}
.notes-asof{font-family:var(--sans); font-size:.78rem; color:var(--muted); margin:0 0 1rem;}
.notes ol{margin:0; padding-left:1.3rem;}
.notes li{font-size:.86rem; line-height:1.55; color:var(--body); margin:0 0 .8rem;}
.notes li a{color:var(--accent); border-bottom:1px solid var(--hair); word-break:break-word;}
.notes .back{border:0; color:var(--muted); margin-left:.3rem;}

.proposal-note{font-size:.9rem; line-height:1.6; color:var(--muted); font-style:italic; margin:2rem 0 0; max-width:var(--measure);}
.art-footer{margin:2.4rem 0 0; padding-top:1.2rem; border-top:1px solid var(--rule); font-size:.85rem; color:var(--muted);}
.art-footer a{color:var(--navy); border-bottom:1px solid var(--hair);}
.responses{margin:2.4rem 0 1rem; max-width:var(--measure);}
.responses h2{font-family:var(--display); font-weight:600; font-size:1.3rem; color:var(--navy); margin:0 0 .7rem;}
.responses p{font-size:.95rem; color:var(--body); margin:0;}
.responses a{color:var(--accent); border-bottom:1px solid var(--hair);}

/* generic prose (about, disclaimer) */
.prose{max-width:var(--measure); padding:2.4rem 0;}
.prose h1{font-family:var(--display); font-weight:600; font-size:2rem; color:var(--navy); margin:0 0 1rem;}
.prose h2{font-family:var(--display); font-weight:600; font-size:1.35rem; color:var(--navy); margin:2rem 0 .8rem;}
.prose p{font-size:1.02rem; line-height:1.7; color:var(--body); margin:0 0 1.2rem;}
.prose a{color:var(--accent); border-bottom:1px solid var(--hair);}

/* ======================================================================
   Responsive
   ====================================================================== */
@media (max-width:860px){
  .split{grid-template-columns:1fr; gap:2rem;}
  .feature{border-right:0; padding-right:0; border-bottom:1px solid var(--rule); padding-bottom:1.75rem;}
  .arc-grid{grid-template-columns:1fr 1fr;}
  .site-head .wrap{flex-direction:column; align-items:flex-start; gap:1rem;}
  .logo{height:104px;}
  .feature-title{font-size:2.1rem;}
  .site-foot .foot-cols{grid-template-columns:1fr;}
}
@media (max-width:560px){
  .wrap{padding:0 1.25rem;}
  .arc-grid{grid-template-columns:1fr;}
  .feature-title{font-size:1.85rem;} .feature h2{font-size:1.4rem;}
}
@media (prefers-reduced-motion:reduce){ *{transition:none !important;} }

/* ======================================================================
   Phase 2 — essay figures, doc pages, primer lessons
   ====================================================================== */

/* essay: series note + plate figures */
.art-series{font-family:var(--sans); font-size:.82rem; color:var(--muted); margin:0 0 1.6rem; max-width:var(--measure);}
.plate{margin:2.2rem 0; background:#fff; border:1px solid var(--rule); padding:1.4rem;}
.plate svg, .plate img{max-width:100%; height:auto; display:block;}
.fig-kicker{font-family:var(--sans); font-size:.66rem; font-weight:600; letter-spacing:.12em; text-transform:uppercase; color:var(--muted); margin:0 0 .8rem;}

/* about / disclaimer */
.doc-sec{padding:2.4rem 0;}
.page-title{font-family:var(--display); font-weight:600; font-size:clamp(2rem,5vw,2.8rem); line-height:1.06; letter-spacing:-.01em; color:var(--navy); margin:0 0 1rem;}
.doc{max-width:var(--measure); margin:0; padding:0 0 1rem;}
.doc p{font-size:1.04rem; line-height:1.74; color:var(--body); margin:0 0 1.35rem;}
.doc h2{font-family:var(--display); font-weight:600; font-size:1.5rem; color:var(--navy); margin:2.4rem 0 .9rem;}
.doc a{color:var(--accent); border-bottom:1px solid var(--hair);}
.doc a:hover{border-bottom-color:var(--accent);}
.fill{background:rgba(47,95,143,.12); border-bottom:1px solid var(--accent); padding:0 2px; font-style:italic; color:var(--accent);}

/* primer lessons */
.backlink{display:inline-block; font-family:var(--sans); font-size:.75rem; font-weight:600; letter-spacing:.05em; text-transform:uppercase; color:var(--accent); margin:.2rem 0 1.6rem;}
.backlink:hover{text-decoration:underline;}
.figure{margin:1.8rem 0 2.4rem;}
.figure img, .figure svg{max-width:100%; height:auto; display:block; border:1px solid var(--rule);}
.figure figcaption, .fig-cap{font-family:var(--sans); font-size:.8rem; color:var(--muted); margin-top:.6rem;}
article.prose{max-width:var(--measure);}
.prose p{font-size:1.05rem; line-height:1.74; color:var(--body); margin:0 0 1.35rem;}
.prose h2{font-family:var(--display); font-weight:600; font-size:1.55rem; color:var(--navy); margin:2.4rem 0 .9rem;}
.prose h3{font-family:var(--display); font-weight:600; font-size:1.22rem; color:var(--navy); margin:1.8rem 0 .7rem;}
.prose a{color:var(--accent); border-bottom:1px solid var(--hair);}
.lede-para{font-size:1.18rem; line-height:1.55; color:var(--ink); margin:0 0 1.4rem;}

/* lesson reference block + FIX-style table */
.refblock{background:var(--panel); border:1px solid var(--rule); border-left:3px solid var(--accent); padding:1.5rem 1.7rem; margin:2.2rem 0;}
.ref-kicker{font-family:var(--sans); font-size:.66rem; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); margin:0 0 .6rem;}
.ref-intro{font-size:.95rem; line-height:1.6; color:var(--body); margin:0 0 1rem;}
.ref-source{font-family:var(--sans); font-size:.78rem; color:var(--muted); margin:1rem 0 0;}
.refblock table{width:100%; border-collapse:collapse; font-size:.86rem;}
.refblock th{font-family:var(--sans); text-align:left; font-size:.66rem; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); border-bottom:1px solid var(--rule); padding:.5rem .6rem;}
.refblock td{border-bottom:1px solid var(--rule); padding:.5rem .6rem; vertical-align:top; color:var(--body);}
.refblock tr.subhead td, .refblock .lbl{font-weight:600; color:var(--navy); background:rgba(20,37,63,.045);}
.refblock .c-field{color:var(--ink);}
.refblock .c-tag{font-family:var(--sans); color:var(--accent);}
.refblock .none{color:var(--muted); font-style:italic;}

/* ======================================================================
   Phase 2b — Primer landing / stage index (grid + filters) and the
   compliance lesson (workflow map + references)
   ====================================================================== */

.page-frame{font-size:1.04rem; line-height:1.62; color:var(--body); max-width:var(--measure); margin:.4rem 0 0;}

.starthere-sec{padding:2.4rem 0 0;}
.starthere{background:var(--panel); border:1px solid var(--rule); border-left:3px solid var(--accent); padding:1.8rem 2rem; max-width:46rem;}
.sh-title{font-family:var(--display); font-weight:600; font-size:1.4rem; line-height:1.14; color:var(--navy); margin:0 0 .5rem;}
.sh-text{font-size:.98rem; color:var(--body); margin:0 0 1.2rem; max-width:34rem;}
.readlink-ivory{font-family:var(--sans); font-size:.78rem; font-weight:600; letter-spacing:.05em; text-transform:uppercase; color:var(--accent); border-bottom:1.5px solid var(--accent); padding-bottom:2px;}
.readlink-ivory .arw{display:inline-block; transition:transform .18s ease;}
.readlink-ivory:hover .arw{transform:translateX(4px);}

.lessons-sec{padding:2.6rem 0 0;}
.section-label{font-family:var(--sans); font-size:.7rem; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); margin:0 0 1.5rem; display:flex; align-items:center; gap:1rem;}
.section-label::after{content:""; flex:1; height:1px; background:var(--rule);}

.filters{display:flex; flex-wrap:wrap; gap:.5rem; margin:0 0 1.6rem;}
.chip{font-family:var(--sans); font-size:.76rem; font-weight:600; letter-spacing:.03em; color:var(--navy); background:transparent; border:1px solid var(--rule); padding:.34rem .85rem; cursor:pointer; transition:border-color .18s ease,color .18s ease,background .18s ease;}
.chip:hover{border-color:var(--accent);}
.chip.active{background:var(--navy); color:#fff; border-color:var(--navy);}
.filter-note{font-family:var(--sans); font-size:.82rem; line-height:1.5; color:var(--muted); margin:0 0 1.8rem; max-width:44rem;}

.stage{margin-bottom:2.8rem;}
.stage-head{border-top:2px solid var(--navy); padding-top:1.1rem; margin-bottom:1.6rem;}
.stage-title{font-family:var(--display); font-weight:600; font-size:1.5rem; color:var(--navy); margin:0 0 .25rem;}
.stage-desc{font-size:.92rem; color:var(--body); margin:0; max-width:44rem;}
.stage-empty{font-family:var(--sans); font-size:.82rem; color:var(--muted); margin:.2rem 0 0;}
.stage-more{margin:1.5rem 0 0;}
.stage-more a{font-family:var(--sans); font-size:.76rem; font-weight:600; letter-spacing:.05em; text-transform:uppercase; color:var(--accent); border-bottom:1.5px solid var(--accent); padding-bottom:2px;}
.stage-more .arw{display:inline-block; transition:transform .18s ease;}
.stage-more a:hover .arw{transform:translateX(4px);}

.lessons{display:grid; grid-template-columns:repeat(auto-fit,minmax(17rem,1fr)); gap:2.2rem;}
.lesson .kicker{margin-bottom:.55rem;}
.lesson-title{font-family:var(--display); font-weight:600; font-size:1.28rem; line-height:1.16; color:var(--navy); margin:0 0 .5rem;}
.lesson-title a:hover{color:var(--accent);}
.lesson-dek{font-size:.94rem; line-height:1.55; color:var(--body); margin:0 0 .8rem;}
.lesson-meta{font-family:var(--sans); font-size:.72rem; letter-spacing:.03em; color:var(--muted); margin:0;}

/* compliance lesson: wide reading column, q-list, figframe, workflow map, refs */
section.reading{max-width:66rem; margin:0 auto; padding:0 2rem 1rem;}
.term{font-style:italic; color:var(--ink);}
.q-list{max-width:var(--measure); list-style:none; margin:0 0 1.15rem; padding:0;}
.q-list li{font-size:1.03rem; line-height:1.6; color:var(--body); padding:.3rem 0 .3rem 1.5rem; position:relative;}
.q-list li::before{content:""; position:absolute; left:0; top:.95em; width:.6rem; height:1px; background:var(--accent);}
figure.fig-wide{max-width:62rem;}
.figframe{background:var(--panel); border:1px solid var(--rule); border-top:3px solid var(--accent); padding:1.6rem 1.4rem 1.2rem;}
.fig-num{font-family:var(--sans); font-size:.7rem; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:var(--muted);}

.map-legend{font-family:var(--sans); font-size:.82rem; line-height:1.5; color:var(--muted); margin:0 0 1.3rem; max-width:44rem;}
.map-row{border-top:1px solid var(--rule); padding:1.1rem 0 1.2rem;}
.map-row:last-child{border-bottom:1px solid var(--rule);}
.map-row.ov{background:linear-gradient(90deg,rgba(47,95,143,.08),transparent 62%);}
.map-head{display:flex; align-items:baseline; gap:.8rem; flex-wrap:wrap; margin-bottom:.15rem;}
.map-time{font-family:var(--sans); font-size:.68rem; font-weight:600; letter-spacing:.12em; text-transform:uppercase; color:var(--muted);}
.map-task{font-family:var(--display); font-weight:600; font-size:1.25rem; line-height:1.14; color:var(--navy);}
.map-tag{font-family:var(--sans); font-size:.62rem; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:var(--accent); border:1px solid var(--accent); border-radius:999px; padding:.12rem .6rem;}
.map-desc{font-size:.92rem; line-height:1.5; color:var(--body); margin:0 0 .85rem; max-width:46rem;}
.map-cites{display:grid; grid-template-columns:2.4rem 1fr; gap:.35rem .9rem;}
.map-jur{font-family:var(--sans); font-size:.72rem; font-weight:600; letter-spacing:.04em; color:var(--accent); padding-top:.05rem;}
.map-src{font-size:.86rem; line-height:1.5; color:var(--body);}

.refs-sec{padding:1.6rem 0;}
.refs{display:grid; grid-template-columns:repeat(auto-fit,minmax(14.5rem,1fr)); gap:2.2rem; max-width:66rem;}
.ref-group{border-top:2px solid var(--navy); padding-top:1.1rem;}
.ref-group h3{font-family:var(--display); font-weight:600; font-size:1.25rem; color:var(--navy); margin:0 0 .8rem;}
.ref-group ul{list-style:none; margin:0; padding:0;}
.ref-group li{font-size:.88rem; line-height:1.5; color:var(--body); padding:.5rem 0; border-top:1px solid var(--rule);}
.ref-group li:first-child{border-top:none; padding-top:0;}
.ref-src{font-family:var(--sans); font-size:.78rem; color:var(--ink); font-weight:600;}
.refs-note{font-family:var(--sans); font-size:.82rem; line-height:1.55; color:var(--muted); margin:1.8rem 0 0; max-width:52rem;}