/* ==========================================================================
   CheAI Research: colour bulletin design system (version B)
   A Swiss technical bulletin. Each page opens on a heavy masthead under a
   thick ink rule; each section owns a full-width band in one of the site's
   colours, numbered, with its content set below on white in ruled lists.
   Schibsted Grotesk in heavy weights. The main pages use this file alone;
   lessons, newsletters and curriculum pages load it after style.css for
   the shared chrome (b-*) and the .b-page overrides at the end.
   ========================================================================== */

:root {
    --paper: #ffffff;
    --ink: #0B2B33;
    --ink-2: #5F7178;
    --deep: #071E24;
    --hair: rgba(11, 43, 51, .14);
    --hi: #E2680E;
    --hi-ink: #A8480A;
    --hi-soft: #F4A259;
    --cream: #FBF1E7;
    --light: #F7F5F2;
    --sea: #2E5560;
    --f: 'Schibsted Grotesk', system-ui, -apple-system, sans-serif;
}

.b-body { margin: 0; background: var(--paper); color: var(--ink); font: 400 17px/1.55 var(--f); font-variant-numeric: lining-nums; }
.b-body *, .b-body *::before, .b-body *::after { box-sizing: border-box; }
.b-body ::selection { background: var(--hi-soft); color: var(--deep); }
.b-body a { color: inherit; }
.b-body :focus-visible { outline: 3px solid var(--hi); outline-offset: 2px; }
.b-body img { max-width: 100%; display: block; }
.wrap { max-width: 1320px; margin: 0 auto; padding: 0 32px; }
.vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.vh:focus { position: fixed; top: 8px; left: 8px; width: auto; height: auto; clip: auto; z-index: 10; padding: 8px 12px; background: var(--hi); color: var(--deep); font-weight: 700; }

