/* The Israel Desk: theme stylesheet. Typefaces are inlined per edition in the document head. */

/* ============ design tokens ============ */
:root{
  --deep: #102a43;
  --deep-soft: #1c3d5e;
  --ink: #1a2129;
  --ink-mid: #313b47;
  --mute: #566171;
  --faint: #67727f;
  --hair: #dfe4eb;
  --hair-2: #c7d0db;
  --mist: #f2f4f7;
  --wash: #e6f3f6;
  --page: #ffffff;
  --act: #0e7490;
  --act-deep: #0a576d;
  --pop: #19a7c4;
  --alarm: #b3121d;
  --ring: #e4572e;
  --good: #14633c;
  --type-body: "Desk Text", system-ui, "Segoe UI", Arial, sans-serif;
  --type-head: "Desk Head", "Desk Text", Georgia, serif;
  --sz-hero: clamp(1.8125rem, 1.1rem + 1.75vw, 2.5625rem);
  --sz-story: clamp(1.9375rem, 1.25rem + 1.95vw, 2.9375rem);
  --sz-zone: 1.4375rem;
  --sz-card: 1.1875rem;
  --sz-body: 1.1875rem;
  --sz-deck: 1.0625rem;
  --sz-ui: 1rem;
  --sz-note: .875rem;
  --sz-tiny: .8125rem;
  --gap-1: 4px; --gap-2: 8px; --gap-3: 12px; --gap-4: 16px;
  --gap-5: 24px; --gap-6: 32px; --gap-7: 44px; --gap-8: 60px;
  --page-max: 1248px;
  --flank-w: 308px;
  --bend: 8px;
  --bend-pic: 4px;
  --bar-h: 0px;
}
html[lang=ar], html[lang=fa]{
  --type-head: "Desk Text", system-ui, "Segoe UI", Tahoma, sans-serif;
  --sz-body: 1.25rem; --sz-deck: 1.125rem; --sz-card: 1.1875rem;
}
html[lang=he]{ --sz-body: 1.25rem }

/* ============ ground rules ============ */
*, *::before, *::after{ box-sizing: border-box }
html{ -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: 18px; overflow-x: clip; max-width: 100vw }
body{
  margin: 0; min-height: 100vh; display: flex; flex-direction: column;
  background: var(--page); color: var(--ink);
  font: 400 var(--sz-ui)/1.62 var(--type-body);
  overflow-x: hidden; padding-bottom: var(--bar-h);
}
img, svg, video{ display: block; max-width: 100%; height: auto }
svg.glyph{ display: inline-block; flex: none; vertical-align: middle }
a{ color: inherit; text-decoration: none }
h1, h2, h3, h4, p, ul, ol, figure{ margin: 0 }
ul, ol{ padding: 0 }
button, input, select, textarea{ font: inherit; color: inherit }
:focus-visible{ outline: 3px solid var(--ring); outline-offset: 2px; border-radius: 2px }
.sr{ position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; margin: -1px; padding: 0; border: 0 }
.skiplink{ position: fixed; inset-inline-start: 14px; top: -120px; z-index: 420; padding: .65rem 1.05rem; background: var(--deep); color: #fff; font-weight: 600; border-radius: var(--bend) }
.skiplink:focus{ top: 14px }
.wrap{ width: min(100% - 44px, var(--page-max)); margin-inline: auto }
html:not(.js) .js-only{ display: none !important }
@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{ transition-duration: .01ms !important; animation-duration: .01ms !important; scroll-behavior: auto !important }
}
time{ font-variant-numeric: tabular-nums }

