/* ------------------------------------------------------------------
   Ta-da / One of Us — shared site stylesheet
   Used by every page on one-of-us.dev. Nothing loads from a third party.
   Drop Raleway woff2 files into /fonts/ before shipping.
   ------------------------------------------------------------------ */

@font-face {
  font-family: "Raleway";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("/fonts/Raleway-Variable.woff2") format("woff2");
}

@font-face {
  font-family: "Lexend Mega";
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url("/fonts/LexendMega-ExtraBold.woff2") format("woff2");
}

:root {
  /* structure */
  --field:        #1e2e28;   /* page field, and the menu dropdown */
  --card:         #18211e;   /* cards, deliberately darker than the field */

  /* text */
  --ink:          rgba(240, 225, 200, 0.92);
  --ink-2:        rgba(240, 225, 200, 0.45);
  --ink-3:        rgba(240, 225, 200, 0.3);

  /* lines */
  --hairline:     rgba(80, 150, 110, 0.2);
  --rule:         rgba(80, 150, 110, 0.6);
  --rule-faint:   rgba(80, 150, 110, 0.08);

  /* accent — interactive only */
  --accent:       rgba(220, 100, 120, 0.8);
  --accent-hover: rgba(226, 116, 134, 0.95);
  --accent-2:     rgba(80, 210, 140, 0.8);

  /* light panel (use sparingly) */
  --light-panel:  #faf7f2;
  --light-ink:    #252010;
  --light-ink-2:  rgba(155, 151, 141, 1);

  /* type scale — built for reading on a page, not for the app */
  --t-xs:   0.8125rem;
  --t-sm:   0.9375rem;
  --t-base: clamp(1.0625rem, 1.0rem + 0.30vw, 1.1875rem);
  --t-h3:   clamp(1.125rem, 1.05rem + 0.45vw, 1.3125rem);
  --t-h2:   clamp(1.375rem, 1.2rem + 0.9vw, 1.75rem);
  --t-h1:   clamp(1.375rem, 1.05rem + 1.5vw, 2rem);

  /* rhythm */
  --measure-wide: 54rem;
  /* the page's side padding. The screenshot row on phones bleeds out by
     exactly this much, so the value lives in one place. */
  --page-gutter: clamp(1rem, 4vw, 2rem);
  --space-1: 0.5rem;
  --space-2: 1rem;
  --space-3: 1.75rem;
  --space-4: 2.75rem;
  --space-5: 4.5rem;
  --radius-lg: 1.5rem;

  /* gaps between page blocks: cards that read as a set, and separate beats */
  --gap-cards: clamp(1.25rem, 3.5vw, 2rem);
  --gap-beats: clamp(3rem, 8vw, 5.5rem);

  /* room left above a card when a jump link scrolls to it */
  --scroll-room: clamp(1rem, 4vw, 2rem);

  /* the pebble mark on this page */
  --mark: rgba(220, 100, 120, 0.85);
}

*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--field);
  color: var(--ink);
  font-family: "Raleway", "Avenir Next", "Segoe UI", system-ui, -apple-system, sans-serif;
  font-size: var(--t-base);
  font-weight: 400;
  line-height: 1.75;
  letter-spacing: 0.04em;
  text-wrap: pretty;
  -webkit-font-smoothing: antialiased;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}

/* ---- headings ---------------------------------------------------- */

h1, h2, h3, h4 {
  font-weight: 600;
  color: var(--ink);
  letter-spacing: 0.015em;
  line-height: 1.28;
  margin: 0;
  text-wrap: balance;
}

h1 { font-size: var(--t-h1); font-weight: 500; }
h2 { font-size: var(--t-h2); margin-block: var(--space-5) var(--space-2); }
h3 { font-size: var(--t-h3); margin-block: var(--space-4) var(--space-1); letter-spacing: 0.03em; }
h4 { font-size: var(--t-base); margin-block: var(--space-3) var(--space-1); letter-spacing: 0.04em; }

h2 + h3 { margin-top: var(--space-3); }

p { margin: 0 0 var(--space-3); }
p:last-child { margin-bottom: 0; }


