/* Yim Mau-Kun — shared painting detail page stylesheet
   Design concept: Monochrome Photography Editorial — same locked design system
   used across the site. This file is referenced by every /paintings/*.html so
   the canonical pages share one source of truth for layout and tokens. */

:root {
  --sepia-black: #1a1510;
  --sepia-dark: #2a2218;
  --sepia-mid: #6b5940;
  --sepia-warm: #a08860;
  --sepia-light: #c4a878;
  --cream: #f0e8d4;
  --cream-soft: #e8ddc4;
  --amber: #d4a050;
  --text-on-dark: #e8dcc4;
  --text-on-dark-muted: #a09478;
  --text-on-light: #2a2218;
  --grain-opacity: 0.04;
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;font-size:18px}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}}

body {
  font-family:'EB Garamond',Georgia,serif;
  background:var(--sepia-black);
  color:var(--text-on-dark);
  line-height:1.7;
  overflow-x:hidden;
}

body::after {
  content:'';position:fixed;inset:0;z-index:9999;
  pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  opacity:var(--grain-opacity);
  mix-blend-mode:overlay;
}

.mono {
  font-family:'EB Garamond',serif;
  font-size:0.845rem;font-weight:400;
  letter-spacing:.2em;text-transform:uppercase;
}

a{color:inherit}
a:focus-visible{outline:2px solid var(--amber);outline-offset:3px}
button:focus-visible{outline:2px solid var(--amber);outline-offset:3px}

/* ══════ HEADER ══════ */
header {
  position:fixed;top:0;left:0;right:0;z-index:1000;
  background:rgba(26,21,16,.85);
  backdrop-filter:blur(16px);
  -webkit-backdrop-filter:blur(16px);
  border-bottom:1px solid rgba(160,132,96,.1);
}
.header-inner {
  padding:.7rem 2.5rem;
  display:flex;align-items:center;justify-content:space-between;
}
.logo-link{text-decoration:none;display:inline-flex;align-items:center}
.logo-img{height:2.2rem;width:auto;filter:brightness(0) invert(1)}

nav{display:flex;align-items:center;gap:0}
nav a {
  font-family:'EB Garamond',serif;
  font-size:.84em;font-weight:500;
  letter-spacing:.1em;text-transform:uppercase;
  color:#FFEDD4;text-decoration:none;
  padding:.5rem 1rem;transition:color .3s;
}
nav a:hover{color:var(--cream)}
nav a.highlight{color:var(--amber)}
nav a[aria-current="page"]{color:var(--cream);position:relative}
nav a[aria-current="page"]::after{content:'';position:absolute;left:1rem;right:1rem;bottom:.2rem;height:1px;background:var(--sepia-warm)}

.hamburger{display:none;background:none;border:none;cursor:pointer;padding:8px}
.hamburger span{display:block;width:20px;height:1px;background:var(--cream-soft);margin:5px 0;transition:all .3s}

/* ══════ BREADCRUMB ══════ */
.breadcrumb{
  padding:6rem 4rem 0;
  max-width:1300px;margin:0 auto;
}
.breadcrumb a, .breadcrumb span {
  font-family:'EB Garamond',serif;font-size:0.845rem;
  letter-spacing:.25em;text-transform:uppercase;
  color:var(--sepia-mid);text-decoration:none;
}
.breadcrumb a{transition:color .3s}
.breadcrumb a:hover{color:var(--cream)}
.breadcrumb .sep{margin:0 .8rem;color:var(--sepia-dark)}
.breadcrumb .current{color:var(--sepia-light)}

/* ══════ HERO ══════ */
/* Wide (landscape) paintings: image fills the page width on its own row,
   metadata stacks below in a centered text block. */
