/* apps.css: warm-brutalist app product pages (matches the homepage) · C. Doherty · 2026-09-24
   Shared by every /<app>/ index page. Tokens mirror index.html; one orange offset shadow per view. */
:root{
  --paper:#F2F0EC; --ink:#0A0A0A; --soft:#3A3935; --dim:#5A5852;
  --orange:#C56F2E; --orange-text:#A0551C; --orange-on-ink:#E08542;
  --rule:2px solid var(--ink); --gutter:clamp(18px,5.5vw,70px);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;background:var(--paper);color:var(--ink);font-family:'Archivo',-apple-system,Helvetica,sans-serif;font-size:16.5px;line-height:1.55;-webkit-font-smoothing:antialiased}
a{color:inherit}
a:hover{color:var(--orange-text)}
::selection{background:var(--orange);color:var(--ink)}
:focus-visible{outline:3px solid var(--orange);outline-offset:3px}
.skip{position:absolute;left:-9999px}.skip:focus{left:8px;top:8px;z-index:9;background:var(--ink);color:var(--paper);padding:10px 14px}
.wrap{max-width:1180px;margin:0 auto;padding:0 var(--gutter)}

/* top bar: the fixed logo lockup, small, linking home */
.top{display:flex;align-items:center;gap:clamp(14px,2vw,26px);padding:22px 0;font-weight:600;font-size:15px}
.top .mini{display:inline-block;border:2px solid var(--ink);background:var(--paper);padding:6px 10px 5px;text-decoration:none;line-height:1}
.top .mini b{display:block;color:var(--orange);font-weight:900;font-size:24px;letter-spacing:-.045em;line-height:.85}
.top .mini i{display:block;margin-top:4px;font-style:normal;font-family:'JetBrains Mono',monospace;font-size:7.5px;letter-spacing:.06em;color:var(--dim)}
.top .grow{flex:1}
.top nav{display:flex;gap:clamp(12px,2vw,22px)}
.top nav a{text-decoration:none;padding:8px 0}
.crumb{font-size:13.5px;color:var(--dim);margin:0 0 8px}
.crumb a{color:var(--dim)}

