/* Cal Coast Goat — Editorial Almanac
   ────────────────────────────────────────────────────────────────
   No rounded corners. No drop-shadows. Hairline rules.
   Display: Fraunces.  Body: EB Garamond.  Labels/numbers: JetBrains Mono.
   Palette: warm cream paper, ink near-black, dustier teal, Bordeaux red,
   aged brass gold for editorial flourishes. */

:root {
  --paper:      #ece2cd;
  --paper-warm: #e3d6bc;
  --paper-pale: #f3ebd9;
  --ink:        #1c1816;
  --ink-soft:   #3a322c;
  --rule:       rgba(28, 24, 22, 0.18);
  --rule-strong:rgba(28, 24, 22, 0.42);
  --teal:       #3b6669;
  --blue:       #1f8e95;     /* brand blue, sampled from Lukas's business card */
  --blue-deep:  #115a6a;     /* deeper variant for depth on cream */
  --red:        #8a2521;
  --red-bright: #a8362e;
  --gold:       #b8915a;

  --serif-display: 'Fraunces', 'Cormorant Garamond', Georgia, serif;
  --serif-body:    'EB Garamond', Georgia, 'Times New Roman', serif;
  --mono:          'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  --maxw: 1200px;
  --gutter: 32px;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--serif-body);
  font-size: 18px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

a { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
a:hover { color: var(--red); }

img { display: block; max-width: 100%; height: auto; }

.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 var(--gutter); }


/* ───────────────────────── Typography primitives ───────────────── */

.folio,
.folio-label,
.rotated-tag,
.gaz-head,
.field-label,
.colo-mid .folio-label,
.colo-right .folio-label {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-soft);
  font-weight: 500;
}

.folio { color: var(--paper); opacity: 0.78; }


/* ───────────────────────── Masthead ────────────────────────────── */

.masthead {
  position: sticky; top: 0; z-index: 30;
  background: rgba(236, 226, 205, 0.93);
  backdrop-filter: blur(8px) saturate(140%);
  border-bottom: 1px solid var(--rule);
}
.masthead-row {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  padding: 22px var(--gutter);
  gap: 36px;
}
@media (max-width: 880px) {
  .masthead-row { grid-template-columns: auto auto; }
  .nav { grid-column: 1 / -1; justify-self: start; }
}

.brand-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 132px; height: 100px;
  background: var(--blue-deep);
  border: 1px solid rgba(28,24,22,0.15);
  overflow: hidden;
  text-decoration: none;
  flex-shrink: 0;
}
.brand-mark img {
  display: block;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center;
}
@media (max-width: 480px) {
  .brand-mark { width: 90px; height: 68px; }
}

.wordmark {
  display: inline-flex;
  flex-direction: column;
  line-height: 0.86;
  text-decoration: none;
  font-family: var(--serif-display);
  font-weight: 600;
  letter-spacing: 0.005em;
  color: var(--ink);
}
.wordmark-line {
  display: block;
  font-size: 29px;
}
.wordmark-line-2 {
  margin-left: 1.2em;
  color: var(--blue);
}
.wordmark-sm .wordmark-line { font-size: 28px; }
.wordmark-tag {
  display: block;
  font-family: var(--mono);
  font-size: 15px;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin-top: 8px;
  text-align: center;
}
.wordmark-sm .wordmark-tag { font-size: 15px; margin-top: 6px; text-align: center; }

/* ───────────────────────── Site requirement aside ───────────────── */
.site-req {
  margin-top: 56px;
  padding: 28px 32px;
  border: 1px solid var(--ink);
  background: var(--paper-pale);
  max-width: 78ch;
}
.site-req .folio-label {
  margin-bottom: 8px;
  color: var(--blue-deep);
}
.site-req p {
  font-family: var(--serif-display, Georgia, serif);
  font-size: 18px;
  line-height: 1.55;
  color: var(--ink);
  margin: 0;
}
.site-req strong { font-weight: 600; color: var(--ink); }
@media (max-width: 720px) {
  .site-req { padding: 22px 22px; margin-top: 40px; }
  .site-req p { font-size: 17px; }
}

