/* Amalgative Reference Site Alignment CSS */

:root {
  /* Default: Dark Theme */
  --bg-color: #000000;
  --text-color: #ffffff;
  --text-muted: #808080;
  --border-color: #1c1c1c;
  --red: #ff3333;
}

/* Light Theme overrides via .white class matching reference site */
html.white {
  --bg-color: #ffffff;
  --text-color: #000000;
  --text-muted: #666666;
  --border-color: #e6e6e6;
}

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

/* Helper Classes for Responsive Display */
.desktop-only {
  display: block;
}
.mobile-only {
  display: none !important;
}

body {
  background-color: var(--bg-color);
  color: var(--text-color);
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  line-height: 1.6;
  transition: background-color 0.35s ease-in-out, color 0.35s ease-in-out;
  overflow-x: hidden;
  padding: 0 25px;
}

@media (max-width: 860px) {
  body {
    padding: 0 20px;
  }
}

@media (min-width: 861px) {
  html, body {
    height: 100vh;
    overflow: hidden;
  }
}

/* Base Headings */
h1, h2, h3 {
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  font-weight: 700;
  margin: 0;
  letter-spacing: -0.02em;
}

/* Split Pane Grid Layout */
.page_main__WunS6 {
  display: flex;
  flex-direction: row;
  max-width: 1200px;
  margin: 0 auto;
  min-height: 100vh;
}

/* Left Pane (Logo, Info, Locations) */
.page_iz__I2fEm {
  width: 50%;
  height: calc(100vh - 50px);
  padding-top: 25px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  position: sticky;
  top: 25px;
}

.page_iz__I2fEm h1 {
  font-size: 48px;
  text-transform: uppercase;
  letter-spacing: -0.04em;
  color: var(--text-color);
}

.page_tagline p {
  margin: 0;
  font-size: 14px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  line-height: 1.8;
}

/* Blinking dot matching reference */
.page_dot__pwfYv {
  display: block;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background-color: var(--red);
  margin-right: 10px;
  animation: page_blink__hM5K3 0.6s ease-in-out infinite forwards;
}

@keyframes page_blink__hM5K3 {
  0% { opacity: 1; }
  50% { opacity: 0.2; }
  100% { opacity: 1; }
}

