/* =====================================================================
   THE BEAUTY QUESTION — house stylesheet
   One file for the whole site. Replaces site.css and
   beauty-question-identity.css. See HOUSE-STYLE.md before editing.

   Rules for editing this file:
   - Change a token before adding a new value.
   - Replace rules; never add an override rule further down.
   - No "important" overrides, no gradients except the two cherry bands,
     no shadows, no rounded corners.
   ===================================================================== */

/* ---------- 1. Tokens ---------------------------------------------- */
:root{
  --cherry:#920026;
  --ink:#29131b;
  --muted:#6f6068;
  --paper:#ffffff;
  --wash:#e4f0fb;
  --cream:#fff7ec;
  --rose:#f4b8d2;
  --rule:rgba(41,19,27,.14);

  --display:"Bodoni Moda", Didot, "Times New Roman", serif;
  --body:"Public Sans", Arial, Helvetica, sans-serif;

  --shell:1280px;
  --read:720px;
  --gutter:clamp(20px,4vw,48px);
  --section:clamp(64px,8vw,112px);

  /* The cherry band used by Vivienne and the newsletter. */
  --band:
    repeating-linear-gradient(135deg,rgba(255,255,255,.02) 0 1px,transparent 1px 7px),
    linear-gradient(120deg,#97002c 0%,#61001c 52%,#18050d 100%);
}

/* ---------- 2. Base ------------------------------------------------ */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font:400 17px/1.6 var(--body);
  -webkit-font-smoothing:antialiased;
  overflow-x:clip;
}
img{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible{outline:2px solid var(--cherry);outline-offset:3px}
h1,h2,h3,h4{margin:0}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.skip-link{position:absolute;left:-9999px;top:0;z-index:20;padding:10px 16px;background:var(--cherry);color:var(--paper)}
.skip-link:focus{left:16px;top:12px}
[hidden]{display:none}
/* Archive filtering must beat card layout declarations later in this sheet. */
[data-archive-card][hidden],
[data-archive-section][hidden],
[data-archive-no-results][hidden]{display:none}

/* ---------- 3. Type roles ------------------------------------------ */
/* Display: every headline on the site. Low optical size keeps the
   Bodoni hairlines visible at large sizes. */
.tbq-display,
main h1,
.section-title h2,
.tbq-section-head h2{
  font-family:var(--display);font-style:italic;font-weight:400;
  font-variation-settings:"opsz" 20;
  letter-spacing:-.01em;color:var(--cherry);text-wrap:balance;
}
/* Kicker: small category label. */
.tbq-kicker,
.page-kicker,
.simple-page > .kicker,
.article-meta-row .article-pill,
.archive-card > span:first-child,
.related-grid-v111 a > span,
.author-article-meta,
.newsletter-invitation-label{
  display:block;font:400 12px/1.4 var(--body);letter-spacing:.16em;
  text-transform:uppercase;color:var(--cherry);
}
/* Deck: roman Bodoni for standfirsts and short summaries. */
.tbq-deck,
.standfirst,
.archive-note,
.intro-copy{
  font:400 clamp(18px,1.5vw,21px)/1.5 var(--display);font-variation-settings:"opsz" 14;
  color:var(--ink);margin:0;
}
.tbq-summary{font:400 15.5px/1.55 var(--body);color:var(--muted);margin:0}
.tbq-button,
.newsletter-invitation-button{
  display:inline-block;padding:13px 24px;border:1px solid var(--cherry);
  font:500 12px/1.4 var(--body);letter-spacing:.16em;text-transform:uppercase;
  color:var(--cherry);background:transparent;transition:background .2s,color .2s;
}
.tbq-button:hover,
.newsletter-invitation-button:hover{background:var(--cherry);color:var(--paper)}
.tbq-textlink,
.article-back{
  display:inline-block;font:500 12px/1.4 var(--body);letter-spacing:.16em;text-transform:uppercase;
  color:var(--cherry);border-bottom:1px solid currentColor;padding-bottom:3px;
}
.tbq-card-link:hover .tbq-display,
.archive-card:hover strong,
.related-grid-v111 a:hover strong,
.author-article-card:hover strong,
.latest-editorial .card:hover h3{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:6px}

/* ---------- 4. Layout ---------------------------------------------- */
.tbq-shell{width:min(var(--shell),calc(100% - var(--gutter)*2));margin-inline:auto}
.tbq-section-head,
.section-title{
  display:flex;align-items:baseline;justify-content:space-between;gap:24px;
  padding-top:22px;border-top:1px solid var(--cherry);margin-bottom:clamp(28px,3.5vw,44px);
}
.tbq-section-head h2,
.section-title h2,
.section-title h1{font-size:clamp(34px,3.6vw,52px);line-height:1}
.tbq-section-head p{margin:10px 0 0;font:400 17px/1.5 var(--display);font-variation-settings:"opsz" 14;color:var(--muted)}
.section-title > span{font:400 12px/1.4 var(--body);letter-spacing:.16em;text-transform:uppercase;color:var(--muted);white-space:nowrap}

/* ---------- 5. Utility bar, masthead, navigation ------------------- */
.utility-bar{border-bottom:1px solid var(--rule)}
.utility-bar-inner{
  width:min(var(--shell),calc(100% - var(--gutter)*2));margin-inline:auto;
  display:flex;justify-content:space-between;align-items:center;gap:16px;min-height:38px;
  font:400 11px/1.4 var(--body);letter-spacing:.16em;text-transform:uppercase;color:var(--muted);
}
.utility-bar nav{display:flex;gap:24px}
.utility-bar a:hover{color:var(--cherry)}

.site-header{text-align:center;padding-top:clamp(26px,3.5vw,44px)}
.tbq-masthead{display:inline-flex;flex-direction:column;align-items:center;color:var(--cherry);line-height:.9}
.tbq-masthead .tbq-the{font:italic 400 clamp(16px,2.2vw,32px)/1 var(--display);font-variation-settings:"opsz" 24}
.tbq-masthead .tbq-name{
  font:italic 400 clamp(38px,7.6vw,112px)/1 var(--display);font-variation-settings:"opsz" 24;
  letter-spacing:-.02em;white-space:nowrap;
}
.primary-nav{
  display:flex;overflow-x:auto;scrollbar-width:none;
  margin-top:clamp(18px,2.4vw,30px);padding:0 var(--gutter);border-bottom:1px solid var(--rule);
}
.primary-nav::-webkit-scrollbar{display:none}
.primary-nav a{
  display:flex;align-items:center;white-space:nowrap;padding:16px 0;
  font:400 13px/1 var(--display);font-variation-settings:"opsz" 12;
  letter-spacing:.2em;text-transform:uppercase;color:var(--cherry);
}
.primary-nav a:first-child{margin-left:auto}
.primary-nav a:last-child{margin-right:auto}
.primary-nav a + a::before{content:"/";color:var(--rule);letter-spacing:0;padding:0 clamp(12px,1.8vw,26px)}
.primary-nav a span{border-bottom:1px solid transparent;padding-bottom:2px}
.primary-nav a:hover span,
.primary-nav a[aria-current="page"] span{border-bottom-color:var(--cherry)}

/* ---------- 6. Footer ---------------------------------------------- */
.site-footer{margin-top:var(--section);padding:clamp(48px,6vw,80px) 0 40px;border-top:1px solid var(--rule)}
.site-footer-inner{
  width:min(var(--shell),calc(100% - var(--gutter)*2));margin-inline:auto;
  display:grid;grid-template-columns:minmax(0,1.4fr) repeat(3,minmax(0,1fr));gap:32px;
}
.site-footer-name{display:block;font:italic 400 30px/1.05 var(--display);font-variation-settings:"opsz" 20;color:var(--cherry);margin:0 0 10px}
.site-footer-tag{margin:0;font:400 16px/1.5 var(--display);font-variation-settings:"opsz" 14;color:var(--muted)}
.site-footer h2{margin:0 0 14px;font:500 11px/1.4 var(--body);letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
.site-footer ul{list-style:none;margin:0;padding:0;display:grid;gap:9px;font:400 15px/1.4 var(--body)}
.site-footer li a:hover{color:var(--cherry)}
.site-footer-bottom{
  grid-column:1/-1;margin-top:28px;padding-top:18px;border-top:1px solid var(--rule);
  display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;font:400 13px/1.5 var(--body);color:var(--muted);
}
/* The homepage newsletter band sits directly on the footer. */
.tbq-home .site-footer{margin-top:0;border-top:0}

/* ---------- 7. Homepage -------------------------------------------- */
/* Lead */
.home-beauty-hero{width:min(var(--shell),calc(100% - var(--gutter)*2));margin:clamp(24px,3vw,40px) auto 0}
.home-beauty-hero-link{display:grid;grid-template-columns:minmax(0,45fr) minmax(0,55fr);background:var(--wash)}
.home-beauty-hero-copy{grid-column:1;grid-row:1;align-self:center;padding:clamp(32px,4.5vw,72px)}
.home-beauty-hero-copy h1{font-size:clamp(44px,5.2vw,80px);line-height:1.02;margin:18px 0 22px}
.home-beauty-hero-copy .tbq-deck{max-width:30em;color:var(--cherry)}
.home-beauty-hero-copy .tbq-button{margin-top:30px}
.home-beauty-hero-link > img{grid-column:2;grid-row:1;width:100%;height:100%;min-height:clamp(360px,42vw,600px);object-fit:cover;object-position:55% 35%}

/* Cover pair */
.tbq-cover-features{
  width:min(var(--shell),calc(100% - var(--gutter)*2));margin:clamp(28px,3vw,40px) auto 0;
  display:grid;grid-template-columns:1fr 1fr;
}
.tbq-cover-story{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(18px,2vw,28px);align-items:center}
.tbq-cover-story:first-child{padding-right:clamp(20px,2.5vw,36px);border-right:1px solid var(--rule)}
.tbq-cover-story:last-child{padding-left:clamp(20px,2.5vw,36px)}
.tbq-cover-story img{aspect-ratio:1/1;width:100%;object-fit:cover}
.tbq-cover-story h2{font-size:clamp(28px,2.7vw,40px);line-height:1.05;margin:12px 0 14px}
.tbq-cover-story .tbq-deck{font-size:clamp(17px,1.35vw,19px);color:var(--cherry)}

/* Under the Lens */
.tbq-lens{width:min(var(--shell),calc(100% - var(--gutter)*2));margin:var(--section) auto 0}
.tbq-lens-feature{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(28px,4vw,64px);align-items:center}
.tbq-lens-feature img{width:100%;aspect-ratio:3/2;object-fit:cover}
.tbq-lens-claim{display:block;font-size:clamp(56px,6vw,96px);line-height:1.06;letter-spacing:-.02em;margin:14px 0 22px}
.tbq-lens-claim::before,.tbq-lens-ledger .tbq-display::before{content:"\201C"}
.tbq-lens-claim::after,.tbq-lens-ledger .tbq-display::after{content:"\201D"}
.tbq-lens-feature h2,
.tbq-lens-feature h3{font:400 clamp(24px,2.2vw,30px)/1.2 var(--display);font-variation-settings:"opsz" 18;color:var(--ink);margin:0 0 14px}
.tbq-lens-feature .tbq-summary{max-width:36em}
.tbq-lens-feature .tbq-button{margin-top:28px}
.tbq-lens-ledger{margin-top:clamp(36px,4vw,56px);border-top:1px solid var(--rule)}
.tbq-lens-ledger a{
  display:grid;grid-template-columns:minmax(180px,auto) minmax(0,1fr);gap:clamp(18px,3vw,48px);
  align-items:baseline;padding:22px 0;border-bottom:1px solid var(--rule);
}
.tbq-lens-ledger .tbq-display{font-size:clamp(28px,3vw,40px);line-height:1.1}
.tbq-lens-ledger h3{font:400 clamp(19px,1.6vw,22px)/1.3 var(--display);font-variation-settings:"opsz" 14;color:var(--ink);margin:6px 0 0}
.tbq-lens-ledger a:hover h3{text-decoration:underline;text-underline-offset:5px;text-decoration-thickness:1px}

/* Under the Lens section page list */
.tbq-lens-list{display:grid;gap:clamp(40px,5vw,72px)}
.tbq-lens-list .tbq-lens-feature{padding-bottom:clamp(40px,5vw,72px);border-bottom:1px solid var(--rule)}

/* Vivienne */
#vivienne-column{
  --vf-max:var(--shell);
  --vf-gutter:var(--gutter);
  --vf-gap:clamp(24px,4vw,64px);
  --vf-portrait:clamp(240px,32vw,380px);
  --vf-lift:clamp(56px,6vw,104px);
  --vf-pad:clamp(36px,4vw,64px);
  position:relative;isolation:isolate;
  margin-top:max(var(--section), calc(var(--vf-lift) + 32px));
  display:grid;align-items:end;column-gap:0;
  grid-template-columns:
    minmax(var(--vf-gutter),1fr)
    minmax(0,calc(var(--vf-max) - var(--vf-portrait)))
    var(--vf-portrait)
    minmax(var(--vf-gutter),1fr);
  background:
    radial-gradient(circle at 78% 26%,rgba(213,51,101,.30),transparent 30%),
    var(--band);
}
#vivienne-column .vivienne-portrait{
  grid-column:3;grid-row:1;align-self:end;justify-self:end;
  width:100%;height:auto;margin-top:calc(var(--vf-lift) * -1);position:relative;z-index:2;
}
#vivienne-column .vivienne-copy{grid-column:2;grid-row:1;align-self:center;padding:var(--vf-pad) var(--vf-gap) var(--vf-pad) 0;position:relative;z-index:3}
#vivienne-column .tbq-kicker{color:var(--rose)}
#vivienne-column blockquote{margin:18px 0 30px}
#vivienne-column blockquote p{
  margin:0;color:var(--cream);font:italic 400 clamp(30px,2.3vw + 14px,62px)/1.08 var(--display);
  font-variation-settings:"opsz" 20;letter-spacing:-.01em;text-wrap:balance;
}
#vivienne-column .tbq-textlink{color:var(--cream);border-bottom-color:var(--rose)}