.nav { display: flex; align-items: center; gap: 24px; flex-wrap: wrap; }
.nav a {
  font-family: var(--mono);
  font-size: 19px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--ink);
  padding-bottom: 2px;
  border-bottom: 1px solid transparent;
}
.nav a:hover { border-bottom-color: var(--red); color: var(--ink); }
.nav-cta {
  color: var(--red) !important;
  border-bottom: 1px solid var(--red) !important;
}

/* Mobile sticky masthead: keep the full editorial header at the top,
   then collapse it while scrolling so it does not cover the page. */
@media (max-width: 880px) {
  .masthead {
    transition: background-color 180ms ease, box-shadow 180ms ease;
  }
  .masthead-row,
  .wordmark-line,
  .wordmark-tag,
  .brand-mark,
  .nav {
    transition: padding 180ms ease, gap 180ms ease, font-size 180ms ease,
      line-height 180ms ease, margin 180ms ease, width 180ms ease,
      height 180ms ease, opacity 140ms ease, transform 180ms ease;
  }
  .masthead.is-condensed {
    background: rgba(236, 226, 205, 0.97);
    box-shadow: 0 1px 0 var(--rule);
  }
  .masthead.is-condensed .masthead-row {
    grid-template-columns: 1fr auto;
    padding-top: 9px;
    padding-bottom: 9px;
    gap: 12px;
  }
  .masthead.is-condensed .wordmark {
    line-height: 0.88;
  }
  .masthead.is-condensed .wordmark-line {
    font-size: 20px;
  }
  .masthead.is-condensed .wordmark-line-2 {
    margin-left: 0.78em;
  }
  .masthead.is-condensed .wordmark-tag {
    margin-top: 4px;
    font-size: 8px;
    letter-spacing: 0.14em;
  }
  .masthead.is-condensed .brand-mark {
    width: 42px;
    height: 32px;
  }
  .masthead.is-condensed .nav {
    display: none;
  }
}


/* ───────────────────────── Hero ────────────────────────────────── */

.hero {
  position: relative;
  min-height: 86vh;
  background-size: cover;
  background-position: center;
  color: var(--paper);
  display: flex;
  align-items: stretch;
  border-bottom: 1px solid var(--ink);
}
.hero-frame {
  position: relative;
  width: 100%;
  background: linear-gradient(120deg,
    rgba(28,24,22,0.62) 0%,
    rgba(28,24,22,0.45) 45%,
    rgba(28,24,22,0.18) 100%);
  display: flex; align-items: center;
  border-left: 4px solid var(--red);
}

.hero-inner {
  position: relative;
  padding: 96px var(--gutter) 96px;
  width: 100%;
}

.folio {
  margin: 0 0 28px;
}

.hero-h {
  font-family: var(--serif-display);
  font-weight: 500;
  font-size: clamp(44px, 6.4vw, 88px);
  line-height: 0.98;
  letter-spacing: -0.012em;
  margin: 0 0 28px;
  max-width: 14ch;
}
.hero-line { display: block; }
.hero-line-em {
  font-style: italic;
  font-weight: 400;
  color: var(--paper);
  margin-top: 0.08em;
}

.hero-lede {
  font-size: clamp(17px, 1.35vw, 20px);
  line-height: 1.5;
  max-width: 56ch;
  margin: 0 0 36px;
  color: rgba(243, 235, 217, 0.92);
  font-style: italic;
}

.rotated-tag {
  position: absolute;
  top: 50%;
  right: 28px;
  transform: translateY(-50%) rotate(90deg);
  transform-origin: right center;
  margin: 0;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.32em;
  color: rgba(243, 235, 217, 0.62);
  white-space: nowrap;
  pointer-events: none;
}
@media (max-width: 880px) { .rotated-tag { display: none; } }


/* ───────────────────────── Buttons ─────────────────────────────── */

