/* STY-03 老城旅宿 — heritage shophouse stay */
.tpl-sty-03{
  --gut:clamp(16px,5vw,80px);
  --cas:"Libre Caslon Text","Noto Serif SC",Georgia,serif;
  --hz:"Noto Serif SC","Libre Caslon Text",Georgia,serif;
  --sans:"DM Sans","Noto Sans SC",system-ui,sans-serif;
  font-family:var(--sans);font-size:16.5px;
}
.tpl-sty-03 main{overflow-x:clip}
.s3-defs{position:absolute;width:0;height:0;overflow:hidden}
/* tile colours come from the palette */
.s3-tb{fill:var(--bg)}
.s3-tc circle,circle.s3-tc{fill:var(--soft)}
.s3-tk circle{fill:var(--accent)}
.s3-tp ellipse{fill:var(--accent)}
.s3-tl path{stroke:var(--fg);stroke-width:1.2;opacity:.55;fill:none}
.s3-tr{fill:none;stroke:var(--fg);stroke-opacity:.18}
.s3-strip{display:block;width:100%;height:64px;border-block:3px solid var(--fg)}

.s3-kicker{display:flex;align-items:center;gap:14px;margin:0 0 18px;font-size:12.5px;font-weight:700;letter-spacing:.18em;text-transform:uppercase}
.s3-kicker span{font-family:var(--cas);font-style:italic;font-weight:400;font-size:15px;letter-spacing:.02em;text-transform:none;color:var(--accent);padding-right:14px;border-right:1px solid var(--line)}
.s3-h2{font-family:var(--cas);font-weight:400;font-size:clamp(32px,4.4vw,64px);line-height:1.08;letter-spacing:-.02em}
:lang(zh-Hans) .s3-h2{font-family:var(--hz);font-weight:600;line-height:1.25;letter-spacing:.01em}
.s3-intro{color:var(--muted);font-size:17px;max-width:30em}
.s3-intro p:last-child{margin:0}
.s3-btn{display:inline-flex;align-items:center;justify-content:center;min-height:56px;padding:0 30px;background:var(--accent);color:var(--on-accent);text-decoration:none;font-weight:700;font-size:15.5px;letter-spacing:.02em;text-align:center;border:2px solid var(--fg);box-shadow:5px 5px 0 var(--fg);transition:transform .15s,box-shadow .15s}
.s3-btn:hover{transform:translate(2px,2px);box-shadow:3px 3px 0 var(--fg)}
.s3-link{display:inline-flex;align-items:center;min-height:48px;font-weight:700;text-decoration:none;border-bottom:2px solid var(--soft)}

/* ---- header ---- */
.s3-head{display:flex;align-items:center;justify-content:space-between;gap:4px 28px;flex-wrap:wrap;padding:12px var(--gut);border-bottom:3px solid var(--fg);max-width:none}
.s3-brand{font-family:var(--hz);font-weight:600;font-size:clamp(19px,1.7vw,23px);letter-spacing:.04em;text-decoration:none;min-height:44px;display:flex;align-items:center}
.s3-nav{display:flex;flex-wrap:wrap;gap:0 clamp(4px,1.6vw,22px);font-size:14.5px;font-weight:600}
.s3-nav a{min-height:44px;display:inline-flex;align-items:center;padding:0 6px;text-decoration:none;background:linear-gradient(var(--soft),var(--soft)) 0 82%/0 8px no-repeat;transition:background-size .25s}
.s3-nav a:hover{background-size:100% 8px}

