/* ═══════════════════════════════════════════════════════════════════════════
   Plan2Ace — Blog

   Loads AFTER styles.css, which owns the tokens, the type ramp, the header, the
   buttons and the footer. This file only holds what the blog adds: the index
   cards and the article's own figures. There is no second palette here and no
   dark mode, because the rest of the site has neither.

   The figures on this blog draw the reader's own numbers. Nothing here renders
   invented data dressed up as a chart, which is why the old countdown strip,
   before/after rows and mastery bars are gone rather than restyled.

   Motion is CSS scroll-driven (animation-timeline) and armed inside @supports,
   so a browser without scroll timelines gets the finished state on first paint.
   The interactive figures are the only JavaScript, in tools.js.
   ═══════════════════════════════════════════════════════════════════════════ */

/* The header is position:fixed and its shadow rides --nav-p, which the landing
   page's script sets. No such script here, so the same fade comes off a scroll
   timeline, and browsers without one just get the shadow. */
.blog .head-shadow{opacity:1}
@supports (animation-timeline:scroll()){
  .blog .head-shadow{animation:nav-in linear both;animation-timeline:scroll(root block);
    animation-range:0 150px}
  @keyframes nav-in{from{opacity:0}to{opacity:1}}
}

/* The tokens the blog needs that styles.css does not define. Everything else
   (ink, muted, paper, surface, sunken, line, tints, emeralds, --head-h) comes
   from there, so there is exactly one palette on this site. */
.blog{
  --warm:#C2410C;        /* the read-once line, and the "feels productive" column */
  --faint:#636B68;       /* captions and metadata: 5.1:1 on paper, 4.8:1 on sunken */
  --radius:20px;
}

.wrap{width:min(100% - 40px,700px);margin-inline:auto}
/* Breakout: a figure inside the 700px column that spans the wide measure, the
   way Apple sets a photo wider than the text under it. Margin, not transform,
   because .rise already owns transform. */
.bleed{margin-inline:calc(50% - min(50vw - 20px,560px))}
.wrap-wide{width:min(100% - 40px,1080px);margin-inline:auto}

/* Reading progress. One line, scroll timeline, zero script. */
.progress{position:fixed;left:0;top:calc(var(--head-h) - 2px);height:2px;width:100%;
  z-index:901;transform-origin:0 50%;transform:scaleX(0);
  background:linear-gradient(90deg,var(--em-deep),var(--em-bright))}
@supports (animation-timeline:scroll()){
  @media (prefers-reduced-motion:no-preference){
    .progress{animation:grow linear;animation-timeline:scroll(root block)}
  }
}
@keyframes grow{from{transform:scaleX(0)}to{transform:scaleX(1)}}

/* ═══ Blog index ══════════════════════════════════════════════════════════ */

.index-hero{padding:calc(var(--head-h) + 88px) 0 12px}
.index-hero h1{font-size:clamp(2.8rem,9vw,5rem);margin:0 0 20px;font-weight:600;
  line-height:1.02;letter-spacing:-.04em;text-wrap:balance}
.index-hero p{font-size:clamp(1.2rem,2.8vw,1.5rem);line-height:1.4;letter-spacing:-.012em;
  color:var(--muted);max-width:36ch;text-wrap:pretty}

.posts{display:grid;gap:28px;padding:56px 0 120px}
@media (min-width:860px){.posts{grid-template-columns:1fr 1fr}.posts > li:first-child{grid-column:1/-1}}

.card{display:block;height:100%;text-decoration:none;color:inherit;background:var(--surface);
  border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;
  transition:transform .35s cubic-bezier(.2,.8,.2,1),border-color .35s}
/* Apple's cards do not lift. The photo moves inside its frame, and the press
   answers on pointer-down. */
.card:hover{border-color:var(--tint-a)}
.card:active{transform:scale(.985);transition-duration:.1s}
.card-art.is-img img{transition:transform .6s cubic-bezier(.2,.8,.2,1)}
.card:hover .card-art.is-img img{transform:scale(1.03)}
.card-art{aspect-ratio:16/9;background:var(--tint-b);display:grid;align-content:center;
  gap:14px;padding:26px 24px;border-bottom:1px solid var(--tint-c)}
/* The featured card's art is two elements, so a 21:9 box left a third of it
   empty. Height comes from the content with a floor instead. */
