/* Home page: header, cost rose with its caption line, statement, signature row (the viewport-high body column is site.css's). */
main.col {
  flex: 1; width: 100%; max-width: var(--column); margin: 0 auto;
  padding: var(--sp-4) var(--sp-5) var(--sp-7);
  display: flex; flex-direction: column; justify-content: center; gap: var(--sp-3);
}

/* the figure column: the rose above its one-line caption. It takes the height the statement
   leaves, and the rose inside it takes the height the caption leaves. */
#figcol { flex: 1 1 0; min-height: 0; display: flex; flex-direction: column; }
/* the figure is wider than the column: the fan's petal span (240 of its 430
   viewBox units) meets the text column edges when the width cap binds */
#figwrap {
  position: relative;
  flex: 1 1 0; min-height: 180px; max-height: 530px;
  width: min(calc(100vw - 40px), 1430px);
  margin-left: 50%; transform: translateX(-50%);
  display: flex; justify-content: center; overflow: hidden;
}
/* the rose fills the figure box. Positioned, not height: 100%: the box's height comes from flexing,
   which Chrome counts as definite and Safari does not, so in Safari a percentage height fell to 0 and
   the rose vanished at tablet widths, 641-1199px (found by tests/test_home_rose.py, 2026-09-30) */
#fig { position: absolute; inset: 0; display: flex; justify-content: center; }
#fig svg { height: 100%; width: auto; max-width: 100%; display: block; overflow: visible; }

/* the caption: a mono microlabel, like the key inside the drawing, centred under it; the link to
   the post it comes from is the accent, and holds together on one line */
.rose-caption {
  flex: none; margin: var(--sp-3) 0 0; text-align: center; text-wrap: balance;
  font-family: var(--font-mono); font-size: 11px; font-weight: 600;
  letter-spacing: 0.1em; text-transform: uppercase; line-height: 1.7; color: var(--ink);
}
.rose-caption a { color: var(--accent); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.3em; white-space: nowrap; }
.rose-caption a:hover { color: var(--accent-press); }

/* the slabs (partials/oss-hero.html): the drawing across the figure column, its inks from the OSS Verify page */
.home { --ink-fuzz: #C9550C; --ink-proof: var(--brand); }
#figcol:has(.slabs-wrap) { flex: none; min-height: auto; }
#figwrap.slabs-wrap { flex: none; display: block; width: 100%; max-width: 760px; margin: 0 auto; transform: none; min-height: 0; max-height: none; overflow: visible; }
.slabs-wrap .osv-hero__fig { display: block; width: 100%; height: auto; }
@media (prefers-reduced-motion: reduce) { .slabs-wrap .osv-hero__fig * { animation: none !important; } }

.blurb { flex-shrink: 0; padding-top: var(--sp-3); }
/* the statement is left-aligned in a centred block, so the heading and the paragraph share a left edge (2026-10-22) */
.home--slabs .blurb { width: 100%; max-width: 60ch; margin: 0 auto; font-size: 17px; }
.home--slabs .blurb { padding: var(--sp-8) 0 var(--sp-4); }
.blurb h1 { font-size: 2.75rem; line-height: 1.1; text-wrap: balance; }   /* 44px, up from 37 (2026-10-22) */
.blurb h1 .nowrap { white-space: nowrap; }
.blurb p { margin: 0 0 var(--sp-3); max-width: 60ch; font-size: 17px; line-height: 1.55; }
   /* up from 13.5px: the statement reads as text, not a caption */
.blurb p a { white-space: nowrap; }


/* under the figure: the newest posts, on the statement's left edge */
.home-more {
  width: 100%; max-width: 60ch; margin: var(--sp-8) auto 0; font-size: 17px;
}
.home-more__col { min-width: 0; border-top: 2px solid var(--ink); padding-top: var(--sp-3); }
.home-more__label { margin: 0 0 var(--sp-3); font-family: var(--font-mono); font-size: 11px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink); }
.home-more ul { list-style: none; margin: 0; padding: 0; }
.home-more li { border-bottom: 1px solid color-mix(in srgb, var(--ink) 15%, transparent); }
.home-more li a { display: block; padding: var(--sp-2) 0; color: var(--ink); text-decoration: none; font-size: 15px; line-height: 1.35; }
.home-more li a:hover { color: var(--accent); }
.home-more__date { display: block; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; color: color-mix(in srgb, var(--ink) 60%, transparent); }
.home-more__all { display: inline-block; margin-top: var(--sp-3); font-family: var(--font-mono); font-size: 11px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--accent); text-decoration: none; }
.home-more__all:hover { color: var(--accent-press); }
@media (max-width: 640px) { .home-more { margin-top: var(--sp-6); } }

/* desktop: the text column beside the fan rose; the extra page width all goes
   to the figure. Below 1200px the stacked fan layout holds — a fixed text
   column would starve the half rose, which needs twice a circle's width. */
@media (min-width: 1200px) {
  .home--rose main.col, .home--atlas main.col {
    max-width: 1430px;
    display: grid; grid-template-columns: 480px 1fr;
    grid-template-rows: 1fr; align-items: center; column-gap: var(--sp-11);
  }
  .home--rose .blurb, .home--atlas .blurb { grid-column: 1; grid-row: 1; padding-top: 0; }
  .home--rose #figcol, .home--atlas #figcol { grid-column: 2; grid-row: 1; flex: none; display: block; }
  #figwrap {
    flex: none;
    width: 100%; margin-left: 0; transform: none;
    max-height: none; min-height: 0; display: block;
  }
  #fig { position: static; display: block; height: auto; width: 100%; }
  #figwrap.slabs-wrap { max-width: none; }
  /* as large as the column allows, but never taller than the viewport leaves for it and the caption */
  #fig svg { width: 100%; height: auto; max-height: calc(100vh - 260px); max-height: calc(100dvh - 260px); margin: 0 auto; }
}

