@font-face{font-family:"Cormorant Garamond";src:url("fonts/cormorant-garamond.woff2") format("woff2");font-weight:300 700;font-display:swap}@font-face{font-family:Lora;src:url("fonts/lora.woff2") format("woff2");font-weight:400 700;font-display:swap}@font-face{font-family:Lora;src:url("fonts/lora-italic.woff2") format("woff2");font-weight:400 700;font-style:italic;font-display:swap}
/* Reading Habit — homepage styles
   Classical direction: paper ground, ink text, gold as stroke, hairlines for structure.
   No JavaScript, no build step. Linked only from index.html; guide/ still uses styles.css
   until the guide is redesigned to match.

   FONTS: Cormorant Garamond + Lora, self-hosted per the repo's no-external-dependency rule.
   Download the woff2 files (both are OFL-licensed, from fonts.google.com) into
   assets/fonts/ with the filenames below. Until they exist the stacks fall back to
   Georgia, so nothing breaks. */







:root{
  --paper:#f3f2f2;
  --paper-inset:#efeeeb;
  --mat:#eae9e9;
  --cover:#ddd8d1;
  --ink:#201f1d;
  --ink-70:rgba(32,31,29,.72);
  --ink-60:rgba(32,31,29,.6);
  --ink-50:rgba(32,31,29,.5);
  --gold:#b68235;          /* strokes and marks */
  --gold-text:#7d5411;     /* gold at body sizes — clears 4.5:1 on paper */
  --rule:rgba(32,31,29,.2);
  --rule-soft:rgba(32,31,29,.12);
  --serif:"Cormorant Garamond",Georgia,"Times New Roman",serif;
  --body:"Lora",Georgia,"Times New Roman",serif;
  --gutter:28px;
  --measure:1120px;
}

*,*::before,*::after{box-sizing:border-box}

html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--body);
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;height:auto;display:block}
.num{font-variant-numeric:tabular-nums lining-nums}

a{color:var(--gold-text);text-decoration:none}
a:hover{color:var(--gold)}
:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
::selection{background:rgba(182,130,53,.2)}

.skip-link{position:absolute;left:-9999px;top:0;background:var(--paper);color:var(--ink);padding:10px 16px;border:1px solid var(--gold);z-index:10}
.skip-link:focus{left:8px;top:8px}

.container{max-width:var(--measure);margin:0 auto;padding-left:var(--gutter);padding-right:var(--gutter)}
.rule{height:1px;border:0;background:var(--rule);margin:0}

/* Kickers and headings */
.eyebrow{
  font-family:var(--serif);font-weight:600;font-size:11px;
  letter-spacing:.19em;text-transform:uppercase;color:var(--gold-text);
  margin:0;font-variant-numeric:tabular-nums;
}
.eyebrow--muted{color:var(--ink-60)}
h1,h2,h3{font-family:var(--serif);font-weight:400;margin:0;text-wrap:balance}
h1{font-size:clamp(42px,6.2vw,68px);line-height:1.02;letter-spacing:-.012em}
h2{font-size:clamp(30px,4.2vw,44px);line-height:1.06}
h3{font-size:25px;line-height:1.12}
p{margin:0;text-wrap:pretty}
.lead{font-size:19px;line-height:1.5;max-width:34ch}
.prose{font-size:14.5px;line-height:1.68;color:var(--ink-70);max-width:46ch}
.prose--justify{text-align:justify}

/* Actions */
.button{
  display:inline-flex;align-items:center;gap:9px;
  min-height:48px;padding:0 20px;
  border:1px solid var(--gold);color:var(--gold-text);
  font-family:var(--serif);font-weight:600;font-size:15px;
  letter-spacing:.08em;text-transform:uppercase;
}
.button:hover{background:rgba(182,130,53,.08);color:var(--gold-text)}
.button:active{background:rgba(182,130,53,.16)}
.text-link{font-size:13.5px;border-bottom:1px solid rgba(182,130,53,.5);padding-bottom:1px}
.text-link:hover{border-bottom-color:var(--gold)}

/* Header */
.site-header{border-bottom:1px solid var(--rule)}
.header-inner{display:flex;align-items:center;justify-content:space-between;gap:20px;padding-top:16px;padding-bottom:16px}
.brand{display:flex;align-items:center;gap:11px;color:var(--ink)}
.brand:hover{color:var(--ink)}
.brand img{width:34px;height:34px;border-radius:8px}
.brand span{font-family:var(--serif);font-size:21px}
.site-header nav{display:flex;align-items:center;gap:22px}
.site-header nav a{font-family:var(--serif);font-weight:600;font-size:12.5px;letter-spacing:.15em;text-transform:uppercase;color:var(--ink-60)}
.site-header nav a:hover,.site-header nav [aria-current="page"]{color:var(--gold-text)}

