:root {
  --ink: #3f3a34;
  --muted: #77736c;
  --line: #4a433b;
  --soft-line: #d8d1c7;
  --paper: #f7f3ed;
  --card: #fffdf9;
  --accent: #e9e0d3;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: "halyard-display", sans-serif;
	font-weight: 300;
  font-size: 16px;
  line-height: 1.55;
}

img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
a:hover { opacity: .72; }

.wrap {
  width: min(1120px, calc(100% - 2rem));
  margin-inline: auto;
}

/* Name and role run across the top; bio and experience sit side by side beneath */
.profile {
  display: grid;
  grid-template-columns: 180px repeat(2, minmax(0, 1fr));
  grid-template-areas:
    "portrait intro intro"
    "portrait about experience";
  column-gap: 3rem;
  align-items: start;
  padding: 3rem 0 2.5rem;
}

.portrait { grid-area: portrait; }
.intro { grid-area: intro; }
.about { grid-area: about; }
.experience { grid-area: experience; }

.portrait img {
  width: 180px;
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: 50%;
}

h1 {
  line-height: 1.12;
font-family: "lemonde-journal", serif;
font-weight: 600;
font-style: normal;
}

h2, h3 {
  line-height: 1.12;
font-family: "lemonde-journal", serif;
font-weight: 400;
font-style: normal;
}


h1 {
  margin: .25rem 0 .65rem;
  font-size: clamp(2.4rem, 6vw, 4rem);
}

.role-line {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: .5rem 1.25rem;
  margin-bottom: 1.25rem;
  color: var(--muted);
  font-size: 1.1rem;
}

.role-line p { margin: 0; color: var(--ink); }
.bio { max-width: 68ch; margin: 0 0 1.25rem; }
.social, .footer a {
  border-bottom: 1px solid currentColor;
  font-size: .95rem;
}

/* Date and company use the card .meta styles; the role uses the bio's */
.credits {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem 1.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.credits li {
  padding-top: .6rem;
  border-top: 1px solid var(--soft-line);
}

.credits time,
.credits strong {
  display: block;
  font-size: .78rem;
  line-height: 1.3;
}

.credits time { color: var(--muted); }
.credits strong { font-weight: 500; }
.credits p { margin: .3rem 0 0; line-height: 1.35; text-wrap: pretty; }

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

.section-heading {
  border-bottom: 1px solid var(--line);
  margin-bottom: 2rem;
}

.section-heading h2 {
  display: inline-block;
  margin: 0;
  padding: 1rem 2rem;
  border-left: 1px solid var(--line);
  border-right: 1px solid var(--line);
  background: var(--accent);
  font-size: 1.55rem;
}

/* "Portfolio" tab hidden so only the rule shows. The heading is still read
   out by screen readers, as the section is labelled by it.
   To bring the tab back, delete this rule. */
.portfolio .section-heading h2 {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  border: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.filters {
  display: flex;
  flex-wrap: wrap;
  gap: .8rem 1.25rem;
  margin-bottom: 2rem;
  color: var(--muted);
  font-size: .93rem;
}

.filter {
  border: 0;
  padding: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  cursor: pointer;
}

.filter:hover,
.filter.is-active {
  color: var(--ink);
  text-decoration: underline;
  text-underline-offset: .18em;
}

.grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem 5%;
  align-items: start;
  margin-bottom: 4rem;
}

.card {
  border: 1px solid var(--line);
  background: var(--card);
}

.thumb {
  display: block;
  aspect-ratio: 3 / 2;
  overflow: hidden;
  background: var(--accent);
}

.thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .25s ease;
}

.card:hover .thumb img { transform: scale(1.025); }
.card-body { padding: 1rem; }

.meta {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding-bottom: .65rem;
  border-bottom: 1px solid var(--soft-line);
  color: var(--muted);
  font-size: .78rem;
  line-height: 1.3;
}

.meta strong {
  color: var(--ink);
  font-weight: 500;
}

.meta time { white-space: nowrap; }

.card h3 {
  margin: 1rem 0 .85rem;
  font-size: 1.35rem;
}

.card p {
  margin: 0 0 .5rem;
  color: #5f5a53;
  font-size: .9rem;
  line-height: 1.5;
}

