/* =====================================================================
   SNOWLEOPARD Studio & Research — responsive.css
   Responsive layer, loaded last on every page. Desktop styles live in
   base.css and the page stylesheets; this file adapts them for tablets,
   phones and touch screens.
   ===================================================================== */

/* ----- Foundation: screens up to 1024px and touch tablets ---------- */
@media (max-width: 1024px),
  (min-width: 1025px) and (max-width: 1366px) and (hover: none) and (pointer: coarse) {
  *,
  *::before,
  *::after {
    box-sizing: border-box;
  }
  html,
  body {
    max-width: 100%;
    overflow-x: hidden;
    overflow-x: clip;
  }
  body {
    min-width: 0;
  }

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

  :where(
    main,
    section,
    article,
    aside,
    header,
    footer,
    nav,
    div,
    figure,
    form
  ) {
    min-inline-size: 0;
  }
  :where(h1, h2, h3, p, li, figcaption) {
    overflow-wrap: break-word;
  }

  input,
  textarea,
  button {
    font: inherit;
  }
  input,
  textarea {
    min-width: 0;
  }
}

/* Page regions stay within the viewport. */
@media (max-width: 1024px),
  (min-width: 1025px) and (max-width: 1366px) and (hover: none) and (pointer: coarse) and (orientation: portrait) {
  main,
  section,
  article,
  header,
  footer {
    max-width: 100%;
  }
}

/* ----- Compact landscape tablets: 601–900px ----------------------- */
@media (min-width: 601px) and (max-width: 900px) and (orientation: landscape) and (min-height: 501px) {
  /* Homepage sections stack. */
  .t-layout,
  .rc-inner,
  .sv-grid,
  .belief-inner,
  .rp-head-grid,
  .rp-study,
  .contact-banner,
  .about-opener,
  .about-practice,
  .about-aside {
    min-width: 0;
  }

  .t-grid {
    width: min(100%, 40rem);
    margin-inline: auto;
  }
  .rc-inner {
    grid-template-columns: 1fr !important;
  }
  .rc-media {
    min-height: clamp(28rem, 70vw, 40rem);
  }
  .rc-copy {
    width: 100%;
  }

  /* About spreads stack before their columns become cramped. */
  .about-opener,
  .about-practice,
  .about-aside,
  .about-naturalist-magazine .about-naturalist-top,
  .about-naturalist-magazine .about-naturalist-lower {
    grid-template-columns: minmax(0, 1fr) !important;
  }
  .about-opener-media,
  .ap-media,
  .about-fig,
  .about-naturalist-media,
  .about-naturalist-apple-media {
    width: 100% !important;
    max-width: none !important;
  }

  /* Research page head and study stack. */
  .rp-head-grid {
    grid-template-columns: minmax(0, 1fr) !important;
  }
  .rp-marginalia {
    width: 100%;
  }
  .rp-study {
    max-width: 100%;
  }

  /* Contact: stacked reading order. */
  .contact-banner {
    grid-template-columns: minmax(0, 1fr) !important;
  }
  .contact-figure,
  .contact-form {
    width: 100%;
    max-width: none;
  }
  .contact-portrait-frame {
    width: min(100%, 42rem);
    margin-inline: auto;
  }
}

/* ----- Landscape tablets: 901–1024px ------------------------------ */
/* Two-column layouts kept, with proportions adjusted for the width. */
@media (min-width: 901px) and (max-width: 1024px) and (orientation: landscape) and (min-height: 501px),
  (min-width: 1001px) and (max-width: 1024px) and (orientation: landscape) {
  .rc-inner,
  .contact-banner,
  .about-practice,
  .about-opener,
  .rp-head-grid {
    min-width: 0;
  }

  .rc-inner {
    grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
  }
  .rc-copy {
    padding-inline: clamp(2rem, 4vw, 3rem);
  }

  .about-opener,
  .about-practice,
  .about-aside {
    column-gap: clamp(2rem, 4vw, 3rem);
  }

  .about-naturalist-magazine .about-naturalist-top,
  .about-naturalist-magazine .about-naturalist-lower {
    column-gap: clamp(1.75rem, 3vw, 2.5rem) !important;
  }

  .contact-banner {
    column-gap: clamp(2.25rem, 4vw, 3.5rem);
  }
  .contact-figure {
    min-width: 0;
  }
}

