/* ==========================================================================
   The Hardware OS — thehardwareos.com
   Book landing page. Design: unified surface (DEC-003 heritage), zinc/amber.
   ========================================================================== */

/* System font stack — Helvetica Neue on macOS/iOS, Arial on Windows */

/* --------------------------------------------------------------------------
   Tokens — light mode
   -------------------------------------------------------------------------- */
:root {
  color-scheme: light dark;

  --c-bg:           #FAFAFA;   /* zinc-50 — not pure white, ~19:1 contrast */
  --c-bg-alt:       #F4F4F5;   /* zinc-100 — alternate section bg */
  --c-border:       #E4E4E7;   /* zinc-200 */

  --c-text:         #09090B;   /* zinc-950 */
  --c-text-muted:   #71717A;   /* zinc-500 */
  --c-text-subtle:  #A1A1AA;   /* zinc-400 */

  --c-accent:       #B45309;   /* amber-700 — 5.8:1 on #FAFAFA, passes WCAG AA */
  --c-accent-hover: #92400E;   /* amber-800 */

  --font:      "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-mono: "Cascadia Code", "Fira Code", Consolas, monospace;

  --t-xs:   0.75rem;
  --t-sm:   0.875rem;
  --t-base: 1.0625rem;
  --t-lg:   1.25rem;
  --t-xl:   1.5rem;
  --t-2xl:  1.875rem;
  --t-3xl:  2.5rem;
  --t-4xl:  3.25rem;

  --s-1: 0.25rem;  --s-2: 0.5rem;   --s-3: 0.75rem;
  --s-4: 1rem;     --s-5: 1.25rem;  --s-6: 1.5rem;
  --s-8: 2rem;     --s-10: 2.5rem;  --s-12: 3rem;
  --s-16: 4rem;    --s-20: 5rem;    --s-24: 6rem;

  --max-w:    760px;   /* narrower than simulation site — prose-optimized */
  --r-sm: 4px;  --r: 8px;  --r-lg: 12px;

  --header-h: 57px;
}

/* --------------------------------------------------------------------------
   Dark mode — designed independently
   -------------------------------------------------------------------------- */
@media (prefers-color-scheme: dark) {
  :root {
    --c-bg:          #18181B;   /* zinc-900 — not black, no halation */
    --c-bg-alt:      #27272A;   /* zinc-800 */
    --c-border:      #27272A;

    --c-text:        #D4D4D8;   /* zinc-300 — ~11:1 on zinc-900, no glow */
    --c-text-muted:  #A1A1AA;
    --c-text-subtle: #52525B;

    --c-accent:       #F59E0B;
    --c-accent-hover: #D97706;
  }
}

/* --------------------------------------------------------------------------
   Reset
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 16px; -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--font);
  font-size: var(--t-base);
  line-height: 1.75;
  color: var(--c-text);
  background: var(--c-bg);
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
img { display: block; max-width: 100%; height: auto; }
a { color: var(--c-accent); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--c-accent-hover); }

/* --------------------------------------------------------------------------
   Layout
   -------------------------------------------------------------------------- */
.container {
  width: 100%;
  max-width: var(--max-w);
  margin-inline: auto;
  padding-inline: var(--s-6);
}

/* --------------------------------------------------------------------------
   Header
   -------------------------------------------------------------------------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  height: var(--header-h);
  background: var(--c-bg);
  border-bottom: 1px solid var(--c-border);
}

.site-header .container {
  display: flex;
  align-items: center;
  height: 100%;
}

.site-logo {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: var(--t-sm);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--c-text);
  text-decoration: none;
}
.site-logo:hover { color: var(--c-accent); }
.site-logo-icon {
  display: block;
  width: 22px;
  height: 22px;
  flex-shrink: 0;
  border-radius: 4px;
}

/* --------------------------------------------------------------------------
   Hero
   -------------------------------------------------------------------------- */
.hero {
  padding-block: var(--s-20) var(--s-16);
  border-bottom: 1px solid var(--c-border);
}

/* Cover is now active — grid layout: cover left, text right */
.hero-layout {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--s-12);
  align-items: start;
}

