/* RET-01 金庭 — gold & jewellery shop after dark. Italiana (+ Noto Serif SC) + Manrope. */
.tpl-ret-01{--gut:clamp(16px,5vw,80px);--max:1240px;--pad-x:max(var(--gut),calc((100% - var(--max))/2));--r1-serif:"Italiana","Noto Serif SC",Georgia,serif;--r1-sans:"Manrope","Noto Sans SC",system-ui,sans-serif;font-family:var(--r1-sans);font-size:16px;line-height:1.8;--dock-bg:var(--soft);--dock-fg:var(--fg)}
.tpl-ret-01 h1,.tpl-ret-01 h2,.tpl-ret-01 h3{font-family:var(--r1-serif);font-weight:400;letter-spacing:.02em}
.tpl-ret-01 #main{overflow-x:clip}

.r1-head{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:6px 24px;padding:22px var(--pad-x);border-bottom:1px solid var(--line)}
.r1-brand{display:inline-flex;align-items:center;min-height:44px;font-family:var(--r1-serif);font-size:clamp(20px,2vw,26px);letter-spacing:.16em;text-decoration:none;line-height:1.2;color:var(--fg)}
.r1-nav{display:flex;flex-wrap:wrap;gap:0 2px;margin-right:-12px}
.r1-nav a{min-height:44px;display:inline-flex;align-items:center;padding:0 12px;text-decoration:none;font-size:13px;letter-spacing:.18em;color:var(--muted);transition:color .25s}
.r1-nav a:hover{color:var(--gold)}

.tpl-ret-01 #main>section{padding:clamp(80px,10vw,150px) var(--pad-x)}
.r1-kicker{display:flex;align-items:center;gap:14px;margin:0 0 26px;font-size:11.5px;font-weight:600;letter-spacing:.3em;text-transform:uppercase;color:var(--gold)}
.r1-kicker span{width:36px;height:1px;background:var(--gold);flex:none}
.tpl-ret-01 #main h2{font-size:clamp(32px,4vw,58px);line-height:1.22}
.r1-intro{color:var(--muted);max-width:30em}
.r1-intro p:last-child{margin:0}
.r1-sec-head{max-width:760px;margin:0 0 clamp(48px,6vw,84px)}
.r1-sec-head .r1-intro{margin-top:20px}
.r1-sec-head--split{display:grid;grid-template-columns:1.2fr 1fr;align-items:end;gap:24px 64px;max-width:none}
.r1-sec-head--split .r1-intro{margin:0 0 6px;justify-self:end}

.r1-btn{display:inline-flex;align-items:center;justify-content:center;min-height:54px;padding:12px 34px;background:var(--accent);color:var(--on-accent);text-decoration:none;font-size:14px;font-weight:600;letter-spacing:.14em;text-align:center;border:1px solid var(--accent);transition:background .3s,color .3s}
.r1-btn:hover{background:transparent;color:var(--accent)}

/* hero: the vitrine */
.r1-hero{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:center;gap:clamp(40px,6vw,96px);padding-top:clamp(56px,7vw,110px)!important}
.r1-hero h1{font-size:clamp(44px,5.6vw,88px);line-height:1.16;margin-bottom:30px}
.r1-sub{color:var(--muted);max-width:26em;font-size:16.5px;margin-bottom:40px}
.r1-sub p:last-child{margin:0}
.r1-hero-art{position:relative;isolation:isolate;padding:0 0 0 clamp(20px,4vw,56px)}
.r1-case{position:relative;margin:0}
.r1-case img{width:100%;aspect-ratio:4/5;object-fit:cover;object-position:50% 30%}
.r1-case::after{content:"";position:absolute;inset:14px;border:1px solid var(--gold);opacity:.55;pointer-events:none}
.r1-ring{position:absolute;z-index:2;left:0;bottom:12%;width:clamp(120px,15vw,210px);aspect-ratio:1;border-radius:50%;border:1px solid var(--gold);box-shadow:0 0 0 6px transparent,inset 0 0 0 5px var(--bg),inset 0 0 0 6px var(--gold);pointer-events:none}
.r1-hero--text{grid-template-columns:1fr}
.r1-hero--text .r1-hero-copy{max-width:860px}

