/* Shared styles for every page of patrickpope.com.
   Layout: concrete grey, wide grotesque headings, one sky-blue accent. The pastel (--fill) is for
   buttons and bands of colour; small text and the logo use its deeper partner (--accent) to stay readable. */
:root {
  --paper: #e8e8e6;
  --paper-2: #dededb;
  --card: #f4f4f2;
  --ink: #121212;
  --ink-soft: #565654;
  --rule: #c9c9c5;
  --accent: #1d6580;
  --fill: #a9d8ee;
  --on-fill: #121212;

  --font-display: "Mona Sans", "Helvetica Neue", Arial, system-ui, sans-serif;
  --font-body: "Mona Sans", "Helvetica Neue", Arial, system-ui, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;

  --step--1: 0.875rem;
  --step-0: 1.0625rem;
  --step-1: 1.3rem;
  --step-2: 1.75rem;
  --step-3: clamp(2.1rem, 4.6vw, 3.6rem);
  --wrap: 1200px;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper: #121212; --paper-2: #191919; --card: #1e1e1d; --ink: #ededea; --ink-soft: #a3a3a0;
    --rule: #2e2e2c; --accent: #a9d8ee; --fill: #a9d8ee; --on-fill: #121212;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --paper: #121212; --paper-2: #191919; --card: #1e1e1d; --ink: #ededea; --ink-soft: #a3a3a0;
  --rule: #2e2e2c; --accent: #a9d8ee; --fill: #a9d8ee; --on-fill: #121212;
  color-scheme: dark;
}

html { scroll-padding-top: 80px; }
@media (max-width: 720px) { html { scroll-padding-top: 112px; } }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--step-0);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3 { font-family: var(--font-display); font-stretch: 125%; font-weight: 700; line-height: 1; text-wrap: balance; margin: 0; letter-spacing: -0.025em; }
p { margin: 0; }
a { color: inherit; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 2px; }

.wrap { max-width: var(--wrap); margin-inline: auto; padding-inline: clamp(16px, 4vw, 40px); }
.label {
  font-family: var(--font-mono); font-size: 0.75rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--accent);
}

/* Header */
.site-head {
  position: sticky; top: env(safe-area-inset-top, 0px); z-index: 10;
  background: color-mix(in srgb, var(--paper) 92%, transparent);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--rule);
}
.site-head .wrap { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-block: 12px; }
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; min-width: 0; }
.brand svg { flex: none; }
.brand-name { font-family: var(--font-display); font-stretch: 125%; font-weight: 700; font-size: 1.1rem; line-height: 1.1; letter-spacing: -0.015em; }
.brand-sub { display: block; font-family: var(--font-mono); font-stretch: 100%; font-size: 0.68rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-soft); font-weight: 400; }
.nav { display: flex; align-items: center; gap: clamp(12px, 2.4vw, 28px); font-size: 0.95rem; }
.nav a { text-decoration: none; color: var(--ink-soft); }
.nav a:hover { color: var(--ink); }
.nav a[aria-current="page"] { color: var(--ink); text-decoration: underline; text-decoration-color: var(--accent); text-decoration-thickness: 2px; text-underline-offset: 6px; }
/* Phones: the menu drops to its own row under the name so every page is one tap away */
@media (max-width: 720px) {
  .site-head .wrap { flex-wrap: wrap; row-gap: 6px; padding-block: 10px; }
  .nav { width: 100%; justify-content: space-between; font-size: 0.92rem; }
}
@media (max-width: 370px) { .nav { font-size: 0.82rem; } }

.btn {
  display: inline-flex; align-items: center; gap: 10px;
  background: var(--fill); color: var(--on-fill);
  text-decoration: none; border: 0; cursor: pointer;
  font: 600 1rem/1.2 var(--font-body);
  padding: 15px 24px; border-radius: 0;
  transition: background .15s ease, color .15s ease;
}
.btn::after { content: "→"; }
.btn:hover { background: var(--ink); color: var(--paper); }

/* Hero: label, then the headline right across the page, then the words and the button, then a wide photograph */
.hero { border-bottom: 1px solid var(--rule); }
.hero-grid {
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: clamp(10px, 1.4vw, 18px) 24px; padding-block: clamp(24px, 3vw, 40px) clamp(32px, 5vw, 56px);
}
.hero-grid > * { grid-column: 1 / -1; }
.hero h1 { font-size: clamp(3rem, 13.5vw, 7.5rem); line-height: 0.92; letter-spacing: -0.035em; margin-top: -4px; }
.hero .intro { grid-column: 1 / span 7; font-weight: 600; font-size: clamp(1.15rem, 1.6vw, 1.35rem); line-height: 1.45; max-width: 38ch; }
.hero .intro, .hero-actions { margin-top: clamp(6px, 1.6vw, 22px); }
.hero-actions { grid-column: 8 / -1; align-self: end; display: grid; justify-items: end; gap: 12px; }
.hero-band { margin: 0 auto; padding-bottom: clamp(40px, 6vw, 72px); display: grid; gap: 10px; }
.hero-band .photo { aspect-ratio: 21 / 9; }
.hero-band .photo img { object-position: 50% 62%; }
@media (max-width: 760px) {
  .hero .intro, .hero-actions { grid-column: 1 / -1; }
  .hero-actions { justify-items: start; }
  .hero-band .photo { aspect-ratio: 4 / 3; }
}

