/* ===== shared tokens & chrome for SERENO333 ===== */
:root{
  --ink:#1f1b16;
  --ink-soft:#3a332b;
  --paper:#f5f1e8;
  --paper-2:#ebe4d4;
  --paper-3:#ddd2bb;
  --line:#2a241d;
  --accent:#8a7355;
  --accent-deep:#5b4a35;
  --shadow: 0 30px 80px -40px rgba(31,27,22,.35);

  --serif-display:'Noto Serif TC', serif;
  --serif-body:'Noto Serif TC', serif;
  --serif-en:'Cormorant Garamond', serif;

  --content-w: min(1340px, 92vw);
}

*{box-sizing:border-box;margin:0;padding:0}
html,body{background:var(--paper); color:var(--ink); -webkit-font-smoothing:antialiased; touch-action:manipulation}
body{ font-family: var(--serif-body); font-weight:400; line-height:1.8; overflow-x:hidden }
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:none;cursor:pointer}

.en{font-family:var(--serif-en); font-style:italic; letter-spacing:.06em}
.wide-letter{ letter-spacing:.25em }
h1,h2,h3,h4,h5{ font-weight:400; letter-spacing:.15em }
.wrap{ width:var(--content-w); margin: 0 auto }
.eyebrow{ font-family:var(--serif-en); font-style:italic; font-size:13px; letter-spacing:.32em; text-transform:uppercase; color:var(--accent-deep)}

/* ===== header ===== */
header.site{
  position:fixed; inset:0 0 auto 0; z-index:40;
  display:flex; align-items:center; justify-content:space-between;
  padding: 28px clamp(20px,4vw,48px) 22px;
  transition: background .4s ease, backdrop-filter .4s, border-color .4s, color .4s;
  border-bottom:1px solid transparent;
  color:#f5f1e8;
}
header.site::before{
  content:""; position:absolute; inset:0 0 -80px 0; z-index:0; pointer-events:none;
  background: linear-gradient(180deg, rgba(0,0,0,.55) 0%, rgba(0,0,0,.32) 45%, rgba(0,0,0,.12) 80%, rgba(0,0,0,0) 100%);
  transition: opacity .4s ease;
}
header.site > *{ position:relative; z-index:10 }
header.site.solid::before, header.site.scrolled::before{ opacity:0 }
header.site.solid, header.site.scrolled{
  padding: 20px clamp(20px,4vw,48px);
  background: color-mix(in oklab, var(--paper) 94%, transparent);
  backdrop-filter: blur(8px);
  border-bottom-color: color-mix(in oklab, var(--ink) 12%, transparent);
  color:var(--ink);
}
.brand{ display:flex; flex-direction:column; line-height:1.1; gap:3px }
.brand .mark{ font-family:'Cormorant Garamond', var(--serif-display), serif; font-size:26px; letter-spacing:.18em; font-weight:500; font-feature-settings:"lnum" 1, "tnum" 0; font-variant-numeric: lining-nums }
.brand .sub{ font-family:var(--serif-display); font-size:10px; letter-spacing:.32em; opacity:.7; font-weight:400 }
nav.primary{ display:flex; gap:32px; font-family:var(--serif-display); font-size:14.5px; letter-spacing:.22em }
nav.primary a{ position:relative; padding-bottom:4px }
nav.primary a::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:currentColor;transform:scaleX(0);transform-origin:left;transition:transform .4s ease}
nav.primary a:hover::after, nav.primary a.active::after{transform:scaleX(1)}
.cta-pill{
  font-family:var(--serif-display); font-size:12.5px; letter-spacing:.26em;
  padding:12px 22px; border:1px solid currentColor; border-radius:999px;
  transition: background .3s, color .3s;
}
header.site.solid .cta-pill:hover, header.site.scrolled .cta-pill:hover{ background:var(--ink); color:var(--paper) }
header.site:not(.solid):not(.scrolled) .cta-pill:hover{ background:rgba(255,255,255,.12) }

.menu-toggle{ display:none }
.mobile-line-link{ display:none }

