/* ==========================================================================
   AI Foundations · Almanac, refined · v1
   One stylesheet. Tokens, then components, then responsive.
   Built from "# Brand essence directions/Design System.dc.html".
   Rules over shadows, ink over decoration, blue only where it acts.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Tokens
   -------------------------------------------------------------------------- */
:root {
  /* Colour: blue is the ink for accents, links and actions.
     Never a background for body copy. Cream is the ground; ink does the reading. */
  --ground:      #F6EEDD;  /* ground / paper                  */
  --panel:       #FBF5E8;  /* raised panel                    */
  --ink:         #26211A;  /* ink / text / rules              */
  --blue:        #3B41F2;  /* brand blue (logo)               */
  --blue-hover:  #2A2FD6;  /* blue hover                      */
  --muted:       #5A5142;  /* muted text                      */
  --hint:        #A89D87;  /* dotted rules / hints            */
  --error:       #9B2C1E;  /* error only                      */
  --edge:        #C9C2B4;  /* page edge hairline              */

  /* Type */
  --display: 'Bitter', Georgia, 'Times New Roman', serif;          /* headings + numerals */
  --body:    'PT Serif', Georgia, 'Times New Roman', serif;        /* everything read     */
  --mono:    'IBM Plex Mono', 'SFMono-Regular', Menlo, monospace;  /* tiny meta labels    */

  /* Spacing scale: 4 · 8 · 12 · 16 · 24 · 32 · 48 · 64 */
  --s1: 4px;  --s2: 8px;  --s3: 12px; --s4: 16px;
  --s5: 24px; --s6: 32px; --s7: 48px; --s8: 64px;

  /* Band rhythm: one idea per band, 48 to 64px vertical */
  --band-y: 48px;
  --band-x: 56px;

  /* Measure for long-form copy */
  --measure: 70ch;
}

/* --------------------------------------------------------------------------
   2. Base
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font-family: var(--body);
  font-size: 17px;
  line-height: 1.7;
}

img { max-width: 100%; display: block; }

a { color: var(--blue); }
a:hover { color: var(--blue-hover); }

h1, h2, h3 { font-family: var(--display); font-weight: 800; text-wrap: pretty; }

p { margin: 0; }

strong { font-weight: 700; }

/* Corners 0px everywhere. Shadows none. Structure comes from rules. */
:where(a, button, input, .box, .panel) { border-radius: 0; }

/* Visible keyboard focus, no glow */
:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }

.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* --------------------------------------------------------------------------
   3. Page shell
   -------------------------------------------------------------------------- */
.sheet {
  max-width: 1120px;
  margin: 0 auto;
  background: var(--ground);
  border-left: 1px solid var(--edge);
  border-right: 1px solid var(--edge);
}

/* A band is one horizontal idea, divided by a hairline ink rule. */
.band {
  padding: var(--band-y) var(--band-x);
  border-bottom: 1px solid var(--ink);
}
.band--hero { padding-top: 56px; padding-bottom: 56px; }
.band--tall { padding-top: var(--s8); padding-bottom: var(--s8); }
.band--last { border-bottom: 0; }

.band__title { font-size: 26px; line-height: 1.25; margin: 0 0 var(--s4); }
.hero__title { font-size: 42px; line-height: 1.12; margin: 14px 0 16px; }
.hero__title--about { font-size: 40px; line-height: 1.15; }
.band__note {
  font-family: var(--body); font-size: 15px; font-weight: 400;
  font-style: italic; color: var(--muted);
}

/* Column sets: collapse to one column on narrow screens */
.cols { display: flex; gap: 36px; }
.cols > * { flex: 1; min-width: 0; }
.cols--wide { gap: 44px; }
.cols--tight { gap: 20px; }
.cols--split { gap: 40px; }

.col-grow  { flex: 1.2; }
.col-shrink { flex: .8; }
.col-media { flex: .9; }

.prose { max-width: var(--measure); }
.lead { font-size: 18px; line-height: 1.7; }
.hero__lead { margin-bottom: var(--s5); }
.hero__lead--tight { margin-bottom: var(--s4); }
.cta__copy { margin-bottom: 20px; }
.pullquote { font-size: 17px; margin-bottom: var(--s4); }
.stack > * + * { margin-top: var(--s3); }

.subhead { font-family: var(--display); font-size: 18px; font-weight: 700; margin: 0 0 var(--s2); }
.band__title--flush { margin-bottom: 0; }
.price-copy { margin: var(--s3) 0 18px; }

.label {
  font-family: var(--display);
  font-size: 12px; font-weight: 700; letter-spacing: .14em;
  color: var(--blue);
  text-transform: uppercase;
}

.caption {
  font-size: 15px; font-style: italic; color: var(--muted);
}
.caption--center { text-align: center; }
.caption--small { font-size: 14px; }
.caption--spaced { margin-top: var(--s2); }

/* --------------------------------------------------------------------------
   4. Navigation: logo + wordmark left, quiet links, one blue CTA
   -------------------------------------------------------------------------- */
