/* Graham Hill portfolio — local assets only */
:root {
  --paper: #f5f2ea;
  --paper-2: #ebe7dd;
  --ink: #18211e;
  --muted: #59635f;
  --line: #c9c5ba;
  --accent: #a93b1c;
  --dark: #17231f;
  --light: #fbf9f3;
  --signal: #d9ef87;
  --max: 1120px;
  --sans: "Avenir Next", Avenir, "Segoe UI", Helvetica, Arial, sans-serif;
  --serif: Iowan Old Style, "Palatino Linotype", Palatino, Georgia, serif;
  --mono: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; color: var(--ink); background: var(--paper); font: 16px/1.6 var(--sans); -webkit-font-smoothing: antialiased; }
::selection { color: var(--ink); background: var(--signal); }
a { color: inherit; text-underline-offset: .2em; }
a:focus-visible { outline: 3px solid var(--light); outline-offset: 3px; box-shadow: 0 0 0 6px var(--ink); border-radius: 1px; }
img { max-width: 100%; }
.wrap { width: min(calc(100% - 48px), var(--max)); margin-inline: auto; }
.skip-link { position: absolute; left: 12px; top: -80px; z-index: 20; padding: 12px 16px; color: var(--light); background: var(--dark); }
.skip-link:focus { top: 12px; }
.site-header { display: grid; grid-template-columns: 1fr auto; align-items: center; min-height: 92px; border-bottom: 1px solid var(--line); }
.identity { display: flex; align-items: baseline; gap: 14px; text-decoration: none; }
.identity strong { font: 600 1.02rem/1 var(--serif); }
.identity span { color: var(--muted); font: .62rem/1 var(--mono); text-transform: uppercase; letter-spacing: .07em; }
.site-nav { display: flex; align-items: stretch; gap: 28px; }
.site-nav a { display: flex; align-items: center; min-height: 44px; color: var(--muted); font-size: .75rem; font-weight: 650; text-decoration: none; }
.site-nav a:hover, .site-nav a[aria-current="page"] { color: var(--ink); text-decoration: underline; text-decoration-color: var(--accent); text-decoration-thickness: 2px; text-underline-offset: 8px; }

.page-intro { padding-block: clamp(64px, 9vw, 110px) clamp(54px, 7vw, 88px); }
.eyebrow, .section-label, .item-meta, .fact-label, .article-kicker { margin: 0; color: var(--accent); font: 650 .68rem/1.45 var(--mono); letter-spacing: .08em; text-transform: uppercase; }
.page-intro h1 { max-width: 930px; margin: 22px 0 28px; font: 400 clamp(2.9rem, 6.3vw, 6rem)/.98 var(--serif); letter-spacing: -.05em; text-wrap: balance; }
.page-intro .intro-copy { max-width: 760px; margin: 0; color: var(--muted); font: 400 clamp(1.08rem, 1.8vw, 1.35rem)/1.55 var(--serif); text-wrap: pretty; }
.home-intro { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(260px, .45fr); gap: clamp(50px, 9vw, 120px); align-items: end; }
.home-intro h1 { max-width: 790px; }
.availability { padding: 24px 0; border-block: 1px solid var(--line); }
.availability p { margin: 0 0 15px; color: var(--muted); font-size: .85rem; }
.availability a { font-weight: 700; }

