/* base (the same defaults the page was designed and tested with) */
:root{box-sizing:border-box}
body{font-size:14px}
img{max-width:100%}
[hidden]:not([hidden=until-found i]){display:none!important}

/* Poster -> digital sculpture -> minimal editorial interface.
   The hero is the back plane. A deep-cobalt statement sheet is laid over it; the INDEX and the sections follow on paper.
   After the hero: few elements, extreme scale, one focal point per view, motion only on state changes.
   --p = one px of the 1600 x 900 poster frame. */
:root{
  --paper:#FCFAEF; --cobalt:#0130E2; --orange:#FD5500; --deep:#0A219C;
  --ivory:#FCFAEF; --mist:rgba(252,250,239,.6); --line-d:rgba(252,250,239,.38);
  --lat:"Archivo",system-ui,sans-serif; --jp:"Noto Sans JP","Hiragino Sans","Yu Gothic",system-ui,sans-serif;
  --ease:cubic-bezier(.22,1,.36,1); --ease-s:cubic-bezier(.65,0,.35,1);
  /* Desktop responsive units (all CSS, no JS):
     --p  one px of the 1600 x 900 reference, fluid with the smaller of width / height, floored and capped
     --t  the same for small text, never below 0.86 px per reference px (labels / body stay readable on laptops) */
  --p:clamp(0.6px, min(calc(100vw / 1600), calc(100vh / 900)), 1.3px);
  --t:max(var(--p), 0.86px);
  --vh:100vh;
  color-scheme:light;
  scrollbar-width:thin; scrollbar-color:var(--cobalt) transparent;
}
*{box-sizing:border-box}
html,body{margin:0}
body{background:var(--paper);font-family:var(--jp);color:var(--cobalt);-webkit-font-smoothing:antialiased;overflow-x:hidden}
a{color:inherit}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ---------------------------------------------------------------- hero: the back plane (fixed) */
#stage{position:fixed;inset:0;overflow:hidden;background:var(--paper);z-index:1;transform-origin:50% 50%;will-change:transform,filter}
#design,#hinfo{position:absolute;left:0;top:0;width:1600px;height:900px;transform-origin:0 0}
#hinfo{pointer-events:none}
#typo .g,#hinfo .g{position:absolute;left:0;top:0;width:0;height:0;transform-origin:0 0;will-change:transform,opacity}
#typo .t,#hinfo .t{position:absolute;width:0;height:0;transform-origin:0 0}
#typo .t>span,#hinfo .t>span{position:absolute;left:0;white-space:pre}
#gl{position:absolute;left:0;top:0;width:100%;height:100%;pointer-events:none}
#flash{position:absolute;inset:0;background:#fff;opacity:0;pointer-events:none}
/* A quiet external credit at desktop sizes, a two-step disclosure on compact screens. */
#hero-support{position:fixed;right:max(24px,env(safe-area-inset-right));top:max(24px,env(safe-area-inset-top));z-index:5;min-height:44px;color:var(--cobalt);opacity:0;visibility:hidden;pointer-events:none;transition:opacity .5s var(--ease)}
#hero-support.on{opacity:1;visibility:visible;pointer-events:auto}
.hero-support-link{display:flex;align-items:center;justify-content:center;gap:8px;min-height:44px;white-space:nowrap;text-decoration:none;font:700 clamp(12px,.9vw,14px)/1.4 var(--jp)}
.hero-support-link::before{content:"";width:6px;height:6px;flex:none;border-radius:50%;background:var(--orange)}
.hero-support-link:hover{color:var(--orange)}
.hero-support-link:focus-visible,.hero-support-toggle:focus-visible{outline:2px solid var(--orange);outline-offset:4px}
.hero-support-toggle{display:none}
@media(max-width:1023px){
  #hero-support{right:calc(14px + env(safe-area-inset-right));top:calc(14px + env(safe-area-inset-top));width:76px;height:46px;border:1px solid currentColor;background:var(--paper);transition:width .22s var(--ease),opacity .5s var(--ease)}
  #hero-support.is-open{width:min(286px,calc(100vw - 28px - env(safe-area-inset-left) - env(safe-area-inset-right)))}
  .hero-support-toggle{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;height:100%;border:0;padding:0;background:none;color:inherit;font:700 13px/1.4 var(--jp);cursor:pointer}
  .hero-support-link{position:absolute;inset:0;min-height:0;padding:0 10px;font-size:12px;opacity:0;visibility:hidden}
  .hero-support-link::before{display:none}
  .is-open .hero-support-toggle{visibility:hidden;pointer-events:none}
  .is-open .hero-support-link{opacity:1;visibility:visible;transition:opacity .18s .06s}
}

/* HERO cue: independent of the poster layers; revealed only after the opening settles. */
#hero-scroll{position:fixed;left:calc(56*var(--p));bottom:max(32px,calc(44*var(--p)));z-index:4;
  display:flex;flex-direction:column;align-items:center;gap:12px;padding:12px;text-decoration:none;
  color:var(--cobalt);font:700 11px/1.3 var(--lat);letter-spacing:.14em;cursor:pointer;
  opacity:0;visibility:hidden;pointer-events:none;transition:opacity .5s var(--ease),visibility 0s .5s}
#hero-scroll.on{opacity:1;visibility:visible;pointer-events:auto;transition:opacity .5s var(--ease),visibility 0s}
#hero-scroll i{position:relative;display:block;width:1px;height:28px;background:currentColor;animation:hero-cue-drift 2.6s ease-in-out infinite;animation-play-state:paused}
#hero-scroll.on i{animation-play-state:running}
#hero-scroll i::after{content:"";position:absolute;bottom:0;left:-3px;width:6px;height:6px;border-right:1px solid currentColor;border-bottom:1px solid currentColor;transform:rotate(45deg)}
#hero-scroll:hover,#hero-scroll:focus-visible{color:var(--orange)}
#hero-scroll:focus-visible{outline:1px solid currentColor;outline-offset:4px}
@keyframes hero-cue-drift{0%,100%{transform:translateY(0)}50%{transform:translateY(5px)}}
@media(max-width:1023px) and (orientation:portrait){#hero-scroll{left:auto;right:max(20px,env(safe-area-inset-right));bottom:calc(clamp(160px,20svh,200px) + env(safe-area-inset-bottom));font-size:10px;gap:10px}}

/* ---------------------------------------------------------------- page */
#page{position:relative;z-index:2}
.rl{position:absolute;left:calc(56*var(--p));right:0;height:1px;background:currentColor}
.rl.top{top:0}.rl.bot{bottom:0}

/* ---------------------------------------------------------------- statement: the hero's second state
   back    the hero scene, defocused and slightly closer (larger), type gone, the sculpture as light and silhouette
   middle  deep-cobalt air over the whole viewport: tint + falloff toward the edges + a faint grain
   front   one statement, set as a composed block of display type (Murecho Black, 92% width, tight tracking),
           lines of different lengths stepped across the centre; only the type is in focus */
#veil{position:fixed;inset:0;z-index:2;pointer-events:none;opacity:0;
  background:radial-gradient(85% 75% at 46% 48%,rgba(10,40,182,.66) 0%,rgba(7,30,152,.80) 48%,rgba(4,17,96,.92) 82%,rgba(2,10,62,.96) 100%)}

#statement{position:fixed;inset:0;z-index:3;pointer-events:none;color:var(--ivory)}
/* one rule for every statement: same optical centre (a little above the geometric one), same size, weight, measure,
   leading and tracking; three balanced lines; trailing punctuation hangs outside so the words themselves are centred */
#statement .st{position:absolute;left:50%;top:47%;transform:translate(-50%,-50%);margin:0;opacity:0;white-space:nowrap;text-align:center;
  font-family:"Murecho",var(--jp);font-weight:900;font-size:clamp(52px,calc(80*var(--p)),96px);line-height:1.22}
#statement .l{display:block;transform-origin:50% 50%;transform:scaleX(.94);letter-spacing:-.03em;opacity:0}
#statement .l.m{display:none}
#statement.anim .l{will-change:opacity,filter}
#veil{will-change:opacity}
#summary.anim .sp{will-change:opacity,filter}
#page.anim{will-change:opacity}
#statement .o{color:var(--orange)}
#statement .pp{margin-right:-.42em}
#statement .pp.hang{margin-right:-1em}
.meta{font:700 calc(15*var(--t))/1 var(--lat);letter-spacing:.02em;white-space:nowrap;font-variant-numeric:tabular-nums}
.orange{color:var(--orange)}


/* ---------------------------------------------------------------- EVENT SUMMARY: an ordinary section, the first one on the page
   1 出張輪島朝市 in 一橋祭 / 2 the date / 3 the three programmes; type only, set inside the 1600 x 900 frame */
/* the page below the opening is hidden from the very first paint (body carries .intro in the HTML), so nothing but the
   opening is ever seen before the scripts run. Safety net: if the scripts never start (an error, a blocked file), the
   page still appears (at once on a script error, after 25 s otherwise); main.js marks the body .booted as soon as it runs, which cancels that timer. */
body.intro #page{visibility:hidden;animation:page-failsafe 0s linear 25s forwards}
body.booted #page{animation:none}
.fallback body.intro #page{visibility:visible;animation:none}
@keyframes page-failsafe{to{visibility:visible}}
#summary{position:relative;height:var(--vh);min-height:calc(900*var(--p));background:var(--paper);overflow:hidden}
/* grid: free space above (1fr) | title + date | the gap to the band | band | free space below (1.55fr: the block sits
   a little above centre, as at the 1440 / 1600 reference) — INDEX in the corner */
#summary .fr{position:absolute;inset:0;display:grid;grid-template-columns:minmax(0,1fr) auto;
  grid-template-rows:1fr auto calc(130*var(--p)) auto 1.55fr;padding:0 calc(56*var(--p)) 0 calc(50*var(--p))}
#summary .sp{position:relative}
/* title: one block of two lines (tight leading, "in" set smaller and tighter so it sits in the Japanese line) */
.s-anchor{grid-area:2/1/3/2;align-self:end;margin:0;font:900 calc(184*var(--p))/.96 var(--jp);letter-spacing:-.03em;white-space:nowrap}
.s-anchor .in{font-family:var(--lat);font-weight:800;font-stretch:72%;font-size:.8em;letter-spacing:-.03em;margin-right:.1em}
/* date: second; its baseline on the title's last line */
.s-date{grid-area:2/2/3/3;align-self:end;margin:0 0 calc(-17*var(--p)) calc(40*var(--p));font:900 calc(96*var(--p))/1 var(--lat);font-stretch:68%;color:var(--orange);letter-spacing:-.01em;white-space:nowrap}
/* the three programmes: one typographic band, full measure, between two rules; orange slashes; small numbers */
.s-band{grid-area:4/1/5/3;margin:0 0 0 calc(6*var(--p));padding:calc(26*var(--p)) 0 calc(30*var(--p));list-style:none;
  display:flex;justify-content:space-between;align-items:center;gap:calc(24*var(--p))}
.s-band::before,.s-band::after{content:"";position:absolute;left:0;right:0;height:1px;background:currentColor}
.s-band::before{top:0}.s-band::after{bottom:0}
.s-band li{display:flex;align-items:flex-start;white-space:nowrap}
.s-band i{font:700 calc(12*var(--t))/1 var(--lat);font-style:normal;letter-spacing:.08em;margin:calc(4*var(--p)) calc(12*var(--p)) 0 0;font-variant-numeric:tabular-nums}
.s-band b{font:900 calc(60*var(--p))/1 var(--jp);letter-spacing:-.02em}
.s-band .sl{flex:none;width:1px;height:calc(64*var(--p));background:var(--orange);transform:rotate(22deg)}
/* INDEX cue: last, small, in the bottom-right corner */
#summary .s-cue{position:absolute;right:calc(56*var(--p));bottom:calc(30*var(--p));text-decoration:none;display:inline-flex;gap:calc(8*var(--p));align-items:center;
  font:700 calc(11*var(--t))/1 var(--lat);letter-spacing:.16em}
.s-cue b{color:var(--orange);font-weight:900}
.s-meta{display:none}

/* ---------------------------------------------------------------- INDEX: navigation and content container in one
   closed: five rows, the composition centred in the viewport.  open: the row itself grows and holds its content;
   the others stay below as closed rows.  one open at a time. */
#index{position:relative;background:var(--paper);min-height:var(--vh);padding:max(0px,calc((var(--vh) - 684*var(--p)) / 2 - 12*var(--p))) 0 0}
.ihead{position:relative;height:calc(44*var(--p));display:flex;align-items:center;padding:0 calc(56*var(--p))}
.ihead .rl{bottom:0}
.item{position:relative;isolation:isolate}
.item::before{content:"";position:absolute;inset:0;z-index:-1;opacity:0;transition:opacity .62s var(--ease-s) .04s;pointer-events:none}
.item.deep::before{background:var(--deep)}.item.cob::before{background:var(--cobalt)}
.item.open::before{opacity:1}
.item:is(.deep,.cob){transition:color .5s var(--ease-s)}
.item.anim .pin{will-change:opacity,transform}
.item>.rl.bot{bottom:0;opacity:0;transition:opacity .5s var(--ease)}
.item.open>.rl.bot{opacity:1}
.row{position:relative;display:block;width:100%;height:calc(128*var(--p));overflow:hidden;color:inherit;background:none;border:0;padding:0;margin:0;
  text-align:left;font:inherit;cursor:pointer;outline:none;-webkit-tap-highlight-color:transparent}
.row .num{position:absolute;left:calc(56*var(--p));top:calc(20*var(--p));transition:color .45s var(--ease)}
.row .mk{position:absolute;left:calc(86*var(--p));top:calc(18*var(--p));width:calc(9*var(--p));height:calc(9*var(--p));background:var(--orange);transform:scale(0);transition:transform .45s var(--ease)}
.jw{position:absolute;white-space:nowrap;font-family:var(--jp);font-weight:900;line-height:1;transform-origin:0 0;margin:0}
.jw span{display:inline-block}
.row .jw{left:calc(190*var(--p));top:calc(11*var(--p));font-size:calc(108*var(--p));letter-spacing:-.02em}
.row .c2{transition:transform .7s var(--ease)}
.row .jw{transition:transform .7s var(--ease)}
.row .info{position:absolute;left:calc(342*var(--p));top:calc(88*var(--p));font:700 calc(15*var(--t))/1.2 var(--jp);letter-spacing:.06em;white-space:nowrap;
  clip-path:inset(-4px 100% -4px 0);transition:clip-path .55s var(--ease)}
