/* Jake Fletcher: portfolio
   A light, drawn-sheet look: warm paper, ink, and machinist's layout blue. The title block in the
   header and the dimension lines over each section come from engineering drawings.
   1. Fonts  2. Tokens  3. Base  4. Header and title block  5. Sections  6. Selected work
   7. Other work  8. Experience  9. Toolbox  10. Contact */

/* 1. Fonts ---------------------------------------------------------------- */
@font-face { font-family: 'Archivo'; font-style: normal; font-weight: 100 900; font-stretch: 62% 125%; font-display: swap; src: url('../fonts/archivo-variable.woff2') format('woff2'); }
@font-face { font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 400; font-display: swap; src: url('../fonts/plex-mono-400.woff2') format('woff2'); }
@font-face { font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 500; font-display: swap; src: url('../fonts/plex-mono-500.woff2') format('woff2'); }

/* 2. Tokens --------------------------------------------------------------- */
:root {
  --paper: #f2efe8;
  --panel: #e8e4d9;
  --ink: #16181c;
  --soft: #5b5f67;
  --rule: #c7c2b5;
  --blue: #1c3fb7;

  --sans: 'Archivo', 'Segoe UI', system-ui, sans-serif;
  --mono: 'IBM Plex Mono', ui-monospace, Consolas, monospace;

  --gutter: max(clamp(1.25rem, 5vw, 4rem), calc((100vw - 84rem) / 2));
  --grid: repeat(12, minmax(0, 1fr));
  --gap: clamp(1rem, 2.2vw, 2rem);
}

/* 3. Base ----------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 1.5rem; }
body {
  margin: 0; background: var(--paper); color: var(--ink);
  font: 400 1.0625rem/1.55 var(--sans); text-rendering: optimizeLegibility;
}
img { display: block; max-width: 100%; height: auto; }
h1, h2, h3, h4, p, ul, ol, dl, dd, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 0.2em; }
a:hover { color: var(--blue); }
:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; }
::selection { background: var(--blue); color: var(--paper); }

.mono { font: 400 0.78125rem/1.5 var(--mono); letter-spacing: 0.04em; text-transform: uppercase; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.skip { position: absolute; left: var(--gutter); top: -4rem; padding: 0.5rem 0.9rem; background: var(--ink); color: var(--paper); z-index: 5; }
.skip:focus { top: 0.75rem; }

/* 4. Header and title block ---------------------------------------------- */
.top { padding: 1.4rem var(--gutter) 0; display: flex; justify-content: space-between; align-items: baseline; gap: 1.5rem; }
.top__id { color: var(--soft); }
.top nav ul { display: flex; flex-wrap: wrap; gap: 0.25rem 1.6rem; }
.top nav a { font: 400 0.78125rem/1 var(--mono); letter-spacing: 0.06em; text-transform: uppercase; text-decoration: none; padding: 0.3rem 0; border-bottom: 1px solid transparent; }
.top nav a:hover { border-bottom-color: currentColor; }

.intro { padding: clamp(3rem, 8vw, 6rem) var(--gutter) clamp(3rem, 7vw, 5.5rem); display: grid; grid-template-columns: var(--grid); gap: clamp(1.5rem, 3vw, 2.25rem) var(--gap); align-items: end; }
.intro__name {
  grid-column: 1 / -1;
  font: 800 clamp(2rem, 4.6vw, 3.5rem)/1 var(--sans); font-stretch: 118%;
  letter-spacing: -0.03em; text-transform: uppercase;
}
.intro__name span { display: inline; }
.intro__say { grid-column: 1 / span 7; }
.intro__say p:first-child { font: 500 clamp(1.5rem, 2.9vw, 2.35rem)/1.15 var(--sans); letter-spacing: -0.02em; max-width: 21ch; text-wrap: balance; }
.intro__say p + p { margin-top: 1.25rem; max-width: 34rem; color: var(--soft); font-size: 1.125rem; }
.intro__links { margin-top: 1.9rem; display: flex; flex-wrap: wrap; gap: 0.6rem; }
.btn { display: inline-flex; align-items: center; gap: 0.6rem; padding: 0.72rem 1.05rem; border: 1px solid var(--ink); font: 500 0.8125rem/1 var(--mono); letter-spacing: 0.05em; text-transform: uppercase; text-decoration: none; }
.btn:hover { background: var(--ink); color: var(--paper); }
.btn--solid { background: var(--blue); border-color: var(--blue); color: var(--paper); }
.btn--solid:hover { background: var(--ink); border-color: var(--ink); color: var(--paper); }