.resume-strip { color: var(--light); background: var(--dark); }
.resume-strip .wrap { display: grid; grid-template-columns: 1.15fr repeat(3, 1fr); }
.resume-strip div { min-height: 128px; padding: 24px; border-left: 1px solid #405049; }
.resume-strip div:first-child { border-left: 0; padding-left: 0; }
.resume-strip strong { display: block; margin-top: 12px; font: 400 1.1rem/1.25 var(--serif); }
.resume-strip p { margin: 8px 0 0; color: #b9c2bd; font-size: .77rem; }
.resume-strip .fact-label { color: var(--signal); }

.content-section { padding-block: clamp(72px, 9vw, 112px); border-bottom: 1px solid var(--line); }
.section-grid { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: clamp(44px, 8vw, 100px); }
.section-heading { position: sticky; top: 30px; align-self: start; }
.section-heading h2 { margin: 18px 0 0; font: 400 clamp(1.85rem, 3vw, 3rem)/1.08 var(--serif); letter-spacing: -.025em; }
.section-heading p:last-child { color: var(--muted); font-size: .82rem; }
.evidence-list, .project-list, .writing-list { border-top: 1px solid var(--ink); }
.evidence-item, .project-row, .writing-row { display: grid; grid-template-columns: 140px minmax(0, 1fr) 28px; gap: 24px; padding: 30px 0; border-bottom: 1px solid var(--line); text-decoration: none; }
.evidence-item > span:first-child, .project-row > span:first-child, .writing-row > span:first-child { color: var(--muted); font: .67rem var(--mono); }
.evidence-item h3, .project-row h2, .project-row h3, .writing-row h2 { margin: 0 0 9px; font: 400 1.38rem/1.15 var(--serif); }
.evidence-item p, .project-row p, .writing-row p { margin: 0; color: var(--muted); font-size: .9rem; }
.row-arrow { color: var(--accent); font: 1rem var(--mono); }
a.evidence-item:hover h3, a.project-row:hover h2, a.project-row:hover h3, a.writing-row:hover h2 { text-decoration: underline; text-decoration-thickness: 1px; }

.capability-grid { display: grid; grid-template-columns: repeat(2, 1fr); border-top: 1px solid var(--line); }
.capability-grid article { padding: 28px 28px 28px 0; border-bottom: 1px solid var(--line); }
.capability-grid article:nth-child(even) { padding-left: 28px; border-left: 1px solid var(--line); }
.capability-grid h3 { margin: 0 0 9px; font: 400 1.2rem var(--serif); }
.capability-grid p { margin: 0; color: var(--muted); font-size: .86rem; }
.inline-cta { display: flex; justify-content: space-between; align-items: center; gap: 28px; padding-block: clamp(58px, 8vw, 88px); }
.inline-cta h2 { margin: 0; font: 400 clamp(1.8rem, 3.5vw, 3.4rem)/1.06 var(--serif); }
.button { min-height: 48px; display: inline-flex; align-items: center; justify-content: space-between; gap: 28px; padding: 12px 17px; color: var(--light); background: var(--dark); font-size: .78rem; font-weight: 700; text-decoration: none; white-space: nowrap; }
.button:hover { background: #283630; }

/* Projects */
.featured-project { margin-bottom: 76px; padding: clamp(34px, 5vw, 60px); color: var(--light); background: var(--dark); }
.featured-top { display: grid; grid-template-columns: 1fr 1.45fr; gap: 60px; }
.featured-project h2 { margin: 18px 0 0; font: 400 clamp(2.4rem, 4.5vw, 4.7rem)/.98 var(--serif); letter-spacing: -.04em; }
.featured-summary { margin: 0; color: #d8dedb; font: 400 clamp(1.15rem, 2vw, 1.55rem)/1.5 var(--serif); }
.featured-facts { display: grid; grid-template-columns: repeat(3, 1fr); margin-top: 50px; border-top: 1px solid #46554f; }
.featured-facts div { padding: 25px 22px 0 0; }
.featured-facts div + div { padding-left: 22px; border-left: 1px solid #46554f; }
.featured-facts strong { display: block; font: 400 1.05rem/1.3 var(--serif); }
.featured-facts p { margin: 7px 0 0; color: #aeb9b3; font-size: .76rem; }
.project-section { padding-block: 74px; border-top: 1px solid var(--line); }
.project-section-head { display: grid; grid-template-columns: 220px 1fr; gap: 60px; margin-bottom: 36px; }
.project-section-head h2 { margin: 0; font: 400 2rem/1.1 var(--serif); }
.project-section-head p { margin: 0; color: var(--muted); }
.accomplishment-list { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--ink); }
.accomplishment-list li { display: grid; grid-template-columns: 145px 1fr; gap: 26px; padding: 24px 0; border-bottom: 1px solid var(--line); }
.accomplishment-list strong { font: 400 1.12rem/1.3 var(--serif); }
.accomplishment-list p { margin: 4px 0 0; color: var(--muted); font-size: .87rem; }

/* Writing index and articles */
.writing-row { grid-template-columns: 140px minmax(0, 1fr) 110px 28px; }
.read-time { color: var(--muted); font: .66rem var(--mono); text-transform: uppercase; }
.empty-note { max-width: 650px; margin-top: 42px; color: var(--muted); font-size: .86rem; }
.article-header { padding-block: clamp(62px, 8vw, 100px); border-bottom: 1px solid var(--line); }
.article-header h1 { max-width: 940px; margin: 20px 0 30px; font: 400 clamp(2.8rem, 5.7vw, 5.5rem)/1 var(--serif); letter-spacing: -.045em; text-wrap: balance; }
.article-deck { max-width: 760px; margin: 0; color: var(--muted); font: 400 clamp(1.1rem, 1.8vw, 1.35rem)/1.55 var(--serif); }
.article-meta { display: flex; gap: 22px; margin-top: 34px; color: var(--muted); font: .67rem var(--mono); text-transform: uppercase; }
.article-layout { display: grid; grid-template-columns: 220px minmax(0, 700px); gap: clamp(44px, 9vw, 120px); padding-block: clamp(64px, 9vw, 110px); }
.article-toc { position: sticky; top: 28px; align-self: start; }
.article-toc a { display: block; padding: 7px 0; color: var(--muted); font-size: .76rem; text-decoration: none; }
.article-toc a:hover { color: var(--ink); text-decoration: underline; }
.prose h2 { margin: 64px 0 18px; font: 400 clamp(1.7rem, 3vw, 2.5rem)/1.1 var(--serif); letter-spacing: -.02em; }
.prose h2:first-child { margin-top: 0; }
.prose h3 { margin: 36px 0 10px; font: 600 1rem var(--sans); }
.prose p, .prose li { color: #303b37; font: 400 1.04rem/1.78 var(--serif); }
.prose ul, .prose ol { padding-left: 22px; }
.prose blockquote { margin: 40px 0; padding: 25px 0 25px 30px; border-left: 3px solid var(--accent); }
.prose blockquote p { margin: 0; font-size: 1.25rem; font-style: italic; }
.prose pre { overflow-x: auto; padding: 24px; color: var(--light); background: var(--dark); font: .8rem/1.6 var(--mono); }
.prose code { font-family: var(--mono); font-size: .86em; }
.table-scroll { max-width: 100%; margin: 32px 0; overflow-x: auto; border-top: 1px solid var(--ink); }
.prose table { width: 100%; min-width: 620px; border-collapse: collapse; color: #303b37; font-size: .82rem; }
.prose th, .prose td { padding: 14px 16px 14px 0; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
.prose th { color: var(--ink); font: 650 .67rem/1.4 var(--mono); letter-spacing: .05em; text-transform: uppercase; }
.prose td:first-child { width: 24%; font-weight: 700; }
.back-link { display: inline-flex; align-items: center; min-height: 44px; gap: 9px; font-size: .75rem; font-weight: 700; }

/* Contact */
.contact-layout { display: grid; grid-template-columns: .85fr 1.15fr; gap: clamp(60px, 10vw, 140px); padding-block: clamp(72px, 10vw, 130px); }
.contact-layout h1 { margin: 20px 0 28px; font: 400 clamp(3rem, 6vw, 5.7rem)/.98 var(--serif); letter-spacing: -.05em; }
.contact-layout .intro-copy { color: var(--muted); font: 400 1.2rem/1.55 var(--serif); }
.contact-details { border-top: 1px solid var(--ink); }
.contact-details div { padding: 25px 0; border-bottom: 1px solid var(--line); }
.contact-details dt { color: var(--muted); font: .65rem var(--mono); text-transform: uppercase; letter-spacing: .08em; }
.contact-details dd { margin: 7px 0 0; font: 400 1.05rem/1.45 var(--serif); }
.contact-details a { overflow-wrap: anywhere; }
.contact-note { margin-top: 36px; padding: 23px; background: var(--paper-2); color: var(--muted); font-size: .84rem; }

.site-footer { min-height: 94px; display: flex; justify-content: space-between; align-items: center; gap: 24px; border-top: 1px solid var(--line); color: var(--muted); font: .64rem var(--mono); text-transform: uppercase; letter-spacing: .05em; }

@media (max-width: 820px) {
  .wrap { width: min(calc(100% - 32px), var(--max)); }
  .site-header { grid-template-columns: 1fr; padding-block: 20px 15px; gap: 16px; }
  .site-nav { gap: 6px 22px; justify-content: flex-start; flex-wrap: wrap; }
  .site-nav a { min-height: 34px; font-size: .68rem; }
  .home-intro, .section-grid, .featured-top, .project-section-head, .article-layout, .contact-layout { grid-template-columns: 1fr; }
  .home-intro { gap: 44px; }
  .resume-strip .wrap { grid-template-columns: 1fr 1fr; }
  .resume-strip div, .resume-strip div:first-child { padding: 21px; border-left: 1px solid #405049; border-bottom: 1px solid #405049; }
  .section-heading, .article-toc { position: static; }
  .evidence-item, .project-row, .writing-row { grid-template-columns: 90px minmax(0,1fr) 24px; }
  .writing-row .read-time { display: none; }
  .featured-facts { grid-template-columns: 1fr; }
  .featured-facts div, .featured-facts div + div { padding: 20px 0; border-left: 0; border-bottom: 1px solid #46554f; }
  .article-toc { display: none; }
}
@media (max-width: 540px) {
  .wrap { width: min(calc(100% - 26px), var(--max)); }
  .identity span { display: none; }
  .site-nav a { font-size: .62rem; }
  .page-intro { padding-top: 52px; }
  .page-intro h1 { font-size: clamp(2.75rem, 14vw, 4rem); }
  .resume-strip .wrap { grid-template-columns: 1fr; }
  .resume-strip div, .resume-strip div:first-child { min-height: 0; padding: 20px 0; border-left: 0; }
  .evidence-item, .project-row, .writing-row { grid-template-columns: 1fr 24px; gap: 10px; }
  .evidence-item > span:first-child, .project-row > span:first-child, .writing-row > span:first-child { grid-column: 1 / -1; }
  .capability-grid { grid-template-columns: 1fr; }
  .capability-grid article:nth-child(even) { padding-left: 0; border-left: 0; }
  .inline-cta { align-items: flex-start; flex-direction: column; }
  .button { width: 100%; }
  .accomplishment-list li { grid-template-columns: 1fr; gap: 7px; }
  .site-footer { display: block; padding-block: 26px; }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }