:root {
  --paper: #F2EDE3;
  --print: #FBF8F1;
  --ink: #1C1A16;
  --body: #2D2A24;
  --muted: #5E584D;
  --rule: #CFC6B4;
  --red: #B02A18;
  --pencil: #C4301C;
  --tape: rgba(222, 208, 172, 0.72);

  --serif: 'Newsreader', Georgia, serif;
  --display: 'Libre Caslon Display', Georgia, serif;
  --display-italic: 'Libre Caslon Text', Georgia, serif;
  --mono: 'IBM Plex Mono', ui-monospace, monospace;
  --hand: 'Reenie Beanie', cursive;

  --gutter: clamp(20px, 5vw, 72px);
}

*, *::before, *::after { box-sizing: border-box; }

@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--serif);
  -webkit-font-smoothing: antialiased;
}

a { color: var(--ink); }
a:hover { color: var(--red); }
:focus-visible { outline: 2px solid var(--red); outline-offset: 4px; }

h1, h2, h3, p, figure, dl, dd, ol { margin: 0; }
ol { padding: 0; list-style: none; }
em { font-style: italic; }
h1 em, h2 em, .talk, .metric-value { font-family: var(--display-italic); font-style: italic; font-weight: 400; letter-spacing: -.02em; }

.wrap { padding-inline: var(--gutter); max-width: 1440px; margin-inline: auto; }
.mono-label { font-family: var(--mono); font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.mono-small { font-family: var(--mono); font-size: 12px; color: var(--muted); }
.hand { font-family: var(--hand); color: var(--red); line-height: 1; }
.red { color: var(--red); }
.muted { color: var(--muted); }

/* Hand-drawn pencil marks */
svg path { fill: none; stroke: var(--pencil); stroke-linecap: round; stroke-linejoin: round; }
.struck, .circled, .underlined, .deleted { position: relative; display: inline-block; }
.struck svg { position: absolute; left: -2%; top: 44%; width: 104%; height: .24em; overflow: visible; }
.struck svg path { stroke-width: 5; }
.circled svg { position: absolute; left: -14px; top: -14px; width: calc(100% + 28px); height: calc(100% + 28px); overflow: visible; }
.circled svg path { stroke-width: 2.4; }
.underlined svg { position: absolute; left: 0; bottom: -.18em; width: 100%; height: .28em; overflow: visible; }
.underlined svg path { stroke-width: 3; }
.deleted svg { position: absolute; left: -6%; top: 20%; width: 150%; height: 60%; overflow: visible; }
.deleted svg path { stroke-width: 3; }

/* Buttons and links */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 56px;
  padding: 0 28px;
  border: 0;
  background: var(--ink);
  color: var(--paper);
  font-family: var(--mono);
  font-size: 14px;
  letter-spacing: .04em;
  text-decoration: none;
  cursor: pointer;
}
.btn:hover { background: var(--red); color: var(--paper); }
.btn .prompt { color: #9A937F; }
.btn:hover .prompt { color: var(--paper); }
.text-link { font-family: var(--mono); font-size: 14px; letter-spacing: .04em; text-underline-offset: 6px; }
.actions { display: flex; gap: 28px; align-items: center; flex-wrap: wrap; }
a.plain, nav a { text-decoration: none; }

/* Masthead */
.masthead { padding-top: 28px; display: flex; flex-direction: column; gap: 14px; }
.masthead-row { display: flex; justify-content: space-between; align-items: baseline; gap: 24px; }
.masthead nav { display: flex; gap: 28px; }
.masthead-issue-short { display: none; }
.double-rule { height: 5px; border-top: 1.5px solid var(--ink); border-bottom: .75px solid var(--ink); }

/* Hero */
.hero {
  padding-top: 72px;
  padding-bottom: 96px;
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: 24px;
}
.hero-text { grid-column: span 8; display: flex; flex-direction: column; gap: 40px; }
h1 {
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(44px, 8vw, 116px);
  line-height: .98;
  letter-spacing: -.02em;
}
h1 em { font-size: .9em; }
h1 em { color: var(--red); }
.intro { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 40px; max-width: 760px; font-size: 19px; line-height: 1.6; color: var(--body); }

.photo { grid-column: 9 / span 4; margin-top: 24px; position: relative; display: flex; flex-direction: column; gap: 16px; }
.print {
  position: relative;
  transform: rotate(2.4deg);
  background: var(--print);
  padding: 14px 14px 52px;
  box-shadow: 0 1px 1px rgba(28, 26, 22, .12), 0 14px 30px -12px rgba(28, 26, 22, .35);
  cursor: pointer;
}
.print picture { display: block; }
.print img { display: block; width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; filter: grayscale(1) contrast(1.08); transition: filter .5s ease; }
@media (hover: hover) { .print:hover img { filter: none; } }
.print.is-color img { filter: none; }
.print-note { position: absolute; left: 18px; bottom: 12px; font-size: 30px; color: var(--ink); transform: rotate(-2deg); }
.tape { position: absolute; top: -14px; left: 36%; width: 110px; height: 30px; background: var(--tape); transform: rotate(-5deg); }
.photo figcaption { padding-left: 6px; }
.margin-note { position: absolute; }
.until { display: flex; align-items: flex-end; gap: 6px; align-self: flex-end; margin-top: -6px; transform: rotate(-4deg); }
.until .hand { font-size: 34px; }
.until svg path { stroke-width: 2.6; }

/* Sections */
.section { padding-block: 96px; position: relative; }
.section::before { content: ""; position: absolute; top: 0; left: var(--gutter); right: var(--gutter); border-top: .75px solid var(--ink); }
.section-head { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; row-gap: 24px; align-items: end; margin-bottom: 56px; }
.section-head > div { grid-column: span 6; display: flex; flex-direction: column; gap: 20px; }
.section-head .lede { grid-column: 7 / span 6; font-size: 20px; line-height: 1.55; color: var(--body); }
.section-head .lede.muted { color: var(--muted); font-size: 18px; }
h2 { font-family: var(--display); font-weight: 400; font-size: clamp(42px, 4.8vw, 68px); line-height: 1; letter-spacing: -.015em; }
h2 em { font-size: .9em; }
h2.big { font-size: clamp(48px, 6.7vw, 96px); }

/* Story */
.periods { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 24px; row-gap: 24px; }
.periods li { position: relative; padding-top: 20px; border-top: 1.5px solid var(--ink); display: flex; flex-direction: column; gap: 14px; }
.periods h3 { font-family: var(--display); font-weight: 400; font-size: clamp(26px, 2.4vw, 34px); letter-spacing: -.02em; }
.periods p { font-size: 17px; line-height: 1.55; color: var(--body); max-width: 34ch; }
.periods .past h3, .periods .past p { color: var(--muted); }
.periods .now .mono-small { color: var(--ink); }
.stuck { right: 12px; top: -46px; font-size: 34px; transform: rotate(-4deg); }

/* Work */
.cases { border-top: 1.5px solid var(--ink); }
.case { position: relative; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; align-items: baseline; padding: 40px 0; border-bottom: .75px solid var(--rule); }
.case-num { grid-column: span 1; font-size: 13px; }
.case-title { grid-column: span 4; display: flex; flex-direction: column; gap: 10px; }
.case h3 { font-family: var(--display); font-weight: 400; font-size: clamp(30px, 2.8vw, 40px); letter-spacing: -.02em; line-height: 1; }
.case-desc { grid-column: span 5; font-size: 18px; line-height: 1.55; color: var(--body); }
.metric { grid-column: span 2; display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }
.metric-value { font-size: clamp(48px, 4.6vw, 64px); line-height: .9; }
.metric-label { font-size: 14px; color: var(--muted); }
.metric .circled svg { left: -26px; top: -18px; width: calc(100% + 52px); height: calc(100% + 36px); }
.really { right: -8px; top: -20px; font-size: 30px; transform: rotate(5deg); }

/* Skills */
.skills { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; }
.skills > div { padding-top: 20px; border-top: 1.5px solid var(--ink); display: flex; flex-direction: column; gap: 12px; }
.skills dt { font-family: var(--mono); font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--red); }
.skills dd { font-size: 16px; line-height: 1.55; color: var(--muted); }
.skills .skill-title { font-family: var(--display); font-size: 26px; line-height: 1.15; letter-spacing: -.01em; color: var(--ink); }

