/* ── fonts, served from this domain: no third-party request, no render-blocking
      call to Google, and the page still looks right on a network that blocks them ── */
@font-face{font-family:Archivo;src:url(/assets/fonts/archivo-latin-400-normal.woff2) format('woff2');
  font-weight:400;font-style:normal;font-display:swap;}
@font-face{font-family:Archivo;src:url(/assets/fonts/archivo-latin-400-italic.woff2) format('woff2');
  font-weight:400;font-style:italic;font-display:swap;}
@font-face{font-family:Archivo;src:url(/assets/fonts/archivo-latin-500-normal.woff2) format('woff2');
  font-weight:500;font-style:normal;font-display:swap;}
@font-face{font-family:Archivo;src:url(/assets/fonts/archivo-latin-600-normal.woff2) format('woff2');
  font-weight:600;font-style:normal;font-display:swap;}

/* ══════════════════════════════════════════════════════════════
   THE SITE — one token set, one label, one link, one spacing scale
   ══════════════════════════════════════════════════════════════ */
.bl{
  --paper:#F1F0ED;
  --field:#F7F6F3;
  --ink:#15120E;          /* warm near-black, so the neutrals read as chosen */
  --ink-2:#4C4640;        /* secondary body */
  --ink-3:#7C766D;        /* labels */
  --ink-4:#A19B92;        /* faintest: numbers, placeholders */
  --rule:#C9C5BE;
  --rule-soft:#DCD8D1;
  --accent:#8E3A17;       /* the mela's ground, one step deeper */
  --accent-line:rgba(142,58,23,.36);

  --s1:8px; --s2:16px; --s3:24px; --s4:40px; --s5:56px;

  background:var(--paper);color:var(--ink);
  font-family:"Archivo",Helvetica,Arial,sans-serif;
  font-weight:400;font-size:14.5px;line-height:1.58;
  --sp-line:var(--rule);--sp-dot:var(--ink);--sp-bg:var(--paper);--sp-soft:var(--ink-4);
}
/* The whole block sits further in from the left edge. max-width includes the
   padding (border-box), so it grows with it — otherwise wider margins would
   just squeeze the text. The "- 40px" keeps phones at the 24px floor. */
.bl .page{max-width:1016px;padding-inline:clamp(24px,14vw - 40px,200px);
  padding-block:clamp(56px,9vw,116px) clamp(52px,8vw,88px);}
.bl summary{list-style:none;cursor:pointer;}
.bl summary::-webkit-details-marker{display:none;}

/* ONE link treatment everywhere */
.bl a{color:var(--ink);text-decoration:none;
  border-bottom:1px solid var(--accent-line);padding-bottom:1px;}
.bl a:hover{border-bottom-color:var(--accent);}

/* ONE label treatment everywhere */
.bl .lbl{display:block;font-size:10.5px;letter-spacing:.15em;text-transform:uppercase;
  color:var(--ink-3);font-weight:500;}

/* a cut-out figure, not a boxed photo: no frame, and a little larger, since
   the transparent margins give it less weight than a filled square */
.pic{width:104px;aspect-ratio:1/1;background-image:url("/assets/photo.png");
  background-size:contain;background-position:bottom center;background-repeat:no-repeat;
  margin-bottom:var(--s2);}
.bl h1{margin:0;font-size:clamp(30px,4.6vw,38px);font-weight:500;letter-spacing:-.026em;line-height:1.06;}
.bl .tag{margin:var(--s1) 0 0;font-size:15px;color:var(--ink-2);}
.bl .tag i{font-style:normal;color:var(--ink);font-weight:500;}
.bl .body{margin-top:var(--s3);max-width:58ch;}
.bl .body p{margin:0 0 1.05em;}
.bl .body p:last-child{margin-bottom:0;}

.bl .rows{margin-top:var(--s5);border-top:1px solid var(--ink);}
.bl .entry{border-bottom:1px solid var(--rule);}
.bl .entry > summary,.bl .entry.link{display:grid;grid-template-columns:30px 1fr auto;gap:14px;
  align-items:baseline;padding:19px 0;color:var(--ink);border-bottom:0;}
