/*
  Wren's landing page, and the careers, science and news pages beside it.

  The inks are the app's own two columns (app/Packages/WrenDesign/Sources/
  WrenDesign/Ink.swift); the type is the app's (Iowan Old Style for what Wren
  says, Avenir Next for the body, the system mono for labels, Type.swift). The
  print and everything drawn on it keep the light cream in both columns, as
  Ink.Print does in the app. The privacy, terms and support pages use style.css.
*/

:root {
  --paper: #faf4e1;
  --text: #2e2a26;
  --quiet: #6a6258;
  --terra: #c66242;
  --terra-text: #853f28;
  --rule: #ded8cb;
  --rule-soft: #eae5da;
  --lift-big: 0 30px 60px -34px rgba(26, 25, 23, .55);
  --grain-blend: multiply;
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .35 0 0 0 0 .3 0 0 0 0 .24 0 0 0 .16 0'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23n)'/%3E%3C/svg%3E");

  /* Ink.Print: never changes */
  --print: #faf4e1;
  --print-text: #2e2a26;
  /* The print's midnight sky, which the page shows until the print arrives. */
  --midnight: #234565;

  --serif: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
  --sans: "Avenir Next", Avenir, "Segoe UI", system-ui, sans-serif;
  --mono: ui-monospace, "SF Mono", Menlo, monospace;

  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root {
    --paper: #191611; --text: #e9e3d1; --quiet: #988d7c;
    --terra: #b35132; --terra-text: #d17f65; --rule: #403d35; --rule-soft: #312d27;
    --lift-big: none; --grain-blend: screen;
    --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .92 0 0 0 0 .88 0 0 0 0 .8 0 0 0 .08 0'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23n)'/%3E%3C/svg%3E");
    color-scheme: dark;
  }
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--text);
  font: 400 1.0625rem/1.6 var(--sans);
  position: relative;
  min-height: 100vh;
  overflow-x: hidden;
}

/* The paper's grain, over everything, as the design pages draw it. */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  opacity: .5;
  mix-blend-mode: var(--grain-blend);
  background-image: var(--grain);
  z-index: 3;
}

.wrap {
  position: relative;
  width: 100%;
  max-width: 76rem;
  margin-inline: auto;
  padding: 0 2rem;
}

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

h1, h2, h3 { font-family: var(--serif); font-weight: 400; line-height: 1.12; margin: 0; }
p { margin: 0 0 1em; }

/* A label: 11 mono, uppercase, tracked .08 em (Type.label). */
.label {
  font: 500 .6875rem/1.4 var(--mono);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--quiet);
  margin: 0 0 .9rem;
}

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

.masthead {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 1.6rem;
  padding-bottom: 1.6rem;
}

.home-link {
  display: flex;
  align-items: center;
  gap: .6rem;
  color: var(--text);
  font-family: var(--serif);
  font-size: 1.4rem;
}
a.home-link { text-decoration: none; }

.home-link .perch { width: auto; height: 2.75rem; margin: -.5rem -.1rem 0 0; }

/* Careers, Science and News, quiet in the label type. */
.mast-nav { display: flex; gap: 1.5rem; }
.mast-nav a {
  font: 500 .75rem/1 var(--mono);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--quiet);
  text-decoration: none;
  padding: .35rem 0;
  border-bottom: 1px solid transparent;
}
.mast-nav a:hover, .mast-nav a[aria-current="page"] { color: var(--text); border-bottom-color: var(--rule); }

/* ---------- the foot ---------- */

.colophon::before { content: ""; display: block; border-top: 1px solid var(--rule); margin-bottom: 1.5rem; }
.colophon {
  margin-top: 7rem;
  padding-bottom: 5rem;
  color: var(--quiet);
  font-size: .95rem;
}
.colophon nav { display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; margin-bottom: .75rem; }
.colophon p { max-width: 46rem; }
.placeholder { background: color-mix(in srgb, var(--terra) 18%, transparent); border-radius: 4px; padding: 0 .25em; }

@media (max-width: 640px) {
  .wrap { padding: 0 1rem; }
  body { font-size: 1rem; }
  .mast-nav { gap: 1.1rem; }
}

/* ================= the landing page ================= */

/* The landing page is the print's night from top to bottom, in both papers: Safari on iOS colours its status bar and
   toolbar from the body, so the body is the print's midnight. */
html.on-print, .on-print body { background: var(--midnight); color-scheme: dark; height: 100%; min-height: 0; overflow: hidden; }

/* The whole page is one print filling the screen, with the masthead, the words, the button and three links
   over it. The print keeps its inks in both papers, so everything on it takes the print's own cream; until the
   print arrives the page shows its midnight sky, so the words read from the first paint. The height follows
   the dynamic viewport, including changes to Mobile Safari's toolbars. */