/* Photographs. Until a real image is dropped in, .photo shows a labelled placeholder of the same shape. */
.photo {
  margin: 0; position: relative; overflow: hidden; min-width: 0;
  border: 1px dashed color-mix(in srgb, var(--accent) 50%, transparent);
  background:
    repeating-linear-gradient(135deg, transparent 0 11px, color-mix(in srgb, var(--accent) 9%, transparent) 11px 12px),
    var(--card);
  display: grid; place-items: center; text-align: center; padding: 16px; box-sizing: border-box;
  font-family: var(--font-mono); font-size: 0.75rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--accent);
}
.photo:has(img) { border: 0; padding: 0; background: var(--paper-2); }
.photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }

/* Proof strip: three short facts in columns */
.strip { background: var(--fill); color: var(--on-fill); }
.strip ul { list-style: none; margin: 0 auto; padding-block: 22px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px 32px; }
.strip li { font-weight: 600; line-height: 1.35; }
.strip li span { display: block; font-weight: 400; font-size: var(--step--1); color: color-mix(in srgb, var(--on-fill) 78%, transparent); }
@media (max-width: 720px) { .strip ul { grid-template-columns: 1fr; } }
/* Wider screens: first fact hugs the left edge, the last the right, the middle one sits centred */
@media (min-width: 1000px) {
  .strip ul { grid-template-columns: 1fr auto 1fr; }
  .strip li:nth-child(2) { text-align: center; }
  .strip li:nth-child(3) { text-align: right; justify-self: end; }
}

/* Sections */
section { padding-block: clamp(40px, 5vw, 72px); }
/* The first section on a page sits close under the menu bar */
main > section:first-child { padding-top: clamp(24px, 3vw, 40px); }
.alt { background: var(--paper-2); border-block: 1px solid var(--rule); }
.sec-head { display: grid; gap: 14px; margin-bottom: clamp(28px, 4vw, 48px); max-width: 720px; }
.sec-head h1, .sec-head h2 { font-size: var(--step-3); }
.sec-head p { color: var(--ink-soft); }
/* What I do: label, headline and intro stacked, with extra room before Bookshelf doors */
#what-i-do { margin-bottom: clamp(36px, 5vw, 72px); max-width: none; grid-template-columns: minmax(0, 1fr) auto;
  align-items: center; column-gap: clamp(24px, 4vw, 64px); }
