/* ==========================================================================
   LCARS-INSPIRED FRAMEWORK — subtle edition
   Structure: .frame is a grid (topbar / rail / well).
   The signature is the "elbow" — the curve where the top bar
   sweeps into the left rail, built from one div + one pseudo-element.
   Everything is driven by the custom properties below, so retheming
   or toning it down further is a one-block edit.
   ========================================================================== */

:root {
  /* Palette — classic panel colors, used sparingly */
  --ink:        #030304;   /* page background */
  --panel:      #0d0d11;   /* slightly lifted surfaces */
  --text:       #e8e4da;   /* warm off-white body text */
  --text-dim:   #8d897f;

  --orange:     #ff9c00;
  --peach:      #ffcc99;
  --lavender:   #cf9fff;
  --salmon:     #e07a66;
  --tan:        #f2c14e;
  --blue:       #4995a1;		

  /* Geometry
     The topbar strip is --elbow-r tall. The bar itself is --bar-h tall
     and hugs the BOTTOM of that strip, so the space above the bar
     (--elbow-r minus --bar-h) is what gets carved out to form the
     inner curve of the elbow. */
  --bar-h:      44px;      /* thickness of the horizontal bar */
  --rail-w:     170px;     /* left rail width — nav buttons AND the
                              elbow's vertical arm both use this, so
                              they stay flush automatically */
  --elbow-r:    72px;      /* total height of the topbar strip, and the
                              outer corner radius of the elbow */
  --notch:      calc(var(--elbow-r) - var(--bar-h));
                           /* height of the carved region above the bar
                              (72 - 44 = 28px) — also used as the inner
                              curve radius */
  --gap:        6px;       /* the black gutter between blocks */
  --pill-r:     999px;

  /* Type */
  --display: "Antonio", "Arial Narrow", sans-serif;
  --body: system-ui, -apple-system, "Segoe UI", sans-serif;
}

/* ---------- Reset-ish ---------- */
* { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { transition: none !important; animation: none !important; }
}

body {
  background: var(--ink);
  color: var(--text);
  font-family: var(--body);
  font-size: 1rem;
  line-height: 1.65;
  min-height: 100vh;
}

a { color: var(--peach); }
a:focus-visible,
button:focus-visible {
  outline: 2px solid var(--lavender);
  outline-offset: 3px;
}

/* ==========================================================================
   FRAME GRID
   ========================================================================== */
.frame {
  display: grid;
  grid-template-columns: var(--rail-w) 1fr;
  grid-template-rows: auto 1fr;
  grid-template-areas:
    "topbar topbar"
    "rail   well";
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
  min-height: 100vh;
}

/* ==========================================================================
   TOP BAR + ELBOW
   ========================================================================== */
.topbar {
  grid-area: topbar;
  display: flex;
  align-items: stretch;
  height: var(--elbow-r);   /* full strip height; bar runs along its TOP --bar-h */
}

/* The elbow is just a solid orange rectangle with one corner painted
   over. Start with the full block:

     width  = --rail-w + --elbow-r   (vertical arm + horizontal arm stub)
     height = --elbow-r              (full strip height)
     top-left corner rounded         (the big outer sweep)

   Then ::after paints an ink-colored rectangle over the BOTTOM-RIGHT
   region — everything to the right of --rail-w and below the bar.
   What's left is the L shape: bar along the top, column dropping down.
   Giving that ink patch a top-left radius creates the concave inner
   curve tucked under the bar.

        0        rail-w
        ◜────────────────────────  ← the bar (top --bar-h, continues right)
        │████████╭ ─ ─ ─ ─ ─ ─ ─   ← inner curve; ink carved below the bar
        │ ELBOW █│   (::after, --notch tall)
        ├────────┤
        │  nav   │  ← buttons share --rail-w, so edges stay flush
*/
.elbow {
  position: relative;
  width: calc(var(--rail-w) + var(--elbow-r));
  background: var(--orange);
  border-top-left-radius: var(--elbow-r);
  flex-shrink: 0;
}
.elbow::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: var(--rail-w);   /* carve starts exactly where the rail ends */
  right: 0;
  height: var(--notch);  /* everything below the bar */
  background: var(--ink);
  border-top-left-radius: var(--notch);
}

/* The horizontal track continuing to the right of the elbow */
.topbar-track {
  display: flex;
  align-items: center;
  gap: var(--gap);
  flex: 1;
  margin-left: var(--gap);
}

.topbar-title {
  font-family: var(--display);
  font-size: 3rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--orange);
  background: var(--ink);
  align-self: flex-start;   /* bar runs along the top of the strip */
  height: var(--bar-h);
  display: flex;
  align-items: center;
  padding-right: 14px;
  padding-left: 10px;
  white-space: nowrap;
}
.topbar-title .dim {
  color: var(--text-dim);
  font-weight: 300;
}

