:root{
  --bg:#ffffff;
  --ink:#1b1b1b;
  --ink-soft:#6f6f6f;
  --line:#e9e9e9;
  --accent:#111;
  --space-1: 12px;
  --space-2: 18px;
  --space-3: 24px;
  --space-4: 32px;
  --space-5: 48px;
  --space-6: 72px;
  --max: 1080px;
  --pad: clamp(16px, 3vw, 28px);
  --ls: 0.14em;
}

*{ box-sizing:border-box; }
html,body{ height:100%; }
html{ overflow-x: hidden; }
body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family: "Cormorant Garamond","Noto Serif JP",serif;
  line-height:1.55; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

/* Splash / Intro (optional; only applies if #splash exists) */
#splash{ position:fixed; inset:0; z-index:9999; background:#bdbdbd; display:flex; align-items:center; justify-content:center; opacity:1; transition:opacity .8s ease; }
#splash.is-hidden{ opacity:0; pointer-events:none; }
.splash-frame{ position:relative; width:100vw; height:100vh; background:#9f9f9f; display:flex; align-items:center; justify-content:center; overflow:hidden; }
.grain{ position:absolute; inset:0; background: radial-gradient(ellipse at center, rgba(255,255,255,.08), rgba(0,0,0,.08)), linear-gradient(#a7a7a7, #909090); mix-blend-mode:multiply; filter:contrast(110%) saturate(95%); }
.splash-inner{ position:relative; text-align:center; color:#fff; z-index:2; letter-spacing: var(--ls); }
.splash-inner .name{ margin:0 0 .4rem; font-weight:600; font-size: clamp(28px, 5vw, 48px); line-height:1.05; text-transform: uppercase; }
.splash-inner .title{ margin:.1rem 0 0; font-size: clamp(14px, 1.8vw, 18px); opacity: .92; }
.splash-inner .title.jp{ margin-top:.25rem; font-family:"Noto Serif JP",serif; letter-spacing: .06em; }

/* Header */
.site-header{ position:fixed; top:0; left:0; right:0; width:100%; z-index:1000; display:grid; grid-template-columns: 1fr auto auto; align-items:center; gap: 12px; padding: 12px var(--pad); background: rgba(255,255,255,.9); backdrop-filter: blur(6px); border-bottom:1px solid var(--line); }
.brand{ color:var(--ink); text-decoration:none; font-weight:500; letter-spacing: var(--ls); text-transform:uppercase; font-size: clamp(14px, 1.6vw, 16px); }
/* Animated underline for menu links */
/* Animated underline for menu links */
.main-nav a {
  color:var(--ink);
  text-decoration:none;
  margin:0 12px;
  letter-spacing:.08em;
  text-transform:uppercase;
  font-size:13px;
  position: relative;
  overflow: hidden;
}
.main-nav a:hover{ opacity:.7; }
.main-nav a::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: -3px;
  width: 100%;
  height: 1.5px;
  background: #111;
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 0.3s ease;
  opacity: 0;
}
.main-nav a:hover::after,
.main-nav a[aria-current='page']::after {
  transform: scaleX(1);
  transform-origin: left;
  opacity: 1;
}
/* Prevent persistent underline on in-page (#hash) links; allow hover/focus animation */
.main-nav a[href^="#"][aria-current="page"]:not(:hover):not(:focus-visible)::after{
  opacity: 0 !important;
  transform: scaleX(0) !important;
}
.main-nav a[href^="#"][aria-current="page"]:hover::after,
.main-nav a[href^="#"][aria-current="page"]:focus-visible::after{
  opacity: 1 !important;
  transform: scaleX(1) !important;
  transform-origin: left;
}
.lang-toggle{ display:flex; gap:6px; }
.lang-toggle button{ font: inherit; border:1px solid var(--line); background:#fff; padding:6px 10px; letter-spacing:.08em; text-transform:uppercase; font-size:12px; cursor:pointer; }
.lang-toggle button[aria-pressed="true"]{ background:#111; color:#fff; border-color:#111; }

/* Sections */
.wrap{ max-width: var(--max); margin: 0 auto; padding: var(--space-4) var(--pad); }
.readable{ max-width: 820px; }
h3{ margin:0 0 1rem; font-weight:600; letter-spacing:var(--ls); text-transform:uppercase; font-size: clamp(18px, 2.2vw, 22px); }
.wrap > h3{ text-align:left; }

/* Fix: remove extra gap before WORKS and force left alignment */
#works{
  padding-top:0; margin-top:0;
  padding-bottom:0; margin-bottom:0;
}
#works h3{ margin-top:0; text-align:left !important; }

/* Additional: close any residual top padding on sections and ensure left-aligned headings */
section.wrap{ padding-top:0 !important; }
#works.wrap{ padding-top:0 !important; }
#works > h3{ margin-left:0; }

/* Hero */
.hero{
  padding: 0;
  border-bottom:1px solid var(--line);
  margin-top:0;
}
.hero-inner{
  max-width: 860px;
  margin: 0 auto;
  text-align:center;
  margin-top:0;
}
.hero-photo{
  width:100vw;
  height:min(68vh, 680px); /* keeps hero from being too tall */
  object-fit: cover;       /* crops to fill without distortion */
  display:block;
  margin-top:0;
}

/* Works */
.subhead{ margin: 18px 0 10px; font-weight:600; letter-spacing:var(--ls); text-transform:uppercase; font-size:clamp(14px,1.6vw,16px); color:var(--ink-soft); text-align:left; margin-top:0; padding-top:0; }
.subhead:first-child{ margin-top:0; }
.works-subsection{ margin-bottom:18px; }
.grid{ display:grid; gap: var(--space-3); grid-template-columns: repeat(12, 1fr); }
.work{ grid-column: span 6; text-decoration:none; color:inherit; border:1px solid var(--line); background:#fff; display:flex; flex-direction:column; }
.work .ph{ aspect-ratio: 16/9; background:#e9e9e9; }
.work-meta{ padding:12px; border-top:1px solid var(--line); }
.work-meta h4{ margin:0 0 .2rem; font-weight:500; letter-spacing:.02em; }
.work-meta p{ margin:0; color:var(--ink-soft); font-size:14px; }
@media (max-width: 880px){ .grid{ grid-template-columns: repeat(6, 1fr); } .work{ grid-column: span 6; } }

/* Work detail layout */
.work-detail{ display:grid; grid-template-columns: 1.1fr 1fr; gap:24px; align-items:start; }
.work-detail-media .poster{ width:100%; height:auto; display:block; border:1px solid var(--line); background:#f6f6f6; }
.work-detail-media .stills{ margin-top:12px; display:grid; grid-template-columns: repeat(2,1fr); gap:12px; }
.work-detail-media .stills img{ width:100%; height:auto; display:block; border:1px solid var(--line); background:#f6f6f6; }
.work-detail-copy .meta{ list-style:none; padding:0; margin:.5rem 0 1rem; }
.work-detail-copy .meta li{ padding:.25rem 0; border-bottom:1px solid var(--line); }
.work-detail-copy .bullets{ list-style:disc; padding-left:1.2rem; margin:.5rem 0 0; }

/* Tokito backdrop */
#tokito{
  position:relative;
  margin-top: 0; /* pull up 1px so images touch */
}

/* Tanagokoro backdrop */
#tanagokoro{
  position:relative;
}
#tanagokoro > *{ position:relative; z-index:1; }
#tanagokoro::before{ content:none !important; }

/* Kijishi backdrop */
#kijishi{
  position:relative;
}

/* Somamichi backdrop */
#somamichi{
  position:relative;
  margin-bottom: 0; /* eliminate tiny white line between sections */
}
#somamichi > *{ position:relative; z-index:1; }
#somamichi::before{ content:none !important; }

/* About section */
#about{
  display:grid; grid-template-columns: minmax(0px, 380px) 1fr;
  gap: var(--space-1); align-items:start; justify-content:start;
  margin-bottom: 0; /* pull About down so its backdrop touches Works */
  padding-bottom: 24px; /* keep text spacing intact */
  position:relative;
}


#about h3{ grid-column:1 / -1; }
#about img.profile-photo{ grid-column:1; grid-row:5 / span 10; align-self:start; }
#about > :not(h3):not(img){ grid-column:2; }
#about .readable{ max-width:none; }
.wrap#about { margin: 0 auto; max-width: var(--max); }

.profile-photo{ width:100%; max-width:570px; height:auto; object-fit:cover; display:block; z-index:2; border:1px solid var(--line); background:#f6f6f6; }

#about p{ margin: 0 0 6px; line-height:1.42; }

@media (max-width: 880px){
  #about{ grid-template-columns:1fr; gap: var(--space-4); }
  #about .profile-photo{ max-width:100%; }
  #about img.profile-photo{ grid-row:auto; }
  #about > :not(h3):not(img){ grid-column:1; }
  #about p{ line-height:1.5; }
}

@media (max-width: 880px){ .work-detail{ grid-template-columns: 1fr; } }

/* Film Cards ------------------------------------------------------- */
.films-list{ display:grid; gap:28px; margin-top:24px; }
.film-card{ position:relative; display:grid; grid-template-columns: 1.15fr 1fr; gap:20px; align-items:start; padding:14px; border:1px solid var(--line); background:#fafafa; cursor:pointer; transition: box-shadow .25s ease, background .25s ease; }
@media (max-width: 880px){ .film-card{ grid-template-columns: 1fr; } }

/* Scroll reveal (drop-in with veil) */
.reveal{ opacity:0; transform: translateY(-24px); filter: blur(2px); transition: opacity .6s ease, transform .6s cubic-bezier(.2,.7,.2,1), filter .6s ease; }
.reveal::before{ content:""; position:absolute; inset:0; background: rgba(255,255,255,.55); backdrop-filter: blur(1.5px); opacity:1; pointer-events:none; transition: opacity .6s ease; }
.reveal.reveal-in{ opacity:1; transform: translateY(0); filter: none; }
.reveal.reveal-in::before{ opacity:0; }

/* Carousel */
.film-carousel{ position:relative; overflow:hidden; border:1px solid var(--line); background:#f6f6f6; }
.film-track{ display:flex; transition: transform .35s ease; width:100%; }
.film-slide{ flex: 0 0 100%; aspect-ratio: 16 / 9; background:#eaeaea center / cover no-repeat; }
.film-slide.ph{ background: linear-gradient(180deg,#ddd,#cfcfcf); position:relative; }
.film-slide.ph::after{ content:"Add image"; position:absolute; inset:auto 0 8px 0; text-align:center; color:#777; font-size:12px; letter-spacing:.08em; }

img.film-slide{ width:100%; height:100%; object-fit: cover; display:block; }

.film-nav{ position:absolute; top:50%; transform: translateY(-50%); border:0; background: rgba(255,255,255,.9); padding:6px 10px; cursor:pointer; z-index:2; line-height:1; border-radius:4px; }
.film-nav.prev{ left:8px; } .film-nav.next{ right:8px; }
.film-dots{ position:absolute; left:0; right:0; bottom:6px; display:flex; justify-content:center; gap:6px; z-index:2; }
.film-dots button{ width:10px; height:10px; border-radius:50%; border:1px solid rgba(0,0,0,.4); background: rgba(255,255,255,.8); padding:0; cursor:pointer; }
.film-dots button.is-active{ background:#111; border-color:#111; }
.film-dots button:focus-visible{ outline:2px solid #111; outline-offset:2px; }

/* Info */
.film-info .film-title{ margin:.2rem 0 .2rem; font-weight:600; letter-spacing:.02em; }
.film-info .film-meta{ margin:0 0 .6rem; color:var(--ink-soft); font-size:14px; }

.film-info .film-logline{ margin:0; }

/* Expandable cards -------------------------------------------------- */
.film-card:focus-within{ outline: 2px solid rgba(0,0,0,.2); outline-offset: 2px; }
.film-card.is-expanded{ background:#fff; box-shadow: 0 10px 24px rgba(0,0,0,.06); }

.film-extra{ overflow:hidden; max-height:0; opacity:0; transition: max-height .45s ease, opacity .3s ease; grid-column: 1 / -1; }
.film-card.is-expanded .film-extra{ max-height: 1200px; opacity:1; }

/* When expanded, give carousel a little more room */
.film-card.is-expanded .film-slide{ aspect-ratio: 3 / 2; }

/* Optional gallery thumbs inside extra */
.film-extra-gallery{ display:grid; grid-template-columns: repeat(6,1fr); gap:10px; margin-top:12px; }
.film-extra-gallery img{ width:100%; height:100%; object-fit:cover; display:block; border:1px solid var(--line); background:#f6f6f6; aspect-ratio: 1/1; }
@media (max-width: 880px){ .film-extra-gallery{ grid-template-columns: repeat(3,1fr); } }

/* Toggle affordance */
.film-title::after{ content:" \2193"; opacity:.4; font-weight:400; transition: transform .25s ease, opacity .25s ease; }
.film-card.is-expanded .film-title::after{ content:" \2191"; opacity:.6; }

/* News */
.news{ list-style:none; margin:0; padding:0; }
.news li{ display:flex; gap:12px; padding:12px 0; border-bottom:1px solid var(--line); }
.news time{ width:84px; color:var(--ink-soft); }

/* Contact */
.contact-form{ display:grid; gap:14px; margin-top:8px; }
label{ display:grid; gap:6px; }
input, textarea{ width:100%; padding:10px 120px; border:1px solid var(--line); background:#fff; font-family: inherit; font-size:16px; }
.button{ width:fit-content; padding:10px 16px; border:1px solid #111; background:#111; color:#fff; letter-spacing:.08em; text-transform:uppercase; font-size:12px; cursor:pointer; }

/* Footer */
.site-footer{ padding: 32px var(--pad) 60px; text-align:center; color:var(--ink-soft); border-top:1px solid var(--line); margin-top: 40px; }

/* Bilingual */
.jp{ font-family:"Noto Serif JP",serif; }

/* Offset for fixed header */
main{ margin-top:0; }

@media (prefers-reduced-motion: reduce){
  .reveal, .film-track, .film-extra{ transition:none !important; }
}

/* ===== Force left alignment for section titles ===== */
.wrap > h3,
section.wrap > h3,
#works > h3,
#about > h3,
#news > h3,
#contact > h3,
#tokito > h3,
#tanagokoro > h3,
#kijishi > h3,
.work-detail-title{
  text-align: left !important;
  margin-left: 0 !important;
}

/* Ensure containers don't center-align descendants */
#works, #about, #news, #contact, #tokito, #tanagokoro, #kijishi{ text-align: initial !important; }

/* Align ABOUT heading with content column (not full-bleed) */
#about > h3{
  width:auto !important;
  margin-left:0 !important;
  padding-left:0 !important;
  padding-right:0 !important;
}

/* =============================================================
   Floating section cards (for About + each Work section)
   ============================================================= */
.section-card{
  background: #ffffff; /* fully opaque so backdrops never show through */
  border: 1px solid var(--line);
  border-radius: 14px;
  box-shadow: 0 12px 30px rgba(0,0,0,0.10), 0 2px 10px rgba(0,0,0,0.06);
  padding: clamp(16px, 3vw, 28px);
}
#tokito .section-card,
#kijishi .section-card{ z-index: 5; }
.section-card--tight{ padding: clamp(12px, 2.2vw, 22px); }

/* Gentle lift on hover/focus to enhance the “floating” feel */
.section-card:hover, .section-card:focus-within{
  transform: translateY(-2px);
  box-shadow: 0 16px 36px rgba(0,0,0,0.12), 0 4px 16px rgba(0,0,0,0.08);
  transition: transform .18s ease, box-shadow .18s ease;
}

/* Utility to center cards within section width */
.section-card-wrap{ max-width: var(--max); margin: 0 auto; padding: var(--space-3) var(--pad); }

/* Suggested mapping (to apply in HTML in the next step):
   - Wrap #about inner content in .section-card within a .section-card-wrap
   - Wrap each .work-detail in .section-card within a .section-card-wrap
*/

/* =============================================================
   Image grid inside cards (stills)
   ============================================================= */
.card-stills{ display:grid; grid-template-columns: repeat(2,1fr); gap: 12px; margin-top: 12px; }
.card-stills img{ width:100%; height:auto; display:block; border:1px solid var(--line); background:#f6f6f6; cursor: zoom-in; }
@media (max-width: 720px){ .card-stills{ grid-template-columns: 1fr; } }

/* =============================================================
   Fullscreen Lightbox / Gallery (Gaussian blurred backdrop)
   ============================================================= */
.lightbox{
  position: fixed; inset: 0; z-index: 4000;
  display: none; /* toggled via .is-open */
  align-items: center; justify-content: center;
  background: rgba(255,255,255,0.12);
  -webkit-backdrop-filter: blur(10px) saturate(110%);
  backdrop-filter: blur(10px) saturate(110%);
}
.lightbox.is-open{ display:flex; }

.lightbox__canvas{ position: relative; width: min(92vw, 1280px); height: auto; max-height: 88vh; display:flex; align-items:center; justify-content:center; }
.lightbox__img{ max-width: 100%; max-height: 88vh; object-fit: contain; border-radius: 8px; box-shadow: 0 18px 50px rgba(0,0,0,0.20); background:#fff; }

/* Controls */
.lightbox__btn{ position:absolute; top:50%; transform: translateY(-50%); border:0; background: rgba(255,255,255,0.9); padding:10px 12px; cursor:pointer; border-radius: 999px; box-shadow: 0 4px 12px rgba(0,0,0,0.12); }
.lightbox__btn:focus-visible{ outline: 2px solid #111; outline-offset: 2px; }
.lightbox__btn--prev{ left: -4px; }
.lightbox__btn--next{ right: -4px; }

/* Close */
.lightbox__close{ position:absolute; top:12px; right:12px; border:0; background: rgba(255,255,255,0.95); padding:8px 10px; cursor:pointer; border-radius: 8px; box-shadow: 0 3px 10px rgba(0,0,0,0.12); }

/* Dots / index (optional) */
.lightbox__dots{ position:absolute; left:0; right:0; bottom:14px; display:flex; gap:6px; justify-content:center; }
.lightbox__dot{ width:9px; height:9px; border-radius:50%; border:1px solid rgba(0,0,0,0.4); background: rgba(255,255,255,0.85); }
.lightbox__dot.is-active{ background:#111; border-color:#111; }

/* Hide while respecting reduced motion */
@media (prefers-reduced-motion: reduce){
  .section-card:hover, .section-card:focus-within{ transform:none; box-shadow: 0 12px 30px rgba(0,0,0,0.10), 0 2px 10px rgba(0,0,0,0.06); }
}

/* =============================================================
   Tighten spacing for label we moved inside TOKITO
   ============================================================= */
.section-label{ margin: 0 0 12px; text-align:left; letter-spacing: var(--ls); text-transform:uppercase; color: var(--ink-soft); font-size: clamp(14px,1.6vw,16px); }

/* =========================
   About two-column inside card
   ========================= */
#about .section-card-wrap{ max-width: var(--max); }
#about .section-card{ padding: clamp(18px, 3.2vw, 36px); }

/* Make ABOUT card span the same outer width as Works boxes */
#about .section-card-wrap{ max-width: var(--max); width:100%; margin: 0 auto; padding: var(--space-3) 0; }
#about .section-card{ width:100%; }
#about .about-grid{ display:grid; grid-template-columns: minmax(340px, 420px) 1fr; gap: clamp(16px, 2.8vw, 36px); align-items:start; }
#about .about-grid .profile-photo{ width:100%; height:auto; max-width:none; }
#about .about-grid .about-copy p{ margin: 0 0 10px; }
@media (max-width: 880px){
  #about .about-grid{ grid-template-columns: 1fr; }
}

/* =========================
   Works 2x2 grid (sections as grid items)
   ========================= */
.works-grid{ display:grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-4); align-items:start; }
.works-grid > section{ margin:0; }
@media (max-width: 980px){ .works-grid{ grid-template-columns: 1fr; } }

/* Lightbox title above image */
.lightbox__title{ position:absolute; top:-36px; left:0; right:0; text-align:center; font-weight:600; letter-spacing:.02em; text-transform:none; }
@media (max-width: 640px){ .lightbox__title{ top:-28px; font-size: 14px; } }

#about .section-card,
#tokito .section-card,
#tanagokoro .section-card,
#kijishi .section-card,
#somamichi .section-card{
  position: relative;
  z-index: 2;
}
.works-grid{ position: relative; z-index: 2; }
/* ===============================
   Force cards above background photos
   =============================== */
#about::before,
#tokito::before,
#tanagokoro::before,
#kijishi::before,
#somamichi::before,
#contact::before{
  z-index: 0 !important; /* backdrops always under content */
}

.section-card-wrap,
.section-card{
  position: relative;
  z-index: 2;            /* float above backdrops */
}

.works-grid{
  position: relative;
  z-index: 2;
}

/* Keep hero elements behind cards if needed */
.hero, .hero::before, .hero-overlay{
  position: relative;
  z-index: 0;
}

 
/* ===== Ensure section backdrops NEVER cover cards ===== */
#about, #tokito, #tanagokoro, #kijishi, #somamichi, #contact{
  position: relative;
  isolation: isolate;   /* new stacking context so negative z works safely */
  z-index: 0;           /* baseline */
}
#about::before,
#tokito::before,
#tanagokoro::before,
#kijishi::before,
#somamichi::before,
#contact::before{
  z-index: -1 !important; /* guarantee backdrop is behind content/cards */
}

/* Keep cards above baseline */
.section-card-wrap, .section-card, .works-grid{ position: relative; z-index: 1; }

/* =============================================================
   Global backdrop ordering — put every section background at back
   ============================================================= */
/* Create isolated stacking contexts for sections that use backdrops */
#about, #tokito, #tanagokoro, #kijishi, #somamichi, #contact, .hero{
  position: relative;
  isolation: isolate;  /* allows very negative z on ::before safely */
}
/* Force ALL background pseudo-elements to the back */
#about::before,
#tokito::before,
#tanagokoro::before,
#kijishi::before,
#somamichi::before,
#contact::before,
.hero::before{
  z-index: -999 !important; /* absolute back */
  pointer-events: none !important;
}
/* Lift interactive/content layers well above backgrounds */
.section-card-wrap,
.section-card,
.works-grid,
.work-detail,
.film-card,
header,
footer{ position: relative; z-index: 10; }

/* =============================================================
   Background transform utilities (apply to the SECTION element)
   Usage examples:
   <section id="tokito" class="wrap bg-taller-20"> ...
   <section id="kijishi" class="wrap bg-scaleY-115 bg-shift-up-5"> ...
   ============================================================= */

/* Taller: extend backdrop above and below the section */
.bg-taller-10::before{ top:-10vh !important; bottom:-10vh !important; }
.bg-taller-20::before{ top:-20vh !important; bottom:-20vh !important; }
.bg-taller-30::before{ top:-30vh !important; bottom:-30vh !important; }

/* Shift vertically without changing total height */
.bg-shift-up-5::before{ transform: translateX(-50%) translateY(-5vh) !important; }
.bg-shift-up-10::before{ transform: translateX(-50%) translateY(-10vh) !important; }
.bg-shift-down-5::before{ transform: translateX(-50%) translateY(5vh) !important; }
.bg-shift-down-10::before{ transform: translateX(-50%) translateY(10vh) !important; }

/* Stretch background image vertically (no horizontal overflow) */
.bg-scaleY-110::before{ transform: translateX(-50%) scaleY(1.10) !important; }
.bg-scaleY-115::before{ transform: translateX(-50%) scaleY(1.15) !important; }
.bg-scaleY-125::before{ transform: translateX(-50%) scaleY(1.25) !important; }

/* Combine scale + shift (handy presets) */
.bg-scaleY-110.bg-shift-up-5::before{ transform: translateX(-50%) translateY(-5vh) scaleY(1.10) !important; }
.bg-scaleY-115.bg-shift-up-5::before{ transform: translateX(-50%) translateY(-5vh) scaleY(1.15) !important; }
.bg-scaleY-125.bg-shift-up-10::before{ transform: translateX(-50%) translateY(-10vh) scaleY(1.25) !important; }

/* Ensure width stays pinned correctly when transforms override */
.bg-taller-10::before,
.bg-taller-20::before,
.bg-taller-30::before,
.bg-shift-up-5::before,
.bg-shift-up-10::before,
.bg-shift-down-5::before,
.bg-shift-down-10::before,
.bg-scaleY-110::before,
.bg-scaleY-115::before,
.bg-scaleY-125::before{
  left:50% !important; width: calc(100vw + 2px) !important; }
/* Lightbox must overlay the page (override any generic stacking) */
.lightbox{ position: fixed !important; inset:0 !important; z-index: 4000 !important; }
.lightbox.is-open{ display:flex !important; }

/* =============================================
   Equal-height film cards inside the Works grid
   ============================================= */
.works-grid > section{ display:flex; }
.works-grid > section .section-card-wrap{ display:flex; width:100%; }
.works-grid > section .section-card{ display:flex; flex-direction:column; height:100%; }

/* Let the inner work-detail layout stretch but not overflow */
.works-grid .work-detail{ flex:1 1 auto; min-height: 0; }
.works-grid .work-detail-media, .works-grid .work-detail-copy{ min-height:0; }

.gallery-grid{
  display:grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}
.gallery-grid img{
  width:100%; height:auto; display:block;
  border:1px solid var(--line); background:#f6f6f6;
  cursor: zoom-in;
}
@media (max-width: 1200px){ .gallery-grid{ grid-template-columns: repeat(3, minmax(0,1fr)); } }
@media (max-width: 880px){ .gallery-grid{ grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 560px){ .gallery-grid{ grid-template-columns: 1fr; } }
/* ===== Gallery: enforce 3:2 thumbs + bigger size (2-column) ===== */
.gallery-grid{
  display: grid;
  grid-template-columns: repeat(3, minmax(0,1fr)); /* ~2x bigger than 4-col */
  gap: 24px;
}

/* Make every gallery image conform to 3:2 without distortion */
.gallery-grid img{
  width: 100%;
  aspect-ratio: 3 / 2;
  height: auto;
  object-fit: cover; /* crop overflow while keeping 3:2 */
  display: block;
}

/* If a .gallery-thumb wrapper exists, keep it strict too (harmless if absent) */
/* GALLERY THUMBS — fixed 3:2 tiles */
.gallery-grid {
  /* your grid rules… */
}

.gallery-thumb img {
  width: 100%;
  height: 100%;
  aspect-ratio: 3 / 2;   /* <-- constrain only thumbs */
  object-fit: cover;
  display: block;
  border-radius: 6px;
}
/* Responsive: big on desktop, single column on small screens */
@media (max-width: 880px){
  .gallery-grid{ grid-template-columns: 1fr; gap: 16px; }
}
/* Wider container only on the gallery page */
body.gallery-page .wrap{ max-width: 1400px; } /* adjust to taste */

/* =============================================================
   Single continuous backdrop starting at ABOUT and flowing downward
   (Hero/top still uses Top.jpg)
   ============================================================= */
#about{ position: relative; }
#about::before{
  content: "";
  position: absolute;
  top: 0; left: 50%;
  width: calc(100vw + 2px);
  bottom: -3500px; /* extend just past the footer copyright */
  background: url('Images/masashi_websitebackground.png') center / cover no-repeat;
  opacity: .12;
  filter: saturate(95%) contrast(105%);
  transform: translateX(-50%);
  z-index: -999;
  pointer-events: none;
}

/* =============================================
   FINAL: Align ABOUT card edges with WORKS boxes
   ============================================= */
/* Make the outer section paddings identical */
#works.wrap{ padding-left: var(--pad) !important; padding-right: var(--pad) !important; }
#about.wrap{ padding-left: var(--pad) !important; padding-right: var(--pad) !important; }

/* Ensure the About card wrapper itself does not add extra/missing padding */
#about .section-card-wrap{ max-width: var(--max) !important; padding-left: 0 !important; padding-right: 0 !important; }

/* Give both About + Works an identical inner gutter inside their card wrappers */
#about .section-card-wrap > .section-card,
#works .section-card-wrap > .section-card{ margin-left: 0 !important; margin-right: 0 !important; width: 100% !important; }

/* Prevent any legacy rules from narrowing About content */
#about .readable{ max-width: none !important; }
/* Normalize left/right padding with Works */
#about.wrap.readable {
  padding-left: var(--pad) !important;
  padding-right: var(--pad) !important;
}

/* Make sure the inner card spans the wrapper */
#about .section-card-wrap > .section-card {
  width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

/* If you previously used a descendant selector (#about .readable), it won’t match.
   The .readable class is on the section, so use #about.readable / #about.wrap.readable. */
/* About width fix: allow full container width even though the section has .readable */
#about.wrap.readable {
  max-width: var(--max) !important;
  width: 100% !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* =============================================
   ABOUT alignment — make the card use full container width
   ============================================= */
#about{ display:block !important; }
#about .section-card-wrap{ max-width: var(--max) !important; margin: 0 auto !important; padding-left: var(--pad) !important; padding-right: var(--pad) !important; }
#about .section-card{ width:100% !important; margin:0 !important; }

/* =============================================
   ABOUT card: photo left, text right (scoped)
   ============================================= */
#about .section-card{
  display: grid; /* only About's card becomes grid */
  grid-template-columns: minmax(340px, 460px) 1fr;
  gap: clamp(16px, 2.5vw, 36px);
  align-items: start;
}
/* Ensure the heading sits in the right column of the ABOUT card grid */
#about .section-card h3{ grid-column: 2; }
/* Ensure the profile image sits in the left column */
#about .section-card img.profile-photo,
#about .section-card > img:first-of-type,
#about .section-card figure img:first-of-type{
  grid-column: 1;
  width: 100%;
  height: auto;
}
/* Send all non-image content to the right column */
#about .section-card > :not(img):not(figure){ grid-column: 2; }
/* Mobile: stack vertically */
@media (max-width: 880px){
  #about .section-card{ grid-template-columns: 1fr; }
  #about .section-card > *{ grid-column: 1 !important; }
}

# =============================================
#   ABOUT card — force photo left, text right (robust)
#   ============================================= */
/* 1) Ensure the inner about-grid is the layout driver */
#about .about-grid{ display:grid !important; grid-template-columns: minmax(340px, 460px) 1fr !important; gap: clamp(16px, 2.5vw, 36px) !important; align-items:start !important; }

/* 2) Pin the photo (or its figure) to the LEFT column */
#about .about-grid img.profile-photo{ grid-column:1 !important; width:100%; height:auto; }
#about .about-grid > img:first-of-type{ grid-column:1 !important; }
#about .about-grid > figure:has(img){ grid-column:1 !important; }
#about .about-grid > .photo, #about .about-grid > .about-photo{ grid-column:1 !important; }

/* 3) Send all other content to the RIGHT column */
#about .about-grid > :not(img):not(figure):not(.profile-photo):not(.photo):not(.about-photo){ grid-column:2 !important; }
#about .about-grid .about-copy{ grid-column:2 !important; }
#about .about-grid h3{ grid-column:2 !important; }

/* 4) Mobile: stack */
@media (max-width: 880px){
  #about .about-grid{ grid-template-columns: 1fr !important; }
  #about .about-grid > *{ grid-column: 1 !important; }
}

/* ===== ABOUT: pin profile photo to the TOP-LEFT, text to the RIGHT ===== */
/* Works whether the grid is .about-grid or the .section-card itself */
#about .about-grid img.profile-photo,
#about .section-card img.profile-photo,
#about .about-grid > figure:has(img),
#about .section-card > figure:first-of-type{
  grid-column: 1 !important;
  grid-row: 1 !important;
  align-self: start !important;
  width: 100%;
  height: auto;
}

/* Make the heading/text start in the top-right */
#about .section-card h3{
  grid-column: 2 !important;
  grid-row: 1 !important;
  align-self: start;
  margin-top: 0;
}

/* Push the text block(s) under the heading, right column */
#about .about-grid .about-copy{ grid-column: 2 !important; grid-row: 2 !important; }
#about .section-card > :not(img):not(figure):not(h3){ grid-column: 2 !important; }
@media (max-width: 880px){
  #about .about-grid .about-copy{ grid-row: auto !important; }
}

/* === About photo flush top-left === */
#about .section-card img.profile-photo {
  grid-column: 1 !important;
  grid-row: 1 !important;
  align-self: start !important;
  margin-top: 0 !important;
}

#about .section-card h3 {
  grid-column: 2 !important;
  grid-row: 1 !important;
  align-self: start;
}

#about .section-card p {
  grid-column: 2 !important;
  grid-row: 2 !important;
  margin-top: 0 !important;
}

/* Force the grid to stretch full height but keep alignment neat */
#about .section-card {
  align-items: start !important;
}

/* =============================
   ABOUT — heading on top; photo & text side-by-side
   ============================= */
#about .section-card{
  display:grid !important;
  grid-template-columns: minmax(340px, 460px) 1fr !important;
  gap: clamp(16px, 2.5vw, 36px) !important;
  align-items:start !important;
}

/* Put the ABOUT heading above both columns */
#about .section-card h3{
  grid-column: 1 / -1 !important;  /* span both columns */
  grid-row: 1 !important;
  margin-top: 0 !important;
  margin-bottom: clamp(10px, 1.4vw, 14px) !important;
}

/* Start the image and the text on the same top row under the heading */
#about .section-card img.profile-photo,
#about .section-card > figure:first-of-type{
  grid-column: 1 !important;
  grid-row: 2 !important;   /* sits directly under the heading */
  align-self: start !important;
  width: 100% !important;
  height: auto !important;
}

/* All non-image content (paragraphs, lists, etc.) begins at the same row as the photo */
#about .section-card > :not(h3):not(img):not(figure){
  grid-column: 2 !important;
  grid-row: 2 !important;
  align-self: start !important;
  margin-top: 0 !important;
}

