/* Ms. Vijayta Jagnani — "First-Name Basis".
   Off-white paper, charcoal ink, one warm coral accent.
   A conversation, not a brochure: each question sits quiet on the left,
   each answer replies larger from the right. Humanist system sans only —
   this site works offline. Layered cascade. */
@layer base, components;

@layer base {
  :root {
    color-scheme: light dark;
    --paper: #faf7f2;
    --ink: #2b2724;
    --ink-soft: color-mix(in srgb, var(--ink) 58%, transparent);
    --line: color-mix(in srgb, var(--ink) 16%, transparent);
    --accent: #e2725b;       /* warm coral — strokes, dashes, markers */
    --accent-deep: #b34a35;  /* the same coral, deepened for text and buttons */
    --field: color-mix(in srgb, var(--ink) 5%, var(--paper));
  }
  [data-theme="dark"] {
    color-scheme: dark;
    --paper: #211d1a;
    --ink: #ece5db;
    --ink-soft: color-mix(in srgb, var(--ink) 58%, transparent);
    --line: color-mix(in srgb, var(--ink) 18%, transparent);
    --accent: #e78a70;
    --accent-deep: #f2a78f;
    --field: color-mix(in srgb, white 7%, var(--paper));
  }
  @media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
      color-scheme: dark;
      --paper: #211d1a;
      --ink: #ece5db;
      --ink-soft: color-mix(in srgb, var(--ink) 58%, transparent);
      --line: color-mix(in srgb, var(--ink) 18%, transparent);
      --accent: #e78a70;
      --accent-deep: #f2a78f;
      --field: color-mix(in srgb, white 7%, var(--paper));
    }
  }
  * { box-sizing: border-box; }
  body {
    margin: 0;
    background: var(--paper);
    color: var(--ink);
    font: 17px/1.7 system-ui, -apple-system, "Segoe UI", sans-serif;
  }
  h1, h2 {
    font-weight: 700;
    line-height: 1.22;
    letter-spacing: -0.012em;
    margin: 0 0 14px;
  }
  h2 { font-size: clamp(1.4rem, 2.8vw, 1.85rem); }
  a { color: var(--accent-deep); }
  a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible {
    outline: 2px solid var(--accent-deep);
    outline-offset: 2px;
  }
  section { scroll-margin-top: 86px; }
}

