/* GDC Forms: Cream ground, Charcoal type, Sage captions. Small light type, hairlines, no radius, no shadows. */
@font-face { font-family: "Jost"; font-weight: 200; font-style: normal; font-display: swap; src: url(/fonts/jost/jost-latin-200-normal.woff2) format("woff2"); }
@font-face { font-family: "Jost"; font-weight: 200; font-style: italic; font-display: swap; src: url(/fonts/jost/jost-latin-200-italic.woff2) format("woff2"); }
@font-face { font-family: "Jost"; font-weight: 300; font-style: normal; font-display: swap; src: url(/fonts/jost/jost-latin-300-normal.woff2) format("woff2"); }
@font-face { font-family: "Cormorant Garamond"; font-weight: 300; font-style: normal; font-display: swap; src: url(/fonts/cormorant/cormorant-garamond-latin-300-normal.woff2) format("woff2"); }
@font-face { font-family: "Cormorant Garamond"; font-weight: 300; font-style: italic; font-display: swap; src: url(/fonts/cormorant/cormorant-garamond-latin-300-italic.woff2) format("woff2"); }
@font-face { font-family: "Cormorant Garamond"; font-weight: 500; font-style: normal; font-display: swap; src: url(/fonts/cormorant/cormorant-garamond-latin-500-normal.woff2) format("woff2"); }
@font-face { font-family: "Cormorant Garamond"; font-weight: 400; font-style: italic; font-display: swap; src: url(/fonts/cormorant/cormorant-garamond-latin-400-italic.woff2) format("woff2"); }

:root {
  --charcoal: #181818; --cream: #F5F1EC; --sage: #646E67; --forest: #353E37;
  --blood: #8A0303; --rule: rgba(24,24,24,.16); --write: rgba(24,24,24,.38);
  --sans: "sofia-pro", "Jost", sans-serif; --gar: "garamond-premier-pro-display", "Cormorant Garamond", Garamond, serif;
  --ease: cubic-bezier(.22,.61,.36,1);
}
* { box-sizing: border-box; border-radius: 0; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--cream); color: var(--charcoal); font: 200 16px/1.6 var(--sans); letter-spacing: .02em; -webkit-font-smoothing: antialiased; font-variant-numeric: lining-nums; font-feature-settings: "lnum" 1; }
h1, h2, h3, p { margin: 0; font-weight: inherit; }
button, input, select, textarea { font: inherit; color: inherit; letter-spacing: inherit; }
button { background: none; border: 0; padding: 0; cursor: pointer; }
a { color: inherit; }
img { max-width: 100%; display: block; }
[hidden] { display: none !important; }
:focus-visible { outline: 1px solid var(--charcoal); outline-offset: 3px; }
em, i { font-style: italic; }

/* type roles */
.label { font-family: var(--gar); font-weight: 500; font-size: 16px; letter-spacing: .3em; text-transform: uppercase; line-height: 1.4; }
.label-sm { font-family: var(--gar); font-weight: 500; font-size: 12px; letter-spacing: .21em; text-transform: uppercase; }
.label-tiny { font-family: var(--gar); font-weight: 500; font-size: 10px; letter-spacing: .4em; text-transform: uppercase; }
.label i, .label-sm i, .label-tiny i, .amp { font-family: var(--gar); font-weight: 400; font-style: italic; text-transform: none; }
.statement { font-family: var(--gar); font-weight: 300; font-size: 22px; line-height: 1.25; letter-spacing: 0; }
.statement em { font-family: var(--gar); font-weight: 400; }
.small { font-size: 14px; line-height: 1.6; }
.caption { font-size: 14px; color: var(--sage); line-height: 1.6; }
.sage { color: var(--sage); }
.numeral { font-family: var(--gar); font-weight: 300; color: var(--sage); }
.center { text-align: center; }

/* links: primary = Garamond capitals over a hairline; secondary = italic, Sage, led by an en dash */
.link { font-family: var(--gar); font-weight: 400; font-size: 14px; letter-spacing: .2em; text-transform: uppercase; text-decoration: none;
  border-bottom: 1px solid var(--charcoal); padding: 6px 0 4px; display: inline-block; }
.link:hover { border-bottom-width: 2px; padding-bottom: 3px; }
.link[disabled] { opacity: .35; cursor: default; border-bottom-color: var(--rule); }
.link2 { font-family: var(--gar); font-style: italic; font-weight: 400; font-size: 17px; color: var(--sage); text-decoration: none; letter-spacing: .01em; }
.link2::before { content: "\2013\00a0"; }
.link2:hover { color: var(--charcoal); }
.link2.plain::before { content: ""; }

/* header */
.hdr { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; padding: 18px clamp(16px, 4vw, 48px); }
.hdr .logo { width: 120px; }
.hdr .side { display: flex; gap: 20px; align-items: center; }
.hdr .side.r { justify-content: flex-end; }

/* fields */
.field { display: block; margin: 0 0 28px; }
.field > .label-tiny { display: block; margin-bottom: 4px; }
.in { width: 100%; background: transparent; border: 0; border-bottom: 1px solid var(--write); padding: 8px 0 7px; font-size: 18px; font-weight: 200; line-height: 1.5; border-radius: 0; -webkit-appearance: none; appearance: none; }
.in:focus { outline: none; border-bottom-color: var(--charcoal); box-shadow: 0 1px 0 var(--charcoal); }
textarea.in { resize: none; overflow: hidden; min-height: 44px; display: block;
  background-image: repeating-linear-gradient(to bottom, transparent 0, transparent 35px, var(--rule) 35px, var(--rule) 36px); line-height: 36px; padding: 0 0 1px; background-attachment: local; }
