/* DialWorth — restrained, typographic, one accent.
   Brand brief (spec §13): serif body, geometric sans headings, one accent color,
   generous whitespace. It should read as an engineering report, not a marketing deck. */

:root{
  --paper:#FBFAF7;
  --paper-2:#F3F1EB;
  --ink:#15171B;
  --ink-2:#3E434B;
  --ink-3:#565C66;
  --rule:#CFC9BC;
  --rule-2:#E8E5DD;
  --accent:#0E4F45;
  /* Muted sibling for labels and eyebrows. Full-strength accent is reserved for
     ACTIONS only (primary button, prose links, logo) so it keeps its isolation —
     that is the part of "button colour" research that actually replicates. */
  --accent-muted:#4A6B64;
  --accent-soft:#0E4F450F;
  --warn:#8A4B12;

  --display:"Space Grotesk",ui-sans-serif,system-ui,sans-serif;
  --body:"Source Serif 4","Iowan Old Style",Georgia,serif;
  --mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace;

  --max:1120px;
  --narrow:720px;

  /* Paper grain — feTurbulence, inlined as a data URI. */
  --grain:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)' opacity='0.038'/%3E%3C/svg%3E");
  /* The half-hour interval grid, used as a background motif. The unit of the whole
     analysis, borrowed as the unit of the visual system. */
  --grid-unit:26px;
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  background-color:var(--paper);color:var(--ink);
  /* Fine paper grain. Inline so it costs no request and cannot 404. */
  background-image:var(--grain);
  background-size:200px 200px;
  font-family:var(--body);font-size:18px;line-height:1.62;
  -webkit-font-smoothing:antialiased;
  /* `overflow-x:hidden` here would make body a scroll container and silently break
     position:sticky on the header. `clip` contains overflow without that side effect.
     Wide figures scroll inside their own .figure-scroll wrapper instead. */
  overflow-x:clip;
}

/* Anchor targets must clear the sticky header, or every in-page link lands with its
   heading hidden underneath it. */
[id]{scroll-margin-top:88px}

::selection{background:var(--accent);color:var(--paper)}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:1px}
a{color:inherit;text-decoration:none}
img{max-width:100%;height:auto}

.wrap{max-width:var(--max);margin:0 auto;padding:0 28px}
/* A narrow measure must not re-centre itself, or prose lands in a different left margin
   from the hero above it. Keep the outer gutter identical and cap the content instead. */
.wrap.narrow{max-width:var(--max)}
.wrap.narrow>*{max-width:var(--narrow)}

h1,h2,h3,h4{font-family:var(--display);font-weight:600;line-height:1.12;letter-spacing:-.018em}
h1{font-size:clamp(38px,5.6vw,60px)}
h2{font-size:clamp(27px,3.4vw,38px)}
h3{font-size:19px;letter-spacing:-.01em}
p+p{margin-top:1.05em}

.eyebrow{
  font-family:var(--mono);font-size:11.5px;letter-spacing:.19em;text-transform:uppercase;
  color:var(--accent-muted);display:block;margin-bottom:16px;font-weight:500;
}
.muted{color:var(--ink-2)}
.small{font-size:15px;line-height:1.55}
.fine{font-family:var(--mono);font-size:11.5px;letter-spacing:.06em;color:var(--ink-3);line-height:1.7}
.figure{font-family:var(--mono);font-variant-numeric:tabular-nums}

/* ---------- header ---------- */
header{
  position:sticky;top:0;z-index:60;background:rgba(251,250,247,.92);
  backdrop-filter:saturate(180%) blur(10px);border-bottom:1px solid var(--rule);
}
.nav{display:flex;align-items:center;justify-content:space-between;gap:24px;height:66px}
.logo{font-family:var(--display);font-weight:600;font-size:19px;letter-spacing:-.03em;display:flex;align-items:center;gap:9px}
/* The mark IS the D — the lockup reads [D]ialWorth, so the glyph and the wordmark
   must share a baseline and cap height exactly. */
/* Both dimensions are explicit: an inline <svg> with only a viewBox has no intrinsic
   size, and `width:auto` collapses it to a sliver inside a flex row. 30:32 is the
   mark's aspect ratio. */
