/* ——————————— CSS Custom Properties (Design Tokens) ——————————— */
:root {
  /* Colors */
  --color-bg: #000;
  --color-text: #fff;
  --color-accent: #ff5900;
  --color-muted: #8e8e8e;

  /* Typography */
  --font-family-base: 'ArialMT', arial, verdana, helvetica, sans-serif;
  --font-weight-light: lighter;
  --font-size-base: 0.95em;
  --line-height-base: 1.35em;

  /* Spacing (em-based) */
  --space-xs:  0.5em;
  --space-sm:  1.5em;
  --space-md:  3em;

  /* Layout */
  --layout-width: 630px;
}

/* ——————————— Base Styles (Preserve Existing) ——————————— */
body {
  background: var(--color-bg);
  font-family: var(--font-family-base);
  font-size: var(--font-size-base);
  color: var(--color-text);
  line-height: var(--line-height-base);
  margin: 0; padding: 0;
}

a { color: var(--color-text); text-decoration: underline; }
img { border: 0; }
p { margin-top: 0; }
.small { font-size: 0.9em; }

hr {
  display: block;
  height: 1px;
  background-color: var(--color-muted);
  color: var(--color-muted);
  border: 0;
  padding: 0;
  margin: var(--space-sm) 3em;
}

h1 {
  margin: 0 0 0.6em 0;
  padding: 0;
  font-size: 2.4em;
  font-weight: var(--font-weight-light);
  line-height: normal;
  text-align: center;
}

h2 {
  margin: 0 0 0.2em 0;
  padding: 0;
  font-size: 1.4em;
  font-weight: var(--font-weight-light);
  color: var(--color-accent);
  line-height: normal;
}

h3 {
  margin: 0;
  padding: 0;
  font-size: 1.1em;
  font-weight: var(--font-weight-light);
  color: var(--color-accent);
  line-height: normal;
}

#page {
  margin-left: auto;
  margin-right: auto;
  padding: 0 0 3em 0;
  width: var(--layout-width);
}

/* ——————————— Top Navigation ——————————— */
#topNav {
  font-size: 1.1em;
  text-align: center;
  color: var(--color-muted);
  margin: 0 0 1.5em 0;
  padding: 1em 0;
  border-bottom: 1px solid var(--color-muted);
}

#topNav ul {
  padding: 0;
  margin: 0;
}

#topNav li {
  padding: 0 15px 0 0;
  display: inline;
  list-style: none;
}

#topNav li.on {
  font-weight: bold;
  color: var(--color-text);
}

#topNav a {
  color: var(--color-muted);
  text-decoration: none;
}

#topNav a:hover {
  color: var(--color-text);
}

/* ——————————— Home Section ——————————— */
.home {
  margin: 0;
  padding: 0 8em 2em 5em;
  text-align: right;
}

.home .author {
  font-size: 0.8em;
  font-style: italic;
}

/* ——————————— 2-Column Layout ——————————— */
.twoColumns {
  margin: 0;
  padding: 0;
  width: var(--layout-width);
}

.twoColumns .ContentColumn {
  float: right;
  padding: 0;
  width: 380px;
}

.twoColumns .rightNavigation {
  float: left;
  font-size: 0.85em;
  padding: 0 35px 0 0;
  margin: 0;
  width: 210px;
  line-height: 1.4em;
}

.twoColumns .rightNavigation ul {
  margin: 0 0 0 1.2em;
  padding: 0;
}

.twoColumns .rightNavigation ol {
  margin: 0 0 0 1.7em;
  padding: 0;
}

.twoColumns .rightNavigation li {
  margin: 0;
  padding: 0 0 0.5em 0;
}

.twoColumns .rightNavigation a {
  color: var(--color-text);
  text-decoration: underline;
  font-weight: bold;
}

.twoColumns .rightNavigation h3 {
  margin: 0;
  padding: 0 0 0.8em 0;
  font-size: 1.1em;
  font-weight: bold;
  color: var(--color-accent);
}

.twoColumns .rightNavigation h3 .small {
  font-size: 0.8em;
  font-weight: normal;
  color: var(--color-text);
}

.twoColumns .rightNavigation h4 {
  margin: 0;
  padding: 0;
  font-size: 1em;
  font-weight: bold;
  line-height: normal;
}

.navBlock {
  margin: 0;
  padding: 0 0 2em 0;
}

.disclaimer {
  font-size: 0.8em;
  margin: 4em 0 0 70px;
  width: 200px;
  padding: 0;
}

.disclaimer p {
  font-style: italic;
}

/* ——————————— Utility Classes (DRY, Reusable, Low Specificity) ——————————— */

