/*
Theme Name: SFC TECH 2026
Theme URI: https://www.tech.sfc.keio.ac.jp
Author: CIC (AI orchestration tool) & kyopan
Description: SFC TECH 2026 イベントサイト専用テーマ。スイス・タイポグラフィ様式(A案)。コンテンツは通常のブロックで編集可能。
Version: 1.2.8
Requires at least: 6.5
Requires PHP: 7.4
License: GNU General Public License v2 or later
Text Domain: sfc-tech-2026
*/

/* ============ base ============ */
body{
  font-feature-settings:"palt";
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
::selection{background:#C63527; color:#fff;}

/* ============ site header part ============ */
.sfct-header{
  display:flex; justify-content:space-between; align-items:center;
  padding:20px 4vw;
  border-bottom:3px solid #001E62;
  background:#fff;
  position:sticky; top:0; z-index:50;
}
body.admin-bar .sfct-header{top:32px;}
.sfct-logo{font-weight:900; font-size:16px; letter-spacing:-0.02em; text-decoration:none; color:inherit;}
.sfct-logo em{font-style:normal; color:#C63527;}
.sfct-header .wp-block-navigation a{font-size:13px; font-weight:700; text-decoration:none;}
.sfct-header .wp-block-navigation a:hover{color:#C63527;}

/* ============ hero ============ */
.sfct-hero{
  padding:8vh 4vw 0;
  border-bottom:3px solid #001E62;
}
.sfct-hero-meta{
  display:flex; justify-content:space-between; flex-wrap:wrap; gap:8px;
  font-size:12px; font-weight:700; letter-spacing:0.08em;
  text-transform:uppercase; color:#757575;
  margin-bottom:2vh;
}
.sfct-hero-title{
  font-weight:900;
  font-size:clamp(70px, 16.5vw, 240px);
  line-height:0.86;
  letter-spacing:-0.045em;
  text-transform:uppercase;
  margin:0;
}
.sfct-hero-title .row{display:flex; align-items:baseline; gap:3vw;}
.sfct-hero-title .row2{display:flex; align-items:stretch; gap:3vw;}
.sfct-outline{
  color:transparent;
  -webkit-text-stroke:3px #001E62;
  transition:color .3s;
}
.sfct-outline:hover{color:#001E62;}
.sfct-red{color:#C63527;}
/* ---- hero art: two moiré sources, a wireframe duck, a click ripple ---- */
.sfct-hero-art{
  flex:1; position:relative; overflow:hidden;
  border:3px solid #001E62;
  min-width:120px;
  cursor:crosshair;
}
.sfct-hero-art .mo{position:absolute; inset:-50%;}
.sfct-hero-art .mo1{background:repeating-radial-gradient(circle at 41% 47%,
  transparent 0 5.5px, rgba(0,30,98,.55) 5.5px 6.5px, transparent 6.5px 13px);
  animation:sfct-mo1x 11.4s ease-in-out -2.9s infinite alternate, sfct-mo1y 15s ease-in-out infinite alternate;}
.sfct-hero-art .mo2{background:repeating-radial-gradient(circle at 60% 54%,
  transparent 0 5.5px, rgba(0,30,98,.55) 5.5px 6.5px, transparent 6.5px 13px);
  animation:sfct-mo2x 18.5s ease-in-out -6.2s infinite alternate, sfct-mo2y 10.3s ease-in-out -2s infinite alternate;}
/* layers are 200% of the box, so 5% here = 10% of the box */
@keyframes sfct-mo1x{from{translate:-5% 0}to{translate:5% 0}}
@keyframes sfct-mo1y{from{transform:translateY(-9%)}to{transform:translateY(9%)}}
@keyframes sfct-mo2x{from{translate:-5.5% 0}to{translate:5.5% 0}}
@keyframes sfct-mo2y{from{transform:translateY(-10%)}to{transform:translateY(10%)}}

/* One ripple. Cloned per click, removed when it dies.
   --ph advances the ring phase. Measured on real pixels: with the stops
   written as (base + ph), increasing ph moves the crests outward. */
.sfct-hero-art .mo3{
  position:absolute; inset:0; pointer-events:none;
  opacity:var(--rop,0);
  background:repeating-radial-gradient(circle at var(--rx,50%) var(--ry,50%),
    transparent calc(0px + var(--ph,0px)) calc(5.5px + var(--ph,0px)),
    rgba(0,30,98,.55) calc(5.5px + var(--ph,0px)) calc(6.5px + var(--ph,0px)),
    transparent calc(6.5px + var(--ph,0px)) calc(13px + var(--ph,0px)));
  -webkit-mask-image:radial-gradient(circle at var(--rx,50%) var(--ry,50%),
    #000 0 var(--rr,0px), transparent calc(var(--rr,0px) + 90px));
  mask-image:radial-gradient(circle at var(--rx,50%) var(--ry,50%),
    #000 0 var(--rr,0px), transparent calc(var(--rr,0px) + 90px));
}
.sfct-hero-art .sfct-ripple-tmpl{display:none;}

/* the duck rides wave source 1: same centre, amplitude, period and phase as .mo1 */
.sfct-hero-art .orbit{position:absolute; inset:0; pointer-events:none;
  animation:sfct-orbx 11.4s ease-in-out -2.9s infinite alternate,
            sfct-orby 15s ease-in-out infinite alternate;}
@keyframes sfct-orbx{from{translate:-10% 0}  to{translate:10% 0}}
@keyframes sfct-orby{from{transform:translateY(-18%)} to{transform:translateY(18%)}}
.sfct-hero-art .halo{position:absolute; left:32%; top:44%; height:114%; aspect-ratio:1;
  transform:translate(-50%,-50%); pointer-events:none;
  background:radial-gradient(circle,#fff 0 24%,rgba(255,255,255,.86) 40%,
    rgba(255,253,247,.50) 56%,rgba(241,196,0,.02) 68%,rgba(255,255,255,0) 82%);
  animation:sfct-bloom 2.6s ease-in-out infinite;}
/* the ripple's wavefront nudges the duck */
.sfct-hero-art .react{position:absolute; inset:0; pointer-events:none;
  translate:var(--px,0) var(--py,0);}
/* centring lives here so rotation and the beat never fight over transform */
.sfct-hero-art .duckpos{position:absolute; left:32%; top:44%; height:52%; aspect-ratio:1;
  transform:translate(-50%,-50%);}
.sfct-hero-art .duck{position:absolute; inset:0;
  filter:drop-shadow(0 0 1px rgba(241,196,0,.35));
  rotate:var(--rot,0deg);
  animation:sfct-beat 2.6s ease-in-out infinite;
  pointer-events:auto; cursor:pointer;
  transition:filter .25s ease;}
.sfct-hero-art .duck:hover,
.sfct-hero-art .duck:focus-visible{
  filter:drop-shadow(0 0 3px rgba(241,196,0,.7)) drop-shadow(0 0 7px rgba(241,196,0,.28));}
.sfct-hero-art .duck:focus-visible{outline:3px solid #C63527; outline-offset:6px;}
.sfct-hero-art .duck svg{width:100%; height:100%; display:block;}
@keyframes sfct-beat{0%,78%,100%{scale:1}88%{scale:1.10}}
@keyframes sfct-bloom{0%,78%,100%{transform:translate(-50%,-50%) scale(1);opacity:.92}88%{transform:translate(-50%,-50%) scale(1.08);opacity:1}}
/* 動きは環境設定で分岐させない: どのブラウザでも同じ表示にする (kyopan 2026-09-03) */
}
.sfct-hero-sub{
  display:flex; justify-content:space-between; align-items:flex-end;
  gap:24px; flex-wrap:wrap;
  padding:5vh 0 6vh;
}
.sfct-hero-sub .lede{max-width:520px; font-size:15px; line-height:2.1; font-weight:500; margin:0;}
.sfct-hero-sub .date{
  text-align:right;
  font-weight:900; font-size:clamp(28px,4.5vw,54px);
  letter-spacing:-0.03em; line-height:1.1;
  font-variant-numeric:tabular-nums;
  margin:0;
}
.sfct-hero-sub .date small{
  display:block; font-size:13px; font-weight:700;
  letter-spacing:0.1em; color:#757575; margin-top:6px;
}

/* ============ ticker ============ */
.sfct-ticker{
  border-bottom:3px solid #001E62;
  overflow:hidden; white-space:nowrap;
  padding:12px 0;
  background:#001E62; color:#fff;
}
.sfct-ticker-in{
  display:inline-block;
  animation:sfct-tick 36s linear infinite;
  font-weight:900; font-size:15px; letter-spacing:0.06em; text-transform:uppercase;
}
.sfct-ticker-in .sep{color:#C63527; margin:0 22px;}
@keyframes sfct-tick{from{transform:translateX(0);} to{transform:translateX(-50%);}}

/* ============ sponsor band ============ */
.sfct-sponsor-band{
  display:flex; align-items:baseline; justify-content:space-between;
  gap:24px; flex-wrap:wrap;
  padding:5vh 4vw;
  border-bottom:3px solid #001E62;
}
.sfct-sponsor-band .word{
  font-weight:900; font-size:clamp(28px,4.5vw,54px);
  letter-spacing:-0.02em; text-transform:uppercase;
  color:transparent; -webkit-text-stroke:3px #001E62;
  margin:0;
}
.sfct-sponsor-band p{font-size:14px; font-weight:700; margin:0;}

/* ============ sections ============ */
.sfct-section{padding:10vh 4vw; border-bottom:3px solid #001E62;}
.sfct-sec-head{display:flex; align-items:baseline; gap:3vw; margin-bottom:7vh;}
.sfct-sec-no{
  font-weight:900; font-size:clamp(48px,8vw,110px); line-height:1;
  letter-spacing:-0.04em; color:transparent;
  -webkit-text-stroke:3px #001E62;
  margin:0;
}
.sfct-sec-titles .jp{font-weight:900; font-size:clamp(26px,3.6vw,44px); letter-spacing:0.02em; margin:0;}
.sfct-sec-titles .en{
  font-size:12px; font-weight:700; letter-spacing:0.22em;
  color:#C63527; text-transform:uppercase; margin:4px 0 0;
}

.sfct-about{display:grid; grid-template-columns:1fr 1fr; gap:4vw; margin-bottom:8vh;}
.sfct-about p{font-size:15px; line-height:2.2; font-weight:500; text-align:justify; word-break:auto-phrase; margin:0;}

/* fact table: core table block with .sfct-fact */
.sfct-fact table{width:100%; border-collapse:collapse; border-top:3px solid #001E62;}
.sfct-fact th, .sfct-fact td{
  /* the mothership declares *{box-sizing:border-box}; a bare * would reach the
     block editor UI, so it is scoped to the cells whose width is declared */
  box-sizing:border-box;
  border:none; border-bottom:1px solid #001E62;
  padding:26px 8px; text-align:left; vertical-align:top;
}
.sfct-fact th{
  width:200px; font-size:14px; font-weight:700;
  letter-spacing:0.14em; color:#757575;
  white-space:nowrap;
}
.sfct-fact td{font-size:16px; font-weight:700; line-height:2;}
.sfct-fact td strong:first-child{font-size:26px; font-weight:900; letter-spacing:-0.02em; margin-right:12px;}
.sfct-fact tr:last-child th, .sfct-fact tr:last-child td{border-bottom:3px solid #001E62;}

/* ============ 研究展示 ============ */
.sfct-ex-list{list-style:none; border-top:3px solid #001E62;}
.sfct-ex{
  display:grid; grid-template-columns:minmax(220px,300px) 1fr; gap:4vw;
  padding:34px 8px; border-bottom:1px solid #001E62;
}
.sfct-ex:last-child{border-bottom:3px solid #001E62;}
.sfct-ex-who{display:flex; flex-direction:column; gap:18px;}
/* 写真の無い人も名前の列を揃える（1列目を写真の幅で確保） */
.sfct-ex-person{display:grid; grid-template-columns:96px 1fr; align-items:center; column-gap:16px; min-width:0;}
.sfct-ex-id{grid-column:2;}
/* 枠は 0.5px（高精細ディスプレイで画素1つ分。等倍のディスプレイでは 1px に切り上がる）。
   3px は写真が遺影のように見えた。写真はカラーのまま出す（モノクロ化は 2026-09-28 にやめた） */
.sfct-ex-frame{display:block; width:96px; height:96px; flex:none; border:0.5px solid #001E62; box-sizing:border-box;}
.sfct-ex-photo{width:100%; height:100%; object-fit:cover; display:block;}
.sfct-ex-id{display:flex; flex-direction:column; gap:4px; min-width:0;}
.sfct-ex-name{font-size:17px; font-weight:900; letter-spacing:0.02em; color:#001E62; text-decoration:none; line-height:1.4;}
a.sfct-ex-name{border-bottom:2px solid transparent;}
a.sfct-ex-name:hover{border-bottom-color:#C63527;}
.sfct-ex-aff{font-size:12px; font-weight:700; color:#757575; line-height:1.6;}
.sfct-ex-title{font-size:clamp(19px,2vw,26px); font-weight:900; line-height:1.5; letter-spacing:0.01em; word-break:auto-phrase;}
.sfct-ex-desc{font-size:14px; line-height:2.1; font-weight:500; margin-top:12px; text-align:justify;}
@media (max-width:820px){
  .sfct-ex{grid-template-columns:1fr; gap:20px; padding:28px 4px;}
  .sfct-ex-person{grid-template-columns:72px 1fr;}
  .sfct-ex-frame{width:72px; height:72px;}
}

.sfct-ex-list{margin:0; padding:0;}
.sfct-ex-title, .sfct-ex-desc{margin-left:0; margin-right:0;}
.sfct-ex-title{margin-top:0; margin-bottom:0;}
.sfct-ex-desc{margin-bottom:0;}
.sfct-ex-list, .sfct-ex, .sfct-ex *{box-sizing:border-box;}

.sfct-tba{
  display:flex; align-items:center; justify-content:space-between; gap:24px; flex-wrap:wrap;
  border:3px solid #001E62; padding:6vh 4vw;
}
.sfct-tba .en{font-weight:900; font-size:clamp(34px,6vw,72px); letter-spacing:-0.03em; text-transform:uppercase; margin:0;}
.sfct-tba .jp{font-size:14px; font-weight:700; max-width:320px; line-height:2; margin:0;}

/* program timetable (core table block with .sfct-program) */
.sfct-program table{width:100%; border-collapse:collapse; border-top:3px solid #001E62;}
.sfct-program td{
  border:none; border-bottom:1px solid #001E62;
  padding:26px 8px; text-align:left; vertical-align:top;
}
.sfct-program td:first-child{
  width:200px; white-space:nowrap;
  font-size:26px; font-weight:900; letter-spacing:-0.02em;
  font-variant-numeric:tabular-nums;
}
.sfct-program td strong{display:block; font-size:19px; font-weight:900; line-height:1.6;}
.sfct-program td span{display:block; font-size:13px; font-weight:500; color:#757575; margin-top:6px;}
.sfct-program tr:last-child td{border-bottom:3px solid #001E62;}
@media (max-width:820px){
  .sfct-program td{padding:20px 6px;}
  .sfct-program td:first-child{width:88px; font-size:20px;}
  .sfct-program td strong{font-size:16px;}
}

/* access */
.sfct-access{display:grid; grid-template-columns:1fr 1fr; gap:0; border:3px solid #001E62;}
.sfct-access-map iframe{
  width:100%; height:100%; min-height:440px; display:block; border:0;
  filter:grayscale(1) contrast(1.05);
}
.sfct-access-info{border-left:3px solid #001E62; display:flex; flex-direction:column;}
.sfct-arow{padding:28px 32px; border-bottom:1px solid #001E62;}
.sfct-arow:last-child{border-bottom:0; margin-top:auto;}
.sfct-arow .lab{
  font-size:13px; font-weight:700; letter-spacing:0.18em;
  color:#C63527; margin:0 0 8px;
}
.sfct-arow .val{font-size:15px; font-weight:700; line-height:2; margin:0;}
.sfct-arow .note{font-size:13px; color:#757575; font-weight:500; word-break:auto-phrase; margin:0;}
.sfct-walk{
  display:inline-block; font-size:11px; font-weight:900;
  background:#001E62; color:#fff;
  padding:2px 10px; margin-left:10px;
  letter-spacing:0.06em;
}

/* ============ footer part ============ */
.sfct-footer{padding:10vh 4vw 4vh;}
.sfct-f-title{
  font-weight:900; font-size:clamp(54px,11vw,150px);
  letter-spacing:-0.045em; line-height:0.9; text-transform:uppercase;
  margin:0;
}
.sfct-f-meta{
  display:flex; justify-content:space-between; flex-wrap:wrap; gap:12px;
  margin-top:6vh; padding-top:20px; border-top:3px solid #001E62;
  font-size:12px; font-weight:700; letter-spacing:0.06em; color:#757575;
}

/* ============ responsive ============ */
@media (max-width:820px){
  .sfct-header .wp-block-navigation{display:none;}
  .sfct-about{grid-template-columns:1fr;}
  .sfct-access{grid-template-columns:1fr;}
  .sfct-access-info{border-left:0; border-top:3px solid #001E62;}
  .sfct-access-map iframe{min-height:320px;}
  .sfct-fact th{width:100px; letter-spacing:0.08em;}
  body.admin-bar .sfct-header{top:0;}
}

/* core table block variant (first column = label) */
.sfct-fact td:first-child{
  width:200px; font-size:14px; font-weight:700;
  letter-spacing:0.14em; color:#757575; white-space:nowrap;
}
@media (max-width:820px){ .sfct-fact td:first-child{width:100px; letter-spacing:0.08em;} }

/* ============ year (P6): solid Keio red with the interference knocked out ============ */
.sfct-year{
  background-image:
    repeating-radial-gradient(circle at 28% 40%,
      #C63527 0 9.5px, rgba(255,255,255,.85) 9.5px 10.5px, #C63527 10.5px 22px),
    repeating-radial-gradient(circle at 78% 70%,
      transparent 0 9.5px, rgba(255,255,255,.55) 9.5px 10.5px, transparent 10.5px 22px);
  -webkit-background-clip:text; background-clip:text;
  color:transparent;
}

/* ============ footer: SFC logo ============ */
.sfct-f-head{display:flex; align-items:flex-end; justify-content:space-between; gap:32px; flex-wrap:wrap;}
.sfct-f-logo img{display:block; height:56px; width:auto;}
@media (max-width:820px){ .sfct-f-logo img{height:40px;} }

/* ============ outlined display type: Archivo Black ============
   Inter Black's glyphs are unmerged overlapping contours, so -webkit-text-stroke
   draws every internal seam. Archivo Black has single merged outlines.
   It ships weight 400 only — 900 must be forced off or the browser fakes bold. */
.sfct-outline, .sfct-sec-no, .sfct-sponsor-band .word{
  font-family:"Archivo Black","Inter",sans-serif !important;
  font-weight:400 !important;
}