/* The homepage: the opening (the line, and the call in a real business), which plays once as the page arrives; then its
   numbered sections: what we make (the product family as a ruled plate grid), what you can hold us to (the page's one
   night band), the founder (once there's a note from them) and the way to get in touch, close to the opening's scale.
   The logos, the proof and the news, which come and go with their files, are 55_proof.css's. */

/* ---------- The opening ---------- */
.hero { padding-top: clamp(28px, 3.9vw, 56px); }

/* What's live, as one quiet line above the headline: the status in mono, a short hairline, the news, and an arrow that
   moves on when it's pointed at. A link, never a pill. On a phone the news goes under the status. */
.hero__news { margin-bottom: clamp(28px, 3.3vw, 48px); }
.hero__news-link {
  display: inline-flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; max-width: 100%;
  font-size: var(--text-small); line-height: 1.4; color: var(--ink-soft); text-decoration: none;
}
.hero__news-link .status::after { content: ""; width: 1px; height: 14px; margin-left: 7px; background: var(--line-strong); }
.hero__news-name { color: var(--ink); font-weight: 600; }
/* The arrow keeps to the words before it, so it never starts a line alone */
.hero__news-go { white-space: nowrap; text-decoration: underline 1px transparent; text-underline-offset: 4px; transition: text-decoration-color var(--dur-fast); }
.hero__news-go .icon { width: 15px; height: 15px; margin-left: 7px; vertical-align: -0.2em; transition: translate var(--dur-ui) var(--ease-out); }
.hero__news-link:hover .hero__news-go { text-decoration-color: currentColor; }
.hero__news-link:hover .icon { translate: 3px 0; }
@media (max-width: 47.99em) { .hero__news-link .status::after { display: none; } }

/* The lead on the left half; the way in on the right, ending at the row's end, both on the row's last line */
.hero__row {
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--space-6) var(--col-gap); align-items: end;
  margin-top: clamp(24px, 2.8vw, 40px);
}
.hero__lead { grid-column: 1 / span 6; max-width: 31em; }
.hero__way { grid-column: 7 / -1; display: grid; gap: var(--space-4); justify-items: end; text-align: right; }
.hero__way .actions { justify-content: flex-end; }
.hero__note a { color: var(--ink); font-weight: 600; text-decoration: none; white-space: nowrap; }
.hero__note a:hover { text-decoration: underline; text-decoration-color: var(--amber); text-decoration-thickness: 2px; text-underline-offset: 3px; }
@media (max-width: 63.99em) {
  .hero__lead, .hero__way { grid-column: 1 / -1; }
  .hero__way { justify-items: start; text-align: left; }
  .hero__way .actions { justify-content: flex-start; }
}
/* On a phone the two buttons take the width, one above the other */
@media (max-width: 47.99em) { .hero__way { justify-items: stretch; } .hero__way .btn { flex: 1 1 auto; } }

/* The scene: the café, with the call in its top-left corner, an even margin from the frame's two edges. While the
   photograph is still to come, the card stands centred in the quiet frame's width instead, as the plates' cards do. */
.hero__scene { margin-top: clamp(40px, 4.8vw, 72px); }
.hero__scene .scene__photo { --scene-ratio: 2 / 1; --scene-ratio-sm: 1 / 1; --focus-y: 30%; }
.hero__card { --card-w: 384px; --card-x: clamp(24px, 4.4vw, 64px); --card-y: clamp(24px, 4.4vw, 64px); }
@media (min-width: 48em) {
  .hero__scene:has(.photo__holder) .hero__card { --card-w: 420px; left: 50%; right: auto; translate: -50% 0; }
}
/* On a phone the card sits under the photograph and comes into view as the page scrolls, so it arrives at once */
@media (max-width: 47.99em) {
  .hero__scene .scene__photo { --focus-x: 84%; --focus-y: 50%; }
  .hero__card { --delay: 0ms; }
}

/* ---------- What we make: the product family as a ruled plate grid ---------- */
/* Between the rails, cells divided by hairlines and nothing else: each plate draws its top and left lines, the grid its
   last one, and the rails stand for its outer edges. A plate's padding is the rails' inset, so its words keep to the
   page's content edge and 12 columns. On a phone there are no rails, so the plates stack in the column, ruled apart. */
