/* 65 Events. Built on the 65 Events brand book (Volume I): Night, Frankincense, Radiance Gold, Tyrian, Deep Sea, Coral as jewel only.
   Cormorant Garamond for display, Jost for text. Square edges, hairlines, arches. No gradients on type, no glow. */

:root {
  --night: #130F15; --night-2: #1A151C; --night-3: #241D26;
  --frank: #EFE7DA; --frank-2: #E6DCCB; --paper: #F5EFE5;
  --gold: #C6A46C; --gold-deep: #94733C; --gold-soft: rgba(198,164,108,.55);
  --tyrian: #4A1528; --sea: #14233A; --coral: #D45A3E;
  --ink: #EFE7DA; --ink-soft: #A99E91; --ink-dark: #1D171F; --ink-dark-soft: #6A5F55;
  --line: rgba(198,164,108,.24); --line-dark: rgba(148,115,60,.30);
  --display: "Cormorant Garamond", Garamond, "Times New Roman", serif;
  --text: "Jost", "Futura", "Avenir Next", system-ui, sans-serif;
  --gut: clamp(20px, 5vw, 72px);
  --max: 1360px;
  --ease: cubic-bezier(.2,.7,.1,1);
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--night); color: var(--ink); font-family: var(--text); font-weight: 300; font-size: 17px; line-height: 1.7; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: clip; }
img, video, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; padding: 0; }
:focus-visible { outline: 1px solid var(--gold); outline-offset: 4px; }
::selection { background: var(--gold); color: var(--night); }
.vh { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- type ---------- */
.d1, .d2, .d3, .d4 { font-family: var(--display); font-weight: 400; line-height: .98; letter-spacing: -.012em; margin: 0; text-wrap: balance; }
.d1 { font-size: clamp(56px, 9.2vw, 158px); }
.d2 { font-size: clamp(42px, 6vw, 96px); }
.d3 { font-size: clamp(32px, 3.6vw, 56px); line-height: 1.04; }
.d4 { font-size: clamp(24px, 2.2vw, 32px); line-height: 1.15; }
.d1 em, .d2 em, .d3 em, .d4 em { font-style: italic; color: var(--gold); }
.on-light .d1 em, .on-light .d2 em, .on-light .d3 em, .on-light .d4 em { color: var(--gold-deep); }
.eyebrow { font-family: var(--text); font-weight: 500; font-size: 11px; letter-spacing: .34em; text-transform: uppercase; color: var(--gold); margin: 0; }
.on-light .eyebrow { color: var(--gold-deep); }
.lede { font-family: var(--display); font-style: italic; font-size: clamp(20px, 1.7vw, 26px); line-height: 1.45; margin: 0; max-width: 34ch; }
.p { margin: 0; max-width: 58ch; color: var(--ink-soft); }
.on-light .p { color: var(--ink-dark-soft); }
.small { font-size: 14px; line-height: 1.6; color: var(--ink-soft); }
.on-light .small { color: var(--ink-dark-soft); }
.caps { font-weight: 400; letter-spacing: .32em; text-transform: uppercase; }
.num { font-variant-numeric: lining-nums tabular-nums; }

/* ---------- layout ---------- */
.wrap { width: 100%; max-width: var(--max); margin: 0 auto; padding-inline: var(--gut); }
.sec { position: relative; padding-block: clamp(96px, 13vw, 200px); }
.sec--tight { padding-block: clamp(72px, 9vw, 128px); }
.on-light { background: var(--frank); color: var(--ink-dark); color-scheme: light; }
.on-paper { background: var(--paper); color: var(--ink-dark); color-scheme: light; }
.on-tyrian { background: var(--tyrian); }
.on-sea { background: var(--sea); }
.grid { display: grid; gap: clamp(28px, 4vw, 64px); }
.g2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.g3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.split { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(32px, 6vw, 112px); align-items: start; }
.split--rev { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
.stack > * + * { margin-top: 22px; }
.stack-l > * + * { margin-top: 40px; }
.rule { height: 1px; background: var(--line); border: 0; margin: 0; }
.on-light .rule { background: var(--line-dark); }
.diamond { display: flex; align-items: center; gap: 14px; color: var(--gold); }
.diamond::before, .diamond::after { content: ""; height: 1px; flex: 1; background: currentColor; opacity: .5; }
.diamond i { width: 7px; height: 7px; transform: rotate(45deg); background: currentColor; }
@media (max-width: 900px) { .g2, .g3, .split, .split--rev { grid-template-columns: minmax(0, 1fr); } }

/* arcade pattern: arches with a bead at each threshold (brand book, "The Arcade") */
.arcade { position: absolute; inset: 0; pointer-events: none; color: var(--gold); opacity: .07;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='84'%3E%3Cpath d='M11 84V36a17 17 0 0 1 34 0v48' fill='none' stroke='black' stroke-width='1'/%3E%3Ccircle cx='28' cy='70' r='2.6'/%3E%3C/svg%3E") repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='84'%3E%3Cpath d='M11 84V36a17 17 0 0 1 34 0v48' fill='none' stroke='black' stroke-width='1'/%3E%3Ccircle cx='28' cy='70' r='2.6'/%3E%3C/svg%3E") repeat;
  -webkit-mask-size: 56px 84px; mask-size: 56px 84px; }
.on-light .arcade { color: var(--gold-deep); opacity: .10; }

/* ---------- buttons ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 14px; min-height: 52px; padding: 0 28px; border: 1px solid var(--gold); color: var(--gold); font-family: var(--text); font-size: 12px; font-weight: 500; letter-spacing: .26em; text-transform: uppercase; transition: background-color .4s var(--ease), color .4s var(--ease), border-color .4s var(--ease); white-space: nowrap; }
.btn:hover { background: var(--gold); color: var(--night); }
.btn--solid { background: var(--gold); color: var(--night); }
.btn--solid:hover { background: var(--frank); border-color: var(--frank); }
.on-light .btn { border-color: var(--ink-dark); color: var(--ink-dark); }
.on-light .btn:hover, .on-light .btn--solid { background: var(--ink-dark); color: var(--frank); }
.on-light .btn--solid:hover { background: var(--gold-deep); border-color: var(--gold-deep); }
.btn[disabled] { opacity: .45; pointer-events: none; }
.btn .arw { width: 18px; height: 1px; background: currentColor; position: relative; transition: width .4s var(--ease); }
.btn .arw::after { content: ""; position: absolute; right: 0; top: -3px; width: 7px; height: 7px; border-top: 1px solid currentColor; border-right: 1px solid currentColor; transform: rotate(45deg); }
.btn:hover .arw { width: 26px; }
.link { display: inline-flex; align-items: center; gap: 10px; font-size: 12px; font-weight: 500; letter-spacing: .26em; text-transform: uppercase; color: var(--gold); border-bottom: 1px solid var(--line); padding-bottom: 6px; transition: border-color .3s; }
.link:hover { border-color: var(--gold); }
.on-light .link { color: var(--ink-dark); border-color: var(--line-dark); }

/* ---------- header ---------- */
.hd { position: fixed; inset: 0 0 auto 0; z-index: 50; padding-top: env(safe-area-inset-top, 0px); transition: background-color .5s var(--ease), border-color .5s var(--ease), transform .5s var(--ease); border-bottom: 1px solid transparent; }
.hd.is-solid { background: rgba(19,15,21,.94); border-color: var(--line); backdrop-filter: saturate(1.1); }
.hd.is-hidden { transform: translateY(-100%); }
.hd__in { display: flex; align-items: center; justify-content: space-between; gap: 24px; height: 84px; }
.hd__logo { display: flex; align-items: center; gap: 14px; color: var(--gold); }
.hd__logo svg, .hd__logo img { height: 40px; width: auto; }
.lg { display: inline-flex; align-items: center; gap: 12px; color: var(--gold); }
.lg__65 svg { height: 34px; width: auto; }
.lg__w { font-family: var(--display); font-size: 15px; font-weight: 500; letter-spacing: .42em; text-transform: uppercase; color: var(--ink); padding-top: 4px; }
.hd__nav { display: flex; align-items: center; gap: clamp(18px, 2.4vw, 38px); }
.hd__nav > a, .hd__nav > .dd > button { white-space: nowrap; font-size: 12px; font-weight: 400; letter-spacing: .24em; text-transform: uppercase; color: var(--ink); opacity: .82; transition: opacity .3s, color .3s; padding-block: 10px; }
.hd__nav > a:hover, .hd__nav > .dd > button:hover, .hd__nav > a[aria-current="page"] { opacity: 1; color: var(--gold); }
.dd { position: relative; }
.dd__menu { position: absolute; top: 100%; left: -24px; min-width: 260px; padding: 18px 0; background: var(--night-2); border: 1px solid var(--line); opacity: 0; visibility: hidden; transform: translateY(6px); transition: opacity .3s, transform .3s var(--ease), visibility .3s; }
.dd:hover .dd__menu, .dd:focus-within .dd__menu { opacity: 1; visibility: visible; transform: none; }
.dd__menu a { display: block; padding: 10px 24px; font-family: var(--display); font-size: 22px; }
.dd__menu a span { display: block; font-family: var(--text); font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: var(--ink-soft); }
.dd__menu a:hover { color: var(--gold); }
.hd__cta { min-height: 44px; padding: 0 20px; font-size: 11px; }
.hd__burger { display: none; width: 44px; height: 44px; position: relative; }
.hd__burger i { position: absolute; left: 10px; right: 10px; height: 1px; background: var(--gold); transition: transform .4s var(--ease), top .4s var(--ease); }
.hd__burger i:nth-child(1) { top: 18px; } .hd__burger i:nth-child(2) { top: 26px; }
.menu-open .hd__burger i:nth-child(1) { top: 22px; transform: rotate(45deg); }
.menu-open .hd__burger i:nth-child(2) { top: 22px; transform: rotate(-45deg); }
.mnav { position: fixed; inset: 0; z-index: 45; background: var(--night); padding: 120px var(--gut) 48px; display: flex; flex-direction: column; justify-content: space-between; opacity: 0; visibility: hidden; transition: opacity .5s var(--ease), visibility .5s; overflow-y: auto; }
.menu-open .mnav { opacity: 1; visibility: visible; }
.mnav a.big { display: block; font-family: var(--display); font-size: clamp(36px, 9vw, 56px); line-height: 1.15; }
.mnav a.big em { color: var(--gold); }
@media (max-width: 1180px) { .lg__65 svg { height: 30px; } .hd__nav { display: none; } .hd__burger { display: block; } .hd__in { height: 72px; } .hd__logo svg, .hd__logo img { height: 34px; } }

/* ---------- footer ---------- */
.ft { position: relative; background: var(--night); border-top: 1px solid var(--line); padding-block: clamp(72px, 9vw, 120px) 40px; overflow: hidden; }
.ft__top { display: grid; grid-template-columns: minmax(0, 1.3fr) repeat(3, minmax(0, 1fr)); gap: 40px; }
.ft h4 { margin: 0 0 18px; font-family: var(--text); font-weight: 500; font-size: 11px; letter-spacing: .3em; text-transform: uppercase; color: var(--gold); }
.ft ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; font-size: 15px; color: var(--ink-soft); }
.ft ul a:hover { color: var(--gold); }
.ft__base { margin-top: clamp(56px, 7vw, 96px); padding-top: 26px; border-top: 1px solid var(--line); display: flex; flex-wrap: wrap; justify-content: space-between; gap: 16px; font-size: 12px; letter-spacing: .14em; color: var(--ink-soft); }
@media (max-width: 900px) { .ft__top { grid-template-columns: repeat(2, minmax(0, 1fr)); } .ft__brand { grid-column: 1 / -1; } }

