/* Calder, '90s anime direction (October 29, 2026). The game paints its lakefront city like a late-'90s
   anime, so the page reads like one of its title cards. It keeps Calder's ivory daylight ground with
   indigo ink and a deep indigo header and footer; a framed title card; the title and names in a heavy
   Mincho the way anime title cards set them; quiet Zen Kaku Gothic New for reading; and the party's
   own outfit colors. Captures keep their own edges. */
@font-face{font-family:"Shippori Mincho B1";src:url("/games/calder/fonts/shippori-mincho-b1-latin-800-normal.woff2") format("woff2");font-weight:800;font-display:swap}
@font-face{font-family:"Zen Kaku Gothic New";src:url("/games/calder/fonts/zen-kaku-gothic-new-latin-400-normal.woff2") format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Zen Kaku Gothic New";src:url("/games/calder/fonts/zen-kaku-gothic-new-latin-700-normal.woff2") format("woff2");font-weight:700;font-display:swap}

.cal-site{
  --ink:#1b1a33;--deep:#0f0e1d;--panel:#e5e2d8;--panel-2:#d9d5c8;--paper:#efede6;--body:#3a3850;--muted:#55526a;--line:rgba(27,26,51,.16);
  --rose:#a63a54;--light:#f7f4ec;--dim:#b3adc4;--eli:#2f7c84;--jonah:#a8741f;--mara:#56704f;--darius:#4b5c7c;
  --mincho:"Shippori Mincho B1","Noto Serif",Georgia,serif;--sans:"Zen Kaku Gothic New",system-ui,sans-serif;--display:var(--mincho)}
body.cal-site{background:var(--paper)}
.cal-site main{position:relative;background:var(--paper);box-shadow:0 0 0 100vmax var(--paper);clip-path:inset(0 -100vmax);color:var(--ink);font-family:var(--sans)}
.cal-site main h2,.cal-site main h3{font-family:var(--mincho);font-weight:800;text-transform:none;letter-spacing:.01em;color:var(--ink)}
.cal-site main p{line-height:1.65}
.cal-site main :focus-visible{outline:3px solid var(--rose);outline-offset:3px}
.cal-site main a:hover{color:inherit}
.cal-site main section{scroll-margin-top:96px}

/* Actions */
.cal-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:26px}
.cal-btn{display:inline-flex;align-items:center;gap:10px;min-height:48px;padding:12px 22px;border:1.5px solid var(--ink);color:var(--ink);font-weight:700;font-size:16px;text-decoration:none;transition:background .15s,color .15s}
.cal-btn:hover{background:var(--panel-2)}
.cal-btn:active{background:var(--panel)}
.cal-btn.primary{background:var(--ink);color:var(--paper)}
.cal-site .cal-btn.primary:hover{background:var(--rose);border-color:var(--rose);color:var(--paper)}