.logo .mark{height:19px;width:17.8px;display:block;fill:var(--accent);flex:none}
.logo{gap:1.5px}
footer .logo .mark{height:21px;width:19.7px}
.logo b{font-weight:600;color:var(--accent)}
nav.links{display:flex;gap:26px;font-family:var(--mono);font-size:12px;letter-spacing:.11em;text-transform:uppercase}
nav.links a{color:var(--ink-2);padding:4px 0;border-bottom:1px solid transparent;transition:.15s}
nav.links a:hover,nav.links a[aria-current]{color:var(--accent);border-bottom-color:var(--accent)}
.burger{display:none;background:none;border:0;font-size:20px;cursor:pointer;color:var(--ink)}

.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  font-family:var(--mono);font-size:12px;letter-spacing:.11em;text-transform:uppercase;
  padding:13px 22px;border:1px solid var(--accent);border-radius:1px;transition:.16s;cursor:pointer;
}
.btn-primary{background:var(--accent);color:var(--paper);box-shadow:0 1px 0 rgba(0,0,0,.06)}
.btn-primary:hover{background:#0a3d36;transform:translateY(-1px);box-shadow:0 4px 14px rgba(14,79,69,.18)}
.btn-ghost{background:transparent;color:var(--accent)}
.btn-ghost:hover{background:var(--accent-soft);transform:translateY(-1px)}
.btn:active{transform:translateY(0)}
.btn[disabled]{opacity:.5;cursor:not-allowed}
@media (prefers-reduced-motion:reduce){
  *{transition:none!important;animation:none!important}
  .btn:hover{transform:none}
  html{scroll-behavior:auto}
}

/* ---------- sections ---------- */
section{padding:104px 0;border-top:1px solid var(--rule)}
section:first-of-type{border-top:0}
.section-head{max-width:660px;margin-bottom:52px}
.section-head p{margin-top:18px;color:var(--ink-2)}

/* ---------- hero ----------
   The hero itself stays typographic — depth comes from layered light and the interval
   grid, the actual unit of the analysis. Photography earns its place further down the
   page, where it shows the specific work being measured rather than decorating a headline. */
.hero{padding:104px 0 92px;position:relative;isolation:isolate}
.hero::before{
  content:"";position:absolute;inset:0;z-index:-2;pointer-events:none;
  background:
    radial-gradient(920px 520px at 76% -12%, rgba(14,79,69,.11), transparent 62%),
    radial-gradient(600px 400px at 8% 105%, rgba(138,75,18,.05), transparent 60%),
    linear-gradient(180deg, rgba(243,241,235,.85), rgba(251,250,247,0) 58%);
}
.hero::after{
  content:"";position:absolute;z-index:-1;pointer-events:none;
  top:0;right:0;width:min(62%,720px);height:100%;
  background-image:
    linear-gradient(var(--rule-2) 1px, transparent 1px),
    linear-gradient(90deg, var(--rule-2) 1px, transparent 1px);
  background-size:var(--grid-unit) var(--grid-unit);
  opacity:.55;
  -webkit-mask-image:linear-gradient(255deg, #000 5%, transparent 62%);
  mask-image:linear-gradient(255deg, #000 5%, transparent 62%);
}
.hero .wrap{position:relative}
.hero .lede{font-size:clamp(19px,2.1vw,23px);color:var(--ink-2);max-width:56ch;margin:26px 0 36px}
.hero h1{max-width:17ch}
.cta{display:flex;gap:12px;flex-wrap:wrap}
.hero .fine{margin-top:30px;max-width:60ch}

/* Alternating surfaces give the long pages a rhythm without adding ornament. */
section.tint{background:linear-gradient(180deg, rgba(243,241,235,.62), rgba(243,241,235,.28))}

/* Claim block — the sentence the whole business rests on */
.claim{
  border-left:2px solid var(--accent);padding:4px 0 4px 26px;margin:44px 0 0;
  max-width:62ch;font-size:19px;
}

/* ---------- rule-separated lists ---------- */
.rows{border-top:1px solid var(--rule)}
.row{
  display:grid;grid-template-columns:52px 1fr;gap:26px;
  padding:30px 0;border-bottom:1px solid var(--rule-2);align-items:start;
}
.row .k{font-family:var(--mono);font-size:12px;letter-spacing:.1em;color:var(--accent-muted);padding-top:5px}
.row h3{margin-bottom:9px}
.row p{color:var(--ink-2);max-width:62ch}

.cols{display:grid;grid-template-columns:repeat(3,1fr);gap:0;border-top:1px solid var(--rule)}
.cols>div{padding:34px 30px 34px 0;border-right:1px solid var(--rule-2)}
.cols>div:last-child{border-right:0;padding-right:0}
.cols h3{margin-bottom:10px}
.cols p{color:var(--ink-2);font-size:16.5px;line-height:1.58}
.cols .k{font-family:var(--mono);font-size:11.5px;letter-spacing:.16em;color:var(--accent-muted);display:block;margin-bottom:14px}

/* ---------- engagement tiers ---------- */
.tiers{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--rule);border:1px solid var(--rule)}
.tier{background:var(--paper);padding:34px 28px;display:flex;flex-direction:column}
.tier.featured{background:var(--paper-2)}
.tier .tag{font-family:var(--mono);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--accent-muted);margin-bottom:12px}
.tier h3{font-size:22px}
.tier .amt{font-family:var(--mono);font-size:24px;margin:16px 0 4px;letter-spacing:-.02em}
.tier .dur{font-family:var(--mono);font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3)}
.tier p{font-size:16px;color:var(--ink-2);margin:18px 0 22px;flex:1}
.tier ul{list-style:none;font-size:15.5px;color:var(--ink-2);margin:0 0 24px}
.tier li{padding:7px 0 7px 18px;position:relative}
.tier li::before{content:"—";position:absolute;left:0;color:var(--accent-muted)}

