/* Hallmark · component: theme-css (Enjin Retro) · genre: editorial-vintage · theme: studied-DNA (varsity heritage)
 * pre-emit critique: P4 H5 E4 S5 R4 V4 · contrast: ink/paper 11:1, accent-d/paper 4.8:1
 * ============================================================
 * themes-fable/retro.css — Enjin テーマ「Retro」ブラッシュアップ版
 *   ヴィンテージ大学スポーツ（varsity heritage）。マスタード×紺×古紙クリーム。
 *   enjin-base.css のトークンを上書きし、CSSのみで着せ替える（HTML変更なし）。
 *
 * 設計:
 *  - 自動配色: --accent は base 側で var(--club-color, --theme-accent) に解決。
 *    本テーマは --accent-d / --accent-l を color-mix() で --accent から導出し、
 *    クラブ色が変わっても「濃いインク版」「褪せた金版」が家系として追従する。
 *  - 二本立ての印刷罫（thick-thin）、活版のハードオフセット影、
 *    二重リングのシール/クレスト、紺フィールドのブックエンド（ticker/band/footer）。
 *  - 3Dヒーロー(#mesh)・日英ラベル(.eyebrow i)・レスポンシブ・
 *    prefers-reduced-motion は base の仕組みをそのまま尊重。
 * ============================================================ */
:root{
  /* ---- 古紙の色調（わずかに黄変させた aged cream 系） ---- */
  --paper:#f4edde;
  --paper2:#eadfc6;
  --white:#fcf8ec;
  --card:#fcf8ec;
  --ink:#1d3552;            /* 深めた紺（varsity navy） */
  --body:#414f61;
  --mute:#6f6a58;           /* 褪せたカーキ（小さなラベルでも可読） */
  --line:#ded2b8;
  --line2:#c8b890;
  --theme-accent:#d99a2b;   /* マスタード（テーマの顔・変更しない） */
  /* 濃淡はアクセントから導出 → club_color でも家系が崩れない */
  --accent-d:color-mix(in srgb, var(--accent) 55%, #241a05); /* インク寄りの深い金 */
  --accent-l:color-mix(in srgb, var(--accent) 62%, #f7efdc); /* 紺地で映える褪せ金 */
  --serif:"Shippori Mincho B1","Hiragino Mincho ProN","Yu Mincho",serif;
  --sans:"Noto Sans JP","Hiragino Kaku Gothic ProN",system-ui,sans-serif;
  --mono:"Oswald","Noto Sans JP",system-ui,sans-serif;
  /* 古紙グレイン（自己完結SVG・約4%） */
  --grain:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23g)' opacity='.045'/%3E%3C/svg%3E");
}

/* ---- 紙の質感と基礎 ---- */
body{background-color:var(--paper);background-image:var(--grain)}
.alt{background-color:var(--paper2);background-image:var(--grain)}
::selection{background:var(--ink);color:var(--paper)}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline-color:var(--accent-d)}

/* ============================================================
 * masthead — ティッカー（紺のスコアボード帯）＋ 新聞式の重罫ナビ
 * ============================================================ */
.ticker{background:var(--ink);color:var(--paper);border-bottom:2px solid var(--accent)}
.ticker .track{font-size:11.5px;letter-spacing:.15em;text-transform:uppercase}
.ticker .track>span::before{content:"★";color:var(--accent-l);margin-right:1em;font-size:.78em;vertical-align:.06em}

nav{background:color-mix(in srgb, var(--white) 94%, transparent);border-bottom:2px solid var(--ink)}
.brand{letter-spacing:.03em}
.navlinks{font-size:13.5px;letter-spacing:.05em}
.navlinks a:hover{color:var(--accent-d)}

/* クレスト＝小さなエンブレム（紺の内環＋余白＋マスタード外環） */
.crest{border-radius:50%;background:var(--white);color:var(--accent-d);border:1.5px solid var(--ink);
  box-shadow:0 0 0 2px var(--white), 0 0 0 3.5px var(--accent);font-size:15px;font-weight:700}

/* ナビCTA＝紺スラブ＋マスタードの底罫 */
.navcta{background:var(--ink);color:var(--paper);font-family:var(--mono);letter-spacing:.1em;text-transform:uppercase;
  box-shadow:inset 0 -3px 0 var(--accent)}