/* ---------- plates (real photography, arched and framed) ---------- */
.plate { position: relative; }
.plate__in { position: relative; overflow: hidden; aspect-ratio: 4 / 5; border-radius: 50% 50% 0 0 / 40% 40% 0 0; background: var(--night-3); max-width: 100%; }
.plate__in img, .plate__in video { width: 100%; height: 100%; object-fit: cover; transform: scale(1.06); transition: transform 1.6s var(--ease); }
.plate:hover .plate__in img { transform: scale(1.1); }
.plate::after { content: ""; position: absolute; inset: -12px; border: 1px solid var(--line); border-radius: 50% 50% 0 0 / 40% 40% 0 0; pointer-events: none; }
.on-light .plate::after { border-color: var(--line-dark); }
.plate--sq .plate__in, .plate--sq::after { border-radius: 0; aspect-ratio: 1; }
.plate figcaption { margin-top: 26px; font-size: 12px; letter-spacing: .22em; text-transform: uppercase; color: var(--ink-soft); }

/* ---------- reveal helpers (JS adds .in) ---------- */
[data-rise] { opacity: 0; transform: translateY(28px); transition: opacity 1.2s var(--ease), transform 1.2s var(--ease); }
[data-rise].in { opacity: 1; transform: none; }
.no-js [data-rise], .reduced [data-rise] { opacity: 1; transform: none; }

