/* ============================================================
   Xinix Trucking — style.css
   Direction: "The Letter" — restraint as the brand voice.
   Mobile-first. Modern CSS. One stylesheet for the whole site.
   ============================================================ */

@font-face {
  font-family: "Newsreader";
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url("/static/fonts/newsreader-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: "Fraunces";
  font-style: italic;
  font-weight: 300 600;
  font-display: swap;
  src: url("/static/fonts/fraunces-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;
}

@font-face {
  font-family: "JetBrains Mono";
  font-style: normal;
  font-weight: 100 800;
  font-display: swap;
  src: url("/static/fonts/jetbrains-mono-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;
}

/* ─── DESIGN FRAMEWORK ───────────────────────────────────────────
   One-line adoption: index.css loads the entire framework in correct
   cascade order. Brand primitives in @layer tokens below fill the
   contract; everything else flows from the framework.
   ──────────────────────────────────────────────────────────────── */
@import url("/static/design/index.css");

@layer reset {
  /* xinix-specific reset addition; framework supplies the universals. */
  body { text-rendering: optimizeLegibility; }
}

@layer tokens {
  :root {
    /* The Letter palette — warm ivory paper, ink, single red accent. */
    --paper:      oklch(0.96 0.014 90);
    --paper-2:    oklch(0.93 0.018 88);
    --ink:        oklch(0.21 0.010 60);
    --ink-soft:   oklch(0.42 0.012 60);
    --ink-faint:  oklch(0.60 0.012 60);
    --red:        oklch(0.48 0.17 30);
    --red-soft:   oklch(0.55 0.14 30);

    /* Focus-ring tokens consumed by framework a11y.css (Soueidan pattern). */
    --focus-ring: var(--ink);
    --focus-halo: var(--paper);

    /* Typography. The whole document lives at one reading size; only
       the salutation, signature, and phone are larger. Fluid via clamp. */
    --font-body:  "Newsreader", "Iowan Old Style", "Charter", Georgia, serif;
    --font-hand:  "Fraunces", "Iowan Old Style", Georgia, serif;
    --font-mono:  "JetBrains Mono", ui-monospace, "SF Mono", monospace;

    --size-body:    clamp(1.12rem, 1.00rem + 0.55vw, 1.40rem);
    --size-margin:  clamp(0.72rem, 0.68rem + 0.20vw, 0.80rem);
    --size-salute:  clamp(1.30rem, 1.10rem + 1.20vw, 1.95rem);
    --size-sig:     clamp(2.00rem, 1.40rem + 2.80vw, 3.40rem);
    --size-phone:   clamp(1.80rem, 1.20rem + 3.20vw, 3.40rem);
    --size-h1:      clamp(1.80rem, 1.40rem + 1.80vw, 2.80rem);
    --size-h2:      clamp(1.30rem, 1.10rem + 1.00vw, 1.80rem);
    --measure:      56ch;
  }

  /* Reduce motion respectfully. */
  @media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
      animation-duration: 0.01ms !important;
      animation-iteration-count: 1 !important;
      transition-duration: 0.01ms !important;
    }
  }
}

@layer base {
  body {
    background: var(--paper);
    color: var(--ink);
    font-family: var(--font-body);
    font-size: var(--size-body);
    font-weight: 380;
    line-height: 1.62;
    background-image:
      radial-gradient(ellipse at 50% -10%, oklch(0.97 0.025 75 / 0.6), transparent 65%),
      repeating-linear-gradient(180deg, transparent 0 3px, oklch(0.21 0.010 60 / 0.011) 3px 4px);
    min-block-size: 100svh;
  }
  ::selection { background: var(--ink); color: var(--paper); }

  p { margin: 0; max-inline-size: var(--measure); }
  p + p { margin-block-start: 1em; }

  h1, h2, h3 {
    margin: 0;
    font-family: var(--font-body);
    font-weight: 500;
    line-height: 1.15;
    letter-spacing: -0.012em;
    color: var(--ink);
  }
  h1 { font-size: var(--size-h1); }
  h2 { font-size: var(--size-h2); font-weight: 450; margin-block: 2em 0.5em; }

  /* Inline contextual links inside the prose — a single dotted red rule
     underneath, no color shift. The link looks like type, but reads as
     reachable. */
  a.inline {
    border-block-end: 1px dotted var(--red);
    transition: color 0.2s, border-color 0.2s;
  }
  a.inline:hover { color: var(--red); }

  em, i { font-family: var(--font-hand); font-style: italic; font-variation-settings: "opsz" 24, "wght" 400; }

  ul, ol { margin: 0; padding: 0 0 0 1.25em; max-inline-size: var(--measure); }
  li + li { margin-block-start: 0.4em; }
}

@layer layout {
  /* Mobile-first: a single column with comfortable side padding.
     Marginalia falls below the body on small screens. On wider screens
     a three-column grid pushes the marginalia into a left gutter. */
  .sheet {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-areas:
      "header"
      "main"
      "marg"
      "foot";
    column-gap: 0;
    padding-block: clamp(2rem, 5vw, 6rem);
    padding-inline: clamp(1.25rem, 3vw, 2.5rem);
    max-inline-size: 1180px;
    margin-inline: auto;
  }

  @media (min-width: 880px) {
    .sheet {
      grid-template-columns: 1fr minmax(0, var(--measure)) 1fr;
      grid-template-areas:
        ".     header  ."
        "marg  main    ."
        ".     foot    .";
      column-gap: clamp(1.5rem, 3vw, 4rem);
    }
  }

  .letterhead { grid-area: header; }
  .main       { grid-area: main; }
  .margin     { grid-area: marg; }
  .pagefoot   { grid-area: foot; }
}

@layer components {

  /* ───── Letterhead ─────
     A near-invisible header. Italic wordmark, location stamp, hairline
     rule below. On the home page this is the only chrome. */
  .letterhead {
    margin-block-end: clamp(2.5rem, 5vw, 4rem);
    padding-block-end: 1.25rem;
    border-block-end: 1px solid var(--ink-faint);
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: baseline;
    gap: 0.6rem 1rem;
    font-size: var(--size-margin);
    font-family: var(--font-mono);
    text-transform: uppercase;
    letter-spacing: 0.18em;
    color: var(--ink-soft);
  }
  .letterhead__mark {
    font-family: var(--font-hand);
    font-style: italic;
    font-variation-settings: "opsz" 36, "wght" 400;
    text-transform: none;
    letter-spacing: 0;
    font-size: clamp(1.05rem, 0.95rem + 0.5vw, 1.35rem);
    color: var(--ink);
  }
  .letterhead__mark a:hover { color: var(--red); }

  /* On supporting pages, the letterhead also carries a "← back" cue. */
  .letterhead__back {
    font-family: var(--font-mono);
    font-size: var(--size-margin);
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: var(--ink-soft);
  }
  .letterhead__back:hover { color: var(--red); }

  /* ───── Marginalia ─────
     Operational facts as quiet side-notes. Stacked grid on mobile (one
     line per fact), right-aligned column on desktop. */
  .margin {
    font-family: var(--font-mono);
    font-size: var(--size-margin);
    color: var(--ink-soft);
    line-height: 1.7;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    border-block-start: 1px solid var(--ink-faint);
    padding-block-start: 1.5rem;
    margin-block-start: 2rem;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(160px, 100%), 1fr));
    gap: 1.5rem;
  }
  .margin h4 {
    font-family: var(--font-mono);
    font-weight: 700;
    color: var(--ink);
    font-size: var(--size-margin);
    margin: 0 0 0.3rem 0;
    letter-spacing: 0.12em;
  }
  .margin p {
    font-family: var(--font-mono);
    color: var(--ink-soft);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    line-height: 1.7;
    font-size: var(--size-margin);
    max-inline-size: none;
  }
  .margin a {
    color: var(--ink);
    border-block-end: 1px dotted var(--ink-faint);
  }
  .margin a:hover { color: var(--red); }

  @media (min-width: 880px) {
    .margin {
      align-self: start;
      padding-block-start: 0.4rem;
      margin-block-start: 0;
      border-block-start: 0;
      text-align: end;
      display: block;
    }
    .margin section + section { margin-block-start: 1.5rem; }
  }

  /* ───── Letter prose (home) ─────
     One column of running prose. Single italic salutation. A red drop-
     cap on the opening paragraph. An indented italic aside for the
     Sarah quote, framed like Fernando's marginal reference. */
  .letter__salute {
    font-family: var(--font-hand);
    font-style: italic;
    font-variation-settings: "opsz" 60, "wght" 380;
    font-size: var(--size-salute);
    line-height: 1.2;
    color: var(--ink);
    margin-block-end: 1.4rem;
  }

  .letter__body > p:first-of-type::first-letter {
    font-family: var(--font-hand);
    font-style: italic;
    font-variation-settings: "opsz" 144, "wght" 380;
    float: inline-start;
    font-size: clamp(3.2rem, 2rem + 4vw, 5rem);
    line-height: 0.85;
    margin-inline-end: 0.6rem;
    margin-block-start: 0.4rem;
    margin-block-end: -0.2rem;
    color: var(--red);
  }

  .aside {
    margin-block: 1.5em;
    padding-inline-start: 1.5rem;
    border-inline-start: 2px solid var(--red);
    font-family: var(--font-hand);
    font-style: italic;
    font-variation-settings: "opsz" 60, "wght" 380;
    color: var(--ink);
    line-height: 1.45;
  }
  .aside cite {
    display: block;
    margin-block-start: 0.4rem;
    font-family: var(--font-mono);
    font-style: normal;
    font-size: var(--size-margin);
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--ink-soft);
  }

  /* ───── Signature ─────
     Closing block — italic name large, role tag small, phone larger,
     location/coverage as a footnote stamp. Used on home and contact. */
  .signature {
    margin-block-start: clamp(2.5rem, 5vw, 4rem);
    padding-block-start: 1.5rem;
    border-block-start: 1px solid var(--ink-faint);
  }
  .signature__name {
    font-family: var(--font-hand);
    font-style: italic;
    font-variation-settings: "opsz" 144, "wght" 380;
    font-size: var(--size-sig);
    line-height: 1.0;
    color: var(--ink);
    letter-spacing: -0.015em;
  }
  .signature__role {
    font-family: var(--font-mono);
    font-size: var(--size-margin);
    color: var(--ink-soft);
    text-transform: uppercase;
    letter-spacing: 0.14em;
    margin-block-start: 0.5rem;
  }
  .signature__phone {
    display: inline-block;
    margin-block-start: 1.5rem;
    font-family: var(--font-mono);
    font-weight: 500;
    font-size: var(--size-phone);
    line-height: 1.0;
    letter-spacing: -0.02em;
    color: var(--ink);
    border-block-end: 2px solid var(--red);
    padding-block-end: 0.2rem;
    min-block-size: 44px;  /* touch target */
    transition: color 0.2s;
  }
  .signature__phone:hover,
  .signature__phone:focus-visible { color: var(--red); }
  .signature__where {
    margin-block-start: 1.2rem;
    font-family: var(--font-mono);
    font-size: var(--size-margin);
    color: var(--ink-soft);
    text-transform: uppercase;
    letter-spacing: 0.14em;
    line-height: 1.7;
  }

  /* ───── Page foot ─────
     Three quiet rows at the bottom of every page, separated by hairline
     space. Authority info, then the site nav, then the language /
     external-review row. Mobile-first: each row wraps naturally. */
  .pagefoot {
    margin-block-start: clamp(3rem, 5vw, 4rem);
    padding-block-start: 1.5rem;
    border-block-start: 1px solid var(--ink-faint);
    font-family: var(--font-mono);
    font-size: var(--size-margin);
    color: var(--ink-faint);
    text-transform: uppercase;
    letter-spacing: 0.14em;
    line-height: 1.8;
    display: grid;
    gap: 0.75rem;
  }
  .pagefoot__authority,
  .pagefoot__nav,
  .pagefoot__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem 1rem;
    align-items: baseline;
  }
  .pagefoot__authority { justify-content: space-between; gap: 0.4rem 1.5rem; }
  .pagefoot__nav       { gap: 0.4rem 1.25rem; }
  .pagefoot__meta      { justify-content: space-between; gap: 0.4rem 1.5rem; color: var(--ink-faint); }

  .pagefoot a {
    color: var(--ink-soft);
    border-block-end: 1px dotted var(--ink-faint);
  }
  .pagefoot a:hover,
  .pagefoot a:focus-visible { color: var(--red); }

  .pagefoot__nav a[aria-current="page"] {
    color: var(--ink);
    border-block-end-color: var(--red);
  }

  .pagefoot__meta a[rel~="external"]::after {
    content: " ↗";
    color: var(--ink-faint);
  }
}

