/* ============================================================
   Design tokens
   One source for the palette, the type stack, the spacing scale,
   and the prose measure. Every colour below this block is a
   var(); add a token rather than a new literal.
   ============================================================ */

:root {
    /* Harvard crimson, plus the tints the callouts and cards use */
    --crimson: #8C1515;
    --crimson-dark: #6E1010;
    --crimson-bright: #A8322E;
    --crimson-050: #FCF6F5;
    --crimson-100: #F5E8E7;
    --crimson-200: #E7CFCE;
    /* White for a mark that sits on a crimson surface: the badges, the pass
       header, and the chrome links that invert to crimson on hover. Separate
       from --bg so a change to the page surface cannot darken text on crimson. */
    --on-crimson: #FFFFFF;

    /* Text, from body copy down to the faintest label */
    --ink: #1E2126;
    --ink-2: #3B4147;
    --ink-3: #646A72;
    --ink-4: #8B9199;

    /* Surfaces and rules */
    --bg: #FFFFFF;
    --surface: #F7F8FA;
    --surface-2: #EFF1F4;
    --border: #DEE2E7;
    --border-soft: #E9ECEF;
    --border-strong: #C4CAD3; /* table rules: one step darker than --border */

    /* Accents used by the note callouts */
    --blue: #0B5ED7;
    --blue-050: #EEF4FF;
    --blue-200: #CCDCF7;
    --green: #1E7E38;
    --green-050: #F1F8F3;
    --green-200: #CFE7D6;
    --amber: #B26B00;
    --amber-050: #FDF6E7;
    --amber-200: #F0DDB0;
    --teal: #10707F;
    --teal-050: #EAF6F8;
    --teal-200: #BEE1E7;

    /* Lato is web-loaded, so every reader sees the same page. The stack
       behind it is the one this site used before, which resolved to Optima
       only on macOS, Candara or Calibri on Windows and Arial or Noto Sans on
       Linux; it now serves only as the fallback while Lato is in flight.
       Lato ships 300/400/700 and no 500 or 600, so the 600 headings resolve
       to real Bold and the 500 chip labels to Regular. Neither is synthesised. */
    --font-sans: 'Lato', Optima, Candara, Calibri, Arial, sans-serif;
    /* One family throughout: headings differ by weight and crimson, not face. */
    --font-display: var(--font-sans);
    --font-mono: "Lucida Console", Monaco, ui-monospace, monospace;

    /* The content column is the page: prose and the wide tables share one
       right edge, so the layout has a single axis. */
    --page-wide: 1200px;

    --s1: 4px;
    --s2: 8px;
    --s3: 12px;
    --s4: 16px;
    --s5: 24px;
    --s6: 32px;
    --s7: 48px;
    --s8: 64px;

    --r-sm: 4px;
    --r: 8px;
    --r-lg: 12px;

    --shadow-1: 0 1px 2px rgba(20, 22, 26, 0.05), 0 1px 3px rgba(20, 22, 26, 0.04);
    --shadow-2: 0 4px 12px -2px rgba(20, 22, 26, 0.09), 0 2px 4px rgba(20, 22, 26, 0.05);
    --shadow-3: 0 14px 32px -12px rgba(140, 21, 21, 0.26);

    /* Bootstrap 5.3 reads these, so its components inherit the type stack
       and the crimson link colour instead of shipping their own. */
    --bs-body-font-family: var(--font-sans);
    --bs-body-color: var(--ink);
    --bs-body-font-size: 1.0625rem;
    --bs-border-color: var(--border);
    --bs-link-color-rgb: 140, 21, 21;
    --bs-link-hover-color-rgb: 168, 50, 46;
    --bs-emphasis-color: var(--ink);
    --bs-heading-color: var(--ink);
}

/* ============================================================
   Base
   ============================================================ */

html {
    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth;
}

body {
    font-family: var(--font-sans);
    font-size: 18px;
    line-height: 1.62;
    color: var(--ink);
    background-color: var(--bg);
    margin-top: 0;
    /* No -webkit-font-smoothing here on purpose. Setting it to `antialiased`
       switches macOS from subpixel to grayscale rendering, which thins every
       stroke on the page; the default is heavier and is what this site had
       before. text-rendering: optimizeLegibility is out for the same reason. */
    font-feature-settings: "kern" 1;
}

/* The sticky navbar would otherwise cover an in-page anchor target. */
:target {
    scroll-margin-top: 96px;
}

code,
kbd,
samp,
pre {
    font-family: var(--font-mono);
    font-feature-settings: "kern" 0;
}

code {
    font-size: 85%;
    color: var(--crimson-dark);
    background-color: var(--crimson-100);
    border-radius: var(--r-sm);
    padding: 0.08em 0.32em;
    word-break: break-word;
}

/* Inside a link, a heading, or a crimson bar, the code chip would fight
   its surroundings, so it drops back to plain monospace. */
a code,
h1 code,
h2 code,
.pass-header code {
    color: inherit;
    background: none;
    border: none;
    padding: 0;
}

pre {
    font-size: 15px;
    line-height: 1.55;
    background-color: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r);
    padding: var(--s3) var(--s4);
    overflow-x: auto;
}

pre code {
    font-size: inherit;
    color: inherit;
    background: none;
    border: none;
    padding: 0;
}

strong,
b {
    font-weight: 600;
    color: var(--ink);
}

hr {
    height: 0;
    border: 0;
    border-top: 1px solid var(--border);
    opacity: 1;
    margin: var(--s6) 0 0;
}

img {
    max-width: 100%;
}

/* ============================================================
   Links
   Colour alone should not carry the signal, so links inside running
   prose keep a faint underline; navigation, cards, badges and other
   chrome opt out below.
   ============================================================ */

a {
    color: var(--crimson);
    cursor: pointer;
    text-decoration: none;
    transition: color 0.15s ease, text-decoration-color 0.15s ease;
}

a:hover {
    color: var(--crimson-bright);
    text-decoration: underline;
}

p a,
li a,
dd a,
.subsection a,
.lead a {
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-decoration-color: var(--crimson-200);
    text-underline-offset: 0.16em;
}

p a:hover,
li a:hover,
dd a:hover,
.subsection a:hover,
.lead a:hover {
    text-decoration-color: currentColor;
}

/* Chrome: tiles, tabs, badges and nav items are already obviously clickable. */
.note-card a,
.note-card,
.policy-toc a,
.reference-links a,
.note-nav a,
.navbar a,
.site-footer a {
    text-decoration: none;
}

:focus-visible {
    outline: 2px solid var(--crimson-bright);
    outline-offset: 2px;
    border-radius: 2px;
}

/* ============================================================
   Headings
   ============================================================ */

h1,
h2,
h3,
h4 {
    text-wrap: balance;
}

h1 {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 27px;
    line-height: 1.2;
    margin-bottom: var(--s4);
    color: var(--crimson);
}

h2 {
    font-family: var(--font-sans);
    font-weight: 600;
    font-size: 21px;
    line-height: 1.3;
    color: var(--ink);
    margin-bottom: var(--s3);
    margin-top: var(--s5);
}

h3 {
    font-family: var(--font-sans);
    font-weight: 600;
    font-size: 19px;
    line-height: 1.35;
    color: var(--ink);
    margin-bottom: var(--s2);
}