/* Hero */
.hero{display:grid;grid-template-columns:1fr;gap:44px;align-items:center;padding-top:56px;padding-bottom:52px}
.hero h1{margin:14px 0 16px}
.hero .lead{margin-bottom:14px}
.hero-actions{display:flex;flex-wrap:wrap;align-items:center;gap:18px;margin-top:26px}
.availability{
  display:flex;align-items:center;gap:9px;max-width:38ch;
  margin-top:26px;padding-top:16px;border-top:1px solid var(--rule-soft);
  font-size:12.5px;color:var(--ink-60);
}
.status-ring{width:9px;height:9px;flex:none;border:1.5px solid var(--gold);border-radius:50%}

/* Principles band */
.principles{border-top:1px solid var(--rule);border-bottom:1px solid var(--rule)}
.principles .container{display:grid;grid-template-columns:1fr 1fr;padding-left:0;padding-right:0}
.principles span{
  padding:13px 10px;text-align:center;
  font-family:var(--serif);font-weight:600;font-size:12px;
  letter-spacing:.14em;text-transform:uppercase;color:var(--ink-70);
  border-top:1px solid var(--rule-soft);
}
.principles span:nth-child(-n+2){border-top:0}
.principles span:nth-child(even){border-left:1px solid var(--rule-soft)}

/* Sections */
.section{padding-top:64px}
.section > .rule{margin-top:30px}
.section-heading h2{margin-top:12px;max-width:24ch}

.feature-grid{display:grid;grid-template-columns:1fr;gap:32px;padding-top:28px}
.feature-grid h3{margin:8px 0}
.feature-grid p{margin-bottom:12px}
.feature-number{font-family:var(--serif);font-weight:600;font-size:10.5px;letter-spacing:.19em;text-transform:uppercase;color:var(--gold-text);font-variant-numeric:tabular-nums}

.split{display:grid;grid-template-columns:1fr;gap:44px;align-items:center;padding-top:44px}
.split h2{margin:12px 0 16px;max-width:20ch}
.split .lead{margin-bottom:14px}
.split .prose{margin-bottom:12px}

/* Rhythm list */
.rhythm{border-top:1px solid var(--rule);margin-top:22px}
.rhythm article{padding:14px 0;border-bottom:1px solid var(--rule-soft)}
.rhythm h3{font-weight:600;font-size:17px;margin-bottom:5px}
.rhythm p{font-size:14px;line-height:1.62;color:var(--ink-70)}

/* Keep / callout / note */
.two-col{display:grid;grid-template-columns:1fr;gap:32px;align-items:start;padding-top:34px}
.callout{border-top:2px solid var(--ink);border-bottom:1px solid var(--rule);margin-top:56px;padding:34px 0;display:grid;grid-template-columns:1fr;gap:24px;align-items:center}
.callout h2{margin:12px 0 10px;max-width:22ch}
.release-note{display:grid;grid-template-columns:1fr;gap:14px;padding-top:40px;padding-bottom:56px}
.release-note h2{font-weight:600;font-size:16px}
.release-note p{font-size:13.5px;line-height:1.68;color:var(--ink-60);text-align:justify;max-width:76ch}

/* Footer */
.site-footer{border-top:1px solid var(--rule)}
.footer-inner{display:flex;flex-wrap:wrap;gap:16px;align-items:center;justify-content:space-between;padding-top:22px;padding-bottom:22px}
.footer-inner p{font-size:13px;color:var(--ink-60)}
.footer-inner p b{font-family:var(--serif);font-weight:400;font-size:15px;color:var(--ink)}
.footer-inner nav{display:flex;flex-wrap:wrap;gap:20px}
.footer-inner nav a{font-size:13px}

/* ───────────────────────────────────────────────────────────────────────────
   Device figures.
   The screens are drawn in CSS so the page shows the current design without
   waiting on new captures. When real screenshots of the rebuilt app exist,
   replace each .screen block with <img> inside .device and delete the .s-*
   rules below.
   ─────────────────────────────────────────────────────────────────────────── */
.figure{margin:0;display:flex;flex-direction:column;align-items:center;gap:13px}
.figure figcaption{font-size:12px;line-height:1.5;color:var(--ink-60);text-align:center}
.figure figcaption em{font-style:italic}
.device{
  width:100%;max-width:334px;
  border:9px solid var(--ink);border-radius:46px;overflow:hidden;
  background:var(--paper);box-shadow:0 18px 40px -24px rgba(32,31,29,.45);
}
.device--sm{max-width:300px;border-radius:44px}
.notch{height:26px;display:flex;align-items:center;justify-content:center}
.notch i{width:74px;height:5px;border-radius:3px;background:var(--ink);opacity:.85;display:block}
.screen{padding:8px 18px 14px}

