/* Banner styles and type (640_hero_type.sql, check-in 2 of claude/design-controls-plan.md).
   hxn-*: our eight banner layouts, picked in Admin, Your page, banner Style. They borrow every token from the site and its
   design (fonts, colors, corners), so the same layout looks at home under Gallery, Forge or the plain site.
   hxs-*: the owner's headline font, size, weight and color, put on any banner, the designs' own included.
   html[data-heads|data-body|data-bodyfont]: site-wide text from Look and photos. */

/* ---------- shared */
.hxn { --hxn-pad: clamp(64px, 9vw, 128px); position: relative; padding: var(--hxn-pad) 0; background: var(--ground); color: var(--cream); display: flex; flex-direction: column; justify-content: center; }
.hxn .sx-in { position: relative; z-index: 1; }
.hxn-title { font-family: var(--serif); font-weight: var(--hw, 400); letter-spacing: var(--ht, -0.02em); line-height: .95; margin: 0; max-width: 14ch; font-size: clamp(48px, 7.6vw, 112px); }
.hxn-sub { font-size: clamp(17px, 1.5vw, 21px); }
.hxn-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 18px; margin: 0 0 clamp(18px, 2.4vw, 28px); font-size: 14.5px; font-weight: 500; color: var(--muted); }
.hxn-meta > span { display: inline-flex; align-items: center; gap: 7px; }
.hxn-meta .ico { width: 15px; height: 15px; }
.hxn-pic { position: relative; margin: 0; overflow: hidden; background: color-mix(in srgb, var(--amber) 10%, var(--panel)); border-radius: var(--radius); }
.hxn-pic img { display: block; width: 100%; height: 100%; object-fit: cover; }
.hxn-pic.none { display: grid; place-items: center; background:
  radial-gradient(circle at 1px 1px, color-mix(in srgb, var(--amber) 28%, transparent) 1px, transparent 1.4px) 0 0 / 18px 18px,
  linear-gradient(150deg, color-mix(in srgb, var(--amber) 16%, var(--panel)), color-mix(in srgb, var(--blue) 12%, var(--panel))); }
.hxn-mono { font-family: var(--serif); font-size: clamp(72px, 12vw, 180px); line-height: 1; color: color-mix(in srgb, var(--amber) 70%, var(--cream)); letter-spacing: -0.04em; }
.hxn .hx-addphoto.in { position: absolute; top: 14px; right: 14px; z-index: 3; }
.hxn-center .hxn-copy, .hxn-center .hxn-title, .hxn-center .hxn-sub { text-align: center; margin-left: auto; margin-right: auto; }
.hxn-center .hxn-meta, .hxn-center .hx-acts { justify-content: center; }
.hxn-h-short { min-height: 44vh; } .hxn-h-medium { min-height: 64vh; } .hxn-h-tall { min-height: 82vh; } .hxn-h-full { min-height: 100svh; }

/* 1. Magazine: a hairline with the small line on it, the name set big, words and buttons side by side, the photo full width. */
.hxn-editorial { padding-bottom: 0; }
.hxn-editorial:not(.has-photo) { padding-bottom: var(--hxn-pad); }
.hxn-rule { border-top: 1px solid var(--line-2); padding-top: 14px; margin-bottom: clamp(26px, 4vw, 52px); }
.hxn-rule .hxn-meta { margin: 0; }
.hxn-editorial .hxn-title { max-width: none; font-size: clamp(56px, 10vw, 148px); }
.hxn-row { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: 20px clamp(32px, 6vw, 96px); align-items: end; margin-top: clamp(22px, 3vw, 40px); }
.hxn-row .hxn-sub { margin: 0; }
.hxn-row .hx-acts { margin: 0; justify-content: flex-end; }
.hxn-center .hxn-row { grid-template-columns: 1fr; justify-items: center; }
.hxn-center .hxn-row .hx-acts { justify-content: center; }
.hxn-pic.wide { width: min(1440px, 100% - var(--gutter, 20px) * 2); margin: clamp(40px, 6vw, 80px) auto 0; aspect-ratio: 21 / 9; }
.hxn-editorial .hxn-pic.wide { border-radius: var(--radius) var(--radius) 0 0; }

