/* ─────────────────────────────────────────────────────────────────────
   ConferenceApp · Blockchain Education 2026
   Author: Viktor Georgiev
   ───────────────────────────────────────────────────────────────────── */
/* ============================================================
   conferenceStyle.css — the "Conference" page.
   The same visual language as stylesFAQ.css, attendStyle.css,
   scheduleStyle.css, lecturersStyle.css and icbiStyle.css: Oswald, zero corner
   radius, hairline rules, the red accent, registration marks.

   THE PATTERN OF THIS PAGE is an axonometric grid — lines in three directions
   at 60°, the way an isometric projection is set out. So far: a square grid
   (FAQ, Attend), a time scale (Schedule), diagonal hatching (Lecturers), graph
   paper (ICBI). A fifth mark, at the same density and with the same
   soft-light blend.

   --- FOR WHOEVER WRITES THE SHARED STYLE NEXT ---
   1) .conference-page paints no opaque background: it comes from <body>
      (mainStyle.css), so that the global ambient layer can sit BEHIND the page
      without blend tricks.
   2) .light-section used to be an opaque white band across the full width
      (`background-color: #ffffff` with `margin: 60px 0`). As on ICBI, such a
      band is impenetrable: a layer behind the page disappears under it. The
      light area is a PLATE now — an object with a frame and corner marks, set
      in from the edges, so the background passes by on both sides. The class
      name is kept; the behaviour is not.
   3) The only opaque surfaces here are the banner and that plate.

   --- THE RHYTHM OF THE PAGE ---
   The original was eight repetitions of "a centred heading above a grid of
   cards". Each section now has a shape of its own:
     about the conference → two columns of text
     goals                → numbered cells of a visible grid
     themes               → a tight band of four cells, no descriptions
     structure            → three days, each with a number and a hairline list
     outcomes             → a light plate with numbered rows
     documents            → download rows, like the PDF buttons on Schedule
     partners             → three columns of tiles
     committees           → three columns of compact rows of people
   ============================================================ */

*, *::before, *::after { box-sizing: border-box; }

.conference-page {
    background: transparent;
    color: var(--text, #f4f2ec);
    font-family: "Oswald", Arial, sans-serif;
    font-weight: 300;
}

.conference-page ::selection { background: color-mix(in srgb, var(--accent) 35%, transparent); }
.conference-page :focus-visible { outline: 2px solid var(--accent, #ff3636); outline-offset: 2px; }

/* .center-section and .text-left appear in the markup in many places; they
   are neutralised here rather than removed from every Razor block. */
.conference-page .center-section {
    display: block;
    text-align: left;
    align-items: stretch;
}

.conference-page .text-left { text-align: left; width: auto; }

/* The shared container. .section-inner comes from mainStyle.css, so the
   spacing is set here rather than there. */
.conference-page .section-inner {
    max-width: 1320px;
    margin: 0 auto;
    padding: 0 6vw;
}

/* The sections used to carry margin: 30px, which inset them on ALL SIDES,
   the left included — that is where the mismatch with the width of the top bar
   came from. It is vertical padding now, and the horizontal inset is the same
   for every section. */
.about-section,
.goals-section,
.themes-section,
.structure-section,
.committees-section,
.partners-section,
.deliverables-section {
    margin: 0;
    padding: 0;
}

.about-section { padding: 44px 0 66px; }
.goals-section { padding: 0 0 84px; }
.themes-section { padding: 0 0 84px; }
.structure-section { padding: 0 0 84px; }
.deliverables-section { padding: 0 0 84px; }
.partners-section { padding: 0 0 84px; }
.committees-section { padding: 0 0 96px; }

/* ── The banner ──────────────────────────────────────────── */
.hero.conference-hero {
    position: relative;
    display: block;
    min-height: 0;
    height: auto;
    padding: 0;
    background: none;
    overflow: hidden;
}

.cf-banner-img {
    display: block;
    width: 100%;
    max-height: 460px;
    object-fit: cover;
    object-position: 50% 42%;
    /* In colour and bright, as on Schedule, Lecturers and ICBI. */
    filter: contrast(1.06) saturate(1.02);
}

/* .hero-overlay is in the markup and carries the fade down into the
   background. */
.conference-hero .hero-overlay {
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(180deg, color-mix(in srgb, var(--bg) 40%, transparent) 0%, rgba(5, 5, 5, 0) 20%, rgba(5, 5, 5, 0) 58%, color-mix(in srgb, var(--bg) 96%, transparent) 100%);
}

.conference-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background: repeating-linear-gradient(0deg, rgba(var(--ink), 0.03) 0px, rgba(var(--ink), 0.03) 1px, transparent 1px, transparent 4px);
}

/* --- The pattern: an axonometric grid ---
   Three directions at 60°, the way an isometric projection is set out:
   verticals plus two slopes. Where they cross they form rhombuses rather than
   squares, which is what distinguishes it from the grid on the FAQ page and
   from the single 45° hatch on Lecturers. */
.cf-banner-iso {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    mix-blend-mode: var(--blend-soft, soft-light);
    background:
        repeating-linear-gradient(60deg, rgba(var(--ink), 0.085) 0px, rgba(var(--ink), 0.085) 1px, transparent 1px, transparent 34px),
        repeating-linear-gradient(-60deg, rgba(var(--ink), 0.085) 0px, rgba(var(--ink), 0.085) 1px, transparent 1px, transparent 34px),
        repeating-linear-gradient(90deg, rgba(var(--ink), 0.06) 0px, rgba(var(--ink), 0.06) 1px, transparent 1px, transparent 59px);
}

.cf-banner-tint {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    mix-blend-mode: var(--blend-tint, overlay);
    background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 7%, transparent) 0%, rgba(255, 54, 54, 0) 30%);
}

