/* ========================================
   yadkikar.com — stylesheet
   KT Notes:
     - One file on purpose. Four pages do not justify eight HTTP
       requests or an import graph. Sections below are ordered
       tokens -> base -> layout -> components -> page types.
     - Mobile-first throughout. Breakpoints only ever add.
     - No external requests: no CDN, no web fonts. Type is a system
       stack, so the site renders instantly and works offline.
     - Palette (revamp, Aug 2026): near-monochrome warm neutrals with
       ONE vibrant orange accent. The vibrant orange (--accent) is for
       graphic elements only — bars, buttons, hovers, focus. Text-size
       links use --accent-strong, a darker orange that passes contrast
       on the light background. Never set body-size text in --accent.
     - Buttons are dark-text-on-orange, not white-on-orange: white on
       #FF5A1F is ~2.9:1 and fails WCAG. Dark ink on it is ~5.8:1.
   ======================================== */

/* ========================================
   1. RESET
   ======================================== */

*,
*::before,
*::after { box-sizing: border-box; }

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

body,
h1, h2, h3, h4,
p, ul, ol, li,
figure, blockquote { margin: 0; padding: 0; }

ul { list-style: none; }

/* height:auto matters: width/height ATTRIBUTES (kept in the HTML for
   pre-layout aspect hints) otherwise pin the rendered height even when
   CSS changes the width. */
img, svg { max-width: 100%; height: auto; display: block; }

a { color: inherit; }

button, input { font: inherit; color: inherit; }


/* ========================================
   2. DESIGN TOKENS
   KT Notes: never hard-code a colour, size, or space in a component.
   If a value is missing, add a token here first.
   ======================================== */

:root {
  /* --- Spacing: 8px grid --- */
  --space-2xs: 0.25rem;   /*  4px */
  --space-xs:  0.5rem;    /*  8px */
  --space-sm:  1rem;      /* 16px */
  --space-md:  1.5rem;    /* 24px */
  --space-lg:  2rem;      /* 32px */
  --space-xl:  3rem;      /* 48px */
  --space-2xl: 4rem;      /* 64px */
  --space-3xl: 6rem;      /* 96px */
  --space-4xl: 8rem;      /* 128px */

  /* --- Type: one system sans for everything.
     The serif body of v1 read "archival"; the revamp is crisp,
     modern, minimal. Hierarchy comes from size + weight, not
     family changes. --- */
  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
               "Helvetica Neue", Arial, sans-serif;

  /* --- Type scale: fluid, clamped --- */
  --text-xs:   0.75rem;
  --text-sm:   0.875rem;
  --text-base: clamp(1rem, 0.95rem + 0.25vw, 1.125rem);
  --text-lg:   clamp(1.1875rem, 1.05rem + 0.6vw, 1.4375rem);
  --text-xl:   clamp(1.5rem, 1.3rem + 1vw, 2rem);
  --text-2xl:  clamp(2rem, 1.6rem + 2vw, 3rem);
  --text-3xl:  clamp(2.75rem, 2rem + 3.5vw, 4.75rem);

  --leading-tight: 1.1;
  --leading-snug: 1.35;
  --leading-normal: 1.5;
  --leading-relaxed: 1.7;

  /* --- Layout --- */
  --measure: 38rem;   /* ~70 characters at reading size */
  --container: 66rem;
  --gutter: var(--space-md);
  --radius: 12px;

  /* --- Colour: light (default) ---
     Contrast on --bg: --ink 17.4:1, --ink-muted 7.1:1,
     --accent-strong 5.1:1 (link size, always underlined).
     --ink on --accent (buttons) 5.8:1. */
  --bg:            #FDFCFB;
  --surface:       #F6F4F1;
  --ink:           #171412;
  --ink-muted:     #5B564F;
  --accent:        #FF5A1F;   /* vibrant orange — graphic use only */
  --accent-strong: #C2410C;   /* darker orange — link text, hovers */
  --accent-soft:   #FFEDE4;   /* whisper tint for hover fills */
  --rule:          #E7E2DB;

  --shadow-hover: 0 8px 24px rgba(23, 20, 18, 0.08);
  --transition: 200ms cubic-bezier(0.4, 0, 0.2, 1);
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg:            #141110;
    --surface:       #1D1917;
    --ink:           #EFEBE6;
    --ink-muted:     #A9A29A;
    --accent:        #FF6B35;
    --accent-strong: #FF9066;
    --accent-soft:   #2A1C14;
    --rule:          #2E2925;

    --shadow-hover: 0 8px 24px rgba(0, 0, 0, 0.4);
  }
}


