/* Lā - the luminous-glass brand system for Pono Data Solutions.
   One shared sheet = the "one hand" law made literal. Every page links this.
   Bright warm-white room (the sun, Lā), sunset-coral light, ocean-teal ocean,
   crafted liquid glass, fast authored motion. Pure CSS, no libs, no build.
   Palette in oklch (2026 baseline-safe); hex fallbacks live in the values. */

:root{
  /* the room - warm golden-hour cream, lit brighter at the top like the sun */
  --room:      oklch(0.945 0.042 80);   /* warm cream */
  --room-hi:   oklch(0.975 0.028 84);   /* sunlit warm near-white */
  --room-2:    oklch(0.922 0.048 76);   /* recessed warm wells */
  --ink:       oklch(0.300 0.034 52);   /* warm koa near-black */
  --body:      oklch(0.435 0.034 50);   /* reading body, warm brown */
  --dim:       oklch(0.500 0.032 52);   /* secondary (AA on the cream room) */
  --faint:     oklch(0.518 0.030 54);   /* labels, meta (AA on the cream room) */
  --line:      color-mix(in oklch, var(--ink) 13%, transparent);
  --line-2:    color-mix(in oklch, var(--ink) 24%, transparent);
  /* the light - sunset coral (primary, live, the one accent) */
  --coral:     oklch(0.655 0.176 39);   /* warm sunset coral */
  --coral-hi:  oklch(0.705 0.170 43);
  --coral-lo:  oklch(0.515 0.155 36);   /* AA-safe coral for small labels */
  /* the sun - warm amber-gold, the second warm accent (Lā, the daylight) */
  --gold:      oklch(0.760 0.140 72);   /* honey-gold */
  --gold-lo:   oklch(0.535 0.125 62);   /* AA-safe gold for small labels */
  --gold-tint: color-mix(in oklch, var(--gold) 16%, transparent);
  /* the ocean - teal, the one cool note, used sparingly */
  --teal:      oklch(0.560 0.090 195);
  --teal-tint: color-mix(in oklch, var(--teal) 13%, transparent);
  /* glass - warm-tinted, never clinical white */
  --glass:     oklch(0.985 0.020 82 / .56);
  --glass-brd: oklch(1 0.012 84 / .72);
  --glass-sh:  0 12px 40px -14px oklch(0.42 0.06 48 / .32),
               0 3px 10px -5px oklch(0.42 0.06 48 / .20);
  --glass-in:  inset 0 1px 0 oklch(1 0.01 90 / .9), inset 0 0 0 1px oklch(1 0.01 90 / .16);
  /* type - system stack, zero font payload; big + confident does the identity */
  --sans: ui-sans-serif,system-ui,-apple-system,"Segoe UI","Helvetica Neue",Arial,sans-serif;
  --mono: ui-monospace,"Cascadia Mono","SF Mono","Segoe UI Mono","Roboto Mono",monospace;
  --e:  cubic-bezier(.22,.72,.24,1);     /* the house ease */
  --r:  16px;   /* liquid-glass corner (continuous-feel); glass idiom, not a card */
  --r-sm: 11px;
  --shell: 1180px;
}

*{box-sizing:border-box;margin:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  background:var(--room);color:var(--ink);
  font:400 17px/1.62 var(--sans);
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  overflow-x:hidden;position:relative;min-height:100vh;
  /* Lā - the sun: a warm golden-hour wash top-right, honey glow, a whisper of
     ocean bottom-left. Pure CSS, ~0 bytes, this is the ambient signature. */
  background-image:
    radial-gradient(64% 50% at 88% -6%, oklch(0.80 0.165 45 / .40), transparent 60%),
    radial-gradient(52% 46% at 96% 2%,  oklch(0.86 0.150 78 / .42), transparent 58%),
    radial-gradient(70% 55% at 12% 2%,  oklch(0.90 0.090 88 / .30), transparent 62%),
    radial-gradient(60% 52% at 4% 106%, oklch(0.74 0.075 195 / .14), transparent 60%),
    linear-gradient(180deg, var(--room-hi), var(--room) 520px);
  background-repeat:no-repeat;
}
a{color:inherit;text-decoration:none}
img,svg{max-width:100%;display:block}
::selection{background:color-mix(in oklch,var(--coral) 26%,transparent)}
:focus-visible{outline:2.5px solid var(--coral);outline-offset:3px;border-radius:4px}
.wrap{max-width:var(--shell);margin:0 auto;padding:0 clamp(20px,4.4vw,44px)}