.hero-cover img {
  border: 1px solid var(--c-border);
  border-radius: var(--r-lg);
  width: 220px;
  flex-shrink: 0;
  box-shadow: 0 4px 24px rgba(0,0,0,0.12);
}

@media (max-width: 600px) {
  .hero-layout {
    grid-template-columns: 1fr;
  }
  .hero-cover { display: none; }
}

.hero-byline {
  display: block;
  font-size: var(--t-xs);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--c-accent);
  margin-bottom: var(--s-4);
}

.hero h1 {
  font-size: clamp(var(--t-3xl), 7vw, var(--t-4xl));
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -0.035em;
  color: var(--c-text);
  margin-bottom: var(--s-5);
}

.hero-sub {
  font-size: var(--t-lg);
  line-height: 1.65;
  color: var(--c-text-muted);
  max-width: 52ch;
  margin-bottom: var(--s-8);
}

/* --------------------------------------------------------------------------
   Buttons / CTAs
   -------------------------------------------------------------------------- */
.hero-actions,
.buy-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-3);
}

.btn-primary {
  display: inline-flex;
  align-items: center;
  height: 44px;
  padding-inline: var(--s-6);
  background: var(--c-text);
  color: var(--c-bg);
  font-size: var(--t-sm);
  font-weight: 600;
  border-radius: var(--r);
  text-decoration: none;
  letter-spacing: 0.01em;
  transition: opacity 0.15s;
}
.btn-primary:hover { opacity: 0.82; color: var(--c-bg); }

.btn-secondary {
  display: inline-flex;
  align-items: center;
  height: 44px;
  padding-inline: var(--s-6);
  border: 1px solid var(--c-border);
  color: var(--c-text);
  font-size: var(--t-sm);
  font-weight: 500;
  border-radius: var(--r);
  text-decoration: none;
  transition: border-color 0.15s;
}
.btn-secondary:hover { border-color: var(--c-text-muted); color: var(--c-text); }

.btn-tertiary {
  font-size: var(--t-sm);
  font-weight: 500;
  color: var(--c-text-muted);
  text-decoration: none;
}
.btn-tertiary:hover { color: var(--c-text); }

.btn-coming {
  font-size: var(--t-sm);
  color: var(--c-text-subtle);
  font-style: italic;
}

/* --------------------------------------------------------------------------
   Book sections
   -------------------------------------------------------------------------- */
main { flex: 1; }

.book-section {
  padding-block: var(--s-16);
  border-bottom: 1px solid var(--c-border);
}

.book-section--alt {
  background: var(--c-bg-alt);
}

.buy-section {
  padding-block: var(--s-16) var(--s-20);
}

/* --------------------------------------------------------------------------
   Section labels & headings
   -------------------------------------------------------------------------- */
.section-label {
  display: block;
  font-size: var(--t-xs);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--c-accent);
  margin-bottom: var(--s-3);
}

.book-section h2 {
  font-size: var(--t-2xl);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.2;
  color: var(--c-text);
  margin-bottom: var(--s-6);
}

/* --------------------------------------------------------------------------
   Prose block (about, author sections)
   -------------------------------------------------------------------------- */
.prose-block p {
  font-size: var(--t-base);
  line-height: 1.8;
  color: var(--c-text-muted);
  max-width: 62ch;
}
.prose-block p + p { margin-top: var(--s-4); }
.prose-block p a { color: var(--c-accent); }
.prose-block p a:hover { color: var(--c-accent-hover); }

/* --------------------------------------------------------------------------
   Audience list
   -------------------------------------------------------------------------- */
.audience-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--s-6);
  max-width: 62ch;
}

.audience-list li {
  font-size: var(--t-base);
  color: var(--c-text-muted);
  line-height: 1.75;
  padding-left: var(--s-5);
  border-left: 2px solid var(--c-border);
}

.audience-list strong {
  font-weight: 600;
  color: var(--c-text);
}

/* --------------------------------------------------------------------------
   Contents — parts and chapters
   -------------------------------------------------------------------------- */
.parts-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--s-8);
}

.part {
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
}