/* More to question — the publisher writes cards into this grid. */
.latest-editorial{width:min(var(--shell),calc(100% - var(--gutter)*2));margin:var(--section) auto 0}
.article-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(36px,4vw,56px) clamp(22px,2.4vw,36px)}
.latest-editorial .card{display:block}
.latest-editorial .thumb img{width:100%;aspect-ratio:3/2;object-fit:cover;margin-bottom:18px}
.latest-editorial .story-meta{display:flex;justify-content:space-between;gap:12px}
.latest-editorial .story-meta span{font:400 12px/1.4 var(--body);letter-spacing:.16em;text-transform:uppercase;color:var(--cherry)}
.latest-editorial .story-meta time{display:none}
.latest-editorial .card h3{
  font-family:var(--display);font-style:italic;font-weight:400;font-variation-settings:"opsz" 20;
  font-size:clamp(24px,2vw,29px);line-height:1.1;letter-spacing:-.01em;color:var(--cherry);
  margin:10px 0 12px;text-wrap:balance;
}
.latest-editorial .card p{font:400 15.5px/1.55 var(--body);color:var(--muted);margin:0}
.latest-editorial .card strong{display:none}

/* Newsletter band */
.tbq-newsletter{margin-top:var(--section);color:var(--cream);background:radial-gradient(circle at 22% 18%,rgba(213,51,101,.30),transparent 34%),var(--band)}
.tbq-newsletter-inner{
  width:min(var(--shell),calc(100% - var(--gutter)*2));margin-inline:auto;
  display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(32px,6vw,96px);
  padding:clamp(56px,7vw,96px) 0;align-items:start;
}
.tbq-newsletter .tbq-kicker{color:var(--rose)}
.tbq-newsletter h2{color:var(--cream);font-size:clamp(36px,4vw,58px);line-height:1.04;margin:16px 0 20px}
.tbq-newsletter-intro{margin:0;max-width:34em;font:400 clamp(17px,1.4vw,19px)/1.5 var(--display);font-variation-settings:"opsz" 14;color:rgba(255,247,236,.86)}
.newsletter-points{list-style:none;margin:30px 0 0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.newsletter-points li{border-top:1px solid rgba(255,247,236,.3);padding-top:12px;font:400 14px/1.5 var(--body);color:rgba(255,247,236,.8)}
.newsletter-signup{align-self:center}
.bg-newsletter-form{display:grid;gap:14px}
.bg-newsletter-form .tbq-field-label{font:400 12px/1.4 var(--body);letter-spacing:.16em;text-transform:uppercase;color:var(--rose)}
.bg-newsletter-form input[type=email]{
  width:100%;padding:16px 18px;border:1px solid rgba(255,247,236,.5);border-radius:0;
  background:transparent;color:var(--cream);font:400 17px/1.3 var(--body);
}
.bg-newsletter-form input[type=email]::placeholder{color:rgba(255,247,236,.55)}
.bg-newsletter-form button{
  padding:17px 24px;border:0;border-radius:0;cursor:pointer;background:var(--cream);color:var(--cherry);
  font:500 12px/1.4 var(--body);letter-spacing:.16em;text-transform:uppercase;
}
.bg-newsletter-form button:hover{background:var(--paper)}
.bg-newsletter-form .input--hidden{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
.bg-newsletter-form .entry__error:empty{display:none}
.newsletter-consent-check{display:flex;gap:12px;align-items:flex-start;font:400 14px/1.5 var(--body);color:rgba(255,247,236,.82)}
.newsletter-consent-check input{margin:3px 0 0;accent-color:var(--cream);width:16px;height:16px;flex:none}
.bg-newsletter-form .form-note{margin:0;font:400 13px/1.5 var(--body);color:rgba(255,247,236,.65)}
.bg-newsletter-form .form-note a{border-bottom:1px solid rgba(255,247,236,.5)}
.newsletter-form-message{margin:0 0 14px;padding:12px 14px;font:400 14px/1.5 var(--body);border:1px solid rgba(255,247,236,.4);color:var(--cream)}

/* ---------- 8. Section, archive and list pages --------------------- */
.simple-page,
main.main{width:min(var(--shell),calc(100% - var(--gutter)*2));margin:clamp(40px,5vw,72px) auto 0}
.simple-page > .page-kicker + h1,
.simple-page > h1{font-size:clamp(44px,5.6vw,84px);line-height:1.02;margin:14px 0 18px}
.simple-page > .archive-note{max-width:40em;color:var(--muted);margin-bottom:clamp(40px,5vw,64px)}
.tbq-photo-masthead{position:relative;min-height:clamp(360px,35.625vw,456px);overflow:hidden;background:var(--ink);color:var(--cream)}
.tbq-photo-masthead > img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center top}
.tbq-photo-masthead-content{position:relative;display:flex;flex-direction:column;justify-content:center;min-height:inherit;width:min(48%,590px);padding:clamp(28px,4.3vw,55px)}
.tbq-photo-masthead .tbq-photo-kicker,.tbq-photo-masthead .tbq-photo-foot{font:500 11px/1.5 var(--body);letter-spacing:.1em;text-transform:uppercase}
.tbq-photo-masthead h1{font:italic 400 clamp(60px,7.5vw,96px)/1 var(--display);font-variation-settings:"opsz" 20;color:var(--cream);letter-spacing:-.01em;margin:19px 0 32px}
.tbq-photo-masthead .tbq-photo-deck{font:400 clamp(23px,2.5vw,32px)/1.2 var(--display);font-variation-settings:"opsz" 16;margin:0 0 40px}
.tbq-photo-foot{display:flex;flex-direction:column;align-items:flex-start;gap:16px;padding-top:18px;border-top:1px solid var(--cream)}
.tbq-photo-foot a{border-bottom:1px solid var(--cream);padding-bottom:2px}
.tbq-photo-foot a:hover{color:var(--rose);border-bottom-color:var(--rose)}
.tbq-section-intro{margin:32px 0 48px}
.tbq-section-intro h2{font:italic 400 clamp(35px,4vw,52px)/1.08 var(--display);font-variation-settings:"opsz" 20;color:var(--cherry);letter-spacing:-.01em}
.tbq-section-intro p{margin:14px 0 0;font:400 clamp(19px,2vw,26px)/1.35 var(--display);font-variation-settings:"opsz" 16}
.tbq-category-feature{display:grid;grid-template-columns:47% 53%;min-height:350px;background:var(--wash)}
.tbq-category-feature-copy{display:flex;flex-direction:column;justify-content:center;min-width:0;padding:clamp(28px,4vw,55px)}
.tbq-category-feature h2{font-family:var(--display);font-style:italic;font-weight:400;font-variation-settings:"opsz" 20;
  font-size:clamp(34px,4vw,53px);line-height:1.04;letter-spacing:-.01em;color:var(--cherry);text-wrap:balance;margin:14px 0 13px}
.tbq-category-feature .tbq-deck{font-size:clamp(18px,1.45vw,21px)}
.tbq-category-feature .tbq-textlink{align-self:flex-start;margin-top:22px}
.tbq-category-feature > img{width:100%;height:100%;min-height:350px;object-fit:cover}
.tbq-category-feature:hover h2{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:7px}
.archive-section{margin-top:clamp(40px,5vw,64px)}
.archive-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0 clamp(22px,2.4vw,36px)}
.archive-card{display:block;padding:24px 0 30px;border-top:1px solid var(--rule)}
.archive-card strong{
  display:block;margin:10px 0 8px;font-family:var(--display);font-style:italic;font-weight:400;
  font-variation-settings:"opsz" 20;font-size:clamp(22px,1.9vw,27px);line-height:1.12;color:var(--cherry);text-wrap:balance;
}
.archive-card em{display:block;font:400 12px/1.4 var(--body);font-style:normal;letter-spacing:.06em;color:var(--muted);margin-bottom:10px}
.archive-card p{margin:0;font:400 15px/1.55 var(--body);color:var(--muted)}

