/* Colours, by role. On the home page, clicking FretScore steps through palettes 1 → 2 → back
   (script.js sets html[data-palette]). Emojis never change. The drawings are masks, so they take these colours. */
:root{
  --bg:#FFFFFF;
  --ink:#000000;          /* handwriting (pencil) */
  --sketch:#000000;       /* sketch lines */
  --dot:#E12300;          /* webcam light on the laptop sketch */
  --brand:#0049B4;        /* the handwritten FretScore */
  --ray-a:#FFE500;        /* its sparkle */
  --ray-b:#FB3C00;
  --price:#999999;        /* £5 line: the quiet line */
  --logo:#121212;         /* wordmark + guitar sign-off */
  --button:#E0482B; --button-text:#FFFFFF;
  --field:#D6D6D6; --field-text:#111111; --placeholder:#8C8C8C;
  --text:#111111;         /* typed text: messages, legal pages */
  --muted:#6B6B6B; --rule:#EBEBEB;
}
/* 1 · Riso: amber paper, violet ink. FretScore goes fluoro pink, the loudest thing a riso press has, so it owns
   the page; its sparks are the palette's blue and orange. The price drops to orange: quieter, still warm. */
html[data-palette="1"]{
  --bg:#FFBE0B; --ink:#8338EC; --sketch:#8338EC; --dot:#FF006E;
  --brand:#FF006E; --ray-a:#3A86FF; --ray-b:#FB5607;
  --price:#FB5607; --logo:#8338EC;
  --button:#8338EC; --button-text:#FFBE0B;
  --field:#8338EC; --field-text:#8338EC; --placeholder:#FB5607;
  --text:#8338EC; --muted:#8338EC; --rule:#FB5607;
}
/* 2 · Night garden: deep forest ground, spring-green writing. FretScore is the brightest thing there is (lime),
   with sparks two steps down the same ramp, so they glint rather than shout. The price sits on mid green. */
html[data-palette="2"]{
  --bg:#004B23; --ink:#70E000; --sketch:#70E000; --dot:#CCFF33;
  --brand:#CCFF33; --ray-a:#9EF01A; --ray-b:#38B000;
  --price:#38B000; --logo:#9EF01A;
  --button:#CCFF33; --button-text:#004B23;
  --field:#38B000; --field-text:#CCFF33; --placeholder:#38B000;
  --text:#9EF01A; --muted:#38B000; --rule:#006400;
}

*{box-sizing:border-box}
html{background:var(--bg)}
body{margin:0;background:var(--bg);color:var(--text);font-family:'Geist',system-ui,sans-serif}
a{color:var(--muted);text-decoration:none} a:hover{color:var(--text)}
.page{max-width:1440px;margin:0 auto;display:flex;flex-direction:column;align-items:center}
[hidden]{display:none !important}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

/* A drawing: the PNG is a mask (its pencil texture is all in the transparency), filled with a colour. */
.draw{display:block;background-color:var(--c, var(--ink));-webkit-mask:var(--src) 0 0/100% 100% no-repeat;mask:var(--src) 0 0/100% 100% no-repeat}

/* Legal pages keep the header wordmark at the top as images. */
header{height:190px;padding-top:24px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px}
header .wordmark{width:205px;height:auto;display:block}
header .guitar{width:216px;height:auto;display:block}

/* Story: handwriting, all at one scale so the writing stays one size.
   --u = one pixel of the original drawing. Desktop: 0.42px. Narrower: shrinks so the widest line fits;
   below 780px, long lines break between pieces (never inside one) so the writing stays readable. */