.cta-row { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; }
.btn {
  display: inline-flex; align-items: center;
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  text-decoration: none;
  font-weight: 500;
  padding: 14px 22px;
  border: 1px solid currentColor;
  background: transparent;
  cursor: pointer;
  transition: background 120ms ease, color 120ms ease;
}
.btn-solid {
  background: var(--red);
  color: var(--paper);
  border-color: var(--red);
}
.btn-solid:hover { background: var(--red-bright); color: var(--paper); }
.btn-line {
  color: var(--paper);
  border-color: rgba(243,235,217,0.62);
}
.btn-line:hover { background: rgba(243,235,217,0.1); color: var(--paper); }


/* ───────────────────────── Section primitives ──────────────────── */

.section { padding: 120px 0; position: relative; }
.section-pale { background: var(--paper-pale); }

.sec-head {
  margin-bottom: 64px;
  display: grid;
  gap: 14px;
  max-width: 880px;
}
.folio-label {
  margin: 0;
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.folio-label::before {
  content: "";
  display: inline-block;
  width: 28px; height: 1px;
  background: var(--ink-soft);
}
.section-pale .folio-label,
.section .folio-label { color: var(--ink-soft); }

.sec-head-light .folio-label { color: rgba(243,235,217,0.85); }
.sec-head-light .folio-label::before { background: rgba(243,235,217,0.55); }

.sec-h {
  font-family: var(--serif-display);
  font-weight: 500;
  font-size: clamp(32px, 4.2vw, 56px);
  line-height: 1.02;
  letter-spacing: -0.008em;
  margin: 0;
  color: inherit;
}
.sec-h em { font-weight: 400; color: var(--red); }
.sec-head-light .sec-h { color: var(--paper); }
.sec-head-light .sec-h em { color: var(--gold); }


/* ───────────────────────── Hand-drawn rule ─────────────────────── */

.hand-rule {
  display: block;
  width: 100%;
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 var(--gutter);
  height: 18px;
  color: var(--blue);
  opacity: 0.55;
}


/* ───────────────────────── Services list (editorial TOC) ───────── */

.service-list {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--rule-strong);
}
.service-list li {
  display: grid;
  grid-template-columns: 100px 1fr;
  align-items: baseline;
  gap: 28px;
  padding: 28px 0;
  border-bottom: 1px solid var(--rule);
}
.svc-num {
  font-family: var(--mono);
  font-size: 13px;
  letter-spacing: 0.18em;
  color: var(--red);
  font-weight: 600;
  padding-top: 6px;
}
.svc-body h3 {
  font-family: var(--serif-display);
  font-weight: 500;
  font-size: clamp(22px, 2.4vw, 30px);
  line-height: 1.18;
  margin: 0 0 8px;
  letter-spacing: -0.005em;
}
.svc-body p {
  margin: 0;
  font-size: 17px;
  line-height: 1.55;
  color: var(--ink-soft);
  max-width: 60ch;
}
@media (max-width: 720px) {
  .service-list li { grid-template-columns: 60px 1fr; gap: 16px; padding: 22px 0; }
}


/* ───────────────────────── Clients register ────────────────────── */

.register {
  list-style: none; margin: 0; padding: 0;
  border-top: 1px solid var(--rule-strong);
}
.register li {
  display: grid;
  grid-template-columns: 80px 240px 1fr;
  align-items: baseline;
  gap: 28px;
  padding: 22px 0;
  border-bottom: 1px solid var(--rule);
}
.reg-tag {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.2em;
  color: var(--ink-soft);
}
.reg-name {
  font-family: var(--serif-display);
  font-weight: 500;
  font-size: 22px;
  letter-spacing: -0.005em;
}
.reg-note {
  font-size: 16px;
  color: var(--ink-soft);
  font-style: italic;
}
@media (max-width: 760px) {
  .register li { grid-template-columns: 50px 1fr; gap: 14px; }
  .reg-note { grid-column: 2; margin-top: 4px; }
}


