/* ==========================================================================
   LittleMan Dev · page.css
   The document pages: services, pricing, work, about, contact.

   site.css carries the tokens, cursor, nav, type scale and primitives, so
   these pages are unmistakably the same product as the home page. This file
   replaces the 3D panel stage with an ordinary, fast, scrollable document.

   Nothing here starts at opacity:0. The home page earns its reveal because
   it is a sequence; a service page is a thing to read, and a reader who
   arrives from Google should not have to wait for an observer to fire.
   ========================================================================== */

/* ---------- shell ------------------------------------------------------ */

/* The column is the reading measure, not an arbitrary container width. At
   980px the prose inside it (68ch ≈ 686px) sat left-aligned in a centred
   box, which put 230px of space on the left of the text and 524px on the
   right: the page read as shifted, because it was. The shell is now the
   measure itself, so the text column is genuinely centred, and the few
   things that want more room widen out of it deliberately. */
/* 700px, not a rounder number: .prose caps at 68ch, which resolves to about
   686px at the body size. Any shell wider than that reintroduces the same
   asymmetry in miniature, since the text would sit left inside it again. */
:root {
  --measure: 700px;
  --wide: 980px;
}

.doc {
  width: min(var(--measure), calc(100vw - var(--gutter) * 2));
  margin: 0 auto;
  padding-block: clamp(6.5rem, 14vh, 9rem) 3rem;
}

/* Wider than the measure, on purpose: the three-up price grid and the
   full-bleed project screenshots. The width is whatever is available up to
   --wide, so there is no band where the tiers have gone three-up but the
   grid has not yet been allowed to widen — at 900px that would have squeezed
   each card to 233px. Negative margins centre the wider box on the column.
   820px is where .tiers becomes three-up; below it everything stacks and
   the column is the full width anyway. */
@media (min-width: 820px) {
  .doc .bleed,
  .doc .tiers {
    --bleed-w: min(var(--wide), calc(100vw - var(--gutter) * 2));
    width: var(--bleed-w);
    margin-inline: calc((var(--measure) - var(--bleed-w)) / 2);
  }
}

.doc section { margin-bottom: clamp(3rem, 7vh, 5rem); }
.doc section:last-child { margin-bottom: 0; }

/* ---------- breadcrumb ------------------------------------------------- */

.crumb {
  display: flex; flex-wrap: wrap; align-items: center; gap: .45rem;
  font-family: var(--font-mono); font-size: .72rem; letter-spacing: .04em;
  color: var(--ink-faint); margin-bottom: 1.5rem; list-style: none; padding: 0;
}
.crumb li { display: flex; align-items: center; gap: .45rem; }
.crumb li + li::before { content: '/'; color: var(--line); }
/* A breadcrumb is navigation, not a link inside a sentence, so the inline
   exception to WCAG 2.2 SC 2.5.8 does not cover it — and "Home" was 18px
   tall. inline-flex keeps the separators sitting where they were. */
.crumb a {
  color: var(--ink-faint); text-decoration: none;
  display: inline-flex; align-items: center; min-height: 24px;
}
.crumb a:hover { color: var(--accent); }
.crumb [aria-current='page'] { color: var(--ink-soft); }

/* ---------- page head -------------------------------------------------- */

/* The 40ch that reads well for body copy is far too narrow for a 56px
   display line: it broke every page head onto four lines against an empty
   right half. The headline gets its own measure, counted in its OWN font
   size, and the lede keeps the reading measure. */
.doc-head { margin-bottom: clamp(2.2rem, 5vh, 3.4rem); }
.doc-head h1 {
  font-size: clamp(2rem, 5.2vw, 3.5rem);
  line-height: 1.04; letter-spacing: -.032em; font-weight: 700;
  margin: 0 0 1rem; text-wrap: balance; max-width: 19ch;
}
.doc-head.wide h1 { max-width: 20ch; }
.doc-head h1 em { font-style: normal; color: var(--accent); }
.doc-head .lede { max-width: 58ch; }
.doc-head .cta-row { margin-top: 1.6rem; }

/* ---------- prose ------------------------------------------------------ */

