/* ===========================================================================
   ENVC BOĞAZİÇİ — design system and layout.
   Content lives in content.js; you should not need to open this file.

   Three rules worth knowing before you change anything:

   1. NO TEXT-TRANSFORM. A browser turns Turkish "i" into "I" instead of "İ"
      on an English page, so nothing here uppercases anything. Type capitals
      into content.js if you ever need them.

   2. DISPLAY LINE-HEIGHT IS 1.28, AND THAT IS A MEASURED FLOOR, NOT TASTE.
      Measured off the live webfont with canvas actualBoundingBox:
          Ğ rises 0.943em above the baseline (İ 0.939)
          Ç and Ş drop 0.300em below it
      so a Ç sitting directly above a Ğ needs more than 0.943 + 0.300 =
      1.243em of line-height before the two touch. 1.28 leaves 0.037em of
      air — 3.0px at the 80px hero, 1.3px at the 36px mobile headline. Go
      below 1.243 and Turkish headlines collide. Re-measure if you change
      the font or add a taller glyph.

   3. CALISTOGA HAS ONE WEIGHT. Nothing sets font-weight on it, so the
      browser never fakes a bold. Everything that needs a 600 is the UI face.
   =========================================================================== */

:root{
  /* ---- light ---- */
  --bg:              #ffffff;
  --bg-alt:          #f5f5f7;
  --text:            #1d1d1f;   /* never pure black */
  --text-secondary:  #6e6e73;
  --text-tertiary:   #86868b;
  --divider:         #d2d2d7;

  /* ---- dark section ---- */
  --bg-dark:              #000000;
  --bg-dark-alt:          #1d1d1f;
  --text-on-dark:         #f5f5f7;
  --text-on-dark-second:  #86868b;

  /* ---- buttons ---- */
  --btn-bg:        #1d1d1f;
  --btn-bg-hover:  #333336;
  --btn-fg:        #ffffff;

  /* ---- type ---- */
  --display: "Calistoga", Georgia, "Times New Roman", serif;
  --sans: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", Inter, Helvetica, Arial, sans-serif;

  /* ---- motion ---- */
  --ease:  cubic-bezier(0.28, 0.11, 0.32, 1);
  --hover: 300ms;

  /* ---- layout. Spacing only ever comes from this ladder:
         4 8 12 16 20 24 32 40 48 64 80 100 140 ---- */
  --col:   980px;
  --pad:   140px;
  --nav-h: 52px;

  /* type sizes, overridden at the two breakpoints */
  --fs-hero:    80px;
  --fs-section: 56px;
  --fs-sub:     24px;
  --fs-stat:    64px;
}

/* 735–1068px */
@media (max-width:1068px){
  :root{ --col:692px; --pad:100px; --fs-hero:64px; --fs-section:48px; --fs-sub:21px; --fs-stat:56px; }
}
/* 734px and below */
@media (max-width:734px){
  :root{ --col:87.5%; --pad:72px; --nav-h:52px; --fs-hero:48px; --fs-section:36px; --fs-sub:19px; --fs-stat:48px; }
}

*,*::before,*::after{ box-sizing:border-box; }

html{
  -webkit-text-size-adjust:100%;
  scroll-behavior:smooth;
  scroll-padding-top:calc(var(--nav-h) + 20px);
}

body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:var(--sans);
  font-size:17px;
  line-height:1.47;
  letter-spacing:-.012em;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

img{ max-width:100%; display:block; }
a{ color:inherit; }
ul{ margin:0; padding:0; list-style:none; }
h1,h2,h3,p,figure{ margin:0; }
button{ font:inherit; color:inherit; }

/* Apple's column: a fixed measure that falls back to a percentage once the
   window is narrower than it. */
.col{
  width:var(--col);
  max-width:87.5%;
  margin-inline:auto;
}
.center{ text-align:center; }

.sr{
  position:absolute; width:1px; height:1px;
  margin:-1px; padding:0; border:0;
  clip-path:inset(50%); overflow:hidden; white-space:nowrap;
}

.skip{
  position:absolute; left:-9999px; top:0; z-index:9999;
  background:var(--text); color:#fff;
  padding:12px 20px; border-radius:0 0 12px 0;
  font-size:14px; text-decoration:none;
}
.skip:focus{ left:0; top:0; }

/* One focus ring for everything clickable. */
:focus-visible{ outline:2px solid var(--text); outline-offset:2px; border-radius:2px; }
.band--dark :focus-visible,
.lb :focus-visible{ outline-color:var(--text-on-dark); }

/* ===========================================================================
   type
   =========================================================================== */