/* If an .about-grid wrapper is present inside the card, keep it consistent */
#about .about-grid{
  display:grid !important;
  grid-template-columns: minmax(340px, 460px) 1fr !important;
  gap: clamp(16px, 2.5vw, 36px) !important;
  align-items:start !important;
}
#about .about-grid img.profile-photo,
#about .about-grid > figure:first-of-type img {
  grid-column: 1 !important;
  grid-row: 2 !important;
  align-self: start !important;
  width: 100% !important;
  height: auto !important;
  max-height: 600px; /* keeps image from being long and thin */
  object-fit: cover;
}
#about .about-grid .about-copy{
  grid-column: 2 !important;
  grid-row: 2 !important;
  margin-top: 0 !important;
}

/* Mobile: stack cleanly */
@media (max-width: 880px){
  #about .section-card,
  #about .about-grid{ grid-template-columns: 1fr !important; }
  #about .section-card > *{ grid-column: 1 !important; grid-row: auto !important; }
}

/* =============================================
   ABOUT: shorten long text — wider text column + 2-column copy on wide screens
   ============================================= */
/* Give the text more room by narrowing the photo column slightly */
#about .section-card{ grid-template-columns: minmax(280px, 360px) 1fr !important; }

/* Split the about copy into two columns on large viewports */
@media (min-width: 1100px){
  #about .about-grid .about-copy{ column-count: 2; column-gap: 28px; }
  #about .about-grid .about-copy p{ break-inside: avoid; }
}
/* ABOUT layout fix */
#about {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: 60px;
  max-width: 1200px;
  margin: 80px auto;
  padding: 60px 40px;
  background: rgba(255, 255, 255, 0.8);
  border-radius: 10px;
  box-shadow: 0 4px 20px rgba(0,0,0,0.05);
}