.painting-hero{
  padding:6rem 1.75rem 4rem;
  max-width:none;margin:0 auto;
  display:block;
}
.painting-hero .painting-img{margin:0}
.painting-hero .painting-img-wrap.wide{
  max-width:none;margin:0 auto;
}
.painting-hero .painting-img-wrap.wide img{
  width:100%;height:auto;display:block;
}
.painting-hero .painting-meta-col{
  max-width:760px;margin:3.5rem auto 0;
  padding:0;
}

/* Tall (portrait / squarish) paintings: same single-column stack as wide,
   but the image is capped at a comfortable max-width so its natural
   aspect ratio doesn't drive it past viewport height. */
.painting-hero.tall{
  display:block;
  padding:1.5rem 1.75rem 4rem;
  max-width:none;margin:0 auto;
}
.painting-hero.tall .painting-img{order:initial;margin:0}
.painting-hero.tall .painting-meta-col{
  order:initial;
  max-width:760px;margin:3.5rem auto 0;padding:0;
}
.painting-hero.tall .painting-img-wrap.tall{
  max-width:1600px;margin:0 auto;
  display:block;background:transparent;
}
.painting-hero.tall .painting-img-wrap.tall img{
  max-width:100%;
  width:100%;height:auto;
  display:block;
}

.painting-img-wrap{
  position:relative;
  background:var(--sepia-dark);
  overflow:hidden;
}
.painting-img-wrap.no-image{
  display:flex;align-items:center;justify-content:center;
  text-align:center;padding:3rem;
  aspect-ratio:4/3;
  background:
    repeating-linear-gradient(45deg,
      rgba(160,132,96,.06) 0 8px,
      transparent 8px 16px),
    var(--sepia-dark);
}
.painting-img-wrap.no-image .pmark{
  font-family:'Cormorant Garamond',serif;
  font-size:1.6rem;font-style:italic;
  color:var(--sepia-light);line-height:1.4;
}
.painting-img-wrap.no-image .pmark span{
  display:block;font-family:'EB Garamond',serif;font-style:normal;
  font-size:0.845rem;letter-spacing:.3em;text-transform:uppercase;
  color:var(--sepia-mid);margin-top:1rem;
}

.painting-img-wrap img{
  width:100%;height:auto;display:block;
}

.painting-meta-col{padding:1rem 0}

.painting-meta-col .mono{color:var(--sepia-warm);margin-bottom:1rem;display:block}
.painting-meta-col .zh-title{
  font-family:'Cormorant Garamond',serif;
  font-size:1.6rem;color:var(--sepia-light);
  font-weight:300;letter-spacing:.05em;
  margin-bottom:.4rem;
}

.painting-meta-col h1 {
  font-family:'Cormorant Garamond',serif;
  font-size:clamp(2.4rem,4.5vw,3.6rem);
  font-style:italic;font-weight:400;
  color:var(--cream);line-height:1.05;
  margin-bottom:2rem;
}

.painting-specs{
  display:flex;flex-direction:column;gap:.7rem;
  padding:1.5rem 0;margin-bottom:1.5rem;
  border-top:1px solid rgba(160,132,96,.15);
  border-bottom:1px solid rgba(160,132,96,.15);
}
.spec-row{
  display:grid;grid-template-columns:130px 1fr;gap:1rem;
  font-size:.92rem;
}
.spec-row dt{
  font-family:'EB Garamond',serif;
  font-size:0.845rem;letter-spacing:.25em;text-transform:uppercase;
  color:var(--sepia-mid);font-weight:400;
  align-self:center;
}
.spec-row dd{
  color:var(--cream-soft);font-weight:300;
}
.spec-row dd.status{
  color:var(--sepia-light);font-style:italic;
}

.painting-intro{
  font-family:'Cormorant Garamond',serif;
  font-size:clamp(1.1rem,1.7vw,1.4rem);
  font-style:italic;font-weight:400;
  color:var(--sepia-light);
  line-height:1.5;margin-bottom:2rem;
}

