/* ============================================================
   chrome.css — shared header, footer, and page chrome
   for the newly designed /studios, /research, /partners pages.
   Matches the RDS Pure register established by the Offering
   page and the Brand Book (vermillion accent, dark grey type,
   serif body, grotesk display, coequal bilingual EN/JP).
   No em-dashes per project voice rule.
   ============================================================ */

*{box-sizing:border-box;}
html,body{margin:0;}
body{background:var(--paper);color:var(--ink);font-family:var(--serif);
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;}

/* shared content column */
.wrap{max-width:1100px;margin:0 auto;padding:0 48px;}
.wrap--wide{max-width:1320px;}

/* coequal bilingual EN/JP pair grid */
.pair{display:grid;grid-template-columns:1fr 1fr;gap:0 44px;margin:0 0 16px;}
.pair:last-child{margin-bottom:0;}
.pair .en{font-family:var(--serif);font-size:16.5px;line-height:1.56;margin:0;text-wrap:pretty;color:var(--ink);}
.pair .jp{font-family:var(--jpserif);font-size:15px;line-height:1.78;margin:0;text-wrap:pretty;color:var(--ink);}
.pair .en b,.pair .jp b{font-weight:600;}
.pair .en em,.pair .jp em{font-style:italic;}
.lead .en{font-size:18.5px;line-height:1.52;}
.lead .jp{font-size:16.5px;line-height:1.78;}

/* idle link color-cycle on pivotal phrases (matches offering page) */
@keyframes rds-link-cycle{
  0%{color:#E8551E;} 20%{color:#FAC748;} 40%{color:#5FB44A;}
  60%{color:#37B6C4;} 80%{color:#F88DAD;} 100%{color:#E8551E;}
}
.cycle{font-weight:600;color:var(--red);
  text-decoration:underline;text-underline-offset:0.16em;text-decoration-thickness:0.05em;}
@media (prefers-reduced-motion:no-preference){
  .cycle{animation:rds-link-cycle 2s linear infinite;}
}
@media print{.cycle{animation:none !important;color:var(--red);}}

/* ============================================================
   site header
   ============================================================ */
header.site{position:relative;}
header.site .bar{display:flex;align-items:center;justify-content:space-between;
  height:170px;padding:0 48px 0 26px;}
.brand{display:flex;align-items:center;gap:19px;text-decoration:none;color:inherit;opacity:.85;}
.brand .dot{width:48px;height:48px;border-radius:50%;background:var(--red);flex:none;}
.brand .nm{font-family:var(--serif);font-weight:900;font-size:34px;line-height:1.02;letter-spacing:.005em;color:var(--g333);white-space:nowrap;}
.brand .nm .j{display:block;font-family:var(--jpserif);font-weight:500;font-size:30px;color:var(--muted);margin-top:4px;letter-spacing:.04em;}
header.site .tag{font-family:var(--mono);font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--muted);text-align:right;line-height:1.55;}
header.site .tag b{color:var(--red);font-weight:600;}

/* breadcrumb (for hub child pages) */
.crumbs{font-family:var(--mono);font-size:11.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--muted);
  padding:0 0 26px;}
.crumbs a{color:var(--muted);text-decoration:none;}
.crumbs a:hover{color:var(--red);}
.crumbs .sep{margin:0 .55em;color:var(--n-c8);}
.crumbs .here{color:var(--red);}

/* ============================================================
   hero
   ============================================================ */
.hero{padding:8px 0 48px;}
.hero .kicker{font-family:var(--mono);font-size:13px;letter-spacing:.24em;text-transform:uppercase;color:var(--red);margin:0 0 22px;}
.hero-head{display:grid;grid-template-columns:1.05fr 1fr;gap:0 44px;align-items:baseline;}
.hero-head .en{font-family:var(--grotesk);font-weight:700;font-size:clamp(40px,5.4vw,72px);line-height:.98;letter-spacing:-0.022em;margin:0;text-wrap:balance;color:var(--g333);
  text-shadow:0.035em 0.05em 0 color-mix(in srgb, var(--red) 20%, transparent);}
.hero-head .jp{font-family:var(--jp);font-weight:700;font-size:clamp(28px,3.5vw,46px);line-height:1.12;letter-spacing:.01em;margin:0;color:var(--g333);
  text-shadow:0.035em 0.05em 0 color-mix(in srgb, var(--red) 20%, transparent);}
