/* Page layout for the Iteration B static build.
   Replaces the design canvas's inline styles with classes, so the site runs under style-src 'self'.
   Load order: fonts.css, clear-sky-components.css, site.css, iteration-b.css, pages.css.
   Breakpoints follow Clear Sky: 720px (gutters, navigation), 800px (featured card, About), 900px (grids),
   and 1200px in iteration-b.css (artwork band or strip). */

/* ---------- Page frame ---------- */
body { min-height: 100vh; display: flex; flex-direction: column; }
.page-main { flex: 1 0 auto; display: flex; flex-direction: column; padding-bottom: var(--space-12); }
@media (min-width: 720px) { .page-main { padding-bottom: var(--space-16); } }

.page-content { width: 100%; display: flex; flex-direction: column; gap: var(--space-12); }
@media (min-width: 720px) { .page-content { gap: var(--space-16); } }
.page-content--top { padding-top: var(--space-12); }
@media (min-width: 720px) { .page-content--top { padding-top: var(--space-16); } }
.art-band + .page-content { margin-top: var(--space-12); }

.page-h1 { margin: 0; font-size: 28px; line-height: 1.25; }
.section-h { margin: 0; font-size: 22px; line-height: 1.3; }
.card-h { margin: 0; font-size: 20px; line-height: 1.3; }
.section { display: flex; flex-direction: column; gap: var(--space-4); }
.measure { max-width: var(--measure); }
.prose { display: flex; flex-direction: column; gap: 17px; max-width: var(--measure); }
.prose p, .section p { margin: 0; }
.caption { margin: 0; font-size: 14px; line-height: 1.5; color: var(--text-secondary); }
.lead { margin: 0; font-size: 19px; line-height: 1.5; text-wrap: pretty; }
@media (min-width: 720px) { .lead { font-size: 21px; } }

/* ---------- Home: hero ---------- */
.hero { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-3); }
.hero__name { margin: 0; font-size: 32px; line-height: 1.2; letter-spacing: -0.01em; color: var(--primary); }
.hero__position { margin: 0; font-weight: 600; }
.hero__value { margin: 4px 0 0; }
.hero__support { margin: 0; color: var(--text-secondary); text-wrap: pretty; }
.hero__actions { margin-top: var(--space-3); }
.hero__chips { margin-top: var(--space-3); }
@media (min-width: 720px) {
  .hero__name { font-size: 40px; line-height: 1.15; }
  .hero__value { margin-top: var(--space-2); }
  .hero__actions { margin-top: var(--space-5); }
}

/* ---------- Home: featured tool card ---------- */
.featured {
  display: grid; gap: var(--space-5); padding: var(--space-5);
  grid-template-areas: "body" "shot" "actions";
}
.featured__body { grid-area: body; display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-3); }
.featured__title { margin: 0; font-size: 22px; line-height: 1.3; }
.featured__link { color: var(--text); text-decoration: none; }
.featured__link:hover { text-decoration: underline; text-decoration-thickness: 1px; }
.featured__desc { margin: 0; text-wrap: pretty; }
.featured__actions { grid-area: actions; display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-4); }
.featured__actions .cs-btn { width: 100%; }
.featured__shot { grid-area: shot; margin: 0; }
.featured__shot img { display: block; width: 100%; height: auto; border: 1px solid var(--line); border-radius: var(--radius-md); }
@media (min-width: 800px) {
  .featured {
    padding: var(--space-8); column-gap: var(--space-8); row-gap: var(--space-3); align-items: center;
    grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
    grid-template-areas: "body shot" "actions shot";
  }
  .featured__body { align-self: end; }
  .featured__actions { align-self: start; padding-top: var(--space-2); }
  .featured__actions .cs-btn { width: auto; }
}

/* ---------- Home: results and closing ---------- */
.cs-results { gap: var(--space-4); }
.cs-results > .cs-result { padding: var(--space-5); gap: var(--space-2); }
@media (min-width: 900px) {
  .cs-results { gap: var(--space-6); }
  .cs-results > .cs-result { padding: var(--space-6); gap: var(--space-3); }
}
.closing { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-5); padding-top: var(--space-8); border-top: 1px solid var(--line); }
.closing__text { margin: 0; max-width: 34em; }

/* ---------- Tools page ---------- */
.tools-stack { display: flex; flex-direction: column; gap: var(--space-6); }
@media (min-width: 720px) { .tools-stack { gap: var(--space-8); } }
.cs-tool-grid { list-style: none; margin: 0; padding: 0; gap: var(--space-4); }
@media (min-width: 720px) { .cs-tool-grid { gap: var(--space-6); } }
@media (min-width: 900px) { .cs-tool-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.cs-tool-grid > .cs-card { padding: var(--space-5); }
@media (min-width: 720px) { .cs-tool-grid > .cs-card { padding: var(--space-6); } }
.cs-tool-card__title a { color: var(--text); text-decoration: none; }
.cs-tool-card__title a:hover { text-decoration: underline; text-decoration-thickness: 1px; }
.cs-tool-card--planned .cs-tool-card__desc { color: var(--text-secondary); }

/* ---------- Tool page ---------- */
.toolhead { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-3); }
.toolhead__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-4); margin-top: var(--space-1); width: 100%; }
.toolhead__actions .cs-btn { width: 100%; }
@media (min-width: 720px) {
  .toolhead__actions { margin-top: var(--space-2); width: auto; }
  .toolhead__actions .cs-btn { width: auto; }
}
.cs-poc-notice p { max-width: 80ch; }