/* about: welcome ritual */
.r1-about{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:clamp(40px,7vw,120px);align-items:center;background:var(--soft)}
.r1-about--text{grid-template-columns:minmax(0,760px)}
.r1-about-img{margin:0;position:relative;overflow:hidden;outline:1px solid var(--gold);outline-offset:-12px}
.r1-about-img img{width:100%;aspect-ratio:4/5;object-fit:cover}
.r1-about h2{margin-bottom:40px}
.r1-steps{display:grid;border-top:1px solid var(--line)}
.r1-steps li{display:grid;grid-template-columns:56px 1fr;align-items:baseline;gap:16px;padding:20px 0;border-bottom:1px solid var(--line);font-size:16.5px;line-height:1.6}
.r1-rn{font-family:"Italiana",Georgia,serif;font-size:24px;color:var(--gold);letter-spacing:.06em}
.r1-about-body{color:var(--muted);max-width:32em}

/* services: collection index */
.r1-index{border-top:1px solid var(--gold)}
.r1-row{display:grid;grid-template-columns:80px minmax(0,4fr) minmax(0,5fr) auto;align-items:baseline;gap:12px 32px;padding:30px 0;border-bottom:1px solid var(--line);transition:background .3s}
.r1-no{font-family:"Italiana",Georgia,serif;font-size:26px;color:var(--gold)}
.r1-row h3{font-size:clamp(22px,2.1vw,30px);line-height:1.3}
.r1-row-desc{color:var(--muted)}
.r1-row-desc p{margin:0}
.r1-price{color:var(--fg);margin-top:6px!important}
.r1-ask{display:inline-flex;align-items:center;gap:8px;min-height:44px;font-size:12.5px;font-weight:600;letter-spacing:.2em;text-decoration:none;color:var(--gold);white-space:nowrap}
.r1-ask span{transition:transform .3s}
.r1-ask:hover span{transform:translateX(4px)}

/* gallery: vitrine with hanging tags */
.r1-gal{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(16px,2.4vw,32px)}
.r1-gal--4 .r1-g--0{grid-row:span 2}
.r1-gal--4 .r1-g--3{grid-column:span 2}
.r1-g{margin:0;display:flex;flex-direction:column;min-width:0}
.r1-g-img{position:relative;overflow:hidden;flex:1;min-height:0}
.r1-g-img::after{content:"";position:absolute;inset:10px;border:1px solid var(--gold);opacity:.4;pointer-events:none}
.r1-g img{width:100%;height:100%;aspect-ratio:1;object-fit:cover;transition:transform 1s ease}
.r1-gal--4 .r1-g--0 img{aspect-ratio:auto;min-height:100%}
.r1-gal--4 .r1-g--3 img{aspect-ratio:2.1/1}
.r1-g:hover img{transform:scale(1.04)}
.r1-g figcaption{margin-top:14px}
.r1-tag{display:inline-flex;align-items:center;gap:10px;font-size:12.5px;letter-spacing:.16em;color:var(--muted)}
.r1-tag::before{content:"";width:7px;height:7px;border-radius:50%;border:1px solid var(--gold);flex:none}

.r1-quote-list{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));gap:clamp(24px,4vw,56px)}
.r1-quote-list blockquote{font-family:var(--r1-serif);font-size:clamp(20px,1.8vw,24px);line-height:1.6}
.r1-quote-list figcaption{margin-top:14px;font-size:12px;letter-spacing:.2em;color:var(--gold)}

/* faq */
.r1-faq{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,7fr);gap:40px clamp(40px,7vw,120px);align-items:start;border-top:1px solid var(--line)}
.r1-faq-list{border-top:1px solid var(--gold)}
.r1-faq-list details{border-bottom:1px solid var(--line)}
.r1-faq-list summary{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:68px;padding:18px 0;font-family:"Noto Serif SC",Georgia,serif;font-size:17.5px;line-height:1.5}
.r1-faq-list summary::after{float:none;margin:0;color:var(--gold);font-weight:300;font-size:24px}
.r1-faq-list details p{margin:0;max-width:36em;padding:0 0 24px;color:var(--muted)}

