/*
Theme Name: MMCO
Theme URI: https://mindmove-culture.org/
Author: Mind & Move Culture Organisation
Description: Bilingual (Japanese / English) theme for Mind & Move Culture Organisation. Soft launch build. Designed for use with Bogo and Contact Form 7.
Version: 1.8.1
Requires at least: 6.0
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: mmco
*/


:root{
  --ink:#245360;          /* brand primary  C90 M70 Y60 K0 */
  --ink-deep:#132f39;     /* darker step for large fields   */
  --ink-soft:#5c7d88;     /* muted body / captions          */
  --rule:#dde5e8;         /* hairlines                      */
  --paper:#ffffff;
  --paper-warm:#f6f8f9;

  --f-sans:"Nunito","Noto Sans JP",-apple-system,BlinkMacSystemFont,sans-serif;

  --step--1:clamp(.75rem, .72rem + .15vw, .82rem);
  --step-0:clamp(.95rem, .9rem + .22vw, 1.05rem);
  --step-1:clamp(1.1rem, 1rem + .4vw, 1.3rem);
  --step-2:clamp(1.5rem, 1.25rem + 1vw, 2.1rem);
  --step-3:clamp(2rem, 1.4rem + 2.6vw, 3.6rem);
  --step-4:clamp(2rem, 1.4rem + 2.6vw, 2.4rem);
  --step-5:clamp(1.6rem, 1.4rem + 2.6vw, 1.8rem);

  --gutter:clamp(1.5rem,5vw,5rem);
  --measure:64ch;
}

*,*::before,*::after{box-sizing:border-box}

html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}
}

body{
  margin:0;
  font-family:var(--f-sans);
  font-weight:400;
  font-size:var(--step-0);
  line-height:1.7;
  color:var(--ink-deep);
  background:var(--paper);
  -webkit-font-smoothing:antialiased;
}

img{max-width:100%;display:block}
a{color:inherit}

/* --- language ------------------------------------------------------------
   Bogo serves each language as its own URL, so the templates output only one
   language at a time. <html data-lang="ja|en"> is still set, and the rules
   further down use it to tune tracking and capitalisation per language. */

/* --------------------------------------------------------------------------
   Header
   -------------------------------------------------------------------------- */
.site-header{
  position:fixed;inset:0 0 auto 0;z-index:60;
  display:flex;align-items:center;justify-content:space-between;
  gap:1rem;
  padding:1.5rem var(--gutter);
}
.site-header--solid{
  background:rgba(255,255,255,.94);
  backdrop-filter:blur(10px);
  box-shadow:0 1px 0 var(--rule);
}

.brand{display:inline-flex;align-items:center;flex:0 0 auto}
.brand img{width:auto;height:64px;transition:height .35s ease}
.site-header--solid .brand img{height:36px}

.header-right{display:flex;align-items:center;gap:clamp(1rem,3vw,2.5rem)}

.nav{display:flex;gap:clamp(1rem,2.5vw,2.25rem);list-style:none;margin:0;padding:0}
.nav a{
  text-decoration:none;
  font-size:var(--step--1);
  font-weight:400;
  letter-spacing:0.5px;
  text-transform:uppercase;
  padding-bottom:3px;
  border-bottom:1px solid transparent;
  transition:border-color .3s ease,opacity .3s ease;
}
:root[data-lang="ja"] .nav a{letter-spacing:.06em;text-transform:none}
.nav a:hover,.nav a:focus-visible{border-bottom-color:currentColor}
.nav a[aria-current="page"]{border-bottom-color:currentColor}

.lang-toggle{display:inline-flex;align-items:center;gap:.4rem;font-size:var(--step--1);font-weight:600;letter-spacing:.1em}
.lang-toggle a{
  font:inherit;color:inherit;text-decoration:none;
  padding:.15rem .1rem;opacity:.42;transition:opacity .25s ease;
}
.lang-toggle a:hover,.lang-toggle a:focus-visible{opacity:.8}
.lang-toggle a[aria-current="true"]{opacity:1;text-decoration:underline;text-underline-offset:4px}
.lang-toggle span{opacity:.3}

