/* ============================================================
   SHIFT127 site stylesheet
   One file, linked by every page: /assets/site.css
   Change a value here and it changes everywhere.
   ============================================================ */

/* ---- 1. Tokens ---- */
:root{
  /* colour */
  --ink:#0F1923;        /* headings, dark bands */
  --ink2:#1A3045;       /* hero gradient partner */
  --cream:#FEFCF8;      /* card surfaces */
  --parch:#F7F3ED;      /* alternating band */
  --gold:#C9A84C;       /* accent */
  --gold-d:#8B7430;     /* accent on light, passes contrast */
  --gold-bg:rgba(201,168,76,.08);
  --gold-lt:rgba(201,168,76,.2);
  --text:#3A3530;       /* body copy */
  --muted:#7A706A;      /* secondary copy */
  --border:#DDD4C8;
  --red:#B91C1C;

  /* type scale */
  --f-display:'Playfair Display',Georgia,serif;
  --f-body:'DM Sans',system-ui,-apple-system,sans-serif;
  --f-mono:'IBM Plex Mono',ui-monospace,monospace;
  --t-hero:2.8rem;
  --t-h2:1.6rem;
  --t-h3:1.1rem;
  --t-body:1.05rem;
  --t-small:.82rem;
  --t-tiny:.7rem;

  /* spacing and shape */
  --pad-x:2.5rem;
  --pad-y:2rem;
  --gap:.8rem;
  --r-lg:12px;
  --r-md:10px;
  --r-sm:8px;
  --measure:100%;    /* text fills the column: nothing stops short of the band edge */
}

/* ---- 2. Base ---- */
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  font-family:var(--f-body);
  background:#fff;color:var(--text);
  max-width:none;margin:0;
  line-height:1.6;font-size:var(--t-body);
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
}
a{color:var(--gold-d)}
img{max-width:100%;height:auto;display:block}
:focus-visible{outline:2px solid var(--gold);outline-offset:3px}

/* ---- 3. Header, the same on every page ---- */
.siteheader{
  background:var(--ink);color:var(--cream);
  display:flex;align-items:center;justify-content:space-between;
  gap:1rem;padding:.9rem var(--pad-x);
}
.siteheader .wordmark{
  font-family:var(--f-display);font-weight:700;font-size:.95rem;
  letter-spacing:.18em;text-transform:uppercase;color:var(--cream);
  text-decoration:none;white-space:nowrap;
}
.siteheader .wordmark span{color:var(--gold)}
.sitenav{display:flex;gap:1.4rem;flex-wrap:wrap}
.sitenav a{
  color:rgba(254,252,248,.75);text-decoration:none;
  font-size:var(--t-small);letter-spacing:.04em;
  padding-bottom:2px;border-bottom:1px solid transparent;
}
.sitenav a:hover{color:var(--cream);border-bottom-color:var(--gold)}
.sitenav a[aria-current="page"]{color:var(--cream);border-bottom-color:var(--gold)}

/* ---- 4. Breadcrumb ---- */
.crumbbar{
  background:var(--parch);padding:.7rem var(--pad-x);
  font-size:.8rem;letter-spacing:.04em;border-bottom:1px solid var(--border);
}
.crumbbar a{color:var(--muted);text-decoration:none;border-bottom:1px solid var(--border)}
.crumbbar a:hover{color:var(--ink);border-bottom-color:var(--gold)}

