/* Hallmark · shape: Bento Grid · genre: atmospheric · theme: Terminal (by request) · redesign: full · draw: 29541c · job: try
 * hero: Counter · nav: edge-aligned · footer: colophon block · imagery: the user's poster, once as itself and twice printed in glyphs · signature: the sign-in poster printed in the brand's own words, resolving into the photograph and printed back in gold under the cursor
 * axes: dark/mono/chromatic-gold · posture: committed · contrast: pass · fold: pass · brand: gold #E0B341 kept over the theme's green · v2.0.0 */
/* Hallmark · pre-emit critique: P4 H4 E4 S4 R4 V4 · weakest: S, a trainer's app page could read generic; led with the client's own poster in glyphs and the trainer's real taglines instead of feature talk */
/* Hallmark · answered terminal photograph rule · the hero settles on the real poster photograph rather than the glyph print · the owner asked for the same poster image as the old sign-in page; the print carries the wordmark tile instead */
/* Hallmark · waive 44c · the text block runs 218 to 750px and the poster 155 to 808px at 1440, centres 4px apart · the render reads the counter well as its own block and measures the head alone */
/* Hallmark · dismissed 23 · the fallback is the gold BFITCFIT wordmark itself, shown only when the glyph print cannot draw */
/* Hallmark · finish-review: subagent · 8 findings · 7 resolved 1 answered (the hero resting state, above) */
@import url("./tokens.css");
@import url("./base.css");

body { font-stretch: var(--stretch-body); font-variant-numeric: tabular-nums; line-height: 1.65; }
h1, h2, h3 { font-weight: var(--display-weight); font-stretch: var(--stretch-display); letter-spacing: var(--tracking-display); line-height: 1.12; }
h1 { font-size: clamp(2.5rem, 3.6vw + 0.75rem, 3.75rem); max-width: 14ch; }
h2 { font-size: clamp(2rem, 2.2vw + 1rem, 3rem); }
a { color: var(--color-ink-2); text-decoration-style: dotted; transition: color var(--dur-micro) steps(1); }
a:hover { color: var(--color-accent); }

.skip { position: absolute; left: var(--space-md); top: calc(-1 * var(--space-3xl)); z-index: var(--z-toast); padding: var(--space-xs) var(--space-md); background: var(--color-ink); color: var(--color-paper); }
.skip:focus-visible { top: var(--space-md); }

/* controls */
.btn { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 0 var(--space-lg); border: 1px solid var(--color-accent); border-radius: 0; font: 500 var(--text-md)/1 var(--font-body); font-stretch: var(--stretch-body); white-space: nowrap; text-decoration: none; cursor: pointer; transition: background-color var(--dur-micro) steps(1), color var(--dur-micro) steps(1), border-color var(--dur-micro) steps(1); }
.btn:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 3px; }
.btn:active { transform: translateY(1px); }
.btn[aria-disabled="true"] { opacity: 0.55; cursor: not-allowed; }
.btn--primary { background: var(--color-accent); color: var(--color-accent-ink); }
.btn--primary:hover { background: var(--glyph-7); border-color: var(--glyph-7); color: var(--color-accent-ink); }
.btn--quiet { min-height: 44px; background: transparent; color: var(--color-ink); border-color: var(--color-ink-2); }
.btn--quiet:hover { background: var(--color-paper-3); color: var(--color-ink); }

/* nav */
.nav { position: sticky; top: 0; z-index: var(--z-sticky-nav); background: var(--color-paper); border-bottom: var(--rule-hair) solid var(--color-rule); }
.nav__row { display: flex; align-items: center; justify-content: space-between; min-height: 64px; }
.wordmark { color: var(--color-accent); font-weight: 700; font-stretch: var(--stretch-display); font-size: var(--text-lg); text-decoration: none; }
.wordmark:hover { color: var(--glyph-7); }

