@font-face {
  font-family: Barlow;
  src: url("assets/Barlow-ExtraLight.woff2");
  font-weight: 200;
  font-display: swap;
}

@font-face {
  font-family: Barlow;
  src: url("assets/Barlow-Light.woff2");
  font-weight: 300;
  font-display: swap;
}

@font-face {
  font-family: Mac;
  src: url("assets/mac.woff2");
  font-weight: 400;
  font-display: swap;
}

:root {
  --ivory: #fff9e9;
  --gold: #d7ba80;
  --teal: #042e34;
  --ink: #010606;
  --sine: cubic-bezier(0.37, 0, 0.63, 1);
  color-scheme: dark;
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: var(--ink);
  color: var(--ivory);
}

body {
  font-family: Barlow, Arial, sans-serif;
  font-weight: 300;
  font-size: 16px;
}

button,
a {
  font: inherit;
  color: inherit;
  -webkit-tap-highlight-color: transparent;
}

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

a {
  text-decoration: none;
}

button:focus-visible,
a:focus-visible,
summary:focus-visible {
  outline: 1px solid var(--gold);
  outline-offset: 8px;
}

[hidden] {
  display: none !important;
}

button:disabled {
  cursor: wait;
}

p {
  margin: 0;
}

button,
a {
  -webkit-user-select: none;
  user-select: none;
}

#experience {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  height: var(--viewport-height);
}

#journey-scroll {
  height: 100%;
}

.shade {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(
    180deg,
    #00121d88,
    transparent 25%,
    transparent 70%,
    #001419aa
  );
  opacity: 0.8;
  transition: opacity 1.5s;
}

header {
  position: fixed;
  top: 2.08vw;
  left: 2.08vw;
  right: 2.08vw;
  z-index: 40;
  display: flex;
  align-items: start;
  justify-content: space-between;
  pointer-events: none;
  transition: opacity 1s;
}

header a,
header button {
  pointer-events: auto;
}

.brand {
  display: flex;
  flex-direction: column;
  text-align: left;
  gap: 3px;
  transition: opacity 0.8s;
}

.brand > span {
  font:
    400 17px Mac,
    Georgia,
    serif;
  letter-spacing: 0.07em;
}

.brand small {
  font-size: 8px;
  letter-spacing: 0.22em;
}

.header-right {
  display: flex;
  gap: 30px;
}

.language-inline {
  display: none;
}

.menu-trigger {
  display: flex;
  align-items: center;
  gap: 18px;
  letter-spacing: 0.1em;
  font-size: 15px;
  font-weight: 300;
  height: 22px;
  color: #d6d4ca;
}

.menu-trigger > span {
  display: block;
  overflow: hidden;
}

.menu-trigger i {
  height: 13px;
  width: 1px;
  background: #dfd9c2;
  transition: transform 0.8s var(--sine);
}

.menu-trigger[aria-expanded="true"] i {
  transform: rotate(25deg);
}

.menu-trigger:hover {
  color: #fff;
}

.loading header {
  opacity: 0;
  pointer-events: none;
}

.loading header * {
  pointer-events: none;
}

body.menu-visible .brand {
  opacity: 0;
  pointer-events: none;
}

.opening {
  position: fixed;
  inset: 0;
  background: #000;
  z-index: 100;
  opacity: 1;
}

.entry-identity {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  white-space: nowrap;
}

.entry-identity h1 {
  margin: 0;
  font:
    300 16px/1.25 Barlow,
    sans-serif;
  letter-spacing: 0.2em;
}

.entry-identity h1 span {
  font-size: 11px;
  letter-spacing: 0.175em;
}

.diamonds {
  position: absolute;
  left: -18px;
  top: -11px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.diamonds i {
  width: 3px;
  height: 3px;
  background: #fff9e9;
  transform: rotate(45deg);
}

.loading .diamonds i {
  animation: diamond-breathe 2.8s ease-in-out infinite;
}

.diamonds i:nth-child(2) {
  animation-delay: 0.3s;
}

#enter {
  position: absolute;
  top: 60%;
  left: 50%;
  width: 85px;
  height: 85px;
  transform: translateX(-50%);
  display: grid;
  place-items: center;
  color: #fff;
  transition: opacity 0.8s;
}

#enter span {
  font-size: 10px;
  letter-spacing: 0.3em;
  margin-left: 0.3em;
}

#enter svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  fill: none;
  stroke: #fff;
  stroke-width: 0.6;
  opacity: 0.55;
  transition:
    transform 1.5s,
    opacity 1s;
}

#enter:hover svg {
  transform: rotate(120deg) scale(1.09);
  opacity: 1;
}

#enter:disabled {
  opacity: 0.2;
}

#load-status {
  position: absolute;
  top: calc(60% + 110px);
  width: 100%;
  text-align: center;
  font-size: 8px;
  letter-spacing: 0.18em;
  color: #827f73;
  transition: opacity 0.5s;
}

.entering .entry-identity {
  animation: entry-brand-out 0.9s var(--sine) both;
}

.entering #enter,
.entering #load-status {
  opacity: 0;
  pointer-events: none;
}

@keyframes diamond-breathe {
  0%,
  100% {
    opacity: 0.3;
    transform: rotate(45deg) translateY(-2px);
  }
  50% {
    opacity: 1;
    transform: rotate(135deg) translateY(2px);
  }
}

@keyframes entry-brand-out {
  to {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.96);
  }
}

.narrative {
  position: absolute;
  top: 43%;
  left: 20%;
  width: 60%;
  text-align: center;
  z-index: 3;
  opacity: 0;
  transition: opacity 1s;
  pointer-events: none;
}

.ready .narrative {
  opacity: 1;
  pointer-events: auto;
}

.narrative > p:first-child {
  font-size: 9px;
  letter-spacing: 0.22em;
  color: #f1dab0;
  margin-bottom: 20px;
  text-shadow: 0 2px 10px #000;
}

.illuminate {
  padding: 15px 0;
  width: 100%;
}

#phrase {
  font:
    200 clamp(20px, 2.3vw, 40px)/1.4 Barlow,
    sans-serif;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #fffaf0;
  text-shadow: 0 2px 12px #0008;
  display: block;
}

.word {
  display: inline-block;
  white-space: nowrap;
  margin-right: 0.32em;
}

.word:last-child {
  margin-right: 0;
}

.letter {
  display: inline-block;
  opacity: 0;
  animation: letter-in 1.3s var(--sine) forwards;
  animation-delay: calc(var(--n) * 22ms);
  transition:
    color 0.6s,
    text-shadow 0.8s;
}

.illuminate:hover .letter {
  color: #fffbe9;
  text-shadow: 0 0 calc(7px + var(--heat, 0) * 23px) #ffe8ae99;
}

.narrative > p:last-child {
  font-size: 9px;
  letter-spacing: 0.2em;
  color: #e8e1cf;
  margin-top: 26px;
  text-shadow: 0 2px 8px #000;
}

.illuminated .narrative > p:last-child {
  opacity: 0.5;
}

@keyframes letter-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

footer {
  position: fixed;
  bottom: 2.08vw;
  left: 2.08vw;
  right: 2.08vw;
  display: flex;
  align-items: center;
  justify-content: space-between;
  z-index: 40;
  pointer-events: none;
  transition: opacity 0.8s;
}

footer button {
  pointer-events: auto;
}

.edge-control {
  display: flex;
  gap: 16px;
  align-items: center;
  font-size: 14px;
  letter-spacing: 0.12em;
  min-height: 30px;
}

.scroll-line {
  display: block;
  width: 1px;
  height: 20px;
  background: #ddd2b6;
  position: relative;
}

.scroll-line:after {
  content: "";
  position: absolute;
  bottom: 0;
  left: -2px;
  width: 4px;
  height: 4px;
  border-bottom: 1px solid #ddd2b6;
  border-right: 1px solid #ddd2b6;
  transform: rotate(45deg);
}

.editorial-visible .scroll-line {
  transform: rotate(180deg);
}

.journey-controls {
  display: flex;
  gap: 12px;
  align-items: center;
}