#about img {
  width: 45%;
  height: auto;
  object-fit: cover;
  border-radius: 4px;
}

#about .about-text {
  width: 100%;
  line-height: 1.8;
  font-size: 16px;
  color: #222;
}

/* Title styling */
#about h2 {
  font-size: 18px;
  letter-spacing: 2px;
  font-weight: 500;
  margin-bottom: 25px;
}

/* Responsive layout */
@media (max-width: 900px) {
  #about {
    flex-direction: column;
    text-align: left;
    padding: 40px 20px;
  }
  #about img,
  #about .about-text {
    width: 100%;
  }
}
/* --- ABOUT: reset rogue flex box and restore card/grid layout --- */
#about{
  display:block !important;
  background:transparent !important;
  box-shadow:none !important;
  border-radius:0 !important;
  margin: 0 auto !important;
  padding: var(--space-4) var(--pad) !important;
  max-width: var(--max) !important;
}

/* ABOUT card: heading on top, text LEFT, image RIGHT */
#about .section-card{
  display:grid !important;
  /* wider text column, slightly narrower photo column */
  grid-template-columns: 1fr minmax(200px, 520px) !important; /* text | photo */
  gap: clamp(12px, 1.8vw, 24px) !important; /* smaller gap so elements feel closer */
  align-items:start !important;
}

