/* ===========================================================================
   desert-v1 — the editorial design floor for coreshift.technology
   Built with the scroll-craft skill, 2026-09-26. Grammar: chaptered editorial.
   Brief: scrollcraft/builds/coreshift-desert/BRIEF.md

   Darrin: "modern meets desert", Editorial range, distinct scenes.
   Resolved as: DESERT IS THE GROUND AND THE LIGHT, MODERN IS THE TYPE AND THE
   INSTRUMENTS. Not adobe texture, not a startup gradient.

   The single largest change is the ground. The site has been dark espresso
   since the 07-31 rebrand; chaptered editorial wants type on a PAPER ground,
   with each chapter landing on its own plate and staying there. So the page is
   bone paper in warm desert light, ink is near-black warm, and brass is the one
   accent — the same brass already in the brand, now doing less and meaning more.

   Loads LAST, after tighten-v1.css. It overrides presentation only: no copy,
   no claim, no price is touched by this file.
   =========================================================================== */

/* --- 1. The rebrand: tokens the scroll-craft engine reads ----------------- */
:root {
  /* Desert light, read as paper rather than as sand texture. */
  --sc-canvas:      #EFE8DB;   /* bone, the chapter-one ground */
  --sc-surface:     #E2D7C4;   /* the deeper plate a media column sits on */
  --sc-ink:         #1A1714;   /* warm near-black; never pure #000 on paper */
  --sc-ink-soft:    #6E6459;
  --sc-accent:      #A96A22;   /* brass, carried over from the existing brand */
  --sc-accent-ink:  #FFF9F0;

  --sc-font-display: 'Archivo', system-ui, sans-serif;
  --sc-font-text:    'IBM Plex Sans', system-ui, sans-serif;
  --sc-font-mono:    'IBM Plex Mono', ui-monospace, monospace;

  /* Editorial measure. The current site runs 70ch, which is a web default, not
     a printed one. A feature column is 58-66 characters. */
  --sc-measure: 62ch;
  --sc-maxw:    1320px;
  --sc-gutter:  clamp(1.25rem, 4vw, 3.5rem);

  /* The chapter grounds. Each one is a hard change, never an interpolation —
     the grammar forbids drift as a continuous gradient. */
  --ch-paper:   #EFE8DB;
  --ch-dusk:    #2A231C;   /* chapter II: the plate darkens, the column tightens */
  --ch-terrain: #C9B291;   /* chapter III: the sand, before it becomes the grid */
  --ch-plate:   #E6DCCB;   /* chapter IV: evidence, on its own plate */
  --ch-close:   #1A1714;   /* the colophon holds, dark and final */
}

/* --- 2. The plate --------------------------------------------------------- */
/* The existing site paints a fixed dark "desert plate" behind everything. On a
   paper ground that reads as a hole, so it is retired here rather than
   recoloured, and the ground is painted honestly on the body. */
.page-home .desert-plate,
body > .desert-plate { display: none; }

body {
  background: var(--ch-paper);
  color: var(--ink, var(--sc-ink));
  --bg: var(--ch-paper);
  --text: var(--sc-ink);
  --muted: #5E554B;
  --faint: #857A6D;
  --line: rgba(26, 23, 20, .16);
  --surface: #E7DECE;
  --surface-2: #E0D4C0;
  --accent: var(--sc-accent);
}

/* Paper has grain. One tiny tiled noise, at very low opacity, is the difference
   between "light theme" and "printed". It is decorative and aria-hidden. */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  opacity: .34;
  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='.86' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.32'/%3E%3C/svg%3E");
}
main, .site-header, .site-footer { position: relative; z-index: 1; }

/* --- 3. Type: an editorial scale, not a web one --------------------------- */
/* 🔴 On this site 1rem = 16px while body copy is 17px (core-v2 sets
   `body{font:400 17px/1.65}` and nothing overrides html). Every value below is
   chosen against 17px. That trap has already cost one silent no-op today. */
body { font-size: 17px; line-height: 1.62; }

h1, h2, h3, h4 { font-family: var(--sc-font-display); color: var(--sc-ink); }

/* Display sizes drop hard from the current 108px. An editorial page earns
   scale through CONTRAST and measure, not through one enormous heading. */
h1 {
  font-size: clamp(2.8rem, 5.2vw, 4.6rem);
  line-height: 1.02;
  letter-spacing: -.028em;
  max-width: 17ch;
  margin: 0 0 1.4rem;
}
h2 {
  font-size: clamp(1.9rem, 2.9vw, 2.9rem);
  line-height: 1.08;
  letter-spacing: -.022em;
  max-width: 22ch;
  margin: 0 0 1.2rem;
}
h3 { font-size: 1.28rem; line-height: 1.28; letter-spacing: -.012em; }
p  { max-width: var(--sc-measure); color: var(--muted); }

.lede, .section-intro {
  font-size: clamp(1.18rem, 1.45vw, 1.42rem);
  line-height: 1.5;
  color: #4A4239;
  max-width: 52ch;
}

/* The eyebrow becomes a FOLIO: chapter number and title, mono, in the margin.
   The grammar allows at most one per three sections, so most are suppressed and
   the chapter head carries its own. */
.eyebrow {
  font-family: var(--sc-font-mono);
  font-size: .72rem;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--sc-accent);
}