.row .info b{font:900 calc(15*var(--t))/1 var(--lat);color:var(--orange);margin-left:calc(12*var(--p))}
.row .en{position:absolute;right:calc(56*var(--p));top:calc(92*var(--p));font:700 calc(15*var(--t))/1 var(--lat);letter-spacing:.08em}
.row .cl{position:absolute;right:calc(56*var(--p));top:calc(20*var(--p));font:700 calc(12*var(--t))/1 var(--lat);letter-spacing:.16em;opacity:0;
  transform:translate3d(0,calc(-6*var(--p)),0);transition:opacity .5s var(--ease),transform .55s var(--ease),color .45s var(--ease)}
.row .cl b{color:var(--orange);margin-left:calc(8*var(--p))}
.row .rl{bottom:0}
.row .rx{position:absolute;left:0;right:0;bottom:0;height:2px;margin-bottom:-.5px;background:currentColor;transform:scaleX(0);transform-origin:0 50%;transition:transform .6s var(--ease)}
.row .seg{position:absolute;left:calc(298*var(--p));bottom:0;height:2px;margin-bottom:-.5px;width:calc(560*var(--p));background:var(--orange);
  transform:scaleX(0);transform-origin:0 50%;transition:transform .6s var(--ease)}
/* closed row, B state (hover / focus) */
.item:not(.open):not(.calm)>.row:is(:hover,:focus-visible,.on) .c2{transform:translateX(calc(560*var(--p)))}
.item:not(.open):not(.calm)>.row:is(:hover,:focus-visible,.on) .info{clip-path:inset(-4px 0 -4px 0);transition-delay:.12s}
.item:not(.open):not(.calm)>.row:is(:hover,:focus-visible,.on) .num{color:var(--orange)}
.item:not(.open):not(.calm)>.row:is(:hover,:focus-visible,.on) .rx{transform:none}
.item:not(.open):not(.calm)>.row:is(:hover,:focus-visible,.on) .seg{transform:scaleX(1)}
/* open row: the current location. orange number and mark, the rule full-bleed and doubled, the orange segment under
   the word, the English label opened out, CLOSE in the corner */
.item.open>.row .num{color:var(--orange)}
.item.open>.row .mk{transform:none}
.item.open>.row .rx{transform:none}
.item.open>.row .jw{transform:translate3d(0,calc(-4*var(--p)),0)}
.item.open>.row .seg{left:calc(190*var(--p));width:calc(214*var(--p));transform:scaleX(1);transition-delay:.1s}
.item.open>.row .cl{opacity:1;transform:none;transition-delay:.15s,.15s,0s}
.item.open>.row:is(:hover,:focus-visible) .cl{color:var(--orange)}
.item:is(.deep,.cob).open{color:var(--ivory)}
.item:is(.deep,.cob) .pin .rl,.item:is(.deep,.cob)>.rl.bot{color:var(--line-d)}
.item:is(.deep,.cob) .list.last li:last-child{border-color:var(--line-d)}

/* the content inside a row: grid  margin(=row word start) | left 520 | gutter | right | margin
   one lead (a figure or a sentence) on the left, the facts on the right; nothing stretched */
.panel{height:0;overflow:hidden}
.item.open>.panel{height:auto}
.pin{display:grid;grid-template-columns:calc(190*var(--p)) calc(520*var(--p)) calc(80*var(--p)) 1fr calc(56*var(--p));
  row-gap:calc(36*var(--p));padding:calc(44*var(--p)) 0 calc(64*var(--p));align-items:start}
.c-l{grid-column:2/3}.c-r{grid-column:4/5}.c-f{grid-column:2/5}
/* type scale: XL figures / L dates / M leads / S text / labels */
.L{font:900 calc(80*var(--p))/.92 var(--lat);font-stretch:68%;letter-spacing:-.015em;white-space:nowrap}
.M{font:900 calc(26*var(--p))/1.5 var(--jp);letter-spacing:.02em;margin:0}
.S{font:500 calc(15*var(--t))/1.95 var(--jp);letter-spacing:.04em;margin:0}
.lab{font:700 calc(12*var(--t))/1.3 var(--lat);letter-spacing:.16em;text-transform:uppercase;margin:0 0 calc(14*var(--p))}
.lab b{font:700 calc(12*var(--t))/1.3 var(--jp);letter-spacing:.08em;margin-left:calc(10*var(--p));opacity:.7}
.list{list-style:none;margin:0;padding:0}
.list li{position:relative;display:grid;align-items:baseline;padding:calc(15*var(--p)) 0}
.list li .rl{left:0;top:0}
.list.last li:last-child{border-bottom:1px solid currentColor}
/* 01 朝市 (cobalt) */
#asaichi .fig{font-size:calc(132*var(--p));line-height:.86}
#asaichi .goods{display:grid;grid-template-columns:1fr 1fr;column-gap:calc(32*var(--p));list-style:none;margin:0;padding:0}
#asaichi .goods li{position:relative;padding:calc(14*var(--p)) 0 calc(16*var(--p));display:flex;justify-content:space-between;align-items:baseline}
#asaichi .goods li .rl{left:0;top:0}
#asaichi .goods .g{font:900 calc(30*var(--p))/1.1 var(--jp);letter-spacing:.01em}
#asaichi .goods .k{font:700 calc(12*var(--t))/1 var(--jp);letter-spacing:.08em;opacity:.7}
#asaichi .goods-more{border-top:1px solid currentColor;margin:0;padding:calc(16*var(--p)) 0 0;font:900 calc(20*var(--p))/1.1 var(--lat);letter-spacing:.08em;color:var(--cobalt)}
#asaichi .date{font-size:calc(72*var(--p))}
/* 02 催し */
.prog3{display:grid;grid-template-columns:repeat(3,1fr);column-gap:calc(40*var(--p))}
.prog3>div{position:relative;padding-top:calc(20*var(--p));display:flex;flex-direction:column}
.prog3>div>.rl{left:0;top:0}
.prog3 .no{font:900 calc(64*var(--p))/.9 var(--lat);font-stretch:68%}
.prog3 .t{font:900 calc(30*var(--p))/1.3 var(--jp);letter-spacing:.01em;margin-top:calc(22*var(--p))}
.prog3 .st{font:700 calc(15*var(--t))/1.6 var(--jp);letter-spacing:.04em;margin-top:calc(4*var(--p))}
.prog3 .d{font:500 calc(14*var(--t))/1.85 var(--jp);letter-spacing:.04em;margin-top:calc(14*var(--p));opacity:.8}
/* 03 能登 (deep) */
#support .M{font-size:calc(24*var(--p))}
#noto .big{font:900 calc(48*var(--p))/1.3 var(--jp);letter-spacing:-.01em;margin:0}
#noto .S{font-size:calc(16*var(--t));line-height:2.05}
/* 04 応援 */
.uses li{grid-template-columns:calc(40*var(--p)) 1fr;padding:calc(13*var(--p)) 0}
.uses .no{font:700 calc(12*var(--t))/1.8 var(--lat);letter-spacing:.06em}
.uses b{font:900 calc(17*var(--t))/1.6 var(--jp);display:block}
.uses span{font:500 calc(14*var(--t))/1.7 var(--jp);letter-spacing:.03em}
.tiers{display:grid;grid-template-columns:repeat(4,1fr);position:relative;padding-top:calc(16*var(--p))}
.tiers>.rl{left:0;top:0}
.tiers div{display:grid;gap:calc(8*var(--p))}
.tiers .t{font:700 calc(11*var(--t))/1 var(--lat);letter-spacing:.16em}
.tiers .L{font-size:calc(56*var(--p))}
.tiers .u{font:700 calc(12*var(--t))/1 var(--jp);letter-spacing:.06em;opacity:.75}
.tiers .note{grid-column:1/-1;margin-top:calc(16*var(--p))}
/* 05 案内 (deep) */
.table2{display:grid;grid-template-columns:1fr 1fr;column-gap:calc(80*var(--p))}
.table li{grid-template-columns:calc(116*var(--p)) 1fr;padding:calc(16*var(--p)) 0}
.table .k{font:700 calc(13*var(--t))/1.7 var(--jp);letter-spacing:.1em;opacity:.65}
.table .v{font:900 calc(20*var(--p))/1.5 var(--jp);letter-spacing:.02em}
.table .v small{display:block;font:500 calc(14*var(--t))/1.6 var(--jp);letter-spacing:.03em;opacity:.7}
/* the footer wordmark bleeds past the link columns and closes the page at its lower edge */
.end{position:relative;overflow:hidden;width:calc(100% + 2*var(--foot-pad));margin:calc(48*var(--p)) 0 0 calc(-1*var(--foot-pad));color:var(--paper)}
#endmark{display:block;width:max-content;font-family:var(--lat);font-weight:900;font-stretch:62.5%;letter-spacing:-.04em;word-spacing:.06em;line-height:1;white-space:nowrap}
.end-line{display:inline}

/* ---------------------------------------------------------------- footer: a full-bleed cobalt ending */
#foot{--foot-pad:clamp(32px,calc(56*var(--p)),72px);background:var(--cobalt);color:var(--paper);padding:calc(48*var(--p)) var(--foot-pad) 0;position:relative}
.fcols{display:grid;grid-template-columns:repeat(4,minmax(168px,360px)) 1fr;column-gap:clamp(20px,2.4vw,48px);align-items:start}
.fcols .totop{justify-self:end}
.fcol h4{margin:0 0 calc(18*var(--p));font:700 calc(11*var(--t))/1 var(--lat);letter-spacing:.18em;opacity:.75}
.fcol ul{list-style:none;margin:0;padding:0;display:grid;gap:calc(9*var(--p))}
.fcol.site ul{grid-template-columns:repeat(5,auto);justify-content:start;column-gap:calc(22*var(--p))}
.fcol a,.fcol span{white-space:nowrap;font:700 calc(14*var(--t))/1.4 var(--jp);letter-spacing:.04em;text-decoration:none}
.fcol .na{opacity:.75;cursor:default}
.fcol small{font:700 calc(9*var(--t))/1 var(--lat);letter-spacing:.12em;margin-left:calc(8*var(--p))}
.fcol .h{font:700 calc(12*var(--t))/1 var(--lat);letter-spacing:.04em;opacity:.8;margin-right:calc(10*var(--p))}
.fcol .ar{font:900 calc(11*var(--t))/1 var(--lat);font-style:normal;color:var(--orange);margin-left:calc(6*var(--p))}
.totop{align-self:start;font:700 calc(11*var(--t))/1 var(--lat);letter-spacing:.18em;text-decoration:none;display:inline-flex;gap:calc(8*var(--p));opacity:.7}
.totop b{color:var(--orange)}
.totop:hover,.totop:focus-visible{opacity:1}
.fsponsors{display:grid;justify-items:center;gap:clamp(22px,2vw,32px);margin-top:calc(48*var(--p));padding-top:calc(24*var(--p));border-top:1px solid currentColor;text-align:center}
.fsponsors h4{margin:0;font:700 calc(11*var(--t))/1.4 var(--lat);letter-spacing:.18em;opacity:.75}
.fsponsor-tier{width:100%}
.fsponsor-list{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:14px clamp(24px,3vw,48px);list-style:none;margin:0;padding:0}
.fsponsor-list li{min-width:0;max-width:100%;letter-spacing:.04em;cursor:default}
.fsponsor-groups{display:grid;gap:20px;width:100%}
.sponsor-trigger{appearance:none;border:0;border-radius:0;background:none;padding:4px 0;color:inherit;font:inherit;letter-spacing:inherit;cursor:pointer;text-align:inherit}
.sponsor-arrow{font-size:.9em;margin-left:.5em;color:inherit}
.fsponsor-name{display:block;padding:4px 0;cursor:default}
.sponsor-trigger:hover,.sponsor-trigger:focus-visible{color:var(--orange)}
.sponsor-trigger:focus-visible{outline:1px solid currentColor;outline-offset:5px}
.fsponsor-tier--platinum{font:700 clamp(18px,1.65vw,25px)/1.5 var(--jp)}
.fsponsor-tier--gold{font:700 clamp(16px,1.4vw,21px)/1.5 var(--jp)}
.fsponsor-tier--silver{font:700 clamp(15px,1.2vw,19px)/1.5 var(--jp)}
.fsponsor-tier--bronze{font:700 clamp(12px,1vw,16px)/1.5 var(--jp)}
.fsponsor-list li{flex:0 1 auto;overflow-wrap:anywhere;word-break:normal}
.sponsors-modal-open{overflow:hidden!important;scrollbar-gutter:stable}
.sponsors-dialog{border:0;padding:0;background:var(--paper);color:var(--cobalt);width:min(880px,calc(100% - 40px));max-width:none;max-height:calc(100svh - 48px - env(safe-area-inset-top) - env(safe-area-inset-bottom));overflow:hidden}
.sponsors-dialog[open]{display:flex;flex-direction:column}
.sponsors-dialog::backdrop{background:rgba(1,48,226,.72)}
.sponsors-dialog-head{display:flex;flex:none;align-items:center;justify-content:space-between;gap:20px;padding:20px clamp(20px,4vw,44px);border-bottom:1px solid currentColor}
.sponsors-dialog-head h2{font:900 clamp(22px,3vw,36px)/1 var(--lat);letter-spacing:-.02em;margin:0}
.sponsors-close{display:grid;place-items:center;flex:none;width:44px;height:44px;border:0;background:none;color:inherit;font:500 36px/1 var(--lat);cursor:pointer}
.sponsors-close:hover,.sponsors-close:focus-visible{color:var(--orange)}
.sponsors-close:focus-visible{outline:1px solid currentColor}
.sponsors-dialog-content{min-height:0;overflow:auto;overscroll-behavior:contain;padding:36px clamp(24px,4vw,52px) 44px}
.sponsors-dialog-tier+section{margin-top:66px}
.sponsors-dialog-tier h3{font:700 12px/1.4 var(--lat);letter-spacing:.18em;margin:0 0 28px;text-align:center}
.sponsors-logo-grid{--sponsor-gap:16px;display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:30px var(--sponsor-gap);list-style:none;padding:0;margin:0}
.sponsors-logo-item{flex:0 0 calc((100% - (var(--sponsor-cols) - 1)*var(--sponsor-gap))/var(--sponsor-cols));min-width:0;text-align:center;display:flex;align-items:center;justify-content:center}
.sponsor-logo{display:block;height:auto;object-fit:contain;max-width:100%}
.sponsors-logo-grid--platinum .sponsor-logo{width:min(100%,310px);max-height:92px}
.sponsors-logo-grid--platinum .sponsor-logo--nss{width:130px;max-height:116px}
.sponsors-logo-grid--platinum .sponsor-logo--tdi{width:min(100%,280px);max-height:141px}
.sponsors-logo-grid--silver .sponsor-logo{width:min(100%,140px);max-height:82px}
.sponsor-name{font:700 clamp(10px,1.4vw,15px)/1.6 var(--jp);overflow-wrap:anywhere}
@media(max-width:1023px) and (orientation:portrait){
  .fsponsor-groups{gap:14px}
  .fsponsor-groups .fsponsor-list{gap:8px 20px}
  .fsponsor-groups .fsponsor-name{padding:2px 0}
  .fsponsor-tier--platinum{font-size:16px;gap:8px 20px}
  .fsponsor-tier--silver{font-size:14px}
  .fsponsor-tier--bronze{font-size:12px}
  .fsponsor-tier--bronze li{flex:0 1 calc((100% - 32px)/3)}
  .sponsors-dialog{width:calc(100% - 24px)}
  .sponsors-dialog-head{padding:12px 16px}
  .sponsors-dialog-content{padding:28px 24px 36px}
  .sponsors-logo-grid--platinum .sponsor-logo{width:min(100%,245px);max-height:72px}
  .sponsors-logo-grid--platinum .sponsor-logo--nss{width:112px;max-height:100px}
  .sponsors-logo-grid--platinum .sponsor-logo--tdi{width:min(100%,245px);max-height:123px}
  .sponsors-dialog-tier+section{margin-top:54px}
  .sponsors-logo-grid{--sponsor-gap:12px;row-gap:26px}
}