/* Apps */
.apps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px 24px; }
.app { display: flex; flex-direction: column; gap: 18px; padding-top: 28px; border-top: 1.5px solid var(--ink); text-decoration: none; }
.app-meta { display: flex; justify-content: space-between; }
.app-name { font-family: var(--display); font-weight: 400; font-size: clamp(42px, 3.7vw, 54px); line-height: 1; letter-spacing: -.015em; }
.app-desc { font-size: 17px; line-height: 1.55; color: var(--body); }
.app:hover .app-name { color: var(--red); }
.retired { border-top-style: dashed; border-top-color: var(--muted); }
.retired .app-name, .retired .app-desc { color: var(--muted); }
.deleted { align-self: flex-start; }
.app-note { font-size: 32px; transform: rotate(-3deg); align-self: flex-start; }

/* Contact */
.contact { display: flex; flex-direction: column; gap: 40px; padding-bottom: 40px; }
.talk { font-size: clamp(84px, 17vw, 240px); line-height: .9; letter-spacing: -.03em; color: var(--red); }
.contact-row { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; row-gap: 40px; align-items: end; }
.contact-row .actions { grid-column: span 7; gap: 20px; }
.facts { grid-column: 9 / span 4; display: grid; grid-template-columns: 90px minmax(0, 1fr); row-gap: 10px; column-gap: 16px; font-size: 16px; }
.facts dt { font-family: var(--mono); font-size: 12px; color: var(--muted); padding-top: 3px; }
.site-footer { display: flex; justify-content: space-between; gap: 8px 24px; flex-wrap: wrap; margin-top: 32px; padding-top: 20px; border-top: 1.5px solid var(--ink); }