/* --- 4. The chapter -------------------------------------------------------- */
/* A chapter lands on its own ground and stays there. Hard cuts, never a
   crossfade, and a hairline rule at the boundary rather than a gradient. */
.section, .closing {
  border-top: 1px solid var(--line);
  padding-block: clamp(3.25rem, 6vw, 6rem);
  background: transparent;
}
.section + .section { border-top-color: rgba(26, 23, 20, .1); }

.chapter-head {
  display: grid;
  grid-template-columns: 7rem minmax(0, 1fr);
  gap: clamp(1rem, 2vw, 2.5rem);
  align-items: start;
  margin-bottom: clamp(1.5rem, 2.6vw, 2.75rem);
}
.chapter-folio {
  font-family: var(--sc-font-mono);
  font-size: .74rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--sc-accent);
  padding-top: .6rem;
  border-top: 2px solid var(--sc-accent);
}
@media (max-width: 720px) {
  .chapter-head { grid-template-columns: 1fr; gap: .75rem; }
}

/* --- 5. The spread --------------------------------------------------------- */
/* Asymmetric by default. A 50/50 split is a web layout; a feature spread is not
   symmetrical, and the imbalance is what makes it read as designed. */
.work-feature,
.two-column,
.contact-grid { grid-template-columns: 1.35fr 1fr; gap: clamp(2rem, 4vw, 4.5rem); align-items: start; }
.work-feature.sub-service { grid-template-columns: 1fr 1.15fr; }

@media (max-width: 900px) {
  .work-feature, .two-column, .contact-grid, .work-feature.sub-service {
    grid-template-columns: 1fr;
  }
}

/* 🔒 Grammar rule, enforced here rather than trusted: MEDIA NEVER BLEEDS UNDER
   TYPE. It sits in its own column with a caption. Anything that used to put
   copy over an image is unwound. */
.editorial-photo, .card-thumb, .app-shot, .clip-frame {
  border-radius: 2px;              /* paper, not a product card */
  border: 1px solid rgba(26, 23, 20, .18);
  box-shadow: 0 18px 38px rgba(42, 35, 28, .13);
  background: var(--ch-plate);
}
figure figcaption, .app-gallery figcaption, .clip figcaption {
  font-family: var(--sc-font-mono);
  font-size: .76rem;
  line-height: 1.55;
  letter-spacing: .01em;
  color: #766B5E;
  margin-top: .6rem;
  padding-left: .75rem;
  border-left: 2px solid var(--sc-accent);
  max-width: 44ch;
}

/* --- 6. Cards become entries ---------------------------------------------- */
/* A catalogue entry on paper is ruled, not boxed. Removing 14 rounded plates
   from a page is most of what makes it stop looking like a SaaS template. */
.work-grid article,
.catalog-grid article,
.price-grid article,
.score-grid article,
.two-column article {
  background: transparent;
  border: 0;
  border-top: 1px solid var(--line);
  border-radius: 0;
  padding: 1.5rem 0 1.75rem;
}
.price-grid article { border-top: 2px solid var(--sc-ink); }

/* --- 7. Instruments ------------------------------------------------------- */
/* The audit, the calculator and the tables are the "modern" half of the brief.
   They read as instruments on paper: mono, ruled, tabular. */
.calculator, .service-sample, .audit-form, #audit-findings {
  background: var(--ch-plate);
  border: 1px solid rgba(26, 23, 20, .2);
  border-radius: 2px;
}
.service-sample dl > div,
#audit-findings article { border-bottom: 1px solid rgba(26, 23, 20, .12); }
.score, .calculator output, .price-grid .price {
  font-family: var(--sc-font-mono);
  font-variant-numeric: tabular-nums;
  letter-spacing: -.02em;
  color: var(--sc-ink);
}

/* --- 8. Controls ---------------------------------------------------------- */
.button {
  background: var(--sc-ink);
  color: var(--ch-paper);
  border-radius: 2px;
  font-family: var(--sc-font-mono);
  font-size: .82rem;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.button:hover { background: var(--sc-accent); color: var(--sc-accent-ink); }
.quiet-button {
  border-radius: 2px;
  border-color: var(--sc-ink);
  color: var(--sc-ink);
  font-family: var(--sc-font-mono);
  font-size: .82rem;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.text-link { color: var(--sc-ink); text-decoration: underline; text-underline-offset: .26em; text-decoration-thickness: 1px; }
.text-link:hover { color: var(--sc-accent); }

/* --- 9. Form fields on paper ---------------------------------------------- */
input, textarea, select, .money-field {
  background: #F6F1E7;
  border-color: rgba(26, 23, 20, .28);
  border-radius: 2px;
  color: var(--sc-ink);
}
input::placeholder, textarea::placeholder { color: #9A8F80; }
.service-choices label { border-radius: 2px; border-color: rgba(26, 23, 20, .22); }
.service-choices label:has(:checked) { border-color: var(--sc-accent); background: #F6F1E7; }

/* --- 10. Reduced motion --------------------------------------------------- */
/* The engine honours this too; this keeps the STATIC composition intact rather
   than leaving a page that only made sense in motion. */
@media (prefers-reduced-motion: reduce) {
  .chapter-folio { border-top-width: 2px; }
}