.lineup {
  --plate-x: 0px; --plate-top: 28px;
  list-style: none; display: grid; grid-template-columns: minmax(0, 1fr);
  border-bottom: 1px solid var(--line);
}
.lineup__item {
  position: relative; min-width: 0; display: flex; flex-direction: column;
  padding: var(--plate-top) var(--plate-x) 0;
  border-top: 1px solid var(--line);
}

/* Where it stands, with the ↗ in the corner that says the whole plate is a link */
.lineup__top { display: flex; align-items: center; min-height: 18px; padding-right: 40px; margin-bottom: clamp(28px, 3.4vw, 48px); }
.lineup__corner {
  position: absolute; top: var(--plate-top); right: var(--plate-x); width: 18px; height: 18px; color: var(--ink-mute);
  transition: translate var(--dur-ui) var(--ease-out), color var(--dur-fast);
}

/* Its name, job, buttons and what trying it is like. The name's link covers the whole plate, under the buttons. */
.lineup__words { display: grid; gap: var(--space-4); justify-items: start; align-content: start; padding-bottom: clamp(36px, 3.6vw, 52px); }
.lineup__name a { text-decoration: none; }
.lineup__name a::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.lineup__line { max-width: 30em; color: var(--ink-soft); }
.lineup__actions { position: relative; z-index: 2; margin-top: var(--space-2); }
.lineup__try { max-width: 30em; color: var(--ink-mute); }

/* The mat: a tinted panel lit from its top edge (a wash of white falling from it, and a brighter line along it, as the
   product pages' stage is lit), ringed by a hairline, with the product's card standing on it. Every card's top keeps
   the same line, and its white runs on below the plate's bottom edge, but it fades into the mat before the edge, so no
   line of it reads as cut through. There the card plays its story (demo_controller.js, 25_products.css). */
.lineup__art {
  --screen-top: 24%; --screen-left: 5%; --screen-right: 5%; --screen-w: auto; --screen-shift: 0px;
  position: relative; overflow: clip; isolation: isolate; margin-top: auto;
  aspect-ratio: var(--art-ratio, 7 / 6);
  border: 1px solid var(--line); border-bottom: 0; border-radius: var(--radius-md) var(--radius-md) 0 0;
  background:
    radial-gradient(ellipse 84% 66% at 50% 0%, color-mix(in srgb, var(--c-white) 64%, transparent), transparent 74%),
    var(--c-panel);
}
.lineup__art::before {
  content: ""; position: absolute; top: 0; left: 12%; right: 12%; height: 1px; pointer-events: none;
  background: linear-gradient(90deg, transparent, var(--c-white), transparent);
}
/* The fade: the card dissolves into the mat's own tint towards the plate's edge, its shadow with it */
.lineup__art::after {
  content: ""; position: absolute; z-index: 3; left: 0; right: 0; bottom: 0; height: clamp(72px, 7vw, 112px); pointer-events: none;
  background: linear-gradient(to bottom, transparent, var(--c-panel) 92%);
}
.lineup__screen {
  position: absolute; z-index: 2; top: var(--screen-top); bottom: calc(-1 * var(--space-7));
  left: var(--screen-left); right: var(--screen-right); width: var(--screen-w);
  translate: var(--screen-shift) 0; transition: translate 0.7s var(--ease-out);
}
.lineup__screen > .ui-card { min-height: 100%; }
/* A checklist's rule, under the card's head (demo_controller.js puts it there): it fills in ink along the head's
   hairline as the rows ink in */
.lineup__progress { position: relative; z-index: 1; display: block; height: 1px; margin-top: -1px; }
.lineup__progress::after {
  content: ""; position: absolute; inset: 0; background: color-mix(in srgb, var(--ink) 72%, transparent);
  transform-origin: left center; scale: var(--demo-progress, 1) 1; transition: scale 0.9s var(--ease-out);
}

/* Pointed at (or its name focused): the card rises a little and the ↗ moves on */
@media (hover: hover) {
  .lineup__item:hover .lineup__screen { translate: var(--screen-shift) -6px; }
  .lineup__item:hover .lineup__corner { translate: 3px -3px; color: var(--ink); }
}
@supports selector(:has(a)) {
  .lineup__name a:focus-visible { outline: none; }
  .lineup__item:has(.lineup__name a:focus-visible) { outline: 2px solid var(--ink); outline-offset: -3px; }
  .lineup__item:has(.lineup__name a:focus-visible) .lineup__corner { translate: 3px -3px; color: var(--ink); }
}

