/* ==========================================================================
   Paper Development Workshop on Data Studies – site styles
   Colours and spirit of the host institute (iwi.unisg.ch), set with the
   discipline of anduril.com / palantir.com: one humanist face, scale instead
   of effects, hairline rows instead of cards, colour only as large flat
   fields. Square corners, no shadows, no blur, no gradients.
   Plain CSS without external sources (strict Content-Security-Policy).
   ========================================================================== */

/* ── 1. Tokens ──────────────────────────────────────────────────────────── */
:root {
  --paper: #ffffff;
  --band: #f5f5f5;        /* IWI light grey: bands, breaks */
  --ink: #111111;         /* text and headings (18.9:1 on white) */
  --meta: #6f706f;        /* IWI grey: labels, hints, TBA (4.97:1 on white, 4.56:1 on band) */
  --rule: #c2c2c2;        /* decorative hairlines only, never text or control borders */
  --green: #00802f;       /* HSG green: actions, links, deadline (5.09:1 on white, white on it 5.09:1) */
  --green-deep: #0a5e2d;  /* IWI dark green: faculty, menu, footer (white on it 7.92:1) */
  --mint: #cfe6d6;        /* secondary text on dark green only (6.01:1) */
  --rule-deep: #4f8a66;   /* hairlines on dark green */
  --beige: #e1d7c3;       /* draft bar and notices, ink text only */
  --danger: #e31c3d;      /* errors, on white only (4.67:1) */

  --font: "Source Sans 3", "Gill Sans", "Gill Sans MT", system-ui, "Segoe UI", Arial, sans-serif;

  --gutter: 32px;
  --max: 1440px;
  --gap: 24px;
  --bar: 72px;
  --cut: 64px;            /* IWI diagonal on the deadline tile (about 6.5°) */
  --cut-wide: min(11vw, 160px); /* the same angle across a full-width section */
  --section: 112px;
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
}

