/* Kloudfuse News + Events components.
   Layered on kf-design.css, which is not modified. Shares the blog's
   tokens; does not reuse its article components. */

/* =========================================================== resource system
   News + Events. Layered on kf-design.css; shares the blog's tokens but not
   its article components. */

/* ---------------------------------------------------------------- masthead */
.r-mast{padding:76px 0 0}
/* Same 33px fallback the blog mast had -- see kf-blog.css. Canonical
   .page-hero h1 values so news/events match the rest of the site. */
.r-mast h1{font-size:clamp(38px,4.6vw,58px);max-width:19ch;color:var(--kf-ink);
  line-height:1.02;letter-spacing:-.038em}
.r-mast .lead{margin-top:20px;max-width:62ch}

/* chips: same component as the blog's, so the two archives feel like one site */
.r-filters{display:flex;flex-wrap:wrap;gap:9px;margin-top:34px}
.r-chip{display:inline-flex;align-items:center;height:34px;padding:0 15px;
  border:1px solid var(--line);border-radius:999px;background:var(--paper);
  font-size:13.5px;color:var(--fg-2);cursor:pointer;transition:.15s;
  font-family:inherit}
.r-chip:hover{border-color:var(--fg-3);color:var(--fg)}
.r-chip[aria-pressed="true"]{background:var(--kf-ink);border-color:var(--kf-ink);
  color:#fff}

/* meta line, shared by news cards and event cards */
.r-meta{display:flex;flex-wrap:wrap;align-items:center;gap:10px;
  font-family:var(--font-mono);font-size:11.5px;letter-spacing:.06em;
  text-transform:uppercase;color:var(--fg-3)}
.r-meta .r-tag{color:var(--action);font-weight:600}
.r-meta .r-dot{width:3px;height:3px;border-radius:50%;background:var(--line);
  flex:none}
.r-src{font-family:var(--font-mono);font-size:11.5px;letter-spacing:.06em;
  text-transform:uppercase;color:var(--fg-3)}

/* artwork frame. News artwork on kloudfuse.com is mixed-ratio -- some square
   title cards, some wide banners -- so this contains rather than crops, on the
   ink ground, exactly as the blog covers do. Nothing is ever cut. */
.r-art{position:relative;overflow:hidden;border-radius:var(--r-card);
  background:var(--kf-ink);border:1px solid var(--line);display:block}
.r-art img{width:100%;height:100%;object-fit:contain;display:block}

/* --------------------------------------------------------- featured, split */
.r-feat{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.9fr);
  gap:clamp(28px,4vw,56px);align-items:center;margin-top:14px}
.r-feat .r-art{aspect-ratio:16/10}
.r-feat h2{margin:14px 0 0;font-size:clamp(26px,2.5vw,36px);line-height:1.12;
  letter-spacing:-.032em;max-width:20ch}
.r-feat h2 a{color:inherit}
.r-feat h2 a:hover{color:var(--link)}
.r-feat .r-deck{margin-top:16px;font-size:16.5px;line-height:1.62;
  color:var(--fg-2);max-width:52ch}
.r-more-link{display:inline-flex;align-items:center;gap:8px;margin-top:20px;
  font-weight:600;font-size:14.5px;color:var(--link)}
.r-more-link:hover{gap:12px}

/* ------------------------------------------------------- featured, two-up
   Two pinned items, equal weight: same column width, same art frame, same
   type scale. Nothing distinguishes one from the other, because nothing is
   meant to -- both are the lead. Same shape as the blog's .b-lead. The single
   .r-feat rules above are unused once this ships. */
.r-lead{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:56px;align-items:start;margin-top:16px}
.r-lead-card{min-width:0;display:block}
.r-lead-card .r-art{aspect-ratio:16/10;margin-bottom:22px}
.r-lead-card .r-art img{transition:transform .4s ease}
.r-lead-card .r-art:hover img{transform:scale(1.02)}
.r-lead-card h2{margin:13px 0 0;font-size:clamp(21px,1.9vw,26px);line-height:1.2;
  letter-spacing:-.026em;max-width:24ch}