/* Colored end-caps on the bar, pure decoration */
.cap {
  align-self: flex-start;   /* bar runs along the top of the strip */
  height: var(--bar-h);
  border-radius: var(--pill-r);
}
.cap-orange   { background: var(--orange);   flex: 1; min-width: 40px; }
.cap-lavender { background: var(--lavender); width: 70px; border-top-right-radius: var(--pill-r); border-bottom-right-radius: var(--pill-r); }

.index-code {
  align-self: flex-start;   /* bar runs along the top of the strip */
  height: var(--bar-h);
  display: flex;
  align-items: center;
  font-family: var(--display);
  font-weight: 300;
  letter-spacing: 0.12em;
  color: var(--text-dim);
  padding: 0 10px;
}

/* ==========================================================================
   LEFT RAIL
   ========================================================================== */
.rail {
  grid-area: rail;
  display: flex;
  flex-direction: column;
  gap: var(--gap);
  padding-top: var(--gap);
}

.rail-block {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  min-height: 52px;
  padding: 0 16px;
  border-radius: 0;
  font-family: var(--display);
  font-weight: 600;
  font-size: 0.95rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  text-decoration: none;
  color: var(--ink);
  transition: filter 120ms ease, transform 120ms ease;
}
.rail-block:hover  { filter: brightness(1.18); }
.rail-block:active { transform: translateX(2px); }

.b-peach    { background: var(--peach); }
.b-lavender { background: var(--lavender); }
.b-orange   { background: var(--orange); }
.b-salmon   { background: var(--salmon); }
.b-tan      { background: var(--tan); }
.b-blue     { background: var(--blue); }

/* Filler block that runs to the bottom, rounded off at its foot */
.rail-fill {
  flex: 1;
  min-height: 80px;
  background: var(--panel);
  border-bottom-left-radius: var(--elbow-r);
}

/* ==========================================================================
   CONTENT WELL
   ========================================================================== */
.well {
  grid-area: well;
  padding: 28px 8px 28px 32px;
  max-width: 72ch;
}

.panel { margin-bottom: 56px; }

.panel-title {
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: var(--display);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--peach);
  margin-bottom: 14px;
}
h1.panel-title { font-size: clamp(1.6rem, 4vw, 2.4rem); }
h2.panel-title { font-size: clamp(1.2rem, 3vw, 1.6rem); }

/* Small pill "tick" before each heading */
.tick {
  width: 26px;
  height: 12px;
  border-radius: var(--pill-r);
  background: var(--salmon);
  flex-shrink: 0;
}
section:nth-of-type(even) .tick { background: var(--lavender); }

.panel p { margin-bottom: 1em; color: var(--text); }

/* ---------- Pills (buttons/links) ---------- */
.pill-row { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 6px; }

.pill {
  display: inline-flex;
  align-items: center;
  padding: 9px 22px;
  border-radius: var(--pill-r);
  background: var(--orange);
  color: var(--ink);
  font-family: var(--display);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 0.9rem;
  text-decoration: none;
  transition: filter 120ms ease;
}
.pill:hover { filter: brightness(1.15); }
.pill-alt { background: var(--lavender); }

/* ---------- Cards ---------- */
.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 14px;
}

.card {
  background: var(--panel);
  border-left: 5px solid var(--tan);
  border-radius: 0 18px 18px 0;
  padding: 16px 18px;
}
.card:nth-child(2) { border-left-color: var(--lavender); }
.card:nth-child(3) { border-left-color: var(--salmon); }

.card h3 {
  font-family: var(--display);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--tan);
  margin-bottom: 6px;
  font-size: 1.05rem;
}
.card:nth-child(2) h3 { color: var(--lavender); }
.card:nth-child(3) h3 { color: var(--salmon); }
.card p { font-size: 0.92rem; color: var(--text-dim); margin: 0; }

/* ---------- Footer ---------- */
.foot {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 20px;
}
.foot-bar {
  flex: 1;
  height: 10px;
  border-radius: var(--pill-r);
  background: var(--panel);
}
.foot-text {
  font-family: var(--display);
  font-weight: 300;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-size: 0.8rem;
  color: var(--text-dim);
  white-space: nowrap;
}

/* ==========================================================================
   RESPONSIVE — rail collapses to a horizontal strip, elbow hides
   ========================================================================== */
@media (max-width: 720px) {
  .frame {
    grid-template-columns: 1fr;
    grid-template-areas:
      "topbar"
      "rail"
      "well";
    padding: 12px;
  }

  .elbow { display: none; }
  .topbar { height: var(--bar-h); }
  .topbar-track { margin-left: 0; }
  .index-code { display: none; }

  .rail {
    flex-direction: row;
    flex-wrap: wrap;
    padding-top: var(--gap);
  }
  .rail-block {
    flex: 1 1 auto;
    justify-content: center;
    min-height: 42px;
    border-radius: var(--pill-r);
    font-size: 0.85rem;
  }
  .rail-fill { display: none; }

  .well { padding: 24px 4px; }
}