/* Palette tokens: edit this section for local colour experiments.
   Production deploys automatically when main is pushed. */
:root {
  color-scheme: light;
  --ink: #111;
  --muted: #595959;
  --border: #dedede;
  --canvas: #fff;
  --notice-surface: #f3f3f3;
  --action-hover: #343434;
  --art-border: #222;
  --art-base: #f2f2f2;
  --art-surface: #eee;
  --art-detail: #ddd;
  --art-line: #777;
  --art-caption: #666;
  --section-surface: #f5f5f5;
  --disabled-border: #b9b9b9;
  --disabled-surface: #e6e6e6;
  --disabled-text: #555;
  --divider: #e5e5e5;
  --action: var(--ink);
  --on-action: var(--canvas);
  --on-ink: var(--canvas);
  --focus: var(--ink);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:24px}
body{margin:0;background:var(--canvas);color:var(--ink);font-family:Arial,Helvetica,sans-serif;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
a:focus-visible,button:focus-visible{outline:3px solid var(--focus);outline-offset:6px}
.preview{font-size:10px;letter-spacing:1.8px;text-align:center;background:var(--notice-surface);padding:10px 12px}
header{max-width:1280px;margin:auto;display:flex;align-items:center;justify-content:space-between;padding:27px 40px}
.logo{font-family:Georgia,serif;font-size:42px;letter-spacing:-3px;font-weight:bold}
.logo span{font-family:Arial,sans-serif;font-size:29px;vertical-align:top;margin-left:5px}
nav{display:flex;gap:35px;font-size:13px}
.pill{display:inline-flex;gap:45px;align-items:center;background:var(--action);color:var(--on-action);padding:19px 29px;border-radius:40px;font-size:15px;font-weight:600}
.pill.small{padding:13px 22px;font-size:13px}
.pill:hover{background:var(--action-hover)}
.hero{text-align:center;padding:70px 24px 0;overflow:hidden}
.eyebrow{font-size:10px;font-weight:600;letter-spacing:1.7px;line-height:1.6}
h1{font-family:Georgia,'Times New Roman',serif;font-size:clamp(64px,7.5vw,108px);font-weight:400;letter-spacing:-6px;line-height:.99;margin:27px 0 24px}
h1 em{font-weight:400;font-style:italic}
.subline{font-size:21px;letter-spacing:-.5px}
.intro{max-width:570px;margin:18px auto 27px;color:var(--muted);font-size:15px;line-height:1.7}
.hint{color:var(--muted);font-size:11px;line-height:1.7;margin-top:14px}
.art{position:relative;height:330px;max-width:810px;margin:45px auto 0}
.tile{position:absolute;text-align:left;width:300px;height:220px;border:1px solid var(--art-border);padding:24px 28px;background:var(--art-base);border-radius:12px;overflow:hidden}
.tile.one{left:90px;top:35px;transform:rotate(-10deg);background:var(--ink);color:var(--on-ink)}
.tile.two{right:85px;top:60px;transform:rotate(9deg);background:var(--art-surface)}
.number{display:block;font-size:10px;letter-spacing:2px;margin-bottom:25px}
.tile b{font-size:25px;line-height:1.15;font-weight:400;letter-spacing:-1px}
.asterisk{position:absolute;font-size:115px;right:13px;bottom:-18px;color:var(--art-detail)}
.rings{position:absolute;right:-20px;bottom:-55px;width:160px;height:160px;border:1px solid var(--art-line);border-radius:50%;box-shadow:0 0 0 15px var(--art-surface),0 0 0 16px var(--art-line),0 0 0 31px var(--art-surface),0 0 0 32px var(--art-line)}
.line{position:absolute;top:150px;left:-200px;right:-200px;border-top:1px solid var(--art-detail);transform:rotate(-12deg);z-index:-1}
.artnote{position:absolute;bottom:8px;left:0;right:0;font-size:9px;letter-spacing:2px;color:var(--art-caption)}
.features{max-width:1160px;margin:50px auto 0;border-top:1px solid var(--border);display:grid;grid-template-columns:repeat(3,1fr);gap:70px;padding:48px 24px 65px}
.features h2{font-size:32px;line-height:1.12;letter-spacing:-1.1px;font-weight:500;margin:25px 0 18px}
.features p:not(.eyebrow){font-size:14px;line-height:1.7;color:var(--muted);max-width:260px}
.join{text-align:center;background:var(--section-surface);padding:65px 24px}
.join h2{font-family:Georgia,serif;font-size:65px;letter-spacing:-3px;font-weight:400;margin:16px 0}
.join>p:not(.eyebrow):not(.hint){font-size:16px}
.join button{border:1px solid var(--disabled-border);border-radius:30px;background:var(--disabled-surface);color:var(--disabled-text);padding:16px 24px;font-size:13px;margin:15px 0 0;cursor:not-allowed}
footer{max-width:1280px;margin:auto;padding:35px 40px;display:flex;align-items:center;justify-content:space-between;gap:30px}
footer p{font-size:11px;line-height:1.7;color:var(--muted)}
@media(max-width:650px){.preview{font-size:8px;letter-spacing:.9px}
header{padding:19px 22px}
.logo{font-size:35px}
.logo span{font-size:24px}
nav{display:none}
.pill.small{font-size:12px;padding:12px 18px}
.hero{padding:45px 20px 0}
.eyebrow{font-size:8px;letter-spacing:1.3px}
h1{font-size:65px;letter-spacing:-3.5px;margin-top:24px}
.subline{font-size:17px;line-height:1.5;max-width:260px;margin:20px auto}
.intro{font-size:13px;line-height:1.75;max-width:330px}
.pill{padding:17px 25px;font-size:14px}
.hint{font-size:10px}
.art{height:270px;margin-top:25px;max-width:350px}
.tile{width:200px;height:175px;padding:20px}
.tile.one{left:5px;top:35px}
.tile.two{right:0;top:65px}
.tile b{font-size:20px}
.number{margin-bottom:18px}
.asterisk{font-size:80px}
.rings{width:110px;height:110px;right:-25px}
.artnote{font-size:7px}
.features{display:block;margin:25px 24px 0;padding:15px 0 30px}
.features>div{padding:23px 0;border-bottom:1px solid var(--divider)}
.features>div:last-child{border:0}
.features h2{font-size:29px;margin:15px 0}
.features h2 br{display:none}
.features p:not(.eyebrow){font-size:13px;max-width:100%}
.join{padding:45px 24px}
.join h2{font-size:56px}
footer{padding:28px 24px;display:block}
footer p{font-size:10px}
}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}
}


@media(max-width:650px){.art{height:310px}
.tile.one{left:0;top:22px;width:180px}
.tile.two{right:0;top:105px;width:180px}
.tile b{font-size:18px}
.tile.one b{position:relative;z-index:1}
.tile.one .asterisk{font-size:65px;right:10px;bottom:-8px}
.artnote{bottom:0}
}