/* ---- hero ---- */
.s3-hero{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(36px,6vw,104px);align-items:center;padding:clamp(40px,6vw,96px) var(--gut) clamp(56px,7vw,112px);max-width:1520px;margin:0 auto}
.s3-hero--text{grid-template-columns:minmax(0,1fr)}
.s3-eyebrow{display:inline-block;margin:0 0 clamp(20px,2.4vw,32px);padding:8px 14px;background:var(--fg);color:var(--bg);font-size:12px;font-weight:700;letter-spacing:.16em;text-transform:uppercase}
.s3-hero h1{font-family:var(--cas);font-weight:400;font-size:clamp(48px,7.6vw,132px);line-height:1;letter-spacing:-.03em}
:lang(zh-Hans) .s3-hero h1{font-family:var(--hz);font-weight:600;line-height:1.12;letter-spacing:0;font-size:clamp(46px,7vw,118px)}
.s3-sub{margin-top:clamp(20px,2.4vw,32px);max-width:28em;font-size:clamp(17px,1.4vw,19.5px);line-height:1.8;color:var(--muted);padding-left:18px;border-left:4px solid var(--soft)}
.s3-sub p:last-child{margin:0}
.s3-actions{display:flex;flex-wrap:wrap;align-items:center;gap:16px 28px;margin-top:clamp(28px,3vw,40px)}
.s3-hero-art{position:relative;justify-self:end;width:min(100%,660px);padding-left:clamp(36px,4vw,64px)}
.s3-frame{position:relative;padding:clamp(14px,1.6vw,22px);border:3px solid var(--fg)}
.s3-frame-tiles{position:absolute;inset:0;width:100%;height:100%}
.s3-hero-ph{position:relative;border:3px solid var(--fg);overflow:hidden}
.s3-hero-ph img{width:100%;aspect-ratio:4/5;object-fit:cover}
.s3-sign{position:absolute;left:0;top:12%;margin:0;padding:6px;background:var(--fg);box-shadow:6px 6px 0 color-mix(in srgb,var(--fg) 25%,transparent)}
.s3-sign span{display:block;writing-mode:vertical-rl;padding:22px 12px;border:2px solid var(--soft);background:var(--accent);color:var(--soft);font-family:var(--hz);font-weight:600;font-size:clamp(24px,2.4vw,34px);letter-spacing:.32em;line-height:1}

/* ---- sections ---- */
:where(.tpl-sty-03 main>section:not(.s3-hero)){padding:clamp(72px,10vw,144px) var(--gut)}
.tpl-sty-03 main>section>*{max-width:1360px;margin-left:auto;margin-right:auto}
.s3-sec-head{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:18px clamp(24px,5vw,80px);align-items:end;margin-bottom:clamp(36px,5vw,72px);padding-bottom:clamp(20px,2.4vw,32px);border-bottom:3px solid var(--fg)}

/* ---- about ---- */
.s3-about{display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(40px,7vw,120px);align-items:center}
.s3-about--img{grid-template-columns:minmax(0,5fr) minmax(0,7fr)}
.tpl-sty-03 main>.s3-about>*{margin:0}
.s3-about-fig{position:relative;padding:0 clamp(18px,2vw,28px) clamp(18px,2vw,28px) 0}
.s3-about-fig::before{content:"";position:absolute;inset:clamp(18px,2vw,28px) 0 0 clamp(18px,2vw,28px);background:var(--soft);border:3px solid var(--fg)}
.s3-about-ph{position:relative;overflow:hidden;border:3px solid var(--fg)}
.s3-about-ph img{width:100%;aspect-ratio:4/5;object-fit:cover}
.s3-about-copy{max-width:40rem}
.s3-about-body{margin-top:clamp(24px,3vw,40px);font-size:17.5px;line-height:1.9;color:var(--muted)}
.s3-about-body p:first-child::first-letter{float:left;font-family:var(--hz);font-weight:600;font-size:3.4em;line-height:1;margin:.08em .14em 0 0;padding:.08em .14em;background:var(--accent);color:var(--on-accent)}
.s3-about-body p:last-child{margin:0}

