/* Jaclin Gerstel-Friedman, PhD — practice website

   TYPE SYSTEM — five roles, three colors. Do not add sizes.
   Headings (Display/Section/Subhead) = Libre Baskerville. Everything else = EB Garamond.
     Display  3rem (2.2rem phone)  400  blue   page titles, hero headline
     Section  1.75rem              400  blue   h2
     Subhead  1.25rem              700  blue   h3, phone number
     Body     1.2rem               400  ink    paragraphs, lists, table cells, buttons, brand
     Small    1rem                 400  soft   nav, footer, brand subtitle, table headers, notes
   Emphasis = weight or color, never a new size. */

:root {
  --ink: #1f2933;
  --ink-soft: #5a6670;
  --blue: #24475e;
  --line: #e1e6ea;
  --band: #f6f3ee;
  --max: 1080px;
  --measure: 62ch;

  --display: 3rem;
  --section: 1.75rem;
  --subhead: 1.25rem;
  --body: 1.2rem;
  --small: 1rem;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }

body {
  font-family: "EB Garamond", Garamond, "Times New Roman", serif;
  font-size: var(--body);
  line-height: 1.6;
  color: var(--ink);
  background: #fff;
  -webkit-font-smoothing: antialiased;
}

/* ---- type roles ---- */
h1, h2, h3, .subhead { font-family: "Libre Baskerville", Baskerville, Georgia, serif; color: var(--blue); }
h1 { font-size: var(--display); font-weight: 400; line-height: 1.2; margin-bottom: 1.2rem; }
h2 { font-size: var(--section); font-weight: 400; line-height: 1.25; margin-bottom: 1rem; }
h3, .subhead { font-size: var(--subhead); font-weight: 700; line-height: 1.3; margin-bottom: 0.4rem; }
.small { font-size: var(--small); color: var(--ink-soft); }
strong { font-weight: 600; }

p { max-width: var(--measure); }
p + p { margin-top: 1em; }
* + h2 { margin-top: 3rem; }
* + h3 { margin-top: 1.6rem; }

a { color: var(--blue); text-underline-offset: 3px; }
a:hover { color: var(--ink); }
a:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }

.wrap { max-width: var(--max); margin: 0 auto; padding: 0 1.5rem; }
.full p, .full ol.steps, .full table { max-width: none; }
.split + .full { margin-top: 2.5rem; }

/* ---- header ---- */
header { border-bottom: 1px solid var(--line); }
.nav-wrap {
  max-width: var(--max);
  margin: 0 auto;
  padding: 1.3rem 1.5rem;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
}
.brand { font-weight: 600; color: var(--blue); text-decoration: none; }
.brand small { display: block; font-size: var(--small); font-weight: 400; color: var(--ink-soft); }
nav { display: flex; gap: 1.6rem; }
nav a { text-decoration: none; color: var(--blue); font-weight: 600; }
nav a:hover { color: var(--ink); }
nav a[aria-current="page"] { border-bottom: 1px solid var(--blue); }

/* ---- layout ---- */
section { padding: 4rem 0; }
section + section { border-top: 1px solid var(--line); }
.band + section { border-top: 0; }
.page-title { padding-top: 3.5rem; }
.page-title h1 { margin-bottom: 0; }
.page-title + section { border-top: 0; padding-top: 2rem; }

.hero { display: grid; grid-template-columns: 1fr 320px; gap: 4rem; align-items: start; }
.portrait { display: block; width: 100%; max-width: 320px; height: auto; }
.hero .portrait { margin-top: 0.6rem; }

.cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 2.5rem; margin-top: 2rem; }
.hero + .cols, .full + .wrap { margin-top: 3.5rem; }
.cols > div { border-top: 2px solid var(--blue); padding-top: 1rem; }
.cols h3 { margin-top: 0; }

.split { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 4rem; align-items: start; }
aside { border-top: 2px solid var(--blue); padding-top: 1rem; }
aside .block + .block { margin-top: 2rem; }
aside h3 { margin-top: 0; }

.band { background: var(--band); padding: 3.5rem 0; }
.band-dark { background: var(--blue); color: #fff; padding: 4rem 0; }
.band-dark h2, .band-dark h3 { color: #fff; }
.band-dark h2 { margin: 0; }
.band-dark .cols > div { border-top-color: rgba(255,255,255,0.4); }
.band-dark a { color: #fff; }
.band-dark .btn { background: #fff; color: var(--blue) !important; }
.band-dark .btn:hover { background: var(--band); }

.btn {
  display: inline-block;
  background: var(--blue);
  color: #fff !important;
  text-decoration: none;
  padding: 0.8rem 1.4rem;
  border-radius: 4px;
  font-weight: 600;
  white-space: nowrap;
}
.btn:hover { background: var(--ink); }
.btn-row { display: flex; flex-wrap: wrap; align-items: center; gap: 1.2rem; margin-top: 1.6rem; }
.cta { text-align: center; margin-top: 3.5rem; }

ol.steps, ul.plain { margin: 0.8rem 0 0 1.25rem; max-width: var(--measure); }
ol.steps li, ul.plain li { margin-bottom: 0.6rem; }
ul.plain { list-style: none; margin-left: 0; }
ul.contact li { margin-bottom: 0.3rem; }
ul.contact strong { color: var(--ink); margin-right: 0.3rem; }

table { width: 100%; border-collapse: collapse; margin: 1.2rem 0; }
th, td { text-align: left; padding: 0.7rem 0; border-bottom: 1px solid var(--line); }
th { font-size: var(--small); font-weight: 400; color: var(--ink-soft); }
td.num, th:last-child { text-align: right; white-space: nowrap; }
td.num { font-weight: 600; }

/* accordion: question row, hairline below, plus sign that turns to a minus when open */
.faq { margin-top: 1.5rem; border-top: 1px solid var(--line); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  padding: 1.1rem 0;
  font-size: var(--subhead);
  font-weight: 600;
  color: var(--blue);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font-weight: 400; font-size: 1.6rem; line-height: 1; color: var(--ink-soft); flex: none; }
.faq details[open] summary::after { content: "\2212"; }
.faq summary:hover { color: var(--ink); }
.faq details p { max-width: none; }
.faq details p:last-of-type { padding-bottom: 1.4rem; }

/* ---- footer ---- */
footer { border-top: 1px solid var(--line); font-size: var(--small); line-height: 1.8; }
.foot { display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; padding-top: 2.5rem; padding-bottom: 2.5rem; }
.foot > div:first-child strong { color: var(--blue); }
.foot > div:last-child { text-align: right; }
.foot .legal { color: var(--ink-soft); }
.foot .legal a { color: var(--ink-soft); }

@media (max-width: 820px) {
  :root { --display: 2.2rem; }
  section { padding: 3rem 0; }
  .hero, .split, .foot { grid-template-columns: 1fr; gap: 2rem; }
  .foot > div:last-child { text-align: left; }
  .hero .portrait { max-width: 240px; margin-top: 0; order: -1; }
  nav { gap: 1rem; }
}