/* ==========================================================================
   String Data 2026 — site styles
   Layered on top of Bootstrap 5.3.3. Palette sampled from the conference
   poster artwork so the page chrome matches the banner images.
   ========================================================================== */

:root {
    /* Brand — taken from the poster artwork */
    --sd-navy-900: #131d38;
    --sd-navy-800: #172242;
    --sd-navy-700: #233357;
    --sd-accent: #0170c1;
    --sd-accent-600: #015a9b;
    --sd-accent-100: #e7f1fa;

    /* Neutrals */
    --sd-ink: #1a1d23;
    --sd-body: #3d444f;
    --sd-muted: #6a7280;
    --sd-line: #e3e7ee;
    --sd-line-strong: #cdd5e0;
    --sd-bg-soft: #f6f8fb;

    /* Rhythm */
    --sd-measure: 68ch;
    --sd-radius: 6px;

    /* Bootstrap overrides */
    --bs-link-color-rgb: 1, 112, 193;
    --bs-link-hover-color-rgb: 1, 90, 155;
}

/* --------------------------------------------------------------------------
   Layout guards
   -------------------------------------------------------------------------- */

/* Bootstrap rows carry negative horizontal margins equal to half the gutter.
   At g-5 (3rem) those exceed the container's .75rem padding, which pushes the
   whole page into horizontal scroll on anything narrower than the xl
   breakpoint. Cap the horizontal gutter until there is room for it; the
   vertical gutter (--bs-gutter-y) is untouched, so column spacing is kept. */
.row.g-5 {
    --bs-gutter-x: 1.5rem;
}

@media (min-width: 1200px) {
    .row.g-5 {
        --bs-gutter-x: 3rem;
    }
}

/* Belt and braces: nothing should ever scroll the page sideways. */
html,
body {
    overflow-x: clip;
}

/* --------------------------------------------------------------------------
   Base typography
   -------------------------------------------------------------------------- */

body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
        "Helvetica Neue", Arial, "Noto Sans", "Apple SD Gothic Neo",
        "Malgun Gothic", sans-serif;
    color: var(--sd-body);
    font-size: 1.0625rem;
    line-height: 1.65;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5, h6 {
    color: var(--sd-ink);
    font-weight: 700;
    letter-spacing: -0.011em;
    line-height: 1.25;
}

a {
    text-decoration-thickness: 1px;
    text-underline-offset: 0.18em;
}

a:hover {
    color: var(--sd-accent-600);
}

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

/* Keyboard users get a visible, on-brand focus ring everywhere. */
:focus-visible {
    outline: 3px solid var(--sd-accent);
    outline-offset: 2px;
    border-radius: 2px;
}

.skip-link {
    position: absolute;
    left: -9999px;
    top: 0;
    z-index: 1100;
    padding: 0.75rem 1.25rem;
    background: var(--sd-navy-800);
    color: #fff;
    font-weight: 600;
}

.skip-link:focus {
    left: 0;
}

/* --------------------------------------------------------------------------
   Header / navigation
   -------------------------------------------------------------------------- */

.sd-header {
    position: sticky;
    top: 0;
    z-index: 1030;
    background: rgba(255, 255, 255, 0.94);
    backdrop-filter: saturate(180%) blur(12px);
    border-bottom: 1px solid var(--sd-line);
}

.sd-brand {
    display: flex;
    flex-direction: column;
    text-decoration: none;
    line-height: 1.15;
}

.sd-brand__name {
    font-weight: 700;
    font-size: 1.0625rem;
    color: var(--sd-ink);
    letter-spacing: -0.01em;
}

.sd-brand__meta {
    font-size: 0.75rem;
    color: var(--sd-muted);
    letter-spacing: 0.02em;
}

.sd-nav .nav-link {
    --bs-nav-link-color: var(--sd-body);
    --bs-nav-link-hover-color: var(--sd-ink);
    position: relative;
    font-size: 0.9375rem;
    font-weight: 500;
    padding: 0.5rem 0;
    margin: 0 0.85rem;
}

.sd-nav .nav-link.active {
    color: var(--sd-ink);
    font-weight: 600;
}

/* Active-page marker: an accent rule under the current tab (desktop only —
   on the collapsed mobile menu it becomes a left bar instead). */