.r-lead-card h2 a{color:inherit}
.r-lead-card h2 a:hover{color:var(--link)}
.r-lead-card .r-deck{margin-top:13px;font-size:15.5px;line-height:1.62;
  color:var(--fg-2);max-width:48ch}
@media(max-width:900px){.r-lead{grid-template-columns:minmax(0,1fr);gap:44px}}

/* ------------------------------------------------------------- 2-up archive
   News gets a 2-column grid, not the blog's 3-up: headlines here are long and
   a third column shrinks them to nothing. */
.r-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:28px;
  margin-top:34px}
.r-card{display:grid;grid-template-columns:170px minmax(0,1fr);gap:20px;
  align-items:start;padding-bottom:26px;border-bottom:1px solid var(--line-soft)}
.r-card .r-art{aspect-ratio:1/1}
.r-card h3{margin:10px 0 0;font-size:17.5px;line-height:1.32;
  letter-spacing:-.018em}
.r-card h3 a{color:inherit}
.r-card h3 a:hover{color:var(--link)}
.r-card .r-deck{margin:9px 0 0;font-size:14px;line-height:1.6;color:var(--fg-2)}
.r-card .r-go{margin-top:11px;font-size:13.5px;font-weight:600;color:var(--link);
  display:inline-flex;align-items:center;gap:7px}
.r-card .r-go:hover{gap:11px}
/* a destination on someone else's site says so */
.r-ext::after{content:"\2197";font-size:12px;opacity:.8}

.r-head{display:flex;flex-wrap:wrap;align-items:baseline;gap:16px;
  justify-content:space-between}
.r-count{margin:0;font-family:var(--font-mono);font-size:11.5px;
  letter-spacing:.08em;text-transform:uppercase;color:var(--fg-3)}
.r-more{display:flex;justify-content:center;margin-top:44px}
.r-more button{height:46px;padding:0 26px;border:1px solid var(--line);
  border-radius:var(--r-btn,8px);background:var(--paper);font:inherit;
  font-weight:600;font-size:14.5px;color:var(--fg);cursor:pointer}
.r-more button:hover{border-color:var(--fg-3)}
.r-empty{margin-top:30px;color:var(--fg-3);font-size:15px}
/* A class that sets `display` beats the UA stylesheet's `[hidden]{display:none}`
   -- (0,1,0) against (0,0,0) -- so `el.hidden = true` marks these elements
   hidden for assistive tech while leaving them fully rendered. That made the
   filters decorative: the counter said "6 of 6" while all cards stayed on
   screen. kf-design.css already carries `.panel[hidden]` and `.case[hidden]`
   guards for exactly this trap; these are the blog/news equivalents.
   Any future component that sets display AND gets toggled by .hidden needs a
   line here too. */
.r-card[hidden],.r-more[hidden],.r-feat[hidden],
.r-lead-card[hidden]{display:none}
.e-card[hidden]{display:none}

