/* BioAsia 2027 inner pages: shared finish. Loaded after site.css on the public inner pages (about, agenda, showcase, sponsor,
   attend, contact, search), scoped to body.inner. Brings the home page's design language to the shared building blocks:
   page header, sub-navigation, section headings, cards, figures, forms and buttons. Same colour tokens, fonts and layout grid as
   site.css; page-specific refinements live in assets/pages/<page>.css. */

body.inner{
  --mono:"Inter","Segoe UI",system-ui,-apple-system,sans-serif;   /* small labels use the clean text face, as on the home page */
  --ease-out:cubic-bezier(.16,1,.3,1);
  --spring:cubic-bezier(.34,1.56,.64,1);
  --lift:0 1px 2px color-mix(in srgb,var(--ink) 5%,transparent), 0 8px 18px -6px color-mix(in srgb,var(--ink) 9%,transparent), 0 24px 48px -20px color-mix(in srgb,var(--teal) 22%,transparent);
  --lift-hi:0 2px 4px color-mix(in srgb,var(--ink) 6%,transparent), 0 16px 32px -10px color-mix(in srgb,var(--ink) 14%,transparent), 0 40px 70px -28px color-mix(in srgb,var(--teal) 40%,transparent);
}
body.inner main{overflow-x:clip}

/* ================= PAGE HEADER ================= */
body.inner .phero{background:
  radial-gradient(900px 460px at 88% 0%,color-mix(in srgb,var(--glow-b) 30%,transparent),transparent 62%),
  radial-gradient(700px 400px at 0% 100%,color-mix(in srgb,var(--glow-a) 12%,transparent),transparent 60%),var(--night)}
body.inner .phero::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:.35;
  background-image:radial-gradient(rgb(255 255 255 / .5) 1px,transparent 1.2px);background-size:26px 26px;
  -webkit-mask:radial-gradient(70% 90% at 80% 20%,#000,transparent 75%);mask:radial-gradient(70% 90% at 80% 20%,#000,transparent 75%)}
body.inner .phero::after{border-width:1px;opacity:.28;box-shadow:0 0 0 40px rgb(167 139 250 / .035),0 0 0 90px rgb(167 139 250 / .02)}
body.inner .phero .wrap{padding-block:64px 56px}
body.inner .crumbs{display:inline-flex;align-items:center;gap:10px;padding:6px 14px;border-radius:999px;font:500 12.5px/1.3 var(--sans);letter-spacing:.01em;
  background:rgb(255 255 255 / .05);box-shadow:inset 0 0 0 1px rgb(255 255 255 / .1)}
body.inner .crumbs a{transition:color .2s ease}
body.inner .phero h1{margin:20px 0 16px;font-weight:800;letter-spacing:-.04em}
body.inner .phero h1 em{font-style:normal;background:linear-gradient(90deg,var(--glow-b),var(--glow-a));-webkit-background-clip:text;background-clip:text;color:transparent}
body.inner .phero p{font-size:clamp(1.02rem,1.4vw,1.14rem);line-height:1.65}

/* photo header: <section class="phero ph-photo"><img class="ph-bg" ...><div class="wrap">…
   a night veil sits over the left (where the text is) and thins out to the right so the photo reads */
body.inner .phero.ph-photo{display:flex;align-items:center;min-height:clamp(380px,44vw,520px);background:var(--night)}
body.inner .phero.ph-photo .ph-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:var(--ph-pos,center)}
body.inner .phero.ph-photo::before{z-index:1;opacity:1;-webkit-mask:none;mask:none;background:
  linear-gradient(90deg,rgb(10 10 31 / .92) 0%,rgb(10 10 31 / .78) 32%,rgb(10 10 31 / .38) 64%,rgb(10 10 31 / .14) 100%),
  linear-gradient(0deg,rgb(10 10 31 / .5),transparent 32%)}
