/* PocketGP journal ("Follow the progress"): the landing page's night, its nav, its type and its foot, for one post.
   Self-contained on purpose, so the posts keep their look whatever happens to css/site.css. Tokens match site.css. */
@font-face{font-family:'Archivo';src:url('../fonts/Archivo-var.woff2') format('woff2');font-weight:100 900;font-style:normal;font-display:swap;}
@font-face{font-family:'Archivo';src:url('../fonts/Archivo-Italic-var.woff2') format('woff2');font-weight:100 900;font-style:italic;font-display:swap;}

:root{
  --ground:#0b0b0d;
  --ink:#f4f2ed;
  --ink2:rgba(244,242,237,.62);
  --ink3:rgba(244,242,237,.54);
  --body:rgba(244,242,237,.82);
  --hair:rgba(244,242,237,.12);
  --amber:#e9b65a;
  --g:16px;
  --nav:48px;
  --e:cubic-bezier(.2,.72,.2,1);
  --display:'Archivo',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --text:-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
}
@media (min-width:734px){ :root{ --g:40px; --nav:52px; } }
@media (min-width:1068px){ :root{ --g:56px; } }

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
html{background:var(--ground);color-scheme:dark;-webkit-text-size-adjust:100%;text-size-adjust:100%;overflow-x:clip;}
body{background:var(--ground);color:var(--ink);font-family:var(--text);font-size:17px;line-height:1.47;letter-spacing:-.01em;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;overflow-wrap:break-word;}
img{display:block;max-width:100%;}
a{color:inherit;}
:focus-visible{outline:2px solid var(--ink);outline-offset:3px;border-radius:6px;}
p,h1,h2,figcaption{text-wrap:balance;}
figure{margin:0;}
.silver{background:linear-gradient(180deg,#f4f2ed 8%,#a29e95 96%);-webkit-background-clip:text;background-clip:text;color:transparent;
  -webkit-box-decoration-break:clone;box-decoration-break:clone;}
.wrap{max-width:calc(1200px + 2 * var(--g));margin:0 auto;
  padding-left:max(var(--g),env(safe-area-inset-left));padding-right:max(var(--g),env(safe-area-inset-right));}

/* the local nav, as on the landing page */
.nav{position:fixed;top:0;left:0;right:0;z-index:50;height:calc(var(--nav) + env(safe-area-inset-top,0px));
  padding-top:env(safe-area-inset-top,0px);
  background:rgba(11,11,13,.7);-webkit-backdrop-filter:saturate(1.8) blur(20px);backdrop-filter:saturate(1.8) blur(20px);
  border-bottom:1px solid rgba(244,242,237,.07);}
.nav .wrap{height:var(--nav);display:flex;align-items:center;justify-content:space-between;}
.nav-logo{display:block;line-height:0;}
.nav-logo img{height:20px;width:auto;}
.pill{display:inline-flex;align-items:center;justify-content:center;border-radius:999px;text-decoration:none;border:0;cursor:pointer;
  font-family:var(--text);font-weight:600;letter-spacing:-.01em;white-space:nowrap;
  background:var(--ink);color:var(--ground);transition:opacity .2s ease,transform .2s ease;}
.pill:hover{opacity:.86;}
.pill:active{transform:scale(.97);}
.nav .pill{font-size:13px;height:30px;padding:0 15px;}
@media (min-width:734px){ .nav-logo img{height:22px;} .nav .pill{font-size:14px;height:32px;padding:0 17px;} }

/* ---------- the post ---------- */
.post{padding-top:calc(var(--nav) + env(safe-area-inset-top,0px) + clamp(28px,6vw,80px));}
.col{max-width:33em;margin:0 auto;}
.col-wide{max-width:980px;margin:0 auto;}

/* the Draft label: shown until a post is approved, then removed with its noindex meta */
.draft{display:flex;align-items:flex-start;gap:10px;margin-bottom:clamp(26px,4vw,40px);padding:11px 14px;border-radius:14px;
  border:1px solid rgba(233,182,90,.45);background:rgba(233,182,90,.08);font-size:14px;line-height:1.4;color:var(--ink);letter-spacing:-.005em;}
.draft::before{content:'';flex:none;width:8px;height:8px;margin-top:5px;border-radius:50%;background:var(--amber);box-shadow:0 0 6px rgba(233,182,90,.7);}
.draft b{font-weight:700;letter-spacing:.06em;text-transform:uppercase;font-size:12px;margin-right:6px;color:var(--amber);}

.kicker{font-size:15px;font-weight:600;letter-spacing:-.005em;color:var(--ink3);}
.kicker a{text-decoration:none;}
.kicker a:hover{color:var(--ink);text-decoration:underline;text-underline-offset:3px;}
.title{margin-top:14px;font-family:var(--display);font-weight:760;font-size:clamp(40px,10.4vw,88px);line-height:.98;letter-spacing:-.034em;color:var(--ink);
  overflow-wrap:normal;hyphens:manual;}
.dek{margin-top:clamp(14px,2vw,22px);font-weight:600;font-size:clamp(20px,2.2vw,28px);line-height:1.25;letter-spacing:-.016em;color:var(--ink2);}
/* the post's date, in the kicker's small muted type */
.date{margin-top:clamp(14px,2vw,20px);font-size:15px;font-weight:600;letter-spacing:-.005em;color:var(--ink3);}

.shot{margin-top:clamp(32px,5vw,60px);}
.shot .pic{position:relative;overflow:hidden;border-radius:clamp(16px,2.2vw,26px);background:#121215;
  box-shadow:0 0 0 1px rgba(255,255,255,.1),0 24px 60px rgba(0,0,0,.55);}
.shot .pic img{width:100%;height:auto;}
.shot figcaption{margin-top:12px;font-size:13px;line-height:1.45;color:var(--ink3);letter-spacing:0;text-wrap:pretty;}
.shot figcaption b{font-weight:600;color:var(--ink2);}

.body{margin-top:clamp(36px,5vw,64px);}
.body p{margin-top:1.05em;font-size:clamp(19px,1.8vw,22px);line-height:1.62;letter-spacing:-.012em;color:var(--body);text-wrap:pretty;}
.body p:first-child{margin-top:0;font-size:clamp(23px,2.4vw,30px);line-height:1.38;color:var(--ink);letter-spacing:-.022em;font-weight:600;}
.body strong{font-weight:650;color:var(--ink);}
/* the engineer's words, in the game's radio type */
.say{font-family:'Archivo',var(--text);font-style:italic;font-weight:440;color:var(--ink);letter-spacing:.002em;white-space:normal;}
/* the game's on-screen words (GET READY TO SWIPE, PIT, AUTO): small capitals in the display face */
.ui{font-family:var(--display);font-weight:700;font-size:.82em;letter-spacing:.08em;color:var(--ink);}
.body .sig{margin-top:40px;font-size:20px;font-weight:500;line-height:1;letter-spacing:.06em;color:var(--ink2);}
.body .sig::before{content:'';display:block;width:32px;height:1px;background:var(--ink3);margin-bottom:18px;}

/* ---------- more from the garage ---------- */
.more{margin-top:clamp(90px,12vw,160px);padding-top:clamp(36px,4vw,52px);border-top:1px solid var(--hair);}
.more-h{font-size:15px;font-weight:600;letter-spacing:-.005em;color:var(--ink3);}
.more-grid{display:grid;gap:16px;margin-top:20px;}
.card{display:flex;flex-direction:column;overflow:hidden;border-radius:24px;background:#121215;text-decoration:none;
  box-shadow:inset 0 0 0 1px rgba(244,242,237,.07);transition:transform .35s var(--e),box-shadow .35s ease;}
.card:hover{transform:translateY(-3px);box-shadow:inset 0 0 0 1px rgba(244,242,237,.16);}
.card .thumb{aspect-ratio:16/9;overflow:hidden;background:#18181b;}
.card .thumb img{width:100%;height:100%;object-fit:cover;}
.card .txt{padding:20px 22px 24px;}
.card h3{font-family:var(--display);font-weight:760;font-size:clamp(24px,2.4vw,30px);line-height:1.05;letter-spacing:-.03em;color:var(--ink);}
.card p{margin-top:8px;font-size:16px;line-height:1.4;color:var(--ink2);}
.card .txt{flex:1 0 auto;display:flex;flex-direction:column;}
.card .post-date{margin-top:auto;padding-top:10px;font-size:13px;font-weight:600;line-height:1.3;letter-spacing:0;color:var(--ink3);}
@media (min-width:734px){ .more-grid{grid-template-columns:1fr 1fr;gap:20px;} }

/* ---------- the ask ---------- */
.ask{margin-top:clamp(80px,10vw,140px);padding-bottom:clamp(90px,12vw,160px);text-align:center;}
.ask p{font-weight:600;font-size:clamp(21px,2.2vw,28px);line-height:1.25;letter-spacing:-.016em;color:var(--ink2);}
.ask .pill{margin-top:22px;height:52px;padding:0 24px;font-size:17px;}

/* ---------- foot, as on the landing page ---------- */
.foot{border-top:1px solid var(--hair);padding:22px 0 calc(36px + env(safe-area-inset-bottom,0px));font-size:12px;line-height:1.5;color:var(--ink3);}
.foot nav{display:flex;flex-wrap:wrap;gap:0 22px;}
.foot nav a{display:inline-block;padding:9px 0;font-size:13px;color:var(--ink2);text-decoration:none;}
.foot nav a:hover{color:var(--ink);text-decoration:underline;text-underline-offset:3px;}
.foot p{margin-top:8px;max-width:760px;letter-spacing:0;}

@media (prefers-reduced-motion:reduce){ .card,.pill{transition:none;} .card:hover{transform:none;} }
@media (max-width:340px){ .title{font-size:min(40px,12vw);} }
@media (max-width:300px){ .nav-logo img{height:15px;} .nav .pill{font-size:12px;height:28px;padding:0 11px;} }
@media (min-width:1800px){ .col{max-width:36em;} .body p{font-size:25px;} .body p:first-child{font-size:34px;} .col-wide{max-width:1160px;} }