@media (max-width:1000px){
  .r-feat{grid-template-columns:minmax(0,1fr)}
  .r-grid{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:560px){
  .r-card{grid-template-columns:minmax(0,1fr);gap:14px}
  .r-card .r-art{max-width:220px}
}

/* ============================================================ news detail
   Same two-column opening as the article template -- the site should feel like
   one thing -- but no contents rail: a press release is read straight through. */
.n-head{padding-top:64px}
.n-open{display:grid;grid-template-columns:minmax(0,58fr) minmax(0,38fr);
  gap:clamp(28px,4vw,64px);align-items:center;margin-top:4px}
.n-crumbs{font-family:var(--font-mono);font-size:11.5px;letter-spacing:.08em;
  text-transform:uppercase;color:var(--fg-3)}
.n-crumbs a{color:var(--fg-3)}
.n-crumbs a:hover{color:var(--link)}
.n-head h1{margin-top:20px;font-size:clamp(28px,3.2vw,44px);line-height:1.08;
  letter-spacing:-.034em}
.n-deck{margin-top:20px;font-size:18px;line-height:1.55;color:var(--fg-2)}
.n-by{display:flex;flex-wrap:wrap;align-items:center;gap:12px;margin-top:26px;
  padding-top:20px;border-top:1px solid var(--line);
  font-family:var(--font-mono);font-size:11.5px;letter-spacing:.06em;
  text-transform:uppercase;color:var(--fg-3)}
.n-art{width:100%;aspect-ratio:16/10;margin:0;border-radius:var(--r-panel);
  border:1px solid var(--line);background:var(--kf-ink);overflow:hidden}
.n-art img{width:100%;height:100%;object-fit:contain;display:block}
@media (max-width:900px){
  .n-open{grid-template-columns:minmax(0,1fr);gap:28px}
  .n-art{max-width:460px}
}

/* the original-coverage callout, for items that ran somewhere else first */
.n-orig{margin:34px 0 0;padding:20px 22px;background:var(--stone);
  border:1px solid var(--line);border-radius:var(--r-card);
  display:flex;flex-wrap:wrap;align-items:center;gap:14px;
  justify-content:space-between}
.n-orig .n-orig-l{font-family:var(--font-mono);font-size:11px;
  letter-spacing:.13em;text-transform:uppercase;color:var(--action)}
.n-orig p{margin:6px 0 0;font-size:15.5px;line-height:1.55;color:var(--fg)}
.n-orig a{font-weight:600;color:var(--link);white-space:nowrap}

/* the dateline that opens a press release */
.n-dateline{font-family:var(--font-mono);font-size:12.5px;letter-spacing:.04em;
  color:var(--fg-3);margin:0 0 18px}

/* editorial column: one measure, no rail */
.n-body{max-width:70ch;margin-top:44px;font-size:17px;line-height:1.72;
  color:var(--fg-2)}
.n-body > p{margin:0 0 22px}
.n-body,.n-body p,.n-body li,.v-body,.v-body p,.v-body li{overflow-wrap:break-word}
/* (0,3,1), the same trick the article body needs: kf-design.css styles `.sec h2`
   as a marketing display heading and would render these at 42px. */
.sec .n-body h2,.n-body h2{margin:44px 0 14px;font-size:clamp(21px,1.8vw,26px);
  line-height:1.24;letter-spacing:-.024em;color:var(--kf-ink);max-width:34ch}
.n-body h3{margin:30px 0 10px;font-size:18px;line-height:1.32;
  letter-spacing:-.018em;color:var(--kf-ink)}
.n-body strong{color:var(--fg);font-weight:600}
.n-body a{color:var(--link);border-bottom:1px solid rgba(23,107,105,.35)}
.n-body a:hover{border-bottom-color:var(--link)}
.n-body ul,.n-body ol{margin:0 0 22px;padding-left:0;list-style:none}
.n-body li{position:relative;padding-left:26px;margin-bottom:11px}
.n-body ul > li::before{content:"";position:absolute;left:6px;top:11px;width:6px;
  height:6px;border-radius:50%;background:var(--action)}
.n-body ol{counter-reset:n}
.n-body ol > li{counter-increment:n}
.n-body ol > li::before{content:counter(n);position:absolute;left:0;top:0;
  font-family:var(--font-mono);font-size:12px;color:var(--action);line-height:1.85}
.n-body blockquote{margin:30px 0;padding:4px 0 4px 22px;
  border-left:3px solid var(--action)}
.n-body blockquote p{margin:0;font-family:var(--font-display);font-size:19.5px;
  line-height:1.44;letter-spacing:-.018em;color:var(--kf-ink)}
.n-body blockquote cite{display:block;margin-top:10px;font-style:normal;
  font-family:var(--font-mono);font-size:11.5px;letter-spacing:.06em;
  text-transform:uppercase;color:var(--fg-3)}
.n-body figure{margin:0 0 26px}
.n-body figure .f-frame{background:var(--stone);border:1px solid var(--line);
  border-radius:var(--r-card);padding:16px;display:grid;place-items:center;
  min-height:120px}
.n-body figure img{max-width:100%;max-height:480px;height:auto;
  object-fit:contain;display:block;border-radius:6px}
.n-body figcaption{margin-top:10px;font-size:13.5px;line-height:1.55;
  color:var(--fg-3)}
.n-body table{width:100%;border-collapse:collapse;font-size:14.5px}
.n-body .n-table{margin:0 0 26px;border:1px solid var(--line);
  border-radius:var(--r-card);overflow:hidden;background:var(--paper)}
.n-body th{text-align:left;padding:12px 16px;background:var(--stone);
  font-family:var(--font-mono);font-size:11px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--fg-3);border-bottom:1px solid var(--line)}
