/* ============================================================
   Emily Neil — site styles

   Shared by index.html and about.html. Change a colour here and
   it changes on both pages.

   The palette comes from the headshot. Its background sits at
   hue 200 (cool) and her skin at hue 21 (warm) — near-opposite
   on the colour wheel, which is why the photo reads well. The
   site borrows that same pairing, at a lower saturation than
   the photo so the photography stays the most colourful thing
   on the page.
   ============================================================ */

:root{
  --primary:#284858;       /* headings, links                 */
  --primary-deep:#1d3744;  /* the dark band at the bottom     */
  --accent:#ab633f;        /* rules, underlines, the marks    */
  --accent-text:#8a4c2e;   /* darker, for the accent as text  */
  --ink:#1c2431;           /* body text                       */
  --meta:#616b79;          /* dates, outlets, quieter text    */
  --rule:#dde1e8;          /* hairlines between items         */
  --surface:#f4f5f8;       /* image placeholders              */
  --paper:#ffffff;         /* page background                 */
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{transition:none !important}
}

body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:"Source Serif 4",Georgia,serif;
  font-size:18px;
  line-height:1.65;
  display:flex;flex-direction:column;min-height:100vh;
}
.wrap{max-width:980px;margin:0 auto;padding:0 28px;width:100%}
main{flex:1}
a{color:inherit}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px}

/* pretty = fill the line, but never strand one word on the last
   line. balance = even out the lines, which suits short display
   text but makes a long headline stop short of the column. */
p,li,h3{text-wrap:pretty}
h1,h2,.award,.beat,.contact-block p{text-wrap:balance}

.skip{
  position:absolute;left:-9999px;
  background:var(--primary);color:#fff;
  padding:10px 16px;text-decoration:none;
  font-family:"Libre Franklin",system-ui,sans-serif;font-size:.9rem;
}
.skip:focus{left:12px;top:12px;z-index:10}

/* ---------------- top nav ---------------- */
.topnav{
  font-family:"Libre Franklin",system-ui,sans-serif;
  display:flex;justify-content:flex-end;
  gap:20px;flex-wrap:wrap;
  padding:22px 0;font-size:.9rem;
}
.topnav ul{display:flex;gap:24px;list-style:none;margin:0;padding:0}
.topnav a{color:var(--meta);text-decoration:none;padding-bottom:2px}
.topnav a:hover,.topnav a:focus-visible{color:var(--primary)}
.topnav a[aria-current="page"]{
  color:var(--primary);font-weight:600;
  border-bottom:2px solid var(--accent);
}

/* ---------------- home hero ---------------- */
.hero{
  display:grid;
  grid-template-columns:260px minmax(0,1fr);
  gap:46px;
  align-items:center;
  padding:26px 0 0;
}
.headshot{
  width:260px;height:260px;
  border-radius:50%;
  object-fit:cover;
  background:var(--surface);
  display:block;
}
.hero h1{
  font-family:"Libre Franklin",system-ui,sans-serif;
  font-size:clamp(2.6rem,5.6vw,3.5rem);
  font-weight:800;
  line-height:.95;
  letter-spacing:-.035em;
  margin:0;
  color:var(--primary);
}
.role{
  font-family:"Libre Franklin",system-ui,sans-serif;
  font-size:1.06rem;font-weight:600;
  margin:14px 0 0;
}
/* No max-width here on purpose: the grid column is already the
   measure. Capping it again just wraps the text early and leaves
   a gap to its right. */
.beat{color:var(--meta);margin:6px 0 0}
.award{
  font-family:"Libre Franklin",system-ui,sans-serif;
  font-size:.88rem;font-weight:600;
  color:var(--primary);
  margin:18px 0 0;
  padding:0 0 0 13px;
  border-left:3px solid var(--accent);
}
.award a{color:inherit;text-decoration:none;border-bottom:1px solid var(--accent)}
.award a:hover,.award a:focus-visible{color:var(--accent-text)}
.contact-line{
  font-family:"Libre Franklin",system-ui,sans-serif;
  font-size:.92rem;
  display:flex;flex-wrap:wrap;gap:10px 20px;
  margin:18px 0 0;padding:0;list-style:none;
}
.contact-line a{color:var(--primary);text-decoration:none;border-bottom:1px solid var(--rule)}
.contact-line a:hover,.contact-line a:focus-visible{border-bottom-color:var(--accent)}

/* ---------------- sections ---------------- */
section{padding:56px 0 0}
section:first-of-type{padding-top:50px}
.section-title{
  font-family:"Libre Franklin",system-ui,sans-serif;
  font-size:1.32rem;font-weight:700;letter-spacing:-.018em;
  margin:0 0 22px;
}
.section-title.stacked{margin-top:52px}