/* page hero (inner pages) */
.page-hero{
  position:relative; height: 56vh; min-height: 420px; overflow:hidden; color:#f5f1e8;
  margin-top:0;
}
.page-hero img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; animation: kenb 14s ease-in-out infinite alternate }
@keyframes kenb { from{transform:scale(1.02)} to{transform:scale(1.1)} }
.page-hero::after{ content:""; position:absolute; inset:0; background: linear-gradient(180deg, rgba(20,16,10,.3), rgba(20,16,10,.55)) }
.page-hero .inner{
  position:absolute; inset:auto 0 0 0; padding: 0 clamp(28px,5vw,64px) 60px; z-index:2;
  display:flex; flex-direction:column; gap:14px;
}
.page-hero .cn{ font-family:var(--serif-display); font-size: clamp(34px, 4.6vw, 62px); letter-spacing:.3em; font-weight:300 }
.page-hero .en{ font-size: clamp(14px, 1.3vw, 18px); letter-spacing:.4em; opacity:.85 }
.page-hero .crumb{ font-family:var(--serif-en); font-size:12px; letter-spacing:.3em; opacity:.7 }

/* section frame */
section{ position:relative; padding: clamp(80px, 10vw, 150px) 0 }
.section-head{ display:flex; align-items:baseline; gap:22px; margin-bottom: 48px }
.section-head .num{
  font-family:var(--serif-en); font-style:italic; font-size:14px; letter-spacing:.3em; color:var(--accent-deep);
  border-right:1px solid var(--accent); padding-right:20px;
}
.section-head .label{ font-family:var(--serif-display); font-size:15px; letter-spacing:.4em; color:var(--ink-soft) }

.title-block h2{ font-family:var(--serif-display); font-size: clamp(28px, 3.2vw, 44px); letter-spacing:.22em; line-height:1.6; font-weight:400 }
.title-block .lede{ color:var(--ink-soft); font-size:15px; line-height:2.1; letter-spacing:.08em; margin-top: 18px }

.vert-seal{
  position:absolute; left: clamp(12px, 2vw, 32px); top:50%; transform:translateY(-50%);
  writing-mode: vertical-rl; font-family:var(--serif-display); font-size:13px; letter-spacing:.5em;
  color: color-mix(in oklab, var(--ink) 40%, transparent);
  font-weight:500;
}

.btn-line{
  display:inline-block;
  font-family:var(--serif-display); font-size:13px; letter-spacing:.3em;
  padding: 14px 26px; border:1px solid var(--ink); color:var(--ink);
  transition:.3s;
}
.btn-line:hover{ background:var(--ink); color:var(--paper) }
.btn-solid{
  display:inline-block;
  font-family:var(--serif-display); font-size:13px; letter-spacing:.3em;
  padding: 14px 26px; border:1px solid var(--ink); background:var(--ink); color:var(--paper);
  transition:.3s;
}
.btn-solid:hover{ background:transparent; color:var(--ink) }

.reveal{ opacity:1; transform: translateY(18px); transition: transform 1s cubic-bezier(.2,.6,.2,1) }
.reveal.in, html.reveal-all .reveal{ transform:none }

/* ============================================================
   PREMIUM ANIMATIONS
   ============================================================ */

/* 1. split-char reveal: per character rise + blur lift */
.split-chars{ display:inline-block; perspective: 900px }
.split-chars .ch{
  display:inline-block; filter: blur(0);
  transform: translateY(0) rotateX(0);
  transition: transform 1.1s cubic-bezier(.2,.7,.2,1), filter .9s;
  transform-origin: 50% 100%;
}
.split-chars .ch.sp{ width:.35em }
.split-chars.in .ch{ filter:none; transform:none }

/* 2. clip-reveal: mask wiping upward — perfect for images */
.clip-reveal{ position:relative; overflow:hidden }
.clip-reveal > *{
  clip-path: inset(0 0 0 0);
  transition: clip-path 1.4s cubic-bezier(.7,0,.2,1);
}
.clip-reveal.in > *{ clip-path: inset(0 0 0 0) }
.clip-reveal::after{
  content:""; position:absolute; inset:0; background:var(--accent-deep); z-index:2;
  transform-origin: bottom;
  transform: scaleY(0); transition: transform 1.4s cubic-bezier(.7,0,.2,1);
  pointer-events:none;
}
.clip-reveal.in::after{ transform: scaleY(0) }