/* ======================================================= HOME */
.hero { position: relative; min-height: max(680px, 100svh); display: grid; align-items: end; overflow: hidden; padding-block: 140px clamp(56px, 8vw, 104px); isolation: isolate; }
.hero .arcade { inset: -10% 0; opacity: .085; will-change: transform; }
.hero__light { position: absolute; inset: 0; z-index: -1; background: radial-gradient(60% 55% at 72% 38%, rgba(198,164,108,.13), rgba(19,15,21,0) 70%); pointer-events: none; }
.hero__mark { position: absolute; right: clamp(-120px, -4vw, 0px); top: 52%; width: min(54vw, 780px); transform: translateY(-50%); color: #5E4B30; opacity: .62; pointer-events: none; will-change: transform; }
.hero__mark svg { width: 100%; height: auto; }
.hero__arch { position: absolute; right: clamp(20px, 9vw, 200px); top: 14%; bottom: -2px; width: min(38vw, 520px); border: 1px solid var(--gold-soft); border-bottom: 0; border-radius: 50% 50% 0 0 / 34% 34% 0 0; pointer-events: none; will-change: transform; }
.hero__arch::after { content: ""; position: absolute; left: 50%; bottom: 40px; width: 12px; height: 12px; margin-left: -6px; border-radius: 50%; background: var(--coral); }
.hero__copy { position: relative; z-index: 2; max-width: 1040px; }
.hero__copy .d1 { font-size: clamp(54px, 7.6vw, 128px); }
.hero__copy .d1 { margin-top: 26px; }
.hero__copy .lede { margin-top: 30px; color: var(--ink); }
.hero__ctas { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 44px; }
.hero__meta { position: absolute; left: var(--gut); right: var(--gut); top: 108px; display: flex; justify-content: space-between; font-size: 11px; letter-spacing: .3em; text-transform: uppercase; color: var(--ink-soft); z-index: 2; }
@media (max-width: 900px) {
  .hero { align-items: end; }
  .hero__mark { width: 118vw; right: -34vw; top: 34%; opacity: .55; }
  .hero__arch { width: 62vw; right: 6vw; top: 18%; }
  .hero__meta { display: none; }
}

/* Herald */
.herald { text-align: left; }
.herald__line { font-family: var(--display); font-size: clamp(44px, 7.2vw, 120px); line-height: 1; letter-spacing: -.01em; margin: 0; min-height: 2.05em; }
.herald__line em { color: var(--gold-deep); }
.herald__line .w { display: inline-block; opacity: 0; transform: translateY(.35em); transition: opacity .9s var(--ease), transform .9s var(--ease); }
.herald__line .w.in { opacity: 1; transform: none; }
.herald__form { display: flex; flex-wrap: wrap; align-items: end; gap: 18px; margin-top: 48px; max-width: 760px; }
.herald__form label { flex: 1 1 260px; }

/* fields (shared) */
.fld { display: grid; gap: 8px; }
.fld > span { font-size: 11px; font-weight: 500; letter-spacing: .26em; text-transform: uppercase; color: var(--gold); }
.on-light .fld > span { color: var(--gold-deep); }
.fld input, .fld select, .fld textarea { width: 100%; min-height: 54px; padding: 12px 0; background: transparent; border: 0; border-bottom: 1px solid var(--line); color: inherit; font: inherit; font-size: 18px; border-radius: 0; transition: border-color .3s; -webkit-appearance: none; appearance: none; }
.fld textarea { min-height: 120px; resize: vertical; line-height: 1.6; }
.fld select { background-image: linear-gradient(45deg, transparent 50%, var(--gold) 50%), linear-gradient(135deg, var(--gold) 50%, transparent 50%); background-position: calc(100% - 12px) 50%, calc(100% - 6px) 50%; background-size: 6px 6px; background-repeat: no-repeat; padding-right: 28px; }
.fld select option { color: #1D171F; }
.on-light .fld input, .on-light .fld select, .on-light .fld textarea { border-color: var(--line-dark); }
.fld input:focus, .fld select:focus, .fld textarea:focus { outline: none; border-color: var(--gold); }
.fld small { font-size: 13px; color: var(--ink-soft); }
.on-light .fld small { color: var(--ink-dark-soft); }
.fld .err { color: var(--coral); font-size: 13px; }

/* Occasions index */
.occ { border-top: 1px solid var(--line); }
.occ__row { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) auto; align-items: center; gap: 32px; padding-block: clamp(28px, 3.6vw, 52px); border-bottom: 1px solid var(--line); transition: padding .6s var(--ease); }
.occ__row h3 { font-family: var(--display); font-weight: 400; font-size: clamp(36px, 5vw, 80px); line-height: 1; margin: 0; transition: color .4s, transform .6s var(--ease); }
.occ__row p { margin: 0; color: var(--ink-soft); max-width: 44ch; }
.occ__row .go { width: 56px; height: 56px; border: 1px solid var(--line); border-radius: 50%; display: grid; place-items: center; color: var(--gold); transition: background-color .4s, color .4s, border-color .4s; }
.occ__row:hover h3 { color: var(--gold); transform: translateX(14px); }
.occ__row:hover .go { background: var(--gold); color: var(--night); border-color: var(--gold); }
.occ__row .go svg { width: 18px; }
@media (max-width: 760px) { .occ__row { grid-template-columns: minmax(0, 1fr) auto; } .occ__row p { grid-column: 1 / -1; grid-row: 2; } }

/* The Royal Table: the Unveiling (signature) */
.unveil { position: relative; height: 340svh; }
.unveil__stage { position: sticky; top: 0; height: 100svh; overflow: hidden; display: grid; place-items: center; }
.unveil__window { position: relative; width: min(46vh, 70vw); aspect-ratio: 9 / 16; max-height: 82svh; }
.unveil__frame { position: absolute; inset: 0; overflow: hidden; border-radius: 50% 50% 0 0 / 28% 28% 0 0; background: #0c0a0d; clip-path: inset(100% 0 0 0 round 50% 50% 0 0 / 28% 28% 0 0); }
.unveil__frame video, .unveil__frame img { width: 100%; height: 100%; object-fit: cover; }
.unveil__outline { position: absolute; inset: -14px; border: 1px solid var(--gold-soft); border-bottom: 0; border-radius: 50% 50% 0 0 / 28% 28% 0 0; }
.unveil__dome { position: absolute; left: 50%; bottom: 7%; width: 132%; transform: translateX(-50%); color: var(--gold); transform-origin: 50% 100%; will-change: transform, opacity; z-index: 3; }
.unveil__dome svg { width: 100%; height: auto; overflow: visible; }
.unveil__base { position: absolute; left: -22%; right: -22%; bottom: 0; height: 2px; background: var(--gold); z-index: 3; }
.unveil__bead { position: absolute; left: 50%; bottom: 10px; width: 18px; height: 18px; margin-left: -9px; border-radius: 50%; background: var(--coral); z-index: 4; }
.unveil__copy { position: absolute; z-index: 5; max-width: 420px; }
.unveil__copy--a { left: var(--gut); top: 18%; }
.unveil__copy--b { right: var(--gut); bottom: 16%; text-align: right; }
.unveil__copy--b .d3 { max-width: 12ch; margin-left: auto; }
.unveil__copy [data-step] { opacity: 0; transform: translateY(18px); transition: opacity .9s var(--ease), transform .9s var(--ease); }
.unveil__copy [data-step].on { opacity: 1; transform: none; }
.unveil__cap { position: absolute; left: 50%; bottom: 22px; transform: translateX(-50%); font-size: 11px; letter-spacing: .26em; text-transform: uppercase; color: var(--ink-soft); white-space: nowrap; opacity: 0; transition: opacity .6s; z-index: 5; }
.unveil__cap.on { opacity: 1; }
@media (max-width: 900px) {
  .unveil__window { width: min(58vw, 340px); }
  .unveil__copy--a { top: 96px; left: var(--gut); right: var(--gut); }
  .unveil__copy--b { bottom: 54px; left: var(--gut); right: var(--gut); }
  .unveil__copy--b .d3 { max-width: none; font-size: 30px; }
  .unveil__copy--a .d3 { font-size: 30px; }
  .unveil__copy .p { display: none; }
  .unveil__cap { white-space: normal; width: calc(100% - 40px); text-align: center; bottom: 14px; }
  .unveil__copy--b { bottom: 70px; }
}
.reduced .unveil { height: auto; }
.reduced .unveil__stage { position: relative; height: auto; min-height: 100svh; padding-block: 120px; }
.reduced .unveil__frame { clip-path: none; }
.reduced .unveil__dome { transform: translate(-50%, -78%) !important; opacity: .0; }
.reduced .unveil__copy [data-step] { opacity: 1; transform: none; }

/* Honours track (horizontal pan, native scroll with snap) */
.honours { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(300px, 30%); gap: 2px; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 28px; scrollbar-width: thin; scrollbar-color: var(--gold-deep) transparent; margin-top: 64px; }
.honours article { scroll-snap-align: start; background: var(--paper); padding: 40px 32px 44px; min-height: 380px; display: flex; flex-direction: column; justify-content: space-between; }
.honours article.peak { background: var(--night); color: var(--ink); }
.honours article.peak .p { color: var(--ink-soft); }
.honours .n { font-family: var(--display); font-style: italic; font-size: 54px; color: var(--gold-deep); line-height: 1; }
.honours .peak .n { color: var(--gold); }
.honours h3 { font-family: var(--display); font-weight: 400; font-size: 34px; margin: 0 0 6px; }
.honours .when { font-size: 11px; letter-spacing: .26em; text-transform: uppercase; color: var(--gold-deep); }
.honours .peak .when { color: var(--gold); }
@media (max-width: 760px) { .honours { grid-auto-columns: 82%; } }

/* Houses split */
.houses { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.house { position: relative; padding: clamp(72px, 9vw, 144px) var(--gut); display: grid; gap: 40px; align-content: start; overflow: hidden; }
.house .plate { width: min(100%, 440px); }
.house__logo { height: 54px; width: auto; color: var(--gold); }
.house--light { background: var(--frank); color: var(--ink-dark); }
@media (max-width: 900px) { .houses { grid-template-columns: minmax(0, 1fr); } }

/* Name */
.verse { text-align: center; }
.verse blockquote { margin: 0 auto; max-width: 30ch; font-family: var(--display); font-size: clamp(28px, 3.4vw, 52px); line-height: 1.25; }
.verse blockquote em { color: var(--gold); }
.verse cite { display: block; margin-top: 36px; font-style: normal; font-size: 12px; letter-spacing: .3em; text-transform: uppercase; color: var(--ink-soft); }
.verse__65 { width: 120px; margin: 0 auto 48px; color: var(--gold); }

/* Seal close */
.close { text-align: center; overflow: hidden; }
.close__seal { width: clamp(200px, 22vw, 300px); margin: 0 auto 56px; color: var(--gold); will-change: transform; }
.close .d2 { max-width: 16ch; margin-inline: auto; }
.close .p { margin: 30px auto 0; }
.close__ctas { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; margin-top: 48px; }

/* ======================================================= INNER PAGES */
.ph { position: relative; padding-block: clamp(168px, 18vw, 260px) clamp(72px, 8vw, 120px); overflow: hidden; }
.ph .d1 { font-size: clamp(54px, 8vw, 132px); max-width: 14ch; margin-top: 26px; }
.ph .lede { margin-top: 32px; }
.ph__icon { position: absolute; right: var(--gut); bottom: clamp(56px, 7vw, 104px); width: clamp(110px, 12vw, 180px); color: var(--gold); opacity: .9; }
@media (max-width: 760px) { .ph__icon { display: none; } }

.list-lines { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.on-light .list-lines { border-color: var(--line-dark); }
.list-lines li { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: 32px; padding-block: 26px; border-bottom: 1px solid var(--line); }
.on-light .list-lines li { border-color: var(--line-dark); }
.list-lines h3 { margin: 0; font-family: var(--display); font-weight: 400; font-size: 28px; line-height: 1.15; }
.list-lines p { margin: 0; color: var(--ink-soft); }
.on-light .list-lines p { color: var(--ink-dark-soft); }
@media (max-width: 700px) { .list-lines li { grid-template-columns: minmax(0, 1fr); gap: 8px; } }

.steps { counter-reset: s; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2px; }
.steps li { list-style: none; counter-increment: s; background: var(--night-2); padding: 36px 30px 40px; display: grid; gap: 12px; align-content: start; }
.on-light .steps li { background: var(--paper); }
.steps li::before { content: counter(s, upper-roman); font-family: var(--display); font-style: italic; font-size: 38px; color: var(--gold); line-height: 1; }
.on-light .steps li::before { color: var(--gold-deep); }
.steps h3 { margin: 0; font-family: var(--display); font-weight: 400; font-size: 28px; }
.steps p { margin: 0; color: var(--ink-soft); font-size: 15.5px; }
.on-light .steps p { color: var(--ink-dark-soft); }
@media (max-width: 900px) { .steps { grid-template-columns: minmax(0, 1fr); padding: 0; } }
ol.steps { padding: 0; margin: 0; }

.cta-band { position: relative; overflow: hidden; border-top: 1px solid var(--line); }
.cta-band__in { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 32px; }

.prose { max-width: 70ch; }
.prose h2 { font-family: var(--display); font-weight: 400; font-size: 34px; margin: 56px 0 14px; }
.prose p, .prose li { color: var(--ink-dark-soft); }
.prose ul { padding-left: 20px; }

/* ======================================================= FORMS (booking, orders) */
.flow { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); gap: clamp(40px, 6vw, 104px); align-items: start; }
@media (max-width: 960px) { .flow { grid-template-columns: minmax(0, 1fr); } }
.flow__aside { position: sticky; top: 112px; border: 1px solid var(--line); padding: 32px 30px; display: grid; gap: 18px; }
.on-light .flow__aside { border-color: var(--line-dark); background: var(--paper); }
.flow__steps { display: flex; gap: 8px; margin-bottom: 48px; flex-wrap: wrap; }
.flow__steps button { font-size: 11px; letter-spacing: .24em; text-transform: uppercase; padding: 10px 0; margin-right: 22px; color: var(--ink-dark-soft); border-bottom: 1px solid transparent; }
.flow__steps button[aria-current="step"] { color: var(--ink-dark); border-color: var(--gold-deep); }
.flow__steps button:disabled { opacity: .45; cursor: default; }
.panel[hidden] { display: none; }
.panel > .d3 { margin-bottom: 34px; }
.fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 30px 34px; }
.fields .full { grid-column: 1 / -1; }
@media (max-width: 640px) { .fields { grid-template-columns: minmax(0, 1fr); } }
.choices { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 2px; }
.choice { position: relative; }
.choice input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.choice span { display: grid; gap: 6px; min-height: 100%; padding: 22px 22px 24px; background: var(--paper); border: 1px solid transparent; transition: border-color .3s, background-color .3s; }
.choice b { font-family: var(--display); font-weight: 500; font-size: 22px; line-height: 1.15; }
.choice small { font-size: 13px; color: var(--ink-dark-soft); line-height: 1.5; }
.choice input:checked + span { border-color: var(--gold-deep); background: #FBF7F0; }
.choice input:focus-visible + span { outline: 1px solid var(--gold-deep); outline-offset: 2px; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { position: relative; }
.chip input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.chip span { display: inline-flex; align-items: center; min-height: 42px; padding: 0 18px; border: 1px solid var(--line-dark); font-size: 14px; transition: background-color .3s, color .3s, border-color .3s; }
.chip input:checked + span { background: var(--ink-dark); color: var(--frank); border-color: var(--ink-dark); }
.chip input:disabled + span { opacity: .35; text-decoration: line-through; }
.chip input:focus-visible + span { outline: 1px solid var(--gold-deep); outline-offset: 2px; }
.cal { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 2px; }
.cal__head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; }
.cal__head b { font-family: var(--display); font-weight: 500; font-size: 26px; }
.cal__nav { display: flex; gap: 6px; }
.cal__nav button { width: 40px; height: 40px; border: 1px solid var(--line-dark); }
.cal__dow { font-size: 10px; letter-spacing: .2em; text-transform: uppercase; text-align: center; padding: 6px 0; color: var(--ink-dark-soft); }
.cal button.d { aspect-ratio: 1; background: var(--paper); font-size: 15px; transition: background-color .25s, color .25s; }
.cal button.d:disabled { background: transparent; color: rgba(29,23,31,.25); cursor: default; }
.cal button.d[aria-pressed="true"] { background: var(--ink-dark); color: var(--frank); }
.cal button.d:not(:disabled):hover { background: var(--frank-2); }
.flow__nav { display: flex; justify-content: space-between; gap: 16px; margin-top: 52px; padding-top: 28px; border-top: 1px solid var(--line-dark); }
.sum { display: grid; gap: 10px; font-size: 15px; }
.sum div { display: flex; justify-content: space-between; gap: 16px; }
.sum dt, .sum .k { color: var(--ink-dark-soft); }
.sum .tot { padding-top: 14px; margin-top: 4px; border-top: 1px solid var(--line-dark); font-family: var(--display); font-size: 26px; }
.note { font-size: 13px; line-height: 1.6; color: var(--ink-dark-soft); }
.done { text-align: left; }
.done .seal { width: 140px; color: var(--gold-deep); margin-bottom: 36px; }
.form-err { margin-top: 18px; color: var(--coral); font-size: 14px; min-height: 1.4em; }
.hp { position: absolute; left: -9999px; }

/* ======================================================= SHOP (houses) */
.menu-table { width: 100%; border-collapse: collapse; }
.menu-table th, .menu-table td { padding: 22px 0; border-bottom: 1px solid var(--line-dark); text-align: left; vertical-align: baseline; }
.menu-table th { font-family: var(--display); font-weight: 400; font-size: 28px; }
.menu-table td { font-size: 15px; color: var(--ink-dark-soft); }
.menu-table td.pr { text-align: right; font-family: var(--display); font-size: 24px; color: var(--ink-dark); }
.cats { display: flex; flex-wrap: wrap; gap: 6px; position: sticky; top: 84px; z-index: 5; background: var(--frank); padding-block: 16px; border-bottom: 1px solid var(--line-dark); }
.cats a { padding: 10px 16px; font-size: 12px; letter-spacing: .22em; text-transform: uppercase; border: 1px solid transparent; }
.cats a:hover, .cats a.on { border-color: var(--ink-dark); }
@media (max-width: 1180px) { .cats { top: 72px; } }
.cats { transition: top .5s var(--ease); }
body:has(.hd.is-hidden) .cats { top: 0; }
.cat { padding-top: clamp(72px, 8vw, 120px); scroll-margin-top: 150px; }
.cat__head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 48px; align-items: end; margin-bottom: 48px; }
@media (max-width: 860px) { .cat__head { grid-template-columns: minmax(0, 1fr); } }
.prods { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 2px; }
.prod { background: var(--paper); padding: 28px 26px 26px; display: grid; gap: 14px; align-content: start; }
.prod h3 { margin: 0; font-family: var(--display); font-weight: 500; font-size: 25px; line-height: 1.15; }
.prod .pr { font-family: var(--display); font-size: 24px; }
.prod .row { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: auto; }
.qty { display: inline-flex; align-items: center; border: 1px solid var(--line-dark); }
.qty button { width: 40px; height: 42px; font-size: 18px; }
.qty input { width: 52px; height: 42px; text-align: center; border: 0; background: transparent; font: inherit; color: inherit; -moz-appearance: textfield; }
.qty input::-webkit-outer-spin-button, .qty input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.add { min-height: 44px; padding: 0 18px; font-size: 11px; }
.cartbar { position: fixed; z-index: 40; left: 50%; bottom: 20px; transform: translate(-50%, 140%); display: flex; align-items: center; gap: 22px; padding: 12px 12px 12px 26px; background: var(--night); color: var(--ink); border: 1px solid var(--gold-soft); transition: transform .6s var(--ease); max-width: calc(100% - 32px); }
.cartbar.on { transform: translate(-50%, 0); }
.cartbar b { font-family: var(--display); font-weight: 500; font-size: 22px; white-space: nowrap; }
.cart-lines { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.cart-lines li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px 16px; padding-block: 16px; border-bottom: 1px solid var(--line-dark); font-size: 15px; }
.cart-lines li small { grid-column: 1; color: var(--ink-dark-soft); font-size: 13px; }
.cart-lines li .x { font-size: 12px; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-dark-soft); justify-self: end; }
.empty { padding: 32px 0; color: var(--ink-dark-soft); }

/* house identity in the 65 Events system */
.house-hd .hd__logo .tag { font-size: 10px; letter-spacing: .3em; text-transform: uppercase; color: var(--ink-soft); line-height: 1.3; }
.boxx-mark { width: 44px; height: 44px; border-radius: 50%; }

/* court (admin) */
.court table { width: 100%; border-collapse: collapse; font-size: 14px; }
.court th, .court td { text-align: left; padding: 12px 10px; border-bottom: 1px solid var(--line-dark); vertical-align: top; }
.court th { font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: var(--gold-deep); font-weight: 500; }
.court .wrap-x { overflow-x: auto; }
.court select { font: inherit; padding: 6px; }

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

/* ======================================================= THE FULL STACK */
.dd__menu--wide { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); min-width: 560px; }
.glyph { width: 52px; height: 52px; color: var(--gold); }
.on-light .glyph { color: var(--gold-deep); }

