/* Amar Labs — one stylesheet for every page on the site.

   Archivo is served from this domain rather than from Google, so visiting the site
   makes no request to any third party. The font is variable on two axes: width
   (62–125) and weight (100–900). The whole type system is those two axes on one
   family — wide and heavy for names, normal and regular for reading — which is why
   there is no second typeface anywhere. */

@font-face {
  font-family: "Archivo";
  src: url(/fonts/archivo-latin.woff2) format("woff2");
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
    U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215,
    U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Archivo";
  src: url(/fonts/archivo-latin-ext.woff2) format("woff2");
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304,
    U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0,
    U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  --void: #000;
  --ink: #fff;
  --text: #D5D9E0;
  --dim: #79808C;
  --faint: #4E545E;
  --rule: #171A20;
  --glow: #7AA2FF;
  --measure: 34rem;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; overflow-x: clip; }

body {
  margin: 0;
  background: var(--void);
  color: var(--text);
  font-family: "Archivo", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto,
    Helvetica, Arial, sans-serif;
  font-variation-settings: "wdth" 100, "wght" 400;
  font-size: 1.0625rem;
  line-height: 1.65;
  overflow-x: clip;
}

/* A cold horizon, low and quiet. Home page only. */
.field {
  position: fixed;
  left: 0; right: 0;
  bottom: -24vh;
  height: 74vh;
  background: radial-gradient(ellipse 150% 100% at 50% 55%,
    rgba(122,162,255,.22), rgba(122,162,255,.06) 42%, transparent 68%);
  filter: blur(22px);
  pointer-events: none;
  z-index: 0;
}

.wrap {
  position: relative;
  z-index: 1;
  max-width: 68rem;
  margin-inline: auto;
  padding-inline: clamp(1.25rem, 5vw, 4.5rem);
}

/* ---------- links ---------- */

a {
  color: var(--ink);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.22em;
}
a:hover { text-decoration-color: var(--glow); }
a:focus-visible {
  outline: 2px solid var(--glow);
  outline-offset: 4px;
  border-radius: 3px;
}

.skip {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 10;
  padding: 0.6rem 1rem;
  background: var(--ink);
  color: var(--void);
  text-decoration: none;
}
.skip:focus { left: 0.5rem; top: 0.5rem; }

/* ---------- masthead ---------- */

.masthead {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1.5rem 2rem;
  flex-wrap: wrap;
  padding-block: clamp(1.5rem, 4vh, 2.25rem) 0;
}
.mark {
  font-size: 1.0625rem;
  font-variation-settings: "wdth" 118, "wght" 640;
  letter-spacing: -0.015em;
  text-decoration: none;
  color: var(--ink);
}
.mark:hover { text-decoration: underline; text-decoration-color: var(--glow); }
.masthead nav {
  display: flex;
  gap: clamp(1.1rem, 3vw, 2rem);
  font-size: 0.9375rem;
}
.masthead nav a {
  color: var(--dim);
  text-decoration: none;
}
.masthead nav a:hover { color: var(--ink); }
.masthead nav a[aria-current="page"] { color: var(--ink); }

/* ---------- hero ---------- */

.hero { padding-block: clamp(3.5rem, 16vh, 8rem) clamp(3rem, 11vh, 6rem); }
.wordmark {
  margin: 0;
  font-size: clamp(3rem, 11.5vw, 8.5rem);
  font-variation-settings: "wdth" 125, "wght" 650;
  letter-spacing: -0.035em;
  line-height: 0.92;
  color: transparent;
  background: linear-gradient(100deg, #fff 0 32%, #c9dcff 42%, #fff 52% 100%)
    0 0 / 300% 100% no-repeat;
  -webkit-background-clip: text;
  background-clip: text;
  animation: sweep 1.9s cubic-bezier(.32,.72,.3,1) .25s 1 both;
}
@keyframes sweep { from { background-position: 100% 0; } to { background-position: 0 0; } }

.lede {
  max-width: var(--measure);
  margin: clamp(1.75rem, 5vh, 2.75rem) 0 0;
  font-size: clamp(1.125rem, 2.1vw, 1.375rem);
  line-height: 1.45;
  color: var(--dim);
  text-wrap: balance;
}
.lede strong { color: var(--ink); font-variation-settings: "wdth" 100, "wght" 600; }

/* ---------- page heads (every page that is not the home page) ---------- */

.pagehead { padding-block: clamp(3rem, 12vh, 5.5rem) clamp(1.5rem, 5vh, 2.5rem); }
.pagehead h1 {
  margin: 0;
  color: var(--ink);
  font-size: clamp(2.25rem, 7vw, 3.75rem);
  font-variation-settings: "wdth" 120, "wght" 640;
  letter-spacing: -0.03em;
  line-height: 1;
}
.pagehead .lede { margin-top: 1.5rem; }
.stamp { margin: 1.25rem 0 0; color: var(--faint); font-size: 0.9375rem; }

/* ---------- sections, divided by a drawn hairline ---------- */

.band {
  position: relative;
  padding-block: clamp(3rem, 9vh, 5rem);
}
.band::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 1px;
  background: var(--rule);
  transform: scaleX(1);
  transform-origin: left;
}
@keyframes rule { from { transform: scaleX(0); } to { transform: scaleX(1); } }

.band h2 {
  margin: 0 0 1.5rem;
  color: var(--ink);
  font-size: clamp(1.5rem, 3.2vw, 2.125rem);
  font-variation-settings: "wdth" 116, "wght" 600;
  letter-spacing: -0.022em;
  line-height: 1.1;
}

/* ---------- prose ---------- */

