/* Home page — layout only.
   Loaded before styles.css / site.css (see index.qmd), so the
   shared stylesheets still win ties at equal specificity. */

/* Home-only flourishes */
.home-hero{padding:32px 56px 24px;text-align:center;position:relative}
.home-hero .name{
  font-family:'Cormorant Garamond',serif;font-weight:500;
  font-size:88px;line-height:.95;color:var(--ink);letter-spacing:.005em;
  margin:0 0 8px;
}
/* Set in the same face as the name above it and spaced out, so the two lines
   read as one wordmark rather than as two competing voices. */
.home-hero .script{
  font-family:'Cormorant Garamond',serif;font-weight:600;
  font-size:27px;line-height:1.3;letter-spacing:.16em;
  color:var(--sage);
  margin:16px 0 0;
}
.home-hero .phd-line{
  font-family:'Inter',sans-serif;font-size:11px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--ink-3);font-weight:500;
  margin:22px 0 0;
}
.home-hero .phd-line .dot{color:var(--sage);margin:0 10px;opacity:.6}
.home-hero .tagline{
  font-family:'Cormorant Garamond',serif;
  font-size:20px;line-height:1.55;color:var(--ink-2);
  max-width:62ch;margin:36px auto 0;
}
.home-hero .tagline em{color:var(--sage);font-style:italic}

.home-bio{
  max-width:64ch;margin:48px auto 0;text-align:left;
  font-family:'Cormorant Garamond',serif;font-size:20px;line-height:1.65;
  color:var(--ink-2);padding-top:28px;border-top:1px solid var(--rule);
}
.home-bio p{margin:0 0 12px}
.home-bio p:last-child{margin-bottom:0}
.home-bio .eyebrow{display:block;margin-bottom:14px}

/* tighter plates row above name — width matches wordmark */
/* Three drawings above the wordmark, as a tight centred cluster rather than a
   row stretched to the width of the name. An explicit gap sets the spacing, so
   the group is only as wide as it needs to be (3x154 + 2x22 = 506px).
   The captions are dropped — each drawing still carries its description in the
   img alt text, so nothing is lost for screen readers. */
.plates-tight{
  width:auto;max-width:100%;
  gap:22px !important;margin:0 auto 18px !important;
  justify-content:center !important;
}
.plates-tight .plate{margin:0;gap:0;width:154px;flex:0 0 154px;min-width:0;position:relative}
.plates-tight .plate img{width:154px;height:154px;max-width:100%;height:auto;aspect-ratio:1}

/* The name is kept, but only on hover: the caption is lifted out of the flow and
   shown as a small label under the drawing. A styled tooltip rather than a
   `title` attribute, because the native one is slow, grey, and OS-shaped —
   this one is instant and uses the site's own palette. Screen readers get the
   description from the img alt instead, so the label is hidden from them to
   avoid announcing each drawing twice. */
.plates-tight .plate .lbl{
  position:absolute;left:50%;top:100%;
  transform:translate(-50%,4px);
  margin-top:8px;white-space:nowrap;
  background:var(--cream-2);
  border:1px solid rgba(var(--gold-rgb),.5);
  border-radius:2px;
  padding:4px 10px;
  box-shadow:0 1px 0 rgba(var(--gold-rgb),.16);
  opacity:0;pointer-events:none;z-index:5;
  transition:opacity .18s ease,transform .18s ease;
}
.plates-tight .plate .lbl b{font-size:13px;color:var(--ink-2)}
.plates-tight .plate:hover .lbl{opacity:1;transform:translate(-50%,0)}

/* No hover on touch, where the tooltip could never be dismissed. */
@media (hover:none){
  .plates-tight .plate .lbl{display:none}
}

@media (max-width:600px){
  .plates-tight{gap:12px !important}
  .plates-tight .plate{flex:0 1 104px;width:104px}
  .plates-tight .plate img{width:100%;height:auto;aspect-ratio:1}
}

.home-grid{
  max-width:var(--max);margin:80px auto 0;padding:0 56px;
  display:grid;grid-template-columns:1.05fr .95fr;gap:64px;align-items:start;
}
.home-grid h2{
  font-family:'Cormorant Garamond',serif;font-size:30px;font-weight:500;
  margin:0 0 6px;color:var(--ink);
}
.home-grid .sub{
  font-family:'Inter',sans-serif;font-size:11px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--sage);margin-bottom:18px;font-weight:500;
}
.home-grid .more{
  margin-top:20px;font-family:'Inter',sans-serif;font-size:12px;
  letter-spacing:.04em;
}
/* Off the channel token, not the literal light-mode sage: dark mode rebinds
   --sage to gold, and the hardcoded green underline disappeared into the page
   there. Same pattern as --gold-rgb in site.css. */
.home-grid .more a{
  color:var(--sage);text-decoration:none;
  border-bottom:1px solid rgba(var(--sage-rgb),.4);
}
.home-grid .more a:hover{color:var(--terracotta);border-bottom-color:var(--terracotta)}

.home-links{
  max-width:var(--max);margin:80px auto 0;padding:32px 56px 0;
  border-top:1px solid var(--rule);
  display:flex;flex-wrap:wrap;gap:14px;justify-content:center;
  font-family:'Inter',sans-serif;font-size:13px;
}
.home-links a{
  color:var(--ink-2);text-decoration:none;
  border:1px solid var(--rule);padding:8px 14px;border-radius:999px;
  letter-spacing:.02em;
}
.home-links a:hover{border-color:var(--sage);color:var(--sage)}

@media (max-width:900px){
  .home-hero{padding:40px 24px 16px}
  .home-hero .name{font-size:60px}
  /* Steps down with .name so the two stay one wordmark. The 44px this used to
     carry dated from when .script was set in the handwriting face; once it
     became Cormorant at 27px, that override made the strapline grow as the
     viewport shrank. Tracking tightens with it so the line stays unbroken. */
  .home-hero .script{font-size:22px;letter-spacing:.12em}
  .home-grid{grid-template-columns:1fr;gap:48px;padding:0 24px;margin-top:56px}
  .home-links{padding:24px 24px 0;margin-top:56px}
}

@media (max-width:600px){
  .home-hero .name{font-size:46px}
  /* Fluid rather than fixed: the line has to stay on one row down to ~320px,
     but a size small enough to guarantee that everywhere left it reading
     smaller than the 11px uppercase .phd-line below it. It therefore tracks
     the viewport and caps at 20px, which is where it stops gaining anything. */
  .home-hero .script{font-size:clamp(15px,5vw,20px);letter-spacing:.08em}
}