.card[hidden] { display: none; }

/* Buttons for each version of a multi-format story, in the boxed style of the
   section tabs. Equal widths, however many formats a card has. */
.card .formats {
  display: grid;
  grid-auto-columns: minmax(0, 1fr);
  grid-auto-flow: column;
  gap: .4rem;
  margin: 1rem 0 0;
  font-size: .78rem;
  line-height: 1.3;
}

.card .formats a {
  padding: .5rem .25rem;
  border: 1px solid var(--line);
  background: var(--paper);
  color: var(--ink);
  font-weight: 500;
  text-align: center;
}

.footer {
  padding: 0 0 3rem;
  text-align: center;
}

/* Too narrow for bio and experience side by side: experience moves under the bio */
@media (max-width: 1000px) {
  .profile {
    grid-template-columns: 180px minmax(0, 1fr);
    grid-template-areas:
      "portrait intro"
      "portrait about"
      "portrait experience";
  }
  .experience { margin-top: 1.75rem; }
}

@media (max-width: 900px) {
  .grid { grid-template-columns: repeat(2, 1fr); gap: 2rem 6%; }
  .profile { grid-template-columns: 150px 1fr; column-gap: 2rem; }
  .portrait img { width: 150px; }
}

@media (max-width: 620px) {
  .profile { display: block; text-align: center; padding-top: 2rem; }
  .portrait img { margin: 0 auto 1.5rem; }
  .role-line { display: block; }
  .experience { margin-top: 1.75rem; }
  .grid { grid-template-columns: 1fr; }
  .section-heading h2 { padding-inline: 1.25rem; }
}

    .group-label {
      grid-column: 1 / -1;
      font-size: 0.78rem;
      font-weight: 300;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      opacity: 0.55;
      margin: 0;
    }
    .group-label--divider {
      border-top: 1px solid currentColor;
      padding-top: 1.5rem;
      margin-top: 1rem;
      border-color: rgba(0, 0, 0, 0.15);
    }
    body.view-social .filters {
      display: none;
    }
/* ---------- Photography ---------- */

.photography .group-label--divider {
  margin-top: 0;
  /* h2 for screen-reader navigation, but styled as a group label */
  font-family: "halyard-display", sans-serif;
  font-size: .78rem;
  line-height: 1.55;
}

.photo-intro {
  max-width: 68ch;
  margin: 1.25rem 0 2rem;
  color: #5f5a53;
  font-size: .9rem;
  line-height: 1.5;
}

.photo-intro a {
  border-bottom: 1px solid currentColor;
}

.photo-strip {
  display: flex;
  gap: 4%;
  margin-bottom: 4rem;
  padding-bottom: 1.25rem;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x proximity;
  scrollbar-width: thin;
  scrollbar-color: var(--soft-line) transparent;
}

.photo-strip:focus-visible {
  outline: 1px solid var(--line);
  outline-offset: .5rem;
}

.photo-strip::-webkit-scrollbar { height: 6px; }
.photo-strip::-webkit-scrollbar-track { background: var(--accent); }
.photo-strip::-webkit-scrollbar-thumb { background: var(--soft-line); }

.photo {
  flex: 0 0 clamp(240px, 28%, 340px);
  margin: 0;
  scroll-snap-align: start;
}

.photo-frame {
  aspect-ratio: 3 / 2;
  overflow: hidden;
  border: 1px solid var(--line);
  background: var(--accent);
}

.photo-frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .25s ease;
}

.photo:hover .photo-frame img { transform: scale(1.025); }

.photo figcaption {
  margin-top: .85rem;
  padding-top: .65rem;
  border-top: 1px solid var(--soft-line);
}

.photo figcaption strong {
  display: block;
  color: var(--ink);
  font-weight: 500;
  font-size: .85rem;
  line-height: 1.35;
}

.photo figcaption span {
  display: block;
  margin-top: .3rem;
  color: var(--muted);
  font-size: .78rem;
  line-height: 1.3;
}

@media (max-width: 620px) {
  .photo { flex: 0 0 78%; }
  .photo-strip { gap: 6%; }
}

