/* ===================================================================
   Mireva — psychology and counselling centre
   One stylesheet, no build step, no external request.

   1.  Tokens
   2.  Reset and base
   3.  Typography
   4.  Layout: container, sections, section head
   5.  Buttons and arrow links
   6.  Header and navigation
   7.  Banner
   8.  Services
   9.  Our centre
   10. Sessions
   11. Team
   12. Stories (the carousel)
   13. Journal
   14. Footer
   15. Scroll reveals
   16. Breakpoints
   17. Reduced motion
   =================================================================== */

/* -------------------------------------------------------------------
   1. Tokens
   Colours, type scale, spacing and radii. The type scale is declared
   here once and re-declared at each breakpoint in part 16 — no heading
   ever carries a media query of its own, so changing --h2-size is
   enough to resize every h2 on the page.
   ------------------------------------------------------------------- */
:root {
  /* Colour. The accent needs three shades, not one: --ink fills the
     buttons and the banner card, --ink-deep darkens them on hover, and
     --ink-soft is the only one readable on top of --ink. Change one and
     you have to change the other two — the contrast ratios are in the
     README. */
  --ink: #123b34;
  --ink-deep: #0b2621;
  --ink-soft: #9ccbb8;
  --mint: #e4efe5;
  --paper: #fff;
  --slate: #545c51;
  --line: rgba(84, 92, 81, 0.5);
  --line-dark: #3b564e;
  --pale-ink: rgba(255, 255, 255, 0.7);
  --veil: rgba(0, 0, 0, 0.5);

  /* Type */
  --serif: 'Castoro', Georgia, 'Times New Roman', serif;
  --sans: 'Lexend', system-ui, -apple-system, 'Segoe UI', sans-serif;

  --h1-size: 67px;
  --h2-size: 43px;
  --h3-size: 30px; /* session and member names */
  --h4-size: 22px; /* service and post names */
  --h5-size: 20px; /* the name under a quote */
  --lead-size: 20px;
  --body-size: 16px;
  --quote-size: 24px;
  --figure-size: 46px;

  --lh-tight: 1.2;
  --lh-body: 1.5;
  --lh-quote: 1.3;
  --track-h1: -2px;
  --track-h2: -1px;
  --track-body: -0.16px;

  /* Spacing */
  --shell: 1200px;
  --gutter: 15px;
  --section-space: 120px;
  --head-gap: 60px; /* section head to the list under it */
  --stack: 20px; /* heading to the paragraph under it */

  /* Shape */
  --radius-card: 24px;
  --radius-img: 12px;
  --radius-btn: 8px;
  --radius-thumb: 5px;

  /* Photo heights the original keeps fixed rather than proportional. */
  --post-img-h: 230px;

  /* Motion. outQuart, the curve the original animates on. */
  --ease: cubic-bezier(0.165, 0.84, 0.44, 1);
  --reveal-time: 1000ms;
  --hover-time: 500ms;
}

/* -------------------------------------------------------------------
   2. Reset and base
   ------------------------------------------------------------------- */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  /* `clip`, never `hidden`: hidden would turn the root into a scroll
     container and break every sticky and anchor offset below. The
     banner mosaic slides in from above, so it does leave the frame. */
  overflow-x: clip;
  scroll-behavior: smooth;
  /* The header is fixed; without this an anchor lands under it. */
  scroll-padding-top: 110px;
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: var(--body-size);
  line-height: var(--lh-body);
  letter-spacing: var(--track-body);
  -webkit-font-smoothing: antialiased;
}

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

img {
  height: auto;
}

ul,
ol {
  margin: 0;
  padding: 0;
  list-style: none;
}

figure,
blockquote,
dl,
dd {
  margin: 0;
}

a {
  color: inherit;
  text-decoration: none;
}

button {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
}

/* One focus ring for the whole page, visible on both backgrounds. */
:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 3px;
  border-radius: 2px;
}