/* ---- links (the only place the accent appears) ------------------- */

a {
  color: var(--accent);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.22em;
  text-decoration-color: rgba(220, 100, 120, 0.4);
  transition: color 160ms ease, text-decoration-color 160ms ease;
}

a:hover,
a:focus-visible {
  color: var(--accent-hover);
  text-decoration-color: var(--accent-hover);
}

a:focus-visible {
  outline: 2px solid var(--accent-2);
  outline-offset: 3px;
  border-radius: 3px;
}

/* ---- lists and tables (for the document pages) -------------------- */

ul, ol {
  margin: 0 0 var(--space-3);
  padding-left: 1.35em;
}

li { margin-bottom: 0.55em; }
li::marker { color: var(--ink-3); }

table {
  width: 100%;
  border-collapse: collapse;
  margin: 0 0 var(--space-3);
  font-size: var(--t-sm);
}

caption {
  text-align: left;
  color: var(--ink-2);
  font-size: var(--t-sm);
  padding-bottom: var(--space-1);
}

th, td {
  text-align: left;
  vertical-align: top;
  padding: 0.75em 0.9em 0.75em 0;
  border-bottom: 1px solid var(--rule-faint);
}

th {
  font-weight: 600;
  color: var(--ink);
}

td { color: var(--ink-2); }

hr {
  border: 0;
  border-top: 1px solid var(--rule-faint);
  margin: var(--space-5) 0;
}

/* ---- page shell (Ta-da product page) ------------------------------ */

/* Cards on every .page sit --gap-cards apart, so /ta-da and the document
   pages share one spacing. Blocks that are separate beats add their own
   margin on top of it (see .opening). */
.page {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--gap-cards);
  min-height: 100vh;
  padding: 0 var(--page-gutter) clamp(3rem, 9vw, 6rem);
}

.hero-card,
.opening,
.body-card,
.section-card {
  width: 100%;
  max-width: var(--measure-wide);
}

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

.hero-card {
  position: relative;
  background: var(--card);
  border-radius: 0 0 var(--radius-lg) var(--radius-lg);
  padding: clamp(4rem, 11vw, 7rem) clamp(1.5rem, 6vw, 3rem) clamp(3.5rem, 9vw, 5.5rem);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: clamp(2.25rem, 6vw, 3.5rem);
}

.masthead-marks {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(0.75rem, 2.5vw, 1.25rem);
}

.mark {
  display: block;
  width: clamp(3rem, 8vw, 5.5rem);
  height: auto;
  fill: var(--mark);
}

.wordmark {
  display: block;
  width: min(44vw, 20rem);
  height: auto;
  fill: rgb(240, 225, 200);
}

.studio-credit {
  margin: 0;
  font-size: clamp(0.9375rem, 0.9rem + 0.25vw, 1.0625rem);
  letter-spacing: 0.05em;
  color: rgba(240, 225, 200, 0.75);
}

.studio-credit strong {
  font-weight: 700;
  color: var(--ink);
}

.tagline {
  max-width: 20em;
  font-size: clamp(1.125rem, 0.95rem + 0.75vw, 1.5rem);
  font-weight: 700;
  line-height: 1.35;
  letter-spacing: 0.02em;
  color: rgb(240, 225, 200);
}

/* ---- site menu ----------------------------------------------------- */

.site-nav {
  position: absolute;
  top: clamp(1rem, 3.5vw, 1.75rem);
  right: clamp(1rem, 3.5vw, 1.75rem);
  text-align: left;
  z-index: 10;
}

.site-nav-toggle {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  min-height: 2.75rem;
  padding: 0.5rem 0.9rem;
  background: transparent;
  color: var(--ink);
  font-family: inherit;
  font-size: var(--t-sm);
  font-weight: 500;
  letter-spacing: 0.05em;
  border: 1px solid transparent;
  border-radius: 0.75rem;
  cursor: pointer;
  transition: background 160ms ease, border-color 160ms ease;
}

.site-nav-toggle:hover,
.site-nav-toggle:focus-visible {
  background: rgba(80, 150, 110, 0.1);
  border-color: transparent;
}

.site-nav-bars {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  width: 1rem;
}