/* 404 */
.error-actions{display:flex;flex-wrap:wrap;gap:24px;margin-top:28px}
.error-actions a{font:500 12px/1.4 var(--body);letter-spacing:.16em;text-transform:uppercase;color:var(--cherry);border-bottom:1px solid currentColor;padding-bottom:3px}

/* Archive search */
.archive-toolkit{margin-bottom:clamp(40px,5vw,64px)}
.archive-toolkit .archive-note{color:var(--muted);margin-bottom:22px}
.archive-search-row{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,1fr) minmax(0,1fr);gap:12px}
.archive-search-row input,
.archive-search-row select{
  width:100%;padding:14px 16px;border:1px solid var(--rule);border-radius:0;background:var(--paper);
  font:400 16px/1.3 var(--body);color:var(--ink);
}
.archive-search-row input:focus,.archive-search-row select:focus{border-color:var(--cherry);outline:none}
.archive-filter-pills{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px}
.archive-filter-pills button{
  padding:9px 14px;border:1px solid var(--rule);border-radius:0;background:transparent;cursor:pointer;
  font:400 12px/1.2 var(--body);letter-spacing:.12em;text-transform:uppercase;color:var(--ink);
}
.archive-filter-pills button:hover{border-color:var(--cherry);color:var(--cherry)}
.archive-filter-pills button.active{background:var(--cherry);border-color:var(--cherry);color:var(--paper)}
[data-archive-results-meta]{margin-top:16px;font:400 14px/1.5 var(--body);color:var(--muted)}