/* contact: a ring */
.r1-contact{text-align:center;background:var(--soft)}
.r1-close{position:relative;isolation:isolate;display:grid;justify-items:center;max-width:780px;margin:0 auto;padding:clamp(40px,6vw,80px) 0}
.r1-close-ring{position:absolute;z-index:-1;left:50%;top:50%;width:min(560px,92vw);aspect-ratio:1;transform:translate(-50%,-50%);border-radius:50%;border:1px solid var(--gold);opacity:.45}
.r1-close-ring::after{content:"";position:absolute;inset:10px;border-radius:50%;border:1px solid var(--gold);opacity:.6}
.r1-close .r1-kicker{justify-content:center}
.r1-close .r1-kicker span:first-child{display:none}
.r1-contact h2{font-size:clamp(34px,4.6vw,64px)!important}
.r1-contact-intro{color:var(--muted);max-width:28em;margin:26px auto 38px}
.r1-contact-intro p:last-child{margin:0}
.r1-contact-info{display:grid;gap:14px;justify-items:center;margin-top:clamp(40px,5vw,72px)}
.r1-contact-list{display:flex;flex-wrap:wrap;justify-content:center;gap:14px 48px}
.r1-contact-list .bc-k{color:var(--gold);opacity:1;font-size:11px}
.r1-contact-list a{display:inline-flex;align-items:center;min-height:44px}
.r1-social{display:flex;flex-wrap:wrap;justify-content:center;gap:4px 20px}
.r1-social a{min-height:44px;display:inline-flex;align-items:center;font-size:12px;letter-spacing:.2em;text-decoration:none;color:var(--muted)}

.r1-foot{display:flex;flex-wrap:wrap;justify-content:space-between;gap:10px 24px;padding:32px var(--pad-x) 40px;font-size:12.5px;letter-spacing:.14em;color:var(--muted);border-top:1px solid var(--line)}
.r1-foot-brand{font-family:var(--r1-serif);font-size:18px;letter-spacing:.16em;color:var(--fg)}

@media (max-width:960px){
  .r1-row{grid-template-columns:56px minmax(0,1fr) auto;row-gap:6px}
  .r1-row-desc{grid-column:2/3}
  .r1-ask{grid-column:3;grid-row:1}
}
@media (max-width:860px){
  .r1-hero{grid-template-columns:1fr;gap:48px}
  .r1-hero-art{padding:0 0 0 22px}
  .r1-about{grid-template-columns:1fr}
  .r1-about-img img{aspect-ratio:5/4}
  .r1-sec-head--split{grid-template-columns:1fr}
  .r1-sec-head--split .r1-intro{justify-self:start}
  .r1-gal{grid-template-columns:1fr 1fr}
  .r1-gal--4 .r1-g--0{grid-row:auto;grid-column:span 2}
  .r1-gal--4 .r1-g--0 img{aspect-ratio:4/3;min-height:0}
  .r1-gal--4 .r1-g--3 img{aspect-ratio:2/1}
  .r1-faq{grid-template-columns:1fr}
}
@media (max-width:560px){
  .r1-head{justify-content:center;text-align:center}
  .r1-nav{justify-content:center;margin:0}
  .r1-nav a{padding:0 9px;letter-spacing:.1em}
  .r1-hero h1{font-size:clamp(38px,11vw,48px)}
  .r1-kicker{letter-spacing:.18em;gap:10px}
  .r1-kicker span{width:22px}
  .r1-btn{width:100%}
  .r1-row{grid-template-columns:40px minmax(0,1fr);padding:24px 0}
  .r1-no{font-size:21px}
  .r1-row-desc,.r1-ask{grid-column:2;grid-row:auto}
  .r1-ask{justify-self:start}
  .r1-steps li{grid-template-columns:40px 1fr}
  .r1-ring{width:96px}
  .r1-g-img::after{inset:6px}
}