.prose { max-width: 68ch; }
.prose > * + * { margin-top: 1rem; }
.prose p { color: var(--ink-soft); line-height: 1.68; font-size: clamp(.95rem, 1.05vw, 1.04rem); }
.prose strong { color: var(--ink); font-weight: 600; }
.prose h2 {
  font-size: clamp(1.35rem, 2.6vw, 1.9rem); line-height: 1.16; letter-spacing: -.022em;
  margin-top: 2.6rem; margin-bottom: .2rem; text-wrap: balance;
}
.prose h2 em { font-style: normal; color: var(--accent); }
.prose h3 {
  font-size: clamp(1rem, 1.4vw, 1.16rem); letter-spacing: -.012em;
  margin-top: 1.9rem; margin-bottom: .1rem;
}
.prose ul, .prose ol { padding-left: 1.15rem; color: var(--ink-soft); line-height: 1.62; }
.prose li { margin-bottom: .5rem; }
.prose li::marker { color: var(--accent); }
.prose a { color: var(--accent); text-underline-offset: 2px; }

/* ---------- a plain definition list of facts --------------------------- */

.facts { display: grid; gap: 0; border-top: 1px solid var(--line-soft); margin: 1.6rem 0; }
.facts > div {
  display: grid; grid-template-columns: 1fr; gap: .15rem;
  padding: .85rem 0; border-bottom: 1px solid var(--line-soft);
}
@media (min-width: 640px) {
  .facts > div { grid-template-columns: 190px minmax(0, 1fr); gap: 1.4rem; align-items: baseline; }
}
.facts dt, .facts .k {
  font-family: var(--font-mono); font-size: .7rem; letter-spacing: .08em;
  text-transform: uppercase; color: var(--ink-faint);
}
.facts dd, .facts .v { margin: 0; color: var(--ink-soft); font-size: .95rem; line-height: 1.6; }
.facts .v strong { color: var(--ink); font-weight: 600; }

/* ---------- included / excluded checklist ------------------------------ */

.checks { list-style: none; padding: 0; margin: 1.2rem 0; display: grid; gap: .5rem; }

/* The tick sits in the padding rather than in its own grid column. As a
   two-column grid this rule silently broke every <li> that held more than
   one node: `<strong>Lead-in</strong> trailing prose` is TWO grid items,
   so the prose was placed in the next free cell — row 2 of the 1.1rem
   tick column — and rendered one word per line. Grid also blockified the
   <strong>, breaking the lead-in onto its own line. Both go away when the
   <li> is an ordinary block and its contents stay inline. */
.checks li {
  position: relative; padding-left: 1.8rem;
  color: var(--ink-soft); font-size: .95rem; line-height: 1.55;
}
.checks li::before {
  content: '✓'; position: absolute; left: 0; top: 0;
  color: var(--accent); font-size: .85rem; line-height: 1.55;
}
.checks li > strong { color: var(--ink); font-weight: 600; }
.checks.no li::before { content: '·'; color: var(--ink-faint); }

/* ---------- price tiers ------------------------------------------------ */

.tiers { display: grid; gap: 1px; background: var(--line-soft); border: 1px solid var(--line); border-radius: 14px; overflow: hidden; margin: 1.8rem 0; }
@media (min-width: 820px) { .tiers { grid-template-columns: repeat(3, 1fr); } }
.tier-card { background: var(--card-2); padding: 1.5rem 1.4rem; display: flex; flex-direction: column; gap: .55rem; }
.tier-card .scale {
  font-family: var(--font-mono); font-size: .68rem; letter-spacing: .1em;
  text-transform: uppercase; color: var(--ink-faint);
}
/* The markup is <h2> (the cards sit directly under the page <h1>, so h3
   would skip a level). This selector still said h3 and matched nothing,
   which left the headings at the inherited 24px and wrapped two of the
   three onto a second line, pushing their checklists out of alignment. */
.tier-card h2 { font-size: 1.08rem; letter-spacing: -.015em; margin: 0; line-height: 1.3; min-height: 2.6em; }
.tier-card .fig {
  font-family: var(--font-display); font-weight: 700; font-size: clamp(1.3rem, 2.4vw, 1.7rem);
  letter-spacing: -.03em; color: var(--accent); font-variant-numeric: tabular-nums;
  margin: .2rem 0 .1rem;
}
/* Two lines reserved here for the same reason as the description below:
   the ranges carry qualifiers of different lengths, and a one-line sub-label
   in one column would lift that column's checklist above its neighbours'. */