/* Right Pane (Top Nav, About, Work) */
.page_de__eP04q {
  width: 50%;
  height: 100vh;
  padding-top: 0;
  padding-left: 25px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* Scrollable Content Container inside Right Pane */
.page_content {
  flex: 1;
  overflow-y: scroll;
  scrollbar-width: none; /* Firefox */
  margin-top: 30px;
}

.page_content::-webkit-scrollbar {
  width: 0; /* Chrome/Safari */
}

/* Right Column Top Navigation Bar */
.page_de__eP04q .page_top__nLjCI {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: var(--bg-color);
  padding-top: 65px; /* Vertically align Contact text and toggle with logo */
  padding-bottom: 20px;
  z-index: 1001;
  transition: background-color 0.35s ease-in-out;
}

.page_contact__5v1kr {
  display: block;
  text-transform: uppercase;
  font-weight: 700;
  text-decoration: none;
  color: var(--text-color);
  font-size: 13px;
  letter-spacing: 0.08em;
  transition: opacity 0.2s ease;
}

.page_contact__5v1kr:hover {
  opacity: 0.8;
}

/* Theme Switcher Button exactly from reference spec */
.theme_button__kOagB {
  position: relative;
  width: 50px;
  height: 20px;
  background-color: #303030;
  border-radius: 18px;
  cursor: pointer;
  border: 1px solid transparent;
  transition: all 0.35s ease-in-out;
  outline: none;
}

.theme_ball__AhjOj {
  position: absolute;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background-color: #ffffff;
  top: 4px;
  right: 6px;
  transition: all 0.35s ease-in-out;
}

html.white .theme_button__kOagB {
  background-color: transparent;
  border-color: #303030;
}

html.white .theme_ball__AhjOj {
  right: 34px;
  background-color: #303030;
}

/* About Section list formatting */
.page_about__gX8HI {
  margin-bottom: 80px;
}

.page_about__gX8HI h2 {
  font-size: 18px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: 30px;
}

.page_about__gX8HI ul {
  margin-top: 30px;
  padding: 0;
  list-style: none;
}

.page_item__l0zWQ {
  display: flex;
  margin-bottom: 50px;
  font-size: 13px;
  line-height: 1.75;
}

.page_item__l0zWQ:last-child {
  margin-bottom: 0;
}

.page_item__l0zWQ span {
  display: block;
  width: 80px;
  min-width: 60px;
  font-weight: 700;
  color: var(--text-muted);
  margin-right: 10px;
}

.page_item__l0zWQ p {
  margin: 0;
  width: fit-content;
  text-transform: uppercase;
  font-weight: 500;
  letter-spacing: 0.03em;
}

.page_item__l0zWQ p strong {
  font-weight: 700;
}

/* Work (Press) Section 2-Column list */
.page_press__0Xh_M {
  margin-bottom: 80px;
}

.page_press__0Xh_M h2 {
  font-size: 18px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: 30px;
}

.page_press__0Xh_M ul {
  padding: 0;
  margin: 0;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  column-gap: 40px;
  row-gap: 24px;
}

.page_press__0Xh_M ul li {
  break-inside: avoid;
}

.page_press__0Xh_M ul li a {
  display: flex;
  color: inherit;
  text-decoration: none;
  font-size: 13px;
  align-items: baseline;
}

.page_press__0Xh_M ul li a:hover h3 {
  text-decoration: underline;
}

.page_press__0Xh_M ul li a .page_date__by0Ng {
  display: block;
  margin-right: 10px;
  max-width: 100px;
  min-width: 60px;
  color: var(--text-muted);
  font-weight: 500;
}

.page_press__0Xh_M ul li a h3 {
  font-size: 13px;
  font-weight: 700;
  margin: 0;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

/* Global Site Footer Styles */
footer.site-footer {
  position: fixed;
  bottom: 25px; /* 1/4" bottom margin */
  left: max(25px, calc((100vw - 1200px) / 2)); /* Stay left-aligned with logo area under all screen widths */
  padding: 0;
  z-index: 10;
  pointer-events: none;
  color: var(--text-muted);
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 500;
}

footer.site-footer span {
  font-weight: 700;
}

footer.site-footer ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

footer.site-footer ul li {
  display: flex;
  align-items: center;
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.08em;
  margin-bottom: 3.4px;
}

footer.site-footer ul li:last-child {
  margin-bottom: 0;
}

/* ⚠ The year is its own thought. It used to get its air from a hand-written
   `style="margin-top: 25px"` on the <li>, which went when the list it lived in
   was split. */
footer.site-footer ul.footer-links + ul .page_year { margin-top: 18px; }

/* Scroll Entry Reveal Animations */
@media (prefers-reduced-motion: no-preference) {
  @supports ((animation-timeline: view()) and (animation-range: entry)) {
    @keyframes reveal-in {
      from {
        opacity: 0;
        transform: translateY(20px);
      }
      to {
        opacity: 1;
        transform: translateY(0);
      }
    }

    .entry-effect {
      opacity: 1;
      transform: translateY(0);
      transition: none;
      animation: reveal-in auto linear backwards;
      animation-timeline: view();
      animation-range: entry 0% entry 30%;
    }
  }
}

/* Fallback transitions when not supported natively */
@supports not ((animation-timeline: view()) and (animation-range: entry)) {
  .entry-effect {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1), transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
  }
  
  .entry-effect.in-view {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Responsive Overrides (under 860px width matches reference) */
@media (max-width: 860px) {
  .page_main__WunS6 {
    flex-direction: column;
  }
  
  .page_iz__I2fEm {
    width: 100%;
    height: auto;
    justify-content: flex-start;
    padding-top: 25px;
    position: static;
  }
  
  .page_iz__I2fEm h1 {
    font-size: 48px;
  }
  
  .page_de__eP04q {
    width: 100%;
    height: auto;
    overflow: visible;
    padding-top: 0;
    padding-left: 0;
    padding-bottom: 0;
  }
  
  .page_content {
    overflow-y: visible;
    height: auto;
    margin-top: 0;
  }
  
  /* Mobile fixed bottom navigation panel matching inspiration */
  .page_de__eP04q .page_top__nLjCI {
    position: fixed;
    width: 100%;
    height: 70px;
    bottom: 0;
    left: 0;
    margin-bottom: 0;
    padding: 15px 25px;
    background-color: var(--bg-color);
    border-top: 1px solid var(--border-color);
    z-index: 100;
    display: flex;
    align-items: center;
    justify-content: space-between;
    transition: background-color 0.35s ease-in-out, border-color 0.35s ease-in-out;
  }
  
  html.white .page_top__nLjCI {
    background-color: #ffffff;
  }
  
  .theme_button__kOagB {
    position: relative;
    right: 0;
    top: auto;
  }
  
  .page_contact__5v1kr {
    padding-top: 0;
  }
  
  .page_press__0Xh_M {
    margin-bottom: 80px;
  }

  .page_press__0Xh_M ul {
    grid-template-columns: 1fr;
  }

  .desktop-only {
    display: none !important;
  }

  .mobile-only {
    display: block !important;
  }

  .mobile-top-info {
    display: flex !important;
    justify-content: space-between;
    align-items: flex-start;
    width: 100%;
    margin-top: 25px;
    margin-bottom: 25px;
  }

  .mobile-locations {
    list-style: none;
    padding: 0;
    margin: 0;
    text-align: right;
  }

  .mobile-locations li {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    font-weight: 700;
    font-size: 13px;
    letter-spacing: 0.08em;
    margin-bottom: 3.4px;
    text-transform: uppercase;
  }

  .mobile-locations li:last-child {
    margin-bottom: 0;
  }

  .mobile-locations li .page_dot__pwfYv {
    margin-right: 0;
    margin-left: 10px;
  }

  footer.site-footer {
    position: static;
    padding: 0 0 95px 0;
    width: 100%;
    pointer-events: auto;
  }
}

/* ── Areas ─────────────────────────────────────────────────────────────────
   The three things Amalgative does, as the front page's index.

   Deliberately the SAME shape as the About rows above: a muted fixed-width
   number, then the name. Three lines in the existing type scale rather than
   three cards — the page's value is that it says one thing quietly, and the
   moment there is a product to sell is exactly when that gets abandoned. */

.page_areas {
  margin-bottom: 80px;
}

.page_areas h2 {
  font-size: 18px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: 30px;
}

.page_areas ul {
  margin-top: 30px;
  padding: 0;
  list-style: none;
}

.page_area {
  display: flex;
  margin-bottom: 34px;
  font-size: 13px;
  line-height: 1.75;
}

.page_area:last-child {
  margin-bottom: 0;
}

/* Matches .page_item__l0zWQ span exactly, so the numbers line up down the page. */
.page_area > span {
  display: block;
  width: 80px;
  min-width: 60px;
  font-weight: 700;
  color: var(--text-muted);
  margin-right: 10px;
}

.page_area_link {
  color: inherit;
  text-decoration: none;
  text-transform: uppercase;
  font-weight: 700;
  letter-spacing: 0.03em;
}

.page_area_link:hover {
  text-decoration: underline;
}

/* The three products, under Software. Indented to the parent's text, not to a
   new column — they are a continuation of that line, not a second list. */
.page_area_sub {
  margin: 8px 0 0;
  padding: 0;
  list-style: none;
}

.page_area_sub li {
  margin-bottom: 4px;
}

.page_area_sub a {
  color: var(--text-muted);
  text-decoration: none;
  text-transform: uppercase;
  font-weight: 500;
  letter-spacing: 0.03em;
}

.page_area_sub a:hover {
  color: var(--text-color);
  text-decoration: underline;
}

/* ⚠ The only place the front page says "beta", and it stays small on purpose.
   A banner would make the whole site about the beta; a marker beside each
   product tells a visitor what they are about to download. */
.page_area_sub em {
  font-style: normal;
  font-size: 10px;
  letter-spacing: 0.08em;
  color: var(--text-muted);
  border: 1px solid var(--border-color);
  border-radius: 2px;
  padding: 1px 4px;
  margin-left: 6px;
  vertical-align: 1px;
}

/* Interior-page prose. The front page is a list; the pages behind it need a
   readable paragraph, so this is the one place the measure is constrained. */
.page_prose {
  font-size: 13px;
  line-height: 1.75;
  max-width: 56ch;
  margin: 0 0 16px;
}

.page_prose a {
  color: inherit;
}

.logo-area h1 a {
  color: inherit;
  text-decoration: none;
}

.page_muted { color: var(--text-muted); }

.page_downloads {
  list-style: none;
  padding: 0;
  margin: 12px 0 0;
  font-size: 13px;
}
.page_downloads li { margin-bottom: 6px; }
.page_downloads a {
  color: inherit;
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  font-weight: 500;
  border-bottom: 1px solid var(--border-color);
}
.page_downloads a:hover { border-bottom-color: currentColor; }

/* ── The agreements ────────────────────────────────────────────────────────
   A legal document is meant to be READ, so this is the one place on the site
   with a constrained measure and ordinary sentence case. */
.page_legal { font-size: 13px; line-height: 1.7; max-width: 68ch; }
.page_legal h2 { font-size: 15px; margin: 28px 0 10px; text-transform: none; letter-spacing: 0; }
.page_legal h3 { font-size: 13px; margin: 20px 0 8px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-muted); }
.page_legal h4 { font-size: 13px; margin: 16px 0 6px; }
.page_legal p { margin: 0 0 12px; }
.page_legal ol, .page_legal ul { margin: 0 0 12px; padding-left: 22px; }
.page_legal li { margin-bottom: 5px; }
.page_legal hr { border: 0; border-top: 1px solid var(--border-color); margin: 22px 0; }
.page_legal code { font-size: 12px; }

/* ⚠ Separated from the tagline and the locations below it. Without the rule and
   the spacing these read as one five-item list, because they share a size and a
   colour with everything else in the footer. */
/**
 * ⚠⚠ SPECIFICITY, not order. The first attempt used `.footer-links` (0,1,0) and
 * `footer.site-footer ul` (0,1,2) beat it — the margin stayed 0 and the links
 * kept the locations' 13px/700, which is exactly why they read as one list with
 * PORTLAND and SEATTLE. Matching the existing selector's shape is what makes
 * these rules apply at all.
 *
 * ⚠ Separated by SPACE, not a rule: --border-color is #1c1c1c, and a divider
 * that cannot be seen against a black page is not a divider.
 */
footer.site-footer ul.footer-links {
  list-style: none;
  padding: 0;
  /* ⚠ The gap points UP, not down. These links sat at the TOP of the footer
     until 2026-08-18 and carried a 34px bottom margin to separate themselves
     from the tagline below. Moving them beneath the locations left the margin
     pointing the wrong way: LEGAL rendered 10px under SEATTLE, reading as a
     fourth location, and the space it did reserve fell between PRIVACY and the
     year, which are the two lines that belong together. */
  margin: 25px 0 0;
}

footer.site-footer ul.footer-links li {
  display: block;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.06em;
  margin-bottom: 5px;
}

/**
 * ⚠⚠ `pointer-events: auto`, because the footer sets `none`.
 *
 * `footer.site-footer` is `position: fixed` with `pointer-events: none` so the
 * fixed block does not swallow clicks meant for the content behind it. That was
 * correct while the footer was text only — and it silently made these links
 * unclickable the moment they were added. They LOOKED like links, hovered like
 * nothing, and did nothing.
 *
 * ⚠ Only the anchors get it back, not the whole footer: the rest of the footer
 * must stay click-through, which is what the original rule is for.
 */
footer.site-footer ul.footer-links a {
  pointer-events: auto;
  color: var(--text-muted);
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
footer.site-footer ul.footer-links a:hover { color: var(--text-color); }

/* ── Acknowledgements ──────────────────────────────────────────────────────
   Grouped by shared licence text: identical text means the same copyright
   holder, so listing it once with the packages it covers is what attribution
   actually asks for — and it is why this page is 600 KB rather than 3.2 MB. */
.ack-list { font-size: 13px; }
.ack-row { border-bottom: 1px solid var(--border-color); padding: 8px 0; }
.ack-row:last-child { border-bottom: 0; }
.ack-row summary { cursor: pointer; list-style-position: outside; }
.ack-row summary::marker { color: var(--text-muted); }
.ack-ver, .ack-lic { color: var(--text-muted); font-size: 11px; }
.ack-pkgs { list-style: none; padding: 0; margin: 10px 0; }
.ack-pkgs li { margin-bottom: 3px; font-size: 12px; }
.ack-row pre {
  margin: 10px 0 4px;
  padding: 12px;
  max-height: 340px;
  overflow: auto;
  background: var(--border-color);
  border-radius: 3px;
  font-size: 11px;
  line-height: 1.5;
  white-space: pre-wrap;
}
.ack-plain p { margin: 0 0 6px; }

/* ── Signup ────────────────────────────────────────────────────────────────
   Optional, beside the download — never in front of it. */
.signup { display: flex; flex-direction: column; gap: 10px; max-width: 34ch; margin-top: 14px; }
.signup label { display: flex; flex-direction: column; gap: 4px; font-size: 12px; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-muted); }
/* The caption span carries the whole label text; the nested muted span is
   ordinary inline content inside it. */
.signup label > span { display: block; }
.signup input {
  padding: 7px 9px;
  background: var(--bg-color);
  color: var(--text-color);
  border: 1px solid var(--border-color);
  border-radius: 3px;
  font: inherit;
  font-size: 13px;
  text-transform: none;
  letter-spacing: 0;
}
.signup input:focus { outline: 1px solid var(--text-muted); outline-offset: -1px; }
.signup button {
  align-self: flex-start;
  padding: 8px 16px;
  background: var(--text-color);
  color: var(--bg-color);
  border: 0;
  border-radius: 3px;
  font: inherit;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  cursor: pointer;
}
.signup button:hover { opacity: 0.85; }
.signup-note { max-width: none; font-size: 11px; line-height: 1.6; }
.signup-note a { color: inherit; }

/* ⚠ Off-screen rather than display:none — some bots skip hidden fields, and a
   honeypot they skip is a honeypot that catches nothing. */
.signup-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* The Beta marker outside the front page's sub-list. Same shape as
   .page_area_sub em, which is scoped to that list. */
.page_beta {
  font-style: normal;
  font-size: 10px;
  letter-spacing: 0.08em;
  color: var(--text-muted);
  border: 1px solid var(--border-color);
  border-radius: 2px;
  padding: 1px 4px;
  margin-left: 6px;
  vertical-align: 1px;
  text-transform: uppercase;
}

/* A description under a row keeps the row's left edge, not the number's. */
.page_area .page_prose { margin-top: 8px; max-width: 52ch; }

/* ── Primary download ────────────────────────────────────────────────────────
   The build we guessed at, promoted to one button. Borrows the launch-button
   shape the Tatami Stack page already uses so the site has one CTA, not two. */
.download-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-top: 14px;
  padding: 15px 35px;
  border: 1px solid var(--text-color);
  color: var(--text-color);
  text-decoration: none;
  font-weight: 700;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  transition: background-color 0.3s ease, color 0.3s ease;
}
.download-primary:hover {
  background-color: var(--text-color);
  color: var(--bg-color);
}
/* The web version's launch button (product pages) — the same button, arrow as on
   the Tatami Stack page. */
.web-launch-arrow { margin-left: 10px; font-size: 14px; }
.web-launch + .page_prose { margin-top: 10px; }
/* ⚠ The guess is stated, not implied. A visitor whose platform we read wrongly
   has to be able to see that we guessed before they can distrust the button. */
.download-detected {
  margin-top: 10px;
  font-size: 12px;
}
/* ⚠ The alternatives are never behind a toggle — see index.js. This only stops
   them competing with the button above them. */
.download-primary + .download-detected + .page_downloads { margin-top: 4px; }

/* ── Product page: the wide layout ───────────────────────────────────────────
   ⚠⚠ The site's default is a 50/50 split pane, and a product page deliberately
   is not. Its most valuable element is a picture of the application, and an
   interface rendered into half of a 1200px measure is legible as a shape and
   useless as a screenshot. So the banner runs the full viewport and what
   follows splits into what-it-is and what-to-do-about-it. */
.page_wide {
  max-width: 1200px;
  margin: 0 auto;
  padding: 25px 0 60px;
  min-height: 100vh;
}

/* Logo and the top nav on one row, since there is no left column to hold them. */
.wide_top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 25px;
  margin-bottom: 40px;
}
.wide_top .logo-area h1 {
  font-size: 48px;
  text-transform: uppercase;
  letter-spacing: -0.04em;
  color: var(--text-color);
  margin: 0;
}
/* ⚠ The nav is `page_top__nLjCI`, which the split-pane layout gives its own
   margins. Reset them here rather than editing the shared rule — that one is
   still doing its job on every other page. */
