/*
 *  site.css
 *  Docs, DuoApoOldSchoolGames
 *
 *  Created by Jim Murff on 10/06/26.
 *  Copyright © 2026 Jim Murff, DeeDogDevelopment. All rights reserved.
 */

:root {
  --brand: #c4005f; --on-brand: #ffffff; --bg: #fbf8f4; --fg: #1f1a1d; --muted: #5c5358; --link: #a80052;
  --rule: #e4dcd5; --card: #ffffff; --shadow: 0 1px 2px rgb(40 20 30 / .12), 0 8px 24px rgb(40 20 30 / .08);
}
@media (prefers-color-scheme: dark) {
  :root { --brand: #a3004f; --bg: #171216; --fg: #f4eff1; --muted: #bdb3b8; --link: #ff8cc0; --rule: #3a3036; --card: #221b20;
          --shadow: 0 1px 2px rgb(0 0 0 / .4), 0 8px 24px rgb(0 0 0 / .3); }
}
* { box-sizing: border-box; }
html { font-size: 100%; -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--fg); font: 1.0625rem/1.6 system-ui, -apple-system, "Segoe UI", sans-serif; }
h1, h2, h3 { line-height: 1.2; text-wrap: balance; }
h1 { font-size: clamp(2rem, 6vw, 3.25rem); margin: 0 0 .5rem; letter-spacing: -.02em; }
h2 { font-size: 1.5rem; margin: 2.75rem 0 .75rem; }
h3 { font-size: 1.1rem; margin: 1.5rem 0 .4rem; }
p, li { margin: .6rem 0; }
ul, ol { padding-left: 1.4rem; }
a { color: var(--link); text-underline-offset: .15em; }
a:focus-visible { outline: 3px solid var(--link); outline-offset: 2px; border-radius: 2px; }
img { display: block; max-width: 100%; height: auto; }
.wrap { width: min(100%, 60rem); margin: 0 auto; padding: 0 1rem; }
.prose { width: min(100%, 42rem); margin: 0 auto; padding: 0 1rem 3rem; }
.skip { position: absolute; left: -999px; }
.skip:focus { left: 1rem; top: 1rem; background: var(--bg); padding: .5rem; z-index: 1; }

.bar { background: var(--brand); color: var(--on-brand); }
.bar .wrap { display: flex; flex-wrap: wrap; align-items: center; gap: .25rem 1.25rem; padding-block: .6rem; }
.bar a { color: inherit; }
.brand { display: inline-flex; align-items: center; gap: .6rem; font-weight: 700; text-decoration: none; min-height: 44px; }
.brand img { width: 2.25rem; height: 2.25rem; border-radius: .4rem; }
.bar ul { display: flex; flex-wrap: wrap; gap: 0 1.1rem; list-style: none; margin: 0 0 0 auto; padding: 0; }
.bar li { margin: 0; }
.bar li a { display: inline-block; padding: .55rem 0; }
.bar a[aria-current="page"] { font-weight: 700; text-underline-offset: .3em; }

.hero { background: var(--brand); color: var(--on-brand); padding: 2rem 0 3rem; }
.hero .wrap { display: flex; flex-wrap: wrap; align-items: center; gap: 1.5rem 2.5rem; }
.hero .logo { width: min(100%, 15rem); height: auto; border-radius: 1rem; box-shadow: 0 10px 30px rgb(0 0 0 / .3); }
.hero .text { flex: 1 1 18rem; }
.hero p { font-size: 1.2rem; margin: 0; max-width: 34rem; }
.hero a { color: inherit; }

.app-card { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.5rem; margin-top: 2.5rem; padding: 1.25rem; background: var(--card);
            border-radius: 1.25rem; box-shadow: var(--shadow); color: inherit; text-decoration: none; }