/* ========================================
   3. BASE
   ======================================== */

body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: var(--text-base);
  line-height: var(--leading-relaxed);
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  /* Guard: nothing on this site may cause a horizontal scroll. */
  overflow-x: hidden;
}

h1, h2, h3, h4 {
  font-weight: 700;
  line-height: var(--leading-tight);
  letter-spacing: -0.02em;
}

strong { font-weight: 650; }

code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.9em;
}

::selection {
  background: var(--accent);
  color: #FFFFFF;
}

/* --- Accessibility utilities --- */

.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;
}

.skip-link {
  position: absolute;
  top: -100%;
  left: var(--space-sm);
  z-index: 20;
  padding: var(--space-xs) var(--space-sm);
  background: var(--ink);
  color: var(--bg);
  font-size: var(--text-sm);
  text-decoration: none;
}

.skip-link:focus { top: var(--space-xs); }

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 2px;
}


/* ========================================
   4. HEADER / NAV
   KT Notes: Only three links, so no hamburger and no JS. Sticky with
   a translucent blur (revamp, Aug 2026) so orientation is always one
   glance away — the bar is 3.5rem tall and visually silent.
   ======================================== */

.header {
  position: sticky;
  top: 0;
  z-index: 10;
  background: color-mix(in srgb, var(--bg) 82%, transparent);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--rule);
}

.nav {
  max-width: var(--container);
  margin: 0 auto;
  padding: var(--space-sm) var(--gutter);
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-sm);
}

.nav__home {
  font-size: var(--text-sm);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-decoration: none;
}

.nav__menu {
  display: flex;
  gap: var(--space-md);
}

.nav__link {
  font-size: var(--text-sm);
  font-weight: 500;
  text-decoration: none;
  color: var(--ink-muted);
  padding-bottom: 3px;
  border-bottom: 2px solid transparent;
  transition: color var(--transition), border-color var(--transition);
}

.nav__link:hover { color: var(--ink); }

.nav__link[aria-current="page"] {
  color: var(--ink);
  border-bottom-color: var(--accent);
}


/* ========================================
   5. PROSE
   The reading surface. Used by Story, Books, essays, and the home
   intro so long-form text is identical everywhere.
   ======================================== */

.prose {
  max-width: var(--measure);
}

.prose > * + * { margin-top: var(--space-md); }

.prose h2 {
  font-size: var(--text-xl);
  margin-top: var(--space-2xl);
}

/* Orange tick before each h2 — the accent used as wayfinding,
   not decoration. */
.prose h2::before {
  content: "";
  display: block;
  width: 2rem;
  height: 3px;
  border-radius: 2px;
  background: var(--accent);
  margin-bottom: var(--space-sm);
}

.prose h3 {
  font-size: var(--text-lg);
  margin-top: var(--space-xl);
}

.prose h2 + p,
.prose h3 + p { margin-top: var(--space-sm); }

.prose em { font-style: italic; }

.prose ul {
  padding-left: var(--space-md);
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}

.prose li {
  position: relative;
  list-style: none;
}

.prose li::before {
  content: "—";
  position: absolute;
  left: calc(var(--space-md) * -1);
  color: var(--accent);
}

.prose blockquote {
  border-left: 3px solid var(--accent);
  padding-left: var(--space-md);
  font-style: italic;
  color: var(--ink-muted);
}

.prose hr {
  border: 0;
  border-top: 1px solid var(--rule);
  margin: var(--space-2xl) 0;
}

.prose a {
  color: var(--accent-strong);
  font-weight: 500;
  text-decoration: none;
  border-bottom: 1px solid currentColor;
  transition: color var(--transition), background var(--transition);
}

.prose a:hover {
  color: var(--ink);
  background: var(--accent-soft);
}


/* ========================================
   6. SECTION: Hero (home only)
   Purpose: one claim, one face. Text left, portrait right.
   KT Notes: decor layers sit behind the portrait and parallax at
   different speeds (see site.js). All decor is aria-hidden and
   clipped by the section, never the page.
   ======================================== */

.hero {
  padding: var(--space-2xl) var(--gutter);
  overflow: hidden;   /* parallax decor must never widen the page */
}

.hero__inner {
  max-width: var(--container);
  margin: 0 auto;
  display: grid;
  gap: var(--space-2xl);
  align-items: center;
}

/* Orange bar above the kicker — the first thing the eye lands on,
   and the only colour above the fold. */
