/* Pono Plant — Porchlight. The porchlight left on for plants that are hard to
   reach. Warm black room, one amber lamp, phosphor readouts, a logbook voice.
   Tokens per pono-design. No rounded cards, no glass, no gradients, machined
   1-2px corners, hairlines like an engineering drawing. */

@import url("/fonts.css"); /* IBM Plex Mono, data-URI, lifted from the deck */

:root {
  --bg: #0d0b09;      /* the room, warm black */
  --panel: #110f0c;
  --lift: #181510;
  --ink: #e8e2d6;     /* warm paper */
  --dim: #928b7c;
  --faint: #6a6457;
  --hair: rgba(232,226,214,.09);
  --hair2: rgba(232,226,214,.18);
  --lamp: #e2a13c;    /* light, not paint: brand, live, focus, primary */
  --phos: #8fd6ad;    /* instrument readouts only */
  --alarm: #e06a5a;
  --mono: "Plex Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;
  --serif: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, "Times New Roman", serif;
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  --measure: 66ch;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* grain: fractal-noise overlay at ~4%, every screen */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: .04;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
body > * { position: relative; z-index: 1; }

/* --- title block: an engineering plate in the corner --- */
.plate {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: .5rem 1.5rem;
  padding: 1rem clamp(1rem, 4vw, 3rem);
  border-bottom: 1px solid var(--hair2);
}
.brand {
  font-family: var(--mono);
  font-weight: 500;
  font-size: .95rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--lamp);
  text-decoration: none;
}
.motto {
  font-family: var(--mono);
  font-size: .72rem;
  letter-spacing: .12em;
  color: var(--faint);
}
.nav {
  margin-left: auto;
  display: flex;
  flex-wrap: wrap;
  gap: 1.1rem;
}
.nav a {
  font-family: var(--mono);
  font-size: .68rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--dim);
  text-decoration: none;
  padding-bottom: 2px;
  border-bottom: 1px solid transparent;
  transition: color .12s ease, border-color .12s ease;
}
.nav a:hover, .nav a:focus-visible { color: var(--ink); border-bottom-color: var(--lamp); }

/* --- main column --- */
main {
  max-width: var(--measure);
  margin: 0 auto;
  padding: clamp(2rem, 6vw, 4rem) clamp(1rem, 4vw, 2rem) 6rem;
}

h1 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(2rem, 6vw, 3rem);
  line-height: 1.1;
  letter-spacing: -.01em;
  margin: 0 0 1rem;
}
h2 {
  font-family: var(--mono);
  font-weight: 500;
  font-size: .74rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--phos);
  margin: 2.75rem 0 .75rem;
  padding-bottom: .4rem;
  border-bottom: 1px solid var(--hair);
}
p { margin: 0 0 1.1rem; max-width: var(--measure); }
a { color: var(--lamp); text-underline-offset: 3px; text-decoration-thickness: 1px; }
a:hover { color: #f0b45a; }
ul { padding-left: 1.1rem; margin: 0 0 1.1rem; }
li { margin: 0 0 .5rem; }
em { color: var(--dim); }

/* --- plant page --- */
.plant .sci { font-family: var(--serif); font-style: italic; color: var(--dim); font-size: 1.15rem; margin-top: -.5rem; }
.plant .hawaiian { font-family: var(--serif); font-style: italic; color: var(--phos); }
.importance { font-size: 1.12rem; color: var(--ink); }

/* status badge: a machined instrument tag */
.badge {
  display: inline-block;
  font-family: var(--mono);
  font-size: .66rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--phos);
  border: 1px solid var(--hair2);
  border-radius: 1px;
  padding: .28rem .55rem;
  margin: .25rem 0 1.25rem;
}
.badge[data-tier="permit"] { color: var(--lamp); }
.badge[data-tier="awareness"] { color: var(--dim); }

.obtain { font-family: var(--mono); font-size: .82rem; color: var(--dim); }

/* sources: fine print, monospace, dim */
.sources ul { list-style: none; padding-left: 0; }
.sources li { font-family: var(--mono); font-size: .74rem; line-height: 1.5; word-break: break-word; }
.sources a { color: var(--dim); }
.sources a:hover { color: var(--phos); }
.sources .claim { color: var(--faint); }

/* --- catalog: watch-log rows, not cards --- */
.catalog { list-style: none; padding: 0; margin: 1.5rem 0 0; }
.catalog .row {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: baseline;
  gap: .25rem 1rem;
  padding: 1rem 0;
  border-top: 1px solid var(--hair);
}
.catalog .row:last-child { border-bottom: 1px solid var(--hair); }
.catalog .row a { font-family: var(--serif); font-size: 1.35rem; text-decoration: none; }
.catalog .row .sci { grid-column: 1; font-family: var(--serif); font-style: italic; color: var(--dim); font-size: .95rem; }
.catalog .row .badge { grid-column: 2; grid-row: 1 / span 2; align-self: center; margin: 0; }

/* --- the vitals strip: a quiet instrument readout, honest when dark --- */
.vitals {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 2;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .35rem 1.5rem;
  padding: .55rem clamp(1rem, 4vw, 3rem);
  background: rgba(13,11,9,.92);
  border-top: 1px solid var(--hair2);
  backdrop-filter: none;
  font-family: var(--mono);
  font-size: .7rem;
  letter-spacing: .06em;
}
.vitals[hidden] { display: none; }
.vitals .v-label { color: var(--faint); text-transform: uppercase; letter-spacing: .14em; }
.vitals .v-off { color: var(--faint); }
.vitals .v-read { color: var(--phos); }
.vitals .v-k { color: var(--faint); margin-right: .4rem; text-transform: uppercase; }
.vitals .v-n { color: var(--phos); }

@media (max-width: 640px) {
  body { font-size: 16px; }
  .nav { margin-left: 0; width: 100%; }
}

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