@font-face {
  font-family: "SITS Display";
  src: url("../assets/fonts/SITSDisplay-Medium-Latin-V2.woff2") format("woff2");
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  unicode-range: U+0020-007E, U+00A0-00FF, U+2000-206F, U+20AC;
}

@font-face {
  font-family: "SITS Display";
  src: url("../assets/fonts/SITSDisplay-Italic-Latin-V2.woff2") format("woff2");
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  unicode-range: U+0020-007E, U+00A0-00FF, U+2000-206F, U+20AC;
}

@font-face {
  font-family: "SITS Display";
  src: url("../assets/fonts/SITSDisplay-Bold-Latin-V2.woff2") format("woff2");
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  unicode-range: U+0020-007E, U+00A0-00FF, U+2000-206F, U+20AC;
}

@font-face {
  font-family: "Atkinson Hyperlegible Next";
  src: url("../assets/fonts/AtkinsonHyperlegibleNext-Variable.woff2") format("woff2-variations");
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
}

:root {
  color-scheme: light;
  --font-display: "SITS Display", Georgia, serif;
  --font-ui: "Atkinson Hyperlegible Next", "Nunito Sans", Arial, sans-serif;
  --paper: #fffdf8;
  --canvas: #f7f2e8;
  --ink: #26332c;
  --ink-soft: color-mix(in srgb, var(--ink) 74%, var(--paper));
  --sage-main: #7e8362;
  --sage-light: #a2a97e;
  --sage-dark: #4c4f3b;
  --warm-focus: #9a4b28;
  --line: color-mix(in srgb, var(--ink) 24%, var(--paper));
  --line-strong: color-mix(in srgb, var(--ink) 44%, var(--paper));
  --shadow-control: 0 1px 2px rgba(38, 51, 44, 0.1);
  --shadow-soft: 0 2px 10px rgba(38, 51, 44, 0.08);
  --radius-small: 0.45rem;
  --radius-action: 0.45rem 1.55rem 0.45rem 0.45rem;
  --content-width: 72rem;
  --wide-width: 88rem;
  --header-height: 5rem;
  --target-min: 2.75rem;
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: clamp(2.5rem, 5vw, 4.5rem);
  --space-8: clamp(4rem, 8vw, 7.5rem);
  --text-small: 0.9375rem;
  --text-body: clamp(1.0625rem, 1.02rem + 0.2vw, 1.1875rem);
  --text-lead: clamp(1.25rem, 1.12rem + 0.55vw, 1.625rem);
  --text-h3: clamp(1.45rem, 1.28rem + 0.65vw, 1.9rem);
  --text-h2: clamp(2rem, 1.62rem + 1.55vw, 3rem);
  --text-h1: clamp(3.2rem, 2.4rem + 3.8vw, 6rem);
  --duration-fast: 160ms;
  --duration-feed: 1000ms;
  --duration-reveal: 920ms;
  --ease-feed: cubic-bezier(0.42, 0, 0.2, 1);
  --ease-calm: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-settle: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-cushion: cubic-bezier(0.45, 0, 0.2, 1);
}

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

[hidden] {
  display: none !important;
}

html {
  background: var(--canvas);
  scroll-padding-block-start: var(--space-4);
}

html:focus-within {
  scroll-behavior: smooth;
}

body {
  min-block-size: 100vh;
  margin: 0;
  overflow-x: clip;
  background-color: var(--canvas);
  background-image: url("../assets/paper-grain.svg");
  color: var(--ink);
  font-family: var(--font-ui);
  font-size: var(--text-body);
  line-height: 1.62;
  text-rendering: optimizeLegibility;
}

img,
picture {
  display: block;
  max-inline-size: 100%;
}

a {
  color: var(--sage-dark);
  text-decoration-color: color-mix(in srgb, var(--sage-main) 58%, transparent);
  text-decoration-thickness: 0.08em;
  text-underline-offset: 0.2em;
}

a:hover {
  text-decoration-color: currentColor;
}