.story{--u:min(0.42px, (100vw - 32px) / 2494);width:100%;max-width:1100px;padding:40px 0 88px;display:flex;flex-direction:column;align-items:center;gap:40px}
.story .line{margin:0;display:flex;align-items:baseline;justify-content:center;gap:calc(40 * var(--u)) calc(50 * var(--u))}
.story .line .draw{flex:none;width:calc(var(--iw) * var(--u));aspect-ratio:var(--iw) / var(--ih);translate:0 calc(var(--d) * var(--u));rotate:var(--r, 0deg)}
.emoji{flex:none;width:calc(130 * var(--u));font-size:calc(96 * var(--u));line-height:1;text-align:center;font-family:'Apple Color Emoji','Segoe UI Emoji','Noto Color Emoji',sans-serif}
/* FretScore + sparkle: the box is just the word, so the rays spill out instead of pushing lines apart. */
.story .fs{position:relative;padding:0;border:0;background:none;cursor:inherit;flex:none;width:calc(923 * var(--u));height:calc(121 * var(--u))}
.story .fs .draw{position:absolute;left:0;top:calc(-145 * var(--u));width:100%;aspect-ratio:923 / 473}
/* Desktop: "FretScore writes the tab for them." is one line (three lines in all). */
.story .opening{display:contents}
.story .fs-block{display:flex;align-items:baseline;justify-content:center;gap:calc(50 * var(--u));padding-top:calc(110 * var(--u))}
.story .sketch{position:relative;display:block;height:clamp(220px, 60vw, 360px);aspect-ratio:var(--iw) / var(--ih);margin:56px 0 24px}
.story .sketch .draw{--c:var(--sketch);position:absolute;inset:0}
/* The price and the ask belong together: a little extra space above the price, a little less below it. */
.story .price{--c:var(--price);margin-top:35px}
.story .break{display:none}
@media (max-width:780px){
  .story{--u:min(0.42px, (100vw - 32px) / 1580)}
  .story .line{flex-wrap:wrap}
  /* Poem breaks, stepped: "You teach guitar" / "over 📹 calls." and "Your students squint" / "at your ✋ on the frets."
     The first row starts --inset in from the left, the second ends --inset in from the right. */
  .story .stepped{width:100%}
  /* Line 1: pushed in until "guitar" ends right above the middle of the 📹 below it. In drawing pixels, "guitar"'s
     ink ends 1006 into its row, and the emoji's middle is 378 in from the end of the second row. */
  .story .line-1{--inset:calc((100% - 1384 * var(--u)) / 2)}
  .story .line-2{--inset:3%}
  .story .stepped .break{display:block;flex-basis:100%}
  .story .stepped .start{margin-left:var(--inset);margin-right:auto}
  .story .stepped .break + .draw{margin-left:auto}
  .story .stepped .end{margin-right:var(--inset)}
  /* The opening fills exactly one screen: the writing starts 40px from the top, "writes the tab for them." ends 48px
     from the bottom (the padding corrects for where the ink sits inside its box), and FretScore takes the middle of
     whatever space is left (never less than its sparkle needs). */
  .story .opening{width:100%;min-height:100vh;min-height:100svh;display:flex;flex-direction:column;align-items:center;gap:28px;padding:calc(40px - 56 * var(--u)) 0 calc(48px + 21 * var(--u))}
  .story .fs-block{width:100%;flex:1;flex-direction:column;align-items:center;gap:0;padding:0}
  .story .fs-block > :first-child{margin:auto 0;padding:calc(150 * var(--u)) 0 calc(230 * var(--u))}
}

/* Waiting list, under the price. */
.signup{display:flex;flex-direction:column;align-items:center;gap:28px}
form{display:flex;gap:8px}
input{width:260px;height:44px;border:1px solid var(--field);border-radius:0;padding:0 16px;font:15px 'Geist',sans-serif;color:var(--field-text);background:transparent;outline:none}
input::placeholder{color:var(--placeholder)}
input:focus{border-color:var(--field-text)}
.join{height:44px;padding:0 20px;border:0;border-radius:0;background:var(--button);color:var(--button-text);font:600 15px 'Geist',sans-serif;cursor:pointer}
.join:disabled{cursor:wait}
.thanks{margin:0;height:44px;display:flex;align-items:center;font-size:15px}
.error{margin:-16px 0 0;font-size:13px}

/* Sign-off: the wordmark and guitar close the page. */
.signoff{display:flex;flex-direction:column;align-items:center;gap:12px;padding:120px 0 72px}
.signoff .draw{--c:var(--logo)}
.signoff .wordmark{width:205px;aspect-ratio:620 / 151}
.signoff .guitar{width:216px;aspect-ratio:660 / 258}

footer{width:1200px;max-width:100%;height:120px;border-top:1px solid var(--rule);display:flex;align-items:center;justify-content:space-between;font-size:13px;color:var(--muted)}
footer nav{display:flex;gap:24px}

/* Legal pages */
.legal{width:100%;max-width:680px;padding:0 16px 96px;font-size:15px;line-height:1.6}
.legal h1{font-size:32px;font-weight:500;letter-spacing:-0.02em;margin:0 0 24px}
.legal h2{font-size:17px;font-weight:600;margin:32px 0 8px}
.legal a{color:var(--text);text-decoration:underline}

@media (max-width:900px){
  .signup{width:100%;padding:0 16px}
  form{flex-direction:column;width:100%}
  input,.join{width:100%}
  .story{padding:64px 16px 60px;gap:28px}
  .story .price{margin-top:23px}
  .story .sketch{margin:24px 0 0}
  .signoff{padding:88px 0 56px}
  footer{height:auto;flex-direction:column;gap:16px;padding:32px 16px;text-align:center}
  footer nav{flex-wrap:wrap;justify-content:center;gap:12px 24px}
}

@media (max-width:780px){
  .story{padding-top:0}
  /* Both sketches sit 50px (ink to ink) below the line before them: the laptop under "writes the tab for them.", the
     call window under "Oh, and chord names too." 50px also keeps the laptop just below the first screen, whose last
     line ends 48px above the bottom. The drawing-px terms cancel where the ink sits inside each line's box. */
  .story .opening + .sketch{margin-top:calc(-28px - 5 * var(--u))}
  .story .line + .sketch{margin-top:calc(19px + 24 * var(--u))}
}