/* Colour keys: a section or tile sets --c (fill) and --t (text on fill) */
.k-deep { --c: #071E24; --t: #ffffff; }
.k-orange { --c: #E2680E; --t: #071E24; }
.k-soft { --c: #F4A259; --t: #071E24; }
.k-sea { --c: #2E5560; --t: #ffffff; }
.k-slate { --c: #5F7178; --t: #ffffff; }
.k-cream { --c: #FBF1E7; --t: #071E24; }

/* ---------- Chrome ------------------------------------------------------- */
.b-top { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; padding: 22px 0 18px; }
.b-brand { font-family: var(--f); font-weight: 800; font-size: 1.05rem; letter-spacing: -.01em; text-decoration: none; color: var(--ink) !important; }
.b-nav { display: flex; flex-wrap: wrap; gap: 4px 26px; list-style: none; margin: 0; padding: 0; }
.b-nav a { font-family: var(--f); text-decoration: none; font-weight: 500; font-size: .98rem; color: var(--ink-2) !important; }
.b-nav a:hover, .b-nav a[aria-current] { color: var(--ink) !important; }
.b-nav a[aria-current] { text-decoration: underline; text-decoration-thickness: 3px; text-decoration-color: var(--hi); text-underline-offset: 6px; }

.b-mast { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 24px 48px; align-items: end; padding: 56px 0 48px; border-top: 6px solid var(--ink); }
.b-mast h1 { margin: 0; font-family: var(--f); font-weight: 800; font-size: clamp(3.4rem, 2rem + 5.6vw, 6rem); line-height: .88; letter-spacing: -.04em; color: var(--ink); text-wrap: balance; }
.b-mast h1.long { font-size: clamp(2.6rem, 1.6rem + 3.8vw, 4.6rem); line-height: .94; }
.b-mast > p, .b-mast .side > p { margin: 0; max-width: 46ch; font-size: 1.08rem; line-height: 1.55; color: var(--ink-2); }
.b-crumbs { list-style: none; margin: 0 0 18px; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; font-size: .9rem; font-weight: 500; color: var(--ink-2); }
.b-crumbs li + li::before { content: "/"; margin-right: 8px; color: var(--hair); }
.b-crumbs a { color: var(--ink-2) !important; text-decoration: none; }
.b-crumbs a:hover { color: var(--ink) !important; text-decoration: underline; }
.b-facts { display: flex; flex-wrap: wrap; gap: 0; margin: 20px 0 0; padding: 0; border-top: 2px solid var(--ink); }
.b-facts > div { padding: 10px 22px 0 0; margin-right: 22px; }
.b-facts dt { font-size: .8rem; font-weight: 600; color: var(--ink-2); }
.b-facts dd { margin: 0; font-weight: 700; font-size: 1.05rem; color: var(--ink); }
.b-facts dd a { text-decoration-thickness: 2px; text-decoration-color: var(--hi); text-underline-offset: 3px; }

.b-foot { background: var(--deep); color: rgba(255, 255, 255, .72); margin-top: 0; }
.b-foot .wrap { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 24px; padding: 40px 32px 28px; font: 400 .92rem/1.55 var(--f); }
.b-foot b { display: block; color: #fff; font-size: 1.05rem; margin-bottom: 8px; }
.b-foot a { color: #fff !important; }
.b-foot ul { list-style: none; margin: 0; padding: 0; }
.b-foot .credit { grid-column: 1 / -1; display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px; padding-top: 16px; border-top: 1px solid rgba(255, 255, 255, .16); font-size: .84rem; }

/* ---------- Proportion bar ---------------------------------------------- */
.bar { display: flex; height: 132px; gap: 3px; margin: 0 0 12px; }
.seg { flex: var(--k) 1 0; min-width: 0; background: var(--c); color: var(--t) !important; text-decoration: none; padding: 12px 12px 10px;
       display: flex; flex-direction: column; justify-content: space-between; overflow: hidden;
       transform-origin: left center; animation: grow 1.1s cubic-bezier(.16, 1, .3, 1) backwards; animation-delay: var(--d, 0ms); }
.seg b { font-size: 2.6rem; font-weight: 800; line-height: .9; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.seg span { font-size: .86rem; font-weight: 600; line-height: 1.15; }
a.seg:hover { filter: brightness(1.12); }
a.seg:hover span { text-decoration: underline; }
@keyframes grow { from { transform: scaleX(.12); } }
.bar-note { display: flex; justify-content: space-between; gap: 12px; font-size: .86rem; color: var(--ink-2); margin: 0 0 72px; }

/* ---------- Bands and sections ------------------------------------------ */
.sub { margin-bottom: 88px; scroll-margin-top: 16px; }
.band { background: var(--c); color: var(--t); }
.band-in { display: grid; grid-template-columns: minmax(9rem, auto) minmax(0, 1fr) minmax(0, 1fr); gap: 16px 40px; align-items: end; padding: 44px 32px 40px; max-width: 1320px; margin: 0 auto; }
.band-n { font-size: 6rem; font-weight: 800; line-height: .8; letter-spacing: -.04em; font-variant-numeric: tabular-nums; }
.band h2 { margin: 0; font-family: var(--f); font-size: clamp(1.8rem, 1.2rem + 1.8vw, 2.7rem); font-weight: 800; line-height: 1; letter-spacing: -.025em; text-wrap: balance; color: inherit; }
.band p { margin: 0; max-width: 58ch; font-size: 1rem; line-height: 1.55; }
.band a { color: inherit !important; text-decoration-thickness: 2px; text-underline-offset: 4px; }
.body { padding-top: 32px; }

/* Text and figure side by side */
.split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 32px 56px; align-items: start; }
.split.rev > :first-child { order: 2; }
.lede { font-size: 1.18rem; line-height: 1.5; font-weight: 500; margin: 0 0 16px; max-width: 54ch; }
.txt { margin: 0 0 14px; color: var(--ink-2); max-width: 62ch; }
.txt:last-child { margin-bottom: 0; }
.h3 { margin: 0 0 8px; font-family: var(--f); font-size: 1.35rem; font-weight: 700; line-height: 1.2; letter-spacing: -.01em; color: var(--ink); }
.pic { margin: 0; }
.pic img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.pic.wide img { aspect-ratio: 16 / 10; }
.pic.sq img { aspect-ratio: 1 / 1; }
.pic figcaption { display: flex; gap: 10px; align-items: center; padding-top: 8px; font-size: .84rem; color: var(--ink-2); }
.pic figcaption::before { content: ""; width: 10px; height: 10px; background: var(--c, var(--hi)); flex: none; }

/* Actions */
.acts { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; }
.act { display: inline-flex; align-items: center; gap: 10px; padding: 12px 18px; background: var(--ink); color: #fff !important; font-weight: 700; font-size: .98rem; text-decoration: none; transition: background-color .2s ease; }
.act:hover { background: var(--hi); color: var(--deep) !important; }
.act.alt { background: transparent; color: var(--ink) !important; box-shadow: inset 0 0 0 2px var(--ink); }
.act.alt:hover { background: var(--ink); color: #fff !important; }
.go { font-weight: 700; text-decoration-thickness: 2px; text-decoration-color: var(--hi); text-underline-offset: 4px; }

/* Ruled item lists */
.items { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 48px; }
.items.one { grid-template-columns: 1fr; }
.items li { border-top: 2px solid var(--ink); }
.items a, .items .row { display: grid; grid-template-columns: 3.4rem minmax(0, 1fr); gap: 4px 12px; padding: 14px 0 20px; text-decoration: none; }
.it-n { font-size: 1.5rem; font-weight: 800; line-height: 1.05; font-variant-numeric: tabular-nums; display: flex; gap: 8px; align-items: baseline; }
.it-n::before { content: ""; width: 10px; height: 10px; background: var(--c, var(--hi)); box-shadow: inset 0 0 0 1px rgba(11, 43, 51, .25); flex: none; transform: translateY(-2px); }
.it-t { font-size: 1.07rem; font-weight: 600; line-height: 1.38; text-wrap: pretty; }
.it-m { grid-column: 2; font-size: .9rem; color: var(--ink-2); line-height: 1.5; }
.items a:hover .it-t { text-decoration: underline; text-decoration-color: var(--c, var(--hi)); text-decoration-thickness: 3px; text-underline-offset: 4px; }
.items.wide-n a, .items.wide-n .row { grid-template-columns: 9rem minmax(0, 1fr); }
.items.wide-n .it-n { font-size: 1.05rem; }
/* Year markers inside a chronological item list */
.items li.yr { grid-column: 1 / -1; display: flex; gap: 12px; align-items: baseline; padding: 16px 0 4px; font-family: var(--f); font-size: 1.5rem; font-weight: 800; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.items li.yr span { font-family: var(--f); font-size: .84rem; font-weight: 600; letter-spacing: 0; color: var(--ink-2); }

/* Sequence tiles (testbed parts, grades, programs) */
.parts { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(var(--cols, 5), minmax(0, 1fr)); gap: 3px; }
.parts li { background: var(--c, #071E24); }
.parts a, .parts .tile { display: flex; flex-direction: column; gap: 14px; height: 100%; padding: 22px 18px 24px; color: var(--t, #fff) !important; text-decoration: none; transition: filter .25s ease; }
.parts a:hover { filter: brightness(1.15); }
.parts .p-k { font-size: .86rem; font-weight: 600; letter-spacing: .01em; }
.parts .p-k b { display: block; font-size: 3.4rem; font-weight: 800; line-height: .85; letter-spacing: -.04em; margin-bottom: 6px; opacity: 1; }
.parts .p-t { font-size: 1.08rem; font-weight: 700; line-height: 1.3; }
.parts .p-x { font-size: .92rem; line-height: 1.5; }
.parts .p-d { margin-top: auto; font-size: .84rem; font-weight: 600; }
.parts .p-d.qty { display: flex; gap: 18px; opacity: 1; }
.parts .p-d.qty span b { display: block; font-size: 1.6rem; font-weight: 800; line-height: 1; }

/* People */
.people { display: grid; grid-template-columns: repeat(var(--cols, 3), minmax(0, 1fr)); gap: 40px 32px; }
.person .pic img { aspect-ratio: 1 / 1; }
.person h3 { margin: 14px 0 2px; font-family: var(--f); font-size: 1.35rem; font-weight: 800; letter-spacing: -.015em; color: var(--ink); }
.person .role { margin: 0 0 6px; font-weight: 700; font-size: .92rem; color: var(--hi-ink); }
.person .deg { margin: 0 0 8px; font-size: .86rem; color: var(--ink-2); }
.person .bio { margin: 0; color: var(--ink-2); font-size: .96rem; }
.person .bio a { color: var(--ink) !important; text-decoration-color: var(--hi); text-decoration-thickness: 2px; text-underline-offset: 3px; }
.roster { list-style: none; margin: 0; padding: 0; }
.roster > li { display: grid; grid-template-columns: 120px 16rem minmax(0, 1fr); gap: 0 28px; padding: 20px 0; border-top: 2px solid var(--ink); align-items: start; }
.roster img { width: 120px; height: 120px; object-fit: cover; }
.roster .role { margin: 0 0 6px; font-weight: 700; font-size: .92rem; color: var(--hi-ink); }
.roster .deg { margin: 0; font-size: .86rem; color: var(--ink-2); }
.roster .bio { margin: 0; color: var(--ink-2); }
.roster .bio a { color: var(--ink) !important; text-decoration-color: var(--hi); text-decoration-thickness: 2px; text-underline-offset: 3px; }
.roster h3 { margin: 0 0 4px; font-family: var(--f); font-size: 1.3rem; font-weight: 800; color: var(--ink); }

/* Quote and notice */
.quote { background: var(--c, var(--deep)); color: var(--t, #fff); margin: 0 0 88px; }
.quote .wrap { padding-top: 64px; padding-bottom: 60px; }
.quote p { margin: 0 0 18px; max-width: 24ch; font-size: clamp(2rem, 1.3rem + 2.6vw, 3.6rem); font-weight: 800; line-height: 1.08; letter-spacing: -.03em; }
.quote cite { font-style: normal; font-weight: 700; color: var(--t, #fff); }
.quote cite::before { content: ""; display: inline-block; width: 14px; height: 14px; margin-right: 10px; background: var(--hi); vertical-align: -1px; }
.notice { margin-top: 32px; padding: 20px 24px; background: var(--cream); border-left: 8px solid var(--hi); }
.notice p { margin: 0; color: var(--ink); }
.tags { display: flex; flex-wrap: wrap; gap: 6px; margin: 16px 0 0; padding: 0; list-style: none; }
.tags li { padding: 5px 10px; background: var(--c, var(--cream)); color: var(--t, var(--ink)); font-size: .84rem; font-weight: 700; }

/* Search */
.find { display: flex; align-items: center; gap: 10px; border-bottom: 3px solid var(--ink); padding: 0 2px; min-width: min(100%, 360px); }
.find label { font-weight: 700; font-size: .9rem; }
.find input { flex: 1; min-width: 0; border: 0; padding: 10px 0; font: 400 1.05rem var(--f); background: transparent; color: var(--ink); caret-color: var(--hi); outline: none; }
.find input::placeholder { color: var(--ink-2); }

/* ---------- Responsive --------------------------------------------------- */
@media (max-width: 1000px) {
    .parts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .people { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .roster > li { grid-template-columns: 100px minmax(0, 1fr); }
    .roster img { width: 100px; height: 100px; }
    .roster .bio { grid-column: 2; margin-top: 8px; }
}
@media (max-width: 900px) {
    .b-mast { grid-template-columns: 1fr; padding-top: 40px; }
    .band-in { grid-template-columns: 1fr; padding: 32px 20px; }
    .band-n { font-size: 4rem; }
    .split { grid-template-columns: 1fr; }
    .split.rev > :first-child { order: 0; }
    .b-foot .wrap { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 700px) {
    .b-body { font-size: 16px; }
    .wrap { padding: 0 16px; }
    .b-top { flex-direction: column; }
    .b-nav { gap: 4px 16px; }
    .bar { height: 96px; gap: 2px; }
    .seg { padding: 8px 6px; }
    .seg b { font-size: 1.6rem; }
    .seg span { display: none; }
    .bar-note { flex-direction: column; gap: 6px; margin-bottom: 48px; }
    .items { grid-template-columns: 1fr; }
    .items a, .items .row { grid-template-columns: 2.8rem minmax(0, 1fr); }
    .items.wide-n a, .items.wide-n .row { grid-template-columns: 1fr; }
    .items.wide-n .it-m, .items.wide-n .it-t { grid-column: 1; }
    .band-in { padding: 28px 16px; }
    .sub { margin-bottom: 56px; }
    .parts, .people { grid-template-columns: 1fr; }
    .parts a, .parts .tile { gap: 10px; padding: 18px 16px 20px; }
    .parts .p-k { display: flex; align-items: baseline; gap: 10px; }
    .parts .p-k b { font-size: 2.2rem; margin: 0; }
    .roster > li { grid-template-columns: 80px minmax(0, 1fr); gap: 0 16px; }
    .roster img { width: 80px; height: 80px; }
    .roster .bio { grid-column: 1 / -1; margin-top: 12px; }
    .quote { margin-bottom: 56px; }
    .quote .wrap { padding-top: 40px; padding-bottom: 40px; }
    .b-foot .wrap { grid-template-columns: 1fr; padding: 32px 16px 28px; }
}
@media (prefers-reduced-motion: reduce) { .seg { animation: none; } .b-body * { transition: none !important; } }

/* ---------- Sub-pages: lessons, newsletters, curriculum ------------------
   These keep their article markup and style.css; the rules below retune that
   template to the bulletin: no photo mastheads, Schibsted Grotesk, square
   corners, flat fills instead of shadows. */
.b-page { background: var(--paper); font-family: var(--f); }
.b-page .b-chrome { max-width: 1320px; margin: 0 auto; padding: 0 32px; }
.b-page h1, .b-page h2, .b-page h3, .b-page h4, .b-page h5 { font-family: var(--f) !important; letter-spacing: -.02em; }
.b-page .rule-accent { height: 4px; border-radius: 0; background: var(--hi); }
.b-page .program-card, .b-page .person-card, .b-page .grade-card, .b-page .news-card { border-radius: 0 !important; box-shadow: none !important; }
.b-page .btn { border-radius: 0 !important; font-family: var(--f); font-weight: 700; }
.b-page .back-to-top { border-radius: 0 !important; }
@media (max-width: 700px) { .b-page .b-chrome { padding: 0 16px; } }