.journey-controls button {
  font-size: 20px;
  padding: 8px;
}

.footer-date {
  font-size: 10px;
  letter-spacing: 0.15em;
}

.sound-wave {
  height: 14px;
  width: 1px;
  transform: rotate(25deg);
  background: var(--ivory);
}

.sound-wave i {
  display: none;
}

.loading footer {
  opacity: 0;
  pointer-events: none;
}

.loading footer * {
  pointer-events: none;
}

.menu-visible .narrative,
.editorial-visible .narrative,
.page-visible .narrative {
  opacity: 0 !important;
  pointer-events: none;
}

.menu-visible #scroll-next,
.menu-visible .journey-controls,
.page-visible #scroll-next,
.page-visible .journey-controls,
.editorial-visible .journey-controls {
  visibility: hidden;
}

.menu-visible .shade {
  opacity: 0;
}

.menu-overlay {
  position: fixed;
  inset: 0;
  z-index: 30;
  background: linear-gradient(180deg, #000b, transparent 35%, #0006);
  opacity: 0;
}

.menu-brand {
  position: absolute;
  left: 23%;
  top: 33%;
  font:
    300 14px/1.1 Barlow,
    sans-serif;
  letter-spacing: 0.2em;
  opacity: 0;
}

.menu-brand span {
  font-size: 10px;
  letter-spacing: 0.16em;
  opacity: 0.7;
}

.menu-overlay nav {
  position: absolute;
  left: 50%;
  bottom: 20vh;
  display: flex;
  flex-direction: column;
  width: 48%;
}

.menu-overlay nav a {
  font:
    200 5.72917vw/1.1 Barlow,
    sans-serif;
  letter-spacing: 0;
  text-transform: uppercase;
  color: #59574d;
  white-space: nowrap;
  position: relative;
  transition: color 2s cubic-bezier(0.33, 1, 0.68, 1);
  opacity: 0;
}

.menu-overlay nav a:hover,
.menu-overlay nav a[aria-current="page"] {
  color: #fff9e9;
}

.menu-overlay nav a > span {
  display: block;
}

.menu-overlay .menu-flash {
  position: absolute;
  inset: 0;
  color: #fff9e9;
  pointer-events: none;
}

.menu-flash i {
  font-style: normal;
  opacity: 0;
}

.menu-bottom {
  position: absolute;
  left: 50%;
  bottom: 2.08vw;
  opacity: 0;
}

.menu-bottom > p {
  display: none;
}

.language-switch {
  display: flex;
  gap: 22px;
  align-items: center;
  font-size: 13px;
  text-transform: uppercase;
}

.language-switch > span {
  display: none;
}

.language-switch button {
  opacity: 0.5;
  padding: 8px 0;
}

.language-switch button.selected,
.language-switch button:hover {
  opacity: 1;
}

.introduction {
  position: fixed;
  inset: 0;
  z-index: 15;
  overflow: auto;
  background: rgba(0, 5, 7, 0.96);
  overscroll-behavior: contain;
  opacity: 0;
}

#editorial-light {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  opacity: 0.8;
}

.intro-copy {
  width: 71.25vw;
  margin: 0 auto;
  padding: 22.1875vw 0 13vw;
  position: relative;
  z-index: 1;
}

.intro-copy > .eyebrow {
  display: none;
}

.illuminated-copy {
  position: relative;
  width: 60vw;
}

.illuminated-copy p {
  font:
    200 6.25vw/1.03 Barlow,
    sans-serif;
  letter-spacing: -0.025em;
  margin: 0;
  color: #8e9693;
}

.illuminated-copy p#intro-lit {
  position: absolute;
  inset: 0;
  color: #fffbe9;
  text-shadow: 0 0 14px #e6cf9344;
  mask-image: radial-gradient(
    ellipse 210px 180px at var(--lx, 50%) var(--ly, 35%),
    #000 15%,
    transparent 100%
  );
  pointer-events: none;
}

.text-link {
  display: inline-block;
  font-size: 13px;
  letter-spacing: 0.04em;
  border-bottom: 1px solid #b7a27477;
  padding: 12px 0;
  margin-top: 45px;
  transition:
    color 0.5s,
    border-color 0.5s;
}

.text-link:hover {
  color: var(--gold);
  border-color: var(--gold);
}

.editorial-bottom {
  display: flex;
  justify-content: space-between;
  padding-top: 16vh;
  font-size: 12px;
  color: #b8b3a4;
}

.editorial-bottom > span {
  font-size: 9px;
  letter-spacing: 0.15em;
}

.content-panel {
  position: fixed;
  inset: 0;
  z-index: 20;
  overflow: auto;
  overscroll-behavior: contain;
  background: #010606;
  opacity: 0;
  scroll-behavior: smooth;
}

.page-content {
  width: 71.25vw;
  margin: auto;
  padding: 13vw 0 9vw;
}

.eyebrow {
  font-size: 10px;
  letter-spacing: 0.18em;
  color: #bdab86;
  margin-bottom: 28px;
}

.page-heading {
  font:
    400 clamp(40px, 5.8vw, 110px)/1.06 Mac,
    Georgia,
    serif;
  letter-spacing: -0.025em;
  margin: 0 0 7vw;
}

.about-intro {
  display: grid;
  grid-template-columns: 30% 1fr;
  gap: 9%;
  margin-bottom: 12vw;
}

.about-intro img {
  width: 100%;
  height: auto;
  align-self: start;
}

.page-content p:not(.eyebrow) {
  font:
    300 19px/1.6 Barlow,
    sans-serif;
  color: #b5bdb8;
  margin-bottom: 24px;
}

.page-content .lead {
  font-size: clamp(25px, 2.3vw, 40px) !important;
  line-height: 1.35 !important;
  color: #e4e5dc !important;
}

.patronage {
  display: grid;
  grid-template-columns: 38% 1fr;
  column-gap: 6%;
  padding: 50px 0;
  border-top: 1px solid #fff2;
}

.patronage .eyebrow {
  grid-column: 1/-1;
}

.patronage h3 {
  font:
    200 4vw/1.1 Barlow,
    sans-serif;
  margin: 0;
}

.invitation-meta {
  display: flex;
  gap: 40px;
  border-top: 1px solid #fff2;
  padding: 22px 0;
  font-size: 12px;
  letter-spacing: 0.14em;
}

.invitation-note {
  width: 75%;
  margin: 35px 0 0 auto;
}

.invitation-email {
  font-size: clamp(14px, 1.5vw, 23px);
  color: var(--gold);
  border-bottom: 1px solid #a0895d;
  padding: 20px 0;
  display: inline-block;
  overflow-wrap: anywhere;
  max-width: 100%;
}

.invitation-email span {
  margin-left: 15px;
}

.invitation-content > .text-link {
  margin-top: 90px;
}

.page-visible .shade {
  opacity: 0;
}

#cursor-light {
  position: fixed;
  z-index: 60;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: #f5e8c4;
  box-shadow: 0 0 10px #fff0c977;
  transform: translate(-50%, -50%);
  pointer-events: none;
  opacity: 0;
  transition:
    opacity 0.4s,
    width 0.4s,
    height 0.4s;
}

.cursor-on:not(.loading) #cursor-light {
  opacity: 0.8;
}

.illuminated #cursor-light {
  width: 9px;
  height: 9px;
}

.menu-visible #cursor-light {
  opacity: 0;
}

#transition-curtain {
  position: fixed;
  inset: 0;
  background: #000;
  opacity: 0;
  z-index: 25;
  pointer-events: none;
}

