/* How to PILF (/how-to/, templates/how.html), Oct 20, 2026, site-how build. Tokens only (static/pilf.css › :root); type sizes are the Design
   System's type styles (DESIGN.md › TYPE STYLES), named beside each. The icons' motion is static/css/steps.css (linked by the steps partial) */

main:has(> .hw) { padding-top: var(--space-3); }

/* the top: eyebrow + headline [M Oct 20, r2-howto] */
.hw { display: flex; flex-direction: column; }
.hw-eye { font-family: var(--font-name); font-size: var(--t-label); line-height: 1.2; font-weight: 600; letter-spacing: .24em; text-transform: uppercase; color: var(--ink-66); margin-bottom: var(--space-2); }   /* eyebrow */
.hw-h { font-family: var(--font-name); font-size: var(--t-num); line-height: 1.05; font-weight: 600; letter-spacing: -.025em; text-wrap: balance; margin-bottom: var(--space-4); }   /* name-h1 */

/* four equal tiles, all four on the first screen at 390 × 660 [M Oct 17 round 1; M Oct 20 "equal"]. Each picture is square, and never taller than
   half of what the screen has left once the header, the top and two captions are counted, in em so larger text shrinks the pictures instead of
   pushing Take below the fold [M Oct 19, how-steps-fold: "for the larger text view… so they can all still fit on the one page"; C: the pictures
   give, the tag's words don't]. --hw-chrome is measured, not a token: the header, the top and the two caption rows at the phone's text size [C] */
.hw-steps { --hw-chrome: calc(12.6em + var(--space-8) + var(--space-6)); list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4) var(--space-3); }
.hw-s { min-width: 0; }
.hw-tap { display: flex; flex-direction: column; align-items: stretch; gap: var(--space-2); width: 100%; text-align: left; cursor: pointer; color: inherit; -webkit-tap-highlight-color: transparent; }
.hw-m { position: relative; display: block; width: 100%; aspect-ratio: 1 / 1; max-height: calc((100vh - var(--hw-chrome)) / 2); max-height: calc((100svh - var(--hw-chrome)) / 2); overflow: hidden; background: var(--photo); box-shadow: inset 0 0 0 1px var(--ink-05); }
.hw-m video, .hw-m img, .hw-m picture { width: 100%; height: 100%; object-fit: cover; display: block; }
.hw-n { position: absolute; left: var(--space-2); top: var(--space-2); min-width: var(--gutter); height: var(--gutter); padding-inline: var(--space-1); display: grid; place-items: center; background: var(--ground); color: var(--forest); font-family: var(--font-name); font-size: var(--t-label); line-height: 1; font-weight: 600; font-variant-numeric: lining-nums tabular-nums; }   /* button-label */
/* the caption, uniform on all four: the icon and the word, then the tag's line beneath [M Oct 19, how-show] */
.hw-t { display: flex; flex-direction: column; gap: 0; }
.hw-w { display: flex; align-items: center; gap: var(--space-2); font-family: var(--font-name); font-size: var(--t-ed); line-height: 1.25; font-weight: 600; letter-spacing: -.01em; color: var(--forest); }   /* subheading */
.hw-w .hwic { width: var(--gutter); height: var(--gutter); flex: none; color: var(--forest); }
/* the word is a LadderWord's cousin: the dotted forest underline says "tap me" (DESIGN.md › LadderWord) */
.hw-word { text-decoration: none; }   /* the step names aren't ladder words: no dotted cue [M Oct 26 3:33 AM: "be selective"; the Oct 26 review] */
.hw-l { font-family: var(--font-body); font-size: var(--t-body); line-height: 1.55; font-weight: 300; color: var(--ink-75); }   /* body-sm */
.hw-tap:focus-visible { outline: 2px solid var(--focus); outline-offset: var(--space-1); }
@media (hover: hover) and (pointer: fine) { .hw-tap:hover .hw-word { text-decoration: underline; text-underline-offset: .2em; } }

/* the places line (the glossary's phrase for /places-to-pilf/), its own line, with the P mark [M Oct 20, r2-places-line; r2-pmark; M Oct 23 owner2-34] */
.hw-places { margin-top: var(--space-4); }
.hw-places .textlink { display: inline-flex; align-items: center; gap: var(--space-2); min-height: var(--tap); font-size: var(--t-body); }
.hw-p { height: 1.15em; width: auto; flex: none; }