body.inner .phero.ph-photo::after{display:none}
body.inner .phero.ph-photo .wrap{z-index:2;width:100%}
body.inner .phero.ph-photo p{max-width:52ch;color:rgb(255 255 255 / .88);text-shadow:0 1px 12px rgb(10 10 31 / .55)}
body.inner .phero.ph-photo .crumbs{background:rgb(10 10 31 / .38);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
/* phones: the text runs the full width, so the veil darkens top to bottom instead */
@media (max-width:700px){
  body.inner .phero.ph-photo{min-height:440px;align-items:flex-end}
  body.inner .phero.ph-photo .ph-bg{object-position:var(--ph-pos-sm,var(--ph-pos,center))}
  body.inner .phero.ph-photo::before{background:linear-gradient(180deg,rgb(10 10 31 / .45) 0%,rgb(10 10 31 / .7) 45%,rgb(10 10 31 / .95) 100%)}
  body.inner .phero.ph-photo .wrap{padding-bottom:48px}
}

/* banner header (Agenda): the client artwork carries its own headline, so it sits whole under the title, never behind it */
body.inner .phero.has-banner .wrap{padding-bottom:48px}
body.inner .phero .ph-banner{margin:32px 0 0;overflow:hidden;border-radius:22px;background:#EAF2FF;
  box-shadow:0 0 0 1px rgb(255 255 255 / .12),0 30px 60px -30px rgb(0 0 0 / .7)}
body.inner .phero .ph-banner img{display:block;width:100%;height:auto}
@media (max-width:700px){
  body.inner .phero.has-banner .wrap{padding-bottom:32px}
  body.inner .phero .ph-banner{margin-top:24px;border-radius:14px}
}

/* ================= SUB-NAVIGATION ================= */
body.inner .subnav{border-bottom-color:color-mix(in srgb,var(--line) 70%,transparent);box-shadow:0 10px 30px -24px color-mix(in srgb,var(--ink) 40%,transparent)}
body.inner .subnav .wrap{gap:6px;padding-block:10px}
body.inner .subnav a{font-weight:500;transition:color .25s ease,background .25s ease,box-shadow .3s ease}
body.inner .subnav a.on{background:linear-gradient(135deg,var(--cta-hover),var(--cta));color:var(--cta-ink);box-shadow:0 6px 16px -8px color-mix(in srgb,var(--cta) 90%,transparent)}

body.inner .subnav .wrap.more-right{-webkit-mask:linear-gradient(90deg,#000 calc(100% - 56px),transparent);mask:linear-gradient(90deg,#000 calc(100% - 56px),transparent)}
body.inner .subnav .wrap.more-left{-webkit-mask:linear-gradient(90deg,transparent,#000 56px);mask:linear-gradient(90deg,transparent,#000 56px)}
body.inner .subnav .wrap.more-left.more-right{-webkit-mask:linear-gradient(90deg,transparent,#000 56px,#000 calc(100% - 56px),transparent);mask:linear-gradient(90deg,transparent,#000 56px,#000 calc(100% - 56px),transparent)}

/* ================= SECTIONS ================= */
body.inner .blk{padding-block:88px;border-bottom:0;position:relative}
body.inner .blk + .blk:not(.band):not(.dark)::before{content:"";position:absolute;top:0;left:max(24px,calc((100% - 1200px) / 2 + 24px));right:max(24px,calc((100% - 1200px) / 2 + 24px));
  height:1px;background:linear-gradient(90deg,transparent,color-mix(in srgb,var(--teal) 25%,transparent),transparent)}
body.inner .blk.band{background:
  radial-gradient(800px 400px at 0% 0%,color-mix(in srgb,var(--glow-b) 12%,transparent),transparent 70%),
  radial-gradient(700px 380px at 100% 100%,color-mix(in srgb,var(--glow-a) 10%,transparent),transparent 70%),var(--surface-2)}
body.inner .blk.dark{background:
  radial-gradient(800px 500px at 90% 0%,color-mix(in srgb,var(--glow-b) 22%,transparent),transparent 60%),
  radial-gradient(700px 500px at 0% 100%,color-mix(in srgb,var(--glow-a) 10%,transparent),transparent 60%),var(--night)}
body.inner .sec-head{margin-bottom:44px}
body.inner .sec-head p{font-size:16.5px;line-height:1.7}
body.inner h2{font-weight:800;letter-spacing:-.04em}
body.inner h2 em{font-style:normal;color:var(--teal)}
body.inner .blk.dark h2 em{color:var(--glow-b)}
body.inner h3{letter-spacing:-.015em}

/* eyebrow: a small pill with a dot, as on the home page */
body.inner main .eyebrow{display:inline-flex;align-items:center;gap:9px;padding:6px 14px 6px 11px;border-radius:999px;
  font:600 11px/1.3 var(--sans);letter-spacing:.16em;
  background:color-mix(in srgb,var(--teal) 8%,transparent);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--teal) 22%,transparent)}
body.inner main .eyebrow::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor;box-shadow:0 0 0 3px color-mix(in srgb,currentColor 18%,transparent)}
body.inner .blk.dark .eyebrow{background:color-mix(in srgb,var(--glow-a) 8%,transparent);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--glow-a) 28%,transparent)}

/* ================= CARDS ================= */
body.inner .card{position:relative;box-shadow:var(--lift);border-color:color-mix(in srgb,var(--line) 75%,transparent);
  transition:box-shadow .55s var(--ease-out),border-color .45s var(--ease-out),transform .55s var(--ease-out)}
body.inner .card:hover{box-shadow:var(--lift-hi);border-color:color-mix(in srgb,var(--teal) 30%,var(--line))}
body.inner main .card::before{content:"";position:absolute;top:-1px;left:14%;right:14%;height:2px;border-radius:2px;pointer-events:none;
  background:linear-gradient(90deg,transparent,var(--teal),var(--turmeric),transparent);transform:scaleX(0);transition:transform .7s var(--ease-out)}
body.inner main .card:hover::before{transform:scaleX(1)}
body.inner .blk.dark .card{box-shadow:inset 0 1px 0 rgb(255 255 255 / .06),0 24px 50px -30px rgb(0 0 0 / .6)}
body.inner .blk.dark .card:hover{border-color:color-mix(in srgb,var(--glow-b) 40%,transparent)}
body.inner .ic h3{font-weight:700}
body.inner .ic .k{font-weight:600;letter-spacing:.14em}

/* ================= FIGURES ================= */
body.inner .figrow{gap:14px;background:none;border:0;border-radius:0;overflow:visible}
body.inner .figrow div{position:relative;border-radius:18px;padding:22px 22px 24px;box-shadow:var(--lift);border:1px solid color-mix(in srgb,var(--line) 75%,transparent);
  transition:transform .45s var(--ease-out),box-shadow .45s var(--ease-out)}
body.inner .figrow div:hover{transform:translateY(-4px);box-shadow:var(--lift-hi)}
body.inner .figrow b{font-weight:800;letter-spacing:-.035em;font-variant-numeric:tabular-nums}
body.inner .blk.dark .figrow div{background:linear-gradient(160deg,rgb(255 255 255 / .06),rgb(255 255 255 / .02));border-color:rgb(255 255 255 / .09);box-shadow:none}

/* ================= BUTTONS, CHIPS, PILLS ================= */
body.inner .btn{transition:background .3s var(--ease-out),box-shadow .4s var(--ease-out),filter .3s,color .3s,border-color .3s,transform .3s var(--ease-out)}
body.inner .btn-gold,body.inner .btn-teal{position:relative;overflow:hidden;box-shadow:0 8px 22px -10px color-mix(in srgb,var(--cta) 80%,transparent)}
body.inner .btn-gold:hover,body.inner .btn-teal:hover{transform:translateY(-1px);box-shadow:0 14px 30px -12px color-mix(in srgb,var(--cta) 95%,transparent)}
body.inner .btn-gold::after,body.inner .btn-teal::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(105deg,transparent 30%,rgb(255 255 255 / .3) 50%,transparent 70%);transform:translateX(-120%);transition:transform .8s var(--ease-out)}
body.inner .btn-gold:hover::after,body.inner .btn-teal:hover::after{transform:translateX(120%)}
body.inner .btn-line:hover{background:var(--surface);border-color:var(--teal);box-shadow:var(--lift)}
body.inner .btn svg{transition:transform .45s var(--spring)}
body.inner .btn:hover svg{transform:translateX(3px)}
body.inner .btn:hover .spark{transform:rotate(90deg) scale(1.1)}
body.inner .chips > *{transition:color .3s,border-color .3s,box-shadow .4s var(--ease-out),background .3s}
body.inner .ai-pill,body.inner .tbd{letter-spacing:.08em}

/* ================= FORMS ================= */
body.inner main input:not([type="checkbox"]):not([type="radio"]),body.inner main select,body.inner main textarea{
  border-radius:12px;transition:border-color .25s ease,box-shadow .3s ease,background .25s ease}
body.inner main input:not([type="checkbox"]):not([type="radio"]):focus,body.inner main select:focus,body.inner main textarea:focus{
  outline:none;border-color:var(--teal);box-shadow:0 0 0 4px color-mix(in srgb,var(--teal) 16%,transparent)}
body.inner main label{font-weight:600}

/* a long eyebrow wraps as a tidy rounded block on narrow screens */
@media (max-width:560px){body.inner main .eyebrow{max-width:100%;border-radius:14px;line-height:1.45;letter-spacing:.12em;align-items:flex-start}
  body.inner main .eyebrow::before{margin-top:5px;flex:none}}

/* primary actions use the same violet as the home page in both themes (--teal is a pale lavender in dark mode) */
body.inner .btn-teal{background:var(--cta);color:var(--cta-ink)}
body.inner .btn-teal:hover{background:var(--cta-hover);filter:none}
/* form labels: sentence case in the text face, on every inner page's forms */
body.inner main .form label,body.inner main form label{font:600 13.5px/1.4 var(--sans);letter-spacing:0;text-transform:none;color:var(--ink)}
body.inner main .blk.dark form label{color:var(--on-night)}

/* ================= MOTION HELPERS (inner-motion.js) ================= */
html.lux-pre body.inner .phero .wrap > *{opacity:0}

/* ================= RESPONSIVE ================= */
@media (max-width:900px){
  body.inner .blk{padding-block:64px}
  body.inner .phero .wrap{padding-block:48px 40px}
  body.inner .sec-head{margin-bottom:32px}
}
@media (max-width:560px){
  body.inner .blk{padding-block:52px}
  body.inner .figrow{gap:10px}
  body.inner .figrow div{padding:18px}
}
@media (prefers-reduced-motion: reduce){
  html:not(.force-motion) body.inner .btn-gold::after,html:not(.force-motion) body.inner .btn-teal::after{display:none}
}

/* a field that fails validation keeps a red edge and ring, even while focused */
body.inner main input[aria-invalid="true"]:not([type="checkbox"]):not([type="radio"]),body.inner main select[aria-invalid="true"],body.inner main textarea[aria-invalid="true"]{border-color:#DC2626}
body.inner main input[aria-invalid="true"]:not([type="checkbox"]):not([type="radio"]):focus,body.inner main select[aria-invalid="true"]:focus,body.inner main textarea[aria-invalid="true"]:focus{border-color:#DC2626;box-shadow:0 0 0 4px rgb(220 38 38 / .15)}

/* split photo header (Attend): the title on the night panel at left, the whole photo on the right fading into it.
   For portrait photos of a landmark, which a full-width crop would cut in half. */
@media (min-width:901px){
  body.inner .phero.ph-split{min-height:clamp(440px,40vw,560px);background:
    radial-gradient(600px 420px at 12% 20%,rgb(124 58 237 / .28),transparent 65%),linear-gradient(120deg,#16133D,#0A0A1F 60%)}
  body.inner .phero.ph-split .ph-bg{left:auto;right:0;width:58%;object-position:var(--ph-pos,center);
    -webkit-mask:linear-gradient(90deg,transparent 0,rgb(0 0 0 / .35) 18%,#000 48%);mask:linear-gradient(90deg,transparent 0,rgb(0 0 0 / .35) 18%,#000 48%)}
  body.inner .phero.ph-split::before{background:linear-gradient(0deg,rgb(10 10 31 / .55),transparent 30%)}
  body.inner .phero.ph-split .wrap > *{max-width:min(620px,52%)}
  body.inner .phero.ph-split h1{font-size:clamp(2.6rem,4.6vw,4rem);line-height:1.02}
}