/* Round 11 · 151–155 shared foundation. Concepts add their own composition in c15x.css. */
:root{--paper:#efece3;--ink:#344036;--soft:#6c7266;--gold:#ad9856;--bronze:#8a6d33;--line:#ad985659;--map-ink:var(--ink);--serif:'Noto Serif TC','Songti TC','Source Han Serif TC',serif;--sans:-apple-system,BlinkMacSystemFont,'PingFang TC','Noto Sans TC',sans-serif;--ease:cubic-bezier(.22,.7,.2,1)}
*{box-sizing:border-box}
[hidden]{display:none!important}
html{background:var(--paper)}
body{margin:0;background:var(--paper);color:var(--ink);font:14px/1.8 var(--sans);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
body,main{overflow-x:clip}
h1,h2,h3,p,figure,ul{margin:0}
ul{padding:0;list-style:none}
h1,h2,h3{font-weight:400}
img{display:block;width:100%;height:100%;object-fit:cover}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
a:focus-visible,button:focus-visible,[tabindex]:focus-visible{outline:2px solid var(--gold);outline-offset:4px}
.skip{position:fixed;left:12px;top:-80px;z-index:200;background:var(--paper);padding:12px 16px}
.skip:focus{top:12px}
.sr{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* Header: the wordmark stays; links are plain text. */
.top{position:fixed;inset:0 0 auto;z-index:40;height:84px;padding:0 4vw;display:flex;align-items:center;justify-content:space-between;pointer-events:none;background:linear-gradient(var(--paper) 30%,#efece300)}
.top>*{pointer-events:auto}
.wordmark{display:block;width:70px;height:28px}
.wordmark img{object-fit:contain}
.top nav{display:flex;align-items:center;gap:30px;font-size:12.5px;letter-spacing:.1em}
.top nav a:not(.book){color:var(--soft);transition:color .3s}
.top nav a:not(.book):hover{color:var(--ink)}
.index-link{opacity:.7}

/* Booking: text with the small gold mark. Hover adds a quiet plane, never a border or underline. */
.book{display:inline-flex;align-items:center;gap:.65em;padding:.6em .85em;margin:-.6em -.85em;color:var(--ink);font-weight:500;letter-spacing:.14em;background:#ad985600;transition:background-color .35s var(--ease),color .35s var(--ease)}
.book img{width:15px;height:13px;object-fit:contain;flex:none;transition:transform .45s var(--ease)}
.book:hover,.book:focus-visible{background:#ad98561c;color:var(--bronze)}
.book:hover img,.book:focus-visible img{transform:translateY(-1px)}
.book.lg{font-size:17px;letter-spacing:.16em;gap:.75em;padding:.75em 1em;margin:-.75em -1em}
.book.lg img{width:21px;height:18px}

/* Sticky opening shared skeleton. */
.journey{position:relative;height:calc(var(--leap-vh, 100svh) * 5)}
.stage{position:sticky;top:0;height:calc(var(--leap-vh, 100svh) * 1);overflow:hidden}
.stage .brand{position:absolute;z-index:6;pointer-events:none}
.brand h1{font:400 clamp(26px,2.4vw,34px)/1.5 var(--serif);letter-spacing:.08em}
.brand p{margin-top:14px;font-size:15px;color:var(--soft);letter-spacing:.1em}
.frame{position:absolute;overflow:hidden;z-index:3}
.shot{position:absolute;inset:0;visibility:hidden;overflow:hidden}
.shot img{transform-origin:50% 50%}
.cap{position:absolute;opacity:0;visibility:hidden;pointer-events:none;z-index:7}
.cap h2{font:400 clamp(22px,1.9vw,28px)/1.45 var(--serif);letter-spacing:.08em}
.cap p{font-size:13.5px;color:var(--soft);letter-spacing:.06em}
.flat{display:none}

/* Sections. */
.members,.closing{position:relative;min-height:calc(var(--leap-vh, 100svh) * 1)}
.section-title{font:400 clamp(24px,2.1vw,30px)/1.45 var(--serif);letter-spacing:.1em}
.price{font:400 24px/1.3 var(--serif);letter-spacing:.02em;white-space:nowrap}
.price small{font:12px var(--sans);color:var(--soft);letter-spacing:.06em}
.back{font-size:12px;color:var(--soft);letter-spacing:.08em;transition:color .3s}
.back:hover{color:var(--ink)}
.closing h2{font:400 clamp(26px,2.6vw,36px)/1.65 var(--serif);letter-spacing:.08em}

/* Membership A · 146: shared benefits on the left, three equal photographs on one shelf. */
.tiers{--ph:min(calc(var(--leap-vh, 100svh) * 0.34),22vw);position:relative;width:100%;display:grid;grid-template-columns:minmax(170px,.66fr) repeat(3,minmax(0,1fr));grid-template-rows:auto auto;column-gap:2.6vw}
.tiers::after{content:'';position:absolute;left:0;right:0;top:var(--ph);height:1px;background:var(--gold);opacity:.7;transform-origin:left;transform:scaleX(0);transition:transform 1.2s var(--ease) .1s}
.seen .tiers::after{transform:none}
.tiers .base{grid-row:1/3;grid-column:1;display:flex;flex-direction:column;height:var(--ph);padding-right:1vw}
.tiers .base h2{font:400 clamp(24px,2.1vw,30px)/1.4 var(--serif);letter-spacing:.1em}
.tiers .base-title{margin-top:auto;font-size:12px;letter-spacing:.14em;color:var(--soft)}
.tiers .base ul{margin-top:12px;font:400 19px/2 var(--serif);letter-spacing:.12em}
.tier{grid-row:1;min-width:0}
.tier[data-col="0"]{grid-column:2}.tier[data-col="1"]{grid-column:3}.tier[data-col="2"]{grid-column:4}
.tier figure{height:var(--ph);overflow:hidden}
.tier figure img{transition:transform 1.3s var(--ease)}
.tier:hover figure img{transform:scale(1.03)}
.tier .head{display:flex;justify-content:space-between;align-items:baseline;gap:12px;padding-top:20px}
.tier h3{font:400 21px/1.4 var(--serif);letter-spacing:.06em;white-space:nowrap}
.adds{grid-row:2;padding-top:12px;font-size:13px;color:var(--soft);line-height:2;transition:color .3s}
.adds[data-col="0"]{grid-column:2}.adds[data-col="1"]{grid-column:3}.adds[data-col="2"]{grid-column:4}
.adds li::before{content:'＋';color:var(--gold);margin-right:.4em}
.adds li.none::before{content:none}
.tiers:has(.tier[data-col="0"]:hover) .adds[data-col="0"],.tiers:has(.tier[data-col="1"]:hover) .adds[data-col="1"],.tiers:has(.tier[data-col="2"]:hover) .adds[data-col="2"]{color:var(--ink)}

/* Membership B · 142: photographs above an open comparison, aligned baselines. */
.compare{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));column-gap:3vw}
.compare .plan figure{height:calc(var(--leap-vh, 100svh) * 0.27);overflow:hidden}
.compare .plan-copy{padding:20px 0 22px}
.compare h3{font:400 22px/1.5 var(--serif);letter-spacing:.06em}
.compare .price{margin-top:6px}
.compare-row{grid-column:1/-1;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));column-gap:3vw;padding:12px 0;border-top:1px solid #34403622;font-size:12.5px}
.compare-row span:not(:first-child){color:var(--soft)}
.compare-row.lead span{color:var(--ink)}
@media(prefers-reduced-motion:no-preference){
  .compare .plan figure img{clip-path:inset(0 0 100% 0);transition:clip-path 1s var(--ease),transform 1.3s var(--ease)}
  .compare .plan figure.seen img{clip-path:inset(0)}
  .compare .plan:nth-child(2) figure img{transition-delay:.12s}
  .compare .plan:nth-child(3) figure img{transition-delay:.24s}
}

/* Dialog. */
.booking{border:0;padding:46px 40px 38px;width:min(92vw,480px);background:var(--paper);color:var(--ink)}
.booking::backdrop{background:#1f2b2366;backdrop-filter:blur(4px)}
.booking h2{font:400 26px/1.4 var(--serif);letter-spacing:.08em}
.booking p{margin:18px 0 26px;color:var(--soft)}
.booking .close{position:absolute;top:14px;right:18px;font-size:12px;color:var(--soft);padding:6px}

@media(max-width:1100px) and (min-width:701px){
  .tier .head{display:block}.tier h3{white-space:normal}.tier .price{margin-top:4px}
}
@media(max-width:700px){
  .top{height:68px;padding:0 20px}
  .top nav{gap:18px;font-size:12px}
  .wordmark{width:60px}
  .index-link,.top nav .opt{display:none}
  .brand h1{font-size:26px}.brand p{font-size:13px}
  .cap h2{font-size:22px}.cap p{font-size:12.5px}
  .tiers{--ph:118px;display:flex;flex-direction:column}
  .tiers::after{display:none}
  .tiers .base{height:auto;padding:0 0 18px;margin-bottom:6px;border-bottom:1px solid var(--line)}
  .tiers .base-title{margin-top:12px}
  .tiers .base ul{display:flex;gap:1.2em;margin-top:2px;font-size:16px}
  .tier{display:grid;grid-template-columns:118px minmax(0,1fr);gap:14px;margin-top:16px}
  .tier .head{display:block;padding:0}.tier h3{font-size:17px;white-space:normal}.tier .price{font-size:20px}
  .tier[data-col="0"]{order:1}.adds[data-col="0"]{order:2}.tier[data-col="1"]{order:3}.adds[data-col="1"]{order:4}.tier[data-col="2"]{order:5}.adds[data-col="2"]{order:6}
  .adds{padding:6px 0 0 132px;font-size:12px;line-height:1.8}
  .compare{column-gap:12px}
  .compare .plan figure{height:calc(var(--leap-vh, 100svh) * 0.22);min-height:110px}
  .compare .plan-copy{padding:12px 0 14px}
  .compare h3{font-size:15px;min-height:46px;line-height:1.5}
  .compare .price{font-size:19px}.compare .price small{display:block;font-size:10px}
  .compare-row{column-gap:12px;font-size:11px;line-height:1.6}
  .closing h2{font-size:26px}
  .book.lg{font-size:15px}
}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{transition:none!important;animation:none!important}
  .journey{height:auto}
  .stage{display:none}
  .flat{display:block;padding:110px 6vw 30px}
  .flat .brand{position:static;margin-bottom:48px}
  .flat figure{margin-bottom:56px}
  .flat figure img{height:calc(var(--leap-vh, 100svh) * 0.62)}
  .flat figcaption{padding-top:16px}
  .flat figcaption h2{font:400 24px/1.4 var(--serif);letter-spacing:.08em}
  .flat figcaption p{color:var(--soft)}
  .tiers::after{transform:none}
}