/*
 * Local font files.
 * The original design direction used Google Fonts, but the browser now loads
 * every font from this project. No external font request is needed at runtime.
 */
@font-face {
    font-family: 'Cinzel Decorative';
    src: url('../fonts/cinzel-decorative-700.ttf') format('truetype');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Cormorant Garamond';
    src: url('../fonts/cormorant-garamond-500.ttf') format('truetype');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Cormorant Garamond';
    src: url('../fonts/cormorant-garamond-700.ttf') format('truetype');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Manrope';
    src: url('../fonts/manrope-400.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Manrope';
    src: url('../fonts/manrope-500.ttf') format('truetype');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Manrope';
    src: url('../fonts/manrope-600.ttf') format('truetype');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Manrope';
    src: url('../fonts/manrope-700.ttf') format('truetype');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Manrope';
    src: url('../fonts/manrope-800.ttf') format('truetype');
    font-weight: 800;
    font-style: normal;
    font-display: swap;
}

/*
 * Design tokens.
 * Colors come from the briefing. Font variables keep type changes centralized:
 * Cormorant for editorial headlines, Cinzel Decorative for the event title,
 * Manrope as the Avenir-like copy face.
 */
:root {
    --blue: #023a80;
    --red: #eb2732;
    --ink: #10233f;
    --muted: #637085;
    --paper: #fffaf1;
    --mist: #edf4f8;
    --line: rgba(2, 58, 128, .16);
    --shadow: 0 24px 70px rgba(2, 31, 64, .18);
    --space-heading-copy: .85rem;
    --space-rule-copy: .95rem;
    --heading: 'Cormorant Garamond', Georgia, serif;
    --decorative: 'Cinzel Decorative', Georgia, serif;
    --copy: 'Manrope', sans-serif;
}

/* Base reset and page background. The layered gradients give the page atmosphere
 * without needing an extra decorative image. */
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
    margin: 0;
    color: var(--ink);
    font-family: var(--copy);
    background:
        radial-gradient(circle at 8% 12%, rgba(235, 39, 50, .12), transparent 22rem),
        linear-gradient(135deg, #fbf6ec 0%, #f2f7fb 46%, #fff 100%);
}
img { max-width: 100%; display: block; }
a { color: inherit; }

/* Sticky header with a compact custom mark. */
.site-header {
    position: sticky;
    top: 0;
    z-index: 20;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 2rem;
    padding: 1rem clamp(1rem, 4vw, 4rem);
    background: rgba(255, 250, 241, .88);
    border-bottom: 1px solid var(--line);
    backdrop-filter: blur(18px);
}
.brand {
    display: inline-flex;
    align-items: center;
    gap: .75rem;
    text-decoration: none;
    letter-spacing: .04em;
}
.brand-mark {
    display: grid;
    place-items: center;
    width: 3.25rem;
    height: 3.25rem;
    background: linear-gradient(135deg, var(--blue) 0 58%, var(--red) 58% 100%);
    clip-path: polygon(0 0, 100% 0, 84% 100%, 0 100%);
}
.brand-mark svg {
    width: 76%;
    height: 76%;
    fill: #fff;
}
.brand strong, .brand small { display: block; line-height: 1; }
.brand small { color: var(--red); font-weight: 800; }
.main-nav, .site-footer nav { display: flex; gap: .5rem; flex-wrap: wrap; }
.main-nav a, .site-footer a {
    padding: .7rem .9rem;
    color: var(--blue);
    font-weight: 800;
    text-decoration: none;
    text-transform: uppercase;
    letter-spacing: .08em;
    font-size: .78rem;
}
.main-nav a[aria-current="page"], .main-nav a:hover { color: var(--red); }

/*
 * Start-page hero.
 * The right side keeps the portrait heart image intact and crops it only through
 * an angled frame so the artwork keeps its effect without looking boxy.
 */
.hero {
    min-height: calc(100vh - 86px);
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(20rem, .9fr);
    gap: clamp(2rem, 6vw, 6rem);
    align-items: center;
    padding: clamp(4rem, 8vw, 8rem) clamp(1rem, 5vw, 5rem);
    overflow: hidden;
}
.hero-copy { max-width: 46rem; }
.eyebrow {
    margin: 0 0 .9rem;
    color: var(--red);
    font-size: .78rem;
    font-weight: 900;
    letter-spacing: .16em;
    text-transform: uppercase;
}
h1, h2, h3 { margin: 0; line-height: .95; }
h1 {
    color: var(--blue);
    font-family: var(--decorative);
    font-size: clamp(3.4rem, 9vw, 8.8rem);
    letter-spacing: -.06em;
}
h2 {
    color: var(--blue);
    font-family: var(--heading);
    font-size: clamp(2.4rem, 5vw, 5rem);
    font-weight: 700;
}
h3 { font-size: clamp(1.25rem, 2vw, 1.75rem); }
p {
    margin: 0 0 1rem;
    color: var(--muted);
    line-height: 1.75;
}
:is(h1, h2, h3) + :is(p, .rich-text, ul, ol) {
    margin-top: var(--space-heading-copy);
}
.rich-text > :first-child { margin-top: 0; }
.rich-text > :last-child { margin-bottom: 0; }
.rich-text p { margin: 0 0 1rem; }
.rich-text ul,
.rich-text ol { color: var(--muted); line-height: 1.75; }
.hero-lead {
    max-width: 42rem;
    margin: 1.25rem 0;
    color: var(--ink);
    font-family: var(--heading);
    font-size: clamp(1.7rem, 3vw, 2.8rem);
    line-height: 1.05;
}
.hero-meta { display: flex; gap: .75rem; flex-wrap: wrap; margin: 1.6rem 0 2rem; }
.hero-meta span {
    padding: .75rem 1rem;
    color: #fff;
    font-weight: 900;
    background: var(--blue);
    clip-path: polygon(0 0, 94% 0, 100% 50%, 94% 100%, 0 100%);
}
.hero-meta span + span { background: var(--red); }
.hero-actions { display: flex; gap: 1rem; flex-wrap: wrap; }
.button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 3.2rem;
    padding: .9rem 1.35rem;
    border: 0;
    color: #fff;
    font: 900 .82rem/1 var(--copy);
    letter-spacing: .09em;
    text-decoration: none;
    text-transform: uppercase;
    cursor: pointer;
    clip-path: polygon(0 0, calc(100% - 1rem) 0, 100% 50%, calc(100% - 1rem) 100%, 0 100%);
}
.button.primary { background: var(--red); box-shadow: 0 14px 30px rgba(235, 39, 50, .26); }
.button.secondary { background: var(--blue); box-shadow: 0 14px 30px rgba(2, 58, 128, .22); }
.text-link { color: var(--red); font-weight: 900; text-transform: uppercase; letter-spacing: .08em; }
.venue-link { margin-top: 1.25rem; }

