/* G-Snow */

/* Newsreader (SIL Open Font License), self-hosted: variable weight + optical size */
@font-face { font-family: "Newsreader"; font-style: normal; font-weight: 400 500; font-display: swap;
  src: url("/assets/fonts/newsreader-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Newsreader"; font-style: normal; font-weight: 400 500; font-display: swap;
  src: url("/assets/fonts/newsreader-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Newsreader"; font-style: italic; font-weight: 400; font-display: swap;
  src: url("/assets/fonts/newsreader-italic-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Newsreader"; font-style: italic; font-weight: 400; font-display: swap;
  src: url("/assets/fonts/newsreader-italic-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }


:root {
  --paper: #fbfaf7;
  --ink: #141514;
  --grey: #5c605b;
  --pine: #24412f;
  --rule: rgba(20, 21, 20, 0.14);

  --serif: "Newsreader", Georgia, "Times New Roman", serif;
  --mono: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  --gutter: clamp(20px, 5vw, 64px);
}

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

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--serif);
  font-size: clamp(1.125rem, 1.05rem + 0.3vw, 1.3125rem);
  line-height: 1.55;
  font-optical-sizing: auto;
  -webkit-font-smoothing: antialiased;
}

img, svg { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 0.18em; }
a:hover { color: var(--pine); }
p { margin: 0 0 1em; }
h1, h2, h3 { font-weight: 500; line-height: 1.08; letter-spacing: -0.02em; margin: 0; text-wrap: balance; }

::selection { background: var(--pine); color: var(--paper); }
:focus-visible { outline: 2px solid var(--pine); outline-offset: 3px; }

.page { max-width: 1120px; margin: 0 auto; padding: 0 var(--gutter); }
.col { max-width: 36rem; }

/* Header */

.site { overflow-x: hidden; overflow-x: clip; }

.top {
  position: relative; z-index: 2;
  display: flex; justify-content: space-between; align-items: center; gap: 16px;
  padding: 26px 0;
  font-size: 1rem;
}
.brand { display: inline-flex; align-items: center; gap: 12px; text-decoration: none; font-weight: 500; font-size: clamp(1.4rem, 1.2rem + 0.8vw, 1.9rem); letter-spacing: -0.02em; }
.brand svg { width: 1.45em; height: 1.45em; color: var(--pine); flex: none; }
.brand:hover { color: var(--ink); }
.top nav { display: flex; align-items: center; gap: clamp(16px, 3vw, 36px); }
.top nav a { text-decoration: none; color: #2d302c; }
.top nav a:hover { color: var(--pine); }
.top .pill {
  padding: 9px 22px; border: 1px solid var(--pine); border-radius: 999px; color: var(--ink);
  transition: background-color .15s ease, color .15s ease;
}
.top .pill:hover { background: var(--pine); color: var(--paper); }
@media (max-width: 560px) {
  .top nav a:not(.pill) { display: none; }
  .top .pill { padding: 7px 16px; font-size: 0.9375rem; }
}

/* Opening */

.opening {
  position: relative;
  padding: clamp(40px, 7vw, 96px) 0 clamp(64px, 9vw, 120px);
}
.opening .col { position: relative; z-index: 1; }
.opening h1 {
  font-size: clamp(2.6rem, 1.6rem + 4.4vw, 5.4rem);
  line-height: 1.0;
  letter-spacing: -0.03em;
  max-width: 11ch;
  margin-bottom: 0.55em;
}
.opening .col p { font-size: 1.15em; color: #2d302c; max-width: 30ch; }

/* The mark, with loose contour lines radiating out from it */
.hero-mark { position: relative; width: 112px; margin: 0 0 36px; order: -1; }
.hero-mark img { position: relative; z-index: 1; width: 100%; }
.hero-mark::before {
  content: ""; position: absolute; left: 50%; top: 50%;
  width: 520%; aspect-ratio: 1; transform: translate(-50%, -50%);
  background: url("/assets/img/contours.svg?v=2") center / contain no-repeat;
  -webkit-mask-image: radial-gradient(closest-side, #000 30%, rgba(0,0,0,0.35) 62%, transparent 100%);
  mask-image: radial-gradient(closest-side, #000 30%, rgba(0,0,0,0.35) 62%, transparent 100%);
  pointer-events: none;
}
.opening { display: flex; flex-direction: column; }

@media (min-width: 960px) {
  .opening { display: block; min-height: min(78vh, 760px); }
  .hero-mark {
    position: absolute; right: 2%; top: 40%; transform: translateY(-50%);
    width: clamp(300px, 30vw, 420px); margin: 0;
  }
  .hero-mark::before { width: 420%; }
}

/* Prose sections */

.block { padding: clamp(56px, 8vw, 104px) 0; border-top: 1px solid var(--rule); }
.block h2 { font-size: clamp(1.9rem, 1.4rem + 1.8vw, 2.8rem); margin-bottom: 0.7em; }
.block .col > p:last-child { margin-bottom: 0; }

.split { display: grid; gap: 8px 64px; }
@media (min-width: 960px) {
  .split { grid-template-columns: 17rem minmax(0, 36rem); }
}

/* Find / Understand / Act */

.fua { margin: 0 0 1.6em; }
.fua div { display: grid; grid-template-columns: 9.5rem 1fr; gap: 0 20px; padding: 18px 0; border-bottom: 1px solid var(--rule); }
.fua div:first-child { border-top: 1px solid var(--rule); }
.fua dt { font-style: italic; color: var(--pine); font-size: 1.45em; line-height: 1.1; }
.fua dd { margin: 0; }
@media (max-width: 520px) {
  .fua div { grid-template-columns: 1fr; gap: 4px; }
}

/* Work */

.shots { margin: clamp(32px, 5vw, 56px) 0; display: grid; gap: 20px; }
.shots figure { margin: 0; }
.shots img { border: 1px solid var(--rule); background: #f5f0ea; }
.shots figcaption { font-family: var(--mono); font-size: 0.75rem; color: var(--grey); margin-top: 10px; }
.shots .phones { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
@media (min-width: 760px) {
  .shots { grid-template-columns: minmax(0, 1fr) 360px; align-items: start; }
}

.note { color: var(--grey); font-style: italic; }

/* Contact */

.email { font-size: clamp(1.6rem, 1.1rem + 2.2vw, 2.6rem); letter-spacing: -0.02em; overflow-wrap: anywhere; }

.foot {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 24px;
  padding: 28px 0 40px; border-top: 1px solid var(--rule);
  font-size: 0.9375rem; color: var(--grey);
}
.foot p { margin: 0; }

.core { font-size: 1.15em; line-height: 1.4; letter-spacing: -0.01em; margin: 1.4em 0; }
.core:last-child { margin-bottom: 0; }

.lead { font-style: italic; color: var(--grey); }
.sub { font-size: clamp(1.4rem, 1.2rem + 0.8vw, 1.75rem); margin: 2.2em 0 0.6em; }

.stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin: 1.6em 0 0.5em; border-top: 1px solid var(--rule); }
.stats div { padding-top: 14px; }
.stats dt { font-size: 0.875rem; color: var(--grey); order: 2; }
.stats dd { margin: 0 0 4px; font-size: clamp(2.4rem, 1.8rem + 2.4vw, 3.6rem); line-height: 1; letter-spacing: -0.03em; color: var(--pine); }
.stats div { display: flex; flex-direction: column; }
.stats dd { order: 1; }
.source { font-family: var(--mono); font-size: 0.75rem; color: var(--grey); margin-bottom: 1.6em; }

/* Snow canvas (assets/snow.js): full-bleed over the hero, reaching up behind the header */
.snow {
  position: absolute; z-index: 1; pointer-events: none;
  top: -110px; bottom: 0; left: calc(50% - 50vw); width: 100vw; height: calc(100% + 110px);
}

/* Legal pages */
.legal { max-width: 38rem; padding: clamp(40px, 7vw, 88px) 0 clamp(64px, 9vw, 110px); }
.legal h1 { font-size: clamp(2.4rem, 1.8rem + 2.4vw, 3.6rem); letter-spacing: -0.03em; margin-bottom: 0.3em; }
.legal h2 { font-size: 1.35em; margin: 1.8em 0 0.5em; }
.legal .updated { font-family: var(--mono); font-size: 0.75rem; color: var(--grey); margin-bottom: 2em; }
.foot a { display: inline-block; padding: 10px 0; }