/* Paper 07: responsive homepage composition. Loaded only on the homepage. */
html:has(.home-v2) { scroll-snap-type:none; }
.home-page { font-synthesis:none; }
.home-page .home-inner { width:min(1280px, calc(100% - 112px)); margin-inline:auto; padding-block:72px; }
.home-v2 > section { min-height:0; scroll-snap-align:none; scroll-snap-stop:normal; scroll-margin-top:0; }
.home-v2 h1,.home-v2 h2 { font:800 4.5rem/1.02 var(--sans); letter-spacing:-.055em; word-spacing:normal; overflow-wrap:normal; }
.home-v2 h1 em,.home-v2 h2 em { font-family:var(--serif); font-weight:400; font-style:italic; letter-spacing:-.04em; }
.home-v2 h3 { font-family:var(--sans); font-weight:800; }
.home-v2 p { margin:0; }
.home-copy { display:flex; flex-direction:column; align-items:flex-start; gap:24px; min-width:0; }
.home-v2 .home-kicker { color:var(--green); font:400 .875rem/1.4 var(--sans); text-transform:uppercase; letter-spacing:.1em; }
.home-v2 .home-small { color:var(--muted); font-size:.875rem; line-height:1.6; }
.home-muted { color:var(--muted); }
.home-page .home-button { min-height:56px; padding:13px 24px; gap:28px; border-radius:99px; width:fit-content; max-width:100%; font:800 1.0625rem/1.4 var(--sans); background:var(--green); color:var(--cream); border-color:var(--green); margin:0; box-shadow:none; }
.home-page .home-button:hover { background:var(--forest); border-color:var(--forest); }
.home-page .home-arrow { display:grid; place-items:center; width:28px; height:28px; flex:0 0 28px; font:400 1.25rem/1 var(--sans); border-radius:50%; background:var(--cream); color:var(--green); }
.home-v2 .home-link { min-height:44px; margin:0; font-size:1rem; line-height:1.5; gap:10px; color:var(--green); }
.home-hero { background:var(--forest); color:var(--cream); }
.home-page .home-hero .home-inner { padding-block:56px 48px; }
.home-hero-grid { display:grid; grid-template-columns:minmax(0,660fr) minmax(0,550fr); gap:70px; align-items:center; }
.home-v2 .home-hero h1 { font-size:clamp(4rem,8.164vw,7.5rem); }
.home-hero h1 em { color:var(--lime); font-size:1.08333em; }
.home-hero .home-copy { gap:26px; }
.home-v2 .home-hero .home-kicker { color:var(--lime); }
.home-lead { font-size:1.1875rem; line-height:1.6; }
.home-page .home-hero .home-button { color:var(--forest); background:var(--lime); border-color:var(--lime); }
.home-page .home-hero .home-button:hover { background:var(--cream); border-color:var(--cream); }
.home-page .home-hero .home-arrow { background:var(--forest); color:var(--lime); }
.home-hero .home-link { color:var(--cream); }
.home-portrait img { height:560px; border-radius:8px; object-position:50% 0%; }
.home-portrait figcaption { font-size:.875rem; line-height:1.6; padding-top:14px; }
.home-location { display:flex; flex-wrap:wrap; align-items:flex-start; gap:12px 30px; border-top:1px solid #78907b; padding-top:24px; margin-top:32px; font-size:.9375rem; line-height:1.6; }
.home-location .compact-hours { display:flex; flex-wrap:wrap; gap:8px 24px; margin:0; }
.home-location .compact-hours p { display:flex; flex-wrap:wrap; gap:8px; padding:0; border:0; color:inherit; font-size:inherit; line-height:inherit; }
.home-location .compact-hours strong,.home-location .compact-hours span { color:inherit; font-size:inherit; font-weight:400; flex:initial; }
.home-location .compact-hours p:has(span:last-child) { margin:0; }
.home-v2 .story-all-brands { background:var(--cream); }
.home-v2 .story-all-brands h2 { font-size:4.5rem; }
.home-v2 .brand-group { width:100%; margin:0; }
.home-v2 .brand-group h3 { font:800 1.125rem/1.5 var(--sans); margin:12px 0 24px; }
.home-v2 .brand-directory { grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px; margin:0; }
.home-v2 .brand-directory .brand-logo { height:84px; min-height:84px; background:var(--paper); border:1px solid var(--line); padding:18px 22px; }
.home-v2 .brand-directory .brand-logo:hover { background:var(--lime); border-color:var(--forest); }
.home-v2 .brand-directory img { max-width:210px; height:42px; object-fit:contain; }
.home-v2 .brand-directory .brand-logo--yest img { max-width:110px; }
.home-v2 .brand-directory .brand-logo--yest-curve img { max-width:120px; }
.home-v2 .brand-directory .brand-logo--zhenzi img,.home-v2 .brand-directory .brand-logo--cs-the-label img { height:42px; }
.home-v2 .brand-group-discover { min-height:44px; margin-top:24px; font-size:1rem; }
.home-plus { background:var(--rose); }
.home-page .home-plus .home-inner { padding-block:40px; }
.home-plus-grid { display:flex; align-items:center; justify-content:space-between; gap:40px; }
.home-plus .home-copy { gap:12px; }
.home-v2 .home-plus h2 { font-size:2.75rem; }
.home-plus-grid > .button { flex-shrink:0; }
.home-scent { background:var(--yellow); }
.home-scent-grid { display:grid; grid-template-columns:minmax(0,510fr) minmax(0,680fr); gap:90px; align-items:center; }
.home-scent-photo img { height:550px; border-radius:6px; object-position:50% 48%; }
.home-v2 .home-scent h2 { font-size:4.875rem; }
.home-scent h2 em { display:inline-block; color:var(--green); }
.home-scent-words { display:flex; gap:28px; flex-wrap:wrap; border-top:1px solid #a9a57f; padding-top:18px; font-size:1rem; width:100%; }
.home-fashion { background:var(--forest); color:var(--cream); }
.home-fashion .home-copy { gap:20px; }
.home-v2 .home-fashion h2 { font-size:4.875rem; }
.home-v2 .home-fashion .home-kicker { color:var(--lime); }
.home-v2 .home-fashion .home-small { color:var(--cream); }
.home-look-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:20px; width:100%; }
.home-look { display:flex; flex-direction:column; text-decoration:none; background:var(--cream); color:var(--forest); min-width:0; }
.home-look > img { height:auto; aspect-ratio:2/3; object-fit:cover; }
.home-look-caption { display:flex; align-items:center; justify-content:space-between; gap:10px; padding:12px 16px; min-height:56px; font-size:1rem; line-height:1.4; }
.home-look-caption > span { font-size:1.375rem; line-height:1; }
.home-look:hover .home-look-caption { background:var(--lime); }
.home-look:focus-visible { outline:3px solid var(--lime); outline-offset:5px; }
.home-look-all { justify-content:space-between; }
.home-look-message { display:flex; flex-direction:column; justify-content:center; gap:24px; padding:32px; aspect-ratio:2/3; }
.home-look-message strong { font:800 2.75rem/1.02 var(--sans); letter-spacing:-.04em; }
.home-look-message > span { font-size:1.125rem; line-height:1.6; }
.home-look-all .home-look-caption { background:var(--lime); }
.home-personal-grid { display:grid; grid-template-columns:minmax(0,430fr) minmax(0,750fr); gap:100px; align-items:center; }
.home-v2 .home-personal h2 { font-size:4.625rem; }
.home-v2 .home-personal h2 em { font-size:1.054em; }
.home-page .home-film { position:relative; width:100%; max-width:none; height:auto; aspect-ratio:auto; transform:none; margin:0; top:auto; right:auto; }
.home-film-media { position:relative; }
.home-page .home-film img,.home-page .home-film video { height:580px; border:0; border-radius:8px; object-position:50% 35%; object-fit:cover; background:var(--forest); }
.home-page .home-film video[data-started] { object-fit:contain; }
.home-page .home-film figcaption { display:flex; flex-wrap:wrap; font-size:.875rem; color:var(--muted); padding-top:14px; line-height:1.6; gap:8px; }
.home-film-start:not([hidden]) { position:absolute; left:20px; right:20px; bottom:20px; display:flex; gap:12px; align-items:center; min-height:52px; padding:12px 18px; border:0; border-radius:99px; color:var(--cream); background:#173e30ed; font:400 1rem/1.4 var(--sans); cursor:pointer; }
.home-page .home-film .store-film-actions button { min-height:44px; }
.home-page .home-film button:focus-visible { outline:3px solid var(--forest); outline-offset:4px; }
.home-page .home-film-start:focus-visible { outline-color:var(--lime); }
.home-appointment { background:var(--rose); color:var(--forest); }
.home-v2 .home-appointment h2 { font-size:5rem; }
.home-appointment-grid,.home-visit-grid { display:grid; grid-template-columns:minmax(0,680fr) minmax(0,500fr); gap:100px; width:100%; }
.home-note,.home-hours { padding:32px; border:1px solid var(--line); border-radius:8px; background:var(--paper); }
.home-note { align-self:start; }
.home-note h3 { font-size:1.75rem; line-height:1.2; letter-spacing:-.03em; }
.home-note p { margin-top:18px; color:var(--muted); }
.home-visit-grid { align-items:center; }
.home-v2 .home-visit h2 { font-size:5.625rem; }
.home-visit address { font-size:1.125rem; line-height:1.6; }
.home-hours { padding:36px; }
.home-hours h3 { font-size:1.625rem; line-height:1.2; }
.home-hours .compact-hours { margin-top:20px; }
.home-hours .compact-hours p { display:flex; justify-content:space-between; flex-wrap:wrap; gap:10px; padding:16px 0; border-top:1px solid var(--line); border-bottom:0; }
.home-hours .compact-hours strong { font-size:1rem; font-weight:400; flex:initial; }
.home-hours .compact-hours span { font-size:1.125rem; font-weight:800; color:var(--forest); flex:initial; }
.home-hours > .home-small { margin-top:20px; }
.home-page .footer { padding-bottom:32px; }
.home-page .footer-bottom { align-items:center; }
.home-page .footer-bottom > * { display:flex; align-items:center; min-height:44px; padding:0; line-height:1.375rem; }
.home-page .cookie-settings { font-synthesis:none; font:400 .875rem/1.375rem var(--sans); text-underline-offset:5px; }
@media(max-width:1100px) {
  .home-page .home-inner { width:calc(100% - 64px); }
  .home-hero-grid,.home-scent-grid,.home-personal-grid,.home-appointment-grid,.home-visit-grid { gap:40px; }
  .home-portrait img { height:490px; }
  .home-v2 .home-scent h2,.home-v2 .home-personal h2 { font-size:3.625rem; }
  .home-v2 .home-fashion h2,.home-v2 .home-appointment h2 { font-size:4rem; }
  .home-look-message { padding:24px; gap:16px; }
  .home-look-message strong { font-size:2rem; }
  .home-look-message > span { font-size:1rem; }
  .home-plus-grid { flex-wrap:wrap; }
}
@media(max-width:760px) {
  .home-page { --home-contact-height:calc(3rem + 33px); padding-bottom:calc(var(--home-contact-height) + env(safe-area-inset-bottom)); }
  html:has(.home-v2) { scroll-padding-bottom:calc(3rem + 33px + env(safe-area-inset-bottom)); }
  .home-page .home-inner { width:calc(100% - 40px); padding-block:40px; }
  .home-v2 > section { scroll-margin-top:0; }
  .home-v2 { font-size:1rem; line-height:1.6; }
  .home-v2 h1,.home-v2 h2 { font-size:2.625rem; }
  .home-copy { gap:24px; }
  .home-page .home-hero .home-inner { padding-block:36px; }
  .home-hero-grid,.home-scent-grid,.home-personal-grid,.home-appointment-grid,.home-visit-grid { grid-template-columns:minmax(0,1fr); gap:28px; }
  .home-v2 .home-hero h1 { font-size:clamp(2.625rem,13.18vw,3.625rem); }
  .home-v2 .home-hero h1 em { font-size:1.138em; }
  .home-hero .home-copy { gap:24px; }
  .home-lead { font-size:1rem; }
  .hero-visit,.home-page .home-button { width:100%; }
  .home-portrait img { height:390px; }
  .home-portrait figcaption { padding-top:24px; }
  .home-location { margin-top:24px; }
  .home-location .compact-hours { flex-direction:column; gap:8px; }
  .home-v2 .story-all-brands h2 { font-size:clamp(1.625rem,9.55vw,2.625rem); }
  .home-v2 .brand-directory { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .home-v2 .brand-directory .brand-logo { min-height:84px; }
  .home-v2 .brand-directory .brand-logo:last-child:nth-child(odd) { grid-column:1/-1; }
  .home-page .home-plus .home-inner { padding-block:36px; }
  .home-plus-grid { display:flex; flex-direction:column; align-items:stretch; gap:20px; }
  .home-plus .home-copy { gap:20px; }
  .home-v2 .home-plus h2 { font-size:2.25rem; max-width:11ch; }
  .home-scent .home-copy { display:contents; }
  .home-scent-grid { gap:26px; }
  .home-scent-photo { grid-row:4; }
  .home-scent-photo img { height:350px; }
  .home-v2 .home-scent h2 { font-size:clamp(1.625rem,10vw,2.75rem); }
  .home-scent h2 em { font-size:1.09em; }
  .home-v2 .home-fashion h2 { font-size:clamp(1.75rem,10vw,2.75rem); }
  .home-look-grid { grid-template-columns:repeat(auto-fit,minmax(min(100%,max(8rem,calc((100% - 20px)/2))),1fr)); }
  .home-look-caption { min-height:48px; padding:12px 16px; }
  .home-look-message { padding:20px; gap:20px; }
  .home-look-message strong { font-size:1.625rem; }
  .home-look-message > span { font-size:.875rem; }
  .home-personal .home-copy { display:contents; }
  .home-personal-grid { gap:28px; }
  /* Reset the legacy .store-film second column in this single-column layout. */
  .home-personal .home-film { grid-column:1; grid-row:4; }
  .home-v2 .home-personal h2 { font-size:clamp(1.625rem,10vw,2.75rem); }
  .home-v2 .home-personal h2 em { font-size:1.09em; }
  .home-page .home-film img,.home-page .home-film video { height:490px; }
  .home-v2 .home-appointment h2 { font-size:clamp(1.5rem,9.1vw,2.5rem); }
  .home-note { padding:0; border:0; background:none; }
  .home-note h3 { display:none; }
  .home-note p { margin:0; font-size:.875rem; line-height:1.6; }
  .home-v2 .home-visit h2 { font-size:clamp(1.75rem,11.36vw,3.125rem); }
  .home-hours { padding:28px; }
  .home-page .footer { padding:48px 0 28px; }
  .home-page .footer-bottom { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px 20px; margin-top:32px; padding-top:16px; }
  .home-page .footer-bottom > span { grid-column:1/-1; grid-row:2; min-height:22px; }
  .home-page .footer-bottom > a,.home-page .footer-bottom > button { grid-row:1; justify-content:flex-start; }
  .home-page .mobile-actions { min-height:calc(var(--home-contact-height) + env(safe-area-inset-bottom)); gap:12px; padding:12px 20px calc(12px + env(safe-area-inset-bottom)); }
  .home-page .mobile-actions a { min-height:56px; border-radius:99px; gap:10px; line-height:1.5; border:1px solid var(--green); }
  .home-page .mobile-actions a:first-child { color:var(--cream); }
  .home-page .mobile-actions a:last-child { background:var(--cream); }
}
@media(max-width:370px) {
  .home-look-message { padding:16px; gap:12px; }
  .home-look-message strong { font-size:1.3125rem; }
  .home-look-message > span { font-size:.8125rem; line-height:1.45; }
  .home-look-caption { padding-inline:12px; min-height:70px; }
}
@media print {
  .home-page .home-inner { width:100%; padding:24px; }
  .home-v2 .home-hero h1,.home-v2 h2 { font-size:32pt; }
  .home-look-grid { grid-template-columns:repeat(3,minmax(0,1fr)); }
  .home-film-start { display:none!important; }
}