@media (prefers-reduced-motion: reduce) {
  .photo-frame img { transition: none; }
  .photo:hover .photo-frame img { transform: none; }
}

/* ---------- Video lightbox ---------- */

.video-modal {
  /* Set per media by the script; 16:9 is the fallback */
  --media-ratio: 1.7777778;
  /* Height reserved for the bar plus caption, so the sum below leaves room for them */
  --modal-chrome: 13rem;
  /* Height of the player in the two-column portrait layout */
  --stage-h: min(70vh, 640px);

  flex-direction: column;
  width: min(980px, 92vw, calc((88vh - var(--modal-chrome)) * var(--media-ratio)));
  max-height: 88vh;
  max-height: 88dvh;
  overflow: hidden;
  padding: 0;
  border: 1px solid var(--line);
  background: var(--card);
  color: var(--ink);
}

/* display goes on [open] only — setting it on .video-modal would override
   the browser's own display:none and leave the dialog on the page */
.video-modal[open] { display: flex; }

.video-modal::backdrop {
  background: rgba(42, 38, 33, 0.88);
}

.video-modal__bar {
  flex: none;
  display: flex;
  align-items: baseline;
  gap: 1rem;
  padding: 0.6rem 1rem;
  background: var(--accent);
  border-bottom: 1px solid var(--line);
  color: var(--muted);
  font-size: 0.78rem;
  line-height: 1.3;
}

.video-modal__source {
  color: var(--ink);
  font-weight: 500;
}

.video-modal__date { white-space: nowrap; }

.video-modal__close {
  margin-left: auto;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--muted);
  font: inherit;
  font-weight: 500;
  cursor: pointer;
}

.video-modal__close:hover {
  color: var(--ink);
  text-decoration: underline;
  text-underline-offset: .18em;
}

.video-modal__close:focus-visible { outline: 1px solid var(--line); outline-offset: 3px; }