/* Heading spans both columns on the first row */
#about .section-card h3{
  grid-column: 1 / -1 !important;
  grid-row: 1 !important;
  margin: 0 0 clamp(10px,1.4vw,14px) !important;
}

/* Text begins under the heading, LEFT column */
#about .section-card > :not(h3):not(img):not(figure){
  grid-column: 1 !important;
  grid-row: 2 !important;
  align-self: start !important;
  margin-top: 0 !important;
}

/* Photo sits under the heading, RIGHT column */
#about .section-card img.profile-photo,
#about .section-card figure:first-of-type{
  grid-column: 2 !important;
  grid-row: 2 !important;
  align-self: start !important;
  width: 100% !important;
  height: auto !important;
  max-height: 520px;              /* keeps it from getting tall/thin */
  object-fit: cover;
}

/* Mobile: stack cleanly */
@media (max-width: 880px){
  #about .section-card{ grid-template-columns: 1fr !important; }
  #about .section-card > *{ grid-column: 1 !important; grid-row: auto !important; }
}
/* LIGHTBOX: center image and allow natural aspect ratio */

/* === Lightbox: remove top bar / title row and maximize image === */
/* Hide any title/header bar inside the lightbox */
.lightbox__title,
.lightbox__header,
.lightbox__bar{ display:none !important; }