#what-i-do .wid-copy { display: grid; gap: 14px; max-width: 720px; }
#what-i-do .wid-copy > div { display: grid; gap: 14px; }
/* Two 3D sketches shown as small bordered prints, tilted towards each other and just overlapping */
.prints { display: flex; align-items: center; padding: 14px 10px; }
.prints img { width: clamp(150px, 14vw, 200px); height: auto; aspect-ratio: 1; display: block; box-sizing: border-box;
  background: #fbfbf9; padding: 7px; border: 1px solid rgba(0, 0, 0, 0.08); box-shadow: 0 6px 16px rgba(0, 0, 0, 0.12); }
.prints img:first-child { transform: rotate(-7deg); position: relative; z-index: 1; }
.prints img:last-child { transform: rotate(8deg); margin-left: -14px; position: relative; z-index: 2; }
/* Phones and tablets: the prints sit under the intro, a little smaller */
@media (max-width: 820px) {
  #what-i-do { grid-template-columns: 1fr; }
  .prints { justify-content: center; padding-top: 10px; }
  .prints img { width: min(40vw, 160px); }
}

/* Services: four columns, each under a heavy rule */
.services { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 32px 28px; }
.service { display: grid; gap: 10px; align-content: start; padding-top: 18px; border-top: 1.5px solid var(--ink); }
.service .code { font-family: var(--font-mono); font-size: 0.8rem; color: var(--accent); }
.service h3 { font-size: var(--step-1); line-height: 1.1; letter-spacing: -0.02em; }
.service p { color: var(--ink-soft); font-size: 0.98rem; }
.note { margin-top: 24px; font-size: var(--step--1); color: var(--ink-soft); }
.note a { color: var(--ink); text-decoration-color: var(--accent); text-underline-offset: 3px; }
@media (max-width: 960px) { .services { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .services { grid-template-columns: 1fr; } }

/* Featured service: the hidden bookshelf door, shown closed and open */
.feature {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: clamp(24px, 4vw, 56px);
  align-items: start; margin-bottom: clamp(40px, 6vw, 64px);
}
.feature-copy { display: grid; gap: 16px; align-content: start; }
.feature-copy h3 { font-size: var(--step-3); }
.feature-copy p { color: var(--ink-soft); max-width: 44ch; }
.feature-copy .aside { font-size: var(--step--1); }
.feature-copy .aside a { color: var(--ink); text-decoration-color: var(--accent); text-decoration-thickness: 2px; text-underline-offset: 3px; }
.pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.pair figure { margin: 0; display: grid; gap: 8px; min-width: 0; }
.pair .photo { aspect-ratio: 3 / 4; }
@media (max-width: 820px) {
  /* Phones: label, title, then the two photos, then the description */
  .feature { grid-template-columns: 1fr; row-gap: 16px; }
  .feature-copy { display: contents; }
  .feature-copy .label { order: 1; }
  .feature-copy h3 { order: 2; }
  .feature .pair { order: 3; margin-block: 8px 4px; }
  .feature-copy p:not(.label) { order: 4; }
}
.services-label { margin-bottom: 18px; }

/* Process */
.steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 28px; counter-reset: step; --wash: var(--fill); }
.steps li { counter-increment: step; display: grid; gap: 10px; align-content: start; position: relative; }
.steps li::before { content: "Stage " counter(step); font-family: var(--font-mono); font-size: 0.75rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--accent); }
.steps h3 { font-size: var(--step-1); line-height: 1.1; letter-spacing: -0.02em; }
.steps p { color: var(--ink-soft); font-size: 0.98rem; }
/* Desktop: the rule above each stage breaks around its drawing */
.steps .art { order: -1; display: flex; align-items: center; gap: 14px; margin-bottom: 8px; }
.steps .art::before, .steps .art::after { content: ""; flex: 1; border-top: 1.5px solid var(--ink); }
.steps .art svg { width: 64px; height: 64px; flex: none; overflow: visible; }
/* Tablet and phone: full rule, drawing tucked into the top-right corner beside the stage and title */
@media (max-width: 900px) {
  .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 36px; }
  .steps li { border-top: 1.5px solid var(--ink); padding-top: 18px; }
  .steps .art { order: 0; position: absolute; top: 14px; right: 0; margin: 0; }
  .steps .art::before, .steps .art::after { display: none; }
  .steps .art svg { width: 58px; height: 58px; }
  .steps h3 { padding-right: 70px; }
}
@media (max-width: 520px) { .steps { grid-template-columns: 1fr; } }
/* Dark mode: the pen lines turn sky blue, so the wash goes deep teal to keep them readable */
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .steps { --wash: #1d6580; } }
:root[data-theme="dark"] .steps { --wash: #1d6580; }

/* Work gallery under the service list */
.gallery { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; margin-top: clamp(36px, 5vw, 56px); }
.gallery figure { margin: 0; display: grid; gap: 8px; min-width: 0; }
.gallery .photo { cursor: zoom-in; }
.gallery .photo img { transition: transform .35s ease; }
.gallery .photo:hover img { transform: scale(1.04); }
.gallery .photo:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) { .gallery .photo img { transition: none; } }

/* Photo viewer: a dark full-screen layer; the photo is shown whole (not cropped), up to twice the tile's width */
.zoom { width: 100%; height: 100%; max-width: none; max-height: none; margin: 0; padding: 0; border: 0;
  background: rgba(14, 14, 14, 0.92); color: #ededea; overscroll-behavior: contain; }
.zoom[open] { display: grid; place-items: center; }
.zoom::backdrop { background: transparent; }
.zoom figure { margin: 0; display: grid; gap: 12px; justify-items: center; }
.zoom img { display: block; width: auto; height: auto;
  max-width: min(var(--zoom-box, 92vw), 92vw); max-height: min(var(--zoom-box, 80vh), 80vh); }
.zoom figcaption { color: #a9d8ee; }
.zoom button { position: absolute; width: 48px; height: 48px; border: 0; background: transparent; color: #ededea;
  font: 400 1.6rem/1 var(--font-body); cursor: pointer; border-radius: 50%; }
.zoom button:hover { background: rgba(255, 255, 255, 0.1); }
.zoom-close { top: 14px; right: 14px; font-size: 2rem; }
.zoom-prev, .zoom-next { top: 50%; transform: translateY(-50%); }
.zoom-prev { left: 14px; }
.zoom-next { right: 14px; }
/* Phones: the photo takes the width, so the arrows move underneath it */
@media (max-width: 820px) {
  .zoom-prev, .zoom-next { top: auto; bottom: 24px; transform: none; }
  .zoom-prev { left: calc(50% - 64px); }
  .zoom-next { right: calc(50% - 64px); }
}
.gallery .photo { aspect-ratio: 4 / 3; }
/* Phones and tablets: the photos become one row you swipe sideways */
@media (max-width: 820px) {
  .gallery { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 72%; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 8px; }
  .gallery figure { scroll-snap-align: start; }
}

/* About */
.about { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: clamp(28px, 5vw, 64px); align-items: center; }
.about-figure { margin: 0; display: grid; gap: 8px; min-width: 0; }
.about .photo { aspect-ratio: 4 / 3; }
.about-copy { display: grid; gap: 16px; }
.about-copy h1, .about-copy h2 { font-size: var(--step-3); }
.about-copy p:not(.label) { color: var(--ink-soft); }
.about-copy p a { color: var(--ink); text-decoration-color: var(--accent); text-underline-offset: 3px; }
.about-copy .sign { color: var(--ink); font-weight: 500; }
@media (max-width: 760px) { .about { grid-template-columns: 1fr; } }

/* Closing call to action */
.cta { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 20px; }
.cta h2 { font-size: var(--step-3); }
.cta p { color: var(--ink-soft); margin-top: 10px; }
/* How I work: pull the closing call to action up under the stages so its button is in view sooner */
#how { padding-bottom: clamp(44px, 4.5vw, 64px); }
#how + section { padding-top: 0; }

/* Contact */
.contact { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: clamp(28px, 5vw, 64px); align-items: start; }
.contact-info { display: grid; gap: 16px; }
.contact-info h1, .contact-info h2 { font-size: var(--step-3); }
.contact-info p { color: var(--ink-soft); }
.contact-info p a { color: var(--ink); text-decoration-color: var(--accent); text-underline-offset: 3px; }
.contact-more { display: grid; gap: 16px; }
/* The phone-call drawing from How I work, larger: under the headline on desktop, beside it on phones.
   Thinner pen at this size keeps the line weight matching the How I work page. */
.contact-title { display: grid; gap: 20px; }
.contact-art { --wash: var(--fill); display: block; width: clamp(104px, 10vw, 128px); }
.contact-art svg { display: block; width: 100%; height: auto; overflow: visible; stroke-width: 1.25; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .contact-art { --wash: #1d6580; } }
:root[data-theme="dark"] .contact-art { --wash: #1d6580; }
form { background: var(--card); border: 1px solid var(--rule); padding: clamp(20px, 2.6vw, 28px); display: grid; gap: 14px; }
.row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
@media (max-width: 560px) { .row { grid-template-columns: 1fr; } }
.field { display: grid; gap: 6px; min-width: 0; }
.field label { font-size: 0.9rem; font-weight: 600; }
.field label small { font-weight: 400; color: var(--ink-soft); }
.hint { font-size: var(--step--1); color: var(--ink-soft); }
input, select, textarea {
  font: inherit; font-size: 1rem; color: var(--ink);
  background: var(--paper); border: 1px solid var(--rule); border-radius: 0;
  padding: 11px 12px; width: 100%; box-sizing: border-box;
}
input[type="file"] { padding: 9px; font-size: 0.9rem; }
textarea { min-height: 96px; resize: vertical; }
input:focus, select:focus, textarea:focus { outline: 2px solid var(--accent); outline-offset: 0; border-color: transparent; }
.hp { position: absolute; left: -9999px; }

footer { border-top: 1px solid var(--rule); padding-block: 28px; font-size: var(--step--1); color: var(--ink-soft); }
/* Left, centre and right on wider screens; stacked and centred on phones */
footer .wrap { display: grid; grid-template-columns: 1fr auto 1fr; align-items: baseline; gap: 8px 24px; }
footer .wrap > :nth-child(2) { justify-self: center; }
footer .wrap > :nth-child(3) { justify-self: end; }
@media (max-width: 600px) {
  footer .wrap { grid-template-columns: 1fr; justify-items: center; text-align: center; }
  footer .wrap > :nth-child(3) { justify-self: center; }
}

@media (max-width: 860px) {
  .contact { grid-template-columns: 1fr; gap: 16px; }
  /* Phones: the form follows straight after the opening lines; "what happens next" comes after it */
  .contact-info { display: contents; }
  .contact form { order: 1; margin-top: 8px; }
  .contact-more { order: 2; margin-top: 20px; }
  .contact-title { grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 16px; }
  .contact-art { width: 76px; }
  .contact-art svg { stroke-width: 1.9; }
}