.display{
  font-family:var(--display);
  font-weight:400;           /* Calistoga has one weight — never fake it */
  line-height:1.28;          /* see rule 2 at the top of this file */
  letter-spacing:-.015em;
}
.h-hero{ font-size:var(--fs-hero); }
.h-section{ font-size:var(--fs-section); text-wrap:balance; }   /* two even lines, never one word alone */

.eyebrow{
  font-size:21px;
  font-weight:600;
  line-height:1.24;          /* 1.19 left only 0.5px over a Ğ — see rule 2 */
  letter-spacing:.004em;
  color:var(--text);
}

.subhead{
  font-size:var(--fs-sub);
  font-weight:400;
  line-height:1.4;
  letter-spacing:.004em;
  color:var(--text-secondary);
  max-width:640px;
  margin-inline:auto;
}

.caption{
  font-size:14px;
  line-height:1.43;
  letter-spacing:-.008em;
  color:var(--text-tertiary);
}

/* ===========================================================================
   buttons and links
   =========================================================================== */
.actions{
  display:flex; flex-wrap:wrap; align-items:center; justify-content:center;
  gap:16px 32px;
}

.btn{
  display:inline-flex; align-items:center; justify-content:center;
  min-height:44px;
  padding:0 24px;
  border:0; border-radius:980px;
  background:var(--btn-bg); color:var(--btn-fg);
  font-size:17px; line-height:1.25; letter-spacing:-.012em;
  text-decoration:none; white-space:nowrap;
  cursor:pointer;
  transition:background-color var(--hover) var(--ease), transform var(--hover) var(--ease);
}
/* Nothing sits on the black band today, but the design system specifies the
   inverted pill, so it is here and ready. */