/* Tablet */
@media (max-width: 1100px) {
  .masthead-issue { display: none; }
  .hero-text { grid-column: span 7; }
  .photo { grid-column: 8 / span 5; }
  .until { display: none; }
  .intro { grid-template-columns: 1fr; row-gap: 16px; }
  .skills { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 40px; }
  .really { display: none; }
}

/* Mobile */
@media (max-width: 760px) {
  .masthead { padding-top: 20px; gap: 12px; }
  .masthead-row { font-size: 11px; }
  .masthead nav { display: none; }
  .masthead-issue-short { display: inline; }
  .double-rule { height: 4px; }

  .hero { display: flex; flex-direction: column; gap: 28px; padding-top: 36px; padding-bottom: 56px; }
  .hero-text { gap: 28px; }
  .photo { order: -1; margin: 0 8px; gap: 12px; }
  .print { transform: rotate(2deg); padding: 10px 10px 40px; }
  .print-note { left: 14px; bottom: 10px; font-size: 26px; }
  .tape { width: 84px; height: 24px; top: -12px; }
  h1 { line-height: 1; }
  .intro { font-size: 17px; }
    .hero .actions { flex-direction: column; align-items: stretch; gap: 18px; }
  .hero .actions .btn { justify-content: center; }
  .hero .actions .text-link { align-self: center; }

  .section { padding-block: 48px; }
  .section-head { display: flex; flex-direction: column; align-items: flex-start; margin-bottom: 32px; }
  .section-head .lede { font-size: 17px; }
  .periods { grid-template-columns: 1fr; }
  .stuck { top: 8px; right: 0; font-size: 28px; }

  .case { display: flex; flex-direction: column; gap: 10px; padding: 24px 0; }
  .case-desc { font-size: 16px; }
  .metric { flex-direction: row; align-items: baseline; gap: 12px; margin-top: 4px; }
  .metric .circled svg { left: -18px; top: -12px; width: calc(100% + 36px); height: calc(100% + 24px); }

  .skills, .apps { grid-template-columns: 1fr; }
  .app-note { font-size: 28px; }

  .contact-row { display: flex; flex-direction: column; align-items: stretch; }
  .contact-row .btn { flex: 1; justify-content: center; }
  .facts { grid-template-columns: 70px minmax(0, 1fr); }
  .site-footer { flex-direction: column; }
}