@media (max-width: 849px) {
  header {
    top: 25px;
    left: 6.6667vw;
    right: 6.6667vw;
  }

  .brand > span {
    font-size: 14px;
  }

  .brand small {
    font-size: 7px;
  }

  .menu-trigger {
    font-size: 14px;
  }

  .narrative {
    top: 42%;
    left: 10%;
    width: 80%;
  }

  #phrase {
    font-size: 21px;
    line-height: 1.5;
    letter-spacing: 0.13em;
  }

  .narrative > p:first-child {
    font-size: 8px;
    letter-spacing: 0.14em;
    margin-bottom: 14px;
  }

  .narrative > p:last-child {
    font-size: 8px;
    margin-top: 20px;
  }

  footer {
    bottom: 22px;
    left: 6.6667vw;
    right: 6.6667vw;
  }

  .edge-control {
    font-size: 13px;
  }

  .footer-date {
    font-size: 9px;
  }

  .menu-brand {
    top: 35px;
    left: 10.4vw;
    font-size: 16px;
  }

  .menu-brand span {
    font-size: 10px;
  }

  .menu-brand .diamonds {
    left: -16px;
    top: -10px;
  }

  .menu-overlay nav {
    top: 50.7%;
    bottom: auto;
    left: 6.66667vw;
    width: 86.66667vw;
  }

  .menu-overlay nav a {
    font-size: 13.33333vw;
    line-height: 1.1;
  }

  .menu-bottom {
    left: 6.6667vw;
    bottom: 22px;
  }

  .language-switch {
    font-size: 12px;
    gap: 22px;
  }

  .intro-copy {
    width: 78.66667vw;
    padding: 40vw 0 55vw;
  }

  .illuminated-copy {
    width: 100%;
  }

  .illuminated-copy p {
    font-size: 9.33333vw;
    line-height: 1.05;
  }

  .intro-copy .text-link {
    margin-top: 35px;
  }

  .editorial-bottom {
    padding-top: 18vh;
    display: flex;
    gap: 25px;
    flex-direction: column;
  }

  .page-content {
    width: 86.66667vw;
    padding: 125px 0 85px;
  }

  .page-heading {
    font-size: 11vw;
    margin-bottom: 60px;
  }

  .about-intro {
    grid-template-columns: 1fr;
    gap: 35px;
    margin-bottom: 75px;
  }

  .about-intro img {
    width: 52%;
    order: 2;
  }

  .page-content p:not(.eyebrow) {
    font-size: 18px;
  }

  .page-content .lead {
    font-size: 27px !important;
  }

  .patronage {
    display: block;
  }

  .patronage h3 {
    font-size: 11vw;
    margin-bottom: 35px;
  }

  .invitation-meta {
    font-size: 10px;
    gap: 25px;
  }

  .invitation-note {
    width: 100%;
    margin-top: 32px;
  }

  .invitation-email {
    font-size: 14px;
  }

  .invitation-content > .text-link {
    margin-top: 55px;
  }

  #cursor-light {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *:before,
  *:after {
    animation-duration: 1ms !important;
    animation-delay: 0ms !important;
    transition-duration: 1ms !important;
  }

  #intro-lit {
    mask-image: none;
  }

  .letter {
    opacity: 1;
  }

  #editorial-light {
    opacity: 0.3;
  }
}
/* Legibility over bright water without an opaque panel over the scene. */
#phrase {
  text-shadow:
    0 2px 3px #001014,
    0 0 18px #001014b0;
}

.narrative > p:first-child,
.narrative > p:last-child {
  text-shadow:
    0 1px 3px #001014,
    0 0 12px #001014;
}

@media (max-width: 849px) {
  #phrase {
    font-size: 25px;
    max-width: 335px;
    margin: auto;
    line-height: 1.42;
  }

  .narrative {
    top: 39%;
  }
}

.menu-overlay {
  background: linear-gradient(
    180deg,
    #000e 0%,
    #0009 42%,
    #000b 76%,
    #000f 100%
  );
}

.illuminated-copy p {
  color: #59625d;
}

#about-title {
  font-family: Barlow, sans-serif;
  font-weight: 200;
  font-size: 6.25vw;
  line-height: 1.04;
  max-width: 64vw;
  color: #bac2ba;
  letter-spacing: -0.025em;
}

#about .eyebrow:first-child {
  display: none;
}

@media (max-width: 849px) {
  #about-title {
    font-size: 10.4vw;
    max-width: none;
    line-height: 1.02;
  }

  #about .page-content {
    padding-top: 125px;
  }
}

.menu-visible .content-panel {
  opacity: 0 !important;
  pointer-events: none;
}

.content-panel,
.introduction {
  transition: opacity 0.8s var(--sine);
}

.introduction {
  background: #010505;
}
/* Teal and warm gold entry, with the event name treated as the main identity. */
.opening {
  background:
    radial-gradient(ellipse at 22% 25%, #23616b66, transparent 62%),
    radial-gradient(ellipse at 80% 80%, #ac854b28, transparent 52%),
    linear-gradient(145deg, #103f49, #06272e 65%, #133b3b);
}

.opening:before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(ellipse at 65% 15%, #e6c69012, transparent 55%);
  animation: entry-atmosphere 12s ease-in-out infinite alternate;
}

.entry-identity {
  top: 44%;
  width: min(700px, 88vw);
  white-space: normal;
  text-align: center;
}

.entry-identity h1 {
  font-family: Mac, Georgia, serif;
  font-size: clamp(36px, 4.4vw, 70px);
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: #fff4db;
  font-weight: 400;
}

.entry-identity h1 span {
  font-family: Mac, Georgia, serif;
  font-size: 1em;
  letter-spacing: -0.025em;
}

.entry-identity .diamonds {
  left: 50%;
  top: -49px;
  transform: translateX(-50%);
  gap: 8px;
  align-items: center;
}

.entry-identity .diamonds i {
  width: 4px;
  height: 4px;
  background: #e8c88b;
}

#enter {
  top: 64%;
  color: #fff3d8;
}

#enter svg {
  stroke: #e5c593;
  opacity: 0.75;
}

#load-status {
  top: calc(64% + 108px);
  color: #cdc2a5;
}

@keyframes entry-atmosphere {
  to {
    opacity: 0.3;
    transform: translateY(3%);
  }
}
/* A route is committed while covered: its transition never exposes Home. */
#transition-curtain {
  z-index: 35;
  background: #010606;
}

.routing .narrative,
.routing .journey-controls,
.routing #scroll-next {
  opacity: 0 !important;
  pointer-events: none !important;
}
/* Work-style image composition: quiet captions, offset photographs, short copy. */
.invitation-content {
  width: 86.6667vw;
  max-width: 1700px;
  padding: 10vw 0 10vw;
}

.work-page-label {
  font:
    300 14px/1.3 Barlow,
    sans-serif;
  letter-spacing: 0.08em;
  margin: 0 0 7vw;
  color: #d6d6ca;
}

.invitation-gallery {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 9vw;
  align-items: start;
}

.invitation-view {
  margin: 0;
  min-width: 0;
}

.invitation-view-golf {
  margin-top: 6vw;
}

.invitation-image {
  overflow: hidden;
  background: #0b2226;
}

.invitation-image img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition:
    transform 1.7s cubic-bezier(0.22, 0.61, 0.36, 1),
    filter 1.3s;
  filter: brightness(0.78) saturate(0.8);
}

.invitation-view-golf .invitation-image {
  aspect-ratio: 1.17;
}

.invitation-view-sea .invitation-image {
  aspect-ratio: 1.1;
}

.invitation-view:hover img {
  transform: scale(1.035);
  filter: brightness(0.95) saturate(0.95);
}

.invitation-view figcaption {
  font:
    300 13px/1.4 Barlow,
    sans-serif;
  letter-spacing: 0.045em;
  margin-top: 19px;
  color: #a9b0a8;
}

.invitation-contact {
  margin-top: 6vw;
}

.invitation-contact p {
  font:
    300 20px/1.55 Barlow,
    sans-serif !important;
  margin-bottom: 25px;
  color: #c1c8bf !important;
}

.invitation-contact p + p {
  font-size: 16px !important;
  color: #9fa99f !important;
}

.invitation-contact .invitation-email {
  font:
    300 clamp(13px, 1.15vw, 18px)/1.5 Barlow,
    sans-serif;
  color: #d9c59b;
  border-bottom: 1px solid #796d504d;
  padding: 0 0 9px;
  display: inline;
  overflow-wrap: anywhere;
}