h1,
h2,
h3,
p {
  margin-block: 0;
}

h1,
h2,
h3 {
  color: var(--ink);
  font-family: var(--font-display);
  font-weight: 500;
  line-height: 1.1;
  text-wrap: balance;
}

h1 {
  font-size: var(--text-h1);
  letter-spacing: -0.035em;
}

h2 {
  font-size: var(--text-h2);
  letter-spacing: -0.025em;
}

:where(a, button, input, select, textarea, summary):focus-visible {
  outline: 3px solid var(--warm-focus);
  outline-offset: 3px;
}

.shell-wide {
  inline-size: min(100% - clamp(2rem, 6vw, 6rem), var(--wide-width));
  margin-inline: auto;
}

.flow > * + * {
  margin-block-start: var(--flow-space, var(--space-5));
}

.visually-hidden {
  position: absolute !important;
  inline-size: 1px !important;
  block-size: 1px !important;
  overflow: hidden !important;
  clip: rect(0 0 0 0) !important;
  clip-path: inset(50%) !important;
  white-space: nowrap !important;
}

.skip-link {
  position: fixed;
  inset-block-start: var(--space-3);
  inset-inline-start: var(--space-3);
  z-index: 100;
  padding: 0.75rem 1rem;
  transform: translateY(-160%);
  border-radius: var(--radius-small);
  background: var(--ink);
  color: white;
  font-weight: 700;
  transition: transform 140ms ease;
}

.skip-link:focus {
  transform: translateY(0);
}

.photo-hero {
  position: relative;
  display: grid;
  min-block-size: clamp(31rem, 62svh, 41rem);
  align-items: end;
  overflow: hidden;
  padding-block: var(--space-7);
  background: var(--sage-dark);
  color: var(--paper);
  isolation: isolate;
}

.photo-hero::before,
.photo-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.photo-hero::before {
  z-index: -2;
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--sage-dark) 34%, transparent) 0%, color-mix(in srgb, var(--sage-dark) 78%, transparent) 100%),
    linear-gradient(90deg, color-mix(in srgb, var(--sage-dark) 88%, transparent) 0%, color-mix(in srgb, var(--sage-dark) 62%, transparent) 46%, transparent 78%);
}

.photo-hero::after {
  z-index: -1;
  background: url("../assets/paper-grain.svg") repeat;
  opacity: 0.18;
}

.photo-hero > picture {
  position: absolute;
  inset: 0;
  z-index: -3;
}

.photo-hero__media {
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
  object-position: 72% center;
  filter: saturate(0.84) contrast(0.96) brightness(0.98);
}

.photo-hero.hero-image-failed > picture {
  display: none;
}

.photo-hero__copy {
  max-inline-size: 44rem;
}

.photo-hero h1 {
  max-inline-size: 12ch;
  color: var(--paper);
  font-weight: 700;
}

.hero-kicker {
  color: color-mix(in srgb, var(--paper) 82%, transparent);
  font-weight: 600;
}

.lede {
  max-inline-size: 52ch;
  color: var(--ink-soft);
  font-family: var(--font-display);
  font-size: var(--text-lead);
  line-height: 1.5;
}

.photo-hero .lede {
  color: color-mix(in srgb, var(--paper) 90%, transparent);
}

.photo-hero--links-compact {
  min-block-size: clamp(23rem, 38svh, 28rem);
  padding-block: var(--space-6) var(--space-5);
}

.photo-hero--links-compact::before {
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--sage-dark) 84%, transparent), color-mix(in srgb, var(--sage-dark) 54%, transparent) 48%, transparent 82%);
}

.photo-hero--links-compact h1 {
  max-inline-size: 12ch;
  font-size: clamp(2.6rem, 2.1rem + 2.5vw, 4.4rem);
}

.photo-hero__intro {
  display: grid;
  max-inline-size: clamp(18rem, 48vw, 42rem);
  gap: 0.4rem;
  margin-block-start: 0.75rem;
}