.btn--on-dark{ background:var(--text-on-dark); color:#000; }

/* The nav pill. */
.pill{
  display:inline-flex; align-items:center;
  min-height:32px; padding:0 16px;
  border-radius:980px;
  background:var(--btn-bg); color:var(--btn-fg);
  font-size:14px; line-height:1.29; letter-spacing:-.01em;
  text-decoration:none; white-space:nowrap;
  transition:background-color var(--hover) var(--ease), transform var(--hover) var(--ease);
}

/* A text link is the text colour followed by a chevron. Never an arrow. */
.lnk{
  display:inline-block;
  color:var(--text);
  font-size:17px; line-height:1.47; letter-spacing:-.012em;
  text-decoration:none;
  white-space:nowrap;
}
.band--dark .lnk{ color:var(--text-on-dark); }
.lnk__t{ text-decoration:none; }
.chev{
  display:inline-block;
  margin-left:4px;
  transition:transform var(--hover) var(--ease);
}

/* ---- hover. Wrapped so a phone never sticks in a hover state. ---------- */
@media (hover:hover){
  .btn:hover,
  .pill:hover{ background:var(--btn-bg-hover); transform:scale(1.02); }
  .btn--on-dark:hover{ background:#e8e8ed; }

  .lnk:hover .lnk__t{ text-decoration:underline; text-underline-offset:3px; }
  .lnk:hover .chev{ transform:translateX(3px); }
}

/* After the hover block, so a press always wins over a hover. */
.btn:active,
.pill:active{ transform:scale(.98); }

/* ===========================================================================
   1. nav
   =========================================================================== */
.nav{
  position:sticky; top:0; z-index:9000;
  height:var(--nav-h);
  background:rgba(250,250,252,.8);
  -webkit-backdrop-filter:saturate(180%) blur(20px);
  backdrop-filter:saturate(180%) blur(20px);
}
.nav__inner{
  height:100%;
  width:var(--col); max-width:87.5%; margin-inline:auto;
  display:grid; grid-template-columns:1fr auto 1fr; align-items:center;
}
.nav__logo{ justify-self:start; display:block; line-height:0; }
.nav__logo img{ height:30px; width:auto; }

.nav__links{ display:flex; gap:40px; justify-self:center; }
.nav__links a{
  font-size:14px; line-height:1.29; letter-spacing:-.01em;
  text-decoration:none; color:var(--text);
  opacity:.8;
  transition:opacity var(--hover) var(--ease);
}
@media (hover:hover){ .nav__links a:hover{ opacity:1; } }

.nav__follow{ justify-self:end; }

.nav__toggle{
  display:none;
  justify-self:end;
  width:44px; height:44px;
  background:none; border:0; padding:0; cursor:pointer;
  align-items:center; justify-content:center;
  flex-direction:column; gap:5px;
}
.nav__toggle span{
  display:block; width:18px; height:1px; background:var(--text);
  transition:transform var(--hover) var(--ease);
}
.nav__toggle[aria-expanded="true"] span:first-child{ transform:translateY(3px) rotate(45deg); }
.nav__toggle[aria-expanded="true"] span:last-child{ transform:translateY(-3px) rotate(-45deg); }

.menu{
  position:fixed; inset:var(--nav-h) 0 0; z-index:8900;
  background:var(--bg);
  padding:24px 6.25% 40px;
  display:flex; flex-direction:column; align-items:flex-start; gap:40px;
  overflow-y:auto;
}
.menu[hidden]{ display:none; }
.menu__links{ align-self:stretch; display:flex; flex-direction:column; }
.menu__links a{
  font-size:28px; line-height:1.25; letter-spacing:-.02em;
  text-decoration:none;
  padding-block:20px;
  border-bottom:1px solid var(--divider);
}

/* ===========================================================================
   bands. Sections are separated by background colour, never by a line.
   =========================================================================== */
.band{ padding-block:var(--pad); }
.band--alt{ background:var(--bg-alt); }
.band--dark{
  background:var(--bg-dark);
  color:var(--text-on-dark);
}
.band--dark .eyebrow{ color:var(--text-on-dark); }
.band--dark .subhead{ color:var(--text-on-dark-second); }
.band--dark .caption{ color:var(--text-on-dark-second); }

.eyebrow + .display{ margin-top:12px; }
.display + .subhead{ margin-top:16px; }
.subhead + .actions,
.display + .actions{ margin-top:32px; }

/* Photos inside a section get the small radius; the two big ones get 28px. */
.frame{ border-radius:18px; overflow:hidden; }
.frame--lg{ border-radius:28px; }

/* ===========================================================================
   next event — the poster beside the text, the two pills stacked under it.
   Below 735px the poster goes on top and everything centres.
   =========================================================================== */
.next__grid{
  display:grid; grid-template-columns:1fr 1fr; gap:64px;
  align-items:center;
}
.next__poster img{ width:100%; height:auto; aspect-ratio:1/1; object-fit:cover; }
.next__poster[hidden]{ display:none; }
.next__text .subhead{ margin-inline:0; }
.next__line{ display:block; }
.next .choices{ flex-direction:column; align-items:flex-start; gap:12px; }
.next .choices .btn{ width:100%; max-width:340px; min-width:0; }

/* ===========================================================================
   3. venture summit (black)
   =========================================================================== */
.vs__photos{
  margin-top:48px;
  display:grid; grid-template-columns:1fr 1fr; gap:20px;
}
.vs__photos figure{ display:grid; gap:8px; }
.vs__photos img{ width:100%; aspect-ratio:16/9; object-fit:cover; }
/* When there is a gallery behind them the photos are buttons, so they need the
   usual button reset. .frame supplies the 18px radius and the clipping that
   the photo zoom is cut by. */
.vs__shot{
  display:block; width:100%;
  margin:0; padding:0; border:0;
  background:none; color:inherit;
}
.vs__photos .caption{ text-align:center; }

.stats{
  margin-top:48px;
  display:flex; justify-content:center; gap:100px;
}
.stat b{
  display:block;
  font-family:var(--display); font-weight:400;
  font-size:var(--fs-stat); line-height:1;      /* digits only — no Ğ risk */
  letter-spacing:-.02em;
  font-variant-numeric:tabular-nums;
}
.stat span{
  display:block; margin-top:8px;
  font-size:17px; color:var(--text-on-dark-second);
}

.vs__firms{
  margin-top:32px;
  max-width:780px; margin-inline:auto;
  font-size:17px; line-height:1.47;
  color:var(--text-on-dark-second);
}
.vs__note{ margin-top:12px; }

/* ===========================================================================
   4. past events — five cards, then a short list under them
   =========================================================================== */
.featured{
  margin-top:40px;
  display:grid; grid-template-columns:1fr 1fr; gap:24px;
}
.featured > li:first-child{ grid-column:1 / -1; }

/* A card is one button: photo, then date and title. No border, no shadow
   at rest. */
.ecard{
  /* flex, not block: a <button> centres its own content box vertically, so
     a card shorter than its grid row would push its photo down. */
  display:flex; flex-direction:column;
  width:100%; height:100%;
  margin:0; padding:0; border:0;
  background:var(--bg);
  border-radius:18px;
  overflow:hidden;                /* this is what clips the photo zoom */
  text-align:left; color:inherit;
  cursor:pointer;
}
.ecard--lg{ border-radius:28px; }
.ecard__media{ display:block; }
.ecard__media img{
  width:100%; aspect-ratio:4/3; object-fit:cover;
  object-position:var(--pos, 50% 50%);      /* `coverPosition` in content.js */
}
.ecard--lg .ecard__media img{ aspect-ratio:16/9; }
.ecard__body{ display:flex; flex-direction:column; gap:4px; padding:20px 24px 24px; }
.ecard--lg .ecard__body{ padding:24px 32px 32px; }
.ecard__date{
  font-size:14px; line-height:1.43; letter-spacing:-.008em;
  color:var(--text-secondary);
}
.ecard__title{
  font-family:var(--display); font-weight:400;
  font-size:24px; line-height:1.32; letter-spacing:-.015em;
  text-wrap:balance;              /* no lone "Aydın" on a second line */
}
.ecard--lg .ecard__title{ font-size:32px; line-height:1.28; }

/* One set of values for everything clickable with a photo in it: the event
   cards and the two Venture Summit photos. */
.ecard,
.vs__shot{
  transition:transform var(--hover) var(--ease), box-shadow var(--hover) var(--ease);
}
.ecard__media img,
.vs__shot img{
  transition:transform 700ms var(--ease);
}
.vs__shot{ cursor:pointer; }

@media (hover:hover){
  .ecard:hover,
  .vs__shot:hover{
    transform:translateY(-4px);
    box-shadow:0 4px 30px rgba(0,0,0,.08);
  }
  .ecard:hover .ecard__media img,
  .vs__shot:hover img{ transform:scale(1.04); }
  .ecard:active,
  .vs__shot:active{ transform:translateY(-4px) scale(.98); }
}
.ecard:active,
.vs__shot:active{ transform:scale(.98); }

/* The short list, in the narrow column. */
.also{
  width:692px; max-width:87.5%;
  margin:64px auto 0;
}
.also__label{
  font-size:14px; font-weight:600; line-height:1.43; letter-spacing:-.008em;
  color:var(--text-secondary);
}
.also__rows{ margin-top:8px; }
.also__rows li + li{ border-top:1px solid var(--divider); }

/* A text row is one button — the rows under "Also", and the upcoming event
   in This year. It reacts like a text link, never like a card: the title
   underlines and the chevron slides. */
.trow{
  display:flex; align-items:baseline; gap:16px;
  width:100%;
  margin:0; padding:16px 0;
  border:0; border-radius:8px;    /* only the focus ring shows it */
  background:none;
  font-size:17px; line-height:1.47; letter-spacing:-.012em;
  text-align:left; color:inherit;
  cursor:pointer;
}
.trow__date{
  flex:none; min-width:96px;      /* a min, so "28 September" pushes rather than overlaps */
  color:var(--text-secondary);
  font-variant-numeric:tabular-nums;
}
a.trow{ text-decoration:none; }    /* a row can be a link (a This year row with `href`) */
.trow__title{ flex:1; min-width:0; }
.trow__chev{ flex:none; margin-left:0; color:var(--text-tertiary); }
@media (hover:hover){
  .trow:hover .trow__title{ text-decoration:underline; text-underline-offset:3px; }
  .trow:hover .trow__chev{ transform:translateX(3px); }
}

/* ===========================================================================
   5. this year — lines only ever go between rows, here and in past events
   =========================================================================== */
.rows{
  margin-top:40px;
  width:692px; max-width:87.5%; margin-inline:auto;
}
.rows li{
  display:flex; align-items:baseline; justify-content:space-between; gap:24px;
  padding-block:16px;
}
.rows li + li{ border-top:1px solid var(--divider); }
.rows__name{ font-size:17px; }
.rows__label{ font-size:17px; color:var(--text-secondary); white-space:nowrap; }

/* An upcoming event is a text row that opens its detail view. The button
   takes the row's padding, so the whole row is the target. */
.rows li.rows__event{ padding-block:0; }
.trow--upcoming{ gap:24px; }
.trow__body{ flex:1; min-width:0; display:flex; flex-direction:column; gap:2px; }
.trow__line{
  font-size:14px; line-height:1.43;
  color:var(--text-secondary);
  display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2;
  overflow:hidden;
}
.trow--upcoming .trow__chev{ margin-left:-16px; }

/* ===========================================================================
   6. the team photo — at most 692px wide, the width of the "Also" list,
      because the photo is only 735px wide and would blur any larger. Its own
      top space, since it follows the grey Past events band directly.
   =========================================================================== */
.bleed{ width:min(var(--col), 692px); max-width:87.5%; margin:var(--pad) auto 0; }
.bleed__frame{ overflow:hidden; border-radius:28px; }   /* clips the scale(1.08) start state */
.bleed img{
  width:100%; aspect-ratio:2.1/1; object-fit:cover;
  object-position:center 42%;           /* keeps everyone's heads */
  transform:scale(1.08);                /* app.js eases this back to 1 */
  will-change:transform;
}
.bleed .caption{ margin-top:8px; text-align:center; }

/* ===========================================================================
   7. closing
   =========================================================================== */
.closing{ padding-block:80px var(--pad); }

/* ===========================================================================
   8. footer — everything is 12px
   =========================================================================== */
.foot{
  background:var(--bg-alt);
  padding-block:32px;
  font-size:12px; line-height:1.33; letter-spacing:-.01em;
  color:var(--text-secondary);
}
.foot__inner{ display:grid; justify-items:center; gap:12px; text-align:center; }
@media (min-width:1069px){
  .foot__inner{
    grid-template-columns:auto 1fr auto auto;
    justify-items:start; align-items:center; gap:40px;
    text-align:left;
  }
  .foot__copy{ justify-self:end; }
}
.foot__logo{ height:14px; width:auto; opacity:.55; }
.foot__links{ display:flex; flex-wrap:wrap; justify-content:center; gap:24px; }
.foot__links a{
  color:var(--text); text-decoration:none;
  transition:opacity var(--hover) var(--ease);
  opacity:.8;
}
@media (hover:hover){ .foot__links a:hover{ opacity:1; text-decoration:underline; } }
.foot__copy{ color:var(--text-tertiary); }

/* ===========================================================================
   9. the dialog — an event's detail view, or (.lb--plain) a photo viewer
   =========================================================================== */
.lb{
  position:fixed; inset:0; z-index:9500;
  opacity:0;
  transition:opacity var(--hover) var(--ease);
}
.lb[hidden]{ display:none; }
.lb.is-open{ opacity:1; }

.lb__panel{
  position:absolute; inset:0;
  background:rgba(0,0,0,.82);
  -webkit-backdrop-filter:saturate(180%) blur(20px);
  backdrop-filter:saturate(180%) blur(20px);
  color:var(--text-on-dark);
}
/* The panel stays put and the close button with it; this scrolls. */
.lb__scroll{
  position:absolute; inset:0;
  overflow-y:auto; overscroll-behavior:contain;
  padding:64px 24px;
}

.lb__sheet{
  position:relative;
  max-width:800px; margin-inline:auto;
  background:var(--bg-dark-alt);
  border-radius:28px;
  overflow:hidden;
  transform:scale(.96);
  transition:transform var(--hover) var(--ease);
}
.lb.is-open .lb__sheet{ transform:scale(1); }

/* The photo area keeps one height, so moving between a portrait poster and
   a landscape photo never makes the text below jump. */
.lb__stage{
  position:relative;
  height:min(60vh, 560px);
  background:var(--bg-dark);
  display:flex; align-items:center; justify-content:center;
}
.lb__stage[hidden]{ display:none; }
.lb__fig{ width:100%; height:100%; }
.lb__fig img{
  width:100%; height:100%;
  object-fit:contain;
}

.lb__cap{
  display:flex; align-items:baseline; justify-content:space-between; gap:12px;
  padding:12px 40px 0;
  font-size:14px; line-height:1.43; color:var(--text-on-dark-second);
}
.lb__cap[hidden]{ display:none; }
.lb__count{ font-variant-numeric:tabular-nums; white-space:nowrap; }

.lb__info{ padding:24px 40px 40px; }
.lb__info[hidden]{ display:none; }
.lb__info [hidden]{ display:none; }
.lb__date{
  display:block;
  font-size:14px; line-height:1.43; color:var(--text-on-dark-second);
}
.lb__title{ margin-top:4px; font-size:32px; color:var(--text-on-dark); text-wrap:balance; }
.lb__lead{ margin-top:12px; font-size:19px; line-height:1.42; color:var(--text-on-dark); }
.lb__text{ margin-top:12px; font-size:17px; line-height:1.47; color:var(--text-on-dark-second); }

.lb__group{ margin-top:32px; }
.lb__h{ font-size:17px; font-weight:600; line-height:1.29; color:var(--text-on-dark); }
.lb__people{
  margin-top:12px;
  display:grid; grid-template-columns:1fr 1fr; gap:12px 24px;
}
.lb__people li{ display:flex; flex-direction:column; }
.lb__who{ font-size:17px; line-height:1.29; }
.lb__role{ font-size:14px; line-height:1.43; color:var(--text-on-dark-second); }
.lb__names{ margin-top:8px; font-size:17px; line-height:1.47; color:var(--text-on-dark-second); }

.lb__link{ margin-top:32px; }
.lb .lnk{ color:var(--text-on-dark); }

.lb__btn{
  position:absolute;
  width:44px; height:44px;
  display:grid; place-content:center;
  padding:0; border:0; border-radius:980px;
  background:rgba(245,245,247,.14);
  color:var(--text-on-dark);
  cursor:pointer;
  transition:background-color var(--hover) var(--ease), transform var(--hover) var(--ease);
}
/* over a photo, the buttons need a darker glass to read on a white poster */
.lb__stage .lb__btn{
  background:rgba(29,29,31,.56);
  -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px);
}
.lb__btn svg{ width:20px; height:20px; display:block; }
.lb__close{ top:16px; right:16px; z-index:2; }
.lb__prev{ left:16px; top:50%; margin-top:-22px; }
.lb__next{ right:16px; top:50%; margin-top:-22px; }
.lb__btn[hidden]{ display:none; }
@media (hover:hover){
  .lb__btn:hover{ background:rgba(245,245,247,.26); transform:scale(1.02); }
  .lb__stage .lb__btn:hover{ background:rgba(29,29,31,.72); }
}
.lb__btn:active{ transform:scale(.98); }

/* ---- the plain photo viewer: no sheet, the photo floats on the backdrop,
        the arrows sit at the edges of the window ---- */
.lb--plain .lb__scroll{ overflow:hidden; padding:64px 80px; }
.lb--plain .lb__sheet,
.lb--plain.is-open .lb__sheet{
  position:static; transform:none;   /* so the arrows position against the window */
  max-width:none; height:100%;
  background:none; border-radius:0; overflow:visible;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:16px;
  pointer-events:none;        /* so a click beside the photo closes */
}
.lb--plain .lb__fig{ transform:scale(.96); transition:transform var(--hover) var(--ease); }
.lb--plain.is-open .lb__fig{ transform:scale(1); }
.lb--plain .lb__stage{ position:static; height:auto; background:none; }
.lb--plain .lb__fig{ width:auto; height:auto; }
.lb--plain .lb__fig img{
  width:auto; height:auto;
  max-width:min(1100px, 86vw); max-height:74vh;
  border-radius:18px;
  background:var(--bg-dark-alt);
}
.lb--plain .lb__btn{ pointer-events:auto; background:rgba(245,245,247,.14); -webkit-backdrop-filter:none; backdrop-filter:none; }
.lb--plain .lb__cap{ justify-content:center; padding:0; color:var(--text-on-dark); }
.lb--plain .lb__count{ color:var(--text-on-dark-second); }

/* ===========================================================================
   10. two equal pills (.choices) — in the next-event band at the top of
       the home page, and on the Angel Summit sign-up page, which is one
       white band filling the window. Nothing there moves but the pills.
   =========================================================================== */
.apply{
  min-height:calc(100vh - var(--nav-h));
  min-height:calc(100svh - var(--nav-h));
  display:flex; align-items:center;
}
.choices{ gap:16px; }
.choices .btn{ min-width:300px; }

/* ===========================================================================
   11. the sign-up form (join.js) — a white sheet over the dimmed page. Its
       own dialog; it opens and closes like the one above.
   =========================================================================== */
.jf{
  position:fixed; inset:0; z-index:9600;
  opacity:0;
  transition:opacity var(--hover) var(--ease);
}
.jf[hidden]{ display:none; }
.jf.is-open{ opacity:1; }

.jf__panel{
  position:absolute; inset:0;
  background:rgba(0,0,0,.48);
  -webkit-backdrop-filter:saturate(180%) blur(20px);
  backdrop-filter:saturate(180%) blur(20px);
}
.jf__scroll{
  position:absolute; inset:0;
  overflow-y:auto; overscroll-behavior:contain;
  padding:64px 24px;
}
.jf__sheet{
  max-width:640px; margin-inline:auto;
  padding:48px;
  background:var(--bg);
  border-radius:28px;
  transform:scale(.96);
  transition:transform var(--hover) var(--ease);
}
.jf.is-open .jf__sheet{ transform:scale(1); }

/* In the window's corner, like the photo dialog's. Dark glass, so it reads
   on the backdrop and on the white sheet, which reaches it on a phone. */
.jf__close{
  position:absolute; top:16px; right:16px; z-index:2;
  width:44px; height:44px;
  display:grid; place-content:center;
  padding:0; border:0; border-radius:980px;
  background:rgba(29,29,31,.56);
  -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px);
  color:var(--text-on-dark);
  cursor:pointer;
  transition:background-color var(--hover) var(--ease), transform var(--hover) var(--ease);
}
.jf__close svg{ width:20px; height:20px; display:block; }
.jf__close:focus-visible{ outline-color:var(--text-on-dark); }