.n-body td{padding:12px 16px;border-top:1px solid var(--line-soft);
  vertical-align:top;line-height:1.55}
@media (max-width:620px){.n-body .n-table{overflow-x:auto}
  .n-body .n-table table{min-width:500px}}

/* "About Kloudfuse" and legal/analyst disclaimers read as boilerplate, because
   that is what they are -- quieter, but never removed. */
.n-boiler{margin-top:38px;padding-top:22px;border-top:1px solid var(--line);
  font-size:14px;line-height:1.66;color:var(--fg-3);max-width:70ch}
.n-boiler p{margin:0 0 14px}
.n-boiler strong{color:var(--fg-2)}

.n-foot{margin-top:44px;padding-top:24px;border-top:1px solid var(--line)}
.n-back{font-weight:600;font-size:14.5px;color:var(--link)}

/* ============================================================ events index */
.e-group{margin-top:12px}
.e-group + .e-group{margin-top:54px}
.e-feat{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.85fr);
  gap:clamp(28px,4vw,56px);align-items:center}
.e-feat .r-art{aspect-ratio:16/10}
.e-feat h2{margin:14px 0 0;font-size:clamp(25px,2.4vw,34px);line-height:1.14;
  letter-spacing:-.03em;max-width:20ch}
.e-feat h2 a{color:inherit}

.e-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:26px;
  margin-top:30px}
.e-card{display:flex;flex-direction:column;border:1px solid var(--line);
  border-radius:var(--r-card);overflow:hidden;background:var(--paper);
  transition:border-color .15s}
.e-card:hover{border-color:var(--fg-3)}
.e-card .r-art{border:0;border-radius:0;aspect-ratio:16/9}
.e-card .e-body{padding:20px 22px 22px;display:flex;flex-direction:column;
  gap:10px;flex:1}
.e-card h3{margin:0;font-size:18px;line-height:1.3;letter-spacing:-.02em}
.e-card h3 a{color:inherit}
.e-card h3 a:hover{color:var(--link)}

/* Date and place are what an event card is for, so they get their own row
   rather than being buried in a meta line. */
.e-facts{display:flex;flex-wrap:wrap;gap:8px 18px;font-size:13.5px;
  color:var(--fg-2)}
.e-facts span{display:inline-flex;align-items:center;gap:7px}
.e-facts svg{width:14px;height:14px;flex:none;opacity:.65}
.e-go{margin-top:auto;padding-top:4px;font-size:13.5px;font-weight:600;
  color:var(--link);display:inline-flex;align-items:center;gap:7px}
.e-card:hover .e-go{gap:11px}

/* Past events stay legible. Quieter ground, full-strength text -- an archive,
   not a disabled control. */
.e-past .e-card{background:var(--stone)}
.e-past .e-card .r-art{opacity:.92}

@media (max-width:1000px){
  .e-feat{grid-template-columns:minmax(0,1fr)}
  .e-grid{grid-template-columns:minmax(0,1fr)}
}

/* =========================================================== event detail */
.v-head{padding-top:64px}
.v-open{display:grid;grid-template-columns:minmax(0,56fr) minmax(0,40fr);
  gap:clamp(28px,4vw,60px);align-items:center;margin-top:4px}