.hero__role::before {
  content: "";
  display: block;
  width: 3rem;
  height: 4px;
  border-radius: 2px;
  background: var(--accent);
  margin-bottom: var(--space-md);
}

.hero__role {
  font-size: var(--text-sm);
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-muted);
  margin-bottom: var(--space-md);
}

.hero__name {
  font-size: var(--text-3xl);
  letter-spacing: -0.035em;
}

.hero__tagline {
  font-size: var(--text-xl);
  font-weight: 400;
  line-height: var(--leading-snug);
  letter-spacing: -0.01em;
  color: var(--ink-muted);
  margin-top: var(--space-md);
  max-width: var(--measure);
}

.hero__more {
  margin-top: var(--space-lg);
  font-size: var(--text-sm);
  font-weight: 600;
}

.hero__more a {
  color: var(--accent-strong);
  text-decoration: none;
  border-bottom: 1px solid currentColor;
  transition: color var(--transition), background var(--transition);
}

.hero__more a:hover {
  color: var(--ink);
  background: var(--accent-soft);
}

/* --- Portrait figure + parallax decor --- */

.hero__figure {
  position: relative;
  max-width: 22rem;
  margin: 0 auto;
  width: 100%;
}

.hero__frame {
  position: relative;
  border-radius: var(--radius);
  will-change: transform;
}

/* Offset orange outline behind the photo — frame as accent. */
.hero__frame::before {
  content: "";
  position: absolute;
  inset: 0;
  transform: translate(14px, 14px);
  border: 2px solid var(--accent);
  border-radius: var(--radius);
  z-index: -1;
}

.hero__portrait {
  width: 100%;
  aspect-ratio: 4 / 5;   /* guard: never trust an image's intrinsic size */
  object-fit: cover;
  border-radius: var(--radius);
  box-shadow: var(--shadow-hover);
}

.hero__decor {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  will-change: transform;
}

.hero__decor--glow {
  width: 120%;
  padding-bottom: 120%;
  top: -20%;
  left: -25%;
  background: radial-gradient(circle,
              color-mix(in srgb, var(--accent) 16%, transparent) 0%,
              transparent 65%);
}

.hero__decor--ring {
  width: 9rem;
  height: 9rem;
  top: -3rem;
  right: -3rem;
  border: 2px solid color-mix(in srgb, var(--accent) 45%, transparent);
}

@media (min-width: 48em) {
  .hero {
    padding-top: var(--space-3xl);
    padding-bottom: var(--space-3xl);
  }

  .hero__inner {
    grid-template-columns: 1.15fr 0.85fr;
    gap: var(--space-3xl);
  }

  .hero__figure { margin: 0 0 0 auto; }
}


/* ========================================
   7. SECTION: Intro (home only)
   ======================================== */

.intro {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--gutter) var(--space-3xl);
}

.intro__more {
  max-width: var(--measure);
  margin-top: var(--space-lg);
  font-size: var(--text-sm);
  font-weight: 500;
}

.intro__more a {
  color: var(--accent-strong);
  text-decoration: none;
  border-bottom: 1px solid currentColor;
  transition: color var(--transition), background var(--transition);
}

.intro__more a:hover {
  color: var(--ink);
  background: var(--accent-soft);
}


/* ========================================
   8. SECTION: Newsletter CTA
   Purpose: the site's only conversion point.
   KT Notes: when NEWSLETTER['action'] in build.py is empty the input
   and button render disabled, with a "Opening shortly." note. That is
   intentional — see build.py.
   ======================================== */

.cta {
  background: var(--surface);
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  padding: var(--space-2xl) var(--gutter);
}

.cta__inner {
  max-width: var(--container);
  margin: 0 auto;
}

.cta__heading {
  font-size: var(--text-xl);
}

.cta__body {
  max-width: var(--measure);
  margin-top: var(--space-sm);
  color: var(--ink-muted);
}

.cta__form {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  margin-top: var(--space-lg);
  max-width: 26rem;
}

.cta__input {
  font-size: var(--text-base);
  padding: var(--space-xs) var(--space-sm);
  min-height: 2.75rem;          /* 44px touch target */
  background: var(--bg);
  border: 1px solid var(--rule);
  border-radius: 8px;
  transition: border-color var(--transition);
}

.cta__input:focus { border-color: var(--accent); }

.cta__input::placeholder { color: var(--ink-muted); }

.cta__input:disabled { opacity: 0.55; cursor: not-allowed; }