/* On a phone a plate's buttons take the width, as the opening's do; the featured plate's mat stands taller, so its
   whole story shows above the cut */
@media (max-width: 47.99em) {
  .lineup__actions .btn { flex: 1 1 auto; }
  .lineup__item--wide .lineup__art { --art-ratio: 3 / 4; --screen-top: 12%; }
}

@media (min-width: 48em) {
  /* Beside the featured plate, a plate's buttons run a size smaller (as .btn--sm), so a pair keeps to one line */
  .lineup__item:not(.lineup__item--wide) .btn { --btn-h: 38px; padding: 0 16px; font-size: 14.5px; gap: 8px; }
  .lineup__item:not(.lineup__item--wide) .btn .icon { width: 15px; height: 15px; }

  .lineup {
    --plate-x: var(--frame-inset); --plate-top: clamp(24px, 2.6vw, 36px);
    grid-template-columns: repeat(6, minmax(0, 1fr)); margin-inline: calc(-1 * var(--frame-inset));
  }
  /* Each plate lays its words beside its panel, across the page's 12 columns, the words on the panel's last line */
  .lineup__item {
    grid-column: 1 / -1;
    display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); grid-template-rows: auto minmax(0, 1fr); column-gap: var(--col-gap);
    border-left: 1px solid var(--line);
  }
  .lineup__top { grid-column: 1 / -1; }
  .lineup__words { grid-column: 1 / span 6; grid-row: 2; align-self: end; padding-bottom: var(--plate-top); }
  .lineup__line { font-size: var(--text-lead); line-height: 1.5; }
  /* The card stands in the middle of its mat, taking most of a half-width mat; the featured plate's mat stands taller,
     so its whole story shows */
  .lineup__art {
    grid-column: 7 / -1; grid-row: 2; align-self: end; margin-top: 0;
    --art-ratio: 5 / 4; --screen-top: 18%; --screen-left: 50%; --screen-right: auto; --screen-w: 86%; --screen-shift: -50%;
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  }
  .lineup__item--wide .lineup__art { --art-ratio: 3 / 4; --screen-top: 9%; }
}
@media (min-width: 64em) {
  .lineup__words { grid-column: 1 / span 5; }
  .lineup__art { grid-column: 6 / -1; --art-ratio: 16 / 10; --screen-top: 20%; --screen-w: 62%; }
  .lineup__item--wide .lineup__art { --art-ratio: 4 / 3; --screen-top: 11%; --screen-w: 76%; }
}

/* Wide screens: the featured plate's words keep to the first third, over the first plate below it, and its panel spans
   the other two, while the rest sit three abreast, their words over their panels, which line up along the row's foot.
   A last row of two shares the width, and a last row of one makes the last two rows two and two. */
@media (min-width: 75em) {
  .lineup__item--wide {
    grid-template-columns: minmax(0, calc((100% + 2 * var(--plate-x)) / 3 - 2 * var(--plate-x))) minmax(0, 1fr);
    column-gap: calc(2 * var(--plate-x));
  }
  .lineup__item--wide .lineup__words { grid-column: 1; }
  .lineup__item--wide .lineup__art { grid-column: 2; --art-ratio: 2 / 1; --screen-top: 14%; --screen-w: 50%; }

  .lineup__item:not(.lineup__item--wide) { grid-column: span 2; display: flex; flex-direction: column; }
  .lineup__item:not(.lineup__item--wide) .lineup__words { align-self: auto; padding-bottom: clamp(36px, 3.6vw, 52px); }
  .lineup__item:not(.lineup__item--wide) .lineup__line { font-size: var(--text-body); line-height: var(--leading-text); }
  .lineup__item:not(.lineup__item--wide) .lineup__art {
    align-self: auto; margin-top: auto;
    --art-ratio: 7 / 6; --screen-top: 24%; --screen-left: 7%; --screen-right: 7%; --screen-w: auto; --screen-shift: 0px;
  }

  .lineup__item:nth-last-child(1 of :not(.lineup__item--wide)):nth-child(3n + 2 of :not(.lineup__item--wide)),
  .lineup__item:nth-last-child(2 of :not(.lineup__item--wide)):nth-child(3n + 1 of :not(.lineup__item--wide)),
  .lineup__item:nth-last-child(4 of :not(.lineup__item--wide)):nth-child(3n + 1 of :not(.lineup__item--wide)),
  .lineup__item:nth-last-child(3 of :not(.lineup__item--wide)):nth-child(3n + 2 of :not(.lineup__item--wide)),
  .lineup__item:nth-last-child(2 of :not(.lineup__item--wide)):nth-child(3n + 3 of :not(.lineup__item--wide)),
  .lineup__item:nth-last-child(1 of :not(.lineup__item--wide)):nth-child(3n + 4 of :not(.lineup__item--wide)) { grid-column: span 3; }

  /* The grid's one crosshair, where the featured plate's foot meets the first line between the plates below it (drawn as
     .cross is, 10_base.css) */
  .lineup__item--wide + .lineup__item:not(.lineup__item--wide)::before {
    content: ""; position: absolute; top: -6px; right: -6px; z-index: 3; width: 11px; height: 11px; pointer-events: none;
    background:
      linear-gradient(var(--ink-mute), var(--ink-mute)) center / 11px 1px no-repeat,
      linear-gradient(var(--ink-mute), var(--ink-mute)) center / 1px 11px no-repeat;
  }
}