.site-nav-bars span {
  display: block;
  height: 1px;
  background: rgba(240, 225, 200, 0.7);
}

.site-nav-list {
  position: absolute;
  top: calc(100% + 0.5rem);
  right: 0;
  min-width: 9rem;
  margin: 0;
  padding: 0.5rem;
  list-style: none;
  background: var(--field);
  border: 1px solid var(--hairline);
  border-radius: 0.875rem;
  box-shadow: 0 1.25rem 2.5rem rgba(0, 0, 0, 0.35);
}

.site-nav-list[hidden] { display: none; }

.site-nav-list li { margin: 0; }

.site-nav-list a {
  display: flex;
  align-items: center;
  min-height: 2.75rem;
  padding: 0.35rem 0.6rem;
  font-size: var(--t-xs);
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: 0.045em;
  border-radius: 0.5rem;
  text-decoration: none;
}

.site-nav-list a:hover,
.site-nav-list a:focus-visible,
.site-nav-list a[aria-current="page"] {
  background: rgba(80, 150, 110, 0.1);
}

/* ---- body sections ------------------------------------------------ */

/* The opening lines are a separate beat from the masthead above and the
   cards below, so they keep the wide spacing: margin tops the page's card
   gap up to exactly --gap-beats. Flex items do not collapse margins. */
.opening {
  margin-block: calc(var(--gap-beats) - var(--gap-cards));
  padding: clamp(0.5rem, 3vw, 2rem) clamp(1rem, 5vw, 3rem);
  text-align: center;
}

.opening p {
  margin: 0;
  font-size: clamp(1rem, 0.95rem + 0.35vw, 1.1875rem);
  line-height: 1.55;
  letter-spacing: 0.02em;
}

.body-card,
.section-card {
  background: var(--card);
  border-radius: var(--radius-lg);
  padding: clamp(2.25rem, 7vw, 4rem) clamp(1.5rem, 7vw, 4.5rem);
}

/* Card 2 is a stack of separate beats, so one flex gap spaces them evenly.
   Its bottom padding is two thirds of the room the links' old top: -15px
   nudge used to leave below them, tightened on device. */
.body-card {
  display: flex;
  flex-direction: column;
  gap: clamp(1rem, 2vw, 1.375rem);
  padding-bottom: calc((clamp(2.25rem, 7vw, 4rem) + 0.9375rem) * 2 / 3);
}

.body-card p {
  margin: 0;
  line-height: 1.7;
  letter-spacing: 0.03em;
}

.body-card .statement {
  font-weight: 700;
}

/* The top margin is the old clamp(1.5rem, 4vw, 2.5rem) with the former
   top: -15px nudge folded in, so the links sit where they were tuned
   without relative positioning. */
.body-card-links {
  margin: clamp(0.5625rem, 4vw - 0.9375rem, 1.5625rem) 0 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: clamp(1.25rem, 4vw, 2.5rem);
}

.body-card-links li { margin: 0; }

.body-card-links a {
  line-height: 1.7;
  letter-spacing: 0.03em;
  font-weight: 600;
  text-decoration: none;
}

/* ---- section cards (The essence, The nuts and bolts) --------------- */
/* The same card as .body-card, but block rather than flex: a heading,
   paragraphs and a list each carry their own margins, and a flex gap
   would flatten them to one value. Same reasoning as .doc-card. */

.section-card { scroll-margin-top: var(--scroll-room); }

.section-card > :first-child { margin-top: 0; }
.section-card > :last-child  { margin-bottom: 0; }

.section-card p,
.section-card li {
  line-height: 1.7;
  letter-spacing: 0.03em;
}

.section-card li { margin-bottom: var(--space-2); }
.section-card li:last-child { margin-bottom: 0; }

/* These numbers carry meaning ("three things"), so they sit at the
   secondary ink rather than the faint marker colour used for bullets. */
.section-card li::marker { color: var(--ink-2); }