@media (min-width: 992px) {
    .sd-nav .nav-link::after {
        content: "";
        position: absolute;
        left: 0;
        right: 0;
        bottom: -0.9rem;
        height: 2px;
        background: var(--sd-accent);
        transform: scaleX(0);
        transition: transform 0.18s ease;
    }

    .sd-nav .nav-link.active::after,
    .sd-nav .nav-link:hover::after {
        transform: scaleX(1);
    }
}

@media (max-width: 991.98px) {
    .sd-nav {
        padding: 0.5rem 0 0.25rem;
        border-top: 1px solid var(--sd-line);
        margin-top: 0.75rem;
    }

    .sd-nav .nav-link {
        margin: 0;
        padding: 0.55rem 0 0.55rem 0.85rem;
        border-left: 2px solid transparent;
    }

    .sd-nav .nav-link.active {
        border-left-color: var(--sd-accent);
        color: var(--sd-accent-600);
    }
}

.navbar-toggler {
    border-color: var(--sd-line-strong);
    padding: 0.35rem 0.55rem;
}

.navbar-toggler:focus {
    box-shadow: none;
}

/* --------------------------------------------------------------------------
   Banner (poster artwork at the top of every page)
   -------------------------------------------------------------------------- */

.sd-banner {
    background: var(--sd-navy-800);
}

.sd-banner img {
    display: block;
    width: 100%;
    height: auto;
}

/* --------------------------------------------------------------------------
   Page title block (interior pages)
   -------------------------------------------------------------------------- */

.sd-pagehead {
    padding: 3rem 0 0;
}

.sd-eyebrow {
    display: block;
    font-size: 0.8125rem;
    font-weight: 600;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: var(--sd-accent);
    margin-bottom: 0.6rem;
}

.sd-pagehead h1 {
    font-size: clamp(1.9rem, 1.35rem + 1.9vw, 2.6rem);
    margin-bottom: 0.75rem;
}

.sd-lede {
    font-size: 1.15rem;
    line-height: 1.6;
    color: var(--sd-body);
    max-width: var(--sd-measure);
}

/* --------------------------------------------------------------------------
   Sections
   -------------------------------------------------------------------------- */

.sd-section {
    padding: 3.5rem 0;
}

.sd-section + .sd-section {
    border-top: 1px solid var(--sd-line);
}

.sd-section--soft {
    background: var(--sd-bg-soft);
    border-top: 1px solid var(--sd-line);
}

.sd-section--soft + .sd-section {
    border-top: 1px solid var(--sd-line);
}

.sd-section__title {
    font-size: 1.5rem;
    margin-bottom: 0.5rem;
}

.sd-section__intro {
    color: var(--sd-muted);
    max-width: var(--sd-measure);
    margin-bottom: 2rem;
}

.sd-prose {
    max-width: var(--sd-measure);
}

.sd-prose p:last-child {
    margin-bottom: 0;
}

/* Small utility so headings can sit above an accent rule. */
.sd-rule {
    width: 44px;
    height: 3px;
    background: var(--sd-accent);
    border: 0;
    opacity: 1;
    margin: 0 0 1.5rem;
}

/* --------------------------------------------------------------------------
   Speaker list
   -------------------------------------------------------------------------- */

.sd-speakers {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    gap: 0;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    column-gap: 2.5rem;
}

.sd-speaker {
    padding: 0.85rem 0;
    border-bottom: 1px solid var(--sd-line);
}

.sd-speaker__name {
    display: block;
    font-weight: 600;
    color: var(--sd-ink);
}

.sd-speaker__affil {
    display: block;
    font-size: 0.9375rem;
    color: var(--sd-muted);
}

.sd-note {
    font-size: 0.9375rem;
    color: var(--sd-muted);
    font-style: italic;
    margin-top: 1.25rem;
}

/* --------------------------------------------------------------------------
   Numbered participant list
   -------------------------------------------------------------------------- */

.sd-participants {
    margin: 0;
    padding-left: 1.6rem;
    columns: 2;
    column-gap: 2.5rem;
}

.sd-participants li {
    break-inside: avoid;
    padding: 0.35rem 0;
    color: var(--sd-ink);
}

.sd-participants li span {
    color: var(--sd-muted);
    font-size: 0.9375rem;
}

@media (max-width: 767.98px) {
    .sd-participants {
        columns: 1;
    }
}

