/* =========================================================
   Ann Roberts, LCSW — redesign prototype
   Single visual world, painted explicitly. The page renders
   as the website, so it deliberately does not follow the
   viewer's light/dark preference.
   ========================================================= */
:root{
  --ink:#1C2E2A;
  --ink-2:#263B35;
  --paper:#FAF7F1;
  --sage:#E6E9E1;
  --brass:#C08E3C;
  --brass-deep:#8A6220;
  --clay:#9C4E39;
  --slate:#4A524C;
  --slate-soft:#6B7269;
  --cream:#EDE9E0;
  --hair:#DCD8CE;
  --hero-gold:#FBDEAE;
  --hdr:76px;
  --measure:68ch;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;background:var(--paper);color:var(--slate);
  font-family:"Karla",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  font-size:18px;line-height:1.72;-webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4,h5{font-family:"Newsreader",Georgia,serif;font-weight:400;line-height:1.2;margin:0;text-wrap:balance}
p{margin:0}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
:focus-visible{outline:2px solid var(--brass);outline-offset:3px;border-radius:2px}
.shell{max-width:1180px;margin:0 auto;padding:0 40px}
.eyebrow{font-size:11px;font-weight:700;letter-spacing:.18em;text-transform:uppercase}

/* ---------------- HEADER ---------------- */
.hdr{
  position:fixed;top:0;left:0;right:0;z-index:60;height:var(--hdr);
  background:var(--ink);color:var(--cream);
  transition:height .28s ease, background-color .28s ease, box-shadow .28s ease;
}
.hdr::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(to bottom,rgba(10,18,16,.55),rgba(10,18,16,0));
  opacity:0;transition:opacity .28s ease;
}
body.is-home .hdr{background:transparent}
body.is-home .hdr::after{opacity:1}
body.scrolled .hdr{height:60px;background:var(--ink);box-shadow:0 1px 0 rgba(192,142,60,.28)}
body.scrolled .hdr::after{opacity:0}
.hdr .shell{height:100%;display:flex;align-items:center;gap:28px;position:relative;z-index:1}