.page_wide .page_top__nLjCI {
  margin: 0;
  padding-top: 10px;
  gap: 30px;
  display: flex;
  align-items: center;
}

/* ⚠⚠ Full-bleed out of a centred max-width container. `100vw` plus a negative
   margin of half the difference is the one technique that does not require the
   element to leave the flow — and leaving the flow would drop it out of the
   document order screen readers follow. */
/* ⚠⚠ `width: auto` with BOTH margins negative, not `width: 100vw`.
   `100vw` includes the scrollbar gutter, so on any page tall enough to scroll
   the banner is ~15px wider than the viewport and the whole document gains a
   horizontal scrollbar. Measured: scrollWidth 820 against clientWidth 785.
   Negative margins on an auto-width block stretch it to the same edges without
   ever naming a width. */
.product-banner {
  width: auto;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  margin-bottom: 60px;
  border-top: 1px solid var(--border-color);
  border-bottom: 1px solid var(--border-color);
  overflow: hidden;
  transition: border-color 0.35s ease;
}
.product-banner img {
  width: 100%;
  height: auto;
  display: block;
  /* ⚠ Capped so a 2000px-tall capture does not fill three screens before the
     reader reaches a word about the product. `cover` crops the bottom status
     bar rather than the toolbars, which is the right half to lose. */
  max-height: 70vh;
  object-fit: cover;
  object-position: top center;
}

