/* The Life Questions homepage: one page, read in a single scroll.

   The cities carry it. Each is a photograph of the place with the name over
   it, so the page reads as "we meet here, and here, and here" before anybody
   has read a word. Where a photograph is missing the card falls back to the
   city's name set large on a tint, which looks deliberate rather than broken. */
:root{--sans:"Inter","Helvetica Neue",Helvetica,Arial,sans-serif;
  --serif:"Newsreader",Georgia,serif;
  --bg:#FAF6EF;--band:#F3EDE3;--surf:#FFFFFF;--ink:#211F1C;--ink2:#6A645C;--ink3:#9A9289;
  --line:#E6DFD3;--acc:#2C5F5A;--accDeep:#1F4744;--accSoft:#E3EDEA}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --bg:#16150F;--band:#1D1C16;--surf:#211F19;--ink:#F2EDE3;--ink2:#A9A197;--ink3:#7E776D;
  --line:#302D25;--acc:#8FC2B8;--accDeep:#7FB6AC;--accSoft:#1F2B28}}
:root[data-theme="dark"]{
  --bg:#16150F;--band:#1D1C16;--surf:#211F19;--ink:#F2EDE3;--ink2:#A9A197;--ink3:#7E776D;
  --line:#302D25;--acc:#8FC2B8;--accDeep:#7FB6AC;--accSoft:#1F2B28}

*,*::before,*::after{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--sans);
  font-size:17px;line-height:1.6;-webkit-font-smoothing:antialiased}
h1,h2{margin:0;font-weight:600;letter-spacing:-.028em;text-wrap:balance}
p{margin:0}img{max-width:100%;display:block}
a{color:inherit}:focus-visible{outline:2px solid var(--acc);outline-offset:3px}
button{font:inherit;color:inherit;cursor:pointer;background:none;border:0;padding:0}

.in{max-width:1060px;margin:0 auto;padding:0 clamp(1.1rem,5vw,2rem)}
.page{padding-bottom:3rem}
.eyebrow{font-size:.66rem;letter-spacing:.17em;text-transform:uppercase;color:var(--ink3);font-weight:500}
.btn{display:inline-flex;align-items:center;justify-content:center;background:var(--acc);color:var(--bg);
  border:1px solid var(--acc);border-radius:3px;padding:.66rem 1.2rem;font-size:.93rem;font-weight:600;
  text-decoration:none;width:max-content}
.btn:hover{background:var(--accDeep);border-color:var(--accDeep)}
.btn.ghost{background:transparent;color:var(--ink);border-color:var(--line)}
.btn.ghost:hover{border-color:var(--acc);color:var(--acc)}
.lnk{color:var(--acc);text-decoration:none;font-weight:600;font-size:.93rem}
.lnk:hover{text-decoration:underline}

/* the accounts, top right */
.toprail{display:flex;justify-content:flex-end;padding-top:1.1rem}
.toprail #social{display:flex;gap:.1rem}
.toprail a{display:grid;place-content:center;width:38px;height:38px;border-radius:50%;
  color:var(--ink3);transition:color .15s,background .15s}
.toprail a:hover{color:var(--acc);background:var(--accSoft)}
.toprail svg{display:block}

/* the city drawing, where there is no photograph yet */
.city .art{position:absolute;inset:0;z-index:0;display:block;color:var(--acc)}
.city .art svg{width:100%;height:100%;display:block}

/* the invitation to host one */
#host{border-top:1px solid var(--line);padding-top:clamp(2rem,4.5vw,3rem)}
.invite{background:var(--band);border-radius:4px;padding:clamp(1.2rem,3vw,2rem);max-width:720px;
  display:flex;flex-direction:column;gap:.5rem;align-items:flex-start}
.invite h2{margin-bottom:.1rem}
.invite .lead{color:var(--ink);font-size:1.12rem}
.invite ul.plain{list-style:none;margin:.2rem 0 0;padding:0;display:flex;flex-direction:column;gap:.38rem}
.invite ul.plain li{position:relative;padding-left:1.35rem;color:var(--ink2);font-size:.96rem}
.invite ul.plain li::before{content:"";position:absolute;left:.1rem;top:.62em;width:.5rem;height:.5rem;
  border-radius:50%;background:var(--acc);opacity:.55}
.invite .fine{font-size:.88rem;color:var(--ink3);margin-top:.3rem}
.invite .btn{margin-top:.5rem}

/* hero */
.hero{padding:clamp(1.8rem,6vw,3.6rem) 0 clamp(1.6rem,4vw,2.6rem);display:flex;flex-direction:column;gap:.9rem}
.hero h1{font-family:var(--serif);font-weight:400;letter-spacing:-.015em;
  font-size:clamp(2.6rem,8vw,4.6rem);line-height:1;max-width:16ch}
.hero .sub{color:var(--ink2);font-size:clamp(1.02rem,2.1vw,1.18rem);max-width:52ch}

section{padding:clamp(1.8rem,4vw,2.8rem) 0}
section h2{font-size:clamp(1.25rem,2.6vw,1.6rem);margin-bottom:.5rem}
section p{color:var(--ink2)}

/* the cities */
.cities{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1rem}
@media (max-width:860px){.cities{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.cities{grid-template-columns:1fr}}
.city{position:relative;display:block;text-decoration:none;border-radius:4px;overflow:hidden;
  border:1px solid var(--line);background:var(--accSoft);aspect-ratio:4/5;isolation:isolate}
@media (max-width:560px){.city{aspect-ratio:16/10}}
.city img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0;
  transition:transform .5s cubic-bezier(.2,.7,.3,1)}
.city:hover img{transform:scale(1.045)}
.city .veil{position:absolute;inset:0;z-index:1;
  background:linear-gradient(180deg,rgba(16,14,10,.10) 0%,rgba(16,14,10,.08) 42%,rgba(16,14,10,.78) 100%)}
.city .txt{position:absolute;left:0;right:0;bottom:0;z-index:2;padding:1.1rem 1.15rem;
  display:flex;flex-direction:column;gap:.18rem;color:#FBF8F2}
.city h3{margin:0;font-family:var(--serif);font-weight:400;font-size:clamp(1.6rem,3.2vw,2rem);
  line-height:1.05;letter-spacing:-.01em}
.city .co{font-size:.62rem;letter-spacing:.16em;text-transform:uppercase;color:rgba(251,248,242,.74)}
.city .next{font-size:.92rem;color:rgba(251,248,242,.92);margin-top:.3rem}
.city .go{font-size:.8rem;letter-spacing:.1em;text-transform:uppercase;color:#FBF8F2;
  margin-top:.45rem;font-weight:600}
/* no photograph yet: the name on a tint, which is a choice rather than a gap */
.city.flat{background:linear-gradient(165deg,
  color-mix(in srgb,var(--accSoft) 70%,var(--bg)) 0%, var(--accSoft) 100%)}
/* the drawing runs to the bottom of the card, so the name needs ground to
   stand on: the card's own tint, brought up behind the text */
.city.flat .veil{background:linear-gradient(180deg,
  rgba(227,237,234,0) 42%,
  color-mix(in srgb,var(--accSoft) 86%,var(--bg)) 72%,
  color-mix(in srgb,var(--accSoft) 96%,var(--bg)) 100%)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .city.flat .veil{
  background:linear-gradient(180deg,rgba(31,43,41,0) 42%,
    color-mix(in srgb,var(--accSoft) 86%,var(--bg)) 72%,
    color-mix(in srgb,var(--accSoft) 98%,var(--bg)) 100%)}}
:root[data-theme="dark"] .city.flat .veil{
  background:linear-gradient(180deg,rgba(31,43,41,0) 42%,
    color-mix(in srgb,var(--accSoft) 86%,var(--bg)) 72%,
    color-mix(in srgb,var(--accSoft) 98%,var(--bg)) 100%)}
.city.flat .txt{color:var(--accDeep)}
.city.flat .co{color:var(--acc)}
.city.flat .next,.city.flat .go{color:var(--acc)}

.under{display:flex;flex-wrap:wrap;align-items:center;gap:.9rem 1.4rem;margin-top:1.2rem}
.empty{border:1px dashed var(--line);border-radius:4px;padding:1.4rem;color:var(--ink3)}

/* the film, given the middle of the page */
.filmwide{max-width:880px;margin-left:auto;margin-right:auto;text-align:center;
  border-top:1px solid var(--line);padding-top:clamp(2rem,4.5vw,3rem)}
.filmwide h2{font-family:var(--serif);font-weight:400;letter-spacing:-.012em;
  font-size:clamp(1.6rem,3.6vw,2.4rem);margin-bottom:1rem}
.filmwide .filmcap{text-align:center}
.under.centre{justify-content:center;margin-top:.9rem}

/* two columns: host, and the film */
.two{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(1.4rem,4vw,3rem);
  align-items:start;border-top:1px solid var(--line);padding-top:clamp(1.8rem,4vw,2.6rem)}
@media (max-width:760px){.two{grid-template-columns:1fr}}
.two p{margin-bottom:1rem}
.two p:last-child{margin-bottom:0}

/* the film */
.film{position:relative;display:block;width:100%;aspect-ratio:16/9;border:1px solid var(--line);
  border-radius:4px;overflow:hidden;background:var(--band);cursor:pointer;margin-bottom:.8rem}
.film img,.film iframe{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border:0}
.film .sh{position:absolute;inset:0;background:linear-gradient(180deg,rgba(12,10,8,0) 45%,rgba(12,10,8,.6) 100%)}
.film .play{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:58px;height:58px;
  border-radius:50%;background:rgba(250,246,239,.94);display:grid;place-content:center;transition:.18s}
.film .play::after{content:"";width:0;height:0;border-left:17px solid #211F1C;
  border-top:11px solid transparent;border-bottom:11px solid transparent;margin-left:4px}
.film:hover .play{transform:translate(-50%,-50%) scale(1.08)}
.film.none{cursor:default;display:grid;place-content:center;border-style:dashed;color:var(--ink3);text-align:center;padding:1.2rem}
.filmcap{color:var(--ink3);font-size:.85rem}

/* who */
.team{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:clamp(1.2rem,3vw,2.4rem);
  border-top:1px solid var(--line);padding-top:clamp(1.8rem,4vw,2.6rem)}
.who{display:flex;gap:.9rem;align-items:flex-start}
.who .face{flex:0 0 auto;width:58px;height:58px;border-radius:50%;overflow:hidden;background:var(--accSoft);
  display:grid;place-content:center;color:var(--acc);font-weight:600}
.who .face img{width:100%;height:100%;object-fit:cover}
.who h3{margin:0;font-size:1.05rem;font-weight:600}
.who .role{font-size:.62rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ink3)}
.who p{color:var(--ink2);font-size:.93rem;margin-top:.3rem}

footer{border-top:1px solid var(--line);margin-top:clamp(1.8rem,4vw,2.6rem);padding-top:1.5rem;
  color:var(--ink3);font-size:.88rem;display:flex;flex-wrap:wrap;gap:.6rem 2rem;justify-content:space-between}
footer a{color:var(--ink2);text-decoration:none}
footer a:hover{color:var(--ink)}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}