@layer components {
  .skip-link {
    position: absolute;
    inset-inline-start: -999px;
    &:focus { inset-inline-start: 12px; inset-block-start: 8px; background: var(--paper); padding: 6px 10px; }
  }

  /* ---- header: who is speaking, and where you might go ---- */
  .site-head {
    position: sticky;
    inset-block-start: 0;
    z-index: 10;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 18px;
    padding: 10px 18px;
    background: color-mix(in srgb, var(--paper) 88%, transparent);
    backdrop-filter: blur(6px);
    border-block-end: 1px solid var(--line);
  }
  .site-identity {
    margin: 0;
    display: grid;
    line-height: 1.3;
    min-width: 0;
  }
  .site-mark {
    font-weight: 700;
    font-size: 0.82rem;
    letter-spacing: 0.14em;
    color: var(--accent-deep);
  }
  .site-name {
    font-weight: 650;
    font-size: 0.95rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .site-tagline { display: none; font-size: 0.78rem; color: var(--ink-soft); }
  @media (min-width: 720px) { .site-tagline { display: block; } }

  .site-nav {
    margin-inline-start: auto;
    display: flex;
    flex-wrap: wrap;
    gap: 2px 16px;
  }
  .menu-link {
    font-size: 0.85rem;
    text-decoration: none;
    color: var(--ink-soft);
    white-space: nowrap;
    &:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
  }
  .menu-link-book { color: var(--accent-deep); font-weight: 600; }

  .theme-toggle {
    border: 1px solid var(--line);
    background: transparent;
    color: var(--ink);
    border-radius: 50%;
    padding: 7px;
    cursor: pointer;
    & .ic-moon { display: none; }
  }
  [data-theme="dark"] .theme-toggle {
    & .ic-sun { display: none; }
    & .ic-moon { display: block; }
  }

  /* ---- the page itself ---- */
  .page-body {
    max-width: 900px;
    margin: 0 auto;
    padding: 26px 20px 90px;
  }
  .page-body section + section { margin-block-start: 64px; }

  .opening { padding-block: 34px 6px; }
  .opening h1 { font-size: clamp(2.1rem, 5.6vw, 3.1rem); margin-block-end: 10px; }
  .opening-role {
    margin: 0 0 16px;
    font-size: 0.9rem;
    letter-spacing: 0.02em;
    color: var(--ink-soft);
  }
  .opening-line { margin: 0; font-size: 1.18rem; max-width: 46ch; }

  /* ---- the conversation: question quiet on the left, answer larger from the right ---- */
  .exchange {
    margin: 0;
    display: grid;
    row-gap: 10px;
  }
  .exchange + .exchange { margin-block-start: 42px; }
  .ask {
    margin: 0;
    font-size: 0.95rem;
    font-weight: 600;
    line-height: 1.5;
    color: var(--ink-soft);
    max-width: 36ch;
    &::before { content: "—"; color: var(--accent); margin-inline-end: 0.55em; }
  }
  .reply {
    margin: 0;
    font-size: clamp(1.12rem, 2vw, 1.3rem);
    line-height: 1.6;
    max-width: 58ch;
  }
  @media (min-width: 720px) {
    .ask { justify-self: start; }
    .reply { justify-self: end; }
  }

  /* ---- everyday reasons, kept plain ---- */
  .everyday-list {
    margin: 14px 0 0;
    padding: 0;
    list-style: none;
    font-size: 0.94em;
    & li { position: relative; padding-inline-start: 1.4em; }
    & li + li { margin-block-start: 8px; }
    & li::before { content: "—"; position: absolute; inset-inline-start: 0; color: var(--accent); }
  }
  .brings-close {
    margin: 30px 0 0;
    color: var(--ink-soft);
    font-size: 1.02rem;
  }

  /* ---- the open door ---- */
  .door-art {
    margin: 44px 0 0;
    & svg { width: min(280px, 82%); display: block; }
    & figcaption { margin-block-start: 8px; font-size: 0.88rem; font-style: italic; color: var(--ink-soft); }
  }
  @media (min-width: 720px) { .door-art { margin-inline-start: auto; width: fit-content; } }
  .art-frame { fill: none; stroke: var(--ink); stroke-width: 3; stroke-linecap: round; }
  .art-door {
    fill: color-mix(in srgb, var(--ink) 5%, var(--paper));
    stroke: var(--ink);
    stroke-width: 3;
    stroke-linejoin: round;
  }
  .art-handle { fill: none; stroke: var(--ink); stroke-width: 3; stroke-linecap: round; }
  .art-glow { fill: color-mix(in srgb, var(--accent) 24%, transparent); }
  .art-slat { fill: none; stroke: var(--accent); stroke-width: 3; stroke-linecap: round; opacity: 0.75; }

  /* ---- about ---- */
  .about-columns { display: grid; gap: 18px; }
  @media (min-width: 640px) { .about-columns { grid-template-columns: 180px 1fr; } }
  .portrait-slot {
    margin: 0;
    display: grid;
    place-items: center;
    align-content: center;
    gap: 8px;
    border: 1px dashed var(--line);
    border-radius: 12px;
    min-height: 170px;
    padding: 14px;
  }
  .monogram {
    font-weight: 700;
    font-size: 2.1rem;
    letter-spacing: 0.05em;
    color: var(--accent-deep);
  }
  .portrait-note { margin: 0; font-size: 0.72rem; color: var(--ink-soft); text-align: center; }
  .about-text p { margin: 0 0 10px; }
  .about-sources { font-size: 0.85rem; color: var(--ink-soft); }

  /* ---- say hello: the form that opens WhatsApp ---- */
  .hello-form {
    display: grid;
    gap: 8px;
    max-width: 520px;
  }
  .form-label {
    font-size: 0.88rem;
    font-weight: 600;
    margin-block-start: 8px;
  }
  .form-optional { font-weight: 400; color: var(--ink-soft); }
  .form-field {
    font: inherit;
    width: 100%;
    padding: 10px 12px;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: var(--field);
    color: inherit;
    resize: vertical;
  }
  .form-field.invalid { border-color: var(--accent); }
  .form-error { min-height: 1.2em; font-size: 0.88rem; color: var(--accent-deep); }
  .form-submit {
    justify-self: start;
    font: inherit;
    font-weight: 650;
    padding: 11px 22px;
    border-radius: 10px;
    border: 0;
    background: var(--accent-deep);
    color: var(--paper);
    cursor: pointer;
    &:hover { filter: brightness(1.05); }
  }
  .form-fallback { margin: 6px 0 0; font-size: 0.9rem; color: var(--ink-soft); }

  /* ---- footer ---- */
  .site-foot {
    border-block-start: 1px solid var(--line);
    padding: 24px 20px 44px;
    text-align: center;
  }
  .foot-line { margin: 0 0 6px; font-size: 0.9rem; }
  .foot-honesty {
    margin: 0 auto;
    font-size: 0.8rem;
    color: var(--ink-soft);
    max-width: 62ch;
  }
}