.v-head h1{margin-top:18px;font-size:clamp(30px,3.4vw,46px);line-height:1.07;
  letter-spacing:-.036em}
.v-deck{margin-top:18px;font-size:18px;line-height:1.55;color:var(--fg-2)}
.v-art{width:100%;border-radius:var(--r-panel);border:1px solid var(--line);
  background:var(--kf-ink);overflow:hidden;aspect-ratio:16/10}
.v-art img{width:100%;height:100%;object-fit:contain;display:block}

/* the details panel: date, place, booth, registration state */
.v-facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
  gap:1px;margin-top:30px;background:var(--line);border:1px solid var(--line);
  border-radius:var(--r-card);overflow:hidden}
.v-facts div{background:var(--paper);padding:16px 18px}
.v-facts dt{font-family:var(--font-mono);font-size:10.5px;letter-spacing:.13em;
  text-transform:uppercase;color:var(--fg-3);margin:0}
.v-facts dd{margin:7px 0 0;font-size:15px;line-height:1.4;color:var(--fg);
  font-weight:600}
.v-cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:26px}

/* a past event says so plainly, without pretending it is still open */
.v-past{margin-top:26px;padding:14px 18px;background:var(--stone);
  border:1px solid var(--line);border-radius:var(--r-card);
  font-size:14.5px;line-height:1.55;color:var(--fg-2)}
.v-past strong{color:var(--fg)}

.v-body{max-width:70ch;margin-top:46px;font-size:17px;line-height:1.72;
  color:var(--fg-2)}
.v-body > p{margin:0 0 22px}
.sec .v-body h2,.v-body h2{margin:44px 0 14px;font-size:clamp(21px,1.8vw,26px);
  line-height:1.24;letter-spacing:-.024em;color:var(--kf-ink);max-width:34ch}
.v-body h3{margin:28px 0 10px;font-size:18px;letter-spacing:-.018em;
  color:var(--kf-ink)}
.v-body ul,.v-body ol{margin:0 0 22px;padding-left:0;list-style:none}
.v-body li{position:relative;padding-left:26px;margin-bottom:11px}
.v-body ul > li::before{content:"";position:absolute;left:6px;top:11px;width:6px;
  height:6px;border-radius:50%;background:var(--action)}
.v-body ol{counter-reset:n}
.v-body ol > li{counter-increment:n}
.v-body ol > li::before{content:counter(n);position:absolute;left:0;top:0;
  font-family:var(--font-mono);font-size:12px;color:var(--action);line-height:1.85}
.v-body a{color:var(--link);border-bottom:1px solid rgba(23,107,105,.35)}
.v-body figure{margin:0 0 24px}
.v-body figure .f-frame{background:var(--stone);border:1px solid var(--line);
  border-radius:var(--r-card);padding:14px;display:grid;place-items:center}
.v-body figure img{max-width:100%;max-height:460px;height:auto;
  object-fit:contain;display:block;border-radius:6px}
.v-body figcaption{margin-top:10px;font-size:13.5px;color:var(--fg-3)}

/* team cards: compact by design. On the live pages these dominate the page;
   they are supporting information, not the subject. */
.v-people{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));
  gap:18px;margin:22px 0 30px;max-width:760px}
.v-person{display:flex;align-items:center;gap:12px;padding:12px 14px;
  border:1px solid var(--line);border-radius:var(--r-card);background:var(--paper)}
.v-person img{width:46px;height:46px;border-radius:50%;object-fit:cover;
  flex:none;background:var(--stone)}
.v-person .v-ini{width:46px;height:46px;border-radius:50%;flex:none;display:grid;
  place-items:center;background:var(--kf-ink);color:#fff;font-weight:600;
  font-size:14px}
.v-person > div{min-width:0}
/* A flex item defaults to min-width:auto, so a long name ("Krishna
   Yaddapanavar") refuses to shrink and pushes the card past the viewport.
   Same class of bug as the article table did on the grid. */
.v-person b{display:block;font-size:14.5px;line-height:1.3;color:var(--fg);
  overflow-wrap:break-word}
