/* marksharp page */
/* Fira Sans (Google Font), self-hosted in /fonts */
@font-face { font-family: "Fira Sans"; font-style: normal; font-weight: 300; font-display: swap; src: url("../../fonts/fira-sans-latin-ext-300-normal.woff2") format("woff2"); unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: "Fira Sans"; font-style: normal; font-weight: 300; font-display: swap; src: url("../../fonts/fira-sans-latin-300-normal.woff2") format("woff2"); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: "Fira Sans"; font-style: normal; font-weight: 400; font-display: swap; src: url("../../fonts/fira-sans-latin-ext-400-normal.woff2") format("woff2"); unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: "Fira Sans"; font-style: normal; font-weight: 400; font-display: swap; src: url("../../fonts/fira-sans-latin-400-normal.woff2") format("woff2"); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: "Fira Sans"; font-style: normal; font-weight: 600; font-display: swap; src: url("../../fonts/fira-sans-latin-ext-600-normal.woff2") format("woff2"); unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: "Fira Sans"; font-style: normal; font-weight: 600; font-display: swap; src: url("../../fonts/fira-sans-latin-600-normal.woff2") format("woff2"); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: "Fira Sans"; font-style: normal; font-weight: 800; font-display: swap; src: url("../../fonts/fira-sans-latin-ext-800-normal.woff2") format("woff2"); unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: "Fira Sans"; font-style: normal; font-weight: 800; font-display: swap; src: url("../../fonts/fira-sans-latin-800-normal.woff2") format("woff2"); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: "Fira Sans"; font-style: italic; font-weight: 300; font-display: swap; src: url("../../fonts/fira-sans-latin-ext-300-italic.woff2") format("woff2"); unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: "Fira Sans"; font-style: italic; font-weight: 300; font-display: swap; src: url("../../fonts/fira-sans-latin-300-italic.woff2") format("woff2"); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
/* the MarkSharp story keeps its own font and colours; the site header and footer keep theirs */
.header, .footer { font-family: var(--font); color: var(--black); }   /* site chrome keeps the site font, not the MarkSharp one */
.footer { position: relative; z-index: 3; }

@media (max-width: 900px) {
  .footer .container { width: calc(100% - 40px); }
}

:root{
  --ms-paper:#ffffff;
  --ms-ink:#1d1526;
  --ms-ink-soft:#4a4054;
  --ms-plum:#7a4aa8;
  --ms-gold:#e9c94a;
  --ms-teal:#4fbfb0;
  --ms-font:"Fira Sans", "Helvetica Neue", Arial, sans-serif;
  box-sizing:border-box;
  padding-top:env(safe-area-inset-top,0px);
  padding-bottom:env(safe-area-inset-bottom,0px);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]){ --ms-paper:#ffffff; --ms-ink:#1d1526; }
}
:root[data-theme="dark"]{ --ms-paper:#ffffff; --ms-ink:#1d1526; }
*,*::before,*::after{box-sizing:inherit}
html{scroll-padding-top:env(safe-area-inset-top,0px); -webkit-text-size-adjust:100%}
html,body{margin:0}
body{
background:var(--ms-paper);
color:var(--ms-ink);
font-family:var(--ms-font);
font-weight:400;
overflow-x:hidden;
-webkit-font-smoothing:antialiased;
}

/* ---------- loader ---------- */
.loader{position:fixed; inset:0; z-index:80; background:var(--ms-paper);display:grid; place-items:center;transition:opacity .6s ease, visibility .6s;}
.loader.done{opacity:0; visibility:hidden}
.loader span{font-weight:800; letter-spacing:.02em; font-size:var(--fs-sm);image-rendering:pixelated; filter:blur(6px); animation:sharpen 1.6s ease-in-out infinite alternate;}
@keyframes sharpen{ to{ filter:blur(0) } }

/* ---------- top bar ---------- */
.bar{position:fixed; top:env(safe-area-inset-top,0px); left:0; right:0; z-index:20;display:flex; justify-content:space-between; align-items:center;padding:22px clamp(18px,3vw,40px);font-size:var(--fs-xs);pointer-events:none;}
.bar a{pointer-events:auto; color:var(--ms-ink); text-decoration:none}
.bar .mark{font-weight:800; letter-spacing:.06em}
.bar .hint{font-weight:300; color:var(--ms-ink-soft)}

/* ---------- stage ---------- */
.stage{position:relative}
.hands{
position:absolute; top:0; left:0; width:100%; height:100vh; height:100svh;
pointer-events:none; overflow:hidden;
}
.hand{
position:absolute; display:block;
image-rendering:pixelated; image-rendering:crisp-edges;
will-change:transform;
}
/* both source images are 3:2; hand occupies left ~52% / right ~48% */
.hand-left{
width:95vw; aspect-ratio:3/2;
left:-12vw; top:-12vw;
}
.hand-right{
width:95vw; aspect-ratio:3/2;
right:-12vw; top:0vw;
}

/* ---------- crawl ---------- */
.crawl{
position:relative; z-index:2;
max-width:min(62ch, 92vw); margin:0 auto;
padding:78vh 0 50vh;   /* the first line is already in view when the page opens */
text-align:center;
perspective:500px;
}
.line{
display:block;
font-size:var(--fs-h3);
line-height:1.3; font-weight:400;
margin:0;
transform-origin:center center;
will-change:transform, opacity;
}
.line.light{font-weight:300; color:var(--ms-ink-soft)}
.line.strong{font-weight:600}
.line.q{font-style:italic; font-weight:300; color:var(--ms-ink-soft)}
/* hierarchy: a big opener, beats separated by space (no dots), a highlighted key line, a strong close */
.line + .line{margin-top:.25em}
.line.line--beat{margin-top:1.6em}
.line.line--open{font-size:calc(var(--fs-h3) * 1.35); font-weight:700; letter-spacing:-.01em; line-height:1.15}
.line.line--key{font-weight:700; color:var(--ms-plum)}
.line.line--close{margin-top:1.6em; font-size:calc(var(--fs-h3) * 1.2); font-weight:700; line-height:1.2}

/* ---------- finale ---------- */
.finale{
position:relative; z-index:2;
min-height:100vh; min-height:100svh;
display:grid; place-items:center; text-align:center;
padding:0 20px;
}
.finale .tag{
font-size:var(--fs-xl); font-weight:300; color:var(--ms-ink-soft);
margin:0 0 .6em;
}
.finale .wordmark{
font-size:clamp(48px, 12vw, 168px); font-weight:800; line-height:.95;
letter-spacing:-.02em; margin:0;
background:linear-gradient(100deg, var(--ms-ink) 0 55%, var(--ms-plum) 55% 70%, var(--ms-gold) 70% 84%, var(--ms-teal) 84% 100%);
-webkit-background-clip:text; background-clip:text; color:transparent;
background-size:300% 100%; background-position:0 0;
}
.finale .cta{ margin-top:clamp(28px,4vh,44px); }   /* looks and flips like every other site button (.btn in assets/css/common.css) */

@media (max-width:720px) {
  /* phones: hands come in at an angle. CSS 'rotate' (not 'transform') so GSAP's reach-in movement on transform still works */
  .hand-left{width:130vw; left:-40vw; top:38vw; rotate:15deg !important}
  .hand-right{width: 130vw;right: -45vw;top: auto;bottom: 39vw;rotate: 25deg !important;}   /* reaching up-left towards the left hand, not standing upright */
  .crawl{padding:78vh 0 30vh}
  .bar .hint{display:none}
}
@media (prefers-reduced-motion: reduce) {
  .loader span{animation:none; filter:none}
  .line{opacity:1 !important; transform:none !important; filter:none !important}
}