/* LE METTÉ GALLERY: shared styles for the CMS pages.
   Swiss grid: structure from an invisible 12 column grid, no boxes, hairlines only where they separate. */
:root{--ink:#111110;--paper:#FFFFFF;--soft:#F4F4F2;--btn:transparent;--mute:#8A8780;--acc:transparent;--rule:#DCDAD5;--m:28px;--g:20px}
*{box-sizing:border-box}
html,body{margin:0;background:var(--paper);color:var(--ink)}
body{font-family:'Helvetica Neue',Helvetica,Arial,'Zen Kaku Gothic New',sans-serif;font-size:13px;letter-spacing:0;-webkit-text-size-adjust:100%}
a{color:var(--ink);text-decoration:none}
img{display:block;max-width:100%}
.jp{font-family:'Zen Kaku Gothic New',sans-serif;letter-spacing:.01em}
.mono{font-family:inherit}
.cell{transition:opacity .15s ease}
@media (hover:hover){.cell:hover{background:none;opacity:.55}}
.cell:hover{background:none}
.line{border-bottom:1px solid var(--ink)}

/* header: logo left, plain text nav right, one hairline under it */
.hd{position:sticky;top:0;z-index:20;background:var(--paper);border-bottom:1px solid var(--ink)}
.hd-row{display:flex;align-items:stretch;min-height:56px}
.hd-logo{display:flex;align-items:center;padding:0 var(--m);flex:1 1 auto}
.hd-logo svg{height:28px;width:auto;display:block}
.hd-nav{display:flex;align-items:stretch}
.hd-nav a{display:flex;align-items:center;padding:0 12px;white-space:nowrap;font-size:12px;letter-spacing:.02em}
.hd-nav a:last-child{padding-right:var(--m)}
.hd-nav a[aria-current="page"]{text-decoration:underline;text-underline-offset:5px}
.hd-menu{display:none;align-items:center;padding:0 var(--m);border:0;background:transparent;font:inherit;font-size:12px;letter-spacing:.02em;color:inherit;cursor:pointer;white-space:nowrap;-webkit-appearance:none;appearance:none;border-radius:0}
.hd-list{display:flex;flex-direction:column;border-top:1px solid var(--ink);padding:6px 0 10px}
.hd-list[hidden]{display:none}
.hd-list a{display:flex;justify-content:space-between;align-items:center;padding:14px var(--m);font-size:14px}
.hd-list a span+span{color:var(--mute);font-size:12px}

/* shared grid */
.g{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--g);padding:0 var(--m)}
/* page top: small meta strip in columns */
.meta{padding-top:14px;padding-bottom:14px;font-size:11px;line-height:1.5;border-bottom:1px solid var(--ink)}
.meta>*{grid-column:span 3;min-width:0}
.meta .mu{color:var(--mute)}
.meta a:hover{opacity:.55}
/* page title */
.ptl{padding-top:36px;padding-bottom:40px}
.ptl h1{grid-column:1 / span 9;grid-row:1;margin:0;font-weight:400;font-size:clamp(34px,6vw,72px);line-height:1.02;letter-spacing:-.01em}
.ptl .ja{grid-column:1 / span 9;grid-row:2;margin-top:10px;font-size:clamp(14px,1.4vw,18px);color:var(--mute)}
/* jump list: plain anchors */
.jl{display:flex;flex-wrap:wrap;gap:4px 24px;margin:0;padding:0;list-style:none;font-size:12px;line-height:1.8}
.jl a:hover{opacity:.55}
/* section label in the left 3 columns, Japanese under it in grey */
.lbl{grid-column:1 / span 3;margin:0;font-weight:400;font-size:11px;line-height:1.6;letter-spacing:.04em}
.lbl span{display:block;color:var(--mute)}
/* body text: Japanese first, English in grey under it */
.txt{margin:0 0 1.2em;font-size:14px;line-height:2}
.txt.e{font-size:13px;line-height:1.7;color:var(--mute)}
/* plain text link with an arrow */
.lk{display:inline-block;font-size:12px;line-height:1.8;text-decoration:underline;text-decoration-color:transparent;text-underline-offset:4px;transition:text-decoration-color .15s ease}
.lk:hover{text-decoration-color:currentColor}