/* ---------- 9. Trust and plain pages ------------------------------- */
.trust-page{max-width:calc(var(--read) + var(--gutter)*2);padding-inline:var(--gutter);width:auto}
.trust-page > .page-kicker{margin-top:0}
.trust-page > .standfirst{color:var(--ink);margin-bottom:clamp(32px,4vw,48px)}
.trust-card-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin:0 0 clamp(32px,4vw,48px)}
.trust-mini-card{display:block;padding:20px;background:var(--wash)}
.trust-mini-card span{display:block;font:400 11px/1.4 var(--body);letter-spacing:.16em;text-transform:uppercase;color:var(--cherry)}
.trust-mini-card strong{display:block;margin-top:8px;font:italic 400 20px/1.2 var(--display);font-variation-settings:"opsz" 18;color:var(--cherry)}
.trust-note{margin-top:32px;padding:22px 24px;background:var(--wash)}
.trust-note strong{font:400 12px/1.4 var(--body);letter-spacing:.16em;text-transform:uppercase;color:var(--cherry)}
.trust-note p{margin:8px 0 0}

/* Scrollable film magazine: one lead, smaller features and a history aside. */
.watch-magazine-heading{display:flex;justify-content:space-between;align-items:baseline;gap:20px;padding-bottom:22px;border-bottom:1px solid var(--cherry);margin-bottom:32px}
.watch-magazine-heading p{margin:0;font:400 19px/1.4 var(--display);font-variation-settings:"opsz" 14;color:var(--muted)}
.watch-magazine-grid{display:grid;grid-template-columns:minmax(0,3fr) minmax(230px,1fr);gap:clamp(28px,4vw,64px);align-items:start}
.watch-main-column{min-width:0}
.tbq-watch-feature{display:block}
.tbq-watch-artwork{display:block}
.tbq-watch-artwork img{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:contain}
.tbq-watch-copy{padding-top:24px}
.tbq-watch-copy h1{font-size:clamp(42px,5.3vw,76px);line-height:1.04;margin:13px 0 20px;max-width:16ch}
.tbq-watch-copy .tbq-deck{font-size:clamp(21px,2vw,27px);max-width:30em}
.tbq-watch-copy .tbq-summary{margin-top:16px;max-width:46em}
.tbq-watch-copy .tbq-textlink{margin-top:22px}
.watch-more{margin-top:clamp(40px,5vw,64px)}
.watch-more .tbq-section-head{margin-bottom:26px}
.watch-more h2{font-size:clamp(32px,3.3vw,44px)}
.watch-small-features{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:32px}
.watch-small-feature{min-width:0}
.watch-small-artwork{display:block;margin-bottom:19px}
.watch-small-artwork img{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:contain}
.watch-small-feature h3{font-size:clamp(27px,2.7vw,36px);line-height:1.1;margin:12px 0 15px}
.watch-small-feature h3 a:hover{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:5px}
.watch-small-feature .tbq-textlink{margin-top:20px}
.watch-history{background:var(--wash);padding:24px;border-top:1px solid var(--cherry)}
.watch-history h2{font-size:clamp(31px,3vw,43px);line-height:1.04;margin:12px 0 24px}
.watch-history img{display:block;width:100%;height:auto;margin-bottom:22px}
.watch-history .watch-history-hook{font:italic 400 clamp(25px,2.6vw,34px)/1.12 var(--display);font-variation-settings:"opsz" 18;color:var(--cherry);margin:0 0 16px}
.watch-history .tbq-textlink{margin-top:22px;line-height:1.7}
.tbq-watch-channel{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.2fr);gap:28px;padding-top:28px;border-top:1px solid var(--cherry);margin-top:clamp(48px,6vw,80px)}
.tbq-watch-channel h2{font-size:clamp(34px,4vw,52px);line-height:1.08;margin:12px 0 0}
.tbq-watch-channel .tbq-textlink{margin-top:22px}
.tbq-watch-channel .tbq-summary{margin-top:14px;font-size:14px}

