/* GDC ROI Calculator: Cream ground, Charcoal type, Sage details. Small light type, hairlines, no radius, no shadows.
   Dark mode is the cover colourway: Cream on Charcoal. */
@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;
  --ground: var(--cream); --ink: var(--charcoal); --quiet: var(--sage); --detail: var(--sage);
  --rule: rgba(24,24,24,.16); --write: rgba(24,24,24,.38); --faint: rgba(24,24,24,.3);
  --sans: "sofia-pro", "Jost", sans-serif; --gar: "garamond-premier-pro-display", "Cormorant Garamond", Garamond, serif;
  --ease: cubic-bezier(.22,.61,.36,1); --spring: cubic-bezier(.34,1.45,.5,1); --glide: cubic-bezier(.16,1,.3,1);
  color-scheme: light;
}
:root[data-theme="dark"] {
  --ground: var(--charcoal); --ink: var(--cream); --quiet: rgba(245,241,236,.6); --detail: #7C877F;
  --rule: rgba(245,241,236,.17); --write: rgba(245,241,236,.42); --faint: rgba(245,241,236,.32);
  color-scheme: dark;
}
* { box-sizing: border-box; border-radius: 0; }
html { -webkit-text-size-adjust: 100%; background: var(--ground); }
body { margin: 0; background: var(--ground); color: var(--ink); font: 200 16px/1.6 var(--sans); letter-spacing: .02em; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
  font-variant-numeric: lining-nums; font-feature-settings: "lnum" 1; min-height: 100vh; min-height: 100dvh; }
h1, h2, h3, p { margin: 0; font-weight: inherit; font-size: inherit; }
button, input, select, textarea { font: inherit; color: inherit; letter-spacing: inherit; }
button { background: none; border: 0; padding: 0; cursor: pointer; }
a { color: inherit; }
[hidden] { display: none !important; }
:focus-visible { outline: 1px solid var(--ink); outline-offset: 4px; }
em, i { font-style: italic; }
::selection { background: var(--ink); color: var(--ground); }
::placeholder { color: var(--faint); opacity: 1; }

/* the theme changes as one soft cross-fade */
::view-transition-old(root), ::view-transition-new(root) { animation-duration: .55s; animation-timing-function: var(--ease); }

/* type roles (nothing above 22px) */
.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; line-height: 1.5; }
.label-tiny { font-family: var(--gar); font-weight: 500; font-size: 10px; letter-spacing: .4em; text-transform: uppercase; line-height: 1.6; }
.label i, .label-sm i, .label-tiny i { 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-weight: 400; }
.small { font-size: 14px; line-height: 1.6; }
.caption { font-size: 14px; color: var(--quiet); line-height: 1.6; }
.xsmall { font-size: 12px; line-height: 1.5; color: var(--quiet); letter-spacing: .04em; }
.quiet { color: var(--quiet); }
.numeral { font-family: var(--gar); font-weight: 300; color: var(--detail); font-size: 16px; }
.center { text-align: center; }

/* links: primary = Garamond capitals over a hairline; secondary = italic, quiet, led by an en dash. No filled buttons. */
.link { font-family: var(--gar); font-weight: 400; font-size: 14px; letter-spacing: .2em; text-transform: uppercase; text-decoration: none; white-space: nowrap;
  padding: 8px 0 6px; display: inline-block; position: relative; }
.link::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--ink); transform-origin: left; transition: transform .5s var(--glide); }
.link:hover::after { animation: redraw .7s var(--glide); }
.link:active { opacity: .6; }
.link[disabled] { opacity: .35; cursor: default; }
@keyframes redraw { 0% { transform: scaleX(1); transform-origin: right; } 45% { transform: scaleX(0); transform-origin: right; } 46% { transform: scaleX(0); transform-origin: left; } 100% { transform: scaleX(1); transform-origin: left; } }
.link2 { font-family: var(--gar); font-style: italic; font-weight: 400; font-size: 17px; color: var(--quiet); text-decoration: none; letter-spacing: .01em; transition: color .3s; }
.link2::before { content: "\2013\00a0"; }
.link2:hover { color: var(--ink); }
.link2.plain::before { content: ""; }

/* the logo: inline vector, takes the colour of the type */
.gdc-logo { display: block; width: 100%; height: auto; }

/* header */
.hdr { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; padding: 20px clamp(20px, 4.5vw, 64px); gap: 12px; }
.hdr .logo { width: 116px; display: block; }
.hdr .side { display: flex; gap: 20px; align-items: center; min-width: 0; }
.hdr .side.r { justify-content: flex-end; }
.hdr .link2 { font-size: 15px; white-space: nowrap; }
@media (max-width: 560px) { .hdr .logo { width: 100px; } .hdr .side { gap: 14px; } .hdr .side.l .label-tiny { display: none; } }