/* Simplify canvas layout: just prev | image | next, then close button */
.lightbox__canvas{
  display:grid !important;
  grid-template-areas:
    "prev img next"
    ".    close .";
  align-items:center; justify-items:center;
  gap: 0.75rem; padding: clamp(8px, 2vw, 18px);
}

/* Ensure the image can occupy full available height/width without being blocked */
.lightbox__img{
  grid-area: img !important;
  max-width: min(92vw, 2500px) !important;
  max-height: 90vh !important;
  width:auto !important; height:auto !important;
  aspect-ratio: auto !important; object-fit: contain !important;
}

/* Keep the close button accessible but out of the way */
.lightbox__close{ grid-area: close !important; margin-top: 0; }
/* =============================================
   WORKS: make all cards the same height
   ============================================= */

/* Stretch items within each grid row so cards match the tallest */
.works-grid{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-4);
  align-items: stretch; /* stretches items to row height */
}

/* Let each grid item and its wrappers fill the row height */
.works-grid > section.wrap{ height: 100%; }
.works-grid > section.wrap .section-card-wrap{ height: 100%; }
.works-grid > section.wrap .section-card{
  height: 100%;
  display: flex;
  flex-direction: column; /* keep card internals flowing */
}

/* Keep media/text layout intact; allow them to grow/shrink inside */
.works-grid .work-detail{
  flex: 1 1 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-3);
}
.works-grid .work-detail-media,
.works-grid .work-detail-copy{ min-height: 0; }

/* Mobile: single column */
@media (max-width: 900px){
  .works-grid{ grid-template-columns: 1fr; }
  .works-grid .work-detail{ grid-template-columns: 1fr; }
}
/* =============================================
   Disable hover effects on content cards (boxes)
   ============================================= */

/* Stop transitions on cards/thumbs */
.section-card,
.section-card--tight,
.film-card,
.work-card,
.gallery-thumb img{
  transition: none !important;
}

/* Neutralize common hover states (scale, fade, shadow pop) */
.section-card:hover,
.section-card:focus-within,
.film-card:hover,
.film-card:focus-within,
.work-card:hover,
.work-card:focus-within,
.gallery-thumb:hover img{
  transform: none !important;
  filter: none !important;
  opacity: 1 !important;
  box-shadow: none !important; /* keep flat / no pop */
}

/* =============================================
   ABOUT — mobile: wider text + wrap around photo
   ============================================= */
