/* jackagonz.com stylesheet. Direction B, "Dossier", laid out as a reference
   entry: page title, infobox, contents, numbered sections. The encyclopedia
   structure carries the facts; the prose stays first person. */

/* Fonts, self-hosted from this origin. Both families are SIL Open Font
   License 1.1; see fonts/README.txt for provenance and the license files.
   Serving them here rather than from fonts.googleapis.com means a page load
   sends no visitor IP or user-agent to a third party, and the page does not
   depend on another host being reachable. Variable weight, 400 to 700. */
@font-face{
  font-family:'Inter';
  font-style:normal;
  font-weight:400 700;
  font-display:swap;
  src:url(fonts/inter-latin.woff2) format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:'Inter';
  font-style:normal;
  font-weight:400 700;
  font-display:swap;
  src:url(fonts/inter-latin-ext.woff2) format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face{
  font-family:'Source Serif 4';
  font-style:normal;
  font-weight:400 700;
  font-display:swap;
  src:url(fonts/sourceserif4-latin.woff2) format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:'Source Serif 4';
  font-style:normal;
  font-weight:400 700;
  font-display:swap;
  src:url(fonts/sourceserif4-latin-ext.woff2) format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

:root{
  --bg:#fbfaf8;
  --bg-raised:#ffffff;
  --bg-sunk:#f5f2ec;
  --line:#e2ddd5;
  --line-strong:#c9c2b7;
  --text:#1a1a1a;
  --muted:#6b6558;
  --accent:#1e3a5f;      /* ink navy */
  --accent-soft:#f0f4f8;
  --maxw:1040px;
  --pad:28px;
  --sans:"Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --serif:"Source Serif 4", Georgia, "Times New Roman", serif;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:84px}
body{
  margin:0;background:var(--bg);color:var(--text);
  font-family:var(--sans);font-size:17px;line-height:1.7;
  -webkit-font-smoothing:antialiased;
}
.container{max-width:var(--maxw);margin:0 auto;padding:0 var(--pad)}
.measure{max-width:68ch}

.skip-link{position:absolute;left:-9999px;top:0;background:var(--accent);color:#fff;padding:10px 16px;z-index:100}
.skip-link:focus{left:0}

a{color:var(--accent);text-underline-offset:3px}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:2px}
::selection{background:var(--accent);color:#fff}

/* Header */
.site-header{
  position:sticky;top:0;z-index:20;
  background:rgba(251,250,248,0.9);backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
}
.site-header .container{display:flex;align-items:center;gap:16px;height:68px}
.brand a{
  font-family:var(--serif);font-weight:700;font-size:1.12rem;letter-spacing:-0.01em;
  color:var(--text);text-decoration:none;
}
.nav{margin-left:auto;display:flex;gap:24px}
.nav a{
  font-size:0.85rem;color:var(--muted);text-decoration:none;
  padding-bottom:2px;border-bottom:1px solid transparent;transition:color .15s,border-color .15s;
}
.nav a:hover,.nav a.current{color:var(--text);border-bottom-color:var(--accent)}

.hamburger{display:none;margin-left:auto;background:none;border:0;cursor:pointer;width:36px;height:36px;padding:8px}
.hamburger span{display:block;height:1.5px;background:var(--text);margin:5px 0}

/* Entry head. The page title is set like an article title, with the rule
   underneath doing the work a masthead would otherwise do. */
/* Two columns rather than a float. A floated infobox taller than the lead
   forces every section to clear it, which left ~350px of dead space before
   section 1. As a grid the infobox spans the full column and the body stacks
   beside it independently, so there is no gap and section rules keep a
   consistent width. */
.entry{
  display:grid;grid-template-columns:minmax(0,1fr) 330px;
  column-gap:44px;align-items:start;
  /* Horizontal padding must be restated. `.entry` and `.container` have equal
     specificity and this rule comes later, so a `padding:52px 0 90px`
     shorthand silently zeroes the container inset and the text runs to the
     viewport edge. */
  padding:52px var(--pad) 90px;
}
.entry-head{
  grid-column:1 / -1;
  border-bottom:1px solid var(--line-strong);padding-bottom:14px;margin-bottom:32px;
}
.entry > .lead,.entry > .toc,.entry > section{grid-column:1;min-width:0}
.entry-head h1{
  font-family:var(--serif);font-weight:700;
  font-size:clamp(2.3rem,4.4vw,3.1rem);line-height:1.1;letter-spacing:-0.02em;margin:0;
}
.entry-sub{margin:8px 0 0;color:var(--muted);font-size:1.02rem}

/* Infobox. Occupies the right column for the whole entry. */
.infobox{
  grid-column:2;grid-row:2 / span 100;align-self:start;
  background:var(--bg-sunk);border:1px solid var(--line-strong);
}
.infobox-title{
  margin:0;padding:12px 16px;text-align:center;
  font-family:var(--serif);font-size:1.05rem;font-weight:600;
  border-bottom:1px solid var(--line-strong);
}
.infobox-figure{margin:0;padding:16px 16px 12px}
.infobox-figure img{
  display:block;width:100%;height:auto;aspect-ratio:11/14;object-fit:cover;
  border:1px solid var(--line-strong);
}
.infobox-figure figcaption{
  margin-top:9px;font-size:0.76rem;line-height:1.5;color:var(--muted);text-align:center;
}
.infobox-rows{margin:0;padding:0 16px 14px}
.infobox-rows > div{padding:9px 0;border-top:1px solid var(--line)}
.infobox-rows dt{
  font-size:0.68rem;letter-spacing:0.1em;text-transform:uppercase;color:var(--muted);
  margin-bottom:3px;
}
.infobox-rows dd{margin:0;font-size:0.87rem;line-height:1.5}

/* Lead */
.lead p{margin:0 0 1.15em;font-size:1.09rem;line-height:1.72;max-width:64ch}
.lead p:first-child{font-size:1.2rem}
.lead strong{font-weight:600}

/* Contents box */
.toc{
  justify-self:start;min-width:280px;
  margin:14px 0 8px;padding:16px 26px 18px 18px;
  background:var(--bg-sunk);border:1px solid var(--line);
}
.toc-title{
  margin:0 0 8px;font-family:var(--serif);font-size:0.98rem;font-weight:600;
}
.toc ol{margin:0;padding:0;list-style:none}
.toc li{margin:0}
.toc a{
  display:flex;gap:12px;padding:3px 0;font-size:0.9rem;
  color:var(--accent);text-decoration:none;
}
.toc a:hover{text-decoration:underline}
.toc span{color:var(--muted);min-width:1.1em}

/* Sections. Numbered heading plus a full-width rule, the reference-entry
   convention that makes the page scan as a record rather than a pitch. */
.entry section{padding-top:44px}
.entry section h2{
  display:flex;align-items:baseline;gap:14px;
  margin:0 0 22px;padding-bottom:8px;border-bottom:1px solid var(--line-strong);
  font-family:var(--serif);font-size:clamp(1.45rem,2.2vw,1.85rem);
  font-weight:600;letter-spacing:-0.015em;
}
.sec-num{font-size:0.8em;color:var(--muted);font-weight:400}
/* Scoped to .prose deliberately. As `.entry section h3` this outranked
   `.timeline h3` and `.work-item h3` on specificity and knocked their margins
   out, which threw the career rows out of alignment. */
.prose h3{
  font-family:var(--serif);font-size:1.12rem;font-weight:600;
  margin:1.9em 0 0.5em;letter-spacing:-0.01em;
}

/* Prose */
.prose p{margin:0 0 1.2em}
.prose p:last-child{margin-bottom:0}
.prose ul{margin:0 0 1.2em;padding-left:1.15em}
.prose li{margin-bottom:0.6em;padding-left:0.2em}
.prose li::marker{color:var(--line-strong)}
.prose strong{font-weight:600}

blockquote{
  margin:1.6em 0 0;padding:2px 0 2px 22px;border-left:2px solid var(--line-strong);
}
blockquote p{
  margin:0;font-family:var(--serif);font-size:1.1rem;line-height:1.6;
}
blockquote cite{
  display:block;margin-top:9px;font-style:normal;
  font-size:0.72rem;letter-spacing:0.1em;text-transform:uppercase;color:var(--muted);
}

/* Career. Ruled rows. Date ranges read "2022 to 2024" rather than with a
   dash, matching how Jack writes them. */
.timeline{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}
.timeline li{
  display:grid;grid-template-columns:minmax(0,140px) minmax(0,1fr) minmax(0,1.35fr);
  gap:6px 32px;padding:24px 0;border-bottom:1px solid var(--line);
}
.timeline .period{
  font-size:0.7rem;letter-spacing:0.12em;text-transform:uppercase;
  color:var(--muted);padding-top:6px;
}
.timeline h3{font-family:var(--serif);margin:0;font-size:1.08rem;font-weight:600;letter-spacing:-0.01em}
.timeline .role{margin:4px 0 0;color:var(--muted);font-size:0.9rem}
.timeline .what{margin:0;color:var(--muted);font-size:0.93rem;line-height:1.6}

/* Selected work */
.work-list{border-top:1px solid var(--line)}
.work-item{
  display:grid;grid-template-columns:auto 1fr;gap:28px;align-items:start;
  padding:28px 0;border-bottom:1px solid var(--line);
}
.work-num{font-family:var(--serif);font-size:0.85rem;color:var(--muted);padding-top:4px;min-width:2ch}
.work-item .work-tags{
  margin:0 0 9px;font-size:0.7rem;letter-spacing:0.12em;text-transform:uppercase;color:var(--muted);
}
.work-item h3{font-family:var(--serif);margin:0 0 10px;font-size:1.2rem;font-weight:600;letter-spacing:-0.01em}
.work-item p{margin:0;color:var(--muted);font-size:0.97rem;max-width:70ch}
.work-finding{
  margin-top:14px !important;padding:12px 16px;
  background:var(--accent-soft);border-left:2px solid var(--accent);
  color:var(--text) !important;font-size:0.93rem !important;
}
.work-finding span{
  display:block;font-size:0.66rem;letter-spacing:0.12em;text-transform:uppercase;
  color:var(--muted);margin-bottom:3px;
}

/* Interests and credentials share the definition-row idiom. */
.interest-list,.credentials{margin:0;padding:0;border-top:1px solid var(--line)}
.interest-list > div,.credentials > div{
  display:grid;grid-template-columns:minmax(0,230px) 1fr;gap:6px 32px;
  padding:16px 0;border-bottom:1px solid var(--line);
}
.interest-list dt,.credentials dt{
  font-family:var(--serif);font-size:1rem;font-weight:600;
}
.interest-list dd,.credentials dd{margin:0;color:var(--muted);font-size:0.95rem;line-height:1.6}
.credentials dt{
  font-family:var(--sans);font-size:0.7rem;letter-spacing:0.12em;
  text-transform:uppercase;color:var(--muted);font-weight:400;padding-top:4px;
}
.credentials dd{color:var(--text)}
.cert-row{display:flex;flex-wrap:wrap;gap:6px 28px}
.cert-row span{font-family:var(--serif);font-size:1.02rem}

/* Contact */
.contact-direct{
  margin:20px 0 0;padding:20px 0;
  border-top:1px solid var(--line-strong);border-bottom:1px solid var(--line);
}
.contact-direct a{
  font-family:var(--serif);font-size:clamp(1.15rem,3vw,1.6rem);
  letter-spacing:-0.01em;text-decoration:none;overflow-wrap:anywhere;
}
.contact-direct a:hover{text-decoration:underline}

/* External links */
.link-list{margin:0;padding:0;list-style:none;border-top:1px solid var(--line)}
.link-list li{
  display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 18px;
  padding:14px 0;border-bottom:1px solid var(--line);
}
.link-list span{color:var(--muted);font-size:0.9rem}

/* Footer */
.site-footer{padding:30px 0;color:var(--muted);border-top:1px solid var(--line)}
.site-footer .container{display:flex;align-items:center;justify-content:space-between;gap:16px}
.site-footer small{font-size:0.82rem}
.site-footer a{font-size:0.82rem}

@media (max-width:860px){
  body{font-size:16px}
  :root{--pad:22px}
  .nav{
    display:none;position:absolute;top:68px;left:0;right:0;
    flex-direction:column;gap:0;padding:4px var(--pad) 14px;
    background:var(--bg);border-bottom:1px solid var(--line);
  }
  .nav.open{display:flex}
  .nav a{padding:13px 0;border-bottom:1px solid var(--line)}
  .hamburger{display:block}
  /* One column. Source order is head, infobox, lead, contents, sections, so
     block layout already puts the infobox where it belongs on a phone. */
  .entry{display:block;padding:34px var(--pad) 64px}
  .infobox{width:100%;margin:0 0 30px}
  .toc{width:100%;min-width:0}
  .lead p:first-child{font-size:1.12rem}
  .entry section{padding-top:36px}
  .timeline li{grid-template-columns:1fr;gap:4px;padding:20px 0}
  .timeline .period{padding-top:0;margin-bottom:4px}
  .timeline .what{margin-top:6px}
  .work-item{gap:16px;padding:22px 0}
  .interest-list > div,.credentials > div{grid-template-columns:1fr;gap:4px;padding:14px 0}
  .credentials dt{padding-top:0}
  .site-footer .container{flex-direction:column;align-items:flex-start;gap:8px}
}

/* Honour a reduced-motion preference. The only motion here is smooth scrolling
   and a handful of colour transitions, but the preference is a request, not a
   suggestion about how much motion there is. */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{
    animation-duration:0.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:0.01ms !important;
    scroll-behavior:auto !important;
  }
}