/* ---------------- about prose ---------------- */
/* Two columns, so the prose fills the page width the way the
   Highlights grid does, while each line stays a readable length.
   One column on narrow screens. */
.bio-grid{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:0 46px;
  align-items:start;
}
.bio-grid p{margin:0 0 16px}
.bio-grid p:last-child{margin-bottom:0}
.bio .lede{font-size:1.14rem}

/* ---------------- highlights ---------------- */
.highlights{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:38px 40px;
}
.highlight{text-decoration:none;display:block}
.highlight-photo{
  aspect-ratio:3/2;
  background:var(--surface);
  overflow:hidden;
  border-radius:2px;
}
.highlight-photo img{
  width:100%;height:100%;
  object-fit:cover;display:block;
}
.highlight-text{padding:16px 0 0}
.highlight-award{
  font-family:"Libre Franklin",system-ui,sans-serif;
  font-size:.78rem;font-weight:600;
  color:var(--accent-text);
  margin:0 0 7px;
  display:flex;align-items:center;gap:8px;
}
.highlight-award::before{
  content:"";flex:none;
  width:15px;height:2px;background:var(--accent);
}
.highlight-title{
  font-family:"Libre Franklin",system-ui,sans-serif;
  font-size:1.2rem;font-weight:700;line-height:1.28;
  letter-spacing:-.012em;
  margin:0;
}
.highlight:hover .highlight-title,
.highlight:focus-visible .highlight-title{
  color:var(--primary);
  text-decoration:underline;
  text-decoration-thickness:2px;
  text-underline-offset:3px;
  text-decoration-color:var(--accent);
}
.highlight-dek{margin:9px 0 0;color:var(--meta);font-size:1rem;line-height:1.55}

/* ---------------- themed collections ---------------- */
/* A themed section is another shelf of the same featured cards,
   so it reuses .highlights and .highlight entirely. Only the
   standfirst under the heading is new. */
/* No max-width: the note sits above the two-column grid and should
   run the same width the grid does. Capping it left a ragged stop
   partway across with empty page to the right. */
.collection-note{
  color:var(--meta);
  margin:-8px 0 26px;
}
/* A section shows photos only when every story in it has one, so
   there is never a card with a blank panel beside a photographed
   one. Text-only cards get their top padding back. */
.highlight > .highlight-text:first-child{padding-top:0}

/* ---------------- topic filters ---------------- */
.filters{
  font-family:"Libre Franklin",system-ui,sans-serif;
  display:flex;flex-wrap:wrap;gap:8px;
  margin:0;padding:0;list-style:none;
}
.filters[hidden]{display:none}
.filters button{
  font:inherit;font-size:.88rem;font-weight:500;
  background:none;border:1px solid var(--rule);
  color:var(--meta);
  padding:7px 15px;border-radius:999px;
  cursor:pointer;
}
.filters button:hover{border-color:var(--primary);color:var(--primary)}
.filters button[aria-pressed="true"]{
  background:var(--primary);border-color:var(--primary);color:#fff;
}

/* ---------------- story list ---------------- */
.stories{margin:18px 0 0}
.story{
  display:block;
  padding:19px 0;
  border-top:1px solid var(--rule);
}
.story-topic{
  font-family:"Libre Franklin",system-ui,sans-serif;
  font-size:.76rem;font-weight:600;
  color:var(--primary);
  margin:0 0 6px;
}
/* Headlines run the width of the list. A max-width here would
   wrap them early and leave a gap down the right-hand side. */
.story-title{
  font-family:"Libre Franklin",system-ui,sans-serif;
  font-size:1.1rem;font-weight:600;line-height:1.36;
  margin:0;
}
/* The headline is the only clickable thing in a row, so it has to
   announce itself on hover. The rest of the row is plain text you
   can select without opening anything. */