/* ---------- 10. Editors -------------------------------------------- */
.author-strip{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(28px,3vw,44px) clamp(20px,2.4vw,32px);margin-top:clamp(32px,4vw,48px)}
.author-strip .author img{width:100%;aspect-ratio:4/5;object-fit:cover;margin-bottom:16px}
.author-strip .author h3{font:italic 400 26px/1.1 var(--display);font-variation-settings:"opsz" 20;color:var(--cherry);margin:0 0 8px}
.author-strip .author p{margin:0 0 10px;font:400 15px/1.5 var(--body);color:var(--muted)}
.author-strip .author p strong{display:block;font-weight:500;color:var(--ink)}
.author-strip .author span{font:400 11px/1.4 var(--body);letter-spacing:.14em;text-transform:uppercase;color:var(--cherry)}
main.main > .intro-copy{max-width:40em;color:var(--muted)}

.author-page{width:min(var(--shell),calc(100% - var(--gutter)*2));margin:clamp(32px,4vw,56px) auto 0}
.author-hero-v116{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,7fr);gap:clamp(28px,4vw,64px);align-items:center;margin-top:28px}
.author-portrait-wrap img{width:100%;aspect-ratio:4/5;object-fit:cover}
.author-hero-copy h1{font-size:clamp(44px,5.6vw,84px);line-height:1.02;margin:14px 0 18px}
.author-hero-copy .standfirst{max-width:34em}
.author-article-grid-v116{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(36px,4vw,56px) clamp(22px,2.4vw,36px)}
.author-article-card{display:block}
.author-article-thumb{display:block;aspect-ratio:3/2;background-size:cover;background-position:center;margin-bottom:16px;background-color:var(--wash)}
.author-article-card strong{display:block;margin:10px 0 8px;font:italic 400 clamp(22px,1.9vw,26px)/1.12 var(--display);font-variation-settings:"opsz" 20;color:var(--cherry);text-wrap:balance}
.author-article-card em{display:block;font:400 15px/1.55 var(--body);font-style:normal;color:var(--muted)}