/* hero */
.hero{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:clamp(28px,4vw,56px);align-items:center;padding:clamp(20px,3vw,40px) 0 clamp(40px,5vw,64px)}
.app-id{display:flex;align-items:center;gap:18px;margin-bottom:22px}
.app-id img{width:96px;height:96px;border-radius:22px;border:2px solid var(--ink);box-shadow:6px 6px 0 var(--orange);display:block}
.app-id .name{font-size:22px;font-weight:900;letter-spacing:-.02em;line-height:1.1}
.app-id .plat{font-size:14px;color:var(--dim)}
.hero h1{margin:0 0 18px;font-size:clamp(36px,4.6vw,60px);font-weight:900;letter-spacing:-.035em;line-height:.98;text-wrap:balance}
.hero .lead{margin:0 0 22px;max-width:56ch;font-size:17.5px;color:var(--soft)}
.badges{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.badges a{display:block;line-height:0}
.badges img{height:44px;width:auto;display:block}
.price{margin:12px 0 0;font-size:14px;color:var(--dim)}
.phones{position:relative;display:flex;justify-content:center;gap:18px}
.phones img{width:min(46%,250px);height:auto;border-radius:26px;border:2px solid var(--ink);display:block;background:#fff}
.phones img:nth-child(2){margin-top:48px}

/* screenshot strip */
.shots{display:flex;gap:18px;overflow-x:auto;padding:4px 2px 18px;scroll-snap-type:x mandatory;border-top:var(--rule)}
.shots figure{margin:18px 0 0;flex:0 0 auto;scroll-snap-align:start;width:min-content}
.shots img{height:clamp(320px,38vw,460px);width:auto;border-radius:20px;border:2px solid var(--ink);display:block;background:#fff}
.shots figcaption{margin-top:8px;font-size:13.5px;color:var(--dim)}

/* does / doesn't */
.sec{margin-top:clamp(56px,7vw,90px)}
.sec>h2{margin:0 0 20px;font-size:clamp(30px,3.4vw,44px);font-weight:900;letter-spacing:-.03em;line-height:1}
.pair{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(24px,4vw,56px)}
.pair h2{margin:0 0 14px;font-size:clamp(26px,2.6vw,34px);font-weight:900;letter-spacing:-.025em;line-height:1.05}
.ruled{list-style:none;margin:0;padding:0}
.ruled li{border-top:var(--rule);padding:12px 0}
.ruled li:last-child{border-bottom:var(--rule)}
.ruled em{font-style:italic}

/* get it: the black slab */
.slab{background:var(--ink);color:var(--paper);padding:clamp(28px,4vw,44px);display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:clamp(24px,4vw,40px);align-items:center}
.slab h2{margin:0 0 12px;font-size:clamp(34px,3.8vw,48px);font-weight:900;letter-spacing:-.03em;line-height:1;color:var(--paper)}
.slab p{margin:0;color:#D8D4CB}
.slab .badges{justify-content:flex-start}

/* footer */
footer{margin-top:56px;border-top:var(--rule);padding:18px 0 46px;display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap;font-size:13px;color:var(--dim)}
footer a{color:var(--dim)}

@media (max-width:900px){
  .hero,.pair,.slab{grid-template-columns:1fr}
  .phones img:nth-child(2){margin-top:28px}
  .top nav .hide-s{display:none}
}

/* prose sections (full width, one topic) */
.prose>p{max-width:68ch;margin:0 0 14px;color:var(--soft)}
.prose>ul.ruled{max-width:820px;margin-top:6px}
.slab p+p{margin-top:10px}
.phones.solo img{border:2px solid var(--ink)}

/* collection page: text-only hero, app grid, FAQ */
.hero-text{grid-template-columns:minmax(0,1fr)}
.hero-text .lead{max-width:64ch}
.app-grid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));border-top:var(--rule);border-left:var(--rule)}
.app-grid li{border-right:var(--rule);border-bottom:var(--rule);padding:20px;display:flex;flex-direction:column;gap:16px;justify-content:space-between}
.card-link{display:flex;gap:16px;align-items:center;text-decoration:none}
.card-link img{width:72px;height:72px;border-radius:17px;border:2px solid var(--ink);flex:none}
.card-link b{display:block;font-size:20px;font-weight:900;letter-spacing:-.02em;line-height:1.1}
.card-link span span{display:block;color:var(--dim);font-size:15px}
.app-grid .badges img{height:40px}
.qa{border-top:var(--rule);padding:16px 0;max-width:820px}
.qa:last-child{border-bottom:var(--rule)}
.qa h3{margin:0 0 6px;font-size:19px;font-weight:800;letter-spacing:-.01em}
.qa p{margin:0;color:var(--soft)}

/* document pages: the current page in the top nav, and a nav that wraps on phones */
.top nav a[aria-current="page"]{color:var(--orange-text);text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:5px}
@media (max-width:600px){
  .top{flex-wrap:wrap;row-gap:4px;padding:16px 0 10px}
  .top nav a{padding:6px 0}
  .top .grow{display:none}
  .top nav{width:100%;flex-wrap:wrap;column-gap:16px;row-gap:0}
}

/* platform band: wide (landscape) screenshots in a grid instead of the scroll strip */
.platforms>h2{text-wrap:balance}
.platforms>p{max-width:64ch;margin:0 0 22px;color:var(--soft);font-size:17.5px}
.wide-shots{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(16px,2.4vw,28px)}
.wide-shots figure{margin:0}
.wide-shots img{width:100%;height:auto;display:block;border:2px solid var(--ink)}
.wide-shots figcaption{margin-top:8px;font-size:13.5px;color:var(--dim)}
@media (max-width:700px){.wide-shots{grid-template-columns:1fr}}
.platforms>h3{margin:34px 0 8px;font-size:clamp(22px,2.2vw,28px);font-weight:900;letter-spacing:-.025em;line-height:1.1}