.painting-cta{
  display:inline-block;
  font-family:'EB Garamond',serif;font-size:0.845rem;font-weight:400;
  letter-spacing:.25em;text-transform:uppercase;
  padding:.95rem 2.4rem;
  background:var(--cream);color:var(--sepia-black);
  border:none;text-decoration:none;transition:all .3s;
}
.painting-cta:hover{background:var(--amber)}

.painting-cta.secondary{
  background:transparent;color:var(--cream);
  border:1px solid rgba(224,216,196,.3);
}
.painting-cta.secondary:hover{border-color:var(--cream);background:rgba(240,232,212,.06)}

/* ══════ STORY (long-form) ══════ */
.story-section{
  padding:5rem 4rem 7rem;
  max-width:780px;margin:0 auto;
  border-top:1px solid rgba(160,132,96,.1);
}

.story-section .section-eyebrow {
  font-family:'EB Garamond',serif;
  font-size:0.845rem;font-weight:400;
  letter-spacing:.3em;text-transform:uppercase;
  color:var(--sepia-warm);
  display:flex;align-items:center;gap:1rem;
  margin-bottom:2rem;
}
.story-section .section-eyebrow::after{content:'';flex:1;height:1px;background:rgba(160,132,96,.18);max-width:120px}

.story-section h2 {
  font-family:'Cormorant Garamond',serif;
  font-size:clamp(2rem,3.5vw,2.8rem);
  font-weight:400;line-height:1.1;
  color:var(--cream);
  margin-bottom:2.5rem;
}
.story-section h2 .thin{font-style:italic;color:var(--sepia-light)}

.story-body p{
  font-size:1.08rem;font-weight:300;
  line-height:1.95;
  color:var(--text-on-dark);
  margin-bottom:1.6rem;
}

.story-body p:first-of-type::first-letter{
  font-family:'Cormorant Garamond',serif;
  font-size:3.6rem;
  float:left;
  line-height:.9;
  margin:.3rem .8rem 0 0;
  color:var(--cream);
  font-style:italic;
}

.story-body em{
  font-family:'Cormorant Garamond',serif;
  font-style:italic;color:var(--cream-soft);
}

/* ══════ INQUIRY BAND ══════ */
.inquiry-band{
  background:var(--sepia-dark);
  border-top:1px solid rgba(160,132,96,.1);
  border-bottom:1px solid rgba(160,132,96,.1);
  text-align:center;
}
.inquiry-band-inner{
  max-width:680px;margin:0 auto;
  padding:5rem 3rem;
}
.inquiry-band .mono{color:var(--sepia-warm);margin-bottom:1.4rem;display:block;letter-spacing:.3em}
.inquiry-band h2{
  font-family:'Cormorant Garamond',serif;
  font-size:clamp(1.8rem,3vw,2.5rem);
  font-style:italic;font-weight:400;
  color:var(--cream);line-height:1.2;
  margin-bottom:1.4rem;
}
.inquiry-band p{
  font-size:1rem;font-weight:300;line-height:1.85;
  color:var(--text-on-dark-muted);
  margin-bottom:2.4rem;
}

/* ══════ RELATED WORKS ══════ */
.related{
  padding:6rem 4rem;
  max-width:1300px;margin:0 auto;
}
.related-header{
  display:flex;align-items:baseline;justify-content:space-between;
  margin-bottom:3rem;
  padding-bottom:1.5rem;
  border-bottom:1px solid rgba(160,132,96,.12);
}
.related-header h2{
  font-family:'Cormorant Garamond',serif;
  font-size:clamp(1.5rem,2.5vw,2rem);
  font-weight:400;color:var(--cream);
}
.related-header h2 .thin{font-style:italic;color:var(--sepia-light)}
.related-header a{
  font-family:'EB Garamond',serif;font-size:0.845rem;
  letter-spacing:.25em;text-transform:uppercase;
  color:var(--sepia-warm);text-decoration:none;
  border-bottom:1px solid transparent;padding-bottom:.3rem;
  transition:color .3s, border-color .3s;
}
.related-header a:hover{color:var(--cream);border-bottom-color:var(--sepia-warm)}