.fbar{position:relative;display:grid;grid-template-columns:minmax(0,1fr) auto auto;align-items:center;gap:clamp(20px,2.4vw,40px);margin-top:calc(44*var(--p));padding-top:calc(16*var(--p));font:500 calc(11*var(--t))/1.4 var(--jp);letter-spacing:.06em}
.fbar>span,.fbar>.rl{opacity:.8}
.fbar>span:nth-of-type(2){white-space:nowrap}
.footer-seal{width:clamp(76px,6.67vw,100px);aspect-ratio:1;justify-self:end;display:grid;place-items:center;background:#FCFAEF}
.footer-seal img{display:block;width:100%;height:auto;object-fit:contain}
.fbar .rl{left:0;top:0}

/* ---------------------------------------------------------------- links: one language (text, orange rule, arrow)
   hover: an orange rule under the text.  keyboard focus: a thicker orange rule + orange text (never the browser ring
   alone, never removed without a replacement).  tap targets are padded to ~44 px without moving the layout. */
.fcol a,.totop,.s-cue{position:relative;color:inherit;text-decoration:none;cursor:pointer;-webkit-tap-highlight-color:transparent;
  text-decoration-line:underline;text-decoration-color:transparent;text-decoration-thickness:1px;text-underline-offset:.32em;
  transition:text-decoration-color .45s var(--ease),color .45s var(--ease)}
.fcol a{display:inline-block;padding:11px 0;margin:-11px 0}
.fcol.site a{padding:11px 8px;margin:-11px -8px}
.totop,.s-cue{padding:14px;margin:-14px}
.fcol a:hover,.totop:hover,.s-cue:hover{text-decoration-color:var(--orange)}
.fcol .contact-link:hover{color:var(--orange)}
.fcol a:focus-visible,.totop:focus-visible,.s-cue:focus-visible{outline:none;color:var(--orange);text-decoration-color:var(--orange);text-decoration-thickness:2px}
#foot .fcol a:focus-visible,#foot .totop:focus-visible{color:var(--paper);outline:2px solid var(--paper);outline-offset:3px}
.row:focus-visible{outline:none}
.row:focus-visible .rx{transform:none;background:var(--orange)}
.row:focus-visible .num{color:var(--orange)}
.item:is(.deep,.cob).open>.row:focus-visible .rx{background:var(--orange)}
:focus-visible{outline:2px solid var(--orange);outline-offset:3px}

/* ---------------------------------------------------------------- PHONE + PORTRAIT TABLET (portrait, < 1024 px)
   The whole page recomposed for a tall screen (not the desktop scaled down). Scoped to this query, so the desktop
   styles above are untouched (landscape and >= 1024 px never see any of it). The hero canvas composition for phones
   is in hero.js (MOB, < 700 px); portrait tablets keep the desktop hero.
   Units: --u = one px of a 390 px-wide phone (fluid, capped for tablets); --pad = the page's side margin.
   Heights: 100svh (the height with Safari's bars shown — it does not change when they slide away). */
@media (max-width: 1023px) and (orientation: portrait) {
  :root { --p: calc(100vw / 1600); --t: var(--p); --vh: 100svh;
    --u: min(calc(100vw / 390), 1.7px); --pad: calc(20 * var(--u)); }
  html, body { overflow-x: clip; }
  #stage, #veil, #statement { bottom: auto; height: 100svh; }
  .rl { left: var(--pad); }

  /* statements: the same face and weight, 3-4 short lines (the .m setting), one shared optical centre */
  #statement .l.d { display: none; }
  #statement .l.m { display: block; }
  #statement .st { top: 46%; font-size: clamp(24px, 8.1vw, 44px); line-height: 1.42; }

  /* EVENT SUMMARY — a poster page: title / date as one block in the upper half, the facts under it, the three
     programmes as a ruled list, INDEX in the corner. Left-aligned on the margin, nothing centred. */
  #summary { height: auto; min-height: 100svh; }
  #summary .fr { position: relative; inset: auto; min-height: 100svh; display: grid; grid-template-columns: minmax(0, 1fr);
    grid-template-rows: 1.1fr auto auto auto 1.5fr; column-gap: 0;
    padding: calc(40 * var(--u) + env(safe-area-inset-top)) var(--pad) calc(76 * var(--u) + env(safe-area-inset-bottom)); }
  .s-anchor { grid-area: 2/1/3/2; align-self: end; font-size: calc(57.5 * var(--u)); line-height: 1.02; letter-spacing: -.045em; }
  .s-anchor .in { font-size: .78em; margin-right: .12em; }
  .s-date { grid-area: 3/1/4/2; align-self: start; margin: 0; padding-top: calc(14 * var(--u)); font-size: calc(69 * var(--u)); line-height: .9; letter-spacing: -.015em; }
  .s-meta { display: block; grid-area: 4/1/5/2; margin: calc(14 * var(--u)) 0 0; font: 700 max(12.5px, calc(13.5 * var(--u)))/1.55 var(--jp); letter-spacing: .04em; }
  .s-meta b { color: var(--orange); font-weight: 900; }
  .s-band { grid-area: 5/1/6/2; align-self: start; margin: calc(30 * var(--u)) 0 0; padding: 0; display: block; }
  .s-band::before { top: 0; } .s-band::after { bottom: 0; }
  .s-band li { position: relative; display: flex; align-items: baseline; padding: calc(13 * var(--u)) 0 calc(14 * var(--u)); }
  .s-band li + li:not(.sl)::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px; background: currentColor; opacity: .35; }
  .s-band .sl { display: none; }
  .s-band i { font-size: max(10px, calc(11 * var(--u))); margin: 0 calc(10 * var(--u)) 0 0; min-width: calc(22 * var(--u)); }
  .s-band i::after { content: "/"; color: var(--orange); margin-left: calc(6 * var(--u)); }
  .s-band b { font-size: calc(23 * var(--u)); }
  #summary .s-cue { right: var(--pad); bottom: calc(24 * var(--u) + env(safe-area-inset-bottom)); font-size: max(11px, calc(12 * var(--u))); gap: 8px; }

  /* INDEX — the same rows of big words; on a phone the row's one-line description is always shown (no hover),
     set small on one line under the word */
  #index { min-height: 0; padding: calc(56 * var(--u)) 0 0; }
  .ihead { height: calc(44 * var(--u)); padding: 0 var(--pad); }
  .ihead .meta { font-size: max(11px, calc(12 * var(--u))); }
  .row { height: calc(118 * var(--u)); min-height: 72px; }
  .row .num { left: var(--pad); top: calc(18 * var(--u)); font-size: max(11px, calc(12 * var(--u))); }
  .row .mk { left: calc(var(--pad) + 24 * var(--u)); top: calc(19 * var(--u)); width: calc(7 * var(--u)); height: calc(7 * var(--u)); }
  .row .jw { left: calc(var(--pad) + 46 * var(--u)); top: calc(12 * var(--u)); font-size: calc(62 * var(--u)); }
  .row .en { right: var(--pad); top: calc(20 * var(--u)); font-size: max(10.5px, calc(11.5 * var(--u))); transition: opacity .4s var(--ease); }
  .row .cl { right: var(--pad); top: calc(20 * var(--u)); font-size: max(10.5px, calc(11.5 * var(--u))); }
  .item.open > .row .en { opacity: 0; }
  .row .info { clip-path: none; left: calc(var(--pad) + 46 * var(--u)); right: auto; top: auto; bottom: calc(16 * var(--u));
    white-space: nowrap; font-size: max(11px, calc(12 * var(--u))); line-height: 1.3; letter-spacing: .04em; transition: opacity .4s var(--ease); }
  .row .info b { font-size: inherit; margin-left: .4em; }
  .item.open > .row .info { opacity: 0; }
  .row .seg { left: calc(var(--pad) + 46 * var(--u)); width: calc(132 * var(--u)); }
  .item.open > .row .seg { left: calc(var(--pad) + 46 * var(--u)); width: calc(132 * var(--u)); }
  .item.open > .row .jw { transform: none; }
  .item:not(.open):not(.calm) > .row:is(:hover, :focus-visible, .on) .c2 { transform: none; }
  .item:not(.open):not(.calm) > .row:is(:hover, :focus-visible, .on) .info { clip-path: none; }

  /* the content inside a row: one column on the margin, lead first, facts after */
  .pin { display: block; padding: calc(30 * var(--u)) var(--pad) calc(48 * var(--u)); }
  .pin > * + * { margin-top: calc(36 * var(--u)); }
  .c-l, .c-r, .c-f { grid-column: auto; }
  .c-r[style] { padding-top: 0 !important; }
  .pin p[style*="margin-top"] { margin-top: calc(18 * var(--u)) !important; }
  .L { font-size: calc(60 * var(--u)); }
  .M { font-size: calc(19 * var(--u)); line-height: 1.62; }
  .S { font-size: max(13.5px, calc(14.5 * var(--u))); line-height: 1.9; }
  .lab { font-size: max(10.5px, calc(11 * var(--u))); margin-bottom: calc(12 * var(--u)); }
  .lab b { font-size: max(10.5px, calc(11 * var(--u))); margin-left: 8px; }
  .list li { padding: calc(13 * var(--u)) 0; }
  #asaichi .fig { font-size: calc(104 * var(--u)); }
  #asaichi .date { font-size: calc(58 * var(--u)); }
  #asaichi .goods { column-gap: calc(18 * var(--u)); }
  #asaichi .goods li { padding: calc(12 * var(--u)) 0 calc(13 * var(--u)); }
  #asaichi .goods .g { font-size: calc(22 * var(--u)); }
  #asaichi .goods .k { font-size: max(10.5px, calc(11 * var(--u))); }
  #asaichi .goods-more { padding-top: calc(15 * var(--u)); font-size: max(15px, calc(17 * var(--u))); }
  .prog3 { display: block; }
  .prog3 > div { padding: calc(18 * var(--u)) 0 calc(24 * var(--u)); }
  .prog3 .no { font-size: calc(46 * var(--u)); }
  .prog3 .t { font-size: calc(23 * var(--u)); margin-top: calc(12 * var(--u)); }
  .prog3 .st { font-size: max(13px, calc(14 * var(--u))); }
  .prog3 .d { font-size: max(13px, calc(13.5 * var(--u))); margin-top: calc(8 * var(--u)); }
  #noto .big { font-size: calc(33 * var(--u)); }
  #noto .S { font-size: max(14px, calc(15 * var(--u))); }
  #support .M { font-size: calc(18.5 * var(--u)); }
  .uses li { grid-template-columns: calc(32 * var(--u)) 1fr; }
  .uses .no { font-size: max(10.5px, calc(11 * var(--u))); }
  .uses b { font-size: max(14px, calc(15.5 * var(--u))); }
  .uses span { font-size: max(13px, calc(13.5 * var(--u))); }
  .tiers { grid-template-columns: 1fr 1fr; row-gap: calc(20 * var(--u)); padding-top: calc(16 * var(--u)); }
  .tiers div { gap: 6px; }
  .tiers .t { font-size: max(10px, calc(10.5 * var(--u))); }
  .tiers .L { font-size: calc(42 * var(--u)); }
  .tiers .u { font-size: max(11px, calc(11.5 * var(--u))); }
  .tiers .note { margin-top: calc(4 * var(--u)); }
  .table2 { display: block; }
  .table2 > .table + .table li:first-child { border-top: 0; }
  .table li { grid-template-columns: calc(78 * var(--u)) 1fr; padding: calc(14 * var(--u)) 0; }
  .table .k { font-size: max(11.5px, calc(12 * var(--u))); }
  .table .v { font-size: calc(17.5 * var(--u)); }
  .table .v small { font-size: max(12.5px, calc(13 * var(--u))); }
  .end { margin-top: calc(24 * var(--u)); }
  .end-line { display: block; }
  #endmark { line-height: .85; }

  /* FOOTER — readable links above a two-line full-width wordmark */
  #foot { --foot-pad: var(--pad); padding: calc(26 * var(--u)) var(--foot-pad) 0; }
  .fcols { grid-template-columns: minmax(0, 1fr); column-gap: calc(16 * var(--u)); row-gap: calc(12 * var(--u)); }
  .fcol.site, .fcols > .fcol:nth-child(2) { grid-column: 1 / -1; }
  .fcols .totop { grid-column: 1 / -1; justify-self: end; }
  .fcol h4 { font-size: 10.5px; margin-bottom: 0; }
  .fcol ul { gap: 0; }
  .fcol.site ul { grid-template-columns: repeat(5, auto); column-gap: calc(14 * var(--u)); justify-content: start; }
  .fcol a, .fcol span { font-size: 14px; }
  .fcol a, .fcol.site a { display: inline-flex; align-items: center; min-height: 34px; padding: 0; margin: 0; }
  .fcol.site a { min-width: 44px; }
  .fcol .na { display: inline-flex; align-items: center; min-height: 44px; }
  .fcol small { font-size: 9px; }
  .fcol .h { font-size: 11.5px; }
  .fcol .ar { font-size: 11px; }
  .totop, #summary .s-cue { padding: 17px 14px; margin: -17px -14px; }
  .totop { font-size: 11px;padding:12px 8px;margin:-12px -8px; }
  .fsponsors { gap:18px;margin-top:calc(16*var(--u));padding-top:calc(20*var(--u)); }
  .fsponsors h4 { font-size: 10.5px; }
  .fsponsor-list { gap:12px 16px; }
  .fsponsor-tier--bronze li { flex-basis:calc((100% - 32px) / 3); }
  .fbar { grid-template-columns:minmax(0,1fr) auto;gap:4px 12px;margin-top:calc(20 * var(--u));padding-top:14px;font-size:10.5px; }
  .fbar>span { grid-column:1; }
  .fbar>span:nth-of-type(2) { white-space:normal; }
  .footer-seal{grid-column:2;grid-row:1 / 3;width:clamp(52px,14.4vw,64px);align-self:center}
}

