@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@600;700;800;900&family=DM+Sans:wght@400;500;600;700&display=swap');
:root{--paper:#eeede8;--ink:#171817;--muted:#686962;--line:#c9c9c1;--accent:#d9ff64}*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:90px}body{margin:0;background:var(--paper);color:var(--ink);font-family:'DM Sans',Arial,sans-serif}a{color:inherit;text-decoration:none}button{font:inherit;cursor:pointer;color:inherit;border:0}button,a{-webkit-tap-highlight-color:transparent}button:focus-visible,a:focus-visible{outline:3px solid #737e39;outline-offset:5px}.nav{height:88px;padding:0 4.5%;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line);gap:20px}.brand{display:flex;gap:12px;align-items:center}.brand img{height:46px;width:46px;object-fit:cover;border:1px solid var(--ink)}.brand strong{font:900 34px/.8 'Barlow Condensed',Impact,sans-serif;letter-spacing:-1px}.brand strong span{display:block;font:600 9px/1 'DM Sans',sans-serif;letter-spacing:1.4px;margin-top:8px}.nav nav{display:flex;gap:35px;font-size:11px;font-weight:700;letter-spacing:1px}.nav nav a:hover{border-bottom:1px solid}.hero{min-height:690px;position:relative;display:grid;grid-template-columns:52% 48%;border-bottom:1px solid var(--ink);overflow:hidden}.hero-copy{padding:46px 0 60px 8.65%;z-index:2}.eyebrow,.section-kicker{font-size:10px;letter-spacing:1.6px;font-weight:700}.eyebrow{display:flex;align-items:center;gap:9px}.dot{width:6px;height:6px;background:var(--ink);border-radius:50%}h1{font:900 clamp(76px,8.1vw,124px)/.86 'Barlow Condensed',Impact,'Arial Narrow',sans-serif;letter-spacing:-3px;margin:28px 0 20px}h1>span:not(.period){-webkit-text-stroke:1.4px var(--ink);color:transparent}.period{color:var(--ink)}.intro{font-size:14px;line-height:1.7;color:#565851;margin:0 0 27px}.contract{position:relative;max-width:540px;border:1px solid var(--ink);padding:15px 116px 15px 15px;background:var(--paper)}.contract-top{display:flex;justify-content:space-between;font-size:8px;letter-spacing:1px;margin-bottom:10px;font-weight:700;gap:8px}.shortcut{color:var(--muted);white-space:nowrap}code{font-size:clamp(10px,.95vw,13px);line-height:1.5;overflow-wrap:anywhere;display:block;user-select:all}.copy{position:absolute;right:0;top:0;height:100%;width:100px;border-left:1px solid var(--ink);background:var(--ink);color:white;font-size:11px;font-weight:600;display:flex;justify-content:center;align-items:center;gap:12px}.copy:hover{background:#34382c}.copy svg{width:17px;height:17px}.chain-link{font-size:9px;letter-spacing:1px;font-weight:700;display:inline-flex;gap:36px;margin-top:15px}.chain-link span{font-size:15px}.hero-art{position:relative;align-self:stretch;min-width:0}.hero-art>img{display:block;width:100%;height:100%;object-fit:cover;object-position:45% 50%;display:block;mix-blend-mode:multiply}.photo-index{position:absolute;top:24px;right:28px;font:9px monospace;letter-spacing:1px}.handwritten{position:absolute;right:8%;top:10%;font:italic 21px/1.1 Georgia,serif;transform:rotate(-9deg)}.handwritten span{display:block;margin:0 30%;font-size:48px}.hero-stamp{position:absolute;bottom:38px;right:30px;background:var(--paper);border:1px solid var(--ink);border-radius:50%;height:105px;width:105px;display:flex;flex-direction:column;align-items:center;justify-content:center;font:800 37px/.9 'Barlow Condensed',Impact,sans-serif;transform:rotate(12deg)}.hero-stamp small{font:600 7px 'DM Sans',sans-serif;letter-spacing:.5px;margin-top:8px}.scroll-note{position:absolute;bottom:20px;left:4.5%;font-size:8px;letter-spacing:1.4px;display:flex;align-items:center;gap:28px}.scroll-note span{font-size:17px}.ticker{overflow:hidden;background:var(--ink);color:var(--paper);padding:16px 0}.ticker>div{font:700 24px 'Barlow Condensed',Impact,sans-serif;letter-spacing:1px;white-space:nowrap;width:max-content;animation:ticker 35s linear infinite}.ticker b{color:var(--accent);margin:0 35px}@keyframes ticker{to{transform:translateX(-50%)}}.section{padding:84px 6.5%}.section-kicker{color:var(--muted);margin-bottom:32px}.lore-head{display:grid;grid-template-columns:1.25fr 1fr;gap:10%;align-items:start;margin-bottom:45px}h2{font:800 clamp(44px,5.5vw,78px)/.97 'Barlow Condensed',Impact,sans-serif;letter-spacing:-1.4px;margin:0}h2 em{font-style:normal;-webkit-text-stroke:1px var(--ink);color:transparent}.lore-text p{font-size:14px;line-height:1.8;margin:0 0 14px;max-width:370px}.lore-text p+p{color:var(--muted);font-size:12px}.scribble{font:italic 22px Georgia,serif;display:block;transform:rotate(-4deg);margin-top:15px}.evolution{margin:0}.evolution img{width:100%;display:block;border:1px solid var(--ink)}figcaption{display:flex;justify-content:space-between;gap:15px;font-size:8px;letter-spacing:1px;font-weight:600;padding:13px 0}.meme-section{display:grid;grid-template-columns:1fr 1fr;gap:9%;border-top:1px solid var(--line);align-items:center}.meme-intro p{font-size:14px;color:var(--muted);line-height:1.8;margin:26px 0}.meme-actions{display:flex;gap:10px}.outline,.solid{padding:15px 18px;font-size:10px;letter-spacing:1px;font-weight:700;display:flex;align-items:center;gap:22px}.outline{border:1px solid var(--ink);background:transparent}.solid{background:var(--ink);color:white}.outline:hover,.solid:hover{background:#cbdc9c;color:var(--ink)}.meme-count{font:9px monospace;color:var(--muted);letter-spacing:1px;margin-top:29px}.meme-count span{color:var(--ink)}.meme-card{position:relative;transform:rotate(3deg);border:8px solid #fff;box-shadow:9px 13px 0 #d5d5cc;background:#ddd;max-width:440px;justify-self:center;width:100%;overflow:hidden;transition:transform .3s}.meme-card:hover{transform:rotate(0)}.meme-card img{width:100%;display:block}.meme-caption{position:absolute;top:18px;left:12px;right:12px;text-align:center;font:900 clamp(22px,3vw,43px)/1 'Barlow Condensed',Impact,sans-serif;color:white;text-shadow:2px 2px black,-2px -2px black,2px -2px black,-2px 2px black;letter-spacing:.5px}.card-brand{position:absolute;bottom:12px;right:14px;font:10px monospace;color:white;background:#171817;padding:6px 9px}.closing{text-align:center;background:var(--ink);color:var(--paper);padding:70px 20px}.closing>span{font:9px monospace;letter-spacing:1.4px}.closing h2{font-size:clamp(80px,13vw,180px);margin:23px 0}.closing h2 em{-webkit-text-stroke:1px var(--paper)}.closing-copy{background:#eeede8;color:#171817;border:1px solid #eeede8;padding:17px 27px;display:inline-flex;align-items:center;gap:40px;font-size:12px;font-weight:700;letter-spacing:1px}.closing-copy span{color:#171817;font-size:19px;line-height:1}.closing-copy:hover{background:#fff;color:#171817;border-color:#fff}.closing-copy:active{transform:translateY(1px)}footer{padding:30px 4.5%;display:flex;align-items:center;justify-content:space-between;gap:24px}footer .footer-brand{font:800 32px 'Barlow Condensed',Impact,sans-serif}footer .footer-brand span{font:8px 'DM Sans',sans-serif;letter-spacing:1px;margin-left:14px}footer p{color:var(--muted);font-size:9px;line-height:1.8}footer>a:last-child{font-size:9px;letter-spacing:1px}.toast{position:fixed;bottom:26px;left:50%;transform:translate(-50%,15px);padding:15px 24px;background:var(--ink);color:white;border:1px solid #888;font-size:12px;z-index:100;opacity:0;transition:.2s;pointer-events:none;max-width:90vw;text-align:center}.toast.show{opacity:1;transform:translate(-50%,0)}
@media(min-width:1600px){.hero{min-height:820px}.hero-copy{padding-top:65px}h1{font-size:145px}}@media(max-width:1000px){.nav{padding:0 5%;height:76px}.nav nav{gap:18px}.hero{grid-template-columns:55% 45%;min-height:660px}.hero-copy{padding-left:9%;padding-top:40px}h1{font-size:86px}.hero-art>img{object-position:49% center}.contract{padding-right:82px}.copy{width:72px;gap:5px;font-size:9px}.shortcut{display:none}.handwritten{top:13%;font-size:17px;right:5%}.hero-stamp{width:80px;height:80px;font-size:28px}.hero-stamp small{font-size:5px}.lore-head{gap:5%}.section{padding:60px 5%}}@media(max-width:650px){.nav{height:72px;gap:10px}.nav nav{display:none}.brand img{width:36px;height:36px}.brand strong{font-size:28px}.brand strong span{font-size:7px}.hero{display:flex;flex-direction:column;overflow:hidden}.hero-copy{padding:30px 5% 34px}.eyebrow{font-size:8px;letter-spacing:1px}h1{font-size:clamp(77px,18vw,108px);margin:22px 0 18px;line-height:.88}h1 br:nth-of-type(2){display:none}h1>span:not(.period){margin-right:10px}.intro{font-size:12px;line-height:1.7;max-width:60%;margin-bottom:26px}.contract{max-width:none;padding:13px 87px 13px 12px}.contract-top{font-size:7px;margin-bottom:8px}.copy{width:76px}.copy svg{width:13px}.contract code{font-size:10px}.chain-link{font-size:8px;margin-top:12px}.hero-art{width:100%;height:360px;overflow:hidden;border-top:1px solid var(--line)}.hero-art>img{height:100%;object-position:50% 38%;width:100%;object-fit:cover}.hero-art .handwritten{top:55px;right:20px;font-size:18px}.photo-index{font-size:8px;right:18px;top:16px}.hero-stamp{bottom:18px;right:20px}.scroll-note{display:none}.ticker{padding:12px 0}.ticker>div{font-size:21px}.ticker b{margin:0 22px}.section{padding:48px 5%}.section-kicker{font-size:9px;margin-bottom:25px}.lore-head{display:block;margin-bottom:28px}.lore-head h2{font-size:47px}.lore-text{margin-top:25px}.lore-text p{font-size:13px}.lore-text p+p{font-size:12px}.scribble{font-size:20px}figcaption{font-size:6px;line-height:1.5}.meme-section{display:flex;flex-direction:column;gap:37px;align-items:stretch}.meme-intro h2{font-size:54px}.meme-intro p{margin:18px 0}.meme-count{margin-top:18px}.meme-card{max-width:360px;margin:0 auto 13px}.meme-caption{font-size:35px}.closing{padding:48px 15px}.closing>span{font-size:7px}.closing h2{font-size:90px;margin:22px 0}footer{flex-wrap:wrap;padding:25px 5%;gap:16px}footer p{order:3;width:100%;margin:0}.footer-brand span{font-size:7px!important}footer>a:last-child{font-size:8px}}@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{animation:none!important;transition:none!important}}