/* Title card: a double rule like the frame of an old title card, centered, with the city underneath */
.cal-card{margin:40px 0 0;padding:64px 48px 28px;text-align:center;border:1px solid rgba(27,26,51,.55);outline:1px solid rgba(27,26,51,.16);outline-offset:6px;background:radial-gradient(ellipse at 50% 28%,#f9f7f1,var(--paper) 68%)}
.cal-tag{margin:0;font-weight:700;font-size:14px;letter-spacing:.16em;text-transform:uppercase;color:var(--rose)}
.cal-site .cal-title{margin:6px 0 8px;font:800 clamp(96px,12.5vw,196px)/.95 var(--mincho);letter-spacing:.05em;color:var(--ink);text-transform:none}
.cal-lead{max-width:44ch;margin:0 auto;font-size:20px;color:var(--body)}
.cal-card .cal-actions{justify-content:center}
.cal-strip{display:grid;grid-template-columns:2fr 1fr 1fr;grid-template-rows:auto auto;gap:8px;margin:36px 0 0}
.cal-strip .cal-shot{border:0}
.cal-strip .cal-shot img{aspect-ratio:16/9}
.cal-strip .lead{grid-row:span 2}
.cal-strip .lead img{height:100%;aspect-ratio:auto}
.cal-status{max-width:62ch;margin:18px auto 0;font-size:15px;color:var(--muted)}
.cal-status b{color:var(--ink)}
.cal-site .cal-subnav{margin-top:28px;border-bottom:1px solid var(--line);font-weight:700;color:var(--ink)}
.cal-site .cal-subnav a[aria-current]{text-decoration-color:var(--rose)}

/* Sections */
.cal-story,.cal-party,.cal-faces,.cal-city,.cal-combat,.cal-route,.cal-themes{padding:88px 0 0}
.cal-head{max-width:760px;margin-bottom:32px}
.cal-head h2,.cal-story h2,.cal-close h2{margin:0;font-size:clamp(38px,4.4vw,58px);line-height:1.05}
.cal-head p{margin:14px 0 0;font-size:18px;color:var(--body)}
.cal-note{margin-top:22px;padding-left:16px;border-left:3px solid var(--rose);color:var(--ink);font-weight:700}

.cal-story{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:48px;align-items:start}
.cal-story-copy p{font-size:18px;color:var(--body);max-width:60ch}
.cal-story-copy h2{margin-bottom:22px}
.cal-evidence{display:grid;gap:18px}

/* Captures: the game's frame, a quiet caption below */
.cal-shot{display:block;background:var(--panel);color:var(--ink);text-decoration:none;border:1px solid var(--line);transition:transform .15s,box-shadow .15s}
.cal-shot img{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover}
.cal-shot span{display:flex;justify-content:space-between;align-items:baseline;gap:12px;padding:10px 14px 9px}
.cal-shot b{font-weight:700;font-size:15px}
.cal-shot small{font-size:13px;color:var(--muted);text-align:right}
.cal-shot:hover{transform:translateY(-2px);box-shadow:0 14px 30px rgba(27,26,51,.18)}
.cal-shot:hover b{color:var(--rose)}
.cal-shots{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.cal-shots.two{grid-template-columns:2fr 1fr}
.cal-shots.one{grid-template-columns:minmax(0,760px)}
.cal-shots .wide{grid-column:span 2;grid-row:span 2}
.cal-shots .wide img{height:calc(100% - 41px);aspect-ratio:auto}
.cal-shots.two .wide{grid-column:auto;grid-row:auto}
.cal-shots.two .wide img{height:auto;aspect-ratio:16/9}
.cal-shots.two{align-items:start}
/* Battle screens are evidence: shown whole, never cropped. */
.cal-shots.stack{grid-template-columns:1fr 1fr}
.cal-shots.stack .wide{grid-column:1/-1;grid-row:auto}
.cal-shots.stack .wide img{height:auto;aspect-ratio:16/9}

/* Party: each name runs down a band of that character's color, the way anime credits stack */
.cal-members{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border-top:1px solid var(--line)}
.cal-member{border-right:1px solid var(--line)}
.cal-member:last-child{border-right:0}
.cal-member-art{position:relative;display:grid;grid-template-columns:auto 1fr;height:500px;overflow:hidden}
.cal-site main .cal-name{grid-row:1/3;margin:0;padding:18px 10px;writing-mode:vertical-rl;font-size:38px;line-height:1;letter-spacing:.08em;background:var(--c);color:var(--light)}
.cal-role{position:absolute;right:14px;top:14px;margin:0;font-size:14px;line-height:1.4;color:var(--muted);text-align:right;z-index:1}
.cal-member-art img{position:absolute;left:58px;right:0;bottom:0;width:calc(100% - 58px);height:86%;object-fit:contain;object-position:bottom}
.cal-member-copy{padding:18px 18px 0}
.cal-member-copy p{margin:0 0 10px;font-size:15.5px;color:var(--body)}
.cal-site .cal-member-copy .cal-joins{font-weight:700;color:var(--rose)}
.cal-site .cal-member-copy .cal-plays{color:var(--ink);font-weight:700}

/* Faces: the dialogue expressions, one cell of a 3 x 3 sheet at a time */
.cal-face-app{display:grid;grid-template-columns:minmax(0,420px) minmax(0,1fr);gap:40px;align-items:start}
.cal-face-app[hidden]{display:none}
.cal-face-controls h3{margin:0 0 12px;font:700 13px var(--sans);letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.cal-face-stage{background:var(--panel);border:1px solid var(--line);padding:18px 18px 12px}
.cal-face{aspect-ratio:1;background-size:300% 300%;background-repeat:no-repeat;background-color:var(--panel-2)}
.cal-face-name{margin:12px 0 0;color:var(--ink)!important;font-size:15px}
.cal-face-tabs,.cal-moods{display:flex;flex-wrap:wrap;gap:8px}
.cal-face-controls .cal-face-tabs{margin-bottom:28px}
.cal-site .cal-face-tab,.cal-site .cal-mood{min-height:44px;padding:8px 16px;border:1.5px solid var(--ink);border-radius:0;background:transparent;color:var(--ink);font:700 15px var(--sans);text-transform:none;letter-spacing:0;cursor:pointer}
.cal-site .cal-mood{border-color:var(--line);font-weight:400}
.cal-site .cal-face-tab:hover,.cal-site .cal-mood:hover{background:var(--panel-2)}
.cal-site .cal-face-tab[aria-pressed=true]{background:var(--ink);color:var(--paper)}
.cal-site .cal-mood[aria-pressed=true]{background:var(--rose);border-color:var(--rose);color:var(--paper)}
.cal-sheets{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px}
.cal-sheets.js{display:none}
.cal-sheet{margin:0;background:var(--panel);padding:10px}
.cal-sheet img{width:100%;height:auto}
.cal-sheet figcaption{margin-top:8px;color:var(--ink);font-size:13px}

/* The city: three districts, then the film filter */
.cal-district{display:grid;grid-template-columns:minmax(0,260px) minmax(0,1fr);gap:32px;padding:28px 0;border-top:1px solid var(--line)}
.cal-district h3{margin:0 0 8px;font-size:32px;line-height:1.05}
.cal-district-copy p{margin:0;color:var(--body)}
.cal-look{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);gap:32px;align-items:center;margin:40px 0 0;padding:28px 0 0;border-top:1px solid var(--line)}
.cal-look-frame{position:relative;aspect-ratio:16/9;border:1px solid var(--line);overflow:hidden;background:var(--panel)}
.cal-look-frame img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:opacity .45s ease}
.cal-look-film{opacity:0}
.cal-look[data-state=film] .cal-look-film{opacity:1}
.cal-look h3{margin:0 0 10px;font-size:30px;line-height:1.1}
.cal-look p{margin:0 0 18px;color:var(--body)}
.cal-look-switch{display:flex;gap:8px}
.cal-look-switch[hidden]{display:none}
.cal-site .cal-look-switch button{min-height:44px;padding:8px 18px;border:1.5px solid var(--ink);border-radius:0;background:transparent;color:var(--ink);font:700 15px var(--sans);text-transform:none;letter-spacing:0;cursor:pointer}
.cal-site .cal-look-switch button:hover{background:var(--panel-2)}
.cal-site .cal-look-switch button[aria-pressed=true]{background:var(--ink);color:var(--paper);cursor:default}
/* Without the script, both views sit side by side. */
.cal-look.no-js .cal-look-frame{aspect-ratio:auto;display:grid;grid-template-columns:1fr 1fr;gap:8px;border:0;background:none}
.cal-look.no-js .cal-look-frame img{position:static;opacity:1;aspect-ratio:16/9}

/* Combat */
.cal-rules{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px;margin:36px 0 0;padding:0;list-style:none}
.cal-rules li{padding-top:14px;border-top:3px solid var(--rose);color:var(--body);font-size:16px;line-height:1.55}
.cal-rules b{display:block;margin-bottom:6px;color:var(--ink);font:800 21px/1.2 var(--mincho)}

/* The road ahead: the plan, with what is built set apart */
.cal-regions{margin:0;padding:0;list-style:none;border-top:1px solid var(--line)}
.cal-regions li{display:grid;grid-template-columns:220px minmax(0,1fr) 230px;gap:24px;align-items:baseline;padding:16px 0;border-bottom:1px solid var(--line)}
.cal-regions b{font:800 24px/1.1 var(--mincho)}
.cal-regions span{color:var(--body)}
.cal-regions em{font-style:normal;font-size:14px;font-weight:700;color:var(--muted);text-align:right}
.cal-regions .built em{color:var(--rose)}
.cal-regions .planned b{color:var(--muted)}

/* Themes */
.cal-tracks{display:grid;gap:10px;max-width:820px;margin:0;padding:0;list-style:none}
.cal-site .cal-track{display:grid;grid-template-columns:28px minmax(0,1fr) auto;gap:16px;align-items:center;width:100%;min-height:64px;padding:12px 20px;border:1px solid var(--line);border-radius:0;background:var(--panel);color:var(--ink);font:700 18px var(--sans);text-align:left;text-transform:none;letter-spacing:0;cursor:pointer}
.cal-site .cal-track:hover{background:var(--panel-2)}
.cal-site .cal-track[aria-pressed=true]{border-color:var(--rose);box-shadow:inset 4px 0 0 var(--rose)}
.cal-track-meta{font-weight:400;font-size:14px;color:var(--muted)}
.cal-track-icon{width:0;height:0;border-left:13px solid var(--rose);border-block:8px solid transparent;margin-left:6px}
.cal-track[aria-pressed=true] .cal-track-icon{width:12px;height:16px;border:0;border-inline:4px solid var(--rose)}
.cal-track-file{display:none}
.cal-tracks.no-js .cal-track{display:none}
.cal-tracks.no-js .cal-track-file{display:block;padding:14px 20px;background:var(--panel);color:var(--ink)}

.cal-close{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:48px;margin-top:96px;padding:56px 0 72px;border-top:1px solid var(--line)}
.cal-close p{margin:0;font-size:18px;color:var(--body)}

@media (max-width:1100px){
  .cal-members{grid-template-columns:repeat(2,minmax(0,1fr))}
  .cal-member:nth-child(2){border-right:0}
  .cal-member:nth-child(n+3){border-top:1px solid var(--line)}
  .cal-member-copy{padding-bottom:22px}
  .cal-rules{grid-template-columns:repeat(2,minmax(0,1fr))}
  .cal-district{grid-template-columns:1fr;gap:16px}
  .cal-look{grid-template-columns:1fr;gap:20px}
  .cal-regions li{grid-template-columns:180px minmax(0,1fr);gap:4px 20px}
  .cal-regions em{grid-column:2;text-align:left}
}
@media (max-width:760px){
  .cal-card{margin:20px 0 0;padding:40px 14px 16px;outline-offset:4px}
  .cal-site .cal-title{font-size:min(21vw,96px)}
  .cal-lead{font-size:17px}
  .cal-strip{grid-template-columns:1fr 1fr;margin-top:26px}
  .cal-strip .lead{grid-column:1/-1;grid-row:auto}
  .cal-strip .lead img{height:auto;aspect-ratio:16/9}
  .cal-story,.cal-party,.cal-faces,.cal-city,.cal-combat,.cal-route,.cal-themes{padding-top:60px}
  .cal-head p,.cal-story-copy p{font-size:17px}
  .cal-story{grid-template-columns:1fr;gap:28px}
  .cal-shots,.cal-shots.two{grid-template-columns:1fr 1fr;gap:12px}
  .cal-shots .wide,.cal-shots.two .wide{grid-column:1/-1;grid-row:auto}
  .cal-shots .wide img{height:auto;aspect-ratio:16/9}
  .cal-shots.one{grid-template-columns:1fr}
  /* A picture left alone on the last row takes the full width. */
  .cal-shots:not(:has(.wide))>.cal-shot:last-child:nth-child(odd),.cal-shots:has(.wide)>.cal-shot:last-child:nth-child(even){grid-column:1/-1}
  .cal-shot span{flex-direction:column;gap:2px;padding:8px 10px}
  .cal-shot b{font-size:14px}.cal-shot small{font-size:12px;text-align:left}
  .cal-member-art{height:360px}
  .cal-site main .cal-name{font-size:26px;padding:14px 7px}
  .cal-role{top:auto;bottom:10px;right:10px;font-size:13px;padding:4px 8px;background:rgba(239,237,230,.9)}
  .cal-member-art img{left:44px;width:calc(100% - 44px);height:92%}
  .cal-member-copy{padding:14px 12px 20px}
  .cal-member-copy p{font-size:15px}
  .cal-face-app{grid-template-columns:1fr;gap:20px}
  .cal-face-stage{max-width:360px}
  .cal-sheets{grid-template-columns:1fr 1fr}
  .cal-rules{grid-template-columns:1fr;gap:18px}
  .cal-regions li{grid-template-columns:1fr;gap:4px}
  .cal-regions em{grid-column:auto}
  .cal-site .cal-track{grid-template-columns:28px minmax(0,1fr);row-gap:2px}
  .cal-track-meta{grid-column:2}
  .cal-close{grid-template-columns:1fr;gap:20px;margin-top:64px}
}
@media (max-width:420px){
  .cal-members{grid-template-columns:1fr}
  .cal-member{border-right:0}
  .cal-member:nth-child(n+2){border-top:1px solid var(--line)}
  .cal-member-art{height:420px}
}
@media (prefers-reduced-motion:reduce){.cal-shot,.cal-btn,.cal-look-frame img{transition:none}.cal-shot:hover{transform:none}}

/* Header and footer in deep indigo, edge to edge, framing the daylight page with a rose rule */
.cal-site .site-nav,.cal-site footer{background-image:none}
.cal-site .site-nav::after{display:none}
.cal-site .nav-links{font-family:var(--sans);font-weight:700;letter-spacing:.12em;text-transform:uppercase;font-size:13px;color:var(--light)}
.cal-site .nav-links a::after{background:#ec93a2}
.cal-site .brand-subtitle{color:#ec93a2!important}
.cal-site .site-nav{background:var(--deep);border-bottom:0;box-shadow:0 0 0 100vmax var(--deep);clip-path:inset(0 -100vmax -1px)}
.cal-site .site-nav::before{content:"";position:absolute;left:calc(50% - 50vw);right:calc(50% - 50vw);bottom:-1px;height:1px;background:rgba(236,147,162,.6);pointer-events:none}
.cal-site footer{background:var(--deep);border-top:0;overflow:visible;color:var(--dim);box-shadow:0 0 0 100vmax var(--deep);clip-path:inset(-10px -100vmax 0)}
.cal-site footer::before{display:block!important;content:"";position:absolute;inset:-1px calc(50% - 50vw) auto;width:auto;height:1px;opacity:1;background:rgba(236,147,162,.6)}
.cal-site footer::after{color:var(--light);font-family:var(--mincho);font-weight:800;letter-spacing:.04em}
.cal-site footer .footer-row{border-top-color:rgba(242,237,227,.2)}