/* phones held sideways get the desktop composition; nothing may push the page wider than the screen */
@media (max-width: 1023px) and (orientation: landscape) and (max-height: 540px) {
  html, body { overflow-x: clip; }
}

@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}

/* ---------------------------------------------------------------- text CTAs */
.cta-link{display:inline-flex;gap:calc(12*var(--p));align-items:baseline;margin:calc(24*var(--p)) 0 0;font:700 calc(15*var(--t))/1 var(--jp);color:inherit;
  text-decoration:underline;text-decoration-color:transparent;text-underline-offset:.32em;transition:text-decoration-color .45s var(--ease);padding:11px 0;margin-bottom:-11px}
.cta-link b{color:var(--orange);font-weight:900}
.cta-link:hover,.cta-link:focus-visible{text-decoration-color:var(--orange);outline:none}
.sponsor-contact:hover,.sponsor-contact:focus-visible{color:var(--orange)}
.email-contact{min-width:0;max-width:100%}
.email-row{display:flex;align-items:center;gap:4px 10px;max-width:100%}
.email-contact--sponsor .email-row{margin-top:12px}
.email-contact--footer .email-row{margin-top:6px;flex-wrap:wrap}
.email-contact .email-address{min-width:0;white-space:normal;overflow-wrap:anywhere;user-select:text;-webkit-user-select:text;font:700 clamp(14px,1.1vw,16px)/1.5 var(--jp);letter-spacing:.01em}
.email-copy{flex:0 0 auto;min-width:64px;min-height:32px;padding:0 4px;border:0;border-bottom:1px solid currentColor;background:none;color:inherit;font:700 11px/1 var(--lat);letter-spacing:.08em;cursor:pointer}
.email-copy:disabled{cursor:wait}
.email-contact .email-status{display:block;min-height:2.8em;max-width:100%;white-space:normal;font:500 10.5px/1.4 var(--jp);letter-spacing:0;opacity:.8}
@media (max-width:1023px) and (orientation:portrait){.email-row{flex-wrap:wrap}.email-copy{min-height:44px}}
@media (max-width:1023px) and (orientation:portrait){
  .email-contact--footer .contact-link{min-height:30px}
  .email-contact--footer .email-row{margin-top:0;gap:2px 6px}
  .email-contact--footer .email-copy{min-width:56px;min-height:32px}
  .email-contact--footer .email-status{min-height:0}
  .email-contact--footer .email-status:not(:empty){margin-top:4px}
}
@media (max-width: 1023px) and (orientation: portrait) { .cta-link { font-size: max(13.5px, calc(14 * var(--u))); } }


/* ---------------------------------------------------------------- GLASS INDEX (html[data-index="glass"])
   The summary page as one poster: the five INDEX words as liquid glass in an upright column on the centre axis — the
   odd one out — and flat type that builds the frame around them: the event, large, top left; a corner note top right;
   two rules across the page; the three programmes as a numbered table bottom left; the dates bottom right.
   A word opens its INDEX item beside it (the item itself is moved into .gx-body while it is read, then put back).
   Back: the chosen glass word, any empty part of the page, the INDEX button, or Esc.
   Switch: index.html INDEX_MODE or ?index=classic. In classic mode nothing here applies. */
.gx{display:none}
[data-index=glass] #summary{height:auto;min-height:var(--vh);overflow:clip}
[data-index=glass] #summary .fr{display:none}
[data-index=glass] #summary .gx{display:block;position:relative;--gx-top:calc(214*var(--p));--gx-bot:calc(206*var(--p));--gx-side:calc(50*var(--p))}
[data-index=glass] #index{display:none}
.gx-sticky{position:sticky;top:0;height:var(--vh);min-height:calc(560*var(--p));z-index:1}
.gx-open .gx-sticky{cursor:pointer}
#summary .gx-stage{position:absolute;inset:0}
.gx-canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
/* the frame: two rules across the page (they pass behind the glass) */
#summary .gx-rule{position:absolute;left:var(--gx-side);right:calc(56*var(--p));height:2px;background:currentColor;pointer-events:none}
.gx-rule.t{top:var(--gx-top)}.gx-rule.b{bottom:var(--gx-bot)}
/* top left: the event, large */
#summary .gx-title{position:absolute;left:var(--gx-side);top:calc(40*var(--p));margin:0;z-index:2;
  font:900 calc(78*var(--p))/.98 var(--jp);letter-spacing:-.04em;white-space:nowrap}
.gx-title .in{font-family:var(--lat);font-weight:800;font-stretch:72%;font-size:.8em;margin:0 .14em 0 0;letter-spacing:-.02em}
/* top right: a small corner note */
#summary .gx-corner{position:absolute;right:calc(56*var(--p));top:calc(48*var(--p));margin:0;z-index:2;display:flex;flex-direction:column;align-items:flex-end;
  gap:calc(6*var(--p));font:700 calc(12*var(--t))/1.2 var(--lat);letter-spacing:.16em;text-transform:uppercase}
.gx-corner span:first-child{font:900 calc(40*var(--p))/.9 var(--lat);font-stretch:68%;letter-spacing:0;margin-bottom:calc(6*var(--p))}
/* bottom left: the three programmes, a numbered table */
#summary .gx-prog{position:absolute;left:var(--gx-side);bottom:calc(36*var(--p));width:calc(470*var(--p));margin:0;padding:0;list-style:none;z-index:2;
  font:900 calc(26*var(--p))/1.15 var(--jp);letter-spacing:-.01em;transition:opacity .4s var(--ease)}
.gx-prog li{display:flex;align-items:baseline;gap:calc(18*var(--p));padding:calc(10*var(--p)) 0 calc(11*var(--p));border-bottom:1px solid currentColor}
.gx-prog li:last-child{border-bottom:0}
.gx-prog i{font:900 calc(26*var(--p))/1 var(--lat);font-stretch:68%;font-style:normal;min-width:calc(34*var(--p))}
/* bottom right: the dates, large; admission and venue under a rule */
#summary .gx-meta{position:absolute;right:calc(56*var(--p));bottom:calc(36*var(--p));margin:0;z-index:2;display:flex;flex-direction:column;align-items:flex-end;
  text-align:right;transition:opacity .4s var(--ease)}
.gx-meta .d{font:900 calc(104*var(--p))/.86 var(--lat);font-stretch:66%;letter-spacing:-.015em;white-space:nowrap}
.gx-meta .m{display:flex;gap:calc(22*var(--p));align-items:baseline;margin-top:calc(14*var(--p));font:700 calc(19*var(--p))/1.3 var(--jp);letter-spacing:.04em}
.gx-meta .m b{font-weight:900}
.gx-open .gx-meta,.gx-open .gx-prog,.gx-open .gx-rule.b,.gx-open .gx-corner{opacity:0;pointer-events:none}
.gx-rule.b,.gx-corner{transition:opacity .4s var(--ease)}
/* the glass words: the hit areas follow the glass; each carries its English name, set beside it on the axis */
.gx-words{position:absolute;inset:0;pointer-events:none}
.gx-words button{position:absolute;left:0;top:0;width:0;height:0;margin:0;padding:0;border:0;background:none;color:var(--cobalt);cursor:pointer;
  pointer-events:auto;font:700 10px/1 var(--lat);-webkit-tap-highlight-color:transparent}
.gx-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.gx-lab,.gx-x{position:absolute;white-space:nowrap;font:700 calc(13*var(--t))/1 var(--lat);letter-spacing:.18em;text-transform:uppercase;transition:color .3s var(--ease),opacity .3s var(--ease)}
.gx-lab{right:calc(100% + 26*var(--p));top:50%;transform:translateY(-50%);padding-right:calc(30*var(--p))}
.gx-lab::after{content:"";position:absolute;right:0;top:50%;width:calc(20*var(--p));height:2px;background:currentColor}
.gx-words button:hover .gx-lab,.gx-words button:focus-visible .gx-lab{color:var(--orange)}
.gx-x{left:50%;top:calc(100% + 18*var(--p));transform:translateX(-50%);opacity:0;pointer-events:none;
  text-decoration:underline;text-decoration-color:transparent;text-underline-offset:.45em;text-decoration-thickness:2px}
.gx-x b{color:var(--orange);margin-left:.5em;font-weight:900}
.gx-open .gx-lab{opacity:0}
.gx-open .gx-words button[aria-expanded=true] .gx-x{opacity:1}
.gx-words button[aria-expanded=true]:hover .gx-x,.gx-words button[aria-expanded=true]:focus-visible .gx-x{text-decoration-color:var(--orange)}
.gx-words button:focus-visible{outline:2px solid var(--orange);outline-offset:8px;border-radius:2px}
.gx:not(.gx-ready) .gx-words button{pointer-events:none}
/* how to go back, said once, small (only while an item is open) */
#summary .gx-hint{position:absolute;left:var(--gx-side);bottom:calc(36*var(--p));margin:0;z-index:2;opacity:0;pointer-events:none;
  font:700 calc(13*var(--t))/1.4 var(--jp);letter-spacing:.06em;transition:opacity .4s var(--ease) .3s}
.gx-hint b{color:var(--orange);margin-right:.6em}
#summary .gx-open .gx-hint{opacity:1}
/* the detail: right of the word (which stays on the left, sticky), the item's own content, scrolling with the page.
   Only its content takes clicks: everything else on the page goes back to the INDEX. */
.gx-detail{position:relative;z-index:2;margin-top:calc(-1*var(--vh));min-height:var(--vh);
  padding:calc(var(--gx-top) - 96*var(--p)) calc(56*var(--p)) calc(110*var(--p)) 47vw;opacity:0;transform:translate3d(0,calc(18*var(--p)),0);
  transition:opacity .45s var(--ease),transform .6s var(--ease);pointer-events:none}
.gx-detail[hidden]{display:none}
.gx-detail.gx-show{opacity:1;transform:none}
.gx-detail.gx-show .gx-dhead,.gx-detail.gx-show .gx-body{pointer-events:auto;cursor:auto}
/* the head: the number, very large, the English name, and INDEX (back) — sitting on the top rule */
.gx-dhead{display:grid;grid-template-columns:auto 1fr auto;align-items:end;column-gap:calc(26*var(--p));padding-bottom:calc(12*var(--p));margin-bottom:calc(46*var(--p))}
.gx-num{font:900 calc(150*var(--p))/.8 var(--lat);font-stretch:66%;letter-spacing:-.02em;color:var(--orange)}
.gx-dt{display:flex;flex-direction:column;gap:calc(8*var(--p));padding-bottom:calc(4*var(--p));font:900 calc(34*var(--p))/1 var(--lat);font-stretch:72%;letter-spacing:.02em}
.gx-of{font:700 calc(12*var(--t))/1 var(--lat);letter-spacing:.16em}
.gx-back{align-self:end;margin:0 -12px -12px 0;padding:12px;border:0;background:none;color:inherit;cursor:pointer;
  font:700 calc(13*var(--t))/1 var(--lat);letter-spacing:.18em;text-decoration:underline;text-decoration-color:transparent;text-underline-offset:.45em;text-decoration-thickness:2px;transition:text-decoration-color .3s var(--ease)}
