/* ===========================================================================
   amber-theme.css — site layer on top of amber-console.css

   AmberConsole ships components (ac-panel, ac-nav, ac-table, …) but this site
   is org-mode export output, not hand-authored ac-* markup. Two things are
   done here:

     1. Pages are actually wrapped in <div class="ac-screen ac-bloom ac-crt
        ac-afterglow"> by scripts/apply-amber-frame.py after org export (see
        that script) — the frame + simulations are real ac-screen markup.
     2. Everything org-mode itself emits (h1.title, h2/h3/h4, outline-N
        sections, org-src-container, tables, lists) is restyled in place with
        the same tokens/fonts amber-console.css defines, since regenerating
        org's own output structure per-post is not practical across ~150 posts.

   No JS: the three simulations (.ac-bloom/.ac-crt/.ac-afterglow) are baked in
   statically rather than operator-toggleable, so amber-console.js is not
   vendored.
   =========================================================================== */

/* Bumped up from amber-console.css's defaults (44/30/22/18/8) — this site is
   prose-heavy, so a little extra size helps long-form reading. */
:root {
  --type-display: 50px;
  --type-title: 34px;
  --type-body: 25px;
  --type-small: 20px;
  --type-micro: 10px;

  /* .ac-mesh (the screen-door plasma texture) always paints above all page
     content by design — it can't be scoped to just one region, like the
     project card overlays, without restructuring the DOM. Faded from the
     upstream default (0.075) rather than removed outright, since it's most
     noticeable on large flat color fields (the amber overlay bars) and
     barely perceptible elsewhere (near-black backgrounds, small text). */
  --ac-mesh-wire: 0.03;
}

html {
  background: var(--screen);
}

body {
  margin: 0;
  background: var(--screen);
  color: var(--ink);
  font-family: var(--font-terminal);
  font-size: var(--type-body);
  line-height: var(--leading);
  letter-spacing: var(--tracking-body);
}

/* The frame script hands #content the ac-screen classes directly, so it is
   both the org output's root div and the console glass. */
#content.ac-screen {
  min-height: 100vh;
}

.ac-screen__body {
  max-width: 1150px;
  margin: 0 auto;
  padding: var(--space-8) var(--space-6) var(--space-12);
}

@media (max-width: 720px) {
  .ac-screen__body {
    padding: var(--space-6) var(--space-4) var(--space-8);
  }
}

/* ---------------------------------------------------------------------------
   Nav dropdowns — AmberConsole's .ac-nav has no submenu of its own, so the
   category flyouts are a small extension in the same visual language: a
   screen-well panel dropping from the link, framed the way .ac-panel is.
   --------------------------------------------------------------------------- */

.ac-nav__dropdown {
  position: relative;
  display: flex;
  align-items: stretch;
}

.ac-nav__dropdown-menu {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 240px;
  flex-direction: column;
  background: var(--screen-well);
  border: var(--border-w) solid var(--stroke);
  border-top: none;
  padding: var(--space-1);
  z-index: 30;
}

.ac-nav__dropdown:hover .ac-nav__dropdown-menu,
.ac-nav__dropdown:focus-within .ac-nav__dropdown-menu {
  display: flex;
}

.ac-nav__dropdown-menu a {
  display: block;
  padding: var(--space-2) var(--space-3);
  font-family: var(--font-terminal);
  font-size: var(--type-small);
  color: var(--ink-dim);
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: var(--tracking-body);
}

.ac-nav__dropdown-menu a:hover,
.ac-nav__dropdown-menu a:focus-visible {
  color: var(--on-fill);
  background: var(--fill);
  text-shadow: none;
}

/* Inverse-video hover, same shape as the [aria-current="page"] state, so the
   soft key looks lit rather than just outlined. */
.ac-nav__link:hover,
.ac-nav__link:focus-visible {
  background: var(--fill);
  color: var(--on-fill);
  border-color: var(--fill);
  text-shadow: none;
}

/* ---------------------------------------------------------------------------
   Org export output — headings, panels, code, lists, tables.
   --------------------------------------------------------------------------- */

h1.title {
  font-family: var(--font-terminal);
  font-size: var(--type-display);
  line-height: 1.1;
  letter-spacing: var(--tracking-display);
  color: var(--ink-bright);
  text-shadow: var(--glow-text);
  text-transform: uppercase;
  margin: 0 0 var(--space-6);
  padding-bottom: var(--space-3);
  border-bottom: var(--border-w) solid var(--stroke);
}

.subtitle {
  display: block;
  font-family: var(--font-terminal);
  font-size: var(--type-small);
  color: var(--ink-dim);
  letter-spacing: var(--tracking-body);
  margin-top: var(--space-2);
  text-transform: none;
}

h2, h3, h4, h5, h6 {
  font-family: var(--font-terminal);
  color: var(--ink-bright);
  text-shadow: var(--glow-text);
  letter-spacing: var(--tracking-body);
  text-transform: uppercase;
  line-height: 1.2;
  margin: 0 0 var(--space-3);
}

/* Each top-level section reads as a panel: a framed region with a legend
   chip breaking the border, same shape as .ac-panel__title. */
.outline-2 {
  position: relative;
  box-sizing: border-box;
  border: var(--border-w) solid var(--stroke-dim);
  border-radius: var(--radius);
  padding: var(--space-6) var(--space-4) var(--space-4);
  margin: var(--space-8) 0;
}

.outline-2 > h2 {
  position: absolute;
  top: -14px;
  left: 12px;
  padding: 0 var(--space-2);
  background: var(--screen);
  font-size: var(--type-title);
  margin: 0;
}

