/* HSP sites (HSPA, HSPE, HSPL): Justin's HSP Asia 2027 design. Fonts self-hosted (SIL OFL 1.1: fonts/README.txt). */
@font-face{font-family:'Inter';font-style:normal;font-weight:400 600;font-display:swap;src:url("fonts/inter-latin-ext-400-600-normal.01ba6c2a184b.woff2") format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Inter';font-style:normal;font-weight:400 600;font-display:swap;src:url("fonts/inter-latin-400-600-normal.65850a373e25.woff2") format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Noto Serif';font-style:italic;font-weight:400;font-display:swap;src:url("fonts/noto-serif-latin-ext-400-italic.be9591760488.woff2") format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Noto Serif';font-style:italic;font-weight:400;font-display:swap;src:url("fonts/noto-serif-latin-400-italic.8b9e8af444d7.woff2") format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Noto Serif';font-style:normal;font-weight:400;font-display:swap;src:url("fonts/noto-serif-latin-ext-400-normal.9190b2b06f54.woff2") format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Noto Serif';font-style:normal;font-weight:400;font-display:swap;src:url("fonts/noto-serif-latin-400-normal.ea5d1d6ec3ac.woff2") format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Noto Serif';font-style:normal;font-weight:600;font-display:swap;src:url("fonts/noto-serif-latin-ext-600-normal.9190b2b06f54.woff2") format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Noto Serif';font-style:normal;font-weight:600;font-display:swap;src:url("fonts/noto-serif-latin-600-normal.ea5d1d6ec3ac.woff2") format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Oswald';font-style:normal;font-weight:300 600;font-display:swap;src:url("fonts/oswald-latin-ext-300-600-normal.5084e2acef23.woff2") format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Oswald';font-style:normal;font-weight:300 600;font-display:swap;src:url("fonts/oswald-latin-300-600-normal.18b9fa01abab.woff2") format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}

:root{
  /* HSP / ID & Secure Document News palette */
  --jade:#1E9D8B;   /* Pantone 7473 */
  --sage:#709795;   /* Pantone 8281 */
  --pine:#59705D;   /* Pantone 5615 */
  --lagoon:#009AA6; /* Pantone 320  */
  --deep:#156570;   /* Pantone 5473 */
  --olive:#827C34;  /* Pantone 5825 */
  --aqua:#00B3BE;   /* Pantone 7466 */
  --mist:#e6e7e8;
  --logo:#42a37e;
  --ink:#1c2b2d;
  --muted:#4f6264;
  --paper:#f7f7f5;
  --white:#fff;
  --deeper:#0f4d55;
  --radius:4px;
  --wrap:1240px;
  --serif:"Noto Serif","Noto Serif TC",Georgia,serif;
  --cjk:"Oswald","Arial Narrow",sans-serif;
  --cond:"Oswald","Arial Narrow",sans-serif;
  --sans:"Inter",system-ui,-apple-system,"Segoe UI",sans-serif;
}

*{box-sizing:border-box}

html{scroll-behavior:smooth;scroll-padding-top:84px}

html{color-scheme:light}

body{margin:0;background:var(--paper);color:var(--ink);font:16px/1.65 var(--sans);-webkit-font-smoothing:antialiased;overflow-x:hidden}

img{max-width:100%;display:block}

a{color:var(--deep)}

.wrap{max-width:var(--wrap);margin:0 auto;padding:0 24px}

@media (max-width:600px){.wrap{padding:0 16px}
}


/* ---------- Motifs ---------- */
.fret{height:14px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='14'%3E%3Cpath d='M0 14 C4 10 6 4 11 0 H16 C11 4 9 10 5 14Z' fill='%23156570'/%3E%3Ccircle cx='17' cy='10' r='1.6' fill='%23156570'/%3E%3C/svg%3E") repeat-x;opacity:.5}

.fret.light{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='14'%3E%3Cpath d='M0 14 C4 10 6 4 11 0 H16 C11 4 9 10 5 14Z' fill='%23e6e7e8'/%3E%3Ccircle cx='17' cy='10' r='1.6' fill='%23e6e7e8'/%3E%3C/svg%3E");opacity:.35}

.seigaiha{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48'%3E%3Crect width='48' height='48' fill='%23156570'/%3E%3Cg fill='%230f4d55' stroke='%23ffffff' stroke-opacity='.10' stroke-width='1.3'%3E%3Cellipse cx='12' cy='12' rx='15' ry='7' transform='rotate(45 12 12)'/%3E%3Cellipse cx='36' cy='12' rx='15' ry='7' transform='rotate(-45 36 12)'/%3E%3Cellipse cx='12' cy='36' rx='15' ry='7' transform='rotate(-45 12 36)'/%3E%3Cellipse cx='36' cy='36' rx='15' ry='7' transform='rotate(45 36 36)'/%3E%3C/g%3E%3Cg fill='%23ffffff' fill-opacity='.14'%3E%3Ccircle cx='24' cy='24' r='2.2'/%3E%3Ccircle cx='0' cy='0' r='2.2'/%3E%3Ccircle cx='48' cy='0' r='2.2'/%3E%3Ccircle cx='0' cy='48' r='2.2'/%3E%3Ccircle cx='48' cy='48' r='2.2'/%3E%3C/g%3E%3C/svg%3E");}

.lattice{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48'%3E%3Cg fill='none' stroke='%23156570' stroke-opacity='.07' stroke-width='1.4'%3E%3Cellipse cx='12' cy='12' rx='15' ry='7' transform='rotate(45 12 12)'/%3E%3Cellipse cx='36' cy='12' rx='15' ry='7' transform='rotate(-45 36 12)'/%3E%3Cellipse cx='12' cy='36' rx='15' ry='7' transform='rotate(-45 12 36)'/%3E%3Cellipse cx='36' cy='36' rx='15' ry='7' transform='rotate(45 36 36)'/%3E%3C/g%3E%3C/svg%3E");}


.seal{display:inline-flex;align-items:center;gap:8px;height:38px;padding:0 14px 0 10px;border:1.5px solid currentColor;border-radius:999px;font:600 12.5px/1 var(--cond);letter-spacing:.18em;text-transform:uppercase;color:var(--olive);flex:none;white-space:nowrap}

.seal::before{content:"";width:18px;height:18px;flex:none;background:currentColor;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cg fill='%23000'%3E%3Cellipse cx='5.5' cy='5.5' rx='5' ry='2.6' transform='rotate(45 5.5 5.5)'/%3E%3Cellipse cx='14.5' cy='5.5' rx='5' ry='2.6' transform='rotate(-45 14.5 5.5)'/%3E%3Cellipse cx='5.5' cy='14.5' rx='5' ry='2.6' transform='rotate(-45 5.5 14.5)'/%3E%3Cellipse cx='14.5' cy='14.5' rx='5' ry='2.6' transform='rotate(45 14.5 14.5)'/%3E%3C/g%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cg fill='%23000'%3E%3Cellipse cx='5.5' cy='5.5' rx='5' ry='2.6' transform='rotate(45 5.5 5.5)'/%3E%3Cellipse cx='14.5' cy='5.5' rx='5' ry='2.6' transform='rotate(-45 14.5 5.5)'/%3E%3Cellipse cx='5.5' cy='14.5' rx='5' ry='2.6' transform='rotate(-45 5.5 14.5)'/%3E%3Cellipse cx='14.5' cy='14.5' rx='5' ry='2.6' transform='rotate(45 14.5 14.5)'/%3E%3C/g%3E%3C/svg%3E") center/contain no-repeat}

.seal.sm{height:32px;font-size:11.5px;padding:0 12px 0 8px}

.seal.sm::before{width:15px;height:15px}


.eyebrow{font:500 13px/1 var(--cond);letter-spacing:.22em;text-transform:uppercase;color:var(--jade)}

.sec-head{display:flex;flex-direction:column;align-items:flex-start;gap:14px;margin-bottom:36px}

.sec-head h2{font:600 clamp(28px,4vw,42px)/1.1 var(--cond);text-transform:uppercase;letter-spacing:.02em;margin:6px 0 0;color:var(--deep)}

.sec-head.center{justify-content:center;text-align:center}

.lead{font:400 19px/1.6 var(--serif);color:var(--muted);max-width:760px}


section{padding:96px 0;position:relative}

@media (max-width:700px){section{padding:64px 0}
}


.btn{display:inline-flex;align-items:center;gap:10px;padding:14px 26px;border-radius:var(--radius);font:500 15px/1 var(--cond);letter-spacing:.14em;text-transform:uppercase;text-decoration:none;transition:transform .2s,background .2s,color .2s,box-shadow .2s;border:1.5px solid transparent;cursor:pointer}

.btn:hover{transform:translateY(-2px)}

.btn-primary{background:var(--aqua);color:#fff;box-shadow:0 8px 24px -10px rgba(0,179,190,.8)}

.btn-primary:hover{background:var(--lagoon)}

.btn-ghost{border-color:rgba(230,231,232,.6);color:#fff}

.btn-ghost:hover{background:rgba(255,255,255,.1)}

.btn-deep{background:var(--deep);color:#fff}

.btn-deep:hover{background:var(--deeper)}

.btn-outline{border-color:var(--deep);color:var(--deep)}

.btn-outline:hover{background:var(--deep);color:#fff}


/* ---------- Header ---------- */
header.top{position:sticky;top:env(safe-area-inset-top,0px);z-index:50;background:rgba(247,247,245,.92);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-bottom:1px solid rgba(21,101,112,.12)}

.top .wrap{display:flex;align-items:center;gap:24px;height:72px}

.top .brand{display:flex;align-items:center;gap:12px;text-decoration:none}

.top .brand svg{height:44px;width:auto;--logo-main:var(--logo);--logo-sub:#9e9e9b}

.top nav{margin-left:auto;display:flex;gap:2px;align-items:center}

.top nav a{font:500 14px/1 var(--cond);letter-spacing:.12em;text-transform:uppercase;color:var(--ink);text-decoration:none;padding:10px 12px;border-radius:3px;position:relative}

.top nav a::after{content:"";position:absolute;left:12px;right:12px;bottom:4px;height:2px;background:var(--jade);transform:scaleX(0);transition:transform .25s;transform-origin:left}

.top nav a:hover::after{transform:scaleX(1)}

.top nav .btn{margin-left:10px;padding:11px 18px;font-size:14px}

.top nav .btn::after{display:none}

.menu-btn{display:none;margin-left:auto;background:none;border:0;padding:8px;cursor:pointer;color:var(--deep)}

@media (max-width:1020px){
  .menu-btn{display:block}

  .top nav{position:absolute;top:72px;left:0;right:0;flex-direction:column;align-items:stretch;background:var(--paper);padding:12px 16px 20px;border-bottom:1px solid rgba(21,101,112,.15);display:none}

  .top nav.open{display:flex}

  .top nav a{padding:14px 8px}

  .top nav .btn{margin:10px 0 0;justify-content:center}

}


/* ---------- Hero ---------- */
.hero{background-color:var(--deep);color:#fff;padding:0;overflow:hidden;position:relative}

.hero::before{content:"";position:absolute;inset:0;background:radial-gradient(ellipse at 75% 45%,rgba(0,179,190,.35),transparent 60%),linear-gradient(180deg,rgba(15,77,85,.0),rgba(15,77,85,.85) 92%);pointer-events:none}

.hero .wrap{position:relative;display:grid;grid-template-columns:1.05fr 1fr;gap:48px;align-items:center;min-height:min(86vh,760px);padding-top:72px;padding-bottom:88px}

.hero-logo{width:min(420px,90%);--logo-main:#fff;--logo-sub:#a9d6d3;margin-bottom:28px;filter:drop-shadow(0 6px 20px rgba(0,0,0,.18))}

.hero h1{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}

.hero .tag{font:400 italic 21px/1.5 var(--serif);color:var(--mist);margin:0 0 26px;max-width:520px}

.meta{display:flex;flex-wrap:wrap;gap:12px 28px;margin-bottom:32px;font:500 17px/1.3 var(--cond);letter-spacing:.14em;text-transform:uppercase}

.meta span{display:flex;align-items:center;gap:10px}

.meta svg{width:18px;height:18px;color:var(--aqua)}

.hero .cta{display:flex;gap:14px;flex-wrap:wrap}

.vert{position:absolute;right:-10px;top:96px;writing-mode:vertical-rl;font:600 clamp(60px,9vw,118px)/1 var(--cond);color:rgba(255,255,255,.06);letter-spacing:.06em;pointer-events:none;user-select:none}


.savedate{display:flex;flex-wrap:wrap;align-items:center;gap:14px 18px;margin-top:40px;padding:16px 20px;border:1px solid rgba(230,231,232,.25);border-radius:var(--radius);background:rgba(15,77,85,.45);max-width:520px}

.savedate b{display:block;font:500 19px/1.2 var(--cond);letter-spacing:.1em;text-transform:uppercase}

.savedate small{font-size:13.5px;color:var(--mist);opacity:.85}

.countdown{display:flex;gap:10px;margin-top:40px}

.countdown div{min-width:72px;padding:12px 8px 10px;text-align:center;border:1px solid rgba(230,231,232,.25);border-radius:var(--radius);background:rgba(15,77,85,.45)}

.countdown b{display:block;font:500 30px/1 var(--cond);color:#fff}

.countdown small{font:500 11px/1 var(--cond);letter-spacing:.2em;text-transform:uppercase;color:var(--mist);opacity:.8}


.moongate{position:relative;aspect-ratio:1;width:100%;max-width:520px;justify-self:center}

.moongate svg{width:100%;height:100%;overflow:visible}

.gate-ring{fill:none;stroke:var(--mist);stroke-opacity:.9}

.pinisi{animation:sail 14s ease-in-out infinite alternate}

@keyframes sail{from{transform:translateX(-14px)}
to{transform:translateX(18px)}
}

.cloud{animation:drift 18s ease-in-out infinite alternate}

.flame{transform-origin:200px 142px;animation:flick 2.6s ease-in-out infinite alternate}

@keyframes flick{from{transform:scaleY(.94)}
to{transform:scaleY(1.06)}
}

.cloud.c2{animation-duration:24s;animation-delay:-6s}

@keyframes drift{from{transform:translateX(-12px)}
to{transform:translateX(16px)}
}


@keyframes sway{from{transform:rotate(-3deg)}
to{transform:rotate(3deg)}
}

@media (prefers-reduced-motion:reduce){.pinisi,.cloud,.flame{animation:none}
}


@media (max-width:900px){
  .hero .wrap{grid-template-columns:1fr;padding-top:96px;gap:28px;min-height:0}

  .moongate{max-width:380px;order:-1}


}

@media (max-width:480px){.hero .tag{font-size:17px}
.hero .wrap{padding-top:40px}
.moongate{max-width:300px}
.countdown div{min-width:0;flex:1}
.countdown b{font-size:24px}
}


/* ---------- Quick links ---------- */
.quick{margin-top:-56px;position:relative;z-index:3;padding:0}

.quick .grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}

.qcard{background:#fff;border-radius:var(--radius);padding:26px 26px 24px;text-decoration:none;color:var(--ink);box-shadow:0 18px 40px -22px rgba(21,101,112,.45);border-top:4px solid var(--jade);display:flex;flex-direction:column;gap:14px;align-items:flex-start;transition:transform .25s,box-shadow .25s}

.qcard:hover{transform:translateY(-4px);box-shadow:0 24px 46px -20px rgba(21,101,112,.55)}

.qcard:nth-child(2){border-top-color:var(--olive)}

.qcard:nth-child(3){border-top-color:var(--aqua)}

.qcard h3{margin:0 0 4px;font:600 20px/1.2 var(--cond);letter-spacing:.06em;text-transform:uppercase;color:var(--deep)}

.qcard p{margin:0;color:var(--muted);font-size:14.5px}

.qcard .seal{color:var(--jade)}

.qcard:nth-child(2) .seal{color:var(--olive)}

.qcard:nth-child(3) .seal{color:var(--aqua)}

@media (max-width:820px){.quick .grid{grid-template-columns:1fr}
.quick{margin-top:-36px}
}


/* ---------- About ---------- */
.about .grid{display:grid;grid-template-columns:1.25fr 1fr;gap:64px;align-items:start}

.about p{color:var(--muted);margin:0 0 16px}

.about .lead{margin-bottom:24px;color:var(--ink)}

.doc-list{display:flex;flex-wrap:wrap;gap:8px;margin:24px 0 8px;padding:0;list-style:none}

.doc-list li{font:500 13px/1 var(--cond);letter-spacing:.12em;text-transform:uppercase;padding:9px 12px;border:1px solid rgba(21,101,112,.25);border-radius:999px;color:var(--deep);background:#fff}

.scroll-card{background:var(--deep);color:#fff;border-radius:var(--radius);padding:40px 36px;position:relative;overflow:hidden}

.scroll-card::before,.scroll-card::after{content:"";position:absolute;left:-6px;right:-6px;height:12px;background:var(--olive);border-radius:6px}

.scroll-card::before{top:0}
.scroll-card::after{bottom:0}

.scroll-card h3{font:600 15px/1 var(--cond);letter-spacing:.22em;text-transform:uppercase;color:var(--aqua);margin:8px 0 24px}

.stats{display:grid;gap:22px}

.stat{display:flex;align-items:baseline;gap:16px;border-bottom:1px solid rgba(230,231,232,.18);padding-bottom:18px}

.stat:last-child{border:0;padding-bottom:0}

.stat b{font:500 64px/1 var(--cond);color:#fff;min-width:130px}

.stat span{font:500 15px/1.2 var(--cond);letter-spacing:.18em;text-transform:uppercase;color:var(--mist)}

.scroll-card .vert-cjk{position:absolute;right:20px;top:34px;writing-mode:vertical-rl;font:900 46px/1 var(--cjk);color:rgba(255,255,255,.08);letter-spacing:.1em}

.sisters{margin-top:28px;padding:20px 22px;border-left:3px solid var(--olive);background:#fff;font:400 15.5px/1.6 var(--serif);color:var(--muted)}

@media (max-width:900px){.about .grid{grid-template-columns:1fr;gap:40px}
}


/* ---------- Testimonials ---------- */
.voices{background:var(--mist)}

.voices .track{display:flex;gap:22px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding-inline:4px;padding:4px 4px 18px;scrollbar-width:thin}

/* Whole quotes across the track: three, two on tablets, one and a bit on phones */
.quote{flex:0 0 calc((100% - 44px) / 3);scroll-snap-align:start;background:#fff;border-radius:var(--radius);padding:34px 30px 28px;position:relative;display:flex;flex-direction:column}

.quote::before{content:"“";position:absolute;top:-6px;left:22px;font:700 96px/1 var(--serif);color:var(--jade);opacity:.25}

.quote p{font:400 italic 18px/1.6 var(--serif);margin:16px 0 22px;flex:1}

.quote cite{font:500 14px/1.3 var(--cond);letter-spacing:.14em;text-transform:uppercase;font-style:normal;color:var(--deep);border-top:1px solid var(--mist);padding-top:16px}

@media (max-width:900px){.quote{flex-basis:calc((100% - 22px) / 2)}}
@media (max-width:600px){.quote{flex-basis:86%}}

.track-nav{display:flex;gap:10px;justify-content:flex-end;margin-top:8px}

.track-nav button{width:44px;height:44px;border-radius:50%;border:1.5px solid var(--deep);background:transparent;color:var(--deep);cursor:pointer;font-size:18px}

.track-nav button:hover{background:var(--deep);color:#fff}


/* ---------- Who attends ---------- */
.who .grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}

.panel{background:#fff;border:1px solid rgba(21,101,112,.14);border-radius:var(--radius);padding:30px 28px;position:relative}

.panel h3{font:600 19px/1.25 var(--cond);letter-spacing:.08em;text-transform:uppercase;color:var(--deep);margin:16px 0 14px}

.panel ul{margin:0;padding:0;list-style:none}

.panel li{padding:9px 0 9px 22px;border-top:1px dashed rgba(21,101,112,.18);position:relative;font-size:15px}

.panel li::before{content:"";position:absolute;left:2px;top:17px;width:8px;height:8px;border:1.5px solid var(--jade);transform:rotate(45deg)}

.panel .seal{color:var(--jade)}

.panel:nth-child(2) .seal{color:var(--lagoon)}

.panel:nth-child(3) .seal{color:var(--olive)}

@media (max-width:900px){.who .grid{grid-template-columns:1fr}
}


/* ---------- Programme ---------- */
.programme{background:var(--deep);color:#fff;overflow:hidden}

.programme .sec-head h2{color:#fff}

.programme .lead{color:var(--mist)}

.days{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:40px}
/* four days: two rows of two, never three and one */
@media (min-width:901px){.days:has(>.day:nth-child(4):last-child){grid-template-columns:repeat(2,1fr)}}

.day{background:rgba(15,77,85,.6);border:1px solid rgba(230,231,232,.18);border-radius:var(--radius);padding:0 0 26px;position:relative;backdrop-filter:blur(2px)}

.day header{padding:22px 26px;border-bottom:1px solid rgba(230,231,232,.15);display:flex;justify-content:space-between;align-items:center}

.day header b{font:500 34px/1 var(--cond)}

.day header span{font:500 13px/1.3 var(--cond);letter-spacing:.2em;text-transform:uppercase;color:var(--aqua);text-align:right}

.slot{padding:18px 26px 0}

.slot h4{margin:0 0 6px;font:600 17px/1.3 var(--cond);letter-spacing:.08em;text-transform:uppercase;display:flex;gap:10px;align-items:center}

.slot h4 i{width:8px;height:8px;background:var(--aqua);transform:rotate(45deg);flex:none}

.slot.social h4 i{background:var(--olive)}

.slot p{margin:0;color:var(--mist);font-size:14.5px;opacity:.9}

.slot p+p{margin-top:8px}

/* links on the deep ground: aqua, underlined; filled on hover (.slot .rich a:not(.btn): over the later .rich a:not(.btn)) */
.slot a,.slot .rich a:not(.btn){color:var(--aqua);text-decoration:underline;text-decoration-color:var(--aqua);text-decoration-thickness:2px;text-underline-offset:3px;transition:background-color .15s,color .15s}

.slot a:hover,.slot a:focus-visible,.slot .rich a:not(.btn):hover,.slot .rich a:not(.btn):focus-visible{color:var(--deep);background:var(--aqua);text-decoration-color:var(--aqua)}

.slot details{margin-top:8px}

.slot details summary{cursor:pointer;font:600 12px/1 var(--cond);letter-spacing:.18em;text-transform:uppercase;color:#fff;margin-bottom:8px}

.slot details summary::marker{color:var(--aqua)}

.slot details summary:hover{color:var(--aqua)}

.download{margin-top:36px;display:flex;align-items:center;gap:20px;flex-wrap:wrap;padding:22px 26px;border:1px dashed rgba(230,231,232,.35);border-radius:var(--radius)}

.download p{margin:0;flex:1;min-width:240px;font-size:14.5px;color:var(--mist)}

.download strong{display:block;font:600 17px/1.3 var(--cond);letter-spacing:.08em;text-transform:uppercase;color:#fff}

@media (max-width:900px){.days{grid-template-columns:1fr}
}


/* ---------- Sponsorship ---------- */
.tiers{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}

.tier{background:#fff;border-radius:var(--radius);padding:30px 24px 26px;position:relative;border:1px solid rgba(21,101,112,.14);overflow:hidden;display:flex;flex-direction:column}

.tier::before{content:"";position:absolute;top:0;left:0;right:0;height:6px;background:var(--c,var(--jade))}

.tier h3{font:600 26px/1 var(--cond);text-transform:uppercase;letter-spacing:.08em;margin:52px 0 4px;color:var(--deep)}

.tier .price{font:500 13px/1 var(--cond);letter-spacing:.2em;text-transform:uppercase;color:var(--muted);margin-bottom:18px}

.tier ul{margin:0;padding:0 0 0 18px;font-size:14.5px;color:var(--muted)}

.tier li{margin-bottom:8px}

.tier li::marker{color:var(--jade)}

.tier .opts{margin-top:auto;padding-top:14px;font-size:13px;color:var(--muted);border-top:1px dashed rgba(21,101,112,.2)}

.chop{position:absolute;top:16px;right:12px;transform:rotate(6deg);display:flex;flex-direction:column;align-items:center;color:var(--olive);opacity:.85}

.chop .seal{font-size:11px;border-width:2px;background:#fff}

.chop small{font:600 10px/1 var(--cond);letter-spacing:.18em;text-transform:uppercase;margin-top:5px}

.benefits{margin-top:44px;display:grid;grid-template-columns:repeat(2,1fr);gap:14px 40px;padding:0;list-style:none}

.benefits li{padding-left:34px;position:relative;font-size:15px;color:var(--muted)}

.benefits li::before{content:"✓";position:absolute;left:0;top:0;width:22px;height:22px;border-radius:50%;background:var(--jade);color:#fff;font-size:12px;display:grid;place-items:center}

.benefits-title{font:600 20px/1 var(--cond);text-transform:uppercase;letter-spacing:.08em;color:var(--deep);margin:56px 0 0}

@media (max-width:1000px){.tiers{grid-template-columns:repeat(2,1fr)}
}

@media (max-width:600px){.tiers,.benefits{grid-template-columns:1fr}
}


/* ---------- Exhibit ---------- */
.exhibit{background:var(--mist)}

.booths{display:grid;grid-template-columns:repeat(2,1fr);gap:22px;margin-top:8px}

.booth{background:#fff;border-radius:var(--radius);padding:30px;display:grid;grid-template-columns:110px 1fr;gap:24px;align-items:start;position:relative}

.booth .plan{aspect-ratio:1;border:2px solid var(--deep);display:grid;place-items:center;position:relative;background:var(--paper)}

.booth .plan span{font:500 18px/1.15 var(--cond);color:var(--deep);letter-spacing:.05em;text-align:center;padding:4px 6px}

.booth .plan.mini{aspect-ratio:2/1;align-self:center}

.booth .plan.std{aspect-ratio:3/2;align-self:center}

.booth h3{margin:0 0 4px;font:600 22px/1.15 var(--cond);text-transform:uppercase;letter-spacing:.06em;color:var(--deep)}

.booth .price{font:500 12px/1 var(--cond);letter-spacing:.2em;text-transform:uppercase;color:var(--olive);margin-bottom:12px}

.booth p{margin:0 0 10px;color:var(--muted);font-size:14.5px}

.booth ul{margin:0;padding-left:18px;font-size:14.5px}

.booth li::marker{color:var(--jade)}

.contact-strip{margin-top:28px;display:flex;flex-wrap:wrap;gap:16px;align-items:center;justify-content:space-between;background:var(--deep);color:#fff;padding:22px 28px;border-radius:var(--radius)}

.contact-strip p{margin:0}

.contact-strip p a{color:var(--aqua)}

@media (max-width:820px){.booths{grid-template-columns:1fr}
.booth{grid-template-columns:1fr}
.booth .plan{max-width:140px}
}


/* ---------- Venue ---------- */
/* the venue on the same ground as Discover (both about the place) */
.venue{background:var(--mist)}
.venue .grid{display:grid;grid-template-columns:1fr 1.1fr;gap:48px;align-items:stretch}

.venue h3{font:600 30px/1.1 var(--cond);text-transform:uppercase;letter-spacing:.04em;color:var(--deep);margin:0 0 4px}

.venue .cjk{font:700 18px/1 var(--cjk);color:var(--sage);letter-spacing:.2em;margin-bottom:18px}

.rate{display:flex;align-items:baseline;gap:12px;margin:22px 0 6px}

.rate b{font:500 46px/1 var(--cond);color:var(--deep)}

.rate span{font-size:14px;color:var(--muted)}

.venue address{font-style:normal;color:var(--muted);margin:18px 0 22px;line-height:1.6}

.map{border-radius:var(--radius);overflow:hidden;min-height:380px;border:6px solid #fff;box-shadow:0 18px 40px -24px rgba(21,101,112,.6);position:relative;background:var(--mist)}

.maplink{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;text-decoration:none;color:var(--mist);background-color:var(--deep);text-align:center;padding:32px}

.maplink strong{font:600 26px/1.1 var(--cond);letter-spacing:.06em;text-transform:uppercase;color:#fff}

.maplink em{font:500 14px/1 var(--cond);letter-spacing:.16em;text-transform:uppercase;font-style:normal;color:var(--aqua);margin-top:8px}

.map iframe{position:absolute;inset:0;width:100%;height:100%;border:0;filter:saturate(.6) hue-rotate(-10deg)}

.warn{margin-top:28px;background:#fff;border-left:4px solid var(--olive);padding:18px 22px;font-size:14.5px;color:var(--muted)}

.warn strong{display:block;font:600 15px/1.3 var(--cond);letter-spacing:.12em;text-transform:uppercase;color:var(--olive);margin-bottom:6px}

@media (max-width:900px){.venue .grid{grid-template-columns:1fr}
}


/* ---------- Fees ---------- */
.fees{background:var(--paper)}

.fee-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}

.fee{background:#fff;border:1px solid rgba(21,101,112,.14);border-radius:var(--radius);padding:26px 22px;text-align:center;position:relative}

.fee.hl{background:var(--jade);color:#fff;border-color:var(--jade)}

.fee h3{font:500 14px/1.3 var(--cond);letter-spacing:.16em;text-transform:uppercase;margin:0 0 14px;min-height:36px}

.fee b{font:500 38px/1 var(--cond);display:block;color:var(--deep)}

.fee.hl b{color:#fff}

.fee small{display:block;margin-top:8px;font:500 12px/1 var(--cond);letter-spacing:.2em;text-transform:uppercase;opacity:.7}

.fee sup{font-size:11px;color:var(--olive)}

.fee.hl sup{color:#fff}

.notes{margin-top:22px;font-size:13.5px;color:var(--muted);display:grid;gap:8px}

.notes p{margin:0}

.ws{margin-top:44px;border-collapse:collapse;width:100%;background:#fff;border-radius:var(--radius);overflow:hidden;font-size:15px}

.ws th,.ws td{padding:16px 20px;text-align:left;border-bottom:1px solid var(--mist)}

.ws thead th{background:var(--deep);color:#fff;font:500 14px/1 var(--cond);letter-spacing:.16em;text-transform:uppercase}

.ws td:not(:first-child),.ws th:not(:first-child){text-align:center}

.ws .free{color:var(--jade);font-weight:600}

.fees .center-cta{text-align:center;margin-top:40px}

@media (max-width:900px){.fee-grid{grid-template-columns:repeat(2,1fr)}
}

@media (max-width:480px){.fee-grid{grid-template-columns:1fr}
.ws th,.ws td{padding:12px 10px;font-size:13.5px}
}


/* ---------- Sponsors marquee ---------- */
.logos{padding:64px 0;background:#fff;border-top:1px solid var(--mist);border-bottom:1px solid var(--mist)}

.marquee{overflow:hidden;mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}

.marquee .row{display:flex;gap:56px;width:max-content;animation:scroll 70s linear infinite;align-items:center}

.marquee:hover .row{animation-play-state:paused}

.marquee .lg{font:500 20px/1 var(--cond);letter-spacing:.1em;text-transform:uppercase;color:var(--sage);white-space:nowrap}

.marquee img{height:44px;width:auto;max-width:150px;object-fit:contain;filter:grayscale(1);opacity:.65;transition:filter .3s,opacity .3s}

.marquee img:hover{filter:none;opacity:1}

@keyframes scroll{to{transform:translateX(-50%)}
}

@media (prefers-reduced-motion:reduce){.marquee .row{animation:none;flex-wrap:wrap;width:auto;justify-content:center}
}

.logos .foot{text-align:center;margin-top:32px}


/* ---------- Newsletters ---------- */
.news .grid{display:grid;grid-template-columns:repeat(2,1fr);gap:22px}

.newscard{background:#fff;border-radius:var(--radius);padding:30px;display:flex;flex-direction:column;gap:16px;border:1px solid rgba(21,101,112,.14)}

.newscard .nl{margin:0;font:600 24px/1.1 var(--cond);letter-spacing:.04em;text-transform:uppercase;color:var(--deep)}

.newscard img{height:46px;width:auto;align-self:flex-start}

.newscard p{margin:0;color:var(--muted);flex:1}

@media (max-width:800px){.news .grid{grid-template-columns:1fr}
}


/* ---------- Footer ---------- */
footer{background:var(--deeper);color:var(--mist);padding:0 0 32px;position:relative;overflow:hidden}

footer .inner{display:grid;grid-template-columns:1.3fr 1fr 1fr;gap:40px;padding-top:60px}

footer svg.flogo{height:64px;width:auto;--logo-main:#fff;--logo-sub:#a9d6d3}

footer h4{font:500 14px/1 var(--cond);letter-spacing:.2em;text-transform:uppercase;color:var(--aqua);margin:6px 0 18px}

footer a{color:#fff;text-decoration:none}

footer a:hover{color:var(--aqua)}

footer ul{list-style:none;margin:0;padding:0;display:grid;gap:10px;font-size:15px}

footer p{font-size:14.5px;margin:16px 0 0;opacity:.85}

footer .bottom{border-top:1px solid rgba(230,231,232,.15);margin-top:48px;padding-top:22px;display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px;font-size:13px;opacity:.7}

footer .cjk-big{position:absolute;right:-10px;bottom:-30px;font:600 200px/1 var(--cond);color:rgba(255,255,255,.035);pointer-events:none}

@media (max-width:820px){footer .inner{grid-template-columns:1fr}
}


/* ---------- Motion ---------- */
:root{--ease:cubic-bezier(.2,.7,.2,1)}

.reveal{transition:transform .35s var(--ease),box-shadow .3s}

@keyframes viewIn{from{opacity:0;translate:0 32px}
to{opacity:1;translate:0 0}
}

@supports (animation-timeline:view()){.reveal{animation:viewIn linear both;animation-timeline:view();animation-range:entry 0% entry 70%}
}

@keyframes rise{from{opacity:0;transform:translateY(18px)}
to{opacity:1;transform:none}
}

@keyframes wipe{from{clip-path:inset(0 100% 0 0)}
to{clip-path:inset(0 0 0 0)}
}

@keyframes gateIn{from{opacity:0;transform:scale(.86) rotate(-6deg)}
to{opacity:1;transform:none}
}

@keyframes vin{from{opacity:0;transform:translateY(-60px)}
to{opacity:1;transform:none}
}

@keyframes spin{to{transform:rotate(360deg)}
}

@keyframes twinkle{0%,100%{opacity:1}
50%{opacity:.45}
}

@keyframes stamp{0%{opacity:0;transform:scale(1.7) rotate(-10deg)}
55%{opacity:1;transform:scale(.92) rotate(2deg)}
100%{opacity:1;transform:none}
}


/* hero load sequence */
.hero-logo{animation:wipe 1.3s cubic-bezier(.7,0,.2,1) .15s both}

.hero .tag .w{display:inline-block;animation:rise .7s var(--ease) both;animation-delay:calc(.7s + var(--i) * 35ms)}

.hero .meta{animation:rise .8s var(--ease) 1.25s both}

.hero .cta{animation:rise .8s var(--ease) 1.4s both}

.hero .savedate{animation:rise .8s var(--ease) 1.55s both}

.moongate{animation:gateIn 1.5s var(--ease) .25s both}

.vert{animation:vin 1.8s var(--ease) .5s both}

.spin{transform-box:view-box;transform-origin:200px 200px;animation:spin 90s linear infinite}

.twinkle rect:nth-child(odd){animation:twinkle 3.2s ease-in-out infinite}

.twinkle rect:nth-child(even){animation:twinkle 4.1s ease-in-out 1.3s infinite}


/* section headings */
.sec-head h2{padding-bottom:10px;background:linear-gradient(var(--olive),var(--olive)) 0 100%/0 3px no-repeat;transition:background-size 1s var(--ease) .45s}

.sec-head.in h2{background-size:72px 3px}

.sec-head.center h2{background-position:50% 100%}

.sec-head.in .seal,.tier.in .chop .seal,.qcard.in .seal,.panel.in .seal{animation:stamp .65s var(--ease) both}

.tier.in .chop .seal{animation-delay:calc(var(--d,0s) + .45s)}

.qcard.in .seal,.panel.in .seal{animation-delay:calc(var(--d,0s) + .25s)}

.eyebrow{transition:letter-spacing 1s var(--ease) .2s}



/* boxes: lift + hologram sheen on hover */
.qcard,.panel,.tier,.booth,.fee,.newscard,.quote,.day{position:relative;overflow:hidden}

.qcard::after,.panel::after,.tier::after,.booth::after,.fee::after,.newscard::after,.day::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(115deg,transparent 30%,rgba(0,179,190,.20) 42%,rgba(130,124,52,.18) 50%,rgba(30,157,139,.20) 58%,transparent 70%);
  transform:translateX(-120%);transition:transform 1s var(--ease)}

.qcard:hover::after,.panel:hover::after,.tier:hover::after,.booth:hover::after,.fee:hover::after,.newscard:hover::after,.day:hover::after{transform:translateX(120%)}

.panel.in:hover,.tier.in:hover,.booth.in:hover,.fee.in:hover,.newscard.in:hover,.quote.in:hover{transform:translateY(-6px);box-shadow:0 22px 44px -24px rgba(21,101,112,.55)}

.day.in:hover{transform:translateY(-6px);border-color:rgba(0,179,190,.6)}

.panel li{transition:padding-left .25s,color .25s}

.panel li:hover{padding-left:28px;color:var(--deep)}

.btn{position:relative;overflow:hidden}

.btn::before{content:"";position:absolute;inset:0;background:linear-gradient(110deg,transparent 35%,rgba(255,255,255,.35) 50%,transparent 65%);transform:translateX(-120%);transition:transform .7s var(--ease)}

.btn:hover::before{transform:translateX(120%)}

.doc-list li{transition:background .25s,color .25s,transform .25s}

.doc-list li:hover{background:var(--deep);color:#fff;transform:translateY(-2px)}

.stat b{display:inline-block;transition:transform .3s}

.stat:hover b{transform:scale(1.06)}


/* ---------- Hero video ---------- */
.hero .hero-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0;animation:videoIn 1.6s var(--ease) both}

@keyframes videoIn{from{opacity:0;transform:scale(1.06)}
to{opacity:1;transform:none}
}

.hero::before{z-index:1;background:
  linear-gradient(90deg,rgba(15,77,85,.93) 0%,rgba(21,101,112,.8) 28%,rgba(21,101,112,.42) 46%,rgba(21,101,112,.1) 66%,rgba(21,101,112,.05) 100%),
  linear-gradient(180deg,rgba(15,77,85,.35) 0%,transparent 30%,transparent 70%,rgba(15,77,85,.85) 100%)}

.hero .wrap,.hero .vert,.hero .fret{position:relative;z-index:2}

.hero .vert{position:absolute}

.hero .wrap{grid-template-columns:minmax(0,640px) 1fr;min-height:min(88vh,780px)}

.video-toggle{position:absolute;z-index:3;right:24px;top:24px;width:42px;height:42px;border-radius:50%;border:1.5px solid rgba(230,231,232,.6);background:rgba(15,77,85,.55);color:#fff;display:grid;place-items:center;cursor:pointer;backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);transition:background .25s}

.video-toggle:hover{background:rgba(0,179,190,.6)}

.video-toggle:focus-visible{outline:2px solid var(--aqua);outline-offset:3px}

.video-toggle .i-play{display:none}

.video-toggle.paused .i-play{display:block}

.video-toggle.paused .i-pause{display:none}

@media (max-width:900px){
  .hero .wrap{grid-template-columns:1fr;min-height:0;padding-top:120px;padding-bottom:110px}

  .hero::before{background:linear-gradient(180deg,rgba(15,77,85,.6) 0%,rgba(21,101,112,.8) 50%,rgba(15,77,85,.95) 100%)}

}


/* ---------- Photography ---------- */
.photo{position:relative;overflow:hidden;border-radius:var(--radius);margin:0;background:var(--deep)}

.photo img{width:100%;height:100%;object-fit:cover;display:block;transition:transform 1.4s var(--ease)}

.photo.in img,.place.in .photo img,.no-reveal .photo img{transform:none}

.photo.in:hover img{transform:scale(1.06)}

.photo figcaption{position:absolute;left:0;right:0;bottom:0;padding:36px 18px 14px;background:linear-gradient(transparent,rgba(15,77,85,.92));color:#fff;font:500 13.5px/1.3 var(--cond);letter-spacing:.16em;text-transform:uppercase}

.photo figcaption small{display:block;font:400 12.5px/1.4 var(--sans);letter-spacing:0;text-transform:none;opacity:.8;margin-top:3px}

.about-side{display:grid;gap:24px;align-content:start}

.arch{aspect-ratio:5/4;border-radius:220px 220px var(--radius) var(--radius);box-shadow:0 0 0 6px var(--paper),0 0 0 7.5px var(--olive)}

.mosaic{display:grid;grid-template-columns:repeat(4,1fr);grid-template-rows:repeat(2,230px);gap:14px}

.mosaic .m1{grid-column:1/3;grid-row:1/3}

.mosaic .m3{grid-column:4;grid-row:1/3}

.moments .note{font-size:13px;color:var(--muted);margin-top:14px}

.duo{display:grid;grid-template-columns:1.2fr 1fr;gap:16px;margin-bottom:36px}

.duo .photo{height:320px}

.discover{background:var(--mist)}

.pano{height:clamp(220px,30vw,380px);margin-bottom:22px}

/* The Cards block's “First card across the page”: its title and text on the panorama */
.lead + .pano{margin-top:28px}

.pano figcaption{padding:60px clamp(18px,3vw,32px) 22px}

.pano .pano-title{display:block;font:600 clamp(22px,2.6vw,32px)/1.15 var(--cond);letter-spacing:.06em}

.pano figcaption small{max-width:640px;font-size:15px}

.pano figcaption small.credit{font-size:12px;opacity:.7}

.pano .btn{margin-top:12px;color:#fff;border-color:#fff}

.pano img{object-position:30% 50%;animation:pan 38s ease-in-out infinite alternate}

@keyframes pan{to{object-position:70% 50%}
}

.places{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}

.place{background:#fff;border-radius:var(--radius);overflow:hidden;display:flex;flex-direction:column}

.place .photo{border-radius:0;aspect-ratio:4/3}

.place-body{padding:20px 22px 24px;flex:1;display:flex;flex-direction:column;align-items:flex-start}

/* The photo's credit at the foot of the card, under the text, lined up across the row */
.place-body .credit{margin-top:auto;padding-top:14px;font-size:11.5px;line-height:1.4;color:var(--muted);opacity:.8;overflow-wrap:anywhere}

.place-body .credit a{color:inherit;text-decoration:underline;text-underline-offset:2px}

.place h3{margin:0 0 6px;font:600 20px/1.2 var(--cond);letter-spacing:.06em;text-transform:uppercase;color:var(--deep)}

.place p{margin:0;font-size:14.5px;color:var(--muted)}

/* Justin's photo under the gradient (images/security-detail.jpg) isn't in the repo yet: the gradient alone. */
.programme{background:linear-gradient(rgba(21,101,112,.9),rgba(15,77,85,.95)) var(--deep)}

@media (max-width:900px){
  .mosaic{grid-template-columns:1fr 1fr;grid-template-rows:none;grid-auto-rows:200px}

  .mosaic .m1{grid-column:1/3;grid-row:auto}

  .mosaic .m3{grid-column:auto;grid-row:auto}

  .places{grid-template-columns:1fr}

  .duo{grid-template-columns:1fr}

  .duo .photo{height:240px}

}

@media (prefers-reduced-motion:reduce){.photo img{transform:none}
  .pano img{animation:none}
}


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

  .sec-head h2{background-size:72px 3px}

}



/* ===================== Platform additions (beyond Justin's home page) ===================== */
/* Shared with TSTF's layout (page titles, programme rows, stands, popups, forms, lightbox, cookie banner), in HSP colours. */
.page-title{background-color:var(--deep);color:#fff;padding-block:clamp(48px,7vw,88px)}
.page-title .wrap{display:grid;gap:14px}
.page-title .eyebrow{color:var(--mist);display:flex;align-items:center;gap:12px}
.page-title .eyebrow::before{content:"";width:32px;height:3px;background:var(--aqua)}
.page-title h1{font-size:clamp(2.4rem,5vw,3.6rem);max-width:22ch;color:#fff}
.page-blocks{padding-bottom:clamp(24px,4vw,48px)}
.page-blocks>section{padding-block:clamp(28px,3.5vw,48px)}
.page-blocks>section.text+section.text{padding-top:0}
.page-blocks .sec-head{gap:10px;margin-bottom:clamp(16px,2vw,24px)}
.page-blocks .sec-head h2{font-size:clamp(1.6rem,2.8vw,2.2rem)}
.other-editions{padding-bottom:48px;display:grid;gap:12px}

/* two columns: on the page's width and gutters, close to the row or text section above */
section.cols-row,.page-blocks>section.cols-row{padding-block:clamp(12px,1.5vw,20px)}
section.text+section.cols-row,section.about+section.cols-row{padding-top:0}
section.cols-row+section.cols-row{padding-top:clamp(12px,2vw,24px)}
section.cols-row+:is(section.text,section.cards-cards){padding-top:clamp(24px,3vw,40px)}  /* white sections after a row follow it closely, as after the About text */
.cols{display:grid;grid-template-columns:1fr 1fr;gap:clamp(20px,3vw,32px)}
.cols-one_third{grid-template-columns:1fr 2fr}
.cols-two_thirds{grid-template-columns:2fr 1fr}
.col{min-width:0}
.col>section{padding:0 0 8px !important}
.col .sec-head{margin-bottom:12px}
@media (max-width:760px){.cols,.cols-one_third,.cols-two_thirds{grid-template-columns:1fr}}
.orgs{display:flex;flex-wrap:wrap;gap:8px;list-style:none;padding:0;margin:0}
.orgs li{padding:7px 14px;border:1px solid #d5dadb;border-radius:4px;font-size:.92rem;background:#fff}
.orgs li.cb{border-color:var(--jade);border-left-width:3px;font-weight:600}
.orgs li small{color:var(--muted);margin-left:4px}
.orgs li a{text-decoration:none;font-weight:600;color:var(--jade)}
.sess{display:grid;grid-template-columns:120px 1fr;gap:20px;padding:18px 0;border-top:1px solid #d5dadb}
.sess:last-child{border-bottom:1px solid #d5dadb}
.sess time{font:500 .95rem var(--cond);color:var(--ink);font-variant-numeric:tabular-nums}
.sess time span{color:var(--muted)}
.sess>div>h3{font:600 1.05rem var(--cond);color:var(--ink);margin-bottom:6px}
.sess-no{display:block;font:500 .72rem var(--cond);letter-spacing:.12em;text-transform:uppercase;color:var(--jade);margin-bottom:4px}
.sess-session,.sess-workshop{background:#fff;border-radius:10px;border:1px solid #d5dadb;border-left:4px solid var(--jade);padding:18px 20px;margin-block:10px}
.sess-session+.sess,.sess-workshop+.sess{border-top:0}
.sess-session>div>h3,.sess-workshop>div>h3{font-size:1.3rem;color:var(--deep)}
.sess-break>div>h3,.sess-meal>div>h3,.sess-other>div>h3{font-weight:500;color:var(--muted)}
.sess-social>div>h3,.sess-social time{color:var(--olive)}
.sess .who{color:var(--muted);font-size:.92rem}
.sess .rich{gap:6px}
.sess details summary{cursor:pointer;color:var(--jade);font-size:.85rem}
.talk{padding:10px 0 4px}
.talk+.talk{border-top:1px dashed #d5dadb}
.talk-title{color:var(--ink);font-weight:600}
/* a talk: its time in a narrow column, the title, slides and speakers aligned beside it */
.talk{display:grid;grid-template-columns:52px minmax(0,1fr)}
.talk-body{grid-column:2}
/* the Slides tag beside a short title, flush left under a long one */
.talk-title{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 10px}
.talk-title .slides{margin-left:0}
.talk-time{color:var(--jade);font:500 .86rem/1.6 var(--cond);font-variant-numeric:tabular-nums}
.sess .who button,.talk-title button{background:none;border:0;padding:0;font:inherit;color:inherit;cursor:pointer;text-align:left;text-decoration:underline;text-decoration-color:var(--aqua);text-underline-offset:3px}
.slides{margin-left:10px;padding:2px 10px;font:500 .7rem var(--cond);letter-spacing:.08em;text-transform:uppercase;color:var(--jade);border:1px solid var(--jade);border-radius:4px;text-decoration:none;white-space:nowrap}
.slides:hover{background:var(--jade);color:#fff}
.sess-ph{border-top-style:dashed}
.sess-ph time,.sess-ph>div>h3{color:var(--muted);font-weight:400}
.download-list{list-style:none;margin:16px 0 0;padding:0;display:grid;gap:2px}
.download-list li{display:flex;justify-content:space-between;gap:16px;padding:10px 4px;border-bottom:1px solid #d5dadb}
.download-list a{color:var(--ink);font-weight:500}
.download-list span{color:var(--muted);font-size:.85rem;white-space:nowrap}
.stands{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:14px;list-style:none;margin:0;padding:0}
.stands.with-text{grid-template-columns:repeat(auto-fill,minmax(280px,1fr))}
.stands li{display:grid;gap:12px;align-content:start}
.stand-logos{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:16px;min-height:120px;padding:20px;background:#fff;border:1px solid #d5dadb;border-radius:10px}
.stand-logos img{max-height:60px;max-width:100%;object-fit:contain}
.stand-logos span{color:var(--ink);font-weight:600;text-align:center}
.stand-text{color:var(--muted);font-size:.9rem}
.pop-logos{display:flex;flex-wrap:wrap;align-items:center;gap:20px 32px;padding:18px 0 22px;border-bottom:1px solid #d5dadb;margin-bottom:20px}
.pop-logos img{max-height:72px;max-width:240px;object-fit:contain}
.pop-company{display:grid;gap:12px;justify-items:start}
.pop-company+.pop-company{margin-top:24px;padding-top:24px;border-top:1px solid #d5dadb}
.pop-company h3{margin:0}
.pop-text{color:var(--ink);font-size:.96rem}
/* Call for papers block: the deadline on a white panel with a jade edge, a button down to the form */
section.cfp{padding-block:clamp(16px,2vw,28px)}
.cfp-panel{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:20px 32px;padding:clamp(22px,3vw,32px);background:#fff;border:1px solid #d5dadb;border-left:6px solid var(--jade);border-radius:10px}
.cfp-panel.closed{border-left-color:var(--olive)}
.cfp-text{display:grid;gap:8px}
.cfp-date{margin:0;font:600 clamp(1.5rem,3vw,2rem)/1.15 var(--cond);letter-spacing:.04em;text-transform:uppercase;color:var(--deep)}
.cfp-left{margin:0;color:var(--muted)}
.cfp-actions{display:flex;flex-wrap:wrap;gap:12px}
.cfp-actions .btn-ghost{color:var(--deep);border-color:var(--deep)}
/* award nominations: the block's own text and categories under the panel */
.cfp-more{margin-top:clamp(18px,2vw,24px)}
.page-form{background:#fff;border:1px solid #d5dadb;border-top:6px solid var(--jade);border-radius:10px;padding:clamp(24px,4vw,40px);display:grid;gap:14px}
.page-form h2{font-size:clamp(1.8rem,3vw,2.3rem)}
.page-form-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px 18px;margin-top:8px}
.page-form-wide{grid-column:1/-1}
.page-form .site-form-field{display:flex;flex-direction:column;gap:6px;margin:0}
.page-form .site-form-field label{font:500 12px var(--cond);letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin:0}
.page-form textarea{min-height:200px;resize:vertical;font:inherit}
.page-form input[type=file]{width:100%;padding:14px;border:1.5px dashed var(--sage);border-radius:8px;background:#f2f6f6;font:inherit;font-size:.94rem;cursor:pointer}
.page-form input[type=url],.page-form select{width:100%;padding:12px 14px;border-radius:6px;border:1px solid #d5dadb;background:#fff;color:var(--ink);font:inherit;font-size:16px;min-height:48px}
.page-form select optgroup{font-weight:600;color:var(--deep)}
.page-form input:focus,.page-form textarea:focus,.page-form select:focus{outline:2px solid var(--aqua);outline-offset:1px;border-color:var(--aqua)}
/* the award nomination form's deadline, under its heading */
.page-form-deadline{margin:0;font:500 15px/1.3 var(--cond);letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.page-form-deadline strong{color:var(--jade);font-weight:600}
.page-form-label{font:500 12px var(--cond);letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
/* the award groups half the width each (fixed columns: “Other or not sure” spans them), stacked on phones */
.page-form-groups{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px 18px;margin-top:10px}
.page-form-groups fieldset{margin:0;padding:14px 16px;border:1px solid #d5dadb;border-radius:8px;display:grid;gap:8px;align-content:start}
.page-form-groups legend{padding:0 6px;font:600 13px var(--cond);letter-spacing:.1em;text-transform:uppercase;color:var(--deep)}
.site-form .page-form-groups label{display:flex;margin:0;font-weight:400;gap:10px;align-items:flex-start;font-size:.95rem;color:var(--ink);cursor:pointer}
.page-form-groups input{width:18px;height:18px;margin-top:2px;flex:none;accent-color:var(--jade)}
.page-form-groups fieldset.other{grid-column:1/-1;border-style:dashed}
.page-form-help,.site-form-count{display:block;font-size:.84rem;color:var(--muted);margin-top:4px}
.site-form-count.over{color:var(--jade);font-weight:600}
.page-form .site-form-error,.page-form-error{color:var(--jade);font-size:.9rem}
.site-form label.page-form-consent{display:flex;gap:10px;align-items:flex-start;margin:8px 0 0;font-size:.92rem;font-weight:400;color:var(--ink)}
.page-form-consent input{width:18px;height:18px;margin-top:3px;flex:none;accent-color:var(--jade)}
.page-form-send{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px;margin-top:8px}
.page-form-success{padding:18px 20px;border-left:4px solid var(--jade);background:#f2f6f6;color:var(--ink)}
@media (max-width:640px){.page-form-grid,.page-form-groups{grid-template-columns:1fr}}
/* edition section pages: the editions as year pills under the title */
.year-pills{display:flex;flex-wrap:wrap;gap:8px}
.year-pills a{padding:8px 16px;border:1px solid rgba(255,255,255,.45);border-radius:999px;color:var(--mist);text-decoration:none;font:500 .86rem var(--cond);min-height:40px;display:inline-flex;align-items:center}
.year-pills a:hover{background:rgba(255,255,255,.1);color:#fff}
.year-pills a[aria-current]{background:#fff;color:var(--deep);border-color:#fff}

/* galleries, video */
.gallery-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:10px}
.gallery-grid a{display:block;border-radius:8px;overflow:hidden;aspect-ratio:3/2;background:#d5dadb}
.gallery-grid img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .3s ease}
.gallery-grid a:hover img{transform:scale(1.04)}
/* Grid galleries show two full rows: 4 photos a row on a desktop (8), 3 on a tablet (6), 2 on a phone (4); in a
   column 2 a row (4). The block's “Photos shown” is the most; “View all” (.all) shows every photo, in the same rows */
.gallery-grid{grid-template-columns:repeat(4,minmax(0,1fr))}
.gallery-grid:not(.all)>a:nth-child(n+9){display:none}
@media (max-width:1020px){.gallery-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.gallery-grid:not(.all)>a:nth-child(n+7){display:none}}
@media (max-width:640px){.gallery-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.gallery-grid:not(.all)>a:nth-child(n+5){display:none}}
.gallery-grid.in-column{grid-template-columns:repeat(2,minmax(0,1fr))}
.gallery-grid.in-column:not(.all)>a:nth-child(n+5){display:none}
.gallery-more{margin-top:20px}
/* gallery "carousel": a strip of photos across the whole screen, scrolling; paused under the mouse */
section.gallery-strip{padding-block:clamp(28px,3.5vw,48px)}
section.gallery-strip+section{padding-top:clamp(28px,3.5vw,48px)}
.gallery-strip .sec-head{margin-bottom:clamp(16px,2vw,24px)}
.photo-strip{overflow:hidden}
.photo-strip-track{display:flex;gap:10px;width:max-content;animation:photo-scroll calc(var(--photo-count) * 5s) linear infinite}
.photo-strip:hover .photo-strip-track,.photo-strip:focus-within .photo-strip-track{animation-play-state:paused}
.photo-strip a{display:block;flex:none;border-radius:8px;overflow:hidden;background:#d5dadb}
.photo-strip img{display:block;height:clamp(180px,22vw,280px);width:auto;aspect-ratio:3/2;object-fit:cover;transition:transform .3s ease}
.photo-strip a:hover img{transform:scale(1.04)}
@keyframes photo-scroll{to{transform:translateX(calc(-50% - 5px))}}
@media (prefers-reduced-motion: reduce){
  .photo-strip{overflow-x:auto}
  .photo-strip-track{animation:none;padding-inline:clamp(16px,3vw,24px)}
  .photo-strip-track [aria-hidden]{display:none}
}
.lightbox{max-width:none;max-height:none;width:100vw;height:100vh;margin:0;padding:0;border:0;background:rgba(15,77,85,.95);color:#fff}
.lightbox figure{margin:0;height:100%;display:grid;place-items:center;padding:56px 16px}
.lightbox img{max-height:calc(100vh - 140px);max-width:100%;object-fit:contain}
.lightbox figcaption{font-size:.85rem;color:var(--mist);margin-top:10px;text-align:center}
.lightbox button{position:absolute;background:rgba(21,101,112,.6);color:#fff;border:1px solid rgba(255,255,255,.3);border-radius:50%;width:44px;height:44px;font-size:1.5rem;cursor:pointer}
.lb-close{top:16px;right:16px}.lb-prev{left:16px;top:50%}.lb-next{right:16px;top:50%}
.video-frame{position:relative;aspect-ratio:16/9;border-radius:10px;overflow:hidden;background:var(--deep)}
.video-frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0}

/* footer (plum), contact form */
.site-form{display:grid;gap:14px}
.site-form h3{font:700 1.5rem var(--cond)}
.site-form label{display:block;font-size:.8rem;font-weight:600;color:var(--muted);margin-bottom:4px}
.site-form input[type=text],.site-form input[type=email],.site-form textarea{width:100%;padding:12px 14px;border-radius:6px;border:1px solid #d5dadb;background:#fff;color:var(--ink);font:inherit;font-size:16px;min-height:48px}
.site-form [role=alert],.site-form .errorlist{color:var(--jade)}
footer{background:var(--deep);color:var(--mist)}
.foot-grid{display:grid;grid-template-columns:1fr 1.4fr 1.8fr;gap:40px;padding-block:56px 48px;border-bottom:1px solid rgba(255,255,255,.15)}
.foot-logo{display:block;height:44px;width:auto;margin-bottom:16px}
.foot-brand p{font-size:15px;line-height:1.7;max-width:280px}
.foot-brand strong{color:#fff}
.foot-col h2,.foot-form h2{font:500 12.5px/1.3 var(--cond);letter-spacing:.12em;text-transform:uppercase;color:#fff;margin-bottom:16px}
.foot-col h2.foot-follow{margin-top:24px}
.foot-nav+.foot-follow{margin-top:0}  /* the last group's own margin is the space */
.foot-col a,.foot-col p{display:block;font-size:15px;margin-bottom:10px;color:var(--mist);text-decoration:none}
.foot-col a:hover{color:#fff;text-decoration:underline}
/* the groups flow down two columns (each straight after the one above, no row gaps) */
.foot-nav{columns:2;column-gap:28px}
.foot-group{display:grid;align-content:start;break-inside:avoid;margin-bottom:24px}
.foot-group a{margin-bottom:8px}
.foot-col .foot-group h2{margin-bottom:12px}
.foot-col .foot-group h2 a{display:inline;margin:0;color:#fff;font:inherit}
.foot-social{display:flex;flex-wrap:wrap;gap:0 18px}
.foot-contact{margin-top:32px}
.foot-contact a{overflow-wrap:anywhere}
.foot-contact .foot-privacy{margin-top:16px}
.foot-form{scroll-margin-top:36px}
/* Page links (the Page links block): pills to the page's sections; “Stay at the top” keeps them under the header,
   the section being read marked (aria-current) */
section.page-links,.page-blocks>section.page-links{padding-block:14px}
.page-links.is-sticky{background:rgba(247,247,245,.98);border-bottom:1px solid #d5dadb}
.page-links-label{font:500 12px/1 var(--cond);letter-spacing:.2em;text-transform:uppercase;color:var(--jade)}
.page-links a{font:500 13px/1.2 var(--cond);letter-spacing:.12em;text-transform:uppercase;color:var(--deep);border-color:rgba(21,101,112,.35);background:transparent;transition:background .15s,color .15s,border-color .15s}
.page-links a:is(:hover,[aria-current]){background:var(--deep);border-color:var(--deep);color:#fff}
.foot-form-intro{font-size:15px;line-height:1.7;margin-bottom:20px}
.foot-form-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px 16px}
.foot-form-wide{grid-column:1/-1}
.foot-form .site-form-field{display:flex;flex-direction:column;gap:6px;margin:0}
.foot-form .site-form-field label{font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--mist);margin:0}
.foot-form input[type=text],.foot-form input[type=email],.foot-form textarea{background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.4);color:#fff}
.foot-form textarea{min-height:112px;resize:vertical}
.foot-form input:focus,.foot-form textarea:focus{outline:2px solid var(--aqua);outline-offset:1px;border-color:var(--aqua);background:rgba(255,255,255,.14)}
.foot-form-error,.foot-form .site-form-error{color:#ffd9cf;font-size:13.5px}
.site-form label.foot-form-consent{display:flex;align-items:flex-start;gap:10px;margin:18px 0 6px;font-size:13.5px;line-height:1.6;font-weight:400;color:var(--mist);cursor:pointer}
.foot-form-consent input{flex:none;width:16px;height:16px;margin-top:3px;accent-color:var(--aqua)}
.foot-form-send{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:16px;margin-top:18px}
.foot-form-send .btn{margin-left:auto;background:#fff;color:var(--jade)}
.foot-form .btn:disabled,.pop-form .btn:disabled{opacity:.7;cursor:progress}
.foot-form-success{padding:18px 20px;border:1px solid rgba(255,255,255,.35);border-left:3px solid var(--aqua);background:rgba(255,255,255,.08);color:#fff}
.foot-bottom{display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px;padding-block:22px calc(22px + env(safe-area-inset-bottom,0px));font-size:13px}
.foot-bottom a{color:var(--mist)}
@media (max-width:900px){.foot-grid{grid-template-columns:1fr 1fr}.foot-form-col{grid-column:1/-1}}
@media (max-width:560px){.foot-grid,.foot-form-grid{grid-template-columns:1fr}}
.foot-form-trap{position:absolute;left:-9999px}

/* popups (register interest, abstract, speaker), as on SDF: centred, a stripe of the site's colours along the top,
   a round close button */
dialog.hsp-pop{margin:auto;position:fixed;inset:0;width:min(680px,calc(100vw - 32px));max-height:min(86vh,820px);padding:0;border:none;border-radius:12px;overflow:auto;background:#fff;color:var(--ink);box-shadow:0 30px 80px rgba(15,77,85,.45)}
dialog.hsp-pop::backdrop{background:rgba(15,77,85,.7);backdrop-filter:blur(3px)}
dialog.hsp-pop[open]{animation:popIn .25s cubic-bezier(.2,.7,.3,1)}
@keyframes popIn{from{opacity:0;transform:translateY(12px) scale(.98)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){dialog.hsp-pop[open]{animation:none}}
.hsp-pop-close{position:absolute;top:16px;right:16px;z-index:3;width:40px;height:40px;border-radius:50%;border:1px solid #d5dadb;background:#fff;color:var(--deep);font-size:22px;line-height:1;cursor:pointer}
.hsp-pop-close:hover{border-color:var(--jade);color:var(--jade)}
.hsp-pop-body{padding:30px 36px 32px}
.pop-award-image{margin:0;padding:28px 64px 0;background:#fff;text-align:center}
.pop-award-image img{max-width:100%;max-height:320px;width:auto;height:auto;object-fit:contain}
.hsp-pop-body .eyebrow{display:block;margin-bottom:10px;padding-right:40px}
.hsp-pop-body h3{font-size:clamp(22px,3vw,28px);margin:0 40px 8px 0}
.hsp-pop-body .rich{color:var(--ink)}
.pop-who{color:var(--muted);font-size:14.5px;margin-bottom:18px}
.pop-person{display:flex;gap:24px;align-items:center;padding-bottom:22px}
.pop-photo{width:112px;height:112px;flex:none;border-radius:50%;object-fit:cover;border:3px solid var(--sage)}
@media (max-width:560px){.hsp-pop-body{padding:24px 22px 26px}.pop-person{flex-direction:column;align-items:flex-start}}
.hsp-pop-form{width:min(620px,calc(100vw - 32px))}
.hsp-pop-form:focus{outline:none}
.pop-form h3{margin-bottom:18px}
.pop-form-intro{color:var(--muted);margin-bottom:18px}
.pop-form-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px 16px}
.pop-form-wide{grid-column:1/-1}
.pop-form textarea{width:100%;min-height:120px;resize:vertical;padding:12px 14px;border-radius:6px;border:1px solid #d5dadb;font:inherit}
@media (max-width:560px){.pop-form-grid{grid-template-columns:1fr}}
.pop-form .site-form-field{display:flex;flex-direction:column;gap:6px;margin:0}
.pop-form .site-form-field label,.pop-form-areas legend{font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);margin:0}
.pop-form input:focus{outline:2px solid var(--aqua);outline-offset:1px;border-color:var(--aqua)}
.pop-form-error,.pop-form .site-form-error{color:var(--jade);font-size:13.5px}
.pop-form-areas{margin:20px 0 0;padding:0;border:none}
.pop-form-areas legend{margin-bottom:10px}
.pop-form-areas label{display:inline-flex;align-items:center;gap:8px;margin:0 22px 6px 0;cursor:pointer;color:var(--ink)}
.pop-form-areas input,.pop-form-consent input{width:16px;height:16px;accent-color:var(--jade)}
.site-form label.pop-form-consent{display:flex;gap:10px;align-items:flex-start;margin:18px 0 0;font-size:.88rem;font-weight:400;color:var(--muted)}
.pop-form-consent input{margin-top:3px;flex:none}
.pop-form-send{display:flex;flex-wrap:wrap;align-items:center;gap:16px;margin-top:20px}
.pop-form-success{margin-top:8px;padding:18px 20px;border:1px solid #d5dadb;border-left:3px solid var(--jade);background:#f2f6f6;color:var(--ink)}

/* the cookie banner (includes/cookie_banner.html): a plum card as the footer, the popups' stripe along its top;
   its SDF button names take TSTF's buttons */
.cookie-banner{position:fixed;left:16px;right:16px;bottom:16px;z-index:40;max-width:560px;margin-inline:auto;background:var(--deep);color:var(--mist);border-radius:12px;padding:24px 22px 20px;box-shadow:0 18px 50px rgba(15,77,85,.45);overflow:hidden;font-size:.95rem;line-height:1.6}
.cookie-banner[hidden]{display:none}
.cookie-banner::before{content:"";position:absolute;left:0;right:0;top:0;height:6px;background:linear-gradient(90deg,var(--jade) 0 40%,var(--aqua) 40% 75%,var(--olive) 75%)}
.cookie-banner a{color:#fff;text-underline-offset:3px}
.cookie-banner-buttons{display:flex;justify-content:flex-end;gap:10px;margin-top:16px}
.cookie-banner .btn{padding:10px 22px}
.cookie-banner .btn-primary{background:#fff;color:var(--jade)}
.cookie-banner .btn-outline{border-color:rgba(255,255,255,.6);background:transparent;color:#fff}
.cookie-banner .btn-outline:hover{border-color:#fff;background:rgba(255,255,255,.08)}
/* Sponsor logos: always in their own colours (companies don't want their logos changed), never grey. */
.marquee img,.marquee img:hover{filter:none;opacity:1}
.marquee .lg a{display:block}

/* Header submenus */
.top nav details.sub{position:relative}
.top nav details.sub summary{list-style:none;cursor:pointer;font:500 14px/1 var(--cond);letter-spacing:.12em;text-transform:uppercase;color:var(--ink);padding:10px 12px}
.top nav details.sub summary::-webkit-details-marker{display:none}
.top nav details.sub summary::after{content:" ▾";font-size:11px;color:var(--jade)}
.top nav details.sub>div{position:absolute;top:100%;left:0;min-width:230px;background:#fff;border:1px solid rgba(21,101,112,.15);border-radius:var(--radius);box-shadow:0 14px 34px -12px rgba(15,77,85,.35);padding:8px;display:grid;z-index:5}
.top nav details.sub>div a{padding:11px 12px}
@media (max-width:1020px){.top nav details.sub>div{position:static;box-shadow:none;border:0;padding:0 0 0 14px}}

/* Footer, laid out as TSTF's: the logo, organiser and conference team; the menu in groups down two columns and the
   social links; then the contact form */
footer .inner{grid-template-columns:1fr 1.25fr 1.4fr}
footer .foot-col a,footer .foot-col p{color:#fff;font-size:15px;margin:0 0 10px;opacity:1}
footer .foot-col a:hover{color:var(--aqua);text-decoration:none}
footer .foot-contact{margin-top:32px}
footer .foot-contact p{font-size:14.5px;line-height:1.6;color:var(--mist)}
footer .foot-group h4{margin:0 0 14px}
footer .foot-group h4 a{display:inline;margin:0;color:inherit;font:inherit}
footer .foot-group a{margin-bottom:9px}
footer h4.foot-follow{margin:4px 0 14px}
.foot-form h2{font:600 22px/1.2 var(--cond);letter-spacing:.08em;text-transform:uppercase;color:#fff;margin:6px 0 14px}
.foot-form-send .btn{background:var(--jade);color:#fff}
@media (max-width:1020px){footer .inner{grid-template-columns:1fr 1fr}.foot-form-col{grid-column:1/-1}}
@media (max-width:600px){footer .inner{grid-template-columns:1fr}.foot-form-grid{grid-template-columns:1fr}}

/* Section heads on light grounds after page titles */
/* the home hero's ground: the wave pattern (.seigaiha; the band's own background is only its colour, so the pattern
   shows), shaded as the hero, deeper on the left under the title */
.page-title.seigaiha{background-color:var(--deep)}
.page-title{position:relative;padding-bottom:0;overflow:hidden}
.page-title::before{content:"";position:absolute;inset:0;pointer-events:none;background:
  radial-gradient(ellipse at 80% 40%,rgba(0,179,190,.28),transparent 60%),
  linear-gradient(90deg,rgba(15,77,85,.9) 0%,rgba(21,101,112,.7) 32%,rgba(21,101,112,.3) 60%,rgba(21,101,112,.08) 100%),
  linear-gradient(180deg,rgba(15,77,85,.3) 0%,transparent 40%,rgba(15,77,85,.6) 100%)}
.page-title .wrap,.page-title .fret{position:relative;z-index:1}
.page-title .wrap{padding-bottom:clamp(40px,6vw,72px)}
.page-title h1{font:600 clamp(34px,5vw,56px)/1.05 var(--cond);text-transform:uppercase;letter-spacing:.02em}
.page-title .eyebrow{color:var(--aqua)}
/* Inner pages (review, standard, section pages): blocks closer together than on the home page, with the same rules as
   every site (templates/CLAUDE.md, “Inner pages”) */
.page-blocks{padding-bottom:clamp(24px,4vw,48px)}
.page-blocks>section{padding-block:clamp(24px,3vw,40px)}
.page-blocks>section.prog,.page-blocks>section.programme,.page-blocks>section.voices{padding-block:clamp(36px,4.5vw,56px)}
.page-blocks>section.about+section.about{padding-top:0}
.page-blocks .sec-head{gap:8px;margin-bottom:clamp(16px,2vw,24px)}
.page-blocks .sec-head h2{font-size:clamp(1.6rem,2.8vw,2.2rem)}
.page-blocks .lead{font-size:17px}
.page-blocks>.logos{margin-block:clamp(12px,2vw,24px)}

/* Text section (Justin's “About”) */
.about .grid.img-left>.about-side{order:-1}
/* The image's size (the block's “Image size”): its column a third, about 45% (Justin's About) or half of the row */
.about .grid.img-small{grid-template-columns:2fr 1fr}
.about .grid.img-large{grid-template-columns:1fr 1fr}
.about .grid.img-left{grid-template-columns:1fr 1.25fr}
.about .grid.img-left.img-small{grid-template-columns:1fr 2fr}
.about .grid.img-left.img-large{grid-template-columns:1fr 1fr}
@media (max-width:900px){.about .grid.img-small,.about .grid.img-large,.about .grid.img-left{grid-template-columns:1fr}}
/* Every text section but the home page's About: the text wraps around the image, as TSTF's */
.flow{display:flow-root}
.flow-photo{float:right;width:min(42%,520px);margin:6px 0 18px 36px}
.flow-photo-left{float:left;margin:6px 36px 18px 0}
.flow-photo-small{width:min(33%,400px)}
.flow-photo-large{width:min(50%,620px)}
.flow-photo img{display:block;width:100%;height:auto;border-radius:var(--radius)}
.flow-photo figcaption{font-size:12.5px;color:var(--muted);margin-top:6px}
@media (max-width:700px){.flow-photo,.flow-photo-left{float:none;width:100%;margin:0 0 18px}}
/* The text's width (the block's “Text width”): the page's (1240px) unless “narrow” */
.about .narrow{max-width:800px}
/* Justin's serif lead: the first paragraph of the home page's text sections only (on other pages each section would
   open in serif, in bold when the paragraph is) */
main>.about .about-text>p:first-child{font:400 19px/1.6 var(--serif);color:var(--muted)}
/* On the home page a list is Justin's row of tags (his document types); on other pages, a plain list. */
main>.about .about-text ul{display:flex;flex-wrap:wrap;gap:8px;margin:24px 0 8px;padding:0;list-style:none}
main>.about .about-text ul li{font:500 13px/1 var(--cond);letter-spacing:.12em;text-transform:uppercase;padding:9px 12px;border:1px solid rgba(21,101,112,.25);border-radius:999px;color:var(--deep);background:#fff}
.rich>*+*{margin-top:14px}
/* links in text: deep teal (jade is too light to read on white) with a jade underline, so plain ones stand out
   from the text; on hover the underline thickens and the link turns jade on a faint jade highlight */
.rich a:not(.btn){color:var(--deep);text-decoration:underline;text-decoration-color:var(--jade);text-decoration-thickness:1.5px;text-underline-offset:3px;border-radius:2px;transition:color .15s,background-color .15s,text-decoration-thickness .15s}
.rich a:not(.btn):hover,.rich a:not(.btn):focus-visible{color:var(--jade);background:rgba(30,157,139,.1);text-decoration-thickness:2.5px}
/* lists in any text (a text section in a column too), as on every site: indented, jade bullets and numbers */
.rich ul,.rich ol{padding-left:20px}
.rich li::marker{color:var(--jade)}
.page-blocks .about-text ul{margin:12px 0;padding-left:20px}
.page-blocks .about-text li::marker{color:var(--jade)}
/* a text section's paragraphs and lists in one grey (Justin's .about p), full width or in a column; the bullets stay jade */
.about .rich li,.hsp-col>.rich,.hsp-col>details .rich{color:var(--muted)}
details.more summary{cursor:pointer;margin-top:16px;font:500 13px/1 var(--cond);letter-spacing:.22em;text-transform:uppercase;color:var(--jade)}
.photo-wait{aspect-ratio:4/3;background:repeating-linear-gradient(45deg,var(--mist) 0 10px,#fff 10px 20px)}

/* Figures (Stats block), presentations (Downloads block) */
.hsp-stats{padding:0 0 80px}
.hsp-stats .scroll-card{max-width:820px;margin:0 auto}
/* The figures side by side: each label under its number, a thin rule between them (Justin's card lists them one per
   row, number and label on a line; on a phone they stay so, the label just after the number) */
.hsp-stats .scroll-card{padding:40px clamp(24px,4vw,44px)}
.hsp-stats .stat b{min-width:0}
@media (min-width:600px){
  .hsp-stats .stats{grid-template-columns:repeat(auto-fit,minmax(0,1fr));gap:0}
  .hsp-stats .stat{flex-direction:column;align-items:flex-start;gap:10px;border:0;padding:0 clamp(16px,2.5vw,32px);border-left:1px solid rgba(230,231,232,.22)}
  .hsp-stats .stat:first-child{border-left:0;padding-left:0}
  .hsp-stats .stat:last-child{padding-right:0}
  .hsp-stats .stat b{font-size:clamp(44px,5.5vw,64px)}
  .hsp-stats .stat span{font-size:14px;letter-spacing:.16em;line-height:1.3}
}
.hsp-stats .eyebrow{color:var(--aqua);margin-bottom:6px}
.hsp-downloads{padding:56px 0}
.hsp-downloads .download{background:var(--deep);border-style:solid;margin-top:0}
.download-text{flex:1;min-width:240px;font-size:14.5px;color:var(--mist)}
.download-text p{margin:0}

/* Fees (Fees block): descriptions under the fees, sponsorship items under the tiers */
.fee-desc{font-size:13px;line-height:1.5;color:var(--muted);margin-top:10px}
.fee-desc p{margin:0}
.fee.hl .fee-desc{color:inherit;opacity:.9}
.fee-until{display:block;margin-top:4px}
.tier .rich ul{margin:0;padding:0 0 0 18px;font-size:14.5px;color:var(--muted)}
.tier .rich li{margin-bottom:8px}
.tier .rich li::marker{color:var(--jade)}
.tier-items{margin-top:16px;padding-top:14px;border-top:1px dashed rgba(21,101,112,.25);font-size:14px;color:var(--muted)}
.tier-items span{display:block;font:500 12px/1 var(--cond);letter-spacing:.18em;text-transform:uppercase;color:var(--deep);margin-bottom:10px}
.tier-items ul{margin:0;padding:0 0 0 18px}
.tier-items li{margin-bottom:6px}
.tier-items .sold-item{opacity:.6}
.tier-items em{font:500 11px/1 var(--cond);letter-spacing:.14em;text-transform:uppercase;color:var(--olive);font-style:normal}
.booth .rich ul{margin:0;padding-left:18px;font-size:14.5px}

/* Venue */
.venue .grid>div>h3 a{color:var(--deep)}
.venue-address{margin:0 0 12px;color:var(--muted)}
.venue-text{color:var(--muted);margin:0 0 16px}
.venue-cta{display:flex;gap:12px;align-items:center;flex-wrap:wrap;margin:24px 0}
.venue .photo{aspect-ratio:4/3}
/* the venue's website and map links under its address; its map link on the block's photo */
.venue-links{display:flex;flex-wrap:wrap;gap:8px 24px;margin:0 0 16px}
.venue-links a{font:500 14px/1.2 var(--cond);letter-spacing:.14em;text-transform:uppercase;color:var(--deep);text-decoration:none;border-bottom:1.5px solid var(--aqua);padding-bottom:3px}
.venue-links a::after{content:" →"}
.venue-links a:hover{color:var(--jade)}
.photo-map{position:absolute;top:16px;right:16px;z-index:1;padding:10px 16px;border-radius:var(--radius);background:rgba(15,77,85,.88);color:#fff;font:500 13px/1 var(--cond);letter-spacing:.14em;text-transform:uppercase;text-decoration:none}
.photo-map:hover{background:var(--deep)}

/* Full programme: a heading per day; parallel tracks side by side (stacked on phones) */
.prog{background:var(--paper)}
.prog-day{margin-top:8px}
/* the full programme's days as tabs (TSTF's): the day's date and title; its panel fades in (hsp.js) */
.tabs{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 28px}
.tab-btn{display:flex;flex-direction:column;align-items:flex-start;gap:3px;min-height:44px;padding:10px 18px;border:1px solid #c9d2d3;border-radius:6px;background:#fff;color:var(--deep);font:600 15px/1.1 var(--cond);letter-spacing:.1em;text-transform:uppercase;cursor:pointer;transition:background .15s,border-color .15s,color .15s}
.tab-btn span{font:500 11px/1.1 var(--cond);letter-spacing:.14em;color:var(--jade)}
.tab-btn:hover{border-color:var(--jade)}
.tab-btn.active{background:var(--deep);border-color:var(--deep);color:#fff}
.tab-btn.active span{color:var(--aqua)}
.day-panel{display:none;opacity:0;transform:translateY(8px);transition:opacity .35s ease,transform .35s ease}
.day-panel.active{display:block}
.day-panel.shown{opacity:1;transform:none}
@media (max-width:600px){.tabs{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;margin-inline:-16px;padding-inline:16px}.tabs::-webkit-scrollbar{display:none}.tab-btn{flex:none}}
.prog-date{font:600 22px/1.2 var(--cond);letter-spacing:.08em;text-transform:uppercase;color:var(--deep);margin:0 0 14px;padding-bottom:10px;border-bottom:3px solid var(--olive)}
.prog-date span{color:var(--jade);font-size:16px;margin-left:10px}
.sess-track{display:inline-block;margin-bottom:6px;font:500 12px/1 var(--cond);letter-spacing:.2em;text-transform:uppercase;color:var(--olive)}
.tracks{display:grid;grid-template-columns:repeat(var(--tracks,2),minmax(0,1fr));gap:0 28px;margin:14px 0}
.track-col{border-top:4px solid var(--jade);padding-top:10px}
/* the columns' sessions on shared rows (slot.rows: the name, then each session): the cards the same height, the Q&As level */
.track-col{display:grid;grid-template-rows:subgrid;grid-row:span var(--rows,3);align-content:start}
.track-col:nth-child(2){border-top-color:var(--aqua)}
.track-col:nth-child(3){border-top-color:var(--olive)}
.track-name{display:block;font:600 16px/1 var(--cond);letter-spacing:.2em;text-transform:uppercase;color:var(--deep);margin:4px 0 6px}
/* in a track's column the session's time goes above its title, leaving the column's width to the talks */
.tracks .sess{grid-template-columns:minmax(0,1fr);gap:6px;align-content:start}
.tracks .talk{grid-template-columns:46px minmax(0,1fr)}
.who-line{color:var(--muted);font-size:.92rem;margin:2px 0 0}
.who-line button{background:none;border:0;padding:0;font:inherit;color:var(--deep);text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.talk-summary{margin:6px 0 0;color:var(--ink);font-size:.92rem;line-height:1.55}
.talk-summary p{margin:0}
.talk-summary p+p{margin-top:6px}
/* "Read more" after a talk's summary: opens its abstract popup */
.talk-more{display:inline-flex;align-items:center;gap:6px;margin-top:6px;padding:0;border:0;background:none;color:var(--jade);font:600 12px/1 var(--cond);letter-spacing:.16em;text-transform:uppercase;cursor:pointer}
.talk-more::after{content:"→";letter-spacing:0;transition:transform .15s}
.talk-more:hover,.talk-more:focus-visible{color:var(--deep)}
.talk-more:hover::after{transform:translateX(3px)}
.slides{margin-left:10px;font:500 11px/1 var(--cond);letter-spacing:.14em;text-transform:uppercase;color:var(--jade)}
.prog-brochure,.prog-foot{margin-top:28px}
@media (max-width:820px){.tracks{grid-template-columns:1fr;gap:18px}.track-col{display:block;grid-row:auto}.sess,.tracks .sess{grid-template-columns:1fr;gap:4px}}

/* Awards (Awards block) */
.awards-filters{display:flex;flex-wrap:wrap;gap:12px 18px;align-items:flex-end;margin:0 0 28px;padding:18px 20px;background:#fff;border-radius:var(--radius);border:1px solid rgba(21,101,112,.15);font-size:14px}
.awards-filters label{display:grid;gap:6px;font:500 12px/1 var(--cond);letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.awards-filters select,.awards-filters input{font:400 15px var(--sans);padding:9px 10px;border:1px solid #d5dadb;border-radius:4px;background:#fff;color:var(--ink);text-transform:none;letter-spacing:0}
.awards-filters fieldset{border:0;padding:0;margin:0;display:grid;gap:6px}
.awards-filters legend{padding:0;margin:0 0 6px;font:500 12px/1 var(--cond);letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.awards-filters fieldset label{display:flex;align-items:center;gap:8px;font:400 15px/1.2 var(--sans);letter-spacing:0;text-transform:none;color:var(--ink)}
.awards-filters input[type=checkbox]{margin:0;padding:0}
.awards-reset{padding:9px 0;font:500 12px/1 var(--cond);letter-spacing:.14em;text-transform:uppercase;color:var(--deep);text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.awards-reset[hidden]{display:none}
.awards-count{margin-left:auto;font:500 13px/1 var(--cond);letter-spacing:.14em;text-transform:uppercase;color:var(--deep)}
.award-grid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:22px}
.award-card{position:relative;background:#fff;border-radius:var(--radius);overflow:hidden;border-top:4px solid var(--jade);display:flex;flex-direction:column}
.award-card[data-group=id]{border-top-color:var(--aqua)}
.award-card[data-group=achievement]{border-top-color:var(--olive)}
.award-card .photo{border-radius:0;aspect-ratio:4/3;background:var(--mist)}
.award-card .photo img{object-fit:contain;padding:12px;background:#fff}
.award-card>div{flex:1;padding:18px 20px 18px;display:flex;flex-direction:column;gap:6px}
.award-card .award-meta{font:500 12px/1 var(--cond);letter-spacing:.16em;text-transform:uppercase;color:var(--jade)}
.award-card h3{margin:0;font:600 19px/1.2 var(--cond);letter-spacing:.04em;text-transform:uppercase;color:var(--deep)}
.award-card h3 button{all:unset;cursor:pointer;text-decoration:underline;text-decoration-color:rgba(21,101,112,.35);text-underline-offset:4px}
.award-card h3 button::after{content:"";position:absolute;inset:0;z-index:1}
.award-card h3 button:focus-visible{outline:2px solid var(--jade);outline-offset:3px}
.award-card:has(h3 button){cursor:pointer;transition:box-shadow .2s,transform .2s}
.award-card:has(h3 button):hover{box-shadow:0 12px 30px rgba(15,77,85,.16);transform:translateY(-2px)}
.award-card p{margin:0;font-size:14.5px;color:var(--muted)}
.award-card .award-category{margin-top:auto;padding-top:10px;align-self:flex-end;text-align:right;font:500 11px/1.3 var(--cond);letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.awards-none{margin-top:20px;color:var(--muted)}
.hsp-awards{padding-block:clamp(36px,5vw,72px)}
.award-card[hidden],[data-award][hidden]{display:none}

/* Sponsor wall (Sponsors block "grid", sites/hsp/blocks/_stands.html, as TSTF's): a centred heading per tier, its
   tiles centred under it and smaller down the tiers; white tiles, each logo fitted to the same height band, always in
   its own colours. */
.wall{display:grid;gap:clamp(36px,5vw,56px)}
@media (min-width:761px){
  .wall:has(>.tier-platinum+.tier-diamond){grid-template-columns:1fr 1fr;column-gap:clamp(24px,4vw,48px)}
  .wall:has(>.tier-platinum+.tier-diamond)>.wall-tier{grid-column:1/-1}
  .wall:has(>.tier-platinum+.tier-diamond)>:is(.tier-platinum:has(+.tier-diamond),.tier-platinum+.tier-diamond){grid-column:auto}
}
.wall-tier{--tile-w:190px;--tile-h:110px;display:grid;gap:20px}
.wall-tier.size-xl{--tile-w:340px;--tile-h:190px}
.wall-tier.size-l{--tile-w:260px;--tile-h:150px}
.wall-tier.size-m{--tile-w:220px;--tile-h:125px}
.wall-head{display:flex;align-items:center;gap:16px;margin:0;font:500 14px/1 var(--cond);letter-spacing:.22em;text-transform:uppercase;color:var(--jade)}
.wall-head::before,.wall-head::after{content:"";flex:1;height:1px;background:rgba(21,101,112,.2)}
/* the names-only layout on the wall's tiers: a white card per name, in Oswald capitals on the tier's edge colour, smaller
   down the tiers */
.wall-tier{--name-size:14px;--name-w:170px;--name-edge:var(--olive)}
.wall-tier.size-xl{--name-size:22px;--name-w:300px;--name-edge:var(--deep)}
.wall-tier.size-l{--name-size:17px;--name-w:220px;--name-edge:var(--jade)}
.wall-tier.size-m{--name-size:15px;--name-w:190px;--name-edge:var(--aqua)}
.names{display:flex;flex-wrap:wrap;justify-content:center;gap:12px;list-style:none;margin:0;padding:0}
.names li{display:grid;place-items:center;min-width:min(var(--name-w),100%);max-width:100%;min-height:calc(var(--name-size) * 3.4);padding:12px 22px;background:#fff;border:1px solid rgba(21,101,112,.15);border-top:3px solid var(--name-edge);border-radius:var(--radius);font:500 var(--name-size)/1.25 var(--cond);letter-spacing:.06em;text-transform:uppercase;color:var(--deep);text-align:center}
.tiles{display:flex;flex-wrap:wrap;justify-content:center;gap:18px;list-style:none;margin:0;padding:0}
.tile{width:var(--tile-w);height:var(--tile-h)}
.tile-btn{display:flex;align-items:center;justify-content:center;width:100%;height:100%;padding:12% 11%;background:#fff;border:1px solid rgba(21,101,112,.15);border-radius:var(--radius);cursor:pointer;transition:transform .15s ease,box-shadow .15s ease,border-color .15s ease}
.tile-btn:hover,.tile-btn:focus-visible{transform:translateY(-3px);box-shadow:0 18px 40px -22px rgba(21,101,112,.55);border-color:var(--jade)}
.tile-logos{display:flex;align-items:center;justify-content:center;gap:12px;width:100%;height:100%;min-height:0}
.tile-logos img{max-width:100%;max-height:100%;object-fit:contain}
/* a sponsorship shared by several companies (KURZ & OVD Kinegram): their logos one above the other */
.tile-logos.several{flex-direction:column;gap:8px}
/* each logo an equal share of the height, across the tile's width; the tile's margins smaller, three logos being
   too small inside the usual ones */
.tile-logos.several img{flex:1 1 0;min-height:0;width:100%;max-height:none}
.tile-btn:has(.tile-logos.several){padding:7% 9%}
.tile-btn:has(.tile-logos.several>img:nth-child(3)){padding:5% 8%}
.tile-logos.several:has(>img:nth-child(3)){gap:5px}
.tile-name{font:600 17px/1.2 var(--cond);letter-spacing:.06em;text-transform:uppercase;color:var(--deep);text-align:center}
.hsp-pop .pop-company h3{font:600 20px/1.2 var(--cond);letter-spacing:.04em;text-transform:uppercase;color:var(--deep)}
@media (max-width:560px){
  .tiles{gap:10px}
  .tile{width:calc(50% - 5px);height:auto;aspect-ratio:16/10}
  .wall-tier.size-xl .tile{width:100%;aspect-ratio:16/8}
}
/* The popups' stripe along the top, as SDF's, in the HSP colours */
.hsp-pop .stripe-bar{position:sticky;top:0;z-index:2;height:6px;background:linear-gradient(90deg,var(--deep) 0 30%,var(--jade) 30% 55%,var(--aqua) 55% 80%,var(--olive) 80%)}

/* Custom HTML block: the site's colours for pasted HTML (var(--primary), var(--secondary), var(--accent)) */
.custom-html{--primary:var(--deep);--secondary:var(--jade);--accent:var(--olive)}

/* Headings inside a text (the editor's H2, H3, H4): smaller than the section's heading, closer to what follows */
.rich h2{font:600 26px/1.2 var(--cond);letter-spacing:.04em;text-transform:uppercase;color:var(--deep)}
.rich h3{font:600 20px/1.25 var(--cond);letter-spacing:.05em;text-transform:uppercase;color:var(--deep)}
.rich h4{font:600 17px/1.35 var(--sans);color:var(--ink)}
.rich>:is(h2,h3):not(:first-child){margin-top:30px}
.rich>h4:not(:first-child){margin-top:22px}
.rich>:is(h2,h3,h4)+*{margin-top:8px}
/* Lists in a text keep their bullets and numbers (Tailwind's reset removes them; the home page's tag row overrides) */
.rich ul{list-style:disc}.rich ol{list-style:decimal;padding-left:20px}

/* Attendees (as hsp-asia.com's): a card per organisation, A–Z across the rows, its country under its name; the
   search box filters them (hsp.js); government organisations with a jade edge */
.att-tools{display:flex;flex-wrap:wrap;align-items:center;gap:12px 18px;margin:0 0 22px}
.att-tools input{flex:1 1 280px;max-width:440px;padding:11px 14px;border:1px solid #c9d2d3;border-radius:6px;background:#fff;font:400 15px/1.2 var(--sans);color:var(--ink)}
.att-tools input:focus{outline:2px solid var(--jade);outline-offset:1px;border-color:var(--jade)}
.att-count{font:500 12.5px/1.3 var(--cond);letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.att-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;list-style:none;margin:0;padding:0}
@media (max-width:1020px){.att-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:760px){.att-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:460px){.att-grid{grid-template-columns:1fr}}
.att{display:flex;flex-direction:column;gap:3px;padding:12px 16px;border-radius:8px;background:rgba(30,157,139,.09)}
.att b{font-weight:600;font-size:15px;line-height:1.3;color:var(--ink)}
.att span{font-size:13px;line-height:1.3;color:var(--muted)}
.att.gov{box-shadow:inset 4px 0 0 var(--jade)}
.att[hidden],.att-group[hidden]{display:none}
.att-group+.att-group{margin-top:28px}
.att-group h3{font:600 16px/1.2 var(--cond);letter-spacing:.14em;text-transform:uppercase;color:var(--deep);margin:0 0 12px;padding-bottom:6px;border-bottom:2px solid var(--olive)}
.att-none{color:var(--muted);margin-top:8px}
.att-key{display:flex;align-items:center;gap:8px;margin-top:18px;font:500 12px/1 var(--cond);letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
.att-key i{width:16px;height:16px;border-radius:3px;background:rgba(30,157,139,.09);box-shadow:inset 4px 0 0 var(--jade)}
.att-empty{color:var(--muted)}
.att-empty a{color:var(--deep);text-decoration:underline}

/* The page's background (Background on review, standard and section pages): every block on one ground. The text
   sections' own lattice (Justin's home-page About) is left to the home page. */
.page-blocks .lattice{background-image:none}
.page-bg-tint{background-color:#edf2f1}
.page-bg-pattern{background-color:var(--paper);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48'%3E%3Cg fill='none' stroke='%23156570' stroke-opacity='.07' stroke-width='1.4'%3E%3Cellipse cx='12' cy='12' rx='15' ry='7' transform='rotate(45 12 12)'/%3E%3Cellipse cx='36' cy='12' rx='15' ry='7' transform='rotate(-45 36 12)'/%3E%3Cellipse cx='12' cy='36' rx='15' ry='7' transform='rotate(-45 12 36)'/%3E%3Cellipse cx='36' cy='36' rx='15' ry='7' transform='rotate(45 36 36)'/%3E%3C/g%3E%3C/svg%3E")}
:is(.page-bg-tint,.page-bg-pattern)>section.prog{background:transparent}  /* the full programme on the page's ground, not its own pale band */

/* Password page (a protected document, “Download all”, a protected page) and “download started”
   (templates/password_required.html, download_started.html): as TSTF's, a popup card on the deep wave ground */
.lock-backdrop{position:relative;overflow:hidden;min-height:calc(100vh - 140px);display:flex;align-items:center;justify-content:center;padding:64px 16px;background:var(--deep) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48'%3E%3Crect width='48' height='48' fill='%23156570'/%3E%3Cg fill='%230f4d55' stroke='%23ffffff' stroke-opacity='.10' stroke-width='1.3'%3E%3Cellipse cx='12' cy='12' rx='15' ry='7' transform='rotate(45 12 12)'/%3E%3Cellipse cx='36' cy='12' rx='15' ry='7' transform='rotate(-45 36 12)'/%3E%3Cellipse cx='12' cy='36' rx='15' ry='7' transform='rotate(-45 12 36)'/%3E%3Cellipse cx='36' cy='36' rx='15' ry='7' transform='rotate(45 36 36)'/%3E%3C/g%3E%3Cg fill='%23ffffff' fill-opacity='.14'%3E%3Ccircle cx='24' cy='24' r='2.2'/%3E%3Ccircle cx='0' cy='0' r='2.2'/%3E%3Ccircle cx='48' cy='0' r='2.2'/%3E%3Ccircle cx='0' cy='48' r='2.2'/%3E%3Ccircle cx='48' cy='48' r='2.2'/%3E%3C/g%3E%3C/svg%3E")}
.lock-backdrop .fine-lines,.lock-backdrop .guilloche{display:none}
.lock-card{position:relative;z-index:2;width:min(440px,100%);background:#fff;color:var(--ink);border-radius:var(--radius);box-shadow:0 30px 80px rgba(0,0,0,.35);overflow:hidden;animation:lockIn .3s cubic-bezier(.2,.7,.3,1)}
.lock-card .stripe-bar{display:block;height:6px;background:linear-gradient(90deg,var(--deep) 0 30%,var(--jade) 30% 55%,var(--aqua) 55% 80%,var(--olive) 80%)}
.lock-card .stripe-bar span{display:none}
.lock-body{padding:32px 34px 30px}
.lock-icon{width:34px;height:34px;color:var(--jade);margin-bottom:14px}
.lock-body .eyebrow{display:block;margin-bottom:8px}
.lock-body h2{font:600 clamp(26px,4vw,32px)/1.1 var(--cond);letter-spacing:.02em;text-transform:uppercase;color:var(--deep);margin:0 0 10px}
.lock-body>p{color:var(--muted);font-size:15px;margin:0 0 22px}
.lock-form label{display:block;font:500 12px/1 var(--cond);letter-spacing:.16em;text-transform:uppercase;color:var(--muted);margin-bottom:6px}
.lock-form input[type=password]{width:100%;padding:13px 14px;font:inherit;font-size:16px;color:var(--ink);background:#fff;border:1px solid #c9d2d3;border-radius:6px;margin-bottom:14px}
.lock-form input[type=password]:focus{outline:2px solid var(--jade);outline-offset:1px;border-color:var(--jade)}
.lock-form input[aria-invalid=true]{border-color:#b3261e}
.lock-error{color:#b3261e;font-size:14px;margin:-6px 0 14px}
.lock-form .btn,.lock-back{width:100%;justify-content:center}
.lock-card .btn-gold{background:var(--jade);color:#fff;border-color:var(--jade)}
.lock-card .btn-gold:hover{background:var(--deep);border-color:var(--deep);color:#fff}
.lock-card .btn-outline{background:#fff;border-color:#c9d2d3;color:var(--deep);margin-top:16px}
.lock-form .btn:disabled{opacity:.7;cursor:progress}
.lock-help{margin-top:18px;font-size:13.5px;color:var(--muted);text-align:center}
.lock-help a{color:var(--deep)}
.download-file{color:var(--ink);font-size:15px;margin-bottom:12px;word-break:break-word}
@keyframes lockIn{from{opacity:0;transform:translateY(12px) scale(.98)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.lock-card{animation:none}}

/* A text section's “Sponsored by” (blocks/_sponsored_by.html): the label in Oswald capitals on jade, the logos on
   white tiles as the sponsor wall's, in their own colours */
.sponsored-by{margin-top:28px;gap:12px}
.sponsored-by-label{font:500 13px/1 var(--cond);letter-spacing:.22em;text-transform:uppercase;color:var(--jade);opacity:1}
.sponsored-by-logos{gap:14px}
.sponsored-by-logos li{border:1px solid rgba(21,101,112,.15);border-radius:var(--radius);transition:border-color .15s,box-shadow .15s}
.sponsored-by-logos li:has(a):hover{border-color:var(--jade);box-shadow:0 14px 30px -20px rgba(21,101,112,.55)}
.sponsored-by-name{font:500 16px/1.2 var(--cond);letter-spacing:.06em;text-transform:uppercase;color:var(--deep)}

/* Call to action (blocks/call_to_action.html): a closing band on the hero's wave ground, the words on the left and
   the buttons on the right, under each other on phones */
.hsp-cta{background-color:var(--deep);color:#fff;padding:clamp(56px,7vw,88px) 0;overflow:hidden}
.hsp-cta::before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(15,77,85,.92) 0%,rgba(15,77,85,.55) 60%,rgba(15,77,85,.2) 100%);pointer-events:none}
.hsp-cta .wrap{position:relative}
.hsp-cta-grid{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:32px 56px}
.hsp-cta-grid>div:first-child{display:grid;gap:14px;justify-items:start;flex:1 1 420px;min-width:0;max-width:680px}
.hsp-cta .seal{color:var(--aqua)}
.hsp-cta h2{font:600 clamp(28px,4vw,42px)/1.1 var(--cond);text-transform:uppercase;letter-spacing:.02em;margin:0;color:#fff}
.hsp-cta p{font:400 italic 19px/1.55 var(--serif);color:var(--mist);margin:0}
.hsp-cta .cta{display:flex;flex-wrap:wrap;gap:12px}
@media (max-width:700px){.hsp-cta-grid{display:grid;gap:28px}.hsp-cta .btn{width:100%;justify-content:center}}