/* ---------- calculator ---------- */
.calc{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:56px;align-items:start}
.field{margin-bottom:20px}
.field label{display:block;font-family:var(--mono);font-size:11.5px;letter-spacing:.11em;text-transform:uppercase;color:var(--ink-2);margin-bottom:7px}
.field .hint{font-family:var(--body);font-size:14px;color:var(--ink-3);letter-spacing:0;text-transform:none;margin-top:5px;display:block}
input,select,textarea{
  width:100%;font-family:var(--mono);font-size:15px;color:var(--ink);
  background:var(--paper);border:1px solid var(--rule);border-radius:1px;padding:12px 13px;transition:.15s;
}
input:focus,select:focus,textarea:focus{outline:0;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
.field-row{display:grid;grid-template-columns:1fr 1fr;gap:14px}
/* Honeypot. Hidden from sighted users AND from screen readers (aria-hidden on the
   wrapper), so only a bot filling every field it can find will trip it. Not display:none
   — some bots skip those deliberately. */
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
fieldset{border:0;margin:0 0 8px}
legend{
  font-family:var(--mono);font-size:11px;letter-spacing:.17em;text-transform:uppercase;
  color:var(--accent-muted);padding:0 0 16px;
}

.result{border:1px solid var(--rule);background:var(--paper-2);padding:34px 30px;position:sticky;top:92px}
.result .headline{font-family:var(--mono);font-size:clamp(26px,3.6vw,38px);letter-spacing:-.03em;line-height:1.18;margin:6px 0 4px}
.result .band{font-family:var(--mono);font-size:14px;color:var(--ink-2);letter-spacing:.02em}
.result .annual{font-family:var(--mono);font-size:13px;color:var(--ink-3);margin-top:14px}
.breakdown{border-top:1px solid var(--rule);margin-top:26px;padding-top:8px}
.breakdown .line{display:flex;justify-content:space-between;gap:16px;padding:11px 0;border-bottom:1px solid var(--rule-2);font-size:15.5px}
.breakdown .line:last-child{border-bottom:0}
.breakdown .line span:last-child{font-family:var(--mono);font-variant-numeric:tabular-nums;white-space:nowrap}
.breakdown .line.total{font-weight:600;border-top:1px solid var(--rule);border-bottom:0;margin-top:4px;padding-top:14px}
.assumption-table{width:100%;border-collapse:collapse;margin-top:14px;font-size:14px}
.assumption-table td{padding:8px 0;border-bottom:1px solid var(--rule-2);vertical-align:top}
.assumption-table td:last-child{text-align:right;font-family:var(--mono);white-space:nowrap;font-size:13px}
.flagged{color:var(--warn)}
.flag-key{font-family:var(--mono);font-size:11px;color:var(--warn);margin-top:12px;display:block}

.note{
  border:1px solid var(--rule);border-left:2px solid var(--accent);
  padding:22px 24px;background:var(--paper-2);font-size:16px;color:var(--ink-2);
}
.note strong{color:var(--ink);font-weight:600}

/* ---------- figures ----------
   Charts are generated from real engine output by dialworth/scripts/site_figures.py.
   Each SVG is self-contained — title, source note and takeaway travel inside the image,
   so it stays honest when someone screenshots it out of context. */
figure{margin:0;border:1px solid var(--rule);background:var(--paper)}
.figure-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}
/* Capped at natural width: these are SVGs so upscaling stays crisp, but it would
   inflate the type inside the chart relative to the page and break the hierarchy. */