.bl .entry .n{font-size:10.5px;letter-spacing:.15em;color:var(--ink-4);
  font-variant-numeric:tabular-nums;transition:color .18s;}
.bl .entry .w{font-size:19px;font-weight:500;letter-spacing:-.018em;}
.bl .entry .peek{font-size:12px;color:var(--ink-3);text-align:right;line-height:1.4;white-space:nowrap;}
@media (max-width:720px){.bl .entry .peek{white-space:normal;}}
/* the lights coming up, in miniature */
.bl .entry > summary:hover .n,.bl .entry.link:hover .n{color:var(--accent);}
.bl .entry > summary:hover .w,.bl .entry.link:hover .w{text-decoration:underline;
  text-underline-offset:4px;text-decoration-thickness:1px;}
.bl .sub{padding:2px 0 var(--s3) 44px;max-width:600px;}
@media (max-width:640px){.bl .sub{padding-left:0;}}

.spine{position:relative;padding-left:27px;}
.spine::before{content:"";position:absolute;left:4px;top:.75em;bottom:.6em;width:1px;background:var(--sp-line);}
.spine .now,.spine .then{font-size:10.5px;letter-spacing:.15em;text-transform:uppercase;
  color:var(--sp-soft);display:block;}
.spine .then{margin-top:var(--s3);}
.spine .node{position:relative;margin-top:var(--s3);}
.spine .node.first{margin-top:10px;}
.spine .node::before{content:"";position:absolute;left:-27px;top:.45em;width:7px;height:7px;
  border-radius:50%;border:1px solid var(--sp-dot);background:var(--sp-bg);}
.spine .node h4{margin:0;font-size:14px;font-weight:600;letter-spacing:-.004em;}
.spine .node h4 em{font-style:normal;font-weight:400;color:var(--ink-3);}
.spine .node p{margin:3px 0 0;font-size:13.5px;line-height:1.6;color:var(--ink-2);}

.bl a.door{display:grid;grid-template-columns:132px 1fr;gap:0 18px;color:var(--ink);
  padding:11px 0;border:0;align-items:baseline;}
.bl a.door:first-of-type{padding-top:2px;}
@media (max-width:560px){.door{grid-template-columns:1fr;gap:4px;}}
.door .lbl{white-space:nowrap;transition:color .18s;}
.door .txt{font-size:14.5px;line-height:1.5;}
.door .txt .go{color:var(--ink-4);}
.door:hover .txt{text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:1px;}
.door:hover .lbl{color:var(--accent);}

.back{display:inline-block;font-size:12px;letter-spacing:.06em;color:var(--ink-3);
  margin-bottom:var(--s4);}
.back:hover{color:var(--ink);}
.kick{margin:0 0 var(--s3);}
/* the advisory row now opens with prose before the fork */
.intro{max-width:58ch;font-size:14.5px;line-height:1.62;color:var(--ink-2);
  margin:2px 0 var(--s3);}
.intro p{margin:0 0 .85em;}
.intro p:last-child{margin-bottom:0;}
.intro .lead-in{margin-top:var(--s3);color:var(--ink);}
/* a door with nothing in the label column: one line, and it is the whole row */
.bl a.door.solo{grid-template-columns:1fr;padding-top:2px;}
/* the client list trails off rather than listing "and others" as a client */
.credit dd .among{color:var(--ink-3);white-space:nowrap;}
.qs{margin:1.15em 0 1.4em;padding:0;list-style:none;max-width:58ch;}
.qs li{margin:0 0 .6em;padding-left:1.7em;position:relative;color:var(--ink);}
.qs li::before{content:"—";position:absolute;left:0;color:var(--ink-4);}
.qs.long li{margin-bottom:.95em;line-height:1.55;}
.credits{margin-top:var(--s4);max-width:58ch;}
.credit{display:grid;grid-template-columns:150px 1fr;gap:6px 18px;padding:12px 0;
  border-top:1px solid var(--rule-soft);align-items:baseline;}