h4 {
    font-family: var(--font-sans);
    font-weight: 600;
    font-size: 17px;
    line-height: 1.4;
    color: var(--ink-2);
    margin-bottom: var(--s2);
}

h5 {
    font-family: var(--font-sans);
    font-weight: 600;
    font-size: 15px;
    margin-bottom: var(--s1);
    margin-top: 22px;
    color: var(--ink-2);
}

p {
    font-size: 18px;
    margin-bottom: var(--s3);
}

ul,
ol {
    padding-left: 1.35em;
}

li {
    margin-bottom: 5px;
}

li:last-child {
    margin-bottom: 0;
}

li > ul,
li > ol {
    margin-top: 5px;
}



/* ============================================================
   Page shell and masthead
   ============================================================ */

.page {
    max-width: var(--page-wide);
}

.title {
    font-family: var(--font-sans);
    font-size: 38px;
    font-weight: 400;
    line-height: 1.18;
    color: var(--ink);
    text-align: center;
    text-wrap: balance;
    margin-top: var(--s5);
}

.title2 {
    font-size: 28px;
    font-weight: 600;
    line-height: 1.3;
    color: var(--crimson);
    text-align: center;
    text-wrap: balance;
    margin: var(--s3) 0 var(--s4);
}

@media (max-width: 575px) {
    .title {
        font-size: 28px;
        margin-top: var(--s4);
    }

    .title2 {
        font-size: 24px;
    }
}

.section {
    margin-top: var(--s6);
    display: block;
}

.subsection {
    margin-top: var(--s4);
    margin-bottom: var(--s5);
}

#overview .subsection {
    margin-bottom: var(--s3);
}

.para-heading-inline {
    font-weight: 600;
    font-size: 17px;
}

/* ============================================================
   Site header
   public/header.html is the only markup for the navbar.
   The bar is white. seas-logo.png is a transparent PNG drawn in
   crimson and black ink and cropped to that ink on all four sides,
   so a coloured bar had to carry a white patch behind the logo; on a
   white bar the logo sits on the paper colour it was drawn for and
   the patch goes away. The 3px crimson rule carries the brand colour
   the bar itself used to carry, and draws the lower edge the bar can
   no longer draw for itself now that it is the colour of the page.
   The nav links, which were white-on-crimson, read as body ink and
   turn crimson on hover and on the current page.
   ============================================================ */

.site-header {
    max-width: var(--page-wide);
}

.site-header nav {
    background-color: var(--bg) !important;
    border: none;
    border-bottom: 3px solid var(--crimson);
    box-shadow: var(--shadow-1);
    padding: 0;
}

.navbar-brand {
    padding: 0 !important;
    margin: 0 !important;
    display: flex;
    align-items: center;
}

/* The PNG is cropped to its ink on all four sides, so every gap around the
   logo comes from this padding. There is none horizontally, which puts the
   logo's left edge on the same column as the body text below the header.
   Vertically there are 4px, which hold the artwork clear of the 3px crimson
   rule that the logo's own full-height divider bar would otherwise meet. The
   box is 72px, so the artwork inside it is 64px tall, a third more than the
   48px that an 8px 6px padding left inside a 64px box. */
.seas-logo-header {
    height: 72px;
    width: auto;
    padding: 4px 0;
}

/* Below about 330px the 223px-wide logo and the toggler no longer fit on one
   row, and the toggler wraps to a second row that doubles the height of the
   bar. Under 350px the logo therefore goes back to 48px of artwork, the size
   it was before, which still leaves 13.6px between it and the toggler at a
   285px viewport. */
@media (max-width: 350px) {
    .seas-logo-header {
        height: 56px;
    }
}

.navbar-nav {
    margin-left: auto;
}

.navbar-nav .nav-link {
    font-family: 'Open Sans', sans-serif;
    font-size: 1.1rem;
    font-weight: 400;
    color: var(--ink-2) !important;
    padding: 16px 16px !important;
    border-radius: 4px;
    transition: all 0.2s ease;
}

.navbar-nav .nav-link:hover {
    color: var(--crimson) !important;
    background-color: var(--crimson-050);
    text-decoration: none;
}

.navbar-nav .nav-link.active {
    color: var(--crimson) !important;
    font-weight: 600;
    background-color: var(--crimson-100);
}

/* Bootstrap's own toggler icon is a dark stroke, which is what a white
   bar wants, so the border is the only thing left to restate. */
.navbar-toggler {
    border-color: var(--border-strong) !important;
}

.header-spacer {
    height: 24px;
}

/* ============================================================
   Site footer
   The footer is the header's counterpart, so it closes the page with
   the same device the header opens it with: a light band behind a 3px
   crimson rule. It was a crimson slab, which read as the loudest thing
   on the page once the header above it went white. The band is one step
   off the page surface rather than white, which is what separates it
   from the content without a second rule.
   ============================================================ */

.site-footer {
    background-color: var(--surface);
    border-top: 3px solid var(--crimson);
    color: var(--ink-3);
    padding: var(--s5) 0;
    margin-top: var(--s8);
    text-align: center;
    font-size: 14px;
    line-height: 1.6;
}

.site-footer p {
    margin: 0;
    font-size: 14px;
    color: var(--ink-3);
}

.site-footer a {
    color: var(--crimson);
    text-decoration: none;
    border-bottom: 1px solid var(--crimson-200);
    transition: color 0.15s ease, border-color 0.15s ease;
}

.site-footer a:hover {
    color: var(--crimson-bright);
    border-bottom-color: currentColor;
    text-decoration: none;
}

/* The Harvard policy links every school site carries. They keep the footer's
   14px rather than the copyright's 12.5px, because an accessibility notice
   that is harder to read than the line above it defeats itself. The row is
   centred like the rest of the band and wraps on a narrow screen. */
.site-footer .footer-policies {
    margin-top: var(--s2);
}

/* --ink-4 on the light band is 2.99:1, under the 4.5:1 that 12.5px text
   needs, so the copyright takes --ink-3 (5.14:1) like the line above it and
   is set apart by size rather than by colour. */
.site-footer .footer-copyright {
    margin-top: var(--s2);
    font-size: 12.5px;
    color: var(--ink-3);
}

/* ============================================================
   Tables
   Bootstrap paints rows with an inset box-shadow through these custom
   properties, so tinting a row means overriding them, not
   background-color.
   ============================================================ */

.table {
    --bs-table-border-color: var(--border-strong);
    font-variant-numeric: tabular-nums;
    margin-bottom: 0;
}

/* Row variants (.table-light on header rows) re-derive a near-black
   --bs-table-border-color; every rule inside a table stays the theme gray. */
.table > :not(caption) > *,
.table > :not(caption) > * > * {
    border-color: var(--border-strong);
}

.table > thead th {
    font-size: inherit;
    font-weight: 600;
    color: inherit;
    background-color: var(--surface);
    border-bottom: 1px solid var(--border-strong);
    padding: 10px var(--s3);
    white-space: nowrap;
}

.table > :not(caption) > * > * {
    padding: 10px var(--s3);
}

.table-hover > tbody > tr:hover > *,
.table-hover > tr:hover > * {
    --bs-table-bg-state: var(--crimson-050);
}

