/* frontier.family — letterpress warmth. Tokens from the brand sheet. */
:root{
  --paper:#F6F1E8;
  --ink:#1E1A16;
  --muted:#5C554D;
  --clay:#B8623E;          /* marks, stamps, the open seat: non-text, 3.8:1 passes for UI */
  --clay-text:#A8562F;     /* links, errors, button ground: 4.62:1 on paper, AA for text */
  --hair:rgba(30,26,22,.18);
  --outline:rgba(30,26,22,.35);
  --serif:"Newsreader",Georgia,serif;
  --sans:"Geist",system-ui,sans-serif;
  --mono:"Geist Mono",ui-monospace,Menlo,monospace;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--paper);color:var(--ink);-webkit-font-smoothing:antialiased}
body{font-family:var(--sans);background-image:url("grain.svg");font-size:17px;line-height:1.55}
a{color:var(--clay-text);text-decoration:none}
a:hover{color:var(--ink);text-decoration:underline;text-underline-offset:3px}
p{text-wrap:pretty;margin:0}
h1,h2,h3{text-wrap:balance;margin:0;font-weight:400}
ul,ol,dl{margin:0;padding:0;list-style:none}
strong{font-weight:500}
::selection{background:var(--clay-text);color:var(--paper)}
svg{display:block}

.wrap{max-width:1240px;margin:0 auto;padding:0 max(clamp(20px,6vw,80px),env(safe-area-inset-right)) 0 max(clamp(20px,6vw,80px),env(safe-area-inset-left))}
.wrap--narrow{max-width:760px}

/* type */
.serif{font-family:var(--serif)}
.mono{font-family:var(--mono);font-size:12px;color:var(--muted)}
.muted{color:var(--muted)}
.h-section{font-family:var(--serif);font-size:clamp(32px,3.8vw,54px);line-height:1.05;letter-spacing:-.02em}
.h-display{font-family:var(--serif);font-size:clamp(44px,6.4vw,92px);line-height:1;letter-spacing:-.025em}
.h-close{font-family:var(--serif);font-size:clamp(44px,6vw,84px);line-height:1;letter-spacing:-.025em}
.h-quiet{font-family:var(--serif);font-size:clamp(24px,2.4vw,32px);line-height:1.15;letter-spacing:-.015em}
.h-col{font-family:var(--serif);font-weight:500;font-size:26px;line-height:1.1}
.small{font-size:14px;color:var(--muted);max-width:40em}
.aside{font-family:var(--serif);font-style:italic;font-size:clamp(20px,1.8vw,26px);line-height:1.3;max-width:30em;color:var(--ink)}

/* wordmark: Newsreader 600, one line, consent mark replaces the full stop */
.wordmark{display:inline-flex;align-items:center;font-family:var(--serif);font-weight:600;line-height:.92;letter-spacing:-.035em;color:var(--ink);text-decoration:none}
.wordmark:hover{text-decoration:none;color:var(--ink)}
.wordmark__family{display:inline-flex;align-items:center;margin-left:.16em}
.wordmark svg{color:var(--clay)}
.wordmark--nav{font-size:clamp(30px,3.4vw,44px)}
.wordmark--nav .wordmark__family{gap:6px}
.wordmark--nav svg{width:clamp(21px,2.4vw,30px);height:clamp(14px,1.6vw,20px)}
.wordmark--secondary{font-size:28px}
.wordmark--secondary .wordmark__family{gap:5px}
.wordmark--secondary svg{width:20px;height:13px}
.wordmark--footer{font-size:16px}
.wordmark--footer .wordmark__family{gap:4px}
.wordmark--footer svg{width:11px;height:8px}

/* clay stamp */
.stamp{font-family:var(--mono);font-size:12px;color:var(--clay);border:1px solid var(--clay);padding:2px 7px;transform:rotate(-2deg);display:inline-block}
.stamp--sm{font-size:11px}

/* controls: one clay button per screen, square corners, hover ink */
.btn{background:var(--clay-text);color:var(--paper);padding:15px 24px;font-size:15px;font-weight:500;letter-spacing:.005em;display:inline-block;border:0;cursor:pointer;transition:background-color .15s ease}
.btn:hover{background:var(--ink);color:var(--paper);text-decoration:none}
.link-ink{color:var(--ink);font-size:15px}
/* text links that act as controls: same look, 44px tap height */
.nav__links a,.footer a,.link-ink,.cities + p a{display:inline-block;padding:12px 0;margin:-12px 0}
.cta-row{display:flex;align-items:center;gap:28px;flex-wrap:wrap}

