/* ==========================================================================
   everydayapps — Guides
   One consistent reading experience for every app's how-to articles.
   Shared by the index (guides/index.html) and every article page.
   Same design system as the landing page; never re-themed per app.
   ========================================================================== */

:root{
  --paper:#f5f6f8;
  --surface:#ffffff;
  --ink:#12161d;
  --muted:#4a515e;   /* AA on paper (~8:1) for secondary text */
  --faint:#646c7a;   /* AA on paper (~5:1) for small meta     */
  --line:#e6e9ef;
  --line-strong:#d7dce4;

  /* the single brand pop — same across every guide, never per-app */
  --brand:#b30e1c;

  --maxw:1080px;
  --readw:660px;
  /* "Legible by design": two faces only — a legibility-engineered sans for
     all reading + labels, and a warm optical serif for display. No mono:
     labels are the sans in letter-spaced uppercase, not a trend face. */
  --sans:"Atkinson Hyperlegible",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --display:"Fraunces","Georgia","Times New Roman",serif;
  --mono:var(--sans); /* alias kept so existing label rules need no churn */
}

*,*::before,*::after{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;}
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--sans);
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
a{color:inherit;text-decoration:none;}
::selection{background:#12161d;color:#f5f6f8;}
img{max-width:100%;}

/* accessibility: a visible, consistent keyboard focus ring everywhere */
:focus-visible{outline:2px solid var(--brand);outline-offset:3px;border-radius:3px;}
:where(a,button,[tabindex]):focus:not(:focus-visible){outline:none;}

.wrap{max-width:var(--maxw);margin:0 auto;padding:0 clamp(28px,4.5vw,48px);}
.measure{max-width:var(--readw);margin-inline:auto;}

/* ---------- status bar (shared with landing) ---------- */
.statusbar{
  border-bottom:1px solid var(--line);
  background:color-mix(in srgb, var(--paper) 82%, white);
  position:sticky;top:0;z-index:10;
  backdrop-filter:saturate(1.2);
}
.statusbar__row{
  display:flex;align-items:center;justify-content:space-between;
  height:46px;font-family:var(--mono);font-size:12px;letter-spacing:.04em;
}
.brand{display:inline-flex;align-items:center;gap:8px;font-weight:700;color:var(--ink);}
.brand__mark{width:16px;height:16px;display:block;flex:none;}
.statusbar__nav{display:inline-flex;gap:18px;align-items:center;}
.statusbar__nav a{color:var(--muted);transition:color .18s ease;}
.statusbar__nav a:hover{color:var(--ink);}
.statusbar__nav a[aria-current]{color:var(--ink);font-weight:700;}

/* ---------- breadcrumb / back ---------- */
.crumbs{
  font-family:var(--mono);font-size:12px;letter-spacing:.03em;color:var(--faint);
  padding-top:28px;display:flex;align-items:center;gap:9px;flex-wrap:wrap;
}
.crumbs a{color:var(--muted);border-bottom:1px solid transparent;transition:border-color .18s ease,color .18s ease;}
.crumbs a:hover{color:var(--ink);border-color:var(--line-strong);}
.crumbs .sep{color:var(--line-strong);}
.crumbs .here{color:var(--ink);}

/* ---------- shared meta chips ---------- */
.tag{
  font-family:var(--mono);font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  color:var(--ink);border:1px solid var(--line-strong);border-radius:6px;
  padding:4px 9px 4px 6px;background:var(--surface);display:inline-flex;align-items:center;gap:6px;white-space:nowrap;
}
.tag__logo{width:15px;height:15px;flex:none;object-fit:contain;border-radius:3px;display:block;}
a.tag{transition:border-color .18s ease,transform .18s ease;}
a.tag:hover{border-color:var(--ink);transform:translateY(-1px);}
.by-app{display:flex;flex-wrap:wrap;gap:8px;margin:22px 0 0;padding:0;list-style:none;}
.date{font-family:var(--mono);font-size:12px;letter-spacing:.03em;color:var(--faint);}
.dot{color:var(--line-strong);}
.read{font-family:var(--mono);font-size:12px;letter-spacing:.03em;color:var(--faint);}

/* ==========================================================================
   INDEX  (guides/index.html)
   ========================================================================== */
.index-head{padding-block:40px 30px;}
.app-mark{
  width:48px;height:48px;border-radius:12px;border:1px solid var(--line-strong);
  background:#fff;object-fit:contain;display:block;padding:5px;margin:0 0 20px;
}
.eyebrow{
  font-family:var(--mono);font-size:12px;font-weight:500;letter-spacing:.16em;
  text-transform:uppercase;color:var(--faint);margin:0 0 22px;
}
.index-head h1{
  font-family:var(--display);font-weight:600;
  font-size:clamp(2.2rem,6vw,3.5rem);line-height:1.04;letter-spacing:-.012em;margin:0;
}
.index-head p{
  font-size:clamp(1.02rem,2vw,1.16rem);line-height:1.5;color:var(--muted);
  max-width:52ch;margin:20px 0 0;
}

.section-rule{
  display:flex;align-items:baseline;justify-content:space-between;gap:16px;
  border-top:1px solid var(--line);padding:18px 0 0;margin:14px 0 22px;
  font-family:var(--mono);font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;
}
.section-rule .l{color:var(--ink);font-weight:700;}
.section-rule .r{color:var(--faint);}

.guide-list{display:flex;flex-direction:column;gap:14px;padding:0 0 8px;margin:0;list-style:none;}
.guide-card{
  position:relative;display:block;background:var(--surface);
  border:1px solid var(--line);border-radius:16px;padding:22px 24px;
  transition:transform .22s cubic-bezier(.2,.7,.2,1),border-color .22s ease;
}
.guide-card:hover,.guide-card:focus-visible{transform:translateY(-3px);border-color:var(--line-strong);}
.guide-card:focus-visible{outline:2px solid var(--ink);outline-offset:3px;}
.guide-card__meta{display:flex;align-items:center;gap:11px;flex-wrap:wrap;margin-bottom:13px;}
.guide-card__title{
  font-family:var(--display);font-weight:700;font-size:clamp(1.3rem,3vw,1.65rem);
  line-height:1.12;letter-spacing:-.02em;margin:0 0 8px;color:var(--ink);
}
.guide-card__excerpt{font-size:1rem;line-height:1.5;color:var(--muted);margin:0;max-width:62ch;}
.guide-card__go{
  display:inline-flex;align-items:center;gap:8px;margin-top:16px;
  font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--faint);
}
.guide-card__arrow{transition:transform .22s cubic-bezier(.2,.7,.2,1);display:inline-block;}
.guide-card:hover .guide-card__arrow,.guide-card:focus-visible .guide-card__arrow{transform:translateX(4px);}

