@charset "UTF-8"; /* CSS Document */ :root { /* Brand */ --primary-1: #0069aa; /* Blue */ --primary-2: #e65100; /* Burnt Orange */ --primary-3: #155780; /* Dark Blue */ --primary-4: #223f59;
  --contrast-1: #d62828; /* Red */ --contrast-2: #00796b; /* Teal */ --contrast-3: #ffd166; /* Gold */ --neutral-0: #ffffff;
  --neutral-1: #f5f5f5; /* Light Gray */ --neutral-2: #e0e0e0;
  --neutral-3: #9e9e9e;
  --neutral-4: #424242;
  --neutral-5: #212121; /* Near Black */ --ink: var(--neutral-5); /* Fonts */ --ff-sans: "source-sans-3", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  --ff-semp: "semplicitapro", system-ui, sans-serif;
  --ff-pn: "proxima-nova", sans-serif;
  --ff-pn-wide: "proxima-nova-wide", sans-serif;
  --ff-pn-cond: "proxima-nova-condensed", sans-serif; /* Layout tokens */ --space-1: .5rem;
  --space-2: 1rem;
  --space-3: 1.5rem;
  --space-4: 2rem;
  --radius: 10px;
  --shadow-1: 0 2px 6px rgba(0, 0, 0, .08);
  --content-max: 72ch; /* readable measure */ --wrap-max: 90rem; /* 1440px */
}
*, *::before, *::after {
  box-sizing: border-box;
}
.hltA {
  border: 2px solid var(--primary-2);
}
.hltB {
  border: 2px solid var(--contrast-3);
}
.hltC {
  border: 2px solid var(--contrast-3);
}
html, body {
  margin: 0;
  padding: 0;
}
body {
  color: var(--ink);
  background: var(--neutral-0);
  font-family: var(--ff-pn);
  font-weight: 400;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
} /* Skip link for a11y */ .skip-link {
  position: absolute;
  left: -9999px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
}
.skip-link:focus {
  left: var(--space-2);
  top: var(--space-2);
  width: auto;
  height: auto;
  padding: .5rem 1rem;
  background: #000;
  color: #fff;
  border-radius: .25rem;
  z-index: 999;
} /* =============================       Header   ============================= */ header[role="banner"] {
  background: var(--primary-4);
  color: #f2f2f2;
  height: 60px;
  background-image: url("../images/banner-matte.webp");
  background-position: center left;
  border-bottom: 2px solid var(--neutral-4);
  margin-bottom: 2em;
}
.header-inner {
  max-width: var(--wrap-max);
  margin: 0 auto;
  padding: .75rem var(--space-2);
  display: flex;
  align-items: center;
  gap: var(--space-2);
  min-height: 60px;
}
.site-title {
  font-family: var(--ff-semp);
  font-weight: 600;
  letter-spacing: .1em;
  margin: 0;
  font-size: clamp(1.125rem, 1.2vw + .5rem, 1.5rem);
}
.site-title a {
  color: #f2f2f2;
  text-decoration: none;
} /* =============================       Layout   ============================= */ main {
  max-width: var(--wrap-max);
  margin: 0 auto;
  padding: 0 var(--space-2) var(--space-4);
  background: #fff;
}
.storyImage {
  position: relative;
  margin: var(--space-2) 0; /*        border-top: 5px solid var(--contrast-3);    border-top: 5px solid var(--primary-1);*/
}
.storyImage figure {
  margin: 0;
}
.storyImage img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--radius);
  border-bottom: 9px solid #223f59;
}
.story-title {
  position: absolute;
  right: 0; /* anchors to right edge */ bottom: 0;
  display: inline-block;
  max-width: min(90%, 42ch);
  margin: 0;
  padding: .35em .6em;
  border-radius: 12px 0 0 0; /* special rounded right edge only */ font-family: var(--ff-pn-wide);
  font-weight: 500;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  line-height: 1.1;
  color: var(--neutral-2);
  background-color: rgba(34, 63, 89, 0.8);
  text-shadow: 0 1px 2px rgba(0, 0, 0, .35);
  box-shadow: 0 2px 6px rgba(0, 0, 0, .15);
  font-size: clamp(1.25rem, 1.5vw + 0.8rem, 2rem); /* ~20px → 32px */ hyphens: auto;
  overflow-wrap: anywhere;
}
.grid-2col {
  display: grid;
  gap: var(--space-3);
  grid-template-columns: minmax(16rem, 35ch) 1fr;
  align-items: start;
  padding: var(--space-3);
  background: var(--neutral-1);
  border-radius: var(--radius);
  box-shadow: var(--shadow-1);
}
@media (max-width: 800px) {
  .grid-2col {
    grid-template-columns: 1fr;
  }
}
.col-a, .col-b {
  background: var(--neutral-0);
  border-radius: var(--radius);
  padding: var(--space-2);
} /* Author/meta */ #author h2 {
  font: 400 clamp(1rem, 2vw, 1.25rem)/1.2 var(--ff-sans);
  color: var(--primary-1);
  margin: .25rem 0 var(--space-2);
  max-width: 36ch;
}
#kicker {
  text-transform: uppercase;
  color: var(--contrast-1);
  font: 600 clamp(0.9375rem, 2vw, 1rem)/1.2 var(--ff-pn-cond);
  letter-spacing: 0.09em; /* border-bottom: 1px dashed var(--primary-2); */ margin-bottom: .5em;
}
.meta {
  display: grid;
  gap: .35rem;
  font-family: var(--ff-pn);
  color: var(--neutral-4);
}
.meta > p {
  padding: 0;
  margin: .5em 0 0;
  color: blue;
}
.meta time {
  padding: 0;
  margin: 0 0 .5em 0;
  color: blue;
} /* Tags */ .tag {
  display: inline-block;
  padding: 2px 8px;
  margin-right: 5px;
  border-radius: 5px;
  font-size: .78rem;
  letter-spacing: .02em;
  background: var(--primary-3);
  color: #fff;
} /* =============================       Story   ============================= */ #story {
  position: relative; /* enables ::before positioning */ background-color: var(--neutral-0);
  margin: 0;
  padding: 0;
  color: #000;
  font-family: var(--ff-sans);
} /* Padding for nested sections (keeps interior content off edges) */ #story > section {
  padding: 0 2em; /* or 2em all around if you want top/bottom too */
} /* Unified text styling across paragraphs, lists, blockquotes, asides */ #story p, #story ul, #story ol, #story blockquote, #story aside {
  font-family: var(--ff-sans);
  font-size: clamp(.9375rem, 1.2vw + .25rem, 1.125rem); /* ~15 → 18 */ line-height: clamp(1.5rem, 1.2vw + .75rem, 1.75rem); /* ~24 → 28 */ max-width: 75ch;
  color: var(--ink);
} /* Optional subtle text shadow for a soft print-like look */ #story p, #story ul, #story ol, #story aside, #story blockquote {
  text-shadow: 0.5px 0.5px 1px rgba(0, 0, 0, 0.1);
}
#story::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: repeating-linear-gradient(to bottom, rgba(0, 0, 0, 0.03) 0px, rgba(0, 0, 0, 0.03) 1px, transparent 1px, transparent 2px);
  border: 1px solid rgba(0, 0, 0, 0.06);
  border-radius: var(--radius);
}
#story p {
  margin: 0 0 .8em;
}
#story ul, #story ol {
  padding-left: 1.1em;
  margin-bottom: 1em;
}
#story li {
  padding: .25em 0;
}
#story blockquote {
  font-style: italic;
  padding: 1em 10%;
  background: #fafafa;
  border-left: 4px solid #e0e0e0;
  border-radius: 4px;
  margin: 1.5em 0;
}
#story aside {
  background: var(--neutral-1);
  padding: var(--space-2);
  border-radius: var(--radius);
  box-shadow: var(--shadow-1);
  margin-bottom: 1.5em;
} /* Section H2/H3 — shared base */ #story h2, #story h3 {
  font-family: var(--ff-pn-cond); /* Proxima Nova Condensed */ font-weight: 500; /* crisper than 400 for headings */ max-width: 75ch;
  margin: 0.5em 0 0.25em;
  line-height: 1.25; /* tight but readable */
} /* H2 overrides */ #story h2 {
  letter-spacing: 0.06em;
  color: #0062A3;
  font-size: clamp(1.25rem, 1.2vw + 0.75rem, 2rem); /* ~20→32 */ margin-top: 0.75em; /* a touch more above H2s */
}
#story-head {
  letter-spacing: 0.06em;
  color: var(--contrast-2);
  font-size: clamp(.9375rem, 1.2vw + .25rem, 1.125rem); /* ~15 → 18 */ line-height: 1.25;
  margin-top: 0.75em; /* a touch more above H2s */ padding: 0;
  margin: 0;
} /* H3 overrides */ #story h3 {
  letter-spacing: 0.12em;
  color: #3C74A6;
  font-size: clamp(1.125rem, 1vw + 0.5rem, 1.625rem); /* ~18→26 */
} /* Thin elegance option */ .thin {
  font-family: var(--ff-pn);
  font-weight: 300;
} /* Decorative swoop background */ .swoop {
  background-image: url("../images/bkgs/binary2.webp");
  background-repeat: repeat-y;
  background-size: contain;
  background-position: top right;
} /* Drop cap on the very first paragraph directly under #story */ #story > p:first-of-type::first-letter {
  float: left;
  font-family: var(--serif, Georgia, serif); /* fallback */ font-weight: 700;
  font-size: clamp(3.2rem, 7vw, 4.6rem);
  line-height: 0.8;
  padding-right: 10px;
  margin-top: 4px;
  color: var(--accent, var(--primary-2)); /* fallback to brand color */
} /* Add inner padding to direct child paragraphs (keeps measure comfy) */ #story > p {
  padding: 2em 2em 0; /* or 2em all around if you want top/bottom too */
} /* =============================       Footer   ============================= */ footer[role="contentinfo"] {
  min-height: 150px;
  padding: 0;
  color: #fff; /*  background: var(--primary-3);*/ background-image: linear-gradient(to right, #155780, #223f59, #155780, #223f59, #155780);
}
.note {
  font-style: italic;
  margin: 1em 0;
  padding: 1em;
}
.footer-inner {
  max-width: var(--wrap-max);
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 125px) 1fr; /* first col ≤ 125px, second col takes rest */ gap: 1em; /* space between columns */ align-items: center; /* vertical alignment */ padding: 0 3em;
}
.footer-colA {
  margin: 0;
  padding: 1em 0 0;
}
.footer-colB {
  margin: 0;
  padding: 1em 3em 0;
}
footer p {
  max-width: 70ch;
  margin: 0 auto 0 0;
  font: 500 clamp(0.9375rem, 2vw, 1rem)/1.2 var(--ff-pn-wide, var(--ff-pn, system-ui));
} /* Mobile-friendly footer stacking */ @media (max-width: 600px) {
  .footer-inner {
    grid-template-columns: 1fr;
    text-align: center;
    padding: 0 1.25em;
  }
  .footer-colB {
    padding: 1em 0;
    margin: 0 auto;
  }
  footer p {
    margin: 0 auto;
    text-align: center;
  }
  .footer-colA {
    display: none;
  }
}
footer img {
  display: block;
  margin: 0 auto;
  max-width: 50%;
  height: auto;
}
@media print {
  header, footer {
    display: none;
  }
  #story {
    box-shadow: none;
    background: #fff;
  }
}
@media (prefers-reduced-motion: reduce) {
  * {
    animation: none !important;
    transition: none !important;
  }
} /* =============================       Utilities   ============================= */ .visually-hidden {
  position: absolute !important;
  height: 1px;
  width: 1px;
  overflow: hidden;
  clip: rect(1px, 1px, 1px, 1px);
  white-space: nowrap;
}