/* Instrument Serif — SIL OFL 1.1 (instrument-serif-OFL.txt), Fontsource's Latin subset, served by the site itself.
   The italic was added 2026-10-23 (B255) from Fontsource's latin-400-italic, so Heritage's italic is drawn, not slanted by the browser.
   The renderer prepends this file to css/look.css and copies the woff2 files to fonts/,
   so the url() is relative to css/. */
@font-face { font-family: "Instrument Serif"; font-style: normal; font-weight: 400; font-display: swap;
  src: url(../fonts/instrument-serif-latin-400-normal.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: "Instrument Serif"; font-style: italic; font-weight: 400; font-display: swap;
  src: url(../fonts/instrument-serif-latin-400-italic.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; }

/* DM Sans — SIL OFL 1.1 (dm-sans-OFL.txt), Fontsource's Latin subset, served by the site itself.
   The renderer prepends this file to css/look.css and copies the woff2 files to fonts/,
   so the url() is relative to css/. */
@font-face { font-family: "DM Sans"; font-style: normal; font-weight: 100 1000; font-display: swap;
  src: url(../fonts/dm-sans-latin-wght-normal.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; }

/* Look: Editorial. An illustrator, a photographer, a writer: one person whose work is the point.
   One idea: a magazine page that steps back so the work leads. A quiet uncoated paper, black ink,
   one rust spot colour for the action, a serif set large with a real italic, square plates with
   nothing laid over them, and captions the way a magazine sets them: the title of a work in italic.
   Grown from B64's editorial (its rust, its DM Sans, its ink proof strip, rules instead of cards);
   its DM Serif Display gives way to Instrument Serif, which has the italic a caption needs.
   Not Heritage: no cream, no grain, no green, no double rules; a sans for reading, uppercase running
   heads on a hairline, one heavy rule over the headline, and the artist's colours left alone.
   Tokens first; the rules after them are this look's bounded set. */

:root {
  --bg: #f4f2ed;
  --bg-raised: #fbfaf7;
  --bg-alt: #e9e6df;
  --bg-line: #d3cec4;
  --ink: #191613;
  --ink-dim: #5a544c;
  --accent: #8c3a17;          /* rust, B64 editorial's: the one spot colour, kept for the action */
  --accent-strong: #6e2d11;
  --accent-ink: #ffffff;
  --accent-text: #8c3a17;
  --band: #191613;            /* the dark ground is the ink itself */
  --band-ink: #f4f2ed;
  --band-dim: #bab3a8;
  --band-accent: #e8a27c;
  /* the hero sits on a heavier cover stock than the page, so a site with no picture up top still opens on a field
     (the gate's fold rule; B256's Ashgrove Studio). Literals, so a checker reads the pair shown: ink 13.9, dim 5.8,
     rust 5.9 on it. */
  --hero-ground: #e8e1d5;
  --hero-ink: #191613;
  --hero-dim: #5a544c;
  --hero-accent: #8c3a17;
  --hero-scrim: #191613;
  --proof-bg: #191613;        /* B64 editorial's ink strip */
  --proof-ink: #f4f2ed;
  --proof-mark: #e8a27c;
  --footer-bg: #191613;
  --footer-ink: #cfc8bd;
  --photo-filter: none;       /* the work is the artist's colour: never graded */
  --rule-strong: 1px solid var(--ink);

  --font-display: "Instrument Serif", Georgia, serif;
  --font-text: "DM Sans", system-ui, sans-serif;
  --font-kicker: var(--font-text);
  --font-button: var(--font-text);
  --display-weight: 400;
  --heading-weight: 400;
  --display-tracking: -0.015em;
  --display-leading: 0.94;
  --kicker-case: uppercase;
  --kicker-tracking: 0.16em;
  --kicker-weight: 600;
  --kicker-size: var(--step--2);
  --button-weight: 600;
  --button-tracking: 0.01em;
  --text-leading: 1.6;
  --step-4: clamp(2.5rem, 1.7rem + 3.6vw, 4.75rem);
  --step-6: clamp(3.6rem, 1.3rem + 9.8vw, 9.5rem);
  --measure: 33em;

  --radius: 0;
  --radius-card: 0;
  --radius-btn: 0;
  --radius-media: 0;
  --shadow-1: none;
  --shadow-2: none;
  --reveal-shift: 6px;
}

/* Instrument Serif is narrow and small on the body; a heading a step up reads at the weight of the text under it. */
h3 { font-size: var(--step-2); line-height: 1.1; }

/* The nameplate: the studio's name in the italic, as a magazine sets its title. */
.wordmark { font-family: var(--font-display); font-style: italic; font-size: var(--step-2); letter-spacing: -0.01em; }
.site-header { background: var(--bg); border-bottom: 1px solid var(--ink); }

/* Running heads: the label under a hairline across the head, the way a magazine opens a department. */
.section-head { max-width: none; }
.section-head .lede { max-width: 30em; }
.kicker { max-width: none; padding-top: 0.7rem; border-top: 1px solid var(--ink); color: var(--ink); }
.contact-card .kicker { border-top-color: color-mix(in srgb, var(--accent-ink) 60%, transparent); }
.work .section-head { margin-bottom: var(--space-2); }

/* The headline: a heavy rule over it, the one weight on the page; the deck under it in the italic. */
.hero--typographic .hero-heading, .hero--split .hero-heading { padding-top: var(--space); border-top: 4px solid var(--ink); }
.hero--typographic .hero-heading { line-height: 0.9; letter-spacing: -0.025em; max-width: 15ch; }
.hero--typographic .hero-copy { padding-bottom: var(--space-3); }
.hero-sub { font-family: var(--font-display); font-style: italic; font-size: var(--step-2); line-height: 1.25; color: var(--ink); }
.hero-heading em { font-family: var(--font-display); font-style: italic; color: inherit; }
.hero--band-card .hero-copy { border-top: 4px solid var(--ink); }
.hero--full-dark .btn-primary { background: var(--band-ink); color: var(--band); }   /* inside the dark hero --ink is the light ink */
.hero--full-dark .btn-primary:hover { background: #ffffff; color: var(--band); }

/* On the rust card the quieter line is a touch lighter than base's, so it passes AA on a lifted tile too. */
.contact-card, .cta--band, .donate--band { --ink-dim: color-mix(in srgb, var(--accent-ink) 90%, var(--accent)); }

/* Buttons: one filled, square; the others are a typeset line, not a second box. */
.btn-secondary { border-width: 0 0 1px; border-color: currentColor; padding-inline: 0.1rem; }
.btn-secondary:hover { background: transparent; border-bottom-width: 2px; }

/* The work: square plates on a hairline mat, a caption set under each, the title of the work in italic. */
.work-media img { outline: 1px solid color-mix(in srgb, var(--ink) 14%, transparent); outline-offset: -1px; }
.work-item h3 { font-family: var(--font-display); font-style: italic; font-size: var(--step-2); letter-spacing: -0.005em; }
.work--grid .work-item h3 { margin-top: 0.75rem; padding-top: 0.6rem; border-top: 1px solid var(--ink); }
.work--grid .work-item p, .work--index .work-item p { font-size: var(--step--1); }
@media (min-width: 64em) { .work--grid .work-list { gap: var(--space-4) var(--space-3); } }
.work--index .work-n, .work--typographic .work-n { font-family: var(--font-text); font-size: var(--step--1); font-weight: 600; letter-spacing: 0.08em; }
.work--index .work-item h3 { font-size: var(--step-4); }
.work--typographic .work-item h3 { font-size: var(--step-3); }

/* The about: a drop cap opens it, two lines deep, the one ornament a magazine allows itself
   (initial-letter sizes it to the lines; a browser without it shows the letter in the serif, in place). */
.about-body p:first-child::first-letter { font-family: var(--font-display); color: var(--accent-text); }
@supports (initial-letter: 2) or (-webkit-initial-letter: 2) {
  .about-body p:first-child::first-letter { -webkit-initial-letter: 2; initial-letter: 2; margin-right: 0.14em; }
}

/* Services and proof: rules, never boxes. */
.services--blocks .service-list li { border-top: 3px solid var(--ink); }
.proof--strip .proof-list { font-weight: 500; letter-spacing: 0.01em; }

/* Forms: paper under a heavy rule; inputs ruled like a reply card. */
.form-card { border-top: 4px solid var(--ink); }
.site-form input:not([type=radio]):not([type=checkbox]), .site-form textarea { background: var(--bg-raised); border-color: color-mix(in srgb, var(--ink) 35%, var(--bg-line)); }

/* Motion is quiet: reveals and presses only. A magazine doesn't perform. */