/* ───────────────────────── Why grid ────────────────────────────── */

.why-grid {
  display: grid;
  grid-template-columns: 1fr 1px 1fr;
  column-gap: 56px;
  row-gap: 0;
  align-items: stretch;
}
.why-grid::before {
  content: "";
  grid-column: 2;
  grid-row: 1 / -1;
  background: var(--rule);
  width: 1px;
  margin: 0 auto;
}
.why-block {
  padding: 28px 0;
  border-bottom: 1px solid var(--rule);
}
.why-block-l { grid-column: 1; padding-right: 12px; }
.why-block-r { grid-column: 3; padding-left: 12px; }
.why-block:last-of-type { border-bottom: none; }
.why-block h3 {
  font-family: var(--serif-display);
  font-weight: 500;
  font-size: 24px;
  line-height: 1.2;
  margin: 0 0 8px;
  display: flex;
  align-items: baseline;
  gap: 14px;
}
.why-block .amp {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.18em;
  color: var(--blue);
  font-weight: 500;
  text-transform: lowercase;
}
.why-block p {
  margin: 0;
  font-size: 17px;
  line-height: 1.55;
  color: var(--ink-soft);
}

.why-photo {
  grid-column: 1 / -1;
  margin: 36px -8px;
  padding: 0;
}
.why-photo img {
  width: 100%;
  filter: saturate(0.95) contrast(1.02);
}
.why-photo figcaption {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin-top: 12px;
}

@media (max-width: 880px) {
  .why-grid { grid-template-columns: 1fr; column-gap: 0; }
  .why-grid::before { display: none; }
  .why-block-l, .why-block-r { grid-column: 1; padding: 22px 0; }
}


/* ───────────────────────── Feature break ───────────────────────── */

.feature-break {
  position: relative;
  min-height: 64vh;
  background-size: cover;
  background-position: center 30%;
  color: var(--paper);
  display: flex; align-items: center;
  border-block: 1px solid var(--ink);
}
.feature-overlay {
  position: absolute; inset: 0;
  background:
    linear-gradient(180deg, rgba(28,24,22,0.4) 0%, rgba(28,24,22,0.78) 100%);
}
.feature-inner {
  position: relative; z-index: 2;
  padding: 96px var(--gutter);
  max-width: 1000px;
}
.pull-mark {
  font-family: var(--serif-display);
  font-style: italic;
  font-size: 96px;
  line-height: 0.6;
  color: var(--gold);
  margin: 0 0 8px;
}
.pull-quote {
  font-family: var(--serif-display);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(22px, 2.6vw, 36px);
  line-height: 1.22;
  margin: 0 0 24px;
  letter-spacing: -0.005em;
  max-width: 22ch;
}
.pull-attrib {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.22em;
  color: rgba(243,235,217,0.78);
  margin: 0;
}


/* ───────────────────────── Method timeline ─────────────────────── */

.method-grid {
  display: grid;
  grid-template-columns: 1fr 0.95fr;
  gap: 64px;
  align-items: start;
}
@media (max-width: 880px) { .method-grid { grid-template-columns: 1fr; gap: 36px; } }

.timeline {
  list-style: none; margin: 0; padding: 0;
  position: relative;
  border-left: 1px solid var(--rule-strong);
}
.timeline li {
  display: grid;
  grid-template-columns: 80px 1fr;
  align-items: baseline;
  gap: 24px;
  padding: 0 0 32px 24px;
  position: relative;
}
.timeline li::before {
  content: "";
  position: absolute;
  left: -4px; top: 14px;
  width: 7px; height: 7px;
  background: var(--red);
}
.tl-num {
  font-family: var(--mono);
  font-size: 13px;
  letter-spacing: 0.18em;
  color: var(--red);
  font-weight: 600;
}
.timeline h3 {
  font-family: var(--serif-display);
  font-weight: 500;
  font-size: 22px;
  line-height: 1.2;
  margin: 0 0 6px;
}
.timeline p {
  margin: 0;
  font-size: 16.5px;
  color: var(--ink-soft);
  max-width: 48ch;
}