/* ---------- 11. Articles ------------------------------------------- */
/* Standard template (article-shell, v111/v120). */
.article-page{width:min(var(--shell),calc(100% - var(--gutter)*2));margin:clamp(28px,3.5vw,48px) auto 0}
.article-hero-block{max-width:var(--read);margin:28px auto 0}
.article-meta-row{display:flex;flex-wrap:wrap;gap:6px 18px;align-items:baseline;font:400 13px/1.5 var(--body);color:var(--muted)}
.article-meta-row a{color:var(--ink);border-bottom:1px solid var(--rule)}
.persona-attribution,main article .persona-attribution,.tbq-section-intro .persona-attribution{font:400 14px/1.55 var(--body);color:var(--muted);margin:12px 0 18px;max-width:var(--read)}
.persona-attribution a{color:var(--cherry);text-decoration:underline;text-underline-offset:3px}
.vivienne-copy .persona-attribution,.vivienne-copy .persona-attribution a{color:var(--cream)}
.article-hero-block h1{font-size:clamp(40px,5vw,72px);line-height:1.04;margin:18px 0 20px}
.article-hero-block .standfirst{color:var(--ink)}
.article-figure{margin:clamp(32px,4vw,56px) auto 0;max-width:1100px}
.article-figure img,
.article-figure .hero-img{width:100%;aspect-ratio:3/2;object-fit:cover;background-size:cover;background-position:center;background-color:var(--wash)}
.article-layout{max-width:var(--read);margin:clamp(36px,4vw,56px) auto 0}

