@font-face{font-family:"Passion One";src:url(fonts/PassionOne-Bold.ttf) format("truetype");font-weight:700;font-display:swap}
@font-face{font-family:"Pirata One";src:url(fonts/PirataOne-Regular.ttf) format("truetype");font-weight:400;font-display:swap}
:root{--paper:#0a0e13;--panel:#121922;--panel-2:#172130;--deep:#070a0e;--rule:#243140;--ink:#eef2f5;--steel:#6481a1;
  --small:#a9bccf;--small-dim:#7d91a6;--cursor:#ffd23f;--stamp:#e5484d;--link:#5fb8ff;--blurple:#5865f2;--glow:rgba(130,179,235,.38);
  --display:"Passion One",Impact,"Arial Black",sans-serif;--gothic:"Pirata One","Old English Text MT",Georgia,serif;
  --body:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --label:"Avenir Next Condensed","Roboto Condensed","Arial Narrow",system-ui,sans-serif;color-scheme:dark}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:4.5rem}
body{margin:0;background:var(--paper);color:var(--ink);font:400 1.0625rem/1.55 var(--body);-webkit-font-smoothing:antialiased;overflow-x:hidden}
html[data-lang="fr"] [lang="en"],html[data-lang="en"] [lang="fr"]{display:none !important}
a{color:inherit}
:focus-visible{outline:3px solid var(--cursor);outline-offset:3px;border-radius:4px}
.wrap{max-width:72rem;margin:0 auto;padding-inline:max(16px,4vw)}
.label{font:600 .8rem/1.2 var(--label);letter-spacing:.14em;text-transform:uppercase;color:var(--small-dim)}
.gothic{font-family:var(--gothic);font-weight:400}
h2.gothic{font-size:clamp(2.3rem,6vw,3.2rem);line-height:1;margin:0 0 .4rem;text-shadow:0 0 14px var(--glow)}
.intro{color:var(--small);max-width:60ch;margin:0 0 2rem;font-size:1.1rem}
section{padding-block:clamp(3.5rem,9vw,6rem)}

/* The bar */
.bar{position:sticky;top:0;z-index:20;background:rgba(10,14,19,.78);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-bottom:1px solid rgba(36,49,64,.7)}
.bar .wrap{display:flex;align-items:center;gap:1rem;height:3.9rem}
.brand{font:700 1.55rem/1 var(--display);letter-spacing:.02em;display:flex;align-items:baseline;gap:.3rem;text-decoration:none;white-space:nowrap}
.brand b{font:400 1.6rem/1 var(--gothic);color:var(--cursor)}
.bar nav{display:flex;gap:.2rem;margin-left:auto}
.bar nav a{font:600 .85rem/1 var(--label);letter-spacing:.12em;text-transform:uppercase;color:var(--small);text-decoration:none;padding:.55rem .7rem;border-radius:6px;display:inline-flex;align-items:center}
.bar nav a:hover{color:var(--ink);background:var(--panel)}
.langs{display:flex;gap:.2rem}
.langs button{font:600 .78rem/1 var(--label);letter-spacing:.12em;background:transparent;color:var(--small-dim);border:1px solid var(--rule);border-radius:999px;padding:.4rem .6rem;cursor:pointer}
.langs button[aria-pressed="true"]{background:var(--ink);color:var(--paper);border-color:var(--ink)}
@media (max-width:820px){.bar nav{display:none}.langs{margin-left:auto}}

/* Buttons */
.play{display:inline-flex;align-items:center;gap:.55rem;background:var(--cursor);color:#0a0e13 !important;text-decoration:none;border:0;cursor:pointer;font:700 1.35rem/1 var(--display);text-transform:uppercase;letter-spacing:.03em;padding:.75rem 1.2rem .7rem;border-radius:8px;transition:box-shadow .2s,transform .2s}
.play:hover{box-shadow:0 0 26px rgba(255,210,63,.45);transform:translateY(-1px)}
.play:disabled{opacity:.5;cursor:default;box-shadow:none;transform:none}
.play svg{width:.8em;height:.8em;fill:currentColor}
.play.small{font-size:1.05rem;padding:.55rem .85rem .5rem}
.ghost{display:inline-flex;align-items:center;gap:.5rem;color:var(--ink);text-decoration:none;font:700 1.35rem/1 var(--display);text-transform:uppercase;letter-spacing:.03em;padding:.7rem 1.1rem .65rem;border-radius:8px;border:2px solid rgba(238,242,245,.35);background:rgba(10,14,19,.35)}
.ghost:hover{border-color:var(--ink)}
.ghost[hidden]{display:none}
/* The game in the browser and, as big beside it, the download for this computer (site.js) */
.launch{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,12.5rem),1fr));gap:.8rem}
.access .launch>a{justify-self:stretch;gap:.55rem;padding:.8rem .9rem .75rem;text-align:left}
.launch>a[hidden]{display:none}
.launch>a>span{display:grid;gap:.25rem}
.launch small{font:600 .8rem/1.15 var(--label);letter-spacing:.06em;text-transform:none;opacity:.75}
.launch svg{width:.9em;height:.9em;flex:none;fill:currentColor}
.launch .ghost{background:var(--ink);color:var(--paper);border-color:var(--ink);transition:box-shadow .2s,transform .2s}
.launch .ghost:hover{box-shadow:0 0 26px rgba(238,242,245,.3);transform:translateY(-1px)}
.downloads{display:grid;gap:.6rem}
.downloads[hidden]{display:none}
.also{margin:0;color:var(--small-dim);font-size:.95rem}
.also a{color:var(--link)}
.downloads .hint a{color:var(--link)}