.nav {
  display: flex; justify-content: space-between; align-items: center;
  gap: var(--s5);
  padding: 18px var(--band-x);
  border-bottom: 1px solid var(--ink);
}

.nav__brand {
  display: flex; align-items: center; gap: 10px;
  text-decoration: none; color: var(--ink);
}
.nav__brand:hover { color: var(--ink); }
.nav__logo { height: 28px; width: auto; }
.nav__wordmark { font-family: var(--display); font-weight: 800; font-size: 19px; }

.nav__links {
  display: flex; align-items: center; gap: 28px;
  font-size: 16px; flex-wrap: wrap;
}

.nav__link {
  color: var(--muted); text-decoration: none;
  padding-bottom: 2px; border-bottom: 2px solid transparent;
}
.nav__link:hover { color: var(--ink); }
.nav__link[aria-current="page"] {
  color: var(--ink);
  border-bottom-color: var(--blue);
}

/* The CTA slot. On the page it points to, it drops the fill and takes the
   active-link treatment instead, same markup, one class. */
.nav__cta {
  background: var(--blue); color: var(--ground);
  padding: 9px 16px;
  font-family: var(--display); font-weight: 700; font-size: 14.5px;
  text-decoration: none;
  border-bottom: 0;
}
.nav__cta:hover { background: var(--blue-hover); color: var(--ground); }
.nav__cta[aria-current="page"] {
  background: none; color: var(--ink);
  padding: 0 0 2px;
  font-family: var(--body); font-weight: 400; font-size: 16px;
  border-bottom: 2px solid var(--blue);
}

/* --------------------------------------------------------------------------
   5. Footer: 3px double rule, page header/footer only
   -------------------------------------------------------------------------- */
.footer {
  display: flex; justify-content: space-between; gap: var(--s4);
  flex-wrap: wrap;
  padding: var(--s4) var(--band-x);
  border-top: 3px double var(--ink);
  font-size: 14px; font-style: italic; color: var(--muted);
}
.footer a { color: var(--muted); }
.footer a:hover { color: var(--ink); }

/* --------------------------------------------------------------------------
   6. Boxes and panels
   -------------------------------------------------------------------------- */
.box {
  border: 1px solid var(--ink);
  background: var(--panel);
  padding: 20px 22px;
}
.box--pad { padding: 20px 24px; }
.box__title { font-family: var(--display); font-weight: 700; font-size: 18px; }
.box__body { font-size: 15.5px; line-height: 1.65; color: var(--muted); margin: 6px 0 14px; }

/* Every photo sits in a 1px ink frame with a 5px paper mat. */
.frame {
  border: 1px solid var(--ink);
  padding: 5px;
  background: var(--panel);
}
.frame img { width: 100%; height: 100%; object-fit: cover; }
.frame--portrait img { aspect-ratio: 376 / 340; }
.frame--feed { height: 100%; }
.frame--feed img { aspect-ratio: 476 / 260; height: 100%; min-height: 170px; }

/* Channel thumbnails: bare 1px ink frames, no mat */
.thumbs { display: flex; gap: 10px; }
.thumbs--grid { flex-wrap: wrap; }
.thumb { flex: 1; min-width: 0; border: 1px solid var(--ink); }
.thumb img { width: 100%; height: 54px; object-fit: cover; }
.thumbs--grid .thumb { flex: 1 1 calc(50% - 5px); }
.thumbs--grid .thumb img { height: 90px; }

.media-stack { display: flex; flex-direction: column; gap: 10px; }

/* --------------------------------------------------------------------------
   7. Buttons and links
   -------------------------------------------------------------------------- */
.btn {
  display: inline-block;
  font-family: var(--display); font-weight: 700; font-size: 16px;
  line-height: 1.25;
  padding: 12px 22px;
  text-align: center; text-decoration: none;
  border: 0; cursor: pointer;
  transition: background 180ms ease, color 180ms ease;
}
.btn--primary { background: var(--blue); color: var(--ground); }
.btn--primary:hover { background: var(--blue-hover); color: var(--ground); }
.btn--primary:disabled,
.btn--primary[aria-disabled="true"] { background: var(--hint); cursor: default; }

.btn--secondary {
  background: none; color: var(--ink);
  border: 1px solid var(--ink); padding: 11px 22px;
}
.btn--secondary:hover { background: var(--ink); color: var(--ground); }

.btn--block { display: block; width: 100%; padding: 12px 16px; }
.btn--large { padding: 13px 26px; font-size: 17px; }

.textlink { color: var(--blue); font-weight: 700; text-decoration: underline; }
.textlink:hover { color: var(--blue-hover); }

/* --------------------------------------------------------------------------
   8. Forms: 1px ink border, ground fill, italic placeholder,
      focus is 2px blue with no glow, error is a red border and a plain sentence
   -------------------------------------------------------------------------- */
.form { display: flex; flex-direction: column; gap: var(--s2); }
.form__row { display: flex; gap: var(--s2); }
.form__field { flex: 1; min-width: 0; }
.form__field--email { flex: 1.4; }