@media (max-width: 849px) {
  .entry-identity {
    top: 43%;
  }

  .entry-identity h1 {
    font-size: clamp(34px, 8.8vw, 55px);
  }

  .entry-identity .diamonds {
    top: -42px;
  }

  .invitation-content {
    padding-top: 135px;
    padding-bottom: 110px;
    width: 86.6667vw;
  }

  .work-page-label {
    font-size: 13px;
    margin-bottom: 55px;
  }

  .invitation-gallery {
    grid-template-columns: 1fr;
    gap: 65px;
  }

  .invitation-view-golf {
    margin: 0;
    width: 91%;
  }

  .invitation-side {
    width: 82%;
    margin-left: auto;
  }

  .invitation-view-sea .invitation-image {
    aspect-ratio: 1.25;
  }

  .invitation-view figcaption {
    font-size: 12px;
    margin-top: 15px;
  }

  .invitation-contact {
    margin-top: 55px;
  }

  .invitation-contact p {
    font-size: 21px !important;
  }

  .invitation-contact .invitation-email {
    font-size: 14px;
  }
}

.entry-identity .diamonds i {
  animation: entry-diamond 2.8s ease-in-out infinite;
}

.entry-identity .diamonds i:nth-child(2) {
  animation-delay: 0.3s;
}

@keyframes entry-diamond {
  0%,
  100% {
    opacity: 0.45;
    transform: rotate(45deg);
  }
  50% {
    opacity: 1;
    transform: rotate(135deg);
  }
}

.content-panel:focus,
.introduction:focus {
  outline: none;
}

.page-visible header:before {
  content: "";
  position: fixed;
  inset: 0 0 auto;
  height: 100px;
  background: linear-gradient(#010606 25%, #010606dd 60%, transparent);
  z-index: -1;
  pointer-events: none;
}
/* Follow the visible browser viewport as mobile toolbars expand or retract. */
:root {
  --viewport-height: 100vh;
}

@supports (height: 100dvh) {
  :root {
    --viewport-height: 100dvh;
  }
}

#experience,
.opening,
.menu-overlay,
.content-panel,
.introduction,
#transition-curtain {
  top: 0;
  bottom: auto;
  height: var(--viewport-height);
  max-height: none;
}

header {
  top: max(2.08vw, env(safe-area-inset-top, 0px));
  left: max(2.08vw, calc(env(safe-area-inset-left, 0px) + 12px));
  right: max(2.08vw, calc(env(safe-area-inset-right, 0px) + 12px));
}

footer {
  bottom: calc(2.08vw + env(safe-area-inset-bottom, 0px));
}

.menu-bottom {
  bottom: calc(2.08vw + env(safe-area-inset-bottom, 0px));
}

@media (max-width: 849px) {
  header {
    top: max(25px, calc(env(safe-area-inset-top, 0px) + 12px));
    left: max(6.6667vw, calc(env(safe-area-inset-left, 0px) + 12px));
    right: max(6.6667vw, calc(env(safe-area-inset-right, 0px) + 12px));
  }

  footer {
    bottom: calc(22px + env(safe-area-inset-bottom, 0px));
    left: max(6.6667vw, calc(env(safe-area-inset-left, 0px) + 12px));
    right: max(6.6667vw, calc(env(safe-area-inset-right, 0px) + 12px));
  }

  .menu-bottom {
    bottom: calc(22px + env(safe-area-inset-bottom, 0px));
  }

  .menu-brand {
    top: max(35px, calc(env(safe-area-inset-top, 0px) + 22px));
  }
}
/* The document paints through Safari's floating chrome; controls use the safe viewport. */
html {
  background: #073b42;
  overflow-x: hidden;
  overflow-y: auto;
  min-height: 100%;
  height: auto;
}

body {
  background: #073b42;
  overflow: visible;
  min-height: 100vh;
  height: auto;
}

@supports (height: 100lvh) {
  html,
  body {
    min-height: 100lvh;
  }
}

#journey-scroll {
  height: var(--viewport-height);
}

#experience,
.opening {
  position: absolute;
  height: 100vh;
  min-height: var(--viewport-height);
}

@supports (height: 100lvh) {
  #experience,
  .opening {
    height: 100lvh;
  }
}

.opening {
  overflow: visible;
}

.opening:after {
  content: none;
}

.entry-identity {
  top: calc(var(--viewport-height) * 0.43);
  z-index: 2;
}

#enter {
  top: calc(var(--viewport-height) * 0.64);
  z-index: 2;
}

#load-status {
  top: calc(var(--viewport-height) * 0.64 + 108px);
}

.entering .entry-identity {
  animation: none;
}

.entry-identity .diamonds {
  width: 10px;
  height: 30px;
  top: -70px;
  gap: 14px;
  transform-origin: 50% 50%;
  animation: diamonds-orbit 4.4s cubic-bezier(0.65, 0, 0.35, 1) infinite;
}

.entry-identity .diamonds i {
  width: 6px;
  height: 6px;
  flex: 0 0 6px;
  animation: diamond-expand 4.4s cubic-bezier(0.65, 0, 0.35, 1) infinite !important;
}

.entry-identity .diamonds i:nth-child(2) {
  animation-name: diamond-contract !important;
  animation-delay: 0s;
}

@keyframes diamonds-orbit {
  0%,
  23% {
    transform: translateX(-50%) rotate(0deg);
  }
  50%,
  73% {
    transform: translateX(-50%) rotate(180deg);
  }
  100% {
    transform: translateX(-50%) rotate(360deg);
  }
}

@keyframes diamond-expand {
  0%,
  100% {
    transform: translateY(-12px) rotate(45deg) scale(0.7);
    opacity: 0.65;
  }
  23%,
  73% {
    transform: translateY(0) rotate(45deg) scale(1.3);
    opacity: 1;
  }
  50% {
    transform: translateY(-12px) rotate(45deg) scale(0.7);
    opacity: 0.65;
  }
}

@keyframes diamond-contract {
  0%,
  100% {
    transform: translateY(12px) rotate(45deg) scale(1.3);
    opacity: 1;
  }
  23%,
  73% {
    transform: translateY(0) rotate(45deg) scale(0.7);
    opacity: 0.65;
  }
  50% {
    transform: translateY(12px) rotate(45deg) scale(1.3);
    opacity: 1;
  }
}

.entry-char {
  font: inherit !important;
  letter-spacing: inherit !important;
}

.entering header,
.entering footer,
.entering .narrative {
  opacity: 0 !important;
  pointer-events: none;
}

.content-panel {
  position: relative;
  inset: auto;
  height: auto !important;
  min-height: 100lvh;
  overflow: visible;
  overscroll-behavior: auto;
  background:
    radial-gradient(ellipse at 90% 10%, #24595788, transparent 65%),
    linear-gradient(130deg, #073d48, #052f36 55%, #143d38);
}

body.page-visible #journey-scroll {
  height: 0;
}

body.page-visible #experience {
  visibility: hidden;
}

body.page-visible header {
  position: fixed;
  transform: none;
  z-index: 80;
}

.page-visible header:before {
  background: linear-gradient(#073b42 10%, #073b42ee 55%, #073b4200);
  height: 115px;
}

.page-heading,
#about-title {
  color: #fff4df;
}

.page-content p:not(.eyebrow),
.invitation-contact p {
  color: #e3e5d7 !important;
}

.page-content .eyebrow,
.work-page-label,
.invitation-view figcaption {
  color: #d7ba80;
}

.invitation-contact p + p {
  color: #d1d9cd !important;
}

.introduction {
  background: radial-gradient(ellipse at 65% 30%, #16505a, #062f38 75%);
}

.illuminated-copy p {
  color: #91aaa7;
}

#transition-curtain {
  background: #073b42;
}

body:not(.keyboard-navigation) button:focus,
body:not(.keyboard-navigation) a:focus {
  outline: none;
}

.keyboard-navigation #illuminate:focus-visible {
  outline: none;
  text-shadow: 0 0 16px #d7ba8099;
}

