/* The New Rhythm — shared page system (C3, "the marked-up page").
   Tokens are the Creatism Electric Cream set; canon lives in the vault at
   .claude/skills/creatism-design/. One file for every page: tokens, type, bar, footer,
   button, the hand marks and the connect panel. Page layout stays in each page.

   Colour rule: purple is only what you can click. Gold only highlights a figure from
   his own record. Red is only the hand-drawn marks. No accent fills a band.

   Sizes (nine, never more than ten): 120 84 38 26 21 17 15 13 11.
   Spacing: 4 8 16 24 40 64 96 128. */
:root{
  --cream:#FFFAED; --ink:#1C1C1C; --soft:#3A3A3A; --muted:#8A8070;
  --purple:#5B3BF5; --purple-dk:#3A20C2; --red:#FF4D6D; --gold:#FFC300; --gold-dk:#8A6000;
  --hair:rgba(28,28,28,0.10); --line:rgba(28,28,28,0.18);
  --display:'Playfair Display',Georgia,serif;
  --body:'DM Sans',system-ui,sans-serif;
  --mono:'DM Mono',ui-monospace,monospace;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--cream);color:var(--ink);font-family:var(--body);font-size:17px;line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:hidden}
p,h1,h2,h3,figure{margin:0}
a{color:var(--purple);text-underline-offset:3px;text-decoration-thickness:1px}
a:hover{color:var(--purple-dk)}
:focus-visible{outline:2px solid var(--purple);outline-offset:3px}

/* the hand: every drawn mark is an inline svg with this class */
.hand{fill:var(--red);pointer-events:none;overflow:visible}

/* bar */
.bar{position:sticky;top:0;z-index:5;background:var(--cream);border-bottom:1px solid var(--hair)}
.bar-in{max-width:1248px;margin:0 auto;padding:16px 24px;display:flex;justify-content:space-between;align-items:baseline;gap:16px}
.mark{font-family:var(--display);font-weight:700;font-size:17px;color:var(--ink);text-decoration:none}
.mark:hover{color:var(--ink)}
.bar a{font-size:15px}

/* sheet: a 12-column page with a wide left margin; text usually sits on columns 4-9 */
.sheet{max-width:1248px;margin:0 auto;padding:0 24px}
.row{display:grid;grid-template-columns:repeat(12,1fr);column-gap:24px}

/* type */
h1{font-family:var(--display);font-weight:900;font-size:84px;line-height:1.02;letter-spacing:-0.02em}
h1 em{font-weight:400}
h2{font-family:var(--display);font-weight:700;font-size:38px;line-height:1.15;letter-spacing:-0.01em}
h3{font-family:var(--display);font-weight:700;font-size:26px;line-height:1.2}
.lede{font-family:var(--display);font-size:26px;line-height:1.3}
.big{font-size:21px;line-height:1.5}
.small{font-size:15px;color:var(--soft)}
.cap{font-family:var(--mono);font-size:11px;line-height:1.4;color:var(--muted)}
.meta{font-family:var(--mono);font-size:13px;color:var(--soft)}
.soft{color:var(--soft)}
mark{background:var(--gold);color:var(--ink);padding:0 4px}

/* the one button */
.btn{display:inline-block;padding:16px 24px;background:var(--purple);color:var(--cream);font-family:var(--body);font-weight:500;font-size:15px;line-height:1.6;text-decoration:none;border:0;cursor:pointer}
.btn:hover{background:var(--purple-dk);color:var(--cream)}
.btn[disabled]{opacity:.55;cursor:default}

/* footer */
footer{max-width:1248px;margin:128px auto 0;padding:0 24px 64px}
.foot{border-top:1px solid var(--line);padding-top:24px;display:flex;flex-wrap:wrap;justify-content:space-between;gap:16px 40px;font-size:15px}
.foot b{font-family:var(--display);font-size:17px}
.foot span{display:flex;flex-wrap:wrap;gap:8px 24px}
.sign{margin-top:40px;display:flex;flex-wrap:wrap;justify-content:space-between;gap:16px}

/* connect panel: download gate + enquiry form (site.js) */
.veil{position:fixed;top:0;right:0;bottom:0;left:0;background:rgba(28,28,28,0.18);z-index:60;display:none;align-items:center;justify-content:center;padding:24px}
.veil.open{display:flex}
.panel{background:var(--cream);border:1px solid var(--ink);max-width:480px;width:100%;max-height:100%;overflow:auto;padding:40px;position:relative}
.panel h3{margin:8px 0 0}
.panel p{color:var(--soft);font-size:15px;margin:8px 0 0}
.panel .x{position:absolute;top:8px;right:8px;border:0;background:none;font-size:21px;line-height:1;color:var(--muted);cursor:pointer;padding:8px}
.panel .x:hover{color:var(--ink)}
.panel label{display:block;font-family:var(--mono);font-size:11px;color:var(--muted);margin:16px 0 0}
.panel input,.panel textarea{display:block;width:100%;margin:4px 0 0;padding:8px 0;border:0;border-bottom:1px solid var(--ink);border-radius:0;font-family:var(--body);font-size:17px;background:transparent;color:var(--ink)}
.panel input:focus,.panel textarea:focus{outline:0;border-bottom-color:var(--purple)}
.panel .btn{margin:24px 0 0;width:100%;text-align:center}
.panel .fine{font-size:13px;color:var(--muted);margin:16px 0 0}
.panel .ok{font-family:var(--display);font-size:21px;color:var(--ink);margin:16px 0 0}
.panel .warn{color:var(--gold-dk);font-size:13px;margin:16px 0 0}

@media (max-width:820px){
  .row{display:block}
  h1{font-size:38px;line-height:1.08}
  h2{font-size:26px}
  h3{font-size:21px}
  .lede{font-size:21px}
  .big{font-size:17px}
  footer{margin-top:96px}
  .panel{padding:24px}
}