.table-responsive {
    border: 1px solid var(--border-strong);
    border-radius: var(--r);
    overflow: auto;
}

/* The rounded wrapper already draws the outer rule. */
.table-responsive > .table-bordered {
    border: 0;
}

/* Bootstrap draws the horizontal rules on the rows and the vertical rules on
   the cells, so both levels must drop their outer edge, or that edge stacks
   on the wrapper's border and renders 2px while the corner arc stays 1px. */
.table-responsive > .table > :not(caption):first-child > *:first-child,
.table-responsive > .table > :not(caption):first-child > *:first-child > * {
    border-top: 0;
}

.table-responsive > .table > :not(caption):last-child > *:last-child,
.table-responsive > .table > :not(caption):last-child > *:last-child > * {
    border-bottom: 0;
}

/* The outer columns too: without this, cell borders double the wrapper's
   left and right rules to 2px while the corner arc stays 1px. */
.table-responsive > .table > :not(caption) > * > *:first-child {
    border-left: 0;
}

.table-responsive > .table > :not(caption) > * > *:last-child {
    border-right: 0;
}

/* ============================================================
   Announcements
   Used by public/index.html (#announcement). The date is a fixed
   column so the entries line up as a log.
   ============================================================ */

.announce-list {
    list-style: none;
    margin: 0;
    padding: 0;
    max-width: 100%;
}

.announce {
    display: grid;
    grid-template-columns: 104px 1fr;
    gap: 0 var(--s3);
    padding: var(--s3) 0;
    border-top: 1px solid var(--border-soft);
    margin-bottom: 0;
}

.announce:first-child {
    border-top: none;
    padding-top: var(--s1);
}

.announce-date {
    font-size: 12.5px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--crimson);
    padding-top: 0.28em;
    font-variant-numeric: tabular-nums;
}

.announce-body {
    font-size: 18px;
}

@media (max-width: 575px) {
    .announce {
        grid-template-columns: 1fr;
        gap: var(--s1) 0;
    }

    .announce-date {
        padding-top: 0;
    }
}

/* ============================================================
   Key facts
   Used by public/index.html (#overview). The details a student looks
   up repeatedly - when it meets, what it assumes, where it lives -
   read as tiles rather than as more paragraphs.
   ============================================================ */

.facts {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: var(--s4);
    margin: var(--s5) 0 var(--s6);
}

.fact {
    background-color: var(--crimson-050);
    border: 1px solid var(--crimson-100);
    border-top: 3px solid var(--crimson);
    border-radius: var(--r);
    padding: var(--s4) var(--s4) var(--s4);
}

.fact-label {
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--crimson);
    margin-bottom: var(--s2);
}

.fact-value {
    font-size: 15.5px;
    line-height: 1.5;
    color: var(--ink-2);
}

.fact-value strong {
    color: var(--ink);
    font-weight: 600;
}

.fact-value .fact-line {
    display: block;
    margin-bottom: 3px;
}

.fact-value .fact-line:last-child {
    margin-bottom: 0;
}

.fact-value .fact-line-label {
    color: var(--ink-3);
}

.fact-value .fact-line-emph {
    font-weight: 600;
    color: var(--crimson);
}


/* ============================================================
   Grade weights
   Used by public/index.html (#overview). The bar is drawn from a
   --w custom property carrying the percentage, so the markup states
   each weight once.
   ============================================================ */

.weights {
    list-style: none;
    margin: var(--s3) 0 var(--s4);
    padding: 0;
    max-width: 100%;
}

.weight {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 96px auto;
    align-items: center;
    gap: 0 var(--s4);
    padding: 7px 0;
    border-bottom: 1px solid var(--border-soft);
    margin-bottom: 0;
    font-size: 17px;
}

.weight:last-child {
    border-bottom: none;
}

.weight-bar {
    height: 7px;
    border-radius: 4px;
    background-color: var(--surface-2);
    overflow: hidden;
}

.weight-bar::before {
    content: "";
    display: block;
    height: 100%;
    /* 20% is the largest single component, so it fills the track. */
    width: calc(var(--w) * 5%);
    background-color: var(--crimson);
    border-radius: 4px;
}

.weight-bonus .weight-bar::before {
    background-color: var(--crimson-200);
}

.weight-value {
    text-align: right;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    color: var(--ink);
}

.weight-name {
    min-width: 0;
}

.weight-note {
    font-size: 14px;
    color: var(--ink-3);
}

.weight-note::before {
    content: "\00b7\00a0";
    color: var(--ink-4);
    margin-left: 0.3em;
}

@media (max-width: 575px) {
    .weight {
        grid-template-columns: minmax(0, 1fr) auto;
        gap: 0 var(--s3);
    }

    .weight-bar {
        display: none;
    }
}

/* ============================================================
   Schedule table
   Used by public/index.html (#schedule).
   ============================================================ */

#schedule .table-responsive {
    max-height: none;
}

#schedule table {
    font-size: 15.5px;
}

#schedule table th:nth-child(2),
#schedule table td:nth-child(2) {
    min-width: 106px;
    width: 106px;
    white-space: nowrap;
    color: var(--ink-2);
}

#schedule table th:nth-child(3),
#schedule table td:nth-child(3) {
    min-width: 168px;
    width: 168px;
}

#schedule table th:nth-child(6),
#schedule table td:nth-child(6) {
    max-width: 200px;
    width: 200px;
}

/* :not([colspan]) so the Part banners and the no-class rows, whose first
   cell spans the table, are not squeezed into the week column. */
#schedule table th:first-child,
#schedule table td:first-child:not([colspan]) {
    width: 56px;
    text-align: center;
    color: var(--ink-3);
}

/* Part banner: a full-width row opening Part I and Part II. */
#schedule tr.table-light > td[colspan="6"] {
    text-align: left;
    --bs-table-bg-type: var(--crimson-100);
    --bs-table-bg-state: var(--crimson-100);
    background-color: var(--crimson-100);
    padding: var(--s3);
    border-top: 2px solid var(--crimson);
}

#schedule tr.table-light > td[colspan="6"] strong {
    font-size: 18px;
    font-weight: 600;
    color: var(--crimson);
}

#schedule tr.schedule-break td {
    --bs-table-bg-type: var(--surface);
    --bs-table-bg-state: var(--surface);
    background-color: var(--surface);
    color: var(--ink-3);
}

/* Deadlines are the reason the Notes column exists; let them carry weight. */
#schedule td:last-child strong {
    color: var(--crimson);
    font-weight: 600;
}

#schedule td:last-child {
    font-size: 14.5px;
    line-height: 1.45;
}

#schedule table td:nth-child(5) {
    font-size: 14.5px;
    line-height: 1.45;
    color: var(--ink-2);
}

@media (max-width: 991px) {
    #schedule table {
        font-size: 14.5px;
    }
}

/* ============================================================
   FAQ list
   Used by public/policy.html.
   ============================================================ */

.faq-list {
    margin-top: 16px;
}

.faq-item {
    margin-bottom: 24px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--border);
}

.faq-item:last-child {
    border-bottom: none;
    margin-bottom: 0;
}

.faq-item h3 {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 19px;
    color: var(--ink);
    margin-bottom: 8px;
    margin-top: 0;
}

.faq-item p {
    font-size: 17px;
    line-height: 1.5;
    color: var(--ink-2);
    margin-bottom: 0;
}

