/* Claude Code Society site. Layout: photo-led pages in the picked style (white card laid over a rounded photo, serif heads, pill buttons, wide quiet sections), recoloured garnet and gold. Light theme only. */
:root{
  --white:#FFFFFF;
  --ink:#2B1B20;          /* body text, 16.4:1 on white */
  --mute:#6A585D;         /* secondary text, 6.6:1 on white */
  --garnet:#782F40;       /* brand, 9.2:1 on white */
  --garnet-deep:#5C2331;
  --gold:#CEB888;         /* fills and rules only on white; text only on garnet (4.75:1) */
  --gold-ink:#7D6430;     /* gold-family text on white, 5.6:1 */
  --wash:#F6F1F2;         /* garnet-tinted panel */
  --goldwash:#F4EEE1;     /* small gold panels only */
  --line:#E8DEE0;
  --on-garnet:#F3E9EB;
  --display:"Manrope","Albert Sans",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif; /* the R2-1 logo face */
  --sans:"Albert Sans",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  --ease:cubic-bezier(.16,1,.3,1);
  --r-photo:22px; --r-card:18px;
  --gut:16px;
  color-scheme:light;
}
@view-transition{navigation:auto}
::view-transition-old(root){animation:vt-out .22s ease both}
::view-transition-new(root){animation:vt-in .42s var(--ease) both}
@keyframes vt-out{to{opacity:0}}
@keyframes vt-in{from{opacity:0;transform:translateY(10px)}}