/* Running text — shared by every article template and the trust pages. */
.article-body,
main article .content-wrap,
main article .article-content{font:400 18px/1.75 var(--body);color:var(--ink)}
.article-body p,
main article p{margin:0 0 1.2em}
.article-body h2,
.article-body h3,
main article > h2,
main article .article-content h2,
main article .content-wrap h2{
  font:italic 400 clamp(26px,2.4vw,32px)/1.2 var(--display);font-variation-settings:"opsz" 18;
  color:var(--cherry);margin:1.8em 0 .6em;text-wrap:balance;
}
/* Headings inside article furniture are styled by their own components. */
.article-footer-v111 h3,.newsletter-invitation h2{margin-top:0}
.article-body p a,
.article-body li a,
main article p a{color:var(--cherry);border-bottom:1px solid rgba(146,0,38,.35)}
.article-body p a:hover,
.article-body li a:hover,
main article p a:hover{border-bottom-color:var(--cherry)}
.newsletter-invitation-button span[aria-hidden="true"]{display:none}
.article-body ul,.article-body ol{padding-left:1.2em;margin:0 0 1.2em}
.article-body li{margin-bottom:.4em}
.article-body blockquote{margin:1.6em 0;padding-left:24px;border-left:2px solid var(--cherry);font:italic 400 24px/1.35 var(--display);font-variation-settings:"opsz" 18;color:var(--cherry)}
.article-inline-label{font:500 13px/1.5 var(--body);letter-spacing:.14em;text-transform:uppercase;color:var(--cherry);margin:2em 0 .5em}
.pull-note{margin:1.8em 0;padding:22px 0;border-top:1px solid var(--cherry);border-bottom:1px solid var(--cherry);font:italic 400 22px/1.4 var(--display);font-variation-settings:"opsz" 18;color:var(--cherry)}
.pull-note strong{font:400 12px/1.4 var(--body);font-style:normal;letter-spacing:.16em;text-transform:uppercase;display:block;margin-bottom:8px}
.evidence-note{margin:2em 0;padding:22px 24px;background:var(--wash);border-left:2px solid var(--cherry);font-size:16px}
.sources{font-size:14.5px;line-height:1.7;color:var(--muted)}
.article-reporting{clear:both}

/* Captions — "tbq caption foreground": 4.5:1 contrast is tested. */
main figcaption,
main .figure-caption{
  margin-top:10px;
  color: #5d4f56;
  background-color: #ffffff;
  font:400 13px/1.5 var(--body);
}