/* ---- rooms: key tags on ochre ---- */
.tpl-sty-03 main>.s3-rooms{background:var(--soft);color:var(--fg);border-block:3px solid var(--fg)}
.s3-rooms .s3-kicker span{color:var(--fg);border-color:color-mix(in srgb,var(--fg) 35%,transparent)}
.s3-rooms .s3-intro{color:var(--fg)}
.s3-keys{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,212px),1fr));gap:clamp(16px,1.8vw,24px)}
.s3-key{position:relative;display:flex;flex-direction:column;align-items:flex-start;padding:56px clamp(22px,2.2vw,30px) clamp(22px,2.2vw,30px);background:var(--bg);border:3px solid var(--fg);border-radius:0 0 28px 28px;box-shadow:6px 6px 0 var(--fg);transition:transform .2s}
.s3-key:nth-child(even){transform:rotate(.8deg)}
.s3-key:nth-child(odd){transform:rotate(-.6deg)}
.s3-key:hover{transform:rotate(0) translateY(-4px)}
.s3-key-hole{position:absolute;top:16px;left:50%;width:18px;height:18px;margin-left:-9px;border-radius:50%;background:var(--soft);border:3px solid var(--fg)}
.s3-key-no{display:flex;align-items:baseline;gap:4px;font-family:var(--cas);font-style:italic;font-size:16px;color:var(--accent);margin-bottom:12px}
.s3-key-no b{font-style:normal;font-weight:700;font-size:44px;line-height:1;letter-spacing:-.02em}
.s3-key h3{font-family:var(--hz);font-weight:600;font-size:clamp(21px,1.8vw,25px);line-height:1.3;margin-bottom:10px}
.s3-key p{color:var(--muted);margin-bottom:18px}
.s3-price{color:var(--fg)!important;font-weight:700}
.s3-ask{margin-top:auto;display:inline-flex;align-items:center;min-height:46px;padding:0 18px;border:2px solid var(--fg);text-decoration:none;font-weight:700;font-size:14px;transition:background .2s,color .2s}
.s3-ask:hover{background:var(--fg);color:var(--bg)}

/* ---- gallery: figures ---- */
.s3-figs{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:clamp(36px,5vw,72px) clamp(16px,2.4vw,36px);align-items:start}
.s3-fig{min-width:0}
.s3-fig-ph{overflow:hidden;border:3px solid var(--fg)}
.s3-fig img{width:100%;object-fit:cover}
.s3-fig0{grid-column:1/8}.s3-fig0 img{aspect-ratio:3/2}
.s3-fig1{grid-column:8/13;margin-top:clamp(40px,8vw,120px)}.s3-fig1 img{aspect-ratio:4/5}
.s3-fig2{grid-column:2/7;margin-top:calc(clamp(40px,8vw,120px) * -1)}.s3-fig2 img{aspect-ratio:4/5}
.s3-fig3{grid-column:7/13}.s3-fig3 img{aspect-ratio:3/2}
.s3-fig figcaption{display:flex;gap:12px;align-items:baseline;margin-top:12px;font-size:15px;font-weight:500}
.s3-fig figcaption span{font-family:var(--cas);font-style:italic;color:var(--accent);white-space:nowrap}

/* ---- testimonials ---- */
.s3-quote-list{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),1fr));gap:24px}
.s3-quote-list figure{padding:28px;border:3px solid var(--fg);box-shadow:6px 6px 0 var(--soft)}
.s3-quote-list blockquote{font-family:var(--cas);font-size:clamp(19px,1.6vw,23px);line-height:1.6}
.s3-quote-list figcaption{margin-top:14px;font-weight:700;font-size:14px}
.s3-quote-list figcaption span{font-weight:500;color:var(--muted)}

/* ---- faq ---- */
.tpl-sty-03 main>.s3-faq{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(28px,6vw,104px);max-width:1360px;margin:0 auto;border-top:0}
.tpl-sty-03 main>.s3-faq>*{margin:0}
.s3-faq-list{counter-reset:q;border-top:3px solid var(--fg)}
.s3-faq-list details{border-bottom:1px solid var(--line);counter-increment:q}
.s3-faq-list summary{display:flex;align-items:center;gap:18px;min-height:74px;padding:18px 0;font-family:var(--hz);font-size:clamp(18px,1.5vw,21px);font-weight:600}
.s3-faq-list summary::before{content:counter(q,decimal-leading-zero);font-family:var(--cas);font-style:italic;font-weight:400;font-size:15px;color:var(--accent);min-width:2em}
.s3-faq-list summary::after{margin-left:auto;float:none;flex:none;display:grid;place-items:center;width:36px;height:36px;border:2px solid var(--fg);font-family:var(--sans);font-size:18px}
.s3-faq-list details[open] summary::after{background:var(--soft)}
.s3-faq-list details p{margin:0 0 24px calc(2em + 18px);color:var(--muted);max-width:38em}