#intro-lit {
  -webkit-mask-image: radial-gradient(
    ellipse 210px 180px at var(--lx, 50%) var(--ly, 35%),
    #000 15%,
    transparent 100%
  );
}

@media (prefers-reduced-motion: reduce) {
  .entry-identity .diamonds,
  .entry-identity .diamonds i {
    animation: none !important;
  }
}
/* v9: a single scene-space entrance thread and document-backed mobile pages. */
html,
body {
  background-color: var(--chrome-color, #052e34);
}

html {
  color-scheme: normal;
}

body {
  background-image: none;
}

.entering .opening {
  background: transparent;
}

.entering .opening::before,
.entering .opening::after {
  opacity: 0;
  transition: opacity 1s;
}

.entering #load-status {
  visibility: hidden;
}

.opening {
  transition: background-color 1s;
}

.introduction {
  position: relative;
  inset: auto;
  min-height: 100lvh;
  height: auto;
  overflow: visible;
  overscroll-behavior: auto;
  background: #073b42;
}

.editorial-visible #journey-scroll {
  height: 0;
}

.editorial-visible #experience {
  position: fixed;
}

.editorial-visible header {
  position: fixed;
  z-index: 80;
  transform: none;
}

#editorial-light {
  height: 100lvh;
}

.illuminated-copy p {
  color: #406369;
}

.illuminated-copy p#intro-lit {
  color: #fff4db;
}

.entry-identity .diamonds {
  width: 14px;
  height: 14px;
  gap: 0;
  animation: reference-orbit 2.2s infinite;
}

.entry-identity .diamonds i {
  position: absolute;
  left: 3px;
  top: 3px;
  width: 8px;
  height: 8px;
  animation: reference-top 2.2s infinite !important;
}

.entry-identity .diamonds i:nth-child(2) {
  animation: reference-bottom 2.2s infinite !important;
}

@keyframes reference-orbit {
  0%,
  45.45% {
    transform: translateX(-50%) rotate(0deg);
    animation-timing-function: cubic-bezier(0.76, 0, 0.24, 1);
  }
  100% {
    transform: translateX(-50%) rotate(180deg);
  }
}

@keyframes reference-top {
  0% {
    transform: translateY(-25px) rotate(45deg) scale(0.7);
    animation-timing-function: cubic-bezier(0.65, 0, 0.35, 1);
  }
  45.45% {
    transform: translateY(0) rotate(45deg) scale(1.1);
    animation-timing-function: cubic-bezier(0.76, 0, 0.24, 1);
  }
  100% {
    transform: translateY(-25px) rotate(45deg) scale(0.7);
  }
}

@keyframes reference-bottom {
  0% {
    transform: translateY(25px) rotate(45deg) scale(1.1);
    animation-timing-function: cubic-bezier(0.65, 0, 0.35, 1);
  }
  45.45% {
    transform: translateY(0) rotate(45deg) scale(0.7);
    animation-timing-function: cubic-bezier(0.76, 0, 0.24, 1);
  }
  100% {
    transform: translateY(25px) rotate(45deg) scale(1.1);
  }
}

@media (prefers-reduced-motion: reduce) {
  .entry-identity .diamonds,
  .entry-identity .diamonds i {
    animation: none !important;
  }
}
/* The page itself supplies the colour behind Safari's translucent controls. */
html,
body {
  margin: 0;
  min-width: 0;
}

body:not(.page-visible):not(.editorial-visible) {
  height: 100svh;
  min-height: 100svh;
}

body:not(.page-visible):not(.editorial-visible) #journey-scroll {
  height: 100svh;
}

.opening {
  background-image: radial-gradient(ellipse at 25% 35%, #124a53, #052e34 80%);
}

.entering .opening {
  background-image: none;
}

.entry-identity h1 .entry-char {
  display: inline;
}

.opening,
.entering .opening {
  background: transparent;
}

.opening::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: radial-gradient(ellipse at 25% 35%, #124a53, #052e34 80%);
  opacity: 1;
  transition: opacity 1.2s cubic-bezier(0.37, 0, 0.63, 1);
}

.entering .opening::after {
  opacity: 0;
}

.opening #enter,
.opening #load-status {
  z-index: 2;
}

body.editorial-present #journey-scroll {
  height: 0 !important;
}

body.editorial-present #experience {
  position: fixed;
}
/* Cinematic video background. */
#monaco-film {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100lvh;
  min-height: var(--viewport-height);
  object-fit: cover;
  object-position: 50% 50%;
  display: block;
  background: #052e34;
  opacity: 0;
  transition:
    opacity 1.6s cubic-bezier(0.37, 0, 0.63, 1),
    filter 1.5s;
}

.ready #monaco-film {
  opacity: 1;
}

.menu-visible #monaco-film {
  filter: brightness(0.35);
}

@media (prefers-reduced-motion: reduce) {
  #monaco-film {
    transition: none;
  }
}

#sound-open[aria-pressed="false"] {
  opacity: 0.55;
}

#sound-open[aria-pressed="true"] {
  opacity: 1;
}
/* v13 — deep blue, the original embroidered crest, and stable reading surfaces. */
:root {
  --ink: #031f2b;
  --teal: #031f2b;
  --gold: #d7b878;
}

html,
body {
  background-color: var(--chrome-color, #031f2b);
  overscroll-behavior-y: none;
}

.opening::after {
  background: radial-gradient(ellipse at 45% 25%, #0b3440, #031f2b 75%);
}

.entry-identity {
  top: calc(var(--viewport-height) * 0.4);
  width: min(760px, 90vw);
}

.entry-crest {
  display: block;
  width: clamp(145px, 22vh, 210px);
  height: auto;
  margin: 0 auto 24px;
  object-fit: contain;
  border: 1px solid #d7b87870;
  border-radius: 5px;
  box-shadow:
    0 0 0 5px #d7b8780c,
    0 14px 48px #0005;
}

.entry-identity h1 {
  font-size: clamp(32px, 4.1vw, 60px);
  line-height: 1.13;
}

.entry-year {
  font:
    400 12px/1 Barlow,
    sans-serif;
  letter-spacing: 0.4em;
  color: #d7b878;
  margin: 20px 0 0 0.4em;
}

.entry-identity .diamonds {
  top: -42px;
}

.assets-loaded .entry-identity .diamonds,
.assets-loaded .entry-identity .diamonds i {
  animation-play-state: paused !important;
}

.opening #enter {
  top: calc(var(--viewport-height) * 0.72);
  width: 80px;
  height: 80px;
}

.opening #load-status {
  top: calc(var(--viewport-height) * 0.72 + 85px);
  font-size: 9px;
}

.ready #monaco-film {
  opacity: 0;
}

.film-revealed #monaco-film {
  opacity: 1;
}

.entering .opening::after {
  transition-delay: 1s;
  transition-duration: 1.5s;
}

.editorial-settled #monaco-film,
.editorial-settled .shade {
  visibility: hidden;
}

.introduction,
.content-panel {
  background: #031f2b;
}

.introduction {
  isolation: isolate;
  min-height: 100lvh;
  padding-bottom: env(safe-area-inset-bottom, 0px);
}

.intro-copy {
  padding-top: clamp(160px, 28vh, 300px);
  padding-bottom: 100px;
}

.illuminated-copy p {
  color: #60787c;
}

.illuminated-copy p#intro-lit {
  color: #ffe3a3;
  text-shadow: 0 0 20px #eac27370;
}

.editorial-bottom {
  border-top: 1px solid #d7b87845;
  margin-top: 100px;
  padding-top: 32px;
  color: #d7b878;
}

.editorial-bottom a {
  color: #efd69f;
}

.brand {
  flex-direction: row;
  align-items: center;
  gap: 12px;
}

.brand-crest {
  width: 48px;
  height: auto;
  border: 1px solid #d7b87866;
  border-radius: 3px;
}

