:root { --ink:#25235b; --base:#fbf1c5; --muted:#666051; --line:#d9cc9c; }
::selection { background:#f77b52; color:#25235b; }
.new-button { border-radius: 99px; }
.color-hero { display:grid; grid-template-columns:1fr 1.1fr; align-items:center; min-height:690px; gap:25px; padding-block:70px 65px; }
.color-hero-copy { position:relative; z-index:1; }
.color-hero-copy .eyebrow { display:flex; align-items:center; gap:10px; margin-bottom:27px; }
.color-dot { width:7px; height:7px; background:#e96847; border-radius:50%; }
.color-hero h1 { font-size:clamp(65px,6.1vw,94px); line-height:1.17; letter-spacing:-.07em; font-weight:600; }
.color-hero h1 span { display:block; color:#df613e; }
.color-lead { margin-top:29px; font-size:14px; line-height:1.9; }
.color-hero .new-button { margin-top:31px; }
.color-footnote { margin-top:25px; font-size:10px; color:var(--muted); }
.color-art { position:relative; width:115%; margin-left:-6%; }
.color-art img { width:100%; }
.color-art figcaption { position:absolute; bottom:0; left:50%; display:flex; flex-direction:column; align-items:center; gap:7px; font:italic 24px/1.2 Georgia,serif; transform:translateX(-50%) rotate(-7deg); white-space:nowrap; }
.color-art figcaption span:last-child { font:11px/1.4 var(--sans); }
.color-intro { position:relative; overflow:hidden; background:#314de7; color:#fff8d9; text-align:center; padding:90px 24px 100px; }
.color-intro h2 { font-size:clamp(45px,5.5vw,80px); line-height:1.3; letter-spacing:-.05em; font-weight:500; margin:30px 0; }
.color-intro p { font-size:14px; line-height:1.9; }
.intro-flower { position:absolute; right:5%; top:30%; font-size:170px; line-height:1; color:#a4b7ff; transform:rotate(14deg); }
.color-play { padding-block:100px; }
.color-play-heading { display:grid; grid-template-columns:1fr 1fr; column-gap:60px; align-items:end; }
.color-play-heading .eyebrow { grid-column:1 / -1; margin-bottom:27px; }
.color-play h2 { font-size:clamp(40px,4.7vw,66px); line-height:1.3; letter-spacing:-.05em; font-weight:500; }
.color-play-heading > p:last-child { font-size:13px; line-height:1.9; color:var(--muted); padding-bottom:8px; }
.color-tabs { display:flex; gap:10px; margin-top:44px; }
.color-tabs button { display:flex; justify-content:space-between; flex:1; align-items:center; min-height:61px; border:1px solid #c9bd90; padding:15px 25px; border-radius:12px 12px 0 0; font-size:13px; }
.color-tabs button span { font-size:22px; }
.color-tabs button[aria-selected=true] { background:#25235b; color:#fff8d9; border-color:#25235b; }
.color-panel { display:grid; grid-template-columns:1fr 1fr; align-items:center; gap:60px; min-height:400px; padding:50px 70px; border-radius:0 0 22px 22px; }
.panel-detour { background:#cfdda6; }
.panel-meet { background:#cfbbed; }
.panel-begin { background:#f39d74; }
.play-symbol { font-size:235px; text-align:center; font-weight:300; line-height:1; transform:rotate(-10deg); }
.color-panel .eyebrow { margin-bottom:20px; }
.color-panel h3 { font-size:36px; line-height:1.4; letter-spacing:-.04em; font-weight:500; }
.color-panel p:last-child { margin-top:22px; font-size:13px; line-height:1.95; max-width:330px; }
.color-panel:not([hidden]) > * { animation:color-panel-in .5s ease both; }
@keyframes color-panel-in { from { opacity:0; transform:translateY(12px); } to { opacity:1; transform:translateY(0); } }
.color-philosophy { background:#e57c5a; padding-block:90px 80px; }
.color-philosophy h2 { font-size:clamp(48px,6.2vw,88px); line-height:1.25; letter-spacing:-.065em; margin-top:32px; font-weight:500; }
.color-philosophy h2 span { color:#fff1cc; }
.color-philosophy-copy { display:flex; gap:10%; justify-content:flex-end; margin-top:42px; font-size:14px; line-height:1.9; }
.color-notes { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:25px; margin-top:65px; }
.color-notes article { border-top:1px solid #9d4c36; padding-top:22px; }
.color-notes article > span { font:11px/1 ui-monospace,monospace; }
.color-notes h3 { font-size:28px; font-weight:500; margin:27px 0 16px; }
.color-notes p { font-size:12px; }
.color-end { padding-block:110px 95px; }
.color-end h2 { font-size:clamp(66px,8vw,112px); font-weight:500; letter-spacing:-.07em; line-height:1.2; margin-top:28px; }
.color-end > div { display:flex; justify-content:space-between; align-items:end; margin-top:35px; gap:30px; }
.color-end > div p { font-size:16px; line-height:2; }
.color-end > div p span { font-size:11px; color:var(--muted); }
@media (max-width:1000px) { .color-hero { min-height:610px; } .color-hero h1 { font-size:64px; } .intro-flower { font-size:100px; right:2%; top:13%; } .color-panel { padding:45px; gap:35px; } }
@media (max-width:767px) {
  .color-hero { display:flex; flex-direction:column; align-items:stretch; min-height:0; padding-block:35px 40px; gap:8px; }
  .color-hero h1 { font-size:clamp(48px,12vw,76px); line-height:1.16; }
  .color-hero-copy .eyebrow { margin-bottom:22px; }
  .color-hero h1 span { display:inline; }
  .color-lead { font-size:12px; margin-top:24px; }
  .color-hero .new-button { margin-top:25px; font-size:12px; }
  .color-footnote { margin-top:20px; font-size:9px; }
  .color-art { width:108%; margin:0 -4%; }
  .color-art figcaption { font-size:20px; bottom:0; }
  .color-art figcaption span:last-child { font-size:9px; }
  .color-intro { padding:54px 22px 58px; }
  .color-intro h2 { font-size:38px; margin:25px 0; }
  .color-intro p { font-size:12px; }
  .intro-flower { font-size:60px; right:-16px; top:48px; }
  .color-play { padding-block:60px; }
  .color-play-heading { display:block; }
  .color-play h2 { font-size:39px; }
  .color-play-heading .eyebrow { margin-bottom:22px; }
  .color-play-heading > p:last-child { font-size:11px; margin-top:22px; }
  .color-tabs { gap:5px; margin-top:28px; }
  .color-tabs button { min-height:56px; font-size:11px; padding:12px; gap:5px; }
  .color-tabs button span { font-size:17px; }
  .color-panel { display:block; padding:28px; min-height:460px; }
  .play-symbol { font-size:120px; text-align:left; margin-bottom:20px; }
  .color-panel .eyebrow { margin-bottom:15px; }
  .color-panel h3 { font-size:28px; }
  .color-panel p:last-child { margin-top:17px; font-size:12px; }
  .color-philosophy { padding-block:55px; }
  .color-philosophy h2 { font-size:44px; margin-top:25px; }
  .color-philosophy h2 span { display:block; }
  .color-philosophy-copy { display:block; font-size:12px; margin-top:29px; }
  .color-philosophy-copy p+p { margin-top:20px; }
  .color-notes { gap:15px; margin-top:38px; }
  .color-notes h3 { font-size:21px; margin:23px 0 14px; }
  .color-notes p { font-size:10px; line-height:1.7; }
  .color-end { padding-block:62px; }
  .color-end h2 { font-size:57px; }
  .color-end > div { display:block; margin-top:26px; }
  .color-end > div p { font-size:13px; }
  .color-end .new-button { margin-top:27px; width:100%; }
}
@media (max-width:359px) { .color-hero h1 { font-size:43px; } .color-intro h2 { font-size:33px; } .color-tabs button { padding:10px; font-size:10px; } .color-notes h3 { font-size:19px; } .color-end h2 { font-size:49px; } }