/* BEACON 2026 — programme pages (/agenda and /charityforum).

   Standalone: these pages do NOT load the Webflow sheet or beacon-2026.css, so
   nothing here can leak into the home page or the archives, and nothing there
   can reach in. Same palette and type as the home page: white ground, Rubik,
   DM Mono for clock times, the wordmark red. The red used for TEXT is #db0301
   (5.2:1 on white, passes AA) rather than the home page's #f5333f, which only
   clears the large-text rule. */

:root {
  --ink: #000;
  --ink-2: #4a4a4a;
  --ink-3: #6b6b6b;
  --red: #db0301;
  --red-tint: #fdf1f1;
  --grey-tint: #f4f4f4;
  --rule: #e6e6e6;
  --page: #fff;
  --gutter: clamp(16px, 4vw, 48px);
  --max: 1200px;
  --radius: 12px;
}

* { box-sizing: border-box; }

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

body {
  margin: 0;
  background: var(--page);
  color: var(--ink);
  font-family: Rubik, system-ui, sans-serif;
  font-size: 16px;
  line-height: 1.45;
}

img { max-width: 100%; height: auto; }

a { color: inherit; }

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  left: 8px; top: -60px;
  padding: 10px 16px;
  background: var(--ink);
  color: #fff;
  border-radius: 8px;
  z-index: 10;
}
.skip-link:focus { top: 8px; }

:focus-visible { outline: 2px solid var(--red); outline-offset: 3px; }

.pg-shell {
  width: 100%;
  max-width: calc(var(--max) + 2 * var(--gutter));
  margin: 0 auto;
  padding: 0 var(--gutter);
}

/* ---------------------------------------------------------------- top bar */

.pg-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding-top: 20px;
  font-size: 14px;
}

.pg-back {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
  font-weight: 500;
}
.pg-back:hover { color: var(--red); }

.pg-topnav { display: flex; gap: 20px; }
.pg-topnav a { text-decoration: none; color: var(--ink-2); }
.pg-topnav a:hover { color: var(--red); }
.pg-topnav a[aria-current="page"] { color: var(--ink); font-weight: 500; }

/* ----------------------------------------------------------------- header */

.pg-header {
  padding: clamp(32px, 6vw, 72px) 0 clamp(28px, 4vw, 48px);
  text-align: center;
}

.pg-lockup {
  display: block;
  width: min(100%, 480px);
  height: auto;
  margin: 0 auto;
}

/* Three logos in a row, divided by hairlines. Heights are set per logo, not
   shared: the aspect ratios run 2.8 (BEACON) to 5.6 (DCC), so one height made
   DCC twice as wide as the event's own mark. */
.pg-logos {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: clamp(20px, 3vw, 40px);
}
.pg-logos img { display: block; width: auto; max-width: 100%; }
.pg-logo-beacon { height: clamp(96px, 11vw, 140px); }
.pg-logo-bettersg { height: clamp(30px, 3.2vw, 40px); }
.pg-logo-dcc { height: clamp(32px, 3.4vw, 44px); }
.pg-logo-rule {
  width: 1px;
  align-self: stretch;
  min-height: 48px;
  background: var(--rule);
}
.pg-logo-partners {
  display: flex;
  align-items: center;
  gap: clamp(20px, 3vw, 40px);
}

.pg-eyebrow {
  margin: clamp(28px, 4vw, 44px) 0 10px;
  font-family: "DM Mono", ui-monospace, monospace;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--red);
}

.pg-heading {
  margin: 0;
  font-size: clamp(30px, 4.4vw, 48px);
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -.01em;
}

.pg-sub {
  margin: 14px auto 0;
  max-width: 40em;
  font-size: clamp(16px, 1.6vw, 20px);
  color: var(--ink-2);
}

.pg-meta {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px 12px;
  margin: 22px 0 0;
  padding: 0;
  list-style: none;
}
.pg-meta li {
  padding: 8px 16px;
  border: 1px solid var(--rule);
  border-radius: 99px;
  font-size: 14px;
  font-weight: 500;
}

/* "Sponsored by" + a sponsor's logo, under the meta pills. The logo's HEIGHT
   is the definite dimension so its box is reserved before the file loads. */