.hero .leads{margin-top:38px;display:grid;gap:18px;}

/* ============================================================
   section block (numbered, like the offering)
   ============================================================ */
section.blk{padding:50px 0;}
section.blk + section.blk{border-top:1px solid var(--rule);}
.inner{position:relative;padding-left:86px;}
.inner .sn{position:absolute;left:0;top:5px;font-family:var(--mono);font-size:13px;color:var(--red);letter-spacing:.04em;}
.titles{display:grid;grid-template-columns:1fr 1fr;gap:0 44px;align-items:baseline;margin-bottom:22px;}
.titles .en{font-family:var(--grotesk);font-weight:700;font-size:31px;line-height:1.05;letter-spacing:-0.018em;color:var(--g333);margin:0;
  text-shadow:0.04em 0.055em 0 color-mix(in srgb, var(--red) 20%, transparent);}
.titles .jp{font-family:var(--jp);font-weight:700;font-size:24px;line-height:1.18;color:var(--g333);margin:0;
  text-shadow:0.04em 0.055em 0 color-mix(in srgb, var(--red) 20%, transparent);}
section.blk:nth-of-type(even) .titles .en,
section.blk:nth-of-type(even) .titles .jp{text-shadow:0.04em 0.055em 0 color-mix(in srgb, var(--p-blue) 20%, transparent);}
@media (max-width:760px){.inner{padding-left:0;}}

/* ============================================================
   card — used by hubs to list child pages (phases, groups, studios)
   ============================================================ */
.card-grid{display:grid;gap:28px;}
.card-grid--2{grid-template-columns:1fr 1fr;}
.card-grid--3{grid-template-columns:repeat(3,1fr);}
.card-grid--4{grid-template-columns:repeat(4,1fr);}
@media (max-width:900px){.card-grid--3,.card-grid--4{grid-template-columns:1fr 1fr;}}
@media (max-width:620px){.card-grid--2,.card-grid--3,.card-grid--4{grid-template-columns:1fr;}}

.card{display:flex;flex-direction:column;text-decoration:none;color:inherit;
  border:1px solid var(--rule);background:var(--paper);transition:border-color .18s ease, transform .18s ease;}
.card:hover{border-color:var(--red);}
.card .ph{aspect-ratio:4/3;background:#eee;overflow:hidden;position:relative;}
.card .ph img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .6s ease;}
.card:hover .ph img{transform:scale(1.02);}
.card .ph .mk{position:absolute;left:14px;top:14px;width:32px;height:32px;}
.card .ph .mk svg{display:block;width:100%;height:100%;}
.card .ph .mk .fill{fill:var(--red);}
.card .ph .mk .stroke{fill:none;stroke:var(--red);stroke-width:3;}
.card .body{padding:18px 20px 22px;display:flex;flex-direction:column;gap:8px;}
.card .meta{font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);}
.card .meta .ix{color:var(--red);margin-right:.6em;letter-spacing:.18em;}
.card .name{font-family:var(--grotesk);font-weight:700;font-size:20px;line-height:1.18;letter-spacing:-0.008em;color:var(--g333);margin:0;}
.card .name .jp{display:block;font-family:var(--jp);font-weight:700;font-size:14.5px;margin-top:4px;color:var(--g464);letter-spacing:.02em;}
.card .blurb{font-family:var(--serif);font-size:14.5px;line-height:1.5;color:var(--ink-soft);margin:0;}
.card .blurb .jp{display:block;font-family:var(--jpserif);font-size:13.5px;line-height:1.7;color:var(--muted);margin-top:4px;}
.card.coming .ph{background:repeating-linear-gradient(45deg,var(--n-e2) 0 14px,var(--paper) 14px 28px);}
.card.coming .ph::after{content:"Coming Soon ・ 近日公開";position:absolute;inset:auto 0 14px 14px;
  font-family:var(--mono);font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--muted);}
.card.coming{opacity:.78;}
.card.coming:hover{border-color:var(--rule);}

/* card variant — wide horizontal (1 image + body) for hero phase rows */
.card-row{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:0;
  border:1px solid var(--rule);background:var(--paper);text-decoration:none;color:inherit;transition:border-color .18s ease;}