.banner :focus-visible,
.foot :focus-visible,
.member :focus-visible {
  outline-color: var(--paper);
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.skip-link {
  position: fixed;
  top: 8px;
  left: 8px;
  z-index: 2000;
  padding: 10px 18px;
  background: var(--ink);
  color: var(--paper);
  border-radius: var(--radius-btn);
  transform: translateY(-200%);
  transition: transform 160ms var(--ease);
}

.skip-link:focus {
  transform: none;
}

/* -------------------------------------------------------------------
   3. Typography
   ------------------------------------------------------------------- */
h1,
h2,
h3 {
  margin: 0;
  font-family: var(--serif);
  font-weight: 400;
  color: var(--ink);
}

h1 {
  font-size: var(--h1-size);
  line-height: var(--lh-tight);
  letter-spacing: var(--track-h1);
}

h2 {
  font-size: var(--h2-size);
  line-height: var(--lh-tight);
  letter-spacing: var(--track-h2);
  text-transform: capitalize;
}

p {
  margin: 0;
  color: var(--slate);
}

/* The intro paragraph under a heading. */
.lead {
  font-size: var(--lead-size);
  line-height: var(--lh-body);
}

.lead--pale,
.banner h1 {
  color: var(--paper);
}

/* -------------------------------------------------------------------
   4. Layout
   ------------------------------------------------------------------- */
.wrap {
  width: 100%;
  max-width: var(--shell);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

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

/* Four sections in a row share one vertical rhythm: only the bottom
   padding separates them, the top one would double it. */
.section--tight {
  padding-top: 0;
}

/* Section head: title on the left, button on the right. Below 768px the
   button leaves this row and reappears under the list (see part 16),
   which is what the original does. */
.head-row {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 40px;
  margin-bottom: var(--head-gap);
}

.head-row__text > .lead {
  margin-top: var(--stack);
}

.head-row__action-mobile {
  display: none;
  margin-top: 40px;
}

/* -------------------------------------------------------------------
   5. Buttons and arrow links
   ------------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 12px 24px;
  border: 1px solid transparent;
  border-radius: var(--radius-btn);
  font-size: var(--body-size);
  font-weight: 500;
  line-height: 1.3;
  text-transform: capitalize;
  transition:
    background-color var(--hover-time) var(--ease),
    border-color var(--hover-time) var(--ease),
    color var(--hover-time) var(--ease);
}

.btn--solid {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--paper);
}

.btn--solid:hover {
  background: var(--ink-deep);
  border-color: var(--ink-deep);
}

/* The outlined one, used once, in the header. */
.btn--ghost {
  padding-inline: 22px;
  border-color: var(--ink);
  color: var(--ink);
}

.btn--ghost:hover {
  background: var(--ink);
  color: var(--paper);
}

/* White on the deep green: banner and footer. */
.btn--pale {
  background: var(--paper);
  border-color: var(--paper);
  color: var(--ink);
}

.btn--pale:hover {
  background: var(--mint);
  border-color: var(--mint);
}

.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 500;
  text-transform: capitalize;
  color: var(--ink);
}

.link-arrow svg {
  width: 16px;
  height: 16px;
  transition: transform 300ms var(--ease);
}

.link-arrow:hover svg {
  transform: translateX(4px);
}

.link-arrow--pale {
  color: var(--paper);
}

/* -------------------------------------------------------------------
   6. Header and navigation
   ------------------------------------------------------------------- */
.site-head {
  position: fixed;
  inset: 0 0 auto;
  z-index: 1000;
  background: var(--paper);
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.04);
  padding-block: 20px;
}

.site-head__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  max-width: none;
  padding-inline: 50px;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
  color: var(--ink);
}

.brand__mark {
  width: 30px;
  height: 30px;
}

.brand__name {
  font-family: var(--serif);
  font-size: 24px;
  line-height: 1.25;
  letter-spacing: -0.4px;
}

.nav-panel {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex: 1;
  gap: 24px;
}

.nav__list {
  display: flex;
  align-items: center;
}

.nav__link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 12px 20px;
  font-size: var(--body-size);
  font-weight: 400;
  text-transform: capitalize;
  color: var(--ink);
  transition: color var(--hover-time) var(--ease);
}

.nav__link:hover {
  color: var(--slate);
}

.nav__chevron {
  width: 12px;
  height: 8px;
  transition: transform 200ms var(--ease);
}

/* The drop-down. It opens on hover and on focus in plain CSS, so it
   still works with the scripts removed; main.js only adds click
   support, which touch screens need because they have no hover. */
.nav__item--has-menu {
  position: relative;
}