/* The title block: the box in the corner of an engineering drawing that says what the sheet is */
.block { grid-column: 8 / -1; display: grid; grid-template-columns: 1fr 1fr; border: 1.5px solid var(--ink); }
.block div { padding: 0.6rem 0.8rem 0.7rem; border-top: 1px solid var(--ink); min-width: 0; }
.block div:nth-child(-n + 1), .block .block__wide:first-child { border-top: 0; }
.block div:nth-child(even):not(.block__wide) { border-left: 1px solid var(--ink); }
.block .block__wide { grid-column: 1 / -1; }
.block dt { font: 400 0.65625rem/1.2 var(--mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--soft); }
.block dd { margin-top: 0.3rem; font: 600 1rem/1.25 var(--sans); }
.block .block__wide:first-child dd { font-size: 1.25rem; font-stretch: 112%; }
.block dd.is-blue { color: var(--blue); }
@media (max-width: 58rem) {
  .intro__say, .block { grid-column: 1 / -1; }
}

/* 5. Sections: each opens with a dimension line ------------------------------ */
.sheet { padding: 0 var(--gutter) clamp(4rem, 9vw, 7.5rem); }
.dim { display: flex; align-items: center; gap: 0.9rem; margin-bottom: clamp(2rem, 5vw, 3.5rem); color: var(--blue); }
.dim::before, .dim::after { content: ""; height: 1px; background: currentColor; }
.dim::before { width: 2.5rem; flex: none; }
.dim::after { flex: 1; }
.dim__tick { width: 1px; height: 0.9rem; background: currentColor; flex: none; }
.dim__tick:first-child { order: -1; margin-right: -0.9rem; }
.dim__tick:last-child { order: 3; margin-left: -0.9rem; }
.dim h2 { font: 500 0.8125rem/1 var(--mono); letter-spacing: 0.1em; text-transform: uppercase; white-space: nowrap; }

