/* ==========================================================================
   Pariahware, Inc.
   Ported from pariahware-mockup.html. Hard rules, inherited from the brief:
     - no border-radius anywhere
     - no drop shadows, except the nixie glow
     - one accent color (--nixie), never a second
     - mono for metadata, sans for prose
     - no card grids; vertical lists with 1px rules
   ========================================================================== */

:root {
  --field: #C7C3BA;      /* page background — classic Mac OS platinum grey */
  --panel: #D9D6CE;      /* masthead, chips, contact block */
  --panel-hi: #E7E4DD;   /* hover state */
  --ink: #1E1C19;        /* body text */
  --ink-soft: #4A463F;   /* secondary text */
  --rule: #8C8880;       /* section dividers */
  --rule-soft: #ABA69C;  /* list item dividers */
  --nixie: #FF6B18;      /* single accent — lit cathodes, on --glass only */
  --nixie-ink: #853507;  /* same accent, darkened for use on light backgrounds.
                            #FF6B18 as text or a focus ring on --field is
                            1.62:1 — invisible. This is 4.76:1. Not a second
                            accent; the same hue at a legible value. */
  --nixie-dim: #B24A10;  /* unlit ghost cathodes */
  --glass: #141210;      /* nixie tube interior */

  --sans: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --disp: "IBM Plex Sans Condensed", "IBM Plex Sans", system-ui, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
}

* { box-sizing: border-box }
html { -webkit-text-size-adjust: 100% }

body {
  margin: 0;
  background: var(--field);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.6;
}

/* subtle platinum tooth — a nod to dithered mid-grey UI, not a reproduction of it */
body::before {
  content: "";
  position: fixed; inset: 0;
  pointer-events: none; z-index: 0;
  background: repeating-linear-gradient(0deg, rgba(0,0,0,.014) 0 1px, transparent 1px 3px);
}

.wrap { position: relative; z-index: 1; max-width: 760px; margin: 0 auto; padding: 0 24px }

a { color: inherit }
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible {
  outline: 2px solid var(--nixie-ink);
  outline-offset: 3px;
}

.skip {
  position: absolute; left: -9999px;
  background: var(--ink); color: var(--field);
  font-family: var(--mono); font-size: 12px;
  padding: 10px 16px; z-index: 99;
}
.skip:focus { left: 8px; top: 8px }