/* --------------------------------------------------------------------------
   Schedule tables
   -------------------------------------------------------------------------- */

.sd-day {
    margin-bottom: 3rem;
}

.sd-day:last-child {
    margin-bottom: 0;
}

.sd-day__head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.15rem 0.75rem;
    padding-bottom: 0.75rem;
    border-bottom: 2px solid var(--sd-navy-800);
    margin-bottom: 0;
}

.sd-day__weekday {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--sd-ink);
}

.sd-day__date {
    font-size: 0.9375rem;
    color: var(--sd-muted);
}

.sd-schedule {
    width: 100%;
    margin: 0;
    border-collapse: collapse;
}

.sd-schedule th,
.sd-schedule td {
    padding: 0.8rem 0.5rem;
    border-bottom: 1px solid var(--sd-line);
    vertical-align: top;
    text-align: left;
}

.sd-schedule th {
    width: 8.5rem;
    white-space: nowrap;
    font-weight: 500;
    font-variant-numeric: tabular-nums;
    color: var(--sd-muted);
    font-size: 0.9375rem;
    padding-left: 0;
}

.sd-schedule td {
    font-weight: 600;
    color: var(--sd-ink);
}

/* Breaks, meals and registration read as secondary to the talks. */
.sd-schedule tr.is-break td {
    font-weight: 400;
    color: var(--sd-muted);
}

.sd-schedule tr.is-break {
    background: var(--sd-bg-soft);
}

.sd-schedule tr.is-feature td {
    color: var(--sd-accent-600);
}

@media (max-width: 575.98px) {
    .sd-schedule th {
        width: 6.5rem;
        font-size: 0.875rem;
    }

    .sd-schedule th,
    .sd-schedule td {
        padding: 0.65rem 0.35rem;
    }
}

/* --------------------------------------------------------------------------
   Past-conference cards
   -------------------------------------------------------------------------- */

.sd-conf {
    height: 100%;
    display: flex;
    flex-direction: column;
    padding: 1.5rem;
    background: #fff;
    border: 1px solid var(--sd-line);
    border-radius: var(--sd-radius);
    transition: border-color 0.18s ease, box-shadow 0.18s ease,
        transform 0.18s ease;
}

.sd-conf:hover {
    border-color: var(--sd-line-strong);
    box-shadow: 0 6px 20px rgba(19, 29, 56, 0.08);
    transform: translateY(-2px);
}

.sd-conf__ordinal {
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--sd-accent);
    margin-bottom: 0.4rem;
}

.sd-conf__title {
    font-size: 1.0625rem;
    margin-bottom: 0.2rem;
}

.sd-conf__title a {
    color: var(--sd-ink);
    text-decoration: none;
}

.sd-conf__title a:hover {
    color: var(--sd-accent-600);
    text-decoration: underline;
}

.sd-conf__venue {
    font-size: 0.9375rem;
    color: var(--sd-muted);
    margin-bottom: 1.25rem;
}

.sd-conf__logos {
    margin-top: auto;
    display: flex;
    align-items: center;
    gap: 1rem;
    min-height: 46px;
}

.sd-conf__logos img {
    max-height: 42px;
    max-width: 130px;
    width: auto;
    height: auto;
    object-fit: contain;
}

/* This conference — the card for 2026 itself. */
.sd-conf--current {
    background: var(--sd-navy-800);
    border-color: var(--sd-navy-800);
    color: #cfdcea;
}

.sd-conf--current .sd-conf__ordinal {
    color: #8fb4d6;
}

.sd-conf--current .sd-conf__title,
.sd-conf--current .sd-conf__title a {
    color: #fff;
}

.sd-conf--current .sd-conf__venue {
    color: #a8bdd2;
}

.sd-conf--current:hover {
    transform: none;
    box-shadow: none;
}

/* --------------------------------------------------------------------------
   Figures, maps, embeds
   -------------------------------------------------------------------------- */

.sd-figure {
    margin: 0 0 2rem;
}

.sd-figure img {
    width: 100%;
    height: auto;
    border: 1px solid var(--sd-line);
    border-radius: var(--sd-radius);
}

.sd-figure figcaption {
    font-size: 0.9375rem;
    color: var(--sd-muted);
    margin-top: 0.75rem;
}