/* ----- Single-column layout: phones and portrait tablets ---------- */
@media (max-width: 600px),
  (orientation: landscape) and (max-width: 1000px) and (max-height: 500px),
  (min-width: 601px) and (max-width: 1024px) and (orientation: portrait),
  (min-width: 1025px) and (max-width: 1366px) and (hover: none) and (pointer: coarse) and (orientation: portrait) {
  :root {
    --fluid-section-space: clamp(3rem, 12vw, 4.75rem);
  }

  /* Page sections stack into one column. */
  .t-layout,
  .t-grid,
  .rc-inner,
  .sv-grid,
  .belief-inner,
  .rp-head-grid,
  .rp-study,
  .contact-banner,
  .about-opener,
  .about-practice,
  .about-aside,
  .about-naturalist-magazine .about-naturalist-top,
  .about-naturalist-magazine .about-naturalist-lower {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  .t-grid,
  .sv-grid {
    gap: clamp(1.5rem, 7vw, 2.5rem);
  }

  .rc-media {
    min-height: clamp(24rem, 115vw, 38rem);
  }
  .rc-copy {
    padding-inline: var(--edge) !important;
  }

  .belief-inner {
    padding-block: var(--fluid-section-space);
  }

  /* About photographs stay contained. */
  .about-opener-media,
  .ap-media,
  .about-fig,
  .about-naturalist-media,
  .about-naturalist-apple-media {
    width: 100% !important;
    max-width: none !important;
    margin-inline: 0 !important;
    transform: none !important;
  }

  /* Research text and margin notes form one stream. */
  .rp-head-grid,
  .rp-article,
  .rp-study,
  .rp-marginalia {
    width: 100%;
    max-width: none;
  }

  /* Contact form and portrait never take desktop widths. */
  .contact-figure,
  .contact-form,
  .contact-portrait-frame {
    width: 100%;
    max-width: none;
  }
  .contact-send {
    width: 100%;
    min-height: 48px;
  }

  /* Long labels may wrap. */
  :where(
    .contact-eyebrow,
    .rp-label,
    .about-eyebrow,
    .about-sec-label,
    .ap-eyebrow,
    .sv-eyebrow,
    .rc-eyebrow
  ) {
    max-width: 100%;
    overflow-wrap: anywhere;
  }
}

/* ----- Screens 390px and narrower --------------------------------- */
@media (max-width: 390px) {
  .sv-grid,
  .t-grid {
    gap: 1.4rem;
  }
  .rc-media {
    min-height: clamp(22rem, 118vw, 29rem);
  }
  .contact-title,
  .rp-h1,
  .about-ethos-line {
    text-wrap: balance;
  }
}

/* ----- Large touch tablets in landscape: 1025–1366px -------------- */
@media (min-width: 1025px) and (max-width: 1366px) and (hover: none) and (pointer: coarse) and (orientation: landscape) {
  .rc-inner,
  .contact-banner,
  .about-opener,
  .about-practice,
  .rp-head-grid {
    min-width: 0;
  }

  .sv-grid {
    gap: clamp(2rem, 3vw, 3.25rem);
  }
  .contact-banner,
  .about-practice,
  .rp-head-grid {
    column-gap: clamp(2.5rem, 4vw, 4rem);
  }
}

/* No hover lift on touch screens. */
@media (hover: none) and (max-width: 1366px) {
  :where(a, button, .btn-pill):hover {
    transform: none;
  }
}

/* ----- Field Notes form: ruled fields on phones -------------------- */
/* The specific selector keeps Safari's form-control styles from restoring boxes. */
@media screen and (max-width: 600px),
  screen and (orientation: landscape) and (max-width: 1000px) and (max-height: 500px),
  screen and (min-width: 601px) and (max-width: 1024px) and (orientation: portrait),
  screen and (min-width: 1025px) and (max-width: 1366px) and (hover: none) and (pointer: coarse) and (orientation: portrait) {
  .field-notes .fn-form .fn-field input[type="text"],
  .field-notes .fn-form .fn-field input[type="email"] {
    display: block;
    width: 100%;
    min-height: 44px;
    box-sizing: border-box;
    padding: 0.25rem 0 0.55rem !important;
    background: transparent !important;
    background-color: transparent !important;
    border: 0 !important;
    border-bottom: 1px solid rgba(22, 59, 54, 0.68) !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    -webkit-box-shadow: none !important;
    -webkit-appearance: none !important;
    appearance: none !important;
  }

  .field-notes .fn-form .fn-field input[type="text"]:hover,
  .field-notes .fn-form .fn-field input[type="email"]:hover {
    background: transparent !important;
    border-bottom-color: rgba(22, 59, 54, 0.9) !important;
  }

  .field-notes .fn-form .fn-field input[type="text"]:focus,
  .field-notes .fn-form .fn-field input[type="email"]:focus,
  .field-notes .fn-form .fn-field input[type="text"]:focus-visible,
  .field-notes .fn-form .fn-field input[type="email"]:focus-visible {
    background: transparent !important;
    outline: none !important;
    border-bottom-color: var(--fireweed) !important;
    box-shadow: 0 1px 0 0 var(--fireweed) !important;
    -webkit-box-shadow: 0 1px 0 0 var(--fireweed) !important;
  }

  /* Autofill never paints a white box. */
  .field-notes .fn-form .fn-field input:-webkit-autofill,
  .field-notes .fn-form .fn-field input:-webkit-autofill:hover,
  .field-notes .fn-form .fn-field input:-webkit-autofill:focus {
    -webkit-text-fill-color: var(--museum-black) !important;
    border: 0 !important;
    border-bottom: 1px solid rgba(22, 59, 54, 0.68) !important;
    border-radius: 0 !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    transition: background-color 9999s ease-out 0s !important;
  }
}

/* Download button, surfaces and containment. */
.dl-mobile-download {
  display: none;
}
@media (max-width: 600px),
  (orientation: landscape) and (max-width: 1000px) and (max-height: 500px),
  (min-width: 601px) and (max-width: 1024px) and (orientation: portrait),
  (min-width: 1025px) and (max-width: 1366px) and (hover: none) and (pointer: coarse) and (orientation: portrait) {
  /* 16px fields prevent iOS zoom on focus. */
  .fn-subscribe .fn-field input {
    font-size: 16px;
  }
  .fn-testimonials .fn-quote {
    background-color: rgba(243, 239, 230, 0.96);
    border-color: rgba(243, 239, 230, 0.8);
    box-shadow: 0 8px 24px rgba(38, 38, 38, 0.08);
  }
  /* The veil covers the full photograph where the text spans it. */
  .rp-head-bg::after {
    background: linear-gradient(
      90deg,
      rgba(242, 235, 229, 0.96),
      rgba(242, 235, 229, 0.88) 65%,
      rgba(242, 235, 229, 0.72)
    );
  }
  /* Aspect ratio and minimum height never widen the grid item. */
  .rc-media {
    width: 100%;
    max-width: 100%;
  }
  /* Content is visible immediately; no scroll-reveal on small screens. */
  .js .reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }
  /* The download action comes before the cover and the invitation. */
  .dl-inner {
    gap: 0;
  }
  .dl-copy h1 {
    margin: 0 0 1.5rem;
  }
  .dl-body {
    margin: 0;
  }
  .dl-label {
    margin-bottom: 1.5rem;
  }
  .dl-mobile-download {
    display: inline-flex;
    order: 4;
    background: var(--fireweed);
    color: var(--bone);
    text-decoration: none;
    align-items: center;
    align-self: stretch;
    justify-content: center;
    margin-top: 1.5rem;
    min-height: 44px;
  }
  .dl-cover {
    order: 5;
    margin-top: 2rem;
  }
  .dl-invite {
    order: 6;
    margin-top: 2.5rem;
  }
}
@media (max-width: 600px),
  (orientation: landscape) and (max-width: 1000px) and (max-height: 500px),
  (min-width: 601px) and (max-width: 1024px) and (orientation: portrait),
  (min-width: 1025px) and (max-width: 1366px) and (hover: none) and (pointer: coarse) and (orientation: portrait) {
  .about-naturalist-magazine
    .about-naturalist-lower-copy
    > p:not(.media-caption):not(.about-naturalist-link):not(.about-apple-lead)
    + p:not(.media-caption):not(.about-naturalist-link) {
    margin-top: 1.25rem;
  }
}

/* Reader attributions. */
.fn-testimonials .fn-cite {
  text-align: left;
}
.fn-cite-name {
  display: block;
  font-weight: 600;
}
.fn-cite-detail {
  display: block;
  margin-top: 0.25rem;
  font-size: 0.9em;
  line-height: 1.5;
}
@media (max-width: 600px),
  (orientation: landscape) and (max-width: 1000px) and (max-height: 500px),
  (min-width: 601px) and (max-width: 1024px) and (orientation: portrait),
  (min-width: 1025px) and (max-width: 1366px) and (hover: none) and (pointer: coarse) and (orientation: portrait) {
  /* A shared action size. */
  :root body .btn-pill:not(.btn-contact) {
    display: flex;
    width: 280px;
    max-width: 100%;
    min-width: 0;
    min-height: 48px;
    margin-left: auto;
    margin-right: auto;
    align-self: center;
    justify-self: center;
    box-sizing: border-box;
    white-space: normal;
    line-height: 1.25;
    padding: 0.7rem 1rem;
  }
  /* Buttons in forms and the featured article follow the reading edge. */
  :root body :is(.fn-form, .contact-form, .dl-form, .pf-note-inner) .btn-pill {
    margin-left: 0;
    margin-right: auto;
    align-self: flex-start;
    justify-self: start;
  }
  .about-closing-message .about-compass-watermark {
    opacity: 0.22;
  }
}