.gx-back b{color:var(--orange);margin-left:.5em;font-weight:900}
.gx-back:hover,.gx-back:focus-visible{text-decoration-color:var(--orange);outline:none}
/* the moved INDEX item: its content only (no row), one column, set larger, in the page colours */
.gx-body .item>.row,.gx-body .item>.rl.bot,.gx-body .item::before{display:none}
.gx-body .item{color:var(--cobalt)}
.gx-body .panel{height:auto;overflow:visible}
.gx-body .pin{display:block;padding:0;opacity:1!important;transform:none!important}
.gx-body .pin>*+*{margin-top:calc(56*var(--p))}
.gx-body .c-r[style]{padding-top:0!important}
.gx-body .item .pin .rl{color:currentColor;left:0}
.gx-body .L{font-size:calc(104*var(--p))}
.gx-body #asaichi .fig{font-size:calc(176*var(--p))}
.gx-body .M{font-size:calc(34*var(--p));line-height:1.4}
.gx-body .S{font-size:calc(16*var(--t));line-height:2}
.gx-body .lab{font-size:calc(13*var(--t));margin-bottom:calc(18*var(--p))}
.gx-body .lab b{font-size:calc(14*var(--t))}
.gx-body #asaichi .goods .g{font-size:calc(38*var(--p))}
.gx-body .prog3{display:block}
.gx-body .prog3>div{display:grid;grid-template-columns:calc(120*var(--p)) 1fr;column-gap:calc(20*var(--p));padding:calc(22*var(--p)) 0 calc(28*var(--p))}
.gx-body .prog3>div>.rl{height:2px}
.gx-body .prog3 .no{grid-row:1/4;font-size:calc(104*var(--p))}
.gx-body .prog3 .t{margin-top:0;font-size:calc(46*var(--p));line-height:1.15}
.gx-body .prog3 .st{font-size:calc(18*var(--t))}
.gx-body .prog3 .d{font-size:calc(15*var(--t))}
.gx-body #noto .big{font-size:calc(66*var(--p))}
.gx-body #noto .S{font-size:calc(17*var(--t))}
.gx-body #support .M{font-size:calc(32*var(--p))}
.gx-body .tiers .L{font-size:calc(60*var(--p))}
.gx-body .table2{grid-template-columns:1fr;row-gap:0}
.gx-body .table2 .list.table:first-child li:last-child{border-bottom:0}
.gx-body .table .v{font-size:calc(28*var(--p))}
/* no WebGL: the five words as flat type, in the same column */
.gx-flat .gx-canvas{display:none}
.gx-flat .gx-words{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:0;font-size:calc(110*var(--p))}
.gx-flat .gx-words button{position:relative;inset:auto;width:auto!important;height:auto!important;left:auto!important;top:auto!important;font:900 1em/1.1 var(--jp);letter-spacing:-.02em}
.gx-flat .gx-sr{position:static;width:auto;height:auto;clip:auto;overflow:visible}
.gx-flat .gx-words button:hover,.gx-flat .gx-words button:focus-visible,.gx-flat .gx-words button[aria-expanded=true]{color:var(--orange)}
.gx-flat.gx-open .gx-words button:not([aria-expanded=true]){display:none}
.gx-flat.gx-open .gx-words{align-items:flex-start;padding-left:calc(56*var(--p))}

/* narrower landscape screens (tablets, small laptops): the frame is the same; the glass column and the type keep their
   weight (the type does not shrink with --p below a floor) */
@media (min-width: 1024px) and (max-width: 1279px), (orientation: landscape) and (max-width: 1023px) {
  #summary .gx-title { font-size: max(48px, calc(78 * var(--p))); }
  .gx-meta .d { font-size: max(68px, calc(104 * var(--p))); }
  #summary .gx-prog, .gx-prog i { font-size: max(17px, calc(26 * var(--p))); }
  #summary .gx-prog { width: max(300px, calc(470 * var(--p))); }
  .gx-meta .m { font-size: max(13px, calc(19 * var(--p))); }
  .gx-detail { padding-left: 45vw; }
}

/* PHONE + PORTRAIT TABLET: a vertical poster. Title block on top (two lines) over a rule; the glass column in the
   middle with its English names beside it; the programmes and the dates side by side at the foot, over a rule.
   Detail: the chosen word stays at the top, its number and content run below it. */
@media (max-width: 1023px) and (orientation: portrait) {
  [data-index=glass] #summary { min-height: 100svh; }
  [data-index=glass] #summary .gx { --gx-top: calc(128 * var(--u) + env(safe-area-inset-top)); --gx-bot: calc(176 * var(--u) + env(safe-area-inset-bottom)); --gx-side: var(--pad); }
  .gx-sticky { height: 100svh; min-height: calc(600 * var(--u)); }
  #summary .gx-rule { right: var(--pad); height: 2px; }
  #summary .gx-title { top: calc(24 * var(--u) + env(safe-area-inset-top)); font-size: calc(44 * var(--u)); line-height: .98; }
  #summary .gx-corner { right: var(--pad); top: calc(30 * var(--u) + env(safe-area-inset-top)); font-size: 9.5px; gap: 3px; }
  .gx-corner span:first-child { font-size: calc(26 * var(--u)); margin-bottom: 2px; }
  .gx-corner span:last-child { display: none; }
  #summary .gx-prog { left: var(--pad); right: var(--pad); width: auto; bottom: calc(112 * var(--u) + env(safe-area-inset-bottom)); display: flex; flex-wrap: wrap; column-gap: 14px; font-size: calc(13.5 * var(--u)); }
  .gx-prog li { gap: 6px; padding: 2px 0; border: 0; }
  .gx-prog i { font-size: calc(15 * var(--u)); min-width: calc(18 * var(--u)); }
  #summary .gx-meta { right: var(--pad); bottom: calc(20 * var(--u) + env(safe-area-inset-bottom)); }
  #summary .gx-meta { left: var(--pad); align-items: stretch; text-align: left; }
  .gx-meta .d { font-size: calc(62 * var(--u)); }
  .gx-meta .m { justify-content: space-between; gap: 8px; margin-top: calc(8 * var(--u)); font-size: max(12px, calc(13 * var(--u))); }
  .gx-lab { right: calc(100% + 10px); padding-right: 18px; font-size: 9.5px; letter-spacing: .14em; }
  .gx-lab::after { width: 12px; }
  .gx-x { font-size: 10px; top: calc(100% + 8px); }
  #summary .gx-hint { display: none; }
  .gx-detail { margin-top: -100svh; min-height: 100svh; padding: calc(40svh) var(--pad) calc(64 * var(--u));
    background: linear-gradient(to bottom, transparent calc(40svh - 20px), var(--paper) calc(40svh - 20px)); }
  .gx-dhead { column-gap: 12px; margin-bottom: calc(26 * var(--u)); border-top: 2px solid currentColor; padding-top: calc(12 * var(--u)); }
  .gx-num { font-size: calc(84 * var(--u)); }
  .gx-dt { font-size: calc(22 * var(--u)); gap: 6px; }
  .gx-of, .gx-back { font-size: 10.5px; }
  .gx-body .pin > * + * { margin-top: calc(40 * var(--u)); }
  .gx-body .L { font-size: calc(60 * var(--u)); }
  .gx-body #asaichi .fig { font-size: calc(104 * var(--u)); }
  .gx-body .M, .gx-body #support .M { font-size: calc(21 * var(--u)); }
  .gx-body .S, .gx-body #noto .S { font-size: max(14px, calc(14.5 * var(--u))); }
  .gx-body #asaichi .goods .g { font-size: calc(22 * var(--u)); }
  .gx-body .prog3 > div { grid-template-columns: calc(62 * var(--u)) 1fr; column-gap: 10px; padding: calc(16 * var(--u)) 0 calc(20 * var(--u)); }
  .gx-body .prog3 .no { font-size: calc(54 * var(--u)); }
  .gx-body .prog3 .t { font-size: calc(24 * var(--u)); }
  .gx-body .prog3 .st { font-size: max(13px, calc(14 * var(--u))); }
  .gx-body .prog3 .d { font-size: max(12.5px, calc(13 * var(--u))); }
  .gx-body #noto .big { font-size: calc(34 * var(--u)); }
  .gx-body .tiers .L { font-size: calc(40 * var(--u)); }
  .gx-body .table .v { font-size: calc(19 * var(--u)); }
  .gx-flat .gx-words { font-size: calc(58 * var(--u)); }
}

/* ================================================================ GLASS INDEX — LAYOUTS (html[data-gxl])
   One component, three compositions (index.html GLASS_LAYOUT, or ?layout=monumental | editorial | current).
   Where the glass goes is set here too: .gx-slot = the column at rest, .gx-dslot = the chosen word when open
   (glass-index.js fits the 3D into these boxes); --gx-pitch on .gx-slot = the step between the words (em). */
#summary .gx-slot,#summary .gx-dslot{position:absolute;pointer-events:none;visibility:hidden}
.gx-title .w{display:inline}.gx-title .w4{display:block}
#summary .gx-big,#summary .gx-run{display:none}

/* ---- current (the previous version, unchanged in look) */
[data-gxl=current] #summary .gx-slot{left:25%;width:50%;top:15%;height:70%}
[data-gxl=current] #summary .gx-dslot{left:8.5%;width:30%;top:36%;height:40%}
@media (max-width: 1023px) and (orientation: portrait) {
  [data-gxl=current] #summary .gx-slot { left: 25%; width: 50%; top: 27%; height: 50%; }
  [data-gxl=current] #summary .gx-dslot { left: 25%; width: 50%; top: 18.5%; height: 17%; }
}

/* shared by the two new layouts: no rules across the page, no corner note, no English labels beside the glass */
:is([data-gxl=monumental],[data-gxl=editorial],[data-gxl=focus]) #summary :is(.gx-rule,.gx-corner),
:is([data-gxl=monumental],[data-gxl=editorial],[data-gxl=focus]) .gx-lab{display:none}
:is([data-gxl=monumental],[data-gxl=editorial],[data-gxl=focus]) #summary .gx-hint{display:none}
:is([data-gxl=monumental],[data-gxl=editorial],[data-gxl=focus]) .gx-prog li{border:0}

/* ================================================================ B — MONUMENTAL
   The event name, monumental, stacked two characters a line on the left (出張 / 輪島 / 朝市) — the same two-character
   rhythm as the glass column on the right. The 2D facts hang off the glass word they belong to: the three programmes
   beside 催し (programme), the dates / admission / venue beside 案内 (information). Between them, open space.
   Open: the name gives way to the item's number, monumental; the chosen word (orange glass) sits under it; the item
   reads on the right; a running line keeps the event at the foot. */
[data-gxl=monumental] #summary .gx{--m:calc(52*var(--p));--top:calc(40*var(--p));--bot:calc(40*var(--p));--colw:calc(286*var(--p))}
[data-gxl=monumental] #summary .gx-slot{right:var(--m);width:var(--colw);top:var(--top);bottom:var(--bot);--gx-pitch:1.12}
[data-gxl=monumental] #summary .gx-title{left:var(--m);top:calc(var(--top) - 26*var(--p));font:900 calc(250*var(--p))/.97 var(--jp);letter-spacing:-.05em;white-space:normal}
[data-gxl=monumental] .gx-title .w{display:block}
[data-gxl=monumental] .gx-title .w4{font-size:.4em;line-height:1;margin-top:.24em;letter-spacing:-.03em}
[data-gxl=monumental] .gx-title .in{font-size:.78em;margin-right:.16em}
/* programmes: right-aligned to the glass column, level with 催し */
[data-gxl=monumental] #summary .gx-prog{left:auto;bottom:auto;right:calc(var(--m) + var(--colw) + 30*var(--p));top:calc(var(--top) + 6*var(--p));width:auto;
  font:900 calc(31*var(--p))/1.2 var(--jp);text-align:right}
[data-gxl=monumental] .gx-prog li{justify-content:flex-end;gap:calc(14*var(--p));padding:calc(3*var(--p)) 0}
[data-gxl=monumental] .gx-prog i{order:2;min-width:calc(36*var(--p));font-size:calc(31*var(--p));text-align:right}
/* dates: right-aligned to the glass column, level with 案内 */
[data-gxl=monumental] #summary .gx-meta{right:calc(var(--m) + var(--colw) + 30*var(--p));bottom:calc(var(--bot) + 4*var(--p))}
[data-gxl=monumental] .gx-meta .d{font-size:calc(124*var(--p))}
[data-gxl=monumental] .gx-meta .m{font-size:calc(20*var(--p));margin-top:calc(12*var(--p))}
/* open */
[data-gxl=monumental] .gx-open .gx-title,[data-gxl=monumental] .gx-open .gx-prog,[data-gxl=monumental] .gx-open .gx-meta{opacity:0;pointer-events:none}
[data-gxl=monumental] #summary .gx-title{transition:opacity .4s var(--ease)}
[data-gxl=monumental] #summary .gx-big{display:flex;flex-direction:column;position:absolute;left:var(--m);top:calc(var(--top) - 10*var(--p));margin:0;z-index:2;opacity:0;pointer-events:none;transition:opacity .45s var(--ease) .15s}
[data-gxl=monumental] .gx-big .n{font:900 calc(330*var(--p))/.78 var(--lat);font-stretch:62%;letter-spacing:-.03em}
[data-gxl=monumental] .gx-big .e{font:900 calc(36*var(--p))/1 var(--lat);font-stretch:72%;letter-spacing:.04em;margin-top:calc(14*var(--p))}
[data-gxl=monumental] #summary .gx-dslot{left:var(--m);width:calc(470*var(--p));top:calc(var(--top) + 360*var(--p));bottom:calc(var(--bot) + 70*var(--p))}
[data-gxl=monumental] #summary .gx-run{display:flex;gap:calc(22*var(--p));align-items:baseline;position:absolute;left:var(--m);bottom:var(--bot);margin:0;z-index:2;opacity:0;pointer-events:none;
  font:900 calc(20*var(--p))/1 var(--jp);letter-spacing:-.01em;transition:opacity .45s var(--ease) .15s}
