/* en.css — /en/ only. The EN type of record (flat EN build): Cormorant (display), DM Sans (text), DM Mono (numbers).
   The plugin's stylesheets name Japanese families in ~100 places (vars, playcard.css, inline styles), so on /en/ those
   family names are re-pointed at the EN files instead of rewriting every rule. The Japanese web fonts are not loaded
   on /en/, so nothing competes with these faces; a Japanese character in member data falls back to the system font. */

@font-face{font-family:'Zen Old Mincho';font-weight:100 450;font-display:swap;src:url(fonts/en/Cormorant-400.ttf) format('truetype');}
@font-face{font-family:'Zen Old Mincho';font-weight:451 550;font-display:swap;src:url(fonts/en/Cormorant-500.ttf) format('truetype');}
@font-face{font-family:'Zen Old Mincho';font-weight:551 1000;font-display:swap;src:url(fonts/en/Cormorant-600.ttf) format('truetype');}
@font-face{font-family:'Noto Serif JP';font-weight:100 450;font-display:swap;src:url(fonts/en/Cormorant-400.ttf) format('truetype');}
@font-face{font-family:'Noto Serif JP';font-weight:451 550;font-display:swap;src:url(fonts/en/Cormorant-500.ttf) format('truetype');}
@font-face{font-family:'Noto Serif JP';font-weight:551 1000;font-display:swap;src:url(fonts/en/Cormorant-600.ttf) format('truetype');}
@font-face{font-family:'Hiragino Mincho ProN';font-weight:100 1000;font-display:swap;src:url(fonts/en/Cormorant-500.ttf) format('truetype');}

@font-face{font-family:'Noto Sans JP';font-weight:100 450;font-display:swap;src:url(fonts/en/DMSans-400.ttf) format('truetype');}
@font-face{font-family:'Noto Sans JP';font-weight:451 1000;font-display:swap;src:url(fonts/en/DMSans-500.ttf) format('truetype');}
@font-face{font-family:'Zen Kaku Gothic New';font-weight:100 450;font-display:swap;src:url(fonts/en/DMSans-400.ttf) format('truetype');}
@font-face{font-family:'Zen Kaku Gothic New';font-weight:451 1000;font-display:swap;src:url(fonts/en/DMSans-500.ttf) format('truetype');}
@font-face{font-family:'Inter';font-weight:100 450;font-display:swap;src:url(fonts/en/DMSans-400.ttf) format('truetype');}
@font-face{font-family:'Inter';font-weight:451 1000;font-display:swap;src:url(fonts/en/DMSans-500.ttf) format('truetype');}
@font-face{font-family:'Hiragino Kaku Gothic ProN';font-weight:100 1000;font-display:swap;src:url(fonts/en/DMSans-400.ttf) format('truetype');}

@font-face{font-family:'JetBrains Mono';font-weight:100 1000;font-display:swap;src:url(fonts/en/DMMono-500.ttf) format('truetype');}

/* Tracking: Japanese labels are spaced wide for kana; Latin words read as separate letters at that tracking.
   Uppercase eyebrows keep theirs (the EN build tracks those too). */
html[lang="en"] .ssx .fcolors{letter-spacing:.06em;padding-left:0;}
html[lang="en"] .bkick,
html[lang="en"] .ptype-t,
html[lang="en"] .fprof,
html[lang="en"] .me-label,
html[lang="en"] .lk-tpos,
html[lang="en"] .frel,
html[lang="en"] .next-link{letter-spacing:.02em;}
/* Display lines: Cormorant is set tight in the EN build, not tracked open like Mincho. */
html[lang="en"] h1,
html[lang="en"] .hello-h,
html[lang="en"] .ssx-h2{letter-spacing:-.005em;}
html[lang="en"] .ss-calc-title{letter-spacing:.02em;}

/* The face-down deck on "Watching over" says めくる in CSS content. */
html[lang="en"] .wstack-top::after{content:'Flip';letter-spacing:.02em;}