.method-photo { margin: 0; }
.method-photo img { width: 100%; }
.method-photo figcaption {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin-top: 12px;
}


/* ───────────────────────── Service area (gazetteer) ────────────── */

.section-area {
  background-size: cover;
  background-position: center 50%;
  color: var(--paper);
  position: relative;
  border-block: 1px solid var(--ink);
}
.area-overlay {
  position: absolute; inset: 0;
  background:
    linear-gradient(180deg, rgba(28,24,22,0.55) 0%, rgba(28,24,22,0.82) 100%);
}
.area-inner {
  position: relative; z-index: 2;
  padding: 0;
}
.section-area .sec-head { color: var(--paper); }

.gazetteer {
  display: grid;
  grid-template-columns: 1fr 1.6fr;
  gap: 56px;
  border-top: 1px solid rgba(243,235,217,0.35);
  padding-top: 36px;
}
.gaz-col-wide { max-width: 640px; }
.gaz-head {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gold);
  margin: 0 0 14px;
}
.gazetteer ul {
  list-style: none; margin: 0; padding: 0;
}
.gazetteer li {
  font-family: var(--serif-display);
  font-weight: 500;
  font-size: 20px;
  padding: 6px 0;
  border-bottom: 1px solid rgba(243,235,217,0.16);
  color: var(--paper);
}
.gaz-cities {
  columns: 2;
  column-gap: 28px;
}
.gaz-cities li { break-inside: avoid; }
.gaz-note {
  margin-top: 14px;
  font-size: 14.5px;
  color: rgba(243,235,217,0.78);
  font-style: italic;
}
@media (max-width: 880px) {
  .gazetteer { grid-template-columns: 1fr; gap: 28px; }
  .gaz-cities { columns: 2; }
}


/* ───────────────────────── About (founder) ─────────────────────── */

.about-grid {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: 64px;
  align-items: start;
}
@media (max-width: 880px) { .about-grid { grid-template-columns: 1fr; gap: 28px; } }

.about-photo { margin: 0; }
.about-photo img { width: 100%; }
.about-photo figcaption {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin-top: 12px;
}

.about-prose p {
  font-size: 19px;
  line-height: 1.55;
  margin: 0 0 18px;
  max-width: 38ch;
}
.about-prose p:first-of-type::first-letter {
  font-family: var(--serif-display);
  font-style: italic;
  font-size: 3.4em;
  line-height: 0.9;
  float: left;
  padding: 6px 14px 0 0;
  color: var(--red);
  font-weight: 500;
}
.about-sign {
  margin-top: 28px !important;
  font-family: var(--serif-display);
  font-style: italic;
  font-size: 22px !important;
  line-height: 1.3 !important;
  color: var(--ink);
}
.about-title {
  font-family: var(--mono);
  font-style: normal;
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink-soft);
}


/* ───────────────────────── Contact ─────────────────────────────── */

.section-contact {
  background: var(--ink);
  color: var(--paper);
  border-top: 1px solid var(--ink);
}
.section-contact .sec-h { color: var(--paper); }
.section-contact .sec-h em { color: var(--gold); }
.section-contact .folio-label { color: rgba(243,235,217,0.78); }
.section-contact .folio-label::before { background: rgba(243,235,217,0.55); }

.contact-lede {
  font-size: 18px;
  font-style: italic;
  max-width: 60ch;
  margin: 0 0 48px;
  color: rgba(243,235,217,0.85);
}

.contact-grid {
  display: grid;
  grid-template-columns: 1.4fr 0.9fr;
  gap: 80px;
  border-top: 1px solid rgba(243,235,217,0.28);
  padding-top: 40px;
}
@media (max-width: 880px) { .contact-grid { grid-template-columns: 1fr; gap: 48px; } }