/* ---- a look inside (the screenshots on /ta-da) ---------------------- */
/* Three store frames side by side. Below 40rem they become a row you
   swipe, bleeding to the screen edges so the next frame peeks in. The
   bleed cancels --page-gutter exactly, which is why the gutter is a
   token. The frames bring their own parchment backdrop, so the section
   sits on the page field with no card behind it. Each frame is a link to
   its full-size image; screens.js opens it in the enlarged view below. */

.screens-section {
  width: 100%;
  max-width: var(--measure-wide);
}

.screens {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(1rem, 3vw, 1.5rem);
  margin: 0;
  padding: 0;
  list-style: none;
}

.screens li { margin: 0; }

.screens img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 0.875rem;
}

.screens a {
  display: block;
  border-radius: 0.875rem;
  cursor: zoom-in;
}

.screens a:focus-visible {
  outline-offset: 4px;
  border-radius: 0.875rem;
}

@media (max-width: 40rem) {
  .screens {
    grid-template-columns: none;
    grid-auto-flow: column;
    grid-auto-columns: 72%;
    margin-inline: calc(var(--page-gutter) * -1);
    padding-inline: var(--page-gutter);
    scroll-padding-inline: var(--page-gutter);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
  }
  .screens::-webkit-scrollbar { display: none; }
  .screens li { scroll-snap-align: start; }
}

/* ---- the enlarged view (screens.js) --------------------------------- */
/* A <dialog> that fills the screen. Clicks on its empty area land on the
   dialog itself, which is how a tap outside the image closes it. The
   image takes the screen's height, or its width on a narrow screen:
   2.1727 is the frames' height over width (2868 / 1320). */

.viewer {
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--ink);
}

.viewer[open] {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
}

.viewer::backdrop { background: rgba(10, 14, 12, 0.88); }

html:has(.viewer[open]) { overflow: hidden; }

.viewer-img {
  display: block;
  width: auto;
  height: min(calc(100vh - 8rem), calc((100vw - 2rem) * 2.1727));
  height: min(calc(100dvh - 8rem), calc((100vw - 2rem) * 2.1727));
  border-radius: 1.25rem;
}

.viewer-count {
  margin: 0;
  font-size: var(--t-xs);
  letter-spacing: 0.06em;
  color: var(--ink-2);
}

.viewer-btn {
  position: fixed;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  padding: 0;
  border: 1px solid var(--hairline);
  border-radius: 50%;
  background: rgba(24, 33, 30, 0.85);
  color: var(--ink);
  cursor: pointer;
  transition: color 160ms ease, border-color 160ms ease;
}

