/* SEO+: page-local styles (page builder A). Shared tokens only. */

/* ---------- What's included (on black) ---------- */
.incl-h { margin-bottom: clamp(40px, 5vw, 72px); }
.incl { display: grid; row-gap: clamp(48px, 6vw, 96px); }
.incl-row { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); row-gap: 16px; align-items: first baseline; }
.incl-name { grid-column: 1 / 8; font-family: var(--font-display); font-weight: 800; text-transform: uppercase; font-size: clamp(2.25rem, 1rem + 3.2vw, 4.5rem); line-height: 0.9; letter-spacing: -0.005em; }
.incl-side { grid-column: 8 / -1; display: grid; gap: 12px; justify-items: start; }
.incl-side b { font-weight: 700; }
@media (max-width: 800px) { .incl-name, .incl-side { grid-column: 1 / -1; } .incl-name { font-size: clamp(2rem, 8.4vw, 2.75rem); } }

/* ---------- Month by month ---------- */
.yr { padding-bottom: var(--section); }
.yr .head-row { margin-bottom: clamp(32px, 4vw, 56px); }
.months { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 28px var(--gutter); }
.month { display: grid; gap: 10px; align-content: start; }
.m-name { font-family: var(--font-display); font-weight: 800; text-transform: uppercase; font-size: clamp(1.5rem, 1rem + 1.2vw, 2.5rem); line-height: 0.9; color: var(--ink); transition: color var(--dur-ui) ease; }
.m-post { position: relative; display: block; aspect-ratio: 3 / 4; border: 2px dashed #8E8A80; background: var(--paper); }
.m-done { position: absolute; inset: -2px; display: flex; flex-direction: column; gap: 7%; padding: 10%; background: var(--ink); }
.m-done i { display: block; height: 4%; background: #6E6A62; }
.m-done i.m-pic { height: 52%; background: #CFCABE; }
.m-done i.short { width: 60%; }
.yr-key { margin-top: 24px; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; font-weight: 600; font-size: var(--step-small); }
.yr-swatch { display: inline-block; width: 18px; height: 14px; background: var(--ink); margin-left: 8px; }
.yr-swatch--todo { background: var(--paper); border: 2px dashed #8E8A80; margin-left: 0; }
.yr-count { margin-left: auto; }
/* pinned (desktop): the year fits one screen */
.yr.yr-pin .yr-pinbox { height: calc(100svh - var(--header-h)); display: grid; align-items: center; }
.yr.yr-pin .months { width: min(100%, calc((100svh - var(--header-h) - 240px) / 2 * 0.75 * 6 + 5 * var(--gutter))); }
.yr.yr-pin .yr-key { width: min(100%, calc((100svh - var(--header-h) - 240px) / 2 * 0.75 * 6 + 5 * var(--gutter))); }
.yr.yr-pin .month:not(.is-done) .m-name { color: var(--ink-soft); }
@media (max-width: 900px) and (min-width: 701px) {
  .months { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .yr.yr-pin .months, .yr.yr-pin .yr-key { width: min(100%, calc((100svh - var(--header-h) - 300px) / 3 * 0.75 * 4 + 3 * var(--gutter))); }
}
/* phones: a sideways swipe strip */
@media (max-width: 700px) {
  .months {
    display: flex; gap: 12px; overflow-x: auto; overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory; scroll-padding-inline: var(--margin);
    margin-inline: calc(var(--margin) * -1); padding: 4px var(--margin) 12px;
    scrollbar-width: thin;
  }
  .month { flex: 0 0 min(44vw, 200px); scroll-snap-align: start; }
  .months:focus-visible { outline-offset: -3px; }
  .yr-count { margin-left: 0; flex-basis: 100%; }
}
/* swipe mode (phones with motion): each post drops in as it comes into view */
.yr.yr-swipe .m-done { transition: opacity 500ms var(--ease-out), scale 500ms var(--ease-out); }
.yr.yr-swipe .month:not(.is-done) .m-done { opacity: 0; scale: 0.94; }
.yr.yr-swipe .month:not(.is-done) .m-name { color: var(--ink-soft); }

/* ---------- Who it's for ---------- */
.for-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); row-gap: 32px; align-items: start; }
.for-grid > h2 { grid-column: 1 / 6; }
.for-side { grid-column: 7 / -1; display: grid; gap: 24px; justify-items: start; }
.for-list { font-size: var(--step-lead); line-height: 1.3; }
.for-price { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px 20px; margin-top: 8px; }
.for-k { font-family: var(--font-display); font-weight: 800; text-transform: uppercase; font-size: clamp(2rem, 1rem + 2vw, 3rem); line-height: 0.9; }
@media (max-width: 800px) {
  .for-grid > h2, .for-side { grid-column: 1 / -1; }
  .for-list { font-size: var(--step-body); }
}

@media (prefers-reduced-motion: reduce) { .m-name, .yr.yr-swipe .m-done { transition: none; } }