@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700&family=Prata&display=swap');

:root {
  --ink:#34232f;
  --wine:#6f3f4e;
  --rose:#b98486;
  --paper:#eeeae2;
  --paper-2:#e4ddd3;
  --line:rgba(52,35,47,.18);
}

body { background:var(--paper); color:var(--ink); font-family:'Manrope',Arial,sans-serif; }
header { height:12vh; min-height:0; display:grid; grid-template-columns:1.1fr 1fr 1.1fr; align-items:stretch; padding:0 3.2vw; border-bottom:1px solid var(--line); background:#f1eee8; }
.brand { display:flex; align-items:center; gap:.7vw; white-space:nowrap; }
.brand i { width:clamp(25px,3.1vw,47px); height:clamp(25px,3.1vw,47px); display:grid; place-items:center; border:1px solid var(--wine); color:var(--wine); font:400 clamp(9px,1vw,15px) 'Prata',serif; }
.brand>span { display:flex; flex-direction:column; gap:.18vh; }
.brand b { font:700 clamp(6px,.82vw,13px) 'Manrope'; letter-spacing:.19em; }
.brand small { font-size:clamp(3px,.38vw,6px); letter-spacing:.22em; color:#927d87; }
.demo-nav { display:flex; justify-content:center; align-items:center; gap:clamp(7px,1.65vw,25px); font-size:clamp(4.5px,.6vw,9px); text-transform:uppercase; letter-spacing:.09em; }
.demo-nav a { position:relative; color:#675661; }
.demo-nav a.current { color:var(--wine); }
.demo-nav a.current::after { content:''; position:absolute; left:0; right:0; bottom:-.75vh; height:1px; background:var(--wine); }
.header-side { display:flex; justify-content:flex-end; align-items:center; gap:1.25vw; }
.edition { display:flex; align-items:center; gap:.42vw; color:#8a747f; font-size:clamp(3px,.42vw,7px); letter-spacing:.14em; white-space:nowrap; }
.edition i { width:4px; height:4px; border-radius:50%; background:#ad7777; }
.header-cta { padding:clamp(7px,1vw,14px) clamp(9px,1.4vw,21px); background:var(--wine); color:#fff; font-size:clamp(5px,.63vw,10px); letter-spacing:.06em; white-space:nowrap; }
.header-cta span { margin-left:1vw; color:#eed9d5; }

main { height:88vh; position:relative; display:grid; grid-template-columns:repeat(12,1fr); grid-template-rows:repeat(8,1fr); overflow:hidden; background:linear-gradient(90deg,transparent calc(25% - 1px),rgba(52,35,47,.06) 25%,transparent calc(25% + 1px),transparent calc(50% - 1px),rgba(52,35,47,.06) 50%,transparent calc(50% + 1px)); }
.canvas-number { position:absolute; z-index:0; left:33%; top:-15%; color:#e0d9ce; font:400 clamp(82px,16vw,245px)/1 'Prata',serif; letter-spacing:-.12em; pointer-events:none; }
.intro { grid-column:1/7; grid-row:1/9; z-index:2; padding:3.5vh 3vw 0 4vw; display:flex; flex-direction:column; }
.eyebrow { display:flex; align-items:center; gap:.8vw; color:#8b727e; font-size:clamp(3.5px,.5vw,8px); letter-spacing:.17em; }
.eyebrow span { width:clamp(14px,2vw,30px); height:clamp(14px,2vw,30px); display:grid; place-items:center; border:1px solid var(--wine); border-radius:50%; color:var(--wine); }
h1 { margin:clamp(10px,2.2vh,23px) 0 clamp(12px,2vh,20px); font-weight:500; line-height:1; letter-spacing:-.06em; }
h1 span { display:block; font:500 clamp(25px,4.85vw,74px)/.92 'Manrope',sans-serif; letter-spacing:-.085em; }
h1 em { display:block; margin:.18em 0 0 .03em; font:400 clamp(24px,4.35vw,66px)/1 'Prata',serif; color:var(--wine); letter-spacing:-.06em; }
.intro>p { max-width:66%; margin:0; color:#75626b; font-size:clamp(5.5px,.8vw,12px); line-height:1.65; }
.actions { display:flex; align-items:center; gap:1.8vw; margin-top:2.2vh; }
.demo-button { padding:clamp(7px,1.05vw,15px) clamp(9px,1.5vw,23px); font-size:clamp(5px,.66vw,10px); }
.primary { background:var(--wine); color:#fff; }
.primary span { margin-left:1.2vw; color:#efd8d5; }
.text-link { font-size:clamp(5px,.64vw,10px); border-bottom:1px solid; padding-bottom:.35vw; }
.editorial-note { margin-top:auto; height:12vh; display:flex; align-items:center; gap:1.2vw; border-top:1px solid var(--line); }
.editorial-note b { font:400 clamp(14px,2.05vw,31px) 'Prata',serif; color:var(--wine); }
.editorial-note p { margin:0; padding-left:1.2vw; border-left:1px solid var(--line); color:#806d76; font-size:clamp(3.5px,.48vw,8px); line-height:1.55; letter-spacing:.07em; text-transform:uppercase; }

figure { margin:0; }
.main-image { grid-column:7/13; grid-row:1/9; position:relative; overflow:hidden; background:linear-gradient(180deg,transparent 58%,rgba(43,27,37,.5)),url('https://images.unsplash.com/photo-1560066984-138dadb4c035?auto=format&fit=crop&w=1500&q=88') center/cover; }
.main-image::after { content:''; position:absolute; inset:4vh 3vw; border:1px solid rgba(255,255,255,.38); border-left:0; border-bottom:0; }
.image-meta { position:absolute; z-index:2; left:2.2vw; right:2.2vw; top:2.2vh; display:flex; justify-content:space-between; color:#fff; font-size:clamp(3px,.43vw,7px); letter-spacing:.16em; }
.image-meta b { font-weight:500; }
.main-image figcaption { position:absolute; z-index:2; right:2vw; bottom:11vh; color:#fff; text-align:right; font-size:clamp(3px,.42vw,7px); line-height:1.6; letter-spacing:.16em; }
.detail-image { grid-column:6/8; grid-row:5/8; z-index:4; position:relative; border:clamp(3px,.45vw,7px) solid var(--paper); background:url('https://images.unsplash.com/photo-1616394584738-fc6e612e71b9?auto=format&fit=crop&w=700&q=86') center/cover; }
.detail-image span { position:absolute; left:.7vw; bottom:.7vh; padding:.4vh .5vw; background:rgba(238,234,226,.88); color:var(--wine); font-size:clamp(3px,.38vw,6px); letter-spacing:.12em; }
.ritual-card { grid-column:8/11; grid-row:5/8; z-index:5; align-self:center; margin-left:-.6vw; padding:clamp(9px,1.5vw,23px); background:var(--wine); color:#fff; box-shadow:1.2vw 1.4vw 0 rgba(52,35,47,.14); }
.ritual-card small { font-size:clamp(3px,.4vw,6px); letter-spacing:.15em; color:#d9b9bc; }
.ritual-card h2 { margin:.8vh 0 1.15vh; font:400 clamp(9px,1.4vw,22px)/1.18 'Prata',serif; }
.ritual-card>div { display:flex; gap:1vw; padding-top:.8vh; border-top:1px solid rgba(255,255,255,.2); font-size:clamp(3px,.4vw,6px); letter-spacing:.1em; }
.ritual-card a { display:block; margin-top:.8vh; color:#f0dcdb; font-size:clamp(3.5px,.46vw,7px); }
.ritual-card a span { margin-left:.7vw; }
.treatment-index { grid-column:7/13; grid-row:8/9; z-index:6; display:grid; grid-template-columns:repeat(3,1fr); align-self:end; min-height:9vh; background:#2f202b; color:#d9cdd3; }
.treatment-index a { display:flex; align-items:center; gap:.7vw; padding:0 1.3vw; border-right:1px solid rgba(255,255,255,.13); font-size:clamp(3.5px,.47vw,8px); }
.treatment-index b { color:#c68d92; font-size:.8em; }

@media (max-aspect-ratio:4/5) {
  html,body { height:auto; min-height:100%; overflow:auto; }
  header { height:68px; padding:0 20px; }
  .demo-nav,.edition,.brand small { display:none; }
  .header-side { margin-left:auto; }
  .header-cta { margin-left:auto; }
  main { height:auto; display:block; overflow:hidden; }
  .canvas-number { top:110px; left:30%; font-size:180px; }
  .intro { min-height:72svh; padding:48px 24px 0; }
  h1 span { font-size:54px; }
  h1 em { font-size:49px; }
  .intro>p { max-width:100%; font-size:14px; }
  .editorial-note { min-height:110px; }
  .main-image { min-height:68svh; }
  .detail-image { width:42%; height:190px; margin:-95px 0 0 7%; }
  .ritual-card { width:68%; margin:-70px 0 0 auto; position:relative; }
  .treatment-index { min-height:110px; }
}