/* Discussion Schedule Styling - Inline Version */
.discussion-schedule-inline {
    margin: 16px 0;
    padding: 16px;
    background-color: var(--surface);
    border-radius: 6px;
    border: 1px solid var(--border-soft);
    overflow-x: auto;
}

.schedule-row {
    display: flex;
    gap: 16px;
    flex-wrap: nowrap;
}

.schedule-cell {
    flex: 1;
    min-width: 160px;
    text-align: center;
    padding: 12px;
    background-color: var(--bg);
    border: 1px solid var(--border);
    border-radius: 6px;
    transition: all 0.2s ease;
}

.schedule-cell:hover {
    background-color: var(--border-soft);
    border-color: var(--crimson);
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}

.schedule-cell .duration {
    display: block;
    font-weight: 600;
    font-size: 14px;
    color: var(--crimson);
    margin-bottom: 8px;
    padding: 4px 8px;
    background-color: var(--surface);
    border-radius: 4px;
    border: 1px solid var(--crimson);
}

.schedule-cell .activity {
    font-size: 13px;
    line-height: 1.3;
    color: var(--ink);
}

/* Responsive Design for Schedule - Mobile */
@media (max-width: 768px) {
    .discussion-schedule-inline {
        padding: 12px;
    }

    .schedule-row {
        gap: 8px;
    }

    .schedule-cell {
        min-width: 120px;
        padding: 8px;
    }

    .schedule-cell .duration {
        font-size: 12px;
        padding: 3px 6px;
        margin-bottom: 6px;
    }

    .schedule-cell .activity {
        font-size: 12px;
    }
}

@media (max-width: 480px) {
    .schedule-cell {
        min-width: 100px;
        padding: 6px;
    }

    .schedule-cell .activity {
        font-size: 11px;
    }
}

/* Lead paragraph styling */
.lead {
    font-size: 20px;
    font-weight: 400;
    line-height: 1.6;
    color: var(--ink-2);
    margin-bottom: 20px;
}

/* Paper Reading Strategy Styling - Compact */
.reading-passes {
    margin: 16px 0;
}

.reading-pass {
    margin-bottom: 16px;
    background-color: var(--bg);
    border: 1px solid var(--border-soft);
    border-radius: 6px;
    overflow: hidden;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
    transition: all 0.2s ease;
}

.reading-pass:hover {
    box-shadow: 0 2px 6px rgba(0,0,0,0.15);
    transform: translateY(-1px);
}

.pass-header {
    background: linear-gradient(135deg, var(--crimson), var(--crimson-bright));
    color: var(--on-crimson);
    padding: 12px 16px;
    border-bottom: 1px solid var(--border);
}

.pass-header h3 {
    margin: 0 0 4px 0;
    font-size: 19px;
    font-weight: 600;
    color: var(--on-crimson);
}

.pass-goal {
    font-size: 15px;
    font-style: italic;
    opacity: 0.9;
    margin: 0;
}

.pass-content {
    padding: 16px;
}

.pass-content h4 {
    color: var(--crimson);
    font-size: 17px;
    font-weight: 600;
    margin-top: 12px;
    margin-bottom: 8px;
    border-bottom: 1px solid var(--surface);
    padding-bottom: 2px;
}

.pass-content h4:first-child {
    margin-top: 0;
}

.pass-content ul {
    margin-bottom: 12px;
}

.pass-content li {
    margin-bottom: 4px;
    line-height: 1.5;
    font-size: 17px;
}

.tip {
    background-color: var(--amber-050);
    border: 1px solid var(--amber-200);
    border-radius: 4px;
    padding: 10px 12px;
    margin: 12px 0;
    border-left: 3px solid var(--amber);
    font-size: 15px;
}

.tip strong {
    color: var(--amber);
}

/* Assignment feature sketches: one inline SVG per required feature.
   Each SVG draws its own frame and text; this rule only sizes it. */
.feature-demo {
    display: block;
    width: 100%;
    max-width: 560px;
    height: auto;
    margin: var(--s3) 0 var(--s2);
}

/* The standalone whole-page demo stays centered; the per-feature
   sketches keep the list item's left axis. */
.feature-demo-full {
    max-width: 724px;
    margin-left: auto;
    margin-right: auto;
}

.evaluation-lens {
    background-color: var(--teal-050);
    border: 1px solid var(--teal-200);
    border-radius: 4px;
    padding: 10px 12px;
    margin: 12px 0;
    border-left: 3px solid var(--teal);
    font-size: 15px;
}

.evaluation-lens h4 {
    color: var(--teal);
    margin-top: 0;
    border: none;
    padding: 0;
    font-size: 15px;
}

.strategy-summary {
    background-color: var(--surface);
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: 16px;
    margin-top: 20px;
    border-left: 3px solid var(--green);
}

.strategy-summary p {
    margin: 0 0 12px 0;
    font-size: 17px;
    line-height: 1.5;
}

.strategy-summary strong {
    color: var(--green);
}

.reference-links {
    margin-top: 16px;
    padding-top: 12px;
    border-top: 1px solid var(--border-soft);
}

.reference-links h4 {
    color: var(--crimson);
    font-size: 17px;
    font-weight: 600;
    margin-bottom: 8px;
    border: none;
    padding: 0;
}

.reference-links ul {
    margin: 0;
    padding: 0;
}

.reference-links li {
    margin-bottom: 8px;
    list-style: none;
    padding-left: 0;
}

.reference-links a {
    display: inline-block;
    padding: 6px 12px;
    background-color: var(--surface);
    border: 1px solid var(--border);
    border-radius: 4px;
    text-decoration: none;
    color: var(--ink-2);
    transition: all 0.2s ease;
    font-weight: 500;
    font-size: 15px;
}

.reference-links a:hover {
    background-color: var(--crimson);
    color: var(--on-crimson);
    border-color: var(--crimson);
    transform: translateY(-1px);
    box-shadow: 0 2px 4px rgba(140, 21, 21, 0.3);
}

/* Responsive Design for Reading Strategy - Compact */
@media (max-width: 768px) {
    .pass-header {
        padding: 10px 12px;
    }

    .pass-header h3 {
        font-size: 18px;
    }

    .pass-content {
        padding: 12px;
    }

    .tip, .evaluation-lens {
        padding: 8px 10px;
    }

    .strategy-summary {
        padding: 12px;
    }
}

/* Policy Page Styling */
.policy-toc {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 16px;
    background-color: var(--surface);
    border: 1px solid var(--border-soft);
    border-radius: 6px;
}

.policy-toc a {
    display: inline-block;
    padding: 6px 14px;
    background-color: var(--bg);
    border: 1px solid var(--border);
    border-radius: 4px;
    font-size: 14px;
    font-weight: 500;
    color: var(--ink-2);
    transition: all 0.2s ease;
}

.policy-toc a:hover {
    background-color: var(--crimson);
    color: var(--on-crimson);
    border-color: var(--crimson);
    text-decoration: none;
    transform: translateY(-1px);
    box-shadow: 0 2px 4px rgba(140, 21, 21, 0.3);
}

.policy-grade-table td:last-child,
.policy-grade-table th:last-child {
    text-align: right;
    width: 100px;
}