/* 3. line-draw: SVG stroke-dash drawing */
.line-draw path, .line-draw line, .line-draw circle, .line-draw rect{
  stroke-dasharray: var(--len, 1200);
  stroke-dashoffset: var(--len, 1200);
  transition: stroke-dashoffset 2.4s cubic-bezier(.5,0,.2,1);
}
.line-draw.in path, .line-draw.in line, .line-draw.in circle, .line-draw.in rect{ stroke-dashoffset: 0 }

/* 4. parallax — scroll-linked via CSS var set by JS */
[data-parallax]{ transform: translate3d(0, var(--py, 0px), 0); will-change: transform }

/* 5. magnetic cursor targets */
.magnetic{ display:inline-flex; transition: transform .35s cubic-bezier(.2,.7,.2,1) }

/* 6. marquee — infinite letterpress band */
.marquee{ overflow:hidden; white-space:nowrap; padding: 28px 0; border-top:1px solid var(--ink); border-bottom:1px solid var(--ink); background:var(--paper) }
.marquee .track{ display:inline-flex; gap: 60px; animation: mq 40s linear infinite; font-family:var(--serif-display); font-size: clamp(28px,3.4vw,48px); letter-spacing:.2em; color:var(--ink) }
.marquee .track span{ display:inline-flex; align-items:center; gap:60px }
.marquee .track .dot{ width:8px; height:8px; border-radius:50%; background:var(--accent) }
@keyframes mq { to{ transform: translateX(-50%) } }

/* 7. noise overlay — subtle film grain */
body::after{
  content:""; position:fixed; inset:0; pointer-events:none; z-index: 999;
  opacity:.06; mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='140' height='140'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' seed='3'/></filter><rect width='140' height='140' filter='url(%23n)' opacity='.6'/></svg>");
}

/* 8. page transition curtain */
.curtain{
  position:fixed; inset:0; z-index: 9999; pointer-events:none;
  display:flex;
}
.curtain .panel{
  flex:1; background: var(--ink);
  transform-origin: top;
  transform: scaleY(0);
}
.curtain.in .panel{ transform: scaleY(1); transition: transform .6s cubic-bezier(.7,0,.3,1) }
.curtain.out .panel{ transform: scaleY(0); transform-origin: bottom; transition: transform .7s cubic-bezier(.7,0,.3,1) }
.curtain .panel:nth-child(2){ transition-delay: .06s !important }
.curtain .panel:nth-child(3){ transition-delay: .12s !important }
.curtain .panel:nth-child(4){ transition-delay: .18s !important }
.curtain .panel:nth-child(5){ transition-delay: .24s !important }

/* 9. image tilt on hover — 3D lift */
.tilt{ transform-style: preserve-3d; transition: transform .5s cubic-bezier(.2,.7,.2,1) }
.tilt > *{ transition: transform .5s cubic-bezier(.2,.7,.2,1) }