[data-gxl=monumental] .gx-run .in{font-family:var(--lat);font-weight:800;font-stretch:72%}
[data-gxl=monumental] .gx-run .d{font:900 calc(20*var(--p))/1 var(--lat);font-stretch:68%}
[data-gxl=monumental] #summary .gx-open .gx-big,[data-gxl=monumental] #summary .gx-open .gx-run{opacity:1}
[data-gxl=monumental] .gx-open .gx-big .n{color:var(--cobalt)}
[data-gxl=monumental] .gx-detail{padding:calc(var(--top) + 6*var(--p)) var(--m) calc(110*var(--p)) calc(640*var(--p))}
[data-gxl=monumental] .gx-dhead{grid-template-columns:1fr auto;border-bottom:2px solid currentColor;margin-bottom:calc(40*var(--p))}
[data-gxl=monumental] .gx-dhead .gx-num{display:none}
[data-gxl=monumental] .gx-dt{flex-direction:row;align-items:baseline;gap:calc(14*var(--p));font-size:calc(22*var(--p))}

/* B, narrower landscape (≈ 4:3 – 3:2): the name in two long lines across the top-left (出張輪島 / 朝市 in 一橋祭), so it
   keeps its size; the facts stay with their glass words */
@media (min-width: 700px) and (max-aspect-ratio: 3/2) and (orientation: landscape), (min-width: 1024px) and (max-width: 1279px) and (max-aspect-ratio: 16/10) {
  [data-gxl=monumental] #summary .gx{--colw:calc(26vw)}
  [data-gxl=monumental] #summary .gx-title{font-size:calc(11.4vw);line-height:.98}
  [data-gxl=monumental] .gx-title .w{display:inline}
  [data-gxl=monumental] .gx-title .w3::before{content:"\A";white-space:pre}
  [data-gxl=monumental] .gx-title .w4{display:inline;font-size:.5em;margin-left:.3em}
  [data-gxl=monumental] #summary .gx-prog{top:auto;bottom:calc(var(--bot) + 11vw);right:calc(var(--m) + var(--colw) + 3vw);font-size:max(15px,1.9vw)}
  [data-gxl=monumental] .gx-prog i{font-size:max(15px,1.9vw)}
  [data-gxl=monumental] .gx-meta .d{font-size:max(46px,7.4vw)}
  [data-gxl=monumental] .gx-meta .m{font-size:max(12px,1.4vw)}
  [data-gxl=monumental] .gx-detail{padding-left:47vw}
  [data-gxl=monumental] #summary .gx-dslot{width:38vw}
  [data-gxl=monumental] .gx-big .n{font-size:24vw}
}

/* B, phone: a vertical poster. The name across the top in two lines (出張輪島 / 朝市 in 一橋祭); the glass column on the
   right half; the programmes beside 催し, admission / venue beside 案内; the dates across the foot, as large as fits.
   Open: the number and the chosen word at the top, the item below. */
@media (max-width: 1023px) and (orientation: portrait) {
  [data-gxl=monumental] #summary .gx { --m: var(--pad); --top: calc(18 * var(--u) + env(safe-area-inset-top)); --bot: calc(20 * var(--u) + env(safe-area-inset-bottom)); }
  [data-gxl=monumental] #summary .gx-title { font-size: calc(86 * var(--u)); line-height: .98; top: var(--top); }
  [data-gxl=monumental] .gx-title .w { display: inline; }
  [data-gxl=monumental] .gx-title .w3::before { content: "\A"; white-space: pre; }
  [data-gxl=monumental] .gx-title .w4 { display: inline; font-size: .42em; margin-left: .25em; }
  [data-gxl=monumental] #summary .gx-slot { left: 49%; right: var(--m); width: auto; top: calc(var(--top) + 200 * var(--u)); bottom: calc(var(--bot) + 92 * var(--u)); }
  [data-gxl=monumental] #summary .gx-prog { right: 53%; left: var(--m); top: calc(var(--top) + 212 * var(--u)); font-size: calc(12.5 * var(--u)); white-space: nowrap; }
  [data-gxl=monumental] .gx-prog li { padding: 3px 0; gap: 6px; }
  [data-gxl=monumental] .gx-prog i { font-size: calc(12.5 * var(--u)); min-width: 1.2em; }
  [data-gxl=monumental] #summary .gx-meta { left: var(--m); right: var(--m); bottom: var(--bot); align-items: stretch; text-align: left; }
  [data-gxl=monumental] .gx-meta .d { font-size: calc(70 * var(--u)); order: 2; }
  [data-gxl=monumental] .gx-meta .m { order: 1; flex-direction: column; align-items: flex-start; gap: 2px; margin: 0 0 calc(10 * var(--u)); width: 50%; white-space: nowrap;
    font-size: max(11px, calc(11.5 * var(--u))); position: absolute; bottom: calc(100% + 18 * var(--u)); }
  [data-gxl=monumental] #summary .gx-big { top: calc(var(--top) + 6 * var(--u)); }
  [data-gxl=monumental] .gx-big .n { font-size: calc(150 * var(--u)); }
  [data-gxl=monumental] .gx-big .e { font-size: calc(20 * var(--u)); margin-top: 8px; }
  [data-gxl=monumental] #summary .gx-dslot { left: 45%; right: var(--m); width: auto; top: calc(var(--top) + 20 * var(--u)); bottom: auto; height: calc(130 * var(--u)); }
  [data-gxl=monumental] #summary .gx-run { display: none; }
  [data-gxl=monumental] .gx-detail { padding: calc(var(--top) + 196 * var(--u)) var(--m) calc(64 * var(--u)); background: linear-gradient(to bottom, transparent calc(var(--top) + 180 * var(--u)), var(--paper) calc(var(--top) + 180 * var(--u))); }
  [data-gxl=monumental] .gx-dt { font-size: calc(16 * var(--u)); }
}

/* ================================================================ A — ASYMMETRIC EDITORIAL
   The event and its dates as one block, top left (name / large dates / admission and venue). The glass column off
   centre to the right and set lower, so the block and the column read as a diagonal; the three programmes as their own
   numbered list, aligned to the foot of the column on its right. Open: the event block stays; the chosen word moves
   under it, the item reads on the right. */
[data-gxl=editorial] #summary .gx{--m:calc(56*var(--p));--top:calc(44*var(--p));--bot:calc(44*var(--p))}
[data-gxl=editorial] #summary .gx-title{left:var(--m);top:var(--top);font:900 calc(96*var(--p))/1 var(--jp);letter-spacing:-.04em}
[data-gxl=editorial] .gx-title .w4{margin-top:.04em}
[data-gxl=editorial] #summary .gx-meta{left:var(--m);right:auto;top:calc(var(--top) + 214*var(--p));bottom:auto;align-items:flex-start;text-align:left}
[data-gxl=editorial] .gx-meta .d{font-size:calc(172*var(--p))}
[data-gxl=editorial] .gx-meta .m{font-size:calc(20*var(--p));margin-top:calc(16*var(--p))}
[data-gxl=editorial] #summary .gx-slot{left:60%;width:calc(250*var(--p));top:calc(var(--top) + 214*var(--p));bottom:var(--bot);--gx-pitch:1.12}
[data-gxl=editorial] #summary .gx-prog{left:calc(60% + 250*var(--p) + 44*var(--p));right:var(--m);width:auto;bottom:calc(var(--bot) + 6*var(--p));
  font:900 calc(26*var(--p))/1.2 var(--jp)}
[data-gxl=editorial] .gx-prog li{flex-direction:column;align-items:flex-start;gap:calc(4*var(--p));padding:calc(14*var(--p)) 0;border-top:2px solid currentColor}
[data-gxl=editorial] .gx-prog i{font-size:calc(58*var(--p));line-height:.86}
[data-gxl=editorial] .gx-open .gx-prog{opacity:0}
/* open: the dates step back (the item is read beside the name) */
[data-gxl=editorial] #summary .gx-dslot{left:var(--m);width:calc(470*var(--p));top:calc(var(--top) + 440*var(--p));bottom:calc(var(--bot) + 20*var(--p))}
[data-gxl=editorial] .gx-detail{padding:calc(var(--top) + 196*var(--p) - 106*var(--p)) var(--m) calc(110*var(--p)) 50%}
@media (min-width: 700px) and (max-aspect-ratio: 3/2) and (orientation: landscape) {
  [data-gxl=editorial] #summary .gx-title{font-size:max(44px,7.4vw)}
  [data-gxl=editorial] #summary .gx-meta{top:calc(var(--top) + 16vw)}
  [data-gxl=editorial] .gx-meta .d{font-size:max(56px,9.6vw)}
  [data-gxl=editorial] #summary .gx-slot{left:55%;width:19vw;top:calc(var(--top) + 30vw)}
  [data-gxl=editorial] #summary .gx-prog{left:calc(55% + 19vw + 3vw);font-size:max(14px,1.65vw);white-space:nowrap}
  [data-gxl=editorial] .gx-prog i{font-size:max(30px,4.4vw)}
  [data-gxl=editorial] #summary .gx-dslot{top:calc(var(--top) + 36vw);width:36vw}
}
@media (max-width: 1023px) and (orientation: portrait) {
  [data-gxl=editorial] #summary .gx { --m: var(--pad); --top: calc(22 * var(--u) + env(safe-area-inset-top)); --bot: calc(22 * var(--u) + env(safe-area-inset-bottom)); }
  [data-gxl=editorial] #summary .gx-title { font-size: calc(44 * var(--u)); }
  [data-gxl=editorial] #summary .gx-meta { top: calc(var(--top) + 102 * var(--u)); }
  [data-gxl=editorial] .gx-meta .d { font-size: calc(70 * var(--u)); }
  [data-gxl=editorial] .gx-meta .m { flex-direction: row; gap: 14px; font-size: max(12px, calc(13 * var(--u))); margin-top: 8px; }
  [data-gxl=editorial] #summary .gx-slot { left: 46%; right: var(--m); width: auto; top: calc(var(--top) + 236 * var(--u)); bottom: var(--bot); }
  [data-gxl=editorial] #summary .gx-prog { left: var(--m); right: 50%; bottom: var(--bot); display: block; font-size: calc(13.5 * var(--u)); white-space: nowrap; }
  [data-gxl=editorial] .gx-prog li { padding: 8px 0 10px; display: flex; }
  [data-gxl=editorial] .gx-prog i { font-size: calc(34 * var(--u)); }
  [data-gxl=editorial] #summary .gx-dslot { left: var(--m); right: var(--m); width: auto; top: calc(var(--top) + 236 * var(--u)); height: calc(120 * var(--u)); bottom: auto; }
  [data-gxl=editorial] .gx-detail { padding: calc(var(--top) + 372 * var(--u)) var(--m) calc(64 * var(--u)); background: linear-gradient(to bottom, transparent calc(var(--top) + 356 * var(--u)), var(--paper) calc(var(--top) + 356 * var(--u))); }
}

/* ================================================================ FOCUS (default) — the glass first
   One group, centred on the page: the glass column, as tall as the screen allows, and beside it — one gap away —
   the information, hung on the column's lines: the three programmes level with 催し (programme), the event name and
   its dates as one block level with 朝市 – 能登, admission / venue level with 案内 (information). Nothing else.
   All 2D sizes are set from the glass's own line (--em), so the order holds at every size: the glass (one line = 1 em,
   transparent, the only volume) first; the name (0.42 em) and dates (0.74 em) second; the small facts (0.12 em) third.
   Open: the item is what you read. The chosen word (orange glass) keeps the column's place, smaller, centred on it;
   the item's own type runs beside it where the information was; one small line above it says where you are and how
   to go back. No big numbers. */
#summary .gx-adm{display:none}
[data-gxl=focus] #summary .gx{
  --vh0:var(--vh); --sh:calc(var(--vh0)*.86); --gt:calc((var(--vh0) - var(--sh)) / 2);
  --colw:calc(var(--sh)*.337);                        /* the column's width for that height (1.86 / 5.52 em) */
  --em:calc(var(--sh)/5.52);
  --gap:calc(var(--em)*.62); --txw:calc(var(--em)*3.9);
  --gl:max(calc(56*var(--p)),calc((100vw - var(--colw) - var(--gap) - var(--txw)) / 2));
  --tx:calc(var(--gl) + var(--colw) + var(--gap)); --small:max(12px,calc(var(--em)*.122))}
[data-gxl=focus] #summary .gx-slot{left:var(--gl);width:var(--colw);top:var(--gt);height:var(--sh);--gx-pitch:1.13}
[data-gxl=focus] #summary :is(.gx-title,.gx-prog,.gx-meta,.gx-adm){left:var(--tx);right:auto;width:auto;bottom:auto}
/* third: programmes, level with 催し */
[data-gxl=focus] #summary .gx-prog{top:calc(var(--gt) + var(--em)*.1);font:700 var(--small)/1.55 var(--jp);letter-spacing:.04em;white-space:nowrap}
[data-gxl=focus] .gx-prog li{padding:0;gap:.7em}
[data-gxl=focus] .gx-prog i{font:700 .8em/1 var(--lat);letter-spacing:.08em;min-width:1.6em;opacity:.7}
[data-gxl=focus] .gx-prog b{font-weight:700}
/* second: name and dates, one block — the name's top level with 朝市, the dates under it */
[data-gxl=focus] #summary .gx-title{top:calc(var(--gt) + var(--em)*1.2);font:900 calc(var(--em)*.42)/1.06 var(--jp);letter-spacing:-.035em}
[data-gxl=focus] .gx-title .w{display:inline}
[data-gxl=focus] .gx-title .w4{display:block}
[data-gxl=focus] .gx-title .in{font-size:.8em;margin-right:.12em}
[data-gxl=focus] #summary .gx-meta{top:calc(var(--gt) + var(--em)*2.2);align-items:flex-start;text-align:left}
[data-gxl=focus] .gx-meta .d{font-size:calc(var(--em)*.62);line-height:.9}
[data-gxl=focus] .gx-meta .m{display:none}
/* third: admission / venue, level with 案内 */
[data-gxl=focus] #summary .gx-adm{display:flex;flex-direction:column;position:absolute;margin:0;z-index:2;top:calc(var(--gt) + var(--sh) - var(--em)*.1 - var(--small)*3.1);
  font:700 var(--small)/1.55 var(--jp);letter-spacing:.04em;white-space:nowrap}
