@import url('./variant-collapsible-menu.css');

@font-face{
  font-family:'Catamaran';font-style:normal;font-weight:400;font-display:swap;
  src:url('../fonts/catamaran-latin-400.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:'Catamaran';font-style:normal;font-weight:400;font-display:swap;
  src:url('../fonts/catamaran-latin-ext-400.woff2') format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face{
  font-family:'Lato';font-style:normal;font-weight:400;font-display:swap;
  src:url('../fonts/lato-latin-400.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:'Lato';font-style:normal;font-weight:400;font-display:swap;
  src:url('../fonts/lato-latin-ext-400.woff2') format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face{
  font-family:'Merriweather';font-style:normal;font-weight:400;font-display:swap;
  src:url('../fonts/merriweather-latin-400.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:'Merriweather';font-style:normal;font-weight:400;font-display:swap;
  src:url('../fonts/merriweather-latin-ext-400.woff2') format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

:root{
  --bg:#fbfbfd;
  --fg:#111315;
  --muted:#6b7177;
  --link:#111315;
  --gap:16px;
  --sidebar-w:260px;
  --sidebar-pad:36px;
  --sidebar-top-pad:132px;
  --brand-pad:56px;
  --menu-block-offset:34px;
  --brand-size:2.6rem;
  --menu-item-left:22px;
  --submenu-indent:34px;
  --menu-gap:18px;
  --submenu-vpad:8px;

  --font-ui:"Catamaran",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --font-display:"Merriweather",Georgia,Cambria,"Times New Roman",serif;
  --font-prose:"Lato",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --border:#e7e9ee;
  --surface:var(--bg);

  /* Content width (fluid on large screens) */
  --content-max:1200px;

  /* Global vertical rhythm */
  --page-pad-top: clamp(22px, 4.2vw, 54px);
  --page-pad-bottom: clamp(28px, 5.5vw, 70px);
  --footer-pad-y: clamp(22px, 4vw, 36px);
  --footer-mt: clamp(36px, 6vh, 80px);
}

/* Freeze UI interactions during JS/data hydration */
html[data-ui-loading],
html[data-ui-loading] *{
  cursor:wait !important;
}
.ui-loading-overlay{
  position:fixed;
  inset:0;
  z-index:100000;
  background:transparent;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  background:var(--bg);
  color:var(--fg);
  font-family:var(--font-ui);
  line-height:1.7;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}
a{color:inherit;text-decoration:none}
a:hover{opacity:.85}

figure{margin:0}

.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* Layout shell */
header.site-header{
  position:fixed;
  top:0;
  left:0;
  bottom:0;
  width:var(--sidebar-w);
  background:transparent;
  z-index:50;
  display:flex;
  align-items:flex-start;
}
header.site-header .sidebar{
  width:100%;
  padding:var(--sidebar-top-pad) var(--sidebar-pad) 24px;
  display:flex;
  flex-direction:column;
  justify-content:flex-start;
}
.brand{
  font-family:var(--font-display);
  font-size:var(--brand-size);
  font-weight:400;
  text-transform:lowercase;
  letter-spacing:0.08em;
  line-height:1;
  margin:0;
  padding-left:var(--brand-pad);
}
.brand-tagline{
  font-family:var(--font-ui);
  font-size:0.76rem;
  font-weight:400;
  color:var(--fg);opacity:0.75;
  letter-spacing:0.06em;
  text-transform:lowercase;
  padding-left:var(--brand-pad);
  margin:5px 0 26px;
  line-height:1.3;
}

/* Reference-like sidebar menu (nested tree always visible on desktop) */
header.site-header nav{padding-left:var(--menu-block-offset)}

#main-menu.sm{width:100%;margin:0;padding:0;list-style:none;font-family:var(--font-ui);font-size:16px;line-height:1.5;letter-spacing:0.012em}
#main-menu.sm ul{margin:0;padding:0;list-style:none}
#main-menu.sm a{color:var(--fg);text-decoration:none;text-transform:lowercase;display:block}
#main-menu.sm a.no-nav{cursor:default}

#main-menu.sm > li > a{padding:10px 14px 10px var(--menu-item-left);line-height:1.4;font-weight:400;border-radius:6px;text-align:left}
#main-menu.sm > li + li{margin-top:var(--menu-gap)}

/* subtrees always visible (desktop) */
#main-menu.sm ul{display:block}
#main-menu.sm ul li a{display:block;padding:var(--submenu-vpad) 12px; padding-left:var(--submenu-indent);font-weight:400;border-radius:4px;text-align:left;font-size:0.92rem;line-height:1.5}

/* visually nest Stories / Photo reportages a bit more (reference) */
#main-menu.sm a[href$="/stories/"],
#main-menu.sm a[href$="/photo-reportages/"]{
  font-size:0.88rem !important;
  font-weight:400;
  letter-spacing:0.012em;
}

/* Active link */
#main-menu.sm a.current{text-decoration:underline;font-weight:400;opacity:1}

#main-menu.sm a:hover{background:rgba(0,0,0,.03)}
#main-menu.sm a.no-nav:hover{background:transparent}

main{
  padding:var(--page-pad-top) 0 var(--page-pad-bottom);
  min-height:100dvh;
}

/* Home: don't force 100vh + footer (avoids scrollbars) */
html[data-page="home"] main{min-height:auto}
html[data-page="home"] main{padding-top:0;padding-bottom:0}
html[data-page="home"] footer{margin-top:18px;padding:18px 0}

/* Contact / 404: content is a single short block -- center it in the viewport instead
   of pinning the title to the top with a large empty gap above the footer. */
html[data-page="contact"] main,
html[data-page="404"] main{
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
}
html[data-page="404"] main{
  text-align:center;
}

/* Desktop content offset so it doesn't sit beneath sidebar */
html:not([data-page^="viewer:"]) body main{
  padding-left:calc(var(--sidebar-w) + var(--gap));
  padding-right:var(--gap);
}

.container{
  max-width:min(var(--content-max), 100%);
  margin:0;
  padding-inline:var(--gap);
}

/* Let non-prose pages breathe on wide screens */
@media (min-width: 1400px){
  :root{--content-max:1600px}
}

footer{
  color:var(--muted);
  font-size:0.7rem;
  letter-spacing:0.04em;
  padding:var(--footer-pad-y) 0;
  margin-top:var(--footer-mt);
}

footer .container{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:4px;
}

.footer-line{
  display:flex;
  align-items:center;
  gap:6px;
  line-height:1.2;
}

.footer-line--name{gap:3px}

.footer-copy-mark{
  display:inline-block;
  line-height:1;
  transform:translateY(0.08em);
}

.footer-text{display:inline}
.footer-text--name{font-weight:400;letter-spacing:0.06em}

.footer-line--legal{margin-top:2px}
.footer-legal-link{
  font-size:0.62rem;
  letter-spacing:0.04em;
  color:var(--muted);
  text-transform:lowercase;
  text-decoration:none;
}
.footer-legal-link:hover{text-decoration:underline}

.footer-ig{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  margin-left:0;
  color:var(--fg);
  text-decoration:none;
}
.footer-ig__icon{width:2.15em;height:2.15em;display:block}
.footer-ig:hover{opacity:.75}
.footer-ig:focus-visible{outline:2px solid rgba(17,19,21,0.18);outline-offset:3px;border-radius:4px}

/* Desktop: keep footer in the sidebar like the reference */
@media (min-width: 901px){
  html:not([data-page^="viewer:"]) body footer{
    position:fixed;
    left:0;
    bottom:28px;
    width:var(--sidebar-w);
    z-index:60;
    margin:0;
    padding:0;
    background:transparent;
  }
  html:not([data-page^="viewer:"]) body footer .container{
    max-width:none;
    margin:0;
    padding:0;
    padding-left:calc(var(--sidebar-pad) + var(--menu-block-offset) + var(--menu-item-left));
    padding-right:0;
  }
}

/* Laptop heights: compact menu rhythm without changing centered placement */
@media (min-width: 901px) and (max-height: 900px){
  :root{
    --sidebar-top-pad:96px;
    --sidebar-pad:28px;
    --brand-pad:48px;
    --menu-block-offset:26px;
    --brand-size:2.25rem;
    --menu-item-left:16px;
    --submenu-indent:26px;
    --menu-gap:8px;
    --submenu-vpad:4px;
  }

  .brand-tagline{
    margin:4px 0 14px;
    font-size:0.7rem;
  }

  #main-menu.sm{
    font-size:15px;
    line-height:1.35;
  }

  #main-menu.sm > li > a{
    padding:7px 12px 7px var(--menu-item-left);
  }

  #main-menu.sm ul li a{
    font-size:0.86rem;
    line-height:1.35;
  }

  #main-menu.sm a[href$="/stories/"],
  #main-menu.sm a[href$="/photo-reportages/"]{
    font-size:0.83rem !important;
  }
}

/* Cards grid (films/videos listings) */
.cards{
  display:grid;
  /* Fluid responsive: columns adapt continuously to viewport width */
  --card-min: clamp(220px, 26vw, 360px);
  --card-gap: clamp(14px, 1.6vw, 24px);
  grid-template-columns:repeat(auto-fit, minmax(var(--card-min), 1fr));
  gap:var(--card-gap);
  align-items:start;
}
.card{
  display:block;
  font-family:var(--font-prose);
  border-radius:0;
  overflow:hidden;
  background:transparent;
  border:1px solid transparent;
  transition:transform .12s ease, box-shadow .12s ease, border-color .12s ease;
}
.card:hover{transform:translateY(-2px);box-shadow:0 18px 40px rgba(17,19,21,0.08);border-color:rgba(17,19,21,0.08)}
.card:focus-visible{outline:3px solid rgba(17,19,21,0.12);outline-offset:4px}
.card-thumb{width:100%;aspect-ratio:16/9;object-fit:cover;display:block;background:#fff}
.card .pad{padding:14px 18px}
.card h3{font-family:var(--font-prose);font-weight:400;letter-spacing:0.005em;margin:0 0 6px 0;line-height:1.15;color:var(--fg);text-align:center}
.card-year{font-family:var(--font-prose);font-size:0.8rem;font-weight:400;letter-spacing:0.012em;color:var(--fg)}
.card-excerpt{margin:10px 0 0 0;color:var(--fg);font-size:0.875rem;font-weight:400;line-height:1.35;letter-spacing:0.012em;text-align:justify;hyphens:none;overflow-wrap:normal;word-break:normal;white-space:normal}
.card-meta{display:flex;align-items:center;flex-wrap:wrap;gap:8px;margin-top:10px;justify-content:center}
.badges{display:flex;gap:6px;flex-wrap:wrap}
.badge{
  font-size:11px;
  text-transform:uppercase;
  letter-spacing:0.08em;
  color:var(--fg);
  background:transparent;
  border:1px solid rgba(17,19,21,0.12);
  border-radius:999px;
  padding:2px 8px;
}

.back-link{display:inline-block;margin:10px 0 6px 0;color:var(--muted);text-transform:lowercase;font-weight:400}
.back-link:hover{color:var(--fg)}

/* Player page (films/videos) */
.player{position:relative;padding-top:56.25%;background:#000;margin-bottom:16px;border-radius:0;overflow:hidden}
.player iframe{position:absolute;inset:0;width:100%;height:100%;border:0}

.player-consent-gate{
  position:absolute;inset:0;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:16px;padding:24px;text-align:center;
  background:#0a0a0a;
}
.player-consent-gate__play{
  appearance:none;border:1px solid rgba(255,255,255,0.35);background:rgba(255,255,255,0.06);
  color:#fff;width:64px;height:64px;border-radius:999px;cursor:pointer;
  display:flex;align-items:center;justify-content:center;transition:background .15s ease,transform .15s ease;
}
.player-consent-gate__play .viewer-icon{width:26px;height:26px;transform:translateX(2px)}
.player-consent-gate__play:hover{background:rgba(255,255,255,0.14);transform:scale(1.05)}
.player-consent-gate__play:focus-visible{outline:3px solid rgba(255,255,255,0.5);outline-offset:3px}
.player-consent-gate__text{
  margin:0;max-width:44ch;color:rgba(255,255,255,0.72);
  font-family:var(--font-prose);font-size:0.82rem;line-height:1.5;
}
html[data-page="film-player"] #meta,
html[data-page="video-player"] #meta{
  font-family:var(--font-prose);
  font-size:1rem;
  line-height:1.55;
  letter-spacing:normal;
  color:var(--fg);
  margin:0;
}
html[data-page="film-player"] #desc.prose,
html[data-page="video-player"] #desc.prose{
  padding-top:0;
  margin-top:6px;
}
html[data-page="film-player"] #desc.prose p:first-child,
html[data-page="video-player"] #desc.prose p:first-child{margin-top:0}

/* Make our lang buttons match reference more closely */
.lang-switch{display:flex;gap:8px;align-items:center;margin:8px 0;flex-wrap:wrap}
.lang-btn{
  appearance:none;
  border:1px solid var(--border);
  background:transparent;
  color:var(--fg);
  padding:6px 10px;
  border-radius:999px;
  font-size:.9rem;
  cursor:pointer;
  transition:all .12s ease;
}
.lang-btn:hover{background:rgba(0,0,0,0.03);transform:translateY(-1px)}
.lang-btn:focus{outline:3px solid rgba(17,19,21,0.08);outline-offset:2px}
.lang-btn--active, .lang-btn[aria-pressed="true"]{background:var(--fg);color:var(--surface);border-color:var(--fg);box-shadow:0 4px 10px rgba(16,18,20,0.06);transform:none}


/* Landing */
.hero-center{
  padding-top:24px;
  margin-left:auto;
  margin-right:auto;
  text-align:center;
}
/* Home: own vertical rhythm (not tied to sidebar items) */
html[data-page="home"] .hero-center{
  padding-top:clamp(14px, 3vh, 40px);
  padding-bottom:clamp(10px, 2vh, 24px);
}
.home-stack{
  display:flex;
  flex-direction:column;
  align-items:center;
}
.hero-center .muted{margin:6px 0 0}
.home-name{
  font-family:var(--font-display);
  font-size:var(--brand-size);
  font-weight:400;
  text-transform:lowercase;
  letter-spacing:0.04em;
  line-height:1;
  margin:0;
}

.home-feature{
  display:none;
  width:fit-content;
  max-width:100%;
  margin:8px auto 0;
  color:inherit;
  text-decoration:none;
  text-align:center;
}
.home-feature.is-ready{display:block}
.home-feature-media{
  display:inline-block;
  position:relative;
  height:min(65dvh, 700px);
  aspect-ratio: 3 / 2;
  width:auto;
  background:#000;
  overflow:hidden;
  border-radius:2px;
}
.home-feature-img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:contain;
  background:#000;
  opacity:0;
  transition:opacity 1.15s ease;
}
.home-feature-img.is-visible{opacity:1}

