/* dianna.css - the single design system for diannacarlton.com.
   ---------------------------------------------------------------------------
   Before 2026-09-09 there was no shared stylesheet at all: all 13 pages carried
   their own inline copy of the tokens, so a rebrand meant 13 parallel edits and
   the copies had already drifted (/unsubscribe/ used different variable names for
   the same colours). This file is the one source of truth. Pages link it through
   /_inc/head.html and add only page-specific rules.

   Tailwind's browser CDN is deliberately NOT loaded any more. It compiled on every
   page load, and this site exists to receive PAID traffic that Dianna is paying
   for. Slow landing pages are an argument against hiring her.

   DIRECTION: the evidence file. She is an ex-attorney who runs ad accounts, so the
   page reads like a well-set case document - warm paper, ruled lines, a serif that
   has an opinion, and every number set in monospace so the proof looks measured
   rather than claimed. Warmth carries the person; the rules and the mono carry the
   authority.
*/

/* ---------- tokens ---------- */
:root {
  /* paper */
  --paper:       #FBF7F0;
  --paper-2:     #F4EDE1;
  --surface:     #FFFFFF;

  /* ink */
  --ink:         #241E1A;
  --ink-soft:    #6B5D52;
  --ink-faint:   #9A8B7C;
  --ink-deep:    #17120F;   /* inverted bands */

  /* accents */
  --accent:      #C2410C;   /* burnt orange, the one sharp colour */
  --accent-hot:  #EA580C;
  --brass:       #B08D57;   /* rules, marks, small ornament */
  --plum:        #4A2F43;

  /* structure */
  --rule:        #E3D7C5;
  --rule-strong: #CDBBA2;
  --rule-invert: rgba(251,247,240,.18);

  /* type */
  --display: 'Fraunces', Georgia, 'Times New Roman', serif;
  --body:    'Karla', ui-sans-serif, system-ui, -apple-system, sans-serif;
  --mono:    'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  /* rhythm */
  --gut:     clamp(1.25rem, 4vw, 2.5rem);
  --section: clamp(4.5rem, 9vw, 8rem);
  --maxw:    72rem;
  --measure: 38rem;
}

/* ---------- reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }
html {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--body);
  font-size: 100%;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  scroll-behavior: smooth;
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important; animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}
body { overflow-x: hidden; line-height: 1.6; }
img, svg, video { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
button, input, textarea, select { font: inherit; color: inherit; }

/* Visible focus everywhere. The site takes paid traffic from every device and
   audience; a focus ring is not optional. */
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 2px;
}

/* ---------- layout ---------- */
.wrap { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gut); }
.wrap--tight { max-width: 56rem; }
.section { padding-block: var(--section); }
.measure { max-width: var(--measure); }
.center { text-align: center; }
.stack > * + * { margin-top: 1.1rem; }

/* ---------- type ---------- */
h1, h2, h3, h4 {
  font-family: var(--display);
  font-weight: 600;
  line-height: 1.06;
  letter-spacing: -0.02em;
  font-variation-settings: 'SOFT' 0, 'WONK' 1;
  text-wrap: balance;
}
.h-hero    { font-size: clamp(2.75rem, 6.2vw, 5.25rem); }
.h-section { font-size: clamp(2rem, 3.6vw, 3.15rem); }
.h-card    { font-size: clamp(1.3rem, 1.6vw, 1.6rem); letter-spacing: -0.015em; }

.lede {
  font-size: clamp(1.1rem, 1.35vw, 1.3rem);
  color: var(--ink-soft);
  line-height: 1.62;
  text-wrap: pretty;
}
p { text-wrap: pretty; }
strong, b { font-weight: 700; color: var(--ink); }

/* The mono label is the authority device: docket numbers, section marks, data
   keys. Always uppercase, always tracked out, never used for running prose. */
