/* Bedroom Coder site — shared styles. Self-hosted assets only. */

/* IBM Plex Mono + Serif (OFL, see fonts/LICENSE.txt) */
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/ibm-plex-mono-400.woff2') format('woff2');
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('fonts/ibm-plex-mono-700.woff2') format('woff2');
}
@font-face {
  font-family: 'IBM Plex Serif';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/ibm-plex-serif-400.woff2') format('woff2');
}
@font-face {
  font-family: 'IBM Plex Serif';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/ibm-plex-serif-400-italic.woff2') format('woff2');
}
@font-face {
  font-family: 'IBM Plex Serif';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('fonts/ibm-plex-serif-700.woff2') format('woff2');
}

:root {
  --bg: #0a0a0e;
  --panel: #101018;
  --ink: #d8d8d0;
  --dim: #8a8a86;
  --phosphor: #46e07a;
  --amber: #ffb000;
  --rule: #26262e;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 16px/1.65 'IBM Plex Serif', Georgia, serif;
}

/* Faint CRT scanlines over the whole page — decoration only, never over text contrast. */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  background: repeating-linear-gradient(
    to bottom,
    rgba(255, 255, 255, 0.015) 0px,
    rgba(255, 255, 255, 0.015) 1px,
    transparent 1px,
    transparent 3px
  );
}

.wrap {
  max-width: 1040px;
  margin: 0 auto;
  padding: 2.5rem 1.5rem 3rem;
}

/* The privacy page is prose only — keep it at a readable measure. */
.wrap.legal { max-width: 680px; }

header.masthead {
  text-align: center;
  margin-bottom: 2rem;
}

.masthead h1 {
  font-family: 'IBM Plex Mono', 'Courier New', monospace;
  font-weight: 700;
  font-size: clamp(1.8rem, 4.5vw, 2.6rem);
  letter-spacing: 0.12em;
  color: var(--phosphor);
  text-shadow: 0 0 12px rgba(70, 224, 122, 0.35);
  margin: 0 0 0.5rem;
}

.masthead .tagline {
  font-style: italic;
  font-size: 1.05rem;
  color: var(--ink);
  margin: 0 auto 1.25rem;
  max-width: 34em;
}

.masthead .coming {
  font-family: 'IBM Plex Mono', 'Courier New', monospace;
  font-size: 0.85rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--dim);
}

.cta {
  display: inline-block;
  margin: 1.25rem 0 0;
  padding: 0.7rem 1.6rem;
  font-family: 'IBM Plex Mono', 'Courier New', monospace;
  font-size: 1rem;
  letter-spacing: 0.08em;
  color: #0a0a0e;
  background: var(--phosphor);
  border: none;
  border-radius: 3px;
  text-decoration: none;
  box-shadow: 0 0 18px rgba(70, 224, 122, 0.3);
}

.cta:hover { background: #62eb90; }

/* Feature rows: prose beside its screenshot, alternating sides on desktop. */
.feature {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2.5rem;
  align-items: center;
  border-top: 1px solid var(--rule);
  padding-top: 2rem;
  margin-top: 2rem;
}

.feature.flip .feature-text { order: 2; }

.feature h2 {
  font-family: 'IBM Plex Mono', 'Courier New', monospace;
  font-size: 0.95rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--amber);
  margin: 0 0 0.75rem;
}

.feature p { margin: 0 0 1rem; }
.feature p:last-child { margin-bottom: 0; }

/* One full-width row: the listing needs its own line to stay legible, and
   breaking the left/right rhythm once is what makes it read as the centrepiece. */
.feature.wide {
  grid-template-columns: 1fr;
  gap: 1.5rem;
}

.feature.wide .feature-text {
  max-width: 66ch;
  margin: 0 auto;
}

/* The listing and what it does, side by side. Both are capped to one shared
   height so they line up; at that height the listing lands on its native
   pixel size, which is the whole reason it stays readable. */
.figure-row {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem;
  align-items: flex-start;
  justify-content: center;
}

.figure-row figure.shot { flex: 0 1 auto; }

.figure-row figure.shot img { max-height: 345px; }

@media (max-width: 720px) {
  .feature {
    grid-template-columns: 1fr;
    gap: 1.25rem;
  }
  .feature.flip .feature-text { order: 0; }
}

a { color: var(--phosphor); }
a:hover { color: #62eb90; }

footer {
  border-top: 1px solid var(--rule);
  margin-top: 3rem;
  padding-top: 1.5rem;
  font-family: 'IBM Plex Mono', 'Courier New', monospace;
  font-size: 0.8rem;
  color: var(--dim);
  text-align: center;
}

footer a { color: var(--dim); }
footer a:hover { color: var(--ink); }

footer .sep { margin: 0 0.5em; }

/* Privacy page */
.legal h1 {
  font-family: 'IBM Plex Mono', 'Courier New', monospace;
  letter-spacing: 0.08em;
  font-size: 1.6rem;
  color: var(--phosphor);
}

.legal h2 {
  font-family: 'IBM Plex Mono', 'Courier New', monospace;
  font-size: 1rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--amber);
  margin-top: 2rem;
}

.legal .updated {
  font-family: 'IBM Plex Mono', 'Courier New', monospace;
  font-size: 0.8rem;
  color: var(--dim);
}

.lang-switch {
  text-align: right;
  font-family: 'IBM Plex Mono', 'Courier New', monospace;
  font-size: 0.8rem;
  margin-bottom: 1rem;
}

/* Screenshots */
figure.shot {
  margin: 0;
}

/* Portrait magazine pages and landscape screens share these rows, so cap the
   height rather than the width — otherwise a page shot towers over its prose. */
figure.shot img {
  display: block;
  margin: 0 auto;
  max-width: 100%;
  max-height: 420px;
  width: auto;
  height: auto;
  border: 1px solid var(--rule);
  border-radius: 4px;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.5);
}

figure.shot figcaption {
  font-family: 'IBM Plex Mono', 'Courier New', monospace;
  font-size: 0.75rem;
  letter-spacing: 0.06em;
  color: var(--dim);
  text-align: center;
  margin-top: 0.6rem;
}

.wip-note {
  font-family: 'IBM Plex Mono', 'Courier New', monospace;
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  color: var(--dim);
  text-align: center;
  margin-top: 2rem;
}