.home-feature-caption{
  margin-top:4px;
  font-size:0.78rem;
  font-weight:400;
  letter-spacing:0.06em;
  color:var(--fg);
  text-transform:none;
}
.home-feature:hover .home-feature-caption{text-decoration:underline}
.home-feature:focus{outline:3px solid rgba(17,19,21,0.10);outline-offset:3px}

@media (max-width: 900px){
  .home-feature-media{height:min(50dvh, calc(100dvh - 240px), 420px)}
}

@media (min-width: 901px){
  .home-feature-media{height:min(65dvh, calc(100dvh - 200px), 700px)}
}

@media (prefers-reduced-motion: reduce){
  .home-feature-img{transition:none}
}
.muted{color:var(--muted)}

/* Prose blocks */
.prose{
  font-family:var(--font-prose);
  max-width:850px;
  margin:0;
  text-align:left;
  padding-top:24px;
}

/* About page: bio + photo side-by-side */
.about-intro{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:clamp(20px, 3.8vw, 44px);
  align-items:stretch;
  max-width:min(920px, 100%);
  margin:0 auto;
  margin-bottom:clamp(8px, 1.4vw, 16px);
}

/* Let the About intro use the full container width */
.about-intro .prose{max-width:none;padding-top:0}

/* Align first line of bio text with photo top edge */
.about-bio p:first-child{margin-top:0}