.viewer-btn svg {
  width: 1.125rem;
  height: 1.125rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.25;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.viewer-btn:hover,
.viewer-btn:focus-visible {
  color: var(--accent-hover);
  border-color: rgba(220, 100, 120, 0.4);
}

.viewer-btn:focus-visible {
  outline: 2px solid var(--accent-2);
  outline-offset: 3px;
}

.viewer-close { top: var(--page-gutter); right: var(--page-gutter); }
.viewer-prev,
.viewer-next { top: 50%; transform: translateY(-50%); }
.viewer-prev { left: var(--page-gutter); }
.viewer-next { right: var(--page-gutter); }

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

.site-foot {
  border-top: 1px solid var(--rule-faint);
  padding-block: var(--space-4);
  text-align: center;
  color: rgb(240, 225, 200);
  font-size: var(--t-sm);
  letter-spacing: 0.06em;
}

.site-foot p { margin: 0; }
.site-foot p + p { margin-top: var(--space-1); }

/* ---- utilities ------------------------------------------------------ */

.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

::selection {
  background: rgba(80, 210, 140, 0.25);
  color: rgba(240, 225, 200, 1);
}

/* ---- document pages (support, privacy, delete-account) -------------- */
/* Replaces the previous block of the same name at the end of ta-da.css. */

/* Narrower than the home page. 54rem of prose is a ~110 character line;
   a document wants 65 to 75. Applied to the whole page so the cards stay
   the same width as each other. */
.page-doc .hero-card,
.page-doc .doc-card,
.page-doc .site-foot {
  max-width: 46rem;
}

/* Room for the corner mark, which the home page's masthead does not need. */
.page-doc .hero-card {
  padding-top: clamp(6.5rem, 14vw, 9rem);
  padding-bottom: clamp(2.5rem, 7vw, 4rem);
  gap: clamp(1rem, 2.5vw, 1.5rem);
}

/* ---- corner mark (mirrors .site-nav on the left) -------------------- */

.page-mark {
  position: absolute;
  top: clamp(1rem, 3.5vw, 1.75rem);
  left: clamp(1rem, 3.5vw, 1.75rem);
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 0.5rem;
  padding: 0.25rem;
  border-radius: 0.5rem;
  min-height: 2.75rem;
  text-decoration: none;
  opacity: 0.85;
  transition: opacity 160ms ease;
  z-index: 10;
}

.page-mark:hover,
.page-mark:focus-visible {
  opacity: 1;
  text-decoration: none;
}

.page-mark .mark     { width: 1.5rem; }
.page-mark .wordmark { width: 5rem; }

/* ---- page title and intro (take the masthead's place) --------------- */

.page-title {
  font-family: "Lexend Mega", "Raleway", sans-serif;
  font-size: clamp(1.125rem, 0.8rem + 1.35vw, 2.1rem);
  font-weight: 800;
  line-height: 1.25;
  letter-spacing: 0;
  color: rgb(240, 225, 200);
}

/* The line break here is written into the markup, not left to wrapping,
   so it always falls between the two sentences. */
.page-intro {
  margin: 0;
  max-width: 30em;
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.55;
  letter-spacing: 0.02em;
  color: var(--ink);
}

/* ---- document card -------------------------------------------------- */
/* Block, not flex: headings and paragraphs carry their own margins and a
   flex gap would flatten them all to one value. */

.doc-card {
  --card-pad-block: clamp(2rem, 6vw, 3.25rem);
  width: 100%;
  background: var(--card);
  border-radius: var(--radius-lg);
  padding: var(--card-pad-block) clamp(1.5rem, 6vw, 3.25rem);
}

.doc-card > :first-child { margin-top: 0; }
.doc-card > :last-child  { margin-bottom: 0; }

/* First heading in a card opens the card, so it does not need the large
   space-above that separates sections within one. */
.doc-card > h2:first-child { margin-block-start: 0; }

/* A jump link to a heading that opens its card should land with the whole
   card in view, the way /ta-da's section cards do. The heading sits below
   the card's top padding, so it asks for that padding on top of the room.
   It outranks the general heading rule further down by specificity, not by
   position, so moving either rule does not change which one wins. */
.doc-card > h2:first-child {
  scroll-margin-top: calc(var(--scroll-room) + var(--card-pad-block));
}

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

.site-foot {
  width: 100%;
  background: transparent;
  border-top: 1px solid var(--rule-faint);
  margin-top: clamp(1rem, 3vw, 2rem);
}

.site-foot strong {
  font-weight: 700;
  color: rgb(240, 225, 200);
}

.site-foot a {
  color: rgb(220, 100, 120);
  text-decoration-color: rgba(220, 100, 120, 0.5);
}

.site-foot a:hover,
.site-foot a:focus-visible {
  color: var(--accent-hover);
  text-decoration-color: var(--accent-hover);
}

/* ---- privacy / long-document additions ------------------------------ */
/* Append to the end of ta-da.css.                                       */

/* Anchors should not land flush against the top of the viewport. */
.doc-card h2,
.doc-card h3 { scroll-margin-top: var(--scroll-room); }

/* ---- jump list ------------------------------------------------------ */

.jump-list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.05rem;
}

.jump-list li { margin: 0; }

.jump-list a {
  display: block;
  padding: 0.2rem 0;
  font-size: var(--t-sm);
  text-decoration: none;
}

.jump-list a:hover,
.jump-list a:focus-visible { text-decoration: underline; }

/* ---- effective date -------------------------------------------------- */

.effective-date { font-weight: 400; color: var(--ink-2); }

/* ---- provider table -------------------------------------------------- */
/* Three columns do not fit a phone. Below 34rem each row becomes a block
   and the column headings are re-attached to each cell via data-label. */

.table-wrap { margin-block: var(--space-2) var(--space-3); }