.gallery { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-6); }
.shot { margin: 0; display: flex; flex-direction: column; gap: var(--space-2); }
.shot figcaption { font-size: 14px; line-height: 1.5; color: var(--text-secondary); }
.shot img { height: auto; }
.shot--crop img { aspect-ratio: 4 / 3; object-fit: cover; object-position: left top; }
.shot--phone img { aspect-ratio: 3 / 4; object-fit: cover; object-position: top; }
@media (min-width: 900px) {
  .gallery { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .shot--wide { grid-column: span 2; }
  .shot--crop-wide img { aspect-ratio: 4 / 3; object-fit: cover; object-position: left top; }
  /* The phone screenshot fills the height of the register view beside it. */
  .shot--phone .site-shot { position: relative; flex: 1 1 0; min-height: 0; }
  .shot--phone img { position: absolute; inset: 0; width: 100%; height: 100%; aspect-ratio: auto; box-sizing: border-box; }
}

.privacy-note { display: flex; flex-direction: column; gap: var(--space-3); padding: var(--space-5); }
@media (min-width: 720px) { .privacy-note { max-width: 760px; padding: var(--space-6); } }
.closing-action { display: flex; }
.closing-action .cs-btn { width: 100%; }
@media (min-width: 720px) { .closing-action .cs-btn { width: auto; } }

/* ---------- About ---------- */
.page-head { display: flex; flex-direction: column; gap: var(--space-2); }
.page-head__sub { margin: 0; color: var(--text-secondary); }
.cs-about { gap: var(--space-6); }
.about-portrait { max-width: 240px; }
@media (min-width: 800px) {
  .cs-about { gap: var(--space-12); }
  .about-portrait { max-width: none; }
}
.about-main { display: flex; flex-direction: column; gap: var(--space-12); }
@media (min-width: 800px) { .about-main { gap: var(--space-16); } }
.creds { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-4); max-width: var(--measure); }
.creds li { display: flex; flex-direction: column; gap: var(--space-1); padding-bottom: var(--space-4); border-bottom: 1px solid var(--line); }
.creds li:last-child { padding-bottom: 0; border-bottom: 0; }
.creds__name { font-weight: 600; }
.creds__link { font-size: 14px; line-height: 1.5; }

/* ---------- Resume ---------- */
.resume-head { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-4); }
.download { display: flex; flex-direction: column; align-items: stretch; gap: var(--space-2); width: 100%; margin-top: var(--space-2); }
@media (min-width: 720px) { .download { flex-direction: row; flex-wrap: wrap; align-items: center; gap: var(--space-4); width: auto; } }
.download__note { font-size: 14px; line-height: 1.5; }
.experience { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; max-width: 760px; }
.experience li {
  display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-1);
  grid-template-areas: "employer" "role" "dates";
  padding: var(--space-5) 0; border-top: 1px solid var(--line);
}
.experience li:last-child { border-bottom: 1px solid var(--line); }
.experience__employer { grid-area: employer; margin: 0; font-size: 20px; line-height: 1.3; }
.experience__role { grid-area: role; margin: 0; font-weight: 600; }
.experience__dates { grid-area: dates; margin: 0; color: var(--text-secondary); font-size: 16px; font-variant-numeric: tabular-nums; }
@media (min-width: 720px) {
  .experience li { grid-template-columns: minmax(0, 1fr) auto; column-gap: var(--space-8); grid-template-areas: "employer dates" "role ."; }
  .experience__dates { text-align: right; }
}

/* ---------- Contact ---------- */
.contact-list { margin: 0; display: flex; flex-direction: column; max-width: 760px; border-top: 1px solid var(--line); }
.contact-list__row { display: flex; flex-direction: column; gap: var(--space-1); padding: var(--space-4) 0; border-bottom: 1px solid var(--line); }
.contact-list dt { font-size: 14px; line-height: 1.5; font-weight: 700; color: var(--text-secondary); }
.contact-list dd { margin: 0; font-size: 18px; line-height: 1.5; overflow-wrap: anywhere; }
.selectable { user-select: all; }
@media (min-width: 720px) {
  .contact-list__row { display: grid; grid-template-columns: 120px minmax(0, 1fr); column-gap: var(--space-8); align-items: center; }
  .contact-list dd { font-size: 20px; }
}