@media (max-width:560px){.credit{grid-template-columns:1fr;}}
.credit dt{margin:0;}
.credit dd{margin:0;font-size:14px;line-height:1.55;}
.credit dd .slot{color:var(--accent);}
.cta{margin-top:var(--s4);}
.cta a.big{display:inline-block;font-size:18px;font-weight:500;letter-spacing:-.018em;
  color:var(--ink);border-bottom:1.5px solid var(--accent);padding-bottom:2px;}
.cta a.big:hover{color:var(--accent);}
.cross{margin-top:var(--s5);padding-top:15px;border-top:1px solid var(--rule-soft);
  font-size:13.5px;color:var(--ink-3);}
.lbl-sec{margin:var(--s4) 0 0;border-bottom:1px solid var(--rule);padding-bottom:9px;}
.lbl-sec + *{margin-top:var(--s2);}
.qline{margin:.5em 0 0;padding-left:1.4em;color:var(--ink-2);}
.price{margin:0;display:flex;gap:.6em;align-items:baseline;flex-wrap:wrap;}
.price b{font-weight:600;font-size:16px;}
.price span{color:var(--ink-3);font-size:16px;}

.form{margin-top:18px;max-width:600px;}
.field{margin-top:var(--s3);}
.field:first-child{margin-top:0;}
.field label.lbl{margin-bottom:7px;}
.field .help{font-size:12.5px;color:var(--ink-4);margin:0 0 7px;line-height:1.45;}
.field input[type=text],.field input[type=url],.field input[type=email],.field textarea{
  width:100%;background:var(--field);border:1px solid var(--rule);border-radius:0;
  font-family:inherit;font-size:14.5px;color:var(--ink);padding:11px 12px;line-height:1.5;}
.field textarea{min-height:132px;resize:vertical;}
.field input:focus,.field textarea:focus{outline:2px solid var(--accent);outline-offset:-1px;
  border-color:var(--accent);}
.chips{display:flex;gap:8px;flex-wrap:wrap;}
.chips input{position:absolute;opacity:0;width:0;height:0;}
.chips label{display:inline-block;border:1px solid var(--rule);background:var(--field);
  padding:8px 13px;font-size:13px;color:var(--ink);cursor:pointer;margin:0;}
.chips input:checked + label{background:var(--ink);color:var(--paper);border-color:var(--ink);}
.chips input:focus-visible + label{outline:2px solid var(--accent);outline-offset:2px;}
.submit{margin-top:var(--s3);display:flex;align-items:center;gap:var(--s2);flex-wrap:wrap;}
.submit button{appearance:none;cursor:pointer;background:var(--ink);color:var(--paper);
  border:1px solid var(--ink);font-family:inherit;font-size:15px;font-weight:500;
  padding:12px 26px;letter-spacing:-.01em;}
.submit button:hover{background:var(--accent);border-color:var(--accent);}
.submit .after{font-size:13px;color:var(--ink-3);max-width:34ch;line-height:1.45;}
@media (prefers-reduced-motion: reduce){*{animation:none!important;transition:none!important;}}
/* the honeypot: a real field for bots, invisible and unreachable for people */
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden;}

/* The home page closes with a sentence, in the same type as the bio above it:
   photo, what she has to say, three things to click, then where to find her. */
.signoff{margin:var(--s5) 0 0;font-size:14.5px;line-height:1.58;color:var(--ink);}

/* A page heading for the two advisory pages. They had no <h1> at all before,
   which left them without a top of the hierarchy for readers or for search. */
.bl h1.ph{margin:0 0 var(--s3);font-size:clamp(21px,2.6vw,26px);font-weight:600;
  letter-spacing:-.02em;line-height:1.18;text-wrap:balance;}

/* ── the quieter footer the two advisory pages still use ── */
.foot{margin-top:80px;font-size:12px;line-height:1.5;color:var(--ink-3);}
.foot a{color:var(--ink-3);border-bottom-color:rgba(142,58,23,.28);}
.foot a:hover{color:var(--ink);border-bottom-color:var(--accent);}