/* ── 2. Base ────────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html {
  -webkit-text-size-adjust: 100%;
  scroll-padding-top: calc(var(--bar) + 16px);
  scrollbar-color: var(--meta) var(--band);
}
@media all { html { scroll-behavior: smooth; } }
body {
  margin: 0;
  min-height: 100vh;
  background: var(--paper);
  color: var(--ink);
  font: 400 17px/1.6 var(--font);
  font-variant-numeric: lining-nums;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
h1, h2, h3 { margin: 0; font-weight: 300; letter-spacing: -0.01em; text-wrap: balance; }
p, ul, ol, dl, dd { margin: 0; }
img, svg { display: block; max-width: 100%; }
strong { font-weight: 600; }
a { color: var(--green); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.2em; }
a:hover { color: var(--ink); }
::selection { background: var(--green); color: #fff; }
:focus-visible { outline: 3px solid var(--green); outline-offset: 3px; }
input, textarea, button { font: inherit; color: inherit; }

.wrap { width: 100%; max-width: var(--max); margin: 0 auto; padding-inline: var(--gutter); }
.grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); }
.icon { width: 20px; height: 20px; flex: none; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.nowrap { white-space: nowrap; }
.num { font-variant-numeric: tabular-nums lining-nums; }
.small { font-size: 15px; color: var(--meta); }
.narrow { max-width: 820px; }
.mt-1 { margin-top: 8px; } .mt-2 { margin-top: 16px; } .mt-3 { margin-top: 24px; } .mt-4 { margin-top: 40px; } .mt-5 { margin-top: 64px; }

/* ── 3. Top of the page: skip link, draft bar, utility bar ─────────────── */
.skip { position: absolute; left: -9999px; top: 8px; z-index: 100; background: var(--ink); color: #fff; padding: 12px 16px; text-decoration: none; }
.skip:focus { left: 16px; color: #fff; }
.draftbar { background: var(--beige); color: var(--ink); font-size: 15px; line-height: 1.4; padding: 9px var(--gutter); text-align: center; }
.utilbar { background: var(--band); font-size: 15px; }
.utilbar .wrap { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 40px; }
.utilbar a { display: inline-flex; align-items: center; gap: 4px; min-height: 40px; }
.utilbar .icon { width: 16px; height: 16px; }

/* ── 4. Header and navigation ──────────────────────────────────────────── */
.bar { position: sticky; top: 0; z-index: 50; background: var(--paper); border-bottom: 1px solid var(--rule); }
.bar__inner { display: flex; align-items: center; gap: 24px; height: var(--bar); }
.brand { display: flex; align-items: center; gap: 16px; margin-right: auto; min-width: 0; color: var(--ink); text-decoration: none; }
.brand:hover { color: var(--ink); }
.brand__logo { flex: none; width: auto; height: 36px; }
.brand__name { min-width: 0; overflow: hidden; padding-left: 16px; border-left: 1px solid var(--rule); font-size: 16px; line-height: 1.25; white-space: nowrap; text-overflow: ellipsis; }
.bar__cta { flex: none; white-space: nowrap; }
.nav { display: flex; align-items: center; gap: 28px; }
.nav a { display: inline-flex; align-items: center; min-height: 44px; border-bottom: 2px solid transparent; color: var(--ink); font-size: 17px; text-decoration: none; }
.nav a:hover { border-bottom-color: var(--green); color: var(--ink); }
.bar__cta .show-sm { display: none; }

.menu { display: none; }
.menu > summary {
  display: grid; place-items: center; width: 48px; height: 48px;
  border: 1px solid var(--ink); list-style: none; cursor: pointer;
}
.menu > summary::-webkit-details-marker { display: none; }
.menu > summary .icon { width: 22px; height: 22px; }
.menu .i-close, .menu[open] .i-menu { display: none; }
.menu[open] .i-close { display: block; }
.menu[open] > summary { background: var(--green-deep); border-color: var(--green-deep); color: #fff; }
.menu__sheet {
  position: absolute; left: 0; right: 0; top: 100%;
  max-height: calc(100dvh - var(--bar) - 40px); overflow: auto; overscroll-behavior: contain;
  background: var(--green-deep); color: #fff;
  padding: 8px var(--gutter) 32px;
}
.menu__sheet a {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  min-height: 56px; border-bottom: 1px solid var(--rule-deep);
  color: #fff; font-size: 24px; font-weight: 300; text-decoration: none;
}
.menu__sheet a:hover { color: var(--mint); }
.menu__sheet .btn { margin-top: 24px; width: 100%; border-bottom: 0; font-size: 18px; font-weight: 400; }
.menu__sheet .btn--light { color: var(--green); }
.menu__sheet .btn--light:hover { background: var(--mint); color: var(--green-deep); }
.menu__sheet :focus-visible, .on-deep :focus-visible, .on-green :focus-visible { outline-color: #fff; }
@media all {
  .menu[open] .menu__sheet { animation: sheet-in 0.45s var(--ease); }
}
@keyframes sheet-in { from { clip-path: polygon(0 0, 100% 0, 100% 0, 0 0); } to { clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%); } }

/* ── 5. Buttons and links ──────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 12px;
  min-height: 48px; padding: 12px 20px;
  border: 1px solid transparent; border-radius: 0;
  font-size: 18px; font-weight: 400; line-height: 1.2; text-decoration: none; cursor: pointer;
  transition: background-color 0.2s var(--ease), color 0.2s var(--ease), border-color 0.2s var(--ease);
}
.btn--primary { background: var(--green); color: #fff; }
.btn--primary:hover { background: var(--green-deep); color: #fff; }
.btn--light { background: #fff; color: var(--green); }
.btn--light:hover { background: var(--green-deep); color: #fff; }
.btn--line { border-color: var(--ink); background: transparent; color: var(--ink); }
.btn--line:hover { background: var(--ink); color: #fff; }
.btn--small { min-height: 44px; padding: 8px 16px; font-size: 17px; }
.btn[disabled] { border-color: var(--rule); background: var(--band); color: var(--meta); cursor: not-allowed; }
.btn .icon, .arrowlink .icon { transition: transform 0.3s var(--ease); }
.btn:hover .icon, .btn:focus-visible .icon, .arrowlink:hover .icon, .arrowlink:focus-visible .icon { transform: translateX(4px); }
.btn[disabled] .icon { transform: none; }
.actions { display: flex; flex-wrap: wrap; gap: 12px; }

.arrowlink {
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px;
  border-bottom: 1px solid var(--ink); color: var(--ink); font-size: 18px; text-decoration: none;
}
.arrowlink:hover { border-bottom-color: var(--green); color: var(--green); }

/* ── 6. Hero ────────────────────────────────────────────────────────────── */
.hero { position: relative; isolation: isolate; overflow: hidden; padding-block: 72px 104px; }
/* The data field (fx/field.js) draws behind the hero content; without it the hero is plain white. */
.hero__field { position: absolute; inset: 0; z-index: -1; width: 100%; height: 100%; pointer-events: none; }
/* Hero entrance: the title rises out of a mask, the rest follows. CSS only, content visible without it. */
@media all {
  .hero__title { animation: hero-rise 1s var(--ease) backwards; }
  .hero__when { animation: hero-follow 0.8s var(--ease) 0.15s backwards; }
  .hero__statement { animation: hero-follow 0.8s var(--ease) 0.25s backwards; }
  .hero__links { animation: hero-follow 0.8s var(--ease) 0.35s backwards; }
}
/* Gentle tier for "reduce motion": the same order, as a fade only, nothing moves. */
@media not all { /* was: reduced motion (ignored by decision, see DESIGN.md) */
  .hero__title { animation: hero-fade 0.6s ease-out backwards; }
  .hero__when { animation: hero-fade 0.6s ease-out 0.1s backwards; }
  .hero__statement { animation: hero-fade 0.6s ease-out 0.2s backwards; }
  .hero__links, .hero__tile { animation: hero-fade 0.6s ease-out 0.3s backwards; }
}
@keyframes hero-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes hero-rise { from { clip-path: inset(0 0 100% 0); transform: translateY(0.35em); } to { clip-path: inset(0 0 -0.2em 0); transform: none; } }
@keyframes hero-follow { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
.hero__grid { align-items: end; row-gap: 48px; }
.hero__copy { grid-column: 1 / span 7; }
.hero__title { font-size: clamp(44px, 6.6vw, 96px); line-height: 1; letter-spacing: -0.025em; overflow-wrap: break-word; hyphens: auto; }
.hero__when { margin-top: 28px; font-size: 24px; line-height: 1.3; }
.hero__statement { margin-top: 32px; max-width: 40ch; font-size: clamp(20px, 1.95vw, 28px); line-height: 1.35; text-wrap: pretty; }
.hero__statement span { color: var(--meta); }
.hero__links { display: flex; flex-wrap: wrap; gap: 8px 32px; margin-top: 40px; }
.hero__tile { grid-column: 8 / -1; }

/* The deadline tile: HSG green with the IWI diagonal edge. */
.tile {
  background: var(--green); color: #fff;
  padding: calc(var(--cut) + 28px) 40px 40px;
  clip-path: polygon(0 var(--cut), 100% 0, 100% 100%, 0 100%);
}
/* The one authored motion: the IWI cut draws itself into the tile once. The tile is visible throughout. */
@media all {
  .tile { animation: tile-cut 1.1s var(--ease) 0.2s backwards; }
}
@keyframes tile-cut {
  from { clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%); }
  to { clip-path: polygon(0 var(--cut), 100% 0, 100% 100%, 0 100%); }
}
.tile--closed { background: var(--meta); }
.tile__label { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; font-size: 20px; line-height: 1.3; }
.chip { padding: 1px 8px; border: 1px solid currentColor; font-size: 13px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; }
.tile__day { margin-top: 28px; font-size: 24px; line-height: 1.2; }
.tile__date {
  display: block; margin-top: 4px;
  font-size: clamp(80px, 10vw, 144px); font-weight: 300; line-height: 0.9; letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums lining-nums; white-space: nowrap;
}
.tile__time { margin-top: 20px; font-size: 17px; }
.tile .btn { width: 100%; justify-content: space-between; margin-top: 32px; }
.tile__note { margin-top: 24px; font-size: 17px; }

/* ── 7. Sections ───────────────────────────────────────────────────────── */
.section { padding-block: var(--section); }
.section--band { background: var(--band); }
.shead { align-items: baseline; row-gap: 12px; margin-bottom: 56px; padding-top: 24px; border-top: 1px solid var(--ink); }
.shead h2 { grid-column: 1 / span 6; font-size: clamp(32px, 3.9vw, 56px); line-height: 1.1; }
.shead__fact { grid-column: 7 / -1; color: var(--meta); font-size: 18px; }
.split { row-gap: 48px; }
.split__main { grid-column: 1 / span 6; }
.split__side { grid-column: 8 / -1; }
.lead { max-width: 60ch; font-size: 20px; line-height: 1.55; }
/* Large statement (fx/scroll.js fills it word by word from grey to ink while scrolling). */
.statement { max-width: 1120px; font-size: clamp(28px, 3.7vw, 54px); font-weight: 300; line-height: 1.2; letter-spacing: -0.015em; text-wrap: pretty; }

/* Running band between hero and content. fx/scroll.js runs it right to left; without the script
   (and under reduced motion) it is static. Its pause button pauses all animations (band and hero
   field, WCAG 2.2.2). By decision of the project team it is not visible: like the skip link it
   appears only when it receives keyboard focus. */
.ticker { position: relative; display: flex; align-items: center; background: var(--green-deep); color: #fff; }
.ticker__view { flex: 1 1 0%; min-width: 0; overflow: hidden; padding-block: 20px; }
.ticker__track { display: flex; width: max-content; }
.ticker__toggle {
  position: absolute; top: 50%; right: var(--gutter);
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; margin-top: -22px; padding: 0;
  border: 1px solid #fff; border-radius: 0; background: var(--green-deep); color: #fff; cursor: pointer;
  transition: background-color 0.2s var(--ease), color 0.2s var(--ease);
}
.ticker__toggle:not(:focus-visible) {
  width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); border: 0; white-space: nowrap;
}
.ticker__toggle[hidden] { display: none; }
.ticker__toggle:focus-visible { outline-color: #fff; } /* green would vanish on the band */
.ticker__toggle .ticker__play, .ticker__toggle.is-paused .ticker__pause { display: none; }
.ticker__toggle.is-paused .ticker__play { display: block; }
@media (hover: hover) {
  .ticker__toggle:hover { background: #fff; color: var(--green-deep); }
}
.ticker__item { display: inline-flex; align-items: center; gap: 32px; padding-right: 32px; font-size: clamp(22px, 2.4vw, 34px); font-weight: 300; line-height: 1.2; white-space: nowrap; }
.ticker__item::after { content: ""; width: 10px; height: 10px; background: var(--mint); }
.lead + .lead { margin-top: 16px; }
.subhead { margin-bottom: 16px; font-size: 24px; font-weight: 400; line-height: 1.25; }

/* Index rows: hairlines instead of cards. */
.index { padding: 0; list-style: none; border-top: 1px solid var(--rule); }
.index > li, .index > div { display: grid; grid-template-columns: 140px 1fr; gap: 24px; padding: 16px 0; border-bottom: 1px solid var(--rule); }
.index--plain > li { grid-template-columns: 1fr; }
/* Heading over its explanation, e.g. the sections of the extended abstract. */
.index--stack > div { grid-template-columns: 1fr; gap: 2px; padding: 12px 0; }
.index--stack dt { font-weight: 600; }
.index--stack dd { color: var(--meta); font-size: 16px; }
.index__key { padding-top: 3px; color: var(--meta); font-size: 13px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; }
.index dd { margin: 0; overflow-wrap: anywhere; text-wrap: pretty; }
.index dd a .icon { display: inline-block; width: 16px; height: 16px; margin-left: 4px; vertical-align: -2px; }
.org-logo { width: auto; height: auto; max-width: 100%; max-height: 48px; margin-bottom: 8px; }

/* Tracks (About): index rows with the track number as key; name in the Name role, then chairs and description. */
.topics > div { align-items: baseline; padding: 28px 0; }
.topics .index__key { padding-top: 0; }
.topic__name { margin: 0; font-size: clamp(26px, 2.8vw, 40px); font-weight: 300; line-height: 1.15; letter-spacing: -0.01em; text-wrap: balance; }
.topic__chairs { margin-top: 8px; }
.topic__desc { max-width: 68ch; margin-top: 16px; }

/* Important dates */
.dates { padding: 0; list-style: none; border-top: 1px solid var(--rule); }
.dates > li { align-items: baseline; padding: 28px 0; border-bottom: 1px solid var(--rule); }
.dates__date { grid-column: 1 / span 4; font-size: clamp(40px, 4.4vw, 64px); font-weight: 300; line-height: 1; letter-spacing: -0.02em; font-variant-numeric: tabular-nums lining-nums; white-space: nowrap; }
.dates__what { grid-column: 5 / span 4; font-size: 22px; line-height: 1.3; }
.dates__detail { grid-column: 9 / -1; color: var(--meta); }
.dates > li.is-key .dates__date { color: var(--green); }

/* ── 8. Programme ──────────────────────────────────────────────────────── */
.agenda { padding: 0; list-style: none; border-top: 1px solid var(--ink); }
.agenda > li { display: grid; grid-template-columns: 180px minmax(0, 1fr); column-gap: var(--gap); padding: 20px 0; border-bottom: 1px solid var(--rule); }
.agenda > li.is-break { margin-inline: -16px; padding-inline: 16px; background: var(--band); }
.agenda__time { padding-top: 3px; color: var(--meta); font-variant-numeric: tabular-nums lining-nums; }
.agenda__title { font-size: 22px; line-height: 1.3; }
.agenda > li.is-papers .agenda__title { color: var(--green); }
.agenda__detail { color: var(--meta); font-size: 16px; }
.sessions { width: 100%; margin-top: 20px; border-collapse: collapse; table-layout: fixed; font-size: 16px; line-height: 1.4; }
.sessions th, .sessions td { padding: 12px 16px 12px 0; border-top: 1px solid var(--rule); text-align: left; vertical-align: top; overflow-wrap: anywhere; hyphens: auto; }
.sessions thead th { padding-top: 0; border-top: 0; font-weight: 600; }
.sessions thead th span { display: block; color: var(--meta); font-size: 15px; font-weight: 400; }
.sessions .sessions__time { width: 128px; color: var(--meta); font-weight: 400; font-variant-numeric: tabular-nums lining-nums; }
.slot__title { display: block; }
.slot__who { display: block; margin-top: 2px; color: var(--meta); font-size: 15px; }
.tba { color: var(--meta); }
.tracks { margin-top: 12px; padding: 0; list-style: none; }
.tracks > li { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 16px; padding: 10px 0; border-top: 1px solid var(--rule); }
.tracks__sep, .tracks__meta, .tracks__count { color: var(--meta); }
.tracks__count { font-variant-numeric: tabular-nums lining-nums; }
.tracks__note { padding-top: 10px; border-top: 1px solid var(--rule); color: var(--meta); font-size: 15px; }

/* ── 9. Faculty: hairline rows on a full-bleed dark green field ─────────── */
.section--deep {
  padding-top: calc(var(--section) + var(--cut-wide));
  background: var(--green-deep); color: #fff;
  clip-path: polygon(0 var(--cut-wide), 100% 0, 100% 100%, 0 100%);
}
.section--deep .shead { border-top-color: #fff; }
.section--deep .shead__fact { color: var(--mint); }
.people { padding: 0; list-style: none; border-top: 1px solid var(--rule-deep); }
.person { align-items: baseline; row-gap: 4px; padding: 28px 0; border-bottom: 1px solid var(--rule-deep); }
.person__name { grid-column: 1 / span 6; font-size: clamp(26px, 2.8vw, 40px); line-height: 1.15; overflow-wrap: break-word; hyphens: auto; }
.person__aff { grid-column: 7 / span 3; color: var(--mint); font-size: 18px; }
.person__role { grid-column: 10 / -1; color: var(--mint); font-size: 18px; text-align: right; }
.person__bio { grid-column: 7 / -1; color: var(--mint); font-size: 16px; }
.person__photo { width: 88px; height: 88px; margin-bottom: 12px; object-fit: cover; }

/* ── 10. Submission: a full-bleed HSG green field under the IWI cut ────── */
.section--submit {
  padding-top: calc(var(--section) + var(--cut-wide));
  background: var(--green); color: #fff;
  clip-path: polygon(0 var(--cut-wide), 100% 0, 100% 100%, 0 100%);
}
.section--submit .shead { border-top-color: #fff; }
.section--submit .shead__fact { color: #fff; }
.section--first { padding-top: calc(40px + var(--cut-wide)); }
.submit-grid { align-items: start; }
.submit-grid__form { grid-column: 1 / span 8; }

.panel { padding: 40px; background: #fff; color: var(--ink); }
/* E-mail submission: the address is the action, set large. */
.mailbox { margin-top: 8px; font-size: clamp(26px, 2.8vw, 40px); font-weight: 300; line-height: 1.15; overflow-wrap: anywhere; } /* "Name" role of the type ramp */
.panel :focus-visible { outline-color: var(--green); }
.form > * + * { margin-top: 24px; }
.form__intro { font-size: 18px; }
.pair { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.field { display: block; min-width: 0; }
.field__label { display: block; margin-bottom: 8px; font-size: 16px; font-weight: 600; }
.req { color: var(--green); }
.input, .textarea {
  display: block; width: 100%; min-height: 48px; padding: 11px 14px;
  border: 1px solid var(--meta); border-radius: 0; background: #fff;
  color: var(--ink); font-size: 17px; line-height: 1.4; caret-color: var(--green);
}
.textarea { min-height: 160px; resize: vertical; }
.input:hover, .textarea:hover { border-color: var(--ink); }
.input:focus-visible, .textarea:focus-visible { border-color: var(--green); outline: 2px solid var(--green); outline-offset: 0; }
.input::placeholder, .textarea::placeholder { color: var(--meta); }
.input[aria-invalid="true"], .textarea[aria-invalid="true"] { border: 2px solid var(--danger); }
.field__hint { display: block; margin-top: 8px; color: var(--meta); font-size: 15px; }
.field__error { display: block; margin-top: 8px; color: var(--danger); font-size: 15px; font-weight: 600; }

/* File input: native without JS; with JS the native control sits invisibly over our own row. */
.file { position: relative; display: block; }
.file__btn, .file__name { display: none; }
.js .file { display: flex; align-items: center; gap: 16px; min-height: 64px; padding: 8px; border: 1px dashed var(--meta); background: #fff; }
.js .file[data-filled] { border-style: solid; border-color: var(--green); }
.js .file__btn { display: inline-flex; align-items: center; gap: 8px; min-height: 48px; padding: 0 16px; border: 1px solid var(--ink); font-size: 17px; }
.js .file__name { display: block; min-width: 0; color: var(--meta); font-size: 16px; overflow-wrap: anywhere; }
.js .file[data-filled] .file__name { color: var(--ink); }
.js .file input[type="file"] { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
.js .file:hover .file__btn { background: var(--ink); color: #fff; }
.js .file:focus-within { outline: 3px solid var(--green); outline-offset: 2px; }
.js .file[data-invalid] { border: 2px solid var(--danger); }
.field__error:empty { display: none; }
.file input[aria-invalid="true"] ~ .file__btn { border-color: var(--danger); }

.consents { min-width: 0; margin: 32px 0 0; padding: 0; border: 0; }
.consents legend { margin-bottom: 8px; padding: 0; font-size: 16px; font-weight: 600; }
.check { display: flex; align-items: flex-start; gap: 12px; padding: 8px 0; font-size: 16px; line-height: 1.5; cursor: pointer; }
.check input { flex: none; width: 22px; height: 22px; margin: 1px 0 0; accent-color: var(--green); cursor: pointer; }
.consents .field__error { margin: 0 0 4px 34px; }
.honeypot { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }

/* ── 11. Notes ─────────────────────────────────────────────────────────── */
.note { display: flex; align-items: flex-start; gap: 12px; padding: 16px 20px; border: 1px solid var(--meta); background: #fff; font-size: 16px; line-height: 1.55; }
.note__icon { flex: none; width: 20px; height: 20px; margin-top: 2px; }
.note p + p { margin-top: 6px; }
.note--warn { border-color: var(--beige); background: var(--beige); }
.note--warn a { color: var(--ink); }
.note--ok { border-color: var(--green); }
.note--ok .note__icon { color: var(--green); }
.note--error { border: 2px solid var(--danger); }
.note--error .note__icon { color: var(--danger); }
/* The error summary receives focus by script only, so its border already marks it; no second frame. */
.note[tabindex="-1"]:focus { outline: none; }

/* ── 12. Inner pages ───────────────────────────────────────────────────── */
.page { padding-block: 72px var(--section); }
.page__title { font-size: clamp(40px, 5vw, 72px); line-height: 1.05; letter-spacing: -0.02em; overflow-wrap: break-word; hyphens: auto; }
.prose { max-width: 68ch; }
.prose h2 { margin-top: 48px; font-size: 26px; font-weight: 400; line-height: 1.25; }
.prose h2 + p, .prose p + p { margin-top: 12px; }
.receipt { margin-top: 40px; padding: 32px 40px; background: var(--green); color: #fff; }
.receipt__label { font-size: 17px; }
.receipt__id { margin-top: 4px; font-size: clamp(40px, 6vw, 72px); font-weight: 300; line-height: 1.05; letter-spacing: 0.04em; font-variant-numeric: tabular-nums lining-nums; overflow-wrap: anywhere; }
.receipt__hint { margin-top: 8px; font-size: 16px; }
.debug { margin-top: 24px; padding: 16px; overflow-x: auto; background: var(--band); font: 13px/1.5 ui-monospace, Consolas, monospace; white-space: pre-wrap; }

/* ── 13. Admin ─────────────────────────────────────────────────────────── */
.admin-bar { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 16px; }
.admin-bar form { display: flex; align-items: center; gap: 12px; }
.stats { display: flex; flex-wrap: wrap; gap: 24px 56px; }
.stats__value { font-size: 40px; font-weight: 300; line-height: 1.1; font-variant-numeric: tabular-nums lining-nums; }
.stats__label { color: var(--meta); font-size: 15px; }
.table-wrap { overflow-x: auto; }
.table { width: 100%; border-collapse: collapse; font-size: 15px; font-variant-numeric: tabular-nums lining-nums; }
.table th { padding: 10px 16px 10px 0; border-bottom: 1px solid var(--ink); font-weight: 600; text-align: left; white-space: nowrap; }
.table td { padding: 12px 16px 12px 0; border-bottom: 1px solid var(--rule); vertical-align: top; }
.table tr.is-old td { color: var(--meta); }
.table code { font-family: inherit; font-weight: 600; letter-spacing: 0.04em; }
.table details summary { margin-top: 4px; color: var(--green); cursor: pointer; }
.tag { display: inline-block; margin-top: 4px; padding: 1px 6px; border: 1px solid var(--meta); color: var(--meta); font-size: 13px; }
.tag--warn { border-color: var(--danger); color: var(--danger); }
.pre { margin-top: 6px; white-space: pre-wrap; }

/* ── 14. Footer ────────────────────────────────────────────────────────── */
.footer { padding: 72px 0 40px; background: var(--green-deep); color: #fff; }
.footer a { color: #fff; }
.footer a:hover { color: var(--mint); }
.footer__grid { row-gap: 40px; }
.footer__claim { grid-column: 1 / span 6; font-size: clamp(26px, 2.6vw, 36px); font-weight: 300; line-height: 1.2; }
.footer__claim span { display: block; margin-top: 12px; color: var(--mint); font-size: 16px; font-weight: 400; line-height: 1.5; text-wrap: pretty; }
.footer__col { grid-column: span 2; }
.footer__col h2 { margin-bottom: 12px; color: var(--mint); font-size: 13px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; }
.footer__col ul { padding: 0; list-style: none; }
.footer__col li + li { margin-top: 4px; }
.footer__col a { display: inline-flex; align-items: center; gap: 4px; min-height: 32px; overflow-wrap: anywhere; }
.footer__col .icon { width: 16px; height: 16px; }
.footer__base { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 24px; margin-top: 64px; padding-top: 20px; border-top: 1px solid var(--rule-deep); color: var(--mint); font-size: 15px; }

/* ── 15. Responsive ────────────────────────────────────────────────────── */
@media (max-width: 1199px) {
  /* Logo, name, five links and the call to action do not fit next to each other below 1200px. */
  .nav { display: none; }
  .menu { display: block; }
  .footer__claim { grid-column: 1 / -1; }
  .footer__col { grid-column: span 4; }
}
@media (max-width: 1023px) {
  :root { --gutter: 24px; --section: 88px; }
  .hero__copy, .hero__tile { grid-column: 1 / -1; }
  /* Stacked: the data field (fx/field.js) gets its own room between the copy and the tile. */
  .hero__grid { row-gap: clamp(176px, 30vw, 260px); }
  .hero__tile { max-width: 560px; }
  .shead h2, .shead__fact { grid-column: 1 / -1; }
  .split__main, .split__side { grid-column: 1 / -1; }
  .submit-grid__form { grid-column: 1 / -1; }
  .person__name { grid-column: 1 / -1; }
  .person__aff { grid-column: 1 / span 9; }
  .person__role { grid-column: 10 / -1; }
  .person__bio { grid-column: 1 / -1; }
}
@media (max-width: 719px) {
  :root { --gutter: 16px; --bar: 60px; --cut: 40px; --section: 56px; --gap: 16px; }
  .brand__logo { height: 30px; }
  .brand__name { display: none; }
  .bar__inner { gap: 12px; }
  .bar__cta .hide-sm { display: none; }
  .bar__cta .show-sm { display: inline; }
  .bar__cta { padding-inline: 14px; }
  .draftbar { font-size: 14px; }
  .hero { padding-block: 16px 64px; }
  .hero__when { margin-top: 16px; font-size: 18px; }
  .hero__statement { margin-top: 20px; }
  .hero__links { display: none; } /* the menu has the same links; the room goes to the data field */
  .hero__grid { row-gap: 176px; }
  .tile { padding: calc(var(--cut) + 20px) 20px 20px; }
  .tile__label { font-size: 18px; }
  .tile__day { margin-top: 16px; font-size: 20px; }
  .tile__time { margin-top: 12px; font-size: 16px; }
  .tile .btn { margin-top: 16px; min-height: 52px; }
  .shead { margin-bottom: 32px; padding-top: 16px; }
  .shead h2 { font-weight: 400; }
  .shead__fact { font-size: 16px; }
  .lead { font-size: 18px; }
  .index > li, .index > div { grid-template-columns: 1fr; gap: 2px; padding: 12px 0; }
  .topics > div { padding: 20px 0; gap: 8px; }
  .topic__name { font-size: 24px; }
  .dates > li { padding: 18px 0; row-gap: 4px; }
  .dates__date { grid-column: 1 / -1; }
  .dates__what { grid-column: 1 / -1; font-size: 20px; }
  .dates__detail { grid-column: 1 / -1; font-size: 16px; }
  .agenda > li { grid-template-columns: 1fr; row-gap: 0; padding: 12px 0; }
  .agenda > li.is-break { margin-inline: calc(-1 * var(--gutter)); padding-inline: var(--gutter); }
  .agenda__title { font-size: 20px; }
  .tracks__meta { display: block; }
  .tracks__sep { display: none; }
  .sessions { margin-top: 12px; font-size: 15px; }
  .sessions th, .sessions td { padding: 10px 10px 10px 0; }
  .sessions .sessions__time { width: 64px; }
  .slot__who { font-size: 14px; }
  .person { padding: 16px 0; }
  .person__name { font-size: 24px; }
  .person__aff, .person__role { grid-column: 1 / -1; font-size: 16px; text-align: left; }
  .panel { padding: 20px 16px; }
  .form > * + * { margin-top: 20px; }
  .pair { grid-template-columns: 1fr; gap: 20px; }
  .textarea { min-height: 128px; }
  .receipt { padding: 24px 20px; }
  .footer { padding-top: 48px; }
  .footer__col { grid-column: 1 / -1; }
  .footer__base { margin-top: 40px; }
}
@media (max-width: 359px) {
  /* Keep the logo legible; the menu and the hero tile still lead to the form. */
  .bar__cta { display: none; }
}

@media (forced-colors: active) {
  .tile, .person, .receipt, .menu__sheet, .btn, .section--submit .shead { border: 1px solid CanvasText; }
  .brand__logo { forced-color-adjust: none; background: #fff; }
}
@media not all { /* was: reduced motion (ignored by decision, see DESIGN.md) */
  .btn .icon, .arrowlink .icon { transition: none; }
  .btn:hover .icon, .btn:focus-visible .icon, .arrowlink:hover .icon, .arrowlink:focus-visible .icon { transform: none; }
}
@media print {
  .bar, .draftbar, .utilbar, .section--submit, .footer, .ticker, .hero__field { display: none; }
  .tile, .section--deep { clip-path: none; border: 1px solid #000; background: none; color: #000; }
  .hero__title, .hero__when, .hero__statement, .hero__links, .tile { animation: none; }
}