/* The EN families under their own names, for rules written against the EN build. */
@font-face{font-family:'DM Sans';font-weight:100 450;font-display:swap;src:url(fonts/en/DMSans-400.ttf) format('truetype');}
@font-face{font-family:'DM Sans';font-weight:451 1000;font-display:swap;src:url(fonts/en/DMSans-500.ttf) format('truetype');}
@font-face{font-family:'DM Mono';font-weight:100 1000;font-display:swap;src:url(fonts/en/DMMono-500.ttf) format('truetype');}
@font-face{font-family:'Cormorant';font-weight:100 450;font-display:swap;src:url(fonts/en/Cormorant-400.ttf) format('truetype');}
@font-face{font-family:'Cormorant';font-weight:451 550;font-display:swap;src:url(fonts/en/Cormorant-500.ttf) format('truetype');}
@font-face{font-family:'Cormorant';font-weight:551 1000;font-display:swap;src:url(fonts/en/Cormorant-600.ttf) format('truetype');}

/* ── EN card skin — the EN flat build's play card (patpro/staging-top/toppage-template.php, card grammar
   block). Values copied, not redrawn. The shared .pc / .pc-in / .face keep sizing, deck and flip; the
   JP glass face is neutralised so the EN navy glass is the only surface. ── */
.ssx .pc--en .face{background:none;border:0;box-shadow:none;border-radius:26px;overflow:visible;backdrop-filter:none;-webkit-backdrop-filter:none;display:block;}
.pc--en .en-glass{position:relative;width:100%;height:100%;border-radius:26px;padding:9px;overflow:hidden;background:linear-gradient(160deg,#0b1736,#0d1f48);border:1px solid rgba(198,169,78,.55);box-shadow:0 20px 50px rgba(34,30,24,.22);box-sizing:border-box;font-family:'DM Sans',system-ui,sans-serif;line-height:1.25;letter-spacing:normal;}
.pc--en .en-glass::before{content:"";position:absolute;top:0;left:10%;right:10%;height:42%;pointer-events:none;border-radius:26px;background:radial-gradient(120% 90% at 50% -25%,rgba(255,255,255,0.28),rgba(255,255,255,0) 62%);}
.pc--en .en-frame{position:absolute;inset:9px;border-radius:18px;overflow:hidden;display:flex;flex-direction:column;align-items:center;border:1px solid rgba(255,255,255,0.16);box-shadow:inset 0 0 0 1px rgba(255,255,255,0.05);}
.pc--en .en-bar{display:flex;width:100%;height:7px;flex:none;}.pc--en .en-bar span{flex:1;}
.pc--en .en-art{width:54%;aspect-ratio:4/5;flex:none;margin:16px auto 0;border-radius:16px;overflow:hidden;background:#0a1430;display:flex;align-items:center;justify-content:center;border:1px solid rgba(255,255,255,0.22);box-shadow:0 8px 24px rgba(8,20,60,0.45);}
.pc--en .en-art img{width:100%;height:100%;object-fit:cover;object-position:center top;display:block;}
.pc--en .en-art-mono{font-family:'DM Mono',ui-monospace,monospace;font-size:44px;font-weight:700;letter-spacing:.06em;}
.pc--en .en-info{flex:1;display:flex;flex-direction:column;align-items:center;padding:12px 16px 16px;width:100%;box-sizing:border-box;}
.pc--en .en-name{font-size:22px;font-weight:700;color:#f4f7ff;text-align:center;line-height:1.1;}
.pc--en .en-prof{font-size:15px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:#aeb8e8;margin-top:7px;text-align:center;}
.pc--en .en-meta{font-size:16px;color:#cfd8ee;margin-top:5px;text-align:center;}
.pc--en .en-code{font-family:'DM Mono',ui-monospace,monospace;font-size:58px;font-weight:500;letter-spacing:0.06em;line-height:1;margin-top:10px;}
.pc--en .en-code b{font-weight:700;}
.pc--en .en-essence{font-size:14px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:#FFD700;margin-top:11px;margin-bottom:14px;text-align:center;}
.pc--en .en-flip{font-size:14px;letter-spacing:.04em;color:#93a6cb;margin-top:auto;padding-top:16px;}
.pc--en .en-slot{visibility:hidden;}
/* Relation (the plugin's decks carry it; the flat build had no relation decks): top-left, clear of the bookmark. */
.pc--en .en-rel{position:absolute;top:16px;left:16px;z-index:2;font-size:13px;font-weight:700;letter-spacing:.04em;padding:4px 10px;border-radius:999px;background:rgba(255,255,255,.14);color:#eaf0ff;border:1px solid rgba(255,255,255,.22);}
.pc--en .en-back{justify-content:flex-start;padding:24px 18px 22px;box-sizing:border-box;}
.pc--en .en-back>:first-child{margin-top:auto;}.pc--en .en-back>:last-child{margin-bottom:auto;}   /* centred while it fits; never pushed past the top edge */
.pc--en .en-bk-name{font-size:20px;font-weight:700;color:#f4f7ff;text-align:center;}
.pc--en .en-bk-kick{font-size:14px;letter-spacing:.16em;text-transform:uppercase;color:#bccbe8;margin-top:6px;}
.pc--en .en-wave{position:relative;width:100%;height:198px;margin-top:22px;}
.pc--en .wd{position:absolute;width:20px;height:20px;border-radius:50%;transform:translate(-50%,-50%);border:2px solid rgba(255,255,255,.2);background:rgba(255,255,255,.04);box-sizing:border-box;}.pc--en .wd.cur{width:30px;height:30px;}
.pc--en .en-wave-lbl{display:flex;justify-content:space-between;width:100%;padding:0 4px;margin-top:6px;font-size:13px;letter-spacing:.05em;text-transform:uppercase;color:#a7bbe0;box-sizing:border-box;}
.pc--en .en-now{font-size:20px;font-weight:700;margin-top:16px;text-align:center;}
.pc--en .en-event{display:flex;align-items:baseline;gap:9px;margin-top:6px;font-size:16px;color:#d4ddee;max-width:100%;}.pc--en .en-event b{font-family:'DM Mono',ui-monospace,monospace;font-size:18px;font-weight:500;}
/* [ERIC 2026-09-19] text on the back wraps, it never clips: a long event takes a second line and the block below moves down;
   the wave gives up height first so the Position line stays inside the card. */
.pc--en .en-event span{white-space:normal;overflow-wrap:anywhere;line-height:1.35;}
.pc--en .en-event{text-align:left;}
.pc--en .en-back>*{flex-shrink:0;}.pc--en .en-back .en-wave{flex:0 1 198px;height:auto;min-height:96px;}
.pc--en .en-bk-name,.pc--en .en-now,.pc--en .en-life,.pc--en .en-abc{overflow-wrap:anywhere;max-width:100%;}
.pc--en .en-life{font-size:17px;line-height:1.95;margin-top:16px;text-align:center;color:#f4f7ff;}
.pc--en .en-abc-t{font-size:14px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:#a7bcdf;margin-top:18px;}
.pc--en .en-abc{font-size:18px;color:#cdd9ef;margin-top:8px;}.pc--en .en-abc .abw{opacity:.42;}.pc--en .en-abc .abw b{font-weight:800;}.pc--en .en-abc .abw.on{opacity:1;color:#FFD700;}.pc--en .en-abc .abw.on b{color:#FFD700;}.pc--en .en-abc i{font-style:normal;opacity:.42;}
/* Deceased: the light frame (flat .card.deceased). */
.pc--en.pc--mem .en-frame{background:rgba(232,230,226,0.92);}
.pc--en.pc--mem .en-name,.pc--en.pc--mem .en-meta,.pc--en.pc--mem .en-prof,.pc--en.pc--mem .en-essence,.pc--en.pc--mem .en-flip,.pc--en.pc--mem .en-bk-name,.pc--en.pc--mem .en-bk-kick,.pc--en.pc--mem .en-abc,.pc--en.pc--mem .en-abc i,.pc--en.pc--mem .en-life{color:#221E18;}
.pc--en.pc--mem .en-abc-t{color:#4a4136;}
.pc--en.pc--mem .en-abc .abw.on,.pc--en.pc--mem .en-abc .abw.on b{color:#7a5c0c;}
/* Bookmark: the flat .bm, on the card itself (outside the flip), so it sits top-right on both faces. */
.ssx .pc--en .pc-bm.en-bm{position:absolute;top:19px;right:19px;left:auto;z-index:6;width:30px;height:30px;border-radius:9px;border:1px solid rgba(255,255,255,.28);background:rgba(255,255,255,.12);color:#dbe6ff;display:flex;align-items:center;justify-content:center;cursor:pointer;padding:0;font-size:0;box-shadow:none;}
.ssx .pc--en .pc-bm.en-bm:hover,.ssx .pc--en .pc-bm.en-bm.is-on{color:#FFD700;border-color:rgba(255,215,0,.75);background:rgba(255,255,255,.12);}
.ssx .pc--en.flip .pc-bm.en-bm{transform:none;}
/* Full-size variant (figure pages): the card keeps its 5:7 shape. */
.ssx--full .pc--en .face.front{aspect-ratio:5/7;}
.ssx--full .pc--en .face.back{display:none;}

/* Deck headers on /en/ — the EN build's .sec-kick (toppage-template.php:234), not a display line. */
html[lang="en"] .en-kick{font-family:'DM Sans',system-ui,sans-serif;font-size:15px;font-weight:700;letter-spacing:.32em;text-transform:uppercase;color:rgba(34,30,24,.55);text-align:center;line-height:1.4;}
/* The EN build's card size (toppage-template.php .card): the grammar is laid out for this width. */
.ssx .pc.pc--en,.dc-pair-cards.ssx .pc.pc--en{width:clamp(300px,23vw,372px);}
@media(max-width:560px){ .ssx .pc.pc--en,.dc-pair-cards.ssx .pc.pc--en{width:clamp(280px,80vw,340px);} }
/* Phone: at the EN build's own phone width (≈312px) its card pushes "Flip for the nine-year rhythm" below the frame
   (the flat build clips it too). Same elements, same order — the portrait and digits step down so the footer shows. */
@media(max-width:560px){
  .pc--en .en-art{width:46%;margin-top:14px;}
  .pc--en .en-info{padding:10px 14px 12px;}
  .pc--en .en-code{font-size:50px;margin-top:8px;}
  .pc--en .en-essence{margin-top:9px;margin-bottom:4px;}
  .pc--en .en-flip{padding-top:8px;}
  .pc--en .en-wave{height:170px;margin-top:16px;}
  .pc--en .en-back .en-wave{flex-basis:170px;}
}

/* [ERIC 2026-09-19] /en/ hero: one face for the whole ruled line (the second clause fell back to the sans), and on a phone
   the hero, the promise, the date field and the button all sit in the first screen — the emblem steps down, the leading tightens. */
html[lang="en"] .hp-hero h1.hero-en,html[lang="en"] .hp-hero h1.hero-en *{font-family:'Cormorant','Cormorant Garamond',Georgia,serif;font-weight:500;}
html[lang="en"] .hp-hero h1.hero-en{line-height:1.12;letter-spacing:-.005em;}
@media(max-width:560px){
  html[lang="en"] .hp-hero{padding-top:18px;}
  html[lang="en"] .hp-hero .hp-emblem{width:84px;margin:0 auto 12px;}
  html[lang="en"] .hp-hero h1.hero-en{font-size:34px;margin:0 0 14px;}
  html[lang="en"] .ss-calc-lead{line-height:1.45;margin-bottom:12px;}
}