.photo-hero__tagline,
.photo-hero__identity {
  font-size: clamp(1rem, 0.96rem + 0.2vw, 1.125rem);
  line-height: 1.42;
  text-wrap: pretty;
}

.photo-hero__tagline {
  color: var(--paper);
  font-size: clamp(1.15rem, 1.08rem + 0.35vw, 1.4rem);
  font-weight: 700;
}

.photo-hero__identity {
  color: color-mix(in srgb, var(--paper) 86%, transparent);
  font-weight: 400;
}

.photo-hero__quote {
  margin-block-start: 0.35rem;
  color: color-mix(in srgb, var(--paper) 94%, transparent);
  font-family: var(--font-display);
  font-size: clamp(1.1rem, 1.03rem + 0.3vw, 1.35rem);
  font-style: italic;
  font-weight: 400;
  line-height: 1.35;
  text-wrap: pretty;
}

.links-section {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding-block: var(--space-5) clamp(12rem, 18vw, 16rem);
  background: var(--canvas);
}

.links-section__atmosphere {
  position: absolute;
  display: block;
  inset-inline-end: clamp(-3.5rem, -2vw, -1rem);
  inset-block-end: -0.35rem;
  z-index: -1;
  inline-size: clamp(36rem, 48vw, 48rem);
  aspect-ratio: 1672 / 941;
  background-position: right bottom;
  background-repeat: no-repeat;
  background-size: contain;
  opacity: 0.72;
  pointer-events: none;
}

.link-hub {
  max-inline-size: 46rem;
}

.compact-link-section + .compact-link-section,
.compact-link-section + .podcasts-section,
.podcasts-section + .compact-link-section {
  margin-block-start: var(--space-3);
}

.podcasts-section {
  margin-block-start: var(--space-6);
}

#weekly-calm,
#work,
#support,
.podcasts-section {
  scroll-margin-block-start: var(--space-4);
}

.podcasts-section > h2 {
  margin-block-end: var(--space-3);
  color: var(--sage-dark);
  font-family: var(--font-ui);
  font-size: var(--text-body);
  font-weight: 700;
  letter-spacing: 0;
}

.other-links-section {
  margin-block-start: var(--space-7);
}

.other-links-section > h2 {
  margin-block-end: var(--space-3);
  color: var(--ink-soft);
  font-family: var(--font-ui);
  font-size: var(--text-body);
  font-weight: 700;
  letter-spacing: 0;
}

.button-stack {
  display: grid;
  gap: var(--space-2);
}

.link-button,
.link-disclosure__summary {
  --button-feed: var(--sage-dark);
  --button-feed-arrow: var(--paper);
  --button-feed-bay-width: 3.85rem;
  --link-icon-colour: var(--sage-dark);
  position: relative;
  isolation: isolate;
  display: grid;
  min-block-size: 4.85rem;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--space-4);
  align-items: center;
  overflow: hidden;
  padding: 0.75rem 1rem;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-action);
  background: color-mix(in srgb, var(--paper) 96%, transparent);
  box-shadow: var(--shadow-control);
  color: var(--ink);
  cursor: pointer;
  font-family: var(--font-ui);
  font-size: clamp(1rem, 0.97rem + 0.18vw, 1.12rem);
  font-weight: 700;
  line-height: 1.2;
  list-style: none;
  text-decoration: none;
}

.link-button::before,
.link-disclosure__summary::before {
  content: "";
  position: absolute;
  inset-inline: 0;
  inset-block-end: 0;
  z-index: 2;
  block-size: 2px;
  background: var(--button-feed);
  clip-path: inset(0 100% 0 0);
  pointer-events: none;
}

.link-button::after,
.link-disclosure__summary::after {
  content: "";
  position: absolute;
  inset-block: 0;
  inset-inline-end: 0;
  z-index: 1;
  inline-size: var(--button-feed-bay-width);
  background: var(--button-feed);
  clip-path: inset(100% 0 0 100%);
  pointer-events: none;
}

