/* gleam.canon-ical.com の見た目のうち、yumemi の Style の語彙に無いもの。worker/entry.mjs が全頁の <head> に <link> で足す。
   色・余白・字の大きさは www/src/style.gleam(予告 1 枚 legacy/public/index.html の色と書体を移した)。ここは次の 4 つだけ。
   1. 書体の実体(@font-face と --font-* の変数。style.gleam の css.Named("var(--font-body)") などが指す)
   2. 地のグラデーションと body の余白
   3. 欄の幅(--wrap)と足元の左右
   4. 予告のヒーロー(/yumemi)の clamp・大文字・動き、木の線(疑似要素)── data-hero / data-figure の印で受ける */

@font-face{font-family:"Space Grotesk";src:url("/fonts/SpaceGrotesk-Regular.woff2") format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Space Grotesk";src:url("/fonts/SpaceGrotesk-Bold.woff2") format("woff2");font-weight:700;font-display:swap}

:root{
  /* 欧文は Space Grotesk(自前、ASCII だけの subset)。和文は system の明朝(予告と同じ向き)。字が足りなければ次の書体に落ちる。 */
  --font-sans:"Space Grotesk","Helvetica Neue",Arial,sans-serif;
  --font-serif:"Hiragino Mincho ProN","Yu Mincho","Noto Serif JP","Noto Serif CJK JP",serif;
  --font-body:"Space Grotesk","Hiragino Mincho ProN","Yu Mincho","Noto Serif JP","Noto Serif CJK JP",serif;
  --font-mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  --wrap:min(100%,70rem);
}

html{background:#0b3d2e;-webkit-text-size-adjust:100%}
body{margin:0;background:#0b3d2e}
/* 地。layout の根は緑の無地(style.paper)で、その上にグラデーションの画像だけを重ねる(予告 1 枚の body と同じ 2 つ) */
[data-yumemi-grid="layout"]{
  background-image:
    radial-gradient(60rem 36rem at 88% -10%,rgba(255,175,243,.22),transparent 60%),
    radial-gradient(40rem 30rem at -10% 110%,rgba(79,131,104,.45),transparent 60%);
}

/* 足元: 左に著作、右にホスト(予告の .foot) */
[data-site=foot]{justify-content:space-between}
[data-site=brand]{text-decoration:none;align-items:center}
[data-site=brand] img{display:block}

/* ── 予告のヒーロー(/yumemi)── */
span[data-hero=tag]{letter-spacing:.06em;text-transform:uppercase;margin-left:auto}
h1[data-hero=title]{font-size:clamp(3rem,9vw,7.2rem);line-height:.98;letter-spacing:-.025em;text-wrap:balance}
p[data-hero=lead-ja]{font-size:clamp(1.6rem,4.2vw,2.6rem);line-height:1.35;letter-spacing:.02em}
p[data-hero=lead-en]{font-size:clamp(1rem,2vw,1.25rem);letter-spacing:.005em}
div[data-hero=body]{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(16rem,1fr);gap:2.5rem 4rem;align-items:start}
@media (max-width:720px){div[data-hero=body]{grid-template-columns:minmax(0,1fr)}}
@media (prefers-reduced-motion:no-preference){
  section[data-hero=root]>*{animation:hero-rise .9s cubic-bezier(.2,.7,.2,1) both}
  section[data-hero=root]>*:nth-child(2){animation-delay:.06s}
  section[data-hero=root]>*:nth-child(3){animation-delay:.12s}
  section[data-hero=root]>*:nth-child(4){animation-delay:.24s}
  @keyframes hero-rise{from{opacity:0;transform:translateY(.6rem)}to{opacity:1;transform:none}}
}

/* 木(予告の .tree)。連結の線は疑似要素 */
[data-figure=tree] ul{list-style:none;margin:0;padding:0}
[data-figure=tree] ul ul{padding-left:1.35rem;position:relative}
[data-figure=tree] ul ul::before{content:"";position:absolute;left:.35rem;top:0;bottom:.95rem;border-left:1px solid #4f8368}
[data-figure=tree] li{position:relative}
[data-figure=tree] ul ul li::before{content:"";position:absolute;left:-1rem;top:.95rem;width:.7rem;border-top:1px solid #4f8368}
[data-figure=tree] [data-tree=cap]{display:block;letter-spacing:.08em;text-transform:uppercase;margin-bottom:.4rem}

/* ── 入口 /(Dev Tour を主役にした構成)── */
p[data-hero=lead-sub]{font-size:clamp(1.1rem,2.2vw,1.5rem);line-height:1.6;letter-spacing:.02em;text-wrap:balance}
/* 第 1 部・第 2 部は PC で左右、375px では縦。小さい塊 2 つも同じ */
div[data-lobby=parts],div[data-lobby=pair]{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1.5rem;align-items:stretch}
@media (max-width:720px){div[data-lobby=parts],div[data-lobby=pair]{grid-template-columns:minmax(0,1fr)}}