.outline-2 > h2 a {
  color: inherit;
  text-decoration: none;
}

.outline-text-2 {
  margin-top: var(--space-2);
}

h3 { font-size: var(--type-title); margin-top: var(--space-6); }
h4, h5, h6 { font-size: var(--type-small); margin-top: var(--space-4); }

p {
  margin: 0 0 var(--space-4);
  color: var(--ink);
}

a {
  color: var(--ink-bright);
  text-decoration: underline;
  text-decoration-color: var(--ink-faint);
  text-underline-offset: 3px;
}

a:hover,
a:focus-visible {
  text-shadow: var(--glow-text);
  text-decoration-color: var(--ink-bright);
}

a:focus-visible {
  outline: 2px dashed var(--ink-dim);
  outline-offset: 3px;
}

strong, b { color: var(--ink-bright); }

/* Lists */
ul.org-ul, ol.org-ol {
  padding-left: var(--space-6);
  margin: 0 0 var(--space-4);
}

ul.org-ul { list-style: none; }
ul.org-ul > li::before {
  content: "▸ ";
  color: var(--ink-dim);
}

/* Code */
.org-src-container {
  margin: var(--space-4) 0;
  border: var(--border-w) solid var(--stroke-dim);
  border-radius: var(--radius-sm);
  background: var(--screen-well);
  overflow: hidden;
}

pre.example,
pre.src,
.org-src-container pre {
  margin: 0;
  padding: var(--space-4);
  font-family: var(--font-terminal);
  font-size: var(--type-small);
  line-height: 1.35;
  color: var(--ink);
  background: var(--screen-well);
  overflow-x: auto;
  border: none;
}

pre.example {
  border: var(--border-w) solid var(--stroke-dim);
  border-radius: var(--radius-sm);
}

code {
  font-family: var(--font-terminal);
  font-size: 0.95em;
  color: var(--ink-bright);
  background: var(--screen-well);
  padding: 0 4px;
  border-radius: 2px;
}

pre code { padding: 0; background: none; }

/* Tables */
table {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--font-terminal);
  font-size: var(--type-small);
  margin: var(--space-4) 0;
}

table th {
  text-align: left;
  font-weight: 400;
  text-transform: uppercase;
  font-family: var(--font-micro);
  font-size: var(--type-micro);
  letter-spacing: var(--tracking-micro);
  background: var(--fill);
  color: var(--on-fill);
  padding: 6px 12px;
}

table td {
  padding: 6px 12px;
  color: var(--ink);
  border-bottom: var(--border-w) solid var(--ink-trace);
}

hr {
  border: none;
  border-top: var(--border-w) solid var(--stroke-dim);
  margin: var(--space-8) 0;
}

figure, .figure {
  margin: var(--space-4) 0;
  text-align: center;
}

figure img, .figure img {
  max-width: 100%;
  border: var(--border-w) solid var(--stroke-dim);
}

figure figcaption, .figure-number {
  font-family: var(--font-micro);
  font-size: var(--type-micro);
  color: var(--ink-faint);
  letter-spacing: var(--tracking-micro);
  text-transform: uppercase;
  margin-top: var(--space-2);
}

blockquote {
  margin: var(--space-4) 0;
  padding: var(--space-3) var(--space-4);
  border-left: var(--border-w) solid var(--stroke);
  background: var(--screen-raised);
  color: var(--ink-dim);
}

/* ---------------------------------------------------------------------------
   Projects grid
   --------------------------------------------------------------------------- */

.projects-container {
  margin: var(--space-8) 0;
}

.projects-container > h2 {
  position: static;
  background: none;
  padding: 0;
  margin-bottom: var(--space-4);
}

.project-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--space-4);
}

.project-box {
  display: block;
  position: relative;
  height: 210px;
  text-decoration: none;
  border: var(--border-w) solid var(--stroke-dim);
  border-radius: var(--radius-sm);
  overflow: hidden;
  background-color: var(--screen-raised);
  transition: border-color 0.15s, box-shadow 0.15s;
}

/* The desaturating filter lives on this backing layer, not on .project-box
   itself — a filter on the box would composite the amber overlay and its
   text into the same washed-out pass, killing the contrast between them. */
.project-box::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: inherit;
  background-size: cover;
  background-position: center;
  filter: grayscale(1) contrast(1.05) sepia(0.35);
  transition: filter 0.15s;
}

.project-box:hover,
.project-box:focus-visible {
  border-color: var(--stroke);
  box-shadow: var(--glow-box);
}

.project-box:hover::before,
.project-box:focus-visible::before {
  filter: grayscale(0.4) contrast(1.05) sepia(0.5);
}

.project-overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 1;
  background: var(--fill);
  color: var(--on-fill);
  padding: 10px 14px;
}

.project-title {
  font-family: var(--font-terminal);
  font-size: var(--type-body);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: var(--tracking-body);
  margin: 0;
  /* The generic `p { color: var(--ink) }` rule below directly matches this
     element and would otherwise beat inheriting --on-fill from
     .project-overlay, painting the text the same amber as its background. */
  color: inherit;
}

/* font-terminal/type-small rather than the Silkscreen micro face — Silkscreen
   is sized for 8-10px badge labels, not readable descriptive copy. */
.project-desc {
  font-family: var(--font-terminal);
  font-size: var(--type-small);
  letter-spacing: var(--tracking-body);
  margin: 4px 0 0;
  opacity: 0.85;
  color: inherit;
}

@media (max-width: 480px) {
  h1.title { font-size: var(--type-title); }
}