/* phones: the rose is a full circle across the column, inside the page's 16px gutters (its
   canvas hugs the drawing, so the rim labels stay inside them too), the caption under it */
@media (max-width: 640px) {
  body { overflow-x: hidden; }
  main.col { justify-content: flex-start; padding: var(--sp-3) var(--sp-4); gap: var(--sp-4); }
  #figcol { flex: none; display: block; }
  #figwrap { flex: none; min-height: 0; max-height: none; display: block; width: 100%; margin-left: 0; transform: none; }
  #fig { position: static; display: block; height: auto; width: 100%; }
  #fig svg { display: block; width: 100%; height: auto; }
  .rose-caption { margin-top: var(--sp-4); text-wrap: pretty; }
  .blurb h1 { font-size: 2.4rem; }   /* 38px, up from 32 */
}

/* the atlas variant of the home figure (index.html, site.Params.homeFigure = "atlas"): the carpet
   canvas, the hover card, the clock with its play button, and the key that appears when a
   package is held */
.atlas-home { position: relative; width: 100%; max-width: 620px; margin: var(--sp-6) auto 0; }   /* room under the header */
.atlas-home canvas { display: block; cursor: crosshair; }
.atlas-home .tip {
  position: absolute; pointer-events: none; z-index: 5; background: var(--paper); border: 2px solid var(--ink);
  padding: var(--sp-2) var(--sp-3); font-family: var(--font-mono); font-size: 11px; line-height: 1.6; color: var(--ink); max-width: 240px; overflow-wrap: anywhere;
}
.atlas-clock { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: var(--sp-3); align-items: start; margin-top: var(--sp-5); padding-right: var(--sp-8); }   /* the axis ends short of the right edge so the last notch label has room */
.atlas-clock .play { width: 28px; height: 28px; margin-top: 18px; padding: 0; border: 0; background: transparent; cursor: pointer; display: grid; place-items: center; }   /* spacing-exempt: centred on the track, which sits under the elapsed-time label */
.atlas-clock .play:hover .play__icon { border-left-color: var(--brand); }
.atlas-clock .play__icon { width: 0; height: 0; border-style: solid; border-width: 6px 0 6px 10px; border-color: transparent transparent transparent var(--ink); margin-left: 3px; }   /* spacing-exempt: the triangle */
.atlas-clock .play.is-playing .play__icon { width: 10px; height: 12px; border: 0; margin: 0; background: linear-gradient(to right, var(--ink) 0 4px, transparent 4px 6px, var(--ink) 6px 10px); }   /* two 4px bars, a 2px gap */
.atlas-clock__slider { display: block; }
.atlas-clock__label { display: block; font-family: var(--font-mono); font-size: 11px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink); }
.atlas-clock__label output { color: var(--brand); margin-left: var(--sp-2); text-transform: none; letter-spacing: 0; }
.atlas-clock input[type=range] { -webkit-appearance: none; appearance: none; width: 100%; height: 28px; margin: 0; background: transparent; }
.atlas-clock input[type=range]::-webkit-slider-runnable-track { height: 3px; background: var(--ink); }
.atlas-clock input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 16px; height: 16px; margin-top: -6.5px; background: var(--ink); border: 0; border-radius: 0; }
.atlas-clock input[type=range]::-moz-range-track { height: 3px; background: var(--ink); }
.atlas-clock input[type=range]::-moz-range-thumb { width: 16px; height: 16px; background: var(--ink); border: 0; border-radius: 0; }
.atlas-clock .clock-scale { position: relative; display: block; height: 20px; margin-top: -12px; font: 10px/1 var(--font-mono); color: var(--ink); }   /* spacing-exempt: the ticks hang from the track */
.atlas-clock .clock-scale span { position: absolute; top: 0; transform: translateX(-50%); padding-top: 9px; white-space: nowrap; }   /* spacing-exempt: the label hangs just under its 6px tick */
.atlas-clock .clock-scale span:last-child { transform: translateX(-100%); }
.atlas-clock .clock-scale span:last-child::before { left: auto; right: 0; }
.atlas-clock .clock-scale span::before { content: ''; position: absolute; top: 0; left: 50%; width: 1px; height: 6px; background: var(--ink); }
.atlas-key { margin: var(--sp-3) 0 0; font-family: var(--font-mono); font-size: 11px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink); }
.atlas-key__swatch { display: inline-block; width: 10px; height: 10px; background: var(--brand); margin: 0 var(--sp-2) 0 var(--sp-4); vertical-align: -1px; }
.atlas-key__swatch--held { background: var(--accent); margin-left: 0; }
@media (min-width: 1200px) { .atlas-home { max-width: min(620px, calc(100vh - 300px), calc(100dvh - 300px)); } }
@media (max-width: 640px) {
  .atlas-clock .clock-scale span:nth-child(4) { color: transparent; }   /* the 1-year tick keeps its mark; its label would run into "end of 2027" on a phone's track */
  .home .brand-row { padding-top: var(--sp-7); }   /* the signature row sits closer under the statement */
  .atlas-home .tip { position: static; margin-top: var(--sp-3); max-width: none; }   /* on a phone the card sits under the carpet, so the held tile and its dependencies stay in view */
}