.wide_split {
  display: flex;
  gap: 60px;
  align-items: flex-start;
}
/* ⚠ Not 50/50. The left column is prose and wants a readable measure; the right
   is a button, a form and three links and does not. */
.wide_col--main { flex: 1 1 58%; min-width: 0; }
.wide_col--side { flex: 1 1 42%; min-width: 0; position: sticky; top: 25px; }

/* ⚠⚠ The footer is `position: fixed` bottom-left, which works only because the
   split pane leaves that corner empty. A wide page has content there, so it
   becomes an ordinary block at the end of the document. */
/* ⚠ `clip`, not `hidden`. `hidden` makes the body a scroll container, which
   silently kills `position: sticky` on the side column; `clip` does not. Where
   it is unsupported the result is today's behaviour, not something worse. */
/* ⚠⚠ Undo the split pane's `height: 100vh; overflow: hidden` for wide pages.
   That rule (above 861px) is what stops the PAGE scrolling so the right pane
   can scroll instead — correct there, fatal here: a wide page is ordinary flow,
   so it was clipped at one screen and nothing below the hero was reachable.

   ⚠ Both elements. `html` is the scroll container; overriding `body` alone
   leaves the clip in place one level up.

   ⚠ `overflow-x: clip` still holds the full-bleed banner in, and pairing it
   with `overflow-y: auto` is deliberate — a `visible` y-axis beside a clipped
   x-axis computes to `auto` anyway, so saying it outright is the honest form. */