.doc-card table th[scope="row"] {
  font-weight: 700;
  white-space: nowrap;
  padding-right: 1rem;
}

@media (max-width: 34rem) {
  .doc-card table,
  .doc-card tbody,
  .doc-card tr,
  .doc-card th,
  .doc-card td { display: block; width: 100%; }

  .doc-card thead {
    position: absolute;
    width: 1px; height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
  }

  .doc-card tbody tr {
    padding: var(--space-2) 0;
    border-bottom: 1px solid var(--rule-faint);
  }
  .doc-card tbody tr:last-child { border-bottom: 0; }

  .doc-card tbody th,
  .doc-card tbody td {
    padding: 0 0 0.5rem;
    border: 0;
    white-space: normal;
  }
  .doc-card tbody tr > :last-child { padding-bottom: 0; }

  .doc-card tbody td::before {
    content: attr(data-label);
    display: block;
    margin-bottom: 0.15rem;
    font-size: var(--t-xs);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--ink-3);
  }

  .doc-card tbody th[scope="row"] {
    font-size: var(--t-base);
    color: var(--ink);
  }
}

/* ---- numbered steps (account deletion) ------------------------------ */
/* Append to the end of ta-da.css.                                       */

.steps {
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: step;
}

.steps li {
  counter-increment: step;
  position: relative;
  margin: 0 0 var(--space-3);
  padding-left: 2.5rem;
}

.steps li:last-child { margin-bottom: 0; }

.steps li::before {
  content: counter(step);
  position: absolute;
  left: 0;
  top: 0.15em;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.625rem;
  height: 1.625rem;
  border: 1px solid var(--hairline);
  border-radius: 50%;
  background: rgba(80, 150, 110, 0.16);
  font-size: var(--t-xs);
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0;
  color: var(--ink);
}

/* ---- "back to the full picture" (privacy page only) ----------------- */
/* Append to the end of ta-da.css.                                      */
/* In flow as each card's last element, pushed right by margin-left:auto.
   Not absolutely positioned: the short cards would overlap their own
   text, and reflow would move it unpredictably. */

.to-contents {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  margin: var(--space-3) 0 0 auto;
  border: 1px solid var(--hairline);
  border-radius: 50%;
  color: var(--accent);
  text-decoration: none;
  transition: color 160ms ease, border-color 160ms ease, background 160ms ease;
}