.lockup{display:flex;align-items:center;gap:14px;flex-shrink:0}
.lockup b{font-family:"Newsreader",serif;font-size:22px;font-weight:500;letter-spacing:.035em;color:#fff;line-height:1}
.lockup i{width:1px;height:21px;background:var(--brass);opacity:.8}
.lockup span{font-size:14px;font-weight:700;letter-spacing:.12em;color:var(--brass);white-space:nowrap}

.nav{margin-left:auto;display:flex;align-items:center;gap:26px}
/* Must exclude .btn and .tel: `.nav a` is (0,1,1) and would otherwise beat
   `.btn` (0,1,0), stripping the button's padding and — worse — repainting
   its text cream on the brass ground. */
.nav a:not(.btn){font-size:14px;letter-spacing:.012em;color:var(--cream);opacity:.85;padding:6px 0;border-bottom:2px solid transparent;transition:opacity .18s,border-color .18s}
.nav a:not(.btn):hover{opacity:1}
.nav a.on{opacity:1;color:#fff;border-bottom-color:var(--brass)}
.tel{font-size:14px;color:var(--cream);opacity:.72;letter-spacing:.02em;transition:opacity .18s}
.tel:hover{opacity:1;color:var(--brass)}
.btn{
  display:inline-block;background:var(--brass);color:#1C2E2A;
  font-size:12.5px;font-weight:700;letter-spacing:.05em;
  padding:11px 28px;border-radius:3px;white-space:nowrap;
  transition:background-color .18s,transform .18s;
}
.btn:hover{background:#D3A054;transform:translateY(-1px)}
.btn.ghost{background:transparent;color:var(--brass);border:1px solid var(--brass)}
.btn.ghost:hover{background:var(--brass);color:var(--ink)}
.btn.solid-ink{background:var(--ink);color:#fff}
.btn.solid-ink:hover{background:var(--ink-2)}

.burger{display:none;margin-left:auto;background:none;border:0;padding:10px;cursor:pointer;flex-direction:column;gap:5px}
.burger i{display:block;width:22px;height:1.5px;background:var(--cream);transition:transform .26s,opacity .2s}
body.menu-open .burger i:nth-child(1){transform:translateY(6.5px) rotate(45deg)}
body.menu-open .burger i:nth-child(2){opacity:0}
body.menu-open .burger i:nth-child(3){transform:translateY(-6.5px) rotate(-45deg)}

.drawer{
  position:fixed;inset:0;z-index:55;background:var(--ink);
  padding:calc(var(--hdr) + 24px) 32px 40px;
  display:flex;flex-direction:column;
  opacity:0;visibility:hidden;transition:opacity .26s ease,visibility .26s;
}
body.menu-open .drawer{opacity:1;visibility:visible}
.drawer a.d{
  font-family:"Newsreader",serif;font-size:26px;color:var(--cream);
  padding:15px 0;border-bottom:1px solid rgba(237,233,224,.13);
}
.drawer .dfoot{margin-top:auto;padding-top:28px;display:flex;flex-direction:column;gap:14px}
.drawer .dfoot .tel{text-align:center;font-size:16px;color:var(--brass);opacity:1}
.drawer .btn{text-align:center;padding:15px 28px}

/* ---------------- HOME SEQUENCE (behavior preserved) ---------------- */
.seq{position:relative;width:100%;height:100vh;overflow:hidden;background:#0F1A17}
.slide{position:absolute;inset:0;opacity:0;overflow:hidden;transition:opacity 2s ease-in-out}
.slide.active{opacity:1}
.slide img{
  width:100%;height:100%;object-fit:cover;filter:brightness(.5);
  transform:scale(1);transition:transform 6s ease-in-out;
}
.slide.active img{transform:scale(1.1)}
.slide h1{
  position:absolute;top:20%;left:0;right:0;width:100%;max-width:860px;
  margin:0 auto;padding:0 40px;
  text-transform:capitalize;color:var(--hero-gold);
  font-size:45px;font-weight:700;font-family:"Montserrat",sans-serif;
  text-align:left;line-height:1.3;
  opacity:0;transform:scale(.7) translateY(-20%);
  transition:opacity 2s ease-in-out,transform 6s ease-in-out,top 2s ease-in-out;
}
.slide h1.active{opacity:1;transform:scale(1) translateY(0);top:25%}
.restart{
  position:absolute;right:40px;bottom:40px;z-index:3;
  background:rgba(28,46,42,.72);color:var(--cream);border:1px solid rgba(192,142,60,.45);
  font-family:"Karla",sans-serif;font-size:13px;font-weight:600;letter-spacing:.06em;
  padding:12px 26px;border-radius:3px;cursor:pointer;backdrop-filter:blur(6px);
  transition:background-color .2s,color .2s;
}
.restart:hover{background:var(--brass);color:var(--ink);border-color:var(--brass)}

/* home wayfinding — her own words only */
.wayfind{background:var(--paper);padding:76px 0 84px}
.wayfind .line{
  font-family:"Newsreader",serif;font-style:italic;font-size:30px;line-height:1.42;
  color:var(--ink);max-width:22ch;
}
.wayfind .grid{display:grid;grid-template-columns:1fr 1.35fr;gap:64px;align-items:start}
.wayfind .links{display:grid;gap:1px;background:var(--hair);border-top:1px solid var(--hair);border-bottom:1px solid var(--hair)}
.wayfind .links a{
  background:var(--paper);display:flex;align-items:baseline;gap:16px;padding:22px 4px;
  transition:background-color .2s,padding-left .2s;
}
.wayfind .links a:hover{background:var(--sage);padding-left:14px}
.wayfind .links b{font-family:"Newsreader",serif;font-size:23px;color:var(--ink);font-weight:500;flex-shrink:0}
.wayfind .links span{font-size:15px;color:var(--slate-soft);line-height:1.5}
.wayfind .links em{margin-left:auto;color:var(--brass-deep);font-style:normal;font-size:19px}

/* ---------------- PAGE BAND ---------------- */
.band{background:var(--ink);color:var(--cream);padding:calc(var(--hdr) + 62px) 0 70px}
.band .eyebrow{color:var(--brass)}
.band h2{font-size:clamp(38px,5.4vw,58px);color:#fff;margin:14px 0 0;line-height:1.06;letter-spacing:-.014em}
.band .deck{
  font-family:"Newsreader",serif;font-style:italic;font-weight:300;
  font-size:22px;line-height:1.5;color:var(--cream);opacity:.82;
  margin-top:20px;max-width:54ch;
}

/* ---------------- CONTENT ---------------- */
.sec{padding:78px 0}
.sec.tight{padding:60px 0}
.sec.sage{background:var(--sage)}
.prose{max-width:var(--measure)}
.prose p{margin-bottom:22px;color:var(--slate)}
.prose p:last-child{margin-bottom:0}
.pull{
  border-left:2px solid var(--brass);padding:6px 0 6px 26px;margin:36px 0;
  font-family:"Newsreader",serif;font-style:italic;font-size:29px;line-height:1.38;color:var(--ink);
  max-width:34ch;
}
.h-sub{font-size:29px;color:var(--ink);margin-bottom:20px;letter-spacing:-.008em}
.lab{color:var(--brass-deep);margin-bottom:14px;display:block}
hr.rule{border:0;height:1px;background:var(--hair);margin:0}

/* about */
.about{display:grid;grid-template-columns:340px 1fr;gap:72px;align-items:start}
.portrait{position:relative}
.portrait .plate{background:var(--sage);border-radius:2px;padding:20px 14px 0;position:relative;z-index:1}
.portrait .plate img{margin:0 auto;width:100%;max-width:290px}
.portrait::before{content:"";position:absolute;inset:22px -14px -14px 22px;border:1px solid var(--brass)}
.cred{margin-top:30px}
.cred b{font-family:"Newsreader",serif;font-size:22px;color:var(--ink);font-weight:500;display:block}
.cred .lic{font-size:13px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--brass-deep);margin-top:7px;display:block}
.cred ul{list-style:none;margin:20px 0 0;padding:20px 0 0;border-top:1px solid var(--hair)}
.cred li{font-size:14.5px;line-height:1.55;margin-bottom:11px;color:var(--slate-soft)}

/* specializations — one alphabetical column, hairline-ruled.
   Deliberately not cards: twelve terms are one list, and the old three-card
   grouping imposed categories that were ours rather than hers. */
.speclist{
  list-style:none;margin:0;padding:0;max-width:520px;
  border-top:1px solid var(--hair);
}
.speclist li{
  font-family:"Newsreader",Georgia,serif;font-size:23px;line-height:1.3;
  color:var(--ink);padding:16px 2px;border-bottom:1px solid var(--hair);
}
.statement{
  background:var(--ink);color:#fff;text-align:center;padding:96px 40px;
}
.statement .eyebrow{color:var(--brass);display:block;margin-bottom:22px}
.statement q{
  font-family:"Newsreader",serif;font-style:italic;font-size:clamp(26px,3.6vw,40px);
  line-height:1.4;quotes:none;display:block;max-width:20ch;margin:0 auto;
}

/* supervision */
/* Single column since the rail went. Without a measure the prose would run
   the full width of the shell, which is unreadable for continuous text. */
.sup .prose{max-width:64ch}
.prose-cta{margin-top:38px;padding-top:30px;border-top:1px solid var(--hair)}

/* essays */
.feature{display:grid;grid-template-columns:1.2fr 1fr;gap:52px;align-items:center}
.thumb{aspect-ratio:16/10;overflow:hidden;border-radius:2px;background:var(--sage)}
.thumb img{width:100%;height:100%;object-fit:cover;transition:transform .5s ease}
a.post:hover .thumb img{transform:scale(1.04)}
.meta{font-size:11px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--clay);margin-bottom:14px}
.feature h3{font-size:34px;line-height:1.18;color:var(--ink);margin-bottom:16px;letter-spacing:-.01em}
.feature p{font-size:17px;color:var(--slate);margin-bottom:20px;max-width:46ch}
.more{font-size:14px;font-weight:600;color:var(--clay);border-bottom:1px solid var(--brass);padding-bottom:2px;display:inline-block}
a.post:hover .more{border-bottom-color:var(--clay)}
.two{display:grid;grid-template-columns:1fr 1fr;gap:52px;margin-top:56px}
.two h3{font-size:24px;line-height:1.24;color:var(--ink);margin:20px 0 12px}
.two p{font-size:16px;color:var(--slate);margin-bottom:16px}

/* contact */
.contact{display:grid;grid-template-columns:1fr 340px;gap:60px;align-items:start}
.field{margin-bottom:22px}
.field label{display:block;font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--slate);margin-bottom:8px}
.field input,.field textarea{
  width:100%;font-family:"Karla",sans-serif;font-size:16px;color:var(--ink);
  background:#fff;border:1px solid var(--hair);border-radius:2px;padding:13px 14px;
  transition:border-color .18s;
}
.field textarea{min-height:150px;resize:vertical;line-height:1.6}
.field input:focus,.field textarea:focus{border-color:var(--brass);outline:none}
.pair{display:grid;grid-template-columns:1fr 1fr;gap:22px}
button.send{border:0;cursor:pointer;font-family:"Karla",sans-serif;padding:15px 32px;font-size:13px}
.note{font-size:14px;color:var(--slate-soft);margin-top:16px;max-width:44ch;line-height:1.6}
.infocard{background:var(--ink);color:var(--cream);padding:34px 32px;border-radius:2px}
.infocard h3{font-size:23px;color:#fff;margin-bottom:22px;font-weight:500}
.infocard address{font-style:normal;font-size:16px;line-height:1.8}
.infocard a{color:var(--brass);display:block;margin-top:4px;transition:opacity .18s}
.infocard a:hover{opacity:.75}
.infocard hr{border:0;height:1px;background:rgba(192,142,60,.3);margin:24px 0}
.infocard .k{font-size:11px;font-weight:700;letter-spacing:.15em;text-transform:uppercase;color:var(--brass);display:block;margin-bottom:8px}

/* CTA band */
.cta{background:var(--ink);color:#fff;padding:72px 0;text-align:center}
.cta .eyebrow{color:var(--brass);display:block;margin-bottom:18px}
.cta p{font-family:"Newsreader",serif;font-style:italic;font-size:clamp(23px,3vw,31px);line-height:1.42;max-width:26ch;margin:0 auto 30px}

/* ---------------- FOOTER ---------------- */
.ftr{background:var(--ink);color:var(--cream);padding:70px 0 0;border-top:1px solid rgba(192,142,60,.22)}
.fcols{display:grid;grid-template-columns:1.6fr 1fr 1.3fr 1.1fr;gap:52px}
.fcols h5{font-size:10.5px;font-weight:700;letter-spacing:.17em;text-transform:uppercase;color:var(--brass);font-family:"Karla",sans-serif;margin-bottom:18px}
.fcols ul{list-style:none;margin:0;padding:0}
.fcols li{font-size:15px;line-height:1.9;opacity:.84}
.fcols li a{transition:color .18s,opacity .18s}
.fcols li a:hover{color:var(--brass);opacity:1}
.fbrand b{font-family:"Newsreader",serif;font-size:25px;color:#fff;font-weight:500;letter-spacing:.03em;display:block}
.fbrand .lic{font-size:13px;font-weight:700;letter-spacing:.12em;color:var(--brass);display:block;margin-top:9px}
.fbrand p{font-size:15px;line-height:1.7;opacity:.72;margin-top:20px;max-width:30ch}
.fcols address{font-style:normal;font-size:15px;line-height:1.9;opacity:.84}
.fcols address a{color:var(--brass);opacity:1;display:block;margin-top:4px}
.fbot{
  margin-top:54px;border-top:1px solid rgba(192,142,60,.26);padding:20px 0 28px;
  display:flex;flex-wrap:wrap;gap:8px 28px;align-items:center;font-size:13px;opacity:.7;
}
.crisis{margin-left:auto;color:var(--brass);opacity:1;font-weight:600}

/* ---------------- responsive ---------------- */
@media (max-width:1080px){
  .about{grid-template-columns:280px 1fr;gap:48px}
  .contact{grid-template-columns:1fr 300px;gap:44px}
  .fcols{grid-template-columns:1fr 1fr;gap:44px}
}
/* The full nav needs 1065px to stay on one line — below that "Clinical
   Supervision" and "About Ann" wrap and the header doubles up. Hand over to
   the hamburger at the point the shell can no longer hold it, not at some
   tablet width. Kept separate from the 900px block below, which collapses
   content grids and has no business firing this early.
   (Dropping the phone number from the nav bought ~103px, taking this from
   1180 to 1080 — the full nav now survives on more screens.) */
@media (max-width:1080px){
  .nav{display:none}
  .burger{display:flex}
}

@media (max-width:900px){
  .feature{grid-template-columns:1fr;gap:26px}
  .two{grid-template-columns:1fr;gap:44px}
  .wayfind .grid{grid-template-columns:1fr;gap:36px}
}
@media (max-width:760px){
  :root{--hdr:56px}
  body{font-size:17px}
  .shell{padding:0 24px}
  .about{grid-template-columns:1fr;gap:44px}
  .portrait{max-width:320px}
  .contact{grid-template-columns:1fr;gap:40px}
  .pair{grid-template-columns:1fr;gap:0}
  .fcols{grid-template-columns:1fr;gap:36px}
  .sec{padding:56px 0}
  .speclist li{font-size:20px;padding:14px 2px}
  .band{padding:calc(var(--hdr) + 44px) 0 50px}
  .slide h1{font-size:31px;padding:0 24px;max-width:100%}
  .restart{right:24px;bottom:28px;padding:11px 20px}
  .statement{padding:64px 24px}
  .fbot{flex-direction:column;align-items:flex-start}
  .crisis{margin-left:0}
  .lockup b{font-size:19px}
  .lockup span{font-size:12px}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important}
  /* Remove the movement, keep the crossfade. A fade is not motion, and without
     it the sequence becomes a series of hard cuts. The zoom and the rising
     headline are the parts that need to go. */
  .slide{transition:opacity .4s ease-in-out !important}
  .slide img,.slide.active img{transform:none !important;transition:none !important}
  .slide h1,.slide h1.active{transform:none !important;top:25% !important;
    transition:opacity .4s ease-in-out !important}
  .hdr,.hdr::after,.wayfind .links a,.thumb img,.btn,.nav a,.drawer,
  .restart,.field input,.field textarea{transition-duration:.01ms !important}
}

/* ---------------- skip link ---------------- */
.skip{position:absolute;left:-9999px;top:0;z-index:80;background:var(--brass);color:var(--ink);
  padding:12px 20px;font-size:14px;font-weight:700;border-radius:0 0 3px 0}
.skip:focus{left:0}

/* ---------------- essay article ---------------- */
.essay{padding:64px 0 84px}
.essay .shell{max-width:760px}
/* Source images are low-resolution GIF frames from the old site (384-480px wide),
   so the lead is capped rather than upscaled to the full measure. Replace the
   images and this cap can go. */
.essay .lead{margin:0 auto 46px;max-width:520px}
.essay .lead img{width:100%;aspect-ratio:16/9;object-fit:cover;border-radius:2px}
.essay .prose{max-width:62ch;margin:0 auto}
.essay .prose p{margin-bottom:26px}
.essay .prose .standfirst{font-size:23px;line-height:1.6;color:var(--ink);margin-bottom:26px}
.essay .ref{font-size:14.5px;color:var(--slate-soft);border-top:1px solid var(--hair);
  padding-top:22px;margin-top:38px}
.back{margin-top:52px;padding-top:26px;border-top:1px solid var(--hair)}
.back a{font-size:14px;font-weight:600;color:var(--clay)}
.back a:hover{color:var(--brass-deep)}
@media (max-width:760px){
  .essay{padding:44px 0 60px}
  .essay .lead{margin-bottom:30px}
  .essay .prose .standfirst{font-size:20px}
}

.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.hint{font-size:14.5px;line-height:1.6;color:var(--slate-soft);
  margin:-4px 0 24px;max-width:52ch}
.note.err{color:var(--clay)}
.note.ok{color:var(--ink);font-weight:600}
button.send[disabled]{opacity:.55;cursor:default}