/* The one formula on the policy page: the leaderboard performance score.
   Set apart from the prose around it rather than typeset as code. */
.leaderboard-formula {
    background-color: var(--surface);
    border-left: 3px solid var(--crimson);
    border-radius: var(--r-sm);
    padding: 10px 14px;
    margin: var(--s3) 0;
    font-weight: 600;
    color: var(--ink);
}

/* Discussion Questions Callout */
.discussion-questions {
    background-color: var(--surface);
    border: 1px solid var(--border-soft);
    border-left: 3px solid var(--crimson);
    border-radius: 6px;
    padding: 16px 20px;
    margin: 16px 0;
}

.discussion-questions h4 {
    color: var(--crimson);
    font-size: 17px;
    font-weight: 600;
    margin-top: 0;
    margin-bottom: 12px;
    border: none;
    padding: 0;
}

.discussion-questions ul {
    margin-bottom: 0;
}

.discussion-questions li {
    margin-bottom: 6px;
    line-height: 1.5;
    font-size: 17px;
}

/* Rubric Table */
.rubric-table {
    font-size: 14px;
}

.rubric-table td,
.rubric-table th {
    vertical-align: top;
}

.rubric-table td.rubric-weight,
.rubric-table th.rubric-weight {
    text-align: center;
    font-weight: 600;
    white-space: nowrap;
    width: 70px;
}

@media (max-width: 768px) {
    .rubric-table {
        font-size: 12px;
    }
}

/* Display formula */
.formula {
    font-family: var(--font-mono);
    font-size: 15px;
    background-color: var(--surface);
    border: 1px solid var(--border-soft);
    border-radius: 4px;
    padding: 12px 16px;
    margin: 16px 0;
    overflow-x: auto;
    white-space: pre;
    line-height: 1.6;
}

/* Prev / next navigation */
.note-nav {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    margin-top: 32px;
    padding-top: 16px;
    border-top: 1px solid var(--border-soft);
}

.note-nav a {
    display: inline-block;
    padding: 8px 14px;
    background-color: var(--surface);
    border: 1px solid var(--border);
    border-radius: 4px;
    color: var(--ink-2);
    font-size: 15px;
    font-weight: 500;
    transition: all 0.2s ease;
    max-width: 46%;
}

.note-nav a:hover {
    background-color: var(--crimson);
    color: var(--on-crimson);
    border-color: var(--crimson);
    text-decoration: none;
    transform: translateY(-1px);
    box-shadow: 0 2px 4px rgba(140, 21, 21, 0.3);
}

.note-nav .nav-spacer {
    flex: 1;
}

@media (max-width: 600px) {
    .note-nav a {
        max-width: 100%;
    }
}

/* Notes index page */
.notes-list {
    margin-top: 8px;
}

.note-card {
    display: block;
    background-color: var(--bg);
    border: 1px solid var(--border-soft);
    border-left: 3px solid var(--crimson);
    border-radius: 6px;
    padding: 14px 18px;
    margin-bottom: 12px;
    color: inherit;
    transition: all 0.2s ease;
}

.note-card:hover {
    color: inherit;
    text-decoration: none;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
    transform: translateY(-1px);
    border-left-color: var(--crimson-bright);
}

.note-card .note-card-label {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    color: var(--crimson);
}

.note-card .note-card-title {
    font-size: 18px;
    font-weight: 600;
    color: var(--ink);
    margin: 2px 0 4px;
}

.note-card .note-card-summary {
    font-size: 15px;
    color: var(--ink-2);
    line-height: 1.5;
    margin: 0;
}

/* Assignments: the five parts of one system, laid out as a path */
.notes-grid {
    counter-reset: assign;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    column-gap: 32px;
    /* Keep row-gap and the down-arrows' `bottom` in step: the arrow is 16px tall and
       sits in this gap, so bottom = -(row-gap + 16) / 2 centers it. */
    row-gap: 36px;
}

.notes-grid .note-card {
    position: relative;
    counter-increment: assign;
    display: flex;
    flex-direction: column;
    margin-bottom: 0;
    padding: 22px 24px 20px;
    background: var(--crimson-050);
    border: 1px solid var(--crimson-100);
    border-top: 3px solid var(--crimson);
    border-radius: 10px;
    color: inherit;
    text-decoration: none;
    transition: transform 0.25s cubic-bezier(0.2, 0.7, 0.3, 1),
                box-shadow 0.25s ease,
                background-color 0.25s ease,
                border-color 0.25s ease;
}

.notes-grid .note-card:hover {
    color: inherit;
    text-decoration: none;
    background: var(--crimson-100);
    border-color: var(--crimson-200);
    border-top-color: var(--crimson-bright);
    box-shadow: 0 12px 28px -10px rgba(140, 21, 21, 0.28);
    transform: translateY(-2px);
}

/* Ghost index numeral ("01" - "05") in the top-right corner */
.notes-grid .note-card::before {
    content: counter(assign, decimal-leading-zero);
    position: absolute;
    top: 6px;
    right: 14px;
    font-size: 54px;
    font-weight: 300;
    line-height: 1;
    letter-spacing: -0.02em;
    color: rgba(140, 21, 21, 0.09);
    pointer-events: none;
}

/* Keep the tile text above the ghost numeral */
.notes-grid .note-card > * {
    position: relative;
    z-index: 1;
}

.notes-grid #assignment-1 {
    grid-column: 1 / -1;
}

.notes-grid .note-card-label {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: var(--crimson);
}

.notes-grid .note-card-title {
    font-size: 20px;
    font-weight: 600;
    line-height: 1.25;
    color: var(--ink);
    margin: 8px 0 8px;
    max-width: 82%;
}

.notes-grid .note-card-summary {
    font-size: 15px;
    line-height: 1.55;
    color: var(--ink-2);
    flex-grow: 1;
    margin: 0;
}

/* Order arrows between the tiles. Scoped to the grid: the spec pages reuse the
   assignment-N ids on their section divs, and an unscoped selector paints a stray
   arrow onto them. */
.notes-grid #assignment-1::after {
    content: "\2193";
    position: absolute;
    bottom: -26px;
    left: 50%;
    margin-left: -8px;
    color: var(--crimson);
    font-size: 16px;
    font-weight: 700;
    line-height: 1;
}

.notes-grid #assignment-2::after {
    content: "\2192";
    position: absolute;
    top: 50%;
    right: -21px;
    margin-top: -8px;
    color: var(--crimson);
    font-size: 16px;
    font-weight: 700;
    line-height: 1;
}

.notes-grid #assignment-3::after {
    content: "\2193";
    position: absolute;
    bottom: -26px;
    left: -21px;
    color: var(--crimson);
    font-size: 16px;
    font-weight: 700;
    line-height: 1;
}

.notes-grid #assignment-4::after {
    content: "\2192";
    position: absolute;
    top: 50%;
    right: -21px;
    margin-top: -8px;
    color: var(--crimson);
    font-size: 16px;
    font-weight: 700;
    line-height: 1;
}

@media (max-width: 620px) {
    .notes-grid {
        grid-template-columns: 1fr;
    }

    .notes-grid .note-card {
        padding: 18px 20px 16px;
    }

    .notes-grid .note-card::before {
        font-size: 42px;
    }

    .notes-grid #assignment-2::after,
    .notes-grid #assignment-3::after,
    .notes-grid #assignment-4::after {
        content: none;
    }
}