/* Text alignment */
.text-center   { text-align: center; }
.text-right    { text-align: right; }
.text-left     { text-align: left; }

/* Color utilities */
.text-orange   { color: var(--color-accent); }

/* Typography utilities */
.font-light    { font-weight: var(--font-weight-light); }
.text-sm       { font-size: 0.9em; }
.text-lg       { font-size: 1.1em; }

/* Margin utilities (bottom) */
.mt-1 { margin-top: var(--space-xs); }
.mt-2 { margin-top: var(--space-sm); }
.mt-3 { margin-top: var(--space-md); }

.mb-1 { margin-bottom: var(--space-xs); }
.mb-2 { margin-bottom: var(--space-sm); }
.mb-3 { margin-bottom: var(--space-md); }

/* Display */
.block         { display: block; }
.inline-block  { display: inline-block; }

/* Border */
.border-b      { border-bottom: 1px solid var(--color-muted); }

/* ——————————— Clearfix (Preserve Existing) ——————————— */
.cp:after {
  content: ".";
  display: block;
  height: 0;
  clear: both;
  visibility: hidden;
}

.cp {
  display: inline-block;
}

/* Hides from IE-mac \ */
* html .cp { height: 1%; }
.cp { display: block; }
/* ——— Responsive Design (Mobile-First) ——— */
/* Mobile devices (default) */
@media screen and (max-width: 480px) {
  /* Layout */
  #page {
    width: 95%;
    padding: 0 2.5%;
  }

  /* Typography */
  h1 {
    font-size: 1.8em;
  }

  h2 {
    font-size: 1.2em;
  }

  /* Navigation */
  #topNav {
    font-size: 0.9em;
    padding: 0.8em 0;
  }

  #topNav li {
    padding: 0 0.8em 0 0;
  }

  /* Home section */
  .home {
    padding: 0;
    text-align: left;
  }

  /* Image */
  img {
    max-width: 100%;
    height: auto;
    width: auto\9; /* IE8 hack */
  }

  /* Two-column layout */
  .twoColumns,
  .twoColumns .ContentColumn,
  .twoColumns .rightNavigation {
    float: none;
    width: 100%;
  }

  .disclaimer {
    margin: 3em 0 0 0;
    width: auto;
    padding: 0;
  }
}

/* Tablets and small screens */
@media screen and (min-width: 481px) and (max-width: 768px) {
  /* Layout */
  #page {
    width: 90%;
    padding: 0 5%;
  }

  h1 {
    font-size: 2.1em;
  }

  /* Navigation */
  #topNav {
    font-size: 1em;
  }

  #topNav li {
    padding: 0 1em 0 0;
  }

  /* Home section */
  .home {
    padding: 0 2em 1.5em 0;
    text-align: right;
  }

  /* Two-column layout */
  .twoColumns,
  .twoColumns .ContentColumn,
  .twoColumns .rightNavigation {
    float: none;
    width: 100%;
  }

  .disclaimer {
    margin: 3em 0 0 0;
    width: auto;
    padding: 0;
  }
}

/* Desktop and larger screens */
@media screen and (min-width: 769px) {
  #page {
    width: var(--layout-width);
    padding: 0 0 3em 0;
  }

  .home {
    padding: 0 8em 2em 5em;
    text-align: right;
  }
}

/* ——— Print Styles ——— */
@media print {
  body {
    background: white;
    color: black;
  }

  a {
    color: black;
    text-decoration: underline;
  }

  #topNav {
    border-bottom: 1px solid #ccc;
    color: black;
  }

  #topNav a {
    color: black;
    text-decoration: none;
  }

  #page {
    width: 100%;
    padding: 0;
    margin: 0;
  }

  .home {
    padding: 0;
  }

  .disclaimer {
    margin: 2em 0 0 0;
    width: auto;
  }
}

/* ——— High DPI / Retina Displays ——— */
@media screen and (-webkit-min-device-pixel-ratio: 2),
       screen and (min-resolution: 192dpi) {
  /* Optional: Add sharper images or font adjustments here */
}/* ——————————— Utility Classes (DRY, Reusable, Low Specificity) ——————————— */

/* Text alignment */
.text-center   { text-align: center; }
.text-right    { text-align: right; }
.text-left     { text-align: left; }

/* Color utilities */
.text-orange   { color: var(--color-accent); }

/* Typography utilities */
.font-light    { font-weight: var(--font-weight-light); }
.text-sm       { font-size: 0.9em; }
.text-lg       { font-size: 1.1em; }

/* Margin utilities (bottom) */
.mt-1 { margin-top: var(--space-xs); }
.mt-2 { margin-top: var(--space-sm); }
.mt-3 { margin-top: var(--space-md); }