.cf-frame {
    position: absolute;
    inset: 16px;
    z-index: 1;
    border: 1px solid rgba(var(--ink), 0.16);
    pointer-events: none;
}

.cf-frame span { position: absolute; background: var(--accent, #ff3636); }
.cf-frame .c-tl-h { top: -1px; left: -1px; width: 26px; height: 2px; }
.cf-frame .c-tl-v { top: -1px; left: -1px; width: 2px; height: 26px; }
.cf-frame .c-br-h { bottom: -1px; right: -1px; width: 26px; height: 2px; }
.cf-frame .c-br-v { bottom: -1px; right: -1px; width: 2px; height: 26px; }

/* The arrow keeps its class name but is a small technical caption at the
   bottom left. Every value from the older stylesheet is reset explicitly: the
   bounce animation and the translateX centring came from there. */
.scroll-down-arrow {
    position: absolute;
    left: 6vw;
    bottom: 34px;
    z-index: 3;
    display: inline-flex;
    align-items: center;
    gap: 12px;
    width: auto;
    height: auto;
    padding: 12px 0;
    transform: none;
    animation: none;
    color: var(--text, #f4f2ec);
    text-decoration: none;
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    transition: color 0.3s ease, opacity 0.3s ease;
}

.scroll-down-arrow span { position: relative; padding-bottom: 4px; }

.scroll-down-arrow span::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 1px;
    background: var(--accent, #ff3636);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.34s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.scroll-down-arrow:hover { color: rgb(var(--ink)); transform: none; }
.scroll-down-arrow:hover span::after { transform: scaleX(1); }
.scroll-down-arrow.is-hidden { opacity: 0; pointer-events: none; }

.scroll-down-arrow svg {
    width: 15px;
    height: 15px;
    flex: none;
    stroke: var(--accent, #ff3636);
    animation: cfNudge 2.6s ease-in-out infinite;
}

@keyframes cfNudge {
    0%, 62%, 100% { transform: translateY(0); }
    76%           { transform: translateY(6px); }
    88%           { transform: translateY(2px); }
}

/* ── The top line of the page ────────────────────────────── */
.cf-topline {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 14px;
    margin-bottom: 40px;
    padding-bottom: 10px;
    border-bottom: 1px solid rgba(var(--ink), 0.14);
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.2em;
    text-transform: uppercase;
}

.cf-wordmark {
    background: linear-gradient(100deg, var(--muted) 0%, var(--text) 42%, rgb(var(--ink)) 50%, var(--text) 58%, var(--muted) 100%) 0 0 / 300% 100% no-repeat;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    animation: cfShimmer 14s ease-in-out infinite;
}

.cf-topline b {
    flex: none;
    font-weight: 500;
    letter-spacing: 0.18em;
    color: var(--accent, #ff3636);
    text-shadow: 0 0 14px color-mix(in srgb, var(--accent) 55%, transparent);
}

@keyframes cfShimmer {
    0%, 100% { background-position: 0% 0; }
    50%      { background-position: 100% 0; }
}

/* ── Headings ────────────────────────────────────────────── */
.conference-page .section-label {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0 0 12px;
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--accent, #ff3636);
}

.conference-page .section-label::before {
    content: "";
    width: 6px;
    height: 6px;
    flex: none;
    background: var(--accent, #ff3636);
}

.conference-page h2 {
    margin: 0;
    max-width: 24ch;
    font-weight: 600;
    font-size: clamp(28px, 3.4vw, 44px);
    line-height: 1.08;
    letter-spacing: 0.005em;
    text-transform: uppercase;
    text-wrap: balance;
}

.cf-rule { display: block; width: 56px; height: 2px; margin-top: 20px; background: var(--accent, #ff3636); }
.cf-sec-head { margin-bottom: 34px; }

/* ── About the conference ────────────────────────────────
   Two columns: the heading and the stamp on the left, the text on the right.
   A centred 800px column in the middle of an empty screen was the weakest
   point of the page.

   .about-text keeps its class name. */
.cf-about-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 56px;
    align-items: start;
}

.about-text {
    max-width: none;
    color: var(--muted, #a7a39b);
    font-size: 15px;
    line-height: 1.72;
}

.about-text p { margin: 0 0 18px; text-wrap: pretty; }
.about-text p:last-child { margin-bottom: 0; }

/* The stamp with the dates: the technical caption from the corner of a
   drawing sheet. */
.cf-stamp {
    display: inline-flex;
    flex-direction: column;
    gap: 6px;
    margin-top: 28px;
    padding: 14px 18px;
    border: 1px solid var(--line, rgba(var(--ink), 0.08));
}

.cf-stamp b {
    font-size: 10px;
    font-weight: 500;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--text-dim);
}

.cf-stamp span {
    font-size: 15px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--text, #f4f2ec);
}

/* ── The shared grid of cells ────────────────────────────
   The hairlines are drawn from the edges of the cells rather than from gaps,
   so that the structure reads as a drawing. A subgrid aligns the rows inside
   the cells.

   .grid-2-col, .grid-3-col and .grid-4-col keep their names but carry
   different content in different sections, which is why the specific rules are
   scoped per section. */
.conference-page .grid-2-col,
.conference-page .grid-3-col,
.conference-page .grid-4-col {
    display: grid;
    gap: 0;
    width: 100%;
    border-top: 1px solid rgba(var(--ink), 0.14);
    border-left: 1px solid var(--line, rgba(var(--ink), 0.08));
}

.conference-page .grid-2-col { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.conference-page .grid-3-col { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.conference-page .grid-4-col { grid-template-columns: repeat(4, minmax(0, 1fr)); }

/* Common to the cells: no background, no radius, no shadow, no lift. */
.feature-card,
.theme-card,
.deliverable-item {
    position: relative;
    padding: 26px 24px 30px;
    background: transparent;
    border: 0;
    border-right: 1px solid var(--line, rgba(var(--ink), 0.08));
    border-bottom: 1px solid var(--line, rgba(var(--ink), 0.08));
    border-radius: 0;
    box-shadow: none;
    text-align: left;
    transition: background 0.32s ease;
}

.feature-card:hover,
.theme-card:hover {
    transform: none;
    background: rgba(var(--ink), 0.014);
    box-shadow: none;
}

/* The accent rule along the top edge on hover — the same gesture as
   .fq-item, .at-row, .timeline-item, .speaker-card and .pillar-card. */
.feature-card::after,
.theme-card::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: -1px;
    height: 2px;
    background: var(--accent, #ff3636);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.42s cubic-bezier(0.2, 0.8, 0.2, 1);
    pointer-events: none;
}

.feature-card:hover::after,
.theme-card:hover::after { transform: scaleX(1); }

/* The icons are PNGs from elsewhere in the project. The old filter produced a
   dark maroon; this one produces #ff3636 — the same as in attendStyle.css and
   icbiStyle.css. */
.icon-box {
    width: 30px;
    height: 30px;
    flex: none;
    margin: 0 0 20px;
    transition: none;
}

.icon-box img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    filter: brightness(0) saturate(100%) invert(38%) sepia(72%) saturate(4600%) hue-rotate(343deg) brightness(103%) contrast(103%);
    transition: transform 0.35s cubic-bezier(0.2, 0.8, 0.2, 1);
}

/* The icon no longer spins on hover: that spin was the one playful gesture in
   the whole design. */
.feature-card:hover .icon-box,
.theme-card:hover .icon-box { transform: none; }
.feature-card:hover .icon-box img,
.theme-card:hover .icon-box img { transform: scale(1.08); }

.feature-card h4 {
    margin: 0 0 14px;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--line, rgba(var(--ink), 0.08));
    font-weight: 500;
    font-size: 19px;
    line-height: 1.24;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: var(--text, #f4f2ec);
}

.feature-card p {
    margin: 0;
    font-size: 14px;
    line-height: 1.64;
    color: var(--muted, #a7a39b);
    text-wrap: pretty;
}

/* ── Goals ───────────────────────────────────────────────
   Numbered cells: "four goals" without numbers is just four cards. A subgrid
   aligns the heading and the description row by row. */
.goals-section .feature-card {
    display: grid;
    grid-template-rows: subgrid;
    grid-row: span 3;
    align-content: start;
}

.cf-cell-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 22px;
}

.cf-cell-head .icon-box { margin: 0; }

.cf-num {
    font-size: 30px;
    font-weight: 500;
    line-height: 1;
    letter-spacing: 0.02em;
    color: var(--accent, #ff3636);
    font-variant-numeric: tabular-nums;
}

/* ── Themes ──────────────────────────────────────────────
   The themes are headings with an icon and nothing else — a tight band of four
   cells, shorter than the other grids. The icon sits beside the text rather
   than above it: a centred column with a 30px icon and two lines of text left
   more empty space than content. */
.cf-themes .theme-card {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 22px 22px;
    text-align: left;
}

.cf-themes .theme-card .icon-box { margin: 0; width: 26px; height: 26px; }

.cf-themes .theme-card h4 {
    margin: 0;
    font-weight: 500;
    font-size: 15px;
    line-height: 1.3;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--text, #f4f2ec);
    text-wrap: pretty;
}

/* ── The structure, by day ───────────────────────────────
   Each day is a column with a large number and a hairline list. The list
   arrives as ready HTML from resx, so it is styled through ul and li rather
   than through a class of its own. */
.structure-section .feature-card { padding: 0 24px 30px; border-bottom: 0; }
.structure-section .grid-3-col { border-bottom: 1px solid var(--line, rgba(var(--ink), 0.08)); }

.day-label {
    display: block;
    margin: 0 0 4px !important;
    padding-top: 26px;
    font-size: 10px !important;
    font-weight: 500;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--text-dim) !important;
}

.structure-section .feature-card h4 {
    margin: 0 0 18px;
    padding-bottom: 18px;
    font-size: 20px;
}

.structure-section .feature-card ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

.structure-section .feature-card li {
    position: relative;
    padding: 12px 0 12px 20px;
    border-bottom: 1px solid var(--line, rgba(var(--ink), 0.08));
    font-size: 14px;
    line-height: 1.56;
    color: var(--muted, #a7a39b);
    text-wrap: pretty;
}

.structure-section .feature-card li:last-child { border-bottom: 0; }

/* A dash instead of a bullet: the dot would be the only round shape left in
   the design. */
.structure-section .feature-card li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 21px;
    width: 10px;
    height: 1px;
    background: var(--accent, #ff3636);
}

.structure-section .feature-card p:not(.day-label) {
    margin: 0 0 12px;
    font-size: 14px;
    line-height: 1.6;
    color: var(--muted, #a7a39b);
}

/* ── Outcomes (the light plate) ──────────────────────────
   .light-section keeps its class name but is no longer a band: the plate is an
   object with a frame, corner marks and space around it — see the file header
   for why that matters to the background behind the page. */
.deliverables-section.light-section {
    background-color: transparent;
    color: inherit;
    padding: 0 0 84px;
    margin: 0;
}

.cf-plate {
    position: relative;
    padding: 40px;
    background: var(--text);
    color: var(--surface-alt);
    border: 1px solid color-mix(in srgb, var(--surface-alt) 16%, transparent);
}

.cf-plate i.corner {
    position: absolute;
    z-index: 2;
    width: 16px;
    height: 16px;
    pointer-events: none;
}

.cf-plate i.tl { top: -1px; left: -1px; border-top: 2px solid var(--accent, #ff3636); border-left: 2px solid var(--accent, #ff3636); }
.cf-plate i.tr { top: -1px; right: -1px; border-top: 2px solid var(--accent, #ff3636); border-right: 2px solid var(--accent, #ff3636); }
.cf-plate i.bl { bottom: -1px; left: -1px; border-bottom: 2px solid var(--accent, #ff3636); border-left: 2px solid var(--accent, #ff3636); }
.cf-plate i.br { bottom: -1px; right: -1px; border-bottom: 2px solid var(--accent, #ff3636); border-right: 2px solid var(--accent, #ff3636); }

/* On a light plate #ff3636 falls below 3:1 for small text, so the labels here
   use a deeper step, as icbiStyle.css does. */
.light-section .section-label { color: var(--danger); }
.light-section .section-label::before { background: var(--danger); }
.light-section h2 { color: var(--surface-alt); font-size: clamp(26px, 2.6vw, 34px); }
.light-section .cf-rule { background: var(--danger); }
.light-section .cf-sec-head { max-width: 30ch; }

/* The outcomes are rows on the plate rather than four small cards: on a light
   background, four 200px columns leave three words per line. */
.light-section .grid-4-col {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    border-top: 1px solid color-mix(in srgb, var(--surface-alt) 22%, transparent);
    border-left: 0;
}

.deliverable-item {
    display: grid;
    grid-template-columns: 48px minmax(0, 1fr);
    align-items: start;
    gap: 18px;
    padding: 22px 24px 24px 0;
    background: transparent;
    border-right: 0;
    border-bottom: 1px solid color-mix(in srgb, var(--surface-alt) 14%, transparent);
}

.deliverable-item:nth-child(odd) { border-right: 1px solid color-mix(in srgb, var(--surface-alt) 14%, transparent); padding-right: 32px; }
.deliverable-item:nth-child(even) { padding-left: 32px; }

.deliverable-item:hover { transform: none; background: transparent; box-shadow: none; }

.deliverable-item .item-number {
    display: block;
    margin: 0;
    font-size: 26px;
    font-weight: 500;
    line-height: 1;
    letter-spacing: 0.02em;
    color: var(--danger);
    opacity: 1;
    font-variant-numeric: tabular-nums;
}

.deliverable-item h4 {
    margin: 0 0 8px;
    font-weight: 500;
    font-size: 17px;
    line-height: 1.26;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: var(--surface-alt);
}

.deliverable-item p {
    margin: 0;
    font-size: 14px;
    line-height: 1.62;
    color: #43474c;
    text-wrap: pretty;
}

/* ── The downloadable documents ──────────────────────────
   Rows rather than cards: these are actions, not content. The shape is the
   same as the PDF buttons on Schedule — label, name, arrow. */
.cf-docs {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
    border-top: 1px solid rgba(var(--ink), 0.14);
}

.cf-doc {
    position: relative;
    display: grid;
    grid-template-columns: 30px minmax(0, 1fr) auto;
    align-items: center;
    gap: 20px;
    padding: 22px 0;
    border-bottom: 1px solid var(--line, rgba(var(--ink), 0.08));
    text-decoration: none;
    color: inherit;
    transition: background 0.28s ease;
}

.cf-doc:hover { background: rgba(var(--ink), 0.014); text-decoration: none; }

.cf-doc::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: -1px;
    height: 2px;
    background: var(--accent, #ff3636);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.42s cubic-bezier(0.2, 0.8, 0.2, 1);
    pointer-events: none;
}

.cf-doc:hover::after { transform: scaleX(1); }

.cf-doc .icon-box { width: 24px; height: 24px; margin: 0; }

.cf-doc-body { min-width: 0; }

.cf-doc-body h4 {
    margin: 0 0 5px;
    font-weight: 500;
    font-size: 17px;
    line-height: 1.26;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: var(--text, #f4f2ec);
}

/* The h5 comes from the markup: it is the description of the document. */
.cf-doc-body h5 {
    margin: 0;
    font-weight: 300;
    font-size: 13px;
    line-height: 1.56;
    letter-spacing: 0.02em;
    color: var(--muted, #a7a39b);
    text-transform: none;
}

.cf-doc-get {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: none;
    min-height: 44px;
    padding: 0 16px;
    border: 1px solid color-mix(in srgb, var(--accent) 55%, transparent);
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--text, #f4f2ec);
    transition: background 0.22s ease, border-color 0.22s ease, color 0.22s ease;
}

.cf-doc-get svg { width: 15px; height: 15px; flex: none; stroke: var(--accent, #ff3636); transition: stroke 0.22s ease, transform 0.28s cubic-bezier(0.2, 0.8, 0.2, 1); }

.cf-doc:hover .cf-doc-get,
.cf-doc:focus-visible .cf-doc-get {
    background: rgb(var(--ink));
    border-color: rgb(var(--ink));
    color: var(--bg);
}

.cf-doc:hover .cf-doc-get svg { transform: translateY(3px); }

/* ── Partners ────────────────────────────────────────────
   The three columns are kept — that is the information structure — but the
   tiles are square hairline objects rather than rounded panels with a
   background, and the round badge with an arrow has become a corner mark.

   .partners-3col, .partners-col, .partners-col-heading, .partner-tile,
   .partner-tile-logo, .partner-tile-name and .partner-tile-arrow keep their
   names. */
.partners-3col {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    width: 100%;
    border: 0;
    border-top: 1px solid rgba(var(--ink), 0.14);
    border-left: 1px solid var(--line, rgba(var(--ink), 0.08));
    border-radius: 0;
    overflow: visible;
}

.partners-col {
    padding: 26px 24px 30px;
    border-right: 1px solid var(--line, rgba(var(--ink), 0.08));
    border-bottom: 1px solid var(--line, rgba(var(--ink), 0.08));
}

.partners-col:last-child { border-right: 1px solid var(--line, rgba(var(--ink), 0.08)); }

.partners-col-heading {
    font-family: "Oswald", Arial, sans-serif;
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--accent, #ff3636);
    margin: 0 0 20px;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--line, rgba(var(--ink), 0.08));
}

.partner-tile {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
    width: 100%;
    min-height: 0;
    margin-bottom: 14px;
    padding: 16px;
    background: transparent;
    border: 1px solid var(--line, rgba(var(--ink), 0.08));
    border-radius: 0;
    text-decoration: none;
    overflow: hidden;
    cursor: default;
}

.partner-tile:last-child { margin-bottom: 0; }

.partner-tile.clickable {
    cursor: pointer;
    transition: background 0.25s ease, border-color 0.25s ease;
}

/* The rule along the bottom stays, without a radius and without lifting the
   tile. */
.partner-tile.clickable::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: var(--accent, #ff3636);
    border-radius: 0;
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform 0.36s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.partner-tile.clickable:hover {
    background: rgba(var(--ink), 0.02);
    border-color: color-mix(in srgb, var(--accent) 35%, transparent);
    transform: none;
}

.partner-tile.clickable:hover::after { transform: scaleX(1); }

/* A corner mark instead of a round badge: a circle is foreign to this
   design. */
.partner-tile-arrow {
    position: absolute;
    top: 0;
    right: 0;
    width: 26px;
    height: 26px;
    border-radius: 0;
    background: transparent;
    border: 0;
    border-top: 2px solid var(--accent, #ff3636);
    border-right: 2px solid var(--accent, #ff3636);
    display: flex;
    align-items: flex-start;
    justify-content: flex-end;
    padding: 5px 5px 0 0;
    color: var(--accent, #ff3636);
    opacity: 0;
    transition: opacity 0.22s ease;
}

.partner-tile-arrow svg {
    width: 11px;
    height: 11px;
    stroke: var(--accent, #ff3636);
    stroke-width: 2;
    display: block;
    flex-shrink: 0;
}

.partner-tile.clickable:hover .partner-tile-arrow,
.partner-tile.clickable:focus-visible .partner-tile-arrow { opacity: 1; }

/* The logos are framed figures rather than images floating free. They are
   desaturated and darkened so that they do not fight one another; the colour
   returns on hover. */
.partner-tile-logo {
    width: 100%;
    height: 74px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10px;
    background: rgba(var(--ink), 0.025);
    border: 1px solid var(--line, rgba(var(--ink), 0.08));
}

.partner-tile-logo img {
    max-width: 88%;
    max-height: 54px;
    object-fit: contain;
    filter: grayscale(1) brightness(0.9);
    transition: filter 0.28s ease;
}

.partner-tile.clickable:hover .partner-tile-logo img { filter: grayscale(0) brightness(1.05); }

.partner-tile-name {
    font-family: "Oswald", Arial, sans-serif;
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    text-align: left;
    line-height: 1.5;
    color: var(--text-dim);
    transition: color 0.25s ease;
}

.partner-tile.clickable:hover .partner-tile-name { color: var(--text, #f4f2ec); }

/* ── Committees ──────────────────────────────────────────
   Three columns of compact rows. The people here are a list of names rather
   than profiles, so a row is a small portrait plus three lines of text, with
   no shadowed box around each of them.

   .committee-column, .person-list, .person-card, .avatar and .person-info keep
   their names. */
.committees-section .grid-3-col { border-left: 1px solid var(--line, rgba(var(--ink), 0.08)); }

.committee-column {
    padding: 26px 24px 30px;
    border-right: 1px solid var(--line, rgba(var(--ink), 0.08));
    border-bottom: 1px solid var(--line, rgba(var(--ink), 0.08));
}

.cf-col-head {
    margin: 0 0 20px;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--line, rgba(var(--ink), 0.08));
    font-family: "Oswald", Arial, sans-serif;
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--accent, #ff3636);
}

.person-list { display: flex; flex-direction: column; }

.person-card {
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr);
    align-items: start;
    gap: 16px;
    margin: 0;
    padding: 16px 0;
    background: transparent;
    border: 0;
    border-bottom: 1px solid var(--line, rgba(var(--ink), 0.08));
    border-radius: 0;
    box-shadow: none;
    transition: none;
}

.person-card:last-child { border-bottom: 0; }
.person-card:hover { transform: none; background: transparent; box-shadow: none; }

/* The portrait is SQUARE and framed in hairlines, as on Lecturers: a circle
   would be the only rounded shape in the whole design. */
.avatar {
    width: 44px;
    height: 44px;
    aspect-ratio: 1 / 1;
    margin: 0;
    background: var(--surface);
    border: 1px solid var(--line, rgba(var(--ink), 0.08));
    border-radius: 0;
    overflow: hidden;
    flex-shrink: 0;
}

.avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: grayscale(1) contrast(1.06);
    transition: filter 0.4s ease;
}

.person-card:hover .avatar img { transform: none; filter: grayscale(0) contrast(1.02); }

.person-info { min-width: 0; }

.person-info h4 {
    margin: 0 0 5px;
    font-weight: 500;
    font-size: 15px;
    line-height: 1.28;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: var(--text, #f4f2ec);
    text-wrap: pretty;
}

.person-info .role {
    margin: 0 0 2px;
    font-size: 12px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--accent, #ff3636);
}

.person-info .org {
    margin: 0;
    font-size: 12px;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--text-dim);
}

@media (prefers-reduced-motion: reduce) {
    .cf-wordmark, .scroll-down-arrow svg { animation: none; }
    .feature-card, .theme-card, .cf-doc, .partner-tile,
    .feature-card::after, .theme-card::after, .cf-doc::after,
    .partner-tile.clickable::after, .icon-box img, .avatar img,
    .cf-doc-get, .cf-doc-get svg { transition: none; }
}

/* ── Tablet ──────────────────────────────────────────────── */
@media (max-width: 1080px) {
    .cf-about-grid { grid-template-columns: minmax(0, 1fr); gap: 30px; }
    .conference-page .grid-4-col { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .conference-page .grid-3-col { grid-template-columns: repeat(2, minmax(0, 1fr)); }

    /* The days STAY three in a row. "Three days" in two columns leaves the
       third one alone on a second row, and the bottom rule then ends halfway
       across a grid whose whole point is that the hairlines are drawn from the
       cell edges. The lists are short and fit in 254px; below 820px everything
       moves to one column anyway. */
    .structure-section .grid-3-col { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .structure-section .feature-card { padding-left: 18px; padding-right: 18px; }
    .structure-section .feature-card h4 { font-size: 18px; }

    /* Two columns, with the third taking the whole second row: otherwise the
       first row is left with an empty third cell next to visible
       hairlines. */
    .partners-3col { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .committees-section .committee-column:nth-child(3),
    .partners-col:nth-child(3) { grid-column: 1 / -1; }

}

@media (max-width: 980px) {
    .cf-banner-img { max-height: 320px; }
}

/* ── Phone ───────────────────────────────────────────────── */
@media (max-width: 820px) {
    .conference-page .section-inner { padding-left: 22px; padding-right: 22px; }
    .scroll-down-arrow { left: 22px; bottom: 22px; }
    .cf-banner-img { max-height: 230px; }
    .cf-frame { inset: 10px; }

    .about-section { padding: 26px 0 44px; }
    .cf-topline { margin-bottom: 28px; }
    .goals-section, .themes-section, .structure-section,
    .deliverables-section.light-section, .partners-section { padding-bottom: 56px; }
    .committees-section { padding-bottom: 64px; }
    .cf-sec-head { margin-bottom: 26px; }

    /* In one column the subgrid has nothing to align, and the fixed rows only
       fight the natural height. */
    .conference-page .grid-2-col,
    .conference-page .grid-3-col,
    .conference-page .grid-4-col { grid-template-columns: minmax(0, 1fr); border-left: 0; }

    .feature-card, .theme-card {
        grid-template-rows: none;
        grid-row: auto;
        padding-left: 0;
        padding-right: 0;
        border-right: 0;
    }

    .goals-section .feature-card { display: block; }
    .cf-themes .theme-card { display: flex; padding: 18px 0; }
    .structure-section .feature-card { padding: 0 0 26px; }

    .partners-3col { grid-template-columns: minmax(0, 1fr); border-left: 0; }
    .partners-col, .partners-col:last-child { padding: 24px 0 28px; border-right: 0; }
    .partners-col:nth-child(3) { grid-column: auto; }

    .committees-section .grid-3-col { border-left: 0; }
    .committee-column { padding: 24px 0 28px; border-right: 0; }
    .committees-section .committee-column:nth-child(3) { grid-column: auto; }

    /* The plate gives up its inner padding but keeps the frame and the marks:
       at 390px it would otherwise leave about 250px for the text. */
    .cf-plate { padding: 26px 20px 22px; }
    .light-section .cf-sec-head { max-width: none; }
    .light-section .grid-4-col { grid-template-columns: minmax(0, 1fr); }

    .deliverable-item,
    .deliverable-item:nth-child(odd),
    .deliverable-item:nth-child(even) {
        padding: 18px 0;
        border-right: 0;
    }

    .deliverable-item:last-child { border-bottom: 0; }

    /* The action moves below the name: three columns at 390px leave about
       120px for the title of the document. */
    .cf-doc { grid-template-columns: 24px minmax(0, 1fr); gap: 8px 16px; }
    .cf-doc .icon-box { grid-row: 1; }
    .cf-doc-body { grid-column: 2; }
    .cf-doc-get { grid-column: 2; justify-content: center; margin-top: 8px; }
}