/* DIRDI Conference page: the site's one night page, ported from the new site (DESIGN.md, "The Conference
   exception"). Everything is scoped to .conf so the theme's own styles neither leak in nor out.
   Type uses the legacy site's faces (Playfair Display, Roboto) so the page sits with the rest of the site.
   The spectrum appears only as light, in the order of the theme: --q1 discovery, --q2 capability,
   --q3 delivery. */
.conf {
  --night: #120D18;
  --night-raised: #1A1422;
  --night-text: #F3EFF5;
  --night-muted: #BDB3C6;
  --night-rule: rgba(255, 255, 255, 0.14);
  --q1: #8EA8DE;
  --q2: #E2B061;
  --q3: #E58A9A;
  --palatinate-deep: #4A1850;
  --on-pal-muted: #DCC9DF;
  --serif: "Playfair Display", Georgia, serif;
  --sans: "Roboto", -apple-system, "Segoe UI", sans-serif;
  --wrap: 72rem;
  --gutter: clamp(1rem, 4vw, 2.5rem);
  --section: clamp(4.5rem, 9vw, 7.5rem);
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --cross: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 17 17'%3E%3Cpath d='M8.5 0v17M0 8.5h17' stroke='%23000' stroke-width='1'/%3E%3C/svg%3E");
  background: var(--night);
  color: var(--night-text);
  font-family: var(--sans);
  font-size: 1.0625rem;
  font-weight: 400;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-align: left;
}

/* Neutralise the theme inside the page */
.conf *, .conf *::before, .conf *::after { box-sizing: border-box; }
.conf h1, .conf h2, .conf h3, .conf p, .conf ul, .conf li, .conf address, .conf figure { margin: 0; padding: 0; }
.conf h1, .conf h2, .conf h3 { color: inherit; text-transform: none; text-wrap: balance; }
.conf p, .conf li { text-wrap: pretty; }
.conf ul { list-style: none; }
.conf a { color: inherit; }
.conf img { display: block; max-width: 100%; height: auto; }
.conf ::selection { background: var(--q1); color: var(--night); }
.conf :focus-visible { outline: 2px solid #fff; outline-offset: 3px; }

.conf .conf-wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: max(var(--gutter), env(safe-area-inset-left, 0px)) max(var(--gutter), env(safe-area-inset-right, 0px)); }
.conf .conf-visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.conf .conf-lede { font-weight: 300; font-size: clamp(1.5rem, 2.7vw, 2.125rem); line-height: 1.3; letter-spacing: -0.005em; max-width: 24em; color: var(--night-text); }
.conf .conf-split { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(2rem, 6vw, 5rem); align-items: start; }

