/* ==========================================================================
   NIA · Your way in, final mockup (round 2's choice, October 2026)
   Round 2's homepage with the photo band (hero "band") of the Acropolis and the
   baseline colours, house palette A as in round 1; News & events and the lecture
   page from round 1, with round 2's three-language header.
   Built from design/mockups/r2-your-way-in/ (style.css + heroes/band.css) and
   design/mockups/4-your-way-in/ (the two pages' rules). The colour roles below
   are fixed: the switcher that varied them is not part of this folder.
   Rule of this direction: the lamp marks what is chosen for you.
   ========================================================================== */

:root{
  color-scheme: light;
  /* Roles, baseline = palette A (round 1) */
  --paper:#ffffff; --ink:#232c39;
  --primary:#273e64; --primary-deep:#0f2240;
  --lamp:#f2e0b5; --lintel:#273e64; --accent:#7f5c1d; --overlay:#ffffff;
  --strip:#ecf0f8; --tint:#ecf0f8; --dtile:#f2e0b5; --signal:#fa8f2e; --link:#2a5596;
  --foot-bg:#0f2240; --glow:#e9d095;
  /* Derived: what sits on each role (round 2's palette-core.js, baseline values) */
  --lamp-ink:#0f2240; --lamp-sub:#232c39; --lamp-label:#0f2240; --lamp-line:color-mix(in srgb, #0f2240 16%, transparent); --lamp-focus:#0f2240;
  --lintel-on:#273e64; --card-edge:none;
  --strip-ink:#0f2240; --strip-sub:#232c39;
  --overlay-ink:#0f2240; --overlay-head:#273e64; --overlay-sub:#232c39; --overlay-label:#7f5c1d; --overlay-line:color-mix(in srgb, #0f2240 16%, transparent); --overlay-focus:#0f2240;
  --dtile-ink:#273e64; --dtile-sub:#0f2240; --signal-ink:#0f2240;
  --foot-tx:#b2c6e2; --foot-link:#f2e0b5; --foot-line:rgb(178 198 226 / .28);
  --primary-pale:#b2c6e2; --slate:#586170; --divider:#d5dbe6;
  --mt:#316d7a;

  --radius:2px;
  --door-gap:clamp(6px,1.2vw,16px);   /* the doors' gap: heroes line blocks up on the door edges with it */
  --gutter:clamp(16px, 4vw, 48px);
  --max:1344px;
  --sec:clamp(72px, 8.5vw, 128px);
  --ease:cubic-bezier(.2,.7,.2,1);      /* fades and colour */
  --ease-move:cubic-bezier(.3,.3,.3,1);   /* things that travel: leave at an even pace (so a retarget keeps moving), land without a crawl */

  /* Type B */
  --C:"Commissioner", Arial, sans-serif;
  --P:"Piazzolla", Georgia, serif;
  --fvs-h:"FLAR" 100, "VOLM" 100;
  --fvs-ui:"FLAR" 100, "VOLM" 0;
  --fs-display:clamp(2.375rem, 1.5435rem + 3.696vw, 4.5rem);
  --fs-h1:clamp(1.875rem, 1.4837rem + 1.739vw, 2.875rem);
  --fs-h2:clamp(1.5625rem, 1.3424rem + 0.978vw, 2.125rem);
  --fs-h3:clamp(1.375rem, 1.2772rem + 0.4348vw, 1.625rem);
  --fs-title:clamp(1.25rem, 1.1522rem + 0.4348vw, 1.5rem);
  --fs-lead:clamp(1.3125rem, 1.288rem + 0.1087vw, 1.375rem);
  --fs-body:clamp(1.125rem, 1.1rem + 0.1087vw, 1.1875rem);
  --fs-small:clamp(0.875rem, 0.8505rem + 0.109vw, 0.9375rem);
  --fs-label:clamp(0.8125rem, 0.788rem + 0.109vw, 0.875rem);
}

/* ---------- Base ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-padding-top:20px;background:var(--paper)}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--P);font-size:var(--fs-body);line-height:1.6;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:clip}
img,svg{display:block;max-width:100%}
h1,h2,h3,h4,p,ul,ol,figure,blockquote,dl,dd{margin:0}
ul,ol{padding:0;list-style:none}
button,input,select{font:inherit;color:inherit}
p{text-wrap:pretty}
a{color:var(--link);text-decoration-line:underline;text-decoration-thickness:1px;text-underline-offset:.18em}
a:hover{text-decoration-thickness:2px}
em,i,cite{font-style:italic}
:lang(grc){font-family:var(--P);font-style:normal}
.vh{position:absolute !important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* House focus ring: 3 px navy-deep outline + sand inner ring */
:focus-visible{outline:3px solid var(--primary-deep);outline-offset:3px;box-shadow:0 0 0 3px var(--glow)}
:focus:not(:focus-visible){outline:none}
.skip{position:absolute;left:8px;top:-80px;z-index:200;background:var(--paper);color:var(--primary);padding:10px 14px;font-family:var(--C);font-variation-settings:var(--fvs-ui);font-weight:600;font-size:15px}
.skip:focus{top:8px}

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{transition:none !important;animation:none !important;scroll-behavior:auto !important}
}

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

/* ---------- Type steps ---------- */
.t-display,.t-h1,.t-h2,.t-h3,.t-title{font-family:var(--C);font-variation-settings:var(--fvs-h);color:var(--primary);text-wrap:balance}
.t-display{font-size:var(--fs-display);line-height:1.02;letter-spacing:-.02em;font-weight:300}
.t-h1{font-size:var(--fs-h1);line-height:1.1;letter-spacing:-.015em;font-weight:500}
.t-h2{font-size:var(--fs-h2);line-height:1.18;letter-spacing:-.01em;font-weight:500}
.t-h3{font-size:var(--fs-h3);line-height:1.25;letter-spacing:-.005em;font-weight:600}
.t-title{font-size:var(--fs-title);line-height:1.25;letter-spacing:-.005em;font-weight:500}
.lead{font-family:var(--P);font-size:var(--fs-lead);line-height:1.5}
.ui{font-family:var(--C);font-variation-settings:var(--fvs-ui)}
.meta{font-family:var(--C);font-variation-settings:var(--fvs-ui);font-size:var(--fs-small);line-height:1.45;color:var(--slate)}
.label,.kicker{font-family:var(--C);font-variation-settings:var(--fvs-ui);font-size:var(--fs-label);line-height:1.4;font-weight:500;letter-spacing:.01em}
.kicker{color:var(--accent)}
.num{font-family:var(--P);font-variant-numeric:tabular-nums}

/* ---------- Small house components ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;padding:10px 18px;border:1px solid transparent;border-radius:var(--radius);font-family:var(--C);font-variation-settings:var(--fvs-ui);font-weight:600;font-size:var(--fs-small);line-height:1.2;text-decoration:none;cursor:pointer;background:none;text-align:center}
.btn svg{width:18px;height:18px;flex:none}
.btn-primary{background:var(--primary);color:#fff}
.btn-primary:hover{background:var(--primary-deep)}
.btn-secondary{background:var(--paper);color:var(--primary);border-color:var(--primary)}
.btn-secondary:hover{background:var(--tint)}
.btn-quiet{background:var(--paper);color:var(--primary);border-color:var(--slate)}
.btn-quiet:hover{background:var(--tint)}
.badge{display:inline-block;background:var(--signal);color:var(--signal-ink);font-family:var(--C);font-variation-settings:var(--fvs-ui);font-weight:600;font-size:var(--fs-label);letter-spacing:.01em;line-height:1.35;padding:3px 10px;border-radius:var(--radius)}
.chip{display:inline-block;background:var(--tint);color:var(--primary);font-family:var(--C);font-variation-settings:var(--fvs-ui);font-weight:500;font-size:var(--fs-label);line-height:1.35;padding:3px 9px;border-radius:var(--radius)}
.deadline{color:var(--ink);font-family:var(--C);font-variation-settings:var(--fvs-ui);font-weight:600;font-size:var(--fs-small);line-height:1.4}
.dtile{flex:none;width:clamp(60px,6vw,76px);aspect-ratio:1;background:var(--dtile);display:flex;flex-direction:column;align-items:center;justify-content:center;border-radius:0}
.dtile .dd{font-family:var(--C);font-variation-settings:var(--fvs-h);font-weight:500;font-size:clamp(1.625rem,1.35rem + .9vw,2.125rem);line-height:1;color:var(--dtile-ink);font-variant-numeric:tabular-nums}
.dtile .dm{margin-top:3px;font-family:var(--C);font-variation-settings:var(--fvs-ui);font-weight:600;font-size:13px;color:var(--dtile-sub);line-height:1}
.dtile.on-sand{background:var(--paper)}
.dtile.on-sand .dd{color:var(--primary)}
.dtile.on-sand .dm{color:var(--primary-deep)}
.ext{display:inline-block;width:.72em;height:.72em;margin-left:.2em;vertical-align:baseline;flex:none}

/* "For:" labels: who an item is for (mist, as the house sets audience labels) */
.for{display:flex;flex-wrap:wrap;align-items:center;gap:6px}
.for > .for-k{font-family:var(--C);font-variation-settings:var(--fvs-ui);font-size:var(--fs-label);font-weight:500;color:var(--slate);margin-right:2px}

/* Machine-translated note (house component, paper variant) */
.mt{background:var(--paper);border:1px solid var(--divider);border-left:3px solid var(--mt);padding:14px 16px;font-family:var(--C);font-variation-settings:var(--fvs-ui);font-size:var(--fs-small);line-height:1.5}
.mt-label{display:flex;align-items:center;gap:8px;color:var(--mt);font-weight:600}
.mt-label svg{flex:none;width:18px;height:18px}
.mt p + p{margin-top:.35em}