/* ----- Landscape tablets: shared refinements ---------------------- */
@media (min-width: 601px) and (max-width: 1024px) and (min-height: 501px) and (orientation: landscape),
  (min-width: 1025px) and (max-width: 1366px) and (hover: none) and (pointer: coarse) and (orientation: landscape) {
  :root body .btn-pill:not(.btn-contact):not(.dl-mobile-download) {
    display: flex;
    width: 320px;
    max-width: 100%;
    min-width: 0;
    min-height: 48px;
    padding: 0.8rem 1.25rem;
    line-height: 1.25;
    white-space: normal;
    margin-inline: auto;
    align-self: center;
    justify-self: center;
  }
  :root body :is(.fn-form, .contact-form, .dl-form, .pf-note-inner) .btn-pill {
    margin-left: 0;
    margin-right: auto;
    align-self: flex-start;
    justify-self: start;
  }
  .fn-subscribe .fn-field input {
    font-size: 16px;
  }
  .fn-testimonials .fn-quote {
    background: rgba(243, 239, 230, 0.96);
    border-color: rgba(243, 239, 230, 0.8);
    box-shadow: 0 8px 24px rgba(38, 38, 38, 0.08);
  }
  .rc-media {
    width: 100%;
    max-width: 100%;
  }
  .js .reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }
}
@media (min-width: 601px) and (max-width: 900px) and (min-height: 501px) and (orientation: landscape) {
  /* Stacked spreads clear their desktop grid positions. */
  .about-opener > *,
  .about-practice > * {
    grid-column: 1 !important;
    grid-row: auto !important;
    min-width: 0;
  }
  .about-opener-copy {
    order: 1;
  }
  .about-opener-media {
    order: 2;
  }
  .about-practice .ap-copy {
    order: 1;
  }
  .about-practice .ap-media {
    order: 2;
    height: auto;
  }
  .about-practice .ap-media > img {
    width: 100%;
    height: auto;
    max-height: 640px;
    object-fit: cover;
  }
  .about-practice .ap-copy > .ap-caption.media-caption {
    display: none !important;
  }
  .about-practice .ap-media > .ap-caption-mobile {
    display: block !important;
    margin: 1rem 0 0;
  }
  .about-opener-media {
    height: auto;
  }
  /* Contact stacking order is set in contact.css. */
  .contact-title {
    font-size: clamp(2rem, 4.5vw, 2.5rem);
  }
  .rp-head-bg::after {
    background: linear-gradient(
      90deg,
      rgba(242, 235, 229, 0.96),
      rgba(242, 235, 229, 0.88) 65%,
      rgba(242, 235, 229, 0.72)
    );
  }
  .about-closing-message {
    display: block;
    position: relative;
    padding-block: 2rem;
  }
  .about-closing-message .about-aside-stmt {
    position: relative;
    z-index: 1;
  }
  .about-closing-message .about-compass-watermark {
    display: block;
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0.22;
    pointer-events: none;
  }
  .about-closing-message .about-compass-watermark img {
    width: 100%;
    height: 100%;
    object-fit: contain;
  }
}

/* ----- Landscape tablets: touch targets, type and measure --------- */
@media (min-width: 601px) and (max-width: 1024px) and (orientation: landscape) and (min-height: 501px),
  (min-width: 1001px) and (max-width: 1024px) and (orientation: landscape) {
  /* A flex box lets the 44px minimum height apply to navigation links. */
  .menu a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding-bottom: 0;
  }
  /* The underline returns to the text in the taller link box. */
  .menu a::after {
    bottom: auto;
    top: calc(50% + 0.66em);
  }
  .menu a.btn-pill {
    padding-bottom: 0.55rem;
  }
  .menu a.btn-pill::after {
    display: none;
  }

  /* The same 44px minimum for the inline cues. */
  .gw-scroll-cue,
  .rp-scroll-cue,
  .essay-more {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }

  /* Reading measure. */
  .wb-invite-copy,
  .dl-invite-copy {
    max-width: 68ch;
  }

  /* Only the banner's downward offset is kept, so the headline stays inside
     the viewport. */
  .pf-banner .pf-wrap {
    transform: translate(0, 2.6rem);
  }
}

/* ----- Compact landscape tablets: 601–900px ----------------------- */
@media (min-width: 601px) and (max-width: 900px) and (orientation: landscape) and (min-height: 501px) {
  /* What I Do: one column, as designed in home.css. */
  .sv-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* ----- Landscape tablets: 901–1024px ------------------------------ */
@media (min-width: 901px) and (max-width: 1024px) and (orientation: landscape) and (min-height: 501px),
  (min-width: 1001px) and (max-width: 1024px) and (orientation: landscape) {
  /* Testimonials: the statement takes its own row and the three voices share
     the full width. */
  .t-layout {
    grid-template-columns: minmax(0, 1fr);
    gap: 2.75rem;
    max-width: none;
  }
  .t-intro {
    padding-right: 0;
  }
  .t-statement {
    max-width: 26ch;
  }
  .t-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    width: 100%;
    max-width: none;
    margin: 0;
  }
  .t-card,
  .t-card:nth-child(1),
  .t-card:nth-child(2),
  .t-card:nth-child(3) {
    grid-template-columns: 44px minmax(0, 1fr);
    gap: 0.9rem;
    padding: 1.5rem 1.2rem 1.6rem;
  }
  .t-card:first-child {
    padding-left: 0;
  }
  .t-card:last-child {
    padding-right: 0;
  }
  .t-logo {
    width: 44px;
    height: 50px;
  }
  .t-logo img {
    max-height: 46px;
    max-width: 44px;
  }

  /* What I Do: three across, with the divider in the half-gap. */
  .sv-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 2.25rem;
    max-width: none;
    margin: 0;
  }
  .sv-item + .sv-item::before {
    left: -1.125rem;
  }
  .sv-title {
    font-size: 1.14rem;
  }
  .sv-body {
    font-size: 0.98rem;
    max-width: 30ch;
    margin-bottom: 1.6rem;
  }
  .sv-icon {
    margin-bottom: 1.5rem;
  }

  /* Ghostwriting tiers: three across for comparison. */
  .gw-plates {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    max-width: none;
    gap: 2rem;
  }
  .gw-tier .gw-tier-name {
    font-size: 2rem;
  }
  .gw-tier .plate-sub {
    max-width: 20ch;
    font-size: 0.96rem;
  }
  .gw-tier .gw-feat li {
    font-size: 0.93rem;
    padding-left: 1.4rem;
  }

  /* The hairlines between tiers, which desktop declares above 1024px. */
  .gw-tier + .gw-tier::before {
    content: "";
    position: absolute;
    left: -1rem;
    top: 0.5rem;
    bottom: 0.5rem;
    width: 1px;
    background: rgba(38, 38, 38, 0.14);
  }
}