/* ============ buttons and inputs ============ */
.btn{
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  min-height: 44px; padding: .5rem 1.2rem;
  border: 1px solid var(--act); border-radius: var(--bend);
  background: var(--act); color: #fff;
  font: 600 var(--sz-ui)/1.25 var(--type-body); cursor: pointer; text-align: center;
  transition: background-color .14s, border-color .14s, color .14s;
}
.btn:hover{ background: var(--act-deep); border-color: var(--act-deep) }
.btn:active{ transform: translateY(1px) }
.btn-line{ background: transparent; color: var(--act) }
.btn-line:hover{ background: var(--wash); color: var(--act-deep) }
.btn-deep{ background: var(--deep); border-color: var(--deep) }
.btn-deep:hover{ background: #06121e; border-color: #06121e }
.btn-s{ min-height: 38px; padding: .3rem .9rem; font-size: var(--sz-note) }
.btn[disabled]{ opacity: .55; cursor: progress }
.linklike{ padding: 0; border: 0; background: none; cursor: pointer; font-size: inherit; color: inherit }
.linklike:hover{ color: var(--act); text-decoration: underline }
.sform{ display: flex; gap: 7px; width: 100%; max-width: 620px }
.sform input{ flex: 1; min-width: 0; height: 43px; padding: 0 15px; border: 1px solid var(--hair-2); border-radius: var(--bend); background: #fff; color: var(--ink); font-size: var(--sz-ui) }
.sform input::placeholder{ color: var(--faint) }
.sform input:hover{ border-color: #9fadbc }
.sform input:focus-visible{ outline: 3px solid var(--ring); outline-offset: 1px; border-color: var(--act) }
.sform button{ display: inline-flex; align-items: center; justify-content: center; gap: 7px; height: 43px; padding: 0 17px; border: 0; border-radius: var(--bend); background: var(--deep); color: #fff; font-weight: 600; cursor: pointer }
.sform button:hover{ background: var(--act) }
.sform-wide input, .sform-wide button{ height: 52px; font-size: 1.125rem }

/* ============ topbar ============ */
.topbar{ position: relative; z-index: 110; background: #fff }
.crest{ background: var(--deep); color: #c3d2e0; font-size: var(--sz-tiny) }
.crest-row{ display: flex; align-items: center; justify-content: space-between; gap: 14px; min-height: 37px }
.crest-when{ display: flex; align-items: center; margin: 0; white-space: nowrap; overflow: hidden }
.crest-clock{ display: inline-flex; align-items: center; gap: .35em; color: #8fa6bb }
.crest-clock time{ color: #fff }
.crest-dot{ display: inline-block; width: 1px; height: 13px; margin-inline: 13px; background: rgba(255,255,255,.28) }
.crest-set{ display: flex; align-items: center; gap: 3px }
.crest-a{ display: inline-flex; align-items: center; gap: 7px; min-height: 37px; padding: 0 10px; border: 0; background: none; color: #dde7f1; font-size: var(--sz-tiny); font-weight: 600; cursor: pointer }
.crest-a .glyph{ width: 15px; height: 15px }
.crest-a .aa{ font: 700 .8rem/1 var(--type-body); letter-spacing: .02em }
.crest-a:hover{ color: #fff; text-decoration: underline; text-underline-offset: 3px }
.locale{ position: relative }
.locale-b{ display: inline-flex; align-items: center; gap: 7px; min-height: 29px; margin-inline-start: 7px; padding: 0 11px; border: 1px solid rgba(255,255,255,.32); border-radius: var(--bend); background: transparent; color: #fff; font-size: var(--sz-tiny); font-weight: 600; cursor: pointer }
.locale-b:hover, .locale-b[aria-expanded=true]{ background: rgba(255,255,255,.14) }
.locale-m{ position: absolute; inset-inline-end: 0; top: calc(100% + 7px); z-index: 140; display: grid; grid-template-columns: 1fr 1fr; gap: 2px; min-width: 264px; padding: 9px; list-style: none; background: #fff; color: var(--ink); border: 1px solid var(--hair-2); border-radius: var(--bend); box-shadow: 0 14px 34px rgba(16,42,67,.2) }
.locale-m[hidden]{ display: none }
.locale-m a{ display: block; padding: 8px 11px; border-radius: 5px; font-size: var(--sz-ui) }
.locale-m a:hover{ background: var(--wash); color: var(--act-deep) }
.locale-m a[aria-current]{ background: var(--deep); color: #fff }
.plate{ display: flex; align-items: center; gap: 26px; min-height: 86px }
.sitemark{ display: block; flex: none; margin-inline-end: auto }
.sitemark img{ width: 252px; height: auto }
.plate-find{ flex: 0 1 356px }
.plate-find .sform-t{ position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%) }
.plate-find .sform button{ width: 47px; padding: 0 }
.plate-b{ display: none; align-items: center; justify-content: center; width: 44px; height: 44px; border: 0; border-radius: var(--bend); background: none; color: var(--deep); cursor: pointer }
.plate-b .glyph{ width: 22px; height: 22px }
.plate-b:hover, .plate-b[aria-expanded=true]{ background: var(--mist) }
.searchbar{ padding: 13px 0 17px; border-block-start: 1px solid var(--hair); background: #fff }
.searchbar[hidden]{ display: none }

/* ribbon navigation */
.ribbon{ position: relative; border-block: 1px solid var(--hair); border-block-end: 3px solid var(--deep); background: #fff }
.ribbon-row{ display: flex; align-items: stretch; gap: 9px }
.ribbon-list{ display: flex; flex-wrap: wrap; align-items: stretch; flex: 1; min-width: 0; height: 51px; overflow: hidden; list-style: none }
.ribbon-list > li{ display: flex }
.ribbon-list a{ position: relative; display: flex; align-items: center; gap: 8px; padding: 0 13px; font-size: .9375rem; font-weight: 600; color: var(--ink); white-space: nowrap }
.ribbon-list > li:first-child a{ padding-inline-start: 0 }
.ribbon-list a:hover{ color: var(--act) }
.ribbon-list a[aria-current]{ color: var(--deep) }
.ribbon-list a[aria-current]::after{ content: ""; position: absolute; inset-inline: 13px; bottom: -3px; height: 3px; background: var(--pop) }
.ribbon-list > li:first-child a[aria-current]::after{ inset-inline-start: 0 }
.ribbon-list .hot a::before{ content: ""; width: 9px; height: 9px; border-radius: 50%; background: var(--alarm); flex: none }
.ribbon-all{ display: inline-flex; align-items: center; gap: 8px; flex: none; padding: 0 5px 0 17px; border: 0; border-inline-start: 1px solid var(--hair); background: none; color: var(--deep); font-size: .9375rem; font-weight: 700; cursor: pointer; white-space: nowrap }
[dir=rtl] .ribbon-all{ padding: 0 17px 0 5px }
.ribbon-all .glyph:last-child{ transition: transform .14s }
.ribbon-all[aria-expanded=true] .glyph:last-child{ transform: rotate(180deg) }
.ribbon-all:hover{ color: var(--act) }
.drawer{ display: none; position: absolute; inset-inline: 0; top: 100%; z-index: 130; max-height: calc(100vh - 142px); overflow: auto; background: #fff; border-block-end: 1px solid var(--hair-2); box-shadow: 0 20px 38px rgba(16,42,67,.15) }
.drawer.open{ display: block }
.drawer-grid{ display: grid; grid-template-columns: minmax(0,3fr) minmax(0,1fr); gap: 24px 52px; padding-block: 25px 29px }
.drawer-h{ margin-block-end: 11px; padding-block-end: 8px; border-block-end: 1px solid var(--hair); font: 700 var(--sz-tiny)/1.2 var(--type-body); letter-spacing: .09em; text-transform: uppercase; color: var(--faint) }
html[lang=ar] .drawer-h, html[lang=fa] .drawer-h, html[lang=he] .drawer-h{ letter-spacing: 0 }
.drawer-l{ display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 2px 26px; list-style: none }
.drawer-l-solo{ grid-template-columns: 1fr }
.drawer-l a, .drawer-eds-l a{ display: block; padding: 7px 0; font-size: var(--sz-ui); font-weight: 600; color: var(--ink) }
.drawer-l a:hover, .drawer-eds-l a:hover{ color: var(--act); text-decoration: underline; text-underline-offset: 3px }
.drawer-l a[aria-current]{ color: var(--act); text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 4px }
.drawer-eds{ display: none }
.drawer-eds-l{ display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 2px 13px; list-style: none }
.drawer-eds-l a[aria-current]{ color: var(--act); text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 4px }

@media (max-width: 1100px){ .plate-find{ flex-basis: 276px } .sitemark img{ width: 226px } }
@media (max-width: 900px){
  .crest-when{ display: none }
  .crest-row{ justify-content: flex-end }
  .plate{ display: grid; grid-template-columns: 44px minmax(0,1fr) 44px; gap: 9px; min-height: 63px }
  .plate-b{ display: inline-flex }
  .sitemark{ justify-self: center; margin: 0 }
  .sitemark img{ width: 178px }
  .plate-find{ display: none }
  .ribbon{ border-block-start: 0; border-block-end: 3px solid var(--deep) }
  .ribbon-row{ display: none }
  .drawer{ position: absolute; max-height: calc(100dvh - 106px); box-shadow: 0 24px 42px rgba(16,42,67,.24) }
  .drawer-grid{ grid-template-columns: 1fr; gap: 21px; padding-block: 17px 25px }
  .drawer-eds{ display: block }
  .drawer-l{ grid-template-columns: 1fr 1fr; gap: 0 17px }
  .drawer-l-solo{ grid-template-columns: 1fr 1fr }
  .drawer-l a, .drawer-eds-l a{ padding: 10px 0; border-block-end: 1px solid var(--mist) }
}
@media (max-width: 560px){
  .crest-a span{ position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%) }
  .crest-a .aa{ position: static; width: auto; height: auto; overflow: visible; clip-path: none }
  .crest-a{ padding: 0 9px }
  .locale-b{ gap: 5px }
  .locale-b span{ position: static; width: auto; height: auto; overflow: visible; clip-path: none }
  .sitemark img{ width: 162px }
}
@media (max-width: 360px){ .sitemark img{ width: 144px } }

/* pinned story strip */
.pinbar{ background: var(--act); color: #fff }
.pinbar[hidden]{ display: none }
.pinbar-row{ display: flex; align-items: center; gap: 13px; min-height: 44px; padding-block: 6px }
.pinbar-tag{ flex: none; padding: 1px 9px; border-radius: 4px; background: #fff; color: var(--act-deep); font: 700 .75rem/1.5 var(--type-body); text-transform: uppercase; letter-spacing: .05em }
.pinbar-a{ flex: 1; min-width: 0; color: #fff; font: 600 var(--sz-deck)/1.35 var(--type-body); overflow-wrap: anywhere }
.pinbar-a:hover{ text-decoration: underline; text-underline-offset: 3px }
.pinbar-x{ flex: none; display: inline-grid; place-items: center; width: 40px; height: 40px; border: 0; border-radius: 50%; background: transparent; color: #fff; cursor: pointer }
.pinbar-x:hover{ background: rgba(255,255,255,.16) }
.pinbar :focus-visible{ outline: 3px solid #fff; outline-offset: 2px }
@media (max-width: 560px){ .pinbar-a{ font-size: .875rem } }

/* ============ page frame ============ */
.stage{ flex: 1; padding-block: 30px 58px }
.stage:focus{ outline: 0 }
.layout{ display: grid; grid-template-columns: minmax(0,1fr) var(--flank-w); gap: var(--gap-7); align-items: start }
.layout-lead{ display: grid; gap: var(--gap-7); min-width: 0; align-content: start }
.layout-article{ grid-template-columns: minmax(0,47rem) var(--flank-w); justify-content: space-between; gap: 58px }
.flank{ display: grid; gap: var(--gap-6); min-width: 0 }
@media (max-width: 1060px){
  .layout, .layout-article{ grid-template-columns: minmax(0,1fr); gap: var(--gap-7) }
  .flank{ grid-template-columns: repeat(auto-fit, minmax(258px,1fr)); gap: var(--gap-5) var(--gap-6) }
}
@media (max-width: 700px){
  .wrap{ width: min(100% - 34px, var(--page-max)) }
  .stage{ padding-block: 19px 42px }
  .layout-lead{ gap: 40px }
}

/* zone headings */
.zone-top{ display: flex; align-items: baseline; justify-content: space-between; gap: 13px; margin-block-end: var(--gap-4); padding-block-start: 11px; border-block-start: 2px solid var(--deep) }
.zone-title{ font: 700 var(--sz-zone)/1.2 var(--type-head); color: var(--deep) }
.zone-title a:hover{ color: var(--act) }
.zone-link{ flex: none; font-size: var(--sz-note); font-weight: 600; color: var(--act) }
.zone-link::after{ content: " \203A" }
[dir=rtl] .zone-link::after{ content: " \2039" }
.zone-link:hover{ text-decoration: underline; text-underline-offset: 3px }
.zone{ min-width: 0 }
.void-note{ padding: 26px 0; color: var(--mute); font-size: var(--sz-deck) }

/* ============ cards ============ */
.card{ min-width: 0 }
.card-pic{ position: relative; display: block; aspect-ratio: 16/9; overflow: hidden; border-radius: var(--bend-pic); background: var(--deep) }
.card-pic img{ width: 100%; height: 100%; object-fit: cover }
.card-pic-void{ display: grid; place-items: center }
.card-pic-void img{ width: 32%; max-width: 76px; height: auto; object-fit: contain; opacity: .92 }
.card-pic .film{ position: absolute; inset-inline-start: 9px; bottom: 9px; display: inline-flex; align-items: center; gap: 5px; padding: 2px 8px; border-radius: 4px; background: rgba(16,42,67,.9); color: #fff; font-size: .6875rem; font-weight: 700; letter-spacing: .04em }
.card-body{ display: flex; flex-direction: column; gap: 7px; min-width: 0 }
.card-h{ font: 700 var(--sz-card)/1.27 var(--type-head); color: var(--ink); text-wrap: pretty; overflow-wrap: break-word }
.card-h a:hover{ color: var(--act); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px }
.deck{ display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; font-size: var(--sz-deck); line-height: 1.5; color: var(--mute) }
.stamp{ display: flex; flex-wrap: wrap; align-items: center; gap: 2px 0; font-size: var(--sz-tiny); line-height: 1.4; color: var(--faint) }
.stamp > * + *::before{ content: ""; display: inline-block; width: 3px; height: 3px; margin-inline: 9px; border-radius: 50%; background: currentColor; vertical-align: middle; opacity: .65 }
.rubric{ font-weight: 700; color: var(--act); text-transform: uppercase; letter-spacing: .05em; font-size: .75rem }
html[lang=ar] .rubric, html[lang=fa] .rubric, html[lang=he] .rubric{ letter-spacing: 0; font-size: .8125rem }
a.rubric:hover{ text-decoration: underline; text-underline-offset: 3px }
.wiretag{ font-style: normal; font-weight: 700; color: #7c5700 }

/* hero */
.card-hero{ display: grid; gap: 15px }
.card-hero .card-h{ font-size: var(--sz-hero); line-height: 1.13; letter-spacing: -.005em; text-wrap: balance }
.card-hero .deck{ -webkit-line-clamp: 4; font-size: 1.125rem; max-width: 62ch }
/* supporting spot */
.card-spot{ display: grid; grid-template-columns: 116px minmax(0,1fr); gap: 15px; align-items: start }
.card-spot .card-h{ font-size: 1.0625rem; line-height: 1.3 }
.card-spot .card-body{ gap: 5px }
/* strip rows */
.stack{ display: grid }
.card-strip{ display: grid; grid-template-columns: 182px minmax(0,1fr); gap: 21px; align-items: start; padding-block: 19px; border-block-end: 1px solid var(--hair) }
.stack .card-strip:first-child{ padding-block-start: 5px }
.card-strip .deck{ -webkit-line-clamp: 2; font-size: 1rem }
/* banner (archive lead) */
.card-banner{ display: grid; grid-template-columns: minmax(0,1.15fr) minmax(0,1fr); gap: 30px; align-items: start; padding-block-end: 25px; margin-block-end: 5px; border-block-end: 1px solid var(--hair-2) }
.card-banner .card-h{ font-size: clamp(1.5625rem, 1.15rem + 1vw, 1.9375rem); line-height: 1.18; text-wrap: balance }
.card-banner .deck{ -webkit-line-clamp: 4; font-size: var(--sz-deck) }
/* block tile */
.card-block{ display: grid; gap: 11px; align-content: start }
.card-block .card-h{ font-size: 1.125rem }
/* bare line */
.barelist{ list-style: none; display: grid }
.barelist > li{ padding-block: 13px; border-block-end: 1px solid var(--hair) }
.barelist > li:last-child{ border-block-end: 0 }
.card-bare .card-h{ font-size: 1.0625rem; line-height: 1.32 }
.card-bare .card-body{ gap: 4px }
.bare-a{ font: 700 1.0625rem/1.35 var(--type-head); color: var(--ink) }
.bare-a:hover{ color: var(--act); text-decoration: underline; text-underline-offset: 3px }

@media (max-width: 700px){
  .card-strip{ grid-template-columns: minmax(0,1fr) 106px; gap: 15px; padding-block: 15px }
  .card-strip .card-pic{ order: 2 }
  .card-strip .deck{ display: none }
  .card-strip .card-h{ font-size: 1.0625rem }
  .card-banner{ grid-template-columns: 1fr; gap: 13px }
  .card-spot{ grid-template-columns: minmax(0,1fr) 98px }
  .card-spot .card-pic{ order: 2 }
}

/* ============ front page ============ */
.motto{ margin-block: -8px 21px; font: 700 1.0625rem/1.35 var(--type-head); color: var(--deep) }
@media (max-width: 700px){ .motto{ margin-block: -4px 15px; font-size: .9375rem } }
.showcase{ display: grid; grid-template-columns: minmax(0,1.75fr) minmax(0,1fr); gap: 42px; margin-block-end: var(--gap-7); padding-block-end: var(--gap-6); border-block-end: 1px solid var(--hair-2) }
.showcase-grid{ display: grid; align-content: start }
.showcase-grid .card-spot{ padding-block: 17px; border-block-end: 1px solid var(--hair) }
.showcase-grid .card-spot:first-child{ padding-block-start: 0 }
.showcase-grid .card-spot:last-child{ border-block-end: 0; padding-block-end: 0 }
@media (max-width: 900px){
  .showcase{ grid-template-columns: 1fr; gap: 21px; margin-block-end: 40px; padding-block-end: 9px; border-block-end: 0 }
  .showcase-grid .card-spot:first-child{ padding-block-start: 17px; border-block-start: 1px solid var(--hair) }
  .showcase-grid .card-spot:last-child{ border-block-end: 1px solid var(--hair); padding-block-end: 17px }
}
@media (max-width: 700px){
  .card-hero .card-h{ font-size: 1.6875rem; line-height: 1.16 }
  .card-hero .deck{ font-size: 1.0625rem; -webkit-line-clamp: 3 }
  .card-hero{ gap: 11px }
  .showcase .card-hero .card-pic{ margin-inline: -17px; border-radius: 0 }
}
.corners{ display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 42px 34px }
.corners:empty{ display: none }
.corner .card-block{ margin-block-end: 5px }
.corner-row{ display: grid; gap: 2px }
@media (max-width: 760px){ .corners{ grid-template-columns: 1fr } }
.howto{ padding: 21px 25px 25px; border-block-start: 3px solid var(--pop); background: var(--mist) }
.howto .zone-top{ border-block-start: 0; padding-block-start: 0 }
.howto-l{ display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 25px; list-style: none; counter-reset: hw }
.howto-i{ counter-increment: hw; display: grid; gap: 9px; align-content: start }
.howto-i::before{ content: counter(hw, decimal-leading-zero); font: 700 1.5rem/1 var(--type-head); color: var(--pop) }
.howto-i .card-pic{ display: none }
.howto-i .card-h{ font-size: 1.125rem }
.howto-i .deck{ -webkit-line-clamp: 3; font-size: .9375rem }
@media (max-width: 760px){ .howto-l{ grid-template-columns: 1fr; gap: 19px } .howto{ padding: 17px } }
.wirebox{ padding: 21px 23px 23px; border: 1px solid #e3d6b4; border-radius: 9px; background: #fcf9f1 }
.wirebox-top{ margin-block-end: 15px }
.wirebox-t{ font: 700 var(--sz-tiny)/1.3 var(--type-body); letter-spacing: .09em; text-transform: uppercase; color: #7c5700 }
html[lang=ar] .wirebox-t, html[lang=fa] .wirebox-t, html[lang=he] .wirebox-t{ letter-spacing: 0; font-size: .9375rem }
.wirebox-t a:hover{ text-decoration: underline }
.wirebox-note{ margin-block-start: 5px; font-size: var(--sz-tiny); color: #6d571f }
.wirebox-row{ display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 21px }
.wirebox .card-block .card-h{ font-size: 1rem }
@media (max-width: 760px){
  .wirebox-row{ grid-template-columns: 1fr; gap: 0 }
  .wirebox .card-block{ grid-template-columns: minmax(0,1fr) 98px; gap: 15px; padding-block: 13px; border-block-end: 1px solid #eae0c6 }
  .wirebox .card-block:last-child{ border-block-end: 0 }
  .wirebox .card-block .card-pic{ order: 2 }
}
.foreword{ padding-block-start: var(--gap-5); border-block-start: 1px solid var(--hair) }
.foreword-tag{ font-size: var(--sz-tiny); font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--faint) }
html[lang=ar] .foreword-tag, html[lang=fa] .foreword-tag, html[lang=he] .foreword-tag{ letter-spacing: 0 }
.foreword-p{ margin-block-start: 9px; max-width: 64ch; font-size: var(--sz-deck); color: var(--mute) }

/* ============ crown (archive heading) ============ */
.crown{ margin-block-end: var(--gap-6); padding-block-end: var(--gap-5); border-block-end: 1px solid var(--hair-2) }
.crown .crumbs{ margin-block-end: 11px }
.crown-note{ font-size: var(--sz-tiny); font-weight: 700; color: var(--faint); text-transform: uppercase; letter-spacing: .09em }
.crown-title{ font: 700 clamp(2.0625rem, 1.55rem + 1.65vw, 2.8125rem)/1.1 var(--type-head); color: var(--deep); text-wrap: balance }
.crown-intro{ margin-block-start: 11px; max-width: 68ch; font-size: var(--sz-deck); line-height: 1.55; color: var(--mute) }

/* ============ flank (sidebar) ============ */
.side-card{ min-width: 0 }
.side-h{ margin-block-end: 13px; padding-block: 11px 0; border-block-start: 2px solid var(--deep); font: 700 var(--sz-tiny)/1.3 var(--type-body); letter-spacing: .09em; text-transform: uppercase; color: var(--deep) }
html[lang=ar] .side-h, html[lang=fa] .side-h, html[lang=he] .side-h{ letter-spacing: 0; font-size: .9375rem }
.side-list{ list-style: none; display: grid; counter-reset: sd }
.side-list li{ display: grid; grid-template-columns: 29px minmax(0,1fr); gap: 5px; padding-block: 10px; border-block-end: 1px solid var(--hair); font: 700 1rem/1.35 var(--type-head) }
.side-list li:last-child{ border-block-end: 0 }
.side-list li::before{ counter-increment: sd; content: counter(sd); font: 700 1rem/1.35 var(--type-body); color: var(--pop) }
.side-list a:hover{ color: var(--act); text-decoration: underline; text-underline-offset: 3px }
.taglist{ display: flex; flex-wrap: wrap; gap: 7px; list-style: none }
.taglist a{ display: inline-block; padding: 5px 11px; border: 1px solid var(--hair-2); border-radius: var(--bend); font-size: var(--sz-note); font-weight: 600; color: var(--ink-mid); line-height: 1.3 }
.taglist a:hover{ border-color: var(--act); color: var(--act) }
.taglist a[aria-current]{ background: var(--deep); border-color: var(--deep); color: #fff }
.side-follow p{ font-size: var(--sz-note); color: var(--mute) }
.side-follow p b{ display: block; color: var(--ink); font-size: var(--sz-ui) }
.side-follow .btn{ margin-block-start: 11px }
/* weather */
.sky-days{ display: grid }
.sky-row{ display: grid; grid-template-columns: minmax(0,1fr) auto 29px auto; align-items: center; gap: 11px; padding-block: 6px; border-block-end: 1px solid var(--hair); font-size: var(--sz-note) }
.sky-row:last-child{ border-block-end: 0 }
.sky-name{ font-weight: 700; color: var(--ink) }
.sky-date{ color: var(--faint); font-size: var(--sz-tiny) }
.sky-pic{ font-size: 1.1rem; line-height: 1; text-align: center }
.sky-temp{ display: flex; gap: 7px; color: var(--faint); font-variant-numeric: tabular-nums }
.sky-temp b{ color: var(--ink) }
.sky-note{ font-size: var(--sz-note); color: var(--mute) }
/* advertise panel */
.pitch{ overflow: hidden; border-radius: 9px; background: var(--deep) }
.pitch-a{ display: flex; flex-direction: column; gap: 11px; padding: 19px; color: #fff }
.pitch-tag{ display: inline-flex; align-items: center; gap: 7px; align-self: flex-start; font: 700 .75rem/1.4 var(--type-body); letter-spacing: .06em; text-transform: uppercase; color: #8fd4e5 }
.pitch-t{ font: 700 1.25rem/1.25 var(--type-head); color: #fff }
.pitch-p{ font-size: var(--sz-note); line-height: 1.5; color: #cfdde9 }
.pitch-go{ display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; margin-block-start: 5px; padding: 0 17px; border-radius: var(--bend); background: #23c763; color: #06200f; font: 700 var(--sz-ui)/1.2 var(--type-body) }
.pitch-a:hover .pitch-go{ background: #1cb356 }
.pitch-a:focus-visible{ outline: 3px solid #fff; outline-offset: -4px }

/* ============ article ============ */
.article{ min-width: 0; max-width: 47rem }
.article-top{ display: grid; gap: 13px }
.crumbs ol{ display: flex; flex-wrap: wrap; gap: 2px; list-style: none; font-size: var(--sz-tiny); color: var(--faint) }
.crumbs li + li::before{ content: "/"; margin-inline: 9px; color: var(--hair-2) }
.crumbs a:hover{ color: var(--act); text-decoration: underline }
.crumbs a[aria-current]{ color: var(--faint) }
.article-rubric a{ font-size: var(--sz-tiny); font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--act) }
html[lang=ar] .article-rubric a, html[lang=fa] .article-rubric a, html[lang=he] .article-rubric a{ letter-spacing: 0; font-size: .9375rem }
.article-rubric a:hover{ text-decoration: underline; text-underline-offset: 3px }
.article-title{ max-width: 24em; font: 700 var(--sz-story)/1.12 var(--type-head); letter-spacing: -.01em; color: var(--ink); text-wrap: balance }
html[lang=ar] .article-title, html[lang=fa] .article-title{ line-height: 1.35; letter-spacing: 0 }
html[lang=he] .article-title{ line-height: 1.2; letter-spacing: 0 }
.signed{ display: flex; flex-wrap: wrap; align-items: center; gap: 4px 21px; padding-block: 13px; border-block: 1px solid var(--hair); font-size: var(--sz-note); color: var(--faint) }
.signed b{ font-weight: 700; color: var(--ink) }
.lead-fig{ margin-block: 25px 0 }
.lead-fig img, .lead-fig video{ width: 100%; border-radius: var(--bend-pic); background: var(--mist) }
.lead-fig figcaption, .copy figcaption{ margin-block-start: 9px; font-size: var(--sz-tiny); line-height: 1.45; color: var(--faint) }
.fig-note{ margin-inline-start: .4em; color: var(--faint); text-decoration: underline; text-underline-offset: 2px }
.fig-note::before{ content: "\00b7"; display: inline-block; margin-inline-end: .4em; text-decoration: none }
.fig-by{ margin-inline-start: .4em }
.fig-by::before{ content: "\00b7"; margin-inline-end: .4em }
.copy{ max-width: 42rem; margin-block-start: 29px; font-size: var(--sz-body); line-height: 1.72; color: var(--ink); overflow-wrap: anywhere }
html[lang=ar] .copy, html[lang=fa] .copy{ line-height: 1.9 }
html[lang=he] .copy{ line-height: 1.8 }
.copy > * + *{ margin-block-start: 1.05em }
.copy > p:first-child{ font-size: 1.1em; line-height: 1.62 }
.copy h2{ margin-block-start: 1.9em; font: 700 1.6875rem/1.25 var(--type-head); color: var(--deep); text-wrap: balance }
.copy h3{ margin-block-start: 1.5em; font: 700 1.25rem/1.3 var(--type-body); color: var(--deep) }
.copy h4{ margin-block-start: 1.3em; font-size: 1.125rem; font-weight: 700 }
.copy h2 + *, .copy h3 + *{ margin-block-start: .55em }
.copy a{ color: var(--act); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px }
.copy a:hover{ color: var(--act-deep); text-decoration-thickness: 2px }
.copy ul, .copy ol{ padding-inline-start: 1.4em }
.copy li + li{ margin-block-start: .4em }
.copy li::marker{ color: var(--act) }
.copy blockquote{ margin-inline: 0; padding: .1em 0 .1em 1.1em; border-inline-start: 3px solid var(--pop); font: 400 1.1em/1.6 var(--type-head); color: var(--ink-mid) }
[dir=rtl] .copy blockquote{ padding: .1em 1.1em .1em 0 }
.copy blockquote p + p{ margin-block-start: .6em }
.copy img{ max-width: 100%; width: auto; height: auto; margin-inline: auto; border-radius: var(--bend-pic) }
.copy figure{ margin-block: 1.6em; max-width: 100% }
.copy hr{ border: 0; border-block-start: 1px solid var(--hair-2); margin-block: 2em }
.copy table{ display: block; overflow-x: auto; width: 100%; border-collapse: collapse; font-size: .9375rem; line-height: 1.5 }
.copy th, .copy td{ padding: 9px 13px; border-block-end: 1px solid var(--hair); text-align: start; vertical-align: top }
.copy th{ border-block-end: 2px solid var(--deep); font-weight: 700; color: var(--deep); background: none }
.copy iframe{ max-width: 100% }
.copy video{ width: 100%; height: auto; aspect-ratio: auto 16/9; max-height: 72vh; border-radius: var(--bend-pic); background: #000 }
.copy .clip-tall{ margin: 1.6em auto; max-width: 424px }
.copy .clip-tall video{ max-height: none }
.copy .clip-wide{ margin: 1.6em 0 }
.copy .clip-wide video{ display: block; width: 100%; aspect-ratio: 16/9; height: auto; background: #000 }
@media (max-width: 560px){ .copy .clip-tall{ max-width: 100% } }
.outline{ margin-block: 1.6em; padding: 15px 0; border-block: 1px solid var(--hair); font-size: .9375rem }
.outline-h{ font: 700 var(--sz-tiny)/1.3 var(--type-body); letter-spacing: .09em; text-transform: uppercase; color: var(--faint) }
html[lang=ar] .outline-h, html[lang=fa] .outline-h, html[lang=he] .outline-h{ letter-spacing: 0; font-size: .875rem }
.outline ol{ margin-block-start: .5em; padding-inline-start: 1.3em; line-height: 1.45 }
.outline li + li{ margin-block-start: .3em }
.outline li::marker{ color: var(--faint) }
.copy .outline a{ color: var(--ink-mid); text-decoration: none }
.copy .outline a:hover{ color: var(--act); text-decoration: underline }
.shield{ margin-block: 1.6em; padding: 19px 21px; border: 1px solid var(--hair-2); border-radius: var(--bend); background: var(--mist); text-align: center }
.shield p{ font-size: var(--sz-deck); color: var(--mute) }
.shield-row{ display: flex; flex-wrap: wrap; justify-content: center; gap: 9px; margin-block-start: 13px }
.copy .shield .btn{ min-height: 40px; font-size: var(--sz-note); text-decoration: none; color: #fff }
.copy .shield .btn-line{ color: var(--act) }
.ytbed{ position: relative; aspect-ratio: 16/9; margin-block: 1.6em; overflow: hidden; background: #000 }
.ytbed iframe{ position: absolute; inset: 0; width: 100%; height: 100%; border: 0 }
.xbed{ display: flex; justify-content: center; min-width: 0; max-width: 100%; margin-block: 1.6em; overflow-wrap: anywhere }
.xbed .twitter-tweet{ display: block; max-width: 100%; margin: 1.2em 0; padding: 13px 17px; border: 1px solid var(--hair-2); border-radius: var(--bend); word-break: break-word }
.xbed:has(iframe) .twitter-tweet{ display: none }
.xspare{ display: flex; flex-wrap: wrap; align-items: center; gap: 13px; margin: 1.2em 0; padding: 15px 17px; border: 1px solid var(--hair-2); border-radius: var(--bend); background: var(--mist); color: var(--ink) }
.xspare .glyph{ width: 22px; height: 22px }
.xspare-t{ font-weight: 700; font-size: var(--sz-ui) }
.xspare-d{ margin-inline-start: auto; color: var(--faint); font-size: var(--sz-tiny) }
.copy a.xspare, .copy a.xspare *{ text-decoration: none; color: var(--ink) }
.copy a.xspare .xspare-t{ color: var(--act) }
.copy a.xspare .xspare-d{ color: var(--faint) }
.article-end{ display: grid; gap: 29px; max-width: 42rem; margin-block-start: 42px }
.article-topics{ display: flex; flex-wrap: wrap; align-items: center; gap: 11px 15px; padding-block-start: 17px; border-block-start: 1px solid var(--hair) }
.article-topics-h{ font: 700 var(--sz-tiny)/1.3 var(--type-body); letter-spacing: .09em; text-transform: uppercase; color: var(--faint) }
html[lang=ar] .article-topics-h, html[lang=fa] .article-topics-h, html[lang=he] .article-topics-h{ letter-spacing: 0; font-size: .875rem }
.further{ padding-block-start: 11px; border-block-start: 2px solid var(--deep) }
.further .zone-title{ font-size: 1.25rem }
.further .barelist{ margin-block-start: 7px }
.alsoread{ min-width: 0 }
.grid3{ display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 25px }
@media (max-width: 760px){
  .grid3{ grid-template-columns: 1fr; gap: 0 }
  .grid3 .card-block{ grid-template-columns: minmax(0,1fr) 106px; gap: 15px; padding-block: 15px; border-block-end: 1px solid var(--hair) }
  .grid3 .card-block .card-pic{ order: 2 }
  .grid3 .card-block .card-body{ order: 1 }
}
@media (max-width: 700px){
  .article-title{ font-size: 1.9375rem; line-height: 1.15 }
  html[lang=ar] .article-title, html[lang=fa] .article-title{ font-size: 1.8125rem; line-height: 1.4 }
  .copy{ margin-block-start: 23px; font-size: 1.125rem; line-height: 1.7 }
  html[lang=ar] .copy, html[lang=fa] .copy{ font-size: 1.1875rem; line-height: 1.85 }
  html[lang=he] .copy{ font-size: 1.1875rem }
  .copy h2{ font-size: 1.5rem }
  .lead-fig{ margin-inline: -17px }
  .lead-fig img{ border-radius: 0 }
  .lead-fig figcaption{ padding-inline: 17px }
}

/* backer strip and partner widget */
.backer{ display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 15px 25px; padding: 21px 23px; border: 1px solid var(--hair-2); border-inline-start: 4px solid var(--act); border-radius: var(--bend); background: var(--mist); line-height: 1.5 }
.backer-text{ flex: 1 1 300px; min-width: 0 }
.backer-h{ font: 700 1.1875rem/1.3 var(--type-head); color: var(--deep) }
.backer-p{ margin-block-start: .4em; font-size: var(--sz-note); color: var(--ink-mid) }
a.backer-go{ flex: 0 0 auto; max-width: 100%; color: #fff; white-space: normal }
@media (max-width: 560px){ .backer{ padding: 17px } .backer-go{ width: 100% } }
.wiremini{ padding: 13px 17px 7px; border: 1px solid #e3d6b4; border-radius: var(--bend); background: #fcf9f1; line-height: 1.35 }
.wiremini-h{ margin-block-end: 5px; font: 700 .75rem/1.2 var(--type-body); letter-spacing: .09em; text-transform: uppercase }
html[lang=ar] .wiremini-h, html[lang=fa] .wiremini-h, html[lang=he] .wiremini-h{ letter-spacing: 0; font-size: .875rem }
.wiremini-h a{ color: #7c5700 }
.wiremini-h a:hover{ text-decoration: underline }
.wiremini-l{ list-style: none }
.wiremini-l li{ border-block-start: 1px solid #eae0c6 }
.wiremini-l li:first-child{ border-block-start: 0 }
.wiremini-a{ display: flex; align-items: center; gap: 13px; padding: 9px 0; color: var(--ink) }
.wiremini-a img{ flex: 0 0 auto; width: 86px; height: 58px; object-fit: cover; border-radius: var(--bend-pic); background: #ece3ca }
.wiremini-t{ min-width: 0; font: 700 .9375rem/1.3 var(--type-head); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden }
.wiremini-a:hover .wiremini-t{ text-decoration: underline }
@media (max-width: 560px){ .wiremini-a img{ width: 74px; height: 50px } }

/* ============ fixed pages, find, directory ============ */
.paper{ min-width: 0; max-width: 100% }
.paper .crumbs{ margin-block-end: 13px }
.paper-title{ font: 700 clamp(1.9375rem, 1.35rem + 1.65vw, 2.5625rem)/1.15 var(--type-head); color: var(--deep); text-wrap: balance }
.paper-intro{ margin-block-start: 11px; max-width: 68ch; font-size: var(--sz-deck); color: var(--mute) }
.paper .copy{ max-width: 46rem }
.paper .zone-top{ margin-block-start: 34px }
.dir-grid{ display: grid; grid-template-columns: repeat(auto-fill, minmax(214px,1fr)); gap: 7px 25px; list-style: none }
.dir-grid a{ font-weight: 600 }
.dir-grid a:hover{ color: var(--act); text-decoration: underline }
.seeker-form{ margin-block-start: 19px }
.seeker .sform{ max-width: none }
.seeker-note{ display: flex; align-items: center; gap: 11px; margin-block-start: 17px; padding: 10px 0; font-size: var(--sz-deck); color: var(--mute) }
.seeker-note[data-phase=wait]::before{ content: ""; width: 15px; height: 15px; flex: none; border: 2px solid var(--hair-2); border-block-start-color: var(--act); border-radius: 50%; animation: whirl .8s linear infinite }
.seeker-note[data-phase=found]{ color: var(--ink-mid); font-weight: 600; border-block-end: 2px solid var(--deep) }
.seeker-note[data-phase=none]{ color: var(--ink); font-weight: 600 }
.seeker-note[data-phase=broken]{ padding: 13px 15px; border-inline-start: 3px solid var(--alarm); background: #fcf0ef; color: #8c1a12; font-weight: 600 }
@keyframes whirl{ to{ transform: rotate(360deg) } }
.findings{ list-style: none; display: grid }
.findings li{ display: grid; gap: 7px; padding-block: 17px; border-block-end: 1px solid var(--hair) }
.findings h2{ font: 700 1.1875rem/1.3 var(--type-head) }
.findings h2 a:hover{ color: var(--act); text-decoration: underline; text-underline-offset: 3px }
.hit-deck{ font-size: 1rem; color: var(--mute); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden }
.seeker-paths{ display: grid; gap: 15px; margin-block-start: 13px; padding: 19px 21px; border-radius: 9px; background: var(--mist) }
.seeker-paths[hidden]{ display: none }
.seeker-paths .zone-title{ font-size: 1.125rem }
.strayed{ max-width: 648px; margin: 22px auto; text-align: center; display: grid; gap: 19px; justify-items: center }
.strayed .sform{ margin-inline: auto }

/* leafing (pagination) */
.leafing{ display: flex; flex-wrap: wrap; align-items: center; gap: 7px; font-size: var(--sz-ui); font-weight: 600 }
.leafing a, .leaf-here, .leaf-gap{ display: inline-grid; place-items: center; min-width: 44px; height: 44px; padding: 0 13px; border: 1px solid var(--hair-2); border-radius: var(--bend); background: #fff; color: var(--ink) }
.leafing a:hover{ border-color: var(--act); color: var(--act) }
.leaf-here{ background: var(--deep); border-color: var(--deep); color: #fff }
.leaf-gap{ border: 0; background: none; min-width: 22px; padding: 0 }

/* wire (breaking list) */
.log{ display: grid; border-block-start: 1px solid var(--hair) }
.log details{ border-block-end: 1px solid var(--hair) }
.log summary{ display: grid; grid-template-columns: auto minmax(0,1fr) 23px; gap: 15px; align-items: baseline; padding: 15px 0; cursor: pointer; list-style: none }
.log summary::-webkit-details-marker{ display: none }
.log summary::after{ content: "+"; align-self: center; width: 23px; height: 23px; display: inline-grid; place-items: center; border: 1px solid var(--hair-2); border-radius: 50%; color: var(--act); font-weight: 700; line-height: 1 }
.log details[open] summary::after{ content: "\2212" }
.log-when{ font-size: var(--sz-tiny); font-weight: 700; color: var(--alarm); white-space: nowrap }
.log-h{ font: 700 1.125rem/1.35 var(--type-head); color: var(--ink) }
.log summary:hover .log-h{ color: var(--act) }
.log-body{ display: grid; gap: 11px; justify-items: start; padding: 0 0 17px; font-size: var(--sz-deck); color: var(--mute) }

/* ============ basement (footer) ============ */
.basement{ padding-block: 42px 30px; background: var(--deep); color: #c3d2e0; font-size: var(--sz-ui) }
.basement-grid{ display: grid; grid-template-columns: minmax(224px,1.15fr) minmax(152px,1fr) minmax(152px,1fr) minmax(0,1.6fr); gap: 29px 34px }
.basement-id{ display: grid; align-content: start; justify-items: start; gap: 17px }
.basement-logo{ display: inline-block; padding: 11px 15px; border-radius: var(--bend); background: #fff }
.basement-logo img{ width: 186px; height: auto }
.basement-h{ margin-block-end: 11px; font: 700 var(--sz-tiny)/1.3 var(--type-body); letter-spacing: .09em; text-transform: uppercase; color: #fff }
html[lang=ar] .basement-h, html[lang=fa] .basement-h, html[lang=he] .basement-h{ letter-spacing: 0; font-size: .9375rem }
.basement-l{ list-style: none; display: grid; gap: 5px; font-size: .9375rem }
.basement-l a:hover, .basement-l button:hover{ color: #fff; text-decoration: underline }
.basement-l2{ grid-template-columns: 1fr 1fr; column-gap: 21px }
.basement-eds{ display: flex; flex-wrap: wrap; gap: 7px }
.basement-eds a{ display: inline-block; padding: 3px 11px; border: 1px solid rgba(255,255,255,.24); border-radius: var(--bend); font-size: var(--sz-note) }
.basement-eds a:hover, .basement-eds a[aria-current]{ background: #fff; color: var(--deep) }
.basement-fine{ margin-block-start: 29px; padding-block-start: 19px; border-block-start: 1px solid rgba(255,255,255,.15); font-size: var(--sz-note); line-height: 1.6; color: #a6b6c6 }
.basement-fine a{ color: #dde7f1; text-decoration: underline }
.basement-xtra{ margin-block-start: 11px; font-size: var(--sz-tiny) }
.basement-xtra a{ color: #dde7f1 }
.basement-xtra a:hover{ color: #fff; text-decoration: underline }
.basement :focus-visible{ outline-color: #fff }
.feedline{ cursor: pointer }
@media (max-width: 1060px){ .basement-grid{ grid-template-columns: 1fr 1fr 1fr } .basement-grid > .basement-col:last-child{ grid-column: 1/-1 } }
@media (max-width: 860px){ .basement-grid{ grid-template-columns: 1fr 1fr } .basement-grid > .basement-id{ grid-column: 1/-1 } }
@media (max-width: 560px){ .basement-grid{ gap: 25px 21px } }

/* ============ floating riser ============ */
.riser{ position: fixed; inset-inline-end: calc(17px + env(safe-area-inset-right, 0px)); bottom: calc(17px + var(--bar-h) + env(safe-area-inset-bottom, 0px)); z-index: 48; display: inline-grid; place-items: center; width: 43px; height: 43px; border: 1px solid var(--hair-2); border-radius: 50%; background: #fff; color: var(--deep); cursor: pointer; box-shadow: 0 5px 15px rgba(16,42,67,.15) }
.riser[hidden]{ display: none }
.riser:hover{ color: var(--act); border-color: var(--act) }
@media print{ .cnotice, .riser, .ribbon, .crest, .flank, .searchbar, .plate-b, .plate-find{ display: none !important } body{ padding: 0 } }

/* ============ dialogs ============ */
dialog{ border: 0; padding: 0; background: transparent; color: var(--ink) }
dialog::backdrop{ background: rgba(16,42,67,.56) }
.shutter{ display: inline-grid; place-items: center; width: 40px; height: 40px; border: 0; border-radius: 50%; background: var(--mist); cursor: pointer }
.shutter:hover{ background: var(--hair) }
/* display settings */
.vision{ width: min(96vw, 464px) }
.vision-in{ padding: 21px; border-radius: 11px; background: #fff; box-shadow: 0 22px 52px rgba(0,0,0,.32) }
.vision-top{ display: flex; align-items: center; justify-content: space-between; gap: 11px; margin-block-end: 15px }
.vision-top h2{ font: 700 1.1875rem/1.2 var(--type-head); color: var(--deep) }
.vision-scale{ margin-block-end: 13px }
.vision-scale p{ display: flex; justify-content: space-between; font-weight: 600 }
.vision-row{ display: flex; gap: 7px; margin-block-start: 7px }
.vision-grid{ display: grid; grid-template-columns: 1fr 1fr; gap: 7px; margin-block-end: 15px }
.vision-b{ flex: 1; min-height: 44px; padding: 8px 11px; border: 1px solid var(--hair-2); border-radius: var(--bend); background: #fff; font-size: var(--sz-note); font-weight: 600; cursor: pointer }
.vision-b:hover{ border-color: var(--act); color: var(--act) }
.vision-b[aria-pressed=true]{ background: var(--deep); border-color: var(--deep); color: #fff }
.vision-note{ margin-block-start: 13px; font-size: var(--sz-tiny); color: var(--mute) }
.vision-note a{ text-decoration: underline }
/* contact */
.reach{ width: min(96vw, 524px) }
.reach::backdrop{ background: rgba(8,21,34,.56) }
.reach-in{ overflow: hidden; border-radius: 11px; background: #fff; box-shadow: 0 26px 62px rgba(0,0,0,.36) }
.reach-top{ display: flex; align-items: center; justify-content: space-between; gap: 13px; padding: 17px 21px; background: var(--deep); color: #fff }
.reach-top h2{ font: 700 1.1875rem/1.25 var(--type-head); color: #fff }
.reach-top .shutter{ background: rgba(255,255,255,.15); color: #fff }
.reach-top .shutter:hover{ background: rgba(255,255,255,.28) }
.reach-top :focus-visible{ outline-color: #fff }
.reach-intro{ padding: 15px 21px 0; color: var(--mute); font-size: var(--sz-deck); line-height: 1.5 }
.reach-form{ display: grid; gap: 15px; padding: 15px 21px 0 }
.reach-form[hidden]{ display: none }
.reach-f{ display: grid; gap: 6px }
.reach-f > span{ font-size: var(--sz-note); font-weight: 700; color: var(--ink) }
.reach-f input, .reach-f textarea{ width: 100%; padding: 10px 13px; border: 1px solid var(--hair-2); border-radius: var(--bend); background: #fff; color: var(--ink); font: 400 var(--sz-ui)/1.4 var(--type-body) }
.reach-f textarea{ resize: vertical; min-height: 122px }
.reach-f input:focus-visible, .reach-f textarea:focus-visible{ outline: 3px solid var(--ring); outline-offset: 1px; border-color: var(--act) }
.reach-f [aria-invalid=true]{ border-color: #a8231b }
.reach-trap{ position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden }
.reach-status{ padding: 11px 21px 0; min-height: 1.4em; font-size: var(--sz-note); line-height: 1.4 }
.reach-status:empty{ display: none }
.reach-status.bad{ color: #a8231b; font-weight: 600 }
.reach-status.good{ color: var(--good); font-weight: 700; font-size: var(--sz-deck) }
.reach-row{ display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 11px }
.reach-fine{ font-size: var(--sz-tiny); color: var(--faint) }
.reach-alt{ padding: 15px 21px 19px; border-block-start: 1px solid var(--hair); margin-block-start: 15px; font-size: var(--sz-note); color: var(--mute) }
.reach-alt:empty{ display: none }
.reach-alt a{ color: var(--act); font-weight: 600 }
.reach-wa{ display: inline-flex; align-items: center; gap: 8px; margin-inline-end: 11px; margin-block-end: 8px; min-height: 40px; padding: 0 15px; border-radius: var(--bend); background: #23c763; color: #06200f !important; font-weight: 700 }
.reach-wa:hover{ background: #1cb356 }
@media (max-width: 560px){
  .reach{ width: 100vw; max-width: 100vw; margin: auto 0 0; max-height: 92vh }
  .reach-in{ border-radius: 13px 13px 0 0; max-height: 92vh; overflow: auto }
  .reach-row{ flex-direction: column; align-items: stretch }
  .reach-fine{ text-align: center }
}
/* advertising popup */
.pitchpop{ width: min(94vw, 444px) }
.pitchpop::backdrop{ background: rgba(8,21,34,.5) }
.pitchpop-in{ position: relative; display: flex; flex-direction: column; gap: 13px; padding: 27px 25px 25px; border-radius: 11px; background: var(--deep); color: #fff; box-shadow: 0 26px 62px rgba(0,0,0,.42) }
.pitchpop-x{ position: absolute; top: 11px; inset-inline-end: 11px; background: rgba(255,255,255,.15); color: #fff }
.pitchpop-x:hover{ background: rgba(255,255,255,.28) }
.pitchpop-t{ margin-block-start: 6px; padding-inline-end: 38px; font: 700 1.5rem/1.2 var(--type-head); color: #fff }
.pitchpop-p{ font-size: var(--sz-deck); line-height: 1.5; color: #dde7f1 }
.pitchpop-go{ align-self: flex-start; margin-block-start: 6px }
.pitchpop-x:focus-visible, .pitchpop-go:focus-visible{ outline: 3px solid #fff; outline-offset: 2px }

/* ============ privacy bar ============ */
.cnotice{ position: fixed; inset-inline-start: 17px; bottom: 17px; z-index: 64; width: min(calc(100% - 34px), 568px) }
.cnotice[hidden]{ display: none }
.cnotice-in{ display: grid; gap: 13px; max-height: calc(100vh - 34px); overflow: auto; padding: 17px 19px; border: 1px solid var(--hair-2); border-radius: 11px; background: #fff; box-shadow: 0 18px 46px rgba(16,42,67,.26) }
.cnotice h2{ font: 700 1rem/1.25 var(--type-body); color: var(--deep) }
.cnotice p{ font-size: var(--sz-note); line-height: 1.5; color: var(--mute) }
.cnotice p a{ text-decoration: underline }
.cnotice-row{ display: flex; flex-wrap: wrap; align-items: center; gap: 9px }
.cnotice-row .btn{ min-height: 40px; padding: .3rem 1rem; font-size: var(--sz-note) }
.cnotice-row .linklike{ margin-inline-start: 5px; font-size: var(--sz-note); font-weight: 600; color: var(--act); text-decoration: underline; min-height: 40px }
.cnotice-tune{ display: grid; gap: 9px; padding: 6px 0 2px; font-size: var(--sz-note) }
.cnotice-tune[hidden]{ display: none }
.cnotice-tune label{ display: flex; gap: 9px; align-items: center }
.cnotice-tune input{ width: 18px; height: 18px; accent-color: var(--act) }
@media (max-width: 560px){
  .cnotice{ inset-inline: 0; bottom: 0; width: 100% }
  .cnotice-in{ border-radius: 13px 13px 0 0; border-inline: 0; border-block-end: 0; padding: 15px 17px calc(15px + env(safe-area-inset-bottom, 0px)); max-height: 70vh }
  .cnotice-row .btn{ flex: 1 }
}

/* ============ reader display settings ============ */
html.v-zm1{ font-size: 91% } html.v-z1{ font-size: 110% } html.v-z2{ font-size: 121% } html.v-z3{ font-size: 133% } html.v-z4{ font-size: 146% }
html.v-contrast body{ background: #fff; color: #000 }
html.v-contrast .stamp, html.v-contrast .deck, html.v-contrast .signed{ color: #171717 }
html.v-contrast a{ text-decoration: underline }
html.v-contrast .rubric, html.v-contrast .copy a{ color: #064a63 }
html.v-mono{ filter: grayscale(1) }
html.v-marklinks a{ text-decoration: underline !important }
html.v-plaintype body, html.v-plaintype .card-h, html.v-plaintype .article-title, html.v-plaintype .zone-title, html.v-plaintype .paper-title, html.v-plaintype .crown-title{ font-family: Arial, Helvetica, sans-serif }
html.v-airy body{ line-height: 2; letter-spacing: .05em; word-spacing: .12em }
html.v-still *, html.v-still *::before, html.v-still *::after{ transition: none !important; animation: none !important }
@media (max-width: 560px){ html.v-z2 .ribbon-list, html.v-z3 .ribbon-list, html.v-z4 .ribbon-list{ height: auto } }

/* ============ ad spaces: shown only after ads consent, collapsed when unfilled ============ */
.adspace{ display: none; max-width: 100%; min-width: 0; overflow: hidden; contain: inline-size }
.ads-live .adspace{ display: block; margin: 0; padding: 11px 0 15px; border-block: 1px solid var(--hair); text-align: center }
.ads-live .copy .adspace{ margin-block: 2em }
.ads-live .adspace ins{ min-height: 250px }
.adspace-tag{ margin: 0 0 8px; font-size: .6875rem; letter-spacing: .1em; text-transform: uppercase; color: var(--faint) }
.ads-live .adspace-flank{ padding: 11px 0 13px }
.ads-live .adspace:has(ins[data-ad-status="unfilled"]){ display: none }
.ads-live .adspace-flank ins{ min-height: 0; max-height: 250px; overflow: hidden }
.adspace ins.adsbygoogle{ max-width: 100% !important; width: 100% !important; margin-left: 0 !important; margin-right: 0 !important; box-sizing: border-box }
.adspace ins.adsbygoogle iframe{ max-width: 100% !important }
.houses{ margin: 2em 0; padding: 11px 0 15px; border-block: 1px solid var(--hair); text-align: center }
.houses a{ display: block; line-height: 0 }
.houses img{ display: block; width: 100%; height: auto; max-width: 100%; margin: 0 auto; border-radius: 5px }
.houses-tag{ margin: 0 0 8px; font-size: .6875rem; letter-spacing: .1em; color: var(--faint) }
.houses-flank{ margin: 0; padding: 11px 0 13px }
.geo-pair [hidden]{ display: none !important }
@media (max-width: 1060px){ .pg-find .flank{ display: none } }

/* ============ agenda (upcoming events) ============ */
.agenda{ min-width: 0 }
.agenda[hidden]{ display: none }
.agenda-head{ display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 13px 25px; margin-bottom: 17px; padding-top: 11px; border-top: 2px solid var(--deep) }
.agenda-t{ display: flex; align-items: center; gap: .5rem; margin: 0; font: 700 var(--sz-zone)/1.2 var(--type-head); color: var(--deep) }
.agenda-sub{ margin: 4px 0 0; color: var(--mute); font-size: var(--sz-note) }
.agenda-ctrl{ display: flex; flex-direction: column; align-items: flex-end; gap: 6px }
.agenda-filters{ display: flex; gap: 2px; padding: 3px; border: 1px solid var(--hair-2); border-radius: var(--bend); background: #fff }
.agenda-f{ min-height: 36px; padding: .2rem .8rem; border: 0; border-radius: 5px; background: transparent; color: var(--ink); font: 600 var(--sz-note)/1.2 var(--type-body); cursor: pointer }
.agenda-f:hover{ background: var(--mist); color: var(--act) }
.agenda-f[aria-pressed="true"]{ background: var(--deep); color: #fff }
.agenda-zone{ margin: 0; color: var(--faint); font-size: var(--sz-tiny) }
.agenda-list{ display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 13px; margin: 0; padding: 0; list-style: none }
.agenda-list[data-n="1"]{ grid-template-columns: minmax(0,1fr) }
.agenda-card{ display: flex; gap: 15px; min-width: 0; height: 100%; padding: 15px; border-radius: 9px; background: var(--mist) }
.agenda-date{ flex: none; display: flex; flex-direction: column; align-items: center; justify-content: center; width: 53px; height: 57px; border-radius: var(--bend); background: #fff; border: 1px solid var(--hair-2); color: var(--deep) }
.agenda-date-d{ font: 700 1.25rem/1 var(--type-head) }
.agenda-date-m{ margin-top: 3px; font-size: .75rem; text-transform: uppercase; letter-spacing: .04em; color: var(--faint) }
.agenda-core{ display: flex; flex-direction: column; gap: 6px; min-width: 0; flex: 1 }
.agenda-tags{ display: flex; flex-wrap: wrap; gap: 6px }
.agenda-topic, .agenda-moved{ display: inline-block; font-size: .75rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em }
.agenda-topic{ color: var(--act) }
.agenda-moved{ color: #99480a }
.agenda-h{ margin: 0; font: 700 1.0625rem/1.3 var(--type-head); color: var(--ink); overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden }
.agenda-when{ margin: 0; font-size: var(--sz-note); line-height: 1.4; color: var(--ink-mid); overflow-wrap: anywhere }
.agenda-why{ margin: 0; font-size: var(--sz-note); line-height: 1.5; color: var(--mute); display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden }
.agenda-go{ margin-top: auto; align-self: flex-start; font-size: var(--sz-note); font-weight: 700; color: var(--act); text-decoration: underline; text-underline-offset: 3px }
.agenda-foot{ display: flex; justify-content: center; margin-top: 13px }
.agenda-foot:empty{ display: none }
.agenda-more{ min-height: 44px; padding: .4rem 1.1rem; border: 1px solid var(--act); border-radius: var(--bend); background: transparent; color: var(--act); font: 600 var(--sz-note)/1.2 var(--type-body); cursor: pointer }
.agenda-more:hover{ background: var(--wash) }
@media (max-width: 767px){
  .agenda-h, .agenda-why{ display: block; -webkit-line-clamp: unset }
  .agenda-head{ flex-direction: column; align-items: stretch; gap: 11px }
  .agenda-ctrl{ align-items: stretch }
  .agenda-filters{ display: grid; grid-template-columns: repeat(3, minmax(0,1fr)) }
  .agenda-f{ min-height: 44px; padding: .3rem .4rem; overflow-wrap: anywhere }
  .agenda-list{ grid-template-columns: minmax(0,1fr); gap: 11px }
}