/* ---- 5. Hero ---- */
.hero{
  background:linear-gradient(135deg,var(--ink) 0%,var(--ink2) 100%);
  color:var(--cream);padding:3rem var(--pad-x) 2.5rem;
  position:relative;overflow:hidden;
}
.hero::before{
  content:'';position:absolute;inset:0;
  background:radial-gradient(ellipse at 80% 20%,rgba(201,168,76,.12) 0%,transparent 60%);
}
.hero-crumb{
  position:relative;font-size:.78rem;letter-spacing:.06em;
  color:rgba(254,252,248,.55);margin-bottom:.9rem;
}
.hero-crumb a{color:rgba(254,252,248,.75);text-decoration:none;border-bottom:1px solid rgba(201,168,76,.45)}
.hero-crumb a:hover{color:var(--cream);border-bottom-color:var(--gold)}
.hero-crumb .sep{padding:0 .45rem;color:rgba(254,252,248,.3)}
.hero-badge{
  font-size:var(--t-tiny);font-weight:700;letter-spacing:.2em;text-transform:uppercase;
  color:var(--gold);margin-bottom:.6rem;position:relative;
}
.hero h1{
  font-family:var(--f-display);font-size:var(--t-hero);font-weight:700;
  line-height:1.15;margin-bottom:.5rem;position:relative;
}
.hero h1 sup{font-size:.5em;vertical-align:super}
.hero-sub{
  font-family:var(--f-display);font-style:italic;font-size:1.15rem;
  color:rgba(254,252,248,.7);position:relative;margin-bottom:1rem;
}
.hero-desc{
  font-size:1rem;line-height:1.6;color:rgba(254,252,248,.82);
  position:relative;max-width:62ch;margin-bottom:1rem;
}
.hero-meta{
  display:flex;gap:1.5rem;flex-wrap:wrap;position:relative;
  font-size:var(--t-small);color:rgba(254,252,248,.5);
}

/* ---- 6. Sections ---- */
.section{padding:var(--pad-y) var(--pad-x)}
.section:nth-of-type(even){background:var(--parch)}
.section h2{
  font-family:var(--f-display);font-size:var(--t-h2);font-weight:700;
  color:var(--ink);margin-bottom:.3rem;line-height:1.25;
}
.section h2::after{
  content:'';display:block;width:40px;height:3px;background:var(--gold);
  margin:.5rem 0 1rem;border-radius:2px;
}
.section h3{
  font-family:var(--f-display);font-size:var(--t-h3);font-weight:600;
  color:var(--ink);margin:1.5rem 0 .5rem;
}
.section p{margin-bottom:1rem;line-height:1.62;max-width:var(--measure)}
.section p strong{color:var(--ink)}

/* ---- 7. Cards ---- */
.grid{display:grid;gap:var(--gap);margin:1.2rem 0}
.grid-2{grid-template-columns:repeat(2,1fr)}
.grid-3{grid-template-columns:repeat(3,1fr)}
.grid-4{grid-template-columns:repeat(4,1fr)}
.card{
  background:var(--cream);border:1px solid var(--border);
  border-radius:var(--r-lg);padding:1rem;transition:border-color .2s,transform .2s;
}
a.card{display:block;text-decoration:none;color:var(--text)}
a.card:hover,a.card:focus-visible{border-color:var(--gold);transform:translateY(-2px)}
.card-icon{font-size:1.5rem;margin-bottom:.35rem}
.card-title{
  font-family:var(--f-display);font-size:1.05rem;font-weight:700;
  color:var(--ink);margin-bottom:.15rem;
}
.card-kicker{
  font-size:var(--t-tiny);font-weight:700;letter-spacing:.12em;
  text-transform:uppercase;color:var(--gold-d);margin-bottom:.45rem;
}
.card p{font-size:var(--t-small);color:var(--muted);line-height:1.55;margin:0;max-width:none}
.go{
  display:inline-flex;align-items:center;justify-content:center;
  margin-top:.9rem;font-size:var(--t-small);font-weight:600;
  color:var(--ink);text-decoration:none;background:transparent;
  border:1px solid var(--gold);border-radius:6px;
  padding:.42rem 1.05rem;min-width:7rem;
  transition:background .18s,color .18s,border-color .18s;
}
a.go:hover,a.go:focus-visible,.card:hover .go,a.card:focus-visible .go{
  background:var(--gold);color:var(--ink);border-color:var(--gold);
}
.card .go{display:flex;width:fit-content;margin-left:auto;margin-right:auto}
.card.dark .go{color:var(--cream)}
.card.dark:hover .go{color:var(--ink)}
.card.center{text-align:center}
.card.dark{background:var(--ink);color:var(--cream);border-color:var(--ink)}
.card.dark .card-title{color:var(--cream)}
.card.dark p{color:rgba(254,252,248,.65)}
/* icon beside text */
.card.row{display:flex;align-items:flex-start;gap:.6rem;padding:.85rem .9rem}
.card.row .card-icon{font-size:1.2rem;margin:.1rem 0 0}
.card.row h4{font-size:.85rem;font-weight:700;color:var(--ink);margin-bottom:.15rem}