/* The submit control itself is the shared .button component (§9a). */

.cta__note {
  font-size: var(--text-sm);
  color: var(--ink-muted);
  margin-top: var(--space-2xs);
}

@media (min-width: 32em) {
  .cta__form { flex-direction: row; }
  .cta__input { flex: 1; }
}


/* ========================================
   9a. COMPONENT: Button
   The one solid-orange element. Dark ink on vibrant orange (5.8:1) —
   never white text here.
   ======================================== */

.button {
  display: inline-block;
  font-size: var(--text-sm);
  font-weight: 700;
  letter-spacing: 0.04em;
  padding: var(--space-xs) var(--space-md);
  min-height: 2.75rem;
  line-height: 1.75rem;
  background: var(--accent);
  color: #171412;
  text-decoration: none;
  text-align: center;
  border: 0;
  border-radius: 8px;
  cursor: pointer;
  transition: transform var(--transition), box-shadow var(--transition),
              filter var(--transition);
}

.button:hover:not(:disabled) {
  filter: brightness(1.06);
  transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(255, 90, 31, 0.35);
}

.button:disabled { opacity: 0.55; cursor: not-allowed; }


/* ========================================
   9b. SECTION: Book feature (home only)
   The one artefact that proves the writing. Cover left, words right.
   ======================================== */

.feature {
  background: var(--surface);
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  padding: var(--space-3xl) var(--gutter);
  overflow: hidden;   /* the parallaxed cover must not widen the page */
}

.feature__inner {
  max-width: var(--container);
  margin: 0 auto;
  display: grid;
  gap: var(--space-2xl);
  align-items: center;
}

.feature__media { display: flex; justify-content: center; }

.feature__kicker {
  font-size: var(--text-sm);
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent-strong);
  margin-bottom: var(--space-sm);
}

.feature__title { font-size: var(--text-2xl); }

.feature__line {
  margin-top: var(--space-md);
  max-width: var(--measure);
  color: var(--ink-muted);
}

.feature__content .button { margin-top: var(--space-lg); }

@media (min-width: 48em) {
  .feature__inner {
    grid-template-columns: 0.8fr 1.2fr;
    gap: var(--space-3xl);
  }
}


/* ========================================
   9c. COMPONENT: Book cover
   A slightly opened 3D cover; straightens on hover. Pure CSS —
   the image itself is flat 2:3 artwork.
   ======================================== */

.book {
  perspective: 1200px;
  will-change: transform;
}

.book__link { display: block; }

.book__cover {
  width: min(16rem, 70vw);
  aspect-ratio: 2 / 3;
  border-radius: 4px 10px 10px 4px;
  transform: rotateY(-18deg);
  transform-origin: left center;
  box-shadow:
    -6px 0 0 0 color-mix(in srgb, var(--ink) 12%, transparent),
    24px 32px 56px rgba(23, 20, 18, 0.28);
  transition: transform 400ms cubic-bezier(0.4, 0, 0.2, 1),
              box-shadow 400ms cubic-bezier(0.4, 0, 0.2, 1);
}

.book:hover .book__cover {
  transform: rotateY(-6deg);
  box-shadow:
    -3px 0 0 0 color-mix(in srgb, var(--ink) 12%, transparent),
    16px 24px 48px rgba(23, 20, 18, 0.24);
}


/* ========================================
   9d. SECTION: Latest writing (home only)
   ======================================== */

.latest {
  padding: var(--space-3xl) var(--gutter);
}

.latest__inner {
  max-width: var(--container);
  margin: 0 auto;
}

.latest__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-sm);
  max-width: var(--measure);
  margin-bottom: var(--space-sm);
}

.latest__title { font-size: var(--text-xl); }

.latest__all {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--accent-strong);
  text-decoration: none;
  border-bottom: 1px solid currentColor;
  transition: color var(--transition), background var(--transition);
}

.latest__all:hover {
  color: var(--ink);
  background: var(--accent-soft);
}


/* ========================================
   10. PAGE TYPE: article (Story, Books, Writing, essays)
   ======================================== */

.page {
  max-width: var(--container);
  margin: 0 auto;
  padding: var(--space-2xl) var(--gutter) var(--space-3xl);
}

.page__head {
  max-width: var(--measure);
  margin-bottom: var(--space-2xl);
}

/* Same orange bar as the hero — one wayfinding mark, used twice. */
.page__head::before {
  content: "";
  display: block;
  width: 3rem;
  height: 4px;
  border-radius: 2px;
  background: var(--accent);
  margin-bottom: var(--space-md);
}