/* The hero */
.hero{position:relative;min-height:min(88vh,52rem);display:grid;align-items:end;padding:0;overflow:hidden;isolation:isolate}
.hero .shot{position:absolute;inset:0;z-index:-2;background:radial-gradient(120% 90% at 70% 10%,#1c2835,#0a0e13 70%) center/cover no-repeat}
.hero .shot::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(10,14,19,.15) 0%,rgba(10,14,19,.35) 45%,var(--paper) 100%),linear-gradient(90deg,rgba(10,14,19,.75),transparent 70%)}
.hero .wrap{padding-block:7rem clamp(2.5rem,7vw,4.5rem);width:100%}
.hero h1{font:700 clamp(4.4rem,17vw,11rem)/.8 var(--display);margin:.5rem 0 0;letter-spacing:-.01em;text-shadow:0 0 30px var(--glow),0 5px 0 #000}
.hero .motto{font:400 clamp(2rem,7vw,3.6rem)/1 var(--gothic);color:var(--cursor);margin:.6rem 0 0;text-shadow:0 3px 0 #000}
.hero .lede{max-width:44ch;font-size:clamp(1.1rem,2.4vw,1.35rem);margin:1.2rem 0 0;text-shadow:0 2px 8px #000}
.hero-access{max-width:48ch;margin:1rem 0 0;color:var(--small);text-shadow:0 2px 8px #000}
.hero-access b{color:var(--cursor)}
.hero .actions{display:flex;flex-wrap:wrap;gap:.8rem;margin-top:1.8rem}
.stamp{position:absolute;top:6rem;right:max(16px,5vw);transform:rotate(-11deg);border:3px solid var(--stamp);color:var(--stamp);border-radius:10px;padding:.45rem .8rem .35rem;text-align:center;font:700 1rem/1.05 var(--display);text-transform:uppercase;letter-spacing:.06em;background:rgba(10,14,19,.55)}
.stamp strong{display:block;font-size:1.8rem}
@media (max-width:640px){.stamp{top:5rem;right:12px;font-size:.8rem}.stamp strong{font-size:1.3rem}}
.facts{display:flex;flex-wrap:wrap;gap:.6rem 2rem;margin:2.2rem 0 0;padding:0;list-style:none}
.facts li{font:600 .82rem/1.2 var(--label);letter-spacing:.12em;text-transform:uppercase;color:var(--small)}
.facts b{display:block;font:700 2rem/1 var(--display);color:var(--ink);letter-spacing:.02em}

/* The announcements, as on Discord */
.server{display:grid;grid-template-columns:15rem minmax(0,1fr);border:1px solid var(--rule);border-radius:14px;overflow:hidden;background:var(--panel);box-shadow:0 24px 60px rgba(0,0,0,.45)}
.channels{background:var(--deep);padding:.9rem .6rem;display:flex;flex-direction:column;gap:.15rem}
.channels .guild{display:flex;align-items:center;gap:.6rem;padding:.2rem .5rem .9rem;border-bottom:1px solid var(--rule);margin-bottom:.6rem;font:700 1.15rem/1 var(--display);letter-spacing:.02em}
.channels .cat{font:700 .72rem/1 var(--label);letter-spacing:.14em;text-transform:uppercase;color:var(--small-dim);padding:.6rem .5rem .35rem}
.channels button{all:unset;cursor:pointer;display:flex;align-items:center;gap:.45rem;padding:.45rem .55rem;border-radius:6px;color:var(--small-dim);font-weight:500}
.channels button::before{content:"#";font-size:1.2rem;line-height:1;color:var(--steel)}
.channels button:hover{background:var(--panel);color:var(--small)}
.channels button[aria-pressed="true"]{background:var(--panel-2);color:var(--ink)}
.channels button .new{margin-left:auto;width:.5rem;height:.5rem;border-radius:50%;background:var(--ink)}
.feed{display:flex;flex-direction:column;min-width:0}
.feed header{display:flex;align-items:center;gap:.7rem;padding:.8rem 1.2rem;border-bottom:1px solid var(--rule);min-width:0}
.feed header h3{margin:0;font:700 1.05rem/1.2 var(--body);white-space:nowrap}
.feed header h3::before{content:"# ";color:var(--steel)}
.feed header p{margin:0;color:var(--small-dim);font-size:.92rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;border-left:1px solid var(--rule);padding-left:.7rem}
.messages{padding:.6rem 0 1.4rem;max-height:52rem;overflow-y:auto}
.message{display:grid;grid-template-columns:2.6rem minmax(0,1fr);gap:.9rem;padding:.7rem 1.2rem}
.message:hover{background:rgba(255,255,255,.02)}
.avatar{width:2.6rem;height:2.6rem;border-radius:50%;background:var(--cursor);color:#0a0e13;display:grid;place-items:center;font:700 1rem/1 var(--display);letter-spacing:.02em}
.who{display:flex;align-items:baseline;flex-wrap:wrap;gap:.45rem}
.who strong{color:var(--cursor);font-weight:600}
.tag{background:var(--blurple);color:#fff;font:700 .62rem/1 var(--body);padding:.2rem .3rem;border-radius:4px;letter-spacing:.02em;align-self:center}
.who time,.who small{color:var(--small-dim);font-size:.78rem}
.said{margin:.15rem 0 0}
.mention{background:rgba(88,101,242,.3);color:#c9cdfb;border-radius:4px;padding:0 .2rem;font-weight:500}
.embed{margin-top:.45rem;max-width:36rem;background:var(--panel-2);border-left:4px solid var(--cursor);border-radius:4px;padding:.75rem 1rem .85rem;display:grid;gap:.55rem}
.embed.news{border-left-color:var(--link)}.embed.crew{border-left-color:var(--stamp)}
.embed .title{font-weight:700;color:var(--link);text-decoration:none;font-size:1.02rem}
.embed .title:hover{text-decoration:underline}
.embed ul{margin:0;padding:0;list-style:none;display:grid;gap:.3rem;font-size:.95rem}
.embed ul li::before{content:"▸ ";color:var(--cursor)}
.embed p{margin:0;font-size:.95rem}
.embed .fields{display:flex;flex-wrap:wrap;gap:.4rem 2rem;font-size:.9rem}
.embed .fields b{display:block;font-size:.85rem}
.embed .fields a{color:var(--link);text-decoration:none}
.embed img{width:100%;aspect-ratio:1200/630;object-fit:cover;border-radius:6px;display:block;background:var(--panel)}
.embed footer{font-size:.75rem;color:var(--small-dim)}
.more{margin:1rem 1.2rem 0;color:var(--link);text-decoration:none;font-size:.92rem}
@media (max-width:760px){
  .server{grid-template-columns:minmax(0,1fr)}
  .channels{flex-direction:row;overflow-x:auto;padding:.6rem;gap:.3rem;border-bottom:1px solid var(--rule)}
  .channels .guild,.channels .cat{display:none}
  .channels button{white-space:nowrap;border:1px solid var(--rule);border-radius:999px;padding:.35rem .7rem}
  .feed header p{display:none}
  .message{grid-template-columns:2.1rem minmax(0,1fr);gap:.7rem;padding:.7rem .8rem}.avatar{width:2.1rem;height:2.1rem;font-size:.85rem}
}

/* The crew */
.roles{display:grid;grid-template-columns:repeat(auto-fill,minmax(15rem,1fr));gap:.9rem;margin:0;padding:0;list-style:none}
.role{background:var(--panel);border:1px solid var(--rule);border-radius:12px;padding:1.1rem 1.1rem 1rem;display:grid;gap:.4rem;align-content:start;transition:border-color .2s,transform .2s}
.role:hover{border-color:var(--steel);transform:translateY(-2px)}
.role .icon{font-size:1.8rem;line-height:1}
.role h3{margin:0;font:700 1.35rem/1.1 var(--display);letter-spacing:.02em}
.role p{margin:0;color:var(--small);font-size:.95rem}
.role a{all:unset;cursor:pointer;margin-top:.35rem;font:600 .8rem/1 var(--label);letter-spacing:.12em;text-transform:uppercase;color:var(--cursor)}
.role button:hover{text-decoration:underline}
.crew-band{margin-top:2rem;display:flex;flex-wrap:wrap;align-items:center;gap:1rem 1.6rem;padding:1.3rem 1.4rem;border-radius:12px;background:linear-gradient(90deg,rgba(255,210,63,.12),rgba(229,72,77,.08));border:1px solid var(--rule)}
.crew-band p{margin:0;max-width:52ch}

/* Discord sign-in and the game’s downloads */
.ticket{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:2rem;align-items:start}
@media (max-width:860px){.ticket{grid-template-columns:minmax(0,1fr)}}
.stub{background:var(--panel);border:1px solid var(--rule);border-radius:16px;padding:clamp(1.1rem,3vw,1.8rem);box-shadow:0 18px 40px rgba(0,0,0,.45)}
.access [data-when]{display:none}
.access[data-state="loading"] [data-when~="loading"],.access[data-state="in"] [data-when~="in"],.access[data-state="out"] [data-when~="out"],
.access[data-state="open"] [data-when~="open"]{display:grid;gap:1rem}
.access .play{justify-self:start}
.access h3{margin:0;font:700 1.5rem/1.1 var(--display)}
.access-route{display:grid;gap:1rem;padding:1.1rem 0}
.access-route p{margin:0}
.access-route .actions{display:flex;flex-wrap:wrap;gap:.7rem}
.access-route .actions>a{max-width:100%}
.access-route.invitation{padding:1.1rem;border:1px solid var(--steel);border-radius:10px;background:var(--panel-2)}
.invitation h3{color:var(--cursor)}
.browser-warning{width:min(36rem,calc(100% - 2rem));max-height:calc(100dvh - 2rem);overflow-y:auto;padding:clamp(1.2rem,4vw,2rem);border:1px solid var(--steel);border-radius:16px;background:var(--panel);color:var(--ink);box-shadow:0 24px 80px rgba(0,0,0,.6)}
.browser-warning::backdrop{background:rgba(0,0,0,.78)}
.browser-warning h2{margin:0;font:700 2rem/1.1 var(--display)}
.browser-warning p{color:var(--small)}
.browser-actions{display:grid;gap:.8rem;margin-top:1.5rem}
.browser-actions>a,.browser-actions>button{justify-content:center;text-align:center;font-size:1.15rem;line-height:1.2}
.browser-actions [hidden]{display:none}
.hint{color:var(--small-dim);font-size:.9rem;margin:0}
.error{color:var(--stamp);margin:1rem 0 0}
.how{margin:0;padding-left:1.2rem;display:grid;gap:.7rem;color:var(--small)}
.how b,.how kbd{color:var(--ink)}
kbd{font:600 .85em/1 var(--label);border:1px solid var(--steel);border-bottom-width:2px;border-radius:4px;padding:.1em .35em}
.notice{border-left:3px solid var(--stamp);padding:.2rem 0 .2rem 1rem;color:var(--small);margin:0 0 1.6rem;max-width:60ch}
.install-guide{margin-top:2rem;padding:clamp(1.1rem,3vw,1.8rem);border:1px solid var(--rule);border-radius:16px;background:var(--panel);color:var(--small);font-size:.95rem}
.install-guide h3{margin:0;color:var(--ink);font:700 1.8rem/1.1 var(--display)}
.install-guide h4{margin:1.2rem 0 .6rem;color:var(--ink);font-size:1.05rem}
.install-guide p{margin:.6rem 0}
.install-guide b{color:var(--ink)}
.install-guide a{color:var(--link)}
.install-platforms{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,22rem),1fr));gap:1.5rem}
.install-platforms>div{min-width:0}
.install-platforms ol{padding-left:1.3rem;display:grid;gap:.65rem}
.install-trust{margin-top:1.5rem;border-left:3px solid var(--steel);padding-left:1rem}
.install-trust h4{margin-top:0}

/* The rules */
.legal details{border-top:1px solid var(--rule);padding:1rem 0}
.legal summary{cursor:pointer;font:700 1.5rem/1.1 var(--display);letter-spacing:.02em}
.legal .text{max-width:68ch;color:var(--small);margin-top:1rem}
.legal .text b{color:var(--ink)}
.legal ol{padding-left:1.3rem;display:grid;gap:.6rem}
.table{overflow-x:auto}
.legal table{border-collapse:collapse;font-size:.9rem}
.legal th,.legal td{border:1px solid var(--rule);padding:.45rem .6rem;text-align:left;vertical-align:top}
footer.site{border-top:1px solid var(--rule);padding-block:2rem 3rem;color:var(--small-dim);font-size:.88rem}
footer.site .wrap{display:grid;gap:.8rem}

/* BROL / Locals. The approved lettering is artwork; page text stays readable. */
:root {
  --paper: #eeeade; --panel: #e5e0d4; --panel-2: #ddd7c9; --deep: #ded9cd;
  --rule: #c6c1b5; --ink: #242521; --small: #55574e; --small-dim: #66685d;
  --steel: #747667; --cursor: #ffd43e; --stamp: #ac3827; --link: #304e47;
  --glow: transparent; --gothic: var(--display); color-scheme: light;
}
[hidden] { display: none !important; }
html { scroll-padding-top: 6rem; }
body { font-size: 1rem; line-height: 1.6; }
button, a { -webkit-tap-highlight-color: transparent; }
button { cursor: pointer; }
img { max-width: 100%; }
:focus-visible { outline: 3px solid #168473; outline-offset: 5px; border-radius: 0; }
.wrap { max-width: 1440px; padding-inline: clamp(22px, 5vw, 88px); }
.sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.skip { position: fixed; top: 8px; left: 12px; z-index: 100; padding: 12px 18px; background: var(--cursor); color: var(--ink); transform: translateY(-160%); }
.skip:focus { transform: translateY(0); }
.eyebrow, .label { font: 650 .72rem/1.5 var(--body); letter-spacing: .13em; text-transform: uppercase; }
.eyebrow { margin: 0 0 24px; }
h2, h2.gothic { font: 700 clamp(3rem, 6.8vw, 6.6rem)/.9 var(--display); letter-spacing: -.015em; margin: 0 0 24px; text-shadow: none; }
h3 { line-height: 1.15; }
section { padding-block: clamp(70px, 8vw, 125px); }
.intro { font-size: 1.05rem; line-height: 1.65; max-width: 48ch; }
.bar { background: rgba(238,234,222,.96); border-bottom: 1px solid var(--rule); }
.bar .wrap { height: 76px; gap: 26px; }
.brand { align-items: center; }
.brand img { width: 104px; height: 34px; object-fit: contain; }
.bar nav { gap: 18px; }
.bar nav a { font: 650 .7rem/1 var(--body); letter-spacing: .12em; padding: 12px 0; border-radius: 0; color: var(--ink); }
.bar nav a:hover { background: none; box-shadow: 0 2px var(--ink); }
.langs { gap: 1px; }
.langs button { border: 0; border-radius: 0; background: none; padding: 10px 7px; color: var(--small); font: 650 .69rem var(--body); }
.langs button[aria-pressed=true] { color: var(--ink); background: none; box-shadow: inset 0 -2px var(--ink); }
.play, .ghost { font: 700 .82rem/1.3 var(--body); letter-spacing: .035em; padding: 18px 24px; border-radius: 2px; text-transform: none; justify-content: center; }
.play { color: #25251e !important; border: 1px solid var(--ink); gap: 25px; box-shadow: 3px 3px 0 var(--ink); }
.play:hover { box-shadow: 5px 5px 0 var(--ink); transform: translate(-2px,-2px); }
.play.small { font: 700 .75rem/1.2 var(--body); padding: 11px 18px; gap: 20px; }
.ghost { background: transparent; border: 1px solid var(--ink); color: var(--ink); }
.ghost.small { font-size: .75rem; padding: 10px 14px; }
.text-link { display: inline-flex; gap: 16px; align-items: center; font-size: .8rem; text-underline-offset: 4px; }
.hero { display: block; min-height: 0; padding: 0; background: var(--paper); }
.hero .wrap { padding-block: 28px 0; }
.hero-topline { display: flex; justify-content: space-between; align-items: center; gap: 20px; }
.hero-topline .eyebrow { margin: 0; display: flex; align-items: center; gap: 9px; font-size: .61rem; }
.signal { display: inline-block; width: 7px; height: 7px; background: #597650; border-radius: 100%; }
.edition { font: 500 .58rem/1.5 var(--body); text-transform: uppercase; letter-spacing: .1em; }
.logo-stage { position: relative; width: min(100%,1120px); margin: 5px auto 0; aspect-ratio: 1.95; }
.logo-stage > canvas, .logo-artwork { position: absolute; width: 100%; height: 100%; inset: 0; }
#logo-canvas { display: block; opacity: 0; }
.logo-artwork { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: clamp(12px,2vw,24px); }
.logo-artwork-mark { position: relative; width: 92%; height: 70%; filter: drop-shadow(0 8px 5px rgb(36 37 33 / .14)); }
.logo-artwork-still, .logo-artwork-still img, #logo-artwork-canvas { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
#logo-artwork-canvas { opacity: 0; }
.logo-artwork.has-frames #logo-artwork-canvas { opacity: 1; }
.logo-artwork.has-frames .logo-artwork-still { opacity: 0; }
.logo-signature { margin: 0; font: 650 clamp(.58rem,1.2vw,.8rem)/1.4 var(--body); letter-spacing: .22em; text-transform: uppercase; color: var(--ink); }
.hero-bottom { display: flex; align-items: center; justify-content: space-between; gap: 30px; margin-top: -5px; padding: 0 12px 32px; }
.hero-copy { display: block; max-width: 680px; }
.hero-line { font: 700 clamp(2.4rem,4vw,3.8rem)/.96 var(--display); margin: 0; letter-spacing: -.015em; }
.hero-description { font-size: .95rem; line-height: 1.65; color: var(--small); margin: 16px 0 0; max-width: 58ch; }
.hero-entry { text-align: right; flex: none; }
.hero-entry p { font-size: .62rem; text-transform: uppercase; letter-spacing: .07em; margin: 12px 0 7px; }
.hero-entry .text-link { font-size: .68rem; }
.hero-footnote { border-top: 1px solid var(--rule); display: flex; gap: 16px; align-items: center; justify-content: space-between; padding: 13px 0; text-transform: uppercase; font-size: .56rem; letter-spacing: .12em; color: var(--small); }
.motion-toggle { background: transparent; border: 0; padding: 8px; color: inherit; text-transform: uppercase; letter-spacing: inherit; font: inherit; margin-right: auto; }
.section-heading { display: grid; grid-template-columns: 1.1fr 1fr; gap: 40px; align-items: end; margin-bottom: 45px; }
.section-heading h2, .section-heading .intro { margin-bottom: 0; }
.section-heading .intro { justify-self: end; max-width: 38ch; }
.city-section { background: #222721; color: #eeeade; --rule: #51564b; --small: #bcc1b4; --small-dim: #b7bdaf; }
.city-section .eyebrow { color: #ffd43e; }
.gallery-topline { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 40px; margin-bottom: 16px; }
.postcard-label { margin: 0; font: 650 .7rem/1.4 var(--body); letter-spacing: .09em; text-transform: uppercase; color: #ffd43e; }
.gallery-motion { display: inline-flex; align-items: center; justify-content: center; gap: 9px; min-width: 96px; min-height: 40px; padding: 8px 12px; border: 1px solid #757b6f; background: transparent; color: #eeeade; font: 600 .7rem var(--body); }
.gallery-motion[hidden] { display: none; }
.gallery-motion:hover { border-color: #ffd43e; color: #ffd43e; }
.postcard-stack { position: relative; isolation: isolate; margin: 28px 20px 36px; }
.postcard-back { position: absolute; inset: 0; padding: 8px 8px 54px; background: #c7c5b5; box-shadow: 0 6px 14px #0003; pointer-events: none; }
.postcard-back img { width: 100%; height: 100%; object-fit: cover; display: block; }
.postcard-back-far { transform: translate(9px,-8px) rotate(1.8deg); }
.postcard-back-near { transform: translate(-7px,6px) rotate(-1.4deg); background: #e2ddcb; }
.city-frame { position: relative; margin: 0; padding: 8px 8px 0; background: #f0ead9; box-shadow: 0 12px 30px #0005; }
.city-frame>img { display: block; width: 100%; height: auto; aspect-ratio: 16/8.6; object-fit: cover; }
.city-frame figcaption { display: flex; align-items: center; min-height: 66px; padding: 16px 15px; gap: 22px; color: #252820; }
.shot-number { font: 600 .72rem var(--body); letter-spacing: .08em; flex: none; }
#shot-caption { font: 700 1.7rem/1.1 var(--display); }
.shot-credit { margin-left: auto; flex: none; text-transform: uppercase; font-size: .58rem; letter-spacing: .12em; }
.gallery-bottom { display: flex; justify-content: space-between; gap: 20px; align-items: center; margin: 16px 0; }
.gallery-bottom p { font-size: .79rem; color: #bcc1b4; }
.gallery-controls { display: flex; gap: 8px; }
.gallery-controls button { width: 43px; height: 43px; border: 1px solid #757b6f; color: #eeeade; background: none; font: 400 1.3rem var(--body); }
.gallery-controls button:hover { background: #ffd43e; color: #242521; border-color: #ffd43e; }
.scene-thumbs { display: grid; grid-template-columns: repeat(12,minmax(0,1fr)); gap: 6px; }
.scene-thumbs button { border: 1px solid transparent; padding: 3px; background: transparent; opacity: .6; min-width: 0; }
.scene-thumbs button:hover { opacity: 1; }
.scene-thumbs button[aria-pressed=true] { border-color: #ffd43e; opacity: 1; }
.scene-thumbs img { display: block; width: 100%; height: auto; aspect-ratio: 1.6; object-fit: cover; }
.city-notes { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 48px; padding-top: 64px; }
.city-notes>div { border-top: 1px solid #59604f; padding-top: 19px; }
.note-number { font-size: .62rem; color: #b7bdaf; }
.city-notes h3 { font: 700 1.8rem/1.1 var(--display); margin: 24px 0 10px; }
.city-notes p { font-size: .86rem; color: #bcc1b4; max-width: 31ch; margin: 0; }
/* Discovering the real city through the game. */
.discovery-section { background: #f5f0e2; }
.discovery-section .section-heading { grid-template-columns: 1.25fr 1fr; }
.discovery-section h2 { font-size: clamp(2.8rem,5.3vw,5.1rem); }
.discovery-feature { display: grid; grid-template-columns: 1fr 1fr; border-block: 1px solid #b4b09f; }
.discovery-hook { padding: 38px 40px 38px 0; }
.discovery-hook h3 { font: 700 clamp(2.8rem,4.8vw,4.5rem)/.95 var(--display); margin: 30px 0 22px; }
.discovery-hook p, .discovery-reality p, .discovery-next p { font-size: .95rem; line-height: 1.7; max-width: 53ch; }
.discovery-state { display: inline-block; padding: 6px 9px; border: 1px solid #66805c; color: #324b2b; font: 650 .64rem/1.4 var(--body); letter-spacing: .04em; text-transform: uppercase; }
.discovery-state.planned { border-color: #9a8061; color: #695139; }
.discovery-reality { padding: 40px; background: #e4e8d5; }
.discovery-reality .eyebrow { font-size: .7rem; }
.discovery-reality .discovery-fact { font: 700 clamp(1.7rem,2.7vw,2.5rem)/1.1 var(--display); margin: 20px 0; }
.discovery-section details { margin-top: 25px; padding-top: 15px; border-top: 1px solid #b4b09f; }
.discovery-section summary { cursor: pointer; font-size: .85rem; font-weight: 650; }
.discovery-section details a { font-size: .8rem; text-underline-offset: 3px; }
.discovery-next { display: grid; grid-template-columns: .7fr 1fr 1fr; gap: 40px; margin-top: 55px; }
.discovery-next-heading p:not(.eyebrow) { font-size: .87rem; color: var(--small); }
.discovery-next h3 { font: 700 2rem/1.05 var(--display); margin: 22px 0 16px; }
.discovery-next article { border-top: 3px solid var(--ink); padding-top: 20px; }
.discovery-next article p { font-size: .87rem; }
.discovery-invitation { margin-top: 50px; padding-top: 30px; border-top: 1px solid var(--rule); display: flex; align-items: center; justify-content: space-between; gap: 30px; }
.discovery-invitation p { margin: 0; font-size: .86rem; line-height: 1.7; }
.city-discovery-link { text-underline-offset: 5px; }
@media(max-width:1000px) {
  .discovery-next { grid-template-columns: 1fr 1fr; gap: 30px; }
  .discovery-next-heading { grid-column: 1/-1; }
  .discovery-next-heading p:not(.eyebrow) { max-width: 65ch; }
}
@media(max-width:760px) {
  .discovery-section .section-heading, .discovery-feature, .discovery-next { grid-template-columns: 1fr; }
  .discovery-hook { padding: 30px 0; }
  .discovery-reality { padding: 28px 22px; }
  .discovery-next-heading { grid-column: auto; }
  .discovery-invitation { flex-direction: column; align-items: stretch; }
}

.locals-section { padding: 0 0 32px; }
.locals-scene { position: relative; isolation: isolate; min-height: 670px; display: flex; align-items: center; overflow: hidden; color: #fff5df; background: #3c3740; }
.locals-scene>img { position: absolute; inset: 0; height: 100%; width: 100%; object-fit: cover; object-position: center; z-index: -2; }
.locals-scene::after { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg,rgba(18,21,23,.92),rgba(18,21,23,.55) 45%,rgba(18,21,23,.1)); }
.locals-scene .wrap { width: 100%; padding-block: 80px; }
.locals-scene h2 { font-size: clamp(3.8rem,7.5vw,7.3rem); }
.locals-scene .eyebrow { color: #ffd43e; }
.locals-scene p:not(.eyebrow) { font-size: .98rem; line-height: 1.65; max-width: 40ch; margin-bottom: 28px; }
.contribute { border-bottom: 1px solid var(--rule); padding: 25px 0; }
.contribute summary { list-style: none; display: flex; justify-content: space-between; gap: 20px; font-weight: 650; cursor: pointer; }
.contribute summary::-webkit-details-marker { display: none; }
.contribute[open] summary { margin-bottom: 28px; }
.contribute>.hint { margin: 24px 0; }
.roles { grid-template-columns: repeat(3,minmax(0,1fr)); gap: 0 30px; }
.role { border: 0; border-top: 1px solid var(--rule); border-radius: 0; background: none; padding: 24px 0; gap: 12px; }
.role:hover { transform: none; }
.role .icon { display: none; }
.role h3 { font-size: 1.5rem; }
.role p { font-size: .85rem; }
.role a { color: var(--ink); font-size: .7rem; }
.news-section { padding-top: 65px; }
.news-section>.wrap>.intro { margin-bottom: 36px; }
.server { display: block; border: 0; border-radius: 0; background: transparent; box-shadow: none; }
.channels { flex-direction: row; align-items: center; background: transparent; gap: 24px; border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); padding: 15px 0; }
.channels .guild, .channels .cat { display: none; }
.channels button { border-radius: 0; padding: 9px 0; font: 650 .72rem/1 var(--body); text-transform: uppercase; letter-spacing: .06em; color: var(--small); }
.channels button::before { display: none; }
.channels button[aria-pressed=true] { background: transparent; color: var(--ink); box-shadow: inset 0 -2px var(--ink); }
.channels button:focus-visible { outline: 3px solid #168473; outline-offset: 5px; }
.feed header { padding: 17px 0; border: 0; }
.feed header h3 { display: none; }
.feed header p { border: 0; padding: 0; font-size: .75rem; }
.messages { display: grid; grid-template-columns: 1.2fr 1fr; max-height: 740px; gap: 0 50px; padding: 0; }
.message { display: block; padding: 24px 0; border-bottom: 1px solid var(--rule); }
.message:first-child { grid-row: span 2; }
.message>.avatar, .who .tag { display: none; }
.message:hover { background: none; }
.who { font-size: .65rem; text-transform: uppercase; letter-spacing: .05em; }
.who strong { color: var(--small-dim); }
.who time { font-size: .65rem; }
.said { margin: 15px 0 6px; font-size: .86rem; }
.embed { padding: 0; background: none; border: 0; max-width: none; gap: 16px; margin-top: 12px; }
.embed .title { font: 700 2rem/1.04 var(--display); color: var(--ink); }
.embed ul, .embed p { font-size: .88rem; }
.embed ul li::before { color: var(--small); }
.embed img { border-radius: 0; aspect-ratio: 1.9; }
.embed .fields { font-size: .75rem; gap: 2rem; }
.embed .fields b { font-size: .66rem; text-transform: uppercase; letter-spacing: .05em; }
.embed .fields a { text-decoration: underline; text-underline-offset: 3px; }
.embed footer { font-size: .6rem; letter-spacing: .08em; text-transform: uppercase; }
.play-section { background: #e0dccf; }
.play-section h2 { max-width: 10ch; }
.play-section>.wrap>.intro { max-width: 70ch; }
.notice { font-size: .85rem; border-color: #626454; max-width: 75ch; }
.ticket { grid-template-columns: 1.4fr 1fr; gap: clamp(32px,6vw,90px); margin-top: 38px; }
.stub { padding: 28px; border: 1px solid #b0ad9f; border-radius: 0; background: #eeeade; box-shadow: 5px 5px 0 #c2bdaf; }
.access h3 { font-size: 1.8rem; }
.access-route p, .access-route .how { font-size: .9rem; }
.access-route { padding-top: 24px; gap: 14px; }
.access-route.invitation { padding: 0 0 25px; border: 0; border-bottom: 1px solid var(--rule); border-radius: 0; background: transparent; }
.invitation h3 { color: var(--ink); }
.access-route.community { border-top: 1px solid var(--rule); }
.access-route .actions .play, .access-route .actions .ghost { padding: 14px 17px; font-size: .74rem; }
.ticket>div>.how { font-size: .88rem; gap: 20px; margin-top: 24px; }
.launch .ghost { background: #252820; color: #eeeade; border-color: #252820; }
.launch small { font: 500 .7rem/1.35 var(--body); letter-spacing: 0; }
.install-guide { padding: 22px 0; margin-top: 50px; border: 0; border-block: 1px solid #b9b5a8; border-radius: 0; background: transparent; }
.install-guide summary { color: var(--ink); cursor: pointer; font: 650 .92rem/1.4 var(--body); }
.install-content { padding-top: 22px; }
.legal { padding-block: 45px; }
.legal h2 { font-size: 2.8rem; }
.legal summary { font: 600 .85rem/1.4 var(--body); }
.legal-page { display: flex; justify-content: space-between; gap: 16px; border-top: 1px solid var(--rule); padding: 1rem 0; font: 600 .85rem/1.4 var(--body); text-decoration: none; }
.legal-page:hover { text-decoration: underline; text-underline-offset: 4px; }
.browser-warning { border-radius: 2px; background: #eeeade; border-color: #252820; }
.browser-warning .ghost { font-size: .8rem; }
footer.site { padding-block: 36px; font-size: .72rem; }
footer.site .wrap { gap: 12px; }
.footer-top { display: flex; align-items: center; gap: 24px; padding-bottom: 32px; }
.footer-top img { display: block; width: 128px; height: 42px; object-fit: contain; }
.footer-top p { font-size: .78rem; }
.footer-top>a:last-child { margin-left: auto; }
footer.site [data-legal] p { margin: 0; max-width: 110ch; line-height: 1.7; }
.license-link { font-size: .65rem; }
@media(min-width:1600px) { .logo-stage { width: 1030px; } }
@media(max-width:1000px) {
  .bar .wrap { gap: 18px; } .bar nav { gap: 16px; }
  .edition { display: none; }
  .hero-copy { display: block; } .hero-description { margin-top: 12px; }
  .logo-stage { margin-block: 12px 20px; }
  .hero-line { font-size: 2rem; }
  .locals-scene { min-height: 580px; }
  .city-notes { gap: 24px; }
}
@media(max-width:760px) {
  .bar .wrap { height: 65px; gap: 18px; } .brand img { width: 85px; }
  .bar nav { display: none; } .langs { margin-left: auto; }
  .bar .play.small { padding: 11px 13px; }
  .hero .wrap { padding-top: 23px; } .hero-topline .eyebrow { font-size: .54rem; letter-spacing: .08em; }
  .logo-stage { width: calc(100% + 22px); margin: 23px -11px 20px; aspect-ratio: 1.83; }
  .hero-bottom { display: block; padding: 0 0 24px; margin: 0; text-align: center; }
  .hero-copy { display: block; } .hero-line { font-size: 2.35rem; }
  .hero-description { font-size: .84rem; margin: 14px auto 24px; }
  .hero-entry { text-align: center; } .hero-entry>.play { width: 100%; padding-block: 18px; }
  .hero-entry p { font-size: .56rem; margin-top: 17px; }
  .hero-footnote { font-size: .48rem; gap: 6px; } .hero-footnote>span:last-child { display: none; }
  .motion-toggle { margin-right: 0; }
  .section-heading { grid-template-columns: 1fr; gap: 26px; margin-bottom: 30px; }
  .section-heading .intro { justify-self: start; font-size: .94rem; max-width: 40ch; }
  .gallery-topline { gap: 8px; }
  .postcard-label { max-width: 22ch; font-size: .6rem; }
  .postcard-stack { margin: 20px 9px 28px; }
  .postcard-back { padding: 5px 5px 80px; }
  .postcard-back-far { transform: translate(3px,-6px) rotate(2deg); }
  .postcard-back-near { transform: translate(-3px,4px) rotate(-1.7deg); }
  .city-frame { padding: 5px 5px 0; }
  .city-frame>img { aspect-ratio: 1.2; }
  .city-frame figcaption { min-height: 98px; padding: 12px 10px; gap: 7px; align-items: start; flex-direction: column; }
  #shot-caption { font-size: 1.5rem; } .shot-credit { display: none; } .shot-number { font-size: .6rem; }
  .gallery-bottom p { max-width: 24ch; font-size: .7rem; } .gallery-controls button { width: 40px; height: 40px; }
  .scene-thumbs { grid-template-columns: repeat(6,minmax(0,1fr)); gap: 4px; }
  .city-notes { grid-template-columns: 1fr; gap: 28px; padding-top: 40px; }
  .city-notes>div { display: grid; grid-template-columns: 28px 1fr; gap: 12px; }
  .city-notes h3 { margin: 0; font-size: 1.7rem; } .city-notes p { grid-column: 2; max-width: 40ch; }
  .note-number { padding-top: 5px; }
  .locals-scene { min-height: 630px; align-items: flex-end; }
  .locals-scene>img { object-position: 64% center; }
  .locals-scene::after { background: linear-gradient(0deg,rgba(18,21,23,.95),rgba(18,21,23,.5) 65%,rgba(18,21,23,.18)); }
  .locals-scene .wrap { padding-block: 65px; } .locals-scene h2 { font-size: 3.6rem; }
  .locals-scene p:not(.eyebrow) { font-size: .9rem; } .contribute summary { font-size: .86rem; }
  .roles { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 0 20px; }
  .role h3 { font-size: 1.3rem; } .role p { font-size: .8rem; }
  .channels { gap: 22px; } .channels button { border: 0; border-radius: 0; white-space: nowrap; font-size: .63rem; }
  .feed header p { display: block; white-space: normal; }
  .messages { grid-template-columns: 1fr; gap: 0; max-height: 760px; }
  .message { padding: 23px 0; } .message:first-child { grid-row: auto; }
  .ticket { grid-template-columns: 1fr; gap: 40px; } .stub { padding: 22px; }
  .play-section h2 { max-width: 11ch; }
  .access-route .actions { display: grid; } .access-route .actions .play { justify-self: stretch; }
  .footer-top { gap: 12px; flex-wrap: wrap; } .footer-top p { display: none; }
}
@media(prefers-reduced-motion:reduce) {
  html { scroll-behavior: auto; } *, *::before, *::after { transition: none !important; animation: none !important; }
  .play:hover { transform: none; }
}
@media(min-width:761px) {
  .logo-stage { height: clamp(230px,39vh,350px); aspect-ratio: auto; }
}

/* The in-game ad break: real clips, loaded only when the visitor presses play. */
.brolify-section { background: #e5dfce; border-top: 1px solid var(--rule); }
.brolify-spots { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 20px; align-items: start; }
.brolify-spot { min-width: 0; padding: 25px 22px 20px; background: #f6f0df; border: 1px solid #b4b09f; border-top: 5px solid #252820; }
.brolify-spot:nth-child(2) { background: #d2d7bc; }
.brolify-spot:nth-child(3) { background: #efd39e; }
.spot-label { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px; font-size: .57rem; font-weight: 650; text-transform: uppercase; letter-spacing: .06em; }
.brolify-spot h3 { font: 700 clamp(1.7rem,2.7vw,2.6rem)/1 var(--display); margin: 27px 0 18px; }
.brolify-spot blockquote { min-height: 4.7em; margin: 0 0 22px; font-size: clamp(1.05rem,1.5vw,1.4rem); font-weight: 600; line-height: 1.4; letter-spacing: -.02em; }
.brolify-spot audio { display: block; width: 100%; height: 42px; color-scheme: light; }
.spot-transcript { margin-top: 20px; border-top: 1px solid #b4b09f; padding-top: 13px; }
.spot-transcript summary { font-size: .76rem; font-weight: 650; cursor: pointer; }
.spot-transcript p, .spot-error { font-size: .85rem; line-height: 1.65; }
.brolify-invitation { display: flex; justify-content: space-between; align-items: center; gap: 24px; margin-top: 36px; }
.brolify-invitation p { margin: 0; font-size: .93rem; line-height: 1.7; }
@media(max-width:900px) {
  .brolify-spots { grid-template-columns: 1fr; }
  .brolify-spot { padding: 25px; }
  .brolify-spot h3 { margin-top: 20px; font-size: 2rem; }
  .brolify-spot blockquote { min-height: 0; font-size: 1.25rem; }
}
@media(max-width:760px) {
  .brolify-invitation { align-items: stretch; flex-direction: column; }
  .hero-topline .eyebrow { flex-wrap: wrap; }
}

/* The official trailer stays one click away; social links work without scripts. */
.film-section { background: #d4d8c5; border-block: 1px solid #b4b8a5; }
.film-heading { display: flex; justify-content: space-between; align-items: end; gap: 36px; margin-bottom: 40px; }
.film-heading .eyebrow { margin-bottom: 20px; }
.film-heading h2 { font-size: clamp(2.8rem,5.7vw,5.5rem); margin: 0; }
.film-heading .intro { margin: 0; max-width: 35ch; }
.film-layout { display: grid; grid-template-columns: minmax(0,2.35fr) minmax(240px,1fr); gap: 42px; align-items: start; }
.film-feature { min-width: 0; }
.trailer-player { position: relative; width: 100%; min-height: 200px; aspect-ratio: 16/9; background: #1d241c; border: 1px solid #252820; }
.trailer-poster { position: absolute; inset: 0; display: block; overflow: hidden; color: #fff8e7; text-decoration: none; }
.trailer-scene { width: 100%; height: 100%; object-fit: cover; }
.trailer-poster::after { content: ''; position: absolute; inset: 0; background: linear-gradient(0deg,#101810e8,transparent 65%); }
.trailer-logo { position: absolute; left: 5%; top: 6%; width: 45%; height: auto; z-index: 1; filter: drop-shadow(0 3px 6px #0006); }
.trailer-action { position: absolute; inset: auto 6% 9%; display: flex; align-items: center; gap: 20px; z-index: 1; }
.trailer-play-icon { display: grid; place-items: center; width: 68px; height: 68px; flex: none; padding-left: 4px; background: #ffd43e; color: #252820; border-radius: 50%; font-size: 1.5rem; transition: transform .2s; }
.trailer-poster:hover .trailer-play-icon { transform: scale(1.08); }
.trailer-action strong { display: block; font: 700 clamp(1rem,1.65vw,1.6rem)/1.2 var(--body); }
.trailer-action small { display: block; margin-top: 8px; font-size: .69rem; }
.trailer-player iframe { display: block; width: 100%; height: 100%; border: 0; position: absolute; inset: 0; }
.trailer-caption { display: flex; align-items: start; justify-content: space-between; gap: 20px; margin-top: 12px; font-size: .68rem; line-height: 1.6; }
.trailer-caption p { margin: 0; max-width: 47ch; color: #535a4a; }
.trailer-caption a { flex: none; text-underline-offset: 3px; }
.social-follow .eyebrow { margin: 0 0 14px; font-size: .63rem; }
.social-follow h3 { font: 700 clamp(1.9rem,3.4vw,3.2rem)/1 var(--display); margin: 0 0 26px; }
.social-card { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 16px 0; border-top: 1px solid #9bA18c; text-decoration: none; }
.social-card strong { display: block; font-size: 1.04rem; }
.social-card small { display: block; margin-top: 4px; font-size: .72rem; color: #535a4a; }
.social-card>a, .social-card>span:last-child { flex: none; }
.social-card[href]:hover strong { text-decoration: underline; text-underline-offset: 4px; }
.soon-label { border: 1px solid #858d77; padding: 4px 6px; font-size: .53rem; text-transform: uppercase; letter-spacing: .06em; }
.footer-socials { display: flex; align-items: center; justify-content: end; flex-wrap: wrap; gap: 16px 22px; font-size: .75rem; }
.footer-socials>span { opacity: .65; }
.footer-socials a { text-underline-offset: 4px; }
@media(max-width:1000px) {
  .film-layout { gap: 26px; grid-template-columns: minmax(0,1.75fr) minmax(220px,1fr); }
  .trailer-caption { flex-direction: column; gap: 6px; }
  .footer-top { flex-wrap: wrap; }
  .footer-socials { flex-basis: 100%; justify-content: start; }
}
@media(max-width:760px) {
  .film-heading { flex-direction: column; align-items: start; gap: 24px; margin-bottom: 28px; }
  .film-heading .intro { font-size: .94rem; }
  .film-layout { grid-template-columns: minmax(0,1fr); gap: 36px; }
  .trailer-play-icon { width: 44px; height: 44px; font-size: 1rem; }
  .trailer-action { gap: 12px; inset: auto 5% 8%; }
  .trailer-action strong { font-size: .83rem; }
  .trailer-action small { margin-top: 5px; font-size: .58rem; }
  .social-follow h3 { font-size: 2.6rem; }
  .footer-socials { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; padding-top: 12px; }
}


/* FABRIK brings collective creation into the first visit. */
.hero-entry.fabrik-intro { width: 290px; }
.fabrik-intro .fabrik-actions { display: grid; gap: 12px; }
.fabrik-intro .fabrik-actions a { width: 100%; min-height: 52px; }
section.fabrik-intro { background: var(--ink); color: var(--paper); padding-block: clamp(48px, 6vw, 84px); }
.fabrik-intro .fabrik-heading { display: flex; align-items: end; justify-content: space-between; gap: 32px; padding-bottom: 32px; border-bottom: 1px solid #66685d; }
.fabrik-intro .fabrik-heading .eyebrow { color: #c8c5b7; margin-bottom: 15px; }
.fabrik-intro h2 { font-size: clamp(3.6rem, 8vw, 7rem); margin: 0; }
.fabrik-intro h2>span { color: var(--cursor); }
.fabrik-intro .fabrik-lede { font: 700 clamp(1.55rem, 3vw, 2.45rem)/1.08 var(--display); margin: 0; }
.fabrik-intro .fabrik-lede strong { color: var(--cursor); font-weight: inherit; }
.fabrik-intro .fabrik-body { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: clamp(28px, 6vw, 84px); padding-top: 35px; }
.fabrik-intro .fabrik-story p { color: #d6d2c5; font-size: .97rem; line-height: 1.7; max-width: 48ch; margin: 0 0 20px; }
.fabrik-intro .fabrik-story .play { margin-top: 7px; box-shadow: 3px 3px 0 #8b897b; }
.fabrik-intro .fabrik-options { display: grid; align-content: start; }
.fabrik-intro .fabrik-options>a { display: grid; grid-template-columns: 25px minmax(0, 1fr) 16px; gap: 15px; align-items: start; padding: 17px 0; color: inherit; text-decoration: none; border-bottom: 1px solid #66685d; }
.fabrik-intro .fabrik-options>a:first-child { padding-top: 0; }
.fabrik-intro .fabrik-options>a:hover strong { text-decoration: underline; text-underline-offset: 4px; color: var(--cursor); }
.fabrik-intro .fabrik-option-number { font: 600 .68rem/1.8 var(--body); color: var(--cursor); }
.fabrik-intro .fabrik-options strong { font: 650 1rem/1.4 var(--body); }
.fabrik-intro .fabrik-options small { display: block; font: 400 .8rem/1.6 var(--body); color: #c8c5b7; margin-top: 4px; }
.fabrik-intro .fabrik-note { margin: 30px 0 0; color: #c8c5b7; font-size: .75rem; }
@media (max-width: 760px) {
  .hero-entry.fabrik-intro { width: 100%; }
  .fabrik-intro .fabrik-heading { align-items: start; flex-direction: column; gap: 24px; }
  .fabrik-intro .fabrik-body { grid-template-columns: minmax(0, 1fr); gap: 36px; }
  .fabrik-intro .fabrik-story .play { width: 100%; }
}

/* One project, with a clear place to play, create and document the city. */
.bar nav a, .langs button { min-height: 44px; }
.hero-bottom { gap: clamp(28px,5vw,76px); padding-inline: 0; padding-bottom: 35px; align-items: end; }
.hero-entry.fabrik-intro { width: 300px; }
.hero-entry p { text-transform: none; letter-spacing: 0; font-size: .75rem; }
.hero-entry .text-link { min-height: 36px; }
.project-section { border-top: 1px solid var(--rule); background: #e5dfcf; }
.project-heading { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(30px,6vw,90px); align-items: start; }
.project-heading h2 { max-width: 12ch; font-size: clamp(3.3rem,6.2vw,5.6rem); }
.project-intro { max-width: 55ch; font-size: 1rem; line-height: 1.75; }
.project-intro p:first-child { margin-top: 0; }
.project-intro strong { color: var(--ink); }
.project-steps { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 32px; padding: 0; margin: 38px 0 0; list-style: none; counter-reset: project; }
.project-steps>li { border-top: 1px solid #9d9d8c; padding-top: 20px; counter-increment: project; min-width: 0; }
.project-steps>li::before { content: "0" counter(project); display: block; font: 650 .72rem/1.2 var(--body); color: #5b6152; margin-bottom: 16px; }
.project-steps h3 { font: 700 1.7rem/1.08 var(--display); margin: 0 0 12px; }
.project-steps p { font-size: .88rem; line-height: 1.65; margin: 0; max-width: 40ch; }
.project-products { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 14px; margin-top: 38px; }
.project-product { display: flex; flex-direction: column; gap: 10px; padding: 23px; border: 1px solid #9d9d8c; text-decoration: none; min-width: 0; background: #eeeade; }
.project-product:nth-child(2) { background: #ffd43e; border-color: #252820; }
.project-product:nth-child(3) { background: #d4d8c5; }
.project-product:hover { border-color: #252820; box-shadow: 3px 3px 0 #252820; }
.project-product strong { font: 700 1.6rem/1.1 var(--display); }
.project-product p, .project-product small { margin: 0; font-size: .83rem; line-height: 1.6; }
.project-product>span:last-child { margin-top: auto; font-size: .78rem; font-weight: 650; }
.fabrik-disciplines .roles { grid-template-columns: repeat(3,minmax(0,1fr)); gap: 0 22px; }
.fabrik-disciplines .role { border-top-color: #66685d; gap: 9px; padding: 18px 0 12px; min-width: 0; }
.fabrik-disciplines .role h3 { color: #eeeade; font-size: 1.5rem; }
.fabrik-disciplines .role p { color: #c8c5b7; font-size: .78rem; }
.fabrik-disciplines .role a { color: #ffd43e; min-height: 44px; display: inline-flex; align-items: center; font: 650 .68rem/1.4 var(--body); letter-spacing: .03em; }
.fabrik-disciplines .role a:hover { text-decoration: underline; text-underline-offset: 4px; }
.fabrik-fieldwork { display: flex; justify-content: space-between; align-items: center; gap: 28px; padding: 24px 0 0; margin-top: 26px; border-top: 1px solid #66685d; }
.fabrik-fieldwork p { max-width: 60ch; margin: 0; color: #d6d2c5; font-size: .85rem; }
.fabrik-fieldwork a { color: #ffd43e; flex: none; min-height: 44px; display: inline-flex; align-items: center; text-underline-offset: 4px; font-size: .82rem; }
.community-links { display: flex; align-items: center; flex-wrap: wrap; gap: 18px 30px; }
.community-links .text-link { color: #fff5df; min-height: 44px; }
.faq-section { background: #e5dfcf; border-block: 1px solid var(--rule); }
.faq-section>.wrap { display: grid; grid-template-columns: minmax(0,.8fr) minmax(0,1.2fr); gap: clamp(30px,7vw,90px); align-items: start; }
.faq-heading h2 { font-size: clamp(3rem,5.5vw,5.2rem); max-width: 11ch; }
.faq-heading p:not(.eyebrow) { max-width: 35ch; font-size: .9rem; }
.faq-list details { border-top: 1px solid #a8aa98; padding: 0; }
.faq-list details:last-child { border-bottom: 1px solid #a8aa98; }
.faq-list summary { position: relative; padding: 21px 32px 21px 0; cursor: pointer; list-style: none; font-size: .96rem; font-weight: 650; line-height: 1.5; }
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary::after { content: "+"; position: absolute; right: 3px; top: 20px; font-size: 1.25rem; line-height: 1; }
.faq-list details[open] summary::after { content: "−"; }
.faq-list details p { font-size: .9rem; line-height: 1.75; max-width: 62ch; margin: 0 0 22px; }
.faq-list a { text-underline-offset: 4px; }
.footer-projects { display: flex; flex-wrap: wrap; gap: 12px 28px; padding: 8px 0 22px; border-bottom: 1px solid var(--rule); }
.footer-projects a { min-height: 44px; display: inline-flex; align-items: center; text-underline-offset: 4px; font-size: .8rem; }
@media (max-width: 1100px) {
  .fabrik-intro .fabrik-body { grid-template-columns: minmax(0,.8fr) minmax(0,1.2fr); gap: 30px; }
  .fabrik-disciplines .roles { grid-template-columns: repeat(2,minmax(0,1fr)); }
}
@media (max-width: 900px) {
  html { scroll-padding-top: 8rem; }
  .bar .wrap { display: grid; grid-template-columns: minmax(0,1fr) auto auto; height: auto; gap: 0 12px; padding-top: 9px; }
  .bar .brand { margin-right: auto; }
  .bar .langs { margin-left: 0; }
  .bar nav { display: flex; order: 4; grid-column: 1 / -1; width: 100%; margin: 3px 0 0; gap: clamp(12px,3vw,30px); border-top: 1px solid var(--rule); overflow-x: auto; }
  .bar nav a { flex: none; font-size: .65rem; letter-spacing: .07em; min-height: 44px; }
  .bar .play.small { min-height: 44px; }
  .hero-bottom { gap: 28px; }
  .hero-copy { max-width: 56%; }
  .hero-line { font-size: 2.8rem; }
  .hero-description { font-size: .9rem; }
  .project-products { gap: 10px; }
  .project-product { padding: 20px 16px; }
}
@media (max-width: 760px) {
  .hero-copy { max-width: none; text-align: left; }
  .hero-line { font-size: clamp(2.5rem,9vw,3.6rem); }
  .hero-description { margin: 16px 0 26px; }
  .logo-stage { width: 100%; margin: 9px auto 18px; aspect-ratio: 2; }
  .hero-entry.fabrik-intro { width: 100%; }
  .hero-entry p { font-size: .7rem; }
  .hero-footnote { font-size: .53rem; }
  .project-heading, .project-products, .project-steps, .faq-section>.wrap { grid-template-columns: minmax(0,1fr); }
  .project-heading { gap: 18px; }
  .project-heading h2 { max-width: none; }
  .project-steps { gap: 24px; margin-top: 24px; }
  .project-steps>li { display: grid; grid-template-columns: 25px minmax(0,1fr); gap: 9px 15px; }
  .project-steps>li::before { grid-row: span 2; margin-top: 7px; }
  .project-steps h3 { margin: 0; }
  .project-steps p { grid-column: 2; max-width: none; }
  .project-product { padding: 22px; }
  .fabrik-intro .fabrik-body { grid-template-columns: minmax(0,1fr); gap: 24px; }
  .fabrik-disciplines .roles { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 0 22px; }
  .fabrik-disciplines .role p { font-size: .82rem; }
  .fabrik-fieldwork { flex-direction: column; align-items: start; gap: 8px; }
  .fabrik-fieldwork a { flex: auto; }
  .faq-heading h2 { max-width: none; }
  .faq-list summary { font-size: .9rem; }
  .community-links { align-items: stretch; flex-direction: column; gap: 16px; }
  .community-links .text-link { justify-content: center; }
}