.one { position: relative; height: 100vh; height: 100dvh; overflow: hidden; background: var(--midnight); padding-bottom: 3rem; }
.one-print, .one-print img { position: absolute; inset: 0; width: 100%; height: 100%; }
/* If the print fails, its description stays with readers of the page's text and is never drawn over the words. */
.one-print img { object-fit: cover; object-position: 50% 100%; background: var(--midnight); color: transparent; }
.one-mast, .one-words, .one-foot { position: relative; z-index: 1; }
.one::after { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; }

.one-mast { padding: max(1.25rem, env(safe-area-inset-top)) max(3rem, env(safe-area-inset-right)) 1rem max(3rem, env(safe-area-inset-left)); }
.one-mast .home-link, .one-mast .mast-nav a { color: var(--print); }
.one-mast .mast-nav a:hover { border-bottom-color: rgba(46, 42, 38, .35); }

.one-words { padding: .75rem 3rem 0 3.25rem; max-width: 60rem; }
.one-words h1 { margin: 0; font: 700 clamp(2.4rem, 3.4vw, 3rem)/1.12 var(--serif); letter-spacing: -.01em; color: var(--print); }
.one-words h1 .br-phone { display: none; }
.one-words .hero-sub { margin: 1rem 0 0; font: 500 1.35rem/1.3 var(--sans); color: var(--print); }

/* Apple's "Download on the App Store" badge: used as supplied, never recoloured or reshaped, at least 40 px tall
   (Apple's minimum on screen), with clear space of a quarter of its height on every side. */
.cta { display: flex; flex-wrap: wrap; align-items: center; gap: .9rem 1.5rem; }
.one-words .cta { margin-top: 1.6rem; }
.store-badge { display: inline-block; line-height: 0; padding: .75rem; margin: -.75rem; }
.store-badge img { display: block; height: 3rem; width: auto; }

.one-foot {
  position: absolute; left: 0; right: 0; bottom: 0;
  display: flex; gap: 1.5rem; justify-content: flex-end;
  padding: .8rem max(3rem, env(safe-area-inset-right)) calc(.8rem + env(safe-area-inset-bottom)) max(3rem, env(safe-area-inset-left));
  background: linear-gradient(transparent, rgba(46, 42, 38, .55));
}
.one-foot a { font: 500 .75rem/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--print); text-decoration: none; }
.one-foot a:hover { text-decoration: underline; }

@media (min-width: 641px), (orientation: landscape) {
  /* A soft corner of the print's own midnight, deepest behind the headline, subheader and button and feathered
     out across the night, so the copy reads and the night still shows through without a box. */
  .one::after {
    background:
      radial-gradient(ellipse 60% 84% at 0% 0%, rgba(6, 10, 20, .94) 0%, rgba(6, 10, 20, .88) 30%, rgba(6, 10, 20, .62) 55%, rgba(6, 10, 20, .24) 78%, rgba(6, 10, 20, 0) 100%),
      linear-gradient(180deg, rgba(6, 10, 20, .35) 0, rgba(6, 10, 20, 0) 7rem);
  }

  /* The nav: the body sans, semibold and larger, in the print's cream with a soft dark shadow, so it reads over
     the sky and the window frames. On hover a thin cream underline draws in from the left. */
  .one-mast .mast-nav { gap: 2rem; }
  .one-mast .mast-nav a {
    position: relative; border-bottom: 0;
    font: 600 .9rem/1 var(--sans); letter-spacing: .02em; text-transform: none;
    text-shadow: 0 1px 2px rgba(6, 10, 20, .8), 0 0 12px rgba(6, 10, 20, .6);
  }
  .one-mast .mast-nav a::after {
    content: ""; position: absolute; left: 0; right: 0; bottom: -.1rem; height: 1.5px; pointer-events: none;
    background: var(--print); box-shadow: 0 1px 3px rgba(6, 10, 20, .6);
    transform: scaleX(0); transform-origin: 0 50%; transition: transform .3s ease;
  }
  .one-mast .mast-nav a:hover::after, .one-mast .mast-nav a:focus-visible::after { transform: scaleX(1); }
}

/* On a phone held upright: the two-floor house under a midnight sky, the words in its sky over a soft dark backing.
   A phone on its side takes the wide print, which its screen's shape suits. */
@media (max-width: 640px) and (orientation: portrait) {
  .one::after { background: radial-gradient(ellipse 80% 30% at 30% 18%, rgba(16, 24, 36, .55), rgba(16, 24, 36, 0) 100%); }
  .one-mast { padding: max(1rem, env(safe-area-inset-top)) max(1rem, env(safe-area-inset-right)) 1rem max(1rem, env(safe-area-inset-left)); }
  .one-words { padding: 1.75rem 1rem 0; }
  .one-words h1 { font-size: 2.1rem; }
  .one-words h1 .br-phone { display: inline; }
  .one-words h1 .br-wide { display: none; }
  .one-words .hero-sub { font-size: 1.15rem; margin-top: .75rem; }
  .one-words .cta { margin-top: 1.4rem; }
  .store-badge img { height: 2.75rem; }
  .one-foot { justify-content: center; padding: .7rem 1rem calc(.7rem + env(safe-area-inset-bottom)); }
}