.navcta:hover{background:color-mix(in srgb, var(--ink) 86%, black)}

/* ============================================================
 * hero — プログラム表紙。切符型 eyebrow / Oswald 大文字 / 二重リングのシール
 * ============================================================ */
.hero .eyebrow{color:var(--ink);font-weight:600;letter-spacing:.22em;padding:.55em 1.15em;
  border:1.5px solid color-mix(in srgb, var(--ink) 60%, transparent);
  background:color-mix(in srgb, var(--white) 60%, transparent)}

.htitle{font-family:var(--mono);text-transform:uppercase;font-weight:700;
  font-size:clamp(2.5rem,6.8vw,5rem);letter-spacing:.015em;line-height:1.12;margin-top:1.05rem;
  text-shadow:0 1px 0 color-mix(in srgb, var(--white) 50%, transparent)}
.htitle em{color:var(--accent-d)}

/* 円形シール EST.2011 — 実線の外環＋破線の内環＋スタンプの淡い地 */
.hero-inner{position:relative}
.hero-inner::after{content:"EST. 2011";position:absolute;top:-8px;right:2px;width:92px;height:92px;
  display:grid;place-items:center;text-align:center;font-family:var(--mono);font-weight:600;
  font-size:10.5px;letter-spacing:.22em;text-indent:.22em;color:var(--accent-d);
  border:2px solid var(--accent-d);border-radius:50%;transform:rotate(-7deg);
  background:radial-gradient(circle at 50% 42%, color-mix(in srgb, var(--accent) 10%, transparent), transparent 72%)}
.hero-inner::before{content:"";position:absolute;top:1px;right:11px;width:76px;height:76px;
  border:1px dashed color-mix(in srgb, var(--accent-d) 75%, transparent);border-radius:50%;pointer-events:none}
@media(max-width:760px){.hero-inner::before,.hero-inner::after{display:none}}

/* ヒーロー下端＝マストヘッドの thick-thin 罫（3Dメッシュは触らない） */
.hero::after{content:"";position:absolute;left:0;right:0;bottom:0;height:9px;pointer-events:none;
  background:
    linear-gradient(var(--accent),var(--accent)) left top/100% 2px no-repeat,
    linear-gradient(var(--ink),var(--ink)) left bottom/100% 3px no-repeat}

/* ============================================================
 * 型階層 — コンデンス大文字のラベル系 ＋ 明朝の見出し（老舗の和文）
 * ============================================================ */
.eyebrow{color:var(--accent-d);letter-spacing:.18em}
.eyebrow i::after{content:" ★ ";color:var(--accent);font-weight:400;font-size:.78em;vertical-align:.08em;margin:0 .1em}
h2.sec em{color:var(--accent-d)}

/* セクション罫＝二本立て（マスタード太罫＋紺の毛罫） */
.rule{width:56px;height:6px;background:
  linear-gradient(var(--accent),var(--accent)) left top/100% 3px no-repeat,
  linear-gradient(var(--ink),var(--ink)) left bottom/100% 1px no-repeat}

/* ============================================================
 * ボタン — 活版のハードオフセット影。文字は常に紺地×クリームで可読性を保証
 * ============================================================ */
.btn{transition:background .18s,transform .15s,border-color .18s,color .18s,box-shadow .15s}
.btn-accent{background:var(--ink);color:var(--paper);box-shadow:3px 3px 0 var(--accent)}
.btn-accent:hover{background:color-mix(in srgb, var(--ink) 88%, black);transform:translate(-1px,-1px);box-shadow:4px 4px 0 var(--accent)}
.btn-accent:active{transform:translate(1px,1px);box-shadow:2px 2px 0 var(--accent)}
.btn-line{border-width:1.5px}

/* ============================================================
 * セクション各論
 * ============================================================ */
/* chips — 印刷ズレの小さな影 */
.chip{background:var(--white);box-shadow:2px 2px 0 color-mix(in srgb, var(--ink) 10%, transparent)}

/* 学年構成カウンタ — Oswald の数字 */
.comp b{font-family:var(--mono);font-weight:600;font-size:2rem;letter-spacing:.02em;font-variant-numeric:tabular-nums}

/* ロースター（選手・スタッフ）— 円形アバター＝ミニエンブレム */
.avatar{border-radius:50%;background:var(--paper2);color:var(--accent-d);
  border:1.5px solid color-mix(in srgb, var(--accent) 40%, var(--line2));
  box-shadow:0 0 0 3px var(--white), 0 0 0 4px var(--line2)}
