/* HIIC 2027 — "Luminous" · shared styles for index / privacy / 404
   Core HIIC palette unchanged; 2027 accent = Luminous Blue #2A4BD7 as a light source, Glow #7B93FF. */
:root{
  --plum:#2E1248; --purple:#4B2173; --gold:#FFB10A; --cream:#FDECC8; --ink:#161B22;
  --lblue:#2A4BD7; --glow:#7B93FF; --white:#FFFFFF;
  --line:rgba(255,255,255,.26);
  --ease:cubic-bezier(.2,.7,.2,1);
  --hz:34svh;            /* horizon height from the bottom */
  --breath:10s;          /* one shared rhythm for aura, dots, horizon */
  --gutter:clamp(20px,5vw,72px);
}
*{box-sizing:border-box}
html{height:100%;color-scheme:dark}
body{margin:0;min-height:100%;background:var(--plum);color:var(--white);font-family:Lora,Georgia,serif;font-size:17px;line-height:1.55;-webkit-font-smoothing:antialiased;overflow-x:hidden}
a{color:inherit}
:focus-visible{outline:2px solid var(--gold);outline-offset:3px;border-radius:2px}
::selection{background:rgba(123,147,255,.45);color:#fff}

/* ================= canvas / atmosphere ================= */
.canvas{position:relative;width:100%;max-width:100vw;min-height:100svh;display:grid;grid-template-rows:auto 1fr auto;overflow:hidden;
  background:linear-gradient(180deg,#2E1248 0%,#3A1A62 60%,#382A8A 100%)}
#atmo{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.aura{position:absolute;left:-30%;right:-30%;bottom:-70%;height:125%;pointer-events:none;will-change:transform;
  background:radial-gradient(ellipse at 50% 100%,rgba(42,75,215,.95) 0%,rgba(123,147,255,.45) 26%,rgba(123,147,255,0) 60%);
  transform-origin:50% 100%;animation:bloom 2.4s var(--ease) .5s backwards,breathe var(--breath) ease-in-out 2.9s infinite}
.rays{position:absolute;left:50%;bottom:var(--hz);width:180vmax;height:180vmax;transform:translate(-50%,50%);pointer-events:none;opacity:.55;
  background:repeating-conic-gradient(from -6deg at 50% 50%,rgba(123,147,255,.10) 0 1.2deg,transparent 1.2deg 7deg);
  -webkit-mask-image:radial-gradient(circle at 50% 50%,rgba(0,0,0,.9) 0,rgba(0,0,0,0) 38%),linear-gradient(180deg,#000 50%,transparent 50%);
  -webkit-mask-composite:source-in;mask-image:radial-gradient(circle at 50% 50%,rgba(0,0,0,.9) 0,rgba(0,0,0,0) 38%),linear-gradient(180deg,#000 50%,transparent 50%);mask-composite:intersect;
  animation:raysin 2s var(--ease) 1.3s backwards,sway 30s ease-in-out infinite}
.floor{position:absolute;left:0;right:0;bottom:0;height:var(--hz);pointer-events:none;perspective:520px;perspective-origin:50% 0;overflow:hidden;
  -webkit-mask-image:linear-gradient(180deg,rgba(0,0,0,.95),rgba(0,0,0,0) 92%);mask-image:linear-gradient(180deg,rgba(0,0,0,.95),rgba(0,0,0,0) 92%)}
.floor .grid,.floor .pulse{position:absolute;left:-50%;right:-50%;top:0;height:300%;transform:rotateX(62deg);transform-origin:50% 0}
.floor .grid{background-image:linear-gradient(rgba(123,147,255,.30) 1px,transparent 1px),linear-gradient(90deg,rgba(123,147,255,.24) 1px,transparent 1px);
  background-size:100% 64px,64px 100%;animation:arrive 2.2s var(--ease) .45s backwards,drift 6s linear infinite}
.floor .pulse{background:linear-gradient(180deg,transparent 0%,rgba(123,147,255,.28) 50%,transparent 100%);background-size:100% 22%;background-repeat:no-repeat;animation:arrive 2.2s var(--ease) .45s backwards,pulse 5s cubic-bezier(.4,0,.6,1) 2.6s infinite}
.horizon{position:absolute;left:0;right:0;bottom:var(--hz);height:2px;pointer-events:none;transform:scaleX(0);
  background:linear-gradient(90deg,transparent,#7B93FF 22%,#FFFFFF 50%,#7B93FF 78%,transparent);
  box-shadow:0 0 42px 10px rgba(123,147,255,.55);animation:draw 1.7s var(--ease) .35s forwards,shimmer var(--breath) ease-in-out 2.2s infinite}
.horizon::after{content:"";position:absolute;top:-2px;left:-12%;width:12%;height:6px;border-radius:6px;
  background:radial-gradient(ellipse,rgba(255,255,255,.95),rgba(255,255,255,0) 70%);animation:glint 15s ease-in-out 6s infinite}
.grain{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;mix-blend-mode:overlay;opacity:.85}
@keyframes breathe{0%,100%{opacity:.82}50%{opacity:1}}
@keyframes shimmer{0%,100%{opacity:.85}50%{opacity:1}}
@keyframes draw{to{transform:scaleX(1)}}
@keyframes drift{from{background-position:0 0,0 0}to{background-position:0 64px,0 0}}
@keyframes pulse{from{background-position:0 -30%}to{background-position:0 130%}}
@keyframes sway{0%,100%{transform:translate(-50%,50%) rotate(-3deg)}50%{transform:translate(-50%,50%) rotate(3deg)}}
@keyframes glint{0%,60%,100%{left:-12%;opacity:0}62%{opacity:1}88%{opacity:1}90%{left:100%;opacity:0}}
@keyframes fade{to{opacity:1}}
@keyframes bloom{from{transform:scale(.15,.05);opacity:0}to{transform:scale(1,1);opacity:.82}}
@keyframes raysin{from{opacity:0}to{opacity:.55}}
@keyframes arrive{from{transform:rotateX(62deg) translateY(160%) scale(1.6);opacity:0}30%{opacity:1}to{transform:rotateX(62deg) translateY(0) scale(1);opacity:1}}
@keyframes spark{0%{transform:scale(0);opacity:0}25%{opacity:1}100%{transform:scale(1);opacity:0}}
@keyframes veil{to{opacity:0}}
/* the opening: page starts as a dark void, a spark ignites on the horizon, the line draws, the floor arrives, the light blooms */
.veil{position:absolute;inset:0;z-index:4;pointer-events:none;background:#1A0A2E;animation:veil 1.9s var(--ease) .15s forwards}
.spark{position:absolute;left:50%;bottom:var(--hz);z-index:2;width:min(60vw,520px);height:min(60vw,520px);margin-left:calc(min(60vw,520px) / -2);margin-bottom:calc(min(60vw,520px) / -2);border-radius:50%;pointer-events:none;transform:scale(0);
  background:radial-gradient(circle,rgba(255,255,255,.95) 0%,rgba(190,205,255,.7) 8%,rgba(123,147,255,.35) 22%,rgba(123,147,255,0) 60%);animation:spark 1.5s var(--ease) .25s forwards}

/* ================= header: mark · conference name · host, one line ================= */
.bar{position:relative;z-index:3;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:24px;
  padding:calc(env(safe-area-inset-top,0px) + 26px) var(--gutter) 0;
  opacity:0;animation:fade 1.2s var(--ease) 2.15s forwards}
.brand{display:block;text-decoration:none;justify-self:start}
.brand svg{width:96px;height:auto;display:block}
.brand .dot{animation:dots var(--breath) ease-in-out infinite;transform-origin:center}
@keyframes dots{0%,100%{opacity:.86}50%{opacity:1}}
.title{display:flex;align-items:center;gap:clamp(14px,2vw,26px);margin:0;font-family:Poppins,sans-serif;font-weight:500;
  font-size:clamp(12px,1.25vw,16px);letter-spacing:.28em;text-transform:uppercase;color:var(--cream);white-space:nowrap;text-align:center}
.title .tw{display:inline-block}
.title .lk-a,.title .lk-b{display:inline-block;white-space:nowrap}   /* name breaks only as "Hawaiʻi Immigration / & Inclusion Conference" */
.title::before,.title::after{content:"";height:1px;width:clamp(28px,6vw,96px);background:linear-gradient(90deg,transparent,rgba(253,236,200,.7));flex:none}
.title::after{background:linear-gradient(90deg,rgba(253,236,200,.7),transparent)}
.host{justify-self:end;font-family:Poppins,sans-serif;font-size:12px;letter-spacing:.14em;text-transform:uppercase;text-decoration:none;color:var(--cream);padding:10px 0;
  display:inline-flex;align-items:center;gap:10px;opacity:.9;transition:opacity .25s;white-space:nowrap}
.host:hover{opacity:1}
.host i{width:6px;height:6px;border-radius:50%;background:var(--gold);box-shadow:0 0 12px 2px rgba(255,177,10,.6)}

/* ================= stage ================= */
.stage{position:relative;z-index:2;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;min-height:0;
  padding:4svh var(--gutter) 0;padding-bottom:calc(var(--hz) + 52px)}
.eyebrow{font-family:Poppins,sans-serif;font-weight:500;font-size:clamp(14px,1.5vw,20px);letter-spacing:.34em;text-transform:uppercase;color:var(--glow);margin:0 0 -.35em .34em;position:relative;z-index:1;
  opacity:0;animation:fade 1s var(--ease) 1.95s forwards}

/* the year: blurred glow copies + gradient face + sheen, stacked */
.year{position:relative;display:inline-block;font-family:Poppins,sans-serif;font-weight:700;font-size:min(21vw,27svh,340px);line-height:.88;letter-spacing:-.035em;margin:0 0 0 -.035em;
  white-space:nowrap;opacity:0;filter:blur(18px);transform:translateY(.18em);animation:rise 1.6s var(--ease) 1.55s forwards;padding:.12em .35em;margin-inline:-.35em}
.year > span{display:block}
.year .glow{position:absolute;inset:.12em .35em;color:rgba(123,147,255,.65);filter:blur(.15em);transform:translateZ(0)}
.year .glow em{font-style:normal;color:rgba(150,172,255,1)}
.year .glow2{position:absolute;inset:.12em .35em;color:transparent;filter:blur(.035em)}
.year .glow2 em{font-style:normal;color:rgba(190,205,255,.55)}
.year .face{position:relative;background:linear-gradient(180deg,#FFF6E4 0%,#FDECC8 48%,#F2D7A4 100%);-webkit-background-clip:text;background-clip:text;color:transparent}
.year .face em{font-style:normal;background:linear-gradient(180deg,#A9BBFF 0%,#7B93FF 50%,#7088FF 100%);-webkit-background-clip:text;background-clip:text;color:transparent}
.year .sheen{position:absolute;inset:.12em .35em;color:transparent;-webkit-background-clip:text;background-clip:text;pointer-events:none;
  background-image:linear-gradient(105deg,transparent 42%,rgba(255,255,255,.75) 50%,transparent 58%);background-size:280% 100%;background-repeat:no-repeat;background-position:180% 0;
  animation:sheen 10s ease-in-out 4s infinite}
@keyframes rise{to{opacity:1;filter:none;transform:none}}
@keyframes sheen{0%,70%{background-position:180% 0}100%{background-position:-80% 0}}

/* reflection on the floor */
.reflect{position:absolute;left:0;right:0;bottom:var(--hz);height:0;pointer-events:none;z-index:1;text-align:center;overflow:visible;
  opacity:0;animation:fade 1.6s var(--ease) 2.2s forwards}
.reflect span{position:absolute;left:50%;top:0;transform:translateX(-50%) scaleY(-1);transform-origin:50% 50%;
  font-family:Poppins,sans-serif;font-weight:700;font-size:min(21vw,27svh,340px);line-height:.88;letter-spacing:-.035em;white-space:nowrap;
  color:rgba(253,236,200,.28);filter:blur(7px);
  -webkit-mask-image:linear-gradient(0deg,rgba(0,0,0,.9) 0,transparent 62%);mask-image:linear-gradient(0deg,rgba(0,0,0,.9) 0,transparent 62%)}
.reflect span em{font-style:normal;color:rgba(123,147,255,.42)}

.ledger{position:relative;display:flex;align-items:stretch;justify-content:center;margin-top:clamp(18px,2.6vw,36px);padding:10px 12px;font-family:Poppins,sans-serif;
  opacity:0;animation:fade 1.2s var(--ease) 2.5s forwards}
.ledger div{position:relative;padding:6px clamp(20px,3vw,44px);display:grid;gap:8px}
.ledger dt,.ledger dd{margin:0;display:contents}
dl.ledger{margin:0}
.ledger div + div::before{content:"";position:absolute;left:0;top:0;bottom:0;width:1px;background:linear-gradient(180deg,transparent,rgba(255,255,255,.55),transparent)}
.ledger small{font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--glow);font-weight:500}
.ledger b{font-weight:500;font-size:clamp(16px,1.5vw,20px);color:var(--white);white-space:nowrap}

/* gold pill (404, doc pages) */
.ledger .cta{justify-items:center}
.pill{display:inline-flex;align-items:center;gap:10px;background:var(--gold);color:var(--ink);text-decoration:none;font:600 13px/1 Poppins,sans-serif;letter-spacing:.12em;text-transform:uppercase;
  padding:16px 26px;border-radius:999px;transition:transform .25s var(--ease),box-shadow .25s var(--ease),background .2s}
.pill:hover{background:#FFC23A;transform:translateY(-1px);box-shadow:0 10px 30px rgba(255,177,10,.25)}

/* ================= footer: links · signature · © on one line ================= */
.foot{position:relative;z-index:3;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:24px;
  padding:16px var(--gutter) calc(env(safe-area-inset-bottom,0px) + 16px);
  opacity:0;animation:fade 1.2s var(--ease) 2.8s forwards}
.foot .links{display:flex;flex-wrap:wrap;gap:8px 24px;justify-self:start;font-family:Poppins,sans-serif;font-size:12px;letter-spacing:.06em;color:var(--cream)}
.foot .links a{text-decoration:none;opacity:.85;transition:opacity .2s}.foot .links a:hover{opacity:1}
.foot .legal{justify-self:end;text-align:right;font-family:Poppins,sans-serif;font-size:12px;letter-spacing:.06em;color:var(--cream)}
.credit{display:flex;justify-content:center;align-items:center;color:var(--cream);opacity:.7;transition:opacity .3s ease}
.credit:hover{opacity:1}
.credit svg{display:block;height:40px;width:auto}
.credit svg a{cursor:pointer;transition:color .25s ease}
.credit svg a.cw{color:inherit}

/* ================= document pages (privacy) ================= */
body.doc .canvas{min-height:100svh;height:auto;grid-template-rows:auto 1fr auto}
body.doc .floor,body.doc .horizon,body.doc .rays,body.doc .aura,body.doc #atmo,body.doc .grain{position:fixed}
body.doc{--hz:22svh}
body.doc .rays{opacity:.35}
body.doc .aura{bottom:-50%;height:90%}
.page-head{position:relative;z-index:2;justify-self:center;width:100%;text-align:center;padding:clamp(28px,5vh,56px) var(--gutter) 0;opacity:0;animation:fade 1s var(--ease) .5s forwards}
.page-head .eyebrow{margin:0 0 10px;animation:none;opacity:1}
.page-head h1{font-family:Poppins,sans-serif;font-weight:600;font-size:clamp(30px,4.2vw,56px);line-height:1.05;letter-spacing:-.02em;margin:0;color:var(--cream);text-wrap:balance}
.page-head p{margin:14px auto 0;max-width:none;color:rgba(253,236,200,.85);text-wrap:balance}
.page-head .meta{margin-top:18px;font-family:Poppins,sans-serif;font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:var(--glow)}
.policy{position:relative;z-index:2;justify-self:center;width:min(calc(100vw - 2*var(--gutter)),760px);margin:clamp(24px,4vh,44px) 0 0;padding:clamp(24px,3.5vw,44px) clamp(22px,3.5vw,48px);
  background:rgba(46,18,72,.55);border:1px solid rgba(255,255,255,.14);border-radius:6px;
  -webkit-backdrop-filter:blur(14px) saturate(120%);backdrop-filter:blur(14px) saturate(120%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.12),0 30px 80px rgba(20,8,40,.45);
  opacity:0;animation:fade 1.2s var(--ease) .9s forwards}
.policy h2{font-family:Poppins,sans-serif;font-weight:600;font-size:19px;letter-spacing:.01em;margin:34px 0 10px;color:var(--white)}
.policy h2:first-child{margin-top:0}
.policy p{margin:0 0 14px;color:rgba(253,236,200,.92)}
.policy ul{margin:0 0 14px;padding-left:22px;color:rgba(253,236,200,.92)}
.policy li{margin:0 0 8px}
.policy a{color:#FFFFFF;text-decoration:underline;text-decoration-color:rgba(123,147,255,.8);text-underline-offset:3px}
.policy a:hover{text-decoration-color:var(--gold)}
.page-back{position:relative;z-index:2;justify-self:center;text-align:center;margin:30px 0 40px}

/* ================= presentation + social render modes (?mode=) ================= */
body.present .foot{display:none}
body.present .canvas{height:100svh;min-height:0;grid-template-rows:auto 1fr}
body.present .stage{padding-bottom:calc(var(--hz) + 96px)}
body.present .year,body.present .reflect span{font-size:min(30vw,30svh,560px)}
body.present .stage{padding-top:5svh}
body.present .title{font-size:min(1.5vw,22px)}
body.present .eyebrow{font-size:min(1.8vw,26px)}
body.present .ledger b{font-size:min(1.9vw,26px)}
body.present .ledger small{font-size:min(1.05vw,14px)}
body.present .bar{padding-top:40px}
body.present .brand svg{width:min(9vw,130px)}
body.present .host{font-size:min(1.05vw,15px)}
body.social{--hz:26svh}
body.social .host{display:none}
body.social .bar{grid-template-columns:1fr;justify-items:center;gap:14px;padding:56px 72px 0}
body.social .brand{justify-self:center}
body.social .brand svg{width:190px}
body.social .title{white-space:normal;font-size:min(2.6vw,30px);letter-spacing:.22em;line-height:1.7;gap:16px}
body.social .title .lk-a,body.social .title .lk-b{display:block}
body.social .stage{padding-top:30px;padding-bottom:calc(var(--hz) + 30px)}
body.social .year,body.social .reflect span{font-size:min(30vw,22svh)}
body.social .eyebrow{font-size:min(3vw,32px)}
body.social .ledger{flex-direction:column;align-items:center;gap:0;margin-top:min(4vh,40px)}
body.social .ledger div{padding:10px 0;justify-items:center}
body.social .ledger div + div::before{left:50%;top:0;bottom:auto;width:90px;height:1px;transform:translateX(-50%);background:linear-gradient(90deg,transparent,rgba(255,255,255,.6),transparent)}
body.social .ledger b{font-size:min(4vw,40px)}
body.social .ledger small{font-size:min(1.9vw,20px)}
@media (max-height:1500px){
  body.social{--hz:23svh}
  body.social .year,body.social .reflect span{font-size:min(30vw,19svh)}
  body.social .ledger{margin-top:24px}
  body.social .ledger div{padding:6px 0}
  body.social .ledger b{font-size:34px}
  body.social .ledger small{font-size:17px}
  body.social .stage{padding-top:16px}
}
body.noledger .ledger{display:none}
body.og{--hz:24svh}
body.og .title,body.og .host,body.og .ledger,body.og .eyebrow{display:none}
body.og .bar{grid-template-columns:1fr;justify-items:center;padding-top:44px}
body.og .brand{justify-self:center}body.og .brand svg{width:170px}
body.og .stage{padding:0 0 calc(var(--hz) + 20px)}
body.og .year,body.og .reflect span{font-size:min(30vw,52svh)}
body.noyear .year,body.noyear .eyebrow,body.noyear .reflect{display:none}
body.noyear .ledger{margin-top:40px}
body.noyear .ledger b{font-size:min(5.2vw,56px)}
body.noyear .ledger small{font-size:min(2.2vw,24px)}


/* ================= breakpoints ================= */
@media (min-width:641px){
  .ledger .hostcell{display:none}            /* "Hosted by HCIR" lives in the header corner on desktop */
  body.social .ledger .hostcell{display:grid} /* social renders hide the corner, so it stays in the ledger */
  body.poster{height:100%;overflow:hidden}
  body.poster .canvas{height:100svh;min-height:0}
}
@media (min-width:641px) and (max-height:820px){
  :root{--hz:27svh}
  .year,.reflect span{font-size:min(21vw,25svh,340px)}
  .stage{padding-bottom:calc(var(--hz) + 40px)}
  .ledger{margin-top:16px}
  .bar{padding-top:calc(env(safe-area-inset-top,0px) + 18px)}
  .foot{padding-top:10px}
  .credit svg{height:34px}
}
@media (max-width:980px) and (min-width:641px){
  .title{font-size:11px;letter-spacing:.2em}
  .title::before,.title::after{width:22px}
}
@media (max-width:640px){
  :root{--hz:22svh;--gutter:16px}
  body.poster{height:100%;overflow:hidden}
  body.poster .canvas{height:100svh;min-height:0;grid-template-rows:auto 1fr}
  body.poster .foot{position:absolute;left:0;right:0;bottom:0}   /* footer out of flow so stage spacing is measured from the screen bottom, like the horizon */
  .bar{grid-template-columns:1fr;justify-items:center;gap:10px;padding-top:calc(env(safe-area-inset-top,0px) + 18px)}
  .brand{justify-self:center}
  .brand svg{width:78px}
  .host{display:none}
  .title{white-space:normal;line-height:1.7;font-size:11.5px;letter-spacing:.2em;gap:12px;max-width:100%}
  .title .lk-a,.title .lk-b{display:block}
  .title::before,.title::after{width:16px}
  .stage{padding-top:2svh;padding-bottom:calc(var(--hz) + 26px);justify-content:flex-end}
  .eyebrow{font-size:13px;letter-spacing:.3em;margin:0 0 -.2em .3em}
  .year,.reflect span{font-size:clamp(110px,32vw,190px);line-height:.9}
  .ledger{flex-direction:column;align-items:center;margin-top:10px;width:auto;padding:4px 0}
  .ledger div{padding:9px 0;width:100%;justify-items:center;text-align:center;gap:5px}
  .ledger small{font-size:10px}
  .ledger b{white-space:normal;font-size:16px}
  .ledger div + div::before{left:50%;top:0;bottom:auto;width:64px;height:1px;transform:translateX(-50%);background:linear-gradient(90deg,transparent,rgba(255,255,255,.6),transparent)}
  .rays{opacity:.4}
  .foot{grid-template-columns:1fr;justify-items:center;gap:8px;padding:16px 16px calc(env(safe-area-inset-bottom,0px) + 12px)}
  .foot .links{justify-self:center;justify-content:center;gap:6px 16px;font-size:11.5px}
  .foot .legal{justify-self:center;text-align:center;max-width:34ch;font-size:11px}
  .foot .credit{order:3;padding-top:2px}   /* signature is always last on phones */
  .credit svg{height:26px}
  .reflect span{color:rgba(253,236,200,.16)}.reflect span em{color:rgba(123,147,255,.26)}
}
@media (max-width:640px) and (max-height:700px){
  .bar{padding-top:calc(env(safe-area-inset-top,0px) + 12px);gap:8px}
  .brand svg{width:66px}
  .title{font-size:10.5px;line-height:1.6}
  .stage{padding-top:1svh}
  .eyebrow{font-size:12px}
  .year,.reflect span{font-size:clamp(96px,27vw,150px)}
  .ledger{margin-top:6px}
  .ledger div{padding:6px 0;gap:3px}
  .ledger b{font-size:15px}
  .foot{gap:6px;padding-top:12px}
  .credit svg{height:22px}
}
@media (prefers-reduced-motion:reduce){
  .aura,.horizon,.horizon::after,.floor .grid,.floor .pulse,.rays,.brand .dot,.year .sheen,.veil,.spark{animation:none}
  .horizon{transform:none}.veil,.spark{display:none}.aura{opacity:.9}.rays{opacity:.55}
  .bar,.eyebrow,.ledger,.foot,.year,.reflect,.page-head,.policy{animation:none;opacity:1;filter:none;transform:none}
}