.brand .brand-wordmark {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.brand .brand-wordmark > span {
  font:
    500 19px/1 Mac,
    Georgia,
    serif;
  letter-spacing: 0.045em;
  color: #fff7e4;
  text-shadow: 0 1px 10px #0008;
  -webkit-text-stroke: 0.15px currentColor;
}

.brand .brand-wordmark small {
  font:
    400 9px/1 Barlow,
    sans-serif;
  letter-spacing: 0.19em;
  color: #e8cf99;
}

.page-visible header:before {
  background: linear-gradient(#031f2b 10%, #031f2bee 55%, #031f2b00);
}

.editorial-visible header:before {
  content: "";
  position: fixed;
  inset: 0 0 auto;
  height: 105px;
  z-index: -1;
  background: linear-gradient(#031f2b 15%, #031f2b00);
  pointer-events: none;
}

#transition-curtain {
  background: #031f2b;
}

.page-content {
  padding-top: 130px;
}

.page-identity {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 21px;
  margin: 0 auto 65px;
}

.page-identity img {
  display: block;
  width: 170px;
  height: auto;
  border: 1px solid #d7b87888;
  border-radius: 4px;
  box-shadow: 0 0 0 6px #d7b87808;
}

.page-identity > span {
  color: #d7b878;
  font:
    400 11px/1 Barlow,
    sans-serif;
  letter-spacing: 0.36em;
}

.page-identity:after {
  content: "";
  width: 65px;
  height: 1px;
  background: linear-gradient(90deg, transparent, #d7b878, transparent);
}

.page-content .eyebrow,
.work-page-label {
  color: #d7b878;
}

.page-heading {
  border-top: 1px solid #d7b87840;
  padding-top: 34px;
}

.about-intro {
  display: block;
  max-width: 850px;
  margin-bottom: 90px;
}

.patronage {
  border-top-color: #d7b87855;
}

.patronage h3 {
  color: #edd39b;
}

.invitation-image {
  border: 1px solid #d7b87855;
}

.text-link,
.invitation-email {
  border-color: #d7b87899;
  color: #efd69f;
}

.menu-overlay {
  background: radial-gradient(ellipse at 30% 40%, #0b303b, #031820 75%);
}

.menu-flash {
  color: #f4d995;
}

@media (max-width: 600px) {
  .brand {
    gap: 9px;
  }

  .brand-crest {
    width: 38px;
  }

  .brand .brand-wordmark > span {
    font-size: 15px;
    letter-spacing: 0.02em;
  }

  .brand .brand-wordmark small {
    font-size: 8px;
    letter-spacing: 0.13em;
  }

  .menu-trigger {
    font-size: 13px;
    gap: 12px;
  }

  .entry-identity {
    top: calc(var(--viewport-height) * 0.4);
  }

  .entry-crest {
    width: clamp(138px, 21vh, 185px);
    margin-bottom: 23px;
  }

  .entry-identity h1 {
    font-size: clamp(30px, 8.4vw, 42px);
  }

  .entry-year {
    margin-top: 17px;
  }

  .intro-copy {
    padding-top: 170px;
    padding-bottom: 95px;
  }

  .page-content {
    padding-top: 125px;
  }

  .page-identity {
    margin-bottom: 45px;
  }

  .page-identity img {
    width: 145px;
  }

  .editorial-bottom {
    margin-top: 70px;
    gap: 22px;
  }
}

@media (max-height: 650px) {
  .entry-crest {
    width: 110px;
    margin-bottom: 15px;
  }

  .entry-identity h1 {
    font-size: 32px;
  }

  .entry-year {
    margin-top: 13px;
  }

  .entry-identity .diamonds {
    top: -28px;
  }

  .opening #enter {
    top: 70vh;
    width: 65px;
    height: 65px;
  }

  .opening #load-status {
    top: calc(70vh + 68px);
  }
}

.page-visible footer,
.menu-visible footer {
  visibility: hidden;
  pointer-events: none;
}

.editorial-visible footer {
  background: linear-gradient(transparent, #031f2bee);
  padding-top: 18px;
}

.page-heading {
  border-top-color: #d7b87870;
}
/* Video-only composition: a fixed scene and a separate bounded reading surface. */
html:has(body:not(.page-visible)),
body:not(.page-visible) {
  height: var(--viewport-height);
  min-height: 0;
  overflow: hidden;
  overscroll-behavior: none;
}

body:not(.page-visible) #journey-scroll,
body.editorial-present #journey-scroll {
  height: var(--viewport-height) !important;
}

#experience {
  position: fixed;
  inset: 0;
  height: var(--viewport-height);
  min-height: 0;
  overflow: hidden;
}

#monaco-film {
  height: 100%;
  min-height: 0;
  transition: opacity 2.6s var(--sine);
}

body.editorial-settled #experience {
  visibility: hidden;
}

body header,
body.page-visible header,
body.editorial-visible header {
  top: 0;
  left: 0;
  right: 0;
  height: calc(70px + env(safe-area-inset-top, 0px));
  padding: calc(10px + env(safe-area-inset-top, 0px))
    max(22px, env(safe-area-inset-right, 0px)) 10px
    max(22px, env(safe-area-inset-left, 0px));
  align-items: center;
}

body header:before {
  top: 0;
  height: 100%;
  background: linear-gradient(#031f2b, #031f2bea 65%, #031f2b00);
}

body.page-visible header,
body.editorial-visible header {
  background: #031f2b;
}

.header-right {
  align-items: center;
}

.menu-trigger {
  min-height: 44px;
}

body .introduction {
  position: fixed;
  inset: 0;
  width: 100%;
  height: var(--viewport-height);
  min-height: 0;
  max-height: var(--viewport-height);
  overflow: hidden;
  overscroll-behavior: none;
  padding: 0;
  background: #031f2b;
  isolation: isolate;
  transition: none;
  scroll-behavior: auto;
  overflow-anchor: none;
}

body .introduction.scroll-enabled {
  overflow-y: auto;
}

#editorial-light {
  position: fixed;
  inset: 0;
  height: var(--viewport-height);
  z-index: 0;
  mask-image: linear-gradient(
    transparent 2%,
    #000 18%,
    #000 65%,
    transparent 98%
  );
}

.intro-copy {
  min-height: var(--viewport-height);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: clamp(150px, 22vh, 240px) 0 70px;
  transform-origin: 50% 0;
}

.intro-copy > .text-link {
  flex-shrink: 0;
}

.editorial-bottom {
  width: 100%;
  margin-top: 80px;
  padding: 28px 0 0;
  align-items: center;
  gap: 24px;
  background: transparent;
}

.editorial-bottom button {
  font-size: 13px;
  color: #b3b8ab;
  letter-spacing: 0.05em;
  padding: 12px 0;
  text-align: left;
  transition: color 0.7s;
}

.editorial-bottom button:hover {
  color: #ffe3a3;
}

body.editorial-visible footer,
body.editorial-present footer {
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
  background: none;
}

body.editorial-visible footer *,
body.editorial-present footer * {
  pointer-events: none;
}

body .opening,
body.entering .opening {
  position: fixed;
  height: var(--viewport-height);
  min-height: 0;
  background: transparent;
}

body .opening::after,
body.entering .opening::after {
  opacity: 1;
  transition: none;
}

body .opening::before {
  display: none;
}

body .entry-identity {
  top: 43%;
}

body .entry-identity .diamonds {
  top: -37px;
  left: calc(50% - 20px);
  width: 40px;
  height: 14px;
  transform: rotate(0deg);
  animation: none !important;
  transform-origin: 20px 7px;
}

body .entry-identity .diamonds i {
  top: 4px;
  left: 9px;
  width: 6px;
  height: 6px;
  opacity: 1;
  background: #dfc38a;
  transform: rotate(45deg);
  animation: none !important;
  box-shadow: 0 0 8px #e2bb6240;
}

body .entry-identity .diamonds i:nth-child(2) {
  left: 25px;
  animation: none !important;
}

body:not(.assets-loaded) .entry-identity .diamonds {
  animation: loader-orbit 2.8s ease-in-out infinite !important;
}

body:not(.assets-loaded) .entry-identity .diamonds i {
  animation: loader-breathe 2.8s ease-in-out infinite !important;
}

