:root {
  --paper: #eee3c8;
  --paper-light: #f7efd9;
  --ink: #1d2923;
  --green: #24372d;
  --olive: #667052;
  --red: #9a3d2c;
  --line: rgba(29, 41, 35, 0.38);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--paper); color: var(--ink); font-family: "Courier New", Courier, monospace; }
body::before { content: ""; position: fixed; inset: 0; pointer-events: none; opacity: .16; z-index: 20; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.22'/%3E%3C/svg%3E"); }
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
h1,h2,h3,p { margin-top: 0; }

.topbar { min-height: 70px; border-bottom: 2px solid var(--ink); display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; padding: 0 3.5vw; position: sticky; top: 0; background: rgba(238,227,200,.94); backdrop-filter: blur(8px); z-index: 10; }
.wordmark { font: 900 1.15rem Georgia, serif; letter-spacing: -.04em; }
nav { display: flex; gap: 2rem; font-size: .72rem; font-weight: 700; text-transform: uppercase; }
nav a:hover { color: var(--red); }
.mini-play { justify-self: end; background: var(--red); color: var(--paper-light); padding: .75rem 1rem; border: 2px solid var(--ink); box-shadow: 3px 3px 0 var(--ink); font-size: .75rem; font-weight: 700; text-transform: uppercase; }

.hero { min-height: calc(100vh - 70px); display: grid; grid-template-columns: 1.15fr .85fr; border-bottom: 2px solid var(--ink); }
.hero-copy { padding: 10vh 6vw 7vh; display: flex; flex-direction: column; justify-content: center; }
.kicker,.section-number { font-size: .7rem; letter-spacing: .13em; font-weight: 700; text-transform: uppercase; }
.kicker { padding-bottom: .8rem; border-bottom: 1px solid var(--line); }
h1 { font: 900 clamp(3.7rem, 7.3vw, 8.1rem)/.86 Georgia, "Times New Roman", serif; letter-spacing: -.075em; max-width: 900px; margin: 2rem 0; }
.hero-lead { font-size: clamp(1rem,1.35vw,1.25rem); line-height: 1.6; max-width: 720px; }
.hero-actions { display: flex; flex-wrap: wrap; gap: .75rem; margin: 2.1rem 0 1.4rem; }
.button { display: inline-flex; min-height: 50px; align-items: center; justify-content: center; border: 2px solid var(--ink); padding: .8rem 1.25rem; text-transform: uppercase; font-weight: 800; font-size: .76rem; box-shadow: 4px 4px 0 var(--ink); transition: transform .15s, box-shadow .15s; }
.button:hover { transform: translate(3px,3px); box-shadow: 1px 1px 0 var(--ink); }
.button.primary { background: var(--green); color: var(--paper-light); }
.micro { font-size: .67rem; text-transform: uppercase; color: #526057; }
.hero-art { border-left: 2px solid var(--ink); background: var(--green); min-height: 600px; display: grid; place-items: center; padding: 5vw; position: relative; overflow: hidden; }
.hero-art::before { content:"90"; position:absolute; font:900 25vw/.7 Georgia,serif; color:rgba(238,227,200,.05); right:-2vw; bottom:1vw; }
.hero-art img { width: min(100%, 680px); mix-blend-mode: lighten; filter: contrast(1.05) sepia(.08); position:relative; z-index:1; }
.stamp { position:absolute; right:2rem; top:2rem; border:2px solid var(--paper); color:var(--paper); padding:.8rem; font-size:.6rem; line-height:1.5; transform:rotate(3deg); }

.manifesto { display:grid; grid-template-columns: .3fr 1fr; padding: 8vw 6vw; border-bottom:2px solid var(--ink); gap:5vw; }
.manifesto h2,.section-head h2,.rules h2,.prison h2,.law h2 { font:900 clamp(2.7rem,5.6vw,6.3rem)/.93 Georgia,serif; letter-spacing:-.06em; }
.manifesto p:not(.section-number) { font: 500 clamp(1.15rem,2vw,1.8rem)/1.55 Georgia,serif; max-width:900px; }
.grid-section { display:grid; grid-template-columns: .8fr 1fr 1fr; border-bottom:2px solid var(--ink); }
.section-head,.place-card { padding:5vw 3.5vw; }
.section-head { background:var(--paper-light); }
.place-card { border-left:2px solid var(--ink); min-height:510px; display:flex; flex-direction:column; justify-content:flex-end; }
.place-card span,.place-card small { font-size:.65rem; font-weight:800; letter-spacing:.08em; }
.place-card h3 { font:900 clamp(2.5rem,4vw,4.5rem)/1 Georgia,serif; margin:.9rem 0; }
.place-card p { line-height:1.65; max-width:430px; }
.place-card small { margin-top:2rem; padding-top:1rem; border-top:1px solid var(--line); }
.coast { background:linear-gradient(180deg, rgba(238,227,200,.2), rgba(238,227,200,.85)), repeating-linear-gradient(0deg,transparent 0 25px,rgba(36,55,45,.12) 26px); }
.country { background:var(--olive); color:#fff8e8; }

.features { padding:7vw 5vw; border-bottom:2px solid var(--ink); }
.feature-grid { margin-top:3rem; display:grid; grid-template-columns:repeat(4,1fr); border:2px solid var(--ink); }
.feature-grid article { padding:2.3rem; min-height:310px; border-right:2px solid var(--ink); }
.feature-grid article:last-child { border-right:0; }
.feature-grid b { font-size:.7rem; border:1px solid var(--ink); padding:.35rem; }
.feature-grid h3 { font:800 1.75rem/1 Georgia,serif; margin:5rem 0 1rem; }
.feature-grid p { line-height:1.5; font-size:.84rem; }

.paths { display:grid; grid-template-columns:.8fr 1.2fr; border-bottom:2px solid var(--ink); }
.sticky-title { background:var(--green); color:var(--paper-light); }
.sticky-title p:last-child { line-height:1.6; max-width:500px; }
.path-list article { display:grid; grid-template-columns:70px .7fr 1fr; gap:1rem; padding:2.2rem 3.5vw; border-bottom:1px solid var(--line); align-items:start; }
.path-list article:last-child { border-bottom:0; }
.path-list span { font-size:.7rem; border:1px solid var(--ink); width:38px; height:38px; display:grid; place-items:center; }
.path-list h3 { font:800 1.7rem/1 Georgia,serif; }
.path-list p { font-size:.8rem; line-height:1.55; }

.law-grid { display:grid; grid-template-columns:1fr 1fr; border-bottom:2px solid var(--ink); }
.law { min-height:580px; padding:6vw; display:flex; flex-direction:column; justify-content:flex-end; }
.law + .law { border-left:2px solid var(--ink); }
.law p:not(.section-number) { max-width:600px; line-height:1.65; }
.illegal { background:var(--red); color:var(--paper-light); }
.tags { display:flex; gap:.4rem; flex-wrap:wrap; margin-top:1.5rem; }
.tags span { border:1px solid currentColor; padding:.4rem .6rem; font-size:.62rem; font-weight:700; }

.prison { background:var(--ink); color:var(--paper-light); display:grid; grid-template-columns:1fr 1fr; gap:7vw; padding:8vw 6vw; border-bottom:2px solid var(--ink); }
.prison p:not(.section-number) { font:1.25rem/1.65 Georgia,serif; max-width:650px; }
blockquote { border-left:5px solid var(--red); margin:4rem 0 0; padding:1rem 0 1rem 2rem; font:italic 2rem Georgia,serif; }

.documents { border-bottom:2px solid var(--ink); padding:7vw 5vw; }
.documents-head { display:grid; grid-template-columns:.35fr 1fr .65fr; gap:3vw; align-items:end; }
.documents-head h2 { font:900 clamp(2.7rem,5.6vw,6.3rem)/.93 Georgia,serif; letter-spacing:-.06em; margin:0; }
.documents-head > p:last-child { line-height:1.6; }
.document-grid { margin-top:4rem; display:grid; grid-template-columns:repeat(3,1fr); border:2px solid var(--ink); }
.document-grid a { padding:1.8rem; min-height:310px; border-right:2px solid var(--ink); display:flex; flex-direction:column; transition:background .15s,color .15s,transform .15s; position:relative; }
.document-grid a:last-child { border-right:0; }
.document-grid a:nth-child(1) { background:#f7efd9; }
.document-grid a:nth-child(2) { background:#eee0bd; }
.document-grid a:nth-child(3) { background:#e4d1a7; border-right:0; }
.document-grid a:nth-child(4) { background:#d5bd8d; border-top:2px solid var(--ink); }
.document-grid a:nth-child(5) { background:#c2a574; border-top:2px solid var(--ink); }
.document-grid a:nth-child(6) { background:#a98b5e; border-top:2px solid var(--ink); border-right:0; }
.document-grid a:hover { background:var(--green); color:var(--paper-light); }
.document-grid a:focus-visible { outline:4px solid var(--red); outline-offset:-6px; }
.document-grid span,.document-grid b { font-size:.65rem; letter-spacing:.08em; }
.document-grid h3 { font:800 1.55rem/1.05 Georgia,serif; margin:4rem 0 1rem; }
.document-grid p { font-size:.78rem; line-height:1.5; }
.document-grid b { margin-top:auto; align-self:flex-start; display:inline-flex; align-items:center; min-height:42px; padding:.7rem .85rem; background:var(--ink); color:var(--paper-light); border:2px solid var(--ink); box-shadow:3px 3px 0 var(--red); font-size:.68rem; transition:background .15s,color .15s,box-shadow .15s,transform .15s; }
.document-grid a:hover b { background:var(--paper-light); color:var(--ink); box-shadow:3px 3px 0 var(--red); transform:translateX(3px); }

.doc-shell { max-width:1100px; margin:0 auto; padding:6rem 1.5rem; }
.doc-top { border-bottom:2px solid var(--ink); padding-bottom:2rem; margin-bottom:4rem; }
.doc-back { display:inline-block; border:1px solid var(--ink); padding:.55rem .7rem; font-size:.65rem; font-weight:800; margin-bottom:3rem; }
.doc-top h1 { font-size:clamp(3.3rem,8vw,7rem); margin:0 0 1.5rem; }
.doc-lead { font:1.25rem/1.55 Georgia,serif; max-width:800px; }
.doc-nav { display:flex; gap:.5rem; flex-wrap:wrap; margin-top:2rem; }
.doc-nav a { border:1px solid var(--ink); padding:.5rem .7rem; font-size:.62rem; font-weight:800; }
.doc-content { display:grid; grid-template-columns:260px 1fr; gap:5rem; }
.doc-index { position:sticky; top:100px; align-self:start; font-size:.7rem; line-height:2; text-transform:uppercase; }
.doc-index a { display:block; border-bottom:1px solid var(--line); }
.doc-body section { padding:0 0 3.5rem; margin-bottom:3.5rem; border-bottom:1px solid var(--line); }
.doc-body h2 { font:800 clamp(2rem,4vw,3.4rem)/1 Georgia,serif; letter-spacing:-.04em; }
.doc-body h3 { font:800 1.25rem Georgia,serif; margin-top:2rem; }
.doc-body p,.doc-body li { line-height:1.7; }
.doc-body li { margin-bottom:.5rem; }
.notice { border:2px solid var(--ink); box-shadow:4px 4px 0 var(--ink); padding:1.2rem; background:var(--paper-light); margin:2rem 0; }

.rules { padding:7vw 5vw 0; border-bottom:2px solid var(--ink); }
.rules-intro { display:grid; grid-template-columns:1fr 1fr; gap:5vw; align-items:end; }
.rules-intro p { line-height:1.7; max-width:650px; }
.rule-strip { margin-top:5vw; margin-left:-5vw; margin-right:-5vw; display:flex; flex-wrap:wrap; background:var(--paper-light); border-top:2px solid var(--ink); }
.rule-strip span { flex:1; min-width:200px; text-align:center; padding:1.2rem .8rem; border-right:1px solid var(--ink); font-size:.65rem; font-weight:800; }

.join { text-align:center; padding:8vw 5vw; background:var(--paper-light); }
.join > img { width:min(700px,85vw); margin:0 auto 3rem; mix-blend-mode:multiply; }
.join > p { font:900 clamp(2.5rem,5vw,5.5rem)/.95 Georgia,serif; letter-spacing:-.05em; }
.join-links { display:flex; align-items:stretch; justify-content:center; flex-wrap:wrap; gap:1rem; margin-top:3rem; }
.large { padding:1.2rem 2rem; }
.social-link { border:2px solid var(--ink); min-width:230px; padding:1rem; display:flex; flex-direction:column; text-align:left; }
.social-link b { font:800 1.2rem Georgia,serif; }
.social-link span { font-size:.65rem; margin-top:.5rem; }
footer { background:var(--green); color:var(--paper-light); min-height:90px; display:flex; align-items:center; justify-content:space-between; padding:1.5rem 3.5vw; font-size:.65rem; font-weight:700; }

@media (max-width: 950px) {
  .topbar { grid-template-columns:1fr auto; } nav { display:none; }
  .hero,.paths,.law-grid,.prison,.rules-intro { grid-template-columns:1fr; }
  .hero-art { border-left:0; border-top:2px solid var(--ink); min-height:auto; }
  .grid-section { grid-template-columns:1fr 1fr; } .grid-section .section-head { grid-column:1/-1; }
  .place-card:first-of-type { border-left:0; }
  .feature-grid { grid-template-columns:1fr 1fr; } .feature-grid article:nth-child(2) { border-right:0; } .feature-grid article:nth-child(-n+2) { border-bottom:2px solid var(--ink); }
  .documents-head { grid-template-columns:1fr; }
  .document-grid { grid-template-columns:1fr 1fr; } .document-grid a { border-bottom:2px solid var(--ink); border-top:0; }
  .document-grid a:nth-child(even) { border-right:0; } .document-grid a:nth-child(3) { border-right:2px solid var(--ink); }
  .doc-content { grid-template-columns:1fr; } .doc-index { position:static; }
  .law + .law { border-left:0; border-top:2px solid var(--ink); }
}

@media (max-width: 600px) {
  .hero-copy { padding:5rem 1.25rem; } h1 { font-size:3.5rem; }
  .hero-art { padding:2rem 1rem; } .stamp { display:none; }
  .manifesto { grid-template-columns:1fr; padding:4rem 1.25rem; }
  .grid-section,.feature-grid { grid-template-columns:1fr; }
  .place-card { border-left:0; border-top:2px solid var(--ink); min-height:400px; padding:3rem 1.25rem; }
  .feature-grid article,.feature-grid article:nth-child(2) { border-right:0; border-bottom:2px solid var(--ink); min-height:250px; }
  .feature-grid article:last-child { border-bottom:0; }
  .features,.section-head,.law,.prison,.rules,.join { padding:4rem 1.25rem; }
  .documents { padding:4rem 1.25rem; } .document-grid { grid-template-columns:1fr; } .document-grid a { border-right:0; min-height:240px; }
  .path-list article { grid-template-columns:48px 1fr; padding:1.8rem 1.25rem; } .path-list p { grid-column:2; }
  .rule-strip { margin-left:-1.25rem; margin-right:-1.25rem; }
  footer { flex-direction:column; gap:.7rem; align-items:flex-start; }
}

@media (prefers-reduced-motion: reduce) { html { scroll-behavior:auto; } * { transition:none !important; } }