/* the questions: open, each question closed [M Oct 19, how-questions]; five, then See more [M Oct 19, how-more] */
.hw-qs { border-top: 1px solid var(--ink-15); }
.hw-qs-s { display: flex; justify-content: space-between; align-items: center; gap: var(--space-4); min-height: var(--tap); padding-block: var(--space-4); margin: 0; font-family: var(--font-name); font-size: var(--t-title); line-height: 1.2; font-weight: 600; letter-spacing: -.015em; }   /* heading */
.hw-ask-s .plus { font-family: var(--font-name); font-size: var(--t-title); line-height: 1; font-weight: 300; color: var(--ink-45); flex: none; transition: transform var(--dur-tap) var(--ease-settle); }
.hw-ask[open] > .hw-ask-s .plus { transform: rotate(45deg); }
.hw-list > .hw-row, .hw-more > .hw-row, .hw-sec > .hw-row { border-top: 1px solid var(--ink-15); }
.hw-row > summary { min-height: var(--tap); }
.hw-sec { margin-top: var(--space-6); }
.hw-sec-h { font-family: var(--font-name); font-size: var(--t-label); line-height: 1.2; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: var(--ink-66); padding-bottom: var(--space-3); }   /* label */
.hw-more { border-top: 1px solid var(--ink-15); }
.hw-more > .hw-row:first-of-type { border-top: 0; }
.hw-see { display: flex; align-items: center; min-height: var(--tap); padding-block: var(--space-2); list-style: none; cursor: pointer; font-family: var(--font-name); font-size: var(--t-small); font-weight: 600; color: var(--forest); text-decoration: none; justify-content: space-between; }   /* the entry's "See all" row: no underline, the + at the right (one open control, D2-02; his site call 1, the blind check) [C Oct 26] */
.hw-see .plus { font-weight: 300; font-size: var(--t-ed); color: var(--ink-45); line-height: 1; }
.hw-see::-webkit-details-marker { display: none; }
.hw-more[open] > .hw-see { display: none; }   /* once open, See more goes and can't be closed again [M Oct 19] */

/* the form behind its + [M Oct 20, how-r2-ask]: the email is optional */
.hw-ask { margin-top: var(--space-6); border-top: 1px solid var(--ink-15); border-bottom: 1px solid var(--ink-15); }
.hw-ask-s { display: flex; justify-content: space-between; align-items: center; gap: var(--space-4); min-height: var(--tap); padding-block: var(--space-3); list-style: none; cursor: pointer; font-family: var(--font-name); font-size: var(--t-ed); line-height: 1.25; font-weight: 600; letter-spacing: -.01em; color: var(--forest); }   /* subheading */
.hw-ask-s::-webkit-details-marker { display: none; }
.hw-form { padding-bottom: var(--space-4); }
.hw-form .btn[disabled] { opacity: .6; cursor: default; }
.hw-msg { font-size: var(--t-small); line-height: 1.4; color: var(--clay); }   /* caption */
.hw-msg:empty { display: none; }
.hw-small { font-size: var(--t-small); line-height: 1.4; color: var(--ink-66); }   /* caption */
.hw-ask[data-done] { display: none; }
.hw-sent { display: none; margin-top: var(--space-6); padding: var(--space-4); border-left: var(--space-1) solid var(--forest); background: var(--photo); font-family: var(--font-name); font-size: var(--t-strong); line-height: 1.2; font-weight: 600; }   /* name-card */
.hw-sent:target, .hw-sent.on { display: block; }
.hw-sent:focus { outline: none; }
#ask, .hw-sent, .hw-row, .hw-sec { scroll-margin-top: var(--space-8); }

/* the partner line at the bottom [M Oct 20] */
.hw-partner .textlink { display: inline-flex; align-items: center; min-height: var(--tap); font-size: var(--t-body); }

/* the step boxes: the page dims, a calm box rises, an X closes it (his definition-box rule; one <dialog class="defbox"> per step) */
html.hw-dim { overflow: hidden; }
dialog.defbox { box-sizing: border-box; width: calc(100% - var(--gutter) * 2); max-width: var(--measure); max-height: calc(100svh - var(--space-7) * 2); overflow: auto; margin: auto; padding: var(--space-6) var(--gutter) var(--gutter); border: 0; border-radius: var(--radius-none); background: var(--ground); color: var(--ink); box-shadow: 0 var(--space-2) var(--space-6) var(--ink-15); }
dialog.defbox::backdrop { background: var(--ink-45); }
dialog.defbox[open] { animation: defbox-rise var(--dur-in) var(--ease-settle); }
dialog.defbox[open]::backdrop { animation: defbox-dim var(--dur-in) var(--ease-settle); }
@keyframes defbox-rise { from { opacity: 0; transform: translateY(var(--space-6)); } to { opacity: 1; transform: none; } }
@keyframes defbox-dim { from { opacity: 0; } to { opacity: 1; } }
.defbox-x { position: absolute; top: var(--space-1); right: var(--space-1); width: var(--tap); height: var(--tap); display: grid; place-items: center; color: var(--ink-66); cursor: pointer; }
.defbox-x svg { width: var(--gutter); height: var(--gutter); }
.defbox-x:hover { color: var(--ink); }
.defbox-k { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-1) var(--space-2); padding-right: var(--tap); margin-bottom: var(--space-3); font-family: var(--font-name); font-size: var(--t-ed); line-height: 1.25; font-weight: 600; letter-spacing: -.01em; color: var(--forest); }   /* subheading */
.defbox-k .hwic { width: var(--space-6); height: var(--space-6); flex: none; }
.defbox-l { color: var(--ink); }
.defbox-p { font-family: var(--font-body); font-size: var(--t-body); line-height: 1.45; font-weight: 300; color: var(--ink-75); }   /* care-line */
@media (prefers-reduced-motion: reduce) {
  dialog.defbox[open], dialog.defbox[open]::backdrop { animation: none; }
  .hw-ask-s .plus { transition: none; }
}

/* tablets and up: the four in one row; a laptop spans the grid (.wide) and keeps the questions at the reading measure */
@media (min-width: 760px) {
  .hw-steps { grid-template-columns: repeat(4, 1fr); gap: var(--space-4); }
  .hw-m { max-height: none; }
}
@media (min-width: 1024px) {
  .hw-steps { gap: var(--gutter); }
  .hw-q, .hw-partner { max-width: var(--measure); }
}