/* ---- contact (jade) ---- */
.tpl-sty-03 main>.s3-contact{background:var(--accent);color:var(--on-accent);padding-top:0;border-top:3px solid var(--fg)}
.tpl-sty-03 main>.s3-contact>.s3-strip--in{max-width:none;margin:0 calc(var(--gut) * -1) clamp(56px,8vw,112px);width:calc(100% + 2 * var(--gut));border-top:0}
.s3-contact-in{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:clamp(32px,6vw,96px);align-items:end}
.s3-contact .s3-kicker span{color:inherit;border-color:color-mix(in srgb,var(--on-accent) 40%,transparent)}
.s3-contact .s3-h2{font-size:clamp(42px,6.4vw,100px)}
.s3-contact-intro{margin-top:18px;max-width:28em;font-size:17.5px;opacity:.92}
.s3-contact-intro p:last-child{margin:0}
.s3-btn--light{margin-top:24px;background:var(--on-accent);color:var(--fg);border-color:var(--fg);box-shadow:5px 5px 0 var(--fg)}
.s3-contact-info:empty{display:none}
.s3-contact-list{border-top:2px solid color-mix(in srgb,var(--on-accent) 50%,transparent)}
.s3-contact-list li{padding:14px 0;border-bottom:1px solid color-mix(in srgb,var(--on-accent) 30%,transparent)}
.s3-contact-list .bc-k{opacity:.85}
.s3-contact-list a{display:inline-flex;align-items:center;min-height:44px;margin:-8px 0;font-weight:700;font-size:17px}
.s3-social{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px}
.s3-social a{display:inline-flex;align-items:center;min-height:44px;padding:0 16px;border:2px solid color-mix(in srgb,var(--on-accent) 60%,transparent);text-decoration:none;font-weight:600}

/* ---- footer ---- */
.s3-foot{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 18px;padding:26px var(--gut) 34px;background:var(--fg);color:var(--bg);font-size:14px}
.s3-foot-brand{font-family:var(--hz);font-weight:600;font-size:19px;margin-right:auto;letter-spacing:.04em}

/* ---- responsive ---- */
@media (max-width:860px){
  .s3-hero{grid-template-columns:minmax(0,1fr)}
  .s3-hero-art{justify-self:center;width:min(100%,500px)}
  .s3-about--img{grid-template-columns:minmax(0,1fr)}
  .s3-about-fig{max-width:460px}
  .s3-sec-head{grid-template-columns:minmax(0,1fr)}
  .tpl-sty-03 main>.s3-faq{grid-template-columns:minmax(0,1fr)}
  .s3-contact-in{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:760px){
  .s3-head{padding-top:8px;padding-bottom:4px}
  .s3-nav{margin-left:-6px;font-size:13.5px;gap:0 6px}
  .s3-hero{padding-top:28px}
  .s3-sub{padding-left:14px}
  .s3-hero-art{padding-left:30px}
  .s3-sign{top:8%}
  .s3-sign span{font-size:22px;padding:16px 8px}
  .s3-strip{height:48px}
  .s3-key{transform:none!important}
  .s3-figs{gap:28px 12px}
  .s3-fig0,.s3-fig3{grid-column:1/-1}
  .s3-fig1{grid-column:1/7;margin-top:0}
  .s3-fig2{grid-column:7/13;margin-top:48px}
  .s3-fig figcaption{flex-direction:column;gap:2px;font-size:14px}
  .s3-faq-list details p{margin-left:0}
}