/* ============================================================
   ICAIEP2027 — shared stylesheet
   Used by index.html and all sub-pages.
   Breakpoints: desktop > 1024px | tablet 641–1024px | phone <= 640px
   ============================================================ */

:root{
  /* --- purple-red (紫紅) theme, picked up from the main visual --- */
  --primary:#8e2157;        /* deep purple-red: nav, headings, buttons */
  --primary-dark:#6d1642;   /* hover / active panel */
  --accent:#c33d7f;         /* brighter rose-magenta: sub-titles, highlights */
  --accent-soft:#ffcbe2;    /* light pink: active marker on dark backgrounds */
  --tint:#fdf2f7;           /* very light pink: note blocks, hero backdrop */
  --text:#333;
  --max-width:1180px;
  /* header (logo bar + nav) is wider than the text column so the
     justified menu keeps both ends aligned with the logos */
  --header-width:1600px;
  /* one shared page gutter so the logo bar, nav and content line up */
  --gutter:clamp(16px, 3vw, 32px);
  /* horizontal padding inside each nav link */
  --nav-link-pad:10px;
  /* how far the first/last menu item is inset from the page edge */
  --nav-inset:clamp(24px, 5vw, 72px);
}

*{box-sizing:border-box;}

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

body{
  margin:0;
  /* Latin first; the CJK faces catch the Chinese track names
     (JhengHei / PingFang TC for Traditional, YaHei / SC as a fallback) */
  font-family:"Segoe UI",Arial,"Microsoft JhengHei","PingFang TC",
              "Microsoft YaHei","PingFang SC",sans-serif;
  color:var(--text);
  background:#fff;
  overflow-x:hidden;
}

img{max-width:100%;}

/* ---------- Top logo bar ---------- */
.logo-bar{
  display:flex;
  align-items:center;
  justify-content:space-between;  /* EdUHK left, AAPSEF + AIDCEC pair right */
  flex-wrap:nowrap;
  /* this gap only ends up between the two partner logos: the auto margin on
     AAPSEF below is what pushes the pair away from the EdUHK logo */
  gap:clamp(10px, 1.8vw, 22px);
  width:100%;
  max-width:var(--header-width);
  margin:0 auto;
  padding:clamp(4px, 0.8vw, 10px) var(--gutter);
  background:#fff;
}
/* keep the class selectors at the same specificity as the shared img rule
   below, otherwise `width:auto` order decides and the heights are ignored */
/* object-fit keeps every logo undistorted if the bar has to squeeze them
   on very narrow screens */
.logo-bar img{display:block;width:auto;object-fit:contain;}
/* EdUHK is the host institution, so it stays the largest mark in the bar */
.logo-bar .logo-eduhk{height:clamp(56px, 9vw, 124px);}
/* the two partner logos sit together on the right, both well under EdUHK.
   AAPSEF is set a little taller than AIDCEC because its artwork carries a
   wide whitespace margin, so the two text blocks end up reading alike.      */
.logo-bar .logo-aapsef{
  margin-left:auto;
  height:clamp(31px, 5vw, 68px);
}
.logo-bar .logo-aidcec{height:clamp(30px, 4.8vw, 66px);}
/* nudge the pair down so their text blocks sit lower than the EdUHK logo
   instead of on its centre line (does not affect the bar's layout height) */
.logo-bar .logo-aapsef,
.logo-bar .logo-aidcec{
  position:relative;
  top:clamp(8px, 1.6vw, 22px);
}

/* ---------- Navigation ----------
   Justified: the first link sits flush with the left gutter,
   the last one flush with the right gutter, the rest spread evenly. */
nav.main-nav{background:var(--primary);}

.nav-inner{
  display:flex;
  flex-wrap:nowrap;
  align-items:stretch;
  justify-content:space-between;
  gap:4px;
  width:100%;
  max-width:var(--header-width);
  margin:0 auto;
  /* subtract the link padding so the text, not the hover box, lines up
     with the inset */
  padding:0 calc(var(--nav-inset) - var(--nav-link-pad));
}
/* one shared look for the top-level links and the "Papers" submenu button */
.nav-inner > a,
.nav-inner .sub-toggle{
  display:flex;
  align-items:center;
  padding:15px var(--nav-link-pad) 12px;
  background:none;
  border:0;
  border-bottom:3px solid transparent;
  color:#fff;
  text-decoration:none;
  font-family:inherit;
  font-size:clamp(13px, 1.25vw, 15px);
  font-weight:600;
  line-height:1.25;
  white-space:nowrap;
  transition:background .2s, border-color .2s;
}
.nav-inner > a[href]:hover,
.nav-inner .sub-toggle:hover{background:var(--primary-dark);}

/* pages that are not built yet: same look, but no hover and no pointer */
.nav-inner > a:not([href]),
.sub-menu a:not([href]),
.cta:not([href]){cursor:default;}
.nav-inner .sub-toggle{cursor:pointer;}