.posts > li:first-child .card-art{aspect-ratio:auto;min-height:220px;padding:34px 36px}
/* An image card has no padding to honour: the art is the whole box. */
.card-art.is-img{padding:0;aspect-ratio:16/9;min-height:0}
.posts > li:first-child .card-art.is-img{aspect-ratio:16/9;min-height:0;padding:0}
.card-art.is-img img{display:block;width:100%;height:100%;object-fit:cover}
.card-body{padding:28px 30px 32px}
.card-kicker{font-size:13px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--em-deep)}
.card h2{font-size:clamp(1.5rem,3.4vw,2.1rem);margin:0 0 12px;font-weight:600;
  line-height:1.1;letter-spacing:-.028em;text-wrap:balance}
.posts > li:first-child .card h2{font-size:clamp(1.8rem,4.6vw,3rem);letter-spacing:-.035em}
.card p{color:var(--muted);font-size:17px;line-height:1.55;text-wrap:pretty}
.card-meta{margin-top:18px;font-size:14px;color:var(--faint)}

/* The card art is the article's own phase split, drawn again small: the same
   proportion the reader will produce with their own date inside the post. */
.card-art .art-n{font-size:clamp(2rem,6vw,3.2rem);font-weight:600;letter-spacing:-.03em;
  color:var(--em-darkest);line-height:1}
.card-art .art-n small{display:block;font-size:13px;font-weight:600;letter-spacing:.08em;
  text-transform:uppercase;color:var(--em-deep);margin-bottom:8px}

/* The soon slot: an honest empty state, not a fake post. */
.soon{border-style:dashed;background:transparent;display:flex;align-items:center;
  justify-content:center;min-height:200px;padding:32px;text-align:center;color:var(--faint);
  border:1px dashed var(--line);border-radius:var(--radius);font-size:15px}

/* ═══ Article ═════════════════════════════════════════════════════════════ */

.art-hero{padding:calc(var(--head-h) + 64px) 0 56px;text-align:center}
/* The header nav is display:none on a phone, so without this the article is a
   dead end: no way back to the index except the browser button. */
.back{display:inline-flex;align-items:center;min-height:44px;padding:0 4px;
  font-size:15px;font-weight:500;color:var(--em-deep);text-decoration:none}
.back::before{content:"\2190";margin-right:8px}
.back:hover{text-decoration:underline}
/* Tracking tightens as size grows and leading drops with it: display type set
   at body spacing reads loose and gappy. */
.art-hero h1{font-size:clamp(2.5rem,7.6vw,4.75rem);margin:12px auto 24px;max-width:17ch;font-weight:600;
  line-height:1.03;letter-spacing:-.04em;text-wrap:balance}
.art-hero .lede{font-size:clamp(1.2rem,2.8vw,1.5rem);color:var(--muted);max-width:40ch;margin-inline:auto;
  line-height:1.4;letter-spacing:-.012em;text-wrap:pretty}
.byline{margin-top:28px;font-size:14.5px;color:var(--faint);display:flex;gap:10px;justify-content:center;flex-wrap:wrap}
.byline span::after{content:"·";margin-left:10px;color:var(--line)}
.byline span:last-child::after{content:""}

.art{padding-bottom:40px}
.art p{margin:0 0 24px;color:var(--ink);font-size:clamp(17px,.9rem + .35vw,19px);line-height:1.6;text-wrap:pretty}
/* 26ch, not 18: the tighter cap broke almost every heading onto two lines even
   on a wide screen, which made the article read as stacked slabs. */
.art h2{font-size:clamp(2rem,5.4vw,3rem);margin:120px 0 20px;max-width:22ch;line-height:1.06;
  font-weight:600;letter-spacing:-.034em;text-wrap:balance}
.art h3{font-size:clamp(1.3rem,3vw,1.6rem);margin:64px 0 14px;font-weight:600;line-height:1.2;
  letter-spacing:-.02em;text-wrap:balance}
/* The claim, one line, directly under the heading. This is the layer a skimming
   reader actually reads, so it gets the emerald and the weight. The paragraphs
   below it must add evidence, never restate it. */
.art .big{font-size:clamp(1.35rem,3.6vw,1.8rem);line-height:1.28;color:var(--em-deeper);
  font-weight:500;margin:0 0 32px;letter-spacing:-.022em}
.art strong{font-weight:600}
.art a{color:var(--em-deep)}

figure{margin:56px 0}

/* Pull quote: one line lifted from the section, set large and quiet between
   hairlines, the way Apple breaks a long run of prose. */
.art .pull{margin:88px 0;padding:56px 0;border-block:1px solid var(--line);text-align:center}
.art .pull p{margin:0 auto;max-width:24ch;font-size:clamp(1.6rem,4.6vw,2.5rem);line-height:1.18;
  font-weight:500;letter-spacing:-.03em;color:var(--muted);text-wrap:balance}