/* status words: no fill, no dot */
.chip{display:inline;padding:0;background:none;color:var(--ink);white-space:nowrap;font-size:11px;letter-spacing:.04em}
.chip.past{color:var(--mute)}
.chip.upcoming{color:var(--ink)}
.chip.now{color:var(--ink)}
.strip{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:10px var(--m);border-bottom:1px solid var(--ink);min-height:40px}

/* superpositions: a pinned block stays, the next block slides over it */
.pinned{position:sticky;top:56px;z-index:1}
.over{position:relative;z-index:2;background:var(--paper)}

/* footer: same 12 column grid, no cells */
.ft{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--g);padding:20px var(--m) 28px;border-top:1px solid var(--ink);font-size:11px;letter-spacing:.02em;position:relative;z-index:3;background:var(--paper)}
.ft>*{grid-column:span 2;border:0;padding:0}
.ft>*:first-child{grid-column:span 4}

/* states */
.state{padding:48px var(--m);color:var(--mute)}
.skeleton{background:var(--soft)}

@media (max-width:820px){
 :root{--m:14px;--g:12px}
 .hd-nav{display:none}
 .hd-menu{display:flex}
 .hd-logo svg{height:24px}
 /* phones: the small meta strip is dropped, the page title says it all; detail pages keep one short line */
 .meta{display:none}
 .meta.keep{display:flex;justify-content:space-between;align-items:baseline;gap:12px;padding-top:10px;padding-bottom:10px}
 .meta.keep>*{grid-column:auto}
 .meta.keep>*:nth-child(n+3),.meta.keep br,.meta.keep .mu{display:none}
 .ptl{padding-top:24px;padding-bottom:28px}
 .ptl h1,.ptl .ja{grid-column:1 / -1}
 .lbl{grid-column:1 / -1;margin-bottom:16px;display:flex;justify-content:space-between;gap:12px}
 .lbl span{display:inline}
 .txt{font-size:13px;line-height:1.9}
 .strip{padding:8px var(--m);font-size:11px}
 .ft{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:10px}
 .ft>*,.ft>*:first-child{grid-column:span 1}
 .ft>*:first-child{grid-column:1 / -1;margin-bottom:4px}
}
/* accents: a marker highlight whose colour drifts slowly, like the landing gradient.
   Hiroshima red, Okayama blue, everything else green (deep, never fluorescent) */
.hl,.flt button[aria-pressed="true"],.lm-filters > button[aria-pressed="true"]{--a:#8ED8B0;--b:#D6F2E3;--c:#4FBE87}
.hl-h,.flt button[data-f="hiroshima"],.lm-filters > button[data-city="HIROSHIMA"]{--a:#FF8A90;--b:#FFD6D8;--c:#FF5A63}
.hl-o,.flt button[data-f="okayama"],.lm-filters > button[data-city="OKAYAMA"]{--a:#90A6FF;--b:#D6DEFF;--c:#5B7CFF}
.hl{padding:.06em .3em;color:#111110;-webkit-box-decoration-break:clone;box-decoration-break:clone;background-image:linear-gradient(100deg,var(--b),var(--a) 28%,var(--c) 50%,var(--a) 72%,var(--b));background-size:400% 100%;animation:hl 5s ease-in-out infinite alternate}
.hl-o{animation-delay:-1.7s}
.hl-g{animation-delay:-3.4s}
.flt button[aria-pressed="true"],.lm-filters > button[aria-pressed="true"]{text-decoration:none !important;margin:0 -.3em !important;padding-left:.3em !important;padding-right:.3em !important;background:linear-gradient(100deg,var(--b),var(--a) 28%,var(--c) 50%,var(--a) 72%,var(--b)) 0 0 / 400% 100% !important;animation:hl 5s ease-in-out infinite alternate}
.hd-nav a[aria-current="page"]{text-decoration:none}
@keyframes hl{from{background-position:0% 0}to{background-position:100% 0}}
@media (prefers-reduced-motion:reduce){.hl,.flt button[aria-pressed="true"],.lm-filters > button[aria-pressed="true"]{animation:none;background-position:50% 0 !important}}
.chip.hl{padding:.06em .3em}