.s-head{display:flex;align-items:flex-start;justify-content:space-between;gap:10px}
.s-dateline{font-family:var(--serif);font-weight:600;font-size:9.5px;letter-spacing:.19em;text-transform:uppercase;color:var(--ink-50)}
.s-title{font-family:var(--serif);font-size:29px;line-height:1.05}
.s-glyphs{display:flex;gap:14px;padding-top:6px}
.s-glyphs svg{width:17px;height:17px;stroke:var(--ink);fill:none;stroke-width:1.3;stroke-linecap:round}
.s-rule{height:1px;background:var(--rule);margin:10px 0 0}
.s-rule--soft{background:var(--rule-soft)}

.s-streak{display:flex;align-items:flex-end;gap:11px;padding:13px 0 10px}
.s-streak b{font-family:var(--serif);font-weight:400;font-size:48px;line-height:.86}
.s-streak span{font-family:var(--serif);font-size:15px;line-height:1.1;display:block}
.s-streak small{font-size:10px;color:var(--ink-50);display:block}

.s-week{display:grid;grid-template-columns:repeat(7,1fr);border-top:1px solid var(--rule);border-bottom:1px solid var(--rule)}
.s-week div{padding:7px 0;text-align:center}
.s-week div + div{border-left:1px solid var(--rule-soft)}
.s-week b{font-family:var(--serif);font-weight:600;font-size:9px;letter-spacing:.1em;color:var(--ink-50);display:block}
.s-week .mark{height:17px;display:flex;align-items:center;justify-content:center}
.s-week .today{box-shadow:inset 0 -2px 0 var(--gold)}
.s-week .today b{color:var(--ink)}
/* One family of marks — no checkmarks anywhere. */
.dot{width:8px;height:8px;border-radius:50%;background:var(--gold);display:block}
.ring{width:9px;height:9px;border:1.5px solid var(--gold);border-radius:50%;display:block}
.ring--rest{border-width:1px;display:flex;align-items:center;justify-content:center}
.ring--rest i{width:3px;height:3px;border-radius:50%;background:var(--gold);display:block}
.dash{width:5px;height:1px;background:rgba(32,31,29,.28);display:block}

.s-month{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:8px 0 11px;border-bottom:1px solid var(--rule);font-size:11px;color:var(--ink-60)}
.s-month b{color:var(--ink);font-weight:400}
.s-month svg{width:11px;height:11px;flex:none;fill:none;stroke:rgba(32,31,29,.4);stroke-width:1.6;stroke-linecap:round}
.s-kicker{display:flex;align-items:baseline;justify-content:space-between;padding:14px 0 9px}
.s-kicker span:first-child{font-family:var(--serif);font-weight:600;font-size:9.5px;letter-spacing:.19em;text-transform:uppercase;color:var(--gold-text)}
.s-kicker span:last-child{font-size:9.5px;color:var(--ink-50)}
.s-kicker--muted span:first-child{color:var(--ink-50)}

