:root{
  --ink:#0F2643; --ink2:#16365C; --ink3:#1C4069; --stone:#F4F0E6; --paper:#F4F0E6; --sand:#C9D2DA; --gold:#C9A15A; --gold2:#DDBF86; --golddk:#8E6A2E; --spring:#5E8C8A;
  --muted:#93A4B5; --line:rgba(201,161,90,.28);
  --serif:'Noto Serif TC','Songti TC',serif; --sans:'Noto Sans TC','PingFang TC',sans-serif; --en:'Cormorant Garamond',Georgia,serif; --brush:'Ma Shan Zheng',cursive;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;overflow-x:clip}
body{background:var(--ink);color:var(--stone);font-family:var(--sans);font-weight:300;overflow-x:clip;-webkit-font-smoothing:antialiased}
img,video{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
.en{font-family:var(--en);letter-spacing:.3em;text-transform:uppercase;font-size:13px;color:var(--gold2)}

/* nav: paper bar so the original-colour logo reads true */
nav{position:fixed;inset:0 0 auto 0;z-index:50;display:flex;justify-content:space-between;align-items:center;gap:24px;padding:14px 5vw;background:rgba(244,240,230,.95);backdrop-filter:blur(12px);border-bottom:1px solid rgba(15,38,67,.08);color:var(--ink)}
.logo{display:flex;align-items:center;gap:12px}
.logo img{height:42px;width:auto}
.logo b{font-family:var(--serif);font-weight:700;font-size:21px;letter-spacing:.22em;display:block;color:var(--ink)}
.logo small{display:block;font-family:var(--en);font-weight:600;font-size:10px;letter-spacing:.42em;color:var(--golddk);margin-top:2px}
.menu{display:flex;gap:36px;font-size:15px;letter-spacing:.15em;font-weight:400}
.menu a{opacity:.75;transition:opacity .3s;padding:6px 0;border-bottom:1px solid transparent}
.menu a:hover{opacity:1}
.menu a.on{opacity:1;border-bottom-color:var(--gold)}
.nav-cta{display:inline-block;background:var(--ink);color:var(--stone);padding:12px 24px;font-size:14px;letter-spacing:.2em;transition:background .3s}
.nav-cta:hover{background:var(--ink3)}
.burger{display:none;width:44px;height:44px;border:none;background:none;cursor:pointer;color:var(--ink)}
.burger svg{width:26px;height:26px}
.mnav{display:none}

.btn{display:inline-block;border:1px solid var(--gold);color:var(--gold2);padding:14px 30px;font-size:14px;letter-spacing:.2em;transition:all .4s}
.btn:hover{background:var(--gold);color:var(--ink)}
.btn.solid{background:var(--gold);color:var(--ink)}
.btn.solid:hover{background:var(--gold2)}

/* page hero */
.phero{position:relative;height:100vh;min-height:620px;overflow:hidden;display:flex;align-items:center;justify-content:center;text-align:center}
.phero.short{height:72vh;min-height:520px}
.phero .bg{position:absolute;inset:0}
.phero .bg img{width:100%;height:100%;object-fit:cover;transform:scale(1.08);animation:kb 18s ease-out forwards}
@keyframes kb{to{transform:scale(1)}}
.phero::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(15,38,67,.55) 0%,rgba(15,38,67,.35) 45%,rgba(15,38,67,.85) 100%)}
.phero.home::after{background:radial-gradient(ellipse at center,rgba(15,38,67,.62) 0%,rgba(15,38,67,.45) 60%,rgba(15,38,67,.3) 100%),linear-gradient(180deg,rgba(15,38,67,.35) 0%,rgba(15,38,67,.2) 50%,rgba(15,38,67,.85) 100%)}
.phero .copy{position:relative;z-index:2;padding:0 6vw}
.phero h1{font-family:var(--serif);font-weight:900;font-size:clamp(44px,7vw,108px);letter-spacing:.14em;line-height:1.25}
.phero p.sub{margin-top:24px;font-size:clamp(15px,1.6vw,20px);letter-spacing:.2em;color:var(--sand)}
.cap{position:absolute;right:18px;bottom:14px;z-index:3;font-size:12px;letter-spacing:.1em;color:rgba(255,255,255,.85);text-shadow:0 1px 6px rgba(0,0,0,.6)}
.scroll-cue{position:absolute;bottom:34px;left:50%;transform:translateX(-50%);z-index:2;font-family:var(--en);font-size:12px;letter-spacing:.4em;color:var(--sand);text-align:center}
.scroll-cue i{display:block;width:1px;height:48px;background:var(--gold);margin:12px auto 0;animation:drop 2s infinite}
@keyframes drop{0%{transform:scaleY(0);transform-origin:top}50%{transform:scaleY(1);transform-origin:top}51%{transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}}