.related-grid{
  display:grid;grid-template-columns:repeat(3,1fr);
  gap:2rem;align-items:start;
}
.related-card{
  display:block;text-decoration:none;color:inherit;
}
.related-img-wrap{
  overflow:hidden;
  background:var(--sepia-dark);
  margin-bottom:1rem;
}
.related-img-wrap img{
  width:100%;height:auto;display:block;
  transition:transform .8s ease;
}
.related-card:hover .related-img-wrap img{transform:scale(1.03)}
.related-img-wrap.no-image{
  display:flex;align-items:center;justify-content:center;
  aspect-ratio:4/3;
  background:
    repeating-linear-gradient(45deg,
      rgba(160,132,96,.05) 0 8px,
      transparent 8px 16px),
    var(--sepia-dark);
}
.related-img-wrap.no-image span{
  font-family:'EB Garamond',serif;font-size:0.845rem;
  letter-spacing:.3em;text-transform:uppercase;color:var(--sepia-mid);
}

.related-card .mono{color:var(--sepia-mid);margin-bottom:.4rem;display:block}
.related-card .zh{font-family:'Cormorant Garamond',serif;font-size:.95rem;color:var(--sepia-light);font-weight:300}
.related-card .en{font-family:'Cormorant Garamond',serif;font-size:1.1rem;font-style:italic;color:var(--cream);line-height:1.25;margin-top:.1rem}

