/* Fonts are self-hosted (latin + latin-ext), same files the live page uses —
   no third-party request, no Google Fonts consent question. The brief's
   @import line is replaced by these declarations; nothing else changed. */
@font-face { font-family: Oswald; font-style: normal; font-weight: 200 700; font-display: swap;
  src: url(../fonts/oswald-normal-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: Oswald; font-style: normal; font-weight: 200 700; font-display: swap;
  src: url(../fonts/oswald-normal-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: Jost; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url(../fonts/jost-normal-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: Jost; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url(../fonts/jost-normal-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'EB Garamond'; font-style: italic; font-weight: 400 500; font-display: swap;
  src: url(../fonts/eb-garamond-italic-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'EB Garamond'; font-style: italic; font-weight: 400 500; font-display: swap;
  src: url(../fonts/eb-garamond-italic-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

:root {
  /* --- color --- */
  --bone:        #ECE7DA;   /* primary ground */
  --bone-deep:   #E4DECE;   /* alternating sections */
  --bone-light:  #F4F0E6;   /* cards on bone */
  --paper:       #FFFFFF;   /* testimonials only */
  --ink:         #14120F;
  --ink-soft:    rgba(20, 18, 15, .72);
  --ink-muted:   rgba(20, 18, 15, .52);
  --rule:        rgba(20, 18, 15, .18);
  --oxblood:     #7A1420;   /* the single accent — use sparingly */
  --oxblood-dim: #5E0F19;
  --accent-on-ink: #C9552F;  /* eyebrows on ink (Donta's round 2 screenshots; the live site's --red-bright) */
  --rule-cell:     #C9C2AC;  /* hairlines between the week cells */

  --on-ink:        #ECE7DA;
  --on-ink-soft:   rgba(236, 231, 218, .74);
  --on-ink-muted:  rgba(236, 231, 218, .5);
  --rule-on-ink:   rgba(236, 231, 218, .2);

  /* --- type --- */
  --display: 'Oswald', 'Haettenschweiler', 'Arial Narrow', sans-serif;
  --body:    'Jost', 'Futura', 'Century Gothic', system-ui, sans-serif;
  --serif:   'EB Garamond', Georgia, 'Times New Roman', serif;

  --t-xs:   0.75rem;
  --t-sm:   0.8125rem;
  --t-base: 1rem;
  --t-lg:   clamp(1.0625rem, 0.4vw + 0.97rem, 1.1875rem);
  --t-xl:   clamp(1.25rem, 0.8vw + 1.06rem, 1.5rem);
  --t-2xl:  clamp(1.5rem, 1.6vw + 1.12rem, 2rem);
  --t-3xl:  clamp(1.875rem, 3vw + 1.17rem, 2.75rem);
  --t-4xl:  clamp(2.25rem, 5vw + 1.08rem, 4rem);
  --t-5xl:  clamp(2.75rem, 7vw + 1.11rem, 5.5rem);

  --track-label: .16em;
  --track-cta:   .18em;

  /* --- space --- */
  --s-1: 0.25rem;  --s-2: 0.5rem;   --s-3: 0.75rem;  --s-4: 1rem;
  --s-5: 1.5rem;   --s-6: 2rem;     --s-7: 3rem;     --s-8: 4rem;
  --s-9: 6rem;     --s-10: 8rem;

  --section-y: clamp(3.5rem, 7vw, 7rem);
  --gutter:    clamp(1.25rem, 4vw, 3rem);

  /* --- layout --- */
  --w-prose: 34rem;
  --w-page:  72rem;
  --w-wide:  84rem;

  --radius: 2px;       /* almost none, on purpose — no soft cards */
  --lift:   0 18px 40px rgba(20, 18, 15, .16);
  --ease:   cubic-bezier(.2, .7, .3, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--bone);
  color: var(--ink);
  font-family: var(--body);
  font-size: var(--t-base);
  font-weight: 400;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img, svg, video { max-width: 100%; height: auto; display: block; }
button, input, textarea, select { font: inherit; color: inherit; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
  }
}

h1, h2, h3, h4 {
  font-family: var(--display);
  font-weight: 500;
  text-transform: uppercase;
  line-height: 1.02;
  letter-spacing: 0;
  text-wrap: balance;
  margin: 0;
}
h1 { font-size: var(--t-5xl); }
h2 { font-size: var(--t-4xl); }
h3 { font-size: var(--t-2xl); }
h4 { font-size: var(--t-xl); }

/* scripture and pull quotes — the author's voice */
.wotk-verse {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  text-transform: none;
  font-size: var(--t-2xl);
  line-height: 1.34;
  color: var(--oxblood);
  max-width: 22ch;
}

/* a testimonial is a person talking, not scripture — ink, not oxblood */
.wotk-quote {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  font-size: var(--t-xl);
  line-height: 1.42;
  color: var(--ink);
  text-transform: none;
  max-width: 30ch;
}
.wotk-quote-attr {
  font-family: var(--body);
  font-size: var(--t-xs);
  font-style: normal;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--ink-muted);
  margin-top: var(--s-3);
}

.wotk-label {
  font-family: var(--body);
  font-size: var(--t-xs);
  font-weight: 500;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--ink-muted);
  display: block;
}

p { margin: 0 0 var(--s-4); max-width: var(--w-prose); }
.wotk-lead { font-size: var(--t-lg); color: var(--ink-soft); }

a { color: var(--oxblood); text-underline-offset: .18em; }
a:hover { color: var(--ink); }
:focus-visible { outline: 2px solid var(--oxblood); outline-offset: 3px; }

.wotk-container { width: 100%; max-width: var(--w-page); margin-inline: auto; padding-inline: var(--gutter); }
.wotk-section   { padding-block: var(--section-y); }
.wotk-section--dark  { background: var(--ink); color: var(--on-ink); }
.wotk-section--dark h1, .wotk-section--dark h2, .wotk-section--dark h3 { color: var(--on-ink); }
.wotk-section--dark p { color: var(--on-ink-soft); }
.wotk-section--deep  { background: var(--bone-deep); }
.wotk-section--paper { background: var(--paper); }

.wotk-rule { border: 0; border-top: 1px solid var(--rule); margin-block: var(--s-6); }

/* the red bar from the book cover — a divider, not decoration */
.wotk-bar { width: 7.5rem; height: 9px; background: var(--oxblood); }

/* paper grain — put on a section wrapper with position: relative */
.wotk-grain::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .5;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.09'/%3E%3C/svg%3E");
}

/* --- nav --- */
.wotk-nav {
  display: flex; align-items: center; gap: var(--s-6);
  padding-block: var(--s-4);
  border-bottom: 1px solid var(--rule);
}
.wotk-nav-links { display: flex; align-items: center; gap: var(--s-5); margin-left: auto; }
.wotk-nav-link {
  font-family: var(--body);
  font-size: var(--t-xs);
  font-weight: 500;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  text-decoration: none;
  color: var(--ink);
  padding-bottom: 3px;
  border-bottom: 2px solid transparent;
}
.wotk-nav-link:hover { border-bottom-color: var(--rule); color: var(--ink); }
/* the free item, and only the free item, wears the red underline */
.wotk-nav-link--free { border-bottom-color: var(--oxblood); color: var(--ink); }

/* --- buttons --- */
/* One primary action per page, repeated top and bottom in identical words. */
.wotk-btn {
  display: inline-block;
  font-family: var(--body);
  font-size: var(--t-xs);
  font-weight: 500;
  letter-spacing: var(--track-cta);
  text-transform: uppercase;
  text-decoration: none;
  text-align: center;
  padding: 1.15rem 2rem;
  min-height: 48px;                 /* touch target — most traffic is mobile */
  border: 1.5px solid var(--ink);
  background: var(--ink);
  color: var(--bone);
  cursor: pointer;
  transition: background .18s var(--ease), border-color .18s var(--ease);
}
.wotk-btn:hover { background: var(--oxblood); border-color: var(--oxblood); color: var(--bone); }
.wotk-btn--ghost { background: transparent; color: var(--ink); }
.wotk-btn--ghost:hover { background: var(--ink); color: var(--bone); }
.wotk-btn--on-ink { background: var(--bone); border-color: var(--bone); color: var(--ink); }
.wotk-btn--on-ink:hover { background: var(--oxblood); border-color: var(--oxblood); color: var(--bone); }
.wotk-btn--full { display: block; width: 100%; }

/* --- forms --- */
.wotk-field {
  width: 100%;
  padding: 1.05rem 1rem;
  min-height: 48px;
  background: var(--bone-light);
  border: 1.5px solid var(--rule);
  border-radius: var(--radius);
  font-size: var(--t-base);
  transition: border-color .18s var(--ease);
}
.wotk-field:focus { border-color: var(--ink); outline: none; }
.wotk-field::placeholder { color: var(--ink-muted); }
.wotk-form-note { font-size: var(--t-sm); color: var(--ink-muted); margin-top: var(--s-3); }

/* --- choice buttons: the questionnaire, and the bulk tiers --- */
.wotk-choices { display: grid; gap: var(--s-3); }
@media (min-width: 40rem) {
  .wotk-choices--row { grid-auto-flow: column; grid-auto-columns: 1fr; }
}
.wotk-choice {
  appearance: none;
  text-align: left;
  background: var(--bone-light);
  border: 1.5px solid var(--rule);
  border-radius: var(--radius);
  padding: 1.25rem 1.25rem;
  min-height: 64px;
  font-size: var(--t-lg);
  cursor: pointer;
  transition: border-color .18s var(--ease), background .18s var(--ease);
}
.wotk-choice:hover { border-color: var(--ink); }
.wotk-choice[aria-pressed="true"],
.wotk-choice.is-selected { border-color: var(--oxblood); border-width: 2px; background: var(--bone-deep); }

.wotk-progress {
  font-family: var(--body);
  font-size: var(--t-xs);
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--ink-muted);
}

/* --- utilities --- */
.wotk-stack   { display: grid; gap: var(--s-4); }
.wotk-stack-6 { display: grid; gap: var(--s-6); }
.wotk-center  { margin-inline: auto; text-align: center; }
.wotk-prose   { max-width: var(--w-prose); }
.wotk-nums    { font-variant-numeric: tabular-nums; }
.wotk-visually-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}