/* nav */
.nav{display:flex;justify-content:space-between;align-items:center;padding:28px 0 20px;border-bottom:1px solid var(--ink)}
.nav__links{display:flex;flex-direction:column;align-items:flex-end;gap:8px;font-size:13px}
.nav__links .mono{font-size:11px}
.nav__links a{color:var(--ink)}
.nav--secondary{align-items:baseline;padding:28px 0 18px;border-bottom:1px solid var(--hair);gap:16px}
.nav--secondary .mono{text-align:right;flex:0 1 auto}

/* hero */
.hero{display:grid;grid-template-columns:7fr 5fr;gap:clamp(32px,6vw,96px);align-items:center;padding:clamp(56px,9vw,128px) 0 clamp(64px,8vw,112px)}
.hero__copy{display:flex;flex-direction:column;gap:28px;max-width:640px}
.hero__eyebrow{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.hero__lede{font-size:clamp(17px,1.35vw,20px);line-height:1.5;max-width:34em}
.hero__cta{padding-top:6px}
.hero__by{max-width:34em}
.hero__by a{color:var(--ink);text-decoration:underline;text-underline-offset:3px;text-decoration-color:var(--hair)}
.hero__by a:hover{text-decoration-color:var(--ink)}
.hero__art{display:flex;flex-direction:column;gap:14px;width:100%;justify-self:end}
.hero__legend{display:grid;grid-template-columns:repeat(3,auto);gap:6px 18px;font-family:var(--mono);font-size:11px;color:var(--muted);justify-content:start}
.hero__legend .you{color:var(--clay)}

/* rotating place word: ghosts hold the width so the line never reflows */
.flag{display:inline-block;font-size:.72em;vertical-align:-.02em;line-height:1;transition:opacity .42s ease}
.place{display:inline-grid;vertical-align:baseline;white-space:nowrap}
.place > span{grid-area:1/1;white-space:nowrap}
.place__ghost{visibility:hidden}
.place__cur{cursor:pointer;transition:opacity .42s ease,transform .42s ease}
.is-out .flag{opacity:0}
.is-out .place__cur{opacity:0;transform:translateY(6px)}

/* illustrations inherit the palette: ink by default, muted/clay by class */
.chart,.diagram,.map{color:var(--ink)}
.t-muted{fill:var(--muted)}
.t-clay{color:var(--clay);fill:var(--clay)}
.t-hair{stroke:var(--hair)}
.seat--you{color:var(--clay)}
.seat--host text{fill:var(--paper)}
/* seating chart (hero) */
.chart{width:100%;max-width:460px}
.chart text{font-family:var(--mono)}
.chart .seat{opacity:0;transform:scale(.6);transform-box:fill-box;transform-origin:center;transition:opacity .5s ease,transform .5s ease}
.chart .seat.on,.no-js .chart .seat{opacity:1;transform:scale(1)}

/* sections */
.section{border-top:1px solid var(--hair);padding:clamp(56px,7vw,96px) 0}
.section--quiet{padding:clamp(48px,6vw,80px) 0}
.section--close{border-top-color:var(--ink);padding:clamp(64px,9vw,128px) 0 clamp(64px,8vw,112px)}
.eyebrow{display:flex;align-items:center;gap:12px;font-family:var(--mono);font-size:12px;color:var(--muted);margin-bottom:24px}
.eyebrow svg{width:20px;height:20px;color:var(--ink);flex:none}
.eyebrow--inline{margin-bottom:0}
.two{display:grid;grid-template-columns:5fr 7fr;gap:clamp(32px,5vw,80px);align-items:start}
.two--wide{grid-template-columns:7fr 5fr}
.two--center{align-items:center}
.two--end{align-items:end}
.three{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(28px,4vw,56px)}
.stack{display:flex;flex-direction:column;gap:22px}

/* 02 who sits */
.who h2{max-width:18em;margin-bottom:clamp(36px,4vw,56px)}
.col{display:flex;flex-direction:column;gap:14px;border-top:1px solid var(--ink);padding-top:18px}
.col__head{display:flex;align-items:baseline;gap:12px}
.col__roles{margin-top:6px;display:flex;flex-direction:column;gap:6px;font-size:15px;color:var(--muted)}
.who .small{margin-top:clamp(36px,4vw,56px)}

/* 03 eight fronts: the frontier line */
.fronts__head{align-items:end;margin-bottom:clamp(40px,5vw,64px)}
.fronts__head p{max-width:34em}
.fronts__rows{display:flex;flex-direction:column;gap:clamp(40px,5vw,64px)}
.fronts{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0 24px;border-top:1px solid var(--ink)}
.fronts li{position:relative;padding:22px 20px 0 0;display:flex;flex-direction:column;gap:8px}
.fronts__dot{position:absolute;top:-5px;left:0;width:9px;height:9px;border-radius:50%;background:var(--paper);border:1px solid var(--ink)}
.fronts h3{font-family:var(--serif);font-weight:500;font-size:24px;line-height:1.1}
.fronts p{font-size:15px;color:var(--muted);max-width:22em}
.fronts__note{margin-top:clamp(32px,4vw,48px)}
.fronts__aside{margin-top:clamp(40px,5vw,64px)}

/* 04 how a room works */
.steps{display:flex;flex-direction:column}
.steps li{display:grid;grid-template-columns:44px minmax(0,1fr);gap:16px;padding:22px 0;border-top:1px solid var(--hair)}
.steps li:last-child{border-bottom:1px solid var(--hair)}
.steps .mono{font-size:13px;padding-top:4px}
.quote{margin:clamp(56px,7vw,104px) 0 0;padding:0;display:grid;grid-template-columns:auto minmax(0,1fr);gap:20px;align-items:start;max-width:1000px}
.quote svg{width:36px;height:24px;color:var(--clay);margin-top:clamp(10px,1.2vw,22px)}
.quote p{font-family:var(--serif);font-size:clamp(28px,3.4vw,50px);line-height:1.15;letter-spacing:-.015em}

/* 05 concierge */
.concierge p{max-width:34em}
.diagram{width:100%;max-width:400px;justify-self:end}

/* 06 cities */
.map{width:100%;max-width:380px}
.cities{display:flex;flex-direction:column;font-family:var(--mono);font-size:14px}
.cities li{display:grid;grid-template-columns:48px minmax(0,1fr) auto;gap:16px;padding:14px 0;border-top:1px solid var(--hair);align-items:center}
.cities li:last-child{border-bottom:1px solid var(--hair)}
.cities__when{color:var(--muted);text-align:right;display:flex;align-items:center;gap:12px;justify-content:flex-end}
.cities + p{font-size:15px;color:var(--muted)}


/* 08 founding members */
.members h2{margin-bottom:clamp(32px,4vw,48px)}
.rooms{display:flex;flex-direction:column;gap:clamp(28px,3vw,40px);max-width:1000px}
.room{display:flex;flex-direction:column;gap:14px;border-top:1px solid var(--hair);padding-top:16px}
.room__head{display:flex;align-items:baseline;gap:18px;flex-wrap:wrap}
.room__head b{font-weight:400;color:var(--ink)}
.room__city{font-family:var(--serif);font-size:22px;line-height:1.1}
.room__count{margin-left:auto}
.room__seats{display:grid;grid-template-columns:repeat(10,minmax(0,1fr));gap:10px}
.seat-o--filled{border-color:var(--ink)}
.seat-o{aspect-ratio:1;border-radius:50%;border:1px solid var(--outline);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;font-family:var(--mono);font-size:10px;color:var(--muted);text-align:center;padding:4px}
.seat-o__initials{font-family:var(--serif);font-size:20px;color:var(--ink);line-height:1}
.seat-o__role{font-size:9px}
@media (max-width:820px){.room__seats{grid-template-columns:repeat(5,minmax(0,1fr));gap:8px}.room__count{margin-left:0;width:100%}}
.seat-o__n{opacity:.7}
.seat-o__reserved{opacity:.5}
.members .small{margin-top:clamp(28px,3vw,40px)}

/* 09 questions */
.faq{display:flex;flex-direction:column}
.faq > div{padding:22px 0;border-top:1px solid var(--hair);display:flex;flex-direction:column;gap:8px}
.faq > div:last-child{border-bottom:1px solid var(--hair)}
.faq dt{font-family:var(--serif);font-size:23px;line-height:1.2}
.faq dd{margin:0;max-width:36em}
.faq dd.with-mark{display:flex;gap:10px;align-items:baseline}
.faq dd.with-mark svg{width:21px;height:14px;color:var(--clay);flex:none;position:relative;top:1px}

/* 10 close */
.close__copy{display:flex;flex-direction:column;gap:24px}
.close__copy p{max-width:32em;font-size:clamp(17px,1.3vw,19px)}
.close__copy .cta-row{padding-top:4px}
.close__ring{width:120px;height:120px;color:var(--ink);justify-self:end}

/* footer */
.footer{border-top:1px solid var(--hair);padding:24px 0 40px;display:flex;flex-wrap:wrap;gap:10px 22px;font-family:var(--mono);font-size:12px;color:var(--muted);align-items:center}
.footer a{color:var(--muted)}
.footer .push{margin-left:auto}
.footer .ink{color:var(--ink)}

/* partners page */
.p-header{padding:clamp(56px,8vw,96px) 0 clamp(40px,5vw,64px);display:flex;flex-direction:column;gap:24px}
.p-header h1{font-family:var(--serif);font-size:clamp(40px,5.6vw,72px);line-height:1;letter-spacing:-.025em}
.p-header p{max-width:34em;font-size:clamp(17px,1.3vw,19px)}
.p-lists{display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,4vw,56px);padding-bottom:clamp(48px,6vw,80px)}
.p-list{border-top:1px solid var(--ink);padding-top:16px}
.p-list--not{border-top-color:var(--hair)}
.p-list .mono{margin-bottom:14px}
.p-list ul{display:flex;flex-direction:column;gap:10px;font-size:16px}
.p-list--not ul{color:var(--muted)}
.p-list--not li{text-decoration:line-through;text-decoration-color:var(--outline)}
.p-quote{margin:0;padding:clamp(40px,5vw,64px) 0;border-top:1px solid var(--hair)}
.p-quote svg{margin-top:8px}
.p-quote p{font-size:clamp(26px,3vw,40px)}
.p-close{border-top:1px solid var(--ink);padding:clamp(48px,6vw,80px) 0 clamp(64px,8vw,112px);display:flex;flex-direction:column;gap:20px}
.p-close h2{font-family:var(--serif);font-size:clamp(32px,3.8vw,48px);line-height:1.05;letter-spacing:-.02em}
.p-close p{max-width:32em}
.p-close .btn{align-self:flex-start}