/* 6. Selected work ---------------------------------------------------------- */
.job { display: grid; grid-template-columns: var(--grid); gap: 1.75rem var(--gap); }
.job + .job { margin-top: clamp(3.5rem, 8vw, 6.5rem); padding-top: clamp(3.5rem, 8vw, 6.5rem); border-top: 1px solid var(--rule); }
.job__head { grid-column: 1 / span 4; }
.job__no { color: var(--blue); }
.job__head h3 { margin-top: 0.6rem; font: 800 clamp(1.9rem, 3.4vw, 2.75rem)/0.98 var(--sans); font-stretch: 112%; letter-spacing: -0.03em; }
.job__spec { margin-top: 1.5rem; border-top: 1px solid var(--ink); }
.job__spec div { display: grid; grid-template-columns: 5.5rem minmax(0, 1fr); gap: 0.75rem; padding: 0.5rem 0; border-bottom: 1px solid var(--rule); }
.job__spec dt { font: 400 0.6875rem/1.7 var(--mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--soft); }
.job__spec dd { font-size: 0.9375rem; line-height: 1.4; }
.job__body { grid-column: 6 / -1; }
.job__lead { font: 500 clamp(1.2rem, 1.9vw, 1.5rem)/1.3 var(--sans); letter-spacing: -0.012em; }
.job__points { margin-top: 1.4rem; }
.job__points li { position: relative; padding: 0.42rem 0 0.42rem 1.4rem; color: #2b2e34; }
.job__points li::before { content: ""; position: absolute; left: 0; top: 1.05em; width: 0.7rem; height: 1px; background: var(--blue); }
.job__shows { margin-top: 1.4rem; padding-left: 1rem; border-left: 2px solid var(--blue); color: var(--soft); font-size: 0.9375rem; }
.job__shows b { display: block; font: 400 0.6875rem/1.6 var(--mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--blue); }
.job__figs { grid-column: 1 / -1; display: grid; grid-template-columns: 1.55fr 1fr; gap: var(--gap); align-items: start; margin-top: 0.75rem; }
.job__figs img { width: 100%; border: 1px solid var(--ink); background: var(--panel); }
.job__figs figcaption { margin-top: 0.5rem; color: var(--soft); }
.job__figs figcaption b { font-weight: 500; color: var(--ink); margin-right: 0.6em; }
.stat { margin-top: 1.5rem; display: flex; align-items: baseline; gap: 0.75rem; flex-wrap: wrap; }
.stat b { font: 800 clamp(1.8rem, 3vw, 2.5rem)/1 var(--sans); font-stretch: 112%; letter-spacing: -0.03em; color: var(--blue); }
.stat span { color: var(--soft); font-size: 0.9375rem; }
@media (max-width: 58rem) {
  .job__head, .job__body { grid-column: 1 / -1; }
  .job__figs { grid-template-columns: 1fr; }
}

/* 7. Other work -------------------------------------------------------------- */
.shelf + .shelf { margin-top: clamp(2.5rem, 6vw, 4rem); }
.shelf__title { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; padding-bottom: 0.7rem; border-bottom: 1.5px solid var(--ink); }
.shelf__title h3 { font: 700 clamp(1.35rem, 2.4vw, 1.9rem)/1.05 var(--sans); letter-spacing: -0.025em; }
.shelf__title p { color: var(--soft); text-align: right; }
.shelf ul { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.75rem var(--gap); margin-top: 1.5rem; }
.piece img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; border: 1px solid var(--ink); background: var(--panel); filter: saturate(0.92); transition: filter 0.2s; }
.piece:hover img { filter: none; }
.piece h4 { margin-top: 0.75rem; font: 700 1.0625rem/1.2 var(--sans); letter-spacing: -0.01em; }
.piece h4 a { text-decoration: none; }
.piece h4 a::after { content: " \2197"; color: var(--blue); font-weight: 400; }
.piece p { margin-top: 0.3rem; font-size: 0.9375rem; line-height: 1.45; color: var(--soft); }
.piece .mono { margin-top: 0.5rem; font-size: 0.6875rem; color: var(--blue); }
@media (max-width: 70rem) { .shelf ul { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 48rem) { .shelf ul { grid-template-columns: repeat(2, minmax(0, 1fr)); } .shelf__title { display: block; } .shelf__title p { text-align: left; margin-top: 0.3rem; } }
@media (max-width: 26rem) { .shelf ul { grid-template-columns: minmax(0, 1fr); } }

/* 8. Experience: a record down the page, newest first ------------------------- */
.post { display: grid; grid-template-columns: var(--grid); gap: 0.75rem var(--gap); padding: 1.6rem 0; border-top: 1px solid var(--rule); }
.post:first-of-type { border-top: 1.5px solid var(--ink); }
.post__when { grid-column: 1 / span 2; color: var(--soft); padding-top: 0.3rem; }
.post__what { grid-column: 3 / span 4; }
.post__what h3 { font: 700 1.3125rem/1.15 var(--sans); letter-spacing: -0.02em; }
.post__what p { margin-top: 0.3rem; color: var(--soft); font-size: 0.9375rem; }
.post__did { grid-column: 7 / -1; }
.post__did li { position: relative; padding: 0.25rem 0 0.25rem 1.4rem; font-size: 0.96875rem; color: #2b2e34; }
.post__did li::before { content: ""; position: absolute; left: 0; top: 0.95em; width: 0.7rem; height: 1px; background: var(--blue); }
.era { margin: clamp(2.5rem, 6vw, 4rem) 0 0; padding: 1rem 1.1rem; background: var(--panel); border-left: 3px solid var(--blue); display: grid; grid-template-columns: var(--grid); gap: 0.5rem var(--gap); }
.era .mono { grid-column: 1 / span 2; color: var(--blue); padding-top: 0.2rem; }
.era p:last-child { grid-column: 3 / -1; max-width: 46rem; }
@media (max-width: 58rem) {
  .post__when, .post__what, .post__did, .era .mono, .era p:last-child { grid-column: 1 / -1; }
}

/* 9. Toolbox ------------------------------------------------------------------ */
.kit { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1.5px solid var(--ink); border-left: 1px solid var(--rule); }
.kit div { padding: 1rem 1.1rem 1.25rem; border-right: 1px solid var(--rule); border-bottom: 1px solid var(--rule); }
.kit dt { font: 400 0.6875rem/1.4 var(--mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--blue); }
.kit dd { margin-top: 0.5rem; font-size: 0.96875rem; line-height: 1.5; }
@media (max-width: 58rem) { .kit { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 30rem) { .kit { grid-template-columns: minmax(0, 1fr); } }

/* 10. Contact ----------------------------------------------------------------- */
.reach { background: var(--ink); color: var(--paper); padding: clamp(3.5rem, 9vw, 7rem) var(--gutter) 2.25rem; }
.reach__label { color: #8fa4ee; }
.reach__mail { display: block; margin-top: 1rem; font: 700 clamp(1.3rem, 3vw, 2.25rem)/1.1 var(--sans); font-stretch: 108%; letter-spacing: -0.025em; text-decoration: none; overflow-wrap: anywhere; }
.reach__mail:hover { color: #8fa4ee; }
.reach__row { margin-top: clamp(2.5rem, 6vw, 4rem); padding-top: 1.25rem; border-top: 1px solid #3a3d44; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1rem 2rem; }
.reach__row ul { display: flex; flex-wrap: wrap; gap: 0.5rem 1.75rem; }
.reach__row a { text-decoration: none; border-bottom: 1px solid #5c6068; padding-bottom: 0.1rem; }
.reach__row a:hover { color: #8fa4ee; border-bottom-color: currentColor; }
.reach__row p { color: #9a9ea6; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { transition: none !important; }
}
@media print {
  .top nav, .intro__links, .skip { display: none; }
  body { background: #fff; }
  .reach { background: #fff; color: #000; }
}