/* pocketham.com: the same punk as the app. Sticker bomb on tagged walls, hard borders, offset shadows. */
@font-face { font-family:'Anton'; src:url(assets/fonts/Anton.woff2) format('woff2'); font-display:swap; }
@font-face { font-family:'Bebas Neue'; src:url(assets/fonts/BebasNeue.woff2) format('woff2'); font-display:swap; }
@font-face { font-family:'Bungee'; src:url(assets/fonts/Bungee.woff2) format('woff2'); font-display:swap; }
@font-face { font-family:'Special Elite'; src:url(assets/fonts/SpecialElite.woff2) format('woff2'); font-display:swap; }
@font-face { font-family:'Permanent Marker'; src:url(assets/fonts/PermanentMarker.woff2) format('woff2'); font-display:swap; }
@font-face { font-family:'Shrikhand'; src:url(assets/fonts/Shrikhand.woff2) format('woff2'); font-display:swap; }
@font-face { font-family:'Rubik Mono One'; src:url(assets/fonts/RubikMonoOne.woff2) format('woff2'); font-display:swap; }
@font-face { font-family:'Black Ops One'; src:url(assets/fonts/BlackOpsOne.woff2) format('woff2'); font-display:swap; }
@font-face { font-family:'Sedgwick Ave Display'; src:url(assets/fonts/SedgwickAveDisplay.woff2) format('woff2'); font-display:swap; }
@font-face { font-family:'Allerta Stencil'; src:url(assets/fonts/AllertaStencil.woff2) format('woff2'); font-display:swap; }
@font-face { font-family:'Rock Salt'; src:url(assets/fonts/RockSalt.woff2) format('woff2'); font-display:swap; }
@font-face { font-family:'VT323'; src:url(assets/fonts/VT323.woff2) format('woff2'); font-display:swap; }