html.wide,
html.wide body {
  height: auto;
  overflow-y: auto;
}
html.wide body { overflow-x: clip; }
body.wide { overflow-x: clip; }

body.wide footer.site-footer {
  position: static;
  margin: 80px auto 0;
  max-width: 1200px;
  pointer-events: auto;
}

.product-features {
  margin: 0;
  font-size: 13px;
  line-height: 1.7;
}
.product-features dt {
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-weight: 700;
  margin-top: 18px;
}
.product-features dt:first-child { margin-top: 0; }
.product-features dd {
  margin: 4px 0 0;
  opacity: 0.8;
}

@media (max-width: 860px) {
  .page_wide { padding: 25px 25px 95px; }
  .wide_top { flex-direction: column; gap: 0; margin-bottom: 25px; }
  /* ⚠⚠ The SAME calc as desktop, not a hand-cancelled -25px. The container's
     own padding is 25px here, but `body` carries padding of its own, so
     cancelling one of the two left the banner inset by 20px while the rule
     claimed it was full-bleed. `calc(50% - 50vw)` escapes every ancestor's
     padding at once because it is measured from the viewport, not from a
     number somebody wrote down. */
  .product-banner {
    margin-bottom: 35px;
    max-height: none;
  }
  .product-banner img { max-height: 45vh; }
  .wide_split { flex-direction: column; gap: 0; }
  .wide_col--side { position: static; }
  body.wide footer.site-footer { margin-top: 50px; padding: 0 0 95px; }
}