.mark {
  font-family: var(--mono);
  font-size: .7rem;
  font-weight: 500;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.mark--accent { color: var(--accent); }
.mark--rule {
  display: flex; align-items: center; gap: .9rem;
}
.mark--rule::after {
  content: ''; flex: 1; height: 1px; background: var(--rule);
}

/* ---------- rules / ornament ---------- */
.rule { height: 1px; background: var(--rule); border: 0; }
.rule--strong { background: var(--rule-strong); }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .55rem;
  font-family: var(--body); font-weight: 700; font-size: .95rem;
  letter-spacing: .01em;
  padding: .95rem 1.6rem;
  border: 1px solid transparent; border-radius: 2px;
  text-decoration: none; cursor: pointer;
  transition: transform .16s ease, background .16s ease, color .16s ease, border-color .16s ease, box-shadow .16s ease;
}
.btn:active { transform: translateY(1px); }
.btn-primary {
  background: var(--accent); color: #fff;
  box-shadow: 0 1px 0 rgba(0,0,0,.06), 0 10px 24px -14px rgba(194,65,12,.85);
}
.btn-primary:hover { background: var(--accent-hot); }
.btn-ghost {
  background: transparent; color: var(--ink); border-color: var(--rule-strong);
}
.btn-ghost:hover { border-color: var(--ink); background: rgba(36,30,26,.03); }
.btn-invert {
  background: var(--paper); color: var(--ink-deep);
}
.btn-invert:hover { background: #fff; }
.btn-arrow::after { content: '\2192'; font-family: var(--mono); }

/* Stacked buttons of different widths read as an accident. On narrow screens
   give them the full column so the hierarchy comes from colour, not size. */
@media (max-width: 520px) {
  .btn { width: 100%; }
}

/* ---------- nav ---------- */
.nav {
  position: sticky; top: 0; z-index: 50;
  background: rgba(251,247,240,.86);
  backdrop-filter: saturate(1.4) blur(10px);
  -webkit-backdrop-filter: saturate(1.4) blur(10px);
  border-bottom: 1px solid transparent;
  transition: border-color .2s ease, background .2s ease;
}
.nav[data-scrolled='true'] { border-bottom-color: var(--rule); }
.nav-in {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1.5rem; min-height: 4.4rem;
}
.brand {
  font-family: var(--display); font-weight: 600; font-size: 1.22rem;
  letter-spacing: -0.02em; text-decoration: none; white-space: nowrap;
}
.brand b { color: var(--accent); font-weight: 600; }
.nav-links { display: flex; align-items: center; gap: 1.9rem; }
.nav-link {
  font-family: var(--mono); font-size: .72rem; letter-spacing: .14em;
  text-transform: uppercase; text-decoration: none; color: var(--ink-soft);
  padding-block: .3rem; position: relative;
  transition: color .16s ease;
}
.nav-link::after {
  content: ''; position: absolute; left: 0; right: 100%; bottom: 0; height: 1px;
  background: var(--accent); transition: right .22s ease;
}
.nav-link:hover { color: var(--ink); }
.nav-link:hover::after { right: 0; }

/* Native <details> drawer: keyboard and screen-reader support for free, no
   inline handlers, and it degrades to a working list if the CSS never arrives. */
.navdrawer { display: none; position: relative; }
.navdrawer > summary {
  list-style: none; cursor: pointer; padding: .5rem; margin: -.5rem;
  display: grid; place-items: center;
}
.navdrawer > summary::-webkit-details-marker { display: none; }
.navdrawer > summary i {
  display: block; width: 22px; height: 2px; background: var(--ink); position: relative;
}
.navdrawer > summary i::before, .navdrawer > summary i::after {
  content: ''; position: absolute; left: 0; width: 22px; height: 2px; background: var(--ink);
}
.navdrawer > summary i::before { top: -7px; }
.navdrawer > summary i::after  { top: 7px; }
.navpanel {
  position: absolute; right: 0; top: calc(100% + .8rem);
  min-width: 13rem; background: var(--surface);
  border: 1px solid var(--rule); border-radius: 3px;
  box-shadow: 0 18px 40px -22px rgba(36,30,26,.5);
  padding: .5rem; display: grid;
}
.navpanel a {
  padding: .7rem .9rem; text-decoration: none; font-size: .95rem;
  border-radius: 2px;
}
.navpanel a:hover { background: var(--paper-2); }

@media (max-width: 860px) {
  .nav-links .nav-link, .nav-links .btn { display: none; }
  .navdrawer { display: block; }
}

/* ---------- hero ---------- */
.hero { position: relative; padding-block: clamp(3.5rem, 7vw, 6.5rem) clamp(3rem, 6vw, 5rem); }
.hero-grid {
  display: grid; grid-template-columns: 1.15fr .85fr;
  gap: clamp(2rem, 5vw, 4.5rem); align-items: center;
}
@media (max-width: 900px) { .hero-grid { grid-template-columns: 1fr; } }

.hero h1 em {
  font-style: italic; color: var(--accent);
  font-variation-settings: 'SOFT' 8, 'WONK' 1;
}
.hero-portrait {
  position: relative; border-radius: 3px; overflow: hidden;
  border: 1px solid var(--rule);
  box-shadow: 0 30px 60px -40px rgba(36,30,26,.55);
}
.hero-portrait img { width: 100%; aspect-ratio: 4/5; object-fit: cover; object-position: center top; }
/* A hairline brass frame offset behind the portrait: one piece of ornament, and
   it reads as a mounted exhibit rather than a stock headshot. */
.hero-portrait::before {
  content: ''; position: absolute; inset: 0;
  border: 1px solid rgba(176,141,87,.5); margin: .55rem; pointer-events: none; z-index: 2;
}

/* ---------- the docket: the proof strip ---------- */
.docket {
  border-block: 1px solid var(--rule);
  background: var(--paper-2);
}
.docket-grid {
  display: grid; grid-template-columns: repeat(4, 1fr);
}
.docket-cell {
  padding: 1.6rem var(--gut);
  border-right: 1px solid var(--rule);
}
.docket-cell:last-child { border-right: 0; }
.docket-val {
  font-family: var(--display); font-weight: 600;
  font-size: clamp(1.5rem, 2.4vw, 2.1rem); line-height: 1;
  letter-spacing: -0.03em; color: var(--ink);
}
.docket-key {
  font-family: var(--mono); font-size: .66rem; letter-spacing: .16em;
  text-transform: uppercase; color: var(--ink-faint); margin-top: .5rem;
}
@media (max-width: 780px) {
  .docket-grid { grid-template-columns: repeat(2, 1fr); }
  .docket-cell:nth-child(2) { border-right: 0; }
  .docket-cell:nth-child(-n+2) { border-bottom: 1px solid var(--rule); }
}

/* ---------- platform ledger ---------- */
.ledger { display: flex; flex-wrap: wrap; gap: .55rem; }
.ledger span {
  font-family: var(--mono); font-size: .74rem; letter-spacing: .1em;
  text-transform: uppercase; color: var(--ink-soft);
  border: 1px solid var(--rule-strong); border-radius: 2px;
  padding: .42rem .8rem; background: var(--surface);
}

/* ---------- cards ---------- */
.grid { display: grid; gap: 1.15rem; }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 980px) { .grid-3, .grid-4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 680px) { .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; } }