.jf__eyebrow{ font-size:14px; font-weight:600; line-height:1.43; color:var(--text-secondary); }
.jf__title{ margin-top:4px; font-size:32px; text-wrap:balance; }
.jf__title:focus{ outline:none; }
.jf__lead{ margin-top:12px; font-size:17px; line-height:1.47; color:var(--text-secondary); }
.jf__lead[hidden],
.jf__form[hidden],
.jf__step[hidden],
.jf__field[hidden],
.jf__done[hidden],
.jf .btn[hidden]{ display:none; }

.jf__form{ margin-top:32px; }
.jf__field + .jf__field{ margin-top:24px; }

.jf__label{
  display:block; margin-bottom:8px;
  font-size:14px; font-weight:600; line-height:1.43; color:var(--text);
}
.jf__opt{ font-weight:400; color:var(--text-tertiary); }

.jf__input{
  display:block; width:100%;
  min-height:48px; margin:0; padding:12px 16px;
  border:1px solid var(--divider); border-radius:12px;
  background:var(--bg); color:var(--text);
  font:inherit; font-size:17px; line-height:1.29; letter-spacing:-.012em;
  -webkit-appearance:none; appearance:none;
}
.jf__input::placeholder{ color:var(--text-tertiary); opacity:1; }
.jf__area{ min-height:120px; resize:vertical; }
.jf__select{
  padding-right:44px; cursor:pointer;
  background:var(--bg) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%236e6e73' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 16px center / 12px 8px;
}
.jf__select.is-empty{ color:var(--text-tertiary); }
.jf__select option{ color:var(--text); }