/* ---- 8. Timeline and label rows ---- */
.timeline{margin:1.2rem 0}
.tl-item{display:grid;grid-template-columns:70px 1fr;gap:.8rem;padding:.6rem 0;border-bottom:1px solid var(--border)}
.tl-item:last-child{border-bottom:none}
.tl-time{font-family:var(--f-mono);font-size:var(--t-small);font-weight:600;color:var(--gold-d);padding-top:.15rem}
.tl-content h4{font-size:.88rem;font-weight:700;color:var(--ink);margin-bottom:.1rem}
.tl-content p{font-size:var(--t-small);color:var(--muted);margin:0;line-height:1.45;max-width:none}
.labelrow{display:grid;grid-template-columns:130px 1fr;gap:.8rem;padding:.6rem 0;border-bottom:1px solid var(--border)}
.labelrow:last-of-type{border-bottom:none}
.labelrow .label{font-family:var(--f-mono);font-size:var(--t-small);font-weight:600;color:var(--gold-d);padding-top:.15rem}
.labelrow p{font-size:.85rem;color:var(--muted);margin:0;line-height:1.5;max-width:none}

/* ---- 9. Lists ---- */
.do-list{margin:1rem 0;list-style:none;max-width:var(--measure)}
.do-list li{font-size:.9rem;line-height:1.6;padding:.45rem 0 .45rem 1.4rem;position:relative}
.do-list li::before{content:'';position:absolute;left:.25rem;top:1rem;width:7px;height:7px;background:var(--gold);border-radius:50%}

/* ---- 10. Panels ---- */
.quote-block{
  background:var(--gold-bg);border:1px solid var(--gold-lt);
  border-radius:var(--r-lg);padding:1.2rem 1.5rem;margin:1rem 0;text-align:center;
}
.quote-text{font-family:var(--f-display);font-style:italic;font-size:1.05rem;color:var(--ink);line-height:1.55;margin-bottom:.4rem}
.quote-attr{font-size:var(--t-small);color:var(--muted)}
.note{
  background:var(--cream);border-left:3px solid var(--gold);
  border-radius:0 var(--r-md) var(--r-md) 0;padding:1rem 1.2rem;margin-top:1rem;
  font-size:.88rem;line-height:1.6;color:var(--muted);max-width:var(--measure);
}
.stage{background:var(--ink);border:1px solid var(--gold);border-radius:var(--r-lg);padding:8px;margin:1.2rem 0}
.stage img,.stage video{border-radius:var(--r-sm);width:100%}
.caption{font-family:var(--f-display);font-style:italic;font-size:.85rem;color:var(--muted);text-align:center;margin-top:.6rem}
/* captions centre under their image, not under the text column */
.section p.caption{max-width:none}