/* Underline-only inputs — newspaper subscription card */
.contact-form {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 28px 36px;
}
.field { display: flex; flex-direction: column; gap: 8px; }
.field-wide { grid-column: 1 / -1; }
.field-full { grid-column: 1 / -1; }
.field-label {
  color: rgba(243,235,217,0.62);
}
.contact-form input,
.contact-form select,
.contact-form textarea {
  background: transparent;
  border: 0;
  border-bottom: 1px solid rgba(243,235,217,0.32);
  color: var(--paper);
  font-family: var(--serif-body);
  font-size: 17px;
  padding: 8px 0 8px;
  outline: none;
  appearance: none;
  -webkit-appearance: none;
}
.contact-form select { background: transparent; }
.contact-form select option { color: var(--ink); background: var(--paper); }
.contact-form textarea { resize: vertical; line-height: 1.5; }
.contact-form input:focus,
.contact-form select:focus,
.contact-form textarea:focus {
  border-bottom-color: var(--gold);
}
.contact-form input::placeholder,
.contact-form textarea::placeholder {
  color: rgba(243,235,217,0.32);
  font-style: italic;
}
.submit-row { padding-top: 14px; }

.contact-form .btn-solid {
  background: var(--red);
  border-color: var(--red);
  color: var(--paper);
}

@media (max-width: 600px) { .contact-form { grid-template-columns: 1fr; } }

.contact-direct .big-link {
  font-family: var(--serif-display);
  font-weight: 500;
  font-size: 26px;
  margin: 6px 0;
  letter-spacing: -0.005em;
}
.contact-direct .big-link a {
  color: var(--paper);
  text-decoration: none;
  border-bottom: 1px solid rgba(243,235,217,0.22);
  padding-bottom: 4px;
}
.contact-direct .big-link a:hover { border-bottom-color: var(--gold); color: var(--gold); }
.contact-direct .muted {
  color: rgba(243,235,217,0.55);
  font-size: 14px;
  margin: 18px 0 0;
}
.contact-direct .dir-mt { margin-top: 36px; }
.contact-direct p { margin-block: 6px; }


/* ───────────────────────── Colophon (footer) ───────────────────── */

.colophon {
  background: var(--paper);
  color: var(--ink);
  border-top: 1px solid var(--rule);
}
.colophon-row {
  display: grid;
  grid-template-columns: 1.2fr 1fr 1.2fr;
  gap: 48px;
  padding: 56px var(--gutter);
}
.colo-brand {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 12px;
}
.colo-mark {
  display: inline-flex;
  width: 132px; height: 100px;
  background: var(--blue-deep);
  border: 1px solid rgba(28,24,22,0.15);
  overflow: hidden;
  flex-shrink: 0;
}
.colo-mark img {
  display: block;
  width: 100%; height: 100%;
  object-fit: cover;
}
.colo-left .wordmark-sm { margin: 0; }
@media (max-width: 760px) { .colophon-row { grid-template-columns: 1fr; gap: 28px; } }
.colo-mid p,
.colo-right p { margin: 4px 0; font-size: 14px; }
.colo-right .small { font-size: 12px; }
.muted { color: var(--ink-soft); }
.muted.small { font-size: 13px; }
.colo-mid a { color: var(--ink); }
.colo-mid a:hover { color: var(--red); }


/* ───────────────────────── §07 — Dogs ───────────────────────── */

.dogs-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: start;
}
@media (max-width: 880px) { .dogs-grid { grid-template-columns: 1fr; gap: 40px; } }

.dog-card { margin: 0; }

.dog-photo { margin: 0 0 22px; }
.dog-photo img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  filter: saturate(0.95) contrast(1.02);
}
.dog-photo figcaption {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin-top: 12px;
}

.dog-prose .dog-name {
  font-family: var(--serif-display);
  font-size: 32px;
  font-weight: 600;
  margin: 0 0 4px;
  line-height: 1;
}
.dog-prose .dog-role {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin: 0 0 16px;
}
.dog-prose p:not(.dog-name):not(.dog-role) {
  font-size: 18px;
  line-height: 1.55;
  margin: 0;
  max-width: 38ch;
}