/* Tile grid without the ghost index numerals (computing environments) */
.notes-grid-plain .note-card::before {
    content: none;
}

.notes-grid-plain .note-card-title {
    max-width: 100%;
}

/* Print: drop chrome and keep large elements together */
@media print {
    .site-header,
    .site-footer,
    .note-nav {
        display: none !important;
    }

    body {
        margin-top: 0;
    }

    .formula,
    table {
        break-inside: avoid;
    }
}

/* ============================================================
   Readings
   Used by public/readings.html.
   ============================================================ */

.badge-extra {
    display: inline-block;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.4px;
    text-transform: uppercase;
    padding: 1px 7px;
    border-radius: 3px;
    vertical-align: 1px;
    margin-right: 6px;
    background-color: var(--bg);
    color: var(--ink-3);
    border: 1px dashed var(--border);
}

/* Three columns carrying very different amounts of text: a title and its
   subtitle, a four-digit year, and five paragraphs of prose. The widths below
   follow from that, and the row rule is horizontal only. Vertical rules
   between the columns read as noise once a row is several hundred pixels
   tall. */
.readings-table {
    font-size: 15px;
}

.readings-table td,
.readings-table th {
    vertical-align: top;
    padding-top: 0.7rem;
    padding-bottom: 0.7rem;
}

.readings-table > thead > tr > th {
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.6px;
    text-transform: uppercase;
    text-align: left;
    color: var(--ink-3);
}

/* One horizontal rule between readings, and nothing else. Bootstrap's striping
   is no help here: a topic row shifts the parity, so the stripe stops pairing a
   title with its cell, and at these row heights it paints a slab rather than a
   band. */
.readings-table > tbody > tr + tr > td,
.readings-table > tbody > tr + tr > th {
    border-top: 1px solid var(--border-soft);
}

.readings-table th:first-child,
.readings-table td:first-child {
    width: 29%;
    min-width: 190px;
}

/* The name is the row's handle, so it is the largest thing in the row; the
   subtitle sits under it as a caption. */
.reading-name {
    font-size: 17px;
    line-height: 1.35;
}

.reading-subtitle {
    display: block;
    margin-top: 1px;
    font-size: 13.5px;
    line-height: 1.45;
    color: var(--ink-3);
}

.readings-table td:first-child a:hover .reading-name {
    color: var(--crimson-bright);
}

.readings-table th:nth-child(2),
.readings-table td:nth-child(2) {
    width: 58px;
    min-width: 58px;
    text-align: left;
    font-size: 14px;
    font-variant-numeric: tabular-nums;
    color: var(--ink-3);
}

/* A "Why read it" cell is structured as Background, Problem, Key idea, optional
   Findings, Why it matters, and optional Adoption, one paragraph each. It is the
   longest thing in the row, so it sets smaller than the rest of the table rather
   than a step below the title alone, and carries no trailing gap under the last
   paragraph, so the rows stay compact. */
.readings-table th:nth-child(3),
.readings-table td:nth-child(3) {
    width: 63%;
    font-size: 12.5px;
    line-height: 1.58;
    color: var(--ink-2);
}

/* The font-size is repeated here on purpose. The cell above sets 12.5px, but the
   base `p` rule near the top of this file sets 18px on the paragraph itself, and
   a declaration matching the element always beats a value inherited from its
   cell, whatever the specificity. Without this the description stayed at 18px. */
.readings-table td > p {
    margin-top: 0;
    margin-bottom: 0.5rem;
    font-size: 12.5px;
}

.readings-table td > p:last-child {
    margin-bottom: 0;
}

/* The label opens the paragraph, so it carries the full ink of the cell. */
.readings-table td > p > strong:first-child {
    color: var(--ink);
}

/* Topic group header inside a meeting's reading table. The custom properties
   are how Bootstrap 5.3 paints row backgrounds (an inset box-shadow), so they
   have to be overridden rather than `background-color`. */
.readings-table tr.reading-topic > th {
    --bs-table-bg-type: var(--crimson-100);
    --bs-table-bg-state: var(--crimson-100);
    background-color: var(--crimson-100);
    padding-top: 9px;
    padding-bottom: 9px;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    color: var(--crimson);
}

.readings-table tr.reading-topic-optional > th {
    --bs-table-bg-type: var(--surface-2);
    --bs-table-bg-state: var(--surface-2);
    background-color: var(--surface-2);
    color: var(--ink-2);
}

.overview-table {
    font-size: 15px;
}

.overview-table td,
.overview-table th {
    vertical-align: top;
}

.overview-table th:first-child,
.overview-table td:first-child {
    width: 26%;
}

.overview-table th:nth-child(2),
.overview-table td:nth-child(2) {
    width: 26%;
}

.overview-table tr.overview-meeting > td {
    border-top: 2px solid var(--crimson);
}

.overview-table .overview-none {
    color: var(--ink-3);
}

.reading-led {
    display: inline-block;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.3px;
    text-transform: uppercase;
    color: var(--crimson);
    border: 1px solid var(--crimson-200);
    border-radius: 3px;
    padding: 0 5px;
    margin-left: 6px;
    white-space: nowrap;
}

#part-1 .subsection,
#part-2 .subsection,
#part-3 .subsection,
#not-scheduled .subsection {
    scroll-margin-top: 90px;
}

/* One class meeting per block, separated hard from the next. `.reading-more`
   is a continuation of the meeting above it, so it gets a lighter rule. */
.reading-meeting {
    margin-top: 0;
    margin-bottom: 0;
    padding-top: 40px;
    padding-bottom: 16px;
    border-top: 3px solid var(--crimson-200);
}

.section > .reading-meeting:first-of-type {
    padding-top: 8px;
    border-top: none;
}

.reading-more {
    margin-top: 0;
    margin-bottom: 0;
    padding-top: 24px;
    padding-bottom: 16px;
}

.reading-more > h2 {
    font-style: italic;
}

.reading-date {
    display: inline-block;
    min-width: 74px;
    color: var(--crimson);
    font-variant-numeric: tabular-nums;
}

.reading-date::after {
    content: "\00b7";
    color: var(--ink-4);
    margin-left: 8px;
}

/* Third line of a paper cell, under the name and its subtitle: the tags, and
   the note that the same work is listed on another meeting. */
.reading-also {
    display: block;
    margin-top: 3px;
    font-size: 12px;
    line-height: 1.5;
    color: var(--ink-3);
    white-space: normal;
}

