/* The editorial type stays; colour, depth and image treatment carry the identity. */
:root {
  --paper: #faf7f0;
  --ink: #142c32;
  --muted: #515d5c;
  --accent: #b83d29;
  --line: #d6d4c9;
  --midnight: #102f39;
  --gold: #edc18a;
}

.header { border-bottom: 0; height: 100px; }
.brand-name, .desktop-nav, .contact-nav { font-size: 13px; }
.brand-mark > span { color: var(--accent); }
.contact-nav { border: 1px solid var(--ink); padding: 9px 16px; border-radius: 3px; transition: background .2s, color .2s; }
.contact-nav:hover { background: var(--ink); color: var(--paper); }
.hero {
  background: var(--midnight);
  color: var(--paper);
  border-radius: 8px;
  padding: 31px 42px 0;
  overflow: hidden;
  box-shadow: 0 20px 45px -35px #102f3966;
}
.hero-kicker { margin-bottom: 30px; }
.hero .eyebrow { color: #f4d6a8; }
.hero .dot { background: #f08a62; }
.hero .edition { color: #c1d0d0; }
.hero h1 { font-size: clamp(80px, 8.6vw, 130px); }
.hero .name-dot { color: #ee8b64; }
.hero-role { font-size: 16px; color: #fff9eb; }
.hero-intro { color: #c7d4d4; font-size: 15px; }
.hero-actions { flex-wrap: wrap; gap: 20px; }
.hero .button.solid { background: #c44b31; color: #fffaf1; border-radius: 3px; padding: 15px 19px; font-size: 12px; }
.hero .button.solid:hover { background: #de6243; }
.hero .quiet-link { color: #e9eae1; font-size: 11px; }
.hero-photo { height: 495px; border-radius: 5px; background: #25516a; }
.hero-photo > img { filter: none; border-radius: 5px; }
.hero-photo::after { border-radius: 5px; }
.hero-photo figcaption { color: #c7d4d4; }
.hero-bottom { color: #c3cecd; border-color: #ffffff29; padding-bottom: 25px; margin-top: 45px; }
.hero-bottom a:hover { color: #f7ba8b; }
.section-aside { color: var(--muted); }
.section-heading > p { font-size: 15px; }
.section-num { font-size: 11px; }
.section-top .eyebrow { font-size: 11px; }
.project-visual { border-radius: 6px; }
.eklips-visual { background: #b83d29; color: #fff8ec; }
.eklips-logo { text-shadow: 0 7px 20px #60210e22; }
.eklips-line { border-color: #ffdfb95c; width: 340px; height: 340px; }
.eklips-line::after { border-color: #ffdfb938; inset: 32px; }
.eklips-visual::after { content: ''; position: absolute; width: 400px; height: 400px; border: 75px solid #f3834930; border-radius: 50%; bottom: -270px; right: -130px; }
.project:hover .eklips-line { width: 370px; height: 370px; }
.library-visual { background: #133c51; color: #fff8e8; }
.library-visual::after { content: ''; position: absolute; width: 330px; height: 330px; border-radius: 50%; background: #236481; right: -180px; top: -190px; }
.book-symbol { opacity: .8; }
.book-symbol i { border-color: #f2cd94; }
.sound-lines { color: #f2cd94; }
.library-title { position: relative; z-index: 1; }
.project-info h3 { font-size: 21px; }
.project-info p { font-size: 12px; }
.project-info .circle-arrow { border-color: #a4b2ac; }
.project-type { font-size: 12px; }
.more-projects > a { padding-block: 23px; }
.about { background: #14313d; color: #fff8eb; }
.about h2 em, .about .section-num, .about .tiny-star { color: #efc08b; }
.about .about-copy > p:not(.lead) { color: #c9d6d9; font-size: 14px; }
.about .about-copy .lead { font-size: 24px; }
.about .facts { border-color: #ffffff30; }
.about .facts strong { color: #f2d3a3; }
.about .facts span { color: #d2dcdc; font-size: 10px; }
.about .underlined { border-color: #d8dace; color: #fff8eb; font-size: 12px; }
.about .underlined:hover { color: #efc08b; border-color: #efc08b; }
.photography { padding-bottom: 70px; }
.photography .section-heading { margin-bottom: 12px; }

/* The original fan of overlapping photographs. */
.playing-deck {
  position: relative;
  height: 610px;
  margin-top: 10px;
  isolation: isolate;
  perspective: 1400px;
}
.playing-card {
  --x: 0px;
  --y: 0px;
  --r: 0deg;
  position: absolute;
  top: 50%;
  left: 50%;
  width: 320px;
  height: 470px;
  border: 1px solid #ffffff66;
  border-radius: 6px;
  overflow: hidden;
  background: var(--midnight);
  color: #fff8ec;
  box-shadow: 0 22px 45px #0c232b40, 0 4px 12px #0c232b26;
  transform: translate(-50%, -50%) translate(var(--x), var(--y)) rotate(var(--r));
  transform-origin: 50% 100%;
  transition: transform 260ms ease, box-shadow 260ms ease, filter 220ms ease, opacity 220ms ease;
}
.playing-card::after {
  content: '';
  position: absolute;
  z-index: 1;
  inset: auto 0 0;
  height: 45%;
  pointer-events: none;
  background: linear-gradient(to top, #071b24ed, #071b2473 46%, transparent);
}
.playing-card:nth-child(1) { --x: -165px; --y: 30px; --r: -15deg; z-index: 1; }
.playing-card:nth-child(2) { --x: -58px; --y: 3px; --r: -6deg; z-index: 2; }
.playing-card:nth-child(3) { --x: 58px; --y: 3px; --r: 6deg; z-index: 3; }
.playing-card:nth-child(4) { --x: 165px; --y: 30px; --r: 15deg; z-index: 4; }
.playing-card:hover, .playing-card:focus-visible {
  z-index: 20;
  box-shadow: 0 35px 65px #0b283b55;
  transform: translate(-50%, -50%) translate(var(--x), calc(var(--y) - 65px)) rotate(0deg) scale(1.04);
}
.playing-card:focus-visible { outline: 3px solid var(--accent); outline-offset: 5px; }
@media (hover: hover) and (pointer: fine) {
  .playing-deck:has(.playing-card:hover) .playing-card:not(:hover) { opacity: .68; filter: brightness(.8); }
}
.playing-deck:has(.playing-card:focus-visible) .playing-card:not(:focus-visible) { opacity: .68; }
.card-photo { position: absolute; inset: 0; display: block; overflow: hidden; }
.card-photo img { transition: transform 320ms ease; }
.playing-card:nth-child(1) .card-photo img { object-position: center 52%; }
.playing-card:nth-child(2) .card-photo img { object-position: center 58%; }
.playing-card:hover .card-photo img, .playing-card:focus-visible .card-photo img { transform: scale(1.035); }
.card-info { position: absolute; z-index: 2; left: 0; right: 0; bottom: 0; padding: 42px 22px 20px; display: flex; flex-direction: column; justify-content: flex-end; }
.card-info strong { display: block; font-family: var(--serif); font-weight: 500; font-size: 28px; line-height: 1.25; letter-spacing: -.5px; }
.card-info small { display: block; margin-top: 7px; color: #e2e9e7; font-size: 10px; }
.photo-footer { border-top: 1px solid var(--line); padding-top: 20px; font-size: 12px; margin-top: 5px; }
.books { background: #edc697; }
.books h2 em { color: #91321f; }
.books .books-copy > p:not(.eyebrow) { color: #4d4b40; font-size: 14px; }
.books-footnote { color: #575144; }
.book img { box-shadow: 5px 10px 15px #5b2f2633, 20px 25px 40px #5b2f2626; }
.book > span { font-size: 11px; }
.ny-section > img { filter: none; }
.ny-shade { background: linear-gradient(90deg, #071d2de0, #071d2d40), linear-gradient(0deg, #071d2da6, transparent 70%); }
.ny-content h2 em { color: #f4c793; }
.coach-photo > img { filter: none; }
.coach-photo { border-radius: 5px; overflow: hidden; }
.engagement-intro { font-size: 14px; }
.engagement-item h3 { font-size: 17px; }
.engagement-item p { font-size: 13px; }
.contact { background: #102f39; }
.contact h2 em, .contact .section-num { color: #edc18a; }
.contact .section-top > span, .contact .social-links { color: #d5dfdf; }
.email { font-size: 22px; }
.footer { font-size: 11px; }
.more-projects > a { grid-template-columns: 1fr 200px 28px; }

@media (min-width: 1600px) { .hero-photo { height: 550px; } }
@media (max-width: 1100px) {
  .hero { padding-inline: 30px; }
  .hero-grid { gap: 25px; }
  .hero h1 { font-size: 95px; }
  .hero-photo { height: 470px; }
  .hero-role { font-size: 14px; }
  .hero-intro { font-size: 14px; }
  .hero .quiet-link { font-size: 10px; }
  .hero .button.solid { font-size: 11px; }
  .playing-deck { height: 560px; }
  .playing-card { width: 280px; height: 420px; }
  .playing-card:nth-child(1) { --x: -132px; }
  .playing-card:nth-child(2) { --x: -46px; }
  .playing-card:nth-child(3) { --x: 46px; }
  .playing-card:nth-child(4) { --x: 132px; }
}
@media (max-width: 760px) {
  .header { height: 78px; }
  .hero { padding: 25px 22px 0; border-radius: 5px; }
  .hero h1 { font-size: clamp(66px, 15.5vw, 110px); letter-spacing: -4px; }
  .hero-role { font-size: 13px; margin-top: 24px; }
  .hero-intro { font-size: 13px; }
  .hero-kicker { gap: 12px; }
  .hero-kicker .edition { max-width: 105px; font-size: 6px; }
  .hero-kicker .eyebrow { font-size: 7px; gap: 6px; }
  .hero-actions { gap: 18px; }
  .hero .button.solid { padding: 13px 15px; gap: 20px; }
  .hero .quiet-link { font-size: 10px; }
  .hero-photo { height: 360px; }
  .hero-bottom { margin-top: 29px; gap: 16px; padding-bottom: 22px; }
  .hero-bottom > span { font-size: 6px; }
  .hero-bottom > div { font-size: 9px; }
  .section-top .eyebrow, .section-num { font-size: 9px; }
  .section-heading > p { font-size: 13px; }
  .project-info h3 { font-size: 19px; }
  .more-projects > a { grid-template-columns: 23px 1fr 102px 18px; gap: 8px; padding-block: 20px; }
  .project-type { font-size: 10px; }
  .about .about-copy .lead { font-size: 22px; }
  .about .about-copy > p:not(.lead) { font-size: 13px; }
  .about .facts span { font-size: 9px; }
  .photography { overflow: hidden; padding-bottom: 50px; }
  .playing-deck { height: 440px; }
  .playing-card { top: 52%; width: 220px; height: 330px; }
  .playing-card:nth-child(1) { --x: -62px; --y: 18px; --r: -10deg; }
  .playing-card:nth-child(2) { --x: -22px; --y: 2px; --r: -4deg; }
  .playing-card:nth-child(3) { --x: 22px; --y: 2px; --r: 4deg; }
  .playing-card:nth-child(4) { --x: 62px; --y: 18px; --r: 10deg; }
  .playing-card:hover, .playing-card:focus-visible { transform: translate(-50%, -50%) translate(var(--x), calc(var(--y) - 46px)) rotate(0deg) scale(1.025); }
  .card-info { padding: 34px 16px 15px; }
  .card-info strong { font-size: 23px; }
  .card-info small { font-size: 9px; }
  .photo-footer { font-size: 10px; }
  .books .books-copy > p:not(.eyebrow), .engagement-intro { font-size: 13px; }
  .book > span { font-size: 9px; }
  .engagement-item p { font-size: 12px; }
  .email { font-size: 18px; }
  .footer { font-size: 10px; }
  .more-projects > a { grid-template-columns: 1fr 102px 18px; }
}
@media (max-width: 360px) {
  .hero { padding-inline: 18px; }
  .hero h1 { font-size: 64px; }
  .playing-card { width: 195px; height: 305px; }
  .playing-card:nth-child(1) { --x: -49px; }
  .playing-card:nth-child(4) { --x: 49px; }
}

/* Full-width photographic opening, with navigation on the same canvas. */
.header {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: calc(100% - 112px);
  max-width: 1280px;
  margin: 0;
  color: #fffaf0;
  border-bottom: 1px solid #ffffff24;
}
.header .brand-mark { font-size: 48px; }
.header .brand-mark > span { color: #efb18b; }
.header .languages button { color: #c9d4d7; }
.header .languages button[aria-pressed=true] { color: #ffffff; }
.header .languages > span { color: #8ca4ac; }
.header .contact-nav { border-color: #ffffff73; }
.header .contact-nav:hover { color: #102f39; background: #fff8e9; }
.header .desktop-nav a:hover { color: #f1c28e; }
.hero {
  position: relative;
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 0;
  border-radius: 0;
  box-shadow: none;
  isolation: isolate;
}
.hero-background { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 48%; z-index: -2; }
.hero-gradient {
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(90deg, #071f30f5 0%, #082d3be8 27%, #0b3043b3 50%, #1535474a 78%, #071d3240 100%), linear-gradient(0deg, #071c2be8 0%, transparent 36%, #071d3270 100%);
}
.hero-content { min-height: 780px; height: 100svh; max-height: 980px; padding-top: 148px; display: flex; flex-direction: column; }
.hero .hero-kicker { margin-bottom: 24px; }
.hero .hero-grid { grid-template-columns: minmax(0, 740px); flex: 1; padding-bottom: 25px; }
.hero .hero-copy { padding: 0; }
.hero h1 { font-size: clamp(96px, 10vw, 152px); line-height: 1; letter-spacing: -6px; }
.hero .hero-role { font-size: 17px; margin-top: 28px; }
.hero .hero-intro { font-size: 16px; max-width: 430px; line-height: 1.8; color: #dae3e5; }
.hero .hero-actions { margin-top: 26px; gap: 30px; }
.hero .hero-bottom { margin-top: 10px; padding-top: 20px; padding-bottom: 28px; border-top: 1px solid #ffffff30; border-bottom: 0; }
.hero .quiet-link { font-size: 12px; }
.hero .hero-bottom > div { font-size: 12px; }

/* Original book composition, on the current warm background. */
.books-layout { display: grid; grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr); align-items: center; gap: 80px; }
.books-copy h2 { font-size: clamp(38px, 4.1vw, 60px); margin: 30px 0 25px; max-width: 620px; }
.books .books-copy > p:not(.eyebrow) { max-width: 560px; line-height: 1.9; }
.books .books-copy .book-authors { margin-top: 24px; }
.book-authors > span { display: block; text-transform: uppercase; font-size: 9px; letter-spacing: 1.5px; color: #64533d; }
.book-authors strong { display: block; font-size: 15px; font-weight: 550; line-height: 1.7; color: var(--ink); margin-top: 6px; }
.book-authors strong > span { color: #98502c; padding-inline: 4px; }
.book-links { margin-top: 30px; display: flex; flex-wrap: wrap; gap: 16px 28px; }
.book-links a { display: inline-flex; align-items: center; gap: 24px; padding-bottom: 7px; border-bottom: 1px solid #6f4d31a6; font-size: 13px; font-weight: 500; }
.book-links a:hover { color: #91321f; border-color: #91321f; }
.book-covers { min-height: 460px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: center; gap: 26px; perspective: 1100px; }
.book-covers a {
  --book-y: 0px;
  --book-tilt: 0deg;
  --book-turn: 0deg;
  display: block;
  position: relative;
  overflow: hidden;
  border: 1px solid #6a442a33;
  border-radius: 5px;
  background: #112b3c;
  box-shadow: 0 24px 50px #663a2c4d;
  transform: translateY(var(--book-y)) rotate(var(--book-tilt));
  transform-style: preserve-3d;
  transition: transform 360ms cubic-bezier(.2,.8,.2,1), box-shadow 360ms ease;
}
.book-covers a:first-child { --book-y: -18px; --book-tilt: -1.4deg; --book-turn: 5deg; }
.book-covers a:last-child { --book-y: 18px; --book-tilt: 1.4deg; --book-turn: -5deg; }
.book-covers a:hover, .book-covers a:focus-visible { z-index: 2; box-shadow: 0 32px 62px #663a2c66; transform: translateY(calc(var(--book-y) - 16px)) rotate(0deg) rotateY(var(--book-turn)) scale(1.035); }
.book-covers a::after { content: ''; position: absolute; inset: -45%; pointer-events: none; background: linear-gradient(112deg, transparent 42%, #ffffff3d 50%, transparent 58%); transform: translateX(-72%); transition: transform 620ms ease; }
.book-covers a:hover::after, .book-covers a:focus-visible::after { transform: translateX(72%); }
.book-covers img { width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; transition: transform 420ms ease; }
.book-covers a:hover img, .book-covers a:focus-visible img { transform: scale(1.025); }
.contact h2 { font-size: clamp(48px, 6.9vw, 100px); letter-spacing: -3px; }

@media (max-width: 1100px) {
  .header { width: calc(100% - 72px); }
  .hero-content { min-height: 760px; padding-top: 140px; }
  .hero .hero-grid { gap: 0; }
  .hero h1 { font-size: 110px; }
  .books-layout { gap: 45px; }
  .book-covers { min-height: 400px; gap: 22px; }
  .book-authors strong { font-size: 14px; }
}
@media (max-width: 760px) {
  .header { width: calc(100% - 40px); height: 84px; margin: 0; }
  .header .menu-toggle > span { background: #fff8ed; }
  .header .mobile-menu { top: 83px; color: var(--ink); }
  .header .brand-mark { font-size: 43px; }
  .hero { padding: 0; border-radius: 0; }
  .hero-content { min-height: 740px; padding-top: 123px; height: 100svh; max-height: 1000px; }
  .hero .hero-kicker { margin-bottom: 20px; }
  .hero .hero-kicker .eyebrow { font-size: 9px; gap: 9px; }
  .hero-gradient { background: linear-gradient(90deg, #071f30ed, #0b3043c2 55%, #15354777), linear-gradient(0deg, #071c2bf0, transparent 45%); }
  .hero-background { object-position: 59% center; }
  .hero h1 { font-size: clamp(78px, 17.8vw, 128px); letter-spacing: -4px; }
  .hero .hero-role { font-size: 14px; margin-top: 25px; }
  .hero .hero-intro { font-size: 14px; max-width: 350px; margin-top: 14px; }
  .hero .hero-actions { gap: 21px; margin-top: 25px; }
  .hero .quiet-link { font-size: 10px; }
  .hero .hero-bottom { padding-top: 20px; padding-bottom: 24px; margin-top: 12px; gap: 20px; }
  .hero .hero-bottom > span { font-size: 7px; }
  .hero .hero-bottom > div { font-size: 10px; }
  .books-layout { grid-template-columns: 1fr; gap: 35px; }
  .books-copy h2 { font-size: 42px; }
  .book-authors strong { font-size: 14px; }
  .book-covers { width: 100%; max-width: 480px; min-height: 330px; margin: 0 auto; gap: 20px; }
  .book-links { margin-top: 25px; }
  .book-links a { font-size: 12px; }
  .contact-heading { display: grid; grid-template-columns: minmax(0, 1fr) 44px; gap: 14px; align-items: center; }
  .contact h2 { font-size: clamp(32px, 8.3vw, 54px); letter-spacing: -1.1px; line-height: 1.25; }
  .contact .big-arrow { font-size: 48px; }
}
@media (max-width: 360px) {
  .hero h1 { font-size: 76px; }
  .hero .hero-role { font-size: 12px; }
  .hero .hero-intro { font-size: 13px; }
  .hero .hero-actions { gap: 15px; }
  .hero .quiet-link { font-size: 9px; }
  .book-covers { min-height: 280px; }
  .books-copy h2 { font-size: 36px; }
}

/* Community and sport: the photograph becomes the section's full-width backdrop. */
.engagement {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: var(--paper);
  color: var(--ink);
}
.engagement-background {
  position: absolute;
  inset: 0;
  width: 58%;
  height: 100%;
  object-fit: cover;
  object-position: 74% 24%;
  z-index: -2;
}
.engagement-gradient {
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(90deg, #faf7f000 0%, #faf7f000 32%, #faf7f02e 41%, #faf7f0f5 51%, var(--paper) 58%);
}
.engagement .section-top { width: 50%; margin-left: auto; }
.engagement .section-num, .engagement h2 em { color: var(--accent); }
.engagement-copy { width: 50%; max-width: 650px; margin-left: auto; }
.engagement h2 { font-size: clamp(36px, 3.6vw, 52px); }
.engagement .engagement-intro { color: var(--muted); max-width: 445px; margin-top: 24px; margin-bottom: 30px; }
.engagement .engagement-item { border-color: var(--line); max-width: 470px; }
.engagement .engagement-item > span { color: var(--accent); }
.engagement .engagement-item h3 { color: var(--ink); }
.engagement .engagement-item p { color: var(--muted); max-width: 375px; }
.engagement-caption { width: 50%; margin-left: auto; margin-top: 28px; text-align: left; font-size: 11px; color: var(--muted); letter-spacing: .5px; }
@media (max-width: 1100px) {
  .engagement-copy, .engagement .section-top, .engagement-caption { width: 53%; }
  .engagement h2 { font-size: 39px; }
  .engagement-gradient { background: linear-gradient(90deg, #faf7f000 0%, #faf7f01a 18%, #faf7f0cc 40%, var(--paper) 54%); }
}
@media (max-width: 760px) {
  .engagement { padding-top: 310px; padding-bottom: 50px; }
  .engagement-background { width: 100%; height: 350px; object-position: center 23%; }
  .engagement-gradient { background: linear-gradient(180deg, #faf7f000 0px, #faf7f000 160px, #faf7f0a6 260px, var(--paper) 340px); }
  .engagement-copy, .engagement .section-top, .engagement-caption { width: 100%; max-width: 520px; margin-left: 0; }
  .engagement h2 { font-size: clamp(34px, 7.8vw, 48px); letter-spacing: -1.4px; }
  .engagement .engagement-intro { max-width: 400px; }
  .engagement-caption { margin-top: 25px; font-size: 10px; text-align: left; }
}