/* ============================================================
   flyExclusive — Newsroom (/news) + Newsroom Admin
   Loaded AFTER css/luxury.css. Owns two things:
     1. .fex-news-*  the public index and article template
     2. .fex-adm-*   the drafting/publishing admin
   Composition is ported from fraseryachts.com/en/yachting-news
   and /en/news-detail/* (banner-band hero with a centred title, a
   left filter rail beside a three-up card grid, a narrow prose
   measure, a centred share row, a "keep reading" tail). The
   treatment is Luxury Style System v2.0 throughout: 0px corners,
   hairline rules, ghost buttons, Galano Light 300 display type,
   .32em eyebrows, navy/blue palette — no Fraser colour or type.

   Every selector is prefixed. The Webflow export sheet defines
   hundreds of element-level rules, so anything it also targets
   (h1/h2/p/a/ul/li/input/select/button/table) is restated here
   rather than inherited, and this file loads last so equal
   specificity resolves in its favour.
   ============================================================ */

/* ============================================================
   0 · SHARED PRIMITIVES
   ============================================================ */
.fex-news-page{background:var(--fe-paper)}

.fex-news-wrap{
  max-width:1180px;
  margin:0 auto;
  padding:0 clamp(20px,5vw,40px);
}
.fex-news-wrap--narrow{max-width:760px}

/* Visually-hidden label. Named separately from .fex-adm-sr because the
   public pages do not load the admin's section of this file's cascade
   in any guaranteed order. */
.fex-news-sr{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}

/* Eyebrow — the .32em signature. Restated (not @extend'd from
   .lux-eyebrow) so a news card never inherits a margin the design
   library later changes for a different component. */