@media (max-width: 767px) {
    /* Three columns cannot hold five paragraphs at phone width: the prose ends
       up a ribbon the reader has to scroll sideways through. So each reading
       stacks instead, name and subtitle and year above the prose. The markup is
       unchanged and still three cells per row; only the boxes are. Because the
       cells are blocks the table has no minimum width, so .table-responsive
       never scrolls and the column widths above stop applying. */
    .readings-table,
    .readings-table > tbody,
    .readings-table > tbody > tr,
    .readings-table > tbody > tr > td,
    .readings-table > tbody > tr > th {
        display: block;
        width: auto;
        min-width: 0;
    }

    .readings-table {
        font-size: 14px;
    }

    .readings-table > thead {
        display: none;
    }

    /* Same selectors as the column widths above, so these win the cascade and
       every stacked cell fills the row. */
    .readings-table th:first-child,
    .readings-table td:first-child,
    .readings-table th:nth-child(2),
    .readings-table td:nth-child(2),
    .readings-table th:nth-child(3),
    .readings-table td:nth-child(3) {
        width: auto;
        min-width: 0;
    }

    .readings-table > tbody > tr > td,
    .readings-table > tbody > tr + tr > td {
        padding: 0 var(--s3);
        border-top: 0;
    }

    .readings-table > tbody > tr + tr > td:first-child {
        border-top: 1px solid var(--border-soft);
    }

    .readings-table > tbody > tr > td:first-child {
        padding-top: 0.7rem;
    }

    .readings-table > tbody > tr > td:last-child {
        padding-bottom: 0.7rem;
    }

    /* The year is its own cell, so on a phone it becomes the last line of the
       heading block rather than a column. */
    .readings-table > tbody > tr > td:nth-child(2) {
        margin-top: 2px;
        font-size: 12px;
    }

    .readings-table > tbody > tr > td:nth-child(3) {
        margin-top: 0.5rem;
        font-size: 12.5px;
    }

    .readings-table > tbody > tr.reading-topic > th {
        padding: 8px var(--s3);
        border-top: 1px solid var(--border-soft);
    }

    .reading-name {
        font-size: 16px;
    }

    .reading-subtitle {
        font-size: 13px;
    }

    .overview-table {
        font-size: 14px;
    }

    .reading-meeting {
        padding-top: 28px;
    }
}

/* ============================================================
   Staff photos
   Used by public/index.html (#staff).
   ============================================================ */

/* Four fixed columns, one per TF, so the four of them stay on one row instead
   of wrapping 3+1 the way an auto-fit track count did between 840px and 1130px.
   Below 992px four cards leave under 140px beside the 48px photo, which wraps
   the longer names, so the TFs go to two rows of two and then to one card each. */
.staff-list {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--s3);
    margin: var(--s5) 0;
}

@media (max-width: 991px) {
    .staff-list {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 575px) {
    .staff-list {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* The instructor sits alone on the first row and the TFs fill the second. A
   zero-height item spanning every column ends the first row wherever it is
   placed, so the split survives the column count changing with the viewport. */
.staff-row-break {
    grid-column: 1 / -1;
    height: 0;
}

.staff-card {
    display: flex;
    align-items: center;
    gap: var(--s3);
    min-width: 0;
    background-color: var(--bg);
    border: 1px solid var(--border);
    border-radius: var(--r);
    padding: var(--s2) var(--s3);
    box-shadow: var(--shadow-1);
}

.staff-photo {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid var(--crimson-100);
    flex-shrink: 0;
}

.staff-name {
    font-size: 15px;
    font-weight: 600;
    line-height: 1.3;
}

.staff-name a {
    color: var(--ink);
    text-decoration: none;
}

.staff-name a:hover {
    color: var(--crimson);
    text-decoration: underline;
}

.staff-role {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--crimson);
    margin-top: 2px;
}

.sponsor-logos {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: center;
    gap: var(--s6);
    margin: var(--s6) 0 var(--s5);
}

.sponsor {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    flex: 0 1 240px;
    max-width: 280px;
}

.sponsor-mark {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 56px;
    width: 100%;
}

/* The anchor is the flex item, not the image. Its height is auto, so a
   percentage max-height on the image inside it resolves to none and the
   mark overflows; every cap below is therefore absolute. */
.sponsor-mark a {
    display: flex;
    align-items: center;
    justify-content: center;
    max-width: 100%;
    height: 100%;
}

.sponsor-mark img {
    max-height: 56px;
    max-width: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
    /* Sponsor marks arrive at unrelated optical weights; the per-sponsor
       overrides below bring them to a common visual size. */
}

.sponsor-fas .sponsor-mark img {
    max-height: 50px;
}

.sponsor-aws .sponsor-mark img {
    max-height: 46px;
}

.sponsor-madsys .sponsor-mark img {
    max-height: 54px;
}

.sponsor-blurb {
    font-size: 14px;
    line-height: 1.5;
    color: var(--ink-3);
    margin: var(--s3) 0 0;
}

.sponsor-blurb a {
    color: var(--crimson);
}

@media (max-width: 575px) {
    .sponsor-logos {
        gap: 26px;
    }

    .sponsor {
        flex-basis: 100%;
    }
}

/* ============================================================
   Reduced motion
   Every hover lift and transition on this site is decoration, so it
   all comes off when the visitor asks for less movement.
   ============================================================ */

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }

    *,
    *::before,
    *::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
    }

    .schedule-cell:hover,
    .reading-pass:hover,
    .reference-links a:hover,
    .policy-toc a:hover,
    .note-nav a:hover,
    .note-card:hover,
    .notes-grid .note-card:hover {
        transform: none;
    }
}

/* ============================================================
   Section headings on pages that open with h2
   public/index.html and the computing pages open each section with
   an h1; public/policy.html, public/discussion.html and the meeting
   blocks in public/readings.html open with an h2. The selectors here
   are narrow on purpose: an h2 sitting under an h1 in the same
   section is a subheading and must keep the plain h2 style.
   ============================================================ */

.section > h2:first-child,
#policy > .subsection > h2,
.reading-meeting > h2,
.reading-more > h2 {
    font-weight: 600;
    font-size: 23px;
    line-height: 1.22;
    color: var(--crimson);
    margin-top: 0;
    margin-bottom: var(--s3);
}


/* ============================================================
   Width
   Text, bordered callouts and data tables all span the content
   column, so the page reads on one right edge.
   ============================================================ */

/* Every bordered block spans the column, so the page has one right edge. */
pre,
.formula,
.tip,
.evaluation-lens,
.strategy-summary,
.discussion-questions,
.reading-passes,
.reference-links,
.faq-list,
.policy-toc,
.announce-list,
.weights,
.staff-list,
.policy-grade-table {
    max-width: 100%;
}


/* ============================================================
   News
   Used by news.cs2680.com, which is rendered by news/src/render.mjs
   rather than served from public/. The page links this stylesheet
   across origins so the two sites keep one palette and one type
   stack; that is why these rules live here and not in the Worker.
   ============================================================ */

/* The topic tabs. Eighteen of them, so they are pills that wrap rather than a
   single scrolling row: wrapping keeps every topic visible at once, which is
   the point of showing counts on them. */
.news-tabs {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--s1) var(--s2);
    margin: var(--s4) 0 0;
    padding: 0;
    border: 0;
    list-style: none;
}

.news-tabs .nav-link {
    padding: 3px 10px;
    border-radius: var(--r-sm);
    font-size: 14px;
    line-height: 1.4;
    font-weight: 400;
    color: var(--ink-2);
    background-color: var(--surface);
    border: 1px solid var(--border-soft);
}

.news-tabs .nav-link:hover {
    color: var(--crimson);
    background-color: var(--crimson-050);
    border-color: var(--crimson-200);
}

.news-tabs .nav-link.active {
    color: var(--on-crimson);
    background-color: var(--crimson);
    border-color: var(--crimson);
    font-weight: 700;
}