.person b{letter-spacing:.01em}

/* 日程 — フィクスチャリスト。先頭に重罫、日付は深い金のコンデンス数字 */
.sched{border-top:2px solid var(--ink)}
.sdate{border-right:1px solid var(--line2);padding-right:1.1rem}
.sdate b{font-family:var(--mono);font-weight:600;color:var(--accent-d);font-size:1.5rem;letter-spacing:.02em;font-variant-numeric:tabular-nums}
.srow:hover{background:color-mix(in srgb, var(--accent) 5%, transparent)}
.stag{clip-path:polygon(6px 0,100% 0,100% calc(100% - 6px),calc(100% - 6px) 100%,0 100%,0 6px)} /* 切符の面取り */

/* お知らせ — 新聞面。先頭重罫＋等幅数字の日付 */
.newslist{border-top:2px solid var(--ink)}
.nrow time{font-variant-numeric:tabular-nums;letter-spacing:.08em}
.nbody .ncat{color:var(--accent-d)}

/* 実績 — 栄光の記録簿 */
.ach .arow:first-child{border-top:2px solid var(--ink)}
.ayear{color:var(--accent-d);font-variant-numeric:tabular-nums}

/* ============================================================
 * 文武両道バンド — 紺のフィールド＋ハーフトーン＋褪せ金の透かし
 * ============================================================ */
.band{background:var(--ink);border-block:3px solid var(--accent);
  background-image:radial-gradient(color-mix(in srgb, #fff 6%, transparent) 1px, transparent 1.6px);
  background-size:12px 12px}
.band .wm{color:color-mix(in srgb, var(--accent-l) 24%, transparent)}
.band h2{color:var(--paper)}
.band .eyebrow{color:var(--accent-l)}
.band .eyebrow i{color:var(--paper)}
.band .eyebrow i::after{color:var(--accent-l)}
.band p{color:color-mix(in srgb, var(--paper) 90%, transparent)}
.btn-ink{background:var(--paper);color:var(--ink);box-shadow:3px 3px 0 rgba(0,0,0,.35)}
.btn-ink:hover{background:var(--white);color:var(--ink);transform:translate(-1px,-1px);box-shadow:4px 4px 0 rgba(0,0,0,.35)}

/* ============================================================
 * フォーム — 証書仕立ての二重フレーム
 * ============================================================ */
.form{border:1.5px solid var(--ink);outline:1px solid var(--line2);outline-offset:5px;background:var(--white)}
.field label{letter-spacing:.16em}
.field input:focus,.field select:focus,.field textarea:focus{outline:2px solid var(--accent-d);border-color:var(--accent-d)}
.seg label{font-family:var(--mono);font-weight:600;letter-spacing:.08em;text-transform:uppercase}
.seg label:has(input:checked){background:var(--ink);color:var(--paper);border-color:var(--ink);box-shadow:inset 0 -3px 0 var(--accent)}
.submit{background:var(--ink);letter-spacing:.14em;box-shadow:inset 0 -3px 0 var(--accent)}
.submit:hover{background:color-mix(in srgb, var(--ink) 86%, black)}
.toast{background:color-mix(in srgb, var(--accent) 9%, var(--white));border-color:color-mix(in srgb, var(--accent) 40%, transparent);color:var(--accent-d)}

/* ============================================================
 * フッター — 紺のブックエンド。褪せ金の見出しアンダースコア
 * ============================================================ */
footer{background:var(--ink);border-top:3px solid var(--accent)}
footer h4{color:var(--paper)}
footer h4::after{content:"";display:block;width:26px;height:2px;background:var(--accent-l);margin-top:.5rem;opacity:.85}
footer p{color:color-mix(in srgb, var(--paper) 72%, transparent)}
footer a{color:color-mix(in srgb, var(--paper) 78%, transparent)}
footer a:hover{color:var(--accent-l)}
.powered{color:color-mix(in srgb, var(--paper) 55%, transparent);border-top-color:color-mix(in srgb, var(--paper) 18%, transparent)}
.powered .badge{border-color:color-mix(in srgb, var(--paper) 22%, transparent)}
.powered .badge b{color:var(--accent-l)}