[data-gxl=focus] .gx-adm b{font-weight:900}
/* open */
[data-gxl=focus] #summary :is(.gx-title,.gx-prog,.gx-meta,.gx-adm){transition:opacity .4s var(--ease)}
[data-gxl=focus] #summary .gx-open :is(.gx-title,.gx-prog,.gx-meta,.gx-adm){opacity:0;pointer-events:none}
[data-gxl=focus] #summary .gx-dslot{left:calc(var(--gl) - var(--colw)*.1);width:calc(var(--colw)*1.2);top:calc(var(--gt) + var(--sh)*.36);height:calc(var(--sh)*.28)}
[data-gxl=focus] .gx-detail{padding:calc(var(--gt) + 4*var(--p)) calc(56*var(--p)) calc(110*var(--p)) var(--tx)}
[data-gxl=focus] .gx-dhead{grid-template-columns:auto 1fr auto;align-items:baseline;column-gap:calc(14*var(--p));padding-bottom:calc(12*var(--p));border-bottom:2px solid currentColor;margin-bottom:calc(40*var(--p))}
[data-gxl=focus] .gx-num{font:900 max(15px,calc(22*var(--p)))/1 var(--lat);font-stretch:72%;letter-spacing:.04em}
[data-gxl=focus] .gx-dt{flex-direction:row;align-items:baseline;gap:calc(12*var(--p));padding:0;font-size:max(15px,calc(22*var(--p)))}
[data-gxl=focus] .gx-detail .gx-body{max-width:calc(820*var(--p))}

/* phone (portrait): a vertical poster with the same order. The name and dates over the column (second), the column in
   the middle, as large as fits (first), the programmes and admission / venue under it, side by side (third).
   Open: the chosen word at the top, the item below it. */
@media (max-width: 1023px) and (orientation: portrait) {
  [data-gxl=focus] #summary .gx { --top: calc(22 * var(--u) + env(safe-area-inset-top)); --foot: calc(96 * var(--u) + env(safe-area-inset-bottom));
    --gt: calc(var(--top) + 118 * var(--u)); --sh: min(calc(var(--vh0) - var(--gt) - var(--foot)), calc((100vw - 2 * var(--pad)) / .337 * .62));
    --gl: calc((100vw - var(--colw)) / 2); --tx: var(--pad); --small: max(11.5px, calc(12.5 * var(--u))); }
  [data-gxl=focus] #summary .gx-title { top: var(--top); font-size: calc(30 * var(--u)); }
  [data-gxl=focus] .gx-title .w4 { display: inline; margin-left: .25em; }
  [data-gxl=focus] #summary .gx-meta { top: calc(var(--top) + 42 * var(--u)); }
  [data-gxl=focus] .gx-meta .d { font-size: calc(62 * var(--u)); }
  [data-gxl=focus] #summary .gx-prog { top: auto; bottom: calc(22 * var(--u) + env(safe-area-inset-bottom)); display: block; }
  [data-gxl=focus] .gx-prog li { display: flex; }
  [data-gxl=focus] #summary .gx-adm { top: auto; left: auto; right: var(--pad); bottom: calc(22 * var(--u) + env(safe-area-inset-bottom)); align-items: flex-end; text-align: right; }
  [data-gxl=focus] #summary .gx-dslot { left: 22%; width: 56%; top: calc(18 * var(--u) + env(safe-area-inset-top)); height: calc(var(--vh0) * .16); }
  [data-gxl=focus] .gx-detail { padding: calc(var(--vh0) * .16 + 56 * var(--u) + env(safe-area-inset-top)) var(--pad) calc(64 * var(--u));
    background: linear-gradient(to bottom, transparent calc(var(--vh0) * .16 + 40 * var(--u)), var(--paper) calc(var(--vh0) * .16 + 40 * var(--u))); }
  [data-gxl=focus] .gx-num, [data-gxl=focus] .gx-dt { font-size: 15px; }
  [data-gxl=focus] .gx-detail .gx-body { max-width: none; }
  [data-gxl=focus] .gx-dhead { border-top: 0; padding-top: 0; }
}

/* ================================================================ POSTER (default) — the Hero's composition, continued
   The same build as the Hero (NOTO top left / HITOTSUBASHI bottom right / the glass across them): the event name,
   monumental, across the top (cut by the top edge, as NOTO); the dates, monumental, across the foot (cut by the bottom
   edge, as HITOTSUBASHI); the five glass words as one slanting column from the name's right end down to the dates'
   left end, in front of both — the glass refracts the type it passes over (one picture, two layers). The small facts
   (programmes / admission / venue) sit in the open band between, as the Hero's orange lines do.
   Order: the glass (the only volume, the only thing that moves, orange under the pointer) first; the name and the dates
   second; the small facts third.
   Open: the name and the dates stay where they are; the item's page slides over the right part of the screen (paper),
   cutting them; the chosen word (orange glass) stays on the left, over the type, as the anchor. */
[data-gxl=poster] #summary .gx-rule,[data-gxl=poster] #summary .gx-corner,[data-gxl=poster] .gx-lab,[data-gxl=poster] #summary .gx-hint{display:none}
[data-gxl=poster] #summary .gx{
  --vh0:var(--vh);
  --ft:min(calc(var(--vh0)*.285),17.2vw);             /* the name: one line of six characters */
  --fd:min(calc(var(--vh0)*.40),19.6vw);              /* the dates (Archivo, condensed) */
  --em:calc(var(--vh0)*.9/5.52);                      /* one glass line */
  --gcx:54vw; --small:max(12.5px,calc(var(--vh0)*.0175))}
/* the 2D type lies under the glass (the stage, canvas and hit areas, comes after it) */
[data-gxl=poster] #summary :is(.gx-title,.gx-meta,.gx-prog,.gx-adm){z-index:0}
[data-gxl=poster] #summary .gx-stage{z-index:1}
[data-gxl=poster] #summary .gx-title{left:calc(var(--ft)*-.045);top:calc(var(--ft)*-.17);width:100vw;font:900 var(--ft)/.9 var(--jp);letter-spacing:-.045em;white-space:nowrap}
[data-gxl=poster] .gx-title .w{display:inline}
/* "in 一橋祭": the Hero's orange line, middle right */
[data-gxl=poster] .gx-title .w4{position:absolute;right:calc(3.4vw - var(--ft)*.045);top:calc(var(--vh0)*.36 + var(--ft)*.17);
  font-size:calc(var(--vh0)*.085);line-height:1;letter-spacing:-.02em;color:var(--orange)}
[data-gxl=poster] .gx-title .in{font-size:.86em;margin-right:.18em}
[data-gxl=poster] #summary .gx-meta{left:auto;right:calc(var(--fd)*-.012);top:auto;bottom:calc(var(--fd)*-.13);align-items:flex-end}
[data-gxl=poster] .gx-meta .d{font-size:var(--fd);line-height:.86;letter-spacing:-.02em}
[data-gxl=poster] .gx-meta .m{display:none}
/* the glass: a slanting column, nearly the screen's height */
[data-gxl=poster] #summary .gx-slot{left:calc(var(--gcx) - var(--em)*2.4);width:calc(var(--em)*4.8);top:calc(var(--vh0)*.045);height:calc(var(--vh0)*.9);--gx-pitch:1.13;--gx-shear:.55}
/* third: the programmes (middle left), admission / venue (under the orange line, right) */
[data-gxl=poster] #summary .gx-prog{left:3.4vw;right:auto;bottom:auto;top:calc(var(--vh0)*.44);width:auto;font:700 var(--small)/1.6 var(--jp);letter-spacing:.04em;white-space:nowrap}
[data-gxl=poster] .gx-prog li{padding:0;gap:.7em;border:0}
[data-gxl=poster] .gx-prog i{font:700 .82em/1 var(--lat);letter-spacing:.08em;min-width:1.6em;opacity:.7}
[data-gxl=poster] .gx-prog b{font-weight:700}
[data-gxl=poster] #summary .gx-adm{display:flex;gap:1.2em;position:absolute;margin:0;right:3.4vw;top:calc(var(--vh0)*.36 + var(--vh0)*.085 + var(--small)*1.2);
  font:700 var(--small)/1.6 var(--jp);letter-spacing:.04em;white-space:nowrap}
[data-gxl=poster] .gx-adm b{font-weight:900}
/* open */
[data-gxl=poster] #summary :is(.gx-prog,.gx-adm){transition:opacity .4s var(--ease)}
[data-gxl=poster] #summary .gx-open :is(.gx-prog,.gx-adm){opacity:0;pointer-events:none}
[data-gxl=poster] #summary .gx-open .gx-meta{opacity:1}
[data-gxl=poster] #summary .gx-dslot{left:4vw;width:calc(var(--em)*2.3);top:calc(var(--vh0)*.5 - var(--em)*.62);height:calc(var(--em)*1.24)}
[data-gxl=poster] .gx-detail{--px:42vw;padding:calc(var(--vh0)*.09) calc(56*var(--p)) calc(110*var(--p)) calc(var(--px) + 60*var(--p));
  background:linear-gradient(to right,transparent var(--px),var(--cobalt) var(--px),var(--cobalt) calc(var(--px) + 3px),var(--paper) calc(var(--px) + 3px))}
[data-gxl=poster] .gx-dhead{grid-template-columns:auto 1fr auto;align-items:baseline;column-gap:calc(14*var(--p));padding-bottom:calc(12*var(--p));border-bottom:2px solid currentColor;margin-bottom:calc(40*var(--p))}
[data-gxl=poster] .gx-num{font:900 max(15px,calc(22*var(--p)))/1 var(--lat);font-stretch:72%;letter-spacing:.04em}
[data-gxl=poster] .gx-dt{flex-direction:row;align-items:baseline;gap:calc(12*var(--p));padding:0;font-size:max(15px,calc(22*var(--p)))}
[data-gxl=poster] .gx-detail .gx-body{max-width:calc(820*var(--p))}
/* no WebGL: the flat words keep a paper ground, so they read over the large type */
[data-gxl=poster] .gx-flat .gx-words button{background:var(--paper);padding:0 .12em}
[data-gxl=poster] .gx-flat.gx-open .gx-words{justify-content:center}

/* poster, phone (portrait): the name in two lines across the top (出張輪島 / 朝市), the dates across the foot, the glass
   column slanting between and over both; the orange line and the small facts at the sides of the column's middle.
   Open: the chosen word stays at the top over the name; the item's page comes up from below it. */
@media (max-width: 1023px) and (orientation: portrait) {
  [data-gxl=poster] #summary .gx { --ft: 25.4vw; --fd: 31vw; --em: calc(var(--vh0) * .6 / 5.52); --gcx: 50vw; --small: max(11px, calc(11.5 * var(--u)));
    --dtop: calc(var(--fd) * (.86 * 2 - .13) + env(safe-area-inset-bottom)); }
  [data-gxl=poster] #summary .gx-title { top: calc(var(--ft) * -.14 + env(safe-area-inset-top)); line-height: .92; }
  [data-gxl=poster] .gx-title .w3::before { content: "\A"; white-space: pre; }
  /* the orange line: left, under the name (beside 催し) */
  [data-gxl=poster] .gx-title .w4 { top: calc(var(--ft) * 1.93); left: calc(var(--pad) + var(--ft) * .045); right: auto; font-size: calc(27 * var(--u)); }
  [data-gxl=poster] #summary .gx-slot { top: calc(var(--ft) * 1.5 + env(safe-area-inset-top)); height: calc(var(--vh0) * .6); --gx-shear: .45; }
  /* the facts: right, in the space the slant leaves (beside 応援 and 案内), just over the dates */
  [data-gxl=poster] #summary :is(.gx-prog,.gx-adm) { left: auto; right: var(--pad); top: auto; text-align: right; }
  [data-gxl=poster] #summary .gx-adm { bottom: calc(var(--dtop) + 10px); flex-direction: column; gap: 0; align-items: flex-end; }
  [data-gxl=poster] #summary .gx-prog { display: block; bottom: calc(var(--dtop) + 14px + var(--small) * 3.2); }
  [data-gxl=poster] .gx-prog li { display: flex; justify-content: flex-end; }
  [data-gxl=poster] .gx-prog i { order: 2; text-align: right; min-width: 1.4em; }
  /* the dates in two lines, as large as the width allows */
  [data-gxl=poster] #summary .gx-meta { bottom: calc(var(--fd) * -.13 + env(safe-area-inset-bottom)); }
  [data-gxl=poster] .gx-meta .d { display: flex; flex-direction: column; align-items: flex-end; }
  [data-gxl=poster] #summary .gx-dslot { left: 18%; width: 64%; top: calc(var(--ft) * .25 + env(safe-area-inset-top)); height: calc(var(--vh0) * .15); }
  [data-gxl=poster] .gx-detail { --top0: calc(var(--ft) * .25 + var(--vh0) * .15 + 26 * var(--u) + env(safe-area-inset-top));
    padding: calc(var(--top0) + 20 * var(--u)) var(--pad) calc(64 * var(--u));
    background: linear-gradient(to bottom, transparent var(--top0), var(--cobalt) var(--top0), var(--cobalt) calc(var(--top0) + 3px), var(--paper) calc(var(--top0) + 3px)); }
  [data-gxl=poster] .gx-num, [data-gxl=poster] .gx-dt { font-size: 15px; }
  [data-gxl=poster] .gx-detail .gx-body { max-width: none; }
}


/* ================================================================ KINETIC INDEX (html[data-index="kinetic"], ?index=kinetic)
   2D only. The INDEX is one sheet of very large type. Every piece of it (the five INDEX words, the event name in
   parts, the dates, the small facts) is one absolutely placed element; scripts/kinetic/kinetic-index.js computes where
   each one is and how large, for each state of the sheet (entering / INDEX / an item open), and moves the same
   elements between them (transform only). The entrance is scrubbed by the scroll that ends the statements; a click
   rebuilds the sheet around the chosen word. CSS here: the frame, the type, colours and the detail column. */