/* Instagram: the "@" sits inside the field, so nobody types it twice. */
.jf__handle{ position:relative; }
.jf__handle span{
  position:absolute; left:16px; top:50%; transform:translateY(-50%);
  font-size:17px; color:var(--text-tertiary); pointer-events:none;
}
.jf__handle .jf__input{ padding-left:36px; }

.jf__chips{ display:flex; flex-wrap:wrap; gap:8px; }
.jf__chip{
  display:inline-flex; align-items:center;
  min-height:36px; padding:8px 16px;
  border:0; border-radius:980px;
  background:var(--bg-alt); color:var(--text);
  font-size:14px; line-height:1.29; letter-spacing:-.008em; text-align:left;
  cursor:pointer;
  transition:background-color var(--hover) var(--ease), color var(--hover) var(--ease), transform var(--hover) var(--ease);
}
.jf__chip[aria-pressed="true"]{ background:var(--btn-bg); color:var(--btn-fg); }

.jf__hint{ margin-top:8px; font-size:14px; line-height:1.43; color:var(--text-tertiary); }
/* No colour for errors — black and white only — so the field's border
   darkens and the message is set in 600. */
.jf__err{ margin-top:8px; font-size:14px; font-weight:600; line-height:1.43; color:var(--text); }
.jf__err:empty{ display:none; }
.jf__field.is-bad .jf__input{ border-color:var(--text); box-shadow:inset 0 0 0 1px var(--text); }