/* Section head: a 2 px navy rule over each block, as in the styleguide */
.sec{padding-top:var(--sec)}
.sec-head{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:8px 24px;border-top:2px solid var(--primary);padding-top:18px;margin-bottom:clamp(24px,3vw,40px)}
.more{font-family:var(--C);font-variation-settings:var(--fvs-ui);font-weight:600;font-size:var(--fs-small);color:var(--primary);display:inline-flex;align-items:center;gap:6px}
.more svg{width:16px;height:16px}

/* ==========================================================================
   Header: a mist status strip (what is open today) over a white bar
   ========================================================================== */
.site{position:relative;z-index:50;background:var(--paper);border-bottom:1px solid var(--divider)}
.status{background:var(--strip);font-family:var(--C);font-variation-settings:var(--fvs-ui);font-size:var(--fs-label);line-height:1.35;color:var(--strip-sub)}
.status-in{display:flex;align-items:center;justify-content:space-between;gap:12px 24px;min-height:40px}
.today{display:flex;align-items:center;gap:8px;min-width:0}
.today svg{width:16px;height:16px;flex:none;color:var(--strip-ink)}
.today b{font-weight:600;color:var(--strip-ink)}
.util{display:flex;align-items:center;gap:20px;flex:none}
.util > a{color:var(--strip-ink);font-weight:500}
.lang{display:inline-flex;border:1px solid var(--slate);border-radius:var(--radius);overflow:hidden;font-weight:600}
.lang a{display:grid;place-items:center;min-width:38px;min-height:28px;padding:0 8px;color:var(--primary);text-decoration:none}
.lang a + a{border-left:1px solid var(--slate)}
.lang a[aria-current]{background:var(--primary);color:#fff}
.lang a:focus-visible{outline-offset:-3px;box-shadow:inset 0 0 0 6px var(--glow)}
/* A dark strip (set by the switcher): the same parts in white */
[data-strip="dark"] .today svg,[data-strip="dark"] .util > a{color:#fff}
[data-strip="dark"] .lang,[data-strip="dark"] .lang a + a{border-color:rgb(255 255 255 / .55)}
[data-strip="dark"] .lang a{color:#fff}
[data-strip="dark"] .lang a[aria-current]{background:#fff;color:var(--strip)}
[data-strip="dark"] .lang a[aria-current]:focus-visible{outline-color:var(--strip)}
[data-strip="dark"] .status :focus-visible{outline-color:#fff}

.bar-in{display:flex;align-items:center;gap:clamp(12px,2vw,28px);min-height:80px}
/* The lockup in three languages, as on the institute's own artwork: English in semibold, Dutch and Greek below it */
.brand{display:flex;align-items:center;gap:14px;color:var(--primary);text-decoration:none;margin-right:auto;flex:none}
.brand .lion{width:54px;height:auto;fill:currentColor}
.brand-name{font-family:var(--C);font-variation-settings:var(--fvs-h);font-weight:400;font-size:15px;line-height:1.22;letter-spacing:0}
.brand-name span{display:block;white-space:nowrap}
.brand-name span:first-child{font-weight:600;font-size:16.5px;line-height:1.18;margin-bottom:1px}

.nav-l{display:flex;align-items:stretch}
.nav-l > li{position:relative;display:flex}
.nav-a{display:flex;align-items:center;min-height:80px;padding:0 11px;font-family:var(--C);font-variation-settings:var(--fvs-ui);font-weight:500;font-size:15.5px;line-height:1.2;color:var(--primary-deep);text-decoration:none;white-space:nowrap;box-shadow:inset 0 -3px 0 transparent;transition:box-shadow .15s ease}
.nav-l > li:hover > .nav-a{box-shadow:inset 0 -3px 0 var(--divider)}
.nav-a[aria-current]{box-shadow:inset 0 -3px 0 var(--primary) !important;font-weight:600}
.nav-a:focus-visible{outline-offset:-3px;box-shadow:inset 0 0 0 6px var(--glow)}

/* Second level, phrased as tasks */
.sub{position:absolute;top:100%;left:0;z-index:60;min-width:300px;background:var(--paper);border:1px solid var(--divider);border-top:3px solid var(--primary);padding:18px 22px 20px;box-shadow:0 18px 40px rgb(15 34 64 / .12);display:none}
.has-sub:hover > .sub,.has-sub:focus-within > .sub{display:block}
.nav-l > li:nth-last-child(-n+3) > .sub{left:auto;right:0}
.sub.wide{min-width:580px}
.sub-cols{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 28px}
.sub-h{font-family:var(--C);font-variation-settings:var(--fvs-ui);font-size:var(--fs-label);font-weight:600;color:var(--accent);margin-bottom:6px}
.sub li a{display:block;padding:7px 0;font-family:var(--C);font-variation-settings:var(--fvs-ui);font-size:15px;font-weight:500;line-height:1.3;color:var(--primary-deep);text-decoration:none}
.sub li a:hover{text-decoration:underline}
.sub li a small{display:block;font-size:13px;font-weight:400;color:var(--slate);margin-top:1px}
.sub-who{display:flex;align-items:center;gap:12px;margin-top:14px;padding-top:14px;border-top:1px solid var(--divider);font-family:var(--C);font-variation-settings:var(--fvs-ui);font-size:13.5px;line-height:1.35;color:var(--ink)}
.sub-who img{width:40px;height:40px;object-fit:cover;flex:none}
.sub-who b{display:block;color:var(--primary-deep);font-weight:600}

.search-btn{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 14px;border:1px solid var(--slate);border-radius:var(--radius);color:var(--primary);text-decoration:none;font-family:var(--C);font-variation-settings:var(--fvs-ui);font-weight:600;font-size:15px;flex:none}
.search-btn svg{width:18px;height:18px}
.search-btn:hover{background:var(--tint)}
.menu-btn{display:none;align-items:center;gap:8px;min-height:44px;padding:0 14px;border:0;border-radius:var(--radius);background:var(--primary);color:#fff;font-family:var(--C);font-variation-settings:var(--fvs-ui);font-weight:600;font-size:15px;cursor:pointer;flex:none}
.menu-btn svg{width:18px;height:18px}
.menu-btn .i-close{display:none}
.menu-btn[aria-expanded="true"] .i-open{display:none}
.menu-btn[aria-expanded="true"] .i-close{display:block}

/* Mobile menu: starts with the same question as the homepage */
.menu{position:absolute;left:0;right:0;top:100%;background:var(--paper);border-top:1px solid var(--divider);box-shadow:0 24px 40px rgb(15 34 64 / .18);max-height:calc(100dvh - 100px);overflow-y:auto;overscroll-behavior:contain}
.menu[hidden]{display:none}
.menu-in{padding-block:20px 32px}
.menu-q{font-family:var(--C);font-variation-settings:var(--fvs-h);font-weight:500;font-size:22px;line-height:1.2;color:var(--primary)}
.menu-doors{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin-top:14px}
.menu-doors a{display:flex;flex-direction:column;justify-content:flex-end;min-height:72px;padding:13px 12px 10px;background:var(--tint);box-shadow:inset 0 3px 0 var(--lintel-tint, var(--lintel));color:var(--primary-deep);text-decoration:none;font-family:var(--C);font-variation-settings:var(--fvs-ui);font-size:13px;line-height:1.25;border-radius:var(--radius)}
.menu-doors a b{display:block;font-size:16px;font-weight:600;font-variation-settings:var(--fvs-h)}
.menu-nav{margin-top:20px;border-top:1px solid var(--divider)}
.menu-nav > li{border-bottom:1px solid var(--divider)}
.menu-nav summary{display:flex;align-items:center;justify-content:space-between;min-height:54px;cursor:pointer;list-style:none;font-family:var(--C);font-variation-settings:var(--fvs-ui);font-weight:600;font-size:17px;color:var(--primary-deep)}
.menu-nav summary::-webkit-details-marker{display:none}
.menu-nav summary svg{width:18px;height:18px;color:var(--primary);transition:transform .2s}
.menu-nav details[open] summary svg{transform:rotate(180deg)}
.menu-nav summary[aria-current]{box-shadow:inset 3px 0 0 var(--primary);padding-left:12px}
.menu-nav details ul{padding:0 0 14px 12px}
.menu-nav details li a{display:block;padding:8px 0;font-family:var(--C);font-variation-settings:var(--fvs-ui);font-size:16px;color:var(--primary);text-decoration:none}
.menu-util{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px;margin-top:20px;font-family:var(--C);font-variation-settings:var(--fvs-ui);font-size:var(--fs-small)}
.menu-util a{color:var(--primary)}

/* The three-line lockup is wider than round 1's two lines: the nav tightens a little before it folds */
@media (max-width: 1399px){
  .nav-a{padding:0 9px;font-size:15px}
  .bar-in{gap:clamp(12px,1.4vw,20px)}
}
@media (max-width: 1279px){
  .nav,.search-btn .sb-t{display:none}
  .search-btn{padding:0 12px}
  .menu-btn{display:inline-flex}
  .bar-in{min-height:74px}
}
@media (max-width: 700px){
  .status .later,.util > a{display:none}
  .brand{gap:10px}
  .brand .lion{width:40px}
  .brand-name{font-size:12.5px;line-height:1.2}
  .brand-name span:first-child{font-size:13.5px}
  .bar-in{min-height:66px;gap:8px}
  .search-btn{min-width:44px;justify-content:center}
  .menu-btn .mb-t{display:none}
  .menu-btn{min-width:44px;justify-content:center;padding:0}
}
@media (max-width: 380px){
  .brand{gap:8px}
  .brand .lion{width:34px}
  .brand-name{font-size:11.5px}
  .brand-name span:first-child{font-size:12.5px}
}
/* 320 px: the trilingual lockup would push the Menu button off the screen */
@media (max-width: 350px){
  .bar-in{gap:6px}
  .brand{gap:6px}
  .brand .lion{width:28px}
  .brand-name{font-size:10.5px}
  .brand-name span:first-child{font-size:11.5px}
  .search-btn,.menu-btn{min-width:40px;padding:0}
}

/* ==========================================================================
   Home hero: the question, the four doors, the spill and the panel
   ========================================================================== */
.ask{padding-top:clamp(28px,4vw,56px)}
/* Named areas, so a hero layout (heroes/*.css) can move the photo (ph), the question (q) and the shortcuts (sc)
   without touching the doors. Without a hero (the round-1 baseline) the photo is not shown. */
.ask-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,21rem);grid-template-areas:"q sc" "doors doors";gap:0 clamp(32px,5vw,80px)}
.ask-q{grid-area:q;align-self:end}
.ask-q .kicker{margin-bottom:10px}
.ask-grid > .shortcuts{grid-area:sc;align-self:end}
.ask-grid > .doorway{grid-area:doors}
.hero-ph{grid-area:ph;display:none;position:relative;margin:0;overflow:hidden;background:var(--primary-deep)}
.hero-ph img{width:100%;height:100%;object-fit:cover}
.hero-cap{position:absolute;right:0;bottom:0;background:var(--primary-deep);color:#fff;font-family:var(--C);font-variation-settings:var(--fvs-ui);font-size:12.5px;line-height:1.3;padding:5px 9px}
.ask-lead{text-wrap:balance;margin-top:14px;font-family:var(--P);font-size:var(--fs-lead);line-height:1.45;color:var(--ink);max-width:34rem}

.shortcuts{border-left:1px solid var(--divider);padding-left:22px}
.shortcuts h2{font-family:var(--C);font-variation-settings:var(--fvs-ui);font-size:var(--fs-label);font-weight:600;color:var(--accent);margin-bottom:4px}
.shortcuts li a{display:flex;align-items:center;gap:10px;padding:5px 0;font-family:var(--C);font-variation-settings:var(--fvs-ui);font-weight:500;font-size:16px;line-height:1.3;color:var(--primary);text-decoration:none}
.shortcuts li a svg{width:16px;height:16px;flex:none;transition:transform .2s ease}
.shortcuts li a svg.ext{width:11px;height:11px;margin-left:-6px;align-self:flex-start;margin-top:.35em}
.shortcuts li a:hover{text-decoration:underline}
.shortcuts li a:hover svg{transform:translateX(3px)}

/* isolation: the light and the captions' ground (z-index below) stack inside the doorway, under its words.
   --d (site.js) is the doors the light still has to cross: less than one goes quicker, each one more takes --wait
   longer, and the chosen room waits as long. The light's leading edge takes --t; --back (site.js) undoes the browser's
   own shortening of a move turned straight back. The new panel comes in after --in (see the panels below). */
.doorway{--gap:var(--door-gap);--bar:4px;--d:1;--back:1;--wait:max(0s, (var(--d) - 1) * .07s);--t:calc((.26s * min(var(--d), 1) + var(--wait)) * var(--back));
  --in:calc(.08s + min(var(--wait), .03s));margin-top:clamp(24px,3.4vw,44px);isolation:isolate}
.doors{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--gap)}
.door{appearance:none;display:flex;flex-direction:column;min-width:0;margin:0;padding:0;border:0;border-radius:0;background:none;text-align:left;cursor:pointer;color:inherit}
.door-ph{display:block;aspect-ratio:4 / 3;overflow:hidden;background:var(--tint)}
.door-ph img{width:100%;height:100%;object-fit:cover;transition:transform .7s var(--ease), filter .45s var(--ease)}
/* The lit door: the rooms you did not choose dim, the chosen one keeps its light (only with JS, so nothing dims without a choice) */
.js .door[aria-selected="false"] .door-ph img{filter:brightness(.76) saturate(.65)}
.js .door[aria-selected="false"]:focus-visible .door-ph img{filter:none}
/* The chosen room lights up with the light: on its curve, and on a longer way once it is near */
.js .door[aria-selected="true"] .door-ph img{transition:transform .7s var(--ease), filter .3s var(--ease-move) var(--wait)}
.door-cap{position:relative;flex:1 1 auto;display:flex;flex-direction:column;padding:16px 18px 20px}
/* The caption's ground, paper with a divider bar along the top; it lies under the light, the words lie over it */
.door-cap::before{content:"";position:absolute;inset:0;z-index:-2;background:var(--paper);box-shadow:inset 0 var(--bar) 0 var(--divider);transition:background-color .25s var(--ease)}
.door-pre{display:block;font-family:var(--C);font-variation-settings:var(--fvs-ui);font-size:15px;line-height:1.3;color:var(--slate);text-wrap:balance}
.door-key{display:block;font-family:var(--C);font-variation-settings:var(--fvs-h);font-weight:600;font-size:var(--fs-h3);line-height:1.12;letter-spacing:-.005em;color:var(--primary);margin-top:2px}
.door-hint{margin-top:8px;font-family:var(--C);font-variation-settings:var(--fvs-ui);font-size:var(--fs-small);line-height:1.4;color:var(--slate)}
.door-pre,.door-key,.door-hint{transition:color var(--t) var(--ease-move)}
@media (hover: hover){
.door:hover .door-ph img{transform:scale(1.035)}
.js .door[aria-selected="false"]:hover .door-ph img{filter:brightness(.93) saturate(.9)}
/* the chosen door too, so a clicked caption keeps its mist until the light covers it */
.door:hover .door-cap::before{background:var(--tint)}
.door:hover .door-key{text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:.16em}
}
/* Where no light travels (before site.js runs, and on the smallest phones) the chosen caption is lit where it is */
.doorway:not(.is-live) .door[aria-selected="true"] .door-cap::before{background:var(--lamp);box-shadow:inset 0 var(--bar) 0 var(--lintel-on)}
.door[aria-selected="true"] .door-pre,.door[aria-selected="true"] .door-hint{color:var(--lamp-sub)}
.door[aria-selected="true"] .door-key{color:var(--lamp-ink);text-decoration:none}
.door:focus-visible{outline-offset:4px}
.door .dsk{display:inline}
/* photo=building: the hero already shows the house, so door 4 shows its front door, close up
   (scale, not transform, so the hover's scale(1.035) still adds to it) */
html[data-photo="building"]:not([data-hero="none"]) .door[data-key="friends"] .door-ph img{scale:1.9;transform-origin:50% 74%}

/* The light: one sand sheet with a navy bar along its top, under the chosen caption's words and down over the threshold.
   site.js sets --l/--r to the door's edges and --cap to its caption's height (the defaults draw door 1 without JS).
   Each edge is its own clip with its own timing (.spill cuts the left edge, its ::before the right), so the edge in
   front leads and the other follows. site.js reads where the light is from the first x below: keep var(--l) first.
   Both clips reach 1px above the sheet, so its pixel-snapped box, not a clip edge, draws the bar's top row. */
.spill{--k:clamp(14px,2.2vw,30px);--f:calc(var(--k) * 1.6);--l:0px;--r:calc((100% - 3 * var(--gap)) / 4);--cap:0px;height:calc(var(--k) + 2px);margin-block:-1px;position:relative;z-index:-1;
  clip-path:polygon(var(--l) calc(-1px - var(--cap)), 100% calc(-1px - var(--cap)), 100% 100%, calc(var(--l) - var(--f)) 100%, var(--l) 0)}
.spill::before{content:"";position:absolute;inset:calc(-1 * var(--cap)) 0 0;background:linear-gradient(var(--lintel-on) 0 0) 0 0 / 100% var(--bar) no-repeat var(--lamp);
  clip-path:polygon(0 -1px, var(--r) -1px, var(--r) var(--cap), calc(var(--r) + var(--f)) 100%, 0 100%)}
/* Without JS it is only the threshold under door 1, whose caption is lit where it is */
.doorway:not(.is-live) .spill::before{background:var(--lamp)}
.spill,.spill::before{transition:clip-path var(--t) var(--ease-move)}
.doorway[data-dir="1"] .spill,.doorway[data-dir="-1"] .spill::before{transition-duration:calc(var(--t) + .04s)}

.panel{background:var(--lamp);padding:clamp(22px,3.6vw,52px);scroll-margin-top:16px}
.doorway:not(.is-live) .panel + .panel{margin-top:16px}
/* With JS the panels share one place on their box's sand, which eases to the chosen panel's height (site.js sets it).
   The new panel is there at once for keyboard and screen readers. The old words leave at once; the new words, and a
   shrinking box, follow once they have gone (--in: on a longer way a little later, as the light nears, but never
   leaving the box empty while it travels), so two panels never show at once. A growing box cannot cut the old words
   off, so it starts at once (data-grow, site.js) and has mostly grown by the time the new words come. Hidden panels
   still lay out, so their lazy headshots load with the page: in the build, serve those at panel size. */
.is-live .panels{display:grid;grid-template-columns:minmax(0,1fr);align-content:start;overflow:clip;background:var(--lamp);transition:height .36s var(--ease-move) var(--in)}
.is-live[data-grow] .panels{transition-delay:0s}
.is-live .panel{grid-area:1 / 1;align-self:start;background:none;visibility:hidden;transition:visibility 0s .08s}
.is-live .panel.is-on{visibility:visible;transition:none}
.is-live .panel > *{opacity:0;transition:opacity .08s linear}
.is-live .panel.is-on > *{opacity:1;transition:opacity .22s var(--ease) var(--in)}
/* Focus that arrives before the words (Tab right after a door change) brings them at once, so its ring shows */
.is-live .panel.is-on:focus-within > *{opacity:1;transition:none}
/* Print has no light: the chosen caption is lit where it is, and only its panel prints */
@media print{
  .spill{display:none}
  .door[aria-selected="true"] .door-cap::before{background:var(--lamp);box-shadow:inset 0 var(--bar) 0 var(--lintel-on)}
  .is-live .panels{height:auto !important}
  .is-live .panel:not(.is-on){display:none}
}
/* Load, resize and font swaps: straight to the end state */
.boot,.boot *,.boot *::before{transition:none !important}
.panel-head{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:12px clamp(24px,3.5vw,56px);align-items:baseline;padding-bottom:clamp(20px,2.4vw,32px);border-bottom:1px solid var(--lamp-line)}
.panel-head .t-h2{color:var(--lamp-ink)}
.panel-head p{font-family:var(--P);font-size:var(--fs-lead);line-height:1.45;color:var(--lamp-sub);max-width:40rem}
.panel-grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,4fr) minmax(0,3fr);gap:clamp(24px,3.5vw,56px);padding-top:clamp(20px,2.4vw,32px)}
.p-h{font-family:var(--C);font-variation-settings:var(--fvs-ui);font-size:var(--fs-label);font-weight:600;color:var(--lamp-label);margin-bottom:8px}
/* Focus inside the panel: drawn in the panel's own ink, so it shows on any lamp */
.panel :focus-visible{outline-color:var(--lamp-focus)}
.panel .due :focus-visible,.panel .person :focus-visible{outline-color:var(--primary-deep)}
.p-h + .due,.p-h + .nx{margin-top:4px}
* + .p-h.again{margin-top:28px}

.tasks li + li{border-top:1px solid var(--lamp-line)}
.tasks a{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;column-gap:16px;padding:13px 0;color:var(--lamp-ink);text-decoration:none}
.tk{font-family:var(--C);font-variation-settings:var(--fvs-h);font-weight:600;font-size:clamp(1.125rem,1.06rem + .28vw,1.3125rem);line-height:1.25}
.th{grid-column:1;margin-top:2px;font-family:var(--C);font-variation-settings:var(--fvs-ui);font-size:var(--fs-small);line-height:1.4;color:var(--lamp-sub)}
.tasks a > svg{grid-column:2;grid-row:1 / span 2;width:22px;height:22px;color:var(--lamp-ink);transition:transform .2s ease}
.tasks a:hover .tk{text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:.16em}
.tasks a:hover > svg{transform:translateX(4px)}

.due{background:var(--paper);box-shadow:var(--card-edge);padding:16px 18px 18px}
.due + .due{margin-top:10px}
.due h4{margin-top:10px;font-family:var(--C);font-variation-settings:var(--fvs-h);font-weight:600;font-size:18px;line-height:1.25}
.due h4 a{color:var(--primary);text-decoration:none}
.due h4 a:hover{text-decoration:underline}
.due .deadline{margin-top:6px}
.due .who{margin-top:4px;font-family:var(--C);font-variation-settings:var(--fvs-ui);font-size:var(--fs-small);line-height:1.4;color:var(--ink)}

.nx{display:flex;gap:14px;align-items:flex-start;background:var(--paper);box-shadow:var(--card-edge);padding:14px;color:var(--primary-deep);text-decoration:none}
.nx + .nx{margin-top:10px}
.nx .dtile{width:60px}
.nx-k{display:block;font-family:var(--C);font-variation-settings:var(--fvs-ui);font-size:var(--fs-label);font-weight:500;color:var(--accent)}
.nx-t{display:block;margin-top:2px;font-family:var(--C);font-variation-settings:var(--fvs-h);font-weight:600;font-size:17px;line-height:1.25;color:var(--primary)}
.nx-m{display:block;margin-top:4px;font-family:var(--C);font-variation-settings:var(--fvs-ui);font-size:var(--fs-label);line-height:1.4;color:var(--ink)}
.nx:hover .nx-t{text-decoration:underline}
.nx.big{padding:18px}
.nx.big .nx-t{font-size:var(--fs-title)}

/* The person behind the door */
.person{background:var(--paper);box-shadow:var(--card-edge);display:flex;flex-direction:column}
.person-ph{aspect-ratio:1;overflow:hidden;background:var(--tint)}
.person-ph img{width:100%;height:100%;object-fit:cover}
.person-tx{padding:16px 18px 20px;display:flex;flex-direction:column;gap:2px}
.person .p-h{margin-bottom:4px;color:var(--accent)}
.person-name{font-family:var(--C);font-variation-settings:var(--fvs-h);font-weight:600;font-size:var(--fs-title);line-height:1.2;color:var(--primary-deep)}
.person-role{font-family:var(--C);font-variation-settings:var(--fvs-ui);font-size:var(--fs-small);line-height:1.4;color:var(--slate)}
.person-ask{margin-top:10px;font-family:var(--P);font-size:17px;line-height:1.5;color:var(--ink)}
.person-ways{margin-top:12px;display:flex;flex-direction:column;gap:2px;font-family:var(--C);font-variation-settings:var(--fvs-ui);font-size:var(--fs-small);line-height:1.45}
.person-ways .num{font-family:var(--P)}
.person .btn{margin:0 18px 20px;align-self:flex-start}
.person-tx{flex:1 1 auto}

/* ==========================================================================
   Home: coming up (events + deadlines)
   ========================================================================== */
.coming-grid{display:grid;grid-template-columns:minmax(0,8fr) minmax(0,4fr);gap:clamp(32px,4.5vw,72px)}
.feature{display:grid;grid-template-columns:minmax(0,11fr) minmax(0,10fr);gap:clamp(20px,2.6vw,36px);align-items:start}
.feature-ph{aspect-ratio:16 / 11;overflow:hidden;background:var(--tint)}
.feature-ph img{width:100%;height:100%;object-fit:cover}
.feature-tx > * + *{margin-top:10px}
.feature-tx .t-h3 a,.ev-t a{color:var(--primary);text-decoration:none}
.feature-tx .t-h3 a:hover,.ev-t a:hover{text-decoration:underline}
.feature-tx .t-h3 .l2{display:block;font-weight:400}
.feature .when{display:flex;align-items:center;gap:14px}
.feature .when .dtile{width:64px}
.feature .when p{font-family:var(--C);font-variation-settings:var(--fvs-ui);font-size:var(--fs-small);line-height:1.4;color:var(--ink)}
.feature .when b{display:block;color:var(--primary-deep);font-weight:600}
.speakers-l{font-family:var(--P);font-size:17px;line-height:1.5}
.ev-list{margin-top:clamp(24px,3vw,36px)}
.ev{display:grid;grid-template-columns:auto minmax(0,1fr);gap:4px 20px;padding:20px 0;border-top:1px solid var(--divider)}
.ev .dtile{grid-row:1 / span 4}
.ev-t{font-family:var(--C);font-variation-settings:var(--fvs-h);font-weight:500;font-size:var(--fs-title);line-height:1.25;color:var(--primary);text-wrap:balance}
.ev .meta{color:var(--slate)}
.ev .for{margin-top:6px}

.deadlines{align-self:start}
.deadlines h3{font-family:var(--C);font-variation-settings:var(--fvs-h);font-weight:600;font-size:var(--fs-title);color:var(--primary);margin-bottom:6px}
.dl-i{padding:18px 0;border-top:1px solid var(--divider)}
.dl-i h4{margin-top:10px;font-family:var(--C);font-variation-settings:var(--fvs-h);font-weight:600;font-size:18px;line-height:1.28}
.dl-i h4 a{color:var(--primary);text-decoration:none}
.dl-i h4 a:hover{text-decoration:underline}
.dl-i .deadline{margin-top:6px}
.dl-i .for{margin-top:10px}

/* ==========================================================================
   Home: come by (the Athens photograph with today's practical facts)
   ========================================================================== */
.comeby{position:relative;margin-top:var(--sec);min-height:clamp(560px,52vw,760px);display:flex;align-items:flex-end;background:var(--primary)}
.comeby-ph,.comeby-ph img{position:absolute;inset:0;width:100%;height:100%}
.comeby-ph img{object-fit:cover}
.comeby-in{position:relative;padding-block:clamp(28px,4vw,64px)}
.comeby-card{background:var(--paper);max-width:31rem;padding:clamp(22px,3vw,36px)}
.comeby-card .t-h2{margin-top:8px}
.facts{margin-top:18px;border-top:1px solid var(--divider)}
.facts li{display:grid;grid-template-columns:7.5rem minmax(0,1fr);gap:12px;padding:10px 0;border-bottom:1px solid var(--divider);font-family:var(--C);font-variation-settings:var(--fvs-ui);font-size:var(--fs-small);line-height:1.45}
.facts li > span:first-child{color:var(--slate)}
.facts b{font-weight:600;color:var(--primary-deep)}
.comeby-card .btn{margin-top:20px}
.photo-cap{position:absolute;right:var(--gutter);bottom:12px;background:var(--primary-deep);color:#fff;font-family:var(--C);font-variation-settings:var(--fvs-ui);font-size:12.5px;line-height:1.3;padding:5px 9px}

/* ==========================================================================
   Home: watch again, news, just published
   ========================================================================== */
.watch-grid{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(36px,5vw,80px)}
.video{position:relative;aspect-ratio:16 / 9;background:var(--primary-deep);overflow:hidden}
.video img{width:100%;height:100%;object-fit:cover}
.play{position:absolute;left:clamp(12px,2vw,20px);bottom:clamp(12px,2vw,20px);display:flex;align-items:center;gap:12px;max-width:calc(100% - 24px);padding:8px 16px 8px 8px;border:0;border-radius:var(--radius);background:var(--primary-deep);color:#fff;text-align:left;cursor:pointer;font-family:var(--C);font-variation-settings:var(--fvs-ui);line-height:1.25}
.play .pi{width:40px;height:40px;flex:none;display:grid;place-items:center;background:var(--glow);color:var(--primary-deep);border-radius:var(--radius)}
.play .pi svg{width:16px;height:16px;margin-left:2px}
.play b{display:block;font-weight:600;font-size:15px}
.play small{display:block;font-size:13px;color:var(--primary-pale)}
.play:focus-visible{outline-color:var(--glow);box-shadow:0 0 0 3px var(--primary-deep)}
.rec-tx{margin-top:20px}
.rec-tx > * + *{margin-top:10px}
.rec-tx .t-h3 a{color:var(--primary);text-decoration:none}
.rec-tx .t-h3 a:hover{text-decoration:underline}
.rec-tx .abstract{max-width:38rem}
.nestor{margin-top:16px;padding-left:16px;border-left:3px solid var(--lamp);font-size:17px;line-height:1.55;color:var(--ink);max-width:38rem}
.nestor p:first-child{color:var(--primary);font-size:19px}
.nestor p + p{margin-top:4px;font-family:var(--C);font-variation-settings:var(--fvs-ui);font-size:var(--fs-label);color:var(--slate)}

.news h2{margin-bottom:6px}
.news-l li{padding:16px 0;border-top:1px solid var(--divider)}
.news-l .meta{display:flex;flex-wrap:wrap;gap:4px 10px}
.news-l .meta .num{font-family:var(--P)}
.news-l h3{margin-top:4px;font-family:var(--C);font-variation-settings:var(--fvs-h);font-weight:500;font-size:19px;line-height:1.3}
.news-l h3 a{color:var(--primary);text-decoration:none}
.news-l h3 a:hover{text-decoration:underline}
.pub{display:grid;grid-template-columns:120px minmax(0,1fr);gap:18px;align-items:start;margin-top:22px;padding:18px;background:var(--tint)}
.pub-ph{aspect-ratio:4 / 5;overflow:hidden;background:var(--paper)}
.pub-ph img{width:100%;height:100%;object-fit:cover}
.pub h3{margin-top:4px;font-family:var(--C);font-variation-settings:var(--fvs-h);font-weight:600;font-size:18px;line-height:1.28;color:var(--primary)}
.pub p.meta{margin-top:6px;color:var(--ink)}
.pub a.more{margin-top:10px}

/* ==========================================================================
   Footer: navy-deep, opening with a way to reach a person
   ========================================================================== */
.foot{margin-top:var(--sec);background:var(--foot-bg);color:var(--foot-tx);font-family:var(--C);font-variation-settings:var(--fvs-ui);font-size:var(--fs-small);line-height:1.55;padding-bottom:88px}
.foot a{color:var(--foot-link)}
.foot-ask{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:20px clamp(32px,5vw,80px);align-items:end;padding-block:clamp(40px,5vw,72px) clamp(28px,3.5vw,44px);border-bottom:1px solid var(--foot-line)}
.foot-ask h2{font-family:var(--C);font-variation-settings:var(--fvs-h);font-weight:300;font-size:clamp(1.875rem,1.4rem + 1.9vw,3rem);line-height:1.08;letter-spacing:-.015em;color:#fff;text-wrap:balance}
.ways{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px 28px}
.ways li{display:flex;flex-direction:column;gap:2px;min-width:0}
.ways .w-k{font-size:var(--fs-label);font-weight:600;color:var(--glow)}
.ways a{font-family:var(--C);font-variation-settings:var(--fvs-h);font-weight:500;font-size:clamp(1.125rem,1rem + .5vw,1.375rem);line-height:1.25;overflow-wrap:anywhere}
.ways .num{font-family:var(--P)}
.foot-today{grid-column:2;color:#fff}
.foot-today b{font-weight:600}
.foot-grid{display:grid;grid-template-columns:minmax(0,4fr) repeat(3,minmax(0,2.6fr));gap:32px clamp(24px,3vw,48px);padding-top:clamp(32px,4vw,56px)}
.foot-id{display:flex;gap:16px;align-items:flex-start}
.foot-lion{width:64px;height:auto;flex:none;fill:var(--glow)}
.foot-names span{display:block;font-family:var(--C);font-variation-settings:var(--fvs-h);font-size:16px;line-height:1.35;color:var(--foot-tx)}
.foot-names span:first-child{color:var(--foot-link);font-weight:600}
.foot-addr{margin-top:12px;color:#fff}
.foot-addr .num{font-family:var(--P)}
.foot h3{font-size:var(--fs-label);font-weight:600;color:var(--glow);margin-bottom:8px}
.foot h3 ~ h3{margin-top:22px}
.foot-grid li{padding:3px 0}
.foot-partners{margin-top:clamp(32px,4vw,48px);padding-top:20px;border-top:1px solid var(--foot-line);max-width:62rem;color:var(--foot-tx)}
.foot-partners b{color:#fff;font-weight:600}
.foot-bottom{display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px 24px;margin-top:20px;color:var(--foot-tx)}
.foot-bottom ul{display:flex;flex-wrap:wrap;gap:6px 20px}
.foot :focus-visible{outline-color:var(--glow);box-shadow:0 0 0 3px var(--foot-bg)}
/* ==========================================================================
   Content index: News & events
   ========================================================================== */
.crumbs{padding-top:clamp(20px,2.5vw,32px)}
.crumbs ol{display:flex;flex-wrap:wrap;gap:4px 8px;font-family:var(--C);font-variation-settings:var(--fvs-ui);font-size:var(--fs-label);color:var(--slate)}
.crumbs li{display:flex;align-items:center;gap:8px}
.crumbs li + li::before{content:"";width:6px;height:6px;border-top:1.5px solid var(--slate);border-right:1.5px solid var(--slate);transform:rotate(45deg);margin-right:2px}
.crumbs a{color:var(--primary)}
.idx-head{padding-block:clamp(14px,2vw,24px) clamp(24px,3vw,36px)}
.idx-head .lead{margin-top:12px;max-width:44rem;color:var(--ink)}

.finder{background:var(--tint);padding:clamp(18px,3vw,36px)}
.sbox{display:flex;align-items:stretch;background:var(--paper);border:2px solid var(--primary);border-radius:var(--radius)}
.sbox:focus-within{outline:3px solid var(--primary-deep);outline-offset:3px;box-shadow:0 0 0 3px var(--glow)}
.sbox > svg{width:24px;height:24px;margin:auto 0 auto 16px;color:var(--primary);flex:none}
.sbox input{flex:1 1 auto;min-width:0;min-height:62px;padding:0 14px;border:0;background:transparent;font-family:var(--P);font-size:var(--fs-lead);color:var(--ink)}
.sbox input::placeholder{color:var(--slate);opacity:1}
.sbox input:focus-visible{outline:none;box-shadow:none}
.sbox .btn{border-radius:0;min-height:0;padding-inline:24px;font-size:16px}
.sbox .btn:focus-visible{outline-offset:-6px;box-shadow:inset 0 0 0 9px var(--primary)}
.tries{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:14px;font-family:var(--C);font-variation-settings:var(--fvs-ui);font-size:var(--fs-small)}
.tries > span{color:var(--ink);margin-right:2px}
.tries a{display:inline-flex;align-items:center;min-height:32px;padding:3px 11px;background:var(--paper);border:1px solid var(--slate);border-radius:var(--radius);color:var(--primary);text-decoration:none;font-weight:500}
.tries a q{quotes:"\201C" "\201D"}

.aud{margin-top:22px;padding-top:20px;border-top:1px solid var(--divider)}
.aud-k{display:block;font-family:var(--C);font-variation-settings:var(--fvs-ui);font-size:var(--fs-label);font-weight:600;color:var(--primary-deep);margin-bottom:10px}
.aud-l{display:flex;flex-wrap:wrap;gap:8px}
.aud button{display:inline-flex;align-items:center;gap:10px;min-height:52px;padding:5px 16px 5px 5px;background:var(--paper);border:1px solid var(--slate);border-radius:var(--radius);cursor:pointer;font-family:var(--C);font-variation-settings:var(--fvs-ui);font-weight:500;font-size:15.5px;line-height:1.2;color:var(--primary-deep);text-align:left}
.aud button.all{padding-left:16px}
.aud button img{width:32px;height:42px;object-fit:cover;flex:none}
.aud button .n{font-family:var(--P);font-variant-numeric:tabular-nums;color:var(--slate);font-size:14px;margin-left:2px}
@media (hover: hover){
.aud button:hover{background:var(--lamp)}
.tries a:hover{background:var(--lamp)}
}
.aud button[aria-pressed="true"]{background:var(--lamp);border-color:var(--primary);box-shadow:inset 0 -3px 0 var(--primary);font-weight:600}
.aud button[aria-pressed="true"] .n{color:var(--ink)}

.filters{margin-top:18px}
.f-toggle{display:none}
.f-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr)) auto;gap:14px;align-items:end}
.f{display:flex;flex-direction:column;gap:6px;min-width:0;font-family:var(--C);font-variation-settings:var(--fvs-ui);font-size:var(--fs-label);font-weight:600;color:var(--primary-deep)}
.sel{position:relative}
.sel select{appearance:none;width:100%;min-height:46px;padding:0 38px 0 12px;background:var(--paper);border:1px solid var(--slate);border-radius:var(--radius);font-family:var(--C);font-variation-settings:var(--fvs-ui);font-size:15px;font-weight:500;color:var(--ink);cursor:pointer;text-overflow:ellipsis}
.sel svg{position:absolute;right:12px;top:50%;width:16px;height:16px;transform:translateY(-50%);color:var(--primary);pointer-events:none}
.chk{display:flex;align-items:center;gap:10px;min-height:46px;padding:0 14px;background:var(--paper);border:1px solid var(--slate);border-radius:var(--radius);font-family:var(--C);font-variation-settings:var(--fvs-ui);font-size:15px;font-weight:500;color:var(--ink);cursor:pointer;white-space:nowrap}
.chk input{width:18px;height:18px;margin:0;accent-color:var(--primary)}

.res-bar{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:14px 24px;padding-block:22px 0}
.count{font-family:var(--C);font-variation-settings:var(--fvs-ui);font-size:var(--fs-small);color:var(--ink)}
.count b{font-weight:600;color:var(--primary-deep);font-size:17px}
.count .clear{margin-left:8px}
.res-who{display:flex;align-items:center;gap:12px;padding:6px 14px 6px 6px;background:var(--lamp);font-family:var(--C);font-variation-settings:var(--fvs-ui);font-size:var(--fs-label);line-height:1.35;color:var(--ink)}
.res-who img{width:40px;height:40px;object-fit:cover;flex:none}
.res-who b{color:var(--primary-deep);font-weight:600}

.group{margin-top:clamp(28px,3.5vw,48px)}
.group-h{display:flex;align-items:baseline;gap:12px;border-top:2px solid var(--primary);padding-top:16px}
.group-h .n{font-family:var(--P);font-variant-numeric:tabular-nums;font-size:var(--fs-small);color:var(--slate)}
.yr{display:flex;align-items:baseline;gap:12px;margin-top:clamp(24px,3vw,40px);padding-bottom:10px;font-family:var(--C);font-variation-settings:var(--fvs-h);font-weight:300;font-size:clamp(1.75rem,1.4rem + 1.2vw,2.5rem);line-height:1;color:var(--primary)}
.yr small{font-family:var(--C);font-variation-settings:var(--fvs-ui);font-size:var(--fs-label);font-weight:500;color:var(--slate)}

.r{display:grid;grid-template-columns:76px minmax(0,1fr) minmax(0,17rem);gap:6px clamp(18px,2.5vw,36px);padding:22px 0;border-top:1px solid var(--divider)}
.r:first-child{border-top:0}
.r[hidden]{display:none}
.r-main > * + *{margin-top:6px}
.r-k{font-family:var(--C);font-variation-settings:var(--fvs-ui);font-size:var(--fs-label);font-weight:500;color:var(--slate)}
.r-k .gold{color:var(--accent);font-weight:600}
.r-t{font-family:var(--C);font-variation-settings:var(--fvs-h);font-weight:500;font-size:var(--fs-title);line-height:1.25;color:var(--primary);text-wrap:balance}
.r-t a{color:var(--primary);text-decoration:none}
.r-t a:hover{text-decoration:underline}
.r-p{font-family:var(--P);font-size:17px;line-height:1.45;color:var(--ink)}
.r .for{margin-top:10px}
.r-side{display:flex;flex-direction:column;gap:12px;align-items:flex-start}
.r-side .for{margin-top:0}
.r-side .for-k{flex-basis:100%;margin-bottom:-2px}
.r-ph{width:100%;aspect-ratio:3 / 2;overflow:hidden;background:var(--tint)}
.r-ph img{width:100%;height:100%;object-fit:cover}
.r-date{font-family:var(--P);font-variant-numeric:tabular-nums;font-size:18px;line-height:1.3;color:var(--primary-deep);padding-top:1px}
.r-date small{display:block;font-family:var(--C);font-variation-settings:var(--fvs-ui);font-size:13px;color:var(--slate)}
.rec-link{display:inline-flex;align-items:center;gap:8px;font-family:var(--C);font-variation-settings:var(--fvs-ui);font-weight:600;font-size:var(--fs-small);color:var(--primary)}
.rec-link .pi{width:26px;height:26px;display:grid;place-items:center;background:var(--primary);color:#fff;border-radius:var(--radius)}
.rec-link .pi svg{width:11px;height:11px;margin-left:1px}
.r.legacy .r-t{font-weight:400}
.dl-line{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px}
.pdf{display:inline-flex;align-items:center;gap:6px;font-family:var(--C);font-variation-settings:var(--fvs-ui);font-weight:600;font-size:var(--fs-small)}
.more-row{display:flex;flex-wrap:wrap;align-items:center;gap:14px 24px;margin-top:28px;padding-top:24px;border-top:1px solid var(--divider)}
.more-row p{font-family:var(--C);font-variation-settings:var(--fvs-ui);font-size:var(--fs-small);color:var(--slate)}
.empty{margin-top:18px;padding:18px;background:var(--tint);font-family:var(--C);font-variation-settings:var(--fvs-ui);font-size:var(--fs-small)}
.empty[hidden]{display:none}

/* ==========================================================================
   Lecture page
   ========================================================================== */
.lec-top{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,4fr);gap:24px clamp(28px,4.5vw,72px);align-items:end;padding-top:clamp(16px,2vw,28px)}
.lec-head > * + *{margin-top:14px}
.lec-head .t-h1 .l2{display:block;font-weight:400;color:var(--primary)}
.lec-head .t-h1{font-size:clamp(1.875rem, 1.35rem + 2.1vw, 3.125rem)}
.lec-speakers{font-family:var(--P);font-size:var(--fs-lead);line-height:1.45;color:var(--ink)}
.lec-speakers span{color:var(--slate)}
.lec-head > .lec-for{margin-top:18px}
.lec-fig{margin:0}
.lec-fig .ph{aspect-ratio:3 / 2;overflow:hidden;background:var(--tint)}
.lec-fig img{width:100%;height:100%;object-fit:cover}
figcaption,.credit{margin-top:8px;font-family:var(--C);font-variation-settings:var(--fvs-ui);font-size:13px;line-height:1.45;color:var(--slate)}

.fit{margin-top:clamp(24px,2.6vw,36px);background:var(--lamp);padding:clamp(20px,3.2vw,44px)}
.fit-head{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:8px 32px}
.fit-head .t-h2{color:var(--primary-deep)}
.fit-when{font-family:var(--C);font-variation-settings:var(--fvs-ui);font-size:var(--fs-small);font-weight:600;color:var(--primary-deep)}
.fit-when .num{font-family:var(--P);font-weight:500}
.fit-list{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px clamp(16px,2.4vw,36px);margin-top:clamp(18px,2.4vw,28px)}
.fit-list li{display:grid;grid-template-columns:30px minmax(0,1fr);column-gap:12px;align-items:start}
.ck{grid-row:1 / span 2;width:30px;height:30px;display:grid;place-items:center;background:var(--primary);color:#fff;border-radius:var(--radius)}
.ck svg{width:18px;height:18px}
.fit-list b{font-family:var(--C);font-variation-settings:var(--fvs-h);font-weight:600;font-size:clamp(1.125rem,1.05rem + .3vw,1.3125rem);line-height:1.25;color:var(--primary-deep);padding-top:2px}
.fit-list li > span:not(.ck){font-family:var(--C);font-variation-settings:var(--fvs-ui);font-size:var(--fs-small);line-height:1.45;color:var(--ink);margin-top:3px}
.fit-act{display:flex;flex-wrap:wrap;align-items:center;gap:10px 12px;margin-top:clamp(20px,2.6vw,32px);padding-top:clamp(18px,2.2vw,26px);border-top:1px solid var(--lamp-line)}
.fit-act .btn-primary{padding-inline:22px}
.fit-act .note{font-family:var(--C);font-variation-settings:var(--fvs-ui);font-size:var(--fs-label);color:var(--ink);margin-left:6px}

.lec-body{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,21rem);gap:clamp(36px,6vw,104px);padding-top:clamp(48px,6vw,88px)}
.prose{max-width:38rem}
.prose > * + *{margin-top:.9em}
.prose h2{margin-top:1.9em;font-family:var(--C);font-variation-settings:var(--fvs-h);font-weight:500;font-size:var(--fs-h2);line-height:1.18;color:var(--primary)}
.prose h2:first-child{margin-top:0}
.prose .lead{color:var(--ink)}
.prose figure{margin-top:1.6em;margin-bottom:1.4em}
.prose figure .ph{aspect-ratio:3 / 2;overflow:hidden;background:var(--tint)}
.prose figure img{width:100%;height:100%;object-fit:cover}
.collab{font-family:var(--C);font-variation-settings:var(--fvs-ui);font-size:var(--fs-small);line-height:1.55;color:var(--ink);padding:16px 18px;background:var(--tint)}
.collab b{display:block;color:var(--primary-deep);font-weight:600;margin-bottom:2px}

.spk{margin-top:1.1em !important;display:grid;gap:18px}
.spk li{display:grid;grid-template-columns:96px minmax(0,1fr);gap:18px;align-items:start}
.spk .ph{aspect-ratio:1;overflow:hidden;background:var(--tint)}
.spk img{width:100%;height:100%;object-fit:cover}
.spk b{display:block;font-family:var(--C);font-variation-settings:var(--fvs-h);font-weight:600;font-size:19px;line-height:1.25;color:var(--primary-deep)}
.spk span{display:block;margin-top:4px;font-family:var(--C);font-variation-settings:var(--fvs-ui);font-size:var(--fs-small);line-height:1.45;color:var(--slate)}
.spk .role{display:inline-block;margin-bottom:4px}

.lec-aside{display:flex;flex-direction:column;gap:16px;align-self:start;position:sticky;top:20px}
.box{padding:18px 20px;background:var(--tint);font-family:var(--C);font-variation-settings:var(--fvs-ui);font-size:var(--fs-small);line-height:1.5}
.box h2{font-family:var(--C);font-variation-settings:var(--fvs-ui);font-size:var(--fs-label);font-weight:600;color:var(--primary-deep);margin-bottom:8px}
.box dl{display:grid;grid-template-columns:5.2rem minmax(0,1fr);gap:6px 12px}
.box dt{color:var(--slate)}
.box dd .num{font-family:var(--P)}
.box p + p{margin-top:6px}
.person.small{flex-direction:row;gap:0;background:var(--paper);border:1px solid var(--divider)}
.person.small .person-ph{width:112px;flex:none;aspect-ratio:auto}
.person.small .person-tx{padding:14px 16px}
.person.small .person-name{font-size:18px}
.person.small .person-ask{font-size:15.5px;margin-top:6px}
.langs{font-family:var(--C);font-variation-settings:var(--fvs-ui);font-size:var(--fs-small);line-height:1.5}
.langs > p:first-child{color:var(--ink)}
.langs .mt{margin-top:10px}

.series{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:24px clamp(32px,5vw,80px);align-items:start}
.series-card{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:20px;align-items:start}
.series-card .ph{position:relative;aspect-ratio:16 / 10;overflow:hidden;background:var(--primary-deep)}
.series-card .ph img{width:100%;height:100%;object-fit:cover}
.series-card .ph .pi{position:absolute;left:10px;bottom:10px;width:36px;height:36px;display:grid;place-items:center;background:var(--glow);color:var(--primary-deep);border-radius:var(--radius)}
.series-card .ph .pi svg{width:14px;height:14px;margin-left:2px}
.series-card .r-t{font-size:20px}
.series-card > div > * + *{margin-top:6px}


/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 1100px){
  .panel-grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .p-contact{grid-column:1 / -1}
  .p-contact .person{flex-direction:row}
  .p-contact .person-ph{width:min(40%,240px);flex:none;aspect-ratio:auto;min-height:220px}
  .coming-grid{grid-template-columns:minmax(0,1fr)}
  .deadlines{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:32px}
  .deadlines h3{grid-column:1 / -1}
  .foot-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
  .foot-id{grid-column:1 / -1}
}
/* Short laptop screens (1366x768, a MacBook's 1440x780): wider door photos bring the door words onto the first screen */
@media (min-width: 901px) and (max-height: 820px){
  html:not([data-hero="none"]) .door-ph{aspect-ratio:16 / 9}
}
/* The heroes' row of shortcut chips, wherever it scrolls (phones below, dusk.css to 1023px): it snaps to its chips, and
   its right edge fades while more is to come, lifting as the last chip comes in past the row's end padding (--sc-end).
   A scroll timeline only runs on a box that can scroll, so a row that fits or wraps gets no mask (it would clip the
   chips' focus rings) */
html[data-hero]:not([data-hero="none"]) .ask-grid > nav.shortcuts ul{scroll-snap-type:x proximity}
html[data-hero]:not([data-hero="none"]) .ask-grid > nav.shortcuts li{scroll-snap-align:start}
@keyframes sc-more{
  from{mask:linear-gradient(to left, transparent, #000 40px) 100% 0 / calc(100% + 40px) 100% no-repeat}
  to{mask:linear-gradient(to left, transparent, #000 40px) 0 0 / calc(100% + 40px) 100% no-repeat}
}
@supports (animation-timeline: scroll()){
  /* Not while a chip has the keyboard's focus: Chrome leaves a half-shown chip where it is, and its ring stays unfaded */
  html[data-hero]:not([data-hero="none"]) .ask-grid > nav.shortcuts ul:not(:has(:focus-visible)){animation:sc-more linear both;animation-timeline:scroll(self inline);animation-range:calc(100% - 40px - var(--sc-end, var(--gutter))) calc(100% - var(--sc-end, var(--gutter)))}
  /* It follows the finger and never moves by itself, so reduced motion keeps it */
  @media (prefers-reduced-motion: reduce){
    html[data-hero]:not([data-hero="none"]) .ask-grid > nav.shortcuts ul:not(:has(:focus-visible)){animation:sc-more linear both !important;animation-timeline:scroll(self inline) !important;animation-range:calc(100% - 40px - var(--sc-end, var(--gutter))) calc(100% - var(--sc-end, var(--gutter))) !important}
  }
}
@media (max-width: 900px){
  /* Round 1's order (no hero, and "Round 1, no photo"): the question, the doors, then the shortcuts as a list */
  .ask-grid{grid-template-columns:minmax(0,1fr);grid-template-areas:"q" "doors" "sc"}
  /* Shown below the doors but before them in the source: never the scroll anchor, or a panel's change of height would scroll the page */
  .ask-grid > .shortcuts{margin-top:32px;overflow-anchor:none}
  /* The heroes: one row of the shortcuts between the question and the doors; round 1 moved the full list below the panel
     because it pushed the doors away, and a 44 px row does not. :where() keeps these areas under every hero's own. The
     selector (0,4,2) outranks every hero's own shortcut rules (the strongest is (0,4,1)), so a hero only places it
     (grid-area sc, or its own grid-row) */
  html:where([data-hero]:not([data-hero="none"])) .ask-grid{grid-template-areas:"q" "sc" "doors"}
  html[data-hero]:not([data-hero="none"]) .ask-grid > nav.shortcuts{align-self:start;justify-self:stretch;margin:20px 0 0;padding:0;border:0;background:none;box-shadow:none;min-width:0}
  html[data-hero]:not([data-hero="none"]) .ask-grid > nav.shortcuts h2{color:var(--accent);margin:0 0 8px;line-height:1.4}
  html[data-hero]:not([data-hero="none"]) .ask-grid > nav.shortcuts ul{display:flex;flex-wrap:wrap;gap:8px}
  html[data-hero]:not([data-hero="none"]) .ask-grid > nav.shortcuts li{border:0}
  html[data-hero]:not([data-hero="none"]) .ask-grid > nav.shortcuts li a{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 16px;border:0;border-radius:22px;background:var(--tint);color:var(--primary);white-space:nowrap}
  html[data-hero]:not([data-hero="none"]) .ask-grid > nav.shortcuts li a > svg:first-child{display:none}
  html[data-hero]:not([data-hero="none"]) .ask-grid > nav.shortcuts li a svg.ext{margin:0;align-self:center}
  html[data-hero]:not([data-hero="none"]) .ask-grid > nav.shortcuts a:focus-visible{outline:3px solid var(--primary-deep);outline-offset:2px;box-shadow:none}
  .feature{grid-template-columns:minmax(0,1fr)}
  .watch-grid{grid-template-columns:minmax(0,1fr)}
  .foot-ask{grid-template-columns:minmax(0,1fr)}
  .foot-today{grid-column:auto}
  .panel-head{grid-template-columns:minmax(0,1fr)}
}
@media (max-width: 700px){
  /* Doors: four in a row stay four in a row, so the spill still points at the chosen one */
  .doorway{--gap:6px;--bar:3px}
  .door-ph{aspect-ratio:1}
  .door-cap{padding:9px 7px 11px}
  .door-pre{font-size:12px;line-height:1.25}
  .door-key{font-size:14.5px;line-height:1.15;font-variation-settings:var(--fvs-ui);overflow-wrap:anywhere;hyphens:auto}
  .door-hint{display:none}
  .door .dsk{display:none}
  .ask-q .kicker{margin-bottom:6px}
  /* Round 1 on phones: the list under a rule */
  .ask-grid > .shortcuts{border-left:0;padding-left:0;border-top:2px solid var(--primary);padding-top:16px;margin-top:40px}
  /* Phones: the shortcuts in one line that scrolls sideways, edge to edge; the cut-off chip and the fade at the right
     show there is more. The scroller clips both ways: 6 px above and below keep a chip's focus ring whole */
  html[data-hero]:not([data-hero="none"]) .ask-grid > nav.shortcuts ul{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;margin:-6px calc(-1 * var(--gutter));padding:6px var(--gutter);scroll-padding-inline:var(--gutter)}
  html[data-hero]:not([data-hero="none"]) .ask-grid > nav.shortcuts ul::-webkit-scrollbar{display:none}
  html[data-hero]:not([data-hero="none"]) .ask-grid > nav.shortcuts li{flex:none}
  /* The chips' size, for every hero's row (one class stronger than dusk.css's own chips): 15px words and 14px sides show
     two chips and 30px or more of the third from 360 to 430px. Narrower, roomier chips: one, and most of the second */
  html{--chip-fs:15px;--chip-px:14px}
  html[data-hero]:not([data-hero="none"]) .ask .ask-grid > nav.shortcuts li a{font-size:var(--chip-fs);padding-inline:var(--chip-px)}
  .panel{padding:20px 16px 22px}
  .panel-grid{grid-template-columns:minmax(0,1fr);gap:28px}
  .p-contact .person{flex-direction:column}
  .p-contact .person{display:grid;grid-template-columns:104px minmax(0,1fr);align-items:start}
  .p-contact .person-ph{width:104px;min-height:0;aspect-ratio:1}
  .p-contact .person-tx{padding:12px 14px 14px}
  .p-contact .person .btn{grid-column:1 / -1;margin:0 14px 14px;align-self:auto}
  .person-ask{font-size:16px}
  .tk{font-size:18px}
  .ev{grid-template-columns:minmax(0,1fr)}
  .ev .dtile{grid-row:auto;width:56px}
  .deadlines{display:block}
  .comeby{display:block;min-height:0;background:none}
  .comeby-ph{position:relative;display:block;aspect-ratio:4 / 5}
  .comeby-ph img{position:absolute}
  .comeby-in{padding-block:0}
  .comeby-card{margin-top:-72px;position:relative;margin-right:20px;padding:20px 18px 22px}
  .facts li{grid-template-columns:minmax(0,1fr);gap:0}
  .photo-cap{display:none}
  .pub{grid-template-columns:88px minmax(0,1fr);gap:14px;padding:14px}
  .ways{grid-template-columns:minmax(0,1fr)}
  .foot-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  /* Lecture on phones: the answers and actions before the picture */
}
@media (max-width: 380px){
  /* Smallest phones: the doors go two by two; the chosen one keeps its sand caption and navy lintel */
  .doors{grid-template-columns:repeat(2,minmax(0,1fr))}
  .door-ph{aspect-ratio:16 / 9}
  .door-key{font-size:16px;overflow-wrap:normal}
  .spill{display:none}
  /* No light travels here: the chosen caption lights where it is, once the old one has let go */
  .door-cap::before{transition:background-color .08s linear,box-shadow .08s linear}
  .door[aria-selected="true"] .door-cap::before{background:var(--lamp);box-shadow:inset 0 var(--bar) 0 var(--lintel-on);transition:background-color .3s var(--ease) .06s,box-shadow .3s var(--ease) .06s}
  .panels{margin-top:8px}
}
/* Under 360px two chips no longer fit before the third: roomier ones, so the second is the one cut, by 35px at every
   width (its words and the first's are 258px at 16px, the row starts 16px in) */
@media (max-width: 359px){
  html{--chip-fs:16px;--chip-px:clamp(16px, (100vw - 247.5px) / 4, 30px)}
}
@media (max-width: 420px){
}

/* ==========================================================================
   News & events and Lecture: responsive (round 1's rules, kept apart from the homepage's)
   ========================================================================== */
@media (max-width: 1100px){
  .f-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
  .lec-body{grid-template-columns:minmax(0,1fr)}
  .lec-aside{position:static;display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}
  .lec-aside > .person{grid-column:1 / -1}
  .fit-list{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width: 900px){
  .idx-head{grid-template-columns:minmax(0,1fr)}
  .lec-top{grid-template-columns:minmax(0,1fr)}
  .series{grid-template-columns:minmax(0,1fr)}
  .r{grid-template-columns:64px minmax(0,1fr)}
  .r-side{grid-column:2}
  .r-up .r-side{grid-column:1 / -1;flex-direction:row;align-items:center}
  .r-up .r-ph{display:none}
}
@media (max-width: 700px){
  .finder{margin-inline:calc(-1 * var(--gutter));padding-inline:var(--gutter)}
  .sbox input{min-height:54px;font-size:18px;padding:0 10px}
  .sbox > svg{margin-left:12px;width:20px}
  .sbox .btn{padding-inline:14px}
  .aud button{min-height:46px;font-size:14.5px;padding-right:12px}
  .aud button img{width:26px;height:34px}
  .f-toggle{display:flex;align-items:center;justify-content:space-between;width:100%;min-height:48px;padding:0 14px;background:var(--paper);border:1px solid var(--slate);border-radius:var(--radius);cursor:pointer;font-family:var(--C);font-variation-settings:var(--fvs-ui);font-weight:600;font-size:15px;color:var(--primary-deep)}
  .f-toggle svg{width:16px;height:16px;color:var(--primary);transition:transform .2s}
  .f-toggle[aria-expanded="true"] svg{transform:rotate(180deg)}
  .f-toggle .n{font-weight:500;color:var(--slate);margin-left:6px}
  .js .filters:not(.open) .f-grid{display:none}
  .filters.open .f-grid{margin-top:12px}
  .f-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
  .f-grid .chk{grid-column:1 / -1}
  .r{grid-template-columns:minmax(0,1fr);gap:4px}
  .r > .dtile{width:56px;margin-bottom:6px}
  .r-side{grid-column:auto;margin-top:8px}
  .r-side .for-k{flex-basis:auto;margin-bottom:0}
  .r-up .r-side{flex-wrap:wrap}
  .res-who{width:100%}
  .lec-aside{grid-template-columns:minmax(0,1fr)}
  .fit-list{grid-template-columns:minmax(0,1fr);gap:14px}
  .fit-act .btn{flex:1 1 100%}
  .fit-act .note{margin-left:0}
  .spk li{grid-template-columns:76px minmax(0,1fr);gap:14px}
  .series-card{grid-template-columns:minmax(0,1fr)}
  .person.small .person-ph{width:92px}
  .r-date small{display:inline;margin-left:6px}
  .sbox input{font-size:17px}
  /* Lecture on phones: the answers and actions before the picture */
  .lec > .wrap{display:flex;flex-direction:column}
  .lec-top{display:contents}
  .lec .fit{order:1}
  .lec-fig{order:2;margin-top:28px}
  .lec-body,.lec .sec{order:3}
  .pg-lecture .crumbs li[aria-current]{display:none}
  .lec-head{margin-top:22px}
}
@media (max-width: 420px){
  .f-toggle .n{display:none}
}

/* ==========================================================================
   Hero layout "band" · Photo band
   A full-bleed band of Athens straight under the header; the question and the lead stay on white below it,
   as in round 1. "Know what you need?" becomes a card in the overlay colour that rises over the band's
   lower-right edge, so the practical way in starts on the photograph.
   ========================================================================== */
html[data-hero="band"]{
  /* 400 px on a laptop, a little more on very wide screens (so it stays a band, not a slit), never taller than
     half its width (tablets), and on short screens no taller than leaves 480 px for the question and the doors;
     never under the phones' 160 px, or a phone held sideways (390 px high) loses the photo */
  --band-h:max(160px, min(40vh, max(400px, 22vw), 50vw, 100svh - 480px));
  /* How far the card climbs onto the photo: two fifths of it at 1440, so it ends on the question's baseline. Below about
     1400 px the question gets smaller and comes up, so the card climbs further to keep ending on that baseline; on a
     short band (1024x600, a 1366 laptop's 657 px window) never over half of it, so the card does not cover it */
  --band-rise:min(clamp(87px, 192px - 7.5vw, 119px), var(--band-h) / 2);
  --band-dgap:var(--door-gap);    /* the doors' gap (.doorway --gap in style.css): the card stands on the fourth door's line */
}
/* .ask is a container, so the bleed is measured on the page's own width (100cqw), not the window's
   (100vw counts a classic scrollbar and would push the photo and its credit under it) */
html[data-hero="band"] .ask{padding-top:0;container-type:inline-size}
html[data-hero="band"] .ask-grid{grid-template-areas:"ph ph" "q sc" "doors doors"}

/* The band: full bleed from inside the grid (its margins reach the page's edges) */
html[data-hero="band"] .hero-ph{display:block;height:var(--band-h);margin-inline:calc(50% - 50cqw)}
html[data-hero="band"] .hero-ph picture{display:block;height:100%}
/* Crops: the Parthenon with a fifth of the band's height of quiet sky over it and, where the band is deep enough,
   the lit Odeon at the foot. The photo is as wide as the page (--ph: its height at 16:9), so its pediment (32.5 %
   down the photo) can be placed in pixels; a fixed percentage put it against the header on wide screens.
   The building: from its roof tiles down to the balcony (blue shutters, yellow plaster, marble trim) */
html[data-hero="band"] .hero-ph img{--ph:calc(100cqw * 9 / 16);
  object-position:50% clamp(var(--band-h) - var(--ph), .19 * var(--band-h) - .325 * var(--ph), 0px)}
html[data-hero="band"][data-photo="building"] .hero-ph img{object-position:50% 6%}
/* The credit moves to the left, onto the content edge: the card takes the right */
html[data-hero="band"] .hero-cap{right:auto;left:max(var(--gutter), calc((100% - var(--max)) / 2))}

html[data-hero="band"] .ask-q{align-self:start;padding-top:clamp(32px, 3.4vw, 48px)}
/* One line where it fits: the doors come up into the first screen */
html[data-hero="band"] .ask-lead{max-width:48rem}

/* The card: overlay ground and its own inks, climbing onto the photo (two columns only). Its column is one door
   wide, so its left edge lines up with the fourth door below it at every width */
@media (min-width: 961px){
  html[data-hero="band"] .ask-grid{grid-template-columns:minmax(0,1fr) calc((100% - 3 * var(--band-dgap)) / 4)}
  html[data-hero="band"] .ask-grid > .shortcuts{
    position:relative;z-index:1;align-self:start;
    margin-top:calc(-1 * var(--band-rise));
    border-left:0;padding:20px clamp(18px, 1.7vw, 24px) 16px;
    background:var(--overlay);
    /* a 3 px rule along the top in the card's heading colour (navy on a light card, white on a dark one), a hairline
       and a close shadow: it sits on the photo's edge; the nav dropdowns' deep shadow made it read as one left open */
    box-shadow:inset 0 3px 0 var(--overlay-head), inset 0 0 0 1px var(--overlay-line), 0 2px 6px color-mix(in srgb, var(--primary-deep) 12%, transparent);
  }
  html[data-hero="band"] .shortcuts h2{color:var(--overlay-label);margin-bottom:6px}
  html[data-hero="band"] .shortcuts li a{color:var(--overlay-head)}
  html[data-hero="band"] .shortcuts :focus-visible{outline-color:var(--overlay-focus)}
  /* A little less air over the question, so the doors start higher on a laptop */
  html[data-hero="band"] .ask-q{padding-top:clamp(24px, 2.4vw, 36px)}
  /* The question keeps to one line beside the card: it is sized on its own column (cqi), never above the display
     size, and wraps only where that would go under 38 px */
  html[data-hero="band"] .ask-q{container-type:inline-size}
  html[data-hero="band"] .ask-q .t-display{font-size:clamp(2.375rem, 8.15cqi, var(--fs-display))}
}
/* Touch laptops and iPads held sideways: card rows a finger can hit (they are 31 px), 44 px made of padding, not
   min-height, so the ↗ keeps its place beside the words */
@media (min-width: 961px) and (pointer: coarse){
  html[data-hero="band"] .shortcuts li a{padding-block:max(5px, (44px - 1.3em) / 2)}
}

/* 901 to 960 px: round 1's plain list beside the question; the card needs a door at least 13 rem wide for its longest
   row, so it starts at 961. Tablets and phones: one column, the shortcuts as the base's row of chips between the
   question and the doors */
@media (max-width: 900px){
  html[data-hero="band"] .ask-grid{grid-template-columns:minmax(0,1fr);grid-template-areas:"ph" "q" "sc" "doors"}
}
@media (max-width: 700px){
  html[data-hero="band"]{--band-h:clamp(160px, 46vw, 220px)}
  html[data-hero="band"] .hero-ph img{object-position:50% 34%}
  html[data-hero="band"][data-photo="building"] .hero-ph img{object-position:50% 3%}
  html[data-hero="band"] .ask-q{padding-top:20px}
}