.story-title a{color:inherit;text-decoration:none}
.story-title a:hover,
.story-title a:focus-visible{
  color:var(--primary);
  text-decoration:underline;
  text-decoration-thickness:2px;
  text-underline-offset:3px;
  text-decoration-color:var(--accent);
}
.story-dek{color:var(--meta);font-size:1rem;margin:7px 0 0}
.story-meta{
  font-family:"Libre Franklin",system-ui,sans-serif;
  font-size:.8rem;color:var(--meta);
  margin:9px 0 0;
  display:flex;flex-wrap:wrap;gap:6px 16px;align-items:center;
}
.listen{
  display:inline-flex;align-items:center;gap:6px;
  color:var(--primary);font-weight:600;
}
.listen::before{
  content:"";width:0;height:0;
  border-left:7px solid var(--accent);
  border-top:5px solid transparent;
  border-bottom:5px solid transparent;
}
.empty{
  color:var(--meta);
  padding:24px 0;margin:0;
  border-top:1px solid var(--rule);
}
.archive{
  font-family:"Libre Franklin",system-ui,sans-serif;
  font-size:.95rem;
  margin:28px 0 0;padding:22px 0 0;border-top:1px solid var(--rule);
}
.archive a{color:var(--primary);font-weight:600;text-decoration:none;border-bottom:2px solid var(--accent)}

/* ---------------- experience, education, kit ---------------- */
/* No max-width: the 168px date column already narrows the text,
   so capping the list as well leaves a gap down the right. */
.timeline{list-style:none;padding:0;margin:0}
.timeline li{
  display:grid;grid-template-columns:168px 1fr;gap:24px;
  padding:17px 0;border-top:1px solid var(--rule);
}
.timeline .when{font-family:"Libre Franklin",sans-serif;font-size:.85rem;color:var(--meta)}
.timeline .what{font-family:"Libre Franklin",sans-serif;font-weight:600;margin:0}
.timeline .where{display:block;font-weight:400;color:var(--meta);font-size:.92rem;margin:2px 0 0}
.timeline .note{margin:7px 0 0;font-size:.98rem;color:var(--meta)}

.kit{list-style:none;padding:0;margin:0}
.kit li{
  display:grid;grid-template-columns:168px 1fr;gap:24px;
  padding:14px 0;border-top:1px solid var(--rule);
  font-family:"Libre Franklin",sans-serif;font-size:.95rem;
}
.kit span:first-child{color:var(--meta)}

.btn{
  display:inline-block;
  font-family:"Libre Franklin",system-ui,sans-serif;
  font-size:.92rem;font-weight:600;
  background:var(--primary);color:#fff;text-decoration:none;
  padding:13px 24px;border-radius:2px;margin:30px 0 0;
}
.btn:hover,.btn:focus-visible{background:var(--primary-deep)}

/* ---------------- contact (centred) ---------------- */
.contact-block{
  background:var(--primary-deep);color:#fff;
  margin-top:76px;padding:56px 0 48px;
  text-align:center;
}
.contact-block h2{
  font-family:"Libre Franklin",sans-serif;
  font-size:1.32rem;font-weight:700;margin:0 0 10px;
}
.contact-block p{
  color:rgba(255,255,255,.8);
  max-width:66ch;margin:0 auto 24px;
}
.contact-block ul{
  font-family:"Libre Franklin",system-ui,sans-serif;
  display:flex;flex-wrap:wrap;justify-content:center;
  gap:14px 28px;
  list-style:none;margin:0;padding:0;font-size:.98rem;
}
.contact-block a{color:#fff;text-decoration:none;border-bottom:2px solid var(--accent);padding-bottom:1px}
.contact-block a:hover,.contact-block a:focus-visible{color:var(--accent)}
/* Signal is a username you type into the app, not a link. */
.contact-block .signal{color:rgba(255,255,255,.88)}
.contact-block .colophon{
  margin:40px auto 0;
  font-size:.8rem;color:rgba(255,255,255,.5);
}

/* ---------------- tablets and phones ---------------- */
@media (max-width:860px){
  .hero{grid-template-columns:200px minmax(0,1fr);gap:34px}
  .headshot{width:200px;height:200px}
  .bio-grid{grid-template-columns:1fr;gap:0}
  .bio-grid p:last-child{margin-bottom:16px}
}
@media (max-width:680px){
  body{font-size:17px}
  .hero{
    grid-template-columns:1fr;
    gap:24px;
    justify-items:start;
    padding-top:12px;
  }
  .headshot{width:150px;height:150px}
  .highlights{grid-template-columns:1fr;gap:34px}
  .timeline li,.kit li{grid-template-columns:1fr;gap:3px}
  .timeline .note{margin-top:6px}
  .contact-block{padding:44px 0 38px}
}

/* ============================================================
   Tab switching

   Work and About are two blocks on one page; the script shows
   one and hides the other. Nothing here animates, because the
   header, menu and contact bar are never rebuilt — the only
   thing that changes is the block between them, and a swap
   that happens in a single frame reads as instant rather than
   as a transition.

   [hidden] needs stating explicitly because the sections are
   display:grid and grid would otherwise override it.
   ============================================================ */

[hidden]{ display:none !important }