/* Meet Hannah only. Loaded after site.css. The page is a plate from a natural history book:
   Hannah painted large, with numbered notes around her; further down, each note opens. */

/* the plate */
.plate{min-height:100vh;min-height:100svh}
.plate .sheet{padding-bottom:30px}
.plate-head{width:100%;display:flex;justify-content:space-between;align-items:baseline;margin-top:clamp(18px,3vh,34px);font:600 11.5px/1 var(--body);letter-spacing:.24em;text-transform:uppercase;color:var(--accent)}
.plate-head span:last-child{color:var(--muted);font-weight:400}
.plate .sheet h1{margin-top:10px;font-size:clamp(54px,7vw,104px);line-height:1}
.latin{font-family:var(--display);font-style:italic;font-size:clamp(18px,1.6vw,22px);color:var(--muted);margin-top:6px}
.specimen{position:relative;width:100%;max-width:1120px;display:grid;grid-template-columns:1fr minmax(260px,420px) 1fr;align-items:center;gap:clamp(16px,3vw,40px);margin-top:clamp(8px,2vh,20px)}
.specimen .pv{width:100%}
.notes-label{display:none}
.notes{display:flex;flex-direction:column;gap:clamp(14px,2.6vh,28px);list-style:none;margin:0;padding:0}
.notes.l{text-align:right;align-items:flex-end}.notes.r{text-align:left;align-items:flex-start}
.note{display:flex;flex-direction:column;gap:4px;max-width:16em}
.note a{color:inherit;text-decoration:none;display:contents}
.note .n{font-family:var(--display);font-style:italic;font-size:15px;color:var(--accent);display:flex;align-items:center;gap:10px}
.notes.l .note .n{flex-direction:row-reverse}
.note .n::before{content:"";height:1px;width:clamp(30px,5vw,80px);background:var(--accent);opacity:.45}
.note b{font-family:var(--display);font-weight:400;font-size:clamp(21px,1.7vw,25px);line-height:1.15;color:var(--ink)}
.note:hover b{color:var(--accent)}
.note .d{font-size:15.5px;line-height:1.45;color:var(--muted)}
.plate .verse{margin-top:clamp(14px,2.4vh,26px)}
.caption{font-size:13px;letter-spacing:.06em;color:var(--muted);margin-top:8px}
/* phone: the painting on top, and what she does underneath as one numbered list */
@media (max-width:900px){
  .plate .sheet h1{font-size:64px}
  .latin{font-size:16.5px;line-height:1.4;max-width:20em}
  .specimen{grid-template-columns:1fr;gap:0;margin-top:4px}
  .specimen .pv{grid-row:1;width:min(300px,78vw);justify-self:center;margin-bottom:6px}
  .notes-label{display:block;text-align:left;font:600 11px/1 var(--body);letter-spacing:.24em;text-transform:uppercase;color:var(--accent);padding-bottom:12px;border-bottom:1px solid var(--line)}
  .notes,.notes.l,.notes.r{gap:0;text-align:left;align-items:stretch}
  .note{max-width:none;display:grid;grid-template-columns:34px 1fr;column-gap:10px;row-gap:2px;padding:13px 0;border-bottom:1px solid var(--line)}
  .note .n{grid-row:1/3;font-size:20px;align-items:flex-start;padding-top:2px}
  .notes.l .note .n{flex-direction:row}
  .note .n::before{display:none}
  .note b{font-size:21px}.note .d{font-size:15px}
}

/* Hannah, up close: each note opened */
.opened{padding:clamp(64px,10vh,110px) var(--gutter) clamp(40px,6vh,64px);display:flex;flex-direction:column;align-items:center}
.opened > .kicker{margin-top:0}
.opened > h2{margin-top:14px;font-size:clamp(34px,4vw,54px);text-align:center}
.entry{width:100%;max-width:1040px;display:grid;grid-template-columns:96px minmax(0,1fr) minmax(260px,360px);gap:clamp(18px,3vw,48px);align-items:center;padding:clamp(32px,6vh,56px) 0;border-top:1px solid var(--line);scroll-margin-top:80px}
.entry:first-of-type{margin-top:clamp(28px,5vh,48px)}
.entry .num{font-family:var(--display);font-style:italic;font-weight:300;font-size:72px;line-height:1;color:var(--accent);opacity:.8;align-self:start}
.entry h3{font-family:var(--display);font-weight:300;font-size:clamp(30px,3vw,42px);line-height:1.08;letter-spacing:-.015em}
.entry h3 em{display:block;font-style:italic;color:var(--accent)}
.entry p{margin-top:12px;color:var(--muted);font-size:17.5px;line-height:1.6;max-width:30em}
.entry .leaf{gap:12px}
.entry .leaf .pv{width:62%;align-self:center}
.written{font-family:var(--display);font-size:19px;line-height:1.45;color:var(--ink)}
.written small{display:block;margin-top:8px;font:600 11.5px/1 var(--body);letter-spacing:.14em;text-transform:uppercase;color:var(--accent)}
.pill{border-radius:999px;padding:11px 16px;text-align:center;font-weight:600;font-size:15px}
.pill.b{background:var(--accent);color:var(--cream)}.pill.g{background:var(--candle);color:var(--ink)}
.leaf.night-leaf{background:var(--night);border-color:var(--night);color:var(--night-ink)}
.leaf.night-leaf .k{color:var(--candle)}
.leaf.night-leaf .big{font-family:var(--display);font-size:22px;line-height:1.2}
.leaf.night-leaf p{color:var(--night-muted);margin:0;font-size:15.5px}
.leaf .big{font-family:var(--display);font-size:22px;line-height:1.2}
@media (max-width:860px){.entry{grid-template-columns:1fr;gap:14px}.entry .num{font-size:48px}}