.card-row:hover{border-color:var(--red);}
.card-row .ph{aspect-ratio:4/3;background:#eee;overflow:hidden;position:relative;}
.card-row .ph img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .6s ease;}
.card-row:hover .ph img{transform:scale(1.02);}
.card-row .body{padding:28px 30px;display:flex;flex-direction:column;gap:14px;justify-content:center;}
.card-row .meta{font-family:var(--mono);font-size:11.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--muted);}
.card-row .meta .ix{color:var(--red);margin-right:.6em;}
.card-row .name{font-family:var(--grotesk);font-weight:700;font-size:28px;line-height:1.1;letter-spacing:-0.018em;color:var(--g333);margin:0;
  text-shadow:0.04em 0.055em 0 color-mix(in srgb, var(--red) 20%, transparent);}
.card-row .name .jp{display:block;font-family:var(--jp);font-weight:700;font-size:18px;margin-top:6px;color:var(--g464);
  text-shadow:0.04em 0.055em 0 color-mix(in srgb, var(--red) 20%, transparent);}
.card-row .blurb{font-family:var(--serif);font-size:15px;line-height:1.55;color:var(--ink-soft);margin:0;}
.card-row .blurb .jp{display:block;font-family:var(--jpserif);font-size:14px;line-height:1.7;color:var(--muted);margin-top:5px;}
.card-row .more{margin-top:8px;font-family:var(--mono);font-size:11.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--red);}
@media (max-width:760px){.card-row{grid-template-columns:1fr;}}

/* ============================================================
   year band — used by /studios index to group studios by year
   ============================================================ */
.year{padding:36px 0;border-top:1px solid var(--rule);}
.year:first-of-type{border-top:none;padding-top:6px;}
.year-head{display:grid;grid-template-columns:120px 1fr;gap:30px;align-items:baseline;margin-bottom:22px;}
.year-label{font-family:var(--mono);font-size:13px;letter-spacing:.18em;text-transform:uppercase;color:var(--red);}
.year-num{font-family:var(--grotesk);font-weight:700;font-size:54px;line-height:.95;letter-spacing:-0.022em;color:var(--g333);margin:8px 0 0;
  text-shadow:0.035em 0.05em 0 color-mix(in srgb, var(--red) 20%, transparent);}
.year-status{display:inline-flex;align-items:center;gap:8px;font-family:var(--mono);font-size:11.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--muted);margin-top:14px;}
.year-status .pip{width:8px;height:8px;border-radius:50%;background:var(--red);}
.year-status.past .pip{background:var(--n-c8);}
.year-summary{font-family:var(--serif);font-size:16px;line-height:1.55;color:var(--ink-soft);max-width:60ch;margin:8px 0 0;}
.year-summary .jp{display:block;font-family:var(--jpserif);font-size:14.5px;line-height:1.75;color:var(--muted);margin-top:5px;}
@media (max-width:760px){.year-head{grid-template-columns:1fr;}}

/* ============================================================
   footer
   ============================================================ */
footer.site{padding:64px 0 60px;margin-top:54px;border-top:1px solid var(--rule);}
footer.site .grid{display:grid;grid-template-columns:1.5fr 1fr;gap:36px;align-items:end;}
footer.site .mark{font-family:var(--grotesk);font-weight:700;font-size:24px;letter-spacing:-0.01em;color:var(--g333);}
footer.site .mark .j{display:block;font-family:var(--jpserif);font-weight:500;font-size:14px;color:var(--muted);margin-top:8px;}
footer.site .addr{font-family:var(--mono);font-size:11.5px;line-height:1.8;color:var(--muted);text-align:right;letter-spacing:.01em;}
footer.site .addr .jp{font-family:var(--jp);}
footer.site .stamp{display:flex;justify-content:space-between;margin-top:36px;font-family:var(--mono);font-size:11px;color:var(--muted);letter-spacing:.04em;}
footer.site .stamp a{color:var(--muted);text-decoration:none;}
footer.site .stamp a:hover{color:var(--red);}

/* ============================================================
   responsive
   ============================================================ */
@media (max-width:760px){
  .wrap{padding:0 26px;}
  header.site .bar{height:auto;padding:24px 26px;flex-wrap:wrap;gap:18px;}
  .brand .nm{font-size:28px;}
  .brand .nm .j{font-size:24px;}
  .pair,.hero-head,.titles{grid-template-columns:1fr;gap:8px;}
  .titles{margin-bottom:18px;}
  footer.site .grid{grid-template-columns:1fr;}
  footer.site .addr{text-align:left;}
}