/* one slow fade-up on scroll, driven by the scroll position itself (no observer, no
   hidden state to get stuck). Browsers without scroll-driven animations show everything. */
@keyframes fade-up{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@supports (animation-timeline: view()){
  @media (prefers-reduced-motion: no-preference){
    [data-reveal]{animation:fade-up .9s ease both;animation-timeline:view();animation-range:entry 0% entry 22%}
  }
}

/* mobile: one column, the frontier line becomes a route map */
@media (max-width:820px){
  .two,.two--wide,.three{grid-template-columns:1fr}
  .cities__when{flex-direction:column;align-items:flex-end;gap:6px}
  .nav__links{gap:16px}
  .hide-m,.nav--secondary .mono{display:none !important}
  .fronts{grid-template-columns:1fr;border-top:0;border-left:1px solid var(--ink);padding-left:22px;gap:28px 0}
  .fronts li{padding-top:0}
  .fronts__dot{top:6px;left:-27px}
}
@media (prefers-reduced-motion:reduce){
  .chart .seat{transition:none}
  .flag,.place__cur{transition:none}
}

/* ---------- forms (apply page) ---------- */
.skip{position:absolute;left:-999px;top:8px;background:var(--ink);color:var(--paper);padding:8px 12px;font-size:14px;z-index:10}
.skip:focus{left:8px;text-decoration:none}
:focus-visible{outline:2px solid var(--clay-text);outline-offset:3px}
.form{display:flex;flex-direction:column;gap:28px;padding-bottom:clamp(64px,8vw,112px)}
.intent{border:0;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.intent legend{margin-bottom:14px}
.intent__opt{position:relative;display:block;cursor:pointer}
.intent__opt input{position:absolute;opacity:0;width:1px;height:1px}
.intent__label{display:flex;flex-direction:column;gap:6px;border-top:1px solid var(--hair);padding:16px 0 4px;min-height:100%}
.intent__label .serif{font-size:22px;line-height:1.1}
.intent__label .small{max-width:none}
.intent__opt input:checked + .intent__label{border-top:1px solid var(--ink)}
.intent__opt input:checked + .intent__label .serif{color:var(--ink)}
.intent__opt input:not(:checked) + .intent__label .serif{color:var(--muted)}
.intent__opt input:focus-visible + .intent__label{outline:2px solid var(--clay);outline-offset:6px}
.field{display:flex;flex-direction:column;gap:8px}
.field-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px 28px}
.field label{display:block}
.field input[type=text],.field input[type=email],.field input[type=url],.field select,.field textarea{width:100%;font:inherit;font-size:16px;color:var(--ink);background:transparent;border:0;border-bottom:1px solid var(--outline);padding:10px 0;border-radius:0;-webkit-appearance:none;appearance:none}
.field select{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%231E1A16' stroke-width='1.25'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 2px center;padding-right:22px;cursor:pointer}
.field textarea{resize:vertical;line-height:1.5;min-height:9em}
.field input:focus,.field select:focus,.field textarea:focus{outline:0;border-bottom-color:var(--ink)}
.field input::placeholder{color:rgba(92,85,77,.55)}
.is-bad input,.is-bad select,.is-bad textarea{border-bottom-color:var(--clay-text)}
.hint{margin-top:-2px}
.err{font-size:13px;color:var(--clay-text);min-height:0}
.err:empty{display:none}
.err--form{font-size:15px}
.choices{display:flex;flex-direction:column;gap:0;border-top:1px solid var(--hair)}
.choice{display:flex;align-items:baseline;gap:14px;padding:12px 0;border-bottom:1px solid var(--hair);cursor:pointer;font-size:16px}
.choice input{accent-color:var(--clay);margin:0;position:relative;top:2px;flex:none}
.choice em{font-style:normal;color:var(--muted);font-size:14px;margin-left:8px}
.choice .mono{margin-right:6px}
.consent{display:flex;gap:14px;align-items:flex-start;font-size:15px;max-width:40em;cursor:pointer}
.consent input{accent-color:var(--clay);margin:4px 0 0;flex:none}
.consent__mark{width:21px;height:14px;color:var(--clay);display:inline-block;vertical-align:-1px;margin-right:8px}
.honey{position:absolute;left:-9999px;opacity:0;height:0;overflow:hidden}
.form__foot{display:flex;flex-direction:column;gap:16px;align-items:flex-start;padding-top:8px}
.form__foot .small{max-width:32em}
.btn:disabled{opacity:.6;cursor:default}
.done{display:flex;flex-direction:column;gap:20px;padding:clamp(24px,4vw,48px) 0 clamp(64px,8vw,112px)}
.done__mark{width:72px;height:48px;color:var(--clay)}
.done p{max-width:34em}

/* ---------- legal pages ---------- */
.legal{padding:clamp(40px,5vw,64px) 0 clamp(64px,8vw,112px);display:flex;flex-direction:column;gap:32px}
.legal h2{font-family:var(--serif);font-size:24px;line-height:1.2;letter-spacing:-.01em;border-top:1px solid var(--hair);padding-top:18px}
.legal p,.legal li{max-width:36em}
.legal ul{display:flex;flex-direction:column;gap:8px;padding-left:18px;list-style:disc}
.legal .stack{gap:12px}

/* 404 */
.lost{padding:clamp(64px,10vw,140px) 0;display:flex;flex-direction:column;gap:20px}

@media (max-width:820px){
  .field-grid{grid-template-columns:1fr}
}
/* phones: the hero, intent picker and partner lists stack only when they must */
@media (max-width:600px){
  .hero,.intent,.p-lists{grid-template-columns:1fr}
  .hero__art{max-width:360px}
  .intent{gap:0}
  .intent__label{padding:14px 0 12px}
}
[hidden]{display:none !important}
.choice input,.consent input{width:16px;height:16px}