/* Article footer furniture */
.article-footer-v111{margin-top:clamp(40px,5vw,64px)}
.article-credibility-strip{display:flex;flex-wrap:wrap;gap:6px 18px;padding:14px 0;border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);font:400 12px/1.4 var(--body);letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.article-author-card-v111{display:grid;grid-template-columns:64px minmax(0,1fr);gap:20px;align-items:start;margin:32px 0}
.article-author-avatar{width:64px;height:64px;border-radius:50%;background:var(--wash);color:var(--cherry);display:grid;place-items:center;font:italic 400 22px/1 var(--display)}
.article-author-card-v111 h3{font:italic 400 24px/1.1 var(--display);font-variation-settings:"opsz" 20;color:var(--cherry);margin:0}
.article-author-card-v111 .author-role{margin:4px 0 8px;font:400 12px/1.4 var(--body);letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.article-author-card-v111 .author-bio{margin:0 0 10px;font:400 15.5px/1.55 var(--body);color:var(--ink)}
.article-author-card-v111 a{font:500 12px/1.4 var(--body);letter-spacing:.16em;text-transform:uppercase;color:var(--cherry);border-bottom:1px solid currentColor}
.related-articles-v111{margin-top:40px}
.tbq-read-next{max-width:var(--read);margin:48px auto 0}
.related-label{display:block;padding-top:18px;border-top:1px solid var(--cherry);margin-bottom:22px;font:italic 400 28px/1.1 var(--display);font-variation-settings:"opsz" 20;color:var(--cherry)}
.related-grid-v111{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
.related-grid-v111 a{display:block}
.related-grid-v111 strong{display:block;margin:8px 0 6px;font:italic 400 20px/1.15 var(--display);font-variation-settings:"opsz" 18;color:var(--cherry)}
.related-grid-v111 em{display:block;font:400 14px/1.5 var(--body);font-style:normal;color:var(--muted)}

/* In-article newsletter invitation */
.newsletter-invitation{margin:48px 0 0;padding:clamp(28px,3.5vw,40px);background:var(--wash);display:grid;grid-template-columns:minmax(0,3fr) minmax(0,2fr);gap:28px;align-items:center}
.newsletter-invitation h2{font:italic 400 clamp(26px,2.6vw,34px)/1.1 var(--display);font-variation-settings:"opsz" 20;color:var(--cherry);margin:10px 0}
.newsletter-invitation p{margin:0;font:400 15px/1.55 var(--body);color:var(--ink)}
.newsletter-invitation-action p{margin-top:12px;font-size:13px;color:var(--muted)}
.newsletter-invitation-action p a{border-bottom:1px solid currentColor}

/* Earlier one-off article templates. Their markup varies, so the whole
   <main> becomes the reading column and the pieces inside inherit the
   house type. The homepage <main> carries a class, so it is excluded. */
main.page,
main.hero,
main:not([class]){max-width:calc(var(--read) + var(--gutter)*2);margin:clamp(32px,4vw,56px) auto 0;padding-inline:var(--gutter)}
.article-page > article:not(.article-shell){max-width:var(--read);margin:28px auto 0}
main article h1,
main.page h1,
main.hero h1,
main:not([class]) h1{font-size:clamp(40px,5vw,68px);line-height:1.04;margin:18px 0 20px}
main.page .kicker,main.hero .kicker,main:not([class]) .kicker,
main.page .eyebrow,main:not([class]) .eyebrow,
.article-page > article > .kicker,
main article header > p:first-child{display:block;font:400 12px/1.4 var(--body);letter-spacing:.16em;text-transform:uppercase;color:var(--cherry);margin:0}
main.page .meta,main.hero .meta,main:not([class]) .meta,
main article .byline,
main article .article-reading-time,
.article-page > article > .article-meta-row{font:400 13px/1.5 var(--body);color:var(--muted)}
main.page figure,main.hero figure,main:not([class]) figure,.article-page > article figure{margin:32px 0}
main.page figure img,main.hero figure img,main:not([class]) figure img,
main.page .hero img,main:not([class]) .hero img{width:100%;height:auto}
main article .callout,
main article .note,
main article .routine{margin:1.6em 0;padding:22px 24px;background:var(--wash)}
main.page .content-wrap,main.page .hero,main:not([class]) .wrap,main:not([class]) .page-shell,
main:not([class]) .page-wrap,main:not([class]) .content,main.hero .container{max-width:none;margin:0;padding:0;background:none}

/* ---------- 12. Responsive ----------------------------------------- */
@media (max-width:1024px){
  .primary-nav a{letter-spacing:.12em}
  .primary-nav a + a::before{padding:0 10px}
  .home-beauty-hero-link{grid-template-columns:1fr 1fr}
  .article-grid,.archive-grid,.author-article-grid-v116{grid-template-columns:repeat(2,minmax(0,1fr))}
  .author-strip{grid-template-columns:repeat(3,minmax(0,1fr))}
  .tbq-lens-feature{grid-template-columns:1fr 1fr}
  .newsletter-points{grid-template-columns:1fr;gap:10px}
}
@media (max-width:760px){
  .primary-nav{flex-wrap:wrap;justify-content:center;column-gap:16px;overflow-x:visible}
  .primary-nav a{min-height:44px;padding:12px 0;align-items:center}
  .primary-nav a:first-child{margin-left:0}
  .primary-nav a:last-child{margin-right:0}
  .primary-nav a + a::before{content:none}
  .watch-magazine-grid,.tbq-watch-channel{grid-template-columns:1fr}
  .watch-magazine-heading{align-items:flex-start;flex-direction:column;gap:8px}
  .watch-history{max-width:none}
  .watch-small-features{grid-template-columns:1fr}
  .watch-small-feature + .watch-small-feature{padding-top:28px;border-top:1px solid var(--rule)}
  .utility-bar-inner > span{display:none}
  .utility-bar-inner{justify-content:flex-end}
  .tbq-photo-masthead{display:flex;flex-direction:column;min-height:0}
  .tbq-photo-masthead > img{position:static;height:auto;aspect-ratio:16/10;object-position:65% center}
  .tbq-photo-masthead-content{min-height:0;width:100%;padding:26px}
  .tbq-photo-masthead h1{font-size:clamp(52px,10vw,72px);margin:10px 0 16px}
  .tbq-photo-masthead .tbq-photo-deck{margin-bottom:22px}
  .home-beauty-hero-link{grid-template-columns:1fr}
  .home-beauty-hero-link > img{grid-column:1;grid-row:1;min-height:0;height:auto;aspect-ratio:4/3}
  .home-beauty-hero-copy{grid-row:2}
  .tbq-category-feature{grid-template-columns:1fr}
  .tbq-category-feature > img{grid-column:1;grid-row:1;height:auto;min-height:0;aspect-ratio:4/3}
  .tbq-category-feature-copy{grid-column:1;grid-row:2;padding:26px}
  .tbq-category-feature h2{font-size:clamp(34px,9vw,48px)}
  .tbq-cover-features{grid-template-columns:1fr;gap:28px}
  .tbq-cover-story:first-child{border-right:0;padding-right:0;padding-bottom:28px;border-bottom:1px solid var(--rule)}
  .tbq-cover-story:last-child{padding-left:0}
  .tbq-cover-story{grid-template-columns:38% 1fr}
  .tbq-lens-feature{grid-template-columns:1fr}
  .tbq-lens-ledger a{grid-template-columns:1fr;gap:8px}
  .tbq-newsletter-inner{grid-template-columns:1fr}
  .site-footer-inner{grid-template-columns:1fr 1fr}
  .site-footer-brand{grid-column:1/-1}
  .author-hero-v116{grid-template-columns:1fr}
  .author-portrait-wrap{max-width:320px}
  .trust-card-grid{grid-template-columns:1fr}
  .archive-search-row{grid-template-columns:1fr}
  .newsletter-invitation{grid-template-columns:1fr}
  .related-grid-v111{grid-template-columns:1fr}
  .author-strip{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:599px){
  .tbq-masthead .tbq-name{font-size:clamp(32px,9.75vw,38px)}
  #vivienne-column{--vf-gutter:16px;--vf-gap:12px;--vf-portrait:min(46vw,220px);--vf-lift:24px;--vf-pad:22px}
  #vivienne-column blockquote{margin:10px 0 14px}
  #vivienne-column blockquote p{font-size:clamp(20px,5.6vw,26px);line-height:1.1}
  #vivienne-column .tbq-textlink{font-size:11px;letter-spacing:.1em;line-height:1.9;border-bottom:0;
    text-decoration:underline;text-decoration-color:var(--rose);text-underline-offset:5px}
  .article-grid,.archive-grid,.author-article-grid-v116{grid-template-columns:1fr}
  .tbq-section-head,.section-title{flex-direction:column;gap:12px}
  .article-body,main article .content-wrap,main article .article-content{font-size:17px}
}
@media (prefers-reduced-motion:reduce){*{transition:none}}