.v-person span{display:block;margin-top:3px;font-size:12.5px;line-height:1.35;
  color:var(--fg-3)}

/* logo strip */
.v-logos{display:flex;flex-wrap:wrap;align-items:center;gap:22px 34px;
  margin:20px 0 30px;padding:22px 24px;background:var(--stone);
  border:1px solid var(--line);border-radius:var(--r-card)}
.v-logos img{height:26px;width:auto;opacity:.8}

/* ===================================================== designed event thumb
   Events do not have thumbnails. What they have is promotional artwork -- a
   Bose-headphones giveaway, a photo of the booth, a hotel exterior -- which is
   why the index looked like a jumble: those images were never made to identify
   an event at card size, and three of them are the same giveaway banner.

   So the card art is DRAWN, not fetched. One component, same geometry every
   time, carrying the things that actually identify an event: what kind it is,
   what it is called, and where. The real photography still lives on the detail
   page, where it has room to mean something.

   Ground and accent shift by event type -- a conference is not a dinner -- so
   the grid has rhythm without being a collage of unrelated posters. */
.e-thumb{position:relative;aspect-ratio:16/10;overflow:hidden;display:grid;
  align-content:space-between;padding:24px 26px;color:#fff;
  background:var(--kf-ink);isolation:isolate}
/* the ruled field, same grammar as the blog's art-less covers */
.e-thumb::before{content:"";position:absolute;inset:0;z-index:-1;
  background-image:repeating-linear-gradient(115deg,rgba(255,255,255,.05) 0 1px,
    transparent 1px 14px);
  -webkit-mask-image:linear-gradient(200deg,#000 5%,transparent 78%);
  mask-image:linear-gradient(200deg,#000 5%,transparent 78%)}
/* the accent bloom, hue set per type below */
.e-thumb::after{content:"";position:absolute;z-index:-1;
  inset:auto -70px -90px auto;width:300px;height:300px;border-radius:50%;
  background:radial-gradient(circle,var(--thumb-glow),transparent 70%)}

/* Ten of the thirteen events are conferences, so colouring by type made the
   grid almost entirely teal. The accent therefore cycles by POSITION through
   four hues: in a two-column grid, index%4 gives 0,1 / 2,3 / 0,1 -- so no card
   touches another of its own colour, horizontally or vertically. The type is
   still named in the kicker; it just no longer drives the palette. */
.e-thumb{--thumb-bg:linear-gradient(152deg,#141E27 0%,#24384A 100%);
  --thumb-glow:rgba(87,184,197,.34);--thumb-kick:#7FD1DC}
.e-thumb[data-accent="1"]{--thumb-bg:linear-gradient(152deg,#231425 0%,#3E2340 100%);
  --thumb-glow:rgba(198,120,205,.30);--thumb-kick:#E4A9E8}
.e-thumb[data-accent="2"]{--thumb-bg:linear-gradient(152deg,#12231D 0%,#1F4034 100%);
  --thumb-glow:rgba(90,200,150,.28);--thumb-kick:#8FDCB8}
.e-thumb[data-accent="3"]{--thumb-bg:linear-gradient(152deg,#2A1712 0%,#4A2A1C 100%);
  --thumb-glow:rgba(240,120,70,.30);--thumb-kick:#F2A98F}
.e-thumb{background:var(--thumb-bg)}

.e-thumb .et-top{display:flex;align-items:center;justify-content:space-between;
  gap:14px}
.e-thumb .et-kind{font-family:var(--font-mono);font-size:10.5px;
  letter-spacing:.16em;text-transform:uppercase;color:var(--thumb-kick)}
.e-thumb .et-kind::before{content:"// "}
.e-thumb .et-mark{height:18px;width:auto;flex:none;opacity:.95;
  /* the REAL kloudfuse wordmark, knocked out to white. Inverting the shipped
     asset keeps one logo file on the site: no hand-drawn substitute to drift
     from the brand when the mark is next updated. */
  filter:brightness(0) invert(1)}
.e-thumb .et-name{font-family:var(--font-display);
  font-size:clamp(19px,2.1vw,25px);line-height:1.14;letter-spacing:-.028em;
  margin:14px 0 0;color:#fff;
  /* three lines maximum: a long conference name truncates rather than
     pushing the year off the bottom of a fixed-ratio card */
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;
  overflow:hidden}
.e-thumb .et-foot{display:flex;align-items:baseline;justify-content:space-between;
  gap:12px;padding-top:12px;border-top:1px solid rgba(255,255,255,.16);
  font-family:var(--font-mono);font-size:11px;letter-spacing:.08em;
  text-transform:uppercase;color:rgba(255,255,255,.72)}
.e-thumb .et-year{color:#fff;font-weight:500}

/* the facts tab under the art: date, place, booth, and the action */
.e-card .e-tab{display:flex;flex-wrap:wrap;gap:8px 18px;font-size:13.5px;
  color:var(--fg-2)}
.e-card .e-tab span{display:inline-flex;align-items:center;gap:7px}
.e-card .e-tab svg{width:14px;height:14px;flex:none;opacity:.6}
.e-card .e-act{margin-top:auto;padding-top:14px;display:flex;
  align-items:center;justify-content:space-between;gap:12px}
.e-card .e-act .btn{height:36px;padding:0 16px;font-size:13.5px}

/* ---------------------------------------------------- team, on one line
   The old site put the team in a single row of circular portraits with the
   name underneath. Two rows of horizontal name-beside-photo cards, with
   "Krishna Yaddapanavar" wrapping mid-word, was worse in every way. This is a
   single row that keeps its rhythm, and the section breaks the 70ch reading
   column because a row of five portraits is not body copy. */
.v-body .v-people{display:grid;grid-auto-flow:column;
  grid-auto-columns:minmax(0,1fr);gap:clamp(14px,2vw,30px);
  max-width:none;width:min(100%,880px);margin:22px 0 34px}
.v-person{display:block;text-align:center;border:0;background:none;padding:0}
.v-person img,.v-person .v-ini{width:clamp(64px,7vw,96px);
  height:clamp(64px,7vw,96px);border-radius:50%;margin:0 auto 12px;
  display:block;object-fit:cover;background:var(--stone)}
.v-person .v-ini{display:grid;place-items:center;background:var(--kf-ink);
  color:#fff;font-weight:600;font-size:clamp(16px,1.6vw,21px)}
.v-person b{display:block;font-size:14.5px;line-height:1.28;color:var(--fg);
  /* the names are short; hyphenation is what made them break mid-word */
  overflow-wrap:normal;hyphens:none}
.v-person span{display:block;margin-top:4px;font-size:12.5px;line-height:1.35;
  color:var(--fg-3)}
@media (max-width:720px){
  .v-body .v-people{grid-auto-flow:row;
    grid-template-columns:repeat(auto-fit,minmax(120px,1fr))}
}

/* ------------------------------------------------- the registration form
   The real HubSpot embed, in the hero's right column where the live page put
   it -- the thing a reader came to do, not a paragraph about it. */
.v-form-panel{background:var(--paper);border:1px solid var(--line);
  border-radius:var(--r-panel);padding:26px 26px 20px;
  box-shadow:0 20px 50px -40px rgba(29,14,23,.5)}
.v-form-panel h2{margin:0 0 4px;font-size:19px;letter-spacing:-.02em;
  color:var(--kf-ink)}
.v-form-panel .vf-note{margin:0 0 16px;font-size:14px;line-height:1.55;
  color:var(--fg-3)}
.v-form-panel .hs-form-frame{min-height:320px}
/* a past event keeps its form markup out of the way but the page intact */
.v-form-closed{background:var(--stone);border:1px dashed var(--line);
  border-radius:var(--r-panel);padding:26px;text-align:center}
.v-form-closed p{margin:0 0 16px;font-size:15px;line-height:1.6;
  color:var(--fg-2)}

/* The 70ch measure is for reading. A two-column band is not reading, so it
   breaks out to the section width -- otherwise text and image each get half of
   70ch and both are unreadable. */
.v-body .v-split{width:min(100%,980px);max-width:none;
  margin-left:0;margin-right:0}
.v-body{max-width:none}
.v-body > p,.v-body > ul,.v-body > ol,.v-body > blockquote,
.v-body > h2,.v-body > h3,.v-body > .n-table{max-width:70ch}

/* The facts panel needs room for a real venue name, not four equal slivers. */
.v-facts{grid-template-columns:repeat(auto-fit,minmax(170px,auto))}
.v-facts dd{font-weight:600;line-height:1.35}
/* The panel draws its dividers with a background showing through 1px gaps.
   A row that does not fill leaves that background as a dark beige slab -- the
   empty cell in the screenshot. Painting the panel in paper and drawing the
   dividers as real borders means an incomplete row simply ends. */
.v-facts{background:var(--paper);gap:0}
.v-facts > div{border-left:1px solid var(--line)}
.v-facts > div:first-child{border-left:0}

/* a visible heading that is only for assistive tech */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.e-thumb-link{display:block}



/* A figure that is not the hero sits BESIDE the copy that introduces it --
   text left, image right -- rather than interrupting the reading column at
   full width. Same rhythm as the article and news heroes, so a page reads as
   one system whether the picture is at the top or halfway down. */
.v-split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.85fr);
  gap:clamp(24px,3vw,44px);align-items:center;margin:0 0 30px}
.v-split .v-split-t > *:last-child{margin-bottom:0}
.v-split figure{margin:0}
.v-split figure img{max-height:none}
@media (max-width:820px){
  .v-split{grid-template-columns:minmax(0,1fr);gap:20px}
}

/* The customer marquee is a full-bleed band inside a measured column, so it
   breaks out of the 70ch body and spans the section like it does elsewhere. */
.v-marq{margin:22px 0 32px;border-radius:var(--r-card)}
.v-body .v-marq{max-width:none;width:100%}


/* the embedded registration form's own section */
.v-form{margin-top:40px;padding:26px;border:1px solid var(--line);
  border-radius:var(--r-panel);background:var(--stone)}
.v-form h2{margin:0 0 6px}
.v-form .v-form-note{font-size:14px;line-height:1.6;color:var(--fg-3);margin:0}

@media (max-width:900px){
  .v-open{grid-template-columns:minmax(0,1fr);gap:28px}
  .v-art{max-width:520px}
}

/* ------------------------------------------------------- featured event
   .e-feat was defined for a lead event but never instantiated, so it had no
   copy or action styles. An upcoming event is the reason to visit this page;
   left as a single card in the 2-up grid it sat in an empty half-fold. */
.e-feat .e-lede{margin:16px 0 0;font-size:16.5px;line-height:1.62;
  color:var(--fg-2);max-width:46ch}
.e-feat .e-facts{margin-top:20px}
.e-feat-act{display:flex;flex-wrap:wrap;gap:12px;margin-top:24px}

/* ------------------------------------------------- live event registration
   .v-form-closed covers a past event. This is its open counterpart: the same
   slot in .v-open, holding the HubSpot embed for an event still taking
   registrations. */
.v-open:has(.v-form){align-items:start}
.v-form{background:var(--paper);border:1px solid var(--line);
  border-radius:var(--r-panel);padding:26px 24px}
.v-form .vf-lab{margin:0;font-family:var(--font-mono);font-size:10.5px;
  letter-spacing:.13em;text-transform:uppercase;color:var(--fg-3)}
.v-form .vf-sub{margin:10px 0 20px;font-size:15px;line-height:1.55;
  color:var(--fg-2)}

/* HubSpot renders this form inside its own iframe, so the fields and the
   submit button cannot be styled from here -- that lives in the HubSpot form
   editor. All we own is the card around it and the iframe's box. */
.v-form .hs-form-iframe{display:block;width:100%;border:0}
.v-form a{color:var(--link)}

@media (max-width:1000px){.v-form{max-width:520px}}