/* ── glass, the material ───────────────────────────────────────────────── */
.glass{
  background:var(--glass);
  border:1px solid var(--glass-brd);
  box-shadow:var(--glass-sh),var(--glass-in);
  border-radius:var(--r);
  position:relative;isolation:isolate;
}
@supports ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .glass{-webkit-backdrop-filter:blur(15px) saturate(1.7);backdrop-filter:blur(15px) saturate(1.7)}
}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .glass{background:color-mix(in oklch,white 88%,var(--room))}
}
/* the refractive sheen - a lit highlight raking across the top of the glass */
.glass::before{
  content:"";position:absolute;inset:0;border-radius:inherit;z-index:-1;pointer-events:none;
  background:linear-gradient(150deg, oklch(1 0 0 / .35), transparent 42%);
}

/* ── the chrome: sticky glass nav, one modern menu ─────────────────────── */
.hdr{position:sticky;top:0;z-index:60;padding:12px 0}
.hdr::before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,var(--room-hi),transparent);opacity:.6;z-index:-1}
.bar{
  display:flex;align-items:center;justify-content:space-between;gap:20px;
  padding:11px 12px 11px 20px;border-radius:14px;
}
.mark{font:700 20px/1 var(--sans);letter-spacing:-.03em;color:var(--ink);display:flex;align-items:center;gap:2px}
.mark b{color:var(--coral)} /* the macron dot of Lā, as the sun */
.menu{display:flex;align-items:center;gap:6px}
.menu a{
  font:560 14px/1 var(--sans);letter-spacing:-.01em;color:var(--dim);
  padding:9px 13px;border-radius:9px;transition:color .16s var(--e),background .16s var(--e)}
.menu a:hover{color:var(--ink);background:color-mix(in oklch,var(--ink) 6%,transparent)}
.menu a.on{color:var(--ink)}
.menu .sep{width:1px;height:20px;background:var(--line);margin:0 4px}
.navcta{
  font:640 14px/1 var(--sans);color:#fff;padding:10px 16px;border-radius:10px;
  background:linear-gradient(180deg,var(--coral-hi),var(--coral));
  box-shadow:0 1px 0 oklch(1 0 0 / .4) inset,0 8px 20px -10px var(--coral);
  transition:transform .18s var(--e),box-shadow .18s var(--e)}
.navcta:hover{transform:translateY(-1px);box-shadow:0 1px 0 oklch(1 0 0 / .5) inset,0 12px 26px -10px var(--coral)}
.burger{display:none;background:none;border:0;cursor:pointer;padding:10px;border-radius:9px}
.burger span{display:block;width:22px;height:2px;background:var(--ink);border-radius:2px;transition:.2s var(--e)}
.burger span+span{margin-top:5px}

/* ── buttons ───────────────────────────────────────────────────────────── */
.btn{
  display:inline-flex;align-items:center;gap:10px;cursor:pointer;border:0;
  font:640 16px/1 var(--sans);letter-spacing:-.01em;color:#fff;
  padding:15px 26px;border-radius:12px;
  background:linear-gradient(180deg,var(--coral-hi),var(--coral));
  box-shadow:0 1px 0 oklch(1 0 0 / .45) inset,0 14px 34px -14px var(--coral);
  transition:transform .2s var(--e),box-shadow .2s var(--e),filter .2s var(--e)}
.btn:hover{transform:translateY(-2px);filter:saturate(1.06);box-shadow:0 1px 0 oklch(1 0 0 / .55) inset,0 22px 48px -16px var(--coral)}
.btn:active{transform:translateY(0)}
.btn.ghost{
  background:var(--glass);color:var(--ink);
  border:1px solid var(--glass-brd);box-shadow:var(--glass-in);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.btn.ghost:hover{filter:none;transform:translateY(-2px);border-color:var(--line-2)}
.lnk{color:var(--body);font:560 15.5px/1 var(--sans);display:inline-flex;align-items:center;gap:7px;transition:color .16s var(--e)}
.lnk:hover{color:var(--coral)}
.lnk .ar{transition:transform .18s var(--e)}
.lnk:hover .ar{transform:translateX(3px)}

/* honest stage chips - the show-your-work idea, applied to the shelf */
.tag{display:inline-flex;align-items:center;gap:6px;font:600 10px/1 var(--mono);letter-spacing:.09em;
  text-transform:uppercase;padding:5px 9px;border-radius:7px;white-space:nowrap}
.tag::before{content:"";width:5px;height:5px;border-radius:50%;background:currentColor}
.tag.live{color:oklch(0.50 0.11 155);background:oklch(0.50 0.11 155 / .10);border:1px solid oklch(0.50 0.11 155 / .28)}
.tag.testing{color:var(--coral-lo);background:color-mix(in oklch,var(--coral) 9%,transparent);border:1px solid color-mix(in oklch,var(--coral) 24%,transparent)}
.tag.eng{color:oklch(0.44 0.09 190);background:var(--teal-tint);border:1px solid color-mix(in oklch,var(--teal) 28%,transparent)}
.tag.early{color:var(--dim);background:color-mix(in oklch,var(--ink) 6%,transparent);border:1px solid var(--line-2)}

/* ── section rhythm + eyebrows ─────────────────────────────────────────── */
section{padding:clamp(58px,8vw,104px) 0}
.eyebrow{display:inline-flex;align-items:center;gap:9px;
  font:600 11.5px/1 var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--coral-lo);
  padding:7px 12px;border-radius:8px;background:color-mix(in oklch,var(--coral) 9%,transparent);
  border:1px solid color-mix(in oklch,var(--coral) 22%,transparent)}