/* ⚠ The links after the list are a separate thought, not the last definition's
   second line. Without this they read as part of it. */
.product-features + .page_prose { margin-top: 24px; }

/* ── Product marks ───────────────────────────────────────────────────────────
   The application's own icon, on the pages that are about that application.
   ⚠ Deliberately small. The mark identifies; the screenshot sells. A large one
   competes with the banner directly above it. */
.product-mark {
  margin-bottom: 18px;
}
.product-mark img {
  display: block;
  width: 56px;
  height: 56px;
  border-radius: 12px;
}
/* ⚠ `alt=""` on both: the product name is right beside them in text, so a
   screen reader announcing the mark as well would read the name twice. */
.page_area_mark {
  width: 28px;
  height: 28px;
  border-radius: 6px;
  vertical-align: -8px;
  margin-right: 12px;
}

/* ── lukerose.me additions ───────────────────────────────────────────────────
   Everything above this line is amalgative.com's index.css, copied as the
   visual baseline (owner, 2026-09-15). Keep site-specific rules down here so
   the shared part stays diffable against its source. */

/* Under Work, the project carries the emphasis and the firm recedes.
   ⚠ var(--text-color), NOT a literal #fff: it is white on the dark theme and
   BLACK on the light one. Hard-coding white here would leave the project names
   invisible for anyone who hits the theme toggle. */