/* hero: Counter, the address set large beside the poster in glyphs */
.hero { min-height: calc(100dvh - 65px); display: grid; align-items: center; padding-block: var(--space-xl); }
.hero__grid { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: var(--space-3xl); align-items: center; }
.hero__text { display: grid; gap: var(--space-lg); min-width: 0; }
.hero .lead { color: var(--color-ink-2); }
.counter { margin-top: var(--space-md); padding: var(--space-xl); background: var(--color-paper-2); border: var(--rule-hair) solid var(--color-rule); display: grid; gap: var(--space-sm); }
.counter__addr { font-size: clamp(1.25rem, 1.6vw + 0.6rem, 2rem); font-weight: 500; font-stretch: var(--stretch-display); color: var(--color-ink); text-decoration: none; white-space: nowrap; min-width: 0; }
.counter__addr:hover { color: var(--color-accent); }
.counter__row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-md) var(--space-lg); margin-top: var(--space-sm); }
.counter__note { color: var(--color-ink-2); }

.art { position: relative; margin: 0; }
.art--hero { justify-self: end; width: min(100%, calc(min(74dvh, 700px) * 0.847)); aspect-ratio: 130 / 153.55; }
.art__still { width: 100%; height: 100%; object-fit: cover; object-position: 50% 38.3%; transition: opacity 600ms var(--ease-out); }
.art canvas { position: absolute; inset: 0; width: 100%; height: 100%; transition: opacity 600ms var(--ease-out); }
.art.is-printing .art__still { opacity: 0; }
.art.is-settling canvas { opacity: 0; }

/* moments: the bento */
.moments { padding-block: var(--section-gap-s); border-top: var(--rule-hair) solid var(--color-rule); }
.bento { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); grid-auto-rows: minmax(280px, auto); gap: var(--gap-columns); margin-top: var(--space-2xl); }
.tile { margin: 0; padding: var(--space-xl); background: var(--color-paper-2); border: var(--rule-hair) solid var(--color-rule); display: flex; flex-direction: column; justify-content: flex-end; gap: var(--space-sm); min-width: 0; }
.tile p { color: var(--color-ink-2); max-width: 46ch; }
.tile--print { grid-column: span 8; padding: 0; justify-content: space-between; }
.tile--print figcaption { padding: var(--space-lg) var(--space-xl); border-top: var(--rule-hair) solid var(--color-rule); font-size: var(--text-sm); color: var(--color-ink-2); }
.art--wordmark { flex: 1; aspect-ratio: 130 / 51.8; margin: var(--space-xl) var(--space-xl) var(--space-lg); }
.art__fallback { position: absolute; inset: 0; display: grid; place-items: center; margin: 0; font-size: var(--text-display); font-weight: 700; font-stretch: var(--stretch-display); color: var(--color-accent); }
.art.is-drawn .art__fallback { visibility: hidden; }
.tile--plan { grid-column: span 4; grid-row: span 2; background: var(--color-accent-wash); justify-content: flex-start; }
.tile--plan h3 { margin-bottom: var(--space-lg); }
.tile--plan > p:last-child { margin-top: auto; padding-top: var(--space-xl); }
.tile--next { grid-column: span 4; }
.tile--library { grid-column: span 4; }
.tile--recovery { grid-column: span 7; }
.tile--max { grid-column: span 5; }
.out { margin: 0; display: grid; grid-template-columns: minmax(0, 1fr) auto; border-top: var(--rule-hair) solid var(--color-rule-2); }
.out dt, .out dd { margin: 0; padding-block: var(--space-sm); border-bottom: var(--rule-hair) solid var(--color-rule); }
.out dt { color: var(--color-ink); }
.out dd { color: var(--color-ink-2); text-align: right; }
.out .out__hot { color: var(--color-accent); }
.tile .out__note, .tile .tile__unit { font-size: var(--text-sm); color: var(--color-muted); }
.tile .out__calc { color: var(--color-ink-2); font-size: var(--text-lg); }
.figure--s { font-size: var(--text-2xl); white-space: nowrap; }
.flags { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--space-xs); }
.flags li { padding: var(--space-2xs) var(--space-sm); border: var(--rule-hair) solid var(--color-rule-2); font-size: var(--text-sm); color: var(--color-accent); }
.figure { font-weight: 400; font-stretch: var(--stretch-display); font-size: var(--text-display-s); line-height: 1; color: var(--color-ink); }
.tile .figure { color: var(--color-ink); }