@media (max-width: 768px){
  /* Let the card flow normally so floats work */
  #about .section-card{ display:block !important; }

  /* Float the photo so text wraps nicely around it */
  #about .section-card img.profile-photo{
    float: right;                    /* image on the right, text wraps on the left */
    width: min(46vw, 220px) !important; /* responsive but not too big */
    height: auto !important;
    margin: 0 0 12px 14px;           /* space between text and image */
    border-radius: 8px;              /* keep the rounded look */
    object-fit: cover;
    shape-outside: inset(0 round 8px); /* smoother wrap on supported browsers */
  }

  /* Make the copy comfortable to read */
  #about .about-text{
    font-size: 1rem;
    line-height: 1.65;
  }

  /* Clear the float after the text so following sections don't collide */
  #about .section-card::after{ content:""; display:block; clear: both; }
}
/* =============================================
   WORKS — tighter spacing between cards & inside
   ============================================= */

/* 1) Reduce vertical spacing between work sections */
#tokito, #tanagokoro, #kijishi, #somamichi, #hokkaido, #arsnova {
  margin-top: clamp(8px, 1vw, 14px) !important;
  margin-bottom: clamp(8px, 1vw, 14px) !important;
}

/* 2) Tighten the Works grid (where used) */
.works-grid {
  gap: clamp(6px, 0.8vw, 12px) !important;
}

/* 3) Reduce padding inside the white cards */
#tokito .section-card,
#tanagokoro .section-card,
#kijishi .section-card,
#somamichi .section-card,
#hokkaido .section-card,
#arsnova .section-card {
  padding: clamp(14px, 1.6vw, 22px) !important;
}

/* 4) Tighter spacing between media and copy inside each work */
#tokito .work-detail,
#tanagokoro .work-detail,
#kijishi .work-detail,
#somamichi .work-detail,
#hokkaido .work-detail,
#arsnova .work-detail {
  gap: clamp(10px, 1.4vw, 18px) !important;
}

/* 5) Tighter spacing between still thumbnails */
#tokito .card-stills,
#tanagokoro .card-stills,
#kijishi .card-stills,
#somamichi .card-stills,
#hokkaido .card-stills,
#arsnova .card-stills {
  gap: clamp(6px, 1vw, 12px) !important;
}
/* =============================================
   KIJISHI — uniform thumbnail sizing in card-stills
   ============================================= */
#kijishi .card-stills{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: clamp(6px, 1vw, 12px);
}

#kijishi .card-stills img{
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 2;   /* consistent tile ratio */
  object-fit: cover;      /* crops to fit the tile uniformly */
  display: block;
  border-radius: 0;
}

/* Make the cover image behave like the rest */
#kijishi .card-stills img.poster{
  aspect-ratio: 3 / 2;
  object-fit: cover;
  border-radius: 0;
}
#hokkaido .card-stills{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: clamp(6px, 1vw, 12px);
}

#hokkaido .card-stills img{
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 2;   /* consistent tile ratio */
  object-fit: cover;      /* crops to fit the tile uniformly */
  display: block;
  border-radius: 0;
}
#tanagokoro .card-stills{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: clamp(6px, 1vw, 12px);
}

#tanagokoro .card-stills img{
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 2;   /* consistent tile ratio */
  object-fit: cover;      /* crops to fit the tile uniformly */
  display: block;
  border-radius: 0;
}
#tokito .card-stills{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: clamp(6px, 1vw, 12px);
}

#tokito .card-stills img{
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 2;   /* consistent tile ratio */
  object-fit: cover;      /* crops to fit the tile uniformly */
  display: block;
  border-radius: 0;
}
#somamichi .card-stills{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: clamp(6px, 1vw, 12px);
}

#somamichi .card-stills img{
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 2;   /* consistent tile ratio */
  object-fit: cover;      /* crops to fit the tile uniformly */
  display: block;
  border-radius: 0;
}
#arsnova .card-stills{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: clamp(6px, 1vw, 12px);
}

#arsnova .card-stills img{
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 2;   /* consistent tile ratio */
  object-fit: cover;      /* crops to fit the tile uniformly */
  display: block;
  border-radius: 0;
}

# =============================================
#   GALLERY PAGE — larger, square, tight grid
#   ============================================= */
body.gallery-page .gallery-grid{
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)) !important; /* larger tiles */
  gap: 6px !important; /* tighter spacing */
  align-items: stretch !important;
  justify-items: stretch !important;
}

body.gallery-page .gallery-thumb{
  width: 100% !important;
  height: auto !important;
  aspect-ratio: 5 / 3 !important;   /* perfect square */
  overflow: hidden !important;
}

/* Ensure images fill the square and have square corners */
body.gallery-page .gallery-thumb img{
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;     /* fill the square without distortion */
  aspect-ratio: 1 / 1 !important;
  border-radius: 0 !important;      /* squared corners */
}

# =============================================
#   VIDEOS — make embedded videos slightly larger
#   ============================================= */
/* Default work-detail layout (outside the equal-height override) */
.work-detail{
  grid-template-columns: 1.25fr 0.75fr !important; /* widen media, shrink copy */
}

/* Inside the Works 2x2 grid, keep media a touch wider */
.works-grid .work-detail{
  grid-template-columns: 1.3fr 0.7fr !important;
}

/* Ensure the video container fills the media column cleanly */
.work-detail-media .video-embed{ width:100% !important; }
.work-detail-media .video-embed > div[style*="padding:"]{ max-width: 100% !important; }

/* Keep mobile stacked single-column */
@media (max-width: 900px){
  .work-detail{ grid-template-columns: 1fr !important; }
}

/* =============================================================
   UNIFIED CARD WIDTH — make every section card match ABOUT
   ============================================================= */
#tokito .section-card-wrap,
#tanagokoro .section-card-wrap,
#kijishi .section-card-wrap,
#somamichi .section-card-wrap,
#hokkaido .section-card-wrap,
#arsnova .section-card-wrap,
#contact .section-card-wrap{
  max-width: var(--max) !important;
  margin: 0 auto !important;
  padding-left: var(--pad) !important;
  padding-right: var(--pad) !important;
  display: flex;
  justify-content: center;
  align-items: stretch;
}

#tokito .section-card,
#tanagokoro .section-card,
#kijishi .section-card,
#somamichi .section-card,
#hokkaido .section-card,
#arsnova .section-card,
#contact .section-card {
  width: 100% !important;
  margin: 0 auto !important;
  padding: clamp(18px, 3vw, 28px) !important;
  border-radius: 14px;
  border: 1px solid var(--line);
  box-shadow: 0 12px 30px rgba(0,0,0,0.1);
  background: #fff;
  overflow: hidden;
  box-sizing: border-box;
}

/* If a section is not wrapped in .section-card-wrap for any reason, normalize the section itself */
#tokito.wrap, #tanagokoro.wrap, #kijishi.wrap, #somamichi.wrap, #hokkaido.wrap, #arsnova.wrap, #contact.wrap{
  padding-left: var(--pad) !important;
  padding-right: var(--pad) !important;
}

/* =============================================================
   WORK DETAIL ORDER — mobile: video, then text, then photos
   ============================================================= */
/* Declare areas for desktop first (media left, copy right, stills below media) */
.work-detail{
  display: grid;
  grid-template-columns: 1.25fr 0.75fr;
  grid-template-areas:
    "media copy"
    "stills copy";
}

.work-detail-media{ grid-area: media; }
.work-detail-copy{ grid-area: copy; }
.card-stills{ grid-area: stills; }

/* Keep a slightly wider media column when inside the 2x2 Works grid */
.works-grid .work-detail{
  grid-template-columns: 1.3fr 0.7fr;
}

/* Mobile stack — video first, then text, then photos */
@media (max-width: 900px){
  .work-detail{
    grid-template-columns: 1fr !important;
    grid-template-areas:
      "media"
      "copy"
      "stills" !important;
  }
}

/* Make sure nested Vimeo wrapper cannot break the order/width on mobile */
@media (max-width: 900px){
  .work-detail-media .video-embed,
  .work-detail-media .video-embed > div{
    width: 100% !important;
    max-width: 100% !important;
  }
}
/* =============================================================
   MOBILE FIXES — larger videos + no side cut-offs for cards
   ============================================================= */