/* Keep paragraph rhythm tight when bio is vertically centered */
.about-bio p{margin:0;width:100%}

/* Justify About bio paragraph text; reduce size */
.about-bio{
  text-align:justify;
  text-justify:inter-word;
  hyphens:none;
  overflow-wrap:break-word;
  text-wrap:pretty;
  font-size:clamp(0.78rem, 0.12vw + 0.75rem, 0.86rem);
  line-height:1.5;
  width:min(41ch, 100%);
  max-width:41ch;
  margin:0;
  padding:0;
  min-height:0;
  height:auto;
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:stretch;
  justify-self:end;
  align-self:start;
}

.about-details{
  max-width:min(1080px, 100%);
  margin:0 auto;
  padding-top:0;
}

.about-photo{
  margin:0;
  border-radius:10px;
  overflow:hidden;
  border:1px solid var(--border);
  background:var(--surface);
  width:min(220px, 100%);
  max-width:220px;
  justify-self:start;
  align-self:start;
  min-height:0;
}
.about-photo img{
  display:block;
  width:100%;
  height:auto;
  object-fit:contain;
}

@media (min-width: 901px){
  .about-intro{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
}

/* Story/reportage intro text blocks */
.story-prose{font-family:var(--font-prose);font-size:1.02rem;line-height:1.75;color:#222}
.story-prose p{margin:.9em 0}
.story-prose hr{border:0;border-top:1px solid var(--border);margin:1.2em 0}

/* Gallery pages: hide prose (requested) */
html[data-page^="gallery:"] .story-prose{display:none}

/* Hide generic top page titles site-wide, except on gallery and media player pages */
html[data-page]:not([data-page="film-player"]):not([data-page="video-player"]):not([data-page="404"]):not([data-page^="gallery:"]) .page-title{display:none}

/* Page titles match reference heading sizing */
.page-title{
  font-family:var(--font-ui);
  font-weight:400;
  font-size:calc(1rem * 2.2);
  line-height:1.1;
  margin:clamp(10px, 1.8vw, 22px) 0 clamp(18px, 2.8vw, 34px);
  letter-spacing:-0.02em;
  text-transform:capitalize;
  text-align:center;
}

/* Player titles come from data; keep their original casing */
#title.page-title{ text-transform:none; }

.prose a{color:inherit;text-decoration:underline}
.prose h2,.prose h3,.prose h4{margin:1.2em 0 .6em;line-height:1.25}

/* ── About CV accordion ─────────────────────────────────────── */
.about-details .accordion-section{
  border-bottom:1px solid var(--border);
}
.about-details .accordion-section:last-child{border-bottom:none}

.about-details .accordion-section > summary{
  list-style:none;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  padding:20px 0;
  user-select:none;
  outline:none;
}
.about-details .accordion-section > summary::-webkit-details-marker{display:none}

.about-details .accordion-section > summary h2{
  margin:0;
  font-size:0.75rem;
  letter-spacing:0.16em;
  font-weight:400;
  text-transform:uppercase;
  color:var(--fg);
}

/* Chevron icon via CSS */
.about-details .accordion-section > summary::after{
  content:'';
  display:inline-block;
  flex-shrink:0;
  width:8px;
  height:8px;
  border-right:1.5px solid var(--fg);
  border-bottom:1.5px solid var(--fg);
  transform:rotate(45deg) translateY(-2px);
  transition:transform 0.22s ease;
}
.about-details .accordion-section[open] > summary::after{
  transform:rotate(-135deg) translateY(-2px);
}

.about-details .accordion-body{
  padding:0 0 28px 0;
}

/* Exhibition / Workshop items inside accordion */
.about-details .accordion-section .items > div{
  display:grid;
  grid-template-columns:1fr;
  padding:15px 0 15px 18px;
  border-bottom:1px solid var(--border);
  border-left:2px solid var(--border);
}
.about-details .accordion-section .items > div:last-child{border-bottom:none}

.about-details .item-title{
  font-size:0.75rem;
  text-transform:uppercase;
  letter-spacing:0.07em;
  color:var(--muted);
  font-weight:400;
  margin-bottom:5px;
}
.about-details .item-year{
  font-size:0.75rem;
  letter-spacing:0.06em;
  color:var(--muted);
  font-weight:400;
  margin-bottom:4px;
}

/* ── Filmography film entries (static, no accordion) ───────── */
.about-details .accordion-body--films{
  padding-top:4px;
}
.about-details .film-entry{
  border-top:1px solid var(--border);
  padding:16px 0 6px;
}
.about-details .film-entry:first-child{border-top:none}

.about-details .film-entry__header{
  display:grid;
  grid-template-rows:auto auto;
  gap:3px;
  margin-bottom:8px;
}

.about-details .film-title{
  font-size:0.92rem;
  font-weight:400;
  color:var(--fg);
  line-height:1.4;
}
.about-details .film-meta{
  font-size:0.78rem;
  color:var(--muted);
  letter-spacing:0.04em;
}

/* Festival/screening items within films */
.about-details .film-entry .items{
  padding:0 0 10px 16px;
  border-left:2px solid var(--border);
  margin-left:2px;
}
.about-details .film-entry .items > div{
  padding:8px 0;
  border-bottom:1px solid rgba(0,0,0,0.05);
  font-size:0.875rem;
  color:var(--muted);
}
.about-details .film-entry .items > div:last-child{border-bottom:none}

.about-details .item-note{
  font-size:0.82rem;
  color:var(--muted);
  font-style:italic;
  margin-bottom:4px;
}
.prose p{margin:.8em 0}
.prose ul,.prose ol{padding-left:1.2em;margin:.8em 0}
.prose li{margin:.3em 0}

/* Tearsheets */
.tearsheets-grid{
  display:grid;
  grid-template-columns:repeat(2, 1fr);
  gap:clamp(24px, 4vw, 48px);
  max-width:1200px;
  margin:0 auto;
  column-gap:0;
}
.tearsheets-grid > .tearsheet-item:nth-child(odd){
  padding-right:clamp(16px, 3vw, 40px);
  border-right:1px solid rgba(0,0,0,0.12);
}
.tearsheets-grid > .tearsheet-item:nth-child(even){
  padding-left:clamp(16px, 3vw, 40px);
}
.tearsheet-item{
  display:block;
  width:100%;
}
.tearsheet-item img{
  display:block;
  width:100%;
  height:auto;
  border-radius:4px;
  box-shadow:0 2px 12px rgba(0,0,0,0.08);
  transition:box-shadow 0.2s ease;
}
.tearsheet-item img:hover{
  box-shadow:0 4px 20px rgba(0,0,0,0.14);
}
.tearsheet-caption{
  margin-top:10px;
  margin-bottom:8px;
  font-size:.82rem;
  color:var(--fg, #1a1a1a);
  font-family:var(--font-prose);
  letter-spacing:0.08em;
  font-weight:400;
  text-align:center;
  text-transform:uppercase;
  opacity:0.65;
}

/* Contact: masked inline reveal (reference-like) */
.reveal-inline{display:inline-flex;align-items:center;gap:8px;justify-content:center;width:100%}
.reveal-inline__mask{font-family:var(--font-prose);letter-spacing:0.02em}
.reveal-inline__btn{appearance:none;border:1px solid var(--border);background:transparent;color:var(--fg);padding:6px 8px;border-radius:999px;font-size:.9rem;cursor:pointer}
.reveal-inline__btn:hover{background:rgba(0,0,0,0.03);transform:translateY(-1px)}
.reveal-inline__btn:focus{outline:3px solid rgba(17,19,21,0.08);outline-offset:2px}
.reveal-inline__link{color:var(--link);text-decoration:underline;font-family:var(--font-prose)}

/* Lists: exhibitions, workshops, filmography */
.items{display:grid;gap:0;max-width:900px}
.items > div{
  padding:18px 0;
  border-bottom:1px solid var(--border);
}
.items > div:last-child{
  border-bottom:none;
}
.item-title{font-weight:400;margin-bottom:6px}
.item-meta{color:var(--muted);font-size:0.92rem}

/* Reference-like section pages (Stories / Photo reportages): simple text links */
.section-links{max-width:850px}
.section-link{display:inline;color:inherit;text-decoration:none}
.section-link__title{font-weight:400}
.section-link__excerpt{color:var(--muted)}
.section-link:hover{text-decoration:underline;opacity:1}

/* Gallery masonry (CSS columns) */
.masonry{column-gap:var(--gap)}
@media (min-width: 320px){.masonry{column-count:1}}
@media (min-width: 700px){.masonry{column-count:2}}
@media (min-width: 1100px){.masonry{column-count:3}}
.masonry figure{break-inside:avoid;page-break-inside:avoid;margin:0 0 var(--gap)}
.masonry img{width:100%;height:auto;display:block}
.masonry figcaption{color:var(--muted);font-size:.9rem;margin-top:6px}

/* Masonry listing (Stories / Photo reportages section pages) */
.listing figure{border:1px solid var(--border);border-radius:0;overflow:hidden;background:transparent;transition:transform .12s ease, box-shadow .12s ease, border-color .12s ease}
.listing figure:hover{transform:translateY(-2px);box-shadow:0 18px 40px rgba(17,19,21,0.08);border-color:rgba(17,19,21,0.08)}
.listing a{display:block}
.listing .pad{padding:12px 10px}
.listing .title{font-family:var(--font-display);font-weight:400;letter-spacing:0.005em;margin:0 0 6px 0;line-height:1.15;color:var(--fg);text-align:center}
.listing .excerpt{margin:10px 0 0 0;color:var(--muted);font-size:0.875rem;font-weight:400;line-height:1.45;letter-spacing:0.012em;text-align:justify;hyphens:none;overflow-wrap:normal;word-break:normal}

/* Light deterrents against save (matches reference styling) */
img{-webkit-user-drag:none;-webkit-touch-callout:none;-webkit-user-select:none;user-select:none}
.no-context{position:relative}
.no-context::before{content:"";position:absolute;inset:0;pointer-events:none}

/* Gallery thumbnails */
.gallery-grid{
  display:grid;
  /* Fluidly responsive: adapts to viewport/container width without hard breakpoints */
  /* Smaller min tile enables more columns on large screens */
  --tile-gap: clamp(10px, 1.6vw, 18px);
  --tile-row: clamp(140px, 12vw, 230px);
  grid-template-columns:1fr;
  grid-auto-rows: var(--tile-row);
  grid-auto-flow: dense;
  gap:var(--tile-gap);
  max-width:min(1200px, 100%);
  margin:0 auto;
}

@media (min-width: 520px){
  .gallery-grid{grid-template-columns:repeat(2, minmax(0, 1fr))}
}

@media (min-width: 1100px){
  html[data-page^="gallery:"] .gallery-grid{
    grid-template-columns:repeat(3, minmax(0, 1fr));
    max-width:min(1320px, 100%);
  }
}

/* Each tile is the link; the image fills the tile */
.gallery-grid > a{
  display:block;
  position:relative;
  border:1px solid rgba(17,19,21,0.06);
  border-radius:0;
  overflow:hidden;
  background:#fff;
}
.gallery-grid > a:focus{outline:3px solid rgba(17,19,21,0.10);outline-offset:3px}

.gallery-grid .thumb{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

/* Intro text tile (acts like a thumb) */
.gallery-grid .thumb-text{
  width:100%;
  height:100%;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  justify-content:flex-start;
  gap:10px;
  padding:20px 0 20px 24px;
  background:#fff;
}
.gallery-grid .thumb-text__excerpt{
  font-family:var(--font-ui);
  font-size:.88rem;
  font-weight:400;
  line-height:1.55;
  letter-spacing:0.012em;
  color:var(--fg);
  width:100%;
  flex:1 1 auto;
  overflow:auto;
  word-break:normal;
  overflow-wrap:normal;
  hyphens:none;
  padding-right:16px;
}
.gallery-grid .thumb-text__title{
  text-align:center;
  text-align-last:center;
  font-weight:400;
  margin-bottom:0.25em;
}
.gallery-grid .thumb-text__year{
  text-align:center;
  text-align-last:center;
  opacity:0.65;
  margin-bottom:1em;
}
.gallery-grid .thumb-text__body{
  white-space:pre-wrap;
  text-align:justify;
}

/* Editorial asymmetry: promote a few images as "featured" tiles (desktop/tablet only). */
@media (min-width: 700px){
  html[data-page^="gallery:"] .gallery-grid > a:nth-child(7n + 1){
    grid-column: span 2;
    grid-row: span 2;
  }
  html[data-page^="gallery:"] .gallery-grid > a:nth-child(9n + 5){
    grid-column: span 2;
    grid-row: span 1;
  }
  html[data-page^="gallery:"] .gallery-grid > a:nth-child(11n + 8){
    grid-column: span 1;
    grid-row: span 2;
  }
}

/* Optional: restore the previous symmetrical grid layout.
   Usage: add data-gallery-layout="sym" on the <html> tag. */
html[data-gallery-layout="sym"] .gallery-grid{
  --tile-min: clamp(140px, 14vw, 220px);
  --tile-gap: clamp(8px, 1.2vw, 12px);
  grid-template-columns:repeat(auto-fit, minmax(var(--tile-min), 1fr));
  grid-auto-rows:auto;
  grid-auto-flow:row;
  gap:var(--tile-gap);
  max-width:min(1200px, 100%);
  margin:0;
}
html[data-gallery-layout="sym"] .gallery-grid > a{
  border:0;
  border-radius:0;
  overflow:visible;
  background:transparent;
}
html[data-gallery-layout="sym"] .gallery-grid .thumb{
  height:clamp(140px, 14vw, 220px);
  object-fit:contain;
  background:#fff;
  border:1px solid rgba(17,19,21,0.06);
}
@media (min-width: 700px){
  html[data-gallery-layout="sym"][data-page^="gallery:"] .gallery-grid > a:nth-child(7n + 1),
  html[data-gallery-layout="sym"][data-page^="gallery:"] .gallery-grid > a:nth-child(9n + 5),
  html[data-gallery-layout="sym"][data-page^="gallery:"] .gallery-grid > a:nth-child(11n + 8){
    grid-column:auto;
    grid-row:auto;
  }
}

/* Gallery pages: allow wider content so more columns fit on big screens */
html[data-page^="gallery:"] .container{max-width:1600px}
html[data-page^="gallery:"] .gallery-grid{max-width:none}
.gallery-title{
  font-family:var(--font-ui);
  font-weight:400;
  font-size:calc(1rem * 2.2);
  line-height:1.1;
  margin:clamp(10px, 1.8vw, 22px) 0 clamp(18px, 2.8vw, 34px);
  letter-spacing:-0.02em;
  text-transform:capitalize;
  text-align:center;
}

.gallery-title-play{
  appearance:none;
  border:1px solid rgba(17,19,21,0.12);
  background:transparent;
  color:inherit;
  padding:6px 10px;
  border-radius:999px;
  font-size:.9rem;
  cursor:pointer;
  text-transform:lowercase;
  white-space:nowrap;
  vertical-align:middle;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
}
.gallery-title-play:hover{background:rgba(17,19,21,0.04)}

/* Viewer */
body.viewer{background:#000;color:#fff}
.viewer-shell{
  min-height:100dvh;
  display:flex;
  flex-direction:column;
}
.viewer-top{
  position:sticky;
  top:0;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:10px var(--gap);
  background:#000;
  color:#fff;
  border-bottom:1px solid rgba(255,255,255,0.10);
  z-index:40;
  --viewer-side-w: clamp(120px, 16vw, 220px);
}
.viewer-left{display:flex;align-items:center;gap:10px;min-width:0;flex:0 0 var(--viewer-side-w)}
.viewer-back{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  font-weight:400;
  text-transform:lowercase;
  color:#fff;
}

.viewer-icon{width:24px;height:24px;display:block;flex:0 0 auto}

.viewer-play{
  appearance:none;
  border:1px solid rgba(255,255,255,0.22);
  background:transparent;
  color:#fff;
  padding:6px 10px;
  border-radius:999px;
  font-size:.9rem;
  cursor:pointer;
  text-transform:lowercase;
  white-space:nowrap;
  display:inline-flex;
  align-items:center;
  justify-content:center;
}
.viewer-play:hover{background:rgba(255,255,255,0.06)}
.viewer-play[aria-pressed="true"]{background:rgba(255,255,255,0.10);border-color:rgba(255,255,255,0.40)}
.viewer-play [data-icon="pause"]{display:none}
.viewer-play[aria-pressed="true"] [data-icon="play"]{display:none}
.viewer-play[aria-pressed="true"] [data-icon="pause"]{display:block}

.viewer-center{
  position:static;
  transform:none;
  flex:1;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  min-width:0;
}
.viewer-center-stack{
  display:flex;
  flex-direction:column;
  gap:6px;
  min-width:0;
  width:100%;
  max-width:1100px;
}
.viewer-right{display:flex;align-items:center;gap:10px;justify-content:flex-end;min-width:0;flex:0 0 var(--viewer-side-w)}

.viewer-mini-btn{
  appearance:none;
  border:1px solid rgba(255,255,255,0.22);
  background:transparent;
  color:#fff;
  width:42px;
  height:42px;
  border-radius:999px;
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  font-size:24px;
  line-height:1;
}
.viewer-mini-btn:hover{background:rgba(255,255,255,0.06)}
.viewer-mini-btn[disabled]{opacity:.35;cursor:default}
.viewer-counter{color:rgba(255,255,255,0.78);font-size:0.92rem;min-width:72px;text-align:right}

.viewer-share{
  appearance:none;
  border:1px solid rgba(255,255,255,0.22);
  background:transparent;
  color:#fff;
  padding:6px 10px;
  border-radius:999px;
  font-size:.9rem;
  cursor:pointer;
  text-transform:lowercase;
  white-space:nowrap;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
}
.viewer-share:hover{background:rgba(255,255,255,0.06)}

.viewer-toast{
  position:fixed;
  top:18px;
  left:50%;
  transform:translate(-50%,-8px);
  background:rgba(0,0,0,0.82);
  color:#fff;
  padding:10px 12px;
  border-radius:999px;
  font-size:.9rem;
  line-height:1;
  border:1px solid rgba(255,255,255,0.16);
  box-shadow:0 16px 40px rgba(0,0,0,0.55);
  opacity:0;
  pointer-events:none;
  transition:opacity .18s ease, transform .18s ease;
  z-index:9999;
}
.viewer-toast.is-on{opacity:1;transform:translate(-50%,0)}

/* Share popup (fallback when Web Share API isn't available) */
dialog.viewer-share-dialog{
  border:1px solid rgba(255,255,255,0.16);
  background:rgba(10,10,10,0.94);
  color:#fff;
  border-radius:14px;
  padding:16px;
  width:min(520px, calc(100% - 32px));
  box-shadow:0 24px 70px rgba(0,0,0,0.60);
}
dialog.viewer-share-dialog::backdrop{
  background:rgba(0,0,0,0.58);
}
.viewer-share-dialog__title{
  font-size:0.95rem;
  font-weight:400;
  margin:0 0 10px 0;
}
.viewer-share-dialog__row{margin:0 0 12px 0}
.viewer-share-dialog__input{
  width:100%;
  font:inherit;
  color:#fff;
  background:rgba(255,255,255,0.06);
  border:1px solid rgba(255,255,255,0.14);
  border-radius:10px;
  padding:10px 12px;
}
.viewer-share-dialog__actions{display:flex;gap:10px;justify-content:flex-end}
.viewer-share-dialog__btn{
  appearance:none;
  border:1px solid rgba(255,255,255,0.22);
  background:rgba(255,255,255,0.08);
  color:#fff;
  padding:8px 12px;
  border-radius:999px;
  cursor:pointer;
  font-size:0.9rem;
}
.viewer-share-dialog__btn:hover{background:rgba(255,255,255,0.12)}
.viewer-share-dialog__btn--secondary{background:transparent}
.viewer-share-dialog__btn--secondary:hover{background:rgba(255,255,255,0.06)}

.viewer-thumbs{
  display:flex;
  align-items:center;
  justify-content:flex-start;
  gap:12px;
  overflow-x:auto;
  overflow-y:hidden;
  overflow-anchor:none;
  scrollbar-width:none;
  -ms-overflow-style:none;
  padding:6px 33px;
  scroll-padding-left:33px;
  scroll-padding-right:33px;
}
.viewer-thumbs::-webkit-scrollbar{display:none}
.viewer-thumbs-spacer{flex:0 0 auto;width:0;height:1px;pointer-events:none}
.viewer-thumb{
  appearance:none;
  border:1px solid rgba(255,255,255,0.16);
  background:rgba(0,0,0,0.30);
  padding:0;
  border-radius:9px;
  width:48px;
  height:48px;
  overflow:hidden;
  cursor:pointer;
  flex:0 0 auto;
  position:relative;
  transform-origin:center;
  transition:transform .16s ease, border-color .16s ease, box-shadow .16s ease;
}
.viewer-thumb--text{
  display:flex;
  align-items:center;
  justify-content:center;
  font-family:var(--font-ui);
  font-size:0.95rem;
  font-weight:400;
  color:#fff;
}
.viewer-thumb.is-loading{
  border-color:rgba(255,255,255,0.28);
  background:rgba(255,255,255,0.08);
}
.viewer-thumb.is-loading img{opacity:0}
.viewer-thumb img{width:100%;height:100%;object-fit:cover;display:block}
.viewer-thumb.is-active{
  border-color:rgba(255,255,255,1);
  box-shadow:0 0 0 3px rgba(255,255,255,0.28), 0 10px 26px rgba(0,0,0,0.55);
  transform:scale(1.25);
  z-index:3;
}


.viewer-stage{
  flex:1;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:16px var(--gap);
  position:relative;
  background:#000;
  user-select:none;
}
.viewer-loading-overlay{
  position:absolute;
  inset:0;
  z-index:4;
  background:transparent;
  cursor:progress;
}
.viewer-img{
  max-height:calc(100dvh - 92px - 86px);
  max-width:min(1400px, 100%);
  width:auto;
  height:auto;
  object-fit:contain;
  transition:opacity .26s ease, transform .32s ease, filter .28s ease;
  opacity:1;
  transform:scale(1);
  filter:blur(0);
  user-select:none;
}
.viewer-img.is-switching{opacity:0;transform:scale(0.985);filter:blur(2px)}

.viewer-text{
  display:none;
  max-width:min(1300px, 100%);
  width:100%;
  max-height:100%;
  overflow:auto;
  font-family:var(--font-prose);
  font-size:0.82rem;
  font-weight:400;
  line-height:1.55;
  letter-spacing:0.012em;
  color:#fff;
  text-align:justify;
  text-align-last:left;
  hyphens:none;
  padding:clamp(10px, 2vw, 28px) clamp(60px, 10vw, 160px);
  user-select:text;
}
.viewer-text p{margin:0 0 1.3em 0}
.viewer-text p:last-child{margin-bottom:0}
.viewer-text-title{
  font-size:1.35rem;
  font-weight:400;
  text-align:center;
  text-align-last:center;
  letter-spacing:0.06em;
  line-height:1.2;
  margin:0 0 0.35em 0;
}
.viewer-text-year{
  font-size:0.78rem;
  font-weight:400;
  text-align:center;
  text-align-last:center;
  letter-spacing:0.08em;
  opacity:0.65;
  margin:0 0 2em 0;
}

/* Cursor zones for click navigation */
/* Custom SVG cursors (data URIs) */
.viewer-stage[data-zone="prev"]{cursor:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32'%3E%3Ccircle cx='16' cy='16' r='14' fill='rgba(0,0,0,0.55)' stroke='white' stroke-width='2'/%3E%3Cpath d='M18.5 9 L12 16 L18.5 23' fill='none' stroke='white' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") 16 16, w-resize}
.viewer-stage[data-zone="next"]{cursor:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32'%3E%3Ccircle cx='16' cy='16' r='14' fill='rgba(0,0,0,0.55)' stroke='white' stroke-width='2'/%3E%3Cpath d='M13.5 9 L20 16 L13.5 23' fill='none' stroke='white' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") 16 16, e-resize}
.viewer-stage[data-zone="gallery"]{cursor:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32'%3E%3Ccircle cx='16' cy='16' r='14' fill='rgba(0,0,0,0.55)' stroke='white' stroke-width='2'/%3E%3Cpath d='M22 14 a6 6 0 1 0 -2 7' fill='none' stroke='white' stroke-width='2.6' stroke-linecap='round'/%3E%3Cpath d='M19.5 19.5 L19.7 23 L23.1 22.2' fill='none' stroke='white' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") 16 16, pointer}

.viewer-caption{
  min-height:calc(1.55em * 3 + 24px);
  padding:14px clamp(60px, 10vw, 160px) 20px;
  color:#fff;
  font-family:var(--font-prose);
  font-size:0.82rem;
  font-weight:400;
  line-height:1.55;
  letter-spacing:0.012em;
  background:#000;
  display:flex;
  align-items:flex-start;
  justify-content:center;
  text-align:justify;
  text-align-last:left;
  hyphens:none;
}
.viewer-caption.is-empty{opacity:0}
.viewer-caption b,
.viewer-caption strong{font-weight:400}
.viewer-caption p{margin:0;max-width:min(1300px, 100%)}

/* Photo-reportages viewer should stay on white background. */
html[data-page="viewer:reportage"] body.viewer{
  background:var(--bg);
  color:var(--fg);
}
html[data-page="viewer:reportage"] .viewer-top{
  background:#fff;
  color:var(--fg);
  border-bottom:1px solid var(--border);
}
html[data-page="viewer:reportage"] .viewer-back,
html[data-page="viewer:reportage"] .viewer-counter{
  color:var(--fg);
}
html[data-page="viewer:reportage"] .viewer-play,
html[data-page="viewer:reportage"] .viewer-mini-btn,
html[data-page="viewer:reportage"] .viewer-share{
  border-color:rgba(17,19,21,0.22);
  color:var(--fg);
}
html[data-page="viewer:reportage"] .viewer-play:hover,
html[data-page="viewer:reportage"] .viewer-mini-btn:hover,
html[data-page="viewer:reportage"] .viewer-share:hover{
  background:rgba(17,19,21,0.06);
}
html[data-page="viewer:reportage"] .viewer-stage{
  background:#fff;
}
html[data-page="viewer:reportage"] .viewer-text{
  color:var(--fg);
}
html[data-page="viewer:reportage"] .viewer-caption{
  background:#fff;
  color:var(--fg);
  border-top:1px solid var(--border);
}
html[data-page="viewer:reportage"] .viewer-thumbs-wrapper{
  border-top:1px solid var(--border);
  background:#fbfbfd;
}
html[data-page="viewer:reportage"] .viewer-thumb{
  border-color:rgba(17,19,21,0.14);
}
html[data-page="viewer:reportage"] .viewer-thumb.is-active{
  border-color:rgba(17,19,21,0.95);
  box-shadow:0 0 0 3px rgba(17,19,21,0.16), 0 10px 26px rgba(17,19,21,0.22);
}

/* Mobile nav */
.topbar{
  display:none;
  position:sticky;
  top:0;
  z-index:60;
  background:rgba(255,255,255,0.9);
  backdrop-filter:saturate(160%) blur(10px);
  padding:10px 12px;
}
.topbar-row{display:flex;align-items:center;justify-content:space-between}
.hamburger{
  appearance:none;
  border:0;
  background:transparent;
  color:var(--fg);
  width:44px;
  height:44px;
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
}
.hamburger-lines{width:20px;height:14px;position:relative}
.hamburger-lines span{position:absolute;left:0;right:0;height:2px;background:var(--fg);border-radius:2px}
.hamburger-lines span:nth-child(1){top:0}
.hamburger-lines span:nth-child(2){top:6px}
.hamburger-lines span:nth-child(3){top:12px}

.mobile-panel{
  display:none;
  padding:12px 12px 18px 12px;
}
.mobile-panel.is-open{display:block}

/* Responsive switches */
@media (max-width: 900px){
  header.site-header{display:none}
  .topbar{display:block}
  .container{
    width:min(100%, 940px);
    margin:0 auto;
    padding-inline:16px;
  }

  body main.container,
  body footer .container{
    padding-left:var(--gap) !important;
    padding-right:var(--gap) !important;
  }

  html:not([data-page^="viewer:"]) body main,
  html:not([data-page^="viewer:"]) body footer{
    padding-left:var(--gap);
    padding-right:var(--gap);
  }

  html:not([data-page^="viewer:"]) body main{
    display:flex;
    flex-direction:column;
    align-items:center;
  }

  html:not([data-page^="viewer:"]) body main > *{
    width:100%;
  }

  .topbar{
    padding:12px 14px;
    border-bottom:1px solid rgba(17,19,21,0.08);
  }

  .topbar-row .brand{
    font-size:1.45rem !important;
    letter-spacing:0.06em;
  }

  .mobile-panel{
    padding:10px 6px 16px;
    border-top:1px solid rgba(17,19,21,0.08);
  }

  #main-menu.sm{
    font-size:1.02rem;
    line-height:1.45;
  }

  #main-menu.sm > li > a,
  #main-menu.sm ul li a{
    padding-top:10px;
    padding-bottom:10px;
  }

  .cards{
    --card-min: min(100%, 300px);
    --card-gap: 22px;
    width:100%;
    margin:0 auto;
  }

  .card .pad{
    padding:12px 10px;
  }

  .about-intro{
    grid-template-columns:1fr;
    gap:14px;
    justify-items:center;
    width:100%;
    max-width:min(360px, 100%);
  }

  .about-bio{
    width:min(42ch, 100%);
    max-width:min(42ch, 100%);
    font-size:0.8rem;
    line-height:1.48;
    margin:0 auto;
    min-height:0;
    display:block;
    justify-self:center;
  }

  .about-photo{
    width:min(220px, 100%);
    max-width:min(220px, 100%);
    margin:0 auto;
    justify-self:center;
    min-height:0;
  }

  .prose{
    max-width:100%;
    padding-top:14px;
    margin:0 auto;
  }

  .gallery-title,
  .page-title{
    font-size:clamp(1.45rem, 6vw, 2rem);
    letter-spacing:0;
  }

  .page-title,
  .gallery-title,
  .story-prose,
  .prose,
  .section-links,
  .items,
  .about-details,
  .about-details .film-entry,
  .about-details .film-entry .items,
  .listing,
  .tearsheets-grid,
  .reveal-inline{
    width:100%;
    max-width:100%;
  }

  .tearsheets-grid{
    grid-template-columns:1fr;
    column-gap:0;
  }

  .tearsheets-grid > .tearsheet-item:nth-child(odd),
  .tearsheets-grid > .tearsheet-item:nth-child(even){
    padding-left:0;
    padding-right:0;
    border-right:none;
  }

  .page-title,
  .gallery-title{
    text-align:center;
  }

  .prose,
  .story-prose,
  .section-link__excerpt,
  .card-excerpt,
  .listing .excerpt,
  .about-bio,
  .items,
  .item-meta,
  .item-title,
  .item-year,
  .film-title,
  .film-meta,
  .film-entry .items > div,
  .tearsheet-caption,
  .reveal-inline__mask,
  .reveal-inline__link{
    text-align:center;
  }

  .about-details .accordion-section > summary{
    justify-content:center;
  }

  .about-details .accordion-section > summary::after{
    margin-left:0;
  }

  .about-details .accordion-section .items > div,
  .about-details .film-entry .items > div{
    border-left:0;
    padding-left:0;
  }

  footer .container{
    width:100%;
    align-items:center;
    text-align:center;
  }

  .viewer-img{max-height:calc(100dvh - 92px - 90px)}

  .viewer-top{padding:10px 14px}
  .viewer-counter{min-width:62px}
  .viewer-thumb{width:45px;height:45px}
  .viewer-thumbs{padding:6px 27px;scroll-padding-left:27px;scroll-padding-right:27px}
  .viewer-top{--viewer-side-w: clamp(90px, 18vw, 140px)}
  .viewer-center-stack{max-width:900px}

  /* Mobile: move hamburger to top-left, keep brand (+ tagline) centered and stacked */
  .topbar-row{position:relative;justify-content:center;flex-direction:column;gap:2px}
  .topbar-row .brand{margin:0 auto;padding-left:0}
  .topbar-row .brand-tagline{
    padding-left:0;
    margin:0;
    text-align:center;
    font-size:0.68rem;
  }
  .hamburger{position:absolute;left:0;top:0}

  html[data-page="home"] body main.container,
  html[data-page="home"] body footer .container{
    padding-left:14px !important;
    padding-right:14px !important;
  }

  html[data-page="home"] .home-stack{
    width:100%;
    align-items:center;
    padding-left:14px;
    padding-right:14px;
  }
}

@media (max-width: 640px){
  .container{
    width:min(100%, 100%);
    padding-inline:14px;
  }

  body main.container,
  body footer .container{
    padding-left:14px !important;
    padding-right:14px !important;
  }

  html:not([data-page^="viewer:"]) body main,
  html:not([data-page^="viewer:"]) body footer{
    padding-left:14px;
    padding-right:14px;
  }

  html:not([data-page^="viewer:"]) body main{
    padding-top:18px;
  }

  .viewer-top{
    --viewer-side-w:auto;
    align-items:flex-start;
    gap:8px;
    flex-wrap:wrap;
  }

  .viewer-left,
  .viewer-center,
  .viewer-right{
    flex:1 1 100%;
    justify-content:center;
  }

  .viewer-right{
    order:2;
  }

  .viewer-center{
    order:3;
  }

  .viewer-counter{
    min-width:auto;
    text-align:center;
  }

  .viewer-stage{
    padding:10px 8px;
  }

  .viewer-caption,
  .viewer-text{
    font-size:0.9rem;
    line-height:1.6;
    padding-left:16px;
    padding-right:16px;
  }

  .viewer-thumbs{
    gap:10px;
    padding-left:14px;
    padding-right:14px;
    scroll-padding-left:14px;
    scroll-padding-right:14px;
  }

  .topbar{
    padding:10px 12px;
  }

  .topbar-row .brand{
    font-size:1.25rem !important;
  }

  .hamburger{
    width:40px;
    height:40px;
  }

  .mobile-panel{
    padding:8px 0 14px;
  }
}