.app-card img { width: 6rem; border-radius: 22%; }
.app-card { position: relative; padding-right: 3.25rem; }
.app-card .text { flex: 1 1 16rem; }
.chev { flex: none; width: 1.5rem; height: 1.5rem; fill: none; stroke: var(--muted); stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.app-card .chev { position: absolute; right: 1.1rem; top: 50%; translate: 0 -50%; }
.app-card:hover .chev, .soon-card:has(h3 a:hover) .chev { stroke: var(--link); }
.app-card h2 { margin: 0 0 .25rem; color: var(--link); }
.app-card p { margin: 0; }

.intro { color: var(--muted); margin: 0 0 1.25rem; }

.featured { display: flex; flex-wrap: wrap; align-items: center; gap: 1.5rem 2rem; margin-top: 2.5rem; padding: 1.5rem; background: var(--card);
            border-radius: 1.25rem; box-shadow: var(--shadow); }
.featured-text { flex: 1 1 18rem; }
.featured-text img { width: 6rem; border-radius: 22%; box-shadow: var(--shadow); }
.featured :is(h2, h3) { margin: .5rem 0 .4rem; font-size: 1.75rem; }
.featured :is(h2, h3) a { text-decoration: none; }
.featured :is(h2, h3) a:hover { text-decoration: underline; }
/* Finished apps on their way to the App Store: one card each, under a Coming soon heading. */
.featured.upcoming { margin-top: 1.25rem; }
.featured-text > p + p { margin-top: .6rem; }
.featured-text .soon { margin-top: 1rem; }
.featured-text > p { margin: 0; }
.new { display: inline-block; margin-top: 1rem; padding: .2rem .7rem; border-radius: 99rem; background: var(--brand); color: var(--on-brand); font-weight: 600; font-size: .85rem; }
.featured-shots { flex: 1 1 18rem; display: grid; grid-template-columns: repeat(3, 1fr); gap: .75rem; list-style: none; padding: 0; margin: 0; max-width: 24rem; }
.featured-shots li { margin: 0; }
.featured-shots img { width: 100%; border-radius: .9rem; box-shadow: 0 0 0 1px var(--rule), var(--shadow); }
.actions { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1.25rem; }
.featured-text > .actions, .app-head .actions { margin-top: 1rem; }
.store { display: inline-flex; align-items: center; min-height: 44px; padding: .5rem 1.1rem; border-radius: 99rem; background: var(--brand); color: var(--on-brand);
         font-weight: 600; text-decoration: none; }
.store:hover { filter: brightness(1.1); }
.soon-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 26rem), 1fr)); gap: 1.25rem; list-style: none; padding: 0; margin: 0; }
.soon-card { position: relative; margin: 0; padding: 1.25rem; background: var(--card); border-radius: 1.25rem; box-shadow: var(--shadow); }
.soon-card > p:last-child { margin-bottom: 0; }
.soon-head { display: flex; align-items: center; gap: 1rem; }
.soon-head img { width: 4.5rem; border-radius: 22%; }
.soon-head > div { flex: 1; }
.soon-head h3 { margin: 0 0 .3rem; font-size: 1.3rem; }
/* The name's link covers the whole card, so the card is one tap target named by the app. */
.soon-head h3 a { color: var(--link); text-decoration: none; }
.soon-head h3 a::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.soon-head h3 a:focus-visible { outline: none; }
.soon-head h3 a:focus-visible::after { outline: 3px solid var(--link); outline-offset: 2px; }
.maybe { display: inline-block; padding: .1rem .6rem; border: 1px dashed var(--muted); border-radius: 99rem; color: var(--muted); font-size: .85rem; font-weight: 600; }
.soon-card > p { margin: .9rem 0 1rem; }

.app-head { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.5rem; padding-block: 2.5rem 1rem; }
.app-head img { width: 7.5rem; border-radius: 22%; box-shadow: var(--shadow); }
.app-head .text { flex: 1 1 16rem; }
.lede { font-size: 1.2rem; color: var(--muted); margin: 0; }
.soon { display: inline-block; margin-top: .75rem; padding: .3rem .8rem; border: 1px solid var(--rule); border-radius: 99rem; background: var(--card); font-weight: 600; font-size: .95rem; }

.shots { display: flex; gap: 1rem; margin: 1rem -1rem 0; padding: .5rem 1rem 1rem; overflow-x: auto; scroll-snap-type: x proximity; list-style: none; }
.shots li { flex: 0 0 min(62%, 13.5rem); margin: 0; scroll-snap-align: start; }
.shots img { width: 100%; border-radius: 1.1rem; box-shadow: var(--shadow); }
/* Portrait and landscape shots in one row, all the same height. */
.shots.mixed li { flex: 0 0 auto; }
.shots.mixed img { width: auto; max-width: none; height: clamp(18rem, 60vw, 26rem); box-shadow: 0 0 0 1px var(--rule), var(--shadow); }
/* A widget beside phone screens, at about the size it is on a Home Screen. */
.shots.mixed .widget { align-self: center; }
.shots.mixed .widget img { height: clamp(8rem, 26vw, 11rem); border-radius: 1.5rem; }
/* Apple Watch screens, at about the size of the watch beside a phone. */
.shots.mixed .watch img { height: clamp(11rem, 36vw, 15rem); border-radius: 2.25rem; }
/* What's free and what Pro adds, side by side. */
.plans { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr)); gap: 1rem; }
.plans > div { background: var(--card); border-radius: 1rem; padding: .25rem 1.25rem 1rem; box-shadow: var(--shadow); }
.plans ul { margin: 0; padding-left: 1.2rem; }
.plans li + li { margin-top: .35rem; }
.plans .price { margin: 0 0 .6rem; color: var(--muted); font-weight: 600; }
.video { margin: 1rem 0 0; }
.video video { display: block; width: 100%; height: auto; border-radius: 1rem; box-shadow: var(--shadow); background: #1b1530; }
.video figcaption { margin-top: .6rem; color: var(--muted); font-size: .95rem; }

.boxes { display: grid; grid-template-columns: repeat(auto-fill, minmax(7.25rem, 1fr)); gap: 1rem; list-style: none; padding: 0; margin: .5rem 0 0; }
.boxes li { margin: 0; font-size: .92rem; line-height: 1.3; font-weight: 600; }
.boxes img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: .6rem; margin-bottom: .4rem; box-shadow: var(--shadow); }

.features { display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); gap: 1rem; }
.features > div { background: var(--card); border-radius: 1rem; padding: .25rem 1.1rem .6rem; box-shadow: var(--shadow); }

.meta { color: var(--muted); margin: 0 0 1.5rem; }
.card { background: var(--card); border: 1px solid var(--rule); border-radius: .75rem; padding: .25rem 1rem; }
.prose h1 { font-size: 2rem; margin-top: 2rem; }
.prose h2 { font-size: 1.3rem; margin: 2rem 0 .5rem; padding-top: 1rem; border-top: 1px solid var(--rule); }

footer { margin-top: 3rem; padding: 1.5rem 0 2.5rem; border-top: 1px solid var(--rule); color: var(--muted); font-size: .95rem; }
footer ul { display: flex; flex-wrap: wrap; gap: 0 1.25rem; list-style: none; padding: 0; margin: 0 0 .5rem; }
footer li { margin: 0; }
footer li a { display: inline-block; padding: .4rem 0; }
footer p { margin: 0; }