/* =====================================================================
   Paper and Ink · essays/a-goal-is-not-a-strategy.css
   "A Goal Is Not a Strategy": the figures only this essay uses.
   Loaded after the shared stylesheets; everything shared lives in css/.
   ===================================================================== */

/* Layout: one 64ch reading column on grained paper; two paper objects break out to 860px:
   a composite strategy memo with blue pencil questions in its margin (Figure 1, static)
   and a strategy worksheet on taped graph paper where the reader picks a diagnosis and the
   use-case list is struck through to match (Figure 2, interactive).
   Gold = a stated goal; blue = a named obstacle.
   Every rule below is scoped to its figure so none of it can restyle the generated Read next block.
   Labels stay at 11px or larger. */

/* ---- footnote markers -------------------------------------------------- */
sup.ref { font-family: var(--sans); font-size: .62em; line-height: 0; margin-left: 1px; }
sup.ref a { text-decoration: none; color: var(--life); padding: 0 1px; }
sup.ref a:hover { text-decoration: underline; }
.sources li:target { color: var(--ink); background: var(--life-soft); }

/* ---- Figure 1: the memo -------------------------------------------------------- */
.memo { position: relative; max-width: 700px; padding: 1.5rem 1.6rem 1.3rem; background: var(--noise), var(--slip); color: var(--slip-ink); transform: rotate(-.6deg); animation: fade .5s ease both; }
.memo .mh { margin: 0; font-family: var(--serif); font-size: 1.5rem; font-weight: 500; line-height: 1.2; }
.memo .ms { margin: .2rem 0 1rem; font-family: var(--sans); font-size: .7rem; letter-spacing: .14em; text-transform: uppercase; font-weight: 600; color: var(--graphite); }
.memo .goals { margin: 0; padding: 0 0 0 1.3rem; font-family: var(--mono); font-size: .8rem; line-height: 1.45; color: var(--slip-once); }
.memo .goals li { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 11rem); gap: .3rem 1.2rem; align-items: baseline; padding: .45rem 0; border-top: 1px dashed var(--grid-major); }
.memo .gl { font-weight: 600; }
/* blue pencil, in the margin beside the line it questions */
.memo .pq, .memo .pnote { font-family: var(--serif); font-style: italic; font-size: 1.02rem; line-height: 1.25; color: var(--slip-life); }
.memo .pq { transform: rotate(-2deg); animation: fade .5s ease both; }
.memo .goals li:nth-child(1) .pq { animation-delay: .6s; }
.memo .goals li:nth-child(2) .pq { animation-delay: .8s; }
.memo .goals li:nth-child(3) .pq { animation-delay: 1s; }
.memo .goals li:nth-child(4) .pq { animation-delay: 1.2s; }
.memo .appx { margin-top: .9rem; padding: .7rem .8rem; border: 1px solid var(--grid-major); }
.memo .ah { margin: 0 0 .35rem; font-family: var(--sans); font-size: .7rem; letter-spacing: .12em; text-transform: uppercase; font-weight: 600; color: var(--graphite); }
.memo .uc { margin: 0; font-family: var(--mono); font-size: .76rem; line-height: 1.5; color: var(--slip-once); }
.memo .pnote { margin: .8rem 0 0; text-align: right; font-size: 1.15rem; transform: rotate(-2deg); animation: fade .5s ease 1.4s both; }

/* ---- Figure 2: the worksheet ------------------------------------------------------ */
.kern {
  position: relative; max-width: 820px; padding: 1.5rem 1.4rem 1.3rem; transform: rotate(.2deg); color: var(--slip-ink);
  background:
    var(--noise),
    linear-gradient(var(--grid-major) 1px, transparent 1px) 0 0 / 60px 60px,
    linear-gradient(90deg, var(--grid-major) 1px, transparent 1px) 0 0 / 60px 60px,
    linear-gradient(var(--grid-minor) 1px, transparent 1px) 0 0 / 12px 12px,
    linear-gradient(90deg, var(--grid-minor) 1px, transparent 1px) 0 0 / 12px 12px,
    var(--sheet);
}
.kern::before, .kern::after { content: ""; position: absolute; top: -11px; width: 84px; height: 24px; background: var(--noise), var(--tape); }
.kern::before { left: 22px; transform: rotate(-5deg); }
.kern::after { right: 22px; transform: rotate(4deg); }
.kern .kh { margin: 0 0 .8rem; font-family: var(--sans); font-size: .7rem; letter-spacing: .14em; text-transform: uppercase; font-weight: 600; color: var(--graphite); }
.kern .dx { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 1.1rem; }
.kern .dxb { font: 600 .78rem/1.3 var(--sans); padding: .5rem .75rem; color: var(--slip-life); background: var(--noise), var(--slip); border: 1.5px solid var(--grid-major); cursor: pointer; text-align: left; }
.kern .dxb[aria-pressed="true"] { border-color: var(--slip-life); background: var(--noise), linear-gradient(var(--life-soft), var(--life-soft)), var(--slip); box-shadow: 0 1px 1px var(--shadow); }
.kern .dxb:focus-visible { outline: 2px solid var(--slip-life); outline-offset: 3px; }
.kern .kbody { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 1.4rem 2rem; }
.kern .kl { margin: .7rem 0 .2rem; font-family: var(--sans); font-size: .7rem; letter-spacing: .12em; text-transform: uppercase; font-weight: 600; color: var(--graphite); }
.kern .kl:first-child { margin-top: 0; }
.kern .kv { margin: 0; font-family: var(--serif); font-size: 1.02rem; line-height: 1.4; color: var(--slip-life); }
.kern .acts { padding-left: 1.2rem; }
.kern .acts li { margin: .15rem 0; }
.kern .ucl { list-style: none; margin: 0; padding: 0; font-family: var(--mono); font-size: .78rem; line-height: 1.35; }
.kern .ucl li { padding: .32rem 0; border-top: 1px dashed var(--grid-major); color: var(--slip-once); transition: color .3s ease; }
.kern .ucl li.keep { font-weight: 600; }
.kern .ucl li.keep::before { content: "\2713\00a0"; color: var(--slip-life); }
.kern .ucl li.drop { text-decoration: line-through; text-decoration-color: var(--slip-life); text-decoration-thickness: 1.5px; }
.kern .kcount { margin: .6rem 0 0; font-family: var(--sans); font-size: .74rem; font-weight: 600; color: var(--graphite); }

@media (max-width: 640px) {
  .memo { padding: 1.2rem .95rem 1rem; }
  .memo .goals li { grid-template-columns: minmax(0, 1fr); gap: .1rem; }
  .memo .pq { justify-self: end; }
  .kern { padding: 1.3rem .85rem 1rem; }
  .kern .kbody { grid-template-columns: minmax(0, 1fr); }
  .kern .dxb { flex: 1 1 100%; }
}