.card {
  background: var(--surface); border: 1px solid var(--rule);
  border-radius: 3px; padding: 1.7rem;
  display: flex; flex-direction: column; gap: .8rem;
  transition: border-color .18s ease, transform .18s ease, box-shadow .18s ease;
}
.card--lift:hover {
  border-color: var(--rule-strong); transform: translateY(-3px);
  box-shadow: 0 24px 45px -34px rgba(36,30,26,.6);
}
.card p { color: var(--ink-soft); }
.card-num {
  font-family: var(--mono); font-size: .7rem; letter-spacing: .16em;
  color: var(--accent);
}

/* The two offers get a heavier treatment than the supporting cards. */
.offer {
  background: var(--surface); border: 1px solid var(--rule-strong);
  border-radius: 3px; padding: clamp(1.8rem, 3vw, 2.6rem);
  display: flex; flex-direction: column; gap: 1rem;
  position: relative; overflow: hidden;
}
.offer::before {
  content: ''; position: absolute; inset: 0 0 auto 0; height: 3px;
  background: linear-gradient(90deg, var(--accent), var(--brass));
}
.offer ul { list-style: none; display: grid; gap: .6rem; margin-top: .2rem; }
.offer li { display: flex; gap: .7rem; color: var(--ink-soft); font-size: .97rem; }
.offer li::before {
  content: '\2014'; color: var(--brass); flex: none; font-family: var(--mono);
}

