@font-face { font-family: Inter; font-style: normal; font-weight: 400; font-display: swap; src: url('/assets/inter-regular.woff2') format('woff2'); }
@font-face { font-family: Inter; font-style: normal; font-weight: 600; font-display: swap; src: url('/assets/inter-600.woff2') format('woff2'); }
@font-face { font-family: Inter; font-style: normal; font-weight: 700; font-display: swap; src: url('/assets/inter-700.woff2') format('woff2'); }
@font-face { font-family: 'Space Grotesk'; font-style: normal; font-weight: 400; font-display: swap; src: url('/assets/space-grotesk-400.woff2') format('woff2'); }
@font-face { font-family: 'Space Grotesk'; font-style: normal; font-weight: 500; font-display: swap; src: url('/assets/space-grotesk-500.woff2') format('woff2'); }
@font-face { font-family: 'Space Grotesk'; font-style: normal; font-weight: 700; font-display: swap; src: url('/assets/space-grotesk-700.woff2') format('woff2'); }
@font-face { font-family: 'Playwrite IE'; font-style: normal; font-weight: 400; font-display: swap; src: url('/assets/playwrite-ie-400.woff2') format('woff2'); }
@font-face { font-family: Caveat; font-style: normal; font-weight: 700; font-display: swap; src: url('/assets/caveat-700.woff2') format('woff2'); }

