/* assets/hearth-page-magazine.css — Magazine, the page style at go-live.
 *
 * Vendor page build, PR C. The hero only: the masthead, the cover line and the
 * cover photo (handover Decided 9–17; Design System › MagazineHero). Everything
 * below the hero is the customer frame (assets/hearth-customer-frame.css), and
 * nothing there reads the page style (Decided 6), so a second style is a second
 * file like this one, chosen by vendors.page_style.
 *
 * ⚠️ WHERE THE DESIGN SYSTEM DIFFERS, THE HANDOVER WINS:
 *   - the name FITS its line with a 40px floor on a phone, and below the floor
 *     wraps to two balanced lines (Decided 9). The Design System sized each
 *     board's name by hand and never wrapped; the page sets the size in
 *     assets/hearth-vendor-page.js (fitNames), with this CSS as the floor and
 *     the wrap;
 *   - no "Next up" eyebrow on a computer, and "Also on" never repeats the Next
 *     moment (plan, open question 9).
 *
 * Mobile first; the computer layout starts at 1000px.
 */

.mz .mz-mast{padding:14px 16px 12px;display:flex;flex-direction:column;gap:7px}
.mz .mz-name{font-family:var(--display);font-weight:600;letter-spacing:-.03em;line-height:.92;margin:0;
  font-size:40px;white-space:nowrap;overflow-wrap:normal}
/* Below the floor the name wraps to two balanced lines, never sideways.
   ⚠️ `text-wrap:balance` is a SHORTHAND that turns wrapping back on, so it is
   set only here, where wrapping is wanted, never beside the nowrap above. */
.mz .mz-name.wraps{white-space:normal;text-wrap:balance}
.mz .mz-rule{border-top:2px solid currentColor;border-bottom:1px solid currentColor;height:5px;opacity:.85}
.mz .mz-date{display:flex;justify-content:space-between;align-items:center;gap:12px;min-width:0}
.mz .mz-date .dl{font:700 12.5px/1.3 var(--font-sans);letter-spacing:.08em;text-transform:uppercase;margin:0}
.mz .mz-date .tl{margin:0;font:500 13px/1.4 var(--font-sans);opacity:.95;min-width:0}
.mz .links{display:flex;gap:18px;align-items:center;flex-shrink:0}
.mz .links a,.mz .links button{font:600 14px/1.2 var(--font-sans);color:inherit;text-decoration:underline;text-underline-offset:4px;
  text-decoration-thickness:1.5px;background:none;border:0;padding:4px 0;cursor:pointer}
/* The logo as it is, with no white tile (Decided 9): sized by height, so a wide
   wordmark keeps its proportions and is never cropped. */
.mz .bare-logo{display:block;object-fit:contain;flex-shrink:0;height:30px;width:auto;max-width:120px}

/* The cover line comes before the cover on a phone (Decided 13), so the date,
   name, line-up and button sit on the first screen; on a computer the cover
   sits left of it, seven columns to five. */
.mz .mz-hero{display:flex;flex-direction:column}
.mz .mz-lines{display:flex;flex-direction:column;gap:10px;padding:16px 16px 4px;min-width:0}
.mz .mz-lines .poster{font:800 clamp(40px,12.4cqi,72px)/.88 var(--font-sans);letter-spacing:-.035em;text-transform:uppercase;margin:0;color:var(--v-ink)}
.mz .mz-lines .poster.q{font-size:clamp(30px,8cqi,44px);line-height:.95}
.mz .mz-lines .mname{font-size:clamp(28px,7.4cqi,38px)}
.mz .lu{margin:0;font:500 15px/1.5 var(--font-sans)}
.mz .lu .sep{color:var(--v-ink);padding:0 6px}
.mz .price{margin:0;font:700 15px/1.3 var(--font-sans)}
.mz .ww{margin:0;font:400 14px/1.5 var(--font-sans);color:var(--muted)}
.mz .note{margin:0;font:500 14px/1.45 var(--font-sans)}
.mz .mz-lines .btn{align-self:stretch;margin-top:4px}
.mz .also{margin:0;font:500 14px/1.5 var(--font-sans);color:var(--muted)}
.mz .also a{color:var(--ink);font-weight:600;text-decoration:underline;text-underline-offset:3px}
.mz .nextup{display:flex;flex-direction:column;gap:8px;border-top:2px solid var(--v-ink);padding-top:12px;margin-top:4px}
.mz .nextup .kicker{color:var(--v-ink)}
.mz .nextup .nx{margin:0;font:500 16px/1.35 var(--font-sans)}
.mz .mz-left{order:2;margin-top:18px;position:relative}
/* The wash the vendor chose for their place photo (Your look › Photo tint):
   their colour over the cover at the resolver's strength, none 0, light .15,
   strong .30 (theme.photo_tint_alpha; the page names no number of its own). */
.mz .mz-left::after{content:"";position:absolute;inset:0;background:var(--v-panel);opacity:var(--v-place-wash,0);pointer-events:none}
.mz .mz-cover{width:100%;aspect-ratio:1/1;object-fit:cover;object-position:50% 45%}
.mz .capline{padding:10px 16px 0;margin:0;font:500 13.5px/1.4 var(--font-sans);color:var(--muted)}

@media (min-width:1000px){
  .mz .mz-mast{padding:24px 64px 22px;gap:10px}
  .mz .mz-date .dl{font-size:14px}
  .mz .mz-date .tl{font-size:15px}
  .mz .links a,.mz .links button{font-size:15px}
  .mz .bare-logo{height:40px;max-width:160px}
  .mz .mz-hero{display:grid;grid-template-columns:7fr 5fr;align-items:start}
  .mz .mz-hero.nocover{grid-template-columns:minmax(0,760px);justify-content:center}
  .mz .mz-left{order:0;margin-top:0;grid-column:1;grid-row:1}
  .mz .mz-lines{grid-column:2;grid-row:1;padding:28px 56px 0 44px;gap:11px}
  .mz .mz-hero.nocover .mz-lines{grid-column:1;padding:36px 0 0}
  .mz .mz-lines .poster{font-size:72px}
  .mz .mz-lines .btn{align-self:flex-start;min-width:300px}
  .mz .mz-cover{aspect-ratio:auto;height:540px}
  .mz .capline{padding:10px 0 0 64px}
  .mz .also{display:none}
}