.link-button__copy,
.link-disclosure__copy {
  position: relative;
  z-index: 3;
  display: grid;
  min-inline-size: 0;
  gap: 0.15rem;
}

.link-button__title,
.link-disclosure__title {
  font-family: var(--font-display);
  font-size: clamp(1.12rem, 1.06rem + 0.24vw, 1.3rem);
  font-weight: 500;
  line-height: 1.12;
  text-wrap: pretty;
}

.link-button__note,
.link-disclosure__note {
  color: var(--ink-soft);
  font-family: var(--font-ui);
  font-size: clamp(0.86rem, 0.83rem + 0.1vw, 0.94rem);
  font-weight: 400;
  line-height: 1.3;
  text-wrap: pretty;
}

.link-icon {
  position: relative;
  z-index: 3;
  display: none;
  inline-size: 1.85rem;
  aspect-ratio: 1;
  place-items: center;
  color: var(--link-icon-colour);
  pointer-events: none;
}

.drawn-icon {
  display: none;
  inline-size: 100%;
  block-size: 100%;
  overflow: visible;
  color: currentColor;
  pointer-events: none;
}

.drawn-icon__fallback {
  display: inline;
}

[data-link-icons="on"] :where(.link-button, .link-disclosure__summary) {
  grid-template-columns: auto minmax(0, 1fr) auto;
  column-gap: 0.8rem;
}

[data-link-icons="on"] .link-icon {
  display: grid;
}

[data-link-icons="on"] .drawn-icon {
  display: block;
}

[data-link-icons="on"] .drawn-icon__fallback {
  display: none;
}

.link-button__arrow,
.link-disclosure__icon {
  position: relative;
  z-index: 3;
  display: grid;
  inline-size: 1.5rem;
  aspect-ratio: 1;
  place-items: center;
  color: var(--button-feed-arrow);
  font-size: 1.1rem;
  line-height: 1;
  opacity: 1;
  clip-path: inset(0 100% 0 0);
}

[data-link-icons="on"] .link-disclosure__icon {
  transition: transform 620ms var(--ease-cushion);
}

.link-button:hover::before,
.link-button:focus-visible::before,
.link-disclosure:not([data-suppress-hover="true"]):hover > .link-disclosure__summary::before,
.link-disclosure__summary:focus-visible::before,
.link-disclosure[open] > .link-disclosure__summary::before {
  animation: link-feed-pulse var(--duration-feed) both;
}

.link-button:hover::after,
.link-button:focus-visible::after,
.link-disclosure:not([data-suppress-hover="true"]):hover > .link-disclosure__summary::after,
.link-disclosure__summary:focus-visible::after,
.link-disclosure[open] > .link-disclosure__summary::after {
  animation: link-feed-bay-fill var(--duration-feed) both;
}

.link-button:hover .link-button__arrow,
.link-button:focus-visible .link-button__arrow,
.link-disclosure:not([data-suppress-hover="true"]):hover > .link-disclosure__summary .link-disclosure__icon,
.link-disclosure__summary:focus-visible .link-disclosure__icon,
.link-disclosure[open] .link-disclosure__icon {
  animation: link-feed-arrow-reveal var(--duration-feed) both;
}

@keyframes link-feed-pulse {
  0% {
    clip-path: inset(0 100% 0 0);
    animation-timing-function: var(--ease-feed);
  }

  64% {
    clip-path: inset(0 0 0 0);
    animation-timing-function: var(--ease-settle);
  }

  100% {
    clip-path: inset(0 0 0 100%);
  }
}

@keyframes link-feed-bay-fill {
  0%,
  58% {
    clip-path: inset(100% 0 0 100%);
    animation-timing-function: var(--ease-feed);
  }

  64% {
    clip-path: inset(calc(100% - 2px) 0 0 82%);
    animation-timing-function: var(--ease-settle);
  }

  100% {
    clip-path: inset(0 0 0 0);
  }
}