*{box-sizing:border-box}
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;background:var(--white)}
body{margin:0;background:var(--white);color:var(--ink);font:17px/1.65 var(--sans);overflow-x:clip}
img{display:block;max-width:100%;height:auto}
a{color:var(--garnet);text-underline-offset:4px;text-decoration-thickness:1.5px}
::selection{background:var(--gold);color:var(--ink)}
:focus-visible{outline:3px solid var(--garnet);outline-offset:3px;border-radius:6px;box-shadow:0 0 0 7px rgba(206,184,136,.55)}
h1,h2,h3,h4{font-family:var(--display);font-weight:700;letter-spacing:-.025em;margin:0;text-wrap:balance;color:var(--ink)}
h1{font-size:clamp(34px,6vw,62px);line-height:1.06;font-weight:800;letter-spacing:-.032em}
h2{font-size:clamp(28px,4vw,46px);line-height:1.1;letter-spacing:-.03em}
h3{font-size:clamp(20px,2vw,23px);line-height:1.25;letter-spacing:-.015em}
h4{letter-spacing:-.01em}
p{margin:0 0 16px;max-width:36em}
.lead{font-size:clamp(18px,1.6vw,20px);line-height:1.6;color:var(--ink)}
.muted{color:var(--mute)}
.wrap{max-width:1240px;margin:0 auto;padding-inline:var(--gut)}
.sec{padding-block:72px}
.sec.tight{padding-top:0}
.sec-head{display:grid;gap:14px;margin-bottom:36px}
.sec-head p{margin:0}
.ph{color:var(--garnet);background:linear-gradient(transparent 62%,rgba(206,184,136,.55) 62%);padding:0 2px;border-radius:2px;-webkit-box-decoration-break:clone;box-decoration-break:clone;font-style:normal}
.sample{display:inline-flex;align-items:center;gap:6px;font:600 13px/1 var(--sans);letter-spacing:.04em;color:var(--gold-ink);background:var(--goldwash);border:1px solid #E3D6B8;border-radius:999px;padding:6px 10px}
.sample::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--gold)}
.skip{position:absolute;left:12px;top:-60px;z-index:50;background:var(--garnet);color:#fff;padding:10px 16px;border-radius:999px}
.skip:focus{top:12px}
@media (min-width:1000px){.stick-wide{position:sticky;top:110px}}
.vh{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* buttons */
.btn{--bg:var(--garnet);--fg:#fff;display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:48px;padding:0 24px;border-radius:999px;border:0;cursor:pointer;
  font:600 16px/1 var(--sans);text-decoration:none;color:var(--fg);
  background:linear-gradient(var(--gold),var(--gold)) no-repeat left center/0% 100%,var(--bg);
  transition:background-size .45s var(--ease),color .3s var(--ease),transform .2s var(--ease)}
.btn:hover{background-size:100% 100%;color:var(--garnet)}
.btn:active{transform:scale(.97)}
.btn .arr{width:18px;height:12px;flex:none;transition:transform .35s var(--ease)}
.btn:hover .arr{transform:translateX(4px)}
.btn.ghost{--bg:transparent;--fg:var(--garnet);box-shadow:inset 0 0 0 2px var(--garnet)}
.btn.ghost:hover{box-shadow:inset 0 0 0 2px var(--gold)}
.btn.on-garnet{--bg:var(--gold);--fg:var(--garnet);background:linear-gradient(#fff,#fff) no-repeat left center/0% 100%,var(--gold)}
.btn.on-garnet:hover{color:var(--garnet)}
.textlink{display:inline-flex;align-items:center;gap:8px;min-height:44px;font-weight:600;text-decoration:none;color:var(--garnet);background:linear-gradient(var(--gold),var(--gold)) no-repeat left 82%/0% 2px;transition:background-size .4s var(--ease)}
.textlink:hover{background-size:100% 2px}
.textlink .arr{width:16px;height:11px;transition:transform .35s var(--ease)}
.textlink:hover .arr{transform:translateX(4px)}

/* header */
.top{position:sticky;top:env(safe-area-inset-top,0px);z-index:30;background:rgba(255,255,255,.92);backdrop-filter:saturate(1.4) blur(10px);-webkit-backdrop-filter:saturate(1.4) blur(10px);transition:box-shadow .3s}
.top.scrolled{box-shadow:0 1px 0 var(--line),0 10px 30px -24px rgba(92,35,49,.5)}
.top .wrap{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:68px}
.brand{display:flex;align-items:center;gap:10px;min-height:44px;text-decoration:none;color:var(--ink)}
.top .brand img{width:auto;height:30px}
/* below 350 px the One line logo can't keep its 200 px minimum beside the menu button, so the header shows the Small mark */
.top .brand{flex:none}
@media (min-width:350px) and (max-width:371px){.top .brand img{height:27px}}
@media (max-width:349px){.top .brand img{height:32px}}
@media (min-width:430px){.top .brand img{height:34px}}
@media (min-width:1240px){.top .brand img{height:38px}}
.nav{display:none}
.menu-btn{display:inline-flex;align-items:center;gap:10px;min-height:44px;min-width:44px;padding:0 16px;border-radius:999px;border:0;background:var(--wash);color:var(--garnet);font:600 16px/1 var(--sans);cursor:pointer}
.menu-btn i{position:relative;width:18px;height:2px;background:currentColor;border-radius:2px;transition:background .2s}
.menu-btn i::before,.menu-btn i::after{content:"";position:absolute;left:0;width:18px;height:2px;background:currentColor;border-radius:2px;transition:transform .35s var(--ease)}
.menu-btn i::before{top:-6px}.menu-btn i::after{top:6px}
.menu-btn[aria-expanded="true"] i{background:transparent}
.menu-btn[aria-expanded="true"] i::before{transform:translateY(6px) rotate(45deg)}
.menu-btn[aria-expanded="true"] i::after{transform:translateY(-6px) rotate(-45deg)}
.sheet{position:fixed;inset:68px 0 auto 0;z-index:29;background:var(--white);border-bottom:1px solid var(--line);padding:8px var(--gut) 24px;box-shadow:0 30px 60px -30px rgba(92,35,49,.45);
  clip-path:inset(0 0 100% 0);visibility:hidden;transition:clip-path .45s var(--ease),visibility 0s .45s}
.sheet.open{clip-path:inset(0 0 0 0);visibility:visible;transition:clip-path .45s var(--ease)}
.sheet a{display:flex;align-items:center;justify-content:space-between;min-height:52px;border-bottom:1px solid var(--line);font:700 22px/1.1 var(--display);letter-spacing:-.02em;color:var(--ink);text-decoration:none;opacity:0;transform:translateY(-8px);transition:opacity .3s,transform .4s var(--ease)}
.sheet.open a{opacity:1;transform:none}
.sheet a[aria-current="page"]{color:var(--garnet)}
.sheet a[aria-current="page"]::after{content:"";width:10px;height:10px;border-radius:50%;background:var(--gold)}
.sheet a.btn{margin-top:18px;width:100%;justify-content:center;border-bottom:0;font:600 16px/1 var(--sans);color:#fff}
.sheet a.btn[aria-current="page"]{color:var(--garnet);background-size:100% 100%}
.sheet a.btn::after{display:none}
@media (min-width:1080px){
  .menu-btn,.sheet{display:none}
  .nav{display:flex;align-items:center;gap:2px}
  .nav a{position:relative;display:flex;align-items:center;min-height:44px;padding:0 11px;color:var(--ink);text-decoration:none;font-weight:500;font-size:16px}
  .nav a::after{content:"";position:absolute;left:11px;right:11px;bottom:8px;height:2px;background:var(--gold);transform:scaleX(0);transform-origin:left;transition:transform .35s var(--ease)}
  .nav a:hover::after{transform:scaleX(1)}
  .nav a[aria-current="page"]{color:var(--garnet)}
  .nav a[aria-current="page"]::after{transform:scaleX(1);background:var(--garnet)}
  .nav .btn{margin-left:10px;min-height:44px;padding:0 20px;color:#fff}
  .nav .btn:hover,.nav .btn[aria-current="page"]{color:var(--garnet)}
  .nav .btn[aria-current="page"]{background-size:100% 100%}
  .nav .btn::after{display:none}
}

/* page intro (inner pages) */
.intro{padding-block:40px 24px}
.intro .crumb{font-weight:600;color:var(--gold-ink);margin:0 0 14px;font-size:15px}
.intro h1{max-width:15em}
.intro .lead{margin-top:20px;max-width:40em}
.photo{border-radius:var(--r-photo);overflow:hidden;background:var(--wash)}
.photo img{width:100%;height:100%;object-fit:cover}
.banner{height:260px;margin-top:8px}
@media (min-width:1000px){.banner{height:460px}}

/* inner page head: rounded media with the title card laid over its corner, like the home hero */
.pagehead{padding-top:8px}
.pagehead .media{position:relative;height:230px;overflow:hidden;background:var(--garnet)}
.pagehead .media img{width:100%;height:100%;object-fit:cover;transform:scale(1.06);animation:settle 1.6s var(--ease) .1s forwards}
.pagehead .card{position:relative;background:var(--white);margin:-48px var(--gut) 0;padding:24px 20px 4px;border-radius:var(--r-card) var(--r-card) 0 0}
.pagehead .crumb{font-weight:600;color:var(--gold-ink);margin:0 0 12px;font-size:15px}
.pagehead .crumb a{color:var(--gold-ink)}
.pagehead h1{font-size:clamp(32px,5.2vw,56px)}
.pagehead .lead{margin-top:18px;max-width:40em}
.pagehead + .sec{padding-top:48px}
@media (min-width:1000px){.pagehead + .sec{padding-top:88px}}
.pattern{display:grid;place-items:center;background:var(--garnet);background-image:radial-gradient(rgba(206,184,136,.22) 1.2px,transparent 1.2px);background-size:22px 22px}
.pattern{align-items:start;padding-top:34px}
.pattern svg{width:min(52%,220px);height:auto;overflow:visible}
@media (min-width:1000px){.pattern{place-items:center end;padding:0 9% 40px 0}.pattern svg{width:300px}}
.pattern .br{fill:none;stroke:var(--gold);stroke-width:9;stroke-linecap:round;stroke-linejoin:round}
.pattern .dt{fill:#fff;animation:think 1.4s ease-in-out infinite}
.pattern .dt:nth-of-type(2){animation-delay:.18s;fill:var(--gold)}
.pattern .dt:nth-of-type(3){animation-delay:.36s}
@keyframes think{0%,60%,100%{transform:translateY(0);opacity:.55}30%{transform:translateY(-10px);opacity:1}}
.pattern .dt{transform-box:fill-box;transform-origin:center}
@media (min-width:1000px){
  .pagehead{padding-top:12px}
  .pagehead .media{height:420px;max-width:1360px;margin:0 auto;border-radius:var(--r-photo)}
  .pagehead .inner{max-width:1240px;margin:0 auto;padding-inline:var(--gut)}
  .pagehead .card{margin:-170px 0 0;width:800px;padding:44px 48px 8px;border-radius:var(--r-photo) var(--r-photo) 0 0}
}

/* home hero */
.hero{position:relative;padding-top:8px}
.hero-photo{height:clamp(150px,calc(100svh - 540px),300px);border-radius:0;overflow:hidden;position:relative}
.hero-photo img{width:100%;height:100%;object-fit:cover;object-position:50% 45%;transform:scale(1.06);animation:settle 1.6s var(--ease) .1s forwards}
@keyframes settle{to{transform:scale(1)}}
.hero-card{position:relative;background:var(--white);margin:-56px var(--gut) 0;padding:26px 20px 24px;border-radius:var(--r-card) var(--r-card) 0 0}
.hero-card .where{font-weight:600;color:var(--gold-ink);margin:0 0 12px;font-size:15px}
.hero-card .lead{margin-top:18px}
.acts{display:flex;flex-wrap:wrap;gap:12px;margin-top:24px}
.meetline{display:flex;gap:12px;align-items:flex-start;margin:26px 0 0;padding-top:18px;border-top:1px solid var(--line);font-weight:500;max-width:none}
.meetline .dot{flex:none;width:12px;height:12px;border-radius:50%;background:var(--gold);margin-top:8px;box-shadow:0 0 0 0 rgba(206,184,136,.7);animation:ping 2.4s ease-out infinite}
@keyframes ping{0%{box-shadow:0 0 0 0 rgba(206,184,136,.8)}80%,100%{box-shadow:0 0 0 12px rgba(206,184,136,0)}}

/* prompt widget */
.prompt{position:relative;background:var(--white);border-radius:var(--r-card);box-shadow:0 1px 0 var(--line),0 28px 60px -34px rgba(92,35,49,.55);border:1px solid var(--line);padding:18px 18px 16px;margin:20px var(--gut) 0}
.prompt-top{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:12px}
.prompt-top b{display:flex;align-items:center;gap:8px;font-size:14px;font-weight:600;color:var(--mute)}
.prompt-top b::before{content:"";width:9px;height:9px;border-radius:50%;background:var(--garnet)}
.prompt-line{min-height:3.4em;font-size:19px;line-height:1.45;color:var(--ink);font-weight:500;margin:0;max-width:none}
.caret{display:inline-block;width:2px;height:1.05em;background:var(--garnet);vertical-align:-3px;margin-left:2px;animation:blink 1s steps(1) infinite}
@keyframes blink{50%{opacity:0}}
.stages{list-style:none;margin:14px 0 0;padding:14px 0 0;border-top:1px dashed var(--line);display:grid;grid-template-columns:repeat(3,1fr);gap:8px;position:relative}
.stages li{position:relative;display:flex;flex-direction:column;gap:6px;font-size:14px;font-weight:600;color:var(--mute);transition:color .3s}
.stages li .bar{height:6px;border-radius:6px;background:var(--wash);overflow:hidden}
.stages li .bar i{display:block;height:100%;width:100%;background:var(--garnet);transform:scaleX(0);transform-origin:left;transition:transform .9s var(--ease)}
.stages li.on{color:var(--garnet)}
.stages li.on .bar i{transform:scaleX(1)}
.stages li.done .bar i{background:var(--gold)}
.prompt small{display:block;margin-top:12px;color:var(--mute);font-size:13.5px}
/* Feedback pass 1: the hero fits the first screen. On a phone the photo shortens with the screen height so the
   title card, its headline, supporting line and Join button sit above the fold. On desktop the photo fills the
   first screen and both cards sit on it: the title card bottom left, the prompt card bottom right. */
@media (min-width:1000px){
  .hero{padding:12px 16px 0;max-width:1392px;margin:0 auto;display:grid}
  .hero-photo,.hero-inner{grid-area:1 / 1}
  .hero-photo{height:auto;border-radius:var(--r-photo)}
  .hero-photo img{position:absolute;inset:0}
  .hero-inner{position:relative;display:flex;align-items:flex-end;justify-content:space-between;gap:32px;min-height:clamp(540px,calc(100svh - 104px),820px);padding:40px max(32px,calc(50% - 580px))}
  .hero-card{margin:0;width:min(660px,60%);padding:38px 44px 30px;border-radius:var(--r-photo);box-shadow:0 34px 70px -40px rgba(43,27,32,.7)}
  .hero-card h1{font-size:clamp(40px,min(3.9vw,6.6svh),58px)}
  .hero-card .lead{margin-top:16px}
  .hero-card .acts{margin-top:22px}
  .hero-card .meetline{margin-top:22px;padding-top:16px}
  .prompt{position:relative;flex:0 1 410px;min-width:300px;margin:0;box-shadow:0 34px 70px -40px rgba(43,27,32,.7);animation:rise .9s var(--ease) .35s both}
}
@keyframes rise{from{opacity:0;transform:translateY(18px)}}

/* build path */
.path{position:relative;display:grid;gap:30px;list-style:none;margin:0;padding:0 0 0 42px;--p:1}
.path::before,.path::after{content:"";position:absolute;left:13px;top:8px;bottom:8px;width:3px;border-radius:3px;background:var(--line)}
.path::after{background:linear-gradient(var(--garnet),var(--gold));transform:scaleY(var(--p));transform-origin:top;transition:transform .15s linear}
.path li{position:relative}
.path .node{position:absolute;left:-42px;top:2px;width:29px;height:29px;border-radius:50%;background:var(--white);box-shadow:inset 0 0 0 3px var(--line);display:grid;place-items:center;transition:box-shadow .4s var(--ease),background .4s var(--ease);z-index:1}
.path .node svg{width:15px;height:15px;opacity:.35;transition:opacity .4s}
.path li.lit .node{background:var(--garnet);box-shadow:inset 0 0 0 3px var(--garnet),0 0 0 6px rgba(206,184,136,.35)}
.path li.lit .node svg{opacity:1}
.path .step{font:600 14px/1 var(--sans);color:var(--gold-ink);display:block;margin-bottom:8px}
.path h3{margin-bottom:6px}
.path p{color:var(--mute);margin:0}
@media (min-width:1000px){
  .path{grid-auto-flow:column;grid-auto-columns:1fr;gap:36px;padding:52px 0 0}
  .path::before,.path::after{left:14px;right:14px;top:14px;bottom:auto;width:auto;height:3px}
  .path::after{transform:scaleX(var(--p));transform-origin:left}
  .path .node{left:0;top:-52px}
}

/* rails */
.rail-wrap{position:relative}
.rail{display:grid;grid-auto-flow:column;grid-auto-columns:82%;gap:16px;overflow-x:auto;scroll-snap-type:x mandatory;padding:4px var(--gut) 24px;scroll-padding-inline:var(--gut);margin-inline:calc(var(--gut) * -1);scrollbar-width:none;overscroll-behavior-x:contain;cursor:grab}
.rail::-webkit-scrollbar{display:none}
.rail.dragging{cursor:grabbing;scroll-snap-type:none}
.rail > *{scroll-snap-align:start;min-width:0}
.rail-ctl{display:flex;align-items:center;gap:14px;margin-top:4px}
.rail-ctl button{width:48px;height:48px;border-radius:50%;border:0;background:var(--wash);color:var(--garnet);cursor:pointer;display:grid;place-items:center;transition:background .25s,transform .2s}
.rail-ctl button:hover{background:var(--gold)}
.rail-ctl button:active{transform:scale(.94)}
.rail-ctl button:disabled{opacity:.4;cursor:default;background:var(--wash)}
.rail-ctl svg{width:18px;height:14px}
.rail-ctl .flip{transform:scaleX(-1)}
.rail-prog{flex:1;height:3px;background:var(--line);border-radius:3px;overflow:hidden}
.rail-prog i{display:block;height:100%;background:var(--garnet);transform-origin:left;transform:scaleX(var(--rp,.2));transition:transform .2s}
@media (min-width:700px){.rail{grid-auto-columns:46%}}
@media (min-width:1000px){.rail{--edge:max(var(--gut),calc((100vw - 1240px) / 2 + var(--gut)));grid-auto-columns:calc((min(100vw,1240px) - 2 * var(--gut) - 48px) / 3.3);gap:24px;padding-inline:var(--edge);scroll-padding-inline:var(--edge);margin-inline:calc(-1 * var(--edge))}}
.duo{display:grid;grid-template-columns:1fr;gap:16px}
@media (min-width:600px){.duo{grid-template-columns:1fr 1fr}}
.band .ph,.foot .ph{color:#fff;background:linear-gradient(transparent 60%,rgba(206,184,136,.5) 60%)}

.way{display:flex;flex-direction:column;gap:14px;text-decoration:none;color:var(--ink)}
.way .photo{aspect-ratio:4/3}
.way .photo img{transition:transform .8s var(--ease)}
.way:hover .photo img{transform:scale(1.05)}
.way h3{display:flex;align-items:center;justify-content:space-between;gap:12px}
.way h3 svg{width:22px;height:14px;color:var(--garnet);flex:none;transition:transform .35s var(--ease)}
.way:hover h3 svg{transform:translateX(5px)}
.way p{margin:0;color:var(--mute)}

.chips{display:flex;flex-wrap:wrap;gap:8px}
.chips button{min-height:44px;padding:0 18px;border-radius:999px;border:1.5px solid var(--line);background:var(--white);color:var(--ink);font:600 15px/1 var(--sans);cursor:pointer;transition:background .25s,border-color .25s,color .25s}
.chips button:hover{border-color:var(--gold)}
.chips button[aria-pressed="true"]{background:var(--garnet);border-color:var(--garnet);color:#fff}

/* project cards */
.proj{position:relative;display:flex;flex-direction:column;border-radius:var(--r-card);background:var(--white);border:1px solid var(--line);overflow:hidden;transition:transform .45s var(--ease),box-shadow .45s var(--ease)}
.proj:hover{transform:translateY(-6px) rotate(-.4deg);box-shadow:0 30px 50px -34px rgba(92,35,49,.6)}
.proj .screen{position:relative;aspect-ratio:16/10;background:var(--wash);padding:16px;display:grid;place-items:stretch;overflow:hidden}
.proj .body{padding:18px 20px 22px;display:grid;gap:8px}
.proj .body h3{font-size:24px}
.proj .body p{margin:0;color:var(--mute)}
.proj .meta{display:flex;flex-wrap:wrap;gap:8px;margin-top:6px}
.proj .meta span{font-size:13.5px;font-weight:600;color:var(--mute);background:var(--wash);border-radius:999px;padding:5px 10px}
.proj .sample{position:absolute;top:12px;left:12px;z-index:2}
/* mini app screens, drawn in CSS */
.ui{background:var(--white);border-radius:10px;box-shadow:0 12px 30px -18px rgba(92,35,49,.5);padding:10px;display:grid;gap:7px;align-content:start;transition:transform .6s var(--ease)}
.proj:hover .ui{transform:translateY(-4px) scale(1.02)}
.ui .bar{display:flex;gap:4px}
.ui .bar i{width:7px;height:7px;border-radius:50%;background:var(--line)}
.ui .row{display:flex;gap:6px;align-items:center}
.ui .blk{height:9px;border-radius:5px;background:var(--line)}
.ui .g{background:var(--garnet)} .ui .y{background:var(--gold)} .ui .w{background:var(--wash)}
.ui .tile{border-radius:8px;background:var(--wash);height:34px}
.ui .grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}
.ui .grid2{display:grid;grid-template-columns:1fr 1fr;gap:6px}
.ui .chart{display:flex;align-items:flex-end;gap:5px;height:56px}
.ui .chart i{flex:1;border-radius:4px 4px 0 0;background:var(--gold);transform-origin:bottom;transition:transform .7s var(--ease)}
.ui .chart i:nth-child(odd){background:var(--garnet)}
.proj:hover .ui .chart i{transform:scaleY(.6)}
.proj:hover .ui .chart i:nth-child(3n){transform:scaleY(1.15)}

/* event rows */
.evs{border-top:1px solid var(--line)}
.ev{display:grid;gap:6px;padding:22px 0;border-bottom:1px solid var(--line);position:relative}
.ev .date{font:700 22px/1.1 var(--display);letter-spacing:-.02em;color:var(--garnet)}
.ev h3{font-size:23px}
.ev p{margin:0;color:var(--mute)}
@media (min-width:1000px){.ev{grid-template-columns:240px 1fr 220px;gap:32px;align-items:baseline;padding:28px 0}.ev .date{font-size:30px}.ev .room{text-align:right}}

/* garnet band */
.band{background:var(--garnet);color:#fff;position:relative;overflow:hidden}
.band h2,.band h3{color:#fff}
.band p{color:var(--on-garnet)}
.band a:not(.btn){color:var(--gold)}
.band .gold{color:var(--gold)}

/* join band (home) */
.joinband{position:relative;padding:0}
.joinband .ph-img{height:260px;overflow:hidden}
.joinband .ph-img img{width:100%;height:100%;object-fit:cover;object-position:50% 40%}
.joinband .card{position:relative;background:var(--white);margin:-60px var(--gut) 0;border-radius:var(--r-card);padding:28px 20px;box-shadow:0 24px 50px -30px rgba(92,35,49,.55)}
@media (min-width:1000px){
  .joinband{max-width:1360px;margin:0 auto}
  .joinband .ph-img{height:600px;border-radius:var(--r-photo)}
  /* centred with inset and auto margins, not a transform: the reveal's own transform used to replace the centring
     and push the card 320px past the right edge at 1000 to 1300 wide */
  .joinband .card{position:absolute;inset:0;margin:auto;height:fit-content;width:640px;padding:46px 50px}
}

/* independence */
/* about page: the one logo feature, Seal at Florida State University (smallest 160 px on screen) */
.logo-feature{display:grid;gap:28px;align-items:center;background:var(--wash);border-radius:var(--r-card);padding:28px 20px}
.logo-feature .txt{display:grid;gap:14px}
.logo-feature .txt p{margin:0}
.logo-feature img{width:220px;height:auto;justify-self:center}
@media (min-width:1000px){.logo-feature{grid-template-columns:1fr auto;gap:64px;padding:48px 56px}.logo-feature img{width:260px}}
.indep{border:1.5px solid var(--line);border-radius:var(--r-card);padding:24px 20px;display:grid;gap:16px;background:var(--white)}
.indep h2{font-size:clamp(26px,3vw,34px)}
.indep .anth{font:500 21px/1.4 var(--display);color:var(--garnet);margin:0;max-width:none}
.indep blockquote{margin:0;padding:16px 18px;background:var(--wash);border-radius:12px;color:var(--ink);font-size:15.5px;line-height:1.6}
.indep blockquote p{margin:0;max-width:none}
@media (min-width:1000px){.indep{grid-template-columns:5fr 7fr;gap:48px;padding:40px 44px}}

/* accordion with imagery */
.acc{display:grid;gap:28px}
.acc-list{border-top:1px solid var(--line)}
.acc-item{border-bottom:1px solid var(--line)}
.acc-item h3{font-size:inherit}
.acc-btn{width:100%;display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:64px;padding:12px 0;background:none;border:0;cursor:pointer;text-align:left;font:700 clamp(20px,2vw,25px)/1.25 var(--display);letter-spacing:-.02em;color:var(--ink);transition:color .25s}
.acc-btn:hover{color:var(--garnet)}
.acc-btn .pm{flex:none;position:relative;width:28px;height:28px;border-radius:50%;background:var(--wash);transition:background .3s,transform .45s var(--ease)}
.acc-btn .pm::before,.acc-btn .pm::after{content:"";position:absolute;left:8px;right:8px;top:13px;height:2px;background:var(--garnet);border-radius:2px}
.acc-btn .pm::after{transform:rotate(90deg);transition:transform .45s var(--ease)}
.acc-btn[aria-expanded="true"]{color:var(--garnet)}
.acc-btn[aria-expanded="true"] .pm{background:var(--gold);transform:rotate(180deg)}
.acc-btn[aria-expanded="true"] .pm::after{transform:rotate(0)}
.acc-panel{display:grid;grid-template-rows:0fr;transition:grid-template-rows .5s var(--ease)}
.acc-panel > div{overflow:hidden}
.acc-item.open .acc-panel{grid-template-rows:1fr}
.acc-panel .inner{padding:0 0 22px}
.acc-panel p{color:var(--mute);margin-bottom:12px}
.acc-panel .mob{border-radius:14px;overflow:hidden;aspect-ratio:16/10;margin-bottom:16px}
.acc-panel .mob img{width:100%;height:100%;object-fit:cover}
.acc-stage{display:none}
@media (min-width:1000px){
  .acc{grid-template-columns:6fr 5fr;gap:64px;align-items:start}
  .acc-panel .mob{display:none}
  .acc-stage{display:block;position:sticky;top:100px;aspect-ratio:4/5;border-radius:var(--r-photo);overflow:hidden;background:var(--wash)}
  .acc-stage img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;clip-path:inset(0 0 100% 0);transform:scale(1.08);transition:clip-path .8s var(--ease),transform 1.2s var(--ease)}
  .acc-stage img.on{clip-path:inset(0 0 0 0);transform:scale(1);z-index:1}
  .acc-stage figcaption{position:absolute;left:16px;bottom:16px;z-index:3;background:rgba(255,255,255,.94);border-radius:999px;padding:8px 14px;font-weight:600;font-size:14px;color:var(--garnet)}
}

/* starter track */
.track{list-style:none;margin:0;padding:0;display:grid;gap:0;counter-reset:s;position:relative}
.track li{display:grid;grid-template-columns:56px 1fr;gap:14px;align-items:start;padding:18px 0;border-top:1px solid var(--line);position:relative}
.track li:last-child{border-bottom:1px solid var(--line)}
.track .n{font:800 30px/1 var(--display);color:var(--line);transition:color .5s var(--ease)}
.track li.lit .n{color:var(--garnet)}
.track h3{font-size:22px;margin-bottom:4px}
.track p{margin:0;color:var(--mute);font-size:16px}
.track li::after{content:"";position:absolute;left:0;top:-1px;height:2px;width:100%;background:var(--gold);transform:scaleX(0);transform-origin:left;transition:transform .8s var(--ease)}
.track li.lit::after{transform:scaleX(1)}
@media (min-width:1000px){.track{grid-template-columns:1fr 1fr;column-gap:56px}.track li:nth-last-child(2){border-bottom:1px solid var(--line)}}

/* timeline (events) */
.tabs{display:inline-flex;gap:6px;padding:6px;background:var(--wash);border-radius:999px;margin-bottom:28px;position:relative}
.tabs button{position:relative;z-index:1;min-height:44px;padding:0 20px;border:0;background:none;border-radius:999px;font:600 16px/1 var(--sans);color:var(--mute);cursor:pointer;transition:color .3s}
.tabs button[aria-selected="true"]{color:#fff}
.tabs .pill{position:absolute;top:6px;bottom:6px;left:6px;border-radius:999px;background:var(--garnet);transition:transform .45s var(--ease),width .45s var(--ease)}
.tl{display:grid;gap:24px}
.tl-line{position:relative;display:flex;gap:0;overflow-x:auto;scrollbar-width:none;padding:6px 2px 10px}
.tl-line::-webkit-scrollbar{display:none}
.tl-line::before{content:"";position:absolute;left:24px;right:24px;top:29px;height:3px;background:var(--line);border-radius:3px}
.tl-node{position:relative;flex:1 0 128px;display:flex;flex-direction:column;align-items:center;gap:10px;background:none;border:0;cursor:pointer;padding:0 6px;font:inherit;color:var(--mute);min-height:44px}
.tl-node .dot{width:48px;height:48px;border-radius:50%;background:var(--white);box-shadow:inset 0 0 0 3px var(--line);display:grid;place-items:center;transition:box-shadow .35s var(--ease),background .35s var(--ease),transform .35s var(--ease);position:relative;z-index:1}
.tl-node .dot svg{width:20px;height:20px;color:var(--garnet)}
.tl-node:hover .dot{transform:translateY(-3px);box-shadow:inset 0 0 0 3px var(--gold)}
.tl-node[aria-selected="true"] .dot{background:var(--garnet);box-shadow:inset 0 0 0 3px var(--garnet),0 0 0 7px rgba(206,184,136,.4)}
.tl-node[aria-selected="true"] .dot svg{color:#fff}
.tl-node b{font-weight:600;font-size:14.5px;line-height:1.25;text-align:center;color:var(--ink)}
.tl-node span{font-size:13.5px;text-align:center}
.tl-panel{border-radius:var(--r-card);background:var(--wash);padding:24px 20px;display:grid;gap:18px;min-height:220px}
.tl-panel[data-anim]{animation:panel .5s var(--ease)}
@keyframes panel{from{opacity:.2;transform:translateY(10px)}}
.tl-panel h3{font-size:clamp(26px,3vw,36px)}
.tl-panel dl{display:grid;grid-template-columns:auto 1fr;gap:8px 16px;margin:0}
.tl-panel dt{font-weight:600;color:var(--mute)}
.tl-panel dd{margin:0}
.tl-panel .ph-photo{border-radius:14px;overflow:hidden;aspect-ratio:16/9}
.tl-panel .ph-photo img{width:100%;height:100%;object-fit:cover}
@media (min-width:1000px){.tl-panel{grid-template-columns:1.1fr 1fr;padding:36px 40px;gap:40px;align-items:center}}
/* phones: the stops run down the page instead of a sideways strip whose last stop sat past the edge */
@media (max-width:699px){
  .tl-line{flex-direction:column;overflow:visible;padding:8px 0 8px 8px;gap:8px}
  .tl-line::before{left:30.5px;right:auto;top:32px;bottom:32px;width:3px;height:auto}
  .tl-node{flex:none;display:grid;grid-template-columns:48px 1fr;column-gap:16px;row-gap:1px;align-items:center;justify-items:start;padding:0;text-align:left}
  .tl-node .dot{grid-row:1 / span 2}
  .tl-node b{align-self:end;text-align:left}
  .tl-node > span:not(.dot){align-self:start;text-align:left}
  .tl-node:hover .dot{transform:none}
}

/* competition rules card */
.rules{border-radius:var(--r-card);border:1.5px solid var(--line);overflow:hidden;background:var(--white)}
.rules-head{background:var(--garnet);color:#fff;padding:22px 20px;display:flex;flex-wrap:wrap;justify-content:space-between;gap:10px;align-items:baseline}
.rules-head h3{color:#fff}
.rules-head span{color:var(--gold);font-weight:600}
.rules dl{margin:0;display:grid}
.rules dl > div{display:grid;gap:4px;padding:16px 20px;border-top:1px solid var(--line)}
.rules dt{font-weight:600;color:var(--mute);font-size:15px}
.rules dd{margin:0}
@media (min-width:800px){.rules dl > div{grid-template-columns:200px 1fr;gap:24px}}
.stops{display:grid;grid-template-columns:repeat(3,1fr);gap:0;margin:28px 0 8px;position:relative}
.stops::before{content:"";position:absolute;left:16.6%;right:16.6%;top:17px;height:3px;background:var(--line)}
.stops::after{content:"";position:absolute;left:16.6%;right:16.6%;top:17px;height:3px;background:var(--garnet);transform:scaleX(var(--sp,1));transform-origin:left;transition:transform 1.4s var(--ease)}
.stops div{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;text-align:center;gap:8px}
.stops i{width:37px;height:37px;border-radius:50%;background:var(--white);box-shadow:inset 0 0 0 3px var(--garnet);display:block}
.stops div:last-child i{background:var(--gold);box-shadow:inset 0 0 0 3px var(--gold)}
.stops b{font-weight:600}
.stops span{color:var(--mute);font-size:15px}

/* platform mock */
.mock{border-radius:var(--r-card);border:1px solid var(--line);background:var(--white);box-shadow:0 40px 80px -50px rgba(92,35,49,.6);overflow:hidden}
.mock-top{display:flex;align-items:center;gap:10px;padding:12px 16px;border-bottom:1px solid var(--line);background:var(--wash)}
.mock-top i{width:10px;height:10px;border-radius:50%;background:var(--line)}
.mock-top span{margin-left:8px;font-size:13.5px;font-weight:600;color:var(--mute)}
.mock-top .stamp{margin-left:auto}
.mock-body{display:grid;gap:14px;padding:16px}
.mock .m{border-radius:12px;background:var(--wash);padding:14px;display:grid;gap:9px;align-content:start}
.mock .m h4{font:600 14px/1.2 var(--sans);color:var(--garnet)}
.mock .blk{height:10px;border-radius:6px;background:var(--line);transform-origin:left;animation:grow 1s var(--ease) both}
.mock .blk.g{background:var(--garnet)} .mock .blk.y{background:var(--gold)}
@keyframes grow{from{transform:scaleX(0)}}
.mock .prog{height:10px;border-radius:6px;background:var(--line);overflow:hidden}
.mock .prog i{display:block;height:100%;background:linear-gradient(90deg,var(--garnet),var(--gold));transform-origin:left;animation:grow 1.6s var(--ease) .4s both}
.board{position:relative;min-height:320px;border-radius:12px;background:var(--goldwash);background-image:radial-gradient(rgba(125,100,48,.18) 1px,transparent 1px);background-size:16px 16px;overflow:hidden;touch-action:none}
.note{position:absolute;width:132px;min-height:96px;padding:10px 12px;border-radius:4px;background:#fff;box-shadow:0 10px 22px -12px rgba(92,35,49,.55);font-size:14px;line-height:1.35;color:var(--ink);cursor:grab;user-select:none;transition:box-shadow .2s,transform .2s}
.note.y{background:#EFE3C4}
.note.dragging{cursor:grabbing;box-shadow:0 26px 40px -16px rgba(92,35,49,.6);transform:scale(1.05) rotate(0deg)!important;z-index:5}
.note small{display:block;margin-top:6px;color:var(--mute);font-size:12.5px}
@media (min-width:1000px){.mock-body{grid-template-columns:220px 1fr 1fr;padding:20px;gap:18px}.mock .side{grid-row:span 2}.board{grid-column:2 / span 2}}

/* join */
.join-grid{display:grid;gap:40px}
@media (min-width:1000px){.join-grid{grid-template-columns:5fr 6fr;gap:72px;align-items:start}}
.steps{list-style:none;margin:0;padding:0;display:grid;gap:22px;counter-reset:st}
.steps li{display:grid;grid-template-columns:44px 1fr;gap:14px;counter-increment:st}
.steps li::before{content:counter(st);width:44px;height:44px;border-radius:50%;display:grid;place-items:center;background:var(--wash);color:var(--garnet);font:800 19px/1 var(--display)}
.steps h3{font-size:22px;margin:6px 0 4px}
.steps p{margin:0;color:var(--mute)}
.form{border-radius:var(--r-card);background:var(--white);border:1px solid var(--line);box-shadow:0 40px 80px -50px rgba(92,35,49,.55);padding:26px 20px;display:grid;gap:18px}
.form h2{font-size:clamp(28px,3vw,36px)}
.field{display:grid;gap:6px;position:relative}
.field label{font-weight:600}
.field .hint{font-size:14.5px;color:var(--mute)}
.field input{width:100%;min-height:54px;border-radius:12px;border:1.5px solid #CDBFC2;padding:14px 16px;font:16px var(--sans);color:var(--ink);background:#fff;transition:border-color .25s,box-shadow .25s}
.field input:hover{border-color:var(--gold-ink)}
.field input:focus{outline:none;border-color:var(--garnet);box-shadow:0 0 0 4px rgba(206,184,136,.55)}
.field.ok input{border-color:#5E7D55}
.field .tick{position:absolute;right:14px;top:44px;width:22px;height:22px;opacity:0;transform:scale(.6);transition:opacity .25s,transform .35s var(--ease);color:#3F6B3A}
.field.ok .tick{opacity:1;transform:none}
.field .err{display:none;color:#9B2335;font-size:14.5px;font-weight:600}
.field.bad .err{display:block}
.field.bad input{border-color:#9B2335}
.notice{border-radius:12px;background:var(--wash);padding:14px 16px;font-size:14.5px;color:var(--ink)}
.notice b{display:block;margin-bottom:4px}
.check{display:flex;gap:12px;align-items:flex-start;min-height:44px;cursor:pointer}
.check input{width:22px;height:22px;margin:2px 0 0;accent-color:var(--garnet);flex:none}
.done{display:none;border-radius:12px;background:var(--goldwash);border:1px solid #E3D6B8;padding:16px;font-weight:500}
.form.sent .done{display:block;animation:panel .5s var(--ease)}
.form .btn{width:100%}
@media (min-width:1000px){.form{padding:40px 44px}}

/* faq */
.faq details{border-bottom:1px solid var(--line)}
.faq details:first-of-type{border-top:1px solid var(--line)}
.faq summary{list-style:none;min-height:64px;display:flex;align-items:center;justify-content:space-between;gap:16px;cursor:pointer;font:700 19px/1.35 var(--display);letter-spacing:-.015em;padding:10px 0}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";flex:none;width:11px;height:11px;border-right:2px solid var(--garnet);border-bottom:2px solid var(--garnet);transform:rotate(45deg) translate(-3px,-3px);transition:transform .35s var(--ease)}
.faq details[open] summary::after{transform:rotate(-135deg) translate(-3px,-3px)}
.faq details p{color:var(--mute)}
.faq details[open] p{animation:panel .4s var(--ease)}

/* officers */
.officers{display:grid;grid-template-columns:1fr;gap:16px}
@media (min-width:700px){.officers{grid-template-columns:1fr 1fr}}
@media (min-width:1100px){.officers{grid-template-columns:repeat(4,1fr);gap:20px}.officer,.officer button{min-height:300px}}
.officer{perspective:1000px;min-height:236px}
.officer button{position:relative;display:block;width:100%;height:100%;min-height:236px;border:0;padding:0;background:none;cursor:pointer;text-align:left;font:inherit;color:inherit;transform-style:preserve-3d;transition:transform .8s var(--ease)}
.officer.flipped button{transform:rotateY(180deg)}
.officer .face{position:absolute;inset:0;border-radius:var(--r-card);padding:22px;backface-visibility:hidden;-webkit-backface-visibility:hidden;display:flex;flex-direction:column}
.officer .front{background:var(--wash)}
.officer .back{background:var(--garnet);color:#fff;transform:rotateY(180deg)}
.officer .back .d{display:block;color:var(--on-garnet);font-size:15.5px;margin:0}
.officer .h{display:block;font:700 21px/1.25 var(--display);letter-spacing:-.02em}
.officer .back .h{color:#fff;font-size:22px;margin-bottom:10px}
.officer .mono{width:92px;height:92px;border-radius:50%;border:2px dashed #CDBFC2;display:grid;place-items:center;font:800 26px/1 var(--display);color:var(--garnet);background:#fff;margin-bottom:auto}
.officer .front .h{font-size:24px;margin-top:20px}
.officer .front .role{color:var(--gold-ink);font-weight:600}
.officer .front .hint{display:flex;align-items:center;gap:8px;margin-top:10px;font-size:14px;color:var(--mute)}
.contact{display:grid;gap:12px}
.contact > div{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px;padding:16px 0;border-bottom:1px solid var(--line)}
.contact dt{font-weight:600;color:var(--mute);width:100%}
.contact dd{margin:0;font:600 20px/1.3 var(--display)}
.copy{min-height:44px;padding:0 16px;border-radius:999px;border:0;background:var(--wash);color:var(--garnet);font:600 15px/1 var(--sans);cursor:pointer;transition:background .25s}
.copy:hover{background:var(--gold)}
@media (min-width:700px){.contact dt{width:160px}.contact > div{flex-wrap:nowrap;justify-content:flex-start}.contact dd{flex:1}}

/* goals list */
.goals{list-style:none;margin:0;padding:0;display:grid;gap:0}
.goals li{position:relative;padding:16px 0 16px 44px;border-top:1px solid var(--line)}
.goals li:last-child{border-bottom:1px solid var(--line)}
.goals li::before{content:"";position:absolute;left:0;top:19px;width:22px;height:22px;border-radius:6px;box-shadow:inset 0 0 0 2px #CDBFC2}
.perks li::before{left:6px;top:26px;width:10px;height:10px;border-radius:50%;box-shadow:none;background:var(--gold)}
@media (min-width:1000px){.goals{grid-template-columns:1fr 1fr;column-gap:56px}.goals li:nth-last-child(2){border-bottom:1px solid var(--line)}}

/* split helpers */
.split{display:grid;gap:32px}
@media (min-width:1000px){.split{grid-template-columns:1fr 1fr;gap:72px;align-items:center}.split.r{grid-template-columns:5fr 7fr}.split.l{grid-template-columns:7fr 5fr}}
.split .photo{aspect-ratio:4/3}
.list-plain{margin:0;padding-left:20px;display:grid;gap:8px}
.list-plain li::marker{color:var(--gold-ink)}

/* reveal: elements are visible by default; JS only hides those still below the fold, then deals them in */
.js .rv.pre{opacity:0;transform:translateY(26px) rotate(var(--rot,0deg))}
.js .rv{transition:opacity .7s var(--ease),transform .9s var(--ease);transition-delay:var(--d,0s)}

/* footer */
.foot{background:var(--garnet);color:var(--on-garnet);margin-top:72px;padding-block:56px 48px;font-size:15.5px}
.foot .wrap{display:grid;gap:36px}
.foot .brand{color:#fff}
.foot .brand img{width:auto;height:72px}
.foot .sub{color:var(--gold);margin:14px 0 0;font-size:15px}
.foot nav{display:grid;grid-template-columns:1fr 1fr;gap:0 16px}
.foot nav a{display:flex;align-items:center;min-height:44px;color:#fff;text-decoration:none;white-space:nowrap}
.foot nav a:hover{color:var(--gold)}
.foot .anth{font:500 19px/1.4 var(--display);color:#fff;margin:0;max-width:none}
.foot .fsu{margin:0;max-width:60em;color:var(--on-garnet)}
.foot .small{font-size:14px;color:var(--on-garnet);margin:0;max-width:none}
.foot .small a{color:var(--gold)}
.foot :focus-visible{outline-color:var(--gold);box-shadow:none}
.foot .legal{display:grid;gap:16px}
/* the "at FSU" seal (logo sheet: Seal, at FSU, smallest 96 px on screen); last on phones, top right on desktop */
.foot .sealbox{order:1}
.foot .seal{display:block;width:128px;height:auto}
@media (min-width:1000px){.foot .wrap{grid-template-columns:minmax(300px,4fr) 3fr 4fr auto;gap:40px}.foot .sealbox{order:0}.foot .seal{width:148px}.foot .legal{grid-column:1 / -1;border-top:1px solid rgba(243,233,235,.25);padding-top:28px;display:grid;grid-template-columns:4fr 8fr;gap:48px}}

@media (min-width:1000px){
  :root{--gut:40px}
  .sec{padding-block:112px}
  .top .wrap{min-height:80px}
  .sheet{inset:80px 0 auto 0}
  .brand span{font-size:22px}
  .intro{padding-block:72px 40px}
  .sec-head{margin-bottom:56px}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
  .js .rv.pre{opacity:1;transform:none}
  .hero-photo img{transform:none}
  .caret{display:none}
}