/* ----- Landscape and large touch tablets: type and targets -------- */
@media (min-width: 601px) and (max-width: 1024px) and (orientation: landscape) and (min-height: 501px),
  (min-width: 1001px) and (max-width: 1024px) and (orientation: landscape),
  (min-width: 1025px) and (max-width: 1366px) and (hover: none) and (pointer: coarse) and (orientation: landscape) {
  /* Minimum size for running small text: credits, locations, sources and
     form labels. Brand eyebrows keep their designed size. */
  .media-caption,
  .caption-line,
  .caption-source,
  .film-cap,
  .pf-note-cap,
  .es-hero-cap,
  .cs-discipline,
  .contact-bio-meta,
  .fc-support-label {
    font-size: 12.4px !important;
  }

  .rp-sub {
    font-size: 12.4px !important;
  }

  .contact-form label:not(.sr-only),
  .fn-form label:not(.sr-only),
  .wb-form label:not(.sr-only),
  .dl-form label:not(.sr-only),
  .field label:not(.sr-only) {
    font-size: 13px;
  }

  .t-quote {
    font-size: 14px;
  }

  /* A flex box lets the 44px target apply to these inline links. */
  .menu a,
  .fc-col a,
  .fc-top,
  .fn-member a,
  .sv-link a,
  .rc-link a,
  .essay-more,
  .gw-scroll-cue,
  .rp-scroll-cue {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }

  /* Footer list rows without doubled spacing. */
  .fc-col li {
    margin-block: 0;
  }
  .fc-col ul {
    margin-block: 0;
  }

  /* Only the banner's downward offset is kept. */
  .pf-banner .pf-wrap {
    transform: translate(0, 2.6rem);
  }
}

/* ----- Landscape tablets: 901–1024px ------------------------------ */
@media (min-width: 901px) and (max-width: 1024px) and (orientation: landscape) and (min-height: 501px),
  (min-width: 1001px) and (max-width: 1024px) and (orientation: landscape) {
  /* Contact: the two-column banner with a single-column copy area, so the form
     keeps its width; the bio follows the form. */
  .contact-banner {
    grid-template-columns: minmax(0, 1.7fr) minmax(340px, 1fr);
  }
  .contact-form {
    max-width: 34rem;
  }

  /* The hero label keeps its words together. */
  .gw-label {
    max-width: 30ch;
  }
  /* Values keep the tablet type sizes. */
  .cv-title {
    font-size: 15.5px !important;
  }
  .cv-note {
    font-size: 13.8px !important;
  }
  /* Research introduction reading measure. */
  .rp-intro p {
    max-width: 68ch;
  }
}

/* ----- Large touch tablets in landscape: 1025–1366px -------------- */
/* Testimonial and contact compositions adapted for iPad landscape widths. */
@media (min-width: 1025px) and (max-width: 1366px) and (hover: none) and (pointer: coarse) and (orientation: landscape) {
  .t-layout {
    grid-template-columns: minmax(0, 1fr);
    gap: 2.75rem;
    max-width: none;
  }
  .t-intro {
    padding-right: 0;
  }
  .t-statement {
    max-width: 28ch;
  }
  .t-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    width: 100%;
    max-width: none;
    margin: 0;
  }
  .t-card,
  .t-card:nth-child(1),
  .t-card:nth-child(2),
  .t-card:nth-child(3) {
    grid-template-columns: 44px minmax(0, 1fr);
    gap: 0.9rem;
    padding: 1.5rem 1.15rem 1.6rem;
  }
  .t-card:first-child {
    padding-left: 0;
  }
  .t-card:last-child {
    padding-right: 0;
  }
  .t-logo {
    width: 44px;
    height: 50px;
  }
  .t-logo img {
    max-height: 46px;
    max-width: 44px;
  }

  /* The inquiry form keeps a usable width. */
  .contact-form {
    max-width: 36rem;
  }
}

/* ----- Form states ------------------------------------------------ */
/* Green marks the active field; red is reserved for validation errors. */
.field-notes .fn-form .fn-field input[type="text"]:focus:not(.invalid),
.field-notes .fn-form .fn-field input[type="email"]:focus:not(.invalid),
.fn-form input:focus:not(.invalid),
.fn-subscribe input:focus:not(.invalid),
.wb-form input:focus:not(.invalid),
.dl-form input:focus:not(.invalid),
.contact-form input:focus:not(.invalid),
.contact-form textarea:focus:not(.invalid) {
  border-bottom-color: var(--apothecary) !important;
  box-shadow: 0 1px 0 0 var(--apothecary) !important;
  -webkit-box-shadow: 0 1px 0 0 var(--apothecary) !important;
}

.field-notes .fn-form .fn-field input[type="text"].invalid,
.field-notes .fn-form .fn-field input[type="email"].invalid,
.fn-form input.invalid,
.fn-subscribe input.invalid,
.wb-form input.invalid,
.dl-form input.invalid,
.contact-form input.invalid,
.contact-form textarea.invalid {
  border-bottom-color: var(--form-error) !important;
  box-shadow: 0 1px 0 0 var(--form-error) !important;
  -webkit-box-shadow: 0 1px 0 0 var(--form-error) !important;
}

/* ----- Tablets and phones: component refinements ------------------ */
@media (max-width: 1024px),
  (min-width: 1025px) and (max-width: 1366px) and (hover: none) and (pointer: coarse) {
  .hero {
    height: auto;
    max-height: none;
  }
  .hero .hero-inner {
    top: auto;
    transform: none;
    width: 100%;
    max-width: 100%;
    padding-block: clamp(2rem, 5vw, 3.5rem);
  }
  .hero .hero-headline-line,
  .hero .hero-phrase,
  .hero .sub-proof .proof-line {
    white-space: normal;
    max-width: 100%;
  }
  .hp-testimonials .t-promise {
    transform: none;
  }
  .pf-banner .pf-wrap {
    transform: none;
  }
  .gw-plates .gw-tier + .gw-tier::before {
    content: none;
    display: none;
  }
  .gw-tier-action .gw-tier-cta {
    white-space: normal;
    min-width: 0;
    max-width: 100%;
    font-size: 0.75rem;
    letter-spacing: 0.06em;
  }
  .gw-intro .gw-intro-h em {
    white-space: normal;
  }
  .gw-label,
  .contact-layout .contact-studio-name {
    white-space: normal;
  }
  .gw-testimonial {
    padding-bottom: 1.5rem;
  }
  .gw-testimonial figcaption {
    font-size: 0.75rem;
    letter-spacing: 0.08em;
  }
  .fn-form input,
  .fn-subscribe input,
  .wb-form input,
  .dl-form input,
  .contact-form input,
  .contact-form textarea {
    font-size: max(16px, 1rem);
  }
  .form-status {
    min-width: 0;
    overflow-wrap: anywhere;
  }
  .wb-hint,
  .dl-hint {
    overflow-wrap: break-word;
  }
}