.submenu {
  position: absolute;
  top: 100%;
  left: 8px;
  min-width: 220px;
  padding: 8px 0;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius-btn);
  box-shadow: 0 12px 24px rgba(18, 59, 52, 0.1);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  /* Two delays, not one. Opening waits 80ms so a pointer crossing the
     button does not flash the panel; closing waits 300ms so the pointer
     has time to travel over the gap between button and panel. */
  transition:
    opacity 300ms var(--ease) 300ms,
    transform 300ms var(--ease) 300ms,
    visibility 0s linear 600ms;
}

.nav__item--has-menu:hover .submenu,
.nav__item--has-menu:focus-within .submenu,
.nav__toggle[aria-expanded='true'] + .submenu {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition:
    opacity 400ms var(--ease) 80ms,
    transform 400ms var(--ease) 80ms,
    visibility 0s linear 80ms;
}

.nav__item--has-menu:hover .nav__chevron,
.nav__item--has-menu:focus-within .nav__chevron,
.nav__toggle[aria-expanded='true'] .nav__chevron {
  transform: rotate(180deg);
}

.submenu a {
  display: block;
  padding: 10px 20px;
  color: var(--slate);
  text-transform: capitalize;
  transition:
    background-color 200ms var(--ease),
    color 200ms var(--ease);
}

.submenu a:hover {
  background: var(--mint);
  color: var(--ink);
}

.site-head__aside {
  display: flex;
  align-items: center;
  gap: 26px;
  flex-shrink: 0;
}

.phone {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-weight: 500;
  white-space: nowrap;
}

.phone__icon {
  width: 16px;
  height: 16px;
}

/* Never shown without scripts: with the panel already open underneath, the
   button would be a control that does nothing. */
.burger {
  display: none;
  align-items: center;
  gap: 10px;
  font-weight: 500;
}

/* Three bars drawn with one element and two shadows. */
.burger__bars,
.burger__bars::before,
.burger__bars::after {
  display: block;
  width: 22px;
  height: 2px;
  background: var(--ink);
  border-radius: 2px;
  transition: transform 300ms var(--ease);
}

.burger__bars {
  position: relative;
}

.burger__bars::before,
.burger__bars::after {
  content: '';
  position: absolute;
  left: 0;
}

.burger__bars::before {
  top: -7px;
}

.burger__bars::after {
  top: 7px;
}

.burger[aria-expanded='true'] .burger__bars {
  background: transparent;
}

.burger[aria-expanded='true'] .burger__bars::before {
  transform: translateY(7px) rotate(45deg);
}

.burger[aria-expanded='true'] .burger__bars::after {
  transform: translateY(-7px) rotate(-45deg);
}

/* -------------------------------------------------------------------
   7. Banner
   The green card is its own element behind the content, inset from the
   page edges, so the text sits on a flat colour and never on a photo.
   ------------------------------------------------------------------- */
.banner {
  position: relative;
  /* No margin for the fixed header: it overlaps the top of the section,
     exactly as the original does, and the 130px of padding clear the title. */
  padding-top: 130px;
  padding-bottom: 40px;
}

.banner__card {
  position: absolute;
  inset: 90px 50px 0;
  background: var(--ink);
  border-radius: var(--radius-card);
}

.banner__inner {
  position: relative;
  z-index: 1;
  display: grid;
  /* 484px is the mosaic; the text takes what is left. minmax(0, 1fr)
     and not 1fr: a bare 1fr refuses to shrink under its content. */
  grid-template-columns: minmax(0, 1fr) 484px;
  gap: 16px 95px;
  align-items: center;
}

.banner h1 + .lead {
  margin-top: var(--stack);
}

.banner__actions {
  display: flex;
  align-items: center;
  gap: 25px;
  margin-top: 70px;
}

/* The mosaic: two columns of two photos, each column centred on its own
   height. The right column is shorter, so centring is what staggers it
   — no offset is written anywhere. */
.mosaic {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 226px));
  gap: 16px;
  justify-content: end;
}

.mosaic__col {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 15px;
  height: 550px;
}

.mosaic img {
  width: 100%;
  border-radius: var(--radius-img);
  object-fit: cover;
}

.mosaic__col:first-child img:first-child {
  height: 207px;
}

.mosaic__col:first-child img:last-child {
  height: 328px;
}

.mosaic__col--low img:first-child {
  height: 308px;
}

.mosaic__col--low img:last-child {
  height: 177px;
}

/* -------------------------------------------------------------------
   8. Services
   ------------------------------------------------------------------- */
.services {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 40px;
}

.service {
  padding-inline: 10px;
  text-align: center;
}