.pg-sponsor {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  margin: 24px 0 0;
}
.pg-sponsor-label {
  font-family: "DM Mono", ui-monospace, monospace;
  font-size: 14px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.pg-sponsor-logo { display: block; height: 26px; width: auto; }

.pg-cta {
  display: inline-block;
  margin-top: 26px;
  padding: 14px 28px;
  background: var(--red);
  color: #fff;
  border-radius: 99px;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: .04em;
  text-decoration: none;
  transition: background-color .18s ease;
}
.pg-cta:hover { background: #a80200; }

/* ------------------------------------------------------- room markers */

/* The three mark kinds of the hero decoration, one per room. */
.pg-mark {
  display: inline-block;
  flex: none;
  width: 12px; height: 12px;
  border-radius: 50%;
}
.pg-mark--red { background: var(--red); }
.pg-mark--black { background: var(--ink); }
.pg-mark--ring { border: 2.5px solid var(--red); }

/* -------------------------------------------------- the programme grid */

.pg-main { padding-bottom: clamp(48px, 7vw, 96px); }

.pg-table-wrap { display: none; }

.pg-table {
  table-layout: fixed;
  border-collapse: separate;
  border-spacing: 6px;
  margin: 0 -6px;
  width: calc(100% + 12px);
}

.pg-col-time { width: 84px; }

.pg-table thead th,
.pg-corner {
  position: sticky;
  top: 0;
  z-index: 1;
  background: var(--page);
}

.pg-room {
  padding: 14px 16px 12px;
  border-bottom: 2px solid var(--ink);
  font-size: 18px;
  font-weight: 600;
  text-align: left;
  white-space: nowrap;
}
.pg-room .pg-mark { margin-right: 10px; vertical-align: 1px; }

.pg-row-time {
  padding: 12px 8px 0 0;
  vertical-align: top;
  text-align: right;
  font-family: "DM Mono", ui-monospace, monospace;
  font-size: 14px;
  font-weight: 400;
  color: var(--ink-3);
  white-space: nowrap;
}

.pg-cell {
  padding: 12px 14px 14px;
  vertical-align: top;
  border-radius: var(--radius);
}

.pg-cell > span,
.pg-item-body > span { display: block; }

.pg-time,
.pg-item-time {
  font-family: "DM Mono", ui-monospace, monospace;
  font-size: 14px;
  color: var(--ink-3);
}

.pg-title {
  margin-top: 2px;
  font-size: 16px;
  font-weight: 500;
  line-height: 1.3;
}

.pg-who {
  margin-top: 4px;
  font-size: 14px;
  color: var(--ink-2);
}

/* Sessions: a tint per room and a bar in the room's colour. */
.pg-session { background: var(--grey-tint); box-shadow: inset 3px 0 0 var(--ink); }
.pg-session.pg-in--main { background: var(--red-tint); box-shadow: inset 3px 0 0 var(--red); }
.pg-session.pg-in--charity { background: var(--page); box-shadow: inset 0 0 0 1.5px var(--red); }

/* Breaks: a field of small dots, the site's own motif, instead of a tint. */
.pg-break {
  background-color: var(--page);
  background-image: radial-gradient(circle, #d0d0d0 1.2px, transparent 1.6px);
  background-size: 12px 12px;
  text-align: center;
  vertical-align: middle;
}
.pg-cell.pg-break .pg-title,
.pg-cell.pg-break .pg-time {
  display: inline-block;
  padding: 0 8px;
  background: var(--page);
}
.pg-cell.pg-break .pg-title { margin: 0 4px; font-weight: 500; }

.pg-note {
  border: 1.5px dashed var(--rule);
  text-align: center;
  vertical-align: middle;
}
.pg-note .pg-title { font-weight: 400; color: var(--ink-3); font-size: 14px; }

.pg-empty { border: 0; }

/* ----------------------------------------------- the per-room lists (phone) */

.pg-lists {
  display: grid;
  gap: 40px;
}

.pg-list-title {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 10px;
  padding-bottom: 10px;
  border-bottom: 2px solid var(--ink);
  font-size: 20px;
  font-weight: 600;
}

.pg-items { margin: 0; padding: 0; list-style: none; display: grid; gap: 6px; }

.pg-item {
  display: grid;
  grid-template-columns: 112px 1fr;
  gap: 12px;
  padding: 12px 14px;
  border-radius: var(--radius);
}
.pg-item.pg-break { text-align: left; }
.pg-item.pg-break .pg-title { font-weight: 500; }
.pg-item.pg-note .pg-item-time { color: var(--ink-3); }

@media (min-width: 860px) {
  .pg-table-wrap { display: block; }
  .pg-lists { display: none; }
}

@media (max-width: 400px) {
  .pg-item { grid-template-columns: 1fr; gap: 2px; }
}

/* ------------------------------------------- Charity Forum, one room */

.cf-table {
  width: 100%;
  border-collapse: collapse;
}
.cf-table thead th {
  padding: 0 16px 12px;
  border-bottom: 2px solid var(--ink);
  font-family: "DM Mono", ui-monospace, monospace;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: .1em;
  text-transform: uppercase;
  text-align: left;
  color: var(--ink-3);
}
.cf-table tbody tr { border-bottom: 1px solid var(--rule); }
.cf-table td,
.cf-table tbody th {
  padding: 24px 16px;
  vertical-align: top;
  text-align: left;
}

.cf-time {
  width: 170px;
  font-family: "DM Mono", ui-monospace, monospace;
  font-size: 16px;
  font-weight: 500;
  color: var(--red);
  white-space: nowrap;
}

.cf-talk + .cf-talk { margin-top: 22px; padding-top: 22px; border-top: 1px dashed var(--rule); }

.cf-title {
  margin: 0 0 12px;
  font-size: clamp(17px, 1.6vw, 20px);
  font-weight: 500;
  line-height: 1.3;
}

.cf-speakers {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 28px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.cf-speaker {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

.cf-photo {
  flex: none;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  object-fit: cover;
  background: var(--grey-tint);
}

/* A speaker with no photo yet gets their initials in the same circle. */
.cf-initials {
  display: grid;
  place-items: center;
  border: 1.5px solid var(--red);
  background: var(--page);
  color: var(--red);
  font-weight: 600;
  font-size: 16px;
}

.cf-name { display: block; font-weight: 500; }
.cf-role { display: block; font-size: 14px; color: var(--ink-2); max-width: 26em; }

.cf-break td,
.cf-break th { padding-top: 16px; padding-bottom: 16px; }
.cf-break .cf-time { color: var(--ink-3); }
.cf-break-label {
  display: flex;
  align-items: center;
  gap: 14px;
  font-weight: 500;
  color: var(--ink-2);
}
.cf-break-label::after {
  content: "";
  flex: 1;
  height: 12px;
  background-image: radial-gradient(circle, #d0d0d0 1.2px, transparent 1.6px);
  background-size: 12px 12px;
}

@media (max-width: 720px) {
  .cf-table thead { display: none; }
  .cf-table tr { display: block; padding: 20px 0; }
  .cf-table td,
  .cf-table tbody th { display: block; padding: 0; width: auto; }
  .cf-time { margin-bottom: 8px; font-size: 15px; }
  .cf-break { padding: 14px 0; }
  .cf-logo-rule-desktop { display: none; }
}

/* ----------------------------------------------------------------- footer */

.pg-footer {
  padding: clamp(40px, 5vw, 72px) var(--gutter) clamp(48px, 6vw, 80px);
  border-top: 1px solid var(--rule);
  text-align: center;
}
.pg-footer-logo { display: inline-block; }
.pg-footer-logo img { display: block; height: 40px; width: auto; }
.pg-footer-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px 24px;
  margin: 20px 0 0;
  padding: 0;
  list-style: none;
  font-size: 14px;
}
.pg-footer-links a { color: var(--ink-2); text-decoration: none; }
.pg-footer-links a:hover { color: var(--red); }

@media print {
  .pg-topbar, .pg-cta, .pg-footer, .skip-link { display: none; }
  .pg-table-wrap { display: block; }
  .pg-lists { display: none; }
  .pg-table thead th { position: static; }
}