.mb-1 { margin-bottom: var(--space-xs); }
.mb-2 { margin-bottom: var(--space-sm); }
.mb-3 { margin-bottom: var(--space-md); }

/* Display */
.block         { display: block; }
.inline-block  { display: inline-block; }

/* Border */
.border-b      { border-bottom: 1px solid var(--color-muted); }

/* ——————————— Responsive Design (Mobile-First) ——————————— */

/* Mobile devices (default) */
@media screen and (max-width: 480px) {
  #page {
    width: 95%;
    padding: 0 2.5%;
  }

  h1 {
    font-size: 1.8em;
  }

  h2 {
    font-size: 1.2em;
  }

  #topNav {
    font-size: 0.9em;
    padding: 0.8em 0;
  }

  #topNav li {
    padding: 0 0.8em 0 0;
  }

  .home {
    padding: 0;
    text-align: left;
  }

  img {
    max-width: 100%;
    height: auto;
    width: auto\9; /* IE8 hack */
  }

  .twoColumns,
  .twoColumns .ContentColumn,
  .twoColumns .rightNavigation {
    float: none;
    width: 100%;
  }

  .disclaimer {
    margin: 3em 0 0 0;
    width: auto;
    padding: 0;
  }
}

/* Tablets and small screens */
@media screen and (min-width: 481px) and (max-width: 768px) {
  #page {
    width: 90%;
    padding: 0 5%;
  }

  h1 {
    font-size: 2.1em;
  }

  #topNav {
    font-size: 1em;
  }

  #topNav li {
    padding: 0 1em 0 0;
  }

  .home {
    padding: 0 2em 1.5em 0;
    text-align: right;
  }

  .twoColumns,
  .twoColumns .ContentColumn,
  .twoColumns .rightNavigation {
    float: none;
    width: 100%;
  }

  .disclaimer {
    margin: 3em 0 0 0;
    width: auto;
    padding: 0;
  }
}

/* Desktop and larger screens */
@media screen and (min-width: 769px) {
  #page {
    width: var(--layout-width);
    padding: 0 0 3em 0;
  }

  .home {
    padding: 0 8em 2em 5em;
    text-align: right;
  }
}

/* ——— Print Styles ——— */
@media print {
  body {
    background: white;
    color: black;
  }

  a {
    color: black;
    text-decoration: underline;
  }

  #topNav {
    border-bottom: 1px solid #ccc;
    color: black;
  }

  #topNav a {
    color: black;
    text-decoration: none;
  }

  #page {
    width: 100%;
    padding: 0;
    margin: 0;
  }

  .home {
    padding: 0;
  }

  .disclaimer {
    margin: 2em 0 0 0;
    width: auto;
  }
}

/* ——— High DPI / Retina Displays ——— */
@media screen and (-webkit-min-device-pixel-ratio: 2),
       screen and (min-resolution: 192dpi) {
  /* Optional: Add sharper images or font adjustments here */
}

/* ——— Mobile Devices (Under 600px) ——— */
@media screen and (max-width: 600px) {
  :root {
    --layout-width: 90%;
    --font-size-base: 1em;
  }

  #page {
    width: var(--layout-width);
    padding: 0 5%;
  }

  #topNav {
    font-size: 0.9em;
    margin: 0 0 1em 0;
    padding: 0.5em 0;
  }

  #topNav li {
    padding: 0 0.75em 0 0;
    display: block;
  }

  .home {
    padding: 0 1.5em 1.5em 1.5em;
    text-align: center;
  }

  .twoColumns,
  .twoColumns .ContentColumn,
  .twoColumns .rightNavigation {
    float: none;
    width: 100%;
  }

  .disclaimer {
    margin: 2em 0 0 0;
    width: auto;
    padding: 0 1em;
    font-size: 0.8em;
  }

  h1 {
    font-size: 1.8em;
  }

  h2 {
    font-size: 1.2em;
  }

  h3 {
    font-size: 1em;
  }

  hr {
    margin: var(--space-sm) 1em;
    padding: 0;
  }
}

/* ——— Print Styles Enhancements ——— */
@media print {
  /* Hide navigation from print */
  #topNav {
    display: none;
  }

  /* Ensure content is readable */
  .twoColumns,
  .twoColumns .ContentColumn,
  .twoColumns .rightNavigation {
    float: none;
    width: 100%;
  }
}

/* ——————————— Clearfix (Preserve Existing) ——————————— */
.cp:after {
  content: ".";
  display: block;
  height: 0;
  clear: both;
  visibility: hidden;
}

.cp {
  display: inline-block;
}

/* Hides from IE-mac \ */
* html .cp { height: 1%; }
.cp { display: block; }