figure img{display:block;width:100%;height:auto;padding:26px 28px;margin:0 auto}
figure.wide img{min-width:700px;max-width:790px}
figure.plot img{min-width:660px;max-width:816px}
/* Figures break out of the prose measure — a chart cramped into a text column reads as
   decoration rather than evidence. */
.figure-block{margin:48px 0}
.wrap.narrow>.figure-block{max-width:100%}
.figure-note{
  font-family:var(--mono);font-size:11px;letter-spacing:.05em;color:var(--ink-3);
  margin-top:12px;line-height:1.7;
}
.figure-lead{
  font-family:var(--mono);font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--accent-muted);margin-bottom:14px;
}

/* ---------- contact ---------- */
.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:start}
form .btn{width:100%;margin-top:6px}

/* ---------- journal ---------- */
.posts{border-top:1px solid var(--rule)}
.post{display:grid;grid-template-columns:130px 1fr;gap:26px;padding:30px 0;border-bottom:1px solid var(--rule-2)}
.post .date{font-family:var(--mono);font-size:11.5px;letter-spacing:.09em;color:var(--ink-3);padding-top:6px;text-transform:uppercase}
.post h3{margin-bottom:8px}
.post p{color:var(--ink-2);font-size:16.5px;max-width:64ch}

/* ---------- prose ---------- */
.prose h2{margin:52px 0 18px}
.prose h3{margin:34px 0 12px;font-size:20px}
.prose p,.prose li{color:var(--ink-2);max-width:68ch}
.prose ul,.prose ol{margin:14px 0 14px 22px}
.prose li{padding:5px 0}
.prose code{font-family:var(--mono);font-size:14.5px;background:var(--paper-2);padding:2px 6px;border:1px solid var(--rule-2)}
.formula{
  font-family:var(--mono);font-size:14.5px;background:var(--paper-2);border:1px solid var(--rule);
  padding:18px 20px;margin:18px 0;overflow-x:auto;line-height:1.9;color:var(--ink);
  /* Without this the authored line breaks collapse and the formulas reflow into prose. */
  white-space:pre-wrap;
}

/* ---------- footer ---------- */
footer{border-top:1px solid var(--rule);padding:64px 0 44px;background:var(--paper-2)}
.foot{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:40px}
.foot p{font-size:15.5px;color:var(--ink-2);max-width:34ch;margin-top:14px}
.foot h4{font-family:var(--mono);font-size:11px;letter-spacing:.17em;text-transform:uppercase;color:var(--ink-3);margin-bottom:14px;font-weight:500}
.foot a{display:block;font-size:15.5px;color:var(--ink-2);padding:5px 0}
.foot a:hover{color:var(--accent)}
.copyright{
  border-top:1px solid var(--rule);margin-top:48px;padding-top:24px;
  font-family:var(--mono);font-size:11.5px;color:var(--ink-3);
  display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;
}

/* ---------- responsive ---------- */
@media (max-width:900px){
  .cols,.tiers,.calc,.contact-grid{grid-template-columns:1fr}
  .cols>div{border-right:0;border-bottom:1px solid var(--rule-2);padding-right:0}
  .cols>div:last-child{border-bottom:0}
  .tiers{gap:1px}
  .foot{grid-template-columns:1fr 1fr}
  .result{position:static}
  nav.links{display:none}
  nav.links.open{
    display:flex;position:absolute;top:66px;left:0;right:0;flex-direction:column;gap:0;
    background:var(--paper);border-bottom:1px solid var(--rule);padding:8px 28px 18px;
  }
  nav.links.open a{padding:11px 0}
  .burger{display:block}
  .nav>.btn{display:none}
}
@media (max-width:620px){
  body{font-size:17px}
  section{padding:72px 0}
  .row{grid-template-columns:1fr;gap:10px}
  .post{grid-template-columns:1fr;gap:8px}
  .field-row{grid-template-columns:1fr}
  .foot{grid-template-columns:1fr}
}

