/* Design 1: magazine cover. Her VOGUE nail is the cover star, the masthead sits behind it. */
:root{--bg:#F5EFE6;--ink:#1B1613;--soft:#665A51;--acc:#A3132B;--acc-ink:#fff;--card:#FFFDF9;--line:#E0D4C7;--fd:"Frank Ruhl Libre",Georgia,serif;--ft:"Heebo",system-ui,sans-serif;--r:2px;--ri:2px}

.top{position:absolute;inset:0 0 auto;z-index:5;display:flex;justify-content:space-between;align-items:center;padding:18px clamp(16px,5vw,64px)}
.logo{font:italic 700 24px "Playfair Display",serif;text-decoration:none;letter-spacing:.02em;direction:ltr}
.logo span{font:400 14px var(--ft);color:var(--soft);margin-inline-start:2px}
.mini{min-height:44px;display:inline-flex;align-items:center;padding:0 16px;border:1.5px solid var(--ink);text-decoration:none;font-weight:700;font-size:15px}

.cover{position:relative;min-height:100svh;display:grid;grid-template-columns:1fr 1fr;grid-template-rows:auto 1fr;align-items:start;column-gap:clamp(20px,4vw,56px);padding-top:84px;overflow:hidden}
.mast{position:relative;grid-column:1/-1;grid-row:1;margin:0;text-align:center;font:italic 700 clamp(110px,18vw,290px)/.82 "Playfair Display",serif;color:var(--acc);letter-spacing:-.02em;direction:ltr;z-index:0;transform:translateY(calc(var(--y,0) * -70px));user-select:none}
.cover-photo{position:relative;z-index:1;grid-column:2;grid-row:1/span 2;margin-top:clamp(70px,9vw,150px);transform:translateY(calc(var(--y,0) * 50px))}
.cover-photo img{width:100%;max-height:78svh;object-fit:cover;object-position:50% 30%;box-shadow:0 30px 60px -30px rgba(40,10,10,.55)}
.cover-lines{position:relative;z-index:2;grid-column:1;grid-row:2;padding-top:clamp(16px,2vw,30px);padding-bottom:clamp(8px,3vw,40px)}
.issue{font-size:14px;font-weight:700;letter-spacing:.12em;color:var(--acc);margin-bottom:14px}
.cover h1{font-size:clamp(44px,6.6vw,96px);font-weight:900;max-width:9ch;margin-bottom:26px}
.lines{display:grid;gap:2px;margin-bottom:28px;border-top:2px solid var(--ink)}
.lines a{display:flex;min-height:46px;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line);text-decoration:none;font:700 19px var(--fd)}
.lines a::after{content:"←";color:var(--acc);transition:transform .2s}
.lines a:hover::after{transform:translateX(-6px)}

.features{display:grid;gap:clamp(56px,10vw,140px)}
.spread{display:grid;grid-template-columns:1.05fr 1fr;gap:clamp(24px,5vw,80px);align-items:center}
.spread.s2{grid-template-columns:1fr 1.05fr}
.spread.s2 .igp{order:2}
.spread .igp{justify-self:center;max-width:400px;box-shadow:0 30px 60px -34px rgba(40,10,10,.45);transform:rotate(-1.2deg)}
.spread.s2 .igp{transform:rotate(1.2deg)}
.spread blockquote{margin:0;position:relative}
.spread blockquote::before{content:"”";position:absolute;top:-.55em;inset-inline-start:-.08em;font:900 clamp(120px,16vw,220px)/1 var(--fd);color:var(--acc);opacity:.18}
.spread blockquote p{position:relative;font:700 clamp(30px,4.2vw,58px)/1.18 var(--fd)}
.spread.s3 blockquote p{text-align:right;letter-spacing:.2em;font-style:italic}
.spread blockquote footer{margin-top:20px;font-size:14px;font-weight:700;letter-spacing:.1em;color:var(--soft)}
.igp{--ig-bg:#FFFDF9;--ig-line:var(--line);--ig-r:3px}

.story{margin:0 auto;border-top:2px solid var(--ink);padding-top:28px}
.story h2{font-weight:900}
.story-body p{font-family:var(--fd);font-size:clamp(19px,2vw,23px)}
.story-body p:first-child::first-letter{float:right;font:900 3.6em/.82 var(--fd);color:var(--acc);margin-inline-end:.08em}
.facts li{border-radius:2px;background:transparent;border-color:var(--ink)}

.ask{--ask-bg:#1B1613;--orb1:#A3132B;--orb2:#E9D8C4;--orb3:#5C2A2A;--her-bg:#F5EFE6;--her-ink:#1B1613;--av-bg:#A3132B}
.ask-head h2{font-family:var(--fd);font-weight:900}

.gal{background:var(--card);border-block:1px solid var(--line)}
.tabs{gap:24px;border-bottom:1px solid var(--line)}
.tabs [role=tab]{background:none;border:0;border-bottom:3px solid transparent;border-radius:0;padding:0 2px;font:700 22px var(--fd)}
.tabs [aria-selected=true]{background:none;color:var(--acc);border-bottom-color:var(--acc)}

.menu li{border-bottom-style:dotted;border-bottom-width:2px}
.menu b{color:var(--acc);font-family:var(--fd)}

.close{background:var(--acc);color:#fff}
.close p{color:rgba(255,255,255,.88)}
.close .btn{background:#fff;color:var(--acc);border-color:#fff}
.close .btn.ghost{background:transparent;color:#fff}
.close :focus-visible{outline-color:#fff}

@media (max-width:760px){
  .cover{grid-template-columns:1fr;grid-template-rows:auto auto auto;padding-top:80px}
  .mast{font-size:31vw}
  .cover-photo{grid-column:1;grid-row:2;margin-top:-13vw;width:82%;justify-self:center}
  .cover-photo img{max-height:62svh}
  .cover-lines{grid-column:1;grid-row:3}
  .spread,.spread.s2{grid-template-columns:1fr}
  .spread.s2 .igp{order:0}
}