/* services index */
.svcs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); }
.on-light .svcs { background: var(--line-dark); border-color: var(--line-dark); }
.svc { position: relative; display: grid; align-content: start; gap: 14px; padding: clamp(32px, 3.4vw, 52px) clamp(26px, 2.8vw, 44px) clamp(36px, 3.6vw, 56px); background: var(--night); min-height: 300px; overflow: hidden; transition: background-color .5s var(--ease); }
.on-light .svc { background: var(--frank); }
.svc h3 { margin: 18px 0 0; font-family: var(--display); font-weight: 400; font-size: clamp(28px, 2.4vw, 38px); line-height: 1.05; }
.svc p { margin: 0; color: var(--ink-soft); max-width: 30ch; }
.on-light .svc p { color: var(--ink-dark-soft); }
.svc__go { margin-top: auto; padding-top: 22px; display: inline-flex; align-items: center; gap: 12px; font-size: 11px; font-weight: 500; letter-spacing: .26em; text-transform: uppercase; color: var(--gold); opacity: .7; transition: opacity .4s, gap .4s var(--ease); }
.on-light .svc__go { color: var(--gold-deep); }
.svc__go .arw { width: 18px; height: 1px; background: currentColor; position: relative; display: inline-block; }
.svc__go .arw::after { content: ""; position: absolute; right: 0; top: -3px; width: 7px; height: 7px; border-top: 1px solid currentColor; border-right: 1px solid currentColor; transform: rotate(45deg); }
.svc::before { content: ""; position: absolute; inset: auto 0 0 0; height: 2px; background: var(--gold); transform: scaleX(0); transform-origin: left; transition: transform .7s var(--ease); }
.svc:hover { background: var(--night-2); }
.on-light .svc:hover { background: var(--paper); }
.svc:hover::before { transform: scaleX(1); }
.svc:hover .svc__go { opacity: 1; gap: 18px; }
.svc .glyph { transition: transform .7s var(--ease); }
.svc:hover .glyph { transform: translateY(-4px); }
@media (max-width: 980px) { .svcs { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .svcs { grid-template-columns: minmax(0, 1fr); } .svc { min-height: 0; } }

/* every detail, considered: the place setting */
.tbl-sec { background: var(--night); border-top: 1px solid var(--line); }
.tbl { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); gap: clamp(32px, 5vw, 80px); align-items: start; }
.tbl__art { position: relative; border: 1px solid var(--line); background: radial-gradient(70% 70% at 50% 55%, rgba(198,164,108,.07), rgba(19,15,21,0) 70%); padding: clamp(10px, 2vw, 28px); }
.tbl__svg { width: 100%; height: auto; color: var(--gold); }
.tbl [data-d] { transition: opacity .6s var(--ease), color .6s var(--ease); }
.tbl[data-active] [data-d] { opacity: .5; }
.tbl__svg g[data-d] { stroke-width: 1.3; }
.tbl .hs { cursor: pointer; }
.tbl .hs circle { fill: var(--night); stroke: var(--gold); stroke-width: 1; transition: fill .4s; }
.tbl .hs text { font-family: var(--display); font-style: italic; font-size: 14px; fill: var(--gold); transition: fill .4s; }
.tbl__list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.tbl__list li { border-bottom: 1px solid var(--line); }
.tbl__list button { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 12px; width: 100%; text-align: left; padding: 16px 0; color: var(--ink-soft); transition: color .4s; }
.tbl__list .n { font-family: var(--display); font-style: italic; font-size: 20px; color: var(--gold); line-height: 1.3; }
.tbl__list b { display: block; font-family: var(--display); font-weight: 400; font-size: 22px; color: var(--ink); line-height: 1.25; }
.tbl__list .t { display: grid; grid-template-rows: 0fr; overflow: hidden; font-size: 15px; line-height: 1.6; transition: grid-template-rows .6s var(--ease), margin .6s var(--ease), opacity .6s; opacity: 0; }
.tbl__list .t { display: block; max-height: 0; }
.tbl__list button[aria-pressed="true"] .t { max-height: 8em; opacity: 1; margin-top: 8px; }
.tbl__list button[aria-pressed="true"] b { color: var(--gold); }
@media (max-width: 960px) { .tbl { grid-template-columns: minmax(0, 1fr); } }

