/* Pono Data Solutions  /  ponodata.com
   Pono-family surface: wears Porchlight, in its denser instrument register.
   Where Pono OS is sparse prose, this is a tool wall: mono tables, tool
   rows, source-checkable readouts. Public-facing, humble copy.
   Warm black, amber lamp, phosphor readouts, Instrument Serif, Plex Mono. */

:root{
  --bg:#0d0b09;
  --panel:#110f0c;
  --raise:#191510;
  --ink:#e8e2d6;
  --dim:#928b7c;
  --faint:#6a6457;
  --hair:rgba(232,226,214,.09);
  --hair-2:rgba(232,226,214,.18);
  --lamp:#e2a13c;
  --lamp-dim:rgba(226,161,60,.55);
  --lamp-tint:rgba(226,161,60,.06);
  --phos:#8fd6ad;
  --alarm:#e06a5a;
  --serif:"Instrument Serif",Georgia,"Times New Roman",serif;
  --mono:"IBM Plex Mono",ui-monospace,Menlo,Consolas,monospace;
  --sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font:16px/1.6 var(--sans); -webkit-font-smoothing:antialiased;
  position:relative; min-height:100vh;
}
body::before{
  content:""; position:fixed; inset:0; z-index:0; pointer-events:none; opacity:.05;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.wrap{position:relative; z-index:1; max-width:880px; margin:0 auto; padding:0 24px 96px}
a{color:var(--lamp); text-underline-offset:3px; text-decoration-thickness:1px}
a:hover{color:var(--phos)}

/* ---- plate ---- */
header.plate{
  display:flex; justify-content:space-between; align-items:flex-start; gap:16px; flex-wrap:wrap;
  border-bottom:1px solid var(--hair); padding:22px 0 16px; margin-bottom:8px;
}
.plate .name{font:500 12px/1.4 var(--mono); letter-spacing:.16em; text-transform:uppercase; color:var(--ink)}
.plate .sub{font:400 11px/1.5 var(--mono); letter-spacing:.08em; color:var(--faint); margin-top:6px}
.plate .lamp{display:inline-block; width:7px; height:7px; border-radius:1px; background:var(--lamp); box-shadow:0 0 8px var(--lamp-dim); margin-right:8px; vertical-align:middle}
nav.bar{font:500 11px/1 var(--mono); letter-spacing:.12em; text-transform:uppercase; display:flex; gap:18px; flex-wrap:wrap; padding-top:2px}
nav.bar a{color:var(--dim); text-decoration:none; padding-bottom:3px; border-bottom:1px solid transparent}
nav.bar a:hover{color:var(--lamp)}
nav.bar a[aria-current]{color:var(--lamp); border-color:var(--lamp-dim)}

/* ---- intro ---- */
.intro{padding:44px 0 14px; border-bottom:1px solid var(--hair)}
.intro .status{font:500 11px/1 var(--mono); letter-spacing:.14em; text-transform:uppercase; color:var(--phos); margin:0 0 18px}
.intro h1{font:400 38px/1.08 var(--serif); margin:0 0 16px; color:var(--ink); max-width:22ch}
.intro p{color:var(--dim); max-width:64ch; margin:0 0 14px}
.intro p strong{color:var(--ink); font-weight:600}

/* ---- sections ---- */
.sec{padding:42px 0 6px}
.sec > h2{font:500 12px/1 var(--mono); letter-spacing:.14em; text-transform:uppercase; color:var(--phos); margin:0 0 8px; padding-bottom:8px; border-bottom:1px solid var(--hair)}
.sec .note{color:var(--dim); max-width:64ch; margin:14px 0 22px}
.subhead{font:500 11px/1 var(--mono); letter-spacing:.14em; text-transform:uppercase; color:var(--faint); margin:30px 0 8px}

/* ---- tool rows ---- */
.tool{border-bottom:1px solid var(--hair); padding:20px 0; display:grid; grid-template-columns:1fr auto; gap:6px 20px; align-items:baseline}
.tool h3{grid-column:1; margin:0; font:400 23px/1.2 var(--serif); color:var(--ink)}
.tool .price{grid-column:2; grid-row:1; font:500 12px/1.4 var(--mono); letter-spacing:.04em; color:var(--lamp); white-space:nowrap; text-align:right}
.tool .desc{grid-column:1 / -1; margin:2px 0 0; color:var(--dim); font-size:15px; max-width:66ch}
.tool .go{grid-column:1 / -1; margin-top:8px; font:500 11px/1 var(--mono); letter-spacing:.1em; text-transform:uppercase}
.tool .go a{text-decoration:none}
.tool .soon{grid-column:1 / -1; margin-top:8px; font:500 11px/1 var(--mono); letter-spacing:.1em; text-transform:uppercase; color:var(--faint)}

/* ---- sample table ---- */
.sample{overflow-x:auto; border:1px solid var(--hair-2); border-radius:2px; margin:8px 0}
table{border-collapse:collapse; width:100%; font:400 13px/1.5 var(--mono)}
caption{caption-side:top; text-align:left; font:500 11px/1.4 var(--mono); letter-spacing:.1em; text-transform:uppercase; color:var(--faint); padding:10px 12px}
th,td{text-align:left; padding:8px 12px; border-top:1px solid var(--hair); white-space:nowrap}
th{color:var(--dim); font-weight:500; text-transform:uppercase; letter-spacing:.06em; font-size:11px}
td{color:var(--ink)}
td.phos{color:var(--phos)}

/* ---- index tiles ---- */
.tiles{display:grid; grid-template-columns:repeat(auto-fill,minmax(230px,1fr)); border:1px solid var(--hair); border-bottom:none; margin-top:6px}
.tile{padding:20px; border-bottom:1px solid var(--hair); border-right:1px solid var(--hair); text-decoration:none; display:block; transition:background .12s ease}
.tile:hover{background:var(--panel)}
.tile .n{font:500 10px/1 var(--mono); letter-spacing:.14em; color:var(--lamp)}
.tile h3{font:400 22px/1.15 var(--serif); color:var(--ink); margin:10px 0 6px}
.tile p{font:14px/1.5 var(--sans); color:var(--dim); margin:0}

/* ---- prose ---- */
.prose{max-width:64ch}
.prose p{margin:0 0 16px; color:var(--dim)}
.prose p strong{color:var(--ink); font-weight:600}

/* ---- footer ---- */
footer.foot{border-top:1px solid var(--hair); margin-top:60px; padding-top:18px}
.foot .row2{display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap; font:400 11px/1.6 var(--mono); letter-spacing:.06em; color:var(--faint)}
.foot .row2 a{color:var(--dim); text-decoration:none}
.foot .row2 a:hover{color:var(--lamp)}
.foot .motto{font:italic 400 13px/1.5 var(--serif); color:var(--dim); margin-top:14px; max-width:64ch}

@media (max-width:600px){.intro h1{font-size:31px} .tool .price{text-align:left}}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}