/* sections */
section{position:relative}
.wrap{max-width:1280px;margin:0 auto;padding:0 5vw}
.pad{padding:150px 0}
.alt{background:var(--ink2)}
.title{font-family:var(--serif);font-weight:700;font-size:clamp(30px,4vw,54px);line-height:1.38;letter-spacing:.06em}
.lead{font-size:17px;line-height:2.1;color:var(--sand);letter-spacing:.06em}
.lead + .lead{margin-top:18px}
.reveal span{display:inline-block;opacity:0;transform:translateY(40px) rotateX(-60deg);transform-origin:bottom}
.two{display:grid;grid-template-columns:1fr 1.1fr;gap:7vw;align-items:center}
.two.rev{grid-template-columns:1.1fr 1fr}
.pic{position:relative;height:72vh;overflow:hidden}
.pic img{width:100%;height:118%;object-fit:cover;will-change:transform}
.clip{clip-path:inset(10% 10% 10% 10%)}
.small-note{font-size:12px;color:var(--muted);margin-top:18px;letter-spacing:.05em;line-height:1.8}

/* 森 wordmark */
.sen-word{display:flex;align-items:center;gap:22px}
.sen-char{font-family:var(--brush);font-size:clamp(110px,12vw,170px);line-height:1;color:var(--stone)}
.sen-park{font-family:var(--en);font-weight:600;font-size:clamp(30px,3vw,44px);letter-spacing:.32em}
.tags{display:flex;flex-wrap:wrap;gap:12px;margin:32px 0 40px}
.tags span{border:1px solid var(--line);padding:10px 18px;font-size:14px;letter-spacing:.15em}
.tags span.hl{background:var(--gold);color:var(--ink);border-color:var(--gold);font-weight:500}