.art .pull p::before{content:"\201C"}
.art .pull p::after{content:"\201D"}
figcaption{margin-top:14px;font-size:14.5px;color:var(--faint);line-height:1.5}

/* ── Figures ──────────────────────────────────────────────────────────────── */

.panel{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);
  padding:26px 24px;overflow:hidden}
.p-title{font-size:15px;font-weight:600;margin:0 0 4px}
.p-sub{font-size:14px;color:var(--muted);margin:0 0 20px}

/* ── Tool 1: how long have you actually got ───────────────────────────────── */
.tool-in{display:grid;gap:14px;margin:18px 0 4px}
@media (min-width:560px){.tool-in{grid-template-columns:1fr 1fr;gap:16px}}
.tool-in label{display:grid;gap:7px;font-size:13.5px;font-weight:600;color:var(--muted)}
.tool-in input,.tool-in select{font:inherit;font-size:16px;color:var(--ink);
  padding:12px 14px;border-radius:12px;border:1px solid var(--line);background:var(--paper);
  width:100%;min-height:48px}
.tool-in input:focus-visible,.tool-in select:focus-visible,.seg button:focus-visible,
.slide input:focus-visible{outline:2px solid var(--em-deep);outline-offset:2px}

.tool-out{display:block;margin-top:22px;padding-top:22px;border-top:1px solid var(--line)}
.t-empty{margin:0;color:var(--faint);font-size:15px}
.t-big{font-size:clamp(2.2rem,7vw,3.2rem);font-weight:600;letter-spacing:-.03em;
  color:var(--em-darkest);margin:0 0 6px;line-height:1}
.t-sub{font-size:15.5px;color:var(--muted);margin:0 0 20px}
.t-note{font-size:14.5px;color:var(--faint);margin:14px 0 0}
/* The four-kinds readout is a sentence rather than a number, so it takes a
   smaller rung than .t-big while still reading as the answer. */
.t-move{font-size:clamp(1.15rem,3.2vw,1.5rem);font-weight:600;letter-spacing:-.02em;
  color:var(--em-darkest);margin:0;line-height:1.32}

/* The phase split is a proportion of the reader's own days, so it is a real
   chart. It is the only bar on this blog for that reason. */