/* the standard (three commitments) */
.stds { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(28px, 4vw, 64px); }
.std h3 { margin: 0 0 12px; font-family: var(--display); font-weight: 400; font-size: clamp(26px, 2.4vw, 36px); }
.std h3::before { content: ""; display: block; width: 9px; height: 9px; margin-bottom: 22px; border-radius: 50%; background: var(--coral); }
.std p { margin: 0; color: rgba(239,231,218,.74); }
@media (max-width: 860px) { .stds { grid-template-columns: minmax(0, 1fr); } }
.ph__icon--glyph .glyph { width: 100%; height: auto; }

/* 65 Media viewfinder */
.vf { margin: 0; justify-self: end; width: min(100%, 440px); }
.vf__in { position: relative; aspect-ratio: 4 / 5; overflow: hidden; background: #0c0a0d; max-width: 100%; }
.vf__in video { width: 100%; height: 100%; object-fit: cover; }
.vf__c { position: absolute; width: 26px; height: 26px; border: 0 solid rgba(239,231,218,.85); }
.vf__c.tl { top: 14px; left: 14px; border-top-width: 1px; border-left-width: 1px; }
.vf__c.tr { top: 14px; right: 14px; border-top-width: 1px; border-right-width: 1px; }
.vf__c.bl { bottom: 14px; left: 14px; border-bottom-width: 1px; border-left-width: 1px; }
.vf__c.br { bottom: 14px; right: 14px; border-bottom-width: 1px; border-right-width: 1px; }
.vf__rec { position: absolute; top: 20px; left: 50%; transform: translateX(-50%); display: flex; align-items: center; gap: 8px; font-size: 10px; letter-spacing: .3em; color: var(--frank); }
.vf__rec i { width: 8px; height: 8px; border-radius: 50%; background: var(--coral); animation: rec 1.6s steps(2) infinite; }
@keyframes rec { 50% { opacity: .15; } }
.vf__tc { position: absolute; bottom: 20px; left: 50%; transform: translateX(-50%); font-size: 11px; letter-spacing: .14em; color: var(--frank); }
.vf figcaption { margin-top: 18px; font-size: 12px; letter-spacing: .22em; text-transform: uppercase; color: var(--ink-soft); }
.on-light .vf figcaption { color: var(--ink-dark-soft); }

/* three houses */
.houses--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.houses--3 .house { padding: clamp(64px, 7vw, 112px) clamp(24px, 3vw, 52px); gap: 36px; }
.houses--3 .house .plate, .houses--3 .house .vf { width: 100%; max-width: 380px; justify-self: start; }
.house--sea { background: var(--sea); }
.house__ctas { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 26px; }
@media (max-width: 1100px) { .houses--3 { grid-template-columns: minmax(0, 1fr); } .houses--3 .house .plate, .houses--3 .house .vf { max-width: 420px; } }