/* ---------- surface polish ---------- */
.tier{position:relative;transition:.18s}
.tier.featured::before{
  content:"";position:absolute;top:0;left:0;right:0;height:2px;background:var(--accent);
}
.tier:hover{background:var(--paper-2)}
.tier.featured:hover{background:#EFEDE5}

figure{box-shadow:0 1px 2px rgba(21,23,27,.04), 0 8px 28px -18px rgba(21,23,27,.22)}
.result{box-shadow:0 1px 2px rgba(21,23,27,.04), 0 12px 34px -24px rgba(21,23,27,.28)}

.rows .row{transition:.15s}
.cols>div{transition:.15s}

/* Inline links inside prose get a proper underline, not a colour change alone. */
.prose p a,.note a,.figure-note a{
  color:var(--accent);text-decoration:underline;text-decoration-thickness:1px;
  text-underline-offset:3px;text-decoration-color:rgba(14,79,69,.4);
}
.prose p a:hover,.note a:hover{text-decoration-color:var(--accent)}

/* ---------- photography ----------
   Real photographs, presented as plates in a report: a hairline frame, a faint interval
   grid, and a mono caption. The heavy duotone this replaced was compensating for stock
   imagery that did not deserve to be shown straight. These do. */
.plate{
  position:relative;overflow:hidden;border:1px solid var(--rule);background:var(--paper-2);
  box-shadow:0 1px 2px rgba(21,23,27,.04), 0 10px 30px -20px rgba(21,23,27,.28);
}
.plate img{
  display:block;width:100%;height:100%;object-fit:cover;
  filter:saturate(.94) contrast(1.02);
}
/* No overlay. A grid ruled across a photograph reads as a filter, and a filter reads as
   compensation for a weak image. These images do not need it. */
.plate-caption{
  position:absolute;left:0;right:0;bottom:0;padding:26px 22px 16px;
  font-family:var(--mono);font-size:11px;letter-spacing:.13em;text-transform:uppercase;
  color:rgba(251,250,247,.96);
  background:linear-gradient(0deg, rgba(12,16,15,.82), rgba(12,16,15,.30) 60%, transparent);
}
.plate.wide{aspect-ratio:16/9}
.band{margin:0}
.band .plate{aspect-ratio:16/9}

.split{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:center}
.split .plate{aspect-ratio:4/3}

/* ---------- FAQ ---------- */
.faq details{border-bottom:1px solid var(--rule-2);padding:4px 0}
.faq summary{
  cursor:pointer;list-style:none;padding:22px 0;font-family:var(--display);
  font-size:19px;font-weight:600;letter-spacing:-.01em;display:flex;
  justify-content:space-between;gap:24px;align-items:baseline;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-family:var(--mono);color:var(--accent-muted);font-size:20px;line-height:1}
.faq details[open] summary::after{content:"–"}
.faq summary:hover{color:var(--accent)}
.faq .answer{padding:0 0 24px;color:var(--ink-2);max-width:66ch}
.faq .answer p+p{margin-top:.9em}

/* ---------- print ---------- */
@media print{
  header,footer,.cta,form,.burger{display:none}
  body{background:#fff;font-size:11pt}
  section{padding:18pt 0;border-top:1px solid #ccc}
  figure{break-inside:avoid}
  a[href^="http"]::after{content:" (" attr(href) ")";font-size:9pt;color:#555}
}

@media (max-width:900px){
  .split{grid-template-columns:1fr;gap:28px}
  .hero::after{width:100%;opacity:.4}
}

/* Slogan sits directly under the footer lockup, above the category descriptor. */
.foot .slogan{
  font-family:var(--display);font-size:17px;font-weight:600;color:var(--accent);
  letter-spacing:-.015em;margin-top:14px;max-width:none;
}
.foot .slogan + p{margin-top:8px}