.part h3 {
  font-size: var(--t-sm);
  font-weight: 700;
  letter-spacing: 0.01em;
  color: var(--c-text);
  text-transform: uppercase;
  font-size: var(--t-xs);
  letter-spacing: 0.08em;
}

.chapter-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--s-1);
  padding-left: var(--s-4);
  counter-reset: chapter-counter;
}

.chapter-list li {
  font-size: var(--t-sm);
  color: var(--c-text-muted);
  line-height: 1.6;
  display: flex;
  align-items: baseline;
  gap: var(--s-3);
}

.chapter-list li::before {
  content: counter(chapter-counter, decimal-leading-zero);
  counter-increment: chapter-counter;
  font-size: var(--t-xs);
  font-weight: 500;
  color: var(--c-text-subtle);
  min-width: 2ch;
  flex-shrink: 0;
}

/* Handle explicit start= on ordered lists */
.chapter-list[start="4"]  { counter-reset: chapter-counter 3; }
.chapter-list[start="9"]  { counter-reset: chapter-counter 8; }
.chapter-list[start="15"] { counter-reset: chapter-counter 14; }
.chapter-list[start="18"] { counter-reset: chapter-counter 17; }

/* --------------------------------------------------------------------------
   Buy section
   -------------------------------------------------------------------------- */
.buy-sub {
  font-size: var(--t-base);
  color: var(--c-text-muted);
  max-width: 54ch;
  margin-bottom: var(--s-8);
}

/* --------------------------------------------------------------------------
   Email capture (wired up at launch)
   -------------------------------------------------------------------------- */
.email-capture { margin-top: var(--s-8); }

.email-label {
  display: block;
  font-size: var(--t-sm);
  font-weight: 500;
  color: var(--c-text-muted);
  margin-bottom: var(--s-3);
}

.email-row {
  display: flex;
  gap: var(--s-2);
  max-width: 420px;
}

.email-input {
  flex: 1;
  height: 44px;
  padding-inline: var(--s-4);
  border: 1px solid var(--c-border);
  border-radius: var(--r);
  background: var(--c-bg);
  color: var(--c-text);
  font-size: var(--t-sm);
  font-family: var(--font);
  outline: none;
}
.email-input:focus { border-color: var(--c-accent); }

/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */
.site-footer {
  padding-block: var(--s-8);
  border-top: 1px solid var(--c-border);
}

.site-footer .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--s-2);
}

.footer-copy,
.footer-right {
  font-size: var(--t-xs);
  color: var(--c-text-subtle);
}

/* --------------------------------------------------------------------------
   Hero subtitle formats line
   -------------------------------------------------------------------------- */
.hero-formats {
  font-size: var(--t-xs);
  color: var(--c-text-subtle);
  margin-top: var(--s-3);
}
.hero-formats a { color: var(--c-text-subtle); text-decoration: underline; }

/* --------------------------------------------------------------------------
   Excerpt / pull quote
   -------------------------------------------------------------------------- */
.excerpt-section {
  background: var(--c-bg-alt);
}

.book-excerpt {
  margin: 0;
  padding: var(--s-8) var(--s-8) var(--s-8) var(--s-8);
  border-left: 3px solid var(--c-accent);
  max-width: 68ch;
}

.book-excerpt p {
  font-size: var(--t-base);
  line-height: 1.8;
  color: var(--c-text-muted);
  margin-bottom: var(--s-3);
}

.book-excerpt .excerpt-verdict {
  font-size: var(--t-lg);
  font-weight: 600;
  color: var(--c-text);
  letter-spacing: -0.01em;
  margin-top: var(--s-5);
  margin-bottom: var(--s-5);
}

.book-excerpt cite {
  display: block;
  font-size: var(--t-xs);
  font-style: normal;
  color: var(--c-text-subtle);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin-top: var(--s-5);
}

/* --------------------------------------------------------------------------
   Audience footnote (scope qualifier, single line)
   -------------------------------------------------------------------------- */
.audience-footnote {
  font-size: var(--t-sm);
  color: var(--c-text-subtle);
  line-height: 1.6;
  margin-top: var(--s-6);
  max-width: 62ch;
}

/* --------------------------------------------------------------------------
   Outcomes section
   -------------------------------------------------------------------------- */