.kx{display:none}
[data-index=kinetic] #summary{height:auto;min-height:var(--vh);overflow:clip}
[data-index=kinetic] #summary .fr,[data-index=kinetic] #summary .gx{display:none}
[data-index=kinetic] #index{display:none}
[data-index=kinetic] #summary .kx{display:block;position:relative}
.kx-sticky{position:sticky;top:0;height:var(--vh);min-height:calc(480*var(--p));overflow:hidden;z-index:1}
.kx-open .kx-sticky{cursor:pointer}
.kx-ev,.kx-words{margin:0;position:absolute;inset:0;pointer-events:none}
.kx-t{position:absolute;left:0;top:0;margin:0;transform-origin:0 0;white-space:nowrap;color:var(--cobalt)}
.kx-jp{font-family:var(--jp);font-weight:900;line-height:1;letter-spacing:-.045em}
.kx-lat{font-family:var(--lat);font-weight:900;font-stretch:66%;line-height:1;letter-spacing:-.015em}
.kx-t .in{font-family:var(--lat);font-weight:800;font-stretch:72%;font-size:.86em;letter-spacing:-.01em;margin-right:.16em}
.kx-moving{will-change:transform}
/* the INDEX words: plain type, the whole word is the button; the pointer / focus turns it orange */
/* the hit area is the word's own box: the type inside does not take the pointer (the glyphs' content area runs above /
   below a line-height-1 box and would reach over the neighbouring words); a hover one-shot (scripts/cursor.js) moves
   .kx-in / .kx-ch only, never the box the engine places */
.kx-w{padding:0;border:0;background:none;cursor:pointer;pointer-events:auto;-webkit-tap-highlight-color:transparent;
  font-family:var(--jp);font-weight:900;transition:color .28s var(--ease)}
.kx-in{display:inline-block;pointer-events:none;transform-origin:50% 60%}
/* Painting room for glyph ink outside line-height:1 / negative tracking; negative margins keep layout identical. */
.kx-ch{display:inline-block;padding:.18em .12em;margin:-.18em -.12em;overflow:visible}
.kx-w:focus-visible,.kx-w[aria-expanded=true]{color:var(--orange)}
/* (no sticky hover after a tap; with the cursor modes on, the colour comes in as a circle instead) */
@media (hover:hover){html:not(.cf-mode) .kx-w:hover{color:var(--orange)}}
.kx-w:focus-visible{outline:3px solid var(--orange);outline-offset:6px}
.kx:not(.kx-ready) .kx-w{pointer-events:none}
/* Platinum credit occupies the former INDEX facts block; the motion engine positions it as one unscaled piece. */
.kx-partner{width:clamp(290px,29vw,430px);white-space:normal;pointer-events:none}
.kx-partner-label{display:block;margin-bottom:10px;color:#777773;font:700 clamp(10px,.78vw,12px)/1.2 var(--lat);letter-spacing:.18em}
/* Four partners share two rows; optical widths account for their different artwork proportions. */
.sponsor-credit{--credit-gap:clamp(24px,1.7vw,28px);display:grid;grid-template-columns:repeat(2,minmax(0,1fr));align-items:center;justify-items:center;gap:var(--credit-gap) 22px;margin-bottom:0}
.sponsor-credit .sponsor-logo--integral{width:89%}
.sponsor-credit .sponsor-logo--nss{width:clamp(65.7px,6.205vw,89.06px)}
.sponsor-credit .sponsor-logo--asahi{width:100%}
.sponsor-credit .sponsor-logo--tdi{width:94%}
/* the detail: the item's own content, in the column the sheet opens for it (left edge from --kx-cx, top from
   --kx-cy, both set by the script), scrolling with the page */
.kx-detail{position:relative;z-index:2;margin-top:calc(-1*var(--vh));min-height:var(--vh);
  padding:var(--kx-cy,12vh) calc(56*var(--p)) calc(110*var(--p)) var(--kx-cx,46vw);pointer-events:none;opacity:0}
.kx-detail[hidden]{display:none}
.kx-detail.kx-show .kx-dhead,.kx-detail.kx-show .kx-body{pointer-events:auto;cursor:auto}
.kx-dhead{display:grid;grid-template-columns:auto auto 1fr auto;align-items:baseline;column-gap:calc(14*var(--p));padding-bottom:calc(12*var(--p));
  border-bottom:2px solid currentColor;margin-bottom:calc(40*var(--p));font:900 max(15px,calc(22*var(--p)))/1 var(--lat);font-stretch:72%;letter-spacing:.04em}
.kx-num{color:var(--orange)}
.kx-of{font:700 calc(12*var(--t))/1 var(--lat);letter-spacing:.16em}
.kx-back{justify-self:end;margin:0 -12px -12px 0;padding:12px;border:0;background:none;color:inherit;cursor:pointer;
  font:700 calc(13*var(--t))/1 var(--lat);letter-spacing:.18em;text-decoration:underline;text-decoration-color:transparent;text-underline-offset:.45em;text-decoration-thickness:2px;transition:text-decoration-color .3s var(--ease)}
.kx-back b{color:var(--orange);margin-left:.5em;font-weight:900}
.kx-back:hover,.kx-back:focus-visible{text-decoration-color:var(--orange);outline:none}
.kx-detail .kx-body{max-width:calc(820*var(--p))}
@media (max-width: 1023px) and (orientation: portrait) {
  [data-index=kinetic] #summary { min-height: 100svh; }
  .kx-sticky { height: 100svh; }
  .kx-detail { margin-top: -100svh; min-height: 100svh; padding: var(--kx-cy, 30svh) var(--pad) calc(64 * var(--u));
    background: linear-gradient(to bottom, transparent calc(var(--kx-cy, 30svh) - 18px), var(--paper) calc(var(--kx-cy, 30svh) - 18px)); }
  .kx-detail .kx-body { max-width: none; }
  .kx-dhead { font-size: 15px; margin-bottom: calc(26 * var(--u)); }
  .kx-of, .kx-back { font-size: 10.5px; }
}
/* no script / reduced motion fall back to the same INDEX sheet, placed by the script without motion */
.kx:not(.kx-ready) .kx-t{visibility:hidden}
@media (max-width: 1023px) and (orientation: portrait) {
  .kx-partner{width:clamp(155px,46vw,220px)}
  .kx-partner-label{margin-bottom:7px;font-size:9px;letter-spacing:.14em}
  .sponsor-credit{--credit-gap:20px;gap:var(--credit-gap) 8px;margin-bottom:0;grid-template-columns:repeat(2,minmax(0,1fr))}
  .sponsor-credit .sponsor-logo--nss{width:58%;max-width:52.56px}
  .sponsor-credit .sponsor-logo--asahi,.sponsor-credit .sponsor-logo--tdi{width:100%}
}

/* ACCESS stays in INFO's left margin; the existing detail type and right-hand table keep their positions. */
/* Keep the old map slot; inset the iframe by 9% on each side so its center does not move. */
#info .access{--map-inset:min(2.88vh,25.2px);max-width:560px;margin:clamp(32px,4vw,56px) 0 0;color:var(--cobalt)}
.access-slot{display:contents}
.access-label{position:relative;top:var(--map-inset);margin:0 0 10px 9%;font:800 clamp(13px,1vw,16px)/1.3 var(--jp);letter-spacing:.02em}
.access-map-window{display:grid;place-items:center;width:100%;height:min(32vh,280px)}
.access iframe{display:block;width:82%;height:82%;max-width:100%;border:0}
.access-open{position:relative;top:calc(0px - var(--map-inset));display:inline-block;margin:9px 0 0 9%;color:var(--cobalt);font:800 12px/1.3 var(--lat),var(--jp);text-decoration:none;transition:color .2s ease}
.access-open:hover,.access-open:focus-visible{color:var(--orange)}
.access-open:focus-visible{outline:2px solid currentColor;outline-offset:3px}
[data-index=kinetic] #info .pin{position:relative}
@media (min-width:1024px){
  [data-index=kinetic] #info .access-slot{position:absolute;top:var(--kx-access-top);left:calc(clamp(24px,3vw,70px) - var(--kx-cx));width:min(39vw,560px);height:var(--kx-access-height);display:grid;align-items:safe center;margin:0}
  [data-index=kinetic] #info .access{width:100%;max-width:none;margin:0}
  [data-index=kinetic] .kx-access-overflow #info .access-slot{top:var(--kx-access-flow-top);height:auto;align-items:start}
  [data-index=kinetic] .kx-access-overflow .kx-detail{min-height:var(--kx-access-flow-height)}
}
@media (max-width: 1023px) and (orientation: portrait){
  #info .access{--map-inset:clamp(25.2px,3.42vh,28.8px);max-width:none;margin:calc(36*var(--u)) 0 calc(40*var(--u))}
  .access-label{font-size:13px;margin-bottom:calc(10*var(--u))}
  .access-map-window{height:clamp(280px,38vh,320px)}
}
/* ================================================================ CIRCULAR HOVER (scripts/cursor.js; html[data-cur] = off | fill | a | b | c | random)
   From where the system cursor entered, the type turns orange in a growing circle (the type's own glyphs are the
   mask: background-clip:text with a radial gradient — no copy of the text). Leaving, the circle shrinks back out.
   Nothing here changes the page at rest: these styles only exist while a circle is on. */
/* the circle: on the element while it is on (outside the circle: the element's own colour, --cfb) */
.cf-on{color:transparent!important;-webkit-text-fill-color:transparent;-webkit-background-clip:text;background-clip:text;background-repeat:no-repeat;
  background-image:radial-gradient(circle at var(--cfx) var(--cfy),var(--orange) var(--cfr),var(--cfb) calc(var(--cfr) + .6px))!important}
/* the comparison panel (this experimental branch only): a small tab at the right edge, opening to the left */
.cur-dev{position:fixed;right:0;top:34vh;z-index:1001;display:flex;align-items:flex-start;color:var(--cobalt);font:700 10.5px/1.2 var(--lat);letter-spacing:.08em}
.cur-dev[hidden]{display:none}
.cur-dev-t{order:2;writing-mode:vertical-rl;padding:10px 5px;border:1px solid var(--cobalt);border-right:0;background:var(--paper);color:inherit;font:inherit;letter-spacing:.18em;cursor:pointer}
.cur-dev-t b{color:var(--orange);margin-top:6px}
.cur-dev-b{order:1;display:none;width:252px;padding:10px 12px 12px;background:var(--paper);border:1px solid var(--cobalt)}
.cur-dev.open .cur-dev-b{display:block}
.cur-dev-h{letter-spacing:.14em;margin-bottom:8px}
.cur-dev-m{display:grid;grid-template-columns:repeat(3,1fr);gap:4px;margin-bottom:6px}
.cur-dev-m button{padding:6px 2px;border:1px solid var(--cobalt);background:none;color:inherit;font:inherit;letter-spacing:.04em;cursor:pointer}
.cur-dev-m button[aria-pressed=true]{background:var(--cobalt);color:var(--paper)}
.cur-dev label{display:grid;grid-template-columns:72px 1fr 44px;align-items:center;gap:6px;margin-top:4px;font-weight:600;letter-spacing:.04em}
.cur-dev input{width:100%;accent-color:var(--orange)}
.cur-dev output{text-align:right;font-variant-numeric:tabular-nums}
.cur-dev-p{margin-top:8px;padding-top:6px;border-top:1px solid currentColor;letter-spacing:.1em;min-height:2.4em}
.cur-dev-p b{color:var(--orange)}
@media (hover: none), (pointer: coarse) { .cur-dev { display: none; } }

/* Documentary photographs: after the existing text, full aspect ratio, one column in every INDEX mode.
   Separate section classes leave width/spacing easy to tune without changing the content or motion engine. */
.documentary-photos{--photo-width:100%;--photo-gap:clamp(28px,4vw,56px);--photo-top:clamp(40px,5vw,72px);
  width:var(--photo-width);max-width:100%;min-width:0;margin-top:var(--photo-top);padding-top:clamp(20px,2vw,32px);border-top:1px solid currentColor}
.pin>.documentary-photos{margin-top:var(--photo-top)}
.documentary-photo{margin:0;min-width:0}
.documentary-photo+.documentary-photo{margin-top:var(--photo-gap)}
.documentary-photo img{display:block;width:100%;height:auto;border-radius:0}
.documentary-photo figcaption{margin-top:10px;font:500 clamp(12px,1vw,14px)/1.5 var(--jp);letter-spacing:.04em}
/* classic's dark panel needs the same readable type as its existing body; kinetic/glass use cobalt on ivory. */
.gx-body .documentary-photo figcaption{color:var(--cobalt)}
@media (max-width:1023px) and (orientation:portrait){
  .documentary-photos{--photo-gap:32px;--photo-top:40px;padding-top:20px}
}

/* One glyph paints both orange and photo: no duplicated text/baseline or independent mask box. */
@property --kx-photo-mix{syntax:'<number>';inherits:false;initial-value:0}
.kx-w[data-id=asaichi] .kx-ch:nth-child(1){--kx-photo-position:42% 50%}
.kx-w[data-id=asaichi] .kx-ch:nth-child(2){--kx-photo-position:53% 54%}
.kx-w[data-id=noto] .kx-ch:nth-child(1){--kx-photo-position:58% 58%}
.kx-w[data-id=noto] .kx-ch:nth-child(2){--kx-photo-position:55% 58%}
@media (hover:hover) and (pointer:fine) and (prefers-reduced-motion:no-preference){
  .kx-ch[data-photo]{--kx-photo-mix:0;transition:none}
  .kx-photo-on[aria-expanded=false] .kx-ch[data-photo]{--kx-photo-mix:1;
    color:transparent!important;-webkit-text-fill-color:transparent;
    -webkit-background-clip:text;background-clip:text;
    background-image:linear-gradient(color-mix(in srgb,var(--orange) calc((1 - var(--kx-photo-mix))*100%),transparent),color-mix(in srgb,var(--orange) calc((1 - var(--kx-photo-mix))*100%),transparent)),var(--kx-photo)!important;
    background-origin:padding-box;background-size:100% 100%,cover;
    background-position:0 0,var(--kx-photo-position,50% 50%);background-repeat:no-repeat;
    transition:--kx-photo-mix .15s linear}
  .kx-photo-sync[aria-expanded=false] .kx-ch[data-photo]{transition:none}
}