/* EdgeRift — page CSS for Company, Careers and the error pages (404, 410, 500): concept/css/page-company.css.
   Loaded after the shared kit by templates/pages/company.twig, careers.twig, errors/404.twig and the
   standalone errors/500.twig (by plain path, for the art strip and the .notfound band), and by
   pages/apple-offers.twig for the art strip (/appleoffers; owner, 2026-10-13).
   Only what the shared components don't cover: the full-bleed art strip, the stats row, the contact
   list's links, the press kit, the careers hero device and "How we work" columns, the open roles and the error stack.
   Tokens only (no colour values); uppercase only through the shared classes. */

@layer pages {

  /* ---------- Shared: the art strip ---------- */
  /* Full-bleed strip BELOW the text (never behind it). It cancels the band's side padding to run edge
     to edge; .band--bleed removes the bottom padding so it meets the next band. 300 @390 → 560 @1440. */
  .art-strip {
    height: clamp(300px, 24.76vw + 203px, 560px);
    margin: var(--gap-cta-media) calc(var(--gutter) * -1) 0;
    overflow: hidden;
  }
  .art-strip picture { height: 100%; }
  .art-strip img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; }
  /* The 2320:720 illustrations at their own shape from tablet up (nothing cropped); on phones a taller crop.
     --skyline: the Company and Careers heroes. --illustration: the error pages (404, 410, 500), whose subject
     sits in the middle (x 660–1660), so the phone crop stays centred. */
  .art-strip--skyline, .art-strip--illustration { height: auto; aspect-ratio: 2320 / 720; background: var(--c-bg); }
  .art-strip--skyline img, .art-strip--illustration img { object-fit: contain; }
  @media (max-width: 767px) {
    .art-strip--skyline, .art-strip--illustration { aspect-ratio: auto; height: 260px; }
    .art-strip--skyline img, .art-strip--illustration img { object-fit: cover; }
    .art-strip--skyline img { object-position: 12% 50%; }      /* the whole Space Needle, downtown and the ferry */
    .art-strip--workbench img { object-position: 47% 50%; }   /* careers: keep the laptop centred */
    .art-strip--illustration img { object-position: 50% 50%; }   /* error pages: the subject in the middle */
  }
  .center .body-lg { text-wrap: balance; }                               /* no one-word last lines */

  /* ---------- Company ---------- */
  .story .body-lg { margin-top: 20px; }

  /* By the numbers: three figures, stacked below 1024, one row from 1024. */
  .stats { display: grid; gap: 48px; max-width: var(--w-wide); margin: 0 auto; padding: 0; list-style: none; }
  @media (min-width: 1024px) { .stats { grid-template-columns: repeat(3, 1fr); gap: 24px; } }
  .stats .number { font-size: clamp(64px, 3.05vw + 52px, 96px); }
  .stats__label { margin-top: 10px; font-size: var(--t-body); line-height: 1.4; color: var(--c-muted); }

  /* Get in touch: the Specs list carrying the contacts. Links stay ink with a hairline underline,
     so the band's one red element is OPEN IN APPLE MAPS. */
  .contact .specs a:not(.cta) {
    text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .22em;
    text-decoration-color: var(--c-field-border);
    transition: text-decoration-color var(--d-fast) var(--ease);
  }
  .contact .specs a:not(.cta):hover { text-decoration-color: currentColor; }
  .contact address { font-style: normal; }
  .contact .specs .cta { margin-top: 6px; }
  /* Google Maps above Apple Maps, stacked under the address */
  .contact__maps { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; margin-top: 6px; }
  .contact__maps .cta { margin-top: 0; }
  /* Contact: heading across the top; below it the list and the downtown map share one block — the map's top and
     bottom edges sit on the list's first and last rules. The frame is CSS so the map can fill that height exactly
     (object-fit keeps the pin at 7th & Olive in view). Stacked on phones, at the map's own 1000:760 shape. */
  .contact__grid { display: grid; gap: 40px; margin-top: var(--gap-cta-media); }
  .contact .contact__grid .specs { margin: 0; max-width: none; }
  .contact__map {
    position: relative; display: block; aspect-ratio: 1000 / 760; overflow: hidden;
    border: 3px solid var(--c-ink); border-radius: 18px; background: var(--c-map-paper);
    transition: transform var(--d-fast) var(--ease), box-shadow var(--d-fast) var(--ease);
  }
  .contact__map img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 72% 22%; }
  @media (min-width: 900px) {
    .contact__grid { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 64px; align-items: stretch; }
    .contact__map { aspect-ratio: auto; min-height: 100%; }
  }
  .contact__map:hover { transform: translateY(-2px); box-shadow: 0 10px 24px rgba(0, 0, 0, .10); }
  .contact__map:focus-visible { outline: 3px solid var(--c-red); outline-offset: 4px; }
  @media (prefers-reduced-motion: reduce) { .contact__map, .contact__map:hover { transition: none; transform: none; } }

  /* Press kit (owner, 2026-10-07; cleaned up 2026-10-13: "the goal is to provide promo graphics and screenshots to
     the press"): the head carries the downloads (DOWNLOAD THE PRESS KIT is the page's one red button, its size under
     it; the fact sheet the quiet ink CTA beside the press contact); then, on grey, one titled grid per kind of file, and "About EdgeRift"
     (the boilerplate) at the foot. Tiles are white (or the dark surface for the on-dark logos); the product images'
     transparent renders sit on white; screenshots sit on the dark surface, so the preview looks like the file. */
  .press-head__actions { display: flex; flex-direction: column; align-items: center; margin-top: var(--gap-sub-cta); }
  .press-head__size { margin-top: 10px; font-size: var(--t-small); color: var(--c-muted); }
  .press-head__more { display: flex; flex-wrap: wrap; justify-content: center; align-items: baseline; gap: 8px 0; margin-top: 22px; }
  .press-head__item { display: inline-flex; flex-wrap: wrap; justify-content: center; align-items: baseline; gap: 0 10px; padding: 0 20px; }
  .press-head__item + .press-head__item { border-left: 1px solid var(--c-hairline); }
  .press-head__item .press__meta, .press-head__contact { font-size: var(--t-small); }
  .press-head__contact { color: var(--c-muted); }
  .press-head__contact a { color: var(--c-ink); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .22em; text-decoration-color: var(--c-field-border); }
  .press-head__contact a:hover { text-decoration-color: currentColor; }
  @media (max-width: 539px) {   /* the fact sheet and the contact on two centred lines */
    .press-head__more { flex-direction: column; align-items: center; }
    .press-head__item + .press-head__item { border-left: 0; }
  }
  .press__meta, .press__note { color: var(--c-muted); }
  .press .press__group-title:first-child { margin-top: 0; }
  .press__about { margin-top: calc(var(--gap-cta-media) + 16px); }
  .press__about .body-lg { max-width: 34em; margin-top: 12px; }
  .press__about .press__usage { margin-top: 28px; }

  /* The grids: two across on phones; the logos and icons four across from 768, the screenshots three across
     from 768 and six from 1024 (one row per device). A landscape item (.press__cell--wide) takes two columns; a
     screenshot grid with landscape shots is two across to 1023, four from 1024 (the wide pair, then the upright four).
     The product images: from 768 a ten-column row, the iPad renders three columns each and the iPhones two, all on
     tiles of one height. */
  .press__group-title { margin-top: calc(var(--gap-cta-media) + 16px); }
  .press__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px 16px; margin: 20px 0 0; padding: 0; list-style: none; }
  @media (min-width: 768px) {
    .press__grid { gap: 40px 24px; }
    .press__grid--tiles { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .press__grid--screens { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  }
  @media (min-width: 1024px) { .press__grid--screens { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
  .press__cell--wide { grid-column: span 2; }
  @media (min-width: 768px) { .press__grid--mixed { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
  @media (min-width: 1024px) { .press__grid--mixed { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
  .press__grid--products { --tile-h: 220px; }
  @media (min-width: 768px) {
    .press__grid--products { grid-template-columns: repeat(10, minmax(0, 1fr)); --tile-h: clamp(220px, 14vw + 112px, 320px); }
    .press__grid--products > li { grid-column: span 2; }
    .press__grid--products > .press__cell--wide { grid-column: span 3; }
  }
  .press__render { display: flex; align-items: center; justify-content: center; height: var(--tile-h); padding: 6% 8%; border-radius: 12px; background: var(--c-bg); }
  .press__render img { width: auto; height: auto; max-width: 100%; max-height: 100%; }
  .press__item { margin: 0; }
  /* Logo and icon tiles, all 3:2: a logo fits a 76% × 64% box, an icon is 64% of the tile's height, centred */
  .press__tile { position: relative; aspect-ratio: 3 / 2; border-radius: 12px; background: var(--c-bg); }
  .press__tile--dark { background: var(--c-surface-dark); }
  .press__tile > img, .press__icon { position: absolute; inset: 0; margin: auto; }
  .press__tile > img { width: 76%; height: 64%; object-fit: contain; }
  .press__icon { display: block; width: 42.667%; height: 64%; }
  .press__icon img { width: 100%; height: 100%; border-radius: 22.37%; }   /* the App Store mask; the file is square */
  .press__shot { overflow: hidden; border-radius: 8px; background: var(--c-surface-dark); }
  .press__shot img { width: 100%; height: auto; }
  /* Caption: name, note, format and pixels, then DOWNLOAD › with the file size beside it (below it when narrow),
     like the ZIP's line */
  .press__item figcaption { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; margin-top: 14px; }
  .press__name { font-size: var(--t-small); font-weight: 500; line-height: 1.35; }
  .press__note, .press__item .press__meta { font-size: var(--t-fine); line-height: 1.4; }
  .press__get { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 10px; margin-top: 2px; }
  .press__usage {
    max-width: var(--w-copy); margin-top: calc(var(--gap-cta-media) + 16px); padding-top: 20px;
    border-top: 1px solid var(--c-hairline); font-size: var(--t-small); line-height: 1.5; color: var(--c-muted);
  }

  /* ---------- Careers ---------- */
  /* Hero tablet: smaller than a product hero (it illustrates, it doesn't sell): 320 @390 → 560 @1440,
     two thirds of the frame above the grey band. */
  .careers-hero .bleed { --w: clamp(320px, 22.86vw + 231px, 560px); --show: .66; }
  .values {
    display: grid; gap: 40px; max-width: var(--w-content); margin: var(--gap-cta-media) auto 0;
    padding: 0; list-style: none;
  }
  @media (min-width: 1024px) {
    .values { grid-template-columns: repeat(3, 1fr); gap: 48px; text-align: left; }
    .values li { padding-top: 24px; border-top: 1px solid var(--c-hairline); }
  }
  .values p { max-width: 24em; margin: 8px auto 0; font-size: var(--t-body); line-height: 1.5; color: var(--c-muted); }
  @media (min-width: 1024px) { .values p { margin-inline: 0; } }

  /* Open roles (shown only when company.json lists one): hairline rows in the copy column. */
  .roles { max-width: var(--w-copy); margin: var(--gap-cta-media) auto 0; padding: 0; list-style: none; text-align: left; border-bottom: 1px solid var(--c-hairline); }
  .roles li { padding: 24px 0; border-top: 1px solid var(--c-hairline); }
  .roles p { margin-top: 6px; font-size: var(--t-body); line-height: 1.5; color: var(--c-muted); }
  .roles .cta-row { justify-content: flex-start; margin-top: var(--gap-sub-cta); }
  .roles + .body-lg { margin-top: var(--gap-cta-media); }

  /* ---------- 404 / 410 / 500 ---------- */
  .notfound { padding-top: var(--section-y); }
  .notfound .search-field { margin-top: var(--gap-sub-cta); }

  /* Careers hero stamp: "REMOTE ◆ SMALL TEAM ◆ SINCE 2008", the same stamp style as the footer's founding line. */
  .stamp {
    display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 12px; margin: 18px 0 0;
    font-family: var(--f-display); font-weight: 600; font-size: 14px; line-height: 1;
    letter-spacing: var(--track-caps); text-transform: uppercase; color: var(--c-muted);
  }
  .stamp__sep { width: 6px; height: 6px; background: var(--c-red); transform: rotate(45deg); flex: none; }

  /* Press kit teaser (the Company page; the kit has its own page, pages/press-kit.twig): the line, the four app
     icons in a row, then View the press kit and the ZIP (owner, 2026-10-07) */
  .press-teaser__icons { display: flex; justify-content: center; gap: clamp(12px, .76vw + 9px, 20px); margin: clamp(28px, 1.52vw + 22px, 44px) 0 0; padding: 0; list-style: none; }
  .press-teaser__icons img { display: block; width: clamp(56px, 1.52vw + 50px, 72px); height: auto; border-radius: 22.37%; box-shadow: var(--shadow-tile); }
  .press-teaser .press__meta { margin-left: 6px; }
  /* The kit's page: its head, then the grey kit band */
  .press-head { padding-bottom: calc(var(--section-y) * .55); }
  .press-head + .press { padding-top: calc(var(--section-y) * .6); }   /* its heading is the page head's, so the kit starts sooner */
}