/* ----- Landscape phones: single-column stream --------------------- */
@media (orientation: landscape) and (max-width: 1000px) and (max-height: 500px) {
  .rc-inner,
  .about-opener,
  .about-practice,
  .about-aside,
  .about-naturalist-magazine .about-naturalist-top,
  .about-naturalist-magazine .about-naturalist-lower,
  .sv-grid {
    grid-template-columns: minmax(0, 1fr) !important;
  }
  .about-opener > *,
  .about-practice > * {
    grid-column: 1 !important;
    grid-row: auto !important;
  }
  .about-opener-media,
  .about-practice .ap-media {
    height: auto;
  }
  .about-practice .ap-media > img {
    position: static;
    width: 100%;
    height: auto;
  }
  .about-practice .ap-copy > .ap-caption.media-caption {
    display: none !important;
  }
  .about-practice .ap-media > .ap-caption-mobile {
    display: block !important;
  }
  #inquiry.contact-layout {
    grid-template-columns: minmax(0, 1fr) !important;
    width: 100%;
  }
  .contact-layout > .contact-content-main {
    order: 1;
    margin-top: 0;
  }
  .contact-layout .contact-profile {
    order: 2;
    margin-top: 1.5rem;
  }
  .fn-hero {
    grid-template-columns: minmax(0, 1fr);
  }
  .fn-hero .fn-lockup,
  .fn-hero .fn-landing-intro,
  .fn-hero .fn-subscribe {
    grid-column: 1;
  }
}

/* Phones: the promise shows below the opening banner. */
@media (max-width: 600px) and (orientation: portrait),
  (orientation: landscape) and (max-width: 1000px) and (max-height: 500px),
  (min-width: 601px) and (max-width: 1024px) and (orientation: portrait),
  (min-width: 1025px) and (max-width: 1366px) and (hover: none) and (pointer: coarse) and (orientation: portrait) {
  .hero {
    min-height: calc(100svh - 148px);
    align-items: center;
  }
  .hero .hero-inner {
    padding-block: 1.5rem;
  }
  .hp-testimonials {
    padding-top: 1rem;
  }
  .hp-testimonials .t-promise {
    margin-top: 0;
  }
}

/* The belief action aligns with its copy. */
.belief .belief-cta {
  text-align: left;
}
:root body .belief .belief-cta .btn-pill {
  margin-left: 0;
  margin-right: auto;
  align-self: flex-start;
  justify-self: start;
}

/* Services introduction: fields follow the eyebrow. */
@media (max-width: 600px),
  (orientation: landscape) and (max-width: 1000px) and (max-height: 500px),
  (min-width: 601px) and (max-width: 1024px) and (orientation: portrait),
  (min-width: 1025px) and (max-width: 1366px) and (hover: none) and (pointer: coarse) and (orientation: portrait) {
  .hp-services .sv-inner {
    display: flex;
    flex-direction: column;
  }
  .hp-services .sv-eyebrow {
    order: 0;
    margin-bottom: 0.6rem;
  }
  .hp-services .sv-fields {
    order: 1;
    margin-bottom: 1.5rem;
  }
  .hp-services .sv-headline {
    order: 2;
  }
  .hp-services .sv-grid {
    order: 3;
    width: 100%;
  }
}

/* The industry line follows What I Do. */
.hp-services .sv-eyebrow {
  margin-bottom: 0.6rem;
}
.hp-services .sv-fields {
  margin-bottom: 1.5rem;
}
.hp-services .sv-headline {
  margin-bottom: 3.4rem;
}
@media (max-width: 600px),
  (orientation: landscape) and (max-width: 1000px) and (max-height: 500px),
  (min-width: 601px) and (max-width: 1024px) and (orientation: portrait),
  (min-width: 1025px) and (max-width: 1366px) and (hover: none) and (pointer: coarse) and (orientation: portrait) {
  .hp-services .sv-headline {
    margin-bottom: 1.75rem;
  }
}

/* Both introductory lines share the eyebrow typography. */
.hp-services .sv-eyebrow,
.hp-services .sv-fields {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.24em;
}

/* A quieter blossom background behind the banner copy. */
@media (max-width: 600px),
  (orientation: landscape) and (max-width: 1000px) and (max-height: 500px),
  (min-width: 601px) and (max-width: 1024px) and (orientation: portrait),
  (min-width: 1025px) and (max-width: 1366px) and (hover: none) and (pointer: coarse) and (orientation: portrait) {
  .gw-banner .scrim {
    background: rgba(243, 234, 225, 0.84);
  }
}

/* Research areas a step below the introduction. */
@media (max-width: 600px),
  (orientation: landscape) and (max-width: 1000px) and (max-height: 500px),
  (min-width: 601px) and (max-width: 1024px) and (orientation: portrait),
  (min-width: 1025px) and (max-width: 1366px) and (hover: none) and (pointer: coarse) and (orientation: portrait) {
  .rp-intro p.rp-areas {
    font-size: 1rem;
  }
}

/* The partnerships band on forest green. */
.gw-intro,
.gw-plates-wrap {
  background: var(--apothecary);
}
.gw-intro .gw-intro-eyebrow,
.gw-intro .gw-intro-h,
.gw-plates-wrap .gw-plates-lead,
.gw-plates-wrap .gw-testimonial,
.gw-testimonial blockquote p,
.gw-testimonial figcaption {
  color: var(--bone);
}
.gw-intro-eyebrow::before,
.gw-intro-eyebrow::after {
  background: var(--bone);
  opacity: 0.4;
}
.gw-testimonial {
  border-top-color: rgba(243, 239, 230, 0.35);
}
.gw-intro-compass img {
  filter: brightness(0) invert(94%) sepia(9%) saturate(237%) hue-rotate(351deg)
    brightness(103%) contrast(92%);
}

/* The closing statement is centred over the compass watermark. */
@media (max-width: 600px),
  (orientation: landscape) and (max-width: 1000px) and (max-height: 500px),
  (min-width: 601px) and (max-width: 1024px) and (orientation: portrait),
  (min-width: 1025px) and (max-width: 1366px) and (hover: none) and (pointer: coarse) and (orientation: portrait) {
  .about-field-study .about-closing-message {
    width: 100%;
    max-width: none;
    padding-block: 2rem;
  }
  .about-field-study .about-closing-message .about-aside-stmt {
    width: 100%;
    max-width: none;
    font-size: clamp(1.3rem, 5.5vw, 1.5rem);
    line-height: 1.5;
    text-align: center;
    text-wrap: balance;
  }
  .about-field-study .about-closing-message .about-compass-watermark {
    inset: 0;
    width: 100%;
    height: 100%;
    transform: none;
  }
}