@media (max-width: 680px){
  /* Prevent any horizontal clipping/scroll */
  html, body { overflow-x: hidden; }

  /* Keep cards comfortably inside the viewport */
  .wrap { padding-left: 14px !important; padding-right: 14px !important; }

  /* Make each work card width-aware */
  .section-card {
    width: 100% !important;
    box-sizing: border-box;
    margin-left: auto;
    margin-right: auto;
  }

  /* Ensure media and text stack neatly */
  .work-detail { display: grid; grid-template-columns: 1fr !important; gap: 14px; }

  /* ---- VIDEOS: override the inline padding hack on mobile ---- */
  .work-detail-media .video-embed { width: 100% !important; position: relative !important; }

  /* Neutralize nested div’s padding trick so the iframe can size itself */
  .work-detail-media .video-embed > div {
    position: static !important;
    padding: 0 !important;
    height: auto !important;
    max-width: 100% !important;
  }

  /* Make the iframe fill a proper 16:9 box at full width */
  .work-detail-media .video-embed iframe {
    position: static !important;
    display: block !important;
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 16 / 9 !important;
  }

  /* Stills should never push wider than the screen */
  .card-stills { width: 100% !important; }
  .card-stills img { max-width: 100% !important; height: auto !important; }
}

/* =============================================
   MOBILE — Larger video & photo media, legible text
   ============================================= */
@media (max-width: 680px){
  /* Make the section cards fill the width comfortably */
  .section-card{
    padding: clamp(18px, 4vw, 28px) !important;
  }

  /* Make embedded videos bigger */
  .work-detail-media .video-embed{
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 auto 12px auto !important;
  }
  .work-detail-media .video-embed iframe{
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 16 / 9 !important;
    border-radius: 6px;
  }

  /* Make photos larger and reduce empty space */
  .work-detail-media img,
  .card-stills img{
    width: 100% !important;
    height: auto !important;
    max-width: none !important;
    border-radius: 6px;
  }

  /* Improve text readability */
  .work-detail-copy{
    font-size: 1.05rem !important;
    line-height: 1.7 !important;
  }

  /* Add spacing between text and media */
  .work-detail{
    gap: 18px !important;
  }
}

/* ===== Fit all content neatly inside the white cards (no bleed/overflow) ===== */
.section-card{ overflow: hidden; }
.section-card img,
.section-card video,
.section-card iframe{ display:block; max-width:100%; width:100%; height:auto; }
.section-card .work-detail-media,
.section-card .work-detail-copy{ margin:0; }

/* Vimeo wrapper: force a clean responsive box that cannot exceed the card */
.work-detail-media{ position:relative; }
.work-detail-media .video-embed{ position:relative !important; width:100% !important; max-width:100% !important; height:auto !important; padding:0 !important; margin:0 !important; }
.work-detail-media .video-embed > div{ position:static !important; width:100% !important; max-width:100% !important; height:auto !important; padding:0 !important; }
.work-detail-media .video-embed::before{ content:""; display:block; padding-top:56.25%; }
.work-detail-media .video-embed iframe{ position:absolute !important; inset:0 !important; width:100% !important; height:100% !important; border:0; }

/* Stills and inline images: fill the available width but never spill out */
.work-detail-media img,
.card-stills img{ width:100% !important; max-width:100% !important; height:auto !important; display:block; }
}

/* --- MOBILE OVERRIDE (robust) — make embedded videos truly fill width --- */
@media (max-width: 720px){
  /* Ensure the card has comfortable padding and no side clipping */
  .wrap{ padding-left: 14px !important; padding-right: 14px !important; }
  .section-card{ width:100% !important; padding: clamp(12px, 3.5vw, 18px) !important; }

  /* Kill Vimeo's nested padding box & absolute iframe sizing */
  .work-detail-media .video-embed{
    position: relative !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    padding: 0 !important;
  }

  .work-detail-media .video-embed > div{
    position: static !important;   /* was relative: make it static so iframe anchors to .video-embed */
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    padding: 0 !important;
  }
  /* Remove unwanted vertical gaps around videos */
  .video-embed {
      margin: 0 !important;
      padding: 0 !important;
      border: none !important;
  }

  .video-embed iframe {
      display: block;
      width: 100%;
      height: 50%;
      margin: 0;
      padding: 0;
  }
  /* Use a clean 16:9 canvas */
  .work-detail-media .video-embed::before{
    content:"";
    display:block;
    padding-top: 62.5%; /* 16:10 — a bit taller to fill the box */
  }

  /* Now absolutely place the iframe inside that canvas */
  .work-detail-media .video-embed iframe{
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 80% !important;
    border: 0;
  }

  /* Photos: make big and edge-to-edge inside the card */
  .work-detail-media img,
  .card-stills img{
    width: 100% !important;
    height: auto !important;
    max-width: none !important;
  }

  /* Improve copy legibility on phones */
  .work-detail-copy{
    font-size: 1.06rem !important;
    line-height: 1.7 !important;
  }

  /* Slightly bigger gap between media and text */
  .work-detail{ gap: 12px !important; }

  /* =============================================
     MOBILE — widen text, video, and photos by ~30%
     ============================================= */
  .section-card{ padding: clamp(14px, 4.5vw, 24px) !important; }

  .work-detail-media .video-embed,
  .work-detail-media .video-embed iframe,
  .work-detail-media img,
  .card-stills img,
  .work-detail-copy{
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
  }

  .work-detail-copy{
    font-size: 1.1rem !important;
    line-height: 1.75 !important;
  }
}

  /* Make stills tiles taller so they fill more of the card */
  .card-stills img{
    aspect-ratio: 4 / 3 !important; /* taller than 3:2, fills box more */
    object-fit: cover !important;   /* no distortion, no bleed */
  }

#tokito .work-detail,
#tanagokoro .work-detail,
#kijishi .work-detail,
#somamichi .work-detail,
#hokkaido .work-detail,
#arsnova .work-detail {
  display: grid;
  grid-template-columns: 1.25fr 0.75fr;
  gap: var(--space-3);
  align-items: start;
  height: 100%;
}

@media (max-width: 900px) {
  #tokito .work-detail,
  #tanagokoro .work-detail,
  #kijishi .work-detail,
  #somamichi .work-detail,
  #hokkaido .work-detail,
  #arsnova .work-detail {
    grid-template-columns: 1fr;
    gap: clamp(10px, 2vw, 16px);
  }
}

/* =============================================================
   MOBILE — Remove grid restrictions inside WORKS cards
   (keeps ABOUT custom grid; only targets work sections)
   ============================================================= */
@media (max-width: 900px){
  /* Make the white cards simple block containers on mobile */
  #tokito .section-card,
  #tanagokoro .section-card,
  #kijishi .section-card,
  #somamichi .section-card,
  #hokkaido .section-card,
  #arsnova .section-card{
    display: block !important;   /* drop any grid on the card itself */
  }

  /* Turn off the grid inside work-detail and let content flow top-to-bottom */
  #tokito .work-detail,
  #tanagokoro .work-detail,
  #kijishi .work-detail,
  #somamichi .work-detail,
  #hokkaido .work-detail,
  #arsnova .work-detail{
    display: block !important;   /* no CSS Grid */
  }

  /* Each block takes full width of the card, in order: video -> text -> photos */
  #tokito .work-detail-media,
  #tanagokoro .work-detail-media,
  #kijishi .work-detail-media,
  #somamichi .work-detail-media,
  #hokkaido .work-detail-media,
  #arsnova .work-detail-media,
  #tokito .work-detail-copy,
  #tanagokoro .work-detail-copy,
  #kijishi .work-detail-copy,
  #somamichi .work-detail-copy,
  #hokkaido .work-detail-copy,
  #arsnova .work-detail-copy,
  #tokito .card-stills,
  #tanagokoro .card-stills,
  #kijishi .card-stills,
  #somamichi .card-stills,
  #hokkaido .card-stills,
  #arsnova .card-stills{
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  /* Keep the responsive video canvas intact */
  .work-detail-media .video-embed{ position: relative !important; }
  .work-detail-media .video-embed::before{ content:""; display:block; padding-top:56.25%; }
  .work-detail-media .video-embed iframe{ position:absolute !important; inset:0 !important; width:100% !important; height:100% !important; border:0; }

  /* Comfortable spacing between blocks */
  #tokito .work-detail > *,
  #tanagokoro .work-detail > *,
  #kijishi .work-detail > *,
  #somamichi .work-detail > *,
  #hokkaido .work-detail > *,
  #arsnova .work-detail > *{
    margin-top: 14px !important;
  }
  #tokito .work-detail > *:first-child,
  #tanagokoro .work-detail > *:first-child,
  #kijishi .work-detail > *:first-child,
  #somamichi .work-detail > *:first-child,
  #hokkaido .work-detail > *:first-child,
  #arsnova .work-detail > *:first-child{
    margin-top: 0 !important;
  }
}