.sd-embed {
    width: 100%;
    border: 1px solid var(--sd-line);
    border-radius: var(--sd-radius);
    background: #fff;
}

/* Legend for the campus map numbers. */
.sd-legend {
    list-style: none;
    padding: 0;
    margin: 0;
}

.sd-legend li {
    display: flex;
    gap: 0.85rem;
    padding: 0.5rem 0;
    border-bottom: 1px solid var(--sd-line);
}

.sd-legend b {
    flex: 0 0 1.9rem;
    color: var(--sd-accent);
}

/* Date variant: the first column holds "9–11 Dec", not a single map number,
   so it needs a wider track that never wraps. */
.sd-legend--dates b {
    flex: 0 0 6.75rem;
    white-space: nowrap;
}

/* --------------------------------------------------------------------------
   Buttons
   -------------------------------------------------------------------------- */

.btn-sd {
    --bs-btn-color: #fff;
    --bs-btn-bg: var(--sd-accent);
    --bs-btn-border-color: var(--sd-accent);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--sd-accent-600);
    --bs-btn-hover-border-color: var(--sd-accent-600);
    --bs-btn-active-bg: var(--sd-accent-600);
    --bs-btn-active-border-color: var(--sd-accent-600);
    font-weight: 600;
    padding: 0.65rem 1.5rem;
}

.btn-sd-outline {
    --bs-btn-color: var(--sd-accent-600);
    --bs-btn-border-color: var(--sd-line-strong);
    --bs-btn-hover-color: var(--sd-accent-600);
    --bs-btn-hover-bg: var(--sd-accent-100);
    --bs-btn-hover-border-color: var(--sd-accent);
    font-weight: 600;
    padding: 0.65rem 1.5rem;
}

/* --------------------------------------------------------------------------
   Callout
   -------------------------------------------------------------------------- */

.sd-callout {
    background: var(--sd-accent-100);
    border-left: 3px solid var(--sd-accent);
    border-radius: 0 var(--sd-radius) var(--sd-radius) 0;
    padding: 1.25rem 1.5rem;
    color: var(--sd-ink);
}

.sd-callout p:last-child {
    margin-bottom: 0;
}

/* --------------------------------------------------------------------------
   Support / funding
   -------------------------------------------------------------------------- */

.sd-support img {
    max-width: 240px;
    height: auto;
}

.sd-support__meta {
    font-size: 0.875rem;
    color: var(--sd-muted);
    max-width: 52ch;
    margin: 1rem auto 0;
}

/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */

.sd-footer {
    background: var(--sd-navy-900);
    color: #b9c6d6;
    padding: 3.5rem 0 0;
    font-size: 0.9375rem;
}

.sd-footer h2 {
    color: #fff;
    font-size: 0.8125rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    margin-bottom: 1.1rem;
}

.sd-footer a {
    color: #dbe5ef;
    text-decoration: none;
}

.sd-footer a:hover {
    color: #fff;
    text-decoration: underline;
}

.sd-footer__org {
    color: #fff;
    font-weight: 600;
    font-size: 1.0625rem;
    margin-bottom: 0.2rem;
}

.sd-footer__list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.sd-footer__list li {
    margin-bottom: 0.55rem;
}

.sd-social {
    display: flex;
    gap: 0.5rem;
    margin-top: 1.25rem;
}

.sd-social a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 50%;
    color: #b9c6d6;
    transition: background 0.18s ease, color 0.18s ease,
        border-color 0.18s ease;
}

.sd-social a:hover {
    background: var(--sd-accent);
    border-color: var(--sd-accent);
    color: #fff;
}

.sd-footer__bottom {
    margin-top: 2.5rem;
    padding: 1.5rem 0;
    border-top: 1px solid rgba(255, 255, 255, 0.12);
    font-size: 0.875rem;
    color: #8794a5;
}

/* --------------------------------------------------------------------------
   Motion & print
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        transition-duration: 0.01ms !important;
        animation-duration: 0.01ms !important;
    }
}

@media print {
    .sd-header,
    .sd-footer,
    .sd-banner {
        display: none !important;
    }

    body {
        font-size: 11pt;
        color: #000;
    }

    .sd-section {
        padding: 1rem 0;
        border: 0;
    }

    a[href^="http"]::after {
        content: " (" attr(href) ")";
        font-size: 9pt;
        color: #555;
    }
}