/* ---------- inverted band ---------- */
.band {
  background: var(--ink-deep); color: var(--paper);
}
.band h2, .band h3 { color: var(--paper); }
.band .lede, .band p { color: rgba(251,247,240,.72); }
.band .mark { color: rgba(251,247,240,.5); }
.band .mark--rule::after { background: var(--rule-invert); }
.band .rule { background: var(--rule-invert); }
.band a:not(.btn) { color: var(--paper); }

/* Faint ruled grid, like paper under a document. Decorative only. */
.band--ruled {
  background-image: repeating-linear-gradient(
    to bottom, transparent 0 2.4rem, rgba(251,247,240,.045) 2.4rem 2.41rem);
}

/* ---------- principle callout ---------- */
.principle {
  border-left: 3px solid var(--accent);
  padding: .35rem 0 .35rem 1.5rem;
}
.principle p {
  font-family: var(--display); font-size: clamp(1.25rem, 2.1vw, 1.75rem);
  line-height: 1.32; letter-spacing: -0.015em; color: var(--ink);
}
.band .principle p { color: var(--paper); }

/* ---------- lanes (who it is for) ---------- */
.lane {
  display: grid; grid-template-columns: auto 1fr; gap: 1.1rem;
  padding-block: 1.35rem; border-top: 1px solid var(--rule);
  align-items: start;
}
.lane:last-child { border-bottom: 1px solid var(--rule); }
.lane-key {
  font-family: var(--mono); font-size: .7rem; letter-spacing: .14em;
  color: var(--accent); padding-top: .35rem; min-width: 2.6rem;
}
.lane h3 { font-size: 1.15rem; margin-bottom: .25rem; }
.lane p { color: var(--ink-soft); font-size: .97rem; }

/* ---------- footer ---------- */
.foot {
  background: var(--paper-2); border-top: 1px solid var(--rule);
  padding-block: 3.5rem 2.5rem; font-size: .92rem;
}
.foot-top {
  display: flex; flex-wrap: wrap; gap: 1.5rem;
  justify-content: space-between; align-items: flex-start;
}
.foot-links { display: flex; flex-wrap: wrap; gap: 1.4rem; }
.foot-links a {
  font-family: var(--mono); font-size: .72rem; letter-spacing: .12em;
  text-transform: uppercase; text-decoration: none; color: var(--ink-soft);
}
.foot-links a:hover { color: var(--accent); }
.foot-fine { color: var(--ink-faint); font-size: .8rem; line-height: 1.7; }

/* ---------- reveal ---------- */
/* CSS-only, and it must FAIL OPEN: if the observer never runs (no JS, an error,
   a crawler) the content is visible, never stuck at opacity 0. */
.reveal { opacity: 0; transform: translateY(14px); transition: opacity .6s ease, transform .6s ease; }
.reveal.is-in, .no-js .reveal { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; } }
.d1 { transition-delay: .08s; } .d2 { transition-delay: .16s; } .d3 { transition-delay: .24s; }