:root { --night:#0a0908; --bone:#efe9dd; --blood:#d7263d; --piss:#f5e04a; --acid:#b6ff00; --pink:#ff2ead; --cyan:#00e5ff; }
* { box-sizing:border-box; margin:0; }
html { background:var(--night); scroll-behavior:smooth; }
section[id] { scroll-margin-top:60px; }
body { color:var(--bone); font:17px/1.55 'Special Elite', ui-monospace, monospace; overflow-x:hidden; }
a { color:inherit; }
img { max-width:100%; display:block; }

/* each section is its own wall */
.wall { position:relative; padding:72px 22px; background:#120c0a center/cover no-repeat; }
.wall::before { content:''; position:absolute; inset:0; background:linear-gradient(rgba(10,9,8,.35), rgba(10,9,8,.6)); }
.wall > * { position:relative; }
.w-apps { background-image:url(assets/walls/apps.jpg); }
.w-chats { background-image:url(assets/walls/chats.jpg); }
.w-web { background-image:url(assets/walls/web.jpg); }
.w-activity { background-image:url(assets/walls/activity.jpg); }
.w-devices { background-image:url(assets/walls/devices.jpg); }
.w-files { background-image:url(assets/walls/files.jpg); }
.w-models { background-image:url(assets/walls/models.jpg); }
.w-settings { background-image:url(assets/walls/settings.jpg); }
.w-poster { background-image:url(assets/walls/poster.jpg); background-position:center 30%; }
.inner { max-width:1080px; margin:0 auto; }

/* nav */
.top { position:sticky; top:0; z-index:10; display:flex; align-items:center; justify-content:space-between; gap:12px; padding:10px 22px; background:#000; border-bottom:4px solid var(--blood); }
.top .logo { display:flex; align-items:center; gap:10px; text-decoration:none; font:24px 'Anton'; letter-spacing:1px; }
.top .logo img { width:38px; border:2px solid var(--bone); }
.top nav { display:flex; gap:16px; font:20px 'Bebas Neue'; letter-spacing:1px; }
.top nav a { text-decoration:none; color:#bdb6aa; }
.top nav a:hover { color:var(--piss); }

/* ransom headline */
.ransom { display:flex; flex-wrap:wrap; gap:14px 22px; align-items:flex-end; }
.ransom .wd { display:flex; gap:6px; align-items:flex-end; }
.ransom i { font-style:normal; display:inline-block; padding:2px 10px; border:3px solid #000; box-shadow:5px 5px 0 #000; line-height:1; }
.ransom .r1 { font:clamp(44px,9vw,92px) 'Anton'; background:var(--bone); color:#000; transform:rotate(-4deg); }
.ransom .r2 { font:clamp(40px,8vw,84px) 'Shrikhand'; background:var(--blood); color:var(--bone); transform:rotate(3deg); }
.ransom .r3 { font:clamp(30px,6vw,64px) 'Rubik Mono One'; background:var(--piss); color:#000; transform:rotate(-2deg); }
.ransom .r4 { font:clamp(40px,8vw,84px) 'Black Ops One'; background:#000; color:var(--acid); border-color:var(--acid); transform:rotate(4deg); }
.ransom .r5 { font:clamp(44px,9vw,94px) 'Anton'; background:var(--pink); color:#000; transform:rotate(-3deg); }
.ransom .r6 { font:clamp(46px,9vw,98px) 'Bebas Neue'; background:var(--cyan); color:#000; transform:rotate(2deg); }
.ransom .r7 { font:clamp(38px,7.5vw,80px) 'Shrikhand'; background:var(--bone); color:var(--blood); transform:rotate(-5deg); }
.ransom .r8 { font:clamp(32px,6.5vw,70px) 'Rubik Mono One'; background:var(--blood); color:var(--bone); transform:rotate(3deg); }

/* hero */
.hero { min-height:88vh; display:flex; align-items:center; }
.hero .grid { display:grid; grid-template-columns:1.3fr 1fr; gap:40px; align-items:center; }
.hero .lede { font:clamp(18px,2.4vw,24px)/1.45 'Rock Salt', cursive; color:var(--piss); text-shadow:2px 2px 0 #000; margin:26px 0 22px; }
.poster { background:var(--bone); padding:10px 10px 44px; box-shadow:8px 8px 0 var(--blood); transform:rotate(-3deg); position:relative; max-width:380px; justify-self:center; }
.poster b { position:absolute; bottom:6px; left:0; right:0; text-align:center; color:#000; font:30px 'Anton'; letter-spacing:1px; }
.sticker { position:absolute; font:13px 'Bungee'; padding:5px 9px; border:3px solid #000; box-shadow:3px 3px 0 #000; color:#000; white-space:nowrap; }

.hero h1.plain { font:clamp(26px,3.4vw,40px)/1.15 'Anton'; letter-spacing:.5px; margin:26px 0 12px; text-shadow:3px 3px 0 #000; }
.hero .sub { font-size:18px; max-width:560px; margin-bottom:22px; text-shadow:1px 1px 0 #000; }
.phone-wrap { position:relative; justify-self:center; max-width:330px; width:100%; }
.phone { background:#000; border:4px solid #000; border-radius:46px; padding:9px; box-shadow:0 0 0 3px var(--bone), 10px 12px 0 3px var(--blood); transform:rotate(-3deg); overflow:hidden; }
.phone img { border-radius:38px; width:100%; height:auto; }
.phone.tilt-r { transform:rotate(3deg); box-shadow:0 0 0 3px var(--bone), -10px 12px 0 3px var(--acid); }
.ham-badge { position:absolute; width:96px; right:-34px; top:-26px; border:4px solid var(--bone); box-shadow:4px 4px 0 #000; transform:rotate(9deg); }
.steps .num { display:inline-block; font:46px/1 'Rubik Mono One'; background:var(--blood); color:var(--bone); border:3px solid #000; padding:4px 14px; margin-bottom:10px; transform:rotate(-4deg); }
.versus { display:grid; grid-template-columns:1fr 1fr; gap:26px; margin-top:30px; }
.vs-col { border:4px solid #000; padding:20px 24px; }
.vs-col h3 { font:34px/1 'Bebas Neue'; margin-bottom:12px; }
.vs-col ul { list-style:none; padding:0; }
.vs-col li { padding:8px 0 8px 30px; position:relative; border-top:2px dashed rgba(0,0,0,.25); font-size:16px; }
.vs-col.dull { background:#bdb7ac; color:#3a3733; transform:rotate(-1deg); box-shadow:6px 6px 0 #000; }
.vs-col.dull li::before { content:'~'; position:absolute; left:6px; font:22px/1 'Permanent Marker'; color:#6d6860; }
.vs-col.win { background:var(--piss); color:#000; transform:rotate(1deg); box-shadow:8px 8px 0 var(--blood); }
.vs-col.win li::before { content:'\2714'; position:absolute; left:4px; font-size:18px; color:var(--blood); }

.cfg { display:grid; grid-template-columns:1fr 1fr; gap:24px; margin-top:30px; }
.cfg-box { background:#000; border:3px solid var(--bone); box-shadow:6px 6px 0 var(--blood); padding:18px 20px; }
.cfg-box.wide { grid-column:1 / -1; }
.cfg-box h3 { font:30px/1 'Bebas Neue'; letter-spacing:.5px; color:var(--piss); margin-bottom:12px; }
.cfg-box p { font-size:15px; color:#cfc8bb; margin-top:12px; }
.chips { display:flex; flex-wrap:wrap; gap:9px; }
.chips span { font:15px 'Special Elite'; background:var(--bone); color:#000; border:2px solid #000; padding:4px 10px; box-shadow:3px 3px 0 var(--acid); }
.chips span:nth-child(3n+2) { box-shadow:3px 3px 0 var(--pink); transform:rotate(-1deg); }
.chips span:nth-child(3n) { box-shadow:3px 3px 0 var(--cyan); transform:rotate(1deg); }

/* buttons */
.btns { display:flex; flex-wrap:wrap; gap:14px; }
.btn { display:inline-block; text-decoration:none; font:20px 'Anton'; letter-spacing:1px; text-transform:uppercase; padding:12px 20px; border:3px solid #000; box-shadow:5px 5px 0 #000; color:#000; background:var(--piss); transform:rotate(-1deg); }
.btn.alt { background:var(--bone); transform:rotate(1deg); }
.btn.red { background:var(--blood); color:var(--bone); }
.btn:active { transform:translate(3px,3px); box-shadow:2px 2px 0 #000; }
.small { font-size:14px; color:#cfc8bb; margin-top:12px; }

/* paper cards */
.cards { display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:26px; margin-top:34px; }
.card { background:var(--bone); color:#111; border:4px solid #000; padding:18px 20px; box-shadow:7px 7px 0 var(--blood);
  clip-path:polygon(0 6px,5% 0,11% 5px,18% 0,26% 6px,34% 1px,43% 5px,52% 0,61% 6px,70% 1px,79% 5px,88% 0,95% 6px,100% 2px,100% 100%,0 100%); }
.card:nth-child(even) { transform:rotate(1deg); box-shadow:7px 7px 0 var(--acid); }
.card:nth-child(odd) { transform:rotate(-1deg); }
.card h3 { font:34px/1 'Bebas Neue'; letter-spacing:.5px; margin-bottom:8px; }
.card p { font-size:15.5px; }
h2 { font:clamp(38px,6vw,64px)/1 'Anton'; text-transform:uppercase; letter-spacing:1px; text-shadow:4px 4px 0 #000; }
h2 .hl { background:var(--blood); padding:0 10px; white-space:nowrap; display:inline-block; }
.scrawl { font:clamp(26px,4vw,44px)/1.1 'Sedgwick Ave Display', cursive; text-shadow:3px 3px 0 #000; }
.stencil { font:clamp(15px,2vw,20px) 'Allerta Stencil'; letter-spacing:4px; text-transform:uppercase; }

/* the receipt */
.receipt { background:#f4f0e6; color:#111; max-width:420px; padding:24px 26px 110px; font:15px 'Special Elite'; box-shadow:0 20px 50px rgba(0,0,0,.6); transform:rotate(1.5deg); position:relative;
  clip-path:polygon(0 0,100% 0,100% 96%,95% 100%,90% 96%,85% 100%,80% 96%,75% 100%,70% 96%,65% 100%,60% 96%,55% 100%,50% 96%,45% 100%,40% 96%,35% 100%,30% 96%,25% 100%,20% 96%,15% 100%,10% 96%,5% 100%,0 96%); }
.receipt h3 { font:32px 'Anton'; text-align:center; letter-spacing:2px; }
.receipt .c { text-align:center; font-size:12px; }
.receipt .dash { border-top:2px dashed #111; margin:12px 0; }
.receipt .ln { display:flex; justify-content:space-between; margin:4px 0; }
.receipt .ln b { font:22px 'VT323'; font-weight:normal; }
.receipt .stamp { position:absolute; right:34px; bottom:34px; border:5px solid var(--blood); color:var(--blood); font:17px 'Rubik Mono One'; padding:6px 10px; transform:rotate(-14deg); opacity:.85; text-align:center; line-height:1.1; }
.two { display:grid; grid-template-columns:1fr 1fr; gap:44px; align-items:center; }

/* faq */
details { background:var(--bone); color:#111; border:3px solid #000; box-shadow:5px 5px 0 #000; padding:14px 18px; margin:14px 0; }
details summary { font:24px 'Bebas Neue'; letter-spacing:.5px; cursor:pointer; }
details p { margin-top:8px; font-size:15.5px; }

footer { background:#000; padding:34px 22px; border-top:4px solid var(--blood); font-size:14px; color:#a9a296; }
footer .inner { display:flex; flex-wrap:wrap; gap:18px; justify-content:space-between; align-items:center; }
footer .gem { font:12px 'Permanent Marker'; opacity:.35; }
footer .gem:hover { opacity:1; }

@media (max-width:820px) {
  .versus, .cfg { grid-template-columns:1fr; }
  .phone-wrap { max-width:280px; }
  .ham-badge { width:76px; right:-14px; }
  .ransom i { padding:2px 7px; }
  .hero .grid, .two { grid-template-columns:1fr; }
  .top nav { display:none; }
  .wall { padding:56px 16px; }
}