/* Inset hero portrait aligned to the left content, with natural full framing. */
.hero-art{margin:46px 9.375% 60px 7%;align-self:stretch;background:#c5c5c3;border:1px solid var(--line);overflow:hidden}
.hero-art>img{position:absolute;top:50%;left:50%;width:min(86%,100%);height:auto;aspect-ratio:1/1;transform:translate(-50%,-50%);object-fit:contain;object-position:center;mix-blend-mode:normal}
.hero-art .photo-index{top:15px;right:15px;font-size:8px;background:rgba(238,237,232,.85);padding:5px 6px}
.hero-art .handwritten{top:12%;right:5%;font-size:17px}
.hero-art .hero-stamp{right:16px;bottom:18px;width:78px;height:78px;font-size:28px}
.hero-art .hero-stamp small{font-size:5px}
@media(min-width:1600px){.hero-art{margin-top:65px}}
@media(min-width:651px) and (max-width:1000px){.hero-art{margin-top:40px;margin-right:11%;margin-left:6%}.hero-art .handwritten{font-size:14px;top:16%}}
@media(max-width:650px){.hero-art{margin:0 5% 32px;width:auto;height:400px;min-height:0;flex-shrink:0;border:1px solid var(--line)}.hero-art>img{object-fit:contain;object-position:center}.hero-art .handwritten{right:7%;top:16%;font-size:16px}}

/* Direct square hero avatar: same top-to-bottom rhythm as the left copy. */
.hero-art{display:grid;place-items:center;background:#c5c5c3}
.hero-avatar-frame{width:min(88%,560px);aspect-ratio:1/1;display:block;overflow:hidden;background:#c5c5c3}
.hero-avatar-frame img{display:block;width:100%;height:100%;object-fit:cover;object-position:center}
.hero-art .photo-index{z-index:2}
.hero-art .handwritten,.hero-art .hero-stamp{z-index:2}
@media(max-width:650px){.hero-avatar-frame{width:82%;max-width:400px}.hero-art{display:grid;place-items:center}}

/* Final hero layout: one square avatar only, aligned beside the copy. */
.hero{align-items:stretch}
.hero-art{margin:46px 9.375% 60px 7%;padding:0;background:transparent;border:0;display:flex;align-items:center;justify-content:center;min-height:0}
.hero-avatar-frame{width:min(100%,520px);aspect-ratio:1/1;overflow:hidden;background:#c5c5c3}
.hero-avatar-frame img{display:block;width:100%;height:100%;object-fit:cover;object-position:center}
@media(max-width:1000px) and (min-width:651px){.hero-art{margin:40px 11% 50px 6%}.hero-avatar-frame{width:100%}}
@media(max-width:650px){.hero-art{margin:0 5% 32px;height:auto;min-height:0;aspect-ratio:1/1}.hero-avatar-frame{width:100%;max-width:none}}

/* Fallback paint keeps the avatar visible even if an image element is delayed by the browser. */
.hero-avatar-frame{background:#c5c5c3 url("assets/avatar.png") center center/cover no-repeat}
/* Keep the hero copy and square avatar side by side at every viewport size. */
@media(max-width:650px){
  .hero{display:grid;grid-template-columns:52% 48%;min-height:0;align-items:stretch}
  .hero-copy{padding:30px 4% 34px 8%;min-width:0}
  .hero h1{font-size:clamp(42px,9vw,70px);letter-spacing:-2px}
  .hero-copy>p{font-size:9px}
  .hero-copy .primary-link{font-size:8px;padding:9px 10px;gap:8px}
  .hero-art{margin:0 7% 0 3%;width:auto;height:auto;aspect-ratio:1/1;align-self:center;border:0}
  .hero-avatar-frame{width:100%;max-width:none}
  .hero-note,.scroll-note{display:none}
}
/* Enlarge the square hero avatar while preserving the two-column layout. */
.hero-art{margin:30px 4% 30px 4%}
.hero-avatar-frame{width:min(100%,600px)}
@media(max-width:1000px) and (min-width:651px){.hero-art{margin:28px 6% 28px 4%}.hero-avatar-frame{width:100%}}
@media(max-width:650px){.hero-art{margin:0 4% 0 2%}.hero-avatar-frame{width:100%}}