.service__icon {
  margin-inline: auto;
}

.service__name {
  margin-block: var(--stack);
  font-family: var(--serif);
  font-size: var(--h4-size);
  font-weight: 400;
  line-height: var(--lh-tight);
  text-transform: capitalize;
}

.service__name a {
  transition: color var(--hover-time) var(--ease);
}

.service__name a:hover {
  color: var(--slate);
}

/* Three columns only: the original narrows the title so it wraps onto two
   lines and the paragraph below stays wider than it. On one or two columns
   it lets the name run the full width. */
@media (min-width: 992px) {
  .service__name {
    max-width: 240px;
    margin-inline: auto;
  }
}

/* -------------------------------------------------------------------
   9. Our centre
   ------------------------------------------------------------------- */
.centre {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 30px 80px;
  align-items: center;
}

.centre__photo {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: var(--radius-img);
}

.centre h2 + .lead {
  margin-top: var(--stack);
}

.figures {
  margin-top: 50px;
}

.figure {
  display: flex;
  align-items: flex-start;
  gap: 30px;
  padding-bottom: 20px;
}

.figure + .figure {
  padding-top: 20px;
}

.figure--ruled {
  border-bottom: 1px solid var(--line);
}

.figure__value {
  flex: 0 0 96px;
  font-size: var(--figure-size);
  font-weight: 600;
  line-height: 1;
  color: var(--ink);
}

.figure dd {
  color: var(--slate);
}

/* -------------------------------------------------------------------
   10. Sessions
   Three rows. The first carries the tinted panel; hovering any row
   moves the tint onto it, which is the "session hover" of the original
   done with a class instead of a script.
   ------------------------------------------------------------------- */
.sessions {
  display: grid;
  gap: 5px;
}

.session {
  position: relative;
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 40px;
  border-radius: var(--radius-img);
  background: var(--paper);
  transition: background-color var(--hover-time) var(--ease);
}

/* The rule under a row. Drawn as a pseudo-element rather than a border so
   the rounded corners of the tinted panel do not bend it. It fades out on
   whichever row carries the tint. */
.session::after {
  content: '';
  position: absolute;
  inset: auto 0 -1px;
  height: 1px;
  background: var(--line);
  transition: opacity var(--hover-time) var(--ease);
}

.session.is-open::after,
.session:hover::after,
.session:focus-within::after {
  opacity: 0;
}

.sessions:hover .session.is-open:not(:hover)::after {
  opacity: 1;
}

.session.is-open,
.session:hover,
.session:focus-within {
  background: var(--mint);
}

/* Hovering one row takes the tint away from the row that had it, so two
   rows are never lit at once. */
.sessions:hover .session.is-open:not(:hover) {
  background: var(--paper);
}

.session__head {
  display: flex;
  align-items: center;
  gap: 50px;
  flex: 0 0 436px;
}

.session__name {
  font-family: var(--serif);
  font-size: var(--h3-size);
  font-weight: 400;
  line-height: var(--lh-tight);
  text-transform: capitalize;
}

.session__name a {
  transition: color var(--hover-time) var(--ease);
}

.session__name a:hover {
  color: var(--slate);
}

.session__text {
  flex: 1 1 auto;
  max-width: 600px;
  /* The original leaves 10px above and below every paragraph; here it is
     only visible on this row, where it sets the height of the whole panel. */
  padding-block: 10px;
}

/* -------------------------------------------------------------------
   11. Team
   Four portraits, edge to edge, no gap. The name sits on a veil that
   fades in on hover while the photo grows a little underneath.
   ------------------------------------------------------------------- */