/* The compass accent shows only in the single-column layout. */
.pf-mobile-compass {
  display: none;
}
@media (max-width: 600px),
  (orientation: landscape) and (max-width: 1000px) and (max-height: 500px),
  (min-width: 601px) and (max-width: 1024px) and (orientation: portrait),
  (min-width: 1025px) and (max-width: 1366px) and (hover: none) and (pointer: coarse) and (orientation: portrait) {
  .about-field-study .about-closing-message .about-compass-watermark {
    opacity: 0.22;
  }
  .pf-banner .pf-mobile-compass {
    display: block;
    right: var(--edge);
    bottom: 4.5rem;
    width: min(100px, 26vw);
    height: auto;
    opacity: 0.65;
    pointer-events: none;
    filter: brightness(0) invert(94%) sepia(9%) saturate(237%)
      hue-rotate(351deg) brightness(103%) contrast(92%);
  }
}

/* The compass sits close to the headline. */
@media (max-width: 600px),
  (orientation: landscape) and (max-width: 1000px) and (max-height: 500px),
  (min-width: 601px) and (max-width: 1024px) and (orientation: portrait),
  (min-width: 1025px) and (max-width: 1366px) and (hover: none) and (pointer: coarse) and (orientation: portrait) {
  .pf-banner {
    min-height: 0;
    padding-bottom: 1.5rem;
  }
  .pf-banner .pf-wrap {
    padding-bottom: 0;
  }
  .pf-banner .pf-mobile-compass {
    position: static;
    margin: 1.5rem 0 0 auto;
  }
}

/* A quieter masthead on the reading edge. */
@media (max-width: 600px),
  (orientation: landscape) and (max-width: 1000px) and (max-height: 500px),
  (min-width: 601px) and (max-width: 1024px) and (orientation: portrait),
  (min-width: 1025px) and (max-width: 1366px) and (hover: none) and (pointer: coarse) and (orientation: portrait) {
  .fn-hero .fn-lockup {
    width: 88%;
    margin-left: 0;
    margin-right: auto;
    justify-self: start;
    transform: none;
  }
}

/* Compact contact opening. */
@media (max-width: 600px),
  (orientation: landscape) and (max-width: 1000px) and (max-height: 500px),
  (min-width: 601px) and (max-width: 1024px) and (orientation: portrait),
  (min-width: 1025px) and (max-width: 1366px) and (hover: none) and (pointer: coarse) and (orientation: portrait) {
  .contact-layout .contact-profile {
    margin-top: 0;
  }
  .contact-layout .contact-send .form-status:empty {
    display: none;
  }
  .contact-layout .contact-bio-name {
    margin-top: 0;
  }
}

/* Contact order: introduction, form, then values. */
@media (max-width: 600px),
  (orientation: landscape) and (max-width: 1000px) and (max-height: 500px),
  (min-width: 601px) and (max-width: 1024px) and (orientation: portrait),
  (min-width: 1025px) and (max-width: 1366px) and (hover: none) and (pointer: coarse) and (orientation: portrait) {
  #inquiry.contact-layout {
    grid-template-columns: minmax(0, 1fr) 104px !important;
    column-gap: 1rem;
  }
  #inquiry.contact-layout .contact-profile,
  #inquiry.contact-layout > .contact-content-main {
    display: contents;
  }
  .contact-layout > .contact-eyebrow {
    grid-column: 1 / -1;
    grid-row: 1;
  }
  .contact-layout .contact-title {
    grid-column: 1 / -1;
    grid-row: 2;
    margin: 0;
  }
  .contact-layout .contact-bio {
    grid-column: 1;
    grid-row: 3;
    align-self: center;
  }
  .contact-layout .contact-bio-name {
    font-size: 0.82rem;
    line-height: 1.4;
  }
  .contact-layout .contact-bio-meta {
    font-size: 0.65rem;
  }
  .contact-layout .contact-figure {
    grid-column: 2;
    grid-row: 3;
    width: 104px;
    margin: 0;
  }
  .contact-layout .contact-portrait-frame {
    width: 104px;
    margin: 0;
  }
  .contact-layout .contact-form {
    grid-column: 1 / -1;
    margin-top: 0;
  }
  .contact-layout .cv-column {
    grid-column: 1 / -1;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem 0.75rem;
    margin-top: 0;
  }
  .contact-layout .cv-column .cv-item {
    grid-template-columns: 28px minmax(0, 1fr);
    gap: 0.4rem;
  }
  .contact-layout .cv-column .cv-icon {
    width: 26px;
    height: 32px;
  }
  .contact-layout .cv-column .cv-title {
    font-size: 0.74rem;
  }
  .contact-layout .cv-column .cv-note {
    font-size: 0.68rem;
  }
}

/* Compact form controls with comfortable touch sizes. */
@media (max-width: 600px),
  (orientation: landscape) and (max-width: 1000px) and (max-height: 500px),
  (min-width: 601px) and (max-width: 1024px) and (orientation: portrait),
  (min-width: 1025px) and (max-width: 1366px) and (hover: none) and (pointer: coarse) and (orientation: portrait) {
  #inquiry.contact-layout {
    row-gap: 0.75rem;
    padding-top: 1rem;
  }
  .contact-layout .contact-form {
    gap: 0.65rem;
  }
  .contact-layout .contact-form .field label {
    margin-bottom: 0.25rem;
  }
  .contact-layout .contact-form input[type="text"],
  .contact-layout .contact-form input[type="email"] {
    height: 44px;
    min-height: 44px;
    box-sizing: border-box;
    padding: 0.25rem 0;
  }
  .contact-layout .contact-form textarea {
    height: 64px;
    min-height: 64px;
    box-sizing: border-box;
    padding: 0.25rem 0;
  }
  .contact-layout .contact-send {
    margin-top: 0;
  }
  .contact-layout .cv-column {
    padding-top: 0;
  }
}

/* Form and values grid rows. */
@media (max-width: 600px),
  (orientation: landscape) and (max-width: 1000px) and (max-height: 500px),
  (min-width: 601px) and (max-width: 1024px) and (orientation: portrait),
  (min-width: 1025px) and (max-width: 1366px) and (hover: none) and (pointer: coarse) and (orientation: portrait) {
  .contact-layout .contact-form {
    grid-row: 4;
  }
  .contact-layout .cv-column {
    grid-row: 5;
  }
}

/* Landscape tablets: a compact banner with the action on the reading edge. */
@media (min-width: 601px) and (max-width: 1024px) and (min-height: 501px) and (orientation: landscape),
  (min-width: 1025px) and (max-width: 1366px) and (hover: none) and (pointer: coarse) and (orientation: landscape) {
  .hero {
    min-height: 0;
    height: auto;
    max-height: none;
    text-align: left;
  }
  .hero .hero-inner {
    padding-block: 2rem;
    text-align: left;
  }
  :root body .hero .hero-inner > .btn-pill {
    margin-left: 0;
    margin-right: auto;
    align-self: flex-start;
    justify-self: start;
  }
  .hero .sub-deck,
  .hero .trusted,
  .hero .sub-proof {
    margin-left: 0;
    margin-right: auto;
    text-align: left;
  }
}