/* change: a diff */
.change { padding-block: var(--space-2xl) var(--section-gap-s); }
.diff { margin-top: var(--space-2xl); background: var(--color-paper-2); border: var(--rule-hair) solid var(--color-rule); }
.diff__head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--gap-columns); padding: var(--space-md) var(--space-xl); border-bottom: var(--rule-hair) solid var(--color-rule-2); font-size: var(--text-sm); color: var(--color-muted); }
.diff__body { list-style: none; margin: 0; padding: var(--space-md) 0; }
.diff__body li { display: grid; grid-template-columns: 3.5rem 2rem minmax(0, 1fr); align-items: baseline; padding: var(--space-xs) var(--space-xl) var(--space-xs) 0; font-size: var(--text-xl); font-stretch: var(--stretch-display); line-height: 1.5; }
.diff__body .ln { text-align: right; padding-right: var(--space-md); font-size: var(--text-xs); color: var(--color-rule-2); }
.diff__body .hunk { font-size: var(--text-sm); color: var(--color-muted); }
.diff__body .del { color: var(--color-muted); }
.diff__body .add { background: var(--color-accent-wash); color: var(--color-ink); }
.diff__body .add .sg { color: var(--color-accent); }

/* needs: a reference as rows */
.needs { padding-block: var(--section-gap-s) var(--section-gap-l); background: var(--color-paper-2); }
.needs__grid { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: var(--gap-columns); align-items: start; }
.rows { margin: 0; border-top: var(--rule-hair) solid var(--color-rule-2); }
.row { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--gap-columns); align-items: baseline; padding-block: var(--space-xl); border-bottom: var(--rule-hair) solid var(--color-rule); }
.row dt { font-size: var(--text-title); font-weight: 500; font-stretch: var(--stretch-display); color: var(--color-accent); }
.row dd { margin: 0; color: var(--color-ink-2); }

/* close: the band */
.close { padding-block: var(--section-gap); border-bottom: var(--rule-hair) solid var(--color-rule); }
.close__grid { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); gap: var(--space-xl) var(--gap-columns); align-items: center; }
.counter--close { margin-top: 0; }
.close__ig { grid-column: 1 / -1; color: var(--color-ink-2); }

/* footer: a colophon block */
.foot { padding-block: var(--space-3xl); }
.foot__row { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 3fr) minmax(0, 3fr); gap: var(--gap-columns); align-items: baseline; font-size: var(--text-sm); color: var(--color-muted); }
.foot__links { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-xs); }
.foot__legal { justify-self: end; }

/* the glyph print resolves once into the photograph; under reduced motion the photograph shows at once */
@media (prefers-reduced-motion: reduce) { .btn, a, .art__still, .art canvas { transition: none; } .btn:active { transform: none; } }

@media (max-width: 60rem) {
  .hero { min-height: 0; padding-block: var(--space-2xl); }
  .hero__grid, .needs__grid, .close__grid { grid-template-columns: minmax(0, 1fr); row-gap: var(--space-xl); }
  .art--hero { justify-self: center; width: min(100%, 480px); }
  .bento { grid-template-columns: repeat(6, minmax(0, 1fr)); grid-auto-rows: minmax(220px, auto); }
  .tile--print, .tile--plan, .tile--recovery { grid-column: span 6; grid-row: auto; }
  .tile--next, .tile--library, .tile--max { grid-column: span 3; }
  .tile--max { grid-column: span 6; }
  .foot__row { grid-template-columns: minmax(0, 1fr); }
  .foot__legal { justify-self: start; }
}
@media (max-width: 40rem) {
  .counter { padding: var(--space-lg); }
  .counter__addr { font-size: 1.0625rem; }
  .bento { grid-template-columns: minmax(0, 1fr); }
  .tile, .tile--print, .tile--plan, .tile--next, .tile--max, .tile--recovery, .tile--library { grid-column: auto; }
  .art--wordmark { margin: var(--space-lg) var(--space-md) var(--space-md); }
  .tile--print figcaption { padding: var(--space-md) var(--space-lg); }
  .tile { padding: var(--space-lg); }
  .diff__head { grid-template-columns: minmax(0, 1fr); gap: var(--space-2xs); padding-inline: var(--space-md); }
  .diff__body li { grid-template-columns: 2.25rem 1.5rem minmax(0, 1fr); font-size: var(--text-md); padding-right: var(--space-md); }
  .row { grid-template-columns: minmax(0, 1fr); gap: var(--space-xs); padding-block: var(--space-lg); }
}