.eyebrow .d{width:6px;height:6px;border-radius:50%;background:var(--coral);box-shadow:0 0 9px var(--coral)}
.eyebrow.teal{color:oklch(0.44 0.09 190);background:var(--teal-tint);border-color:color-mix(in oklch,var(--teal) 30%,transparent)}
.eyebrow.teal .d{background:var(--teal);box-shadow:0 0 9px var(--teal)}
h1{font:720 clamp(46px,6.6vw,84px)/1.0 var(--sans);letter-spacing:-.038em;text-wrap:balance}
h2{font:680 clamp(30px,4vw,46px)/1.06 var(--sans);letter-spacing:-.03em;text-wrap:balance}
h3{font:660 20px/1.2 var(--sans);letter-spacing:-.02em}
.sub{font-size:19px;line-height:1.6;color:var(--body);max-width:56ch;text-wrap:pretty}
.shead{max-width:60ch;margin-bottom:clamp(28px,4vw,48px)}
.shead h2{margin-top:14px}.shead .sub{margin-top:14px}

/* ── shared subpage patterns - every page composes from these ──────────── */
.phero{padding:clamp(44px,7vw,84px) 0 clamp(24px,4vw,40px);max-width:62ch}
.phero .eyebrow{animation:rise .6s var(--e) both}
.phero h1{font-size:clamp(38px,5.2vw,66px);margin:20px 0 0;animation:rise .7s var(--e) .08s both}
.phero .sub{margin-top:20px;animation:rise .7s var(--e) .18s both}
.phero .cta{margin-top:28px;display:flex;gap:20px;align-items:center;flex-wrap:wrap;animation:rise .7s var(--e) .28s both}
.glance{display:flex;flex-wrap:wrap;gap:12px}
.glance .g{flex:1 1 158px;padding:20px 20px 18px}
.glance .g b{display:block;font:720 clamp(30px,3.6vw,42px)/1 var(--sans);letter-spacing:-.035em;color:var(--coral);
  background:linear-gradient(118deg,var(--coral),var(--gold));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.glance .g span{display:block;margin-top:9px;font:560 12px/1.35 var(--mono);letter-spacing:.04em;text-transform:uppercase;color:var(--dim)}
/* the scale band - big honest numbers, warm coral-to-gold, the impact moment */
.stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
.stat{padding:26px 22px 24px;position:relative;overflow:hidden}
.stat b{display:block;font:720 clamp(40px,5.4vw,62px)/.92 var(--sans);letter-spacing:-.04em;color:var(--coral);
  background:linear-gradient(118deg,var(--coral),var(--gold));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.stat b .u{font-size:.5em;letter-spacing:-.02em;-webkit-text-fill-color:var(--gold-lo);color:var(--gold-lo);margin-left:2px}
.stat span{display:block;margin-top:12px;font:560 13px/1.45 var(--sans);color:var(--dim);max-width:22ch}
.stat::after{content:"";position:absolute;right:-30px;top:-30px;width:90px;height:90px;border-radius:50%;
  background:radial-gradient(circle,var(--gold-tint),transparent 70%);opacity:.7;pointer-events:none}
@media (max-width:820px){.stats{grid-template-columns:repeat(2,1fr)}}
@media (max-width:460px){.stats{grid-template-columns:1fr}}
/* the register - the site's signature sheet-as-table */
.regwrap{overflow-x:auto;border-radius:var(--r);padding:8px}
.reg{width:100%;border-collapse:collapse;font-size:14.5px}
.reg th{text-align:left;font:600 10.5px/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--faint);
  padding:8px 14px 12px;border-bottom:1px solid var(--line-2)}
.reg td{padding:15px 14px;border-bottom:1px solid var(--line);color:var(--body);vertical-align:top}
.reg tbody tr:last-child td{border-bottom:0}
.reg .no{font:600 12px/1.3 var(--mono);color:var(--coral-lo);white-space:nowrap}
.reg .nm{color:var(--ink);font-weight:620}
.reg tbody tr{transition:background .15s var(--e)}
.reg tbody tr:hover{background:color-mix(in oklch,var(--ink) 3.5%,transparent)}
/* numbered spec blocks (the R-01 idiom) */
.specs{display:grid;grid-template-columns:repeat(auto-fit,minmax(238px,1fr));gap:16px}
.spec{padding:22px}
.spec .no{font:600 11px/1 var(--mono);letter-spacing:.1em;color:var(--coral)}
.spec.t .no{color:var(--teal)}
.spec h3{margin:12px 0 8px}
.spec p{color:var(--body);font-size:14.5px;line-height:1.55}
.spec .meta{margin-top:13px;font:560 11px/1 var(--mono);letter-spacing:.05em;color:var(--faint)}
/* long-form prose (writing, the name section) */
.prose{max-width:70ch}
.prose h1{font:720 clamp(34px,4.6vw,56px)/1.05 var(--sans);letter-spacing:-.035em;margin:0 0 22px;color:var(--ink);text-wrap:balance}
.prose p{margin:0 0 18px;color:var(--body);font-size:17px;line-height:1.72}
.prose h2{margin:40px 0 14px}.prose h3{margin:28px 0 10px}
.prose strong,.prose b{color:var(--ink);font-weight:640}
.prose a{color:var(--coral);border-bottom:1px solid color-mix(in oklch,var(--coral) 35%,transparent)}
.prose a:hover{border-color:var(--coral)}
.prose ul{margin:0 0 18px;padding-left:22px}.prose li{margin:7px 0;color:var(--body)}
.prose pre{margin:0 0 20px;padding:16px 18px;border-radius:var(--r-sm);overflow-x:auto;
  background:color-mix(in oklch,var(--ink) 4%,white);border:1px solid var(--line);
  font:500 13px/1.6 var(--mono);color:var(--ink);white-space:pre-wrap;word-break:break-word}
.prose lede,.prose .lede{color:var(--dim)}

/* ── footer ────────────────────────────────────────────────────────────── */
.ft{border-top:1px solid var(--line);margin-top:40px;background:linear-gradient(180deg,transparent,var(--room-2))}
.ftin{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:32px;padding:56px 0 28px}
.ft h4{font:600 11px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--faint);margin-bottom:16px}
.ft a{display:block;color:var(--body);font-size:14.5px;padding:5px 0;transition:color .15s var(--e)}
.ft a:hover{color:var(--coral)}
.ft .brand{max-width:30ch}.ft .brand p{color:var(--dim);font-size:14px;margin-top:12px}
.ftbar{display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px;padding:22px 0;border-top:1px solid var(--line);
  font:560 12px/1.5 var(--mono);letter-spacing:.02em;color:var(--faint)}