/* 10. cursor blob */
#cursor-blob{
  position:fixed; top:0; left:0; width: 28px; height:28px; border-radius:50%;
  background: transparent; border:1px solid var(--ink);
  pointer-events:none; z-index: 998;
  transform: translate(-50%, -50%);
  transition: width .35s, height .35s, background .35s, border-color .35s, opacity .3s;
  mix-blend-mode: difference;
  opacity: 0;
}
#cursor-blob.visible{ opacity:.7 }
#cursor-blob.hover{ width:60px; height:60px; background: var(--paper); border-color: var(--paper) }
@media (pointer: coarse){ #cursor-blob{ display:none } }

/* 11. sticky pin reveal — scale caption in as you scroll */
.pin-reveal{ position: sticky; top: 0; height: 100vh; display:flex; align-items:center; justify-content:center; overflow:hidden }
.pin-reveal .bg{ position:absolute; inset:0; background-size:cover; background-position:center; transform: scale(var(--scale, 1)); will-change: transform }
.pin-reveal .word{ position:relative; z-index:2; font-family:var(--serif-display); color:#f5f1e8; text-align:center; letter-spacing:.3em; font-size: clamp(32px, 5vw, 72px); font-weight:300;
  opacity: var(--wop, 1); transform: translateY(var(--wy, 0px)); text-shadow:0 4px 30px rgba(0,0,0,.35) }
.pin-reveal::after{ content:""; position:absolute; inset:0; background: linear-gradient(180deg, rgba(20,16,10,.2), rgba(20,16,10,.55)) }
.pin-reveal > *:not(.bg){ z-index:2 }

/* ============================================================
   ORIENTAL EDITORIAL SYSTEM — "SHIJIAN / HAGIWARA" aesthetic
   ============================================================ */

/* 12. 印章 seal logo */
.seal{
  display:inline-grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr;
  width: var(--seal-size, 68px); height: var(--seal-size, 68px);
  background: #b2412f; color:#f5f1e8;
  font-family:var(--serif-display); font-weight:600;
  line-height:1; text-align:center;
  padding: 6%;
  gap: 2%;
  box-shadow: 0 0 0 3px #b2412f, inset 0 0 0 3px #f5f1e8;
  transform: rotate(-2deg);
  flex-shrink:0;
}
.seal.mono{ background:#1f1b16; box-shadow: 0 0 0 3px #1f1b16, inset 0 0 0 3px #f5f1e8; }
.seal > span{ display:flex; align-items:center; justify-content:center; font-size: calc(var(--seal-size, 68px) * .32) }
.seal.big{ --seal-size: 110px }
.seal.xl{ --seal-size: 160px }
.seal.faint{ opacity:.22 }

/* 13. 直書 vertical label */
.v-label{
  writing-mode: vertical-rl; text-orientation: mixed;
  font-family: var(--serif-display); letter-spacing: .5em; font-weight: 400;
}
.v-poem{
  writing-mode: vertical-rl; text-orientation: upright;
  font-family: var(--serif-display); font-size: clamp(18px, 1.6vw, 26px); letter-spacing: 1em;
  line-height: 1.8; color: inherit; font-weight:300;
}

/* 14. 巨字貫穿 (cut-off edge word like "SHIJIAN") */
.edge-word{
  font-family: var(--serif-en); font-style: italic; font-weight: 400;
  font-size: clamp(90px, 18vw, 260px); letter-spacing: -0.02em; line-height: .85;
  white-space: nowrap;
  color: var(--ink);
  mix-blend-mode: difference;
  pointer-events:none;
}
.edge-word.light{ color:#f5f1e8 }

/* 15. 黑白濾鏡 (oriental desaturated look) */
.mono-photo{ filter: grayscale(1) contrast(1.05) brightness(.95); transition: filter 1.2s ease }
.mono-photo:hover{ filter: grayscale(.35) contrast(1.02) }
.duotone{ filter: grayscale(1) sepia(.12) contrast(1.06) }

/* 16. 四季 season block */
.season-strip{ display:grid; grid-template-columns: repeat(4, 1fr); gap:0; border-top:1px solid var(--ink); border-bottom:1px solid var(--ink) }
.season-card{ position:relative; aspect-ratio: 3/4; overflow:hidden; color:#f5f1e8; border-right:1px solid rgba(245,241,232,.2) }
.season-card:last-child{ border-right:0 }
.season-card > img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition: transform 1.4s cubic-bezier(.2,.7,.2,1), filter 1.2s; filter: grayscale(.65) contrast(1.05) brightness(.9) }
.season-card::after{ content:""; position:absolute; inset:0; background: linear-gradient(180deg, rgba(20,16,10,.15) 0%, rgba(20,16,10,.75) 100%) }
.season-card:hover > img{ transform: scale(1.06); filter: grayscale(0) contrast(1) brightness(1) }
.season-card .content{
  position:absolute; inset:0; z-index:2; padding: 28px 24px;
  display:flex; flex-direction:column; justify-content:space-between;
}
.season-card .ord{ font-family:var(--serif-en); font-size: clamp(56px, 7vw, 96px); font-style:italic; font-weight:400; line-height:1; letter-spacing:-.02em }
.season-card .en-meta{ font-family:var(--serif-en); font-style:italic; font-size:11px; letter-spacing:.3em; line-height:1.6; opacity:.9 }
.season-card .cn-title{ font-family:var(--serif-display); font-size: clamp(20px, 1.9vw, 28px); letter-spacing:.3em; margin-top:10px }
.season-card .foot{ display:flex; justify-content:space-between; align-items:flex-end; font-family:var(--serif-en); font-size:10px; letter-spacing:.3em; opacity:.75 }

/* 17. HAGIWARA-style photo grid (3x3 window frame) */
.window-grid{ position:relative; overflow:hidden; background:#1f1b16; width:100%; height:100% }
.window-grid img{ width:100%; height:100%; object-fit:cover; display:block }
.window-grid::before{
  content:""; position:absolute; inset:0; pointer-events:none; z-index:2;
  background:
    linear-gradient(to right, transparent 0, transparent calc(33.33% - 2px), #0b0906 calc(33.33% - 2px), #0b0906 calc(33.33% + 2px), transparent calc(33.33% + 2px), transparent calc(66.66% - 2px), #0b0906 calc(66.66% - 2px), #0b0906 calc(66.66% + 2px), transparent calc(66.66% + 2px)),
    linear-gradient(to bottom, transparent 0, transparent calc(33.33% - 2px), #0b0906 calc(33.33% - 2px), #0b0906 calc(33.33% + 2px), transparent calc(33.33% + 2px), transparent calc(66.66% - 2px), #0b0906 calc(66.66% - 2px), #0b0906 calc(66.66% + 2px), transparent calc(66.66% + 2px));
}

/* 18. mist band — 水墨霧氣 */
.mist-band{
  position:relative; min-height: 100vh; padding: 140px 0; color:#ece3d1;
  background: #0f0d09; overflow:hidden;
}
.mist-band .bg{
  position:absolute; inset:0; background-size:cover; background-position:center;
  filter: grayscale(1) contrast(1.1) brightness(.55);
  opacity: .85;
}
.mist-band::before{
  content:""; position:absolute; inset:0; z-index:1;
  background:
    radial-gradient(60% 50% at 30% 70%, rgba(255,255,255,.1), transparent 70%),
    radial-gradient(80% 60% at 80% 30%, rgba(200,210,200,.06), transparent 70%),
    linear-gradient(180deg, rgba(15,13,9,.3), rgba(15,13,9,.65));
  animation: mistfloat 18s ease-in-out infinite alternate;
  pointer-events:none;
}
@keyframes mistfloat{ from{ transform: translate3d(0,0,0) } to{ transform: translate3d(-2%, -1%, 0) } }
.mist-band .wrap{ position:relative; z-index:3 }
.mist-band .poem-row{ display:grid; grid-template-columns: 1fr auto; gap: 60px; align-items:center; min-height: 60vh }
.mist-band .en-mono{ font-family:var(--serif-en); font-size: clamp(44px, 6vw, 92px); font-weight:300; letter-spacing:.02em; line-height:1.05; color:#ece3d1 }
.mist-band .en-mono small{ display:block; margin-top:24px; font-size: 13px; letter-spacing:.4em; font-style:italic; opacity:.7; font-weight:400 }
.mist-band .cn-tag{ margin-top: 32px; font-family:var(--serif-display); font-size:15px; letter-spacing:.5em; opacity:.85; color:#c9bfa8 }
@media (max-width: 860px){
  .mist-band .poem-row{ grid-template-columns:1fr; gap:40px }
}

/* 19. editorial meta — HAGIWARA card footer */
.edi-meta{ display:grid; grid-template-columns: 1fr auto; gap:12px; padding-top:16px; border-top:1px solid currentColor; font-family:var(--serif-en); font-size:10px; letter-spacing:.25em; text-transform:uppercase; opacity:.8 }
.edi-meta .left{ display:flex; gap:18px }

/* accessibility */
@media (prefers-reduced-motion: reduce){
  .split-chars .ch, .clip-reveal > *, .clip-reveal::after, [data-parallax], .marquee .track{
    animation:none !important; transition:none !important; transform:none !important; clip-path:none !important; opacity:1 !important;
  }
}


/* ===== CTA band (bottom of every page) ===== */
.cta-band{
  position:relative; padding: 160px 0; color:#f5f1e8; text-align:center;
  background-image: url('../img/exterior/ext-14.jpg'); background-size:cover; background-position:center;
}
.cta-band::before{ content:""; position:absolute; inset:0; background: linear-gradient(180deg, rgba(20,16,10,.45), rgba(20,16,10,.65)) }
.cta-band > *{ position:relative; z-index:2 }
.cta-band .en-label{ font-family:var(--serif-en); font-style:italic; font-size:13px; letter-spacing:.4em }
.cta-band h2{ margin-top:16px; font-family:var(--serif-display); font-size: clamp(26px, 3.6vw, 48px); letter-spacing:.3em; font-weight:300 }
.cta-band .actions{ margin-top:46px; display:flex; gap:18px; justify-content:center; flex-wrap:wrap }
.cta-band .actions a{
  padding: 18px 34px; border:1px solid #f5f1e8; font-family:var(--serif-display); font-size:13px; letter-spacing:.3em; transition:.3s;
}
.cta-band .actions a.solid{ background:#f5f1e8; color:#1f1b16 }
.cta-band .actions a:not(.solid):hover{ background:rgba(245,241,232,.15) }
.cta-band .actions a.solid:hover{ background:transparent; color:#f5f1e8 }

/* ===== footer ===== */
footer{ background:#181410; color:#c9bfa8; padding: 90px 0 30px }
.foot-grid{ display:grid; grid-template-columns: 1.3fr 1fr 1fr 1fr; gap:60px }
footer .mark{ font-family:'Cormorant Garamond', var(--serif-display), serif; font-size:26px; letter-spacing:.18em; color:#ece3d1; font-weight:500; font-feature-settings:"lnum" 1; font-variant-numeric: lining-nums }
footer .en-sub{ margin-top:6px; font-family:var(--serif-display); font-size:10.5px; letter-spacing:.3em; color:#8a7355 }
footer address{ margin-top:22px; font-style:normal; font-size:13.5px; line-height:2; letter-spacing:.06em }
footer h5{ font-family:var(--serif-display); font-size:13.5px; letter-spacing:.3em; color:#ece3d1; font-weight:500; margin-bottom:20px }
footer ul{ list-style:none; display:grid; gap:10px; font-size:13.5px; letter-spacing:.08em }
footer ul a:hover{ color:#ece3d1 }
.foot-bottom{ margin-top:70px; padding-top:24px; border-top:1px solid #2a2319; display:flex; justify-content:space-between; font-family:var(--serif-en); font-size:11px; letter-spacing:.3em; color:#6e6558 }


@media (max-width: 960px){
  header.site,
  header.site.solid,
  header.site.scrolled{
    padding: 18px 20px;
  }
  nav.primary{
    position:fixed; inset: 76px 0 auto 0; background: var(--paper);
    color: var(--ink);
    flex-direction:column; padding: 20px 24px; gap: 0;
    border-bottom:1px solid var(--paper-3);
    z-index:0;
    visibility:hidden; opacity:0;
    transform: translateY(-120%);
    transition: transform .4s, opacity .3s, visibility .4s;
  }
  nav.primary.open{ transform: translateY(0); visibility:visible; opacity:1 }
  nav.primary a{ padding: 18px 0; border-bottom:1px solid var(--paper-2) }
  nav.primary .mobile-line-link{
    display:flex; align-items:center; justify-content:center;
    margin-top:16px; padding:14px 18px; border:1px solid var(--ink); border-radius:999px;
    background:var(--ink); color:var(--paper); letter-spacing:.26em;
  }
  .cta-pill{ display:none }
  .menu-toggle{
    display:inline-block; font-family:var(--serif-en); font-size:12px; letter-spacing:.3em;
    padding: 10px 14px; border: 1px solid currentColor;
  }
  .foot-grid{ grid-template-columns: 1fr 1fr; gap:40px }
  .section-head{ flex-wrap:wrap }
}