@keyframes link-feed-arrow-reveal {
  0%,
  84% {
    clip-path: inset(0 100% 0 0);
    animation-timing-function: var(--ease-settle);
  }

  100% {
    clip-path: inset(0 0 0 0);
  }
}

.link-button--featured {
  --button-feed: var(--sage-light);
  --button-feed-arrow: var(--sage-dark);
  --link-icon-colour: var(--paper);
  border-color: var(--sage-dark);
  background: var(--sage-dark);
  color: var(--paper);
}

.link-button--featured .link-button__note {
  color: color-mix(in srgb, var(--paper) 82%, transparent);
}

.link-disclosure {
  border: 0;
}

.link-disclosure__summary::-webkit-details-marker {
  display: none;
}

.link-disclosure[open] .link-disclosure__icon {
  transform: rotate(90deg);
}

[data-link-icons="on"] .link-disclosure[open] .link-disclosure__icon {
  transform: rotate(180deg);
}

.link-disclosure--support > .link-disclosure__summary {
  border-color: color-mix(in srgb, var(--sage-dark) 52%, var(--line));
  background: color-mix(in srgb, var(--sage-light) 54%, var(--paper));
}

.link-button--air-ambulance {
  --button-feed: #c65f2a;
  --link-icon-colour: #a84b22;
}

.link-button--council {
  --button-feed: #52658f;
  --link-icon-colour: #465982;
}

.reveal-actions {
  display: grid;
  grid-template-rows: 1fr;
  opacity: 1;
  transition:
    grid-template-rows var(--duration-reveal) var(--ease-cushion),
    opacity 720ms var(--ease-cushion);
  transition-delay: 450ms;
}

.link-disclosure--enhanced.is-opening > .reveal-actions,
.link-disclosure--enhanced.is-closing > .reveal-actions {
  grid-template-rows: 0fr;
  opacity: 0;
}

.reveal-actions__clip {
  min-block-size: 0;
  overflow: hidden;
}

.reveal-actions__inner {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-2);
  inline-size: calc(100% - var(--space-5));
  margin: -1px auto 0;
  padding: var(--space-3);
  border: 1px solid color-mix(in srgb, var(--sage-dark) 30%, var(--paper));
  border-block-start: 0;
  border-radius: 0 0 var(--radius-small) var(--radius-small);
  background: color-mix(in srgb, var(--sage-light) 52%, var(--paper));
  opacity: 1;
  transform: translateY(0);
  transform-origin: center top;
  transition:
    opacity 720ms var(--ease-cushion),
    transform var(--duration-reveal) var(--ease-cushion);
  transition-delay: 450ms;
}

.link-disclosure--enhanced.is-opening .reveal-actions__inner,
.link-disclosure--enhanced.is-closing .reveal-actions__inner {
  opacity: 0;
  transform: translateY(-0.42rem);
}

.link-disclosure--enhanced.is-closing > .reveal-actions,
.link-disclosure--enhanced.is-closing .reveal-actions__inner {
  transition-delay: 0ms;
}

