/* ==========================================================================
   CONCEPT B — "Occluded Performer". Art direction by Prince, developed through
   ChatGPT (chat 6ab9dd8c), implemented here. The rules that make it work:
     · one huge headline per screen, everything else tiny caps in the corners
     · yellow lands on ONE word and ONE button per screen — nowhere else
     · red is a single large block or a single word, never scattered
     · one word per headline in the italic serif
     · generous empty black
   ========================================================================== */

/* ---------- hero ----------
   The art and the text must not be laid out against different boxes. Earlier the
   photo and word were absolutely positioned against the full-bleed <section>
   while the copy sat in the 1180px .wrap — so at 1920 they drifted apart, a dead
   black gap opened in the middle and the "72 shows" label landed on top of the
   red word. The hero is now ONE grid: the text column pads itself out to the
   site gutter, the art column owns everything to its right. */
.hb{position:relative;background:var(--ink);overflow:hidden;
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.08fr);
  min-height:clamp(400px,34.6vw,650px)}
.hb .txt{position:relative;z-index:3;align-self:center;
  padding:clamp(30px,4vw,54px) clamp(20px,2.6vw,40px) clamp(30px,4vw,54px)
          max(var(--gut),calc((100vw - var(--max))/2))}
.hb .art{position:relative;z-index:1}
/* the red word is sized off the ART COLUMN, so it keeps its proportion at any width */
/* Placed left-of-centre in the art column: the dancer's skirt flares to the
   right, and at right:6% it swallowed the E so the word read "LIVO". */
.hb .word{position:absolute;right:44%;top:50%;transform:translateY(-50%);z-index:1;
  font-family:var(--display);font-size:min(26cqw,268px);line-height:.74;
  color:var(--red);letter-spacing:-.005em;pointer-events:none;user-select:none}
.hb .art{container-type:inline-size}
/* The photograph is a rectangle on near-black. `lighten` keeps the brightest of
   photo vs ground per channel, so the black background drops away and the red
   word shows through it, while the lit dancer stays in front. No cut-out needed.
   It only works because the source blacks are crushed to pure 0 (see build notes). */