.tier-card .fig small {
  display: block; font-size: .68rem; font-weight: 400; letter-spacing: .02em;
  color: var(--ink-faint); font-family: var(--font-mono); margin-top: .3rem;
  line-height: 1.45; min-height: 2.9em;
}
/* Two lines reserved, so a one-line description in one column does not
   shunt that column's checklist out of line with its neighbours. */
.tier-card p { color: var(--ink-soft); font-size: .9rem; line-height: 1.55; margin: 0; min-height: 3.1em; }
.tier-card .checks { margin-top: .4rem; padding-top: .7rem; border-top: 1px solid var(--line-soft); }
.tier-card .checks li { font-size: .85rem; }

/* ---------- FAQ -------------------------------------------------------- */

.faq { border-top: 1px solid var(--line-soft); margin: 1.6rem 0 0; max-width: 68ch; }
.faq details { border-bottom: 1px solid var(--line-soft); }
.faq summary {
  cursor: pointer; list-style: none; padding: 1.05rem 2rem 1.05rem 0; position: relative;
  font-family: var(--font-display); font-weight: 600; font-size: 1rem;
  letter-spacing: -.012em; color: var(--ink);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: '+'; position: absolute; right: .2rem; top: 50%; translate: 0 -50%;
  color: var(--accent); font-weight: 400; font-size: 1.2rem; transition: rotate .3s var(--ease);
}
.faq details[open] summary::after { rotate: 45deg; }
.faq summary:hover { color: var(--accent); }
.faq .a { padding: 0 0 1.15rem; color: var(--ink-soft); font-size: .95rem; line-height: 1.65; max-width: 62ch; }
.faq .a p { margin: 0 0 .7rem; }
.faq .a p:last-child { margin-bottom: 0; }

/* ---------- work index cards ------------------------------------------- */

.work-list { display: grid; gap: 1.4rem; }
@media (min-width: 860px) { .work-list { grid-template-columns: repeat(2, 1fr); } }
.work-card {
  border: 1px solid var(--line); border-radius: 16px; overflow: hidden;
  background: var(--card); display: flex; flex-direction: column;
  transition: transform .5s var(--ease), border-color .4s;
}
.work-card:hover { transform: translateY(-4px); border-color: var(--accent); }
.work-card img { width: 100%; height: auto; display: block; border-bottom: 1px solid var(--line-soft); }
.work-card .body { padding: 1.25rem 1.35rem 1.45rem; display: flex; flex-direction: column; gap: .5rem; }
.work-card h2, .work-card h3 { font-size: 1.1rem; letter-spacing: -.018em; margin: 0; }
.work-card h2 a, .work-card h3 a { color: var(--ink); text-decoration: none; }
.work-card h2 a:hover, .work-card h3 a:hover { color: var(--accent); }
.work-card p { color: var(--ink-soft); font-size: .92rem; line-height: 1.55; margin: 0; }

/* ---------- next steps / cross-links ----------------------------------- */

.next {
  border-top: 1px solid var(--line); margin-top: clamp(3rem, 7vh, 5rem); padding-top: 2rem;
}
.next h3 { font-size: 1.2rem; letter-spacing: -.02em; margin: 0 0 1rem; }
.next-grid { display: grid; gap: .7rem; }
@media (min-width: 700px) { .next-grid { grid-template-columns: repeat(3, 1fr); } }
.next-grid a {
  border: 1px solid var(--line); border-radius: 11px; padding: .9rem 1.05rem;
  text-decoration: none; background: var(--card);
  display: flex; flex-direction: column; gap: .2rem;
  transition: border-color .3s, transform .4s var(--ease);
}
.next-grid a:hover { border-color: var(--accent); transform: translateY(-2px); }
.next-grid .t { font-family: var(--font-display); font-weight: 600; font-size: .95rem; color: var(--ink); letter-spacing: -.012em; }
.next-grid .d { font-size: .82rem; color: var(--ink-faint); line-height: 1.45; }

/* ---------- the real footer -------------------------------------------- */

.site-footer {
  border-top: 1px solid var(--line);
  padding-block: 2.6rem 1.6rem;
}
/* The footer sits outside <main class="doc">, so it does not inherit the
   document's measure. Without this its first column starts at x=0, hard
   against the window edge. The rule that spans the full width is the border
   on top, deliberately; the content inside it lines up with the page. */