.input {
  width: 100%;
  border: 1px solid var(--ink);
  background: var(--ground);
  color: var(--ink);
  font-family: var(--body); font-size: 16px;
  padding: 11px 14px;
}
.input::placeholder { font-style: italic; color: var(--muted); opacity: 1; }
.input:focus {
  outline: none;
  border: 2px solid var(--blue);
  padding: 10px 13px; /* hold the box steady as the border thickens */
}
.input:user-invalid {
  border: 2px solid var(--error);
  padding: 10px 13px;
}

.form__error { display: none; font-size: 13px; color: var(--error); margin-top: var(--s1); }
.input:user-invalid ~ .form__error { display: block; }

.form__note {
  font-size: 14px; font-style: italic; color: var(--muted);
  margin-top: 10px;
}

/* --------------------------------------------------------------------------
   9. Numbered sequences: curriculum rows and the what's-inside list
   -------------------------------------------------------------------------- */
.seq {
  display: grid; grid-template-columns: 1fr 1fr; gap: 0 36px;
  list-style: none; padding: 0; margin: 0;
}
.seq--single { grid-template-columns: 1fr; }

.seq__row {
  display: flex; gap: 14px;
  padding: 11px 0;
  border-bottom: 1px dotted var(--hint);
  font-size: 17px; line-height: 1.6;
}
.seq__row:hover { background: var(--ground); }
.seq__num { font-family: var(--display); font-weight: 700; color: var(--blue); }

/* Inside a panel the rows tint the other way, and the last rule is dropped */
.box .seq__row { padding: 9px 0; font-size: 16px; }
.box .seq__row:hover { background: var(--ground); }
.box .seq__row:last-child { border-bottom: 0; }

/* --------------------------------------------------------------------------
   10. Member cards
   -------------------------------------------------------------------------- */
.member {
  border: 1px solid var(--ink);
  background: var(--panel);
  padding: 18px;
}
.member__photo {
  width: 48px; height: 48px;
  border: 1px solid var(--ink);
}
.member__photo img { width: 100%; height: 100%; object-fit: cover; }
.member__name { font-family: var(--display); font-weight: 700; font-size: 16px; margin-top: 10px; }
.member__biz { font-size: 14px; font-style: italic; color: var(--blue); }
.member__built { font-size: 15.5px; line-height: 1.65; margin-top: var(--s2); }

/* --------------------------------------------------------------------------
   11. Price
   -------------------------------------------------------------------------- */
.price { font-family: var(--display); font-size: 38px; font-weight: 800; line-height: 1.1; }
.price span { font-size: 18px; color: var(--muted); font-weight: 400; }

/* Centred closing band */
.center { text-align: center; }
.center .prose { margin-left: auto; margin-right: auto; max-width: 560px; }

/* Home hero: one centred column, no photo. The title runs wider than the
   70ch measure so it still breaks into two lines. */
.hero--center .hero__title { max-width: 780px; margin: 0 auto 16px; }
.box--center { max-width: 560px; margin-left: auto; margin-right: auto; }

/* --------------------------------------------------------------------------
   12. Responsive: laptops first, then tablet, then phone
   -------------------------------------------------------------------------- */
@media (max-width: 1000px) {
  :root { --band-x: 40px; }
  .cols, .cols--wide, .cols--split { gap: 28px; }
}

@media (max-width: 860px) {
  :root { --band-x: 32px; --band-y: 40px; }

  .cols { flex-direction: column; }
  .col-grow, .col-shrink, .col-media { flex: 1 1 auto; }

  .hero__title, .hero__title--about { font-size: 36px; }

  .seq { grid-template-columns: 1fr; }

  .frame--feed img { aspect-ratio: 476 / 260; height: auto; }

  .nav { flex-direction: column; align-items: flex-start; gap: var(--s4); }
  .nav__links { gap: var(--s4) 20px; }
}

@media (max-width: 620px) {
  :root { --band-x: 24px; --band-y: 32px; }

  .hero__title, .hero__title--about { font-size: 32px; line-height: 1.18; }
  .band__title { font-size: 23px; }
  .lead { font-size: 17px; }
  .price { font-size: 32px; }

  .band--hero, .band--tall { padding-top: 36px; padding-bottom: 36px; }

  .form__row { flex-direction: column; }
  .form__field--email { flex: 1; }

  /* Nav: quiet links on one line, the single blue CTA on its own */
  .nav__links { width: 100%; }
  .nav__cta { flex: 0 0 100%; text-align: center; }
  .nav__cta[aria-current="page"] { flex: 0 0 auto; text-align: left; }

  .footer { flex-direction: column; gap: var(--s2); }

  .thumb img { height: 48px; }
  .thumbs--grid .thumb img { height: 72px; }
}

/* Honour a request for less movement */
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; }
}

/* Print: it is a paper brand, so let it print like paper */
@media print {
  .nav__cta, .btn { border: 1px solid var(--ink); }
  .sheet { border: 0; }
}