:root {
  --bg-atelier: #f8f0e6;
  --ink-title: #713b30;
  --ink-body: #644c40;
  --ink-sub: #927b6a;
  --rose-accent: #8c4237;
  --font-serif: "Noto Serif SC", "Source Han Serif SC", "Songti SC", STSong, SimSun, serif;
}
*, *::before, *::after { box-sizing: border-box; }
body { margin: 0; }
body.atelier-body {
  color: var(--ink-body);
  background: var(--bg-atelier);
  font-family: var(--font-serif);
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
}
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; }
a:focus-visible, button:focus-visible { outline: 2px solid var(--rose-accent); outline-offset: 3px; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); border: 0; }
.site-header { position: relative; z-index: 2; background: #f8efe5; }
.site-header::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 14%;
  background: url('../assets/atelier-reference.png') left top / 100vw auto no-repeat;
  pointer-events: none;
}
.header-container {
  min-height: 4.1vw;
  padding: 0 2.1% 0 14%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.brand-zone { display: flex; align-items: center; gap: .7vw; white-space: nowrap; }
.brand-title { font-size: clamp(18px, 1.94vw, 32px); font-weight: 400; color: var(--ink-title); letter-spacing: .1em; }
.brand-divider { color: #a7836e; font-size: 1.2vw; }
.brand-desc { color: var(--ink-sub); font-size: clamp(9px, .94vw, 16px); letter-spacing: .08em; }
.nav-links { position: absolute; left: 59%; display: flex; align-items: center; gap: 2vw; flex-shrink: 0; }
.nav-links a { display: flex; align-items: center; min-height: 42px; white-space: nowrap; font-size: clamp(11px, 1.07vw, 18px); }
.nav-links a:hover, .brand-title:hover, .footer-make:hover { color: #9f463b; }
.header-right { flex-shrink: 0; }
.header-quote { display: block; font-size: clamp(9px, .84vw, 14px); line-height: 1.6; letter-spacing: .13em; transform: rotate(-5deg); color: var(--ink-sub); }
.header-make-link { display: none; }
.hero-atelier { overflow: hidden; }
.hero-intro { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); }
.hero-stage { position: relative; width: 100%; aspect-ratio: 1024 / 315; }
.hero-stage-img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center; }
.hero-hotspots { position: absolute; inset: 0; pointer-events: none; }
.hero-hotspot { position: absolute; pointer-events: auto; display: flex; align-items: flex-end; justify-content: center; border-radius: 5px; }
.hotspot-envelope { left: 11%; top: 26%; width: 34%; height: 67%; }
.hotspot-scratch { left: 45%; top: 42%; width: 23%; height: 51%; }
.hotspot-vinyl { left: 77%; top: 17%; width: 18%; height: 50%; }
.hotspot-pin { display: none; }
.hotspot-badge { opacity: 0; padding: 6px 12px; margin-bottom: 12px; color: #fff8ed; background: #63392bd9; font-size: 12px; transition: opacity .2s; }
.hero-hotspot:hover .hotspot-badge, .hero-hotspot:focus-visible .hotspot-badge { opacity: 1; }
.showcase-section { padding: .78vw 2.05vw 0; background: #f8f0e6; }
.showcase-row { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: .98vw; }
.keepsake-card { min-width: 0; cursor: pointer; border: 1px solid #decbb826; scroll-margin-top: 20px; }
.keepsake-frame { position: relative; }
.keepsake-art { position: relative; aspect-ratio: 310 / 198; overflow: hidden; background: #e2cbb3; border-radius: 2px 2px 0 0; }
/* Reuse the approved artwork; crop only the photographic region, keeping captions as HTML. */
.keepsake-card { --crop-width: 310; }
#gift-envelope { --crop-x: 34; }
#gift-vinyl { --crop-x: 360; }
#gift-scratch { --crop-x: 687; --crop-width: 299; }
#gift-birthday { --crop-x: 1003; }
#gift-cyber { --crop-x: 1329; }
.keepsake-frame img {
  position: absolute;
  width: calc(1672 / var(--crop-width) * 100%);
  height: calc(941 / 198 * 100%);
  max-width: none;
  left: calc(var(--crop-x) / var(--crop-width) * -100%);
  top: calc(-598 / 198 * 100%);
}
.card-hover-actions {
  position: absolute;
  inset: auto 0 0;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 5px;
  padding: 15px 5px 7px;
  background: linear-gradient(transparent, #3f251ce8);
  opacity: 0;
  transition: opacity .2s;
}
.keepsake-card:hover .card-hover-actions, .keepsake-card:focus-within .card-hover-actions { opacity: 1; }
.btn-card-demo, .btn-card-make, .btn-card-qr {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 32px;
  padding: 4px 7px;
  font-size: 11px;
  white-space: nowrap;
  border: 1px solid #e5cdb280;
  border-radius: 2px;
  background: #fcf2e5;
  color: #663b30;
}
.btn-card-demo { background: #803c32; color: #fff6ea; }
.btn-card-demo:hover { background: #652e27; }
.btn-card-make:hover, .btn-card-qr:hover { background: #fffaf2; }
.keepsake-caption { text-align: center; padding: .75vw .2vw .65vw; }
.keepsake-title { font-size: clamp(12px, 1.23vw, 21px); font-weight: 400; line-height: 1.5; letter-spacing: .025em; margin: 0; color: var(--ink-title); }
.keepsake-divider { width: 20px; height: 1px; background: #b39178; margin: .38vw auto .45vw; }
.keepsake-desc { font-size: clamp(8px, .84vw, 14px); letter-spacing: .03em; line-height: 1.6; color: var(--ink-sub); margin: 0; }
.atelier-footer { padding: 1.05vw 2.05vw .8vw; background: #f8f0e6; }
.gift-section-heading { text-align:center; padding:24px 16px 28px; }
.heading-flower { display:block; color:#b18a61; font-size:20px; margin-bottom:12px; }
.gift-section-heading h2 { font-size:clamp(21px,2vw,30px); font-weight:400; color:var(--ink-title); letter-spacing:.09em; line-height:1.7; margin:0 0 10px; }
.gift-section-heading p { font-size:13px; line-height:1.9; letter-spacing:.06em; color:#8b6f5c; margin:0; }
.occasion-section { margin:30px 2.05vw 0; padding:12px 0 26px; border-top:1px solid #b3917840; scroll-margin-top:16px; }
.occasion-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:18px; }
.occasion-card { min-width:0; }
.occasion-cover { display:block; position:relative; aspect-ratio:.76; overflow:hidden; color:#fff0db; background:#41242b; }
.occasion-cover::after { content:""; position:absolute; inset:0; background:linear-gradient(#210b166e,transparent 52%,#210b16a6); pointer-events:none; }
.occasion-art { position:absolute; width:100%; height:100%; inset:0; transition:transform .8s ease; }
.occasion-cover:hover .occasion-art { transform:scale(1.035); }
.occasion-copy { position:relative; z-index:1; height:100%; padding:25px 22px 18px; display:flex; flex-direction:column; align-items:flex-start; text-shadow:0 2px 12px #210b1666; }
.occasion-name { font-size:12px; letter-spacing:.15em; color:#ffdfb1; }
.occasion-copy h3 { font-weight:400; font-size:clamp(23px,2.25vw,36px); line-height:1.55; letter-spacing:.04em; margin:20px 0 12px; }
.occasion-copy p { font-size:12px; line-height:1.9; margin:0; }
.occasion-open { margin-top:auto; min-height:44px; display:flex; align-items:center; gap:18px; font-size:12px; letter-spacing:.08em; border-bottom:1px solid #f8d9ad70; }
.occasion-open span { font-size:20px; }
.occasion-actions { display:flex; align-items:center; justify-content:space-between; gap:10px; padding:6px 10px; border-bottom:1px solid #b3917833; }
.occasion-actions a,.occasion-actions button { display:inline-flex; align-items:center; min-height:44px; padding:8px 4px; font-size:12px; color:#784c3e; background:none; border:0; }
.occasion-actions button { color:#8b7361; }
.occasion-actions a:hover,.occasion-actions button:hover { color:#a23e3d; }
.occasion-collection-link { display:flex; align-items:center; justify-content:center; min-height:44px; width:fit-content; margin:24px auto 0; padding:8px 12px; font-size:12px; letter-spacing:.1em; color:#927b6a; }
@media (min-width:901px) and (max-width:1100px) {
  .occasion-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:24px; }
  .occasion-cover { aspect-ratio:1.12; }
  .occasion-copy h3 { font-size:32px; }
}
.footer-container { display: flex; align-items: center; justify-content: center; position: relative; min-height: 18px; }
.footer-center, .footer-wish, .footer-make { font-size: clamp(9px, .93vw, 16px); color: var(--ink-sub); letter-spacing: .15em; }
.footer-wish { position: absolute; right: 0; }
.footer-make { position: absolute; left: 0; letter-spacing: .05em; }
.qr-modal { position: fixed; inset: 0; z-index: 100; padding: 20px; background: #302018a6; display: flex; align-items: center; justify-content: center; visibility: hidden; opacity: 0; transition: opacity .2s, visibility .2s; }
.qr-modal.active { visibility: visible; opacity: 1; }
.qr-dialog { position: relative; width: 100%; max-width: 380px; padding: 32px 24px; background: #fcf5ea; text-align: center; }
.qr-close { position: absolute; right: 4px; top: 4px; width: 44px; height: 44px; border: 0; background: transparent; color: var(--ink-title); font-size: 26px; }
.qr-title { color: var(--ink-title); font-size: 20px; margin: 0 0 12px; }
.qr-desc, .qr-note { font-size: 13px; line-height: 1.7; }
.qr-canvas-box { display: inline-block; padding: 12px; background: white; }
.qr-canvas-box svg { display: block; width: 180px; height: 180px; }
@media (min-width: 1800px) {
  .header-container { min-height: 74px; }
}
@media (max-width: 900px) {
  .header-container { min-height: 64px; padding: 8px 20px 0; flex-wrap: wrap; gap: 0; }
  .site-header::before, .brand-divider, .brand-desc, .header-quote { display: none; }
  .brand-title { display: inline-flex; align-items: center; min-height: 44px; font-size: 19px; }
  .header-right { order: 1; }
  .header-make-link { display: inline-flex; min-height: 44px; align-items: center; font-size: 12px; color: var(--ink-title); }
  .nav-links { position: static; order: 2; width: 100%; justify-content: center; gap: 36px; border-bottom: 1px solid #b3917826; }
  .nav-links a { font-size: 14px; min-height: 44px; }
  .hero-intro { position: static; width: auto; height: auto; margin: 0; padding: 26px 16px 22px; overflow: visible; clip-path: none; text-align: center; }
  .hero-intro h1 { margin: 0; color: var(--ink-title); font-size: clamp(22px, 5.8vw, 30px); line-height: 1.6; font-weight: 400; letter-spacing: .03em; }
  .hero-intro h1 span { display: block; }
  .hero-intro p { margin: 12px 0 0; font-size: 13px; line-height: 1.8; color: var(--ink-sub); }
  .hero-stage { width: auto; margin: 0 16px; aspect-ratio: 2.35; overflow: hidden; border-radius: 8px; }
  .hero-stage-img { position: absolute; width: 205%; max-width: none; height: auto; left: -52.5%; bottom: 0; }
  .hero-hotspots { display: none; }
  .showcase-section { padding: 28px 16px 0; }
  .showcase-row { grid-template-columns: repeat(2, minmax(0,1fr)); gap: 16px 12px; }
  .gift-section-heading { text-align: left; padding: 0 0 20px; }
  .heading-flower { display: none; }
  .gift-section-heading h2 { font-size: 20px; letter-spacing: .02em; line-height: 1.6; margin-bottom: 8px; text-wrap: balance; }
  .gift-section-heading p { font-size: 13px; max-width: 36em; margin: 0; line-height: 1.8; }
  .occasion-section { margin: 32px 16px 0; padding-top: 28px; }
  .occasion-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:20px 12px; }
  .occasion-copy { padding:20px 14px 14px; }
  .occasion-copy h3 { font-size:clamp(21px,3.8vw,30px); letter-spacing:0; margin:16px 0 10px; }
  .occasion-name { font-size:11px; letter-spacing:.05em; }
  .occasion-copy p { font-size:11px; }
  .occasion-open { font-size:11px; gap:8px; }
  .occasion-actions { padding:4px 0; gap:4px; }
  .occasion-actions a,.occasion-actions button { font-size:11px; }
  .keepsake-card { display: flex; flex-direction: column; border: 1px solid #decbb866; border-radius: 8px; overflow: hidden; background: #fcf5eb; }
  .keepsake-frame { display: contents; }
  .keepsake-art { order: 0; border-radius: 0; }
  .keepsake-caption { order: 1; padding: 12px 10px 10px; text-align: left; }
  .keepsake-title { min-height: 3em; font-size: 15px; line-height: 1.5; text-wrap: balance; }
  .keepsake-title span { display: block; }
  .keepsake-title .title-separator { display: none; }
  .keepsake-divider { display: none; }
  .keepsake-desc { margin-top: 6px; font-size: 12px; line-height: 1.7; color: #806654; }
  .card-hover-actions { order: 2; position: static; opacity: 1; display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-top: auto; padding: 0 8px 10px; background: none; }
  .btn-card-demo, .btn-card-make { min-height: 44px; padding: 6px 2px; font-size: 12px; white-space: normal; border-radius: 4px; }
  .btn-card-demo span { display: none; }
  .btn-card-qr, .occasion-actions button[data-action="qr"] { display: none; }
  .atelier-footer { padding: 16px 12px; }
  .footer-container { flex-direction: column; gap: 14px; }
  .footer-wish, .footer-make { position: static; }
  .footer-center, .footer-wish, .footer-make { font-size: 11px; }
  .footer-make { display: none; }
}
@media (max-width: 900px) and (orientation: landscape) {
  .hero-atelier { display: grid; grid-template-columns: 1fr 1fr; align-items: center; padding-top: 16px; }
  .hero-intro { padding: 20px 12px; }
  .hero-intro h1 { font-size: 22px; }
  .hero-stage { margin: 0 16px 0 0; }
}
@media (max-width:480px) {
  .occasion-grid { grid-template-columns:1fr; gap:24px; }
  .occasion-cover { aspect-ratio:1.05; }
  .occasion-copy { padding:25px; }
  .occasion-copy h3 { font-size:32px; margin-top:16px; }
  .occasion-name,.occasion-copy p,.occasion-open,.occasion-actions a,.occasion-actions button { font-size:12px; }
  .occasion-actions { padding:6px 12px; }
}
@media (hover: none) and (min-width: 901px) {
  .card-hover-actions { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}