/* cards */
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:28px;margin-top:70px;perspective:1000px}
.feat{background:linear-gradient(160deg,#1C4069,#12304F);border:1px solid var(--line);padding:44px 36px;transform-style:preserve-3d;transition:transform .2s ease-out;min-height:260px}
.feat .num{font-family:var(--en);font-size:56px;color:var(--gold);line-height:1;transform:translateZ(50px)}
.feat h3{font-family:var(--serif);font-size:23px;font-weight:700;margin:24px 0 12px;letter-spacing:.08em;transform:translateZ(40px)}
.feat p{font-size:15px;line-height:1.9;color:var(--sand);transform:translateZ(25px)}
.cards.four{grid-template-columns:repeat(4,1fr)}

/* project entry tiles */
.tiles{display:grid;grid-template-columns:repeat(2,1fr);gap:28px;margin-top:70px}
.tile{position:relative;height:62vh;min-height:420px;overflow:hidden;display:flex;align-items:flex-end}
.tile img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform 1.2s ease}
.tile:hover img{transform:scale(1.05)}
.tile::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(15,38,67,.05) 30%,rgba(15,38,67,.9) 100%)}
.tile .t{position:relative;z-index:2;padding:40px}
.tile .badge{display:inline-block;background:var(--gold);color:var(--ink);font-size:13px;letter-spacing:.2em;padding:6px 12px;margin-bottom:16px;font-weight:500}
.tile .badge.dim{background:transparent;border:1px solid var(--gold2);color:var(--gold2)}
.tile h3{font-family:var(--serif);font-weight:700;font-size:clamp(26px,2.6vw,38px);letter-spacing:.08em}
.tile p{margin-top:10px;color:var(--sand);letter-spacing:.15em;font-size:14px}
.tile .go{margin-top:22px;font-size:14px;letter-spacing:.2em;color:var(--gold2)}
.tile.text{background:linear-gradient(160deg,#1C4069,#12304F);border:1px solid var(--line)}
.tile.text::after{display:none}

/* gallery 3d */
.gallery{height:100vh;overflow:hidden;background:var(--ink);perspective:1600px}
.gallery-head{position:absolute;top:13vh;left:5vw;z-index:3;pointer-events:none}
.track{position:absolute;top:0;left:0;height:100%;display:flex;align-items:center;padding-top:16vh!important;gap:4vw;padding:0 38vw 0 42vw;transform-style:preserve-3d;will-change:transform}
.card{flex:0 0 auto;width:46vw;height:52vh;position:relative;transform-style:preserve-3d;will-change:transform}
.card img{width:100%;height:100%;object-fit:cover;box-shadow:0 40px 80px rgba(5,15,30,.6)}
.card figcaption{position:absolute;left:0;bottom:-44px;font-size:14px;letter-spacing:.2em;color:var(--sand)}
.card figcaption em{font-style:normal;color:var(--muted);margin-left:12px;font-size:12px}

/* film */
.film{display:grid;grid-template-columns:1fr 1fr;gap:3vw;perspective:1400px;margin-top:70px}
.film figure{position:relative;height:62vh;overflow:hidden;will-change:transform}
.film video{width:100%;height:100%;object-fit:cover}
.film figcaption{position:absolute;left:28px;bottom:24px;font-family:var(--serif);font-size:22px;letter-spacing:.12em;text-shadow:0 2px 20px rgba(0,0,0,.6)}

/* location list */
.loc ul{list-style:none;border-top:1px solid var(--line)}
.loc li{display:flex;justify-content:space-between;align-items:baseline;padding:22px 0;border-bottom:1px solid var(--line);gap:20px}
.loc li b{font-family:var(--serif);font-weight:700;font-size:19px;letter-spacing:.06em;white-space:nowrap}
.loc li span{color:var(--sand);font-size:14px;text-align:right;line-height:1.8}
.strip{display:grid;grid-template-columns:repeat(5,1fr);gap:16px;margin-top:80px}
.strip figure{position:relative;height:200px;overflow:hidden}
.strip img{width:100%;height:100%;object-fit:cover;transition:transform .8s}
.strip figure:hover img{transform:scale(1.06)}
.strip figcaption{position:absolute;left:0;right:0;bottom:0;padding:26px 14px 12px;font-size:13px;letter-spacing:.12em;background:linear-gradient(180deg,rgba(15,38,67,0),rgba(15,38,67,.85))}

/* brand story */
.story{max-width:860px;margin:0 auto}
.story h2{margin-bottom:30px}
.chapter{display:grid;grid-template-columns:200px 1fr;gap:5vw;padding:70px 0;border-top:1px solid var(--line)}
.chapter .k{font-family:var(--en);font-size:14px;letter-spacing:.3em;color:var(--gold2);text-transform:uppercase;padding-top:10px}
.chapter .k b{display:block;font-family:var(--serif);font-size:24px;letter-spacing:.12em;color:var(--stone);text-transform:none;margin-top:10px}
.logo-mean{display:grid;grid-template-columns:320px 1fr;gap:6vw;align-items:center}
.logo-plate{position:relative;aspect-ratio:1;display:flex;align-items:center;justify-content:center;padding:16%;background:radial-gradient(circle at 50% 50%,rgba(221,191,134,.20) 0%,rgba(201,210,218,.09) 40%,rgba(15,38,67,0) 70%)}
.logo-plate img{width:100%;height:auto;filter:drop-shadow(0 20px 36px rgba(4,14,28,.45))}
.mean-list{list-style:none}
.mean-list li{padding:18px 0;border-bottom:1px solid var(--line);display:grid;grid-template-columns:110px 1fr;gap:20px;line-height:1.9;color:var(--sand)}
.mean-list li b{font-family:var(--serif);font-weight:700;color:var(--stone);letter-spacing:.1em}
.slogan{font-family:var(--serif);font-weight:900;font-size:clamp(36px,5.5vw,76px);letter-spacing:.18em;line-height:1.4;text-align:center}

/* booking */
.book{background:url(street.jpg) center/cover fixed;position:relative}
.book::before{content:"";position:absolute;inset:0;background:rgba(15,38,67,.9)}
.book .wrap{position:relative;display:grid;grid-template-columns:1fr 1.1fr;gap:6vw;align-items:start}
form{background:rgba(22,54,92,.88);border:1px solid var(--line);padding:48px;backdrop-filter:blur(8px)}
.field{margin-bottom:24px;border:none;padding:0;min-width:0}
.field>label,.field legend{display:block;font-size:13px;letter-spacing:.2em;color:var(--sand);margin-bottom:10px}
.field input[type=text],.field input[type=tel],.field select,.field textarea{width:100%;background:transparent;border:none;border-bottom:1px solid rgba(201,210,218,.35);color:var(--stone);font-family:var(--sans);font-size:16px;padding:10px 0;outline:none;transition:border .3s}
.field input::placeholder,.field textarea::placeholder{color:#8296AA}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--gold2)}
.field select option{background:var(--ink)}
.chips{display:flex;flex-wrap:wrap;gap:10px}
.chips label{position:relative;cursor:pointer}
.chips input{position:absolute;opacity:0;width:1px;height:1px}
.chips span{display:inline-flex;align-items:center;min-height:44px;padding:0 16px;border:1px solid rgba(201,210,218,.35);font-size:14px;letter-spacing:.08em;color:var(--sand);transition:all .25s}
.chips input:checked + span{background:var(--gold);border-color:var(--gold);color:var(--ink);font-weight:500}
.chips input:focus-visible + span{outline:2px solid var(--gold2);outline-offset:2px}
form button{width:100%;margin-top:12px;background:var(--gold);color:var(--ink);border:none;padding:18px;font-family:var(--sans);font-size:15px;font-weight:500;letter-spacing:.3em;cursor:pointer;transition:background .3s}
form button:hover{background:var(--gold2)}
.done{display:none;text-align:center;padding:40px 0}
.done h3{font-family:var(--serif);font-size:28px;margin-bottom:14px}
.done p{color:var(--sand);line-height:1.9}
.contact-list{margin-top:40px;border-top:1px solid var(--line)}
.contact-list div{padding:18px 0;border-bottom:1px solid var(--line);display:flex;justify-content:space-between;gap:20px;font-size:15px}
.contact-list span{color:var(--muted)}

/* cta band */
.cta{text-align:center;padding:130px 0;background:var(--ink2)}
.cta .title{margin:20px 0 40px}

footer{padding:60px 5vw;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:30px;font-size:14px;color:var(--ink);line-height:2;background:var(--paper)}
footer .logo b{color:var(--ink)}
footer .info{color:#3E5168;text-align:right}
.note{font-size:12px;color:#5D6B7A;margin-top:8px}

@media (max-width:960px){
  .menu,.nav-cta{display:none}
  .burger{display:inline-flex;align-items:center;justify-content:center}
  .mnav.open{display:flex;flex-direction:column;position:fixed;top:70px;left:0;right:0;z-index:49;background:var(--paper);padding:10px 5vw 24px;border-bottom:1px solid rgba(15,38,67,.1)}
  .mnav a{color:var(--ink);padding:14px 0;font-size:16px;letter-spacing:.15em;border-bottom:1px solid rgba(15,38,67,.08)}
  .two,.two.rev,.book .wrap,.film,.logo-mean{grid-template-columns:1fr}
  .cards,.cards.four,.tiles{grid-template-columns:1fr}
  .pic{height:52vh}
  .card{width:78vw;height:44vh}
  .track{padding:0 12vw 0 12vw}
  .pad{padding:100px 0}
  form{padding:32px 22px}
  .book{background-attachment:scroll}
  .strip{grid-template-columns:repeat(2,1fr)}
  .strip figure{height:150px}
  .chapter{grid-template-columns:1fr;gap:16px;padding:50px 0}
  .logo b{font-size:18px}.logo img{height:36px}
  .loc li{flex-direction:column;align-items:flex-start;gap:6px}.loc li span{text-align:left}
  footer .info{text-align:left}
  .logo-plate{max-width:260px}
}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* feature cards with photo base */
.feat.photo{position:relative;overflow:hidden;background:var(--ink);min-height:340px;display:flex;flex-direction:column;justify-content:flex-end}
.feat.photo .ph{position:absolute;inset:0;z-index:0}
.feat.photo .ph img{width:100%;height:100%;object-fit:cover;transition:transform 1.2s ease}
.feat.photo:hover .ph img{transform:scale(1.06)}
.feat.photo::after{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,rgba(15,38,67,.15) 0%,rgba(15,38,67,.55) 45%,rgba(15,38,67,.93) 100%)}
.feat.photo>*:not(.ph){position:relative;z-index:2;transform:none}
.feat.photo p{color:#E2E7EC}

/* works: three tiles, portrait gallery cards, quotes */
.tiles.three{grid-template-columns:repeat(3,1fr)}
.tiles.three .tile{height:58vh;min-height:400px}
.tiles.three .tile .t{padding:32px}
.card.tall{width:30vw;height:62vh}
.quote{font-family:var(--serif);font-weight:600;font-size:clamp(19px,1.8vw,24px);line-height:1.8;letter-spacing:.08em;color:var(--gold2);margin-top:30px;padding-left:22px;border-left:2px solid var(--gold)}
.series-slogan{font-family:var(--serif);font-weight:900;font-size:clamp(40px,6vw,84px);letter-spacing:.18em;line-height:1.35;margin:26px 0 34px}
.next-proj{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;margin-top:60px;padding-top:30px;border-top:1px solid var(--line);font-size:15px;letter-spacing:.18em;color:var(--gold2)}
@media (max-width:960px){.tiles.three{grid-template-columns:1fr}.card.tall{width:62vw;height:52vh}}

/* keep phrases together so lines never end with one or two orphan characters */
p,li span,figcaption,h2,h3{text-wrap:pretty}
.ph{font-style:normal;display:inline-block}
.nb{white-space:nowrap}
.feat h3,.strip figcaption{white-space:nowrap}
.strip.four{grid-template-columns:repeat(4,1fr)}
@media (max-width:960px){.strip.four{grid-template-columns:repeat(2,1fr)}}

/* ---- typography refinement for long-form text ---- */
.lead,.mean-list li span,.feat p,.chapter p{text-align:justify;text-justify:inter-character}
.lead{font-size:17px;line-height:2.05;letter-spacing:.05em;max-width:34em}
.lead + .lead{margin-top:22px}
.title,.phero h1{font-feature-settings:"palt" 1}
/* cards: keep number, title and text on one left edge */
.feat .num,.feat h3,.feat p{transform:none}
.feat p{font-size:15px;line-height:1.95}
/* brand story chapters */
.chapter{grid-template-columns:220px 1fr;padding:64px 0}
.chapter > div:last-child{max-width:36em}
.statement{font-family:var(--serif);font-weight:600;font-size:clamp(20px,1.9vw,26px);line-height:1.7;letter-spacing:.12em;color:var(--stone);margin-bottom:20px}
.chapter .mean-list li{grid-template-columns:72px 1fr}
/* small gold labels and subtitles over photos: brighter, heavier, with a soft shadow so they read on any background */
.phero .en,.tile .badge.dim{color:#F0D9A8;font-weight:600;font-size:14px;text-shadow:0 1px 3px rgba(5,15,30,.85),0 0 18px rgba(5,15,30,.65)}
.phero p.sub,.phero h1{text-shadow:0 2px 6px rgba(5,15,30,.6),0 0 30px rgba(5,15,30,.45)}
.phero .copy{position:relative}
.phero .copy::before{content:"";position:absolute;inset:-12% -8%;z-index:-1;background:radial-gradient(ellipse at center,rgba(10,26,48,.45) 0%,rgba(10,26,48,0) 70%);pointer-events:none}
.tile .badge.dim{background:rgba(10,26,48,.45);border-color:#F0D9A8}
.phero .en{font-size:16px;font-weight:700;letter-spacing:.32em;color:#F7E6BE}
.phero .en{font-size:18px}
/* logo: remove the round glow; sit on an off-white hexagon that follows the mark's own outline, framed by a thin gold edge */
.logo-plate{background:var(--gold);clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%);aspect-ratio:.866;padding:0;max-width:300px;width:100%;justify-self:center;position:relative;display:flex;align-items:center;justify-content:center}
.logo-plate::before{content:"";position:absolute;inset:2px;background:var(--paper);clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%)}
.logo-plate img{position:relative;width:62%;height:auto;filter:none}
/* logo: no plate, only the mark's own hexagon filled off-white */
.logo-plate{background:none;clip-path:none;aspect-ratio:auto;max-width:300px}
.logo-plate::before{display:none}
.logo-plate img{width:100%}
/* mobile fixes: later desktop rules above overrode the 960px query */
@media (max-width:960px){
  .chapter{grid-template-columns:1fr;gap:14px;padding:44px 0}
  .chapter > div:last-child{max-width:none}
  .lead,.mean-list li span,.feat p,.chapter p{text-align:left}
  .chapter .mean-list li,.mean-list li{grid-template-columns:64px 1fr;gap:14px}
  .feat h3,.strip figcaption{white-space:normal}
  .logo-plate{max-width:220px}
}