/* ---------- What you can hold us to: the page's night band ---------- */
/* Its head stays in view beside the four, which run down as ruled rows: the title in the serif, and what it means.
   Each row's rule draws across as the row arrives. */
.standard { --text-reason: clamp(1.5rem, 1.22rem + 0.62vw, 1.875rem); }   /* 24px → 30px: a reason's title */
.standard__rows > li { display: grid; row-gap: var(--space-3); padding-block: clamp(28px, 3vw, 44px); border-top: 0; }
.standard__rows > li::before { content: ""; position: absolute; inset: 0 0 auto; height: 1px; background: var(--line); transform-origin: left center; }
.standard__title { font-size: var(--text-reason); line-height: 1.15; letter-spacing: var(--tracking-heading); }
.standard__text { max-width: 34em; color: var(--ink-soft); }
@media (max-width: 63.99em) { .standard .section-head { margin-bottom: 0; } }
@media (scripting: enabled) and (prefers-reduced-motion: no-preference) {
  .standard__rows:not(.is-in) > li::before { transform: scaleX(0); }
  .standard__rows.is-in > li::before {
    animation: arrive-line var(--dur-line) var(--ease-out) backwards; animation-delay: calc(var(--i, 0) * var(--stagger));
  }
  html:not(.motion-ready) .standard__rows:not(.is-in) > li::before { animation: motion-fallback 0.01s 2.2s forwards; }
}

/* ---------- From the founder (shown once config/founder.yml has their name, photo and words) ---------- */
/* The portrait on the left five columns; the words on the right, set as every quote is (.quote, 55_proof.css) */
.founder__layout { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--space-7) var(--col-gap); align-items: end; }
.founder__photo { grid-column: 1 / span 5; aspect-ratio: 4 / 5; }
.founder__text { grid-column: 7 / -1; display: grid; gap: clamp(28px, 3.2vw, 48px); padding-bottom: var(--space-2); }
@media (max-width: 63.99em) { .founder__text { grid-column: 6 / -1; } }
@media (max-width: 47.99em) {
  .founder__photo, .founder__text { grid-column: 1 / -1; }
  .founder__photo { max-width: 22rem; }
}

/* ---------- Get in touch ---------- */
/* The closing line, at four-fifths of the opening's size; its lead and buttons in a row as the opening's are */
.home-contact .kicker { margin-bottom: clamp(24px, 3vw, 40px); }
.home-contact__title {
  font-family: var(--font-display); font-size: calc(var(--text-hero) * 0.8); font-weight: 400;
  line-height: var(--leading-hero); letter-spacing: var(--tracking-hero);
}
.home-contact__row {
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--space-6) var(--col-gap); align-items: end;
  margin-top: clamp(28px, 3.2vw, 48px);
}
.home-contact__lead { grid-column: 1 / span 6; }
.home-contact__actions { grid-column: 7 / -1; justify-content: flex-end; }
@media (max-width: 63.99em) {
  .home-contact__lead, .home-contact__actions { grid-column: 1 / -1; }
  .home-contact__actions { justify-content: flex-start; }
}
@media (max-width: 47.99em) { .home-contact__actions .btn { flex: 1 1 auto; } }