/* ==========================================================================
   RESPONSIVE — Mobile V1 + V2 refinements (see MOBILE-V1-NOTES.md and
   MOBILE-V2-NOTES.md)
   One website: everything above 1023px is the approved desktop build and
   is untouched by this file. Values marked "V1 choice" were not fixed in the
   spec and are recorded in MOBILE-V1-NOTES.md.

   Breakpoints
     Desktop  ≥ 1024px wide ......... approved desktop (no overrides)
     Tablet   768–1023px wide ........ desktop layout, narrower copy margins
     Mobile   ≤ 767px wide, or a touch device under 500px tall (phones in
              landscape) .............. mobile V1 rules
   ========================================================================== */

/* Stop iOS enlarging text in landscape (no effect on desktop browsers) */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }

/* ---- TABLET -------------------------------------------------------------- */
@media (min-width: 768px) and (max-width: 1023px) {
  :root {
    --pad-copy: 60px;   /* V1 choice (desktop: 170px) */
  }
}

/* ---- TOUCH (any width) -----------------------------------------------------
   Phones and tablets: larger tap targets and a return tab that shows its
   arrow at rest, so one tap returns home. Mouse/trackpad devices are
   unaffected. */
@media (pointer: coarse) {
  :root {
    --tab-visible: 28px;          /* V1 choice: arrow fully visible at rest */
    --tab-icon-bottom: 9px;
    --tab-hit-extra: 16px;        /* invisible tap area below the tab */
  }
  .return-tab { color: #FFFFFF; }
  .return-tab::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: calc(-1 * var(--tab-hit-extra));
    height: var(--tab-hit-extra);
  }
  /* Invisible 40px-tall tap areas around the icons (gap stays visual) */
  .header-link { position: relative; }
  .header-link::after {
    content: "";
    position: absolute;
    inset: -12px calc(var(--header-links-gap) / -2);
  }
}