select.in { background-image: none; padding-right: 20px; }
.selwrap { position: relative; display: block; }
.selwrap::after { content: ""; position: absolute; right: 4px; top: 50%; width: 6px; height: 6px; border-right: 1px solid var(--charcoal); border-bottom: 1px solid var(--charcoal); transform: translateY(-70%) rotate(45deg); pointer-events: none; }
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 32px; }
@media (max-width: 640px) { .grid2 { grid-template-columns: 1fr; } }
::placeholder { color: rgba(24,24,24,.3); }

/* hairline tables */
table.hair { width: 100%; border-collapse: collapse; }
table.hair th { text-align: left; font-family: var(--gar); font-weight: 500; font-size: 10px; letter-spacing: .3em; text-transform: uppercase; color: var(--sage); padding: 0 12px 8px 0; border-bottom: 1px solid var(--rule); }
table.hair td { padding: 12px 12px 12px 0; border-bottom: 1px solid var(--rule); vertical-align: top; font-size: 14px; }

/* toast */
.toast { position: fixed; top: 16px; right: 16px; max-width: 360px; background: var(--blood); color: var(--cream); padding: 18px 20px; z-index: 90; animation: toastIn .6s var(--ease) both; }
.toast .label-tiny { color: var(--cream); }
.toast .go { color: var(--cream); border-bottom-color: var(--cream); }
.toast i { color: var(--cream); }
@keyframes toastIn { from { opacity: 0; transform: translateY(-12px); } to { opacity: 1; transform: none; } }

/* ---- the GDC Forms mark and intro ---- */
.mark { width: 64px; height: 64px; overflow: visible; }
.mark path { fill: none; stroke: var(--charcoal); stroke-width: 1.2; stroke-linecap: square; stroke-dasharray: 1; stroke-dashoffset: 1; }
.mark .tick { stroke: var(--sage); stroke-width: 1.6; }
.splash { position: fixed; inset: 0; background: var(--cream); z-index: 100; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 22px; transition: opacity .8s var(--ease), visibility .8s; }
.splash.done { opacity: 0; visibility: hidden; }
.splash .mark { width: 84px; height: 84px; }
.splash .glogo { width: 150px; opacity: 0; transform: translateY(8px); }
.splash .wm { opacity: 0; letter-spacing: 1.2em; margin-right: -1.2em; font-size: 14px; }
.splash .skip { position: absolute; bottom: 28px; opacity: 0; animation: fadeIn .6s 1.2s forwards; }
.play .mark path { animation: draw 1s var(--ease) forwards; }
.play .mark .p1 { animation-delay: .1s; animation-duration: 1.1s; } .play .mark .p2 { animation-delay: .7s; } .play .mark .l1 { animation-delay: .95s; }
.play .mark .l2 { animation-delay: 1.1s; } .play .mark .l3 { animation-delay: 1.25s; } .play .mark .tick { animation-delay: 1.5s; animation-duration: .6s; }
.play .glogo { animation: rise .9s 1.9s var(--ease) forwards; }
.play .wm { animation: track 1.3s 2.3s var(--ease) forwards; }
.mark.loop path { animation: draw 1.1s var(--ease) forwards; }
@keyframes draw { to { stroke-dashoffset: 0; } }
@keyframes rise { to { opacity: 1; transform: none; } }
@keyframes track { from { opacity: 0; letter-spacing: 1.2em; margin-right: -1.2em; } to { opacity: 1; letter-spacing: .5em; margin-right: -.5em; } }
@keyframes fadeIn { to { opacity: 1; } }
@keyframes up { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
.enter > * { opacity: 0; animation: up .8s var(--ease) forwards; }
.enter > *:nth-child(2) { animation-delay: .12s; } .enter > *:nth-child(3) { animation-delay: .24s; } .enter > *:nth-child(4) { animation-delay: .36s; } .enter > *:nth-child(5) { animation-delay: .48s; } .enter > *:nth-child(6) { animation-delay: .6s; }
@media (prefers-reduced-motion: reduce) {
  .play .mark path, .mark.loop path { animation-duration: .01s !important; animation-delay: 0s !important; }
  .play .glogo, .play .wm { animation: none; opacity: 1; transform: none; letter-spacing: .5em; }
  .enter > * { animation: none; opacity: 1; }
  .toast { animation: none; }
}

/* hotel logo arrives after the GDC Forms sequence */
.splash.withhotel { gap: 18px; }
.splash .hl { display: flex; flex-direction: column; align-items: center; gap: 12px; opacity: 0; margin-top: 10px; }
.splash .hl .hr { width: 0; height: 1px; background: var(--charcoal); }
.splash .hl img { max-height: 70px; max-width: min(260px, 70vw); width: auto; }
.play .hl { animation: hlIn 1.1s 3.9s var(--ease) forwards; }
.play .hl .hr { animation: hrGrow .9s 3.6s var(--ease) forwards; }
@keyframes hlIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes hrGrow { to { width: 56px; } }
@media (prefers-reduced-motion: reduce) { .play .hl { animation: none; opacity: 1; } .play .hl .hr { animation: none; width: 56px; } }
/* keep the intro clear of the skip link on short screens */
.splash { padding: 20px 24px 64px; }
@media (max-height: 640px) {
  .splash { gap: 12px; }
  .splash .mark { width: 54px; height: 54px; }
  .splash .glogo { width: 104px; }
  .splash .hl { margin-top: 2px; gap: 8px; }
  .splash .hl img { max-height: 46px; }
  .splash .wm { font-size: 12px; }
}

/* sound toggle */
.snd { font-size: 15px; }
.splash .splash-snd { position: absolute; top: 20px; right: 24px; opacity: 0; animation: fadeIn .6s .8s forwards; }