/* 2-3. Side by side: words on one side, a tall photo on the other, running to the edge of the screen. */
.hxn-grid { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: 40px clamp(40px, 6vw, 104px); align-items: center; }
.hxn-split-left .hxn-grid { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); }
.hxn-split-left .hxn-pic { order: -1; }
.hxn-pic.tall { aspect-ratio: 4 / 5; max-height: 78vh; width: 100%; }
@media (min-width: 1100px) {
  .hxn-split .hxn-pic.tall { margin-right: calc((min(1200px, 100vw - var(--gutter, 20px) * 2) - 100vw) / 2); border-radius: var(--radius) 0 0 var(--radius); }
  .hxn-split-left .hxn-pic.tall { margin-left: calc((min(1200px, 100vw - var(--gutter, 20px) * 2) - 100vw) / 2); border-radius: 0 var(--radius) var(--radius) 0; }
}

/* 4. Full photo, and 7. Banner strip: the photo behind, darkened from the bottom, words in white. */
.hxn-cover, .hxn-band { color: #fff; background: var(--deep, #10131F); --cream: #fff; --cream-2: rgba(255, 255, 255, .86); --muted: rgba(255, 255, 255, .78); --line-2: rgba(255, 255, 255, .3); }
.hxn-cover { min-height: max(600px, 92svh); justify-content: flex-end; padding-top: 150px; }
.hxn-bg { position: absolute; inset: 0; z-index: 0; }
.hxn-bg img { width: 100%; height: 100%; object-fit: cover; }
.hxn-bg::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(5, 7, 13, .38) 0%, rgba(5, 7, 13, .1) 34%, rgba(5, 7, 13, .5) 66%, rgba(5, 7, 13, .86) 100%); }
.hxn-bg.none { background: radial-gradient(110% 90% at 80% 0%, color-mix(in srgb, var(--amber) 45%, transparent), transparent 60%), radial-gradient(90% 80% at 0% 100%, color-mix(in srgb, var(--blue) 35%, transparent), transparent 60%), var(--deep, #10131F); }
.hxn-bg.none::after { content: none; }
.hxn-band { min-height: clamp(320px, 46vh, 520px); text-align: center; }
.hxn-band .hxn-copy, .hxn-band .hxn-title, .hxn-band .hxn-sub { margin-left: auto; margin-right: auto; text-align: center; }
.hxn-band .hxn-meta, .hxn-band .hx-acts { justify-content: center; }
.hxn-band .hxn-title { font-size: clamp(40px, 6vw, 84px); max-width: 18ch; }
.hxn-band .hxn-bg::after { background: rgba(5, 7, 13, .52); }
.hxn-d-none .hxn-bg::after { background: linear-gradient(180deg, transparent 50%, rgba(5, 7, 13, .45)); }
.hxn-d-light .hxn-bg::after { background: linear-gradient(180deg, rgba(5, 7, 13, .2), rgba(5, 7, 13, .1) 40%, rgba(5, 7, 13, .62)); }
.hxn-d-strong .hxn-bg::after { background: rgba(5, 7, 13, .72); }
:root .hx.hxn:is(.hxn-cover, .hxn-band) .btn-ghost { color: #fff; border-color: rgba(255, 255, 255, .55); background: rgba(255, 255, 255, .1); box-shadow: none; }
:root .hx.hxn:is(.hxn-cover, .hxn-band) .btn-ghost:hover { background: rgba(255, 255, 255, .2); border-color: #fff; color: #fff; }
:root .hx.hxn:is(.hxn-cover, .hxn-band) .btn-ghost .ico { color: #fff; }
.hxn-cover .hxn-title, .hxn-band .hxn-title, .hxn-cover .hxn-sub, .hxn-band .hxn-sub { text-shadow: 0 2px 30px rgba(0, 0, 0, .25); }

/* 5. Centered: the words in the middle, the photo wide below them. */
.hxn-centered .hxn-copy, .hxn-centered .hxn-title, .hxn-centered .hxn-sub { text-align: center; margin-left: auto; margin-right: auto; }
.hxn-centered .hxn-meta, .hxn-centered .hx-acts { justify-content: center; }
.hxn-centered .hxn-title { max-width: 16ch; }
.hxn-centered .hxn-pic.wide { width: 100%; aspect-ratio: 16 / 7; }

/* 6. Poster: the photo hung large in a frame, the words on a card over its lower corner. */
.hxn-stage { position: relative; }
.hxn-pic.framed { aspect-ratio: 16 / 9; border: clamp(10px, 1.4vw, 18px) solid var(--panel); box-shadow: 0 40px 80px -40px rgba(10, 14, 30, .45), 0 0 0 1px var(--line); width: min(100%, 1040px); margin-left: auto; }
.hxn-card { position: relative; z-index: 2; margin-top: clamp(-220px, -14vw, -90px); width: min(620px, 92%); padding: clamp(26px, 3.4vw, 48px); background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: 0 30px 60px -36px rgba(10, 14, 30, .5); }
.hxn-card .hxn-title { font-size: clamp(40px, 5.4vw, 80px); max-width: 12ch; }
.hxn-poster.hxn-center .hxn-card { margin-left: auto; margin-right: auto; text-align: center; }
.hxn-poster.hxn-center .hxn-card .hxn-title, .hxn-poster.hxn-center .hxn-card .hxn-sub { margin-left: auto; margin-right: auto; }
.hxn-poster.hxn-center .hxn-card :is(.hxn-meta, .hx-acts) { justify-content: center; }
.hxn-poster.hxn-center .hxn-pic.framed { margin: 0 auto; }

/* 8. Quiet: no photo, a modest headline, a hairline under it. */
.hxn-quiet { padding: clamp(56px, 7vw, 96px) 0 clamp(32px, 4vw, 48px); }
.hxn-quiet .hxn-title { font-size: clamp(38px, 4.8vw, 64px); max-width: 20ch; line-height: 1.02; }
.hxn-hr { border: 0; border-top: 1px solid var(--line); margin: clamp(40px, 5vw, 64px) 0 0; }

@media (max-width: 860px) {
  .hxn-grid, .hxn-split-left .hxn-grid, .hxn-row { grid-template-columns: 1fr; }
  .hxn-split-left .hxn-pic { order: 0; }
  .hxn-row .hx-acts { justify-content: flex-start; }
  .hxn-center .hxn-row .hx-acts { justify-content: center; }
  .hxn-pic.tall { aspect-ratio: 4 / 3; }
  .hxn-pic.wide { aspect-ratio: 4 / 3; }
  .hxn-card { width: auto; margin: -48px 14px 0; }
  .hxn-pic.framed { aspect-ratio: 4 / 3; }
}

/* ---------- the owner's headline: font, size, weight, color (any banner, the designs' own too) */
:root .hx.hxs h1 { overflow-wrap: break-word; hyphens: manual; }
:root .hx.hxs.hxs-fo-instrument h1 { font-family: var(--font-instrument); }
:root .hx.hxs.hxs-fo-playfair h1 { font-family: var(--font-playfair); }
:root .hx.hxs.hxs-fo-fraunces h1 { font-family: var(--font-fraunces); }
:root .hx.hxs.hxs-fo-cormorant h1 { font-family: var(--font-cormorant); }
:root .hx.hxs.hxs-fo-dmserif h1 { font-family: var(--font-dmserif); }
:root .hx.hxs.hxs-fo-bricolage h1 { font-family: var(--font-bricolage); letter-spacing: -0.035em; }
:root .hx.hxs.hxs-fo-space h1 { font-family: var(--font-space); letter-spacing: -0.04em; }
:root .hx.hxs.hxs-fo-syne h1 { font-family: var(--font-syne); letter-spacing: -0.03em; }
:root .hx.hxs.hxs-fo-archivo h1 { font-family: var(--font-archivo); font-stretch: 72%; letter-spacing: -0.02em; text-transform: none; }
:root .hx.hxs.hxs-fo-poppins h1 { font-family: var(--font-poppins); letter-spacing: -0.035em; }
:root .hx.hxs.hxs-fo-geist h1 { font-family: var(--font-geist); letter-spacing: -0.045em; }
:root .hx.hxs[class*="hxs-fo-"] h1 { text-transform: none; font-style: normal; }
:root .hx.hxs.hxs-si-xs h1 { font-size: clamp(30px, 3.6vw, 46px); line-height: 1.05; }
:root .hx.hxs.hxs-si-s h1 { font-size: clamp(38px, 5vw, 64px); line-height: 1.02; }
:root .hx.hxs.hxs-si-m h1 { font-size: clamp(46px, 6.6vw, 88px); line-height: .98; }
:root .hx.hxs.hxs-si-l h1 { font-size: clamp(56px, 8.6vw, 120px); line-height: .95; }
:root .hx.hxs.hxs-si-xl h1 { font-size: clamp(64px, 11.4vw, 168px); line-height: .92; }
:root .hx.hxs.hxs-we-regular h1 { font-weight: 400; }
:root .hx.hxs.hxs-we-bold h1 { font-weight: 800; }
:root .hx.hxs.hxs-co-text h1 { color: var(--cream); -webkit-text-stroke: 0; }
:root .hx.hxs.hxs-co-accent h1 { color: var(--amber); -webkit-text-stroke: 0; }
:root .hx.hxs.hxs-co-accent2 h1 { color: var(--blue); -webkit-text-stroke: 0; }
:root .hx.hxs[class*="hxs-co-"] h1 :is(span, em, b) { color: inherit; -webkit-text-stroke: 0; background: none; -webkit-text-fill-color: currentColor; }
:root .hx.hxs.hxs-su-large .hx-sub { font-size: clamp(20px, 2vw, 26px); }

/* ---------- site-wide text (Look and photos) */
:root[data-heads="s"] .sx .sx-h { font-size: clamp(26px, 3vw, 36px); }
:root[data-heads="m"] .sx .sx-h { font-size: clamp(32px, 4.2vw, 52px); }
:root[data-heads="l"] .sx .sx-h { font-size: clamp(40px, 5.6vw, 76px); }
:root[data-heads="xl"] .sx .sx-h { font-size: clamp(48px, 7.6vw, 108px); max-width: 18ch; }
:root[data-bodyfont="geist"] { --body: var(--font-geist); }
:root[data-bodyfont="inter"] { --body: var(--font-inter); }
:root[data-bodyfont="dmsans"] { --body: var(--font-dmsans); }
:root[data-bodyfont="manrope"] { --body: var(--font-manrope); }
:root[data-bodyfont="lora"] { --body: var(--font-lora); }
:root[data-bodyfont="sourceserif"] { --body: var(--font-sourceserif); }
:root[data-bodyfont] body { font-family: var(--body); }
:root[data-body="large"] main :is(.tx2-b p, .ex-detail, .lx p, .tl-what p, .mag-sum, .sx-lede, .tr p, .sp p, .fq-a, .tm p, .cp-main p, .pr-detail, .rv-card blockquote, .bl-lead-sum, .bc-sum, .tl-bul, .pj-result, .pv-detail, .sv-body p, .ts-row p, .co-words, .tp-body, .rich p, .rich li) { font-size: 19.5px; line-height: 1.65; }
:root[data-body="large"] main .hx-sub { font-size: clamp(20px, 2vw, 25px); }