/* Landscape tablets: the promise beside the client voices. */
@media (min-width: 601px) and (max-width: 1024px) and (min-height: 501px) and (orientation: landscape),
  (min-width: 1025px) and (max-width: 1366px) and (hover: none) and (pointer: coarse) and (orientation: landscape) {
  .hp-testimonials {
    position: relative;
    isolation: isolate;
    padding-block: 2rem;
  }
  .hp-testimonials .t-layout {
    display: grid;
    grid-template-columns: clamp(160px, 17vw, 210px) minmax(0, 1fr);
    gap: 1.5rem;
    width: 100%;
    max-width: none;
    margin: 0;
    align-items: start;
    transform: none;
    position: relative;
    z-index: 1;
    padding-left: 0;
    box-sizing: border-box;
  }
  .hp-testimonials .t-intro {
    grid-column: 1;
    grid-row: 1;
    padding: 2rem 0 0;
  }
  .hp-testimonials .t-testimonial-panel {
    grid-column: 2;
    grid-row: 1;
    min-width: 0;
  }
  .hp-testimonials .t-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    width: 100%;
    max-width: none;
    margin: 0;
    align-items: stretch;
  }
  .hp-testimonials .t-card,
  .hp-testimonials .t-card:nth-child(n) {
    grid-template-columns: minmax(0, 1fr);
    gap: 0.6rem;
    padding: 1rem 0.65rem;
    height: auto;
  }
  .hp-testimonials .t-card:first-child {
    padding-left: 0;
  }
  .hp-testimonials .t-card:last-child {
    padding-right: 0;
  }
  .hp-testimonials .t-copy {
    min-width: 0;
    min-height: 0;
  }
  .hp-testimonials .t-promise {
    margin: 0;
    transform: none;
    font-size: 1.05rem;
  }
  .hp-testimonials .t-card .t-quote,
  .hp-testimonials .t-card .t-attribution,
  .hp-testimonials .t-card .t-person-role,
  .hp-testimonials .t-card .t-location {
    font-size: 0.76rem !important;
    line-height: 1.45 !important;
  }
  .hp-testimonials .t-logo {
    width: 38px;
    height: 44px;
  }
  .hp-testimonials .t-logo img {
    max-width: 38px;
    max-height: 44px;
  }
  .hp-testimonials::before {
    content: "";
    position: absolute;
    left: var(--edge);
    top: auto;
    bottom: 0;
    width: 140px;
    height: 133px;
    aspect-ratio: auto;
    z-index: 0;
    background: url("../images/decor/native-grass-extended.png") left bottom /
      contain no-repeat;
    opacity: 0.55;
    pointer-events: none;
    clip-path: none;
  }
}

/* Tablets omit the testimonial grass. */
@media (min-width: 601px) and (max-width: 1024px) and (orientation: landscape) and (min-height: 501px),
  (min-width: 1001px) and (max-width: 1024px) and (orientation: landscape),
  (min-width: 1025px) and (max-width: 1366px) and (hover: none) and (pointer: coarse) and (orientation: landscape) {
  .hp-testimonials::before {
    content: none;
    display: none;
  }
}

/* The featured Field Note action aligns with its caption. */
@media (min-width: 601px) and (max-width: 1024px) and (orientation: landscape) and (min-height: 501px),
  (min-width: 1001px) and (max-width: 1024px) and (orientation: landscape),
  (min-width: 1025px) and (max-width: 1366px) and (hover: none) and (pointer: coarse) and (orientation: landscape) {
  :root body .pf-note .pf-note-inner > .pf-note-btn.btn-pill {
    display: flex;
    width: 320px;
    max-width: 100%;
    margin-left: 0;
    margin-right: auto;
    align-self: flex-start;
    justify-self: start;
  }
}

/* The newsletter action follows the form's left edge. */
@media (min-width: 601px) and (max-width: 1024px) and (orientation: landscape) and (min-height: 501px),
  (min-width: 1001px) and (max-width: 1024px) and (orientation: landscape),
  (min-width: 1025px) and (max-width: 1366px) and (hover: none) and (pointer: coarse) and (orientation: landscape) {
  :root body .fn-hero .fn-subscribe > .btn-pill {
    display: flex;
    width: 320px;
    max-width: 100%;
    margin-left: 0;
    margin-right: auto;
    align-self: flex-start;
    justify-self: start;
  }
}

/* The contact action follows the form's left edge. */
@media (min-width: 601px) and (max-width: 1024px) and (orientation: landscape) and (min-height: 501px),
  (min-width: 1001px) and (max-width: 1024px) and (orientation: landscape),
  (min-width: 1025px) and (max-width: 1366px) and (hover: none) and (pointer: coarse) and (orientation: landscape) {
  :root body .contact-form .contact-send > .btn-pill {
    display: flex;
    width: 320px;
    max-width: 100%;
    min-width: 0;
    margin-left: 0;
    margin-right: auto;
    align-self: flex-start;
    justify-self: start;
  }
}

/* ----- Portrait tablets ------------------------------------------- */
/* Tablets in portrait use the phone layout (see mobile.css). This block sets
   its scale for the larger screen: a larger root size, so every rem measure
   grows together, and a centred reading column of about 38rem. */
@media (min-width: 601px) and (max-width: 1024px) and (orientation: portrait),
  (min-width: 1025px) and (max-width: 1366px) and (hover: none) and (pointer: coarse) and (orientation: portrait),
  (orientation: landscape) and (max-width: 1000px) and (max-height: 500px) {
  html {
    font-size: clamp(17px, calc(13px + 0.6vw), 19.5px);
  }
  :root {
    --edge: max(3rem, calc((100vw - 38rem) / 2));
  }

  /* Sections with a fixed phone gutter take the column edge. */
  .field-notes,
  .fn-hero,
  .fn-testimonials,
  .fn-featured-inner,
  .es-article {
    padding-inline: var(--edge);
  }

  /* Caps that only apply above phone width are released. */
  .hp-services .sv-grid {
    max-width: none;
    margin-inline: 0;
  }
  #inquiry.contact-layout {
    max-width: none;
    margin-inline: 0;
  }

  /* Homepage portrait: sized to the copy and aligned to its left edge. */
  .hp-researcher .rc-media {
    justify-content: flex-start;
  }
  .hp-researcher .rc-portrait-frame {
    max-width: 22rem;
  }

  /* Workbook covers scale with the type; on Ghostwriting the cover aligns left. */
  .wb-cover a {
    max-width: 20rem;
  }
  .dl-cover a {
    max-width: 22rem;
  }
  .wb-cover {
    align-items: flex-start;
  }
  .wb-cover .wb-hint {
    text-align: left;
  }

  /* Hero service line in three lines. */
  .hero .sub-deck {
    max-width: 30rem;
    text-wrap: balance;
  }

  /* Buttons fit their label on one line, at least 280px wide. */
  :root body .btn-pill:not(.btn-contact) {
    width: max-content;
    min-width: min(280px, 100%);
    white-space: nowrap;
    padding-inline: 1.75rem;
  }

  /* The belief blossom is framed at the portrait's size on the green band. */
  .belief .belief-media {
    background: var(--apothecary);
    padding: 0 var(--edge) 3rem;
  }
  .belief .belief-media img {
    width: 22rem;
    max-width: 100%;
  }

  /* Ghostwriting hero: the nib sits beside the headline's closing line. */
  .gw-banner-lead {
    justify-content: flex-start;
    align-items: flex-end;
    gap: 1.25rem;
  }
  .gw-banner-lead h1 {
    flex: 0 1 auto;
    max-width: 8.6em;
  }
  .gw-banner-mobile-nib {
    align-self: flex-end;
    margin-bottom: 0.55em;
  }
  .gw-banner-mobile-nib img {
    width: 2.4rem;
    transform: none;
  }

  /* Newsletter masthead at a compact width on the reading edge. */
  .fn-hero .fn-lockup {
    width: 26rem;
    max-width: 100%;
    margin-left: 0;
    margin-right: auto;
    justify-self: start;
  }

  /* Subscribe follows the form's left edge. */
  :root body .fn-subscribe .btn-pill {
    margin-left: 0;
    margin-right: auto;
    align-self: flex-start;
    justify-self: start;
  }
}