.outcomes-section {
  background: var(--c-text);
  color: var(--c-bg);
}

.outcomes-section .section-label {
  color: var(--c-accent);
}

.outcomes-section h2 {
  color: var(--c-bg) !important;
}

.outcomes-intro {
  font-size: var(--t-base);
  color: rgba(250,250,250,0.65);
  margin-bottom: var(--s-6);
  max-width: 54ch;
}

@media (prefers-color-scheme: dark) {
  .outcomes-section {
    background: var(--c-bg-alt);
    color: var(--c-text);
  }
  .outcomes-section h2 { color: var(--c-text) !important; }
  .outcomes-intro { color: var(--c-text-muted); }
  .outcomes-list li { color: var(--c-text-muted); border-color: var(--c-border); }
  .outcomes-close { color: var(--c-text-muted); }
}

.outcomes-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
  counter-reset: outcomes-counter;
  max-width: 58ch;
  margin-bottom: var(--s-8);
}

.outcomes-list li {
  font-size: var(--t-base);
  color: rgba(250,250,250,0.8);
  line-height: 1.7;
  display: flex;
  gap: var(--s-4);
  align-items: baseline;
  padding-bottom: var(--s-4);
  border-bottom: 1px solid rgba(255,255,255,0.08);
}

.outcomes-list li::before {
  content: counter(outcomes-counter, decimal-leading-zero);
  counter-increment: outcomes-counter;
  font-size: var(--t-xs);
  font-weight: 700;
  color: var(--c-accent);
  min-width: 2ch;
  flex-shrink: 0;
}

.outcomes-close {
  font-size: var(--t-base);
  font-weight: 500;
  color: rgba(250,250,250,0.9);
  max-width: 56ch;
  line-height: 1.6;
}

/* --------------------------------------------------------------------------
   Part descriptions
   -------------------------------------------------------------------------- */
.part-desc {
  font-size: var(--t-sm);
  color: var(--c-text-subtle);
  line-height: 1.6;
  max-width: 62ch;
  margin-bottom: var(--s-3);
}

/* --------------------------------------------------------------------------
   Companion resources
   -------------------------------------------------------------------------- */
.resources-section {
  padding-block: var(--s-12);
  border-bottom: 1px solid var(--c-border);
}

.resources-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
  margin-top: var(--s-2);
}

.resource-link {
  display: flex;
  flex-direction: column;
  gap: var(--s-1);
  text-decoration: none;
  padding: var(--s-4) var(--s-5);
  border: 1px solid var(--c-border);
  border-radius: var(--r);
  max-width: 520px;
  transition: border-color 0.15s;
}
.resource-link:hover { border-color: var(--c-accent); }

.resource-title {
  font-size: var(--t-sm);
  font-weight: 600;
  color: var(--c-accent);
}

.resource-desc {
  font-size: var(--t-sm);
  color: var(--c-text-muted);
  line-height: 1.55;
}

/* --------------------------------------------------------------------------
   Pre-launch notice (remove with LAUNCH_HOOK block when print/ebook go live)
   -------------------------------------------------------------------------- */
.prelaunch-notice {
  font-size: var(--t-sm);
  color: var(--c-text-muted);
  background: var(--c-bg-alt);
  border: 1px solid var(--c-border);
  border-left: 3px solid var(--c-accent);
  border-radius: var(--r);
  padding: var(--s-4) var(--s-5);
  max-width: 52ch;
  line-height: 1.6;
  margin-bottom: var(--s-6);
}

/* --------------------------------------------------------------------------
   Buy section link
   -------------------------------------------------------------------------- */
.buy-sub a { color: var(--c-accent); }
.buy-sub a:hover { color: var(--c-accent-hover); }

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */
@media (max-width: 700px) {
  .hero { padding-block: var(--s-12) var(--s-10); }
  .hero h1 { font-size: var(--t-3xl); }
  .book-section { padding-block: var(--s-12); }
  .email-row { flex-direction: column; }
  .email-row .btn-primary { align-self: flex-start; }
  .site-footer .container { flex-direction: column; align-items: flex-start; }
  .book-excerpt { padding: var(--s-6); }
}