.jf__bar{
  margin-top:40px;
  display:flex; align-items:center; justify-content:space-between; gap:16px;
}
.jf__count{ font-size:14px; line-height:1.43; color:var(--text-tertiary); font-variant-numeric:tabular-nums; }
.jf__buttons{ display:flex; gap:12px; }
.btn--quiet{ background:var(--bg-alt); color:var(--text); }
.jf .btn:disabled{ opacity:.56; cursor:default; }
.jf__status{ margin-top:16px; font-size:14px; font-weight:600; line-height:1.43; color:var(--text); }
.jf__status:empty{ display:none; }

.jf__done .btn{ margin-top:32px; }

@media (hover:hover){
  .jf__close:hover{ background:rgba(29,29,31,.72); transform:scale(1.02); }
  .jf__chip:hover{ background:#e8e8ed; }
  .jf__chip[aria-pressed="true"]:hover{ background:var(--btn-bg-hover); }
  .btn--quiet:hover{ background:#e8e8ed; }
  .jf .btn:disabled:hover{ transform:none; }
}
.jf__close:active,
.jf__chip:active{ transform:scale(.98); }

/* ===========================================================================
   scroll moments. These three, and nothing else.
   =========================================================================== */
/* The transition lives on the revealed state, not the hidden one. app.js adds
   .rise after the browser has already resolved a style for the headline, so a
   transition on .rise itself would animate it OUT over 800ms first. */
.rise{
  opacity:0;
  transform:translateY(20px);
}
.rise.is-in{
  opacity:1;
  transform:none;
  transition:opacity 800ms var(--ease), transform 800ms var(--ease);
}

/* ===========================================================================
   735–1068px
   =========================================================================== */
@media (max-width:1068px){
  .next__grid{ gap:40px; }
  .vs__photos{ margin-top:40px; }
  .stats{ margin-top:32px; gap:80px; }
  .vs__firms{ margin-top:24px; }
  .rows{ margin-top:32px; }
  .vs__photos img{ aspect-ratio:2/1; }
  .featured{ margin-top:32px; }
  .ecard__title{ font-size:21px; }
  .ecard--lg .ecard__title{ font-size:28px; }
  .ecard--lg .ecard__body{ padding:20px 24px 24px; }
  .also{ margin-top:48px; }
  .trow{ padding-block:12px; }
  .rows li{ padding-block:12px; }
  .foot__inner{ gap:8px; }
  .lb--plain .lb__scroll{ padding:64px; }
}

/* ===========================================================================
   734px and below
   =========================================================================== */
@media (max-width:734px){
  .nav__links,
  .nav__follow{ display:none; }
  .nav__toggle{ display:flex; }
  .nav__inner{ grid-template-columns:1fr auto; }
  .nav__logo img{ height:26px; }

  .next__grid{ grid-template-columns:1fr; gap:32px; }
  .next__poster{ border-radius:18px; }
  .next__text{ text-align:center; }
  .next__text .subhead{ margin-inline:auto; }
  .next .choices{ align-items:center; }


  .vs__photos{ grid-template-columns:1fr; margin-top:40px; }
  .stats{ margin-top:64px; gap:48px; }
  .vs__firms{ margin-top:40px; }

  /* One column of cards; the big one keeps its radius but drops to 4:3. */
  .featured{ grid-template-columns:1fr; margin-top:40px; }
  .ecard--lg .ecard__media img{ aspect-ratio:4/3; }
  .ecard__media img{ object-position:var(--pos-phone, var(--pos, 50% 50%)); }
  .ecard__body,
  .ecard--lg .ecard__body{ padding:16px 20px 20px; }
  .ecard__title{ font-size:21px; }
  .ecard--lg .ecard__title{ font-size:24px; }
  .also{ margin-top:48px; }
  .trow{ gap:12px; }
  .trow__date{ min-width:80px; }
  .trow--upcoming{ gap:16px; }
  .trow--upcoming .trow__chev{ margin-left:-8px; }

  .rows{ margin-top:40px; }
  .rows li{ gap:16px; }

  /* the two pills stack, one width; on a phone the sign-up page has no header */
  .choices{ flex-direction:column; align-items:center; }
  .choices .btn{ width:100%; max-width:340px; min-width:0; }
  .page-apply .nav{ display:none; }
  .page-apply .apply{ min-height:100vh; min-height:100svh; }

  .bleed img{ aspect-ratio:4/3; }
  .bleed__frame{ border-radius:18px; }

  .closing{ padding-block:72px; }

  .lb__scroll{ padding:64px 12px 24px; }
  .lb__sheet{ border-radius:18px; }
  .lb__stage{ height:min(52vh, 460px); }
  .lb__cap{ padding:12px 20px 0; }
  .lb__info{ padding:20px 20px 28px; }
  .lb__title{ font-size:28px; }
  .lb__lead{ font-size:17px; line-height:1.47; }
  .lb__people{ grid-template-columns:1fr; }
  .lb__close{ top:10px; right:10px; }
  .lb--plain .lb__scroll{ padding:72px 12px; }
  .lb--plain .lb__fig img{ max-width:92vw; max-height:68vh; }
  .lb__prev{ left:8px; }
  .lb__next{ right:8px; }

  .jf__scroll{ padding:64px 12px 24px; }
  .jf__sheet{ padding:32px 20px; border-radius:18px; }
  .jf__title{ font-size:28px; }
  .jf__close{ top:10px; right:10px; }
}

/* ===========================================================================
   reduced motion — every scroll moment and hover move is off, and
   everything that would have animated in is simply there.
   =========================================================================== */
@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
  }
  .rise{ opacity:1; transform:none; }
  .bleed img{ transform:none; }
  .ecard:hover, .vs__shot:hover{ transform:none; }
  .ecard:hover .ecard__media img,
  .vs__shot:hover img{ transform:none; }
  .trow:hover .trow__chev{ transform:none; }
  .btn:hover, .pill:hover, .lb__btn:hover, .jf__close:hover{ transform:none; }
}