/* The arrows are monochrome artwork, independent of platform emoji fonts. */
:root{--arrow-art:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 20L20 4M7 4h13v13' fill='none' stroke='black' stroke-width='1.5'/%3E%3C/svg%3E")}
.arrow:before,.arrow:after{content:'';background:currentColor;-webkit-mask:var(--arrow-art) center/contain no-repeat;mask:var(--arrow-art) center/contain no-repeat}
.event-action,.connect-send>span[aria-hidden]{display:inline-block;width:1em;height:1em;flex-shrink:0;line-height:0;color:inherit;background:currentColor;-webkit-mask:var(--arrow-art) center/contain no-repeat;mask:var(--arrow-art) center/contain no-repeat}
/* Artwork replaces the glyph; hiding the text also prevents emoji fallback. */
.event-action,.connect-send>span[aria-hidden]{text-indent:-9999px;overflow:hidden}
.chapter-prefix{display:none!important}
.home-story-mode .hero{min-height:calc(100svh - 48px);display:flex;flex-direction:column;padding-bottom:40px!important}
.home-story-mode .hero>.invitation{flex:1;align-content:center;padding-bottom:0}

/* A narrow window has the same full-width canvas as a phone. */
@media(max-width:900px){
 :root{--rail:0px;--gutter:clamp(20px,4vw,36px);--compact-nav:96px}
 body>.rail{position:relative;inset:auto;width:100%;height:var(--compact-nav);padding:12px var(--gutter) 8px;display:block;border:0;color:var(--ink);z-index:70}
 .rail .rail-label{display:block;font-size:10px;line-height:18px;color:#171715}
 .rail .primary-nav{display:flex;flex-direction:row;align-items:center;justify-content:space-between;gap:10px;margin:6px 0 0;padding:0;min-height:44px;overflow:visible}
 .rail .primary-nav a{font-size:clamp(13px,2.6vw,18px);padding:12px 0;line-height:20px;gap:4px;color:#171715;min-height:44px}
 .rail .primary-nav a[data-route="members"]{margin:0;gap:0;color:#f4f1ea}
 .rail .primary-nav a .arrow{width:14px;height:17px;margin:0!important}
 .rail .primary-nav a:not(.active) .arrow,.rail .primary-nav a[data-route="members"] .arrow{display:none}
 .rail .rail-secondary,.rail .rail-join,.rail .rail-bottom{display:none}
 .shell{margin-left:0;padding-inline:var(--gutter);--cap:calc((100vw - var(--gutter)*2)*166/960)}
 body:not(.in-room) #main{padding-top:24px}
 .home-story-mode .hero{min-height:calc(100svh - var(--compact-nav) - 24px);padding-bottom:32px!important}
 .home-story-mode .hero>.invitation{display:flex;flex-direction:column;justify-content:center;gap:0}
 .home-story-mode .invitation .invitation-image{width:100%;height:clamp(220px,36svh,380px);aspect-ratio:auto}
 .home-story-mode .invitation-image img{object-fit:cover;object-position:48% center}
 .home-story-mode .invitation-intro{--caption-overlap:0px;padding-top:22px}
 .home-story-mode .invitation-intro h2{font-size:clamp(27px,5vw,40px);padding:0;margin:0;min-height:0;max-width:100%}
 .home-story-mode .invitation-intro .invitation-description{font-size:clamp(17px,2.5vw,20px);line-height:1.5;padding-top:14px;max-width:46ch}
 body.projects-page{display:flex;flex-direction:column}
 body.projects-page>.rail{flex:none}
 body.projects-page>#shell[data-view="projects"]{flex:1;height:auto;min-height:0}
 body.projects-page #main{padding-top:24px;padding-bottom:22px}
 .home-story-mode .home-build{height:auto;min-height:calc(100svh - 24px)}
 .home-story-mode .home-build .project-reel{height:auto;grid-auto-columns:88%;gap:20px;scroll-snap-type:x proximity}
 .home-story-mode .home-build .project-slide{height:auto;grid-template-rows:auto auto}
 .home-story-mode .home-build .project-focus-cover{height:clamp(290px,48svh,480px);min-height:0}
}
/* Without the CAN chapter transition, the homepage is the opening hero only. */
@media(max-width:900px),(pointer:coarse){
 .home-story-mode .can-anchor,.home-story-mode .home-chapter,.home-story-mode .chapter-head:not(.first){display:none}
 .home-story-mode .chapter-head{position:relative;top:auto;display:flex;align-items:flex-start;padding:0;height:auto!important;margin-bottom:24px;z-index:1}
 .home-story-mode .chapter-head .chapter-prefix{display:block!important;width:calc(var(--prefix-width)/var(--chapter-width)*100%);height:auto;flex-shrink:0}
 .home-story-mode .chapter-head>svg:not(.chapter-prefix){width:calc(var(--suffix-width)/var(--chapter-width)*100%);height:auto;flex-shrink:0}
 .home-story-mode .chapter-head.first>svg:not(.chapter-prefix){margin-left:calc(-9.1/726*100%)}
 .home-story-mode .home-chapter{min-height:calc(100svh - 24px);padding-bottom:48px!important}
 .home-story-mode .home-read{min-height:calc(100svh - 24px)}
 .home-story-mode .project-reel{scroll-snap-type:x proximity}
}

@media (min-width: 1800px) and (pointer: fine) {
  #shell.home-story-mode {
    --gutter: max(40px, calc((100vw - var(--rail) - 1680px) / 2));
    --cap: min(190px, 18svh);
  }

  .home-story-mode .event-home-feature .event-home-window,
  .home-story-mode .event-home-feature .gathering-copy {
    min-height: clamp(320px, 38svh, 460px);
  }

  .home-story-mode .event-home-feature .gathering-copy h3 {
    max-width: min(74%, 32ch);
  }

  .home-story-mode [data-event-list="home"] .event-home-next .event-typesetting {
    min-height: clamp(148px, 16svh, 192px);
  }
}