/* Every link in a sub-list — projects under Work, Amalgative under Links —
   carries the emphasis; only the firm beside a project recedes.
   ⚠ var(--text-color), NOT a literal #fff: it is white on the dark theme and
   BLACK on the light one. Hard-coding white would leave these invisible to
   anyone who uses the theme toggle. */
.page_area_sub a {
  color: var(--text-color);
}

/* The firm a project was built with, beside the project name. NOT .page_area_sub
   em — that is the beta pill, a bordered box sized for one short word. */
.page_area_sub .page_muted {
  margin-left: 8px;
  font-size: 11px;
  letter-spacing: 0.03em;
  text-transform: none;
}

/* Space between the locations and the year line in the footer.
   ⚠ index.css already has `ul.footer-links + ul .page_year { margin-top: 18px }`,
   but that rule needs a Legal/Privacy list sitting BETWEEN the two — and this
   site has none, so it never matched and SEATTLE ran straight into the year.
   Same 18px, keyed on "any list followed by the year" instead. */
footer.site-footer ul + ul .page_year {
  margin-top: 18px;
}

/* The About copy set in caps (owner, 2026-09-15).
   ⚠ Scoped to the About paragraph, NOT every .page_prose: the line under it is
   his email address, and an uppercased address is harder to read and no longer
   looks like an address.
   ⚠ Caps need the extra tracking. Set at the body size with normal spacing the
   letters jam together, which is why every other uppercase element here
   (nav, area titles, locations) already carries letter-spacing. */
.page_about_text {
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

/* ── Work as two aligned columns ─────────────────────────────────────────────
   Project names down one left edge, firms down another, rather than each firm
   starting wherever its project name happened to end.

   ⚠ `max-content` on the first column, NOT a hand-measured width. A grid column
   is shared by every row, so it sizes itself to the longest project name and
   stays correct when a project is added or renamed. A fixed em width would be
   one rename away from clipping.

   ⚠ subgrid is what lets each <li> keep being a box — its two children line up
   on the parent's columns. The @supports fallback uses `display: contents`,
   which achieves the same alignment by removing the li box entirely; that costs
   list semantics in some older browsers, which is why it is the fallback and
   not the primary. */
#work .page_area_sub {
  display: grid;
  grid-template-columns: max-content 1fr;
  column-gap: 22px;
}

#work .page_area_sub li {
  display: grid;
  grid-column: 1 / -1;
  grid-template-columns: subgrid;
}

@supports not (grid-template-columns: subgrid) {
  #work .page_area_sub li {
    display: contents;
  }
}

/* The gap is the grid's job now; the inline margin would double it. */
#work .page_area_sub .page_muted {
  margin-left: 0;
}

/* ⚠ Two columns of uppercase text do not fit a phone. Back to normal flow,
   with the inline margin restored since the grid is no longer supplying it. */
@media (max-width: 700px) {
  #work .page_area_sub,
  #work .page_area_sub li {
    display: block;
  }

  #work .page_area_sub .page_muted {
    margin-left: 8px;
  }
}