/* ---------- utility ---------- */
.hidden { display: none !important; }
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}
.skip {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--accent); color: #fff; padding: .8rem 1.2rem;
}
.skip:focus { left: 0; }

/* ═══════════════════════════════════════════════════════════════════════════
   BOOKING  ·  /call/ and /book-a-call/
   The picker, the intake form and the confirmation states. Kept in the shared
   stylesheet rather than inlined on the two pages, so /book-a-call stays a true
   clone of /call and a style fix lands on both.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ---------- choice buttons (days, times, intake options, tz quick-picks) ---------- */
.choice {
  display: block; width: 100%; text-align: left; cursor: pointer;
  font-family: var(--body); font-size: .97rem; line-height: 1.35;
  color: var(--ink); background: var(--surface);
  border: 1px solid var(--rule); border-radius: 2px;
  padding: .8rem 1rem;
  transition: border-color .16s ease, background .16s ease, box-shadow .16s ease;
}
.choice:hover { border-color: var(--rule-strong); background: var(--paper-2); }
.choice.selected {
  border-color: var(--accent); background: rgba(194,65,12,.07);
  box-shadow: inset 0 0 0 1px var(--accent);
}
.choice b { display: block; font-weight: 700; }
.choice .sub {
  display: block; font-size: .8rem; color: var(--ink-faint);
  margin-top: .12rem; font-family: var(--mono);
}
.choice--time {
  text-align: center; font-variant-numeric: tabular-nums; padding: .65rem .4rem;
}

/* ---------- the two-pane picker ---------- */
.picker { display: grid; grid-template-columns: 15rem 1fr; gap: 1.6rem; }
.picker > * { min-width: 0; }   /* load-bearing: grid children default to min-content */
@media (max-width: 760px) { .picker { grid-template-columns: 1fr; } }

.daylist { display: grid; gap: .5rem; }
@media (max-width: 760px) {
  /* Sideways rather than a dozen stacked full-width buttons above the times. */
  .daylist { grid-auto-flow: column; grid-auto-columns: minmax(9.5rem, 1fr); overflow-x: auto; padding-bottom: .5rem; }
}
.timegrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: .5rem; }
@media (max-width: 460px) { .timegrid { grid-template-columns: repeat(2, 1fr); } }

/* ---------- form ---------- */
.field { margin-bottom: 1.1rem; }
.field label, label {
  display: block; font-family: var(--mono); font-size: .68rem;
  letter-spacing: .14em; text-transform: uppercase; color: var(--ink-faint);
  margin-bottom: .45rem;
}
input[type=text], input[type=email], input[type=url], textarea {
  width: 100%; background: var(--surface); color: var(--ink);
  border: 1px solid var(--rule); border-radius: 2px;
  padding: .8rem .9rem; font-size: 1rem; font-family: var(--body);
}
/* An input with no type attribute renders as a raw UA box. Every input on this
   site carries an explicit type; this rule is the backstop. */
input:not([type]) { width: 100%; padding: .8rem .9rem; }
input:focus, textarea:focus { border-color: var(--accent); }
textarea { resize: vertical; min-height: 5.5rem; }
.fineprint { font-size: .8rem; color: var(--ink-faint); line-height: 1.6; }

.qgroup { border: 0; margin: 0 0 1.4rem; }
.qgroup legend {
  font-family: var(--mono); font-size: .68rem; letter-spacing: .14em;
  text-transform: uppercase; color: var(--ink-faint); margin-bottom: .6rem; padding: 0;
}
.qopts { display: grid; gap: .5rem; }
@media (min-width: 620px) { .qopts { grid-template-columns: repeat(2, 1fr); } }
.field-error { color: var(--accent); font-size: .85rem; margin-top: .5rem; }