.mono {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

/* ---------- masthead ---------- */
.masthead { border-bottom: 1px solid var(--rule); background: var(--panel) }
.masthead-in {
  max-width: 760px; margin: 0 auto; padding: 14px 24px;
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; flex-wrap: wrap;
}
.wordmark {
  font-family: var(--disp); font-weight: 700; font-size: 20px; letter-spacing: -.01em;
  text-decoration: none; display: flex; align-items: center; gap: 9px;
}
.bulb {
  width: 9px; height: 9px; background: var(--nixie);
  box-shadow: 0 0 7px rgba(255,107,24,.85);
  flex: none;
}
.nav { display: flex; gap: 20px; list-style: none; margin: 0; padding: 0 }
.nav a {
  font-family: var(--mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase;
  text-decoration: none; padding-bottom: 2px; border-bottom: 1px solid transparent;
}
.nav a:hover { border-bottom-color: var(--nixie-ink)}
.nav a[aria-current="page"] { border-bottom-color: var(--nixie-ink); color: var(--nixie-ink) }

/* ---------- hero ---------- */
.hero { padding: 56px 0 48px }
.hero-sub { padding-bottom: 8px }   /* interior pages: section rule follows */
.eyebrow { margin: 0 0 26px }

/* "See everything →" style trailing links */
.more { margin-top: 22px }
.more a { text-decoration: none; border-bottom: 1px solid var(--rule) }
.more a:hover { color: var(--nixie-ink); border-bottom-color: var(--nixie-ink) }
.lede a { color: var(--nixie-ink) }
/* Subdued against the client name, but still 4.71:1 on --field.
   Do not do this with `opacity` — it drops the effective ratio below AA. */
.roster-meta { color: #524E46 }

.tube {
  position: relative;
  background: var(--glass);
  border: 1px solid #3A342C;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06), 0 1px 0 var(--panel-hi);
  padding: 22px 26px;
  display: flex; align-items: center; gap: 26px; flex-wrap: wrap;
}
.tube::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    repeating-linear-gradient(0deg, rgba(255,255,255,.045) 0 1px, transparent 1px 5px),
    repeating-linear-gradient(90deg, rgba(255,255,255,.045) 0 1px, transparent 1px 5px);
}
.readout { display: flex; gap: 4px }
.digit {
  position: relative;
  font-family: var(--mono); font-weight: 500;
  font-size: 76px; line-height: .92;
  width: .62em;
}
.digit b {
  position: relative; z-index: 3; color: var(--nixie); font-weight: 500;
  text-shadow: 0 0 4px rgba(255,107,24,.9), 0 0 18px rgba(255,107,24,.55), 0 0 40px rgba(255,90,10,.3);
  display: block;
  animation: warm 1400ms ease-out both;
}
.digit i {
  position: absolute; left: 0; top: 0; z-index: 1; font-style: normal;
  color: var(--nixie-dim); opacity: .13;
}
.digit i.c2 { transform: translate(2px, 3px) scale(.985); opacity: .09 }
.digit i.c3 { transform: translate(-2px, 5px) scale(.97); opacity: .06 }

@keyframes warm {
  0%   { opacity: 0; text-shadow: none }
  35%  { opacity: .35 }
  45%  { opacity: .12 }
  60%  { opacity: .9 }
  70%  { opacity: .5 }
  100% { opacity: 1 }
}
.tube-label { position: relative; z-index: 3 }
.tube-label .mono { color: #9A9086; display: block; line-height: 1.9 }
.tube-label .mono strong { color: #D6CCC0; font-weight: 500 }

h1 {
  font-family: var(--disp); font-weight: 700;
  font-size: clamp(32px, 6.2vw, 46px); line-height: 1.06; letter-spacing: -.015em;
  margin: 34px 0 18px; max-width: 16ch;
}
.lede { font-size: 19px; color: var(--ink-soft); margin: 0; max-width: 56ch }

/* ---------- sections ---------- */
.section { padding: 44px 0; border-top: 1px solid var(--rule) }
.section-head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 16px; margin-bottom: 26px;
}
h2 {
  font-family: var(--disp); font-weight: 600; font-size: 15px;
  letter-spacing: .12em; text-transform: uppercase; margin: 0;
}

/* project rows */
.item {
  display: block; text-decoration: none;
  padding: 20px 0; border-bottom: 1px solid var(--rule-soft);
}
.item:first-of-type { border-top: 1px solid var(--rule-soft) }
a.item:hover { background: var(--panel-hi); box-shadow: 0 0 0 16px var(--panel-hi) }
.item-top {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 14px; flex-wrap: wrap;
}
.item-name { font-family: var(--disp); font-weight: 700; font-size: 25px; letter-spacing: -.01em }
.item-desc { margin: 5px 0 0; color: var(--ink-soft); max-width: 58ch }
.tag { color: var(--nixie-ink); font-weight: 600 }

/* compact client list */
.roster {
  margin: 22px 0 0; padding: 0; list-style: none;
  display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 2px 22px;
}
.roster li { font-family: var(--mono); font-size: 12.5px; color: var(--ink-soft); line-height: 1.9 }
.roster a { color: var(--ink-soft) }
.roster a:hover { color: var(--nixie-ink) }

.stack { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px }
.chip {
  font-family: var(--mono); font-size: 11.5px; letter-spacing: .07em;
  border: 1px solid var(--rule); background: var(--panel);
  padding: 5px 10px;
}
.stack-group { margin-bottom: 22px }
.stack-group:last-child { margin-bottom: 0 }
.stack-group > .mono { display: block; margin-bottom: 10px }
.stack-note { color: var(--ink-soft); margin: 0 0 24px; max-width: 52ch }
.archive-note { margin: -8px 0 26px }

/* ---------- store badges — text links in chip form, never marketing PNGs ---------- */
.stores { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; padding: 0; list-style: none }
.store {
  display: inline-block; text-decoration: none;
  font-family: var(--mono); font-size: 11.5px; letter-spacing: .07em;
  border: 1px solid var(--rule); background: var(--panel);
  padding: 7px 12px;
}
.store:hover { background: var(--panel-hi); border-color: var(--ink); color: var(--nixie-ink) }
.store::after { content: " \2192"; color: var(--nixie-ink) }

/* ---------- product pages ---------- */
.crumb { padding: 22px 0 0 }
.crumb a { color: var(--ink-soft); text-decoration: none; border-bottom: 1px solid var(--rule-soft) }
.crumb a:hover { color: var(--nixie-ink); border-bottom-color: var(--nixie-ink)}

.product-head { padding: 26px 0 40px }
.product-head h1 { margin: 14px 0 16px; max-width: 20ch }
.product-meta { display: flex; flex-wrap: wrap; gap: 8px 18px; margin: 0 0 20px }

.platform-table { margin: 26px 0 0; border-top: 1px solid var(--rule-soft) }
.platform-row {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 14px; flex-wrap: wrap;
  padding: 13px 0; border-bottom: 1px solid var(--rule-soft);
}
.platform-os { font-family: var(--disp); font-weight: 600; font-size: 17px; min-width: 92px }
.store-inline { color: var(--nixie-ink) }

.prose p { color: var(--ink-soft); max-width: 62ch }
.prose p:first-child { margin-top: 0 }
.prose ul { color: var(--ink-soft); max-width: 62ch; padding-left: 20px }
.prose li { margin-bottom: 7px }
.prose h3 {
  font-family: var(--disp); font-weight: 600; font-size: 15px;
  letter-spacing: .12em; text-transform: uppercase;
  margin: 32px 0 12px; color: var(--ink);
}
.prose a { color: var(--nixie-ink); text-decoration: none; border-bottom: 1px solid var(--rule) }
.prose a:hover { border-bottom-color: var(--nixie-ink)}

/* screenshots — flat strip, no device frames, no rounded corners */
.shots {
  display: flex; gap: 14px; overflow-x: auto; padding: 0 0 14px; margin: 0;
  list-style: none;
  scrollbar-color: var(--rule) var(--panel);
}
.shots li { flex: none }
.shots img {
  display: block; height: 420px; width: auto;
  border: 1px solid var(--rule); background: var(--panel);
}
.shots-note { margin: 4px 0 0 }

/* ---------- contact ---------- */
.cta { background: var(--panel); border: 1px solid var(--rule); padding: 28px; margin-top: 6px }
.cta p { margin: 0 0 18px; color: var(--ink-soft); max-width: 52ch }
.btn {
  display: inline-block; text-decoration: none;
  background: var(--ink); color: var(--field);
  font-family: var(--mono); font-size: 12px; letter-spacing: .14em; text-transform: uppercase;
  padding: 13px 22px; border: 1px solid var(--ink); cursor: pointer;
}
.btn:hover { background: var(--nixie); border-color: var(--nixie); color: #1a0d04 }

.field { margin-bottom: 20px }
.field label { display: block; margin-bottom: 7px }
.field input, .field textarea {
  width: 100%; font-family: var(--sans); font-size: 16px;
  color: var(--ink); background: var(--field);
  border: 1px solid var(--rule); padding: 11px 12px;
}
.field textarea { min-height: 150px; resize: vertical }

/* Honeypot — off-screen rather than display:none, which some bots skip. */
.hp {
  position: absolute; left: -9999px;
  width: 1px; height: 1px; overflow: hidden;
}

.notice {
  border: 1px solid var(--nixie-ink);
  border-left-width: 3px;
  background: var(--panel);
  padding: 14px 18px;
  margin: 0 0 26px;
  max-width: 52ch;
}

.contact-direct { margin-top: 34px }
.contact-direct dl { margin: 0; display: grid; grid-template-columns: 120px 1fr; gap: 12px 20px }
.contact-direct dt { font-family: var(--mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-soft) }
.contact-direct dd { margin: 0 }
.contact-direct a { color: var(--nixie-ink); text-decoration: none; border-bottom: 1px solid var(--rule) }
.contact-direct a:hover { border-bottom-color: var(--nixie-ink)}

blockquote {
  margin: 0; padding-left: 20px; border-left: 2px solid var(--rule);
  color: var(--ink-soft); max-width: 58ch;
}
blockquote p { margin: 0 0 10px }

footer { border-top: 1px solid var(--rule); margin-top: 8px; padding: 22px 0 46px }
.foot-in { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap }
.foot-in a { text-decoration: none; border-bottom: 1px solid var(--rule-soft) }
.foot-in a:hover { color: var(--nixie-ink); border-bottom-color: var(--nixie-ink) }

@media (max-width: 560px) {
  .digit { font-size: 58px }
  .tube { gap: 18px; padding: 18px }
  .item-name { font-size: 22px }
  .shots img { height: 320px }
  .contact-direct dl { grid-template-columns: 1fr; gap: 4px 0 }
  .contact-direct dd { margin-bottom: 12px }
}

@media (prefers-reduced-motion: reduce) {
  .digit b { animation: none }
  * { transition: none !important }
}