/* fields: a single writing line */
.field { display: block; margin: 0 0 28px; text-align: left; }
.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; -webkit-appearance: none; appearance: none; transition: border-color .3s, box-shadow .3s; }
.in:focus { outline: none; border-bottom-color: var(--ink); box-shadow: 0 1px 0 var(--ink); }
.in:-webkit-autofill { -webkit-text-fill-color: var(--ink); transition: background-color 9999s; }
.field .err { display: block; min-height: 20px; font-size: 13px; color: var(--ink); font-style: italic; font-family: var(--gar); letter-spacing: .01em; padding-top: 4px; opacity: 0; transition: opacity .3s; }
.field.bad .err { opacity: 1; }
.field.bad .in { border-bottom-color: var(--ink); box-shadow: 0 1px 0 var(--ink); }

/* 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(--quiet); padding: 0 12px 8px 0; border-bottom: 1px solid var(--rule); white-space: nowrap; }
table.hair td { padding: 11px 12px 11px 0; border-bottom: 1px solid var(--rule); vertical-align: baseline; font-size: 14px; }
table.hair .r, table.hair th.r { text-align: right; padding-right: 0; padding-left: 12px; }
table.hair td.k { font-family: var(--gar); font-weight: 500; font-size: 10px; letter-spacing: .3em; text-transform: uppercase; white-space: nowrap; }
table.hair td.n { font-family: var(--gar); font-weight: 300; font-size: 17px; letter-spacing: 0; white-space: nowrap; font-variant-numeric: lining-nums tabular-nums; }

/* word filters: the active one underlined */
.filters { display: flex; gap: 6px 18px; flex-wrap: wrap; align-items: baseline; }
.filters button { font-family: var(--gar); font-weight: 500; font-size: 12px; letter-spacing: .21em; text-transform: uppercase; padding: 6px 0 4px; color: var(--quiet); border-bottom: 1px solid transparent; transition: color .3s, border-color .3s; }
.filters button:hover { color: var(--ink); }
.filters button[aria-pressed="true"] { color: var(--ink); border-bottom-color: var(--ink); }

/* entrances */
@keyframes up { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
@keyframes fadeIn { to { opacity: 1; } }
.enter > * { opacity: 0; animation: up .9s var(--glide) forwards; }
.enter > *:nth-child(2) { animation-delay: .08s; } .enter > *:nth-child(3) { animation-delay: .16s; } .enter > *:nth-child(4) { animation-delay: .24s; }
.enter > *:nth-child(5) { animation-delay: .32s; } .enter > *:nth-child(6) { animation-delay: .4s; } .enter > *:nth-child(7) { animation-delay: .48s; } .enter > *:nth-child(n+8) { animation-delay: .56s; }
.leaving { opacity: 0; transform: translateY(-10px); transition: opacity .35s var(--ease), transform .35s var(--ease); }

/* ---- the opening: a line of return draws itself, the logo arrives letter by letter, the name tracks in ---- */
.splash { position: fixed; inset: 0; background: var(--ground); z-index: 100; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 26px; padding: 20px 24px 64px;
  transition: opacity .9s var(--ease), visibility .9s, transform 1.1s var(--glide); }
.splash.done { opacity: 0; visibility: hidden; transform: scale(1.03); }
.mark { width: 72px; height: 72px; overflow: visible; }
.mark path { fill: none; stroke: var(--ink); stroke-width: 1.1; stroke-linecap: square; stroke-dasharray: 1; stroke-dashoffset: 1; }
.mark .rise { stroke-width: 1.3; }
.mark .dot { stroke: var(--detail); stroke-width: 1.4; }
.splash .glogo { width: 168px; }
.splash .lg { opacity: 0; transform-box: fill-box; transform-origin: center; }
.splash .wm { opacity: 0; font-size: 13px; white-space: nowrap; }
.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 .ax { animation-delay: .1s; animation-duration: .9s; }
.play .mark .base { animation-delay: .55s; animation-duration: .7s; }
.play .mark .rise { animation-delay: .9s; animation-duration: 1.1s; animation-timing-function: var(--glide); }
.play .mark .dot { animation-delay: 1.75s; animation-duration: .5s; }
.play .lg { animation: letter 1.1s var(--glide) forwards; }
.play .lg-g { animation-delay: 1.7s; } .play .lg-d { animation-delay: 1.84s; } .play .lg-c { animation-delay: 1.98s; } .play .lg-i { animation-delay: 2.3s; animation-name: rise; }
.play .wm { animation: track 1.4s 2.75s var(--glide) forwards; }
@keyframes draw { to { stroke-dashoffset: 0; } }
@keyframes letter { from { opacity: 0; transform: translateY(14%) scale(.96); filter: blur(6px); } to { opacity: 1; transform: none; filter: blur(0); } }
@keyframes rise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes track { from { opacity: 0; letter-spacing: 1.1em; margin-right: -1.1em; } to { opacity: 1; letter-spacing: .5em; margin-right: -.5em; } }
@media (max-height: 560px) { .splash { gap: 14px; } .mark { width: 52px; height: 52px; } .splash .glogo { width: 120px; } }

@media (prefers-reduced-motion: reduce) {
  .play .mark path { animation-duration: .01s !important; animation-delay: 0s !important; }
  .play .lg, .play .wm { animation: none; opacity: 1; letter-spacing: .5em; }
  .play .lg { letter-spacing: 0; }
  .enter > * { animation: none; opacity: 1; }
  .link:hover::after { animation: none; }
  ::view-transition-old(root), ::view-transition-new(root) { animation: none; }
}