/* ══════ FOOTER ══════ */
footer {
  background:var(--sepia-black);
  border-top:1px solid rgba(160,132,96,.08);
  padding:3.5rem 4rem 2rem;
}
.footer-inner {
  max-width:1280px;margin:0 auto;
  display:grid;grid-template-columns:1.8fr 1fr 1fr 1fr;gap:3rem;
}
.f-brand .f-name{font-family:'Cormorant Garamond',serif;font-size:1.3rem;font-style:italic;color:var(--cream);margin-bottom:.8rem}
.f-brand p{font-size:.92rem;font-weight:300;color:var(--text-on-dark-muted);line-height:1.7;max-width:280px}
.f-col h4{font-family:'EB Garamond',serif;font-size:0.845rem;font-weight:400;letter-spacing:.25em;text-transform:uppercase;color:var(--sepia-mid);margin-bottom:1.1rem}
.f-col a{display:block;font-size:.92rem;font-weight:300;color:#FFEDD4;text-decoration:none;padding:.3rem 0;transition:color .3s}
.f-col a:hover{color:var(--cream)}
.footer-bottom{
  max-width:1280px;margin:2.5rem auto 0;padding-top:1.5rem;
  border-top:1px solid rgba(160,132,96,.06);
  display:flex;justify-content:space-between;align-items:center;
}
.footer-bottom p{font-family:'EB Garamond',serif;font-size:0.845rem;color:var(--sepia-mid);letter-spacing:.15em;text-transform:uppercase}
.f-social{margin-top:1.4rem;display:flex;gap:1.1rem;flex-wrap:wrap}
.f-social a{display:inline-flex;align-items:center;gap:.45rem;font-family:'EB Garamond',serif;font-size:.78rem;font-weight:400;letter-spacing:.12em;text-transform:uppercase;color:var(--amber);text-decoration:none;transition:opacity .25s}
.f-social a:hover{opacity:.7}
.f-social svg{flex-shrink:0;display:block}

/* ══════ RESPONSIVE ══════ */
@media(max-width:1024px){
  .breadcrumb{padding:5rem 3rem 0}
  .painting-hero{
    padding:5rem 1.5rem 4rem;
  }
  .painting-hero.tall{
    display:block;grid-template-columns:1fr;
    min-height:0;padding:5rem 1.5rem 4rem;
  }
  .painting-hero.tall .painting-img,.painting-hero.tall .painting-meta-col{order:initial}
  .painting-hero.tall .painting-img-wrap.tall{
    height:auto;
  }
  .painting-hero.tall .painting-meta-col{
    max-width:760px;margin:2.5rem auto 0;
  }
  .story-section{padding:4rem 3rem 5rem}
  .related{padding:5rem 3rem}
  .related-grid{grid-template-columns:1fr 1fr}
  .footer-inner{grid-template-columns:1fr 1fr}
}

@media(max-width:768px){
  .header-inner{padding:.6rem 1.5rem}
  nav{display:none}
  nav.open{
    display:flex;flex-direction:column;
    position:absolute;top:100%;left:0;right:0;
    background:rgba(26,21,16,.97);backdrop-filter:blur(16px);
    padding:1rem 1.5rem;border-bottom:1px solid rgba(160,132,96,.1);
  }
  nav.open a{padding:.7rem 0}
  .hamburger{display:block}

  .breadcrumb{padding:4.5rem 1.25rem 0}
  .painting-hero,.painting-hero.tall{padding:4.5rem 1.25rem 3rem}
  .painting-hero .painting-meta-col{margin-top:2rem;max-width:none;padding:0 .25rem}
  .painting-meta-col h1{font-size:2rem}
  .spec-row{grid-template-columns:100px 1fr;font-size:.92rem}

  .story-section{padding:3rem 1.5rem 4rem}
  .story-body p{font-size:1rem}

  .inquiry-band-inner{padding:4rem 1.5rem}

  .related{padding:4rem 1.5rem}
  .related-header{flex-direction:column;align-items:flex-start;gap:1rem}
  .related-grid{grid-template-columns:1fr;gap:1.5rem}

  footer{padding:2.5rem 1.5rem 1.5rem}
  .footer-inner{grid-template-columns:1fr;gap:2rem}
  .footer-bottom{flex-direction:column;gap:.8rem;text-align:center}
}

/* ══════ STICKY TITLE BAR (per-painting) ══════ */
.painting-sticky-bar{
  position:fixed;left:0;right:0;bottom:0;z-index:200;
  display:flex;align-items:baseline;justify-content:center;gap:1.2rem;
  padding:.85rem 1.75rem;
  background:rgba(26,21,16,.88);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  border-top:1px solid rgba(160,132,96,.18);
  opacity:0;pointer-events:none;
  transform:translateY(10px);
  transition:opacity .35s ease, transform .35s ease;
}
.painting-sticky-bar.visible{
  opacity:1;pointer-events:auto;transform:translateY(0);
}
.painting-sticky-bar .zh{
  font-family:'Cormorant Garamond',serif;
  font-size:1rem;font-weight:300;letter-spacing:.05em;
  color:var(--sepia-light);
}
.painting-sticky-bar .title{
  font-family:'Cormorant Garamond',serif;
  font-size:1.15rem;font-style:italic;font-weight:400;
  color:var(--cream);line-height:1.2;
}
.painting-sticky-bar .year{
  font-family:'EB Garamond',serif;
  font-size:0.845rem;font-weight:400;
  letter-spacing:.25em;text-transform:uppercase;
  color:var(--sepia-warm);
}
@media(max-width:768px){
  .painting-sticky-bar{padding:.7rem 1rem;gap:.7rem;flex-wrap:wrap}
  .painting-sticky-bar .title{font-size:1rem}
  .painting-sticky-bar .zh{font-size:.9rem}
  .painting-sticky-bar .year{display:none}
}
@media(prefers-reduced-motion:reduce){
  .painting-sticky-bar{transition:opacity .01ms,transform .01ms}
}

/* ══════ ANIMATIONS ══════ */
.reveal{opacity:0;transform:translateY(20px);transition:opacity .9s ease, transform .9s ease}
.reveal.vis{opacity:1;transform:translateY(0)}
@media(prefers-reduced-motion:reduce){
  .reveal{opacity:1;transform:none;transition:none}
}