.prose { max-width: var(--measure); }
.prose p { margin: 0 0 1.15rem; }
.prose p:last-child { margin-bottom: 0; }
.prose h3 {
  margin: 2.25rem 0 0.6rem;
  color: var(--ink);
  font-size: 1.1875rem;
  font-variation-settings: "wdth" 110, "wght" 600;
  letter-spacing: -0.012em;
  line-height: 1.35;
}
.prose ul, .prose ol { margin: 0 0 1.15rem; padding-left: 1.2rem; }
.prose li { margin-bottom: 0.5rem; }
.prose li::marker { color: var(--faint); }
.prose strong { color: var(--ink); font-variation-settings: "wdth" 100, "wght" 600; }
.prose a { overflow-wrap: anywhere; }

/* ---------- the app, on the home page ---------- */

.app {
  display: flex;
  align-items: flex-start;
  gap: clamp(1.75rem, 4vw, 3.25rem);
}
.appicon {
  flex: none;
  width: clamp(5.5rem, 10vw, 7.5rem);
  height: auto;
  aspect-ratio: 1;
  border-radius: 22.5%;      /* the iOS squircle, near enough */
  /* the icon is white on black, so it needs an edge to sit on a black page */
  box-shadow: 0 0 0 1px rgba(255,255,255,.11), 0 22px 60px -24px rgba(122,162,255,.55);
}
@keyframes wake {
  from {
    opacity: .22;
    filter: brightness(.3) contrast(1.15);
    box-shadow: 0 0 0 1px rgba(255,255,255,.05), 0 0 0 0 rgba(122,162,255,0);
  }
  to {
    opacity: 1;
    filter: none;
    box-shadow: 0 0 0 1px rgba(255,255,255,.11), 0 22px 60px -24px rgba(122,162,255,.55);
  }
}
.masthead--navonly { justify-content: flex-end; }

.about { min-width: 0; max-width: var(--measure); }
.about .role {
  margin: 0 0 1.25rem;
  color: var(--dim);
  font-size: 1.0625rem;
}
.about p { margin: 0 0 1.15rem; }
.about strong { color: var(--ink); font-variation-settings: "wdth" 100, "wght" 600; }

/* Scroll drives the two reveals on the home page. ::before and <img> both generate
   real layout boxes, so view() resolves against them — an SVG <path> does not. */
@supports (animation-timeline: view()) {
  .band::before {
    animation: rule linear both;
    animation-timeline: view();
    animation-range: cover 0% cover 12%;
  }
  .appicon {
    animation: wake linear both;
    animation-timeline: view();
    animation-range: entry 12% entry 88%;
  }
}

/* Apple's official badge, used unaltered and linking to the product page. */
.badge {
  display: inline-block;
  line-height: 0;
  border-radius: 8px;
  transition: opacity .25s;
}
.badge:hover { opacity: .78; }
.badge img { height: 3rem; width: auto; display: block; }
.badge:focus-visible { outline: 2px solid var(--glow); outline-offset: 5px; }

.actions {
  display: flex;
  align-items: center;
  gap: 1.5rem 2rem;
  flex-wrap: wrap;
  margin-top: 1.5rem;
}
.actions .more { font-size: 0.9375rem; color: var(--dim); }
.actions .more a { color: var(--ink); }

/* ---------- screens ---------- */

.shots {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(0.75rem, 2.5vw, 1.75rem);
  margin: 0;
  padding: 0;
  list-style: none;
}
.shots li { margin: 0; }
.shots img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 6.5%;
  box-shadow: 0 0 0 1px rgba(255,255,255,.1), 0 30px 70px -40px rgba(122,162,255,.5);
}
.shots figcaption,
.shots .caption {
  margin-top: 0.85rem;
  color: var(--dim);
  font-size: 0.875rem;
  line-height: 1.4;
}

/* ---------- label / description rows ---------- */

.spec { margin: 0; }
.spec > div {
  display: grid;
  grid-template-columns: minmax(0, 13rem) minmax(0, 34rem);
  gap: 0.35rem clamp(1.5rem, 4vw, 3rem);
  padding-block: 1.35rem;
  border-top: 1px solid var(--rule);
}
.spec > div:first-child { border-top: 0; padding-top: 0; }
.spec dt {
  color: var(--ink);
  font-variation-settings: "wdth" 112, "wght" 600;
  letter-spacing: -0.012em;
}
.spec dd { margin: 0; }
.spec dd p { margin: 0 0 0.75rem; }
.spec dd p:last-child { margin-bottom: 0; }

/* ---------- footer ---------- */

.foot {
  position: relative;
  z-index: 1;
  padding-block: clamp(2.5rem, 7vh, 3.5rem) clamp(2.5rem, 7vh, 4rem);
  border-top: 1px solid var(--rule);
  color: var(--faint);
  font-size: 0.875rem;
}
.foot .rows {
  display: flex;
  justify-content: space-between;
  gap: 1.25rem 2.5rem;
  flex-wrap: wrap;
}
.foot nav { display: flex; gap: 1.25rem 1.75rem; flex-wrap: wrap; }
.foot a { color: var(--dim); text-decoration: none; }
.foot a:hover { color: var(--ink); text-decoration: underline; }
.foot .entity { color: var(--dim); }

/* ---------- narrow screens ---------- */

@media (max-width: 48rem) {
  .spec > div { grid-template-columns: minmax(0, 1fr); gap: 0.3rem; }
  .shots { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.25rem; }
}
@media (max-width: 40rem) {
  .app { flex-direction: column; align-items: flex-start; gap: 1.5rem; }
  .appicon { width: 5rem; }
}

@media (prefers-reduced-motion: reduce) {
  .wordmark { animation: none; background-position: 0 0; }
  .band::before { transform: scaleX(1); animation: none; }
  .appicon { animation: none; opacity: 1; filter: none; }
  * { transition: none !important; }
}