/* Concept 13 — "Green Screen" · a 1980s green-phosphor CRT terminal.
   Display face: VT323 (scaled up to stay legible). Body/reading text:
   IBM Plex Mono, >=16px/1.6. Everything is phosphor green on near-black,
   with a subtle scanline + vignette overlay and a blinking block cursor.
   prefers-reduced-motion disables the typing effect, the cursor blink and
   the vignette (base.css already kills all animations/transitions globally
   under reduced motion — this file only adds a couple of explicit static
   fallbacks for anything that must change layout, not just motion). */

:root{
  --term-green: var(--js-green-glow);   /* #22B33A on black ~7:1 */
  --term-green-dim: #8FD9A0;            /* secondary/dim green, still AA on black */
  --term-bg: var(--js-black);
  --term-panel: #0D1410;                /* near-black with a hair of green */
  --term-line: rgba(34,179,58,.35);
  --term-glow: 0 0 2px rgba(34,179,58,.65), 0 0 10px rgba(34,179,58,.25);
  --term-glow-soft: 0 0 6px rgba(34,179,58,.18);
  --term-red: #FF6B6B;                  /* AA-safe red on black (~7.4:1) */
}

/* ---------- base page ---------- */
#main, body{ background: var(--term-bg); color: var(--term-green); }
body{ font-family: "IBM Plex Mono", ui-monospace, monospace; }
h1,h2,h3,.cmdnav a,.brand,.eyebrow,.btn,.step,.tag,.perm,.dirname,.pingline,.form-prompt,.whoami-out,.boot-line,.section-title{
  font-family: "VT323", "IBM Plex Mono", ui-monospace, monospace;
  letter-spacing: .01em;
}
h1,h2,h3{ line-height: var(--lh-tight); text-shadow: var(--term-glow); color: #DFF7E2; }
p, li, .jsform, label{ line-height: 1.6; }
a{ color: var(--term-green); }
a:hover{ color: #fff; }
::selection{ background: var(--term-green); color: #04140a; }

/* VT323 renders visually small — bump sizes so it stays comfortably legible */
.eyebrow.cmd-eyebrow{ font-size: 1.15rem; letter-spacing: .06em; text-transform: none; color: var(--term-green-dim); margin-bottom: 10px; }
.section-title{ font-size: calc(var(--fs-h2) * 1.12); margin-bottom: 14px; }
.hero-h1{ font-size: calc(var(--fs-h1) * 1.12); font-weight: 400; margin: 18px 0 16px; }

/* ---------- CRT overlay: scanlines + vignette (static, subtle) ---------- */
.crt-overlay{
  position: fixed; inset: 0; z-index: 90; pointer-events: none;
  background:
    repeating-linear-gradient(0deg, rgba(255,255,255,0) 0px, rgba(255,255,255,0) 2px, rgba(0,0,0,.14) 3px),
    radial-gradient(ellipse at center, transparent 55%, rgba(0,0,0,.45) 100%);
  mix-blend-mode: multiply;
  opacity: .55;
}
@media (prefers-reduced-motion: reduce){ .crt-overlay{ opacity: .4; } }

/* ---------- blinking cursor ---------- */
.cursor{ display: inline-block; animation: blink 1s steps(1) infinite; color: var(--term-green); }
@keyframes blink{ 0%,49%{ opacity: 1; } 50%,100%{ opacity: 0; } }
@media (prefers-reduced-motion: reduce){ .cursor{ animation: none; opacity: 1; } }

/* ---------- boot sequence (decorative; real facts are duplicated as
   accessible text elsewhere — license in topbar/footer, region in H1/lead) ---------- */
.boot-seq{ margin-bottom: clamp(18px,3vw,28px); border: 1px solid var(--term-line); background: var(--term-panel);
  border-radius: 2px; padding: 14px 16px; max-width: 46ch; }
.boot-line{ font-size: 1.3rem; color: var(--term-green); min-height: 1.3em; white-space: pre-wrap; word-break: break-word; }
.boot-line + .boot-line{ margin-top: 4px; }
.boot-idle{ color: var(--term-green-dim); }
html.js .boot-line{ visibility: hidden; }
html.js .boot-line.is-visible{ visibility: visible; }

/* headline/lead settle in after boot (gated behind html.js; always shown otherwise) */
html.js .hero-copy > .hero-h1, html.js .hero-copy > .hero-lead{ opacity: 0; transform: translateY(6px); }
html.js body.boot-done .hero-copy > .hero-h1, html.js body.boot-done .hero-copy > .hero-lead{
  opacity: 1; transform: none; transition: opacity .45s var(--ease), transform .45s var(--ease);
}

/* ---------- top bar / header ---------- */
.topbar{ background: var(--term-panel); border-bottom: 1px solid var(--term-line); font-size: .95rem; }
.topbar-in{ display: flex; justify-content: space-between; align-items: center; gap: 12px; padding-block: 7px; color: var(--term-green-dim); flex-wrap: wrap; }
.topbar-lic strong{ color: #fff; }
.led{ display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--term-green); box-shadow: 0 0 6px var(--term-green); margin-right: 6px; }

.site-header{ position: sticky; top: 0; z-index: var(--z-header); background: rgba(10,10,10,.94);
  backdrop-filter: blur(6px); border-bottom: 1px solid var(--term-line); }
.header-in{ display: flex; align-items: center; gap: clamp(12px,2vw,24px); padding-block: 12px; flex-wrap: wrap; }
.brand{ font-family: "VT323", monospace; font-size: 1.5rem; color: #fff; text-shadow: var(--term-glow); }
.cmdnav{ display: flex; gap: clamp(10px,1.6vw,20px); margin-left: auto; flex-wrap: wrap; font-size: 1.1rem; }
.cmdnav a{ font-weight: 400; padding: 4px 2px; }
.cmdnav a:hover, .cmdnav a:focus-visible{ color: #fff; text-shadow: var(--term-glow); }
.header-cta{ white-space: nowrap; }
@media (max-width: 760px){ .cmdnav{ order: 3; width: 100%; justify-content: space-between; margin-left: 0; } }

/* ---------- buttons, terminal-styled ---------- */
.btn{ font-family: "VT323", monospace; font-size: 1.15rem; border-radius: 2px; }
.btn-primary{ background: var(--term-green); color: #04140a; text-shadow: none; }
.btn-primary:hover{ background: var(--term-green-dim); }
.btn-ghost{ background: transparent; color: var(--term-green); border: 1.5px solid var(--term-green); }
.btn-ghost:hover{ background: rgba(34,179,58,.12); color: #fff; }
:focus-visible{ outline: 3px solid var(--term-green); outline-offset: 2px; }

/* ---------- hero ---------- */
.hero{ padding-block: clamp(36px,6vw,80px); background: linear-gradient(180deg, #0c0f0d, var(--term-bg)); }
.hero-in{ display: grid; grid-template-columns: 1.2fr .8fr; gap: clamp(24px,4vw,48px); align-items: start; }
.hero-lead{ color: var(--term-green-dim); font-size: 1.05rem; max-width: 56ch; margin-bottom: 20px; }
.checklist{ display: grid; gap: 10px; margin: 20px 0 26px; font-size: 1.02rem; }
.checklist li{ display: flex; align-items: center; gap: 10px; }
.tag{ font-family: "VT323", monospace; font-size: 1.05rem; padding: 0 6px; border: 1px solid var(--term-line); border-radius: 2px; color: var(--term-green-dim); }
.tag.ok{ color: var(--term-green); border-color: var(--term-green); }
.hero-cta{ display: flex; flex-wrap: wrap; gap: 14px; }
.btn-lg{ padding: 16px 24px; font-size: 1.3rem; }

.ascii-frame{ border: 1px solid var(--term-line); border-radius: 4px; background: var(--term-panel);
  padding: clamp(18px,3vw,32px); display: grid; place-items: center; overflow-x: auto; }
.ascii-house{ font-family: "VT323", monospace; font-size: clamp(1.1rem, .95rem + .8vw, 1.7rem); line-height: 1.15;
  color: var(--term-green); text-shadow: var(--term-glow); white-space: pre; margin: 0; max-width: 100%; }
@media (max-width: 860px){ .hero-in{ grid-template-columns: 1fr; } .ascii-frame{ order: -1; } }

/* ---------- section furniture ---------- */
.section-sub{ color: var(--term-green-dim); max-width: 64ch; margin-bottom: 28px; font-size: 1rem; }

/* ---------- services: ls directory listing ---------- */
.services{ background: linear-gradient(180deg, var(--term-bg), #0c0f0d); }
.dirlist{ display: grid; gap: 14px; }
.dirlist li{ border: 1px solid var(--term-line); border-radius: 2px; padding: 16px 18px; background: var(--term-panel); }
.dirline{ display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.perm{ color: var(--term-green-dim); font-size: .92rem; }
.dirico{ width: 20px; height: 20px; color: var(--term-green); flex: none; }
.dirico svg{ width: 100%; height: 100%; }
.dirname{ font-family: "VT323", monospace; font-size: 1.35rem; color: #fff; text-shadow: var(--term-glow-soft); overflow-wrap: anywhere; }
.dirlist a.dirline:hover .dirname, .dirlist a.dirline:focus-visible .dirname{ text-shadow: var(--term-glow); color: var(--term-green); }
.dirdesc{ margin-top: 8px; color: var(--term-green-dim); font-size: .98rem; }

/* ---------- work: image placeholders ---------- */
.work-grid{ display: grid; grid-template-columns: repeat(4,1fr); gap: 14px; }
.imgblock{ position: relative; min-height: 150px; border: 1px dashed var(--term-line); border-radius: 2px;
  background: var(--term-panel); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; margin: 0; }
.imgtag{ font-family: "VT323", monospace; font-size: 1.6rem; color: var(--term-green-dim); }
.imgblock .cap{ font-size: .82rem; color: var(--term-green-dim); text-align: center; padding: 0 10px 10px; word-break: break-word; }
@media (max-width: 860px){ .work-grid{ grid-template-columns: repeat(2,1fr); } }
@media (max-width: 480px){ .work-grid{ grid-template-columns: 1fr; } }

/* ---------- process: run sequence ---------- */
.process{ background: #0c0f0d; }
.runseq{ display: grid; gap: 16px; counter-reset: none; }
.runseq li{ display: flex; gap: 16px; align-items: flex-start; border-left: 3px solid var(--term-green); padding: 4px 0 4px 16px; }
.step{ font-family: "VT323", monospace; font-size: 1.2rem; color: #04140a; background: var(--term-green); border-radius: 2px;
  padding: 2px 10px; white-space: nowrap; flex: none; }
.runseq h3{ font-size: 1.15rem; margin-bottom: 4px; color: #fff; }
.runseq p{ color: var(--term-green-dim); font-size: .98rem; }
@media (max-width: 560px){ .runseq li{ flex-direction: column; gap: 8px; } }

/* ---------- reviews: cat reviews.log ---------- */
.reviews{ background: var(--term-bg); }
.logwrap{ display: grid; gap: 10px; border: 1px solid var(--term-line); border-radius: 2px; background: var(--term-panel); padding: 18px; overflow-x: auto; }
.logline{ font-size: .98rem; color: var(--term-green-dim); }
.logline .tag{ margin-right: 6px; }
.logline .ph{ color: inherit; }

/* ---------- about: whoami ---------- */
.about-in{ display: grid; grid-template-columns: .8fr 1.2fr; gap: clamp(24px,4vw,48px); align-items: center; }
.about-photo{ min-height: 280px; border-radius: 2px; }
.whoami-out{ font-family: "VT323", monospace; font-size: 1.25rem; line-height: 1.5; color: var(--term-green);
  border: 1px solid var(--term-line); background: var(--term-panel); border-radius: 2px; padding: 14px 16px;
  margin: 14px 0 18px; white-space: pre-wrap; word-break: break-word; max-width: 100%; }
.about-copy p{ color: var(--term-green-dim); margin-top: 12px; font-size: 1rem; }
@media (max-width: 760px){ .about-in{ grid-template-columns: 1fr; } .about-photo{ min-height: 220px; } }

/* ---------- service area: ping ---------- */
.area{ background: #0c0f0d; }
.ping-grid{ display: grid; grid-template-columns: repeat(3,1fr); gap: 18px; }
.pingblock{ border: 1px solid var(--term-line); border-radius: 2px; padding: 18px; background: var(--term-panel); }
.pingline{ font-size: .95rem; color: var(--term-green-dim); margin-bottom: 10px; }
.pingblock h3{ font-size: 1.2rem; margin-bottom: 8px; color: #fff; }
.pingblock p{ color: var(--term-green-dim); font-size: .92rem; }
@media (max-width: 860px){ .ping-grid{ grid-template-columns: 1fr; } }

/* ---------- estimate ---------- */
.estimate-section{ background: linear-gradient(180deg, #0c0f0d, var(--term-bg)); }
.estimate-in{ display: grid; grid-template-columns: 1fr 1.1fr; gap: clamp(26px,4vw,48px); align-items: start; }
.estimate-info p{ color: var(--term-green-dim); margin-bottom: 20px; }
.contact-list{ display: grid; gap: 12px; }
.contact-list li{ display: flex; align-items: center; gap: 10px; }
.contact-list .ci{ width: 22px; height: 22px; color: var(--term-green); flex: none; }
.contact-list .ci svg{ width: 100%; height: 100%; }
.contact-list a:hover{ color: #fff; }

.terminal-frame.estimate-form{ border: 1px solid var(--term-green); border-radius: 4px; background: var(--term-panel);
  padding: clamp(18px,3vw,28px); box-shadow: 0 0 24px rgba(34,179,58,.08); }
.form-prompt{ font-family: "VT323", monospace; font-size: 1.3rem; color: var(--term-green); margin-bottom: 14px; }

/* skin the shared estimate form as terminal fields */
.estimate-form .jsform-field label{ color: var(--term-green-dim); font-weight: 500; font-size: .95rem; }
.estimate-form .jsform-input, .estimate-form .jsform-select, .estimate-form .jsform-textarea{
  background: var(--term-bg); color: var(--term-green); border: 1px solid var(--term-line); border-radius: 2px;
  caret-color: var(--term-green); font-family: "IBM Plex Mono", monospace; }
.estimate-form .jsform-input::placeholder, .estimate-form .jsform-textarea::placeholder{ color: rgba(34,179,58,.45); }
.estimate-form .jsform-input:focus, .estimate-form .jsform-select:focus, .estimate-form .jsform-textarea:focus{
  border-color: var(--term-green); box-shadow: 0 0 0 3px rgba(34,179,58,.18); }
.estimate-form .jsform-input[aria-invalid="true"], .estimate-form .jsform-select[aria-invalid="true"], .estimate-form .jsform-textarea[aria-invalid="true"]{
  border-color: var(--term-red); box-shadow: 0 0 0 3px rgba(255,107,107,.18); }
.estimate-form .jsform-error{ color: var(--term-red); }
.estimate-form .jsform-hint{ color: var(--term-green-dim); }
.estimate-form .jsform-photos-preview img{ border-color: var(--term-line); }
.estimate-form .jsform-submit{ font-family: "VT323", monospace; font-size: 1.2rem; }
.estimate-form .jsform-status.is-success{ background: rgba(34,179,58,.10); border: 1.5px solid var(--term-green); color: var(--term-green); }
.estimate-form .jsform-status.is-error{ background: rgba(255,107,107,.08); border: 1.5px solid var(--term-red); color: var(--term-red); }

/* ---------- footer: status bar ---------- */
.site-footer{ background: var(--term-panel); border-top: 1px solid var(--term-line); padding-block: 40px; }
.footer-in{ display: grid; grid-template-columns: 1.3fr 1fr auto; gap: 24px; align-items: start; }
.brandline{ font-family: "VT323", monospace; font-size: 1.3rem; color: #fff; margin-bottom: 8px; }
.footer-brand p, .footer-meta p{ color: var(--term-green-dim); font-size: .92rem; margin-top: 6px; }
.footer-meta strong{ color: #fff; }
.footer-meta a:hover{ color: #fff; }
.footer-legal{ text-align: right; color: var(--term-green-dim); font-size: .9rem; }
.footer-legal .tag{ margin-left: 4px; }
.footer-legal a{ display: inline-block; margin-top: 8px; text-decoration: underline; }
@media (max-width: 760px){ .footer-in{ grid-template-columns: 1fr; } .footer-legal{ text-align: left; } }