.page__date {
  display: block;
  font-size: var(--text-sm);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-muted);
  margin-bottom: var(--space-sm);
}

.page__title {
  font-size: var(--text-2xl);
  letter-spacing: -0.025em;
}

.page__dek {
  margin-top: var(--space-sm);
  font-size: var(--text-lg);
  font-weight: 400;
  line-height: var(--leading-snug);
  color: var(--ink-muted);
}

.page__back {
  max-width: var(--measure);
  margin-top: var(--space-2xl);
  padding-top: var(--space-md);
  border-top: 1px solid var(--rule);
  font-size: var(--text-sm);
  font-weight: 500;
}

.page__back a {
  color: var(--accent-strong);
  text-decoration: none;
}

.page__back a:hover { color: var(--ink); }

@media (min-width: 48em) {
  .page { padding-top: var(--space-3xl); }
}

/* --- Books page: cover beside the text ---
   KT Notes: the cover column is sticky on desktop so the book stays
   in view while the reader scrolls the pitch and the buy links. */

.bookpage {
  display: grid;
  gap: var(--space-2xl);
  align-items: start;
}

.bookpage__media {
  display: flex;
  justify-content: flex-start;
}

@media (min-width: 48em) {
  .bookpage {
    grid-template-columns: minmax(14rem, 0.7fr) 1.3fr;
    gap: var(--space-3xl);
  }

  .bookpage__media {
    position: sticky;
    top: calc(var(--space-2xl) + var(--space-lg));
  }
}

/* --- Writing index --- */

.entries {
  max-width: var(--measure);
  display: flex;
  flex-direction: column;
}

.entry { border-top: 1px solid var(--rule); }

.entry__link {
  display: block;
  padding: var(--space-lg) 0;
  text-decoration: none;
}

.entry__date {
  font-size: var(--text-xs);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-muted);
}

.entry__title {
  font-size: var(--text-lg);
  margin-top: var(--space-xs);
  transition: color var(--transition);
}

.entry__link:hover .entry__title { color: var(--accent-strong); }

.entry__dek {
  margin-top: var(--space-2xs);
  color: var(--ink-muted);
  font-size: var(--text-sm);
  line-height: var(--leading-normal);
}


/* ========================================
   11. FOOTER
   The three-brand hierarchy. Utility weight only.
   ======================================== */

.footer {
  border-top: 1px solid var(--rule);
  background: var(--surface);
  padding: var(--space-2xl) var(--gutter);
  font-size: var(--text-sm);
  color: var(--ink-muted);
}

.footer__inner {
  max-width: var(--container);
  margin: 0 auto;
  display: grid;
  gap: var(--space-xl);
}

.footer__label {
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-bottom: var(--space-xs);
}

.footer__self { color: var(--ink); }

.footer__list {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}

.footer__list li {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs);
}

.footer__venture a,
.footer__venture span { color: var(--ink); text-decoration: none; }

.footer__venture a {
  border-bottom: 1px solid var(--rule);
  transition: border-color var(--transition);
}

.footer__venture a:hover { border-bottom-color: var(--accent); }

.footer__legal {
  font-size: var(--text-xs);
  padding-top: var(--space-md);
  border-top: 1px solid var(--rule);
}

/* Social links flow horizontally — five short labels don't need a
   column each. */
.footer__list--social {
  flex-direction: row;
  flex-wrap: wrap;
  gap: var(--space-sm);
}

@media (min-width: 48em) {
  .footer__inner {
    grid-template-columns: 1.2fr 1.2fr 1fr;
  }
  .footer__legal { grid-column: 1 / -1; }
}


/* ========================================
   12. MOTION: scroll-reveal
   KT Notes: gated on html.js (added by site.js) so content is never
   hidden when JavaScript is off or fails to load. site.js adds
   .is-visible as each element scrolls into view.
   ======================================== */

.js [data-reveal] {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 700ms cubic-bezier(0.4, 0, 0.2, 1),
              transform 700ms cubic-bezier(0.4, 0, 0.2, 1);
}

.js [data-reveal].is-visible {
  opacity: 1;
  transform: none;
}


/* ========================================
   13. MOTION PREFERENCES
   Reveal and parallax also self-disable in site.js under
   prefers-reduced-motion; this is the CSS belt to that braces.
   ======================================== */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }

  .js [data-reveal] {
    opacity: 1;
    transform: none;
  }
}