/* nameless ai: rebuilt from the 2020 Squarespace site (same fonts, sizes and colors) */

/* Poppins (Latin), served from this site rather than Google Fonts, so pages
   load nothing from other companies' servers. License: /fonts/OFL.txt */
@font-face { font-family: "Poppins"; font-weight: 300; font-display: swap; src: url(/fonts/poppins-300.woff2) format("woff2"); }
@font-face { font-family: "Poppins"; font-weight: 500; font-display: swap; src: url(/fonts/poppins-500.woff2) format("woff2"); }
@font-face { font-family: "Poppins"; font-weight: 700; font-display: swap; src: url(/fonts/poppins-700.woff2) format("woff2"); }

:root {
  --dark: #38383b;
  --paper: #fff;           /* text on photos */
  --bg: #fff;              /* page surface: row + footer */
  --fg: #000;
  --gutter: max(20px, 4vw);
  --display: clamp(2.4rem, 4.6vw, 4.15rem);
  color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scrollbar-width: none; }  /* page still scrolls, no bar */
::-webkit-scrollbar { display: none; }                          /* older Safari */
body {
  margin: 0;
  font: 300 16px/1.8 "Poppins", system-ui, sans-serif;
  color: var(--fg);
  background: var(--bg);
}
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
h1, h2, h3 { margin: 0; font-weight: 500; }
p { margin: 0; }
strong { font-weight: 700; }

.skip { position: absolute; left: -9999px; }
.skip:focus { left: var(--gutter); top: 12px; z-index: 20; }

/* ---------- header (sits on top of the hero) ---------- */
.site-header {
  position: absolute; inset: 0 0 auto; z-index: 10;
  display: flex; align-items: center;
  padding: 43px var(--gutter);
  color: var(--paper);
}
.logo img { width: 272px; }
/* Poppins' "a" starts 0.037em inside its box: nudge the logo right by the same
   amount so it lines up with the first letter of the headings below */
.logo { margin-left: calc(var(--display) * 0.037); }

/* ---------- full-bleed image hero ---------- */
.hero {
  position: relative; isolation: isolate;
  display: flex; flex-direction: column; justify-content: center;
  min-height: 80vh;
  padding: 140px var(--gutter) 80px;
  color: var(--paper);
  background: var(--dark);
}
.hero > .bg {
  position: absolute; inset: 0; z-index: -2;
  width: 100%; height: 100%; object-fit: cover;
}
.hero::before {                     /* darkens the photo a touch */
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: rgb(56 56 59 / 0.15);
}
.hero h1 { font-size: var(--display); line-height: 1.23; max-width: 16em; }

/* ---------- home: image / text row ---------- */
.rows { padding: 115px var(--gutter) 130px; display: grid; gap: 100px; }
.row { display: grid; grid-template-columns: 1fr 1fr; gap: 9vw; align-items: center; }
.row h2 { font-size: var(--display); line-height: 1.23; margin-bottom: 0.5em; }
.row p { max-width: 37em; }
.row .est { font-weight: 500; letter-spacing: 0.05em; }
.row--flip .row-img { order: 2; }

/* ---------- footer ---------- */
/* the "in" icon reads as a word, so the fine print sits on its baseline (the
   bottom of the "in"), not on its centre; align-content centres that line */
.site-footer {
  display: flex; flex-wrap: wrap; align-items: baseline; align-content: center;
  justify-content: space-between;
  padding: 24px var(--gutter); min-height: 90px;
}
.fineprint { font-size: 0.625rem; letter-spacing: 0.04em; }
.fineprint .dot { margin-inline: 0.75em; }
.fineprint a { text-decoration: none; white-space: nowrap; }
.fineprint a:hover, .fineprint a:focus-visible { text-decoration: underline; text-underline-offset: 0.25em; }
.social { display: flex; gap: 14px; }
/* the icon's viewBox is cropped to the glyph, so its box ends where the "in" does */
.social a { display: block; width: 20px; height: 19px; }
.social svg { display: block; width: 100%; height: 100%; fill: currentColor; }

/* ---------- privacy policy ---------- */
/* a white page, set like letterhead: dark logo on the left, the title on the
   right on the logo's baseline, over a full-width rule */
.site-header--ink {
  position: static; color: var(--fg);
  flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 12px 24px;
  margin-inline: var(--gutter); padding-inline: 0; border-bottom: 1px solid var(--fg);
}
/* the logo's letters end 26/883 of its width above the image's bottom edge (the
   dots hang lower): pull the box up so it ends on their baseline */
.site-header--ink .logo img { margin-bottom: -2.945%; }
.site-header--ink h1 { margin-left: auto; font-size: 1.25rem; line-height: 1.2; }
/* one section per row, on the home row's grid: title on the left, text on the right */
.legal { padding: 0 var(--gutter) 130px; }
.legal section {
  display: grid; grid-template-columns: 1fr 1fr; column-gap: 9vw; align-items: baseline;
  padding-block: 48px; border-top: 1px solid rgb(0 0 0 / 0.12);
}
/* the intro spans the top of the body: the date, then the text, full width */
.legal .intro { display: block; border-top: 0; padding-top: 72px; }
.legal .intro + section { border-top: 0; }   /* no rule under the intro */
.legal .updated { letter-spacing: 0.05em; }
.legal section > div { max-width: 40em; }
.legal h2 { font-size: 1.25rem; line-height: 1.4; text-wrap: balance; }
.legal p + p, .legal p + ul, .legal ul + p { margin-top: 1em; }
.legal ul { margin: 0; padding-left: 1.4em; list-style-type: "–  "; }
.legal li + li { margin-top: 0.4em; }
.legal strong { font-weight: 500; }
.legal a { text-underline-offset: 0.2em; }

/* narrower screens: each title sits above its text */
@media (max-width: 1000px) {
  .legal section { grid-template-columns: minmax(0, 40em); row-gap: 0.9em; padding-block: 40px; }
  .legal .intro { padding-top: 56px; }
}

/* ---------- phones and small tablets ---------- */
@media (max-width: 800px) {
  .site-header { padding-block: 24px; }
  .logo img { width: 170px; }
  .hero { min-height: 70vh; padding-top: 110px; }
  .site-header--ink h1 { font-size: 1rem; }
  .legal .intro { padding-top: 40px; }
  .legal { padding-bottom: 72px; }
  .legal section { padding-block: 32px; }
  .rows { padding-block: 70px 80px; gap: 70px; }
  .row { grid-template-columns: 1fr; gap: 32px; }
  .row--flip .row-img { order: 0; }
}