.form-card, .pane {
  background: var(--surface); border: 1px solid var(--rule);
  border-radius: 3px; padding: clamp(1.4rem, 3vw, 2rem);
}
.pane--state { text-align: center; padding-block: 2.6rem; }

.reviewlist { display: grid; gap: .8rem; margin-bottom: 1.6rem; }
.reviewlist > div { display: grid; grid-template-columns: 9rem 1fr; gap: 1rem; align-items: start; }
.reviewlist > div.stacked { grid-template-columns: 1fr; gap: .2rem; }
.reviewlist dt {
  font-family: var(--mono); font-size: .68rem; letter-spacing: .12em;
  text-transform: uppercase; color: var(--ink-faint);
}
.reviewlist dd { color: var(--ink); }
@media (max-width: 560px) { .reviewlist > div { grid-template-columns: 1fr; gap: .2rem; } }

.seal {
  width: 3rem; height: 3rem; margin: 0 auto 1rem; border-radius: 50%;
  display: grid; place-items: center; font-size: 1.4rem;
  background: rgba(194,65,12,.1); color: var(--accent);
  border: 1px solid var(--accent);
}

/* ---------- hero promise line (added 2026-09-10) ----------
   Sits above the headline and must read as clearly smaller than it, or the two
   compete. Larger than the mark, smaller than the h1: the ladder is
   mark -> promise -> headline. */
.hero-promise {
  margin-top: .9rem;
  font-family: var(--body);
  font-size: clamp(1.05rem, 1.25vw, 1.28rem);
  font-weight: 700;
  line-height: 1.4;
  color: var(--ink);
  max-width: 34rem;
  text-wrap: pretty;
}

/* ---------- selected work results (added 2026-09-10) ---------- */
.result { gap: .35rem; }
.result-val {
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(2rem, 3.1vw, 2.7rem);
  line-height: 1;
  letter-spacing: -0.035em;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
}
.result-what {
  font-size: 1rem; line-height: 1.35; color: var(--ink); font-weight: 700;
}
.result-who {
  font-family: var(--mono); font-size: .7rem; letter-spacing: .14em;
  text-transform: uppercase; color: var(--ink-faint);
}
.result-more { font-size: .93rem; color: var(--ink-soft); }

/* ---------- credibility strip (added 2026-09-10) ----------
   Used at the top of the booking pages, which are often the first page a referred
   visitor sees. Quiet by design: it states the numbers, it does not shout them. */
.credstrip {
  background: var(--paper-2);
  border-bottom: 1px solid var(--rule);
  padding-block: .85rem;
}
.credstrip .mark { text-align: center; color: var(--ink-soft); }
@media (max-width: 620px) {
  .credstrip .mark { font-size: .62rem; letter-spacing: .1em; line-height: 1.7; }
}

/* ---------- legal prose (added 2026-09-10) ----------
   Used by /privacy/ and /disclaimer/. These pages exist to be READ when someone is
   checking something specific, so the job is scannable headings and a comfortable
   measure, not decoration. */
.prose { max-width: 44rem; }
.prose h2 {
  font-size: clamp(1.15rem, 1.5vw, 1.45rem);
  margin-top: 2.4rem; margin-bottom: .7rem;
  padding-top: 1.4rem; border-top: 1px solid var(--rule);
}
.prose h2:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.prose p { margin-bottom: 1rem; color: var(--ink-soft); line-height: 1.68; }
.prose p.lede { color: var(--ink-soft); margin-bottom: 1.6rem; }
.prose strong { color: var(--ink); }
.prose ul { margin: 0 0 1.1rem 1.1rem; }
.prose li { margin-bottom: .5rem; color: var(--ink-soft); line-height: 1.6; }
.prose a { color: var(--accent); text-underline-offset: .18em; }
.prose code {
  font-family: var(--mono); font-size: .88em;
  background: var(--paper-2); padding: .1rem .35rem; border-radius: 2px;
}