/* ── motion ────────────────────────────────────────────────────────────── */
@keyframes rise{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
@keyframes kin{from{transform:translateY(112%)}to{transform:translateY(0)}}
@keyframes glassin{from{opacity:0;transform:translateY(30px) scale(.97)}to{opacity:1;transform:none}}
.rise{opacity:0;animation:rise .7s var(--e) forwards}
[data-d="1"]{animation-delay:.06s}[data-d="2"]{animation-delay:.14s}[data-d="3"]{animation-delay:.22s}
[data-d="4"]{animation-delay:.30s}[data-d="5"]{animation-delay:.38s}[data-d="6"]{animation-delay:.46s}
/* buttery cross-page nav, zero JS */
@view-transition{navigation:auto}

@media (max-width:900px){
  .ftin{grid-template-columns:1fr 1fr}
  .menu{position:fixed;inset:64px 12px auto 12px;flex-direction:column;align-items:stretch;gap:2px;
    padding:12px;border-radius:16px;display:none}
  .menu.open{display:flex;animation:rise .3s var(--e) forwards}
  .menu.open{background:var(--glass);border:1px solid var(--glass-brd);box-shadow:var(--glass-sh),var(--glass-in);
    -webkit-backdrop-filter:blur(18px) saturate(1.7);backdrop-filter:blur(18px) saturate(1.7)}
  .menu .sep{display:none}.menu a{padding:13px 14px;font-size:16px}
  .burger{display:block}
}
@media (max-width:560px){.ftin{grid-template-columns:1fr}}
@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
  html{scroll-behavior:auto}
  .rise{opacity:1}
}