.hb .perf{position:absolute;inset:0;z-index:2;width:100%;height:100%;
  object-fit:cover;object-position:center;pointer-events:none;
  mix-blend-mode:lighten;
  -webkit-mask-image:linear-gradient(to right,transparent,#000 26%);
          mask-image:linear-gradient(to right,transparent,#000 26%)}
.hb .kick{margin:0 0 24px;font-size:11px;font-weight:700;letter-spacing:.22em;
  line-height:1.9;text-transform:uppercase;color:#9d9d98}
.hb h1{font-size:clamp(38px,4.6vw,66px);line-height:1.02;letter-spacing:-.03em;max-width:12ch}
.hb h1 em{font-family:var(--accent);font-style:italic;font-weight:700;color:var(--yellow);
  letter-spacing:-.01em;display:block}
.hb .cta{display:flex;gap:12px;flex-wrap:wrap;margin-top:30px}
/* tiny caps, top-right of the TEXT column — never over the artwork */
.hb .side{position:absolute;top:clamp(30px,4vw,54px);right:clamp(20px,2.6vw,40px);
  margin:0;text-align:right;font-size:11px;font-weight:700;letter-spacing:.2em;
  line-height:2;text-transform:uppercase;color:#9d9d98;white-space:nowrap}
.hb .script{position:absolute;right:6%;bottom:7%;z-index:3;font-family:var(--accent);
  font-style:italic;font-weight:700;font-size:16px;line-height:1.3;color:#fff;
  text-align:right;transform:rotate(-6deg);pointer-events:none}

/* ---------- ticket stub (kraft, barcode, crosshairs) ---------- */
.stub{position:absolute;z-index:5;background:var(--kraft);color:var(--ink);
  padding:14px 14px 10px;width:104px;box-shadow:0 8px 30px rgba(0,0,0,.6)}
.stub b{display:block;font-size:12px;font-weight:800;line-height:1.28;letter-spacing:.02em;
  text-transform:uppercase}
.stub .bc{display:flex;gap:1.5px;align-items:flex-end;height:26px;margin:10px 0 6px}
.stub .bc i{display:block;width:1.5px;background:var(--ink)}
.stub small{font-size:8.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--kraft-tx)}
.xm{position:absolute;z-index:5;width:22px;height:22px;color:#6f6f6a;pointer-events:none}
.xm::before,.xm::after{content:"";position:absolute;background:currentColor}
.xm::before{left:50%;top:0;bottom:0;width:1px;transform:translateX(-50%)}
.xm::after{top:50%;left:0;right:0;height:1px;transform:translateY(-50%)}

/* ---------- What's On band — kraft, the one Prince picked out of Concept C ---------- */
.wo{background:var(--kraft);color:var(--ink);position:relative;isolation:isolate;
  padding:clamp(34px,4.6vw,52px) 0}
.wo::after{content:"";position:absolute;inset:0;pointer-events:none;z-index:0;opacity:.3;
  mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\' width=\'200\' height=\'200\'><filter id=\'f\'><feTurbulence type=\'fractalNoise\' baseFrequency=\'.7\' numOctaves=\'4\'/></filter><rect width=\'200\' height=\'200\' filter=\'url(%23f)\' opacity=\'.5\'/></svg>")}
.wo > *{position:relative;z-index:1}
.wo .k{margin:0 0 10px;font-size:11px;font-weight:800;letter-spacing:.2em;
  text-transform:uppercase;color:var(--red-kraft)}
.wo h2{color:var(--ink);font-size:clamp(28px,4.2vw,46px);letter-spacing:-.03em}
.wo h2 em{font-family:var(--accent);font-style:italic;font-weight:700;color:var(--red)}
.wo form{display:flex;gap:14px;align-items:center;flex-wrap:wrap;margin-top:22px;
  background:none;border:0;padding:0}
.wo label{font-size:10.5px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:#6b6459}
.wo select{font:inherit;font-size:15px;font-weight:500;padding:11px 13px;
  border:1px solid rgba(17,17,17,.3);border-radius:var(--r-btn);
  background:rgba(255,255,255,.55);color:var(--ink)}
.wo .count{margin-left:auto;font-size:14px;font-weight:600;color:#6b6459}
.wo .go{background:var(--red);color:#fff;border:0;font-weight:800;font-size:14px;
  padding:13px 20px;border-radius:var(--r-btn);text-decoration:none;display:inline-block}

/* ---------- event cards — date block over the photo, tag pill right ---------- */
.evs{display:grid;grid-template-columns:repeat(auto-fill,minmax(282px,1fr));gap:20px;
  list-style:none;padding:0;margin:0}
.ev{position:relative;background:#101010;border:1px solid var(--rule);
  border-radius:var(--r-card);overflow:hidden;display:flex;flex-direction:column}
.ev:hover{border-color:rgba(255,255,255,.3)}
.ev .ph{position:relative;aspect-ratio:16/10;background:#191919;overflow:hidden}
.ev .ph img{width:100%;height:100%;object-fit:cover;filter:grayscale(1) contrast(1.08)}
.ev:hover .ph img{filter:grayscale(.15) contrast(1.02)}
.ev .date{position:absolute;left:0;bottom:0;z-index:2;background:var(--ink);color:#fff;
  padding:9px 13px 10px;text-align:center;min-width:62px}
.ev .date b{display:block;font-family:var(--display);font-size:27px;line-height:.9;letter-spacing:.01em}
.ev .date span{display:block;font-size:9px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:#a7a7a2}
.ev .bd{padding:15px 16px 17px;display:flex;align-items:flex-start;gap:12px;flex:1}
.ev .tx{flex:1;min-width:0}
.ev h3{font-size:17px;line-height:1.16;letter-spacing:-.02em}
.ev h3 a{color:#fff;text-decoration:none}
.ev h3 a:hover{text-decoration:underline;text-decoration-color:var(--yellow)}
.ev .vn{margin:6px 0 0;font-size:13px;color:#8a8a85}
.ev .tag{flex:none;font-size:9.5px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;
  padding:6px 9px;border:1px solid rgba(255,255,255,.3);color:#fff;border-radius:var(--r-btn);
  background:none;white-space:nowrap}
.ev .tag-presents{background:var(--yellow);color:var(--ink);border-color:var(--yellow)}

/* ---------- venues row ---------- */
.vrow{display:grid;grid-template-columns:repeat(5,1fr);gap:14px;list-style:none;padding:0;margin:26px 0 0}
.vrow li{position:relative;border:1px solid var(--rule);border-radius:var(--r-card);overflow:hidden;background:#101010}
.vrow .ph{aspect-ratio:4/3;background:#191919;overflow:hidden}
.vrow .ph img{width:100%;height:100%;object-fit:cover;filter:grayscale(1) contrast(1.05)}
.vrow .bd{padding:13px 14px 15px;display:flex;align-items:flex-end;gap:10px}
.vrow h3{font-size:14.5px;line-height:1.2;letter-spacing:-.015em;flex:1}
.vrow h3 a{color:#fff;text-decoration:none}
.vrow h3 a::after{content:"";position:absolute;inset:0}
.vrow .st{margin:5px 0 0;font-size:12px;color:#8a8a85;font-weight:500}
.vrow .ar{flex:none;color:var(--yellow);font-size:15px;line-height:1}
.vrow li:hover{border-color:rgba(255,255,255,.3)}

/* ---------- rent band ---------- */
.rentb{position:relative;background:var(--ink);overflow:hidden;
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.12fr);align-items:center;
  min-height:clamp(300px,34vw,410px)}
.rentb .l{padding:clamp(34px,4.5vw,56px) clamp(24px,3.4vw,46px)}
.rentb h2{font-size:clamp(30px,4.2vw,50px);letter-spacing:-.03em}
.rentb h2 em{font-family:var(--accent);font-style:italic;font-weight:700;color:var(--yellow);display:block}
.rentb p{margin:16px 0 0;color:var(--tx-2);font-size:15.5px;line-height:1.6;max-width:44ch}
.rentb .cta{display:flex;gap:18px;align-items:center;margin-top:26px;flex-wrap:wrap}
.rentb .lnk{color:#fff;font-weight:700;font-size:14.5px;border-bottom:1px solid rgba(255,255,255,.45);
  padding-bottom:2px;text-decoration:none}
.rentb .r{position:relative;height:100%;min-height:inherit}
.rentb .r img{width:100%;height:100%;object-fit:cover;filter:grayscale(1) contrast(1.06)}
.rentb .r::before{content:"";position:absolute;inset:0;z-index:1;
  background:linear-gradient(to right,var(--ink),transparent 34%)}

/* ---------- section head used on the dark bands ---------- */
.sh{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;flex-wrap:wrap}
.sh .k{margin:0 0 10px;font-size:11px;font-weight:800;letter-spacing:.2em;
  text-transform:uppercase;color:var(--red-tx)}
.sh h2{font-size:clamp(28px,4.2vw,46px);letter-spacing:-.03em}
.sh h2 em{font-family:var(--accent);font-style:italic;font-weight:700;color:var(--yellow)}
.sh .note{font-size:11px;font-weight:700;letter-spacing:.2em;line-height:1.9;
  text-transform:uppercase;color:#8a8a85;text-align:right}
.browse{display:inline-flex;align-items:center;gap:8px;margin-top:22px;color:#fff;
  font-weight:700;font-size:14.5px;text-decoration:none;
  border-bottom:1px solid rgba(255,255,255,.45);padding-bottom:3px}

@media (max-width:1000px){
  .vrow{grid-template-columns:repeat(2,1fr)}
  .rentb{grid-template-columns:1fr}
  .rentb .r{min-height:260px}
  .rentb .r::before{background:linear-gradient(to bottom,var(--ink),transparent 40%)}
}
@media (max-width:860px){
  .hb{grid-template-columns:1fr;min-height:0}
  .hb .txt{padding:30px var(--gut) 26px;order:2}
  .hb .art{order:1;aspect-ratio:16/11;min-height:230px}
  .hb .side{position:static;text-align:left;margin-top:22px}
  .hb .script,.stub{display:none}
  .stub{display:none}
  .wo form{gap:10px}
  .wo .count{margin-left:0;width:100%}
  .vrow{grid-template-columns:1fr}
}

/* ==========================================================================
   INTERIOR PAGES — accessibility, about, contact, rates, tech specs,
   ticketing, food & beverage. Same Concept B rules: one huge headline, tiny
   caps everywhere else, yellow on one word only.
   ========================================================================== */
.phdr{position:relative;background:var(--ink);padding:clamp(40px,5.4vw,78px) 0 clamp(30px,3.6vw,50px);
  border-bottom:1px solid var(--rule)}
.phdr h1{font-size:clamp(36px,5.4vw,72px);line-height:1.0;letter-spacing:-.03em;max-width:14ch}
.phdr h1 em{font-family:var(--accent);font-style:italic;font-weight:700;color:var(--yellow);
  letter-spacing:-.01em;display:block}
.phdr .kick{margin:0 0 18px;font-size:11px;font-weight:800;letter-spacing:.22em;
  text-transform:uppercase;color:var(--red-tx)}
.phdr .side{position:absolute;right:max(var(--gut),calc((100vw - var(--max))/2));
  bottom:clamp(30px,3.6vw,50px);margin:0;text-align:right;font-size:11px;font-weight:700;
  letter-spacing:.2em;line-height:2;text-transform:uppercase;color:#8a8a85}

.two{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);gap:clamp(26px,3.4vw,52px);
  align-items:start}
.two h2{font-size:clamp(24px,3vw,34px);letter-spacing:-.025em;margin-bottom:14px}
.two p{color:var(--tx-2);line-height:1.62}
.two .lede{color:var(--tx);font-size:clamp(17px,1.7vw,20px)}

.callout{background:var(--ink-2);border:1px solid var(--rule);border-radius:var(--r-card);
  padding:clamp(22px,2.4vw,30px)}
.callout .k{margin:0 0 12px;font-size:10.5px;font-weight:800;letter-spacing:.2em;
  text-transform:uppercase;color:var(--yellow)}
.callout h3{font-size:20px;letter-spacing:-.02em;margin-bottom:12px}
.callout p{font-size:15px;line-height:1.6;color:var(--tx-2)}
.callout .em{margin-top:16px;font-size:15px;font-weight:700}
.callout .em a{color:var(--yellow);word-break:break-word}

.bul{margin:14px 0 18px;padding:0 0 0 18px;color:var(--tx-2);line-height:1.75}
.prov{margin:18px 0;font-size:14.5px;color:var(--tx-2)}
.prov span{display:block;font-size:10.5px;font-weight:800;letter-spacing:.18em;
  text-transform:uppercase;color:#8a8a85;margin-bottom:7px}
.prov a{color:var(--yellow);text-decoration:none;border-bottom:1px solid rgba(253,194,2,.4)}
.plist{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.plist b{display:block;font-size:15px;font-weight:800;letter-spacing:-.01em;color:var(--tx);
  padding:10px 12px;background:rgba(255,255,255,.06);border-radius:var(--r-btn)}
.warn{margin-top:18px;border-left:2px solid var(--red);padding-left:14px;color:var(--tx)}

.agrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(272px,1fr));gap:18px;margin-top:8px}
.acard{background:var(--ink-2);border:1px solid var(--rule);border-radius:var(--r-card);
  padding:22px 22px 24px}
.acard.wide{grid-column:span 1}
.acard h3{font-size:19px;letter-spacing:-.02em}
.acard .st{margin:6px 0 16px;font-size:12.5px;font-weight:700;letter-spacing:.12em;
  text-transform:uppercase;color:#8a8a85}
.alist{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:7px}
.alist li{font-size:11.5px;font-weight:700;letter-spacing:.04em;padding:6px 10px;
  background:rgba(255,255,255,.07);border-radius:var(--r-btn);color:var(--tx)}
.acard .more{margin:18px 0 0}
.acard .more a{color:var(--yellow);font-weight:700;font-size:14px;text-decoration:none}
.acard .fine{margin:14px 0 0;font-size:12.5px;line-height:1.55;color:var(--tx-3)}
.acard .fine a{color:var(--yellow)}

.ctab{width:100%;border-collapse:collapse;font-size:14.5px}
.ctab th{text-align:left;padding:9px 14px 9px 0;font-weight:700;color:#8a8a85;
  white-space:nowrap;vertical-align:top;font-size:11px;letter-spacing:.14em;text-transform:uppercase}
.ctab td{padding:9px 0;color:var(--tx-2);border-bottom:1px solid var(--rule)}
.ctab a{color:var(--yellow)}

.dl{list-style:none;margin:0;padding:0}
.dl li{display:flex;align-items:baseline;gap:12px;padding:11px 0;border-bottom:1px solid var(--rule)}
.dl li:last-child{border-bottom:0}
.dl a{flex:1;color:var(--tx);font-weight:600;font-size:14.5px;text-decoration:none;line-height:1.35}
.dl a:hover{color:var(--yellow)}
.dl span{flex:none;font-size:10px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:#8a8a85}

.lgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(252px,1fr));gap:16px;
  list-style:none;padding:0;margin:26px 0 0}
.lgrid li{position:relative;background:var(--ink-2);border:1px solid var(--rule);
  border-radius:var(--r-card);padding:22px 22px 24px}
.lgrid h3{font-size:18px;letter-spacing:-.02em;margin-bottom:8px}
.lgrid p{font-size:14.5px;line-height:1.55;color:var(--tx-3);margin:0}
.lgrid .ar{position:absolute;right:20px;bottom:20px;color:var(--yellow)}
.lnk2{color:var(--yellow);font-weight:700;text-decoration:none;
  border-bottom:1px solid rgba(253,194,2,.45);padding-bottom:2px}

@media (max-width:860px){
  .two{grid-template-columns:1fr}
  .phdr .side{position:static;text-align:left;margin-top:20px}
}

/* pull-note used on event / tickets / rent pages (was an inline light-theme block) */
.pnote{background:var(--ink-2);border:1px solid var(--rule);border-left:4px solid var(--yellow);
  padding:16px 18px;border-radius:var(--r-card)}
.pnote-r{border-left-color:var(--red)}
.pnote p{color:var(--tx-2)}
.pnote b,.pnote strong{color:var(--tx)}

/* ==========================================================================
   SITE ASSISTANT
   ========================================================================== */
.vchat{position:fixed;right:18px;bottom:18px;z-index:80}
.vchat-fab{display:flex;align-items:center;gap:9px;padding:13px 18px;border:0;cursor:pointer;
  background:var(--yellow);color:var(--ink);font:800 13px/1 var(--sans);letter-spacing:.06em;
  text-transform:uppercase;border-radius:var(--r-btn);box-shadow:0 10px 30px rgba(0,0,0,.55)}
.vchat-fab-i{display:grid;place-items:center;width:19px;height:19px;border-radius:50%;
  background:var(--ink);color:var(--yellow);font-size:12px;font-weight:900}
/* `display:flex` here beats the UA rule for the [hidden] attribute, so the panel
   could never be closed. Scope the flex to the not-hidden state and keep an
   explicit guard. */
.vchat-panel{position:absolute;right:0;bottom:calc(100% + 11px);width:min(370px,calc(100vw - 36px));
  background:var(--ink-2);border:1px solid var(--rule-2);border-radius:var(--r-card);
  box-shadow:0 26px 70px rgba(0,0,0,.72);flex-direction:column;overflow:hidden}
.vchat-panel:not([hidden]){display:flex}
.vchat-panel[hidden]{display:none}
.vchat-panel header{display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:14px 15px;border-bottom:1px solid var(--rule)}
.vchat-panel header b{font-size:13.5px;color:var(--tx);letter-spacing:-.01em}
.vchat-x{background:none;border:0;color:var(--tx-3);font-size:21px;line-height:1;cursor:pointer;padding:0 4px}
.vchat-log{padding:14px 15px;max-height:min(46vh,340px);overflow-y:auto;display:flex;
  flex-direction:column;gap:11px}
.vchat-msg p{margin:0;font-size:13.5px;line-height:1.55;padding:10px 12px;border-radius:10px;
  white-space:pre-wrap}
.vchat-msg.bot p{background:rgba(255,255,255,.07);color:var(--tx-2);border-bottom-left-radius:3px}
.vchat-msg.me{align-self:flex-end;max-width:85%}
.vchat-msg.me p{background:var(--yellow);color:var(--ink);font-weight:600;border-bottom-right-radius:3px}
.vchat-links{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
.vchat-links a{font-size:11px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;
  padding:6px 9px;border:1px solid var(--rule-2);border-radius:var(--r-btn);color:var(--yellow);
  text-decoration:none}
.vchat-sug{display:flex;flex-wrap:wrap;gap:6px;padding:0 15px 12px}
.vchat-sug button{font:700 11px/1 var(--sans);letter-spacing:.04em;padding:7px 10px;cursor:pointer;
  background:none;border:1px solid var(--rule);border-radius:var(--r-btn);color:var(--tx-3)}
.vchat-sug button:hover{color:var(--tx);border-color:var(--rule-2)}
.vchat-form{display:flex;gap:8px;padding:12px 15px 14px;border-top:1px solid var(--rule)}
.vchat-form input{flex:1;min-width:0;font:inherit;font-size:13.5px;padding:10px 12px;background:var(--ink);
  color:var(--tx);border:1px solid var(--rule-2);border-radius:var(--r-btn)}
.vchat-form button{font:800 12px/1 var(--sans);letter-spacing:.06em;text-transform:uppercase;
  padding:10px 14px;background:var(--yellow);color:var(--ink);border:0;border-radius:var(--r-btn);cursor:pointer}
@media (max-width:520px){.vchat{right:12px;bottom:12px}.vchat-fab span:last-child{display:none}}

/* multi-night runs and moved events */
.ev .date .thru{display:block;font-size:8px;font-weight:800;letter-spacing:.14em;
  text-transform:uppercase;color:#7d7d78;margin:1px 0}
.ev .vn .moved{color:var(--red-tx);font-weight:700}
.tag-moved{background:var(--red);color:#fff;border-color:var(--red)}
/* the display line is decorative; the real H1 is screen-reader only */
.hb-display{margin:0;font-family:var(--head);font-weight:700;letter-spacing:-.03em;
  font-size:clamp(38px,4.6vw,66px);line-height:1.02;max-width:12ch;color:var(--tx)}
.hb-display em{font-family:var(--accent);font-style:italic;font-weight:700;
  color:var(--yellow);letter-spacing:-.01em;display:block}

/* ==========================================================================
   PLAN YOUR VISIT — the utility layer a theatre visitor needs before arriving.
   It also does a job the black padding was doing badly.
   ========================================================================== */
.ptiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(215px,1fr));gap:14px;
  list-style:none;padding:0;margin:26px 0 0}
.ptiles a{display:block;height:100%;padding:18px 18px 20px;background:var(--ink-2);
  border:1px solid var(--rule);border-radius:var(--r-card);text-decoration:none}
.ptiles a:hover{border-color:var(--rule-2)}
.ptiles .pi{display:grid;place-items:center;width:30px;height:30px;border-radius:var(--r-btn);
  background:rgba(253,194,2,.16);color:var(--yellow);font-size:12px;margin-bottom:12px}
.ptiles b{display:block;color:var(--tx);font-size:15.5px;letter-spacing:-.01em;margin-bottom:5px}
.ptiles span:last-child{display:block;font-size:13px;line-height:1.5;color:var(--tx-3)}

/* rental band: the three links that fill what was an empty middle */
.rentb{grid-template-columns:minmax(0,1fr) minmax(0,.78fr) minmax(0,1fr)}
.rlinks{list-style:none;margin:0;padding:clamp(24px,3vw,34px) 0;display:flex;
  flex-direction:column;gap:10px;position:relative;z-index:2}
.rlinks a{display:block;padding:13px 15px;background:rgba(255,255,255,.06);
  border:1px solid var(--rule);border-radius:var(--r-card);text-decoration:none}
.rlinks a:hover{background:rgba(255,255,255,.1)}
.rlinks b{display:block;color:var(--tx);font-size:14.5px;letter-spacing:-.01em}
.rlinks span{display:block;margin-top:3px;font-size:12.5px;color:var(--tx-3)}

/* newsletter */
.news{background:var(--kraft);color:var(--ink);position:relative;isolation:isolate;
  padding-block:clamp(30px,3.6vw,46px)}
.news .wrap{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.25fr);
  gap:clamp(20px,3vw,44px);align-items:center}
.news .k{margin:0 0 8px;font-size:10.5px;font-weight:800;letter-spacing:.2em;
  text-transform:uppercase;color:var(--red-kraft)}
.news h2{color:var(--ink);font-size:clamp(26px,3.4vw,40px);letter-spacing:-.03em;margin:0}
.news h2 em{font-family:var(--accent);font-style:italic;font-weight:700;color:var(--red)}
.nform{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:10px;align-items:center}
.nform input{width:100%;font:inherit;font-size:15px;padding:13px 14px;min-height:48px;
  border:1px solid rgba(17,17,17,.34);border-radius:var(--r-btn);background:#fff;color:var(--ink)}
.nform button{font:800 13px/1 var(--sans);letter-spacing:.08em;text-transform:uppercase;
  padding:0 22px;min-height:48px;background:var(--ink);color:var(--yellow);border:0;
  border-radius:var(--r-btn);cursor:pointer}
.nform .fine{grid-column:1/-1;margin:2px 0 0;font-size:12px;line-height:1.5;color:#5c554b}

@media (max-width:1000px){
  .rentb{grid-template-columns:1fr}
  .rlinks{padding:0 clamp(24px,3.4vw,46px) clamp(24px,3vw,34px)}
  .news .wrap{grid-template-columns:1fr}
}
@media (max-width:560px){ .nform{grid-template-columns:1fr} }

/* archive pagination */
.pager{display:flex;flex-wrap:wrap;gap:6px;margin-top:34px}
.pager a{min-width:42px;min-height:42px;display:grid;place-items:center;padding:0 10px;
  border:1px solid var(--rule);border-radius:var(--r-btn);color:var(--tx-2);
  text-decoration:none;font-size:13.5px;font-weight:700}
.pager a:hover{border-color:var(--rule-2);color:var(--tx)}
.pager a[aria-current="page"]{background:var(--yellow);color:var(--ink);border-color:var(--yellow)}