.team {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  max-width: var(--shell);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.member {
  position: relative;
  overflow: hidden;
}

.member__photo {
  width: 100%;
  aspect-ratio: 293 / 463;
  object-fit: cover;
  transition: transform var(--hover-time) var(--ease);
}

.member:hover .member__photo,
.member:focus-within .member__photo {
  transform: scale(1.1);
}

.member__veil {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  padding-bottom: 30px;
  background: var(--veil);
  opacity: 0;
  transition: opacity var(--hover-time) var(--ease);
}

.member:hover .member__veil,
.member:focus-within .member__veil {
  opacity: 1;
}

.member__name {
  font-family: var(--serif);
  font-size: var(--h3-size);
  font-weight: 400;
  line-height: var(--lh-tight);
  color: var(--paper);
  text-transform: capitalize;
}

.member__role {
  font-size: 18px;
  line-height: 1.2;
  color: var(--paper);
}

.socials {
  display: flex;
  gap: 20px;
  margin-top: 12px;
  color: var(--paper);
}

.socials svg {
  width: 22px;
  height: 22px;
}

.socials a {
  display: block;
  transition: opacity 200ms var(--ease);
}

.socials a:hover {
  opacity: 0.7;
}

/* -------------------------------------------------------------------
   12. Stories
   A scroll-snapping track: it slides, it swipes and it takes Tab with
   no JavaScript at all. The two arrows are an addition main.js wires
   up; without scripts the track keeps its scrollbar instead.
   ------------------------------------------------------------------- */
.stories {
  background: var(--mint);
}

.stories__inner {
  display: grid;
  grid-template-columns: 244px minmax(0, 1fr);
  gap: 60px;
  align-items: start;
}

.rating {
  margin-top: 60px;
}

.rating__value {
  display: block;
  margin-bottom: 20px;
  font-size: var(--lead-size);
  color: var(--ink);
}

.stories__main {
  position: relative;
}

.track {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 100%;
  gap: 0;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: thin;
  scrollbar-color: var(--line) transparent;
}

/* With scripts the arrows do the paging, so the bar is redundant. */
.js .track {
  scrollbar-width: none;
}

.js .track::-webkit-scrollbar {
  display: none;
}

.story {
  scroll-snap-align: start;
  display: grid;
  grid-template-columns: 280px minmax(0, 1fr);
  gap: 50px;
  align-items: center;
}

.story__photo {
  width: 280px;
  height: 330px;
  object-fit: cover;
  border-radius: var(--radius-img);
}

.story__body p {
  margin-top: 20px;
  font-size: var(--quote-size);
  line-height: var(--lh-quote);
  color: var(--ink);
}

.story__name {
  margin-top: 40px;
  font-family: var(--serif);
  font-size: var(--h5-size);
  line-height: var(--lh-tight);
  color: var(--ink);
  text-transform: capitalize;
}

/* Announced, never drawn: the original shows no counter here, and a
   screen reader still needs to know which story is on screen. */
.track__status {
  margin: 0;
}

.track__nav {
  display: none;
  gap: 24px;
  position: absolute;
  right: 0;
  bottom: 0;
}

.js .track__nav {
  display: flex;
}

.round {
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  border: 1px solid var(--line);
  border-radius: 50%;
  color: var(--ink);
  background: transparent;
  transition:
    background-color var(--hover-time) var(--ease),
    color var(--hover-time) var(--ease),
    border-color var(--hover-time) var(--ease);
}

.round svg {
  width: 16px;
  height: 16px;
}

.round:hover:not([disabled]) {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--paper);
}

.round[disabled] {
  opacity: 0.4;
  cursor: default;
}

/* -------------------------------------------------------------------
   13. Journal
   ------------------------------------------------------------------- */
.posts {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 40px 30px;
}

.post__frame {
  display: block;
  overflow: hidden;
  border-radius: var(--radius-img);
}

.post__frame img {
  width: 100%;
  /* A fixed height, not a ratio: on one column the ratio would give a
     458px-tall photo where the original keeps 240. */
  height: var(--post-img-h);
  object-fit: cover;
  transition: transform 700ms var(--ease);
}

.post:hover .post__frame img {
  transform: scale(1.05);
}

.post__tag {
  margin-top: 24px;
  font-weight: 500;
  color: var(--ink);
  text-transform: capitalize;
}

.post__title {
  margin-block: 10px;
  font-family: var(--serif);
  font-size: var(--h4-size);
  font-weight: 400;
  line-height: var(--lh-tight);
  text-transform: capitalize;
}

.post__title a {
  transition: color var(--hover-time) var(--ease);
}

.post:hover .post__title a {
  color: var(--slate);
}

.post__more {
  margin-top: 20px;
}

/* -------------------------------------------------------------------
   14. Footer
   ------------------------------------------------------------------- */
.foot {
  padding-top: 100px;
  padding-bottom: 60px;
  background: var(--ink);
  color: var(--paper);
}

.foot h2 {
  color: var(--paper);
}

.foot__call {
  max-width: 560px;
  margin-inline: auto;
  padding-top: 10px;
  text-align: center;
}

.foot__call .lead {
  margin-top: var(--stack);
}