body:not(.assets-loaded) .entry-identity .diamonds i:nth-child(2) {
  animation-delay: -1.4s !important;
}

@keyframes loader-orbit {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

@keyframes loader-breathe {
  0%,
  100% {
    transform: rotate(45deg) scale(0.7);
    opacity: 0.55;
  }
  50% {
    transform: rotate(45deg) scale(1.3);
    opacity: 1;
  }
}

body .opening #enter {
  top: 73%;
  width: 92px;
  height: 92px;
  border-radius: 50%;
  transition:
    color 1s,
    box-shadow 1.2s,
    background-color 1.2s;
}

#enter::before {
  content: "";
  position: absolute;
  inset: -13px;
  border-radius: 50%;
  background: radial-gradient(circle, #e4bc6525, transparent 72%);
  opacity: 0;
  transform: scale(0.85);
  transition:
    opacity 1.2s,
    transform 1.5s var(--sine);
}

body #enter svg {
  stroke: #e4c588;
  opacity: 0.65;
  transition:
    transform 1.5s var(--sine),
    opacity 1.2s,
    filter 1.2s;
}

body #enter:not(:disabled):hover,
body #enter:not(:disabled):focus-visible {
  background-color: #d7b8780c;
  box-shadow: inset 0 0 24px #e4c5880a;
  color: #fff5d8;
}

body #enter:not(:disabled):hover::before,
body #enter:not(:disabled):focus-visible::before {
  opacity: 1;
  transform: scale(1.12);
}

body #enter:not(:disabled):hover svg,
body #enter:not(:disabled):focus-visible svg {
  opacity: 1;
  transform: scale(1.09);
  filter: drop-shadow(0 0 5px #d7b87880);
}

body.entering #enter {
  pointer-events: none;
}

@media (max-width: 600px) {
  body header,
  body.page-visible header,
  body.editorial-visible header {
    height: calc(62px + env(safe-area-inset-top, 0px));
    padding: calc(7px + env(safe-area-inset-top, 0px)) 16px 7px;
  }

  .intro-copy {
    padding-top: 130px;
    padding-bottom: calc(36px + env(safe-area-inset-bottom, 0px));
  }

  .editorial-bottom {
    margin-top: 64px;
    align-items: flex-start;
    flex-wrap: wrap;
    gap: 12px 24px;
  }

  body .entry-identity {
    top: 42%;
  }

  body .opening #enter {
    top: 73%;
    width: 86px;
    height: 86px;
  }
}

@media (max-height: 600px) {
  body .entry-identity {
    top: 40%;
  }

  body .entry-identity .diamonds {
    top: -24px;
  }

  body .opening #enter {
    top: 77%;
    width: 66px;
    height: 66px;
  }
}

@media (prefers-reduced-motion: reduce) {
  body:not(.assets-loaded) .entry-identity .diamonds,
  body:not(.assets-loaded) .entry-identity .diamonds i {
    animation: none !important;
  }
}

/* Optical alignment keeps the embroidered shield, title and dots on one axis. */
.crest-frame {
  display: block;
  overflow: hidden;
  border: 1px solid #d7b87870;
  border-radius: 5px;
  box-shadow:
    0 0 0 5px #d7b8780c,
    0 14px 48px #0003;
  flex-shrink: 0;
}
.entry-crest-frame {
  width: clamp(145px, 22vh, 210px);
  margin: 0 auto 24px;
}
.brand-crest-frame {
  width: 48px;
  border-radius: 3px;
  box-shadow: none;
}
.page-identity .page-crest-frame {
  width: 170px;
}
.crest-frame > img {
  display: block;
  width: 105%;
  max-width: none;
  height: auto;
  margin: 0 0 0 -5%;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  object-fit: contain;
}
.brand .brand-wordmark > span {
  font-weight: 400;
  -webkit-text-stroke: 0;
}
.brand .brand-wordmark .brand-edition {
  display: flex;
  align-items: center;
  gap: 0.6em;
  font:
    300 11px/1.25 Barlow,
    Arial,
    sans-serif;
  letter-spacing: 0.16em;
  white-space: nowrap;
}
.brand .brand-edition .brand-dot {
  font:
    300 16px/0 Barlow,
    Arial,
    sans-serif;
  letter-spacing: 0;
  color: #e8cf99;
}
#entry-light {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  pointer-events: none;
}
.opening {
  touch-action: manipulation;
}
/* Header tint follows the same timeline as the reading surface, with no hard bar. */
body header,
body.editorial-visible header,
body.page-visible header {
  background: transparent;
}
body header:before,
body.editorial-visible header:before,
body.page-visible header:before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 125%;
  z-index: -1;
  pointer-events: none;
  background: linear-gradient(#031f2bf2, #031f2bc9 45%, #031f2b00);
  opacity: var(--header-veil, 0);
  transition: none;
}
.menu-letter {
  font: inherit;
  font-style: normal;
  white-space: pre;
}
/* Paint the media across the large viewport; controls stay within the visible area. */
html:has(body:not(.page-visible)),
body:not(.page-visible) {
  min-height: 100lvh;
}
#experience {
  height: 100lvh;
  min-height: var(--viewport-height);
}
#monaco-film {
  height: 100%;
}
@media (max-width: 600px) {
  .entry-crest-frame {
    width: clamp(138px, 21vh, 185px);
    margin-bottom: 23px;
  }
  .brand-crest-frame {
    width: 38px;
  }
  .page-identity .page-crest-frame {
    width: 145px;
  }
  .brand .brand-wordmark .brand-edition {
    font-size: 10px;
    gap: 0.5em;
    letter-spacing: 0.11em;
  }
}
@media (max-height: 650px) {
  .entry-crest-frame {
    width: 110px;
    margin-bottom: 15px;
  }
}

/* Requested typography: bold dates in the identity, fine video controls. */
.entry-identity .entry-year {
  font-weight: 700;
}
.brand .brand-wordmark .brand-edition {
  font-weight: 700;
  gap: 0.65em;
}
.brand-dot {
  display: none;
}
/* Equal columns and fixed icon geometry prevent play/pause layout movement. */
footer {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  gap: 12px;
}
footer #scroll-next {
  justify-self: start;
}
footer #sound-open {
  justify-self: end;
}
footer .journey-controls {
  justify-self: center;
  gap: 10px;
}
footer button,
footer .edge-control,
footer .footer-date {
  font-weight: 200;
  -webkit-text-stroke: 0;
  font-synthesis: none;
}
footer #play {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  padding: 0;
  flex: 0 0 40px;
}
#play-symbol {
  display: block;
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1;
  stroke-linecap: round;
  stroke-linejoin: round;
}
#play .play-icon {
  opacity: 1;
}
#play .pause-icon {
  opacity: 0;
}
#play.is-playing .play-icon {
  opacity: 0;
}
#play.is-playing .pause-icon {
  opacity: 1;
}
footer .footer-date {
  width: 32px;
  font-variant-numeric: tabular-nums;
}

/* Safari extends document content beneath its floating controls. A full-screen
   fixed layer instead requests a solid obscured-inset background from WebKit.
   Keep the film in the document, with controls in the visible viewport area. */