:root {
  --text: #37352f;
  --muted: #474747;
  --border: #e9e9e7;
  --background: #fff;
  --accent-text: #003f91;
  --button-blue: #024daf;
  --button-blue-hover: #003f91;
  --secondary-text: #474747;
  --page-width: 900px;
  --page-inset: 96px;
}
* { box-sizing: border-box; }
html { scroll-padding-top: 70px; }
body { margin: 0; background: var(--background); color: var(--text); font-family: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; font-size: 16px; line-height: 1.5; }
a { color: inherit; text-underline-offset: 3px; text-decoration-thickness: 1px; }
a:hover { color: #171715; }
a:focus-visible, summary:focus-visible { outline: 2px solid var(--accent-text); outline-offset: 4px; border-radius: 2px; }
.skip-link { position: fixed; top: -80px; left: 16px; z-index: 20; padding: 10px 16px; background: white; border: 1px solid var(--text); }
.skip-link:focus { top: 8px; }
.breadcrumbs { position: fixed; top: 0; left: 0; right: 0; z-index: 10; display: flex; align-items: center; gap: 10px; min-height: 54px; padding: 12px 20px; background: rgba(255,255,255,.96); font-size: 14px; white-space: nowrap; overflow-x: auto; }
.breadcrumbs a { display: inline-block; text-decoration: none; border-radius: 3px; padding: 2px 0; }
.breadcrumb-separator { color: var(--secondary-text); }
.page { width: 100%; max-width: var(--page-width); margin: 0 auto; padding: 194px var(--page-inset) 280px; }
.page-header { margin-bottom: 16px; }
.page-header h1 { margin: 0; padding: 2px; font-size: 40px; line-height: 1.2; letter-spacing: -.02em; font-weight: 700; overflow-wrap: break-word; }
article { display: flow-root; }
article p { margin: 0; padding: 3px 2px; line-height: 1.5; white-space: pre-wrap; overflow-wrap: break-word; }
article h1, article h2, article h3, article h4, article h5, article h6 { font-weight: 600; padding: 3px 2px; line-height: 1.3; overflow-wrap: break-word; }
article h1 { font-size: 30px; margin: 20px 0 0; }
article h2 { font-size: 24px; margin: 18px 0 0; }
article h3 { font-size: 20px; margin: 12px 0 0; }
article h4, article h5, article h6 { font-size: 16px; margin: 12px 0 0; }
article strong, article b { font-weight: 600; }
article ul, article ol { margin: 0; padding: 0 0 0 28px; }
article li { padding: 3px 2px; line-height: 1.5; }
article blockquote { margin: 8px 0; padding: 0 14px; border-left: 3px solid var(--text); font-size: 20px; }
article a { color: var(--muted); }
.spacer { min-height: 32px; }
.notion-divider { margin: 8px 0; height: 1px; background: var(--border); }
.notion-image { margin: 8px 0; max-width: 100%; line-height: 0; }
.notion-image img { display: block; width: 100%; height: auto; }
.notion-caption { font-size: 13px; line-height: 1.5; color: var(--muted); padding: 6px 0; }
.notion-column-list { display: flex; align-items: flex-start; gap: 46px; }
.notion-column { flex: 1 1 0; min-width: 0; }
.notion-button { margin: 20px 0 4px; }
.notion-button a { display: inline-flex; align-items: center; padding: 8px 12px; min-height: 42px; border: 1px solid var(--border); border-radius: 5px; color: var(--text); text-decoration: none; box-shadow: 0 1px 2px #00000003; }
.notion-button a:hover { background: #f7f7f5; }
.notion-page { display: block; padding: 3px 4px; color: var(--text); text-decoration: none; min-height: 30px; }
.notion-page::before { content: '▤'; display: inline-block; width: 24px; color: var(--secondary-text); }
.notion-page:hover { background: #f7f7f5; }
.notion-callout { display: flex; gap: 12px; background: #f7f7f5; padding: 16px; margin: 8px 0; border-radius: 4px; }
table { border-collapse: collapse; max-width: 100%; }
th, td { padding: 8px 12px; border: 1px solid var(--border); text-align: left; }

@media (max-width: 700px) {
  :root { --page-inset: 24px; }
  .page { padding-top: 124px; padding-bottom: 96px; }
  .page-header h1 { font-size: 32px; }
  .breadcrumbs { padding: 10px 16px; gap: 8px; }
  .breadcrumbs a:last-child { overflow: hidden; text-overflow: ellipsis; }
  .notion-column-list { flex-direction: column; gap: 16px; }
  .notion-column { width: 100%; }
}
@media print {
  .breadcrumbs, .skip-link, .notion-button { display: none; }
  .page { padding: 0; max-width: none; }
  .spacer { min-height: 12px; }
  h1, h2, h3, h4 { break-after: avoid; }
  img { break-inside: avoid; }
}

/* Homepage header and hero. The case-study layouts keep their existing styles. */
.page-home { --hero-ink: #393939; --hero-accent: #0062e3; --hero-dot: #dfe2e5; font-family: 'Space Grotesk', sans-serif; }
.page-home .page, .page-studies .page, .page-explorations .page { max-width: none; padding: 0; }
.site-header, .hero { background-color: #fff; background-image: radial-gradient(circle, var(--hero-dot) 1px, transparent 1px); background-size: 24px 24px; }
.site-header { --hero-accent: #0062e3; --hero-dot: #dfe2e5; position: sticky; top: 0; z-index: 10; font-family: 'Space Grotesk', sans-serif; }
.page-cv .page { padding-top: 64px; padding-bottom: 64px; }
.page-cv .notion-divider { border: 0; height: 1px; margin: 24px 0; padding: 0; }
.page-cv .notion-divider + h2 { margin-top: 0; }
.header-inner { max-width: 1120px; min-height: 96px; margin: 0 auto; padding: 20px 16px; display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.brand { display: inline-flex; align-items: center; gap: 12px; text-decoration: none; flex-shrink: 0; }
.brand-mark { color: var(--hero-accent); font-size: 32px; font-weight: 700; font-style: italic; letter-spacing: -.13em; padding-right: 5px; }
.brand-name { font-family: 'Courier New', monospace; font-size: 18px; font-weight: 700; letter-spacing: -.035em; }
.primary-nav { display: flex; align-items: center; gap: 28px; font-size: 15px; font-weight: 500; }
.primary-nav a { text-decoration: none; }
.primary-nav a[aria-current="page"] { color: var(--accent-text); }
.page-studies .work-container, .page-explorations .work-container { padding-top: 48px; }
.hero-cv { margin-top: 28px; }
.primary-nav > a:not(.pill-button):hover { color: var(--accent-text); }
.pill-button { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 44px; padding: 10px 22px; border-radius: 999px; background: var(--button-blue); color: white; font-size: 16px; font-weight: 500; text-decoration: none; transition: background-color .15s ease, transform .15s ease; }
.button-arrow { display: block; flex: 0 0 20px; width: 20px; height: 20px; }
.pill-button:hover { background: var(--button-blue-hover); color: #fff; transform: translateY(-1px); }
.hero { min-height: 0; padding: 74px 24px 24px; color: var(--hero-ink); text-align: center; }
.hero-content { max-width: 760px; margin: 0 auto; }
.hero-greeting { display: flex; align-items: center; justify-content: center; gap: 10px; margin: 0 0 22px; font-family: 'Courier New', monospace; font-size: 20px; font-weight: 700; }
.hero-greeting strong { color: var(--accent-text); font-weight: 700; }
.hero h1 { max-width: 740px; margin: 0 auto 24px; font-size: clamp(34px, 4vw, 48px); line-height: 1; font-weight: 500; letter-spacing: -.025em; text-wrap: balance; }
.hero-description { max-width: 700px; margin: 0 auto; font-size: 20px; line-height: 1.4; font-weight: 400; color: var(--secondary-text); text-wrap: balance; }
.hero-details { display: grid; gap: 22px; margin: 24px 0 28px; font-size: 14px; }
.hero-details dt { margin-bottom: 9px; color: #171717; font-family: 'Courier New', monospace; font-size: 14px; font-weight: 700; }
.hero-details dd { margin: 0; }
.tool-list { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.tool-chip { display: inline-flex; align-items: center; gap: 7px; padding: 5px 12px; border: 1px solid #e7e8ea; border-radius: 7px; background: #fff; font-size: 13px; }
.tool-chip svg { width: 16px; height: 16px; flex: 0 0 16px; }
.hero-location { font-weight: 700; display: flex; align-items: center; justify-content: center; gap: 8px; }
.scottish-flag { width: 21px; height: 14px; border-radius: 1px; flex: 0 0 21px; }
.site-footer { max-width: var(--page-width); margin: 0 auto; padding: 24px var(--page-inset) 32px; color: var(--secondary-text); font-family: 'Space Grotesk', sans-serif; font-size: 14px; font-weight: 400; text-align: center; }
.site-footer p { margin: 0; }
.work-container { max-width: var(--page-width); margin: 0 auto; padding: 24px var(--page-inset) 24px; }
#work { margin-top: 0; scroll-margin-top: 116px; }
@media (max-width: 600px) {
  .header-inner { min-height: 108px; padding: 14px 24px; flex-wrap: wrap; gap: 8px; }
  .brand { width: 100%; justify-content: center; gap: 10px; }
  .brand-mark { font-size: 26px; }
  .brand-name { font-size: 15px; }
  .primary-nav { width: 100%; justify-content: center; gap: 24px; font-size: 13px; }
  .hero { min-height: 0; padding: 52px 24px 24px; }
  .hero h1 { font-size: clamp(32px, 7.5vw, 42px); }
  .hero-description { font-size: 17px; }
  .work-container { padding-top: 24px; padding-bottom: 16px; }
  #work { scroll-margin-top: 128px; }
}
@media (prefers-reduced-motion: reduce) { .pill-button { transition: none; } .pill-button:hover { transform: none; } }
@media print {
  .site-header { display: none; }
  .hero { min-height: 0; background: none; padding: 24px; }
  .work-container { padding: 0; }
}

/* Keep an equal gap between project previews on home and My work. */
.work-group { display: flow-root; }
.work-group + .work-group { margin-top: 48px; }
.work-group > .notion-image:first-child,
.work-group .notion-column > .notion-image:first-child { margin-top: 0; }

/* Phone-screen examples should fit comfortably on desktop. */
.page-experiment .notion-image { max-width: 280px; margin: 24px auto; }
.page-experiment .notion-caption { white-space: normal; }

/* Align case-study images with the text on desktop. */
@media (min-width: 701px) {
  .page article .notion-image { margin-left: 0; margin-right: 0; text-align: left; }
  article .notion-image img { margin-left: 0; margin-right: auto; object-position: left; }
}

/* Reduce supporting writing examples while retaining the opening image size. */
@media (min-width: 701px) {
  .page-writing .notion-image ~ .notion-image { max-width: 520px; }
}

/* Consistent reading rhythm for case studies and the CV. */
:is(.page-writing, .page-identity, .page-workshop, .page-experiment, .page-drewtv, .page-cv) article {
  --section-gap: 40px;
  --image-gap: 32px;
  --divider-gap: 32px;
}
.page-cv article { --divider-gap: 24px; }
:is(.page-writing, .page-identity, .page-workshop, .page-experiment, .page-drewtv, .page-cv) article .spacer { display: none; }
:is(.page-writing, .page-identity, .page-workshop, .page-experiment, .page-drewtv, .page-cv) article p {
  padding: 0;
  margin: 0 0 12px;
  white-space: normal;
}
:is(.page-writing, .page-identity, .page-workshop, .page-experiment, .page-drewtv, .page-cv) article :is(ul, ol) {
  margin: 0 0 12px;
}
:is(.page-writing, .page-identity, .page-workshop, .page-experiment, .page-drewtv, .page-cv) article :is(h1, h2) {
  padding: 0;
  margin: var(--section-gap) 0 12px;
}
:is(.page-writing, .page-identity, .page-workshop, .page-experiment, .page-drewtv, .page-cv) article :is(h3, h4, h5, h6) {
  padding: 0;
  margin: 24px 0 12px;
}
:is(.page-writing, .page-identity, .page-workshop, .page-experiment, .page-drewtv, .page-cv) article > h4:first-child {
  margin-top: 0;
}
:is(.page-writing, .page-identity, .page-workshop, .page-experiment, .page-drewtv, .page-cv) article .notion-divider {
  border: 0;
  padding: 0;
  height: 1px;
  margin: var(--divider-gap) 0;
}
:is(.page-writing, .page-identity, .page-workshop, .page-experiment, .page-drewtv, .page-cv) article .notion-divider + :is(h1, h2, h3, h4, h5, h6) {
  margin-top: 0;
}
:is(.page-writing, .page-identity, .page-workshop, .page-experiment, .page-drewtv) article > :is(.notion-image, .notion-column-list) {
  margin-top: var(--image-gap);
  margin-bottom: var(--image-gap);
}
:is(.page-writing, .page-identity, .page-workshop, .page-experiment, .page-drewtv) article .notion-column > .notion-image {
  margin-top: 0;
  margin-bottom: 0;
}
:is(.page-writing, .page-identity, .page-workshop, .page-experiment, .page-drewtv) article :is(.notion-image, .notion-column-list) + :is(h1, h2, h3, h4) {
  margin-top: 0;
}
:is(.page-writing, .page-identity, .page-workshop, .page-experiment, .page-drewtv) article .notion-caption {
  padding: 8px 0 0;
}
.page-writing article > .spacer:first-child + .notion-image { margin-top: 0; }
@media (max-width: 700px) {
  :is(.page-writing, .page-identity, .page-workshop, .page-experiment, .page-drewtv, .page-cv) article {
    --section-gap: 32px;
    --image-gap: 24px;
    --divider-gap: 24px;
  }
}

/* CV contact details and download action. */
.page-cv .page-header { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.page-cv .cv-download { flex-shrink: 0; }
.page-cv article .cv-contact { margin-bottom: 16px; }
.page-cv article .cv-contact p { margin: 0; }
@media (max-width: 600px) {
  .page-cv .page-header { flex-wrap: wrap; }
}
@media print { .cv-download { display: none; } }

/* Give the web CV room to read without changing case-study layouts. */
.page-cv article { --divider-gap: 36px; }
.page-cv article p { line-height: 1.65; margin-bottom: 16px; }
.page-cv article li { line-height: 1.65; padding: 0 0 16px 2px; }
.page-cv article li:last-child { padding-bottom: 0; }
.page-cv article h2 { margin-bottom: 20px; }
.page-cv article h3, .page-cv article h4 { margin-bottom: 12px; }
.page-cv article .cv-contact { display: grid; gap: 6px; margin: 20px 0 28px; }
.page-cv article .cv-contact p { margin: 0; }
.page-cv article .cv-contact a { color: var(--text); text-decoration: underline; }

/* Explorations uses the same index layout as My work. */
article .index-title { font-size: 24px; margin: 0 0 12px; font-weight: 600; }
article .index-intro { margin: 0 0 32px; padding: 0; white-space: normal; }
.page-drewtv .project-meta { font-size: 14px; color: var(--muted); margin-bottom: 24px; }
.page-drewtv figure { margin-left: 0; margin-right: 0; }
.drewtv-icon-comparison { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin: 32px 0; }
.drewtv-icon-comparison .notion-image { margin: 0; }
.page-drewtv .notion-caption { color: var(--muted); }
@media (max-width: 700px) {
  .drewtv-icon-comparison { gap: 12px; margin: 24px 0; }
  .drewtv-icon-comparison .notion-caption { font-size: 12px; }
}