/* The count travels with the label, so it inverts with it. */
.news-tabs .news-count {
    color: var(--ink-4);
    font-variant-numeric: tabular-nums;
}

.news-tabs .nav-link.active .news-count {
    color: var(--crimson-200);
}

/* A separator, not a tab. It starts a new row so each family reads as its own
   band of pills. */
.news-tabs-family {
    flex: 0 0 100%;
    margin-top: var(--s3);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.6px;
    text-transform: uppercase;
    color: var(--ink-4);
}

.news-tabs-family:first-child {
    margin-top: 0;
}

/* The window switcher. Links rather than buttons, so a window can be shared. */
.news-range {
    display: inline-flex;
    flex-wrap: wrap;
    gap: var(--s1);
    margin-top: var(--s3);
    padding: 3px;
    border-radius: var(--r);
    background-color: var(--surface-2);
}

.news-range-btn {
    padding: 4px 14px;
    border-radius: var(--r-sm);
    font-size: 14px;
    font-weight: 700;
    color: var(--ink-2);
    text-decoration: none;
    background-color: transparent;
    border-bottom: 0;
}

.news-range-btn:hover {
    color: var(--crimson);
    background-color: var(--bg);
    border-bottom: 0;
}

.news-range-btn.active {
    color: var(--on-crimson);
    background-color: var(--crimson);
}

.news-range-btn.active:hover {
    color: var(--on-crimson);
    background-color: var(--crimson-dark);
}

/* A pane owns the page below the tabs, so its heading sets the same size a
   subsection heading would. */
.tab-content > .tab-pane > h2 {
    margin-top: var(--s5);
}

.news-topic-blurb {
    margin-top: -0.2rem;
    color: var(--ink-3);
    font-size: 15px;
}

/* A day's worth of posts. The heading is the scanning aid: 150 rows in one
   undifferentiated list is a wall, and the same rows under Today, Yesterday
   and a date give a reader somewhere to stop. */
.news-day + .news-day {
    margin-top: var(--s5);
}

.news-day-label {
    margin: 0 0 var(--s2);
    padding: var(--s1) 0;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.8px;
    text-transform: uppercase;
    color: var(--ink-3);
    background-color: var(--bg);
    border-bottom: 1px solid var(--border);
}

.news-day-label .news-count {
    color: var(--ink-4);
    font-variant-numeric: tabular-nums;
}

.news-list {
    margin: 0;
    padding: 0;
    list-style: none;
    max-width: 100%;
}

/* One rule between posts and none around the group. A card per post would put
   three borders around every headline in a list several hundred entries long. */
.news-list li + li {
    border-top: 1px solid var(--border-soft);
}

.news-item {
    position: relative;
}

/* The whole row is the link, not the title alone, so the click target matches
   what the reader is aiming at. The inset accent appears on hover rather than
   a background wash, which at this row height reads as a slab. */
.news-item-link {
    display: block;
    padding: var(--s3) var(--s3) var(--s3) var(--s4);
    border-bottom: 0;
    color: inherit;
    text-decoration: none;
    border-left: 3px solid transparent;
    border-radius: 0 var(--r-sm) var(--r-sm) 0;
}

.news-item-link:hover,
.news-item-link:focus-visible {
    border-bottom: 0;
    color: inherit;
    background-color: var(--crimson-050);
    border-left-color: var(--crimson);
}

/* Source and date lead the row as a kicker. They answer "whose is this and how
   old" before the eye reaches the headline, and setting them small and above
   keeps them from competing with it. */
.news-kicker {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: var(--s2);
    font-size: 12.5px;
    line-height: 1.5;
    color: var(--ink-4);
}

.news-kicker .news-source {
    font-weight: 700;
    letter-spacing: 0.3px;
    text-transform: uppercase;
    color: var(--crimson);
}

.news-kicker .news-date {
    font-variant-numeric: tabular-nums;
}

/* A date the source did not publish. Marked rather than guessed, so a
   first-seen time is never read as a publication date. */
.news-kicker .news-seen {
    font-variant-numeric: tabular-nums;
    font-style: italic;
}

.news-item-title {
    display: block;
    margin-top: 2px;
    font-size: 17.5px;
    line-height: 1.35;
    font-weight: 700;
    color: var(--ink);
}

.news-item-link:hover .news-item-title {
    color: var(--crimson);
}

/* Two lines is enough to decide whether to open a post, and a fixed number of
   lines is what makes a long list scan evenly. */
.news-summary {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin: 3px 0 0;
    font-size: 14.5px;
    line-height: 1.55;
    color: var(--ink-3);
}

/* The cap note is prose, not an excerpt, so it must not inherit the clamp. */
.news-note {
    margin: var(--s4) 0 0;
    font-size: 14.5px;
    line-height: 1.55;
    color: var(--ink-3);
}

/* Topic labels sit under the row rather than inside the link, so they are not
   part of its click target. */
.news-tags {
    padding: 0 var(--s3) var(--s3) var(--s4);
    margin-top: -6px;
}

.news-chip {
    display: inline-block;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.4px;
    text-transform: uppercase;
    padding: 1px 7px;
    border-radius: 3px;
    margin-right: 6px;
    background-color: var(--crimson-050);
    color: var(--crimson);
    border: 1px solid var(--crimson-200);
}

/* In the all-topics tab the leading chip says where the post is filed, which is
   different in kind from the runner-up topics beside it, so it carries more
   weight rather than another colour. */
.news-chip-primary {
    background-color: var(--crimson-100);
    border-color: var(--crimson);
    color: var(--crimson-dark);
}

/* The lede and the freshness line. A page whose value is that it is current
   should say how current at the top, not only in the report at the foot. */
.news-lede {
    font-size: 19px;
    line-height: 1.55;
    color: var(--ink-2);
    max-width: 46em;
}

.news-freshness {
    display: flex;
    align-items: center;
    gap: var(--s2);
    margin: var(--s3) 0 0;
    font-size: 14px;
    color: var(--ink-3);
}

.news-pulse {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background-color: var(--green);
    box-shadow: 0 0 0 3px var(--green-050);
}

/* The method note, kept off the top of the page. A reader who wants to know how
   filing works will open it; one who wants the news should not have to scroll
   three paragraphs to reach any. */
.news-about {
    margin-bottom: var(--s4);
    padding: var(--s3) var(--s4);
    border: 1px solid var(--border-soft);
    border-radius: var(--r);
    background-color: var(--surface);
}

.news-about > summary {
    cursor: pointer;
    font-weight: 700;
    color: var(--ink-2);
}

.news-about > p {
    margin-top: var(--s3);
    margin-bottom: 0;
    font-size: 15px;
    color: var(--ink-3);
}

.news-empty {
    color: var(--ink-3);
    font-size: 15px;
    font-style: italic;
}

/* The run report. A source that stopped answering is the page's most
   important failure, so it is stated on the page rather than left in a log. */
.news-status {
    font-size: 14px;
    color: var(--ink-3);
}

.news-status .news-failed {
    color: var(--crimson);
    font-weight: 700;
}

.news-status ul {
    margin: var(--s2) 0 0;
    padding-left: 1.1rem;
}

@media (max-width: 575.98px) {
    .news-item-title {
        font-size: 16px;
    }

    .news-tabs .nav-link {
        font-size: 13px;
    }
}