:root {
  --ink: #0b1110;
  --ink-soft: #131b19;
  --forest: #173a35;
  --paper: #f2eee5;
  --paper-bright: #fbf9f3;
  --paper-deep: #ded6c7;
  --muted: #65706b;
  --clay: #a7543b;
  --wine: #653344;
  --gold: #c9a95b;
  --white: #fff;
  --line: rgba(11, 17, 16, 0.18);
  --max: 1180px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; background: var(--ink); }
body {
  margin: 0;
  background: var(--paper-bright);
  color: var(--ink);
  font-family: "Inter", Arial, sans-serif;
  font-size: 16px;
  line-height: 1.72;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
a { color: inherit; }
:focus-visible { outline: 2px solid var(--gold); outline-offset: 4px; }

.masthead {
  position: sticky;
  top: 0;
  z-index: 40;
  min-height: 74px;
  display: flex;
  align-items: center;
  background: var(--ink);
  color: var(--white);
}
.masthead-inner {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 34px;
  padding: 0 3.2vw;
}
.mark {
  flex: 0 0 auto;
  line-height: 1;
  text-decoration: none;
}
.mark img {
  width: 106px;
  height: auto;
  max-width: none;
  margin: -12px -9px;
}
.masthead-nav { display: flex; gap: 26px; margin-left: auto; }
.masthead-nav a {
  color: rgba(255, 255, 255, 0.72);
  font-size: 12px;
  font-weight: 600;
  text-decoration: none;
}
.masthead-nav a:hover { color: var(--white); }
.entity {
  padding-left: 26px;
  border-left: 1px solid rgba(255, 255, 255, 0.2);
  color: rgba(255, 255, 255, 0.46);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.instrument {
  width: min(var(--max), calc(100% - 10vw));
  margin: 0 auto;
  padding: clamp(74px, 8vw, 120px) 0 clamp(72px, 8vw, 118px);
}
.eyebrow {
  margin: 0 0 24px;
  color: var(--clay);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
.instrument > h1 {
  overflow-wrap: anywhere;
  max-width: 1080px;
  margin: 0;
  font-family: "Fraunces", Georgia, serif;
  font-size: clamp(4.7rem, 9.4vw, 9.5rem);
  font-weight: 500;
  letter-spacing: -0.045em;
  line-height: 0.86;
}
.standfirst,
.lead-in {
  max-width: 820px;
  margin: 30px 0 0 auto;
  color: var(--muted);
  font-family: "Fraunces", Georgia, serif;
  font-size: clamp(1.55rem, 2.8vw, 2.65rem);
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1.25;
}
.legal-safety-action { display: flex; align-items: baseline; justify-content: space-between; gap: 24px; margin: 40px 0 0; padding: 22px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.legal-safety-action span { color: var(--muted); font-size: 14px; }
.legal-safety-action a { color: var(--clay); font-size: 14px; font-weight: 750; text-underline-offset: 4px; }

.control {
  display: flex;
  flex-wrap: wrap;
  gap: 19px clamp(34px, 4.6vw, 74px);
  margin: clamp(44px, 4.8vw, 64px) 0 0;
  padding: 17px 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.control > div { padding: 0; border: 0; }
.control dt {
  margin-bottom: 5px;
  color: var(--clay);
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}
.control dd { margin: 0; color: var(--ink); font-size: 13px; line-height: 1.55; }

.contents {
  margin: clamp(58px, 6.4vw, 96px) 0 0;
  padding-top: 26px;
  border-top: 1px solid var(--ink);
}
.contents h2 {
  margin: 0 0 26px;
  font-family: "Fraunces", Georgia, serif;
  font-size: clamp(3.3rem, 6vw, 6rem);
  font-weight: 500;
  letter-spacing: -0.04em;
  line-height: 0.95;
}
.contents ol { margin: 0; padding: 0; list-style: none; columns: 2; column-gap: 7vw; }
.contents li { break-inside: avoid; display: grid; grid-template-columns: 42px 1fr; gap: 18px; padding: 8px 0; }
.contents a { color: var(--muted); font-size: 13px; text-decoration: none; }
.contents a:hover { color: var(--ink); }
.cnum {
  color: var(--clay);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.docs {
  margin: clamp(52px, 5.6vw, 84px) 0 0;
  padding: 0;
  border-top: 1px solid var(--ink);
  list-style: none;
}
.docs li { border-bottom: 1px solid var(--line); }
.docs a {
  display: grid;
  grid-template-columns: minmax(95px, 0.25fr) minmax(0, 1.5fr) auto;
  gap: 5vw;
  align-items: baseline;
  padding: 35px 0 39px;
  text-decoration: none;
}
.doc-title {
  display: block;
  font-family: "Fraunces", Georgia, serif;
  font-size: clamp(2.2rem, 4vw, 4.3rem);
  font-weight: 500;
  letter-spacing: -0.04em;
  line-height: 0.98;
}
.doc-desc { display: block; max-width: 720px; margin-top: 14px; color: var(--muted); font-size: 14px; line-height: 1.65; }
.doc-meta { color: var(--muted); font-size: 10px; font-weight: 700; letter-spacing: 0.09em; text-transform: uppercase; }
.docs a:hover .doc-title { color: var(--clay); }

.clause {
  scroll-margin-top: 105px;
  margin-top: clamp(62px, 6.8vw, 100px);
  padding-top: 26px;
  border-top: 1px solid var(--ink);
}
.clause h2 {
  display: grid;
  grid-template-columns: 80px minmax(0, 1fr);
  gap: 28px;
  align-items: baseline;
  margin: 0 0 30px;
  font-family: "Fraunces", Georgia, serif;
  font-size: clamp(2.5rem, 4.4vw, 4.4rem);
  font-weight: 500;
  letter-spacing: -0.04em;
  line-height: 0.98;
}
.clause h2 .cnum { font-family: "Inter", Arial, sans-serif; }
.c {
  display: grid;
  grid-template-columns: minmax(0, 760px);
  justify-content: end;
  margin-top: 27px;
}
.ctext { color: #37413e; }

/* Guidance carries no section numbers, so there is no first column to fill. Without this the
   heading and the body are squeezed into the 80px number column, one word per line. */
.clause--plain h2 { grid-template-columns: minmax(0, 1fr); gap: 0; }
/* Numbered clauses indent the body past the number in the gutter. With no number there is nothing
   to clear, so the text starts under its own heading instead of beside an empty column. */
.clause--plain .c { justify-content: start; }
.contents--plain li { grid-template-columns: minmax(0, 1fr); gap: 0; }
.ctext p { margin: 0; }
.ctext ul,
.ctext ol { margin: 18px 0; padding-left: 1.4rem; }
.ctext li + li { margin-top: 8px; }
.xref,
.ctext a,
.defs a { color: var(--clay); text-decoration-thickness: 1px; text-underline-offset: 3px; }
.ctext strong { color: var(--ink); }
/* The N.J. and Tex. Internet Dating Safety Acts require this one disclosure in bold, capital
   letters, at least 12-point type. A narrow viewport otherwise drops body text to 15px (~11.25pt,
   see the 680px breakpoint below), so the size is pinned here rather than inherited. */
.statutory-notice { font-size: 16px; }

.defs { display: grid; grid-template-columns: minmax(160px, 0.42fr) minmax(0, 1fr); gap: 0 35px; margin: 28px 0; border-top: 1px solid var(--line); }
.defs dt,
.defs dd { margin: 0; padding: 16px 0; border-bottom: 1px solid var(--line); }
.defs dt { color: var(--ink); font-weight: 700; }
.defs dd { color: #46504d; }

.callout,
.disclaimer {
  margin: 38px 0;
  padding: 34px 38px;
  background: var(--forest);
  color: rgba(255, 255, 255, 0.78);
}
.callout .label,
.disclaimer .label {
  display: block;
  margin-bottom: 15px;
  color: var(--gold);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.callout p,
.disclaimer p { margin: 0; }
.callout a,
.disclaimer a { color: var(--white); }

.colophon {
  margin-top: clamp(58px, 6.4vw, 96px);
  padding-top: 22px;
  border-top: 1px solid var(--ink);
}
.colophon p { max-width: 780px; margin: 0; color: var(--muted); font-size: 12px; line-height: 1.65; }

.site-footer { padding: 70px 5vw 34px; background: var(--ink); color: var(--white); }
.site-footer-inner { width: 100%; max-width: 1400px; margin: 0 auto; }
.site-footer nav { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 15px 30px; }
.site-footer a { color: rgba(255, 255, 255, 0.68); font-size: 12px; font-weight: 600; text-decoration: none; }
.site-footer a:hover { color: var(--white); }
.notice {
  display: block;
  margin-top: 65px;
  padding-top: 22px;
  border-top: 1px solid rgba(255, 255, 255, 0.16);
  color: #858887;
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

@media (max-width: 940px) {
  .masthead-nav { display: none; }
  .entity { margin-left: auto; }
  .control { grid-template-columns: 1fr; }
  .control > div:nth-child(odd),
  .control > div:nth-child(even) { padding-right: 0; padding-left: 0; border-left: 0; }
  .docs a { grid-template-columns: 85px minmax(0, 1fr) auto; gap: 28px; }
}

@media (max-width: 680px) {
  body { font-size: 15px; }
  .masthead { min-height: 64px; }
  .masthead-inner { padding: 0 20px; }
  .mark img { width: 98px; margin: -11px -8px; }
  .entity { max-width: 160px; padding-left: 15px; font-size: 8px; line-height: 1.35; text-align: right; }
  .instrument { width: calc(100% - 44px); padding: 92px 0 110px; }
  .instrument > h1 { font-size: clamp(4rem, 20vw, 6.2rem); }
  .standfirst,
  .lead-in { margin-top: 32px; font-size: clamp(1.45rem, 7vw, 2.1rem); }
  .legal-safety-action { align-items: flex-start; flex-direction: column; gap: 10px; margin-top: 42px; }
  .control { margin-top: 46px; gap: 16px 30px; }
  .contents { margin-top: 58px; }
  .contents ol { columns: 1; }
  .docs { margin-top: 52px; }
  .docs a { grid-template-columns: 1fr auto; gap: 11px 20px; padding: 28px 0 31px; }
  .docs a > .cnum { grid-column: 1 / -1; }
  .doc-title { font-size: clamp(2.1rem, 11vw, 3.2rem); }
  .doc-desc { font-size: 13px; }
  .clause { margin-top: 62px; }
  .clause h2 { display: block; margin-bottom: 26px; font-size: clamp(2.1rem, 9vw, 3rem); }
  .clause h2 .cnum { display: block; margin-bottom: 12px; }
  .c { grid-template-columns: minmax(0, 1fr); margin-top: 24px; }
  .defs { grid-template-columns: 1fr; }
  .defs dt { padding-bottom: 4px; border-bottom: 0; }
  .defs dd { padding-top: 0; }
  .callout,
  .disclaimer { margin-left: -50px; padding: 30px 24px; }
  .site-footer { padding: 62px 22px 28px; }
  .site-footer nav { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 22px; }
  .notice { margin-top: 52px; }
}

@media print {
  .masthead,
  .site-footer,
  .skip-link,
  .doc-meta { display: none; }
  body { background: #fff; color: #000; font-size: 11pt; }
  .instrument { width: 100%; padding: 0; }
  .instrument > h1 { font-size: 38pt; }
  .standfirst,
  .lead-in { font-size: 15pt; }
  .clause { break-inside: avoid; margin-top: 36pt; }
  .clause h2 { font-size: 20pt; }
  a { color: #000 !important; text-decoration: none !important; }
}

@media (max-width: 430px) {
  .instrument:not(.policy-document) > h1 { font-size: clamp(2.75rem, 15.5vw, 4rem); }
}


.skip-link {
  position: fixed;
  z-index: 100;
  top: 10px;
  left: 10px;
  padding: 10px 14px;
  background: var(--paper-bright);
  color: var(--ink);
  transform: translateY(-160%);
}
.skip-link:focus { transform: translateY(0); }
.policy-document { width: min(1040px, calc(100% - 10vw)); padding-top: clamp(58px, 6vw, 86px); }
.policy-document > h1 { max-width: 980px; font-size: clamp(2.9rem, 5.2vw, 5.3rem); line-height: 0.95; }
.policy-lead { max-width: 790px; margin: 24px 0 0; color: var(--muted); font-family: "Fraunces", Georgia, serif; font-size: clamp(1.35rem, 2.2vw, 2rem); line-height: 1.35; }
.policy-meta { margin-top: 38px; }
.policy-meta > div:nth-child(even) { border-left: 0; }
.reading-note { display: grid; grid-template-columns: 145px minmax(0, 1fr); gap: 28px; margin: 32px 0 0; padding: 4px 0 4px 22px; border-left: 2px solid #a47a35; }
.reading-note > span { color: #70401f; font-size: 11px; font-weight: 800; letter-spacing: 0.13em; text-transform: uppercase; }
.reading-note p { max-width: 760px; margin: 0; color: #282f2d; font-weight: 600; }
.policy-document .contents { margin-top: 50px; }
.policy-document .contents h2 { font-size: clamp(1.8rem, 2.8vw, 2.8rem); }
.policy-document .clause { margin-top: clamp(50px, 5.2vw, 76px); }
.policy-document .clause h2 { font-size: clamp(1.75rem, 2.75vw, 2.75rem); }
.policy-document .ctext p + p { margin-top: 20px; }
.policy-document .colophon a { color: var(--clay); text-underline-offset: 3px; }
@media (max-width: 680px) {
  .policy-document { width: calc(100% - 44px); }
  .policy-document > h1 { font-size: clamp(2.5rem, 11vw, 3.6rem); }
  .reading-note { grid-template-columns: 1fr; gap: 10px; padding-left: 16px; }
  .policy-document .clause { margin-top: 52px; }
}