/* ----- Landscape phones -------------------------------------------- */
/* The phone layout on a short, wide screen: shares the portrait-tablet
   column above, with phone type size, content held within the screen height
   and edges that clear the camera housing. */
@media (orientation: landscape) and (max-width: 1000px) and (max-height: 500px) {
  html {
    font-size: 16px;
  }
  :root {
    --edge: max(
      1.5rem,
      calc((100vw - 38rem) / 2),
      calc(env(safe-area-inset-left) + 1rem),
      calc(env(safe-area-inset-right) + 1rem)
    );
  }

  /* Header mark and menu button at the screen edges. */
  .site-nav {
    padding-left: max(1.5rem, calc(env(safe-area-inset-left) + 0.75rem));
    padding-right: max(1.5rem, calc(env(safe-area-inset-right) + 0.75rem));
  }

  /* Navigation overlay: pages in one centred row with Contact beneath, so the
     whole menu fits the short screen. */
  .menu {
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    align-content: center;
    column-gap: 2rem;
    row-gap: 0.25rem;
    padding-top: 4rem;
    padding-bottom: 1rem;
  }
  .menu > li {
    width: auto;
  }
  .menu > li:last-child {
    flex-basis: 100%;
    display: flex;
    justify-content: center;
  }
  .menu a {
    width: auto;
    padding: 0.45rem 0;
  }
  .menu a.btn-contact {
    margin-top: 0.5rem;
  }

  .menu a.btn-contact {
    -webkit-tap-highlight-color: transparent;
  }
  :root
    body
    .site-header
    .menu
    a.btn-contact:is(:hover, :active, :focus-visible) {
    background-color: var(--fireweed);
    border-color: var(--fireweed);
    color: var(--bone);
    transition: none;
  }

  /* Opening bands take only the height their content needs. */
  .hero,
  .gw-banner,
  .rp-head {
    min-height: 0;
  }

  /* Homepage hero: the button stays within the first screen. */
  .hero .hero-inner {
    padding-block: 1rem 1.5rem;
  }
  .hero .hero-identity-name,
  .hero .hero-identity-divider,
  .hero .hero-identity-role {
    display: inline;
  }
  .hero h1 {
    font-size: 2.15rem;
    margin-top: 0.75rem;
    margin-bottom: 0.9rem;
  }
  .hero .sub-deck {
    max-width: 38rem;
    margin-bottom: 1rem;
  }

  /* Ghostwriting tagline breaks at the dash. */
  .gw-subhead-close {
    display: block;
  }
  .es-hero {
    min-height: calc(100svh - 3.85rem);
  }

  /* The About text column spans the reading column. */
  .about-practice .ap-copy {
    max-width: none;
  }

  /* Photographs fit within the screen height, keeping their proportions. */
  :is(
      .about-naturalist-media,
      .about-naturalist-apple-media,
      .about-fig,
      .ap-media,
      .cs-art,
      .fn-featured-media,
      .es-fig
    )
    img {
    width: auto !important;
    max-width: 100% !important;
    height: auto !important;
    max-height: calc(100svh - 4.5rem) !important;
  }
  .dl-cover a {
    max-width: min(20rem, calc((100svh - 6.5rem) * 0.8));
  }

  /* Research cards match the Ghostwriting card width, each photograph in a 4:5 frame. */
  :root body figure.rp-agent.rp-agent {
    width: min(35rem, calc(100vw - 2 * var(--edge)));
    max-width: none;
    margin-inline: auto;
    padding-inline: 0;
    box-sizing: border-box;
  }
  :root body figure.rp-agent > .rp-photo {
    width: 100%;
    aspect-ratio: 4 / 5;
  }
  :root body figure.rp-agent > .rp-photo img {
    width: 100%;
    height: 100%;
    max-height: none;
    object-fit: cover;
  }

  /* Field Notes signup: two-line heading, reach and figure on one line, and
     name and email side by side. */
  :root body .field-notes {
    padding-block: 2.25rem 2.5rem;
  }
  :root body .field-notes .fn-mobile-heading {
    font-size: 1.85rem;
    line-height: 1.15;
    margin-bottom: 0.75rem;
  }
  :root body .field-notes .fn-mobile-heading strong br {
    display: none;
  }
  :root body .field-notes .fn-grid {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: baseline;
    column-gap: 0.6rem;
  }
  :root body .field-notes .fn-desc {
    flex-basis: 100%;
    max-width: none;
    margin-bottom: 0.5rem;
  }
  :root body .field-notes .fn-reach {
    max-width: none;
    margin: 0;
  }
  :root body .field-notes .fn-stat {
    margin: 0;
    font-size: 2rem;
    line-height: 1.1;
  }
  :root body .field-notes .fn-form {
    flex-basis: 100%;
    margin-top: 1.5rem;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 1.5rem;
    row-gap: 0.9rem;
    align-items: end;
  }
  :root body .field-notes .fn-form .btn-pill {
    grid-column: 1;
    margin-top: 0.25rem;
    margin-bottom: 0;
  }
  :root body .field-notes .fn-form .form-status {
    grid-column: 1 / -1;
    margin: 0;
  }

  /* Ghostwriting workbook cover at the width of the partnership cards. */
  .wb-cover a {
    max-width: min(35rem, 100%);
  }
}

/* ----- Touch screens: Contact button ------------------------------ */
/* The Fireweed fill appears immediately on tap, without the system tap highlight. */
@media (max-width: 600px), (hover: none) and (pointer: coarse) {
  .menu a.btn-contact {
    -webkit-tap-highlight-color: transparent;
  }
  :root
    body
    .site-header
    .menu
    a.btn-contact:is(:hover, :active, :focus-visible) {
    background-color: var(--fireweed);
    border-color: var(--fireweed);
    color: var(--bone);
    transition: none;
  }
}