/* Current page: stays white, marked with a darker panel and a pink underline */
.nav-inner > a.active,
.nav-inner .sub-toggle.active{
  background:var(--primary-dark);
  border-bottom-color:var(--accent-soft);
}
.nav-inner a:focus-visible,
.nav-inner .sub-toggle:focus-visible{outline:3px solid #ffd54f;outline-offset:-3px;}

/* ---------- Dropdown submenu (Papers) ----------
   The panel is absolutely positioned under its parent item, so opening it
   never reflows the menu row. JS drives the `.open` class (pointer, click and
   keyboard all go through it) instead of a :hover rule, otherwise clicking to
   close would do nothing while the pointer is still over the item.        */
.has-sub{position:relative;display:flex;}

/* small caret so the item reads as expandable */
.nav-inner .sub-toggle::after{
  content:"";
  flex:none;
  margin-left:7px;
  border:4px solid transparent;
  border-top-color:currentColor;
  transform:translateY(2px);
  transition:transform .2s;
}
.has-sub.open > .sub-toggle{background:var(--primary-dark);}
.has-sub.open > .sub-toggle::after{transform:translateY(-2px) rotate(180deg);}

.sub-menu{
  display:none;
  position:absolute;
  top:100%;
  left:0;
  z-index:30;
  min-width:max(100%, 300px);
  max-width:min(420px, 88vw);
  margin:0;
  padding:0;
  list-style:none;
  background:var(--primary);
  box-shadow:0 12px 26px rgba(0,0,0,.22);
}
.has-sub.open > .sub-menu{display:block;}
.sub-menu a{
  display:block;
  padding:13px 18px;
  color:#fff;
  text-decoration:none;
  font-size:14px;
  font-weight:600;
  line-height:1.4;
  border-top:1px solid rgba(255,255,255,.14);
}
.sub-menu li:first-child a{border-top:0;}
.sub-menu a[href]:hover{background:var(--primary-dark);}
.sub-menu a.active{background:var(--primary-dark);}

/* Mobile menu toggle — hidden until the phone breakpoint */
.nav-toggle{
  display:none;
  width:100%;
  background:var(--primary);
  color:#fff;
  border:0;
  padding:14px var(--gutter);
  font-size:16px;
  font-weight:700;
  text-align:left;
  cursor:pointer;
}
.nav-toggle:focus-visible{outline:3px solid #ffd54f;outline-offset:-3px;}

/* ---------- Hero banner ----------
   The artwork (1780x440) is already trimmed to banner proportions and its
   title runs close to both edges, so it is shown whole: no crop, no fixed
   height. The width drives the size and the height follows the aspect ratio,
   which keeps it readable at every viewport and reserves the right amount of
   space before the image loads (so no layout shift).

   Keep the ratio below in step with the file: if the artwork is replaced with
   one of different proportions, update it (and the width/height attributes in
   the markup) to match, or the band will letterbox.

   The band itself is full-bleed; the artwork inside is capped at the header
   width so it lines up with the logos and is never blown up much past its
   natural resolution on very wide monitors. The tint fills whatever is left. */
.hero{
  line-height:0;
  background:var(--tint);
  display:flex;
  justify-content:center;
}
.hero img{
  display:block;
  width:100%;
  max-width:var(--header-width);
  height:auto;
  aspect-ratio:1780 / 440;
  /* contain, not cover: if the ratio above ever drifts from the file, the
     artwork is letterboxed into the tint band instead of being cropped, which
     would cut into a title that runs close to the edges */
  object-fit:contain;
  object-position:center;
}

/* ---------- Generic page section ---------- */
.section{
  max-width:var(--max-width);
  margin:0 auto;
  padding:clamp(28px, 5vw, 48px) var(--gutter) clamp(40px, 6vw, 64px);
}
.section h1{
  margin:0 0 18px;
  font-size:clamp(22px, 3vw, 28px);
  color:var(--primary);
}
.section h2{
  margin:0 0 16px;
  font-size:clamp(20px, 2.6vw, 26px);
  color:var(--primary);
}
/* explicit margins instead of the browser's 1em: the first paragraph of a
   section then sits right under the title band, with no stray gap on top */
.section p{font-size:16px;line-height:1.7;margin:0 0 18px;}

/* ---------- Home: intro block ----------
   Two columns: the ICAIEP2027 mark on the left, all of the text on the right.
   The left column is sized to its content (`auto`) instead of a 240-320px
   track, so the mark sits next to the text rather than floating in an empty
   band, and everything in the right column shares one left edge.          */
.intro{
  display:grid;
  grid-template-columns:auto minmax(0, 1fr);
  gap:clamp(20px, 3.5vw, 44px);
  max-width:var(--max-width);
  margin:0 auto;
  padding:clamp(28px, 5vw, 48px) var(--gutter) clamp(40px, 6vw, 64px);
  align-items:start;
}
/* soft tinted panel, so the mark reads as a logo lockup */
.brand-mark{
  text-align:center;
  background:var(--tint);
  border-radius:6px;
  padding:clamp(14px, 2vw, 20px) clamp(16px, 2.2vw, 24px);
}
/* "ICAIEP2027" sits on one line, so the type is a little smaller than when the
   year was stacked above the acronym, and the line is kept unbreakable. */
.brand-mark .acronym{
  font-size:clamp(30px, 4.4vw, 46px);
  font-weight:800;
  letter-spacing:1px;
  color:var(--primary);
  line-height:1.05;
  white-space:nowrap;
}
.brand-mark .acronym span{color:var(--accent);}
/* the year keeps the deep purple-red, so the mark reads ICAIEP | 2027 */
.brand-mark .acronym .year{
  color:var(--primary);
  font-size:.92em;
  letter-spacing:1.5px;
}
.brand-mark .tagline{
  margin-top:12px;
  font-size:14px;
  color:#777;
  letter-spacing:1px;
}

/* the mark carries "ICAIEP2027", so the heading is the full conference name */
.intro-body h1{
  margin:0 0 22px;
  font-size:clamp(21px, 2.6vw, 28px);
  color:var(--primary);
  line-height:1.3;
}
/* Chinese rendering of the conference name: same heading, own line, one step
   down in size so the English line still leads. `lang` is set in the markup so
   the browser picks a Chinese face. */
.intro-body h1 .title-zh{
  display:block;
  margin-top:10px;
  font-size:.82em;
  font-weight:700;
  letter-spacing:.5px;
  line-height:1.4;
}
.intro-body h2{
  margin:0 0 20px;
  font-size:clamp(19px, 2.4vw, 24px);
  color:var(--primary);
  line-height:1.35;
}
.intro-body .subtitle{
  margin:0 0 22px;
  font-size:clamp(17px, 2.2vw, 22px);
  color:var(--accent);
  font-weight:700;
}
.intro-body p{
  font-size:16px;
  line-height:1.7;
  margin:0 0 18px;
}
p.dates{font-weight:700;}

/* Date / Venue as a label + value pair, so the two facts line up */
.intro-meta{
  display:grid;
  grid-template-columns:auto minmax(0, 1fr);
  gap:8px clamp(14px, 2vw, 22px);
  margin:0 0 22px;
  font-size:16px;
  line-height:1.6;
}
.intro-meta dt{
  font-weight:700;
  color:var(--primary);
  white-space:nowrap;
}
.intro-meta dd{margin:0;}

.note{
  font-size:14px;
  color:#555;
  border-left:4px solid var(--accent);
  padding:12px 16px;
  background:var(--tint);
}

.cta{
  display:inline-block;
  margin-top:22px;
  padding:13px 30px;
  background:var(--primary);
  color:#fff;
  text-decoration:none;
  font-weight:700;
  border-radius:4px;
}
.cta[href]:hover{background:var(--primary-dark);}

/* the secondary button: same size as the solid one, so the 2px border is taken
   out of the padding instead of added around it */
.cta-outline{
  padding:11px 28px;
  background:#fff;
  color:var(--primary);
  border:2px solid var(--primary);
}
/* [href] is needed here: without it this rule loses to .cta[href]:hover above,
   which would paint the dark background under the dark text */
.cta-outline[href]:hover{
  background:var(--tint);
  color:var(--primary-dark);
  border-color:var(--primary-dark);
}

/* ---------- Home: stacked sections below the intro ----------
   Each one sits right under the block above it, so the top padding is trimmed
   and a hairline rule separates them instead of a big empty gap.           */
.conf-intro,
.tracks{
  padding-top:clamp(18px, 3vw, 28px);
  border-top:1px solid #eadfe5;
}
.conf-intro p{margin:0 0 18px;}
.conf-intro p:last-child{margin-bottom:0;}

/* Panopto video under the intro text: 16:9 box so the page does not jump
   while the player loads */
.video-embed{
  margin-top:24px;
  max-width:860px;
  aspect-ratio:16 / 9;
  border:1px solid #e2cfd9;
  background:var(--tint);
}
/* visible title above each video; the video then sits right under it */
.video-title{
  margin:32px 0 10px;
  color:var(--primary);
  font-size:18px;
}
.video-title + .video-embed{margin-top:0;}
.video-embed iframe{
  display:block;
  width:100%;
  height:100%;
  border:0;
}
/* leave a little room above the title when the floating dock jumps to it */
.video-title{scroll-margin-top:24px;}

/* ---------- Home: floating video shortcuts ----------
   Dark cards pinned to the bottom-right corner, one per video. The square
   play mark carries a small dot on its corner and each card has a coloured
   bottom edge. `.is-hidden` (set by main.js) fades the dock out while a
   video is on screen so it never sits over the player controls.          */
.video-dock{
  position:fixed;
  right:clamp(12px, 2vw, 24px);
  bottom:clamp(12px, 2vw, 24px);
  z-index:900;
  display:flex;
  flex-direction:column;
  align-items:flex-end;
  gap:12px;
  max-width:calc(100vw - 24px);
  transition:opacity .25s ease, visibility .25s ease, transform .25s ease;
}
.video-dock.is-hidden{
  opacity:0;
  visibility:hidden;          /* also takes the links out of the tab order */
  transform:translateY(8px);
}
/* collapsed by default: only the square play mark shows, so the dock does not
   cover the page text. Hover or keyboard focus slides the title out to the
   left. The title stays in the DOM (only clipped), so screen readers still
   announce it as the link name.                                           */
.video-dock-link{
  display:flex;
  align-items:center;
  gap:0;
  padding:10px;
  background:#232323;
  color:#fff;
  font-size:15px;
  font-weight:700;
  line-height:1.3;
  text-decoration:none;
  border-bottom:3px solid var(--accent);
  border-radius:4px;
  box-shadow:0 4px 14px rgba(0,0,0,.28);
  transition:background .2s ease, transform .2s ease,
             gap .25s ease, padding .25s ease;
}
.video-dock-text{
  max-width:0;
  overflow:hidden;
  white-space:nowrap;
  opacity:0;
  transition:max-width .3s ease, opacity .2s ease;
}
/* expanded state. `.is-open` is set by main.js on touch screens, where the
   first tap only reveals the title and a second tap follows the link.
   :hover is limited to real pointers: phones keep a "sticky" hover after a
   tap, which would otherwise fight the tap-to-reveal state.             */
.video-dock-link.is-open,
.video-dock-link:focus-visible{
  gap:12px;
  padding:10px 18px 10px 12px;
  background:var(--primary-dark);
}
.video-dock-link.is-open .video-dock-text,
.video-dock-link:focus-visible .video-dock-text{
  max-width:280px;
  opacity:1;
}
@media (hover:hover){
  .video-dock-link:hover{
    gap:12px;
    padding:10px 18px 10px 12px;
    background:var(--primary-dark);
    transform:translateY(-2px);
  }
  .video-dock-link:hover .video-dock-text{
    max-width:280px;
    opacity:1;
  }
}
.video-dock-link:focus-visible{
  outline:3px solid var(--accent-soft);
  outline-offset:2px;
}
.video-dock-icon{
  position:relative;
  flex:none;
  display:flex;
  align-items:center;
  justify-content:center;
  width:32px;
  height:32px;
  border:2px solid #fff;
}
/* the small dot sitting on the top-right corner of the mark */
.video-dock-icon::before{
  content:"";
  position:absolute;
  top:-7px;
  right:-7px;
  width:12px;
  height:12px;
  border-radius:50%;
  background:var(--accent-soft);
}
@media (prefers-reduced-motion:no-preference){
  html{scroll-behavior:smooth;}
}
@media (prefers-reduced-motion:reduce){
  .video-dock,
  .video-dock-link,
  .video-dock-text{transition:none;}
}
/* phone: smaller cards so the pair does not cover too much of the text */
@media (max-width:640px){
  .video-dock{gap:8px;}
  .video-dock-link{
    padding:8px;
    font-size:13px;
  }
  .video-dock-link.is-open,
  .video-dock-link:focus-visible{
    gap:10px;
    padding:8px 12px 8px 10px;
  }
  .video-dock-icon{width:26px;height:26px;}
  .video-dock-icon svg{width:14px;height:14px;}
}

/* ---------- Home: conference tracks ----------
   A plain bulleted list. The Chinese name sits on its own line directly under
   the English one, set slightly greyer so the two languages stay legible
   without turning the list into a decorated block.                        */
.track-list{
  margin:14px 0 0;
  padding-left:1.8em;
  font-size:16px;
  line-height:1.7;
  list-style:disc;
}
.track-list li{margin:0 0 10px;}
.track-list li:last-child{margin-bottom:0;}
.track-list li span[lang]{
  display:block;
  color:#666;
}

/* one track per row on the Call for Papers page, with a little more air
   between the rows than the home-page list                                */
.track-list.split{
  margin-bottom:26px;
}
.track-list.split li{
  margin-bottom:12px;
}

/* ---------- Home: tracks + important dates ----------
   The tracks list on the left, the date panel on the right. The two columns are
   the same as `.page-grid` on the sub-pages, so the panel lands at the same
   width and the home page reads as part of the same set.                    */
.tracks-grid{
  display:grid;
  grid-template-columns:minmax(0, 1fr) clamp(250px, 27%, 320px);
  gap:clamp(24px, 4vw, 46px);
  align-items:start;
}

/* ---------- Sub-page title band ----------
   Page name on the left, conference name on the right, same width as the
   header above it.                                                        */
/* the artwork is a wide pastel strip (1370x71), so it is stretched over the
   band with `cover` and the type on top is dark instead of white */
.page-head{
  background-color:var(--tint);
  background-image:url("../images/sub%20banner.jpg");
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
}
.page-head-inner{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:space-between;
  gap:10px clamp(20px, 4vw, 48px);
  max-width:var(--max-width);
  margin:0 auto;
  padding:clamp(20px, 3.4vw, 34px) var(--gutter);
}
.page-head h1{
  margin:0;
  font-size:clamp(24px, 3.4vw, 34px);
  color:var(--primary);
  line-height:1.2;
}
/* no width cap here on purpose: the conference name should sit on a single
   line whenever the band is wide enough, and only wrap when it has to */
.page-head-meta{
  margin:0;
  /* the darker purple-red keeps this small text readable over the lightest
     and the most saturated parts of the strip alike */
  color:var(--primary-dark);
  font-size:clamp(13px, 1.4vw, 15px);
  font-weight:600;
  line-height:1.45;
  text-align:right;
}

/* the band is a strong block of colour and already carries its own padding,
   so the content underneath starts close to it instead of after a full
   section's worth of space */
.page-head + .section,
.page-head + .page-grid{padding-top:clamp(14px, 1.8vw, 20px);}

/* ---------- Sub-page: content + side panel ----------
   Text column on the left, "Important Dates" style panel on the right,
   stacking below the tablet breakpoint.                                   */
.page-grid{
  display:grid;
  grid-template-columns:minmax(0, 1fr) clamp(250px, 27%, 320px);
  gap:clamp(24px, 4vw, 46px);
  max-width:var(--max-width);
  margin:0 auto;
  padding:clamp(24px, 4vw, 40px) var(--gutter) clamp(40px, 6vw, 64px);
  align-items:start;
}
/* direct children only: this is the column's body copy. Paragraphs nested in a
   list item or a card carry their own type, and a descendant selector here
   would outrank those rules and flatten them. */
.page-main > p{font-size:16px;line-height:1.7;margin:0 0 18px;}

/* column heading: a hairline across the column with a short rose accent at
   the left. Used in both columns so the two sides read as a pair.         */
.col-title{
  position:relative;
  margin:0 0 16px;
  padding-bottom:10px;
  border-bottom:1px solid #eadfe5;
  font-size:clamp(17px, 2vw, 21px);
  font-weight:600;
  color:var(--primary);
}
.col-title::after{
  content:"";
  position:absolute;
  left:0;
  bottom:-1px;
  width:52px;
  height:3px;
  background:var(--accent);
}
.page-main .col-title{margin-top:6px;}
/* a second heading further down a column needs air above it */
.col-title ~ .col-title{margin-top:clamp(28px, 4vw, 40px);}

/* submission guidelines: plain bullets, with the parenthetical notes set
   slightly smaller under their own bullet */
.guide-list{
  margin:0 0 20px;
  padding-left:1.4em;
  font-size:16px;
  line-height:1.7;
}
.guide-list li{margin:0 0 14px;}
.guide-list li:last-child{margin-bottom:0;}
/* numbered steps need a little more room than bullets so two-digit markers
   stay inside the column */
ol.guide-list{padding-left:1.8em;}
.guide-list p{
  margin:6px 0 0;
  font-size:15px;
  line-height:1.6;
  color:#555;
}

/* ---------- Registration: fee table ----------
   Two columns: participant category on the left, fee on the right. Each
   participant group opens with a tinted band spanning both columns, so the
   three fee tiers underneath read as belonging to it.

   The wrapper scrolls sideways on a phone rather than letting a long category
   label stretch the page past the viewport.                                */
.table-wrap{
  overflow-x:auto;
  margin:0 0 8px;
  -webkit-overflow-scrolling:touch;
}
/* the wrapper takes focus so the table can be scrolled from the keyboard,
   so it needs a ring of its own */
.table-wrap:focus-visible{outline:3px solid var(--accent);outline-offset:2px;}
.fee-table{
  width:100%;
  min-width:420px;
  border-collapse:collapse;
  font-size:15px;
  line-height:1.5;
  text-align:left;
}
.fee-table th,
.fee-table td{
  border:1px solid #eadfe5;
  padding:11px 14px;
  vertical-align:top;
}
.fee-table thead th{
  background:var(--primary);
  color:#fff;
  font-weight:700;
}
/* the band that names a participant group */
.fee-table .fee-group th{
  background:var(--tint);
  color:var(--primary);
  font-weight:700;
}
.fee-table tbody th{font-weight:600;}
/* the amount is what people scan for, so it stays on one line and is set in
   the darker theme colour */
.fee-table td{
  white-space:nowrap;
  font-weight:700;
  color:var(--primary-dark);
}
/* the MSc(AIEP) row is its own group and its fee in one line, so it carries the
   same tint as the group bands to read as a band rather than a stray row */
.fee-table .fee-flat th,
.fee-table .fee-flat td{background:var(--tint);}
.fee-table .fee-flat th{color:var(--primary);font-weight:700;}

/* the group bands and the tinted flat row are not plain data rows, so they stay
   out of the hover */
.fee-table tbody tr:not(.fee-group):not(.fee-flat):hover th,
.fee-table tbody tr:not(.fee-group):not(.fee-flat):hover td{background:#fdf8fa;}

/* the table's own footnote: scoped to .page-main so it beats the 16px
   body-copy rule for that column */
.page-main .fee-note{
  margin:0 0 22px;
  font-size:14px;
  line-height:1.6;
  color:#555;
}
.page-main .fee-note sup{font-weight:700;}

/* stacked footnotes stay tight together and carry the block's bottom margin
   on the group instead of on each line */
.page-main .fee-notes{margin:0 0 22px;}
.page-main .fee-notes .fee-note{margin:0 0 8px;}
.page-main .fee-notes .fee-note:last-child{margin-bottom:0;}

/* a. b. c. instead of bullets, for the notes under the fee table */
ol.notes-list{list-style:lower-alpha;}

/* ---------- About page: committee ----------
   One card grid for the conference-level chairs and a second for the nine
   tracks, so every person on the page reads the same way: role, photo, name,
   affiliation. `.people` sits on the text column of the shared `.page-grid`,
   not on the wrapper, so the side panel next to it keeps the standard
   heading rhythm.                                                          */
.people .col-title ~ .col-title{margin-top:clamp(30px, 4.4vw, 44px);}

/* auto-fill: three cards on a desktop, two on a tablet, one on a phone,
   without a breakpoint of their own */
.people-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(300px, 1fr));
  gap:clamp(18px, 2.6vw, 28px);
  margin-top:4px;
}
/* the committee is read person by person, so each one gets a row of its own:
   Conference Chair, Programme Chair, then the two Local Organising Chairs.
   auto-fill above keeps the empty columns open, so a card in a one-person
   row stays as narrow as it would be in a filled row.                     */
.committee-rows{
  display:flex;
  flex-direction:column;
  gap:clamp(18px, 2.6vw, 28px);
  margin-top:4px;
}
.committee-rows .people-grid{margin-top:0;}
.person-card{
  display:flex;
  flex-direction:column;
  border:1px solid #eadfe5;
  border-top:3px solid var(--accent);
  border-radius:4px;
  background:#fff;
  padding:clamp(14px, 1.8vw, 20px);
}
.track-name{
  margin:0 0 14px;
  font-size:clamp(15px, 1.7vw, 17px);
  font-weight:700;
  color:var(--primary);
  line-height:1.4;
}
.track-name span[lang]{
  display:block;
  margin-top:5px;
  font-size:.92em;
  font-weight:600;
  color:#666;
}

/* a committee card carries its role where a track card carries the track
   name, so the role is what the eye lands on first: one step larger than the
   small pink label used inside the track cards, and with no accent rule under
   it — the type alone does the work */
.role-title{
  margin:0 0 16px;
  padding-bottom:10px;
  border-bottom:1px solid #eadfe5;
  font-size:clamp(17px, 2vw, 20px);
  font-weight:700;
  color:var(--primary);
  line-height:1.3;
}

/* photo left, chair details right */
.person{
  display:flex;
  align-items:flex-start;
  gap:clamp(12px, 1.6vw, 16px);
  /* sits at the foot of the card, so the portraits line up across a row of
     cards whose track names run to different lengths */
  margin-top:auto;
}
/* the portraits arrive at different sizes and proportions, so every one is
   cropped into the same frame; the crop is pulled towards the top of the
   picture so a head-and-shoulders shot keeps the face */
.person-photo{
  flex:none;
  width:96px;
  height:120px;
  object-fit:cover;
  object-position:center 20%;
  border:1px solid #e2cfd9;
  border-radius:3px;
  background:var(--tint);
}
.person-body{min-width:0;}
.person-role{
  margin:0 0 4px;
  font-size:12px;
  font-weight:700;
  letter-spacing:.6px;
  text-transform:uppercase;
  color:var(--accent);
}
.person-name{
  margin:0 0 4px;
  font-size:16px;
  font-weight:700;
  line-height:1.35;
}
.person-org{
  margin:0;
  font-size:14px;
  line-height:1.45;
  color:#555;
}
/* the coordinator closes the card, under a hairline: same role / name / school
   shape as the chair above, one step smaller and with no photo. `.person`
   above carries the auto margin, so this row lines up across a row of cards */
.person-coord{
  margin:14px 0 0;
  padding-top:12px;
  border-top:1px solid #eadfe5;
}
.person-coord .person-name{font-size:15px;}
.person-coord .person-org{font-size:13px;}

/* ---- committee roll ----
   the senior members are read as a list of names and schools rather than one
   portrait each, so the card runs the full width of the column and the names
   fill as many columns as the width allows */
.member-list{
  list-style:none;
  margin:0;
  padding:0;
}
/* one member per row: the name and the school read on the same line, with a
   hairline between the rows. On a narrow screen the school drops under the
   name rather than squeezing the column.                                   */
.member-list li{
  display:flex;
  flex-wrap:wrap;
  align-items:baseline;
  gap:2px clamp(10px, 1.6vw, 18px);
  padding:9px 0;
  border-top:1px solid #f0e6eb;
}
.member-list li:first-child{border-top:0;padding-top:0;}
.member-list li:last-child{padding-bottom:0;}
.member-list .person-name{
  flex:none;
  margin:0;
  min-width:200px;
  font-size:15px;
}
.member-list .person-org{font-size:13px;}

/* ---- one track per row ----
   the track list is read one track at a time, so it overrides the auto-fill
   columns above and stacks full width instead. The Local Organising Chairs
   use `.committee-rows` for their rows, keeping the narrower card width.   */
.people-grid.track-rows{grid-template-columns:1fr;}

/* a full-width track card has room to set the chair and the coordinator beside
   each other, so the hairline between them turns into a vertical rule. Below
   this width the card keeps the stacked shape defined above.               */
@media (min-width:640px){
  .track-rows .person-card{
    display:grid;
    grid-template-columns:1.1fr 1fr;
    column-gap:clamp(20px, 3vw, 36px);
    align-items:start;
  }
  .track-rows .track-name{grid-column:1 / -1;}
  /* the columns already line the two blocks up, so the card no longer needs
     the auto margin that pushed the portrait to its foot */
  .track-rows .person{margin-top:0;}
  .track-rows .person-coord{
    margin:0;
    padding:0 0 0 clamp(20px, 3vw, 36px);
    border-top:0;
    border-left:1px solid #eadfe5;
  }
}

/* ---------- Venue page ---------- */
.venue-photo{
  display:block;
  width:100%;
  height:auto;
  margin:0 0 18px;
  border:1px solid #e2cfd9;
}
/* the map keeps a fixed shape so the column height does not jump while the
   iframe loads */
.map-embed{
  border:1px solid #e2cfd9;
  background:var(--tint);
  aspect-ratio:4 / 3;
  min-height:300px;
}
.map-embed iframe{
  display:block;
  width:100%;
  height:100%;
  border:0;
}

.side-panel{
  border-left:1px solid #eadfe5;
  padding-left:clamp(18px, 2.4vw, 30px);
}
/* the panel also sits inside a `.section` on the home page, where the generic
   `.section h2` rule would outrank `.col-title` and blow the panel headings up
   to body-heading size. Only the size is pinned back here: the margins still
   come from `.col-title ~ .col-title`, so a second heading keeps its air. */
.side-panel .col-title{font-size:clamp(17px, 2vw, 21px);}
.date-list{
  margin:0;
  font-size:15px;
  line-height:1.5;
}
.date-list dt{
  border-top:1px solid #eadfe5;
  padding-top:12px;
  font-weight:700;
  color:var(--primary);
}
.date-list dt:first-of-type{border-top:0;padding-top:0;}
.date-list dd{margin:4px 0 14px;}
.date-list dd:last-child{margin-bottom:0;}

/* side panel list without descriptions (public transport) */
.side-list{
  margin:0;
  padding:0;
  list-style:none;
  font-size:15px;
  font-weight:700;
  color:var(--primary);
}
.side-list li{
  border-top:1px solid #eadfe5;
  padding:11px 0;
}
.side-list li:first-child{border-top:0;padding-top:0;}
.side-list li:last-child{padding-bottom:0;}
/* placeholder for anything not confirmed yet */
.tbc{color:#777;font-style:italic;}

/* links inside a sub-page column, and the placeholders that stand in for the
   ones whose target is not live yet — same look, but a placeholder has no
   href, so it does nothing until the URL exists */
/* :not(.cta) keeps a button inside a text column looking like a button:
   without it these rules would repaint it blue and underline the label */
.page-main a[href]:not(.cta),
.side-panel a[href]:not(.cta),
.prose a[href]:not(.cta),
.link-ph{
  color:#1565c0;
  text-decoration:underline;
}
.page-main a[href]:not(.cta):hover,
.side-panel a[href]:not(.cta):hover,
.prose a[href]:not(.cta):hover{color:#0d47a1;}
.link-ph{cursor:default;}

/* ---------- Programme rundown image ----------
   The rundown is a wide landscape JPG. It scales with the column and never
   upscales past its own size, and the thin frame keeps it from bleeding into
   the page background.                                                     */
.rundown{
  margin:8px 0 4px;
  border:1px solid #e2cfd9;
  background:var(--tint);
}
.rundown a{display:block;}
.rundown img{
  display:block;
  width:100%;
  height:auto;
}
.rundown-actions{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  margin:0 0 24px;
}
.rundown-actions .cta{margin-top:14px;}
/* while the file is being fetched for saving */
.cta[aria-busy="true"]{opacity:.72;cursor:progress;}

/* ---------- Keynote Speakers page ----------
   Built as an announcement rather than a directory, so it does not reuse the
   committee cards: one full-width spotlight section per speaker, alternating
   white / tint and photo left / right, with the speech title in a dark
   call-out, then the speaker bio and the speech summary.                   */
.ks-wrap{
  max-width:var(--max-width);
  margin:0 auto;
  padding:0 var(--gutter);
}

.ks-speaker{padding:clamp(44px, 6.5vw, 88px) 0;}
/* the first speaker sits right under the page banner, so it starts closer */
.ks-speaker:first-child{padding-top:clamp(32px, 4.4vw, 56px);}
.ks-speaker:nth-of-type(even){background:var(--tint);}
.ks-speaker-inner{
  display:grid;
  grid-template-columns:220px minmax(0, 1fr);
  gap:clamp(32px, 4.4vw, 56px);
  align-items:start;
}
/* every second speaker mirrors the layout: text left, photo right */
.ks-speaker:nth-of-type(even) .ks-speaker-inner{
  grid-template-columns:minmax(0, 1fr) 220px;
}
.ks-speaker:nth-of-type(even) .ks-portrait{order:2;}

/* the portrait stays put at the top of its row and scrolls with the page;
   position:relative only anchors the decorative offset outline behind it
   (the margin leaves room for that outline) */
.ks-portrait{
  position:relative;
  margin:0 14px 14px 0;
}
.ks-speaker:nth-of-type(even) .ks-portrait{margin:0 0 14px 14px;}
.ks-portrait::before{
  content:"";
  position:absolute;
  inset:14px -14px -14px 14px;
  border:2px solid var(--accent);
  border-radius:6px;
}
.ks-speaker:nth-of-type(even) .ks-portrait::before{inset:14px 14px -14px -14px;}
.ks-portrait img{
  position:relative;
  display:block;
  width:100%;
  height:auto;
  aspect-ratio:4 / 5;
  object-fit:cover;
  object-position:center 20%;
  border-radius:6px;
  background:var(--tint);
  box-shadow:0 18px 40px rgba(109,22,66,.18);
}

.ks-detail{min-width:0;}
.ks-name{
  margin:0 0 12px;
  font-size:clamp(26px, 3.4vw, 36px);
  font-weight:700;
  line-height:1.2;
  color:var(--primary);
}
.ks-affil{
  margin:0 0 22px;
  font-size:16px;
  line-height:1.6;
  color:#555;
}
.ks-affil span{display:block;}
.ks-affil .ks-pos{font-weight:700;color:var(--text);}

/* the speech title follows the name, the usual order on conference keynote
   pages (who first, then what they will talk about). A light card: white to
   pale pink, a pill label and a large faint quote mark in the corner. The
   white start and the soft shadow keep it distinct on both the white and the
   tinted speaker sections. */
.ks-talk{
  position:relative;
  overflow:hidden;
  margin:0 0 30px;
  padding:20px 72px 22px 26px;
  background:linear-gradient(135deg, #fff 0%, var(--tint) 100%);
  border:1px solid #f0d6e3;
  border-radius:8px;
  box-shadow:0 8px 22px rgba(142,33,87,.10);
}
/* oversized closing quote mark, purely decorative */
.ks-talk::after{
  content:"\201D";
  position:absolute;
  top:-14px;
  right:18px;
  font-family:Georgia,"Times New Roman",serif;
  font-size:130px;
  line-height:1;
  color:var(--accent);
  opacity:.14;
  pointer-events:none;
}
.ks-sub{
  margin:0 0 8px;
  font-size:13px;
  font-weight:700;
  letter-spacing:1px;
  text-transform:uppercase;
  color:var(--primary);
}
/* "Speech Title" becomes a small filled pill */
.ks-talk .ks-sub{
  display:inline-block;
  margin:0 0 12px;
  padding:4px 12px;
  border-radius:999px;
  background:var(--primary);
  color:#fff;
  font-size:12px;
}
.ks-title{
  position:relative;          /* above the decorative quote mark */
  margin:0;
  font-size:clamp(20px, 2.4vw, 26px);
  font-weight:700;
  line-height:1.35;
  color:var(--primary);
}
.ks-text section + section{
  margin-top:24px;
  padding-top:22px;
  border-top:1px solid #e9cfdc;
}
.ks-text p{
  margin:0 0 12px;
  font-size:16px;
  line-height:1.8;
}
.ks-text p:last-child{margin-bottom:0;}

/* "To be announced" placeholders: grey italic like .tbc elsewhere; in the
   title block it also drops to body size */
.ks-speaker .tbc{color:#777;font-style:italic;}
.ks-talk .ks-title.tbc{
  font-size:17px;
  font-weight:400;
  color:#777;
}

/* tablet and below: one column, photo first */
@media (max-width:900px){
  .ks-speaker-inner,
  .ks-speaker:nth-of-type(even) .ks-speaker-inner{grid-template-columns:1fr;}
  .ks-portrait,
  .ks-speaker:nth-of-type(even) .ks-portrait{
    position:relative;
    top:auto;
    order:0;
    width:min(200px, calc(100% - 12px));
    margin:0 12px 12px 0;
  }
  .ks-portrait::before,
  .ks-speaker:nth-of-type(even) .ks-portrait::before{inset:12px -12px -12px 12px;}
}
@media (max-width:640px){
  .ks-talk{padding:16px 48px 18px 22px;}
  .ks-talk::after{font-size:96px;right:10px;top:-10px;}
  .ks-text p{font-size:15px;}
}

/* ---------- Footer ---------- */
footer.site-footer{
  background:#3a1027;
  color:#e7cfdc;
  font-size:14px;
  padding:26px var(--gutter);
  text-align:center;
}
footer.site-footer a{color:#f5a8cd;}


/* ============================================================
   Tablet — iPad landscape and small laptops (<= 1024px)
   Nav still one justified row, tighter type.
   ============================================================ */
@media (max-width:1024px){
  :root{--nav-link-pad:7px;}
  .nav-inner{gap:2px;}
  .nav-inner > a,
  .nav-inner .sub-toggle{padding-top:13px;padding-bottom:10px;}
}

/* ============================================================
   Tablet portrait (<= 900px)
   Intro drops to a single column.
   ============================================================ */
@media (max-width:900px){
  .intro{grid-template-columns:1fr;}
  /* stacked: the panel hugs the mark and keeps the same left edge as the text */
  .brand-mark{justify-self:start;}

  /* the side panel moves below the text, so its divider moves to the top */
  /* minmax(0, 1fr), not 1fr: a bare 1fr track can't shrink below its content,
     so the fee table's min-width would stretch the page past a phone screen
     instead of scrolling inside .table-wrap */
  .page-grid,
  .tracks-grid{grid-template-columns:minmax(0, 1fr);}
  .side-panel{
    border-left:0;
    border-top:1px solid #eadfe5;
    padding-left:0;
    padding-top:clamp(18px, 3vw, 26px);
  }
}

/* ============================================================
   Narrow tablet (<= 820px)
   Nav wraps onto two centred rows instead of shrinking further.
   ============================================================ */
@media (max-width:820px) and (min-width:641px){
  .nav-inner{
    flex-wrap:wrap;
    justify-content:center;
    padding:6px calc(var(--nav-inset) - var(--nav-link-pad));
  }
  .nav-inner > a,
  .nav-inner .sub-toggle{
    font-size:14px;
    padding:9px 10px 6px;
  }
}

/* ============================================================
   Phone (<= 640px)
   Hamburger menu, stacked logo bar.
   ============================================================ */
@media (max-width:640px){
  .logo-bar{
    gap:8px;
    padding:6px var(--gutter);
  }
  /* three signatures in one row is tight on a phone, so trim the two partner
     logos rather than letting them push the bar out of the viewport */
  .logo-bar .logo-aapsef{height:clamp(24px, 4.9vw, 31px);}
  .logo-bar .logo-aidcec{height:clamp(24px, 4.8vw, 30px);}

  .nav-toggle{display:block;}
  .nav-inner{
    display:none;
    flex-direction:column;
    flex-wrap:nowrap;
    align-items:stretch;
    gap:0;
    padding:0;
  }
  .nav-inner.open{display:flex;}
  .nav-inner > a,
  .nav-inner .sub-toggle{
    font-size:16px;
    padding:13px var(--gutter);
    white-space:normal;
    border-top:1px solid rgba(255,255,255,.18);
    border-bottom:0;
    border-left:4px solid transparent;
  }
  /* stacked menu: mark the current page with a pink bar on the left */
  .nav-inner > a.active,
  .nav-inner .sub-toggle.active{
    border-left-color:var(--accent-soft);
    border-bottom-color:transparent;
  }

  /* stacked menu: the submenu unfolds in place instead of floating */
  .has-sub{display:block;width:100%;}
  .nav-inner .sub-toggle{
    width:100%;
    justify-content:space-between;
    text-align:left;
  }
  .sub-menu{
    position:static;
    min-width:0;
    max-width:none;
    background:var(--primary-dark);
    box-shadow:none;
  }
  .sub-menu a{
    font-size:15px;
    padding:12px var(--gutter) 12px calc(var(--gutter) + 18px);
    border-top:1px solid rgba(255,255,255,.12);
  }
  .sub-menu li:first-child a{border-top:1px solid rgba(255,255,255,.12);}

  .cta{display:block;text-align:center;}
  .intro-body p,
  .intro-meta,
  .section p{font-size:15px;}
  /* narrow screens: stack each label above its value */
  .intro-meta{grid-template-columns:1fr;gap:2px;}
  .intro-meta dd{margin-bottom:12px;}
  .intro-meta dd:last-child{margin-bottom:0;}

  .track-list{font-size:15px;padding-left:1.5em;}
  .track-list.split li{margin-bottom:8px;}

  .page-head-meta{text-align:left;}
  /* direct children only, for the same reason as the base rule: the card and
     list paragraphs keep their own smaller type */
  .page-main > p,
  .guide-list{font-size:15px;}

  /* committee cards: the portraits shrink a little so the name and the
     affiliation next to them keep a usable column */
  .person-photo{width:84px;height:105px;}

  /* two columns fit a phone fine once the padding is trimmed, so the fee table
     fills the column instead of needing a sideways scroll */
  .fee-table{min-width:0;font-size:14px;}
  .fee-table th,
  .fee-table td{padding:9px 10px;}

  /* phone: the rundown shrinks a lot at this width, so the open / download
     buttons take the full column and are easy to hit */
  .rundown-actions .cta{flex:1 1 100%;}
}