/* The narrowest phones: at 2.1rem the headline's first line would break inside itself, and the name would meet the nav. */
@media (max-width: 350px) and (orientation: portrait) {
  .one-words h1 { font-size: 9.2vw; }
  .one-mast .mast-nav { gap: .8rem; }
}

/* A phone on its side: the same page in less height. The type and spacing come down so the button clears the links
   at the foot, and the dark corner reaches further across, because on a short screen the words run further right
   over the brightening sky. */
@media (orientation: landscape) and (max-height: 450px) {
  .one::after {
    background:
      radial-gradient(ellipse 95% 130% at 0% 0%, rgba(6, 10, 20, .94) 0%, rgba(6, 10, 20, .88) 30%, rgba(6, 10, 20, .62) 55%, rgba(6, 10, 20, .24) 78%, rgba(6, 10, 20, 0) 100%),
      linear-gradient(180deg, rgba(6, 10, 20, .35) 0, rgba(6, 10, 20, 0) 7rem);
  }
  .one-mast { padding: max(.75rem, env(safe-area-inset-top)) max(2rem, env(safe-area-inset-right)) .5rem max(2rem, env(safe-area-inset-left)); }
  .one-words { padding: .25rem 2rem 0 max(2.25rem, env(safe-area-inset-left)); }
  .one-words h1 { font-size: 1.75rem; }
  .one-words .hero-sub { font-size: 1.1rem; margin-top: .6rem; }
  .one-words .cta { margin-top: 1.1rem; }
  .store-badge img { height: 2.75rem; }
  .one-foot { padding: .7rem max(2rem, env(safe-area-inset-right)) calc(.7rem + env(safe-area-inset-bottom)) max(2rem, env(safe-area-inset-left)); }
}

@media (orientation: landscape) and (max-height: 300px) {
  .one-mast { padding-top: max(.25rem, env(safe-area-inset-top)); padding-bottom: .25rem; }
  .one-words {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: .5rem 1rem;
    max-width: 60rem;
    padding-top: .25rem;
  }
  .one-words h1 { font-size: clamp(1rem, 4vw, 1.5rem); }
  .one-words .hero-sub { font-size: 1rem; margin-top: 0; }
  .one-words .cta { grid-column: 2; grid-row: 1 / 3; margin-top: 0; }
  .one-words .store-badge { padding: 10px; margin: 0; }
  .one-words .store-badge img { height: 40px; }
}

@media (prefers-reduced-motion: reduce) {
  .one-mast .mast-nav a::after { transition: none; }
}

/* ================= careers, science and news ================= */

/* The landing page's paper and type, one column. */
.subpage { max-width: 52rem; margin-top: 2.5rem; margin-bottom: 7rem; }
.subpage h1 { font-size: clamp(2.2rem, 4.6vw, 3.4rem); letter-spacing: -.015em; margin-bottom: 1rem; }
.sub-intro { font-size: 1.15rem; color: var(--quiet); max-width: 40rem; margin-bottom: 3rem; }
.sub-draft {
  display: inline-block;
  font: 500 .75rem/1.4 var(--mono);
  letter-spacing: .04em;
  color: var(--terra-text);
  border: 1.5px dashed var(--terra);
  border-radius: 10px;
  padding: .55rem .8rem;
  margin-bottom: 2.25rem;
}
.subpage h2 { font-size: 1.6rem; letter-spacing: -.005em; margin-bottom: .6rem; }
.role, .sci, .article { border-top: 1px solid var(--rule); padding: 2rem 0 1.25rem; }
.role-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: .25rem 1.5rem; margin-bottom: .5rem; }
.role-head h2 { margin: 0; }
.role-kind, .article-date { font: 500 .6875rem/1.4 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--quiet); margin: 0; }
.role-fit { font-weight: 600; margin: 1.1rem 0 .4rem; }
.role ul { margin: 0 0 1.1rem; padding-left: 1.2rem; color: var(--quiet); }
.role li { margin-bottom: .3rem; }
.role-apply a { font-weight: 500; }
.placeholder-line { color: var(--quiet); }
.articles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 3rem; }
.article h2 { font-size: 1.35rem; margin: .5rem 0 .5rem; }
.article p { color: var(--quiet); margin-bottom: .5rem; }
.article-more { font-size: .9rem; }

/* Each role gets its print: the kind of person in their element, beside the listing. */
.role { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 2.25rem; align-items: start; }
.role-print { display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; border-radius: 18px; box-shadow: var(--lift-big), 0 0 0 1px var(--rule-soft); background: var(--print); }
.subpage:has(.roles) { max-width: 64rem; }

@media (max-width: 760px) { .role { grid-template-columns: minmax(0, 1fr); gap: 1.25rem; } }
@media (max-width: 640px) {
  .articles { grid-template-columns: minmax(0, 1fr); }
  .subpage { margin-top: 1rem; }
}