/* header sitting over the hero video */
.site-header--over{color:#fff}
.site-header--over .brand img{filter:brightness(0) invert(1)}

:focus-visible{outline:2px solid currentColor;outline-offset:3px}

@media (max-width:720px){
  .site-header{
    flex-direction:column;align-items:flex-start;gap:.75rem;
    padding:.9rem var(--gutter);
  }
  .header-right{width:100%;justify-content:space-between;gap:1rem}
  .nav{gap:1.1rem}
  .nav a{font-size:.7rem;letter-spacing:.08em}
  .brand img{height:32px}
  .site-header--solid .brand img{height:30px}
}

/* --------------------------------------------------------------------------
   Hero
   -------------------------------------------------------------------------- */
.hero{
  position:relative;min-height:100svh;
  display:grid;place-items:center;
  overflow:hidden;background:#000;
  padding:0 var(--gutter);
}
.hero__media{position:absolute;inset:0}
.hero__media video,
.hero__media img{width:100%;height:100%;object-fit:cover}
.hero__media::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(0,0,0,.5) 0%,rgba(0,0,0,.18) 42%,rgba(0,0,0,.62) 100%);
}
.hero__inner{position:relative;text-align:center;color:#fff}
.hero__name{
  margin:0;
  font-size:var(--step-5);
  font-weight:300;
  line-height:1.22;
  letter-spacing:0.2em;
    text-transform: uppercase;
}
.hero__scroll{
  position:absolute;left:50%;bottom:2.2rem;translate:-50% 0;
  color:#fff;opacity:.75;
  font-size:var(--step--1);letter-spacing:.2em;text-transform:uppercase;
  text-decoration:none;
}
.hero__scroll::after{
  content:"";display:block;width:1px;height:34px;margin:.6rem auto 0;
  background:currentColor;transform-origin:top;
  animation:drop 2.6s cubic-bezier(.6,0,.3,1) infinite;
}
@keyframes drop{0%{transform:scaleY(0)}45%{transform:scaleY(1)}100%{transform:scaleY(0);transform-origin:bottom}}

/* --- watch the film ------------------------------------------------------ */
.hero__watch{
  position:absolute;left:50%;bottom:8.4rem;translate:-50% 0;
  display:inline-flex;align-items:center;gap:.6rem;
  font:inherit;font-size:var(--step--1);font-weight:400;
  letter-spacing:.2em;text-transform:uppercase;
  color:#fff;background:transparent;
  border:1px solid rgba(255,255,255,.5);border-radius:0;
  padding:.7rem 1.5rem;cursor:pointer;
  transition:background .3s ease,border-color .3s ease,color .3s ease;
}
:root[data-lang="ja"] .hero__watch{letter-spacing:.1em;text-transform:none}
.hero__watch:hover,.hero__watch:focus-visible{
  background:#fff;border-color:#fff;color:var(--ink-deep);
}
.hero__watch-icon{display:inline-flex;translate:1px 0}

@media (max-width:560px){
  .hero__watch{bottom:7.6rem;padding:.6rem 1.2rem}
}

/* --------------------------------------------------------------------------
   Full film modal
   -------------------------------------------------------------------------- */
.film{position:fixed;inset:0;z-index:200;display:grid;place-items:center;padding:var(--gutter)}
.film[hidden]{display:none}

.film__backdrop{position:absolute;inset:0;background:rgba(6,16,20,.94);border:0;padding:0}

.film__dialog{
  position:relative;
  width:min(1100px,100%);
  max-height:100%;
  overflow:auto;
  display:flex;flex-direction:column;gap:1.5rem;
}

.film__close{
  position:absolute;top:0;right:0;z-index:2;
  display:inline-flex;align-items:center;justify-content:center;
  width:44px;height:44px;
  color:#fff;background:transparent;border:0;border-radius:0;cursor:pointer;
  opacity:.7;transition:opacity .25s ease;
}
.film__close:hover,.film__close:focus-visible{opacity:1}

.film__frame{margin-top:52px;background:#000}
.film__video{width:100%;height:auto;max-height:70vh;display:block}

.film__credits{
  list-style:none;margin:0;padding:0;
  display:flex;flex-wrap:wrap;gap:.4rem 2rem;
  color:rgba(255,255,255,.75);
}
.film__credits li{display:flex;gap:.55rem;align-items:baseline}
.film__role{
  font-size:var(--step--1);font-weight:700;
  letter-spacing:.14em;text-transform:uppercase;
  color:rgba(255,255,255,.5);
}
:root[data-lang="ja"] .film__role{letter-spacing:.06em;text-transform:none}
.film__who{font-size:var(--step--1)}

@media (max-width:560px){
  .film{padding:1rem}
  .film__frame{margin-top:48px}
  .film__credits{gap:.3rem 1.2rem}
}

/* stop the page behind the modal from scrolling */
body.mmco-film-open{overflow:hidden}

/* --------------------------------------------------------------------------
   Sections
   -------------------------------------------------------------------------- */
.section{padding:clamp(4.5rem,11vw,9rem) var(--gutter)}
.section--tint{background:var(--paper-warm)}
.wrap{max-width:1180px;margin-inline:auto}
.wrap--narrow{max-width:var(--measure)}

.eyebrow{
  margin:0 0 2.4rem;
  font-size:var(--step--1);
  font-weight:700;letter-spacing:.22em;text-transform:uppercase;
  color:var(--ink);
}
:root[data-lang="ja"] .eyebrow{letter-spacing:.14em;text-transform:none}

.prose p{margin:0 0 1.4em;max-width:var(--measure)}
.prose p:last-child{margin-bottom:0}
:root[data-lang="ja"] .prose p{line-height:1.75;text-align:justify;word-break:normal;line-break:strict}

/* page intro used on PEOPLE / CONTACT */
.page-head{padding:calc(clamp(4.5rem,11vw,9rem) + 1.0rem) var(--gutter) clamp(2.5rem,6vw,4rem)}
.page-head h1{margin:0;font-size:var(--step-2);font-weight:300;letter-spacing:.05em; text-transform: uppercase;}
@media (max-width:991px){
.page-head{padding:calc(clamp(4.5rem,11vw,9rem) + 3rem) var(--gutter) clamp(2.5rem,6vw,4rem)}
}
/* --------------------------------------------------------------------------
   Credits
   -------------------------------------------------------------------------- */
.credits{list-style:none;margin:0;padding:0;max-width:640px}
.credits li{
  display:grid;
  grid-template-columns:minmax(9rem,13rem) 1fr;
  gap:.5rem 1.5rem;
  padding:.95rem 0;
  border-top:1px solid var(--rule);
}
.credits li:last-child{border-bottom:1px solid var(--rule)}
.credits dt,.credits .role{
  font-size:var(--step--1);letter-spacing:.14em;text-transform:uppercase;
  font-weight:700;color:var(--ink-soft);
}
.credits .who{font-size:var(--step-0);font-weight:400}
@media (max-width:560px){
  .credits li{grid-template-columns:1fr;gap:.15rem}
}

/* --------------------------------------------------------------------------
   People — two cards per row, portrait beside the text
   -------------------------------------------------------------------------- */
.people-group + .people-group{margin-top:clamp(3rem,6vw,4.5rem)}

.roster__group{
  margin:0 0 1.6rem;
  padding-top:1rem;
  border-top:1px solid var(--ink);
  font-size:18px;
  font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  color:var(--ink);
}
:root[data-lang="ja"] .roster__group{letter-spacing:.1em;text-transform:none}

.roster{
  list-style:none;margin:0;padding:0;
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:clamp(1.5rem,3vw,2.5rem);
}

.roster__item{display:block}

.roster__card{
  display:grid;
  grid-template-columns:50% minmax(0,1fr);
  gap:clamp(1.1rem,2.2vw,1.8rem);
  width:100%;
  font:inherit;color:inherit;text-align:left;
  background:none;border:0;border-radius:0;padding:0;
  cursor:pointer;
  -webkit-appearance:none;appearance:none;
  align-items:start;
}

.roster__figure{display:block;position:relative;overflow:hidden;background:var(--paper-warm)}
.roster__figure img{
  width:100%;aspect-ratio:1/1;object-fit:cover;object-position:center 18%;
  transition:transform .7s cubic-bezier(.2,.6,.2,1),opacity .4s ease;
}
.roster__card:hover .roster__figure img,
.roster__card:focus-visible .roster__figure img{transform:scale(1.04);opacity:.9}

.roster__figure--empty{
  display:grid;place-items:center;
  width:100%;aspect-ratio:1/1;
  border:1px solid var(--rule);
  color:var(--ink-soft);font-size:var(--step--1);
  letter-spacing:.06em;text-align:center;padding:.75rem;
}

.roster__body{display:block;min-width:0}

.roster__name{
  display:block;
  font-size:var(--step-1);font-weight:600;line-height:1.4;letter-spacing:.5px;
}
.roster__roman{
  display:block;font-weight:400;color:var(--ink-soft);
  letter-spacing:.04em;font-size:.76em;margin-top:.15rem;
}
.roster__role{
  display:block;margin-top:.55rem;
  font-size:var(--step--1);font-weight:700;
  letter-spacing:.14em;text-transform:uppercase;color:var(--ink);
}
:root[data-lang="ja"] .roster__role{letter-spacing:.08em;text-transform:none}

.roster__more{
  display:inline-block;margin-top:1.1rem;
  font-size:var(--step--1);font-weight:700;
  letter-spacing:.14em;text-transform:uppercase;color:var(--ink);
  padding-bottom:2px;
  border-bottom:1px solid currentColor;
}
:root[data-lang="ja"] .roster__more{letter-spacing:.08em;text-transform:none}
.roster__card:hover .roster__more,
.roster__card:focus-visible .roster__more{border-bottom-color:transparent}

@media (max-width:900px){
  .roster{grid-template-columns:1fr}
  /* one column: the card is now full width, so cap the portrait */
  .roster__card{grid-template-columns:minmax(0,260px) minmax(0,1fr)}
}
@media (max-width:420px){
  .roster__card{grid-template-columns:45% minmax(0,1fr);gap:1rem}
}

/* --------------------------------------------------------------------------
   Person modal
   -------------------------------------------------------------------------- */
.person-modal{position:fixed;inset:0;z-index:200;display:grid;place-items:center;padding:var(--gutter)}
.person-modal[hidden]{display:none}

.person-modal__backdrop{
  position:absolute;inset:0;background:rgba(6,16,20,.5);
  opacity:0;transition:opacity .32s ease;
}
.person-modal__dialog{
  position:relative;
  width:min(720px,100%);
  max-height:min(84vh,100%);
  overflow:auto;
  background:var(--paper);
  padding:clamp(2.2rem,5vw,3.6rem);
  -webkit-overflow-scrolling:touch;
  opacity:0;transform:translateY(10px);
  transition:opacity .32s ease,transform .32s cubic-bezier(.2,.7,.3,1);
}
.person-modal.is-open .person-modal__backdrop{opacity:1}
.person-modal.is-open .person-modal__dialog{opacity:1;transform:none}

@media (prefers-reduced-motion:reduce){
  .person-modal__backdrop,
  .person-modal__dialog{transition:none}
}

.person-modal__close{
  position:absolute;top:clamp(.9rem,2vw,1.4rem);right:clamp(.9rem,2vw,1.4rem);
  display:inline-flex;align-items:center;justify-content:center;
  width:40px;height:40px;
  color:var(--ink-deep);background:transparent;border:0;border-radius:0;cursor:pointer;
  opacity:.55;transition:opacity .25s ease;
}
.person-modal__close:hover,.person-modal__close:focus-visible{opacity:1}

.person-modal__name{
  margin:0;
  font-size:var(--step-1);font-weight:600;line-height:1.4;letter-spacing:.5px;
  padding-right:2.5rem;
}
.person-modal__roman{
  display:block;font-weight:400;color:var(--ink-soft);
  letter-spacing:.04em;font-size:.84em;margin-top:.15rem;
}
.person-modal__role{
  margin:.6rem 0 0;
  font-size:var(--step--1);font-weight:700;
  letter-spacing:.14em;text-transform:uppercase;color:var(--ink);
}
:root[data-lang="ja"] .person-modal__role{letter-spacing:.08em;text-transform:none}

.person-modal__body{
  margin-top:clamp(1.6rem,3.5vw,2.4rem);
  padding-top:clamp(1.4rem,3vw,2rem);
  border-top:1px solid var(--rule);
}

.person-modal__bio{margin-top:2rem}
.person-modal__bio-head{
  margin:0 0 .9rem;
  font-size:var(--step--1);font-weight:700;
  letter-spacing:.2em;text-transform:uppercase;color:var(--ink-soft);
}
:root[data-lang="ja"] .person-modal__bio-head{letter-spacing:.12em;text-transform:none}
.person-modal__bio .prose p{font-size:calc(var(--step-0) * .94);color:var(--ink-soft)}

@media (max-width:560px){
  .person-modal{padding:1rem}
  .person-modal__dialog{max-height:88vh}
}

/* --------------------------------------------------------------------------
   Contact
   -------------------------------------------------------------------------- */
.contact-grid{
  display:grid;grid-template-columns:1fr minmax(0,1.15fr);
  gap:clamp(2.5rem,7vw,6rem);align-items:start;
}
@media (max-width:820px){.contact-grid{grid-template-columns:1fr}}

.contact-meta p{margin:0 0 1.2rem;max-width:44ch}
.contact-meta a{color:var(--ink);text-underline-offset:4px}

.field{margin-bottom:1.9rem}
.field label{
  display:block;margin-bottom:.55rem;
  font-size:var(--step--1);font-weight:700;
  letter-spacing:.14em;text-transform:uppercase;color:var(--ink-soft);
}
:root[data-lang="ja"] .field label{letter-spacing:.08em;text-transform:none}
.field input,.field textarea{
  width:100%;font:inherit;color:inherit;
  padding:.85rem 0;
  background:transparent;
  border:0;border-bottom:1px solid var(--rule);
  border-radius:0;
  transition:border-color .3s ease;
}
.field input:focus,.field textarea:focus{
  outline:none;border-bottom-color:var(--ink);
}
.field textarea{resize:vertical;min-height:9rem}

.btn{
  display:inline-block;font:inherit;font-weight:700;
  letter-spacing:.16em;text-transform:uppercase;font-size:var(--step--1);
  padding:1rem 2.6rem;
  color:#fff;background:var(--ink);
  border:1px solid var(--ink);border-radius:0;
  cursor:pointer;
  transition:background .3s ease,color .3s ease;
}
:root[data-lang="ja"] .btn{letter-spacing:.1em;text-transform:none}
.btn:hover,.btn:focus-visible{background:transparent;color:var(--ink)}

.form-note{margin-top:1.4rem;font-size:var(--step--1);color:var(--ink-soft)}

/* --------------------------------------------------------------------------
   Privacy policy
   Heading (article) > clause (1. 2.) > item (① / (a)), set by indent.
   -------------------------------------------------------------------------- */
.pp{
  --pp-clause:1.7em;      /* width of "1."        */
  --pp-item:1.6em;        /* width of "①"         */
}
.pp :lang(en){--pp-item:2.3em}  /* width of "(m)" */
.pp p{margin:0 0 1em}
.pp .pp-heading{
  margin:2.8em 0 1em;padding-top:1.4em;
  border-top:1px solid var(--rule);
  font-size:var(--step-1);font-weight:600;line-height:1.5;
  letter-spacing:.02em;color:var(--ink);
}
.pp .pp-num{display:inline-block;color:var(--ink)}
.pp .pp-clause{padding-left:var(--pp-clause)}
.pp .pp-clause > .pp-num{width:var(--pp-clause);margin-left:calc(-1 * var(--pp-clause))}
.pp .pp-item{margin-bottom:.6em;padding-left:calc(var(--pp-clause) + var(--pp-item))}
.pp .pp-item > .pp-num{width:var(--pp-item);margin-left:calc(-1 * var(--pp-item))}
.pp .pp-item + :not(.pp-item){margin-top:1.4em}
.pp .pp-contact a{color:var(--ink);text-underline-offset:4px}
.pp .pp-end{margin:0}
.pp .pp-article + .pp-end{margin-top:3em}
:root .pp :lang(ja) p.pp-end{text-align:right}
@media (max-width:560px){
  .pp{--pp-clause:1.5em;--pp-item:1.4em}
  .pp :lang(en){--pp-item:2.1em}
  .pp .pp-heading{margin-top:2.2em;padding-top:1.1em}
}

/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */
.site-footer{
  background:var(--ink-deep);color:#fff;
  padding:clamp(3rem,7vw,4.5rem) var(--gutter);
}
.site-footer .wrap{
  display:flex;flex-wrap:wrap;gap:2rem 3rem;
  align-items:flex-end;justify-content:space-between;
}
.site-footer img{height:56px;width:auto;margin-bottom:1rem}
.site-footer p{margin:0;font-size:var(--step--1);line-height:1.9;opacity:.85}
.site-footer a{color:#fff;text-underline-offset:4px}
.footer-legal{font-size:var(--step--1);opacity:.55}

/* --------------------------------------------------------------------------
   Reveal on scroll
   -------------------------------------------------------------------------- */
.reveal{opacity:0;transform:translateY(18px);transition:opacity .9s ease,transform .9s ease}
.reveal.is-in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none}}