.fex-news-eyebrow{
  margin:0 0 10px;
  font-family:var(--lux-font);
  font-weight:600;
  font-size:11px;
  letter-spacing:var(--lux-track-eyebrow);
  text-transform:uppercase;
  color:var(--fe-blue-600);
}
.fex-news-eyebrow--ondark{color:#fff;opacity:.86}

/* Hairline rule used as a section marker under centred eyebrows */
.fex-news-rule{
  width:56px;height:1px;margin:0 auto 18px;
  background:var(--fe-blue);
  border:0;
}

/* Ghost link with a travelling arrow — the "Read more ›" affordance */
.fex-news-more{
  display:inline-flex;align-items:center;gap:8px;
  font-family:var(--lux-font);
  font-weight:600;font-size:11px;
  letter-spacing:.2em;text-transform:uppercase;
  color:var(--fe-blue-600);
  text-decoration:none;
  transition:color .25s ease;
}
.fex-news-more svg{
  width:13px;height:13px;flex:none;
  fill:none;stroke:currentColor;stroke-width:2;
  transition:transform .25s ease;
}
.fex-news-more:hover{color:var(--fe-navy)}
.fex-news-more:hover svg{transform:translateX(4px)}

/* ============================================================
   1 · BANNER HERO  (index + article share this band)
   Fraser's hero is a short full-bleed photographic band with the
   breadcrumb pinned top-left and the title optically centred.
   Kept — but the title is Galano Light 300 sentence case with an
   uppercase eyebrow above it, which is how this site sets a page
   title, rather than Fraser's letterspaced uppercase serif-ish caps.
   ============================================================ */
.fex-news-hero{
  position:relative;
  display:flex;
  flex-direction:column;
  justify-content:center;
  min-height:clamp(240px,26vw,340px);
  padding:clamp(64px,7vw,84px) 0 clamp(30px,4vw,44px);
  overflow:hidden;
  background:var(--fe-navy-900);
}
.fex-news-hero > img{
  position:absolute;inset:0;
  width:100%;height:100%;
  object-fit:cover;
  object-position:50% 42%;
}
/* Two scrims, not one. The linear wash carries the breadcrumb at the top
   and the hairline at the bottom; the radial one sits under the centred
   title only, so the headline holds contrast without flattening the
   photograph across its whole width. A single 60% wash did flatten it —
   the band read as a CSS gradient. */
/* z-index is explicit because ::before precedes the <img> in tree order:
   among z-index:auto positioned boxes the later one wins, so without this
   the photograph would paint on top of its own scrim. Copy sits at 2. */
.fex-news-hero::before,
.fex-news-hero::after{content:"";position:absolute;inset:0;pointer-events:none;z-index:1}
.fex-news-hero::before{
  background:linear-gradient(180deg,rgba(0,25,50,.58) 0%,rgba(0,25,50,.26) 46%,rgba(0,25,50,.60) 100%);
}
.fex-news-hero::after{
  background:radial-gradient(ellipse 60% 74% at 50% 56%,rgba(0,25,50,.52) 0%,rgba(0,25,50,0) 100%);
}
.fex-news-hero > *:not(img){position:relative;z-index:2}

.fex-news-hero__copy{text-align:center;max-width:920px;margin:0 auto}
.fex-news-hero__copy h1{
  margin:0;
  font-family:var(--lux-font);
  font-weight:300;
  font-size:clamp(28px,4.4vw,54px);
  line-height:1.1;
  letter-spacing:.01em;
  color:#fff;
  text-transform:none;
  text-shadow:none;
}
.fex-news-hero__copy p{
  margin:16px auto 0;
  max-width:640px;
  font-size:clamp(14px,1.2vw,16px);
  line-height:1.7;
  color:rgba(255,255,255,.9);
}
/* Article hero carries date + category instead of a standfirst */
.fex-news-hero__meta{
  display:flex;flex-wrap:wrap;justify-content:center;
  align-items:center;gap:10px 16px;
  margin:18px 0 0;
  font-size:12px;letter-spacing:.14em;text-transform:uppercase;
  color:rgba(255,255,255,.82);
}
.fex-news-hero__meta span{display:inline-flex;align-items:center;gap:16px}
.fex-news-hero__meta span::before{
  content:"";width:1px;height:11px;background:rgba(255,255,255,.4);
}
.fex-news-hero__meta > :first-child::before{display:none}

/* Breadcrumb pinned to the top of the band, as on the source pages */
.fex-news-crumbs{
  position:absolute;top:0;left:0;right:0;z-index:3;
  padding:clamp(58px,6.4vw,74px) clamp(20px,5vw,40px) 0;
}
.fex-news-crumbs ol{
  display:flex;flex-wrap:wrap;align-items:center;gap:8px;
  margin:0;padding:0;list-style:none;
  max-width:1180px;margin-inline:auto;
  font-size:11px;letter-spacing:.14em;text-transform:uppercase;
}
.fex-news-crumbs li{
  display:flex;align-items:center;gap:8px;
  color:rgba(255,255,255,.72);
  font-family:var(--lux-font);
}
.fex-news-crumbs li + li::before{content:"›";opacity:.6}
.fex-news-crumbs a{color:rgba(255,255,255,.72);text-decoration:none;transition:color .25s ease}
.fex-news-crumbs a:hover{color:#fff}
.fex-news-crumbs [aria-current]{color:#fff;font-weight:600}

/* --bar: the article page's trail, which sits in the white .fex-news-backbar
   between the hero and the prose instead of over the photograph. The index
   page keeps the overlaid version above, hence a modifier rather than an
   edit to the base rules — the two are on different backgrounds.
   Undoes the absolute positioning and inverts the palette; everything
   structural (flex row, "›" separators) is inherited. */
.fex-news-crumbs--bar{position:static;padding:0;min-width:0}
.fex-news-crumbs--bar ol{flex-wrap:nowrap;max-width:none;margin-inline:0}
/* The global stylesheet sets li{line-height:28px;margin-left:36px} for body
   copy. Over the hero the trail is absolutely positioned so neither showed;
   in the bar they made each row 36px tall and indented the whole trail 36px
   off the container's left edge. Reset both here. */
.fex-news-crumbs--bar li{color:var(--fe-slate);margin:0;line-height:1.6}
.fex-news-crumbs--bar li + li::before{opacity:.55}
.fex-news-crumbs--bar a{color:var(--fe-slate)}
.fex-news-crumbs--bar a:hover{color:var(--fe-blue-600)}
.fex-news-crumbs--bar [aria-current]{color:var(--fe-navy)}
/* The trail's last item is the full headline, which is long enough to push
   the read time off the row. Truncate the title only — the span exists so
   the li's "›" ::before is not swallowed by the ellipsis. */
.fex-news-crumbs--bar li[aria-current]{min-width:0}
.fex-news-crumbs--bar li[aria-current] span{
  display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
/* The read time must not be the thing that gives: left to shrink it wrapped
   to "2 MIN / READ" and pushed the bar from 46px to 70px. It is short and
   fixed, so it holds its width and the trail absorbs what is left. */
.fex-news-backbar__read{flex:none;white-space:nowrap}

/* "Next ›" pinned bottom-right of the article band */
.fex-news-hero__next{
  position:absolute;bottom:0;right:0;z-index:3;
  padding:0 clamp(20px,5vw,40px) clamp(16px,2vw,22px);
  display:flex;justify-content:flex-end;
}
.fex-news-hero__next a{
  display:inline-flex;align-items:center;gap:8px;
  font-size:11px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;
  color:#fff;text-decoration:none;opacity:.86;
  transition:opacity .25s ease;
}
.fex-news-hero__next a:hover{opacity:1}
.fex-news-hero__next svg{width:13px;height:13px;fill:none;stroke:currentColor;stroke-width:2}

/* On a phone the breadcrumb's top offset and the hero copy's top padding
   both bottom out at their clamp floors, which puts a three-crumb trail
   within a few pixels of the eyebrow. Push the copy down and let the
   band grow rather than have the two meet. */
@media screen and (max-width:700px){
  .fex-news-hero{padding-top:112px;min-height:0}
  /* :not(--bar) throughout: these are the overlaid trail's rules. The
     article page's trail is in the white bar now and must not inherit the
     hero's top offset or the centring — it is one row with the read time. */
  .fex-news-crumbs:not(.fex-news-crumbs--bar){padding-top:64px}
  .fex-news-crumbs:not(.fex-news-crumbs--bar) ol{justify-content:center}
  /* A long current item wraps to two lines on a phone and crowds what
     follows. One line with an ellipsis; display:block so text-overflow
     applies (the li is a flex container at wider sizes). */
  .fex-news-crumbs:not(.fex-news-crumbs--bar) li[aria-current]{
    display:block;max-width:70vw;
    overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  }
  .fex-news-hero__next{position:static;padding-top:22px;justify-content:center}
}

/* The bar stacks on a phone: a full-width trail above the read time reads
   better than an ellipsis eating most of the headline at 320px. */
@media screen and (max-width:560px){
  .fex-news-backbar__inner{
    flex-direction:column;align-items:flex-start;gap:8px;
  }
  .fex-news-crumbs--bar{width:100%}
}

/* ============================================================
   2 · INDEX — filter rail + results
   ============================================================ */
.fex-news-body{padding:clamp(44px,5vw,72px) 0 clamp(56px,7vw,96px)}

.fex-news-layout{
  display:grid;
  grid-template-columns:250px minmax(0,1fr);
  gap:clamp(28px,3.4vw,48px);
  align-items:start;
}
@media screen and (max-width:900px){
  .fex-news-layout{grid-template-columns:minmax(0,1fr)}
}

/* ---- filter rail ---- */
.fex-news-filters{
  background:var(--fe-surface-grey);
  border:1px solid var(--fe-line);
  padding:22px 22px 24px;
}
.fex-news-filters__title{
  margin:0 0 18px;
  font-family:var(--lux-font);
  font-weight:600;font-size:12px;
  letter-spacing:var(--lux-track-eyebrow);
  text-transform:uppercase;
  color:var(--fe-navy);
}
.fex-news-fgroup{border-top:1px solid rgba(0,58,112,.14);padding:16px 0 4px}
.fex-news-fgroup:first-of-type{border-top:0;padding-top:0}

.fex-news-fgroup__head{
  display:flex;align-items:center;justify-content:space-between;
  width:100%;
  margin:0;padding:0 0 12px;
  background:none;border:0;
  font-family:var(--lux-font);
  font-weight:600;font-size:11px;
  letter-spacing:.18em;text-transform:uppercase;
  color:var(--fe-navy);
  cursor:pointer;
  text-align:left;
}
.fex-news-fgroup__head svg{
  width:12px;height:12px;flex:none;
  fill:none;stroke:currentColor;stroke-width:2;
  transition:transform .25s ease;
}
.fex-news-fgroup__head[aria-expanded="false"] svg{transform:rotate(180deg)}
.fex-news-fgroup__body{display:block}
.fex-news-fgroup__head[aria-expanded="false"] + .fex-news-fgroup__body{display:none}

.fex-news-check{
  display:flex;align-items:flex-start;gap:10px;
  padding:6px 0;
  font-family:var(--lux-font);
  font-size:12px;letter-spacing:.08em;text-transform:uppercase;
  color:var(--fe-ink);
  cursor:pointer;
}
.fex-news-check input{
  appearance:none;-webkit-appearance:none;
  flex:none;width:14px;height:14px;margin:2px 0 0;
  background:var(--fe-paper);
  border:1px solid var(--fe-navy-600);
  border-radius:0;
  cursor:pointer;
  transition:background .2s ease,border-color .2s ease;
}
.fex-news-check input:checked{
  background:var(--fe-navy);border-color:var(--fe-navy);
  /* tick drawn as a background image so no pseudo-element is needed
     on a replaced element */
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%23fff' stroke-width='2.4' d='M3 8.5l3.2 3.2L13 5'/%3E%3C/svg%3E");
  background-size:12px 12px;background-position:center;background-repeat:no-repeat;
}
.fex-news-check input:focus-visible{outline:2px solid var(--fe-blue);outline-offset:2px}
.fex-news-check__count{margin-left:auto;color:var(--fe-slate);font-size:11px;letter-spacing:.04em}

/* Rail fields (year select, keyword search) */
.fex-news-field{
  display:block;width:100%;
  margin:0;padding:11px 12px;
  font-family:var(--lux-font);font-size:12px;
  letter-spacing:.08em;text-transform:uppercase;
  color:var(--fe-ink);
  background:var(--fe-paper);
  border:1px solid var(--fe-line);
  border-radius:0;
  transition:border-color .25s ease;
}
.fex-news-field:focus{outline:none;border-color:var(--fe-navy)}
select.fex-news-field{
  appearance:none;-webkit-appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23003A70' stroke-width='2' d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right 10px center;
  background-size:14px 14px;
  padding-right:32px;
}
.fex-news-filters__reset{
  display:block;width:100%;margin-top:18px;padding:12px;
  background:transparent;
  border:1px solid var(--fe-navy);
  color:var(--fe-navy);
  font-family:var(--lux-font);font-weight:600;font-size:11px;
  letter-spacing:.2em;text-transform:uppercase;
  cursor:pointer;
  transition:background .25s ease,color .25s ease;
}
.fex-news-filters__reset:hover{background:var(--fe-navy);color:#fff}

/* Mobile: rail collapses behind a disclosure button */
.fex-news-filters__toggle{display:none}
@media screen and (max-width:900px){
  .fex-news-filters__toggle{
    display:flex;align-items:center;justify-content:space-between;
    width:100%;margin:0 0 14px;padding:14px 16px;
    background:var(--fe-surface-grey);
    border:1px solid var(--fe-line);
    font-family:var(--lux-font);font-weight:600;font-size:11px;
    letter-spacing:.2em;text-transform:uppercase;color:var(--fe-navy);
    cursor:pointer;
  }
  .fex-news-filters__toggle svg{width:12px;height:12px;fill:none;stroke:currentColor;stroke-width:2}
  .fex-news-filters__toggle[aria-expanded="true"] svg{transform:rotate(180deg)}
  .fex-news-filters[hidden]{display:none}
  /* The disclosure button already says "Filters"; repeating it as the
     panel's own heading directly beneath reads as a rendering fault. */
  .fex-news-filters__title{display:none}
}

/* ---- results header ---- */
.fex-news-resbar{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;
  gap:14px;
  margin:0 0 22px;padding:0 0 14px;
  border-bottom:1px solid var(--fe-line);
}
.fex-news-resbar__count{
  margin:0;
  font-family:var(--lux-font);font-weight:600;font-size:11px;
  letter-spacing:var(--lux-track-eyebrow);text-transform:uppercase;
  color:var(--fe-slate);
}
.fex-news-resbar__sort{
  display:flex;align-items:center;gap:10px;
  font-family:var(--lux-font);font-weight:600;font-size:11px;
  letter-spacing:.18em;text-transform:uppercase;color:var(--fe-slate);
}
.fex-news-resbar__sort select{
  border:0;border-bottom:1px solid var(--fe-line);
  background:none;padding:4px 20px 4px 0;
  color:var(--fe-navy);
  font-family:var(--lux-font);font-weight:600;font-size:11px;
  letter-spacing:.18em;text-transform:uppercase;
  appearance:none;-webkit-appearance:none;border-radius:0;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23003A70' stroke-width='2' d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right center;background-size:13px 13px;
  cursor:pointer;
}
.fex-news-resbar__sort select:focus{outline:none;border-bottom-color:var(--fe-navy)}

/* ---- card grid ---- */
.fex-news-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(250px,1fr));
  gap:clamp(26px,2.6vw,38px) clamp(20px,2.2vw,30px);
}
@media screen and (min-width:901px){
  .fex-news-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media screen and (max-width:560px){
  .fex-news-grid{grid-template-columns:minmax(0,1fr)}
}

/* The whole card is a single <a>, so its parts are spans rather than
   p/h3 — one link beats a card with three competing tab stops. Each
   part therefore has to be told to be a block. */
.fex-news-card{
  display:flex;flex-direction:column;
  min-width:0;
  text-decoration:none;
  background:none;
}
.fex-news-card__inner{
  display:flex;flex-direction:column;
  flex:1 1 auto;min-width:0;
}
.fex-news-card__date,
.fex-news-card__title,
.fex-news-card__excerpt,
.fex-news-card__foot,
.fex-news-card__tag{display:block}
.fex-news-card__media{
  position:relative;
  display:block;
  margin:0 0 14px;
  overflow:hidden;
  background:var(--fe-surface-blue);
}
.fex-news-card__media img{
  display:block;width:100%;height:auto;
  aspect-ratio:3/2;object-fit:cover;
  transition:transform .7s cubic-bezier(.2,.7,.3,1);
}
.fex-news-card:hover .fex-news-card__media img{transform:scale(1.04)}
/* Category tag over the photo — the site's own way of labelling an
   image, and it saves a line of chrome above the title. */
.fex-news-card__tag{
  position:absolute;left:0;bottom:0;
  margin:0;padding:7px 12px;
  background:rgba(0,39,77,.86);
  font-family:var(--lux-font);font-weight:600;font-size:10px;
  letter-spacing:.18em;text-transform:uppercase;color:#fff;
}
.fex-news-card__date{
  margin:0 0 8px;
  font-family:var(--lux-font);font-weight:400;font-size:11px;
  letter-spacing:.16em;text-transform:uppercase;
  color:var(--fe-slate);
}
.fex-news-card__title{
  margin:0 0 10px;
  font-family:var(--lux-font);font-weight:500;
  font-size:17px;line-height:1.32;
  letter-spacing:.01em;
  color:var(--fe-navy);
  text-wrap:balance;
}
.fex-news-card:hover .fex-news-card__title{color:var(--fe-blue-600)}
.fex-news-card__excerpt{
  margin:0 0 14px;
  font-family:var(--lux-font);font-size:13.5px;line-height:1.7;
  color:var(--fe-ink);
  /* three lines, so a long abstract cannot make one card twice the
     height of its neighbour */
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;
  overflow:hidden;
}
.fex-news-card__foot{margin-top:auto}

/* Featured lead card — spans the grid on page one. Same card
   language, laid horizontally, so it reads as emphasis rather than
   as a different component. */
.fex-news-card--lead{
  grid-column:1 / -1;
  display:grid;
  grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);
  gap:clamp(20px,2.6vw,36px);
  align-items:center;
  padding-bottom:clamp(26px,2.6vw,38px);
  border-bottom:1px solid var(--fe-line);
}
.fex-news-card--lead .fex-news-card__media{margin:0}
.fex-news-card--lead .fex-news-card__media img{aspect-ratio:16/10}
.fex-news-card--lead .fex-news-card__title{font-size:clamp(20px,2.2vw,28px);font-weight:300;line-height:1.2}
.fex-news-card--lead .fex-news-card__excerpt{font-size:15px;-webkit-line-clamp:4}
@media screen and (max-width:700px){
  .fex-news-card--lead{grid-template-columns:minmax(0,1fr)}
  .fex-news-card--lead .fex-news-card__media{margin-bottom:14px}
}

/* Empty + loading states */
.fex-news-empty{
  padding:clamp(40px,6vw,72px) 24px;
  text-align:center;
  border:1px solid var(--fe-line);
  background:var(--fe-canvas);
}
.fex-news-empty h2{
  margin:0 0 10px;
  font-family:var(--lux-font);font-weight:300;font-size:clamp(20px,2.4vw,26px);
  color:var(--fe-navy);
}
.fex-news-empty p{margin:0 auto;max-width:460px;font-size:14px;color:var(--fe-slate)}

.fex-news-skel{background:var(--fe-canvas);border:1px solid var(--fe-line)}
.fex-news-skel__media{aspect-ratio:3/2;background:var(--fe-surface-blue);opacity:.5}

/* ---- pagination ---- */
.fex-news-pager{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:center;
  gap:8px;
  margin:clamp(38px,4vw,56px) 0 0;
  padding-top:clamp(24px,3vw,34px);
  border-top:1px solid var(--fe-line);
}
.fex-news-pager button{
  min-width:40px;height:40px;padding:0 12px;
  background:transparent;
  border:1px solid var(--fe-line);
  border-radius:0;
  font-family:var(--lux-font);font-weight:500;font-size:12px;
  letter-spacing:.1em;
  color:var(--fe-navy);
  cursor:pointer;
  transition:background .25s ease,color .25s ease,border-color .25s ease;
}
.fex-news-pager button:hover:not(:disabled){border-color:var(--fe-navy);background:var(--fe-canvas)}
.fex-news-pager button[aria-current="page"]{
  background:var(--fe-navy);border-color:var(--fe-navy);color:#fff;
}
.fex-news-pager button:disabled{opacity:.35;cursor:default}
.fex-news-pager__gap{color:var(--fe-slate);padding:0 4px}
.fex-news-pager__status{
  width:100%;text-align:center;margin:14px 0 0;
  font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--fe-slate);
}

/* ============================================================
   3 · ARTICLE TEMPLATE
   ============================================================ */
/* Thin "Back to news" band directly under the hero, as on the
   source detail page. */
.fex-news-backbar{
  border-bottom:1px solid var(--fe-line);
  background:var(--fe-paper);
}
.fex-news-backbar__inner{
  max-width:1180px;margin:0 auto;
  padding:16px clamp(20px,5vw,40px);
  display:flex;align-items:center;justify-content:space-between;gap:16px;
}
.fex-news-backbar a{
  display:inline-flex;align-items:center;gap:9px;
  font-family:var(--lux-font);font-weight:600;font-size:11px;
  letter-spacing:.2em;text-transform:uppercase;
  color:var(--fe-navy);text-decoration:none;
  transition:color .25s ease;
}
.fex-news-backbar a:hover{color:var(--fe-blue-600)}
.fex-news-backbar svg{width:13px;height:13px;fill:none;stroke:currentColor;stroke-width:2}
.fex-news-backbar__read{
  margin:0;font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--fe-slate);
}

.fex-news-article{padding:clamp(44px,5.4vw,76px) 0 clamp(20px,3vw,36px)}

/* Prose measure. Every element is restated because the Webflow
   sheet styles bare p/h2/h3/ul/li/blockquote/a globally. */
.fex-news-prose{
  max-width:720px;margin:0 auto;
  font-family:var(--lux-font);
  font-size:16px;line-height:1.75;
  color:var(--fe-ink);
}
.fex-news-prose > :first-child{margin-top:0}
.fex-news-prose p{
  margin:0 0 1.35em;
  font-family:var(--lux-font);font-weight:400;font-size:16px;line-height:1.75;
  color:var(--fe-ink);
  text-wrap:pretty;
}
.fex-news-prose p.fex-news-prose__lead{
  font-size:clamp(17px,1.6vw,20px);
  line-height:1.6;font-weight:300;
  color:var(--fe-navy);
  margin-bottom:1.5em;
}
.fex-news-prose h2{
  margin:2em 0 .7em;
  font-family:var(--lux-font);font-weight:300;
  font-size:clamp(22px,2.4vw,30px);line-height:1.2;
  letter-spacing:.01em;
  color:var(--fe-navy);
}
.fex-news-prose h3{
  margin:1.9em 0 .6em;
  font-family:var(--lux-font);font-weight:500;
  font-size:clamp(17px,1.6vw,20px);line-height:1.3;
  color:var(--fe-navy);
}
.fex-news-prose h4{
  margin:1.7em 0 .5em;
  font-family:var(--lux-font);font-weight:600;font-size:12px;
  letter-spacing:var(--lux-track-eyebrow);text-transform:uppercase;
  color:var(--fe-blue-600);
}
.fex-news-prose ul,
.fex-news-prose ol{margin:0 0 1.35em;padding-left:1.35em}
.fex-news-prose li{
  margin:0 0 .5em;
  font-family:var(--lux-font);font-size:16px;line-height:1.75;color:var(--fe-ink);
}
.fex-news-prose ul{list-style:none;padding-left:0}
.fex-news-prose ul > li{position:relative;padding-left:22px}
.fex-news-prose ul > li::before{
  content:"";position:absolute;left:0;top:.72em;
  width:7px;height:1px;background:var(--fe-blue);
}
.fex-news-prose a{
  color:var(--fe-blue-600);
  text-decoration:none;
  border-bottom:1px solid rgba(23,112,154,.4);
  transition:border-color .25s ease,color .25s ease;
}
.fex-news-prose a:hover{color:var(--fe-navy);border-bottom-color:var(--fe-navy)}
.fex-news-prose blockquote{
  margin:1.8em 0;padding:4px 0 4px 24px;
  border-left:2px solid var(--fe-blue);
  font-family:var(--lux-font);font-weight:300;font-style:normal;
  font-size:clamp(18px,1.9vw,23px);line-height:1.45;
  color:var(--fe-navy);
}
.fex-news-prose blockquote p{
  margin:0;font-size:inherit;line-height:inherit;font-weight:inherit;color:inherit;
}
.fex-news-prose blockquote cite{
  display:block;margin-top:14px;
  font-size:11px;font-style:normal;font-weight:600;
  letter-spacing:var(--lux-track-eyebrow);text-transform:uppercase;
  color:var(--fe-slate);
}
.fex-news-prose img{
  display:block;width:100%;height:auto;
  margin:1.8em 0 .7em;
}
.fex-news-prose figure{margin:1.8em 0}
.fex-news-prose figure img{margin:0}
.fex-news-prose figcaption{
  margin:12px 0 0;
  font-size:12px;line-height:1.6;letter-spacing:.02em;
  color:var(--fe-slate);
}
.fex-news-prose hr{
  height:1px;margin:2.4em 0;
  background:var(--fe-line);border:0;
}
.fex-news-prose strong{font-weight:600;color:var(--fe-navy)}
.fex-news-prose table{
  width:100%;border-collapse:collapse;margin:1.8em 0;font-size:14px;
}
.fex-news-prose th,
.fex-news-prose td{
  padding:11px 14px;text-align:left;
  border-bottom:1px solid var(--fe-line);
}
.fex-news-prose th{
  font-weight:600;font-size:11px;
  letter-spacing:.16em;text-transform:uppercase;color:var(--fe-navy);
}

/* Byline block */
.fex-news-byline{
  max-width:720px;margin:0 auto;
  padding:20px 0 0;
  border-top:1px solid var(--fe-line);
  display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 12px;
}
.fex-news-byline p{margin:0;font-size:13px;color:var(--fe-slate)}
.fex-news-byline strong{color:var(--fe-navy);font-weight:600}

/* Tags */
.fex-news-tags{
  max-width:720px;margin:26px auto 0;
  display:flex;flex-wrap:wrap;gap:8px;
}
.fex-news-tags a{
  display:inline-block;padding:7px 13px;
  border:1px solid var(--fe-line);
  font-family:var(--lux-font);font-size:10.5px;
  letter-spacing:.16em;text-transform:uppercase;
  color:var(--fe-slate);text-decoration:none;
  transition:border-color .25s ease,color .25s ease;
}
.fex-news-tags a:hover{border-color:var(--fe-navy);color:var(--fe-navy)}

/* Centred share row */
.fex-news-share{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:center;
  gap:14px;
  max-width:720px;margin:clamp(36px,4vw,52px) auto 0;
  padding:clamp(26px,3vw,36px) 0 0;
  border-top:1px solid var(--fe-line);
}
.fex-news-share__label{
  margin:0;
  font-family:var(--lux-font);font-weight:600;font-size:10.5px;
  letter-spacing:var(--lux-track-eyebrow);text-transform:uppercase;
  color:var(--fe-slate);
}
.fex-news-share__list{display:flex;align-items:center;gap:8px}
.fex-news-share__list a,
.fex-news-share__list button{
  display:inline-flex;align-items:center;justify-content:center;
  width:38px;height:38px;padding:0;
  background:transparent;
  border:1px solid var(--fe-line);
  border-radius:0;
  color:var(--fe-navy);
  cursor:pointer;
  transition:background .25s ease,border-color .25s ease,color .25s ease;
}
.fex-news-share__list a:hover,
.fex-news-share__list button:hover{background:var(--fe-navy);border-color:var(--fe-navy);color:#fff}
.fex-news-share__list svg{width:16px;height:16px;fill:currentColor}
/* The brand marks are filled paths; the copy-link mark is strokes. A CSS
   fill beats the element's own fill="none" attribute, which would flood
   the stroked icon solid. */
.fex-news-share__list svg[stroke]{fill:none;stroke:currentColor}

/* Prev / next article pair */
.fex-news-seq{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  gap:1px;
  max-width:1180px;margin:clamp(44px,5vw,72px) auto 0;
  background:var(--fe-line);
  border:1px solid var(--fe-line);
}
.fex-news-seq a{
  display:block;padding:clamp(20px,2.4vw,30px);
  background:var(--fe-paper);
  text-decoration:none;
  transition:background .25s ease;
}
.fex-news-seq a:hover{background:var(--fe-canvas)}
.fex-news-seq p{
  margin:0 0 8px;
  font-family:var(--lux-font);font-weight:600;font-size:10.5px;
  letter-spacing:var(--lux-track-eyebrow);text-transform:uppercase;
  color:var(--fe-blue-600);
}
.fex-news-seq span{
  display:block;
  font-family:var(--lux-font);font-weight:400;font-size:16px;line-height:1.4;
  color:var(--fe-navy);
}
.fex-news-seq a:last-child:nth-child(2){text-align:right}

/* "Keep reading" tail */
.fex-news-keep{
  background:var(--fe-canvas);
  border-top:1px solid var(--fe-line);
  padding:clamp(52px,6vw,88px) 0;
}
.fex-news-keep__head{text-align:center;margin:0 0 clamp(30px,3.4vw,44px)}
.fex-news-keep__head h2{
  margin:0;
  font-family:var(--lux-font);font-weight:300;
  font-size:clamp(22px,3vw,36px);line-height:1.15;
  color:var(--fe-navy);
}
.fex-news-keep .fex-news-grid{grid-template-columns:repeat(auto-fill,minmax(220px,1fr))}
@media screen and (min-width:1000px){
  .fex-news-keep .fex-news-grid{grid-template-columns:repeat(4,minmax(0,1fr))}
}
.fex-news-keep .fex-news-card__title{font-size:15px}
.fex-news-keep .fex-news-card__excerpt{font-size:13px;-webkit-line-clamp:2}

/* Preview ribbon — shown when the article page renders a draft
   opened from the admin, so an unpublished piece can never be
   mistaken for live copy. */
.fex-news-previewbar{
  position:sticky;top:0;z-index:60;
  display:flex;flex-wrap:wrap;align-items:center;justify-content:center;
  gap:8px 18px;
  padding:11px 20px;
  background:var(--fe-warning);
  color:#fff;
  font-family:var(--lux-font);font-weight:600;font-size:11px;
  letter-spacing:.18em;text-transform:uppercase;
  text-align:center;
}
.fex-news-previewbar a{color:#fff;text-decoration:underline}

/* Missing-article state */
.fex-news-404{padding:clamp(70px,9vw,130px) 0;text-align:center}
.fex-news-404 h1{
  margin:0 0 14px;
  font-family:var(--lux-font);font-weight:300;font-size:clamp(26px,3.4vw,40px);
  color:var(--fe-navy);
}
.fex-news-404 p{margin:0 auto 26px;max-width:520px;color:var(--fe-slate)}

/* ============================================================
   4 · ADMIN
   Loaded without the Webflow export sheet, so this section can
   rely on normalize + luxury tokens alone.
   ============================================================ */
.fex-adm{
  margin:0;
  min-height:100vh;
  background:var(--fe-canvas);
  font-family:var(--lux-font);
  color:var(--fe-ink);
  font-size:14px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
.fex-adm *,
.fex-adm *::before,
.fex-adm *::after{box-sizing:border-box}

/* ---- top bar ---- */
.fex-adm-bar{
  position:sticky;top:0;z-index:50;
  display:flex;align-items:center;gap:18px;
  padding:0 clamp(16px,2.4vw,28px);
  height:62px;
  background:var(--fe-navy-900);
  border-bottom:1px solid rgba(255,255,255,.1);
}
.fex-adm-bar__logo{display:flex;align-items:center;flex:none}
.fex-adm-bar__logo img{display:block;height:20px;width:auto}
.fex-adm-bar__title{
  margin:0;padding-left:18px;
  border-left:1px solid rgba(255,255,255,.22);
  font-weight:400;font-size:13px;
  letter-spacing:.22em;text-transform:uppercase;
  color:#fff;
}
.fex-adm-bar__spacer{flex:1 1 auto}
.fex-adm-bar__env{
  padding:5px 11px;
  border:1px solid rgba(255,255,255,.3);
  font-size:10px;font-weight:600;
  letter-spacing:.2em;text-transform:uppercase;
  color:var(--fe-blue-300);
}
.fex-adm-bar a{
  font-size:11px;font-weight:600;
  letter-spacing:.18em;text-transform:uppercase;
  color:rgba(255,255,255,.8);text-decoration:none;
  transition:color .25s ease;
}
.fex-adm-bar a:hover{color:#fff}

/* ---- shell ---- */
.fex-adm-shell{
  display:grid;
  grid-template-columns:236px minmax(0,1fr);
  align-items:start;
  gap:0;
  min-height:calc(100vh - 62px);
}
@media screen and (max-width:860px){
  .fex-adm-shell{grid-template-columns:minmax(0,1fr)}
}

.fex-adm-rail{
  align-self:stretch;
  padding:26px 20px 40px;
  background:var(--fe-paper);
  border-right:1px solid var(--fe-line);
}
@media screen and (max-width:860px){
  .fex-adm-rail{border-right:0;border-bottom:1px solid var(--fe-line);padding-bottom:22px}
}
.fex-adm-rail__label{
  margin:0 0 12px;
  font-weight:600;font-size:10px;
  letter-spacing:var(--lux-track-eyebrow);text-transform:uppercase;
  color:var(--fe-slate);
}
.fex-adm-rail__label + .fex-adm-rail__label{margin-top:30px}
.fex-adm-rail nav{display:flex;flex-direction:column;gap:1px;margin-bottom:8px}
.fex-adm-rail button{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  width:100%;padding:10px 12px;
  background:transparent;border:0;border-left:2px solid transparent;
  font-family:var(--lux-font);font-size:12.5px;
  letter-spacing:.06em;
  color:var(--fe-ink);
  text-align:left;cursor:pointer;
  transition:background .2s ease,color .2s ease;
}
.fex-adm-rail button:hover{background:var(--fe-canvas)}
.fex-adm-rail button[aria-pressed="true"]{
  background:var(--fe-canvas);
  border-left-color:var(--fe-blue);
  color:var(--fe-navy);font-weight:600;
}
.fex-adm-rail button span{
  font-size:11px;color:var(--fe-slate);font-variant-numeric:tabular-nums;
}
.fex-adm-rail__ops{display:flex;flex-direction:column;gap:8px;margin-top:12px}

/* ---- main ---- */
.fex-adm-main{padding:26px clamp(16px,2.4vw,32px) 64px;min-width:0}

.fex-adm-head{
  display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;
  gap:16px;margin:0 0 22px;
}
.fex-adm-head h1{
  margin:0;
  font-family:var(--lux-font);font-weight:300;
  font-size:clamp(22px,2.6vw,30px);line-height:1.15;
  color:var(--fe-navy);
}
.fex-adm-head p{margin:6px 0 0;font-size:13px;color:var(--fe-slate)}

/* ---- buttons ---- */
.fex-adm-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  padding:12px 22px;
  background:transparent;
  border:1px solid var(--fe-navy);
  border-radius:0;
  font-family:var(--lux-font);font-weight:600;font-size:11px;
  letter-spacing:.2em;text-transform:uppercase;
  color:var(--fe-navy);
  text-decoration:none;cursor:pointer;white-space:nowrap;
  transition:background .25s ease,color .25s ease,border-color .25s ease,opacity .2s ease;
}
.fex-adm-btn:hover{background:var(--fe-navy);color:#fff}
.fex-adm-btn svg{width:14px;height:14px;flex:none;fill:none;stroke:currentColor;stroke-width:2}
.fex-adm-btn--solid{background:var(--fe-navy);color:#fff}
.fex-adm-btn--solid:hover{background:var(--fe-navy-900);border-color:var(--fe-navy-900)}
.fex-adm-btn--quiet{border-color:var(--fe-line);color:var(--fe-slate)}
.fex-adm-btn--quiet:hover{background:var(--fe-canvas);border-color:var(--fe-navy);color:var(--fe-navy)}
.fex-adm-btn--danger{border-color:var(--fe-error);color:var(--fe-error)}
.fex-adm-btn--danger:hover{background:var(--fe-error);border-color:var(--fe-error);color:#fff}
.fex-adm-btn--sm{padding:8px 14px;font-size:10px;letter-spacing:.16em}
.fex-adm-btn--block{width:100%}
/* Icon-only: the homepage-feature star in a table row. Square, so adding it to
   an action row that already scrolls sideways costs ~34px rather than a full
   "Unfeature" pill. .is-on fills the star to carry the state. */
.fex-adm-btn--star{padding:8px;gap:0}
.fex-adm-btn--star svg{width:15px;height:15px;stroke-width:1.6}
.fex-adm-btn--star.is-on{border-color:var(--fe-navy);color:var(--fe-navy)}
.fex-adm-btn--star.is-on svg{fill:currentColor}
.fex-adm-btn--star:hover svg{fill:currentColor}
.fex-adm-btn:disabled{opacity:.4;cursor:not-allowed}
.fex-adm-btn:disabled:hover{background:transparent;color:var(--fe-navy)}

/* ---- toolbar ---- */
.fex-adm-tools{
  display:flex;flex-wrap:wrap;align-items:center;gap:10px;
  margin:0 0 18px;
}
.fex-adm-search{position:relative;flex:1 1 260px;min-width:0}
.fex-adm-search svg{
  position:absolute;left:12px;top:50%;transform:translateY(-50%);
  width:15px;height:15px;fill:none;stroke:var(--fe-slate);stroke-width:2;
  pointer-events:none;
}
.fex-adm-search input{padding-left:36px}

.fex-adm-input,
.fex-adm-select,
.fex-adm-textarea{
  display:block;width:100%;
  padding:11px 13px;
  font-family:var(--lux-font);font-size:13.5px;line-height:1.5;
  color:var(--fe-ink);
  background:var(--fe-paper);
  border:1px solid var(--fe-line);
  border-radius:0;
  transition:border-color .2s ease,box-shadow .2s ease;
}
.fex-adm-input:focus,
.fex-adm-select:focus,
.fex-adm-textarea:focus{
  outline:none;border-color:var(--fe-navy);
  box-shadow:0 0 0 3px rgba(41,159,207,.14);
}
.fex-adm-input::placeholder,
.fex-adm-textarea::placeholder{color:#9AA7B2}
.fex-adm-textarea{resize:vertical;min-height:88px}
.fex-adm-select{
  appearance:none;-webkit-appearance:none;
  padding-right:34px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23003A70' stroke-width='2' d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 11px center;background-size:14px 14px;
  cursor:pointer;
}
.fex-adm-input--mono{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:12.5px}

/* ---- list table ---- */
.fex-adm-panel{
  background:var(--fe-paper);
  border:1px solid var(--fe-line);
}
.fex-adm-tablewrap{overflow-x:auto}
/* Eight columns and five row actions. At 820px the action cell wrapped the
   buttons onto three lines and every row grew to ~90px, which turned a
   ten-article list into a page of scrolling. The wrapper scrolls
   horizontally instead. */
.fex-adm-table{width:100%;border-collapse:collapse;min-width:1180px}
.fex-adm-table th{
  padding:13px 16px;text-align:left;
  background:var(--fe-canvas);
  border-bottom:1px solid var(--fe-line);
  font-weight:600;font-size:10px;
  letter-spacing:.18em;text-transform:uppercase;
  color:var(--fe-slate);white-space:nowrap;
}
.fex-adm-table th button{
  background:none;border:0;padding:0;cursor:pointer;
  font:inherit;letter-spacing:inherit;text-transform:inherit;color:inherit;
  display:inline-flex;align-items:center;gap:6px;
}
.fex-adm-table th button:hover{color:var(--fe-navy)}
.fex-adm-table td{
  padding:14px 16px;
  border-bottom:1px solid var(--fe-line);
  font-size:13px;vertical-align:top;
}
.fex-adm-table tr:last-child td{border-bottom:0}
.fex-adm-table tbody tr:hover{background:#FAFCFD}
.fex-adm-table__title{
  display:block;
  font-size:14.5px;font-weight:500;color:var(--fe-navy);
  text-decoration:none;
  cursor:pointer;background:none;border:0;padding:0;text-align:left;
  font-family:var(--lux-font);
}
.fex-adm-table__title:hover{color:var(--fe-blue-600)}
.fex-adm-table__slug{
  display:block;margin-top:4px;
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-size:11px;color:var(--fe-slate);
}
.fex-adm-table__acts{display:flex;flex-wrap:nowrap;gap:5px;justify-content:flex-end}
.fex-adm-table td:last-child{text-align:right;white-space:nowrap;width:1%}
.fex-adm-table__acts .fex-adm-btn{padding:7px 10px;letter-spacing:.1em}
.fex-adm-table__thumb{
  width:64px;height:44px;object-fit:cover;display:block;
  background:var(--fe-surface-blue);
}

.fex-adm-badge{
  display:inline-block;padding:4px 10px;
  border:1px solid;
  font-size:9.5px;font-weight:600;
  letter-spacing:.16em;text-transform:uppercase;white-space:nowrap;
}
.fex-adm-badge--published{border-color:var(--fe-success);color:var(--fe-success);background:rgba(46,125,79,.07)}
.fex-adm-badge--draft{border-color:var(--fe-slate);color:var(--fe-slate);background:rgba(91,107,120,.07)}
.fex-adm-badge--scheduled{border-color:var(--fe-warning);color:var(--fe-warning);background:rgba(138,100,32,.08)}
.fex-adm-badge--archived{border-color:var(--fe-line);color:#8899A5;background:var(--fe-canvas)}
.fex-adm-badge--featured{border-color:var(--fe-blue);color:var(--fe-blue-600);background:rgba(41,159,207,.08)}
.fex-adm-badge--type{border-color:var(--fe-line);color:var(--fe-navy);background:var(--fe-canvas)}

.fex-adm-blank{
  padding:clamp(44px,6vw,80px) 24px;text-align:center;
}
.fex-adm-blank h2{
  margin:0 0 10px;
  font-family:var(--lux-font);font-weight:300;font-size:22px;color:var(--fe-navy);
}
.fex-adm-blank p{margin:0 auto 22px;max-width:420px;font-size:13.5px;color:var(--fe-slate)}

/* ---- editor ---- */
.fex-adm-editor{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:22px;align-items:start}
@media screen and (max-width:1080px){
  .fex-adm-editor{grid-template-columns:minmax(0,1fr)}
}
.fex-adm-card{
  background:var(--fe-paper);
  border:1px solid var(--fe-line);
  padding:clamp(18px,2vw,26px);
  margin:0 0 18px;
}
.fex-adm-card > h2{
  margin:0 0 18px;padding:0 0 14px;
  border-bottom:1px solid var(--fe-line);
  font-family:var(--lux-font);font-weight:600;font-size:11px;
  letter-spacing:var(--lux-track-eyebrow);text-transform:uppercase;
  color:var(--fe-navy);
}
.fex-adm-side{position:sticky;top:80px}
@media screen and (max-width:1080px){.fex-adm-side{position:static}}

.fex-adm-fld{margin:0 0 16px}
.fex-adm-fld:last-child{margin-bottom:0}
.fex-adm-fld > label,
.fex-adm-fld > .fex-adm-fld__label{
  display:flex;align-items:baseline;justify-content:space-between;gap:10px;
  margin:0 0 7px;
  font-weight:600;font-size:10.5px;
  letter-spacing:.16em;text-transform:uppercase;
  color:var(--fe-navy);
}
.fex-adm-fld__opt{font-weight:400;letter-spacing:.06em;text-transform:none;color:var(--fe-slate);font-size:11px}
.fex-adm-fld__hint{margin:6px 0 0;font-size:11.5px;line-height:1.5;color:var(--fe-slate)}
.fex-adm-fld__err{margin:6px 0 0;font-size:11.5px;color:var(--fe-error)}
.fex-adm-fld--bad .fex-adm-input,
.fex-adm-fld--bad .fex-adm-select,
.fex-adm-fld--bad .fex-adm-textarea,
.fex-adm-fld--bad .fex-adm-rte__body{border-color:var(--fe-error)}
.fex-adm-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:16px}
.fex-adm-row--tight{gap:12px}

.fex-adm-count{font-variant-numeric:tabular-nums;font-size:11px;color:var(--fe-slate);letter-spacing:.04em}
.fex-adm-count--over{color:var(--fe-error)}

/* switch */
.fex-adm-switch{
  display:flex;align-items:center;gap:12px;cursor:pointer;
  font-size:13px;color:var(--fe-ink);
}
.fex-adm-switch input{position:absolute;opacity:0;width:1px;height:1px}
.fex-adm-switch__ui{
  position:relative;flex:none;
  width:42px;height:22px;
  background:var(--fe-surface-blue);
  border:1px solid var(--fe-line);
  transition:background .22s ease,border-color .22s ease;
}
.fex-adm-switch__ui::after{
  content:"";position:absolute;top:2px;left:2px;
  width:16px;height:16px;background:#fff;
  transition:transform .22s ease;
}
.fex-adm-switch input:checked + .fex-adm-switch__ui{background:var(--fe-navy);border-color:var(--fe-navy)}
.fex-adm-switch input:checked + .fex-adm-switch__ui::after{transform:translateX(20px)}
.fex-adm-switch input:focus-visible + .fex-adm-switch__ui{outline:2px solid var(--fe-blue);outline-offset:2px}

/* tag chips */
.fex-adm-chips{display:flex;flex-wrap:wrap;gap:7px;margin:0 0 9px}
.fex-adm-chip{
  display:inline-flex;align-items:center;gap:8px;
  padding:6px 8px 6px 11px;
  background:var(--fe-canvas);
  border:1px solid var(--fe-line);
  font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--fe-navy);
}
.fex-adm-chip button{
  display:inline-flex;align-items:center;justify-content:center;
  width:15px;height:15px;padding:0;
  background:none;border:0;color:var(--fe-slate);cursor:pointer;font-size:14px;line-height:1;
}
.fex-adm-chip button:hover{color:var(--fe-error)}

/* image picker */
.fex-adm-imgpick{display:grid;grid-template-columns:96px minmax(0,1fr);gap:14px;align-items:start}
.fex-adm-imgpick__prev{
  width:96px;height:66px;
  object-fit:cover;display:block;
  background:var(--fe-canvas);
  border:1px solid var(--fe-line);
}
.fex-adm-imgpick__prev--empty{
  display:flex;align-items:center;justify-content:center;
  font-size:9px;letter-spacing:.14em;text-transform:uppercase;color:var(--fe-slate);
  text-align:center;padding:6px;
}
.fex-adm-imglib{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(84px,1fr));
  gap:8px;
  max-height:260px;overflow-y:auto;
  margin-top:10px;padding:10px;
  background:var(--fe-canvas);
  border:1px solid var(--fe-line);
}
.fex-adm-imglib button{
  padding:0;background:none;border:1px solid transparent;cursor:pointer;display:block;
}
.fex-adm-imglib button:hover,
.fex-adm-imglib button[aria-pressed="true"]{border-color:var(--fe-blue)}
.fex-adm-imglib img{display:block;width:100%;aspect-ratio:3/2;object-fit:cover}

/* ---- rich text editor ---- */
.fex-adm-rte{border:1px solid var(--fe-line);background:var(--fe-paper)}
.fex-adm-rte__bar{
  display:flex;flex-wrap:wrap;align-items:center;gap:2px;
  padding:7px 8px;
  background:var(--fe-canvas);
  border-bottom:1px solid var(--fe-line);
  position:sticky;top:62px;z-index:5;
}
.fex-adm-rte__bar button{
  display:inline-flex;align-items:center;justify-content:center;
  min-width:32px;height:30px;padding:0 8px;
  background:transparent;border:1px solid transparent;border-radius:0;
  font-family:var(--lux-font);font-size:11.5px;font-weight:600;
  letter-spacing:.06em;
  color:var(--fe-navy);cursor:pointer;
  transition:background .18s ease,border-color .18s ease;
}
.fex-adm-rte__bar button:hover{background:#fff;border-color:var(--fe-line)}
.fex-adm-rte__bar button[aria-pressed="true"]{background:var(--fe-navy);border-color:var(--fe-navy);color:#fff}
.fex-adm-rte__bar svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.9}
.fex-adm-rte__sep{width:1px;height:20px;background:var(--fe-line);margin:0 6px}
.fex-adm-rte__body{
  min-height:420px;
  padding:26px clamp(18px,2.4vw,34px);
  overflow-wrap:break-word;
}
.fex-adm-rte__body:focus{outline:none;box-shadow:inset 0 0 0 2px rgba(41,159,207,.2)}
.fex-adm-rte__body[data-empty="true"]::before{
  content:attr(data-placeholder);
  color:#9AA7B2;pointer-events:none;
}
/* WYSIWYG: the editing surface uses the live article's prose rules,
   so what is typed is what publishes. */
.fex-adm-rte__body{max-width:none}
.fex-adm-rte__foot{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px;
  padding:9px 12px;
  background:var(--fe-canvas);
  border-top:1px solid var(--fe-line);
  font-size:11px;color:var(--fe-slate);letter-spacing:.06em;
}
.fex-adm-rte__foot button{
  background:none;border:0;padding:0;cursor:pointer;
  font:inherit;letter-spacing:inherit;color:var(--fe-blue-600);
  text-decoration:underline;
}

/* ---- validation summary ---- */
.fex-adm-checklist{margin:0;padding:0;list-style:none}
.fex-adm-checklist li{
  display:flex;align-items:flex-start;gap:9px;
  padding:7px 0;font-size:12.5px;line-height:1.5;
  border-bottom:1px solid var(--fe-line);
}
.fex-adm-checklist li:last-child{border-bottom:0}
.fex-adm-checklist svg{width:14px;height:14px;flex:none;margin-top:3px;fill:none;stroke-width:2.4}
.fex-adm-checklist li[data-ok="true"]{color:var(--fe-slate)}
.fex-adm-checklist li[data-ok="true"] svg{stroke:var(--fe-success)}
.fex-adm-checklist li[data-ok="false"]{color:var(--fe-ink)}
.fex-adm-checklist li[data-ok="false"] svg{stroke:var(--fe-warning)}

/* ---- notices ---- */
.fex-adm-note{
  display:flex;align-items:flex-start;gap:12px;
  padding:14px 16px;margin:0 0 18px;
  border:1px solid var(--fe-line);
  border-left:2px solid var(--fe-blue);
  background:var(--fe-paper);
  font-size:12.5px;line-height:1.6;
}
.fex-adm-note svg{width:16px;height:16px;flex:none;margin-top:2px;fill:none;stroke:var(--fe-blue);stroke-width:2}
.fex-adm-note p{margin:0}
.fex-adm-note p + p{margin-top:6px}
.fex-adm-note strong{color:var(--fe-navy);font-weight:600}
.fex-adm-note--warn{border-left-color:var(--fe-warning)}
.fex-adm-note--warn svg{stroke:var(--fe-warning)}

/* ---- toasts ---- */
.fex-adm-toasts{
  position:fixed;right:18px;bottom:18px;z-index:200;
  display:flex;flex-direction:column;gap:9px;
  max-width:min(360px,calc(100vw - 36px));
}
.fex-adm-toast{
  display:flex;align-items:flex-start;gap:11px;
  padding:13px 15px;
  background:var(--fe-navy-900);
  color:#fff;
  font-size:12.5px;line-height:1.5;
  box-shadow:0 12px 34px rgba(0,25,50,.3);
  animation:fex-adm-toast-in .28s cubic-bezier(.2,.7,.3,1);
}
.fex-adm-toast svg{width:15px;height:15px;flex:none;margin-top:2px;fill:none;stroke:currentColor;stroke-width:2.4}
.fex-adm-toast--ok svg{stroke:#7FD6A2}
.fex-adm-toast--err{background:var(--fe-error)}
@keyframes fex-adm-toast-in{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){
  .fex-adm-toast{animation:none}
}

/* ---- modal ---- */
.fex-adm-modal{
  position:fixed;inset:0;z-index:180;
  display:flex;align-items:center;justify-content:center;
  padding:20px;
  background:rgba(0,25,50,.62);
}
.fex-adm-modal[hidden]{display:none}
.fex-adm-modal__box{
  width:100%;max-width:520px;max-height:88vh;overflow-y:auto;
  background:var(--fe-paper);
  border:1px solid var(--fe-line);
  padding:clamp(20px,2.6vw,32px);
}
.fex-adm-modal__box--wide{max-width:820px}
.fex-adm-modal__box h2{
  margin:0 0 12px;
  font-family:var(--lux-font);font-weight:300;font-size:22px;color:var(--fe-navy);
}
.fex-adm-modal__box p{margin:0 0 18px;font-size:13.5px;color:var(--fe-slate)}
.fex-adm-modal__acts{
  display:flex;flex-wrap:wrap;gap:10px;justify-content:flex-end;
  margin-top:22px;padding-top:18px;
  border-top:1px solid var(--fe-line);
}
.fex-adm-modal textarea{
  min-height:280px;
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-size:12px;line-height:1.55;
}

/* ---- sticky editor action bar ---- */
.fex-adm-actionbar{
  position:sticky;bottom:0;z-index:40;
  display:flex;flex-wrap:wrap;align-items:center;gap:10px;
  margin:20px 0 0;padding:14px clamp(14px,2vw,20px);
  background:var(--fe-paper);
  border:1px solid var(--fe-line);
  box-shadow:0 -8px 24px rgba(0,25,50,.06);
}
.fex-adm-actionbar__state{
  margin:0;flex:1 1 auto;min-width:140px;
  font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--fe-slate);
}
.fex-adm-actionbar__state[data-dirty="true"]{color:var(--fe-warning);font-weight:600}

.fex-adm-sr{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}

:where(.fex-adm) :focus-visible{outline:2px solid var(--fe-blue);outline-offset:2px}

/* ============================================================
   CTA BUTTON IN BODY COPY
   ------------------------------------------------------------
   The design library's standard site CTA (.new__cta), used inside an
   article body. Two things have to be restated here rather than
   inherited:

   1. .fex-news-prose a gives every link a blue underline border —
      correct for prose, wrong for a button, so it is cleared.
   2. luxury.css styles .new__cta's colour, border and type but relies
      on the Webflow export for display/text-decoration. The admin
      deliberately does not load that stylesheet (see the comment in
      news/admin.html), so a button authored there would render as
      inline text. Restating the box here makes the component
      self-sufficient on both pages.
   ============================================================ */
.fex-news-prose__cta{margin:2em 0}
.fex-news-prose__cta--center{text-align:center}
.fex-news-prose .new__cta{
  display:inline-block;
  padding:17px 36px;
  font-family:var(--lux-font);
  font-size:12px;font-weight:600;
  letter-spacing:.22em;text-transform:uppercase;
  text-align:center;text-decoration:none;
  background-color:transparent;
  border:1px solid var(--fe-navy);
  border-bottom:1px solid var(--fe-navy);  /* beats .fex-news-prose a */
  color:var(--fe-navy);
  transition:background-color .3s ease,color .3s ease,border-color .3s ease;
}
.fex-news-prose .new__cta:hover{
  background-color:var(--fe-navy);
  border-color:var(--fe-navy);
  color:#fff;
}
.fex-news-prose .new__cta.dark-blue{
  background-color:var(--fe-navy);
  border-color:var(--fe-navy);
  color:#fff;
}
.fex-news-prose .new__cta.dark-blue:hover{
  background-color:var(--fe-navy-900);
  border-color:var(--fe-navy-900);
  color:#fff;
}
/* Narrow columns: a letterspaced uppercase label plus 72px of padding
   overflows a phone otherwise. */
@media screen and (max-width:520px){
  .fex-news-prose .new__cta{display:block;padding:16px 20px;letter-spacing:.16em}
}

/* ============================================================
   VIDEO EMBED
   ------------------------------------------------------------
   16:9 frame that keeps its ratio while the column resizes.
   aspect-ratio does the work; the padding-top fallback below it is
   for the older Safari this site still sees in its analytics.
   ============================================================ */
.fex-news-embed{margin:2em 0}
.fex-news-embed__frame{
  position:relative;
  width:100%;
  aspect-ratio:16/9;
  background:var(--fe-navy);
  overflow:hidden;
}
@supports not (aspect-ratio:16/9){
  .fex-news-embed__frame{height:0;padding-top:56.25%}
}
.fex-news-embed__frame iframe{
  position:absolute;inset:0;
  width:100%;height:100%;
  border:0;display:block;
}
.fex-news-embed figcaption{
  margin:12px 0 0;
  font-size:12px;line-height:1.6;letter-spacing:.02em;
  color:var(--fe-slate);
}

/* ============================================================
   TABLE OF CONTENTS
   ------------------------------------------------------------
   Built by news-article.js from the body's H2s, and only when there
   are enough of them to be worth it. Sits in the prose measure so it
   reads as part of the article rather than as page furniture.
   ============================================================ */
.fex-news-toc{
  max-width:720px;margin:0 auto 2.4em;
  padding:20px 24px;
  background:var(--fe-canvas);
  border-left:2px solid var(--fe-blue);
}
.fex-news-toc__label{
  margin:0 0 12px;
  font-size:11px;font-weight:600;
  letter-spacing:var(--lux-track-eyebrow);text-transform:uppercase;
  color:var(--fe-slate);
}
.fex-news-toc ol{margin:0;padding:0;list-style:none;counter-reset:fextoc}
.fex-news-toc li{margin:0 0 8px;padding:0;counter-increment:fextoc}
.fex-news-toc li:last-child{margin-bottom:0}
.fex-news-toc a{
  display:inline-flex;gap:10px;
  font-size:14px;line-height:1.5;
  color:var(--fe-navy);
  text-decoration:none;border-bottom:0;
}
.fex-news-toc a::before{
  content:counter(fextoc) ".";
  flex:none;
  font-variant-numeric:tabular-nums;
  color:var(--fe-blue);
}
.fex-news-toc a:hover{color:var(--fe-blue-600);border-bottom:0}
/* Anchored headings must not land under the sticky back bar. */
.fex-news-prose h2[id]{scroll-margin-top:96px}

/* ============================================================
   ADMIN — UPLOAD, MEDIA QUEUE, REVISIONS
   ============================================================ */

/* ---- dropzone ---- */
.fex-adm-drop{
  margin-top:12px;padding:18px 16px;
  background:var(--fe-canvas);
  border:1px dashed var(--fe-line);
  text-align:center;
  transition:border-color .2s ease,background-color .2s ease;
}
.fex-adm-drop[data-over]{
  border-color:var(--fe-blue);
  background:var(--fe-paper);
}
.fex-adm-drop[data-busy]{opacity:.6;pointer-events:none}
.fex-adm-drop__icon svg{
  width:20px;height:20px;
  fill:none;stroke:var(--fe-blue);stroke-width:1.8;
  stroke-linecap:round;stroke-linejoin:round;
}
.fex-adm-drop__main{
  margin:8px 0 0;
  font-size:12.5px;line-height:1.5;color:var(--fe-slate);
}
.fex-adm-drop__main button{
  background:none;border:0;padding:0;cursor:pointer;
  font-family:var(--lux-font);font-size:12.5px;font-weight:600;
  color:var(--fe-blue-600);text-decoration:underline;
}
.fex-adm-drop__main button:hover{color:var(--fe-navy)}
.fex-adm-drop__hint{
  margin:8px 0 0;
  font-size:11px;line-height:1.6;color:var(--fe-slate);
}
.fex-adm-drop__hint strong{color:var(--fe-navy);font-weight:600}
.fex-adm-drop__state{margin:8px 0 0;font-size:11.5px;line-height:1.5;color:var(--fe-blue-600)}
.fex-adm-drop__state:empty{display:none}
.fex-adm-drop__state[data-err="true"]{color:var(--fe-error)}

/* Uploads carry a corner flag in the picker so an uncommitted file is
   never mistaken for one that is already on the server. */
.fex-adm-imglib button.is-pending{position:relative;border-color:var(--fe-warning)}
.fex-adm-imglib__flag{
  position:absolute;top:0;left:0;
  padding:2px 5px;
  font-size:8px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;
  background:var(--fe-warning);color:#fff;
}
.fex-adm-imgpick{position:relative}
.fex-adm-imgpick__flag{
  display:block;margin-top:5px;
  font-size:8.5px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;
  color:var(--fe-warning);text-align:center;
}

/* ---- pending media queue (rail) ---- */
.fex-adm-rail__count{
  display:inline-block;margin-left:6px;padding:1px 6px;
  font-size:10px;font-weight:600;letter-spacing:.06em;
  background:var(--fe-warning);color:#fff;
}
.fex-adm-media__note{
  margin:0 0 10px;
  font-size:11px;line-height:1.6;color:var(--fe-slate);
}
.fex-adm-media__note code{font-size:10.5px;color:var(--fe-navy)}
.fex-adm-media{
  list-style:none;margin:0 0 10px;padding:0;
  max-height:280px;overflow-y:auto;
}
.fex-adm-media li{
  display:grid;grid-template-columns:38px minmax(0,1fr) auto;
  gap:8px;align-items:center;
  padding:7px 0;
  border-bottom:1px solid var(--fe-line);
}
.fex-adm-media li:last-child{border-bottom:0}
.fex-adm-media img{
  display:block;width:38px;height:28px;
  object-fit:cover;border:1px solid var(--fe-line);
}
.fex-adm-media__meta{min-width:0}
.fex-adm-media__meta code{
  display:block;
  font-size:10.5px;color:var(--fe-navy);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.fex-adm-media__meta span{
  display:block;margin-top:2px;
  font-size:10px;color:var(--fe-slate);
  font-variant-numeric:tabular-nums;
}
.fex-adm-media__saved{display:inline !important;margin-left:2px;color:#2e7d52}
.fex-adm-media__acts{display:flex;gap:2px}
.fex-adm-media__acts button{
  display:inline-flex;align-items:center;justify-content:center;
  width:24px;height:24px;padding:0;
  background:none;border:1px solid transparent;cursor:pointer;
}
.fex-adm-media__acts button:hover{border-color:var(--fe-line);background:var(--fe-paper)}
.fex-adm-media__acts svg{
  width:13px;height:13px;
  fill:none;stroke:var(--fe-slate);stroke-width:1.9;
  stroke-linecap:round;stroke-linejoin:round;
}
.fex-adm-media__acts button:hover svg{stroke:var(--fe-navy)}
.fex-adm-media__acts [data-media-del]:hover svg{stroke:var(--fe-error)}

/* ---- revision history ---- */
.fex-adm-revs{list-style:none;margin:0 0 10px;padding:0}
.fex-adm-revs li{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:9px 0;
  border-bottom:1px solid var(--fe-line);
}
.fex-adm-revs li:last-child{border-bottom:0}
.fex-adm-revs__meta{min-width:0}
.fex-adm-revs__meta strong{
  display:block;
  font-size:12px;font-weight:600;color:var(--fe-navy);
}
.fex-adm-revs__meta span{
  display:block;margin-top:2px;
  font-size:10.5px;color:var(--fe-slate);
  text-transform:capitalize;
}

/* A live iframe inside the editor would swallow clicks meant for the
   caret, so embeds are inert while authoring and clickable only on the
   real article page. */
.fex-adm-rte__body iframe{pointer-events:none}
.fex-adm-rte__body .fex-news-embed__frame{
  position:relative;aspect-ratio:16/9;background:var(--fe-navy);
}
/* The editor body runs the full column width, so a 16:9 embed there is
   ~675px of black dropped into the middle of the copy you are trying to
   write. Capped to roughly the width it occupies on the article, which
   doubles as an honest preview of the real proportion. */
.fex-adm-rte__body .fex-news-embed{max-width:480px}

/* The video/CTA modals carry an explanatory note; inside a dialog it
   should not keep the 18px bottom margin meant for page flow. */
.fex-adm-modal__box .fex-adm-note{margin:16px 0 0}

/* ============================================================
   THE hidden ATTRIBUTE VS THESE COMPONENTS' OWN display
   ------------------------------------------------------------
   Pre-existing bug, found while adding the table of contents.

   `[hidden]{display:none}` is a user-agent rule, so it carries the
   lowest possible specificity — any author rule that sets `display`
   on the same element beats it, and the element stays on screen with
   the attribute set. news-article.js hides all four of these with
   setAttribute('hidden',''), and all four set their own display, so
   none of them ever actually hid.

   The visible symptom was the worst one: .fex-news-previewbar is the
   amber "Draft preview — not visible on /news" ribbon, and it was
   painting on every published article, telling real readers that live
   press releases were unpublished drafts. The other three showed as
   empty blocks on any article with no byline, no tags, or no
   neighbouring article.

   Two class selectors beat one, so no !important is needed.
   ============================================================ */
.fex-news-previewbar[hidden],
.fex-news-byline[hidden],
.fex-news-tags[hidden],
.fex-news-seq[hidden]{display:none}