/* ---- 10b. Scoreboard table ---- */
.civ-athenian{--civ:#007A93}.civ-roman{--civ:#507B25}.civ-byzantine{--civ:#727312}
.civ-medici{--civ:#006B24}.civ-silkroad{--civ:#0F1E42}.civ-alexandrian{--civ:#C0491B}
.civ-sumerian{--civ:#7B4AA0}.civ-ming{--civ:#8B1A1A}
.board-wrap{
  overflow-x:auto;border:1px solid var(--border);border-radius:var(--r-md);
  background:var(--cream);margin-bottom:.8rem;-webkit-overflow-scrolling:touch;
  box-shadow:0 1px 3px rgba(15,25,35,.06);
}
.board{border-collapse:collapse;width:100%;min-width:620px;font-size:.85rem}
.board-cap{font-family:var(--f-display);font-style:italic;font-size:.85rem;color:var(--muted);margin-bottom:.6rem}
.board-hint{display:none}
.board th,.board td{padding:10px 12px;text-align:center;vertical-align:middle;border-bottom:1px solid var(--border)}
.board tbody tr:last-child th,.board tbody tr:last-child td{border-bottom:0}
.board thead th{border-bottom:2px solid var(--gold-d)}
.board tbody th[scope="row"]{
  text-align:left;font-weight:600;color:var(--ink);background:var(--parch);
  position:sticky;left:0;z-index:1;border-right:1px solid var(--border);white-space:nowrap;
}
.board-corner{
  background:var(--ink);color:var(--gold);text-align:left;font-family:var(--f-display);
  font-size:.9rem;letter-spacing:.02em;position:sticky;left:0;z-index:2;
}
.board th.civ{background:var(--civ);color:#fff;font-weight:700;line-height:1.25;font-family:var(--f-display);font-size:.9rem;padding:12px 10px}
.civ-glyph{display:block;font-size:1.05rem;margin-bottom:4px}
.board td.num{font-variant-numeric:tabular-nums;white-space:nowrap}
.board td.none{color:var(--muted);font-style:italic}
.board td .sub{display:block;font-size:.72rem;color:var(--muted);font-style:italic;margin-top:1px}
.board tbody tr:nth-child(even) td{background:rgba(201,168,76,.10)}
.board tbody tr:nth-child(even) th[scope="row"]{background:#F2EDE4}
.board tr.board-total td{font-weight:700;font-size:.92rem;color:var(--ink)}
.board tr.board-total th[scope="row"],.board tr.board-total td{border-top:2px solid var(--gold)}
.board-note{font-size:.9rem;line-height:1.65;color:var(--muted);max-width:var(--measure)}
@media (max-width:700px){
  .board{font-size:.8rem}
  .board th,.board td{padding:8px 9px}
  .board-hint{display:inline;color:var(--gold-d);font-style:normal}
}
/* produces line inside a card */
.card .produces{margin-top:.6rem;font-size:.78rem;line-height:1.5;color:var(--gold-d);font-style:italic}

/* ---- 10c. Specification table: requirements, one row per item ---- */
.spec-wrap{
  overflow-x:auto;border:1px solid var(--border);border-radius:var(--r-md);
  background:var(--cream);margin:1.2rem 0;box-shadow:0 1px 3px rgba(15,25,35,.06);
}
.spec{border-collapse:collapse;width:100%;font-size:.88rem}
.spec thead th{
  background:var(--ink);color:var(--gold);font-family:var(--f-display);font-size:.9rem;
  text-align:left;padding:11px 14px;border-bottom:2px solid var(--gold-d);
}
.spec th[scope="row"]{
  text-align:left;font-weight:700;color:var(--ink);background:var(--parch);
  vertical-align:top;padding:12px 14px;border-right:1px solid var(--border);
  white-space:nowrap;width:1%;
}
.spec td{padding:12px 14px;line-height:1.55;color:var(--text);vertical-align:top}
.spec tbody tr+tr th[scope="row"],.spec tbody tr+tr td{border-top:1px solid var(--border)}
.spec tbody tr:nth-child(even) td{background:rgba(201,168,76,.08)}
.spec tbody tr:nth-child(even) th[scope="row"]{background:#F2EDE4}
/* the row that must not be missed */
.spec tr.spec-key th[scope="row"],.spec tr.spec-key td{background:var(--gold-bg)}
.spec tr.spec-key th[scope="row"]{box-shadow:inset 4px 0 0 var(--gold)}
.spec tr.spec-key td strong{color:var(--ink)}
.spec-note{font-size:.85rem;line-height:1.65;color:var(--muted);max-width:var(--measure)}
@media (max-width:560px){
  .spec{font-size:.82rem}
  .spec th[scope="row"]{white-space:normal;width:34%}
  .spec thead th,.spec th[scope="row"],.spec td{padding:10px}
}

/* ---- 10d. Partners ---- */
.partners{display:grid;gap:var(--gap);margin:1.2rem 0}
.partner{
  display:grid;grid-template-columns:150px 1fr;gap:1.2rem;align-items:start;
  background:var(--cream);border:1px solid var(--border);border-radius:var(--r-lg);padding:1.1rem;
}
.partner-mark{
  width:150px;height:80px;border-radius:var(--r-md);background:var(--cream);
  border:1px solid var(--border);display:flex;align-items:center;justify-content:center;
  overflow:hidden;
}
.partner-mark img{max-width:84%;max-height:76%;width:auto;height:auto;object-fit:contain}
.partner-mark .initials{
  font-family:var(--f-display);font-weight:700;font-size:1.6rem;
  color:var(--gold-d);letter-spacing:.02em;
}
.partner-name{font-family:var(--f-display);font-size:1.1rem;font-weight:700;color:var(--ink);margin-bottom:.15rem}
.partner-role{
  font-size:var(--t-tiny);font-weight:700;letter-spacing:.12em;text-transform:uppercase;
  color:var(--gold-d);margin-bottom:.5rem;
}
.partner p{font-size:var(--t-small);color:var(--muted);line-height:1.55;margin:0;max-width:none}
.partner .go{margin-top:.6rem}
@media (max-width:560px){
  .partner{grid-template-columns:1fr;gap:.8rem}
  .partner-mark{width:130px;height:70px}
}

/* ---- 10e. Keycap, for the name story ---- */
.keycap{
  width:58px;height:58px;margin:0 auto .7rem;border-radius:10px;
  background:var(--ink);color:var(--gold);border:1px solid var(--gold-lt);
  box-shadow:0 3px 0 var(--gold-d);
  display:flex;align-items:center;justify-content:center;
  font-family:var(--f-mono);font-size:1.75rem;font-weight:700;line-height:1;
}
.keycap-hint{
  font-family:var(--f-mono);font-size:var(--t-tiny);font-weight:600;
  letter-spacing:.1em;text-transform:uppercase;color:var(--gold-d);margin-bottom:.35rem;
}

/* ---- 10f. Inline figures ---- */
.figure{margin:1.2rem 0}
.gs-fig{width:100%;height:auto;display:block}
.gs-fig .gs-lab{font-family:var(--f-body);font-size:13px;fill:var(--ink);font-weight:600}
.gs-fig .gs-val{font-family:var(--f-body);font-size:13px;fill:var(--ink);font-weight:700}
.gs-fig .gs-ax{font-family:var(--f-mono);font-size:11px;fill:var(--muted);letter-spacing:.04em}
.gs-fig .gs-axt{font-family:var(--f-body);font-size:12px;fill:var(--muted)}
@media (max-width:560px){
  .gs-fig .gs-lab,.gs-fig .gs-val{font-size:15px}
  .gs-fig .gs-ax{font-size:13px}
}

/* ---- 11. Buttons and the one action per page ---- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;
  min-height:50px;padding:.7rem 1.6rem;
  background:var(--ink);color:var(--cream);text-decoration:none;
  font-weight:600;font-size:.95rem;letter-spacing:.03em;
  border:1px solid var(--ink);border-radius:2px;
  transition:background .2s,color .2s,border-color .2s;
}
.btn:hover,.btn:focus-visible{background:var(--gold);border-color:var(--gold);color:var(--ink)}
.btn.ghost{background:transparent;color:var(--ink)}
.btn.ghost:hover{background:var(--ink);color:var(--cream);border-color:var(--ink)}
.cta{
  background:var(--gold-bg);border:1px solid var(--gold-lt);
  border-radius:var(--r-lg);padding:2rem 1.5rem;text-align:center;margin:1.2rem 0;
}
.cta h2::after{margin-left:auto;margin-right:auto}
.cta p{max-width:46ch;margin:0 auto 1.2rem;color:var(--muted)}

/* ---- 12. Footer ---- */
.sitefooter{
  background:var(--ink);color:rgba(254,252,248,.5);
  padding:1.5rem var(--pad-x);font-size:var(--t-small);
  display:flex;justify-content:space-between;align-items:center;gap:1rem;
}
.sitefooter strong{color:var(--gold)}
.sitefooter a{color:rgba(254,252,248,.6)}
.sitefooter a:hover{color:var(--cream)}
.footer-motto{
  font-family:var(--f-display);font-style:italic;font-size:.95rem;color:var(--gold);
}
.sitefooter .footer-right{text-align:right;line-height:1.7}
.sitefooter > div{line-height:1.7}

/* ---- 12b. Full-bleed bands, fixed reading column ---- */
/* Backgrounds run edge to edge; the content column stays 784px and centred. */
.siteheader,.hero,.section,.sitefooter{
  padding-left:max(var(--pad-x), calc((100% - 784px) / 2));
  padding-right:max(var(--pad-x), calc((100% - 784px) / 2));
}

/* ---- 13. Print ---- */
@media print{
  body{max-width:100%;padding:0 1cm}
  .siteheader,.crumbbar,.hero-crumb,.no-print{display:none}
  .hero{background:none;color:#000;padding:0 0 1rem}
  .hero h1,.hero-sub,.hero-desc,.hero-meta{color:#000}
  .section:nth-of-type(even){background:none}
  .page-break{page-break-before:always}
}

/* ---- 14. Responsive ---- */
@media (min-width:1024px){
  :root{--pad-x:3rem;--pad-y:2.4rem;--t-hero:3.1rem}
}
@media (max-width:700px){
  :root{--pad-x:1.2rem;--pad-y:1.5rem;--t-hero:2rem;--t-h2:1.3rem}
  .siteheader{flex-direction:column;align-items:flex-start;gap:.6rem}
  .sitenav{gap:1rem}
  .hero-sub{font-size:1rem}
  .hero-meta{flex-direction:column;gap:.3rem;font-size:.78rem}
  .grid-2,.grid-3,.grid-4{grid-template-columns:1fr}
  .tl-item{grid-template-columns:55px 1fr;gap:.5rem}
  .labelrow{grid-template-columns:1fr;gap:.2rem}
  .sitefooter{flex-direction:column;text-align:center}
  .sitefooter .footer-right{text-align:center}
}
@media (max-width:420px){
  :root{--t-hero:1.6rem}
}
@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
  html{scroll-behavior:auto}
}

/* ---- 15. Learning Foundations components ---- */
/* Three converging forces */
.forces{display:grid;grid-template-columns:repeat(3,1fr);gap:.8rem;margin:1.2rem 0;align-items:stretch}
.force{
  background:var(--parch);border:1px solid var(--border);border-radius:var(--r-lg);
  border-top-width:3px;text-align:center;padding:1.1rem 1rem 1.2rem;
  display:flex;flex-direction:column;
}
.force-icon{font-size:1.7rem;line-height:1;margin-bottom:.45rem}
.force-title{font-family:var(--f-display);font-size:1rem;font-weight:700;color:var(--ink);margin-bottom:.35rem}
.force p{font-size:.8rem;line-height:1.55;color:var(--text);margin:0;max-width:none}
.force.wisdom{border-top-color:var(--gold)}
.force.ai{border-top-color:var(--ink)}
.force.business{border-top-color:#A2563A}

/* Five learning dimensions */
.dimensions{display:grid;grid-template-columns:repeat(5,1fr);gap:.6rem;margin:1.2rem 0}
.dim{
  background:var(--ink);color:var(--cream);border:1px solid var(--gold-lt);
  border-radius:var(--r-md);padding:.85rem .6rem;text-align:center;font-size:.75rem;line-height:1.45;
  display:flex;flex-direction:column;
}
.dim-icon{font-size:1.3rem;display:block;margin-bottom:.3rem}
.dim strong{
  display:flex;align-items:center;justify-content:center;min-height:2.4em;
  font-size:.8rem;line-height:1.2;color:var(--gold);margin-bottom:.35rem;
}
.dim div{color:rgba(255,255,255,.74)}

/* Kolb band: four phases read as one progression */
.kolb-band{
  display:flex;overflow:hidden;border-radius:var(--r-lg);border:1px solid var(--border);
  border-top:3px solid var(--gold);margin:1.2rem 0;counter-reset:ks;
}
.kolb-stage{flex:1;padding:.9rem .6rem 1rem;text-align:center;background:var(--parch);counter-increment:ks}
.kolb-stage+.kolb-stage{border-left:1px solid var(--border)}
.kolb-stage::before{
  content:counter(ks);display:block;width:1.45rem;height:1.45rem;margin:0 auto .45rem;
  border-radius:50%;background:var(--gold);color:var(--ink);
  font-family:var(--f-mono);font-size:.68rem;font-weight:700;line-height:1.45rem;
}
.ks-phase{font-size:.85rem;font-weight:700;color:var(--ink);margin-bottom:.2rem}
.ks-desc{font-size:.72rem;color:var(--text);margin-bottom:.35rem;line-height:1.45}
.ks-kolb{
  font-size:.65rem;color:var(--gold-d);font-style:italic;
  padding-top:.35rem;border-top:1px solid var(--border);
}

/* Pillar blocks inside the framework mapping */
.pillar{margin:1.6rem 0}
.pillar-hdr{display:flex;align-items:center;gap:.6rem;margin-bottom:.7rem}
.pillar-pill{
  font-size:.65rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
  padding:.25rem .8rem;border-radius:20px;white-space:nowrap;
  background:var(--ink);color:var(--gold);
}
.pillar-line{flex:1;height:1px;background:var(--ink);opacity:.25}
.card-cite{font-size:.68rem;color:var(--muted);margin-top:.45rem;font-style:italic}

/* Strips of eight: civilisations and roles */
.strip{display:flex;border-radius:var(--r-md);overflow:hidden;border:1px solid var(--border);margin:.6rem 0 .4rem}
.strip-cell{flex:1;padding:.55rem .3rem;text-align:center;background:var(--parch)}
.strip-cell+.strip-cell{border-left:1px solid var(--border)}
.strip-icon{font-size:1.15rem;display:block;margin-bottom:.15rem}
.strip-name{font-weight:700;color:var(--ink);font-size:.72rem;display:block}
.strip-fn{color:var(--muted);font-size:.62rem;margin-top:.05rem}
.strip-note{font-size:.8rem;color:var(--text);margin-top:.4rem}

/* Distinctive design features */
.originals{display:grid;grid-template-columns:1fr 1fr;gap:.8rem;margin:1.2rem 0}
.orig{background:var(--ink);color:var(--cream);border-radius:var(--r-md);padding:.9rem 1rem;border:1px solid var(--gold-lt)}
.orig-badge{font-size:.6rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--gold);margin-bottom:.3rem}
.orig-title{font-family:var(--f-display);font-size:.95rem;font-weight:700;color:var(--cream);margin-bottom:.25rem}
.orig p{font-size:.76rem;color:rgba(255,255,255,.6);line-height:1.5;margin:0;max-width:none}

/* Standards chips */
.standards{display:flex;gap:.5rem;flex-wrap:wrap;margin:1rem 0}
.std{
  font-size:.7rem;font-weight:600;padding:.3rem .7rem;border-radius:6px;
  background:var(--parch);border:1px solid var(--border);color:var(--ink);
}

/* Diagrams */
.theory-visual{margin:1rem 0}
.theory-visual svg{width:100%;max-width:700px;display:block;margin:0 auto}

/* References */
.ref-list{list-style:none;margin-top:.6rem}
.ref-item{font-size:.82rem;line-height:1.7;color:var(--text);padding-left:1.8rem;text-indent:-1.8rem;margin-bottom:.35rem}
.ref-item em{color:var(--muted)}
.ref-used{font-size:.7rem;color:var(--gold-d);display:block;padding-left:1.8rem;text-indent:0;margin-bottom:.5rem}

@media (max-width:700px){
  .forces{grid-template-columns:1fr}
  .dimensions{grid-template-columns:repeat(5,1fr);gap:.4rem;overflow-x:auto;-webkit-overflow-scrolling:touch}
  .dim{min-width:118px}
  .kolb-band{flex-wrap:wrap}
  .kolb-stage{flex:1 1 48%;border-left:none}
  .kolb-stage:nth-child(1),.kolb-stage:nth-child(2){border-bottom:1px solid var(--border)}
  .strip{flex-wrap:wrap}
  .strip-cell{flex:1 1 24%;border-left:none;border-bottom:1px solid var(--border)}
  .originals{grid-template-columns:1fr}
  .theory-visual{overflow-x:auto;-webkit-overflow-scrolling:touch}
  .theory-visual svg{min-width:600px}
  .ref-item{padding-left:1.2rem;text-indent:-1.2rem;font-size:.78rem}
  .ref-used{padding-left:1.2rem}
}
@media (max-width:480px){
  .strip-cell{flex:1 1 48%}
  .kolb-stage{flex:1 1 100%}
}
@media print{ .appendix{page-break-before:always} }

/* ===========================================================
   16. Cinematic hero — home page only
   =========================================================== */
.hero-film{
  padding-top:0;padding-bottom:0;
  min-height:clamp(430px,74vh,640px);
  display:flex;align-items:flex-end;
}
.hero-film .hero-bg{
  position:absolute;inset:0;z-index:0;
  width:100%;height:100%;object-fit:cover;object-position:50% 40%;
}
.hero-film::before{
  content:'';position:absolute;inset:0;z-index:1;
  background:
    linear-gradient(to top,
      rgba(15,25,35,.95) 0%,
      rgba(15,25,35,.80) 30%,
      rgba(15,25,35,.42) 62%,
      rgba(15,25,35,.38) 100%);
}
.hero-film .hero-inner{
  position:relative;z-index:2;width:100%;
  padding:3.4rem 0 2.6rem;
}
.hero-film h1{
  font-size:clamp(2.5rem,5.6vw,4.1rem);
  margin-bottom:.35rem;
  text-shadow:0 2px 28px rgba(0,0,0,.45);
}
.hero-film .hero-sub{
  font-family:var(--f-display);font-style:normal;font-weight:600;
  font-size:clamp(1.3rem,2.7vw,2.05rem);
  line-height:1.2;color:var(--gold);
  margin:0 0 1.1rem;
  text-shadow:0 2px 20px rgba(0,0,0,.45);
}
.hero-film .hero-desc{
  max-width:48ch;font-size:1.08rem;line-height:1.58;
  color:rgba(254,252,248,.93);
  text-shadow:0 1px 14px rgba(0,0,0,.4);
}
@media (max-width:700px){
  /* Taller frame, sitting on the scroll, and a scrim that clears the picture
     entirely above the text instead of washing over it. */
  .hero-film{min-height:clamp(520px,78vh,660px)}
  .hero-film .hero-bg{object-position:38% 50%}
  .hero-film .hero-inner{padding:2.2rem 0 2rem}
  .hero-film::before{
    background:linear-gradient(to top,
      rgba(15,25,35,.96) 0%,
      rgba(15,25,35,.92) 34%,
      rgba(15,25,35,.60) 48%,
      rgba(15,25,35,.16) 62%,
      rgba(15,25,35,.12) 100%);
  }
}
@media print{
  .hero-film{min-height:0;display:block}
  .hero-film .hero-bg,.hero-film::before{display:none}
}

/* ---- 16b. Keycap cards: side-by-side layout on phones ---- */
@media (max-width:700px){
  .keycards{gap:.6rem}
  .keycards .card{
    display:grid;grid-template-columns:50px 1fr;
    column-gap:1.1rem;align-items:center;
    text-align:left;padding:.95rem 1.05rem;
  }
  .keycards .keycap{
    grid-column:1;grid-row:1 / span 3;
    width:50px;height:50px;margin:0;font-size:1.5rem;align-self:center;
  }
  .keycards .keycap-hint{grid-column:2;margin:0 0 .15rem}
  .keycards .card-title{grid-column:2;margin:0 0 .2rem}
  .keycards p{grid-column:2}
}

/* ---- 17. Nav items as buttons, all the same width ---- */
.sitenav{gap:.6rem}
.sitenav a{
  display:inline-flex;align-items:center;justify-content:center;
  min-width:7.4rem;padding:.42rem .9rem;
  border:1px solid rgba(254,252,248,.22);border-radius:6px;
  color:rgba(254,252,248,.82);
  transition:background .18s,color .18s,border-color .18s;
}
.sitenav a:hover,.sitenav a:focus-visible{
  color:var(--cream);background:rgba(254,252,248,.08);
  border-color:rgba(201,168,76,.75);
}
.sitenav a[aria-current="page"]{
  color:var(--cream);background:var(--gold-bg);border-color:var(--gold);
}
@media (max-width:760px){
  .siteheader{flex-direction:column;align-items:flex-start;gap:.75rem}
  .sitenav{width:100%;display:grid;grid-template-columns:1fr 1fr;gap:.5rem}
  .sitenav a{min-width:0;width:100%}
}