.to-contents svg {
  width: 1rem;
  height: 1rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.to-contents:hover,
.to-contents:focus-visible {
  color: var(--accent-hover);
  border-color: rgba(220, 100, 120, 0.4);
  background: rgba(220, 100, 120, 0.08);
  text-decoration: none;
}

.to-contents:focus-visible { border-radius: 50%; }

/* ---- One of Us studio page ------------------------------------------ */
/* Append to the end of ta-da.css.                                       */
/* A different visual language built from the same parts: only the       */
/* palette and the face swap, via custom properties on <body>.           */

@font-face {
  font-family: "Work Sans";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("/fonts/WorkSans-Variable.woff2") format("woff2");
}

.studio {
  --field:      #c5f4e6;
  --card:       #8f5645;
  --ink:        #8f5645;
  --card-ink:   #c5f4e6;
  --logo-ink:   #8f5645;
  --logo-field: #c5f4e6;

  background: var(--field);
  color: var(--ink);
  font-family: "Work Sans", "Avenir Next", "Segoe UI", system-ui, sans-serif;
  letter-spacing: 0.02em;
}

.studio-page {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(2.5rem, 7vw, 4.5rem);
  min-height: 100vh;
  padding: clamp(3rem, 9vw, 6rem) clamp(1.25rem, 5vw, 2.5rem) clamp(3rem, 9vw, 6rem);
  text-align: center;
}

/* ---- logotype -------------------------------------------------------- */

.studio-mark { margin: 0; }

.studio-logo {
  display: block;
  width: clamp(6.5rem, 16vw, 10rem);
  height: auto;
}

/* ---- statement ------------------------------------------------------- */

.studio-statement {
  margin: 0;
  width: 100%;
  max-width: 32em;
  font-size: clamp(1.0625rem, 0.7rem + 1.15vw, 1.625rem);
  font-weight: 400;
  line-height: 1.3;
  letter-spacing: 0;
}

/* Each line carries its own tracking so the three come out the same width.
   Computed, then tuned by eye. Current target is 25.49em, set by line 2 at
   0.028em; the three land within 0.076em of each other. To retune, pick a
   line, then solve the others as (target - bare) / characters. Bare widths
   are 18.29em (36 chars), 24.11em (48), 22.01em (44).
   The negative margin cancels the trailing space letter-spacing adds after
   the final character, which would otherwise pull the centring left. */
.studio-statement span {
  letter-spacing: var(--ls);
  margin-right: calc(var(--ls) * -1);
}

.studio-statement .s1 { --ls: 0.200em; font-weight: 700; }
.studio-statement .s2 { --ls: 0.028em; }
.studio-statement .s3 { --ls: 0.080em; }

/* Below this the block cannot hold one line per sentence at a readable size:
   the longest line needs a 13px font to fit a 390px phone. So the forced
   breaks collapse and it flows as an ordinary paragraph instead. */
@media (max-width: 34rem) {
  .studio-statement br { display: none; }
  .studio-statement span {
    --ls: 0.03em;
    margin-right: 0;
  }
  .studio-statement {
    max-width: 24em;
    line-height: 1.6;
  }
}

/* ---- cards ----------------------------------------------------------- */

.studio-cards {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: stretch;
  gap: clamp(1rem, 2.5vw, 1.5rem);
  width: 100%;
  max-width: 52rem;
}

.studio-card {
  flex: 1 1 18rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.55rem;
  padding: clamp(1.1rem, 3vw, 1.4rem) clamp(1.25rem, 4vw, 1.75rem);
  background: var(--card);
  border-radius: 0.75rem;
  color: var(--card-ink);
}

.studio-card-title {
  margin: 0 0 0.35rem;
  font-size: clamp(0.9375rem, 0.85rem + 0.35vw, 1.125rem);
  font-weight: 700;
  letter-spacing: 0.16em;
  color: var(--card-ink);
}

.studio-card-link { margin: 0; }

.studio-card-link a {
  color: var(--card-ink);
  text-decoration: underline;
  text-decoration-color: rgba(197, 244, 230, 0.5);
  text-underline-offset: 0.22em;
  font-size: clamp(0.9375rem, 0.9rem + 0.25vw, 1.0625rem);
  font-weight: 600;
}

.studio-card-link a:hover,
.studio-card-link a:focus-visible {
  color: #fff;
  text-decoration-color: #fff;
}

.studio-card-link a:focus-visible {
  outline: 2px solid var(--card-ink);
  outline-offset: 3px;
}

.studio-where {
  margin: 0;
  font-weight: 500;
  font-size: clamp(0.875rem, 0.85rem + 0.2vw, 0.9375rem);
  line-height: 1.6;
  letter-spacing: 0.03em;
}

/* ---- Ta-da tile ------------------------------------------------------ */
/* Real Ta-da brand values, not approximations of them: the tile field is
   the app icon green, the wordmark is rgb(240,225,200), the pebble is the
   Forest accent. */

.tada-tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.4rem;
  padding: 0.85rem 1.5rem 0.7rem;
  background: #1e2e28;
  border-radius: 0.6rem;
  text-decoration: none;
  transition: transform 160ms ease;
}

.tada-tile:hover,
.tada-tile:focus-visible { transform: translateY(-2px); }

.tada-tile:focus-visible {
  outline: 2px solid var(--card-ink);
  outline-offset: 3px;
}

.tada-tile-marks {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 0.5rem;
}

.tada-tile .mark {
  width: 2rem;
  height: auto;
  fill: rgba(220, 100, 120, 0.9);
}

.tada-tile .wordmark {
  width: 7.5rem;
  height: auto;
  fill: rgb(240, 225, 200);
}

.tada-tile-line {
  font-family: "Raleway", "Work Sans", sans-serif;
  font-size: 0.6875rem;
  letter-spacing: 0.04em;
  color: rgba(240, 225, 200, 0.75);
}