html:has(body:not(.page-visible)),
body:not(.page-visible) {
  height: auto;
  min-height: 100lvh;
  overflow: visible;
}
html:has(body:not(.page-visible)) {
  overflow-x: clip;
  overflow-y: auto;
}
body:not(.page-visible) #journey-scroll,
body.editorial-present #journey-scroll {
  height: 100lvh !important;
}
body #experience,
body.editorial-visible #experience {
  position: absolute;
  top: 0;
  bottom: auto;
  height: 100lvh;
  min-height: var(--viewport-height);
}
body .opening,
body.entering .opening {
  position: absolute;
  height: 100%;
}
body .entry-identity {
  top: calc(var(--viewport-height) * 0.43);
}
body header,
body.page-visible header,
body.editorial-visible header {
  position: absolute;
  top: 0;
}
body footer {
  position: absolute;
  top: calc(var(--viewport-height) - 66px - env(safe-area-inset-bottom, 0px));
  bottom: auto;
  height: 44px;
}
body .introduction,
#editorial-light {
  position: absolute;
}
/* One shared identity stays in place. There is no second logo to cross-fade. */
body.menu-covering header {
  position: absolute;
  top: var(--menu-top, 0px);
  z-index: 80;
}
body.menu-covering header::before {
  opacity: 0;
}
body.menu-visible .brand,
body.menu-covering .brand {
  opacity: 1;
  visibility: visible;
  transition: none;
}
body.menu-covering footer {
  visibility: hidden;
  pointer-events: none;
}
body .menu-overlay {
  position: absolute;
  top: var(--menu-top, 0px);
  height: 100lvh;
  min-height: var(--viewport-height);
}
/* Menu content remains within the unobscured viewport, independently of its paint. */
.menu-overlay nav {
  bottom: auto;
  top: calc(var(--viewport-height) * 0.4);
}
.menu-bottom {
  top: calc(var(--viewport-height) - 82px - env(safe-area-inset-bottom, 0px));
  bottom: auto;
}
@media (max-width: 849px) {
  .menu-overlay nav {
    top: calc(var(--viewport-height) * 0.507);
  }
}

/* Once revealed, the description uses the same document scrolling as the pages.
   Its background continues behind Safari's floating toolbar instead of ending
   at a clipped, inner viewport. The first gesture is still consumed in JS. */
body.editorial-settled #journey-scroll {
  height: 0 !important;
}
body.editorial-settled .introduction {
  position: relative;
  inset: auto;
  height: auto;
  max-height: none;
  min-height: 100lvh;
  overflow: visible;
}
body.editorial-settled .introduction.scroll-enabled {
  overflow: visible;
}
body.editorial-settled #experience {
  display: none;
}
body.editorial-settled #editorial-light {
  height: var(--viewport-height);
}
#invitation .page-crest-frame {
  width: clamp(210px, 24vw, 290px);
}
@media (min-width: 850px) {
  .entry-identity .entry-year {
    font-size: clamp(22px, 2vw, 30px);
    margin-top: 25px;
  }
}

/* Pre-rendered entrance threads: only transform/opacity animate. */
.entry-ribbons {
  position: absolute;
  inset: 0;
  z-index: 1;
  overflow: hidden;
  pointer-events: none;
  -webkit-mask-image: radial-gradient(
    ellipse 39% 39% at 50% 44%,
    transparent 30%,
    #0003 65%,
    #000 100%
  );
  mask-image: radial-gradient(
    ellipse 39% 39% at 50% 44%,
    transparent 30%,
    #0003 65%,
    #000 100%
  );
  animation: entry-ribbon-arrive 2.4s ease-out both;
}
.entry-ribbons canvas {
  position: absolute;
  left: -10%;
  top: -10%;
  width: 120%;
  height: 120%;
  will-change: transform, opacity;
  transform-origin: 50% 50%;
  animation: entry-ribbon-left 28s ease-in-out infinite alternate;
}
.entry-ribbons canvas:nth-child(2) {
  animation-name: entry-ribbon-right;
  animation-duration: 34s;
  animation-delay: -9s;
}
.entry-ribbons canvas:nth-child(3) {
  animation-name: entry-ribbon-low;
  animation-duration: 38s;
  animation-delay: -14s;
}
@keyframes entry-ribbon-arrive {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes entry-ribbon-left {
  from {
    transform: translate3d(-2%, 2%, 0) rotate(-5deg) scale(1.01);
    opacity: 0.7;
  }
  to {
    transform: translate3d(3%, -3%, 0) rotate(7deg) scale(1.06);
    opacity: 1;
  }
}
@keyframes entry-ribbon-right {
  from {
    transform: translate3d(2%, -2%, 0) rotate(5deg) scale(1.04);
    opacity: 1;
  }
  to {
    transform: translate3d(-3%, 3%, 0) rotate(-7deg) scale(1);
    opacity: 0.75;
  }
}
@keyframes entry-ribbon-low {
  from {
    transform: translate3d(-3%, 2%, 0) rotate(-3deg) scale(1.02);
    opacity: 0.65;
  }
  to {
    transform: translate3d(3%, -3%, 0) rotate(4deg) scale(1.07);
    opacity: 0.9;
  }
}
@media (prefers-reduced-motion: reduce) {
  .entry-ribbons,
  .entry-ribbons canvas {
    animation: none;
    will-change: auto;
  }
}

/* Clearer film identity and discreet, legible controls over bright footage. */
#phrase {
  font-weight: 400;
  letter-spacing: 0.09em;
  text-shadow: none;
  filter: drop-shadow(0 2px 3px #00121dcc) drop-shadow(0 0 12px #00121d70);
}
#phrase .letter {
  color: #f7efdb;
  background: linear-gradient(160deg, #fff9e9 12%, #f1e6c9 47%, #d7b878 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
footer button,
footer .edge-control,
footer .footer-date,
#menu-open {
  color: #fff5dc;
  font-weight: 400;
  text-shadow:
    0 1px 4px #00121dcc,
    0 0 12px #00121d88;
}
#menu-open i,
footer .scroll-line,
footer .sound-wave {
  filter: drop-shadow(0 1px 3px #00121dbb);
}
#play-symbol {
  stroke-width: 1.6;
  filter: drop-shadow(0 1px 3px #00121dbb);
}
@media (hover: none), (max-width: 849px) {
  .illuminated-copy p#intro-text {
    color: #526b73;
  }
  .illuminated-copy p#intro-lit {
    color: #ffedc1;
    text-shadow: 0 0 18px #eac27370;
  }
}

@media (hover: none), (max-width: 849px) {
  #editorial-light {
    opacity: 0.9;
  }
  .illuminated-copy p#intro-lit {
    color: #fff0c9;
    text-shadow: 0 0 15px #e8be6150;
  }
}
@media (prefers-reduced-motion: reduce) {
  .illuminated-copy p#intro-text {
    color: #b6c2bf;
  }
}

/* Let all four strands occupy the page, including its outer and lower areas. */
@media (hover: none), (max-width: 849px) {
  #editorial-light {
    opacity: 0.95;
    mask-image: none;
    -webkit-mask-image: none;
  }
}

/* Keep the writing legible as the quiet ribbon passes behind it. */
@media (hover: none), (max-width: 849px) {
  #editorial-light {
    opacity: 0.58;
  }
  .illuminated-copy p#intro-text {
    color: #405861;
  }
  .illuminated-copy p#intro-lit {
    color: #f6e7c6;
    text-shadow: none;
  }
}

/* The decorative mobile layer is held by the compositor, not scroll handlers.
   The page itself keeps normal document scrolling and its full Safari backdrop. */
@media (hover: none), (max-width: 849px) {
  body #editorial-light,
  body.editorial-settled #editorial-light {
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100lvh;
    transform: none !important;
    pointer-events: none;
  }
}

/* iPhone Chrome: pin only immersive controls to the visible viewport. Content
   page headers still scroll with their pages; Safari's layout is untouched. */
html.chrome-ios body:not(.page-visible):not(.editorial-settled) header,
html.chrome-ios body.menu-covering header {
  position: fixed;
  top: var(--chrome-visible-top, 0px);
}
html.chrome-ios body .menu-overlay {
  position: fixed;
  top: var(--chrome-visible-top, 0px);
}
html.chrome-ios body:not(.page-visible):not(.editorial-settled) footer {
  position: fixed;
  top: calc(
    var(--chrome-visible-top, 0px) + var(--viewport-height) - 66px -
      env(safe-area-inset-bottom, 0px)
  );
}
@media (max-width: 849px) and (max-height: 500px) {
  .menu-overlay nav a {
    font-size: clamp(26px, 9vh, 44px);
    line-height: 1.15;
  }
}
/* Clear separation between the unlit copy and the ivory light passing over it. */
.illuminated-copy p#intro-text {
  color: #405861;
}
@media (prefers-reduced-motion: reduce) {
  .illuminated-copy p#intro-text {
    color: #b6c2bf;
  }
}