/* Buttons: white on night, as on the new site */
.conf .conf-btn { display: inline-block; padding: .875rem 1.25rem; min-height: 2.75rem; white-space: nowrap; font-family: var(--sans); font-weight: 500; font-size: 1rem; line-height: 1; text-decoration: none; border: 1px solid #fff; background: #fff; color: var(--palatinate-deep); -webkit-user-select: none; user-select: none; transition: background-color .15s var(--ease-out), border-color .15s var(--ease-out), transform .16s var(--ease-out); }
.conf .conf-btn:active { transform: scale(.97); background: var(--on-pal-muted); border-color: var(--on-pal-muted); }
.conf .conf-btn:focus, .conf .conf-btn:visited { color: var(--palatinate-deep); }
@media (hover: hover) and (pointer: fine) { .conf .conf-btn:hover { background: var(--on-pal-muted); border-color: var(--on-pal-muted); color: var(--palatinate-deep); } }

/* Hero: centred, the theme over the date and venue, with the orbital behind */
.conf .conf-hero { position: relative; isolation: isolate; overflow: hidden; padding-block: clamp(5rem, 12vw, 9rem); text-align: center; }
.conf .conf-hero-text { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; }
.conf .conf-orbital { position: absolute; inset: 0; pointer-events: none; z-index: -1; }
.conf .conf-orbital canvas, .conf .conf-orbital-still, .conf .conf-orbital-still svg { display: block; width: 100%; height: 100%; }
.conf .conf-orbital canvas { position: absolute; inset: 0; }
.conf .conf-orbital-still { opacity: .32; }
.conf .conf-orbital.is-ready .conf-orbital-still { visibility: hidden; }
.conf .conf-edition { color: var(--night-muted); font-size: 1rem; letter-spacing: .01em; }
.conf .conf-title { margin-top: 1.25rem; font-family: var(--serif); font-weight: 400; line-height: 1.04; letter-spacing: -0.02em; }
.conf .conf-title-main { display: block; font-size: clamp(2.75rem, 7.6vw, 6.5rem); }
.conf .conf-title-sub { display: block; margin-top: .35em; font-style: italic; color: var(--night-muted); font-size: clamp(1.625rem, 3.8vw, 3.125rem); letter-spacing: -0.01em; }
.conf .conf-when { margin-top: clamp(2.25rem, 4.5vw, 3.25rem); padding-top: clamp(1.25rem, 2.5vw, 1.75rem); border-top: 1px solid var(--night-rule); min-width: min(100%, 22rem); font-size: clamp(1.125rem, 1.8vw, 1.375rem); line-height: 1.4; }
.conf .conf-where { margin-top: .25rem; color: var(--night-muted); font-size: 1.0625rem; max-width: 34em; }
.conf .conf-cta { margin-top: 2.25rem; }

/* The drawing, between the introduction and the keynote: full width, reading in from left to right,
   discovery to delivery, when it first comes into view. */
.conf .conf-art { border-top: 1px solid var(--night-rule); }
.conf .conf-art-frame { position: relative; overflow: hidden; height: clamp(15rem, 36vw, 35rem); }
.conf .conf-art-svg { display: block; width: 100%; height: 100%; }
.conf.conf-js .conf-art-frame::after { content: ""; position: absolute; inset: 0 -16rem; background: linear-gradient(90deg, transparent, var(--night) 16rem); pointer-events: none; }
.conf.conf-js .conf-art-frame.is-seen::after { animation: conf-wipe 2.8s cubic-bezier(.55, 0, .25, 1) both; }
@keyframes conf-wipe { from { transform: translateX(0); } to { transform: translateX(100%); } }

/* Sections on the night ground */
.conf .conf-section { padding-block: var(--section); border-top: 1px solid var(--night-rule); }
/* No rule between the hero and the introduction, so the hero's own padding is gap enough */
.conf .conf-intro { border-top: 0; padding-top: clamp(1rem, 3vw, 2.5rem); }
.conf .conf-intro-text { margin-top: 1.5rem; }
.conf .conf-body { color: var(--night-muted); max-width: 36em; }
.conf .conf-body + .conf-body { margin-top: 1.25rem; }
.conf .conf-heading { font-family: var(--serif); font-weight: 400; font-size: clamp(1.75rem, 3.2vw, 2.5rem); line-height: 1.15; letter-spacing: -0.01em; max-width: 22em; margin-bottom: clamp(1.75rem, 3.5vw, 2.5rem); }
.conf .conf-link { color: var(--night-text); text-decoration: underline 1px var(--night-muted); text-underline-offset: .3em; display: inline-flex; align-items: center; min-height: 2.75rem; }
@media (hover: hover) and (pointer: fine) { .conf .conf-link:hover { color: var(--night-text); text-decoration-color: var(--night-text); } }

/* Keynote: who they are on the left, the talk on the right */
.conf .conf-pending { font-family: var(--serif); font-style: italic; font-weight: 400; font-size: clamp(1.375rem, 2.4vw, 1.875rem); line-height: 1.4; color: var(--night-muted); padding: clamp(1.5rem, 3vw, 2.25rem); border: 1px dashed var(--night-rule); }
.conf .conf-pending-small { font-size: 1.125rem; padding: 1rem 1.25rem; margin-top: 1.75rem; }
.conf .conf-speaker { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: clamp(2rem, 6vw, 5rem); align-items: start; }
.conf .conf-speaker-photo { width: min(100%, 15rem); aspect-ratio: 1; object-fit: cover; margin-bottom: 1.5rem; }
.conf .conf-speaker-name { font-family: var(--serif); font-weight: 400; font-size: clamp(1.5rem, 2.7vw, 2rem); line-height: 1.2; }
.conf .conf-speaker-role { margin-top: .5rem; color: var(--night-muted); max-width: 22em; }
.conf .conf-talk { margin-bottom: 1.25rem; font-family: var(--serif); font-weight: 400; font-size: clamp(1.5rem, 2.7vw, 2.125rem); line-height: 1.25; }
.conf .conf-abstract-lead { font-weight: 300; font-size: clamp(1.1875rem, 1.8vw, 1.375rem); line-height: 1.5; max-width: 34em; }
.conf .conf-more { margin-top: 1.5rem; }
.conf .conf-more summary { display: inline-flex; align-items: center; gap: .5rem; min-height: 2.75rem; cursor: pointer; color: var(--night-text); text-decoration: underline 1px var(--night-muted); text-underline-offset: .3em; list-style: none; }
.conf .conf-more summary::-webkit-details-marker { display: none; }
.conf .conf-more summary::after { content: ""; width: .45rem; height: .45rem; border-right: 1px solid currentColor; border-bottom: 1px solid currentColor; transform: translateY(-.15rem) rotate(45deg); transition: transform .2s var(--ease-out); }
.conf .conf-more[open] summary::after { transform: translateY(.1rem) rotate(-135deg); }
.conf .conf-more .conf-body { margin-top: 1rem; }
@media (hover: hover) and (pointer: fine) { .conf .conf-more summary:hover { text-decoration-color: var(--night-text); } }

/* Speakers: ruled, four across */
.conf .conf-speaker-list { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0 clamp(1.5rem, 3vw, 2.5rem); }
.conf .conf-speaker-list li { border-top: 1px solid var(--night-rule); }
.conf .conf-speaker-row { display: flex; flex-direction: column; gap: .4rem; padding-block: 1.25rem; color: inherit; text-decoration: none; }
.conf .conf-speaker-row-name { font-family: var(--serif); font-weight: 400; font-size: 1.3125rem; line-height: 1.25; }
.conf .conf-speaker-row-aff { color: var(--night-muted); font-size: .9375rem; }
/* Speakers' photos: square, smaller than the keynote's */
.conf .conf-speaker-row-photo { width: 8rem; aspect-ratio: 1; object-fit: cover; margin-bottom: .6rem; }
.conf .conf-credits { margin-top: 1.5rem; color: var(--night-muted); font-size: .8125rem; }
.conf .conf-credits a { text-decoration: underline 1px; text-underline-offset: .2em; }
@media (hover: hover) and (pointer: fine) { .conf .conf-credits a:hover { color: var(--night-text); } }
.conf a.conf-speaker-row .conf-speaker-row-name { text-decoration: underline 1px transparent; text-underline-offset: .25em; transition: text-decoration-color .15s var(--ease-out); }
@media (hover: hover) and (pointer: fine) { .conf a.conf-speaker-row:hover { color: inherit; } .conf a.conf-speaker-row:hover .conf-speaker-row-name { text-decoration-color: var(--night-muted); } }

/* Poster competition: the call on the left; the deadline and the form beside it, behind a hairline */
.conf .conf-posters-action { padding-left: clamp(1.5rem, 3vw, 2.25rem); border-left: 1px solid var(--night-rule); }
.conf .conf-posters-label { color: var(--night-muted); font-size: .9375rem; }
.conf .conf-posters-date { margin-top: .35rem; font-family: var(--serif); font-weight: 400; font-size: clamp(1.5rem, 2.7vw, 2rem); line-height: 1.2; font-variant-numeric: lining-nums; }
.conf .conf-posters-action .conf-btn { margin-top: 1.75rem; }
.conf .conf-posters-action .conf-pending-small:first-child { margin-top: 0; }

/* Venue and registration, on the raised tone; the panel has registration marks at its corners */
.conf .conf-register { background: var(--night-raised); }
.conf .conf-venue-name { font-family: var(--serif); font-weight: 400; font-size: clamp(1.75rem, 3.2vw, 2.5rem); line-height: 1.15; letter-spacing: -0.01em; text-wrap: balance; }
.conf .conf-venue-place { margin-top: .5rem; font-size: 1.125rem; }
.conf .conf-venue-address { margin-top: .25rem; font-style: normal; color: var(--night-muted); }
.conf .conf-venue .conf-link { margin-top: 1rem; }
.conf .conf-panel { position: relative; padding: clamp(1.5rem, 3vw, 2.25rem); border: 1px solid var(--night-rule); }
.conf .conf-panel::before {
  content: "";
  position: absolute;
  inset: -9px;
  pointer-events: none;
  background-color: var(--night-muted);
  -webkit-mask: var(--cross) left top / 17px no-repeat, var(--cross) right top / 17px no-repeat, var(--cross) left bottom / 17px no-repeat, var(--cross) right bottom / 17px no-repeat;
          mask: var(--cross) left top / 17px no-repeat, var(--cross) right top / 17px no-repeat, var(--cross) left bottom / 17px no-repeat, var(--cross) right bottom / 17px no-repeat;
}
.conf .conf-panel-title { font-family: var(--serif); font-weight: 400; font-size: clamp(1.5rem, 2.7vw, 2rem); line-height: 1.2; margin-bottom: 1rem; }
.conf .conf-panel .conf-btn { margin-top: 1.75rem; }

/* Past conferences: ruled rows */
.conf .conf-past-list li { border-top: 1px solid var(--night-rule); }
.conf .conf-past-list li:last-child { border-bottom: 1px solid var(--night-rule); }
.conf .conf-past-row { display: grid; grid-template-columns: 8rem minmax(0, 1fr); gap: 1.5rem; align-items: baseline; padding-block: 1.25rem; color: inherit; text-decoration: none; }
/* Playfair's figures are old-style by default; lining figures keep a column of years even */
.conf .conf-past-year { font-family: var(--serif); font-weight: 400; font-size: 2rem; line-height: 1; font-variant-numeric: lining-nums tabular-nums; color: var(--night-muted); transition: color .15s var(--ease-out); }
.conf .conf-past-title { display: block; font-size: 1.125rem; font-weight: 500; }
.conf .conf-past-title em { font-family: var(--serif); font-weight: 400; font-size: 1.1875rem; }
.conf .conf-past-meta { display: block; margin-top: .25rem; color: var(--night-muted); font-size: .9375rem; }
@media (hover: hover) and (pointer: fine) { .conf .conf-past-row:hover { color: inherit; } .conf .conf-past-row:hover .conf-past-year { color: var(--night-text); } }

@media (max-width: 960px) {
  .conf .conf-speaker, .conf .conf-split { grid-template-columns: 1fr; }
  .conf .conf-speaker-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .conf .conf-posters-action { padding: 1.75rem 0 0; border-left: 0; border-top: 1px solid var(--night-rule); }
}
@media (max-width: 680px) {
  .conf .conf-speaker-list { grid-template-columns: 1fr; }
  .conf .conf-speaker-row { display: grid; grid-template-columns: 4.5rem minmax(0, 1fr); column-gap: 1rem; row-gap: .3rem; align-content: center; }
  .conf .conf-speaker-row-photo { grid-row: span 2; width: 4.5rem; margin-bottom: 0; }
  .conf .conf-past-row { grid-template-columns: 1fr; gap: .5rem; }
}
@media (prefers-reduced-motion: reduce) {
  .conf.conf-js .conf-art-frame::after { animation: none; display: none; }
  .conf .conf-past-year, .conf .conf-more summary::after, .conf .conf-speaker-row-name, .conf .conf-btn { transition: none; }
  .conf .conf-btn:active { transform: none; }
}

/* Print: ink on paper, without the drawings or the night ground */
@media print {
  .conf { --night-text: #000; --night-muted: #444; --night-rule: #bbb; background: #fff; color: #000; }
  .conf .conf-orbital, .conf .conf-art, .conf .conf-cta { display: none; }
  .conf .conf-panel .conf-btn, .conf .conf-posters-action .conf-btn { padding: 0; border: 0; background: none; color: #000; white-space: normal; }
  .conf .conf-panel .conf-btn::after, .conf .conf-posters-action .conf-btn::after { content: ": " attr(href); font-weight: 400; }
  .conf .conf-heading, .conf .conf-panel-title { break-after: avoid; }
  .conf .conf-register { background: none; }
  .conf .conf-hero, .conf .conf-section { padding-block: 1.5rem; }
  .conf .conf-speaker-list li, .conf .conf-past-list li, .conf .conf-speaker-id, .conf .conf-venue, .conf .conf-panel, .conf .conf-posters-action { break-inside: avoid; }
}

/* Astra: no gap between the header and the night ground, or between it and the footer */
.dirdi-conf-page #content.site-content, .dirdi-conf-page .site-content > .ast-container { padding: 0; margin: 0; max-width: none; display: block; }