/* === MOBILE: Shrink hero Top.jpg image height by 40% === */
@media (max-width: 720px) {
  .hero-photo {
    height: 40vh !important; /* reduce from ~68vh to ~40vh (≈40% smaller) */
    object-fit: cover !important;
  }
}

/* ==================================================================
   MOBILE (≤768px) — unify Works cards like Contact and fix inner fit
   ================================================================== */
@media (max-width: 768px){
  /* Consistent outer gutter and card padding (subtle border) */
  .wrap{ padding-left: 14px !important; padding-right: 14px !important; }

  /* Make every Works card behave like Contact on mobile */
  #tokito .section-card,
  #tanagokoro .section-card,
  #kijishi .section-card,
  #somamichi .section-card,
  #hokkaido .section-card,
  #arsnova .section-card{
    padding: 14px 14px 18px !important;  /* same inner border */
    overflow: hidden !important;         /* no bleed */
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  /* Drop any grid in the works content and stack cleanly */
  #tokito .work-detail,
  #tanagokoro .work-detail,
  #kijishi .work-detail,
  #somamichi .work-detail,
  #hokkaido .work-detail,
  #arsnova .work-detail{
    display: block !important;
    grid-template-columns: 1fr !important; /* neutralize older rules */
    grid-template-areas: unset !important;
  }

  /* Order: video → text → photos (mobile only) */
  #tokito .work-detail-media,  #tokito .work-detail-copy,  #tokito .card-stills,
  #tanagokoro .work-detail-media,  #tanagokoro .work-detail-copy,  #tanagokoro .card-stills,
  #kijishi .work-detail-media,  #kijishi .work-detail-copy,  #kijishi .card-stills,
  #somamichi .work-detail-media,  #somamichi .work-detail-copy,  #somamichi .card-stills,
  #hokkaido .work-detail-media,  #hokkaido .work-detail-copy,  #hokkaido .card-stills,
  #arsnova .work-detail-media,  #arsnova .work-detail-copy,  #arsnova .card-stills{
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
  }
  /* compact, even spacing between blocks */
  #tokito .work-detail > *,
  #tanagokoro .work-detail > *,
  #kijishi .work-detail > *,
  #somamichi .work-detail > *,
  #hokkaido .work-detail > *,
  #arsnova .work-detail > *{ margin-top: 12px !important; }
  #tokito .work-detail > *:first-child,
  #tanagokoro .work-detail > *:first-child,
  #kijishi .work-detail > *:first-child,
  #somamichi .work-detail > *:first-child,
  #hokkaido .work-detail > *:first-child,
  #arsnova .work-detail > *:first-child{ margin-top: 0 !important; }

  /* Vimeo: clean 16:9 box that fills the card width */
  #tokito .work-detail-media .video-embed,
  #tanagokoro .work-detail-media .video-embed,
  #kijishi .work-detail-media .video-embed,
  #somamichi .work-detail-media .video-embed,
  #hokkaido .work-detail-media .video-embed,
  #arsnova .work-detail-media .video-embed{
    position: relative !important;
    padding: 0 !important;
    margin: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
  }
  /* kill nested padding box */
  #tokito .work-detail-media .video-embed > div,
  #tanagokoro .work-detail-media .video-embed > div,
  #kijishi .work-detail-media .video-embed > div,
  #somamichi .work-detail-media .video-embed > div,
  #hokkaido .work-detail-media .video-embed > div,
  #arsnova .work-detail-media .video-embed > div{
    position: static !important;
    padding: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
  }
  /* create the video canvas */
  #tokito .work-detail-media .video-embed::before,
  #tanagokoro .work-detail-media .video-embed::before,
  #kijishi .work-detail-media .video-embed::before,
  #somamichi .work-detail-media .video-embed::before,
  #hokkaido .work-detail-media .video-embed::before,
  #arsnova .work-detail-media .video-embed::before{
    content: "";
    display: block;
    padding-top: 56.25%; /* 16:9 */
  }
  /* place the iframe inside */
  #tokito .work-detail-media .video-embed iframe,
  #tanagokoro .work-detail-media .video-embed iframe,
  #kijishi .work-detail-media .video-embed iframe,
  #somamichi .work-detail-media .video-embed iframe,
  #hokkaido .work-detail-media .video-embed iframe,
  #arsnova .work-detail-media .video-embed iframe{
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    border: 0 !important;
    display: block !important;
  }

  /* Images: fill card width, no overflow */
  #tokito .work-detail-media img,  #tokito .card-stills img,
  #tanagokoro .work-detail-media img,  #tanagokoro .card-stills img,
  #kijishi .work-detail-media img,  #kijishi .card-stills img,
  #somamichi .work-detail-media img,  #somamichi .card-stills img,
  #hokkaido .work-detail-media img,  #hokkaido .card-stills img,
  #arsnova .work-detail-media img,  #arsnova .card-stills img{
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    display: block !important;
  }
}

/* ==============================
   Mobile Gallery – Smaller Thumbnails
   ============================== */
@media (max-width: 768px) {
  .gallery-grid {
    grid-template-columns: 1fr !important;
    gap: 4px !important;
    padding: 4px !important;
  }
  .gallery-thumb img {
    width: 90% !important; /* shrink slightly to create border */
    margin: 0 auto !important;
    border: 1px solid rgba(0, 0, 0, 0.15);
    display: block;
  }
}
/* ==============================
   MOBILE GALLERY FIX — Full Image Display
   ============================== */
@media (max-width: 768px) {
  .gallery-grid {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 6px !important;
    padding: 6px !important;
  }

  .gallery-thumb {
    border: 1px solid rgba(0, 0, 0, 0.1);
    overflow: visible !important;
    background: #fff;
    padding: 2px;
  }

  .gallery-thumb img {
    display: block;
    width: 100% !important;
    height: auto !important;
    object-fit: contain !important;
  }
}

/* =============================================================
   GALLERY — Mobile fit: respect screen borders, no overflow
   ============================================================= */
@media (max-width: 768px){
  /* Ensure the gallery page has a consistent mobile gutter */
  body.gallery-page .wrap{
    padding-left: 14px !important;
    padding-right: 14px !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  /* Single column, full-width grid inside the gutter */
  body.gallery-page .gallery-grid{
    grid-template-columns: 1fr !important;
    gap: 6px !important;
    width: 100% !important;
    margin: 0 !important;
  }

  /* Thumbs must not exceed the grid width */
  body.gallery-page .gallery-thumb{
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    border: 0px solid rgba(0,0,0,0.12);
    padding: 0px;
    box-sizing: border-box;
  }

  /* Show the whole image without cropping, and never overflow */
  body.gallery-page .gallery-thumb img{
    display: block !important;
    width: 100% !important;      /* override earlier 90% rule */
    max-width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
    margin: 0 !important;
  }
}

/* =============================================================
   FINAL MOBILE VIDEO FIX v2 — Remove extra padding and top gap
   ============================================================= */
@media (max-width: 768px){
  .work-detail-media .video-embed,
  .video-embed {
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
    width: 100% !important;
    max-width: 100% !important;
    position: relative !important;
  }

  .work-detail-media .video-embed > div,
  .video-embed > div {
    position: static !important;
    padding: 0 !important;
    margin: 0 !important;
    height: auto !important;
  }

  .work-detail-media .video-embed::before,
  .video-embed::before {
    display: none !important;
  }

  .work-detail-media .video-embed iframe,
  .video-embed iframe {
    position: static !important;
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 16 / 9 !important;
    margin: 0 !important;
    border: 0 !important;
    display: block !important;
  }
}