/* Bar and player hold still; the caption is the part that scrolls */
.video-modal__body {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

.video-modal__stage {
  flex: none;
  display: flex;
  justify-content: center;
  aspect-ratio: var(--media-ratio);
  background: var(--ink);
}

.video-modal__stage wistia-player {
  display: block;
  width: 100%;
  height: 100%;
}

.video-modal__caption {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: var(--soft-line) transparent;
  padding: 0.9rem 1rem 1.1rem;
  border-top: 1px solid var(--soft-line);
}

.video-modal__title {
  margin: 0 0 .6rem;
  font-size: 1.6rem;
}

.video-modal__dek {
  max-width: 78ch;
  color: #5f5a53;
  font-size: .9rem;
  line-height: 1.5;
}

.video-modal__dek p { margin: 0; }
.video-modal__dek p + p { margin-top: .7rem; }
.video-modal__dek a { border-bottom: 1px solid currentColor; }

.card .thumb[data-wistia] { cursor: pointer; }

@media (max-width: 620px) {
  .video-modal { width: min(94vw, calc((84vh - var(--modal-chrome)) * var(--media-ratio))); }
  .video-modal__title { font-size: 1.25rem; }
}

@media (min-width: 760px) {
  /* A bit more room around the text on wide, landscape modals */
  .video-modal:not(.video-modal--portrait) .video-modal__caption {
    padding: 1.1rem 1.5rem 1.4rem;
  }

  /* Portrait media, wide screens: info panel left, player right */
  .video-modal.video-modal--portrait {
    width: min(92vw, calc(var(--stage-h) * var(--media-ratio) + 24rem));
  }

  .video-modal--portrait .video-modal__body {
    display: grid;
    grid-template-columns: 1fr auto;
  }

  .video-modal--portrait .video-modal__stage {
    grid-column: 2;
    grid-row: 1;
    width: calc(var(--stage-h) * var(--media-ratio));
    height: var(--stage-h);
    aspect-ratio: auto;
  }

  .video-modal--portrait .video-modal__caption {
    grid-column: 1;
    grid-row: 1;
    display: grid;
    align-content: center;
    padding: 1.5rem 1.75rem;
    border-top: 0;
    border-right: 1px solid var(--soft-line);
  }
}

/* Portrait media, narrow screens: cap the player's height and centre it,
   so the caption keeps a usable share of the screen */
@media (max-width: 759px) {
  .video-modal.video-modal--portrait { width: min(94vw, 420px); }

  .video-modal--portrait .video-modal__stage {
    height: min(52dvh, calc(94vw / var(--media-ratio)));
    aspect-ratio: auto;
  }

  .video-modal--portrait .video-modal__stage wistia-player {
    width: auto;
    max-width: 100%;
    aspect-ratio: var(--media-ratio);
  }
}

@media (prefers-reduced-motion: no-preference) {
  .video-modal[open] { animation: video-modal-in 180ms ease-out; }
  @keyframes video-modal-in {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
  }
}

/* ---------- Site header band ---------- */

/* Sticky, and slides up out of view while scrolling down (site-header.js) */
.site-header {
  position: sticky;
  top: 0;
  z-index: 20;
  padding: 1rem 0;
  border-bottom: 1px solid var(--line);
  background: var(--paper);
  transition: transform .25s ease;
}

.site-header.is-hidden { transform: translateY(-100%); }

.site-header .wrap {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.site-header__name {
  font-family: "lemonde-journal", serif;
  font-size: 1.15rem;
  font-weight: 600;
}

.site-header__role {
  padding-left: 1rem;
  border-left: 1px solid var(--soft-line);
  color: var(--muted);
  font-size: .875rem;
}

.site-header__name,
.site-header__role { transition: opacity .25s ease, visibility .25s; }

.site-header__links {
  display: flex;
  gap: .9rem;
  margin-left: auto;
}

.site-header__links a { display: block; }

/* Hand-drawn line icons, stroked to sit with the light Halyard */
.site-header__links svg {
  display: block;
  width: 22px;
  height: 22px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.3;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.site-header__links svg .fill {
  fill: currentColor;
  stroke: none;
}

/* Home page, while the big name is on screen: just the icons, scrolling
   away with the page rather than sticking */
.site-header.is-bare {
  position: relative;
  border-bottom-color: transparent;
  background: transparent;
}

.site-header.is-bare .site-header__name,
.site-header.is-bare .site-header__role {
  opacity: 0;
  visibility: hidden;
}

.site-header.no-transition,
.site-header.no-transition * { transition: none; }

@media (max-width: 480px) {
  .site-header__role { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .site-header,
  .site-header__name,
  .site-header__role { transition: none; }
}

/* ---------- Story pages ---------- */

.story {
  width: min(40rem, calc(100% - 2rem));
  margin: 3rem auto 4rem;
}

.story__title {
  margin: 0 0 1.75rem;
  font-size: clamp(1.75rem, 4.5vw, 2.5rem);
  line-height: 1.15;
}

.story figure { margin: 2rem 0; }
.story .story__lead { margin: 0 0 1.25rem; }

/* Name, then source and date, ruled off from the body like a print byline */
.story__byline {
  margin: 0 0 1.75rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--soft-line);
}

.story__byline strong,
.story__byline span { display: block; }

.story__byline strong { font-weight: 500; }

.story__byline span {
  margin-top: .15rem;
  color: var(--muted);
  font-size: .85rem;
}

.story figure img {
  width: 100%;
  height: auto;
  border: 1px solid var(--line);
}

.story figcaption {
  margin-top: .6rem;
  padding-bottom: .5rem;
  border-bottom: 1px solid var(--soft-line);
  color: #5f5a53;
  font-size: .85rem;
  line-height: 1.4;
}

.story__credit { color: var(--muted); }
.story__credit::before { content: "/ "; }

.story__body p {
  margin: 0 0 1.1em;
  line-height: 1.65;
}

/* Ruled off underneath like the photo captions */
.story .flourish-embed {
  margin: 2rem 0;
  padding-bottom: .5rem;
  border-bottom: 1px solid var(--soft-line);
}

/* Flourish adds its credit below the frame, with inline styles (hence
   !important). Where there's room, pull it up onto the right-hand end of the
   map's source line rather than giving it a line of its own. */
@media (min-width: 600px) {
  .story .flourish-credit {
    margin-top: -24px !important;
    margin-right: 0 !important;
    margin-bottom: 0 !important;
  }
}