.reveal-actions--support .reveal-actions__inner {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.service-button {
  --service-fill: var(--sage-light);
  --service-hover: var(--sage-dark);
  --service-text: var(--ink);
  --service-hover-text: var(--paper);
  position: relative;
  display: inline-flex;
  min-block-size: var(--target-min);
  min-inline-size: 0;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  padding: 0.6rem 0.8rem;
  border: 1px solid color-mix(in srgb, var(--service-fill) 72%, var(--ink));
  border-radius: var(--radius-action);
  background: var(--service-fill);
  box-shadow: var(--shadow-control);
  color: var(--service-text);
  font-size: var(--text-small);
  font-weight: 700;
  line-height: 1.15;
  text-decoration: none;
  transition:
    background-color var(--duration-fast) linear,
    border-color var(--duration-fast) linear,
    color var(--duration-fast) linear,
    box-shadow var(--duration-fast) var(--ease-calm);
}

.service-button__arrow {
  display: grid;
  flex: 0 0 auto;
  inline-size: 1.2rem;
  aspect-ratio: 1;
  place-items: center;
}

.service-button:hover,
.service-button:focus-visible {
  border-color: var(--service-hover);
  background: var(--service-hover);
  box-shadow: 0 2px 5px rgba(38, 51, 44, 0.12);
  color: var(--service-hover-text);
}

.service-button--website {
  --service-fill: color-mix(in srgb, var(--paper) 74%, var(--sage-light));
  --service-hover: var(--sage-dark);
}

.service-button--coffee {
  --service-fill: #ffdd00;
  --service-hover: #f2c900;
  --service-text: #161616;
  --service-hover-text: #161616;
}

.service-button--paypal {
  --service-fill: #0070ba;
  --service-hover: #005a96;
  --service-text: #ffffff;
  --service-hover-text: #ffffff;
}

.service-button--spotify {
  --service-fill: #1ed760;
  --service-hover: #1db954;
  --service-text: #101010;
  --service-hover-text: #101010;
}

.service-button--apple {
  --service-fill: #7d2cc4;
  --service-hover: #64209f;
  --service-text: #ffffff;
  --service-hover-text: #ffffff;
}

.social-links {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-2);
  margin-block-start: var(--space-2);
}

.link-button--utility {
  min-block-size: var(--target-min);
  padding-block: 0.55rem;
  font-size: var(--text-small);
  box-shadow: none;
}

.link-button--utility .link-button__title {
  font-family: var(--font-ui);
  font-size: var(--text-small);
  font-weight: 700;
}

.link-button--facebook {
  --button-feed: #1877f2;
  --link-icon-colour: #1877f2;
}

.link-button--instagram {
  --button-feed: #c13584;
  --link-icon-colour: #a82c72;
}

.link-button--youtube {
  --button-feed: #ff0033;
  --link-icon-colour: #d0002a;
}

.link-button--threads {
  --button-feed: #101010;
  --link-icon-colour: #101010;
}

.link-button--tiktok {
  --button-feed: #00a8a8;
  --button-feed-arrow: var(--ink);
  --link-icon-colour: #007f7f;
}

.link-button--linkedin {
  --button-feed: #0a66c2;
  --link-icon-colour: #0a66c2;
}

.site-footer {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding-block: var(--space-6);
  background: var(--sage-dark);
  color: color-mix(in srgb, var(--paper) 84%, transparent);
}

.site-footer::before {
  display: none;
}

.site-footer__inner {
  display: grid;
  grid-template-columns: minmax(15rem, 1fr) auto;
  gap: var(--space-7);
  align-items: start;
}

.site-footer h2 {
  color: var(--paper);
  font-size: var(--text-h3);
}

.site-footer nav {
  display: grid;
  gap: var(--space-2);
}

.site-footer a {
  color: var(--paper);
}

.site-footer nav a {
  display: inline-flex;
  min-block-size: var(--target-min);
  align-items: center;
}

.site-footer__legal {
  grid-column: 1 / -1;
  padding-block-start: var(--space-5);
  border-block-start: 1px solid rgba(255, 253, 248, 0.22);
  font-size: var(--text-small);
}

.button {
  display: inline-flex;
  min-block-size: var(--target-min);
  inline-size: fit-content;
  align-items: center;
  justify-content: center;
  padding: 0.75rem 1.2rem;
  border: 2px solid var(--sage-dark);
  border-radius: var(--radius-action);
  background: var(--sage-dark);
  box-shadow: var(--shadow-control);
  color: var(--paper);
  font-weight: 700;
  line-height: 1.2;
  text-decoration: none;
}

.button:hover {
  border-color: var(--sage-light);
  background: var(--sage-light);
  color: var(--ink);
}

.system-page {
  display: grid;
  min-block-size: 100vh;
  place-items: center;
  padding: var(--space-6);
}

.system-page__inner {
  max-inline-size: 42rem;
  padding: clamp(1.5rem, 5vw, 4rem);
  border: 1px solid var(--line);
  border-radius: var(--radius-small) 1.6rem var(--radius-small) 1.6rem;
  background: var(--paper);
  box-shadow: var(--shadow-soft);
}