/* Single angled heart artwork. The image is intentionally not fragmented; the
 * diagonal cut mirrors the visual language used by the venue imagery. */
.hero-art {
    position: relative;
    min-height: 34rem;
    isolation: isolate;
}
.hero-heart-image {
    position: absolute;
    inset: 0 4% 2rem 8%;
    background-image: url('../images/heart-art.jpg');
    background-position: center;
    background-size: cover;
    border: .55rem solid #fff;
    box-shadow: var(--shadow);
    clip-path: polygon(11% 0, 100% 0, 88% 100%, 0 92%);
}
.venue-card {
    position: absolute;
    right: 0;
    bottom: 0;
    max-width: 20rem;
    padding: 1.35rem;
    color: #fff;
    background: var(--blue);
    box-shadow: var(--shadow);
}
.venue-card span { color: #9ed2ff; font-weight: 900; text-transform: uppercase; letter-spacing: .12em; font-size: .72rem; }
.venue-card strong { display: block; margin-top: .5rem; font-size: 1.35rem; line-height: 1.15; }

/* Shared section layout primitives used by Start, Registration and About. */
.section-pad { padding: clamp(3rem, 7vw, 7rem) clamp(1rem, 5vw, 5rem); }
.intro-grid, .registration-layout, .venue-detail {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(18rem, .8fr);
    gap: clamp(2rem, 5vw, 5rem);
    align-items: start;
}
.highlight-box, .cards article, .registration-form, .registration-note, .legal-page {
    padding: clamp(1.5rem, 3vw, 2.4rem);
    background: rgba(255, 255, 255, .78);
    border: 1px solid var(--line);
    box-shadow: var(--shadow);
}
.highlight-box ul { margin: 1rem 0 0; padding: 0; list-style: none; }
.highlight-box li { padding: var(--space-rule-copy) 0 var(--space-rule-copy) 1.5rem; border-top: 1px solid var(--line); position: relative; }
.highlight-box li::before { content: ''; position: absolute; left: 0; top: 1.3rem; width: .55rem; height: .55rem; background: var(--red); transform: rotate(45deg); }

/* Card grids keep teaser content modular. The same styles are used for program
 * highlights and can be reused when more content blocks are added. */
.section-heading { display: flex; justify-content: space-between; gap: 2rem; align-items: end; margin-bottom: 2rem; }
.section-heading.narrow { display: block; max-width: 54rem; }
.cards { display: grid; gap: 1rem; }
.cards.three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.cards span { color: var(--red); font-weight: 900; letter-spacing: .12em; text-transform: uppercase; }
.cards h3 { margin-top: .8rem; color: var(--blue); }
.cards h3 + .rich-text,
.cards h3 + p { margin-top: var(--space-heading-copy); }
.resource-cards article {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}
.resource-cards .rich-text { margin-bottom: 1.25rem; }
.resource-link {
    display: inline-flex;
    align-items: center;
    gap: .65rem;
    margin-top: auto;
    padding: .78rem 1rem;
    color: #fff;
    background: var(--blue);
    font-size: .78rem;
    font-weight: 1000;
    letter-spacing: .08em;
    line-height: 1;
    text-decoration: none;
    text-transform: uppercase;
    clip-path: polygon(0 0, calc(100% - .7rem) 0, 100% 50%, calc(100% - .7rem) 100%, 0 100%);
}
.resource-link::after {
    content: '↗';
    color: #fff;
    font-weight: 1000;
}
.resource-link:hover { background: var(--red); }

/* Partner strip: real logos can replace the text cards without changing the
 * grid. UKSH already uses the provided image asset. */
.sponsor-wall { background: linear-gradient(135deg, var(--blue), #031a3a); }
.sponsor-wall h2, .sponsor-wall p { color: #fff; }
.logo-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 1rem; margin-top: 2rem; }
.logo-card {
    min-height: 7.2rem;
    display: grid;
    place-items: center;
    padding: 1rem;
    color: var(--blue);
    background: #fff;
    font-weight: 1000;
    letter-spacing: .08em;
    text-align: center;
    box-shadow: 0 16px 40px rgba(0, 0, 0, .18);
}
.image-logo img { max-height: 5rem; width: auto; object-fit: contain; }

/* Venue gallery uses staggered vertical offsets and clipped edges to echo the
 * angular flyer language from the material. */
.venue-gallery { display: grid; grid-template-columns: .55fr 1fr; gap: 2rem; align-items: center; }
.gallery-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: .7rem; }
.gallery-grid img { width: 100%; height: 22rem; object-fit: cover; }
.gallery-grid img:nth-child(1) { clip-path: polygon(0 0, 100% 7%, 82% 100%, 0 100%); }
.gallery-grid img:nth-child(2) { margin-top: 3rem; }
.gallery-grid img:nth-child(3) { margin-top: 1.4rem; }
.gallery-grid img:nth-child(4) { clip-path: polygon(12% 0, 100% 0, 100% 100%, 0 92%); }

/* Subpage hero. The same component is used for Registration and About, with a
 * different background image for the registration variant. */
.page-hero {
    padding: clamp(4rem, 8vw, 8rem) clamp(1rem, 5vw, 5rem) clamp(3rem, 5vw, 5rem);
    background: linear-gradient(135deg, rgba(2, 58, 128, .94), rgba(2, 24, 54, .94)), url('../images/hotel-exterior.jpg') center/cover;
}
.page-hero h1, .page-hero p { color: #fff; }
.page-hero h1 { font-size: clamp(3rem, 7vw, 6.8rem); }
.page-hero p:not(.eyebrow),
.page-hero .rich-text { max-width: 48rem; font-size: 1.18rem; }
.page-hero.compact { background-image: linear-gradient(135deg, rgba(2, 58, 128, .96), rgba(235, 39, 50, .84)), url('../images/hotel-conference.png'); }

/* Registration form. The backend repeats every validation rule, so these styles
 * are purely presentation and accessibility feedback. */
.registration-layout { align-items: start; }
.registration-note .rich-text + .rich-text { margin-top: .35rem; }
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
label { display: grid; gap: .4rem; color: var(--blue); font-weight: 900; }
label.wide { grid-column: 1 / -1; }
input, select, textarea {
    width: 100%;
    border: 1px solid rgba(2, 58, 128, .28);
    border-radius: 0;
    padding: .9rem 1rem;
    color: var(--ink);
    font: 500 1rem/1.4 var(--copy);
    background: #fff;
}
input:focus, select:focus, textarea:focus { outline: 3px solid rgba(235, 39, 50, .22); border-color: var(--red); }
.consent { display: flex; align-items: flex-start; gap: .75rem; margin: 1.25rem 0; color: var(--ink); font-weight: 700; }
.consent input { width: auto; margin-top: .25rem; }
.field-error { margin: 0; color: var(--red); font-size: .84rem; font-weight: 800; }
.flash { margin-bottom: 1rem; padding: 1rem; color: #fff; font-weight: 800; background: var(--blue); }
.flash.warning { background: #a16207; }
.flash.error { background: var(--red); }
.flash.success { background: #047857; }

/* Program timeline on the About page. The PDF remains the source for the full
 * detailed schedule; this timeline is the readable web summary. */
.timeline { display: grid; gap: 1rem; }
.timeline article {
    display: grid;
    grid-template-columns: 9rem 1fr;
    gap: 1.5rem;
    padding: 1.25rem;
    background: #fff;
    border-left: .45rem solid var(--red);
    box-shadow: 0 12px 34px rgba(2, 31, 64, .1);
}
.timeline time { color: var(--blue); font-weight: 1000; }
.timeline h3 { color: var(--blue); }
.venue-detail img { width: 100%; min-height: 22rem; object-fit: cover; box-shadow: var(--shadow); }
.legal-page { max-width: 64rem; margin: 0 auto; }
.legal-page h1 { color: var(--blue); font-family: var(--heading); font-size: clamp(2.6rem, 5vw, 5rem); }
.site-footer {
    display: flex;
    justify-content: space-between;
    gap: 2rem;
    padding: 2rem clamp(1rem, 5vw, 5rem);
    color: #fff;
    background: #031a3a;
}
.site-footer strong, .site-footer span { display: block; }
.site-footer a { color: #fff; }

/* Tablet layout: collapse asymmetric desktop grids before content gets cramped. */
@media (max-width: 980px) {
    .hero, .intro-grid, .registration-layout, .venue-gallery, .venue-detail { grid-template-columns: 1fr; }
    .hero { min-height: auto; }
    .cards.three, .logo-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .gallery-grid { grid-template-columns: repeat(2, 1fr); }
    .gallery-grid img { height: 16rem; margin-top: 0 !important; }
    .section-heading { display: block; }
}

/* Phone layout: single-column everything, non-sticky header and shorter hero
 * artwork so the registration CTA remains reachable quickly. */
@media (max-width: 680px) {
    .site-header { position: static; display: grid; }
    .main-nav a { padding-left: 0; }
    h1 { font-size: clamp(2.8rem, 16vw, 4.6rem); }
    .hero-art { min-height: 26rem; }
    .hero-heart-image { inset: 0 0 2.5rem; }
    .venue-card { left: 0; right: auto; }
    .cards.three, .logo-grid, .form-grid, .gallery-grid { grid-template-columns: 1fr; }
    .timeline article { grid-template-columns: 1fr; }
    .site-footer { display: block; }
}

/* Admin backend. Kept visually aligned with the public site, but optimized for
 * dense operational data: table, inline status changes, CSV export and delete. */
.admin-page {
    background: rgba(255, 255, 255, .5);
}

.admin-login,
.empty-state {
    max-width: 42rem;
    padding: clamp(1.5rem, 3vw, 2.4rem);
    background: #fff;
    border: 1px solid var(--line);
    box-shadow: var(--shadow);
}

.admin-login h2,
.admin-toolbar h2 {
    margin-bottom: 1rem;
}

.admin-login .button {
    margin-top: 1rem;
}

.admin-toolbar {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 2rem;
    margin-bottom: 2rem;
    padding: clamp(1.5rem, 3vw, 2.4rem);
    background: #fff;
    border: 1px solid var(--line);
    box-shadow: var(--shadow);
}

.admin-warning {
    display: inline-block;
    margin: 1rem 0 0;
    padding: .8rem 1rem;
    color: #7f1d1d;
    background: #fee2e2;
    font-weight: 900;
}

.admin-actions {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
}

.admin-table-wrap {
    overflow-x: auto;
    background: #fff;
    border: 1px solid var(--line);
    box-shadow: var(--shadow);
}

.admin-table {
    width: 100%;
    min-width: 72rem;
    border-collapse: collapse;
}

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

.admin-table th {
    color: var(--blue);
    background: var(--mist);
    font-size: .76rem;
    letter-spacing: .1em;
    text-transform: uppercase;
}

.admin-table strong,
.admin-table span,
.admin-table small {
    display: block;
}

.admin-table span,
.admin-table small {
    color: var(--muted);
    font-size: .86rem;
}

.inline-admin-form {
    display: flex;
    gap: .5rem;
    align-items: center;
}

.inline-admin-form select {
    min-width: 9rem;
    padding: .55rem .7rem;
}

.inline-admin-form button,
.delete-form button {
    border: 0;
    padding: .62rem .75rem;
    color: #fff;
    background: var(--blue);
    font-weight: 900;
    cursor: pointer;
}

.delete-form {
    margin-top: .75rem;
}

.delete-form button {
    background: var(--red);
}

.admin-table details {
    max-width: 20rem;
}

.admin-table summary {
    color: var(--blue);
    font-weight: 900;
    cursor: pointer;
}

@media (max-width: 680px) {
    .admin-toolbar,
    .admin-actions,
    .inline-admin-form {
        display: grid;
        align-items: stretch;
    }
}

/* AJAX registration feedback. The HTML form still works without JavaScript;
 * these styles only enhance the fetch-based submission path. */
.ajax-status {
    margin-bottom: 1rem;
    padding: 1rem;
    color: #fff;
    font-weight: 900;
    background: var(--blue);
}

.ajax-status.success { background: #047857; }
.ajax-status.warning { background: #a16207; }
.ajax-status.error { background: var(--red); }
.ajax-status.info { background: var(--blue); }

button[disabled] {
    cursor: wait;
    opacity: .68;
}

/* Detailed program page. The agenda is intentionally denser than the homepage,
 * with strong time labels and nested talk rows for quick scanning on site. */
.program-hero {
    background-image: linear-gradient(135deg, rgba(2, 58, 128, .94), rgba(2, 24, 54, .88)), url('../images/hotel-conference.png');
}

.program-intro,
.program-reading {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 2rem;
    align-items: end;
    margin-bottom: 2rem;
    padding: clamp(1.5rem, 3vw, 2.4rem);
    background: #fff;
    border: 1px solid var(--line);
    box-shadow: var(--shadow);
}

.program-reading {
    grid-template-columns: minmax(18rem, .42fr) minmax(0, 1fr);
}

.program-intro h2 + .rich-text,
.program-reading h2 + .rich-text,
.page-hero h1 + .rich-text {
    margin-top: var(--space-heading-copy);
}

.program-actions {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
}

.program-meta-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1rem;
    margin-bottom: 2rem;
}

.program-meta-grid article {
    padding: 1.25rem;
    color: #fff;
    background: linear-gradient(135deg, var(--blue), #031a3a);
    box-shadow: 0 16px 40px rgba(2, 31, 64, .16);
}

.program-meta-grid span,
.program-day-heading span {
    display: block;
    margin-bottom: .65rem;
    color: #9ed2ff;
    font-size: .72rem;
    font-weight: 1000;
    letter-spacing: .14em;
    text-transform: uppercase;
}

.program-meta-grid strong,
.program-meta-value {
    display: block;
    line-height: 1.35;
    font-weight: 900;
}

.program-jump-nav {
    position: sticky;
    top: 5.2rem;
    z-index: 10;
    display: flex;
    gap: .5rem;
    flex-wrap: wrap;
    margin-bottom: 2rem;
    padding: .75rem;
    background: rgba(255, 250, 241, .9);
    border: 1px solid var(--line);
    backdrop-filter: blur(14px);
}

.program-jump-nav a {
    padding: .75rem 1rem;
    color: #fff;
    background: var(--blue);
    font-size: .76rem;
    font-weight: 1000;
    letter-spacing: .1em;
    text-decoration: none;
    text-transform: uppercase;
    clip-path: polygon(0 0, calc(100% - .7rem) 0, 100% 50%, calc(100% - .7rem) 100%, 0 100%);
}

.program-days {
    display: grid;
    gap: 2.5rem;
}

.program-day {
    scroll-margin-top: 8rem;
}

.program-day-heading {
    padding: clamp(1.5rem, 3vw, 2.4rem);
    color: #fff;
    background: var(--blue);
    box-shadow: var(--shadow);
}

.program-day-heading h2,
.program-day-heading p {
    color: #fff;
}
.program-day-heading .rich-text,
.program-day-heading .rich-text p { color: #fff; }

.program-agenda {
    display: grid;
    gap: .85rem;
    margin-top: 1rem;
}

.program-item {
    display: grid;
    grid-template-columns: 9rem minmax(0, 1fr);
    gap: 1.25rem;
    padding: 1.25rem;
    background: #fff;
    border-left: .45rem solid var(--red);
    box-shadow: 0 12px 34px rgba(2, 31, 64, .1);
}

.program-item.is-break {
    border-left-color: var(--blue);
    background: rgba(237, 244, 248, .9);
}

.program-item time {
    color: var(--blue);
    font-weight: 1000;
}

.program-item h3 {
    color: var(--blue);
    line-height: 1.1;
}

.program-meta {
    margin: var(--space-heading-copy) 0 0;
    color: var(--red);
    font-weight: 900;
}

.talk-list {
    display: grid;
    margin: var(--space-rule-copy) 0 0;
    padding: 0;
    list-style: none;
}

.talk-list li {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(12rem, .55fr);
    gap: 1rem;
    padding: var(--space-rule-copy) 0;
}

.talk-list li + li { border-top: 1px solid var(--line); }

.talk-list strong,
.talk-list span {
    display: block;
}

.talk-list span {
    color: var(--muted);
    font-size: .92rem;
    font-weight: 700;
}

.program-reading {
    align-items: start;
    margin: 2.5rem 0 0;
}

.program-reading ul {
    margin: 0;
    padding-left: 1.2rem;
}

.program-reading li {
    margin-bottom: .7rem;
    color: var(--muted);
    line-height: 1.55;
}

.reading-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .75rem;
    align-self: stretch;
}

@media (max-width: 1200px) {
    .program-reading {
        grid-template-columns: 1fr;
    }
}

.reading-link {
    position: relative;
    display: flex;
    gap: .45rem;
    align-items: center;
    justify-content: space-between;
    min-height: 3.35rem;
    padding: .85rem 2.6rem .85rem 1rem;
    color: var(--blue);
    background: rgba(237, 244, 248, .92);
    border: 1px solid var(--line);
    font-weight: 900;
    line-height: 1.2;
    text-decoration: none;
    clip-path: polygon(0 0, calc(100% - .9rem) 0, 100% 50%, calc(100% - .9rem) 100%, 0 100%);
}

.reading-link::after {
    content: '↗';
    position: absolute;
    right: 1rem;
    color: var(--red);
    font-weight: 1000;
}

.reading-link:hover {
    color: #fff;
    background: var(--blue);
}

.reading-link.is-muted {
    color: var(--muted);
    background: #fff;
    padding-right: 1rem;
}

.reading-link.is-muted::after {
    content: '';
}

.reading-link small {
    flex: 0 0 auto;
    color: var(--red);
    font-size: .66rem;
    font-weight: 1000;
    letter-spacing: .08em;
    text-transform: uppercase;
}

@media (max-width: 980px) {
    .program-intro,
    .program-reading,
    .program-meta-grid {
        grid-template-columns: 1fr;
    }

    .reading-grid {
        grid-template-columns: 1fr;
    }

    .program-jump-nav {
        position: static;
    }
}

@media (max-width: 680px) {
    .program-item,
    .talk-list li {
        grid-template-columns: 1fr;
    }
}

/* About program overview: day-based summary so visitors immediately understand
 * which content belongs to which date before opening the detailed program. */
.about-program-days {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1rem;
}

.about-program-days article {
    padding: clamp(1.25rem, 2.5vw, 2rem);
    background: #fff;
    border: 1px solid var(--line);
    border-top: .45rem solid var(--red);
    box-shadow: 0 12px 34px rgba(2, 31, 64, .1);
}

.about-program-days span,
.about-program-days time {
    display: block;
    font-weight: 1000;
    letter-spacing: .1em;
    text-transform: uppercase;
}

.about-program-days span {
    color: var(--red);
    font-size: .78rem;
}

.about-program-days time {
    margin: .35rem 0 1rem;
    color: var(--blue);
    font-size: .72rem;
}

.about-program-days h3 {
    color: var(--blue);
    line-height: 1.1;
}

.about-program-days ul {
    margin: 1rem 0 0;
    padding-left: 1.1rem;
}

.about-program-days li {
    margin-bottom: .55rem;
    color: var(--muted);
    line-height: 1.45;
}

.program-reading a {
    color: var(--blue);
    font-weight: 900;
}

.program-reading small {
    display: block;
    color: var(--muted);
    font-weight: 800;
}

@media (max-width: 980px) {
    .about-program-days {
        grid-template-columns: 1fr;
    }
}

/* Mobile polish after viewport audit. These rules reduce crowding on common
 * phone widths around 375-430px without changing the desktop design. */
@media (max-width: 680px) {
    .site-header {
        gap: 1rem;
        padding: 1rem;
    }

    .brand-mark {
        width: 2.75rem;
        height: 2.75rem;
    }

    .main-nav {
        gap: .25rem .75rem;
    }

    .main-nav a,
    .site-footer a {
        font-size: .72rem;
        letter-spacing: .06em;
    }

    .hero {
        padding-top: 3rem;
    }

    .hero-meta span,
    .button {
        width: 100%;
    }

    .hero-art {
        min-height: 22rem;
    }

    .hero-heart-image {
        inset: 0 0 2.25rem;
    }

    .venue-card {
        max-width: 17rem;
    }

    .page-hero {
        padding-top: 3rem;
    }

    .program-jump-nav {
        flex-wrap: nowrap;
        overflow-x: auto;
        padding-bottom: 1rem;
    }

    .program-jump-nav a {
        flex: 0 0 auto;
    }

    .program-item,
    .registration-form,
    .registration-note,
    .admin-login,
    .empty-state,
    .highlight-box,
    .cards article {
        padding: 1.15rem;
    }

    .talk-list li {
        gap: .35rem;
    }

    .site-footer nav {
        margin-top: 1rem;
    }
}

@media (max-width: 390px) {
    h1 {
        font-size: clamp(2.45rem, 14vw, 3.8rem);
    }

    h2 {
        font-size: clamp(2rem, 12vw, 3rem);
    }

    .hero-lead {
        font-size: 1.45rem;
    }
}

/* Spam honeypot field: present in markup for bots, invisible and unreachable for users. */
.spam-check {
    position: absolute;
    left: -10000px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.is-hidden-registration {
    opacity: .62;
    background: #f8fafc;
}

.admin-badge {
    display: inline-block;
    margin-top: .45rem;
    padding: .25rem .45rem;
    color: #fff;
    background: #64748b;
    font-size: .7rem;
    font-style: normal;
    font-weight: 1000;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.hide-form {
    margin-top: .75rem;
}

.hide-form button {
    border: 0;
    padding: .62rem .75rem;
    color: #fff;
    background: #64748b;
    font-weight: 900;
    cursor: pointer;
}