.site-footer > * {
  width: min(var(--measure), calc(100vw - var(--gutter) * 2));
  margin-inline: auto;
}
.foot-grid { display: grid; gap: 2rem; }
@media (min-width: 760px) { .foot-grid { grid-template-columns: 1.4fr 1fr 1fr; gap: 2.4rem; } }
.foot-grid h3 {
  font-family: var(--font-mono); font-size: .68rem; letter-spacing: .1em;
  text-transform: uppercase; color: var(--ink-faint); margin: 0 0 .8rem; font-weight: 400;
}
.foot-grid ul { list-style: none; padding: 0; margin: 0; display: grid; gap: .42rem; }
.foot-grid a { color: var(--ink-soft); text-decoration: none; font-size: .9rem; }
.foot-grid a:hover { color: var(--accent); }
.nap { font-style: normal; color: var(--ink-soft); font-size: .9rem; line-height: 1.7; }
.nap strong { color: var(--ink); font-weight: 600; display: block; margin-bottom: .3rem; }
.nap a { color: var(--ink-soft); text-decoration: none; }
.nap a:hover { color: var(--accent); }
.foot-area { color: var(--ink-faint); font-size: .82rem; line-height: 1.6; margin-top: .8rem; }
.foot-base {
  margin-top: 2.2rem; padding-top: 1.2rem; border-top: 1px solid var(--line-soft);
  display: flex; flex-wrap: wrap; gap: .5rem 1.4rem; justify-content: space-between;
  color: var(--ink-faint); font-size: .78rem;
}

/* The legal row. Quiet by default — these are links people look for rather
   than links that need selling — but the same 44px target height as any
   other tappable thing, because "small print" is a typographic choice and
   not a licence to make it hard to hit. */
.foot-legal {
  width: min(var(--measure), calc(100vw - var(--gutter) * 2));
  margin-inline: auto;
  display: flex; flex-wrap: wrap; gap: 0 1.3rem;
  padding-top: .5rem;
}
.foot-legal a {
  color: var(--ink-faint); font-size: .76rem; text-decoration: none;
  display: inline-flex; align-items: center; min-height: 44px;
}
.foot-legal a:hover,
.foot-legal a:focus-visible { color: var(--accent); }

/* ---------- responsive -------------------------------------------------- */

/* 699.98 rather than 700, twice below. This file mixes min-width and
   max-width, and .next-grid goes three-up at (min-width: 700px) — so at
   exactly 700px BOTH sides of the boundary were live, which is the one width
   where a mixed ladder actually contradicts itself. The fractional value
   ends the max-width side just under where the min-width side begins. */
@media (max-width: 699.98px) {
  .doc { padding-block: 5.5rem 2rem; }
}


/* ---------- overrides for the shared primitives ------------------------ */

/* .card is styled for an <h3> on the home page. These pages use <h2> in the
   same slot, because on a services index each card IS a section of the
   document rather than a sub-item of one. */
.doc-page .card h2 {
  font-size: clamp(.98rem, 1.25vw, 1.16rem);
  letter-spacing: -.015em; margin: 0 0 .4rem; line-height: 1.25;
}
.doc-page .card h2 a, .doc-page .card h3 a { color: inherit; text-decoration: none; }
.doc-page .card:hover h2 a, .doc-page .card:hover h3 a { color: var(--accent); }
.doc-page .card { display: flex; flex-direction: column; }
.doc-page .grid-3 + .grid-3 { margin-top: .9rem; }

/* .versus is written for the home page's h3-in-h2 section. Same here. */
.doc-page .versus { margin-block: 1.4rem; }

/* The home page hides .nav-links below 1100px because the chapter rail and
   the scrollbar can reach every section. A document page has neither, so the
   links are the only navigation there is and they wrap instead of vanishing.
   They still disappear on a genuinely narrow phone, where the footer carries
   the full set. */
@media (max-width: 1100px) {
  .doc-page .nav-links { display: flex; flex-wrap: wrap; gap: .55rem .9rem; }
  .doc-page .nav-links a { font-size: .78rem; }
}
@media (max-width: 699.98px) {
  .doc-page .nav-links { display: none; }
}

/* The 3D stage owns .vignette and .grain positioning on the home page; here
   they are the only two background layers, so they sit behind the document. */
.doc-page .vignette, .doc-page .grain { position: fixed; inset: 0; z-index: -1; pointer-events: none; }
.doc-page { background: var(--bg); }