.system-page__avatar {
  inline-size: 4.5rem;
  aspect-ratio: 1;
  border-radius: 50%;
}

.eyebrow {
  color: var(--sage-dark);
  font-size: var(--text-small);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

@media (max-width: 48rem) {
  .photo-hero {
    min-block-size: 39rem;
    padding-block-start: var(--space-7);
  }

  .photo-hero::before {
    background: linear-gradient(180deg, color-mix(in srgb, var(--sage-dark) 60%, transparent) 0%, color-mix(in srgb, var(--sage-dark) 52%, transparent) 45%, color-mix(in srgb, var(--sage-dark) 92%, transparent) 100%);
  }

  .photo-hero__media {
    object-position: 68% center;
  }

  .photo-hero--links-compact {
    min-block-size: 27rem;
    padding-block: var(--space-6) var(--space-5);
  }

  .photo-hero--links-compact::before {
    background:
      linear-gradient(180deg, color-mix(in srgb, var(--sage-dark) 18%, transparent) 0%, transparent 48%, color-mix(in srgb, var(--sage-dark) 24%, transparent) 100%),
      linear-gradient(90deg, color-mix(in srgb, var(--sage-dark) 82%, transparent) 0%, color-mix(in srgb, var(--sage-dark) 62%, transparent) 44%, color-mix(in srgb, var(--sage-dark) 18%, transparent) 70%, transparent 88%);
  }

  .site-footer__inner {
    grid-template-columns: 1fr;
    gap: var(--space-4);
  }

  .site-footer__legal {
    grid-column: auto;
  }

  .links-section {
    padding-block-end: 11.5rem;
  }

  .links-section__atmosphere {
    inset-inline-end: -8rem;
    inline-size: 36rem;
    opacity: 0.58;
  }

}

@media (max-width: 32rem) {
  .link-button,
  .link-disclosure__summary {
    --button-feed-bay-width: 3.3rem;
    padding-inline: var(--space-3);
  }

  [data-link-icons="on"] :where(.link-button, .link-disclosure__summary) {
    column-gap: 0.6rem;
  }

  [data-link-icons="on"] .link-button--utility .link-icon {
    inline-size: 1.4rem;
  }

  .reveal-actions__inner,
  .reveal-actions--support .reveal-actions__inner {
    grid-template-columns: 1fr;
    gap: 0.45rem;
  }

  .social-links {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 22rem) {
  [data-link-icons="on"] .social-links {
    grid-template-columns: 1fr;
  }
}

@media (prefers-reduced-motion: reduce) {
  html:focus-within {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    animation: none !important;
    transition: none !important;
  }

  .link-button::before,
  .link-disclosure__summary::before {
    clip-path: inset(0 0 0 100%);
  }

  .link-button::after,
  .link-disclosure__summary::after,
  .link-button__arrow,
  .link-disclosure__icon {
    clip-path: none;
  }

  .link-button__arrow,
  .link-disclosure__icon {
    opacity: 1;
    transform: none;
  }

  .link-disclosure[open] .link-disclosure__icon {
    transform: rotate(90deg);
  }

  [data-link-icons="on"] .link-disclosure[open] .link-disclosure__icon {
    transform: rotate(180deg);
  }
}

@media (forced-colors: active) {
  .links-section__atmosphere,
  .site-footer::before,
  body {
    background-image: none;
  }

  .service-button {
    border: 2px solid ButtonText;
  }

  .reveal-actions__inner {
    border-color: CanvasText;
    background: Canvas;
  }

  .link-button::before,
  .link-disclosure__summary::before {
    background: CanvasText;
  }

  .link-button::after,
  .link-disclosure__summary::after {
    border: 1px solid CanvasText;
    background: Canvas;
  }

  .link-button__arrow,
  .link-disclosure__icon,
  .link-icon,
  .service-button__arrow {
    color: CanvasText;
  }
}