.phases{display:flex;gap:5px;align-items:stretch}
.ph{border-radius:11px;padding:13px 12px;min-width:0;display:grid;gap:3px;align-content:center}
.ph-lab{font-size:12.5px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ph-n{font-size:12.5px;opacity:.75;white-space:nowrap}
.ph-learn{background:var(--em-darkest);color:#DFF6EC}
.ph-practise{background:var(--tint-a);color:var(--em-darkest)}
.ph-review{background:var(--tint-gold);color:#5A4300}
@media (max-width:460px){.ph{padding:11px 9px}.ph-lab,.ph-n{font-size:11.5px}}

/* ── Tool 2: what missing days costs ──────────────────────────────────────── */
.seg{display:flex;gap:6px;padding:5px;background:var(--sunken);border-radius:100px;
  margin:0 0 20px;width:fit-content;max-width:100%;flex-wrap:wrap}
.seg button{font:inherit;font-size:14.5px;font-weight:600;color:var(--muted);cursor:pointer;
  border:0;background:transparent;padding:9px 18px;border-radius:100px;min-height:40px;
  transition:background .2s,color .2s}
.seg button:active{transform:scale(.97)}
.seg button[aria-pressed="true"]{background:var(--surface);color:var(--em-darkest);
  box-shadow:0 1px 2px rgba(6,64,43,.12)}

.cmp{display:grid;gap:12px}
@media (min-width:520px){.cmp{grid-template-columns:1fr 1fr}}
.cmp-cell{padding:20px 18px;border-radius:14px;background:var(--sunken)}
.cmp-cell.is-good{background:var(--tint-b)}
.cmp-lab{font-size:12.5px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;
  color:var(--faint);margin:0 0 8px}
.cmp-cell.is-good .cmp-lab{color:var(--em-deep)}
.cmp-val{font-size:clamp(1.7rem,5.5vw,2.3rem);font-weight:600;letter-spacing:-.03em;
  margin:0 0 6px;line-height:1;color:var(--warm)}
.cmp-cell.is-good .cmp-val{color:var(--em-darkest)}
.cmp-note{font-size:13.5px;color:var(--muted);margin:0;line-height:1.45}

/* ── Tool 3: the forgetting curve ─────────────────────────────────────────── */
.chart{width:100%;height:auto;display:block}
.chart .grid{stroke:var(--line);stroke-width:1}
.chart .axis{fill:var(--faint);font-size:11px;font-family:inherit}
.chart .decay{fill:none;stroke:var(--warm);stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.chart .keep{fill:none;stroke:var(--em-deep);stroke-width:3.5;stroke-linecap:round;stroke-linejoin:round;
  transition:d .35s cubic-bezier(.2,.8,.2,1)}
.chart .tick{fill:var(--em-deep);stroke:var(--surface);stroke-width:2}
/* The ten minute threshold. It is the claim the section makes, so it is drawn
   above the gridlines rather than as one of them. */
.chart .mark{stroke:var(--em-deep);stroke-width:2;stroke-dasharray:5 5;fill:none}

.slide{display:grid;gap:10px;margin:18px 0 0;font-size:13.5px;font-weight:600;color:var(--muted)}
.slide input{width:100%;accent-color:var(--em-deep);min-height:44px}
.readout{margin:12px 0 0;font-size:15.5px;color:var(--muted);line-height:1.5}
.readout b{color:var(--em-darkest);font-weight:600;font-variant-numeric:tabular-nums}
.readout .is-once{color:var(--warm)}

/* ── Feels productive vs. moves marks ─────────────────────────────────────── */
.split{display:grid;gap:14px;margin:36px 0}
@media (min-width:600px){.split{grid-template-columns:1fr 1fr}}
.split > div{padding:22px 22px 24px;border-radius:var(--radius);background:var(--sunken);
  border:1px solid var(--line)}
.split > .is-good{background:var(--tint-b);border-color:var(--tint-c)}
.split-lab{font-size:12.5px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;
  color:var(--warm);margin:0 0 14px}
.split .is-good .split-lab{color:var(--em-deep)}
.split ul{display:grid;gap:9px;list-style:none;padding:0;margin:0}
.split li{font-size:15.5px;line-height:1.45;padding-left:20px;position:relative;color:var(--ink)}
.split li::before{content:"";position:absolute;left:0;top:.55em;width:8px;height:2px;
  border-radius:2px;background:var(--warm)}
.split .is-good li::before{background:var(--em-deep)}

/* ── Chips ────────────────────────────────────────────────────────────────── */
.chips{display:flex;flex-wrap:wrap;gap:10px;margin:0 0 12px;list-style:none;padding:0}
.chips li{padding:9px 16px;border-radius:100px;background:var(--sunken);
  border:1px solid var(--line);font-size:15px;font-weight:500}

/* ── Phone shots. Real screenshots from the app; nothing here is a mockup. ──
   Most captures already carry the device's dark edge and rounded corners, so
   the frame is the same dark and the corners are percentages: the curve scales
   with the phone instead of a fixed px radius that fits one size only. Every
   column is the same width and the aspect ratio reserves the height before the
   lazy image loads, so the row never renders as mismatched phones. */
.shots{display:grid;gap:28px;justify-content:center;
  grid-template-columns:repeat(auto-fit,minmax(170px,250px));margin-block:72px}
.shots figure{margin:0}
.shot{background:var(--night);padding:2.2%;border-radius:14% / 6.4%;overflow:hidden}
.art .shot img{display:block;width:100%;height:auto;aspect-ratio:885/1923;object-fit:cover;
  border:0;border-radius:12% / 5.5%}
.shots figcaption{margin:14px 2px 0;font-size:14px;text-align:center}
/* On a phone three frames cannot sit side by side at a readable size, so the
   row scrolls sideways and snaps, edge to edge, rather than orphaning one. */
@media (max-width:640px){
  .shots{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:58%;
    justify-content:start;overflow-x:auto;scroll-snap-type:x mandatory;
    margin-inline:calc(50% - 50vw);padding:0 calc(50vw - 50%) 8px;scrollbar-width:none}
  .shots::-webkit-scrollbar{display:none}
  .shots figure{scroll-snap-align:center}
}

/* ── Photographic figures ─────────────────────────────────────────────────
   Article imagery sits in the same box as the panels so the column reads as
   one rhythm. The lead art is the only one that breaks the top margin. */
.art figure img{display:block;width:100%;height:auto;border-radius:var(--radius);
  border:1px solid var(--line)}
/* The lead photo spans the wide measure with no stroke: it is the page's
   opening image, not a figure in the column. */
.lead-art{margin-block:0 72px}
.art .lead-art img{border:0;border-radius:28px}
/* The exam sheet is square, so full width hands the reader a screen of empty
   paper. Centred and capped, it reads as a photo of a sheet instead. */
.sheet-art img{max-width:440px;margin:0 auto}

/* ── TL;DR ────────────────────────────────────────────────────────────────
   The post in five lines, above everything. Numbered, because the order is
   the method. */
.tldr{margin:0 0 20px;padding:32px 34px 34px;border-radius:24px;
  background:var(--tint-b);border:1px solid var(--tint-c)}
.tldr h2{font-size:1.3rem;font-weight:600;letter-spacing:-.018em;line-height:1.2;
  color:var(--em-darkest);margin:0 0 20px;max-width:none}
.tldr ol{counter-reset:t;display:grid;gap:11px;list-style:none;padding:0;margin:0}
.tldr li{counter-increment:t;display:grid;grid-template-columns:26px 1fr;gap:13px;
  align-items:baseline;font-size:clamp(1.02rem,2.6vw,1.13rem);font-weight:500;line-height:1.4}
.tldr li::before{content:counter(t);font-size:13px;font-weight:600;color:var(--em-deep);
  font-variant-numeric:tabular-nums}

/* ── Questions ────────────────────────────────────────────────────────────
   <details> does the disclosure. No script, and it is findable by find-in-page. */
.qa{margin:22px 0 0}
.qa details{border-bottom:1px solid var(--line)}
.qa details:first-child{border-top:1px solid var(--line)}
.qa summary{cursor:pointer;list-style:none;padding:20px 40px 20px 0;position:relative;
  font-size:clamp(1.02rem,2.6vw,1.12rem);font-weight:500}
.qa summary::-webkit-details-marker{display:none}
.qa summary::after{content:"";position:absolute;right:8px;top:50%;width:11px;height:11px;
  margin-top:-7px;border-right:2px solid var(--em-deep);border-bottom:2px solid var(--em-deep);
  transform:rotate(45deg);transition:transform .25s cubic-bezier(.2,.8,.2,1)}
.qa details[open] summary::after{transform:rotate(-135deg);margin-top:-2px}
.qa details p{margin:0 0 22px;color:var(--muted);max-width:62ch}

/* ── Takeaway checklist ───────────────────────────────────────────────────── */
.take{display:grid;gap:12px;margin:34px 0 8px;list-style:none;padding:0}
.take li{display:grid;grid-template-columns:26px 1fr;gap:14px;align-items:start;
  font-size:16.5px;line-height:1.55}
.take svg{width:22px;height:22px;margin-top:4px;fill:none;stroke:var(--em-deep);stroke-width:2.4;
  stroke-linecap:round;stroke-linejoin:round}

/* ── End CTA ──────────────────────────────────────────────────────────────── */
.end{margin:120px 0 0;padding:72px 32px;border-radius:32px;text-align:center;
  background:var(--em-darkest);color:#fff}
.end h2{font-size:clamp(2rem,5.4vw,3rem);margin:0 auto 14px;max-width:none}
.end p{color:#A6D7C2;margin:0 0 26px}
.end .btn-primary{background:#fff;color:var(--em-darkest)}
.end .btn-primary:hover{background:#DFF6EC}
.end .fine{font-size:14px;color:#8FC9B2;margin:18px 0 0}

/* ═══ Motion ══════════════════════════════════════════════════════════════
   Every animation below is view()-driven: it plays as the element crosses the
   viewport and rewinds when it leaves. All of it is inside @supports, so a
   browser that cannot do scroll timelines paints the finished state and loses
   nothing but the animation. The interactive figures never animate on scroll,
   because a figure the reader is currently using must not move under them.
   ═══════════════════════════════════════════════════════════════════════ */

@supports (animation-timeline:view()){
  @media (prefers-reduced-motion:no-preference){

    .rise{animation:rise linear both;animation-timeline:view();animation-range:entry 8% cover 32%}
    @keyframes rise{from{opacity:0;transform:translateY(26px)}to{opacity:1;transform:none}}

    /* Staggered children: each sets --i, which offsets where in the range it starts. */
    .stagger > *{animation:rise linear both;animation-timeline:view();
      animation-range:entry calc(6% + var(--i,0) * 5%) cover calc(28% + var(--i,0) * 5%)}

    .art-hero h1{animation:settle .7s cubic-bezier(.2,.8,.2,1) both}
    .art-hero .lede,.index-hero p{animation:settle .7s .08s cubic-bezier(.2,.8,.2,1) both}
    .index-hero h1{animation:settle .7s cubic-bezier(.2,.8,.2,1) both}
    .art-hero .byline{animation:settle .7s .18s cubic-bezier(.2,.8,.2,1) both}
    @keyframes settle{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}


  }
}

@media (prefers-reduced-motion:reduce){
  .chart .keep{transition:none}
  .card{transition:none}
  .card:hover{transform:none}
}