/* ---- MOBILE -------------------------------------------------------------- */
@media (max-width: 767px), (max-height: 500px) and (pointer: coarse) {
  :root {
    /* Header — V1 choices */
    --header-pad-x: 20px;
    --header-pad-y: 14px;
    --t-name-size: 18px;
    --t-name-lh: 20px;
    --t-desc-size: 10px;
    --t-desc-lh: 14px;
    --identity-gap: 4px;
    --icon-h: 15px;               /* artwork height unchanged */
    --icon-hit: 40px;             /* each icon's tap area: 40 x 40 */
    /* Real height of the (possibly wrapped) header, measured by js/app.js */
    --header-h: var(--header-h-measured, 80px);

    /* Return tab — V1 choices (exposed height, colour and tap area: see TOUCH) */
    --tab-w: 64px;
    --tab-h: 47px;
    --tab-visible: 28px;
    --tab-icon-bottom: 9px;
    --tab-hit-extra: 16px;

    /* Accordion — fits the space beneath the header (V1 choices) */
    --acc-h: calc(var(--app-h, 100dvh) - var(--header-h));
    --acc-ratio: 3;               /* expanded panel = 3 x a collapsed panel */
    --strip-min: 48px;            /* below this, the homepage scrolls instead */
    /* V2: panel heights are whole pixels so every panel edge lands on a
       device pixel (see .strip rules below for why). The last collapsed
       panel, or the expanded panel, takes up the rounding remainder so the
       total still exactly fills the space. */
    --strip-h-scaled: max(var(--strip-min), calc(var(--acc-h) / 6));
    --strip-h-inactive-scaled: max(var(--strip-min), calc(var(--acc-h) / (var(--acc-ratio) + 5)));
    --strip-h-active-scaled: max(calc(var(--strip-min) * var(--acc-ratio)),
                                 calc(var(--acc-h) * var(--acc-ratio) / (var(--acc-ratio) + 5)));
    --strip-h-last: var(--strip-h-scaled);
    --strip-focal: 0.1125;        /* reproduces the desktop crop band (see notes) */

    /* Case studies — agreed V1 values */
    --t-body-size: 16px;      --t-body-lh: 24px;
    --t-heading-size: 24px;   --t-heading-lh: 28px;
    --t-identifier-size: 12px; --t-identifier-lh: 20px;
    --t-caption-size: 10px;   --t-caption-lh: 14px;    /* V2 trial (V1: 12 / 18) */
    --t-footer-size: 12px;    --t-footer-lh: 18px;     /* lh: V1 choice */
    --pad-copy: 20px;
    --gap-section: 60px;
    --gap-group: 40px;
    --gap-header-identifier: 60px;
    --caption-pad-top: 15px;
    --caption-inset: 15px;
    --footer-pad-x: 20px;
    /* V1 choices */
    --gap-copy: 30px;             /* identifier → intro (desktop 60) */
    --para-gap: 24px;             /* heading → body and between paragraphs: one body line */
    --footer-pad-bottom: 24px;    /* desktop 40 */
  }

  /* ---- Header ------------------------------------------------------------ */
  .site-header {
    height: auto;                 /* grows if the description wraps */
    gap: 12px;
    align-items: center;
  }
  .identity { min-width: 0; }
  /* V2: short description on mobile, one line */
  .identity__description { white-space: nowrap; }
  .desc-full { display: none; }
  .desc-short { display: inline; }
  .header-links {
    gap: 0;
    margin-right: calc((var(--icon-hit) - 19.5px) / -2);  /* Email's artwork stays 20px from the edge */
  }
  .header-link {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: var(--icon-hit);
    min-height: var(--icon-hit);
  }

  .header-link::after { display: none; }   /* the 40px boxes are the tap areas */

  /* ---- Homepage accordion ------------------------------------------------ */
  /* The image box is the height of an expanded panel and fills the width;
     collapsed panels show a band of it, positioned so the framing matches
     the desktop crop. Heights come from the viewport, not desktop pixels. */
  .strip__img {
    top: calc((100% - var(--strip-h-active-scaled)) * var(--strip-focal));
    height: var(--strip-h-active-scaled);
    transform: none;
    transition: top var(--dur-accordion) var(--ease-gentle-767);
  }
  .strip__gradient {
    top: 0;
    height: calc(100% + 1px);   /* V2: overscans the panel edge; clipped by the panel */
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 45%, rgba(0, 0, 0, 0.75) 100%);
  }
  .strip__title {
    top: auto;
    left: 20px;
    right: 20px;
    bottom: 14px;
    font-size: 14px;
    line-height: 20px;
    white-space: normal;
  }

  /* ---- Case studies ------------------------------------------------------ */
  .flow-label { margin-top: 12px; font-size: 10px; }
  .flow-label__name { line-height: 16px; }
  .flow-label__number { margin-top: 4px; line-height: 10px; }

  .sound-toggle { right: 10px; bottom: 10px; }

  /* ---- Return tab arrow (V2) --------------------------------------------- */
  /* Visible artwork width = the Email icon's visible width (15px high ×
     208/160 = 19.5px); height scales with the caret's own proportions.
     Centred in the exposed part of the tab (below the header), so equal
     space shows above and below it. */
  :root {
    --tab-icon-w: calc(var(--icon-h) * 208 / 160);
    --tab-icon-h: calc(var(--tab-icon-w) * 93.66 / 171.32);
    --tab-icon-bottom: calc((var(--tab-visible) - var(--tab-icon-h)) / 2);
  }
  .return-tab__icon {
    width: var(--tab-icon-w);
    height: var(--tab-icon-h);
  }
  /* Grey (as the header icons) while hidden, turning white as the tab
     drops in, over the same 767ms as the drop. Visual only: it stays
     tappable throughout. */
  .return-tab { color: var(--c-icon); }
  .return-tab.is-visible { color: #FFFFFF; }
}

/* ---- MOBILE V2: whole-pixel accordion panels ------------------------------
   Cause of the bright strip under the expanded Brand & Identity preview:
   panel heights were fractional (for example 217.125px), so panel edges
   fell between device pixels. Safari snaps the image and the gradient
   layer to device pixels separately, which can leave one row of the image
   uncovered at the panel's bottom edge. It is most visible on Brand &
   Identity, whose image is brightest at the bottom. Fix: whole-pixel panel
   heights, plus a gradient that overscans the panel edge by 1px (clipped by
   the panel), so no image row can sit outside the gradient. */
@supports (height: round(down, 10.5px, 1px)) {
  @media (max-width: 767px), (max-height: 500px) and (pointer: coarse) {
    :root {
      --acc-h-px: round(down, var(--acc-h), 1px);
      --strip-h-scaled: max(var(--strip-min), round(down, calc(var(--acc-h-px) / 6), 1px));
      --strip-h-inactive-scaled: max(var(--strip-min), round(down, calc(var(--acc-h-px) / (var(--acc-ratio) + 5)), 1px));
      --strip-h-active-scaled: max(calc(var(--strip-min) * var(--acc-ratio)),
                                   calc(var(--acc-h-px) - 5 * var(--strip-h-inactive-scaled)));
      --strip-h-last: max(var(--strip-min), calc(var(--acc-h-px) - 5 * var(--strip-h-scaled)));
    }
    .strip:last-child { height: var(--strip-h-last); }
  }
}