.empty-note{
  font-family:var(--mono);font-size:12px;color:var(--faint);letter-spacing:.03em;
  border:1px dashed var(--line-strong);border-radius:12px;padding:18px 20px;margin:0;
}

/* ==========================================================================
   ARTICLE  (guides/<slug>.html)
   ========================================================================== */
.article{padding-bottom:24px;}
.article-head{padding-block:26px 8px;}
.article-head__meta{display:flex;align-items:center;gap:11px;flex-wrap:wrap;margin-bottom:20px;}
.article-head h1{
  font-family:var(--display);font-weight:600;
  font-size:clamp(2rem,5.4vw,3rem);line-height:1.08;letter-spacing:-.012em;margin:0;
}
.standfirst{
  font-size:clamp(1.12rem,2.3vw,1.35rem);line-height:1.55;color:var(--muted);
  margin:22px 0 0;
}
.standfirst b{color:var(--ink);font-weight:600;}

.article-rule{border:0;border-top:1px solid var(--line);margin:34px 0 4px;}

/* prose — tuned for sustained reading: ~19px, open leading */
.prose{font-size:1.18rem;line-height:1.78;color:#20262f;}
.prose p{margin:0 0 20px;}
.prose a{color:var(--ink);border-bottom:2px solid var(--brand);padding-bottom:1px;transition:background-color .18s ease;}
.prose a:hover{background:color-mix(in srgb,var(--brand) 9%,transparent);}
.prose strong{font-weight:700;color:var(--ink);}
.prose ul{margin:0 0 20px;padding-left:1.15em;}
.prose li{margin:0 0 10px;padding-left:.2em;}
.prose li::marker{color:var(--brand);}
.prose code{
  font-family:var(--mono);font-size:.86em;background:#eef0f4;border:1px solid var(--line);
  border-radius:5px;padding:1px 6px;color:#2b3340;
}

.lead-in{
  font-size:1.12rem;line-height:1.6;color:var(--muted);margin:26px 0 6px;
}

/* steps */
.step{padding-top:42px;}
.step__head{display:flex;align-items:center;gap:14px;margin-bottom:14px;}
.step__n{
  flex:none;width:34px;height:34px;border-radius:50%;display:grid;place-items:center;
  font-family:var(--mono);font-weight:700;font-size:13px;color:var(--surface);background:var(--ink);
  font-variant-numeric:tabular-nums;
}
.step__title{
  font-family:var(--display);font-weight:700;font-size:clamp(1.25rem,3vw,1.55rem);
  line-height:1.12;letter-spacing:-.02em;margin:0;color:var(--ink);
}

/* screenshot — framed as a phone screen */
.shot{margin:24px 0 4px;text-align:center;}
.shot__frame{
  display:inline-block;width:100%;max-width:300px;background:var(--surface);
  border:1px solid var(--line-strong);border-radius:30px;padding:7px;
  box-shadow:0 18px 40px -22px rgba(18,22,29,.45),0 2px 8px -4px rgba(18,22,29,.18);
}
.shot__frame img{display:block;width:100%;height:auto;border-radius:23px;border:1px solid var(--line);}
.shot figcaption{
  font-family:var(--mono);font-size:11.5px;letter-spacing:.03em;color:var(--faint);
  margin-top:16px;line-height:1.5;max-width:42ch;margin-inline:auto;
}
.shot figcaption b{color:var(--muted);font-weight:500;}

/* callout / tip */
.note{
  border:1px solid var(--line);border-left:3px solid var(--brand);background:var(--surface);
  border-radius:10px;padding:16px 18px;margin:24px 0 4px;
}
.note__k{
  font-family:var(--mono);font-size:10.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
  color:var(--brand);display:block;margin-bottom:6px;
}
.note p{margin:0;font-size:.98rem;line-height:1.55;color:#2b3340;}
.note p + p{margin-top:10px;}

/* end-of-article CTA + back */
.article-end{margin-top:48px;border-top:1px solid var(--line);padding-top:30px;}
.cta{
  display:flex;align-items:center;justify-content:space-between;gap:18px;flex-wrap:wrap;
  background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:22px 24px;
}
.cta__t{font-family:var(--display);font-weight:700;font-size:1.2rem;letter-spacing:-.02em;margin:0 0 4px;}
.cta__s{font-size:.96rem;color:var(--muted);margin:0;}
.cta__btn{
  flex:none;display:inline-flex;align-items:center;gap:9px;
  font-family:var(--mono);font-size:12px;font-weight:700;letter-spacing:.06em;
  color:var(--surface);background:var(--ink);border-radius:9px;padding:13px 18px;
  transition:transform .18s ease;
}
.cta__btn:hover{transform:translateY(-2px);}
.backlinks{display:flex;gap:8px 22px;flex-wrap:wrap;margin-top:24px;}
.backlinks a{
  font-family:var(--mono);font-size:12px;color:var(--muted);
  display:inline-flex;align-items:center;gap:7px;
  border-bottom:1px solid var(--line-strong);padding-bottom:2px;transition:color .18s ease,border-color .18s ease;
}
.backlinks a:hover{color:var(--ink);border-color:var(--ink);}

/* ---------- footer (shared with landing) ---------- */
.foot{border-top:1px solid var(--line);margin-top:40px;padding-block:34px 54px;}
.foot__lead{font-family:var(--display);font-weight:700;font-size:1.2rem;letter-spacing:-.02em;margin:0 0 10px;}
.foot__contact{font-family:var(--mono);font-size:13px;color:var(--muted);margin:0 0 20px;}
.foot__contact a{color:var(--ink);border-bottom:1px solid var(--line-strong);padding-bottom:2px;transition:border-color .18s ease;}
.foot__contact a:hover{border-color:var(--ink);}
.foot__links{display:flex;flex-wrap:wrap;gap:8px 22px;padding:0;margin:0 0 20px;list-style:none;}
.foot__links a{font-family:var(--mono);font-size:12px;color:var(--ink);
  border-bottom:1px solid var(--line-strong);padding-bottom:2px;transition:border-color .18s ease;}
.foot__links a:hover{border-color:var(--ink);}
.foot__fine{font-family:var(--mono);font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--faint);margin:0;}

/* ---------- responsive ---------- */
@media (max-width:720px){
  .index-head{padding-block:30px 22px;}
  .cta{flex-direction:column;align-items:flex-start;}
  .step__n{width:30px;height:30px;font-size:12px;}
}

/* ---------- motion ---------- */
@media (prefers-reduced-motion:no-preference){
  .reveal{opacity:0;transform:translateY(14px);}
  .reveal.in{opacity:1;transform:none;
    transition:opacity .55s ease,transform .55s cubic-bezier(.2,.7,.2,1);}
}