@layer pages {

  /* ───── Supporting-page structure ─────
     Lighter chrome than the Letter. Heading + structured prose +
     pricing cards on mobile / table on desktop. */
  .page__title {
    font-family: var(--font-hand);
    font-style: italic;
    font-variation-settings: "opsz" 96, "wght" 380;
    font-size: var(--size-salute);
    color: var(--ink);
    line-height: 1.15;
    margin-block-end: 0.5rem;
    letter-spacing: -0.005em;
  }
  .page__lede {
    font-family: var(--font-body);
    font-size: var(--size-body);
    color: var(--ink);
    line-height: 1.62;
    margin-block-end: 1.5em;
    max-inline-size: var(--measure);
  }

  /* ───── Service / pricing cards ─────
     Mobile-first stacked cards. On wider screens they remain cards (not
     a table) but two-column for some pages. Pricing is the rate, set
     in mono, presented as a typographic anchor. */
  .service {
    margin-block: 1.5em;
    padding-block: 1.5em;
    border-block-end: 1px solid var(--ink-faint);
  }
  .service:last-of-type { border-block-end: 0; }
  .service__name {
    font-family: var(--font-body);
    font-weight: 500;
    font-size: var(--size-h2);
    color: var(--ink);
    line-height: 1.15;
    letter-spacing: -0.008em;
    margin-block-end: 0.3em;
  }
  .service__name em { color: var(--red-soft); }
  .service__rate {
    font-family: var(--font-mono);
    font-weight: 500;
    font-size: clamp(1.15rem, 1.00rem + 0.60vw, 1.40rem);
    color: var(--ink);
    margin-block: 0.6em;
    font-variant-numeric: tabular-nums;
  }
  .service__rate small {
    font-family: var(--font-mono);
    font-weight: 400;
    color: var(--ink-soft);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-size: var(--size-margin);
    margin-inline-start: 1ch;
  }
  .service__note { max-inline-size: var(--measure); }

  /* On wider screens, two-up layout for the services index. */
  @media (min-width: 880px) {
    .services-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 3rem; }
    .services-grid .service { border-block-end: 1px solid var(--ink-faint); }
  }

  /* ───── Inline definition list ─────
     Used on long-distance / specialty / contact pages for plain key/value
     facts. Stacked on mobile, two-column on desktop. */
  .facts {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0;
    margin-block: 1.5em;
    border-block-start: 1px solid var(--ink-faint);
  }
  .facts > div {
    padding-block: 0.9em;
    border-block-end: 1px solid var(--ink-faint);
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.2em;
  }
  .facts dt {
    font-family: var(--font-mono);
    font-size: var(--size-margin);
    text-transform: uppercase;
    letter-spacing: 0.10em;
    color: var(--ink-soft);
  }
  .facts dd {
    margin: 0;
    font-family: var(--font-body);
    font-size: var(--size-body);
    color: var(--ink);
  }
  @media (min-width: 720px) {
    .facts > div {
      grid-template-columns: 14ch 1fr;
      gap: 1.5rem;
      align-items: baseline;
    }
    .facts dt { padding-block-start: 0.15em; }
  }

  /* ───── Coverage list ─────
     Service-area cities as a tight column list. Mobile-first single
     column, two/three columns on wider screens. */
  .coverage {
    list-style: none;
    padding: 0;
    margin: 1.5em 0;
    max-inline-size: var(--measure);
    columns: 1;
    column-gap: 2rem;
  }
  .coverage li {
    padding-block: 0.4em;
    border-block-end: 1px dotted var(--ink-faint);
    font-family: var(--font-body);
    color: var(--ink);
    break-inside: avoid;
  }
  @media (min-width: 600px) { .coverage { columns: 2; } }
  @media (min-width: 880px) { .coverage { columns: 2; } }

  /* ───── Inline phone callout ─────
     Smaller version of the home phone, embedded mid-page. */
  .callout {
    margin-block: 2em;
    padding-block: 1.25em;
    border-block: 1px solid var(--ink-faint);
  }
  .callout__phone {
    display: inline-block;
    font-family: var(--font-mono);
    font-weight: 500;
    font-size: clamp(1.6rem, 1.0rem + 2.5vw, 2.6rem);
    line-height: 1.0;
    letter-spacing: -0.02em;
    color: var(--ink);
    border-block-end: 2px solid var(--red);
    padding-block-end: 0.15em;
    min-block-size: 44px;
    transition: color 0.2s;
  }
  .callout__phone:hover,
  .callout__phone:focus-visible { color: var(--red); }
  .callout__label {
    font-family: var(--font-mono);
    font-size: var(--size-margin);
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: var(--ink-soft);
    margin-block-end: 0.5em;
  }
}

@layer utilities {
  .visually-hidden {
    position: absolute;
    inline-size: 1px; block-size: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }

  /* Settle-in motion — single slow fade on first paint. */
  @media (prefers-reduced-motion: no-preference) {
    .sheet { animation: settle 1.2s cubic-bezier(0.2, 0.55, 0.2, 1) both; }
    @keyframes settle {
      from { opacity: 0; transform: translateY(0.4rem); }
      to   { opacity: 1; transform: none; }
    }
  }
}