:root{--ink:#1c1b17;--cream:#f9f6eb;--yellow:#ffda34;--line:#d8d1bd;--dark:#171718;--font:"Arial","PingFang SC","Microsoft YaHei","Noto Sans CJK SC",sans-serif;--mono:ui-monospace,SFMono-Regular,Consolas,monospace}
:root{--header-height:76px;--ticker-height:42px;--hero-inset:max(26px,3.2vw,calc((100% - 1792px) / 2))}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:22px}
body{margin:0;background:var(--cream);color:var(--ink);font:16px/1.5 var(--font)}
a{color:inherit;text-decoration:none}button{font:inherit;color:inherit;cursor:pointer}img{display:block;max-width:100%}h1,h2,h3,p{margin:0}[hidden]{display:none!important}
:focus-visible{outline:3px solid #3871da;outline-offset:5px}
.header{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:var(--header-height);padding:10px var(--hero-inset);border-bottom:1px solid var(--line);background:var(--cream)}
.brand{display:inline-flex;align-items:center;gap:8px;flex-shrink:0;line-height:1}
.brand strong{display:block;font-size:23px;font-weight:1000;letter-spacing:.08em}.brand small{display:block;margin-top:5px;font:800 9px/1 var(--mono);letter-spacing:.13em}
nav{display:flex;align-items:center;gap:clamp(12px,3vw,38px);font-size:14px;font-weight:800}
nav a:hover,footer a:hover{text-decoration:underline;text-underline-offset:5px}
nav a{padding-block:10px}
.story-link{font-size:14px;font-weight:800;text-decoration:underline;text-underline-offset:4px}
.button{display:inline-flex;align-items:center;justify-content:center;gap:14px;min-height:48px;padding:10px 19px;border:2px solid var(--ink);border-radius:4px;font-weight:900;line-height:1.3;text-align:center;transition:transform .18s,box-shadow .18s}
.button.primary{background:var(--yellow);color:var(--ink);box-shadow:4px 4px var(--ink)}
.button.secondary{background:transparent;color:#fff5c3;border-color:#b8aa70}
.button:hover{transform:translate(-2px,-2px)}.button:active{transform:translate(2px,2px)}
.ticker{--ticker-gap:28px;--ticker-duration:44s;display:flex;min-height:var(--ticker-height);border-block:2px solid var(--ink);background:repeating-linear-gradient(135deg,#201a110b 0 12px,transparent 12px 28px) var(--yellow);font:1000 18px/1 var(--mono);letter-spacing:.04em;white-space:nowrap}
.ticker-window{min-width:0;flex:1;overflow:hidden;padding-block:10px}
.ticker-track{display:flex;width:max-content}
.ticker-group{display:flex;flex:none;min-width:100vw;justify-content:space-around;align-items:center;gap:var(--ticker-gap);padding-inline:calc(var(--ticker-gap) / 2)}
.ticker.is-animated .ticker-track{animation:ticker-scroll var(--ticker-duration) linear infinite}
.ticker.is-paused .ticker-track{animation-play-state:paused}
.ticker-toggle{display:grid;place-items:center;flex:none;width:42px;padding:0;background:var(--yellow);border:0;border-inline-start:1px solid var(--ink)}
.ticker-toggle:hover{background:#ffe66c}.ticker-toggle:focus-visible{outline-offset:-4px}
.ticker-play-icon,.ticker.is-paused .ticker-pause-icon{display:none}
.ticker.is-paused .ticker-play-icon{display:inline}
@keyframes ticker-scroll{to{transform:translateX(-50%)}}
.section{width:min(1190px,100% - 64px);margin:auto;padding:clamp(66px,8vw,112px) 0}
.section-head h2{font-size:clamp(46px,6.5vw,83px);font-weight:1000;letter-spacing:-.08em;line-height:1.02;margin:14px 0 19px}
.section-head h2 span{color:#977016}.section-head>p:not(.eyebrow){max-width:34ch}
.eyebrow{font:900 12px/1.4 var(--mono);letter-spacing:.09em;display:flex;align-items:center;gap:8px}
.eyebrow span{height:10px;width:10px;background:var(--yellow);border:1px solid var(--ink);transform:rotate(45deg)}
.story-intro{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);align-items:center;gap:clamp(22px,5vw,66px)}
.origin-note{background:#fff8db;border:2px solid var(--ink);border-radius:5px;box-shadow:4px 4px var(--ink);padding:clamp(16px,3vw,30px)}
.origin-note h3{font:900 clamp(22px,3.5vw,46px)/1.12 var(--mono);letter-spacing:-.045em;margin:11px 0}
.origin-note p:not(.eyebrow){max-width:42ch;line-height:1.65}
.origin-term{white-space:nowrap}
.origin-note .story-link{display:inline-block;margin-top:12px;color:#685118}
.frames{display:grid;gap:clamp(20px,3vw,38px);margin-top:38px}
.frame{min-width:0;display:grid;grid-template-columns:minmax(0,.82fr) minmax(0,1.85fr);grid-template-areas:"copy art";border:2px solid var(--ink);border-radius:8px;overflow:hidden;box-shadow:5px 5px var(--ink);background:#fffcf1}
.frame:nth-child(2){grid-template-columns:minmax(0,1.85fr) minmax(0,.82fr);grid-template-areas:"art copy";background:#f6e7b7}
.frame-copy{grid-area:copy;align-self:center;padding:clamp(20px,4vw,54px)}
.frame-art{grid-area:art;height:clamp(225px,25vw,345px);position:relative;overflow:hidden;background:#efe3c1;border-inline-start:2px solid var(--ink)}
.frame:nth-child(2) .frame-art{border-inline-start:0;border-inline-end:2px solid var(--ink)}
.frame-art img{width:100%;height:100%;object-fit:cover}
.frame-art.second img{object-position:center 44%}.frame-art.third img{object-position:center 54%}
.frame .scene-number{display:flex;align-items:center;gap:9px;color:#7b5b25;font:900 12px/1.2 var(--mono);letter-spacing:.06em}
.scene-number span{border-inline-start:1px solid #b8a674;padding-inline-start:9px}
.frame-art.first img{object-position:center 64%}
.frame h3{margin:13px 0 9px;font-size:clamp(19px,2.45vw,34px);line-height:1.18;letter-spacing:-.04em}.frame p{color:#57503f;font-size:15px}
.yard{
  --yard-padding:clamp(24px,4svh,44px);
  background:var(--dark);
  color:#faf3d9;
  border-block:2px solid var(--ink);
}
.yard-inner{
  width:100%;
  margin-inline:auto;
  padding:var(--yard-padding) var(--hero-inset);
  display:grid;
  grid-template-columns:minmax(0,.78fr) minmax(0,1.22fr);
  align-items:center;
  gap:clamp(24px,2.4vw,40px);
}
.yard-head{container-type:inline-size}
.yard .primary{box-shadow:3px 3px #cfa81b}.yard .primary[aria-disabled=true]{cursor:default;background:#eedf92}.yard-status:not(:empty){margin-top:12px;font-size:14px;font-weight:800}.yard .secondary{margin-top:12px}
.blueprint{
  /* In short windows, reserve space for the card frame and community strip. */
  --stage-height:calc(100svh - var(--header-height) - var(--ticker-height) - 2 * var(--yard-padding) - 136px);
  width:min(100%,980px,max(420px,calc(var(--stage-height) * 1.5 + 28px)));
  justify-self:center;
  min-width:0;
  padding:13px;
  background:#202020;
  border:1px solid #67604a;
  border-radius:8px;
  box-shadow:0 12px 48px #0005;
  transition:border-color .7s,box-shadow .7s;
}
.blueprint.built{border-color:#a77b36;box-shadow:0 15px 52px #0008,0 0 34px #ffbb3020}
.blueprint-foot{display:flex;justify-content:space-between;align-items:center;gap:9px;padding:5px 2px;color:#ddd1a7;font:800 11px/1.4 var(--mono);letter-spacing:.08em}
.blueprint-foot{padding-top:9px}#plan{display:block;width:100%;height:auto;overflow:visible}.key i{display:inline-block;width:9px;height:9px;background:var(--yellow);margin-right:3px}.site-tile{fill:url(#tile);stroke:#9c710c;stroke-width:.65}.site-tile.missing{fill:#2f2a1c;stroke:#f5d66d;stroke-dasharray:3 2;stroke-width:1.3}.site-tile.final{animation:land .45s cubic-bezier(.19,.74,.34,1.14) both;transform-box:fill-box;transform-origin:center}.built .site-tile:not(.final){animation:glow .6s var(--delay) both}
.community-strip{background:#fff8df;border-bottom:1px solid var(--line)}
.community-inner{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:12px 22px;padding:15px var(--hero-inset)}
.contract{min-width:0;display:flex;align-items:center;gap:12px}
.contract-address{display:grid;gap:3px;min-width:0}
.contract-address strong{font-size:12px;letter-spacing:.06em}
.contract-address code{font:700 clamp(12px,1.22vw,15px)/1.4 var(--mono);overflow-wrap:anywhere;user-select:all}
.community-links{display:flex;flex-wrap:wrap;gap:8px}
.community-button{min-height:44px;padding:7px 12px;font-size:13px;border-width:1px;background:var(--cream);white-space:nowrap}
.community-button:hover{background:#ffe66c}
#copy-contract{background:var(--yellow);min-width:83px}
.sticker-list{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:26px}
.stickers .section-head>.community-belief{max-width:54ch}
.stickers .section-head>.community-motto{max-width:none;font-size:clamp(18px,2.5vw,26px);font-weight:900;margin-top:10px}
.sticker{text-align:left;display:grid;grid-template-columns:70px 1fr;align-items:center;column-gap:12px;padding:10px;background:#fff9e8;border:2px solid var(--ink);border-radius:6px;box-shadow:3px 3px var(--ink)}
.sticker:hover{background:#ffec9c}.sticker img{grid-row:1/3;width:70px;height:70px;object-fit:cover;border-radius:4px}.sticker strong{align-self:end;line-height:1.2}.sticker small{align-self:start;color:#57503f;margin-top:4px;font-size:11px}
footer{display:flex;justify-content:space-between;align-items:center;gap:14px;background:var(--yellow);border-top:2px solid var(--ink);padding:18px max(24px,calc((100% - 1190px)/2));font-size:13px;font-weight:800}
footer .brand strong{font-size:19px}.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
@keyframes land{from{transform:translateY(-35px) scale(1.45);opacity:.2}to{transform:none;opacity:1}}
@keyframes glow{0%,100%{filter:none}48%{filter:brightness(1.7) drop-shadow(0 0 4px #ffc433)}}
@media (max-width:900px){.yard-inner{gap:25px}.sticker{grid-template-columns:54px 1fr}.sticker img{width:54px;height:54px}}
@media (max-width:820px){.yard-inner{width:min(620px,100% - 48px);grid-template-columns:1fr;padding:30px 0}.yard-head{max-width:490px}.blueprint{width:100%}}
@media (max-width:760px){.story-intro{grid-template-columns:1fr;gap:8px}}
@media (max-width:640px){
 :root{--header-height:60px;--ticker-height:38px}
 .header{padding:8px 19px;gap:8px}.brand{gap:5px}.brand img{width:34px;height:34px}.brand strong{font-size:19px}.brand small{font-size:7px}nav{gap:16px;font-size:12px}
 .ticker{--ticker-gap:18px;--ticker-duration:34s;font-size:14px}.ticker-toggle{width:38px}
 .section,.yard-inner{width:calc(100% - 38px)}.section{padding-block:63px}.frames{gap:17px;margin-top:24px}.frame,.frame:nth-child(2){display:block}.frame .frame-art,.frame:nth-child(2) .frame-art{height:clamp(170px,50vw,280px);border-inline:0;border-bottom:2px solid var(--ink)}.frame-copy{padding:16px}.frame-art.third img{object-position:center 48%}
 .yard-inner{gap:18px;padding-block:24px}.blueprint{padding:8px}.blueprint-foot{font-size:10px}
 .community-inner{padding-inline:19px}.contract{width:100%;justify-content:space-between}
 .sticker-list{grid-template-columns:1fr;gap:10px}.sticker{padding:8px}footer{flex-wrap:wrap;padding:15px 17px;font-size:11px}footer .brand small{font-size:7px}
}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{animation:none!important;transition:none!important}}
@media (prefers-reduced-motion:reduce){.ticker-toggle{display:none}}
@media (prefers-reduced-motion:no-preference){
 .frame.in-view{animation:frame-arrive .54s ease-out both}
 .frame.in-view .frame-art img{animation:frame-focus .85s cubic-bezier(.2,.65,.35,1) both}
 .blueprint.in-view #brickwork{transform-box:fill-box;transform-origin:center;animation:plan-reveal .72s cubic-bezier(.2,.7,.3,1) both}
}
@keyframes frame-arrive{from{transform:translateY(14px)}to{transform:none}}
@keyframes frame-focus{from{transform:scale(1.075)}to{transform:scale(1)}}
@keyframes plan-reveal{from{transform:scale(.94);opacity:.7}to{transform:none;opacity:1}}

.plaza-stage{position:relative;display:grid;isolation:isolate;aspect-ratio:3/2;overflow:hidden;border-radius:9px;background:#181715}
.plaza-stage > #plan,.plaza-scene{grid-area:1/1;width:100%;height:100%}
.plaza-stage > #plan{position:relative;z-index:1}
.plaza-scene{object-fit:cover;opacity:0;transform:scale(1.055);transition:opacity .8s ease,transform 1.05s ease}
.plan-underlay{transition:opacity .72s ease}
#brick-layout{transform:translate(-11px,-9px);transition:transform .82s cubic-bezier(.22,.7,.25,1)}
.plaza-stamp{position:absolute;z-index:2;right:4%;bottom:5%;padding:6px 10px;background:var(--yellow);color:var(--ink);border:2px solid var(--ink);box-shadow:3px 3px #151410;font-weight:900;font-size:clamp(11px,1.5vw,19px);opacity:0;transform:translateY(8px) rotate(-6deg);transition:opacity .35s .53s,transform .35s .53s}
.built.plaza-ready .plaza-scene{opacity:1;transform:none}
.built.plaza-ready .plan-underlay{opacity:0}
.built.plaza-ready #brick-layout{transform:var(--completed-layout)}
.built.plaza-ready .plaza-stamp{opacity:1;transform:rotate(-6deg)}
.built.plaza-ready .site-tile{stroke:#6d4811;stroke-width:.9}

#yard-title{color:var(--yellow);font-weight:1000;letter-spacing:-.045em;line-height:1.1}
#yard-title span{display:block;font-size:clamp(39px,14cqi,90px)}
#yard-title span+span{margin-top:6px;font-size:clamp(24px,9.1cqi,55px)}
#yard-title em{font-style:normal}
.yard-actions{display:flex;align-items:center;flex-wrap:wrap;gap:12px 18px;margin-top:20px}
.yard-actions .story-link{color:#f5e4ae;padding-block:10px}