.plate{border:4px solid var(--mat);outline:1px solid var(--rule);background:var(--cover);display:flex;align-items:flex-end;padding:5px}
.plate span{font-family:var(--serif);font-size:9px;color:rgba(32,31,29,.42)}
.s-hero{display:flex;gap:13px;padding-bottom:11px;border-bottom:1px solid var(--rule)}
.s-hero .plate{width:74px;height:111px;flex:none}
.s-hero-copy{flex:1;min-width:0;display:flex;flex-direction:column}
.s-book{font-family:var(--serif);font-size:19px;line-height:1.08}
.s-author{font-size:11px;font-style:italic;color:var(--ink-60);margin-top:2px}
.s-when{font-size:10px;color:var(--ink-50);margin-top:6px}
.s-mark-btn{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--gold);padding:0 12px;height:38px;margin-top:auto}
.s-mark-btn span{font-family:var(--serif);font-weight:600;font-size:12.5px;letter-spacing:.05em;color:var(--gold-text)}
.s-row{display:flex;align-items:center;gap:11px;padding:9px 0;border-bottom:1px solid var(--rule-soft)}
.s-row .plate{width:28px;height:42px;flex:none;border-width:3px;padding:0}
.s-row-copy{flex:1;min-width:0}
.s-row-copy b{font-family:var(--serif);font-weight:600;font-size:13px;line-height:1.15;display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.s-row-copy small{font-size:10px;color:rgba(32,31,29,.58)}
.s-check{width:36px;height:36px;flex:none;border:1px solid rgba(32,31,29,.22);display:flex;align-items:center;justify-content:center}
.s-check--on{border-color:var(--gold)}
.s-log{display:flex;gap:10px;padding:9px 0}
.s-log i{width:2px;flex:none;background:var(--gold);display:block}
.s-log i.session{opacity:.45}
.s-log-copy{flex:1;min-width:0}
.s-log-copy .line{display:flex;justify-content:space-between;gap:8px}
.s-log-copy b{font-family:var(--serif);font-weight:600;font-size:13px}
.s-log-copy time{font-size:9.5px;color:var(--ink-50)}
.s-log-copy em{font-size:11px;color:var(--ink-60)}
.s-line{display:flex;align-items:center;justify-content:space-between;min-height:38px;border-bottom:1px solid var(--rule-soft);font-size:12.5px}
.s-line--strong{border-bottom-color:var(--rule)}
.s-line em{font-size:10.5px;color:var(--ink-50)}
.s-line .figure-pair{display:flex;align-items:baseline;gap:5px}
.s-line .figure-pair b{font-family:var(--serif);font-weight:400;font-size:17px}
.s-line .figure-pair small{font-size:10.5px;color:var(--ink-50)}
.s-underline{font-family:var(--serif);font-weight:600;font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--gold-text);border-bottom:1px solid var(--gold);padding-bottom:2px;margin-top:auto}
.s-detail-head{display:flex;align-items:center;justify-content:space-between}
.s-mark-row{border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);padding:11px 0;display:flex;align-items:center;gap:11px}
.s-mark-row .s-mark-btn{margin-top:0}
.s-mark-row small{font-size:10px;line-height:1.35;color:var(--ink-50)}

/* Stats ledger figure (no device frame) */
.ledger{border:1px solid var(--rule);padding:26px 28px}
.ledger-grid{display:grid;grid-template-columns:1fr 1fr;gap:0 22px;margin-top:14px}
.ledger-grid div{display:flex;align-items:baseline;justify-content:space-between;border-bottom:1px solid var(--rule-soft);padding:6px 0}
.ledger-grid span{font-size:12.5px;color:var(--ink-60)}
.ledger-grid b{font-family:var(--serif);font-weight:400;font-size:21px}
.ledger-grid i{font-family:var(--serif);font-size:14px;font-style:italic;color:var(--ink-60)}
.ledger-figure{display:flex;align-items:baseline;gap:10px;margin-top:22px}
.ledger-figure b{font-family:var(--serif);font-weight:400;font-size:50px;line-height:.9}
.ledger-figure span{font-family:var(--serif);font-size:18px;color:var(--ink-60)}
.goal-dashes{display:grid;grid-template-columns:repeat(5,1fr);gap:6px;margin-top:12px}
.goal-dashes span{height:3px;background:rgba(32,31,29,.16)}
.goal-dashes span.met{background:var(--gold)}
.bars{display:flex;align-items:flex-end;gap:6px;margin-top:26px;border-bottom:1px solid var(--rule)}
.bars div{flex:1;display:flex;flex-direction:column;align-items:center;gap:3px}
.bars small{font-size:9.5px;color:var(--ink-50)}
.bars i{width:100%;border:1px solid var(--gold);background:rgba(182,130,53,.1);display:block}
.bars i.zero{height:1px;border:0;background:rgba(32,31,29,.2)}
.bars b{font-family:var(--serif);font-weight:600;font-size:9.5px;color:var(--ink-50)}
.bars .now b{color:var(--ink)}

@media (min-width:640px){
  .principles .container{grid-template-columns:repeat(4,1fr)}
  .principles span{border-top:0}
  .principles span:nth-child(even){border-left:1px solid var(--rule-soft)}
  .principles span:nth-child(3),.principles span:nth-child(4){border-left:1px solid var(--rule-soft)}
  .release-note{grid-template-columns:180px 1fr;gap:32px}
}
@media (min-width:900px){
  .hero{grid-template-columns:1fr 1fr;gap:56px;padding-top:64px}
  .feature-grid{grid-template-columns:repeat(3,1fr);gap:34px}
  .split{grid-template-columns:1fr 1fr;gap:52px}
  .split--figure-first .split-copy{order:1}
  .split--figure-first .figure{order:2}
  .two-col{grid-template-columns:1fr 1fr;gap:44px}
  .callout{grid-template-columns:1.6fr 1fr;gap:28px}
}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}