.foot__call p:last-child {
  margin-top: 50px;
}

.foot__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 40px;
  margin-top: 60px;
  padding-top: 60px;
  border-top: 1px solid var(--line-dark);
}

.foot__blurb {
  max-width: 360px;
  color: var(--paper);
}

.foot__links {
  display: flex;
  flex-wrap: wrap;
  gap: 35px;
  margin-top: 40px;
}

.foot__links a {
  font-weight: 500;
  text-transform: capitalize;
  transition: color var(--hover-time) var(--ease);
}

.foot__links a:hover,
.foot__handle:hover {
  color: var(--ink-soft);
}

.foot__handle {
  font-weight: 500;
  /* The rule on `p` paints it slate grey, which vanishes on the green. */
  color: var(--paper);
}

.foot__feed > p {
  margin-top: 12px;
}

.feed {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-top: 22px;
}

.feed a {
  position: relative;
  display: block;
  width: 70px;
  height: 70px;
  overflow: hidden;
  border-radius: var(--radius-thumb);
}

.feed img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.feed__badge {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  background: rgba(18, 59, 52, 0.65);
  opacity: 0;
  transition: opacity var(--hover-time) var(--ease);
}

.feed a:hover .feed__badge,
.feed a:focus-visible .feed__badge {
  opacity: 1;
}

.feed__badge img {
  width: 24px;
  height: 24px;
}

.foot__bottom {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 5px;
  margin-top: 90px;
  padding-top: 40px;
  border-top: 1px solid var(--line-dark);
}

.foot__bottom p {
  color: var(--pale-ink);
}

/* -------------------------------------------------------------------
   15. Scroll reveals
   The hidden state lives under `html.js` and nowhere else, so a script
   that never loads leaves every block visible. The reveal itself is a
   class main.js adds when the block crosses 15% of the viewport from
   the bottom — see the comment in main.js for why the threshold is
   measured on the screen and not on the element.
   ------------------------------------------------------------------- */
.js [data-reveal] {
  opacity: 0;
  transition:
    opacity var(--reveal-time) var(--ease),
    transform var(--reveal-time) var(--ease);
}

.js [data-reveal='up'] {
  transform: translateY(100px);
}

.js [data-reveal='down'] {
  transform: translateY(-100px);
}

.js [data-reveal='left'] {
  transform: translateX(-100px);
}

.js [data-reveal].is-in {
  opacity: 1;
  transform: none;
}

/* -------------------------------------------------------------------
   16. Breakpoints
   The same three the original uses. Only the tokens change here; the
   rules that consume them stay in their own part above.
   ------------------------------------------------------------------- */
@media (max-width: 991px) {
  :root {
    --h1-size: 52px;
    --h2-size: 40px;
    --h3-size: 28px;
    --section-space: 80px;
    --head-gap: 50px;
    --post-img-h: 210px;
  }

  .site-head {
    padding-block: 20px;
  }

  .site-head__inner {
    flex-wrap: wrap;
    padding-inline: var(--gutter);
  }

  .js .burger {
    display: inline-flex;
  }

  /* Without scripts the panel simply stays open under the bar: nothing
     is ever hidden by CSS alone. */
  .js .nav-panel {
    display: none;
  }

  .js .nav-panel.is-open {
    display: flex;
  }

  .nav-panel {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    width: 100%;
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid var(--line);
  }

  .nav__list {
    flex-direction: column;
    align-items: stretch;
  }

  .nav__link {
    width: 100%;
    justify-content: space-between;
    padding-inline: 0;
  }

  /* Flat list on small screens: an absolute panel would fall outside
     the bar and be unreachable by thumb. */
  .submenu {
    position: static;
    min-width: 0;
    max-height: 0;
    padding: 0;
    border: 0;
    box-shadow: none;
    overflow: hidden;
    opacity: 1;
    visibility: visible;
    transform: none;
    transition: max-height 300ms var(--ease);
  }

  .nav__item--has-menu:hover .submenu,
  .nav__item--has-menu:focus-within .submenu,
  .nav__toggle[aria-expanded='true'] + .submenu {
    max-height: 200px;
    transition: max-height 400ms var(--ease);
  }

  .submenu a {
    padding-left: 16px;
  }

  .site-head__aside {
    flex-wrap: wrap;
    gap: 16px;
    margin-top: 16px;
  }

  .banner {
    margin-top: 70px;
    padding-top: 150px;
    padding-bottom: 80px;
  }

  .banner__card {
    inset: 70px var(--gutter) 0;
  }

  .banner__inner {
    grid-template-columns: minmax(0, 1fr);
    gap: 60px;
    justify-items: center;
    text-align: center;
  }

  /* Photos first, words underneath — the order the original switches to. */
  .banner__text {
    order: 2;
  }

  .banner__actions {
    justify-content: center;
    margin-top: 40px;
  }

  .services,
  .posts,
  .team {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .centre {
    grid-template-columns: minmax(0, 1fr);
  }

  /* One column now, but the photo keeps its square and stops growing:
     full width would give a 961px-tall block. */
  .centre__photo {
    order: -1;
    max-width: 673px;
    justify-self: center;
  }

  .session__head {
    flex: 0 0 auto;
    gap: 20px;
  }

  .session {
    flex-wrap: wrap;
  }

  .session__text {
    max-width: none;
  }

  .stories__inner {
    grid-template-columns: minmax(0, 1fr);
    gap: 40px;
  }

  .rating {
    margin-top: 20px;
  }

  .foot {
    padding-top: 80px;
    padding-bottom: 40px;
  }

  .foot__grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .feed a {
    width: 85px;
    height: 85px;
  }

  .foot__bottom {
    margin-top: 60px;
  }
}

@media (max-width: 767px) {
  :root {
    --h1-size: 48px;
    --h2-size: 36px;
    --h3-size: 26px;
    --section-space: 60px;
    --head-gap: 40px;
    --post-img-h: 240px;
  }

  .banner {
    padding-top: 130px;
    padding-bottom: 60px;
  }

  /* Full width, and a fixed height instead of the square: a square photo
     across 737px would push the section 200px taller than the original. */
  .centre__photo {
    max-width: none;
    aspect-ratio: auto;
    height: 520px;
  }

  .head-row__action {
    display: none;
  }

  .head-row__action-mobile {
    display: block;
  }

  .services,
  .posts {
    grid-template-columns: minmax(0, 1fr);
  }

  .session {
    align-items: flex-start;
    gap: 20px;
    padding: 30px;
  }

  .story {
    grid-template-columns: minmax(0, 1fr);
    gap: 30px;
    justify-items: center;
    text-align: center;
  }

  .story__body {
    text-align: left;
  }

  .track__nav {
    position: static;
    justify-content: center;
    margin-top: 20px;
  }

  .foot__grid {
    gap: 50px;
    margin-top: 40px;
    padding-top: 40px;
  }

  .foot__bottom {
    margin-top: 40px;
  }
}

@media (max-width: 479px) {
  :root {
    --h1-size: 42px;
    --h2-size: 32px;
  }

  .team {
    grid-template-columns: minmax(0, 1fr);
  }

  .centre__photo {
    height: 320px;
  }

  /* One column of 449px: keeping the 293/463 ratio would give a 709px-tall
     portrait. The original squares it off and re-frames on the face. */
  .member__photo {
    aspect-ratio: 449 / 430;
    object-position: 50% 10%;
  }

  /* Below 480px the mosaic must fit two columns inside 449px. */
  .mosaic {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    width: 100%;
  }

  .mosaic__col {
    height: auto;
  }

  .mosaic__col img {
    height: auto !important;
    aspect-ratio: 226 / 207;
  }

  .mosaic__col:first-child img:last-child,
  .mosaic__col--low img:first-child {
    aspect-ratio: 226 / 320;
  }

  .session__head {
    gap: 16px;
  }

  .story__photo {
    width: 100%;
    max-width: 280px;
  }

  .foot__links {
    gap: 20px 24px;
  }

  .feed a {
    width: 100px;
    height: 100px;
  }
}

/* On touch screens there is no hover, so the member veil that carries
   the name would never show. It stays on. */
@media (hover: none) {
  .member__veil {
    opacity: 1;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.65) 40%, transparent);
  }

  .feed__badge {
    opacity: 0;
  }
}

/* -------------------------------------------------------------------
   17. Reduced motion
   Delays count as motion: a staggered reveal is movement spread over
   time. Everything lands on its final state at once.
   ------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    transition-delay: 0ms !important;
    scroll-behavior: auto !important;
  }

  .js [data-reveal] {
    opacity: 1;
    transform: none;
  }
}