/* One Place — legal documents
   Brand green #01812d sampled from the wordmark (assets/One Place Verde.png).
   Type: Jost (geometric, echoes the wordmark) + Literata (screen reading serif).
   No build step, no JS. Every rule here also has to survive print. */

/* ---------- tokens ---------- */

:root{
  color-scheme: light dark;

  --brand:      #01812d;   /* 5.02:1 on white — links, rules, marks */
  --brand-deep: #01631f;   /* 7.49:1 — hover, small text on wash */
  --brand-wash: #eef6f0;   /* fills: :target, table head */
  --seal-bg:    #01812d;   /* the reversed block, from the wordmark's own PLACE slab */
  --seal-ink:   #ffffff;   /* 5.02:1 on --seal-bg */
  --chip-bg:    #01812d;
  --chip-ink:   #ffffff;   /* 5.02:1 */

  --bg:      #ffffff;      /* pure white, chroma 0 — a document, not a mood board */
  --surface: #ffffff;
  --ink:     #1c1c1c;      /* 17.0:1 */
  --ink-2:   #5c5f5c;      /* 6.47:1 */
  --rule:    #e2e6e2;
  --rule-2:  #c3ccc6;

  --sans: "Jost", ui-sans-serif, -apple-system, "Segoe UI", Roboto, sans-serif;
  --serif: "Literata", Georgia, "Times New Roman", serif;

  --measure: 68ch;
  --gutter: clamp(1.15rem, 4vw, 2.5rem);
  --ease: cubic-bezier(.16,1,.3,1);   /* ease-out-expo, no bounce */
}

@media (prefers-color-scheme: dark){
  :root{
    /* #01812d is only 3.77:1 on a dark ground — it fails AA. Lift it. */
    --brand:      #3fbf6a;   /* 7.95:1 */
    --brand-deep: #6ad48d;
    --brand-wash: #16271b;
    --seal-bg:    #0e4826;
    --seal-ink:   #d6ecdd;   /* 8.57:1 on --seal-bg */
    --chip-bg:    #3fbf6a;
    --chip-ink:   #0c1a11;   /* 7.57:1 — the dark seal is too close to the page to read as a chip */

    --bg:      #101210;
    --surface: #171a17;
    --ink:     #e8ebe8;      /* 15.7:1 */
    --ink-2:   #a3aaa4;      /* 7.92:1 */
    --rule:    #2a2f2b;
    --rule-2:  #3d443f;
  }
}

/* ---------- base ---------- */

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

html{
  -webkit-text-size-adjust:100%;
  scroll-behavior:smooth;
  text-underline-offset:.18em;
}

body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:var(--serif);
  font-size:1.0625rem;          /* 17px — legal text is read, not skimmed */
  line-height:1.72;
  font-optical-sizing:auto;
  -webkit-font-smoothing:antialiased;
}
@media (min-width:48rem){ body{ font-size:1.125rem } }

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

.skip{
  position:absolute; left:-9999px;
  background:var(--seal-bg); color:var(--seal-ink);
  padding:.75rem 1.1rem; z-index:10;
  font-family:var(--sans); text-decoration:none;
}
.skip:focus{ left:.5rem; top:.5rem }

/* ---------- shell ---------- */

.band{ padding-inline:var(--gutter) }             /* full-bleed row */
.band > *{ max-width:64rem; margin-inline:auto }  /* measured content inside it */

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

.masthead{ background:var(--bg); padding-block:clamp(1.25rem,4vw,2rem) }
.masthead > div{
  display:flex; align-items:center; justify-content:space-between;
  gap:1rem; flex-wrap:wrap;
}

.mark{
  display:block;
  width:clamp(7.75rem,19vw,11.5rem);
  height:auto;
}
@media (prefers-color-scheme:dark){
  /* the green reads muddy against a dark ground; lift it, don't recolour it */
  .mark{ filter:brightness(1.3) saturate(1.05) }
}

.langswitch{
  display:inline-flex;
  font-family:var(--sans); font-size:.8125rem; font-weight:500;
  letter-spacing:.02em;
  border:1px solid var(--rule-2);
}
.langswitch a{
  display:inline-flex; align-items:center;
  min-height:2.75rem;                 /* 44px touch target */
  padding-inline:.95rem;
  color:var(--ink-2); text-decoration:none;
  transition:color .18s var(--ease), background-color .18s var(--ease);
}
.langswitch a + a{ border-left:1px solid var(--rule-2) }
.langswitch a:hover{ color:var(--ink); background:var(--brand-wash) }
.langswitch a[aria-current="page"]{
  background:var(--chip-bg); color:var(--chip-ink); cursor:default;
}

/* ---------- the seal: document header, reversed on brand ---------- */

.seal{
  background:var(--seal-bg); color:var(--seal-ink);
  padding-block:clamp(2rem,6vw,3.5rem);
}
.seal h1{
  font-family:var(--sans);
  font-weight:500;
  font-size:clamp(2rem,1.3rem+3vw,3.25rem);
  line-height:1.08;
  letter-spacing:-.02em;
  text-wrap:balance;
  margin:0;
}
.seal dl{
  display:flex; flex-wrap:wrap;
  gap:.4rem clamp(1.5rem,4vw,3rem);
  margin:clamp(1.5rem,4vw,2.25rem) 0 0;
  font-family:var(--sans); font-size:.8125rem;
  border-top:1px solid rgb(255 255 255 / .28);
  padding-top:1.1rem;
}
.seal dt{
  text-transform:uppercase; letter-spacing:.11em;
  font-size:.7rem; font-weight:500;
  margin:0 0 .2rem;
}
.seal dd{ margin:0; font-weight:500; font-variant-numeric:tabular-nums }
.seal dl > div{ min-width:0 }

/* ---------- document grid ---------- */

.doc{ padding-block:clamp(2.25rem,6vw,3.5rem) }

@media (min-width:64rem){
  .doc > div{
    display:grid;
    grid-template-columns:14rem minmax(0,40rem);
    gap:clamp(2.5rem,6vw,5rem);
    align-items:start;
  }
  .toc{ position:sticky; top:2rem; max-height:calc(100dvh - 4rem);
         overflow-y:auto; scrollbar-width:thin; padding-bottom:.5rem }
}

.prose{ max-width:var(--measure) }
@media (max-width:37.5rem){ .prose p,.prose li{ hyphens:auto } }

/* ---------- table of contents ---------- */

.toc h2{
  font-family:var(--sans); font-size:.6875rem; font-weight:600;
  text-transform:uppercase; letter-spacing:.12em;
  color:var(--ink-2);
  margin:0 0 .9rem; padding-bottom:.7rem;
  border-bottom:1px solid var(--rule);
}
.toc ol{
  list-style:none;
  margin:0; padding:0;
  counter-reset:toc;
  font-family:var(--sans); font-size:.875rem; line-height:1.4;
}
.toc li{ counter-increment:toc; margin:0 }
.toc a{
  display:flex; gap:.6rem;
  padding:.42rem 0;
  color:var(--ink-2); text-decoration:none;
  transition:color .18s var(--ease);
}
.toc a::before{
  content:counter(toc);
  flex:0 0 1.35rem;
  font-variant-numeric:tabular-nums;
  color:var(--brand); font-weight:500;
}
.toc a:hover{ color:var(--brand-deep) }
@media (min-width:64rem){ .toc a{ font-size:.8125rem } }

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

.prose > p:first-child{
  font-size:1.15em; line-height:1.6; color:var(--ink);
}

h2{
  font-family:var(--sans);
  font-weight:500;
  font-size:clamp(1.4rem,1.2rem+.8vw,1.8rem);
  line-height:1.15; letter-spacing:-.015em;
  text-wrap:balance;
  margin:clamp(2.75rem,7vw,4rem) 0 1rem;
  scroll-margin-top:2rem;
}
h3{
  font-family:var(--sans);
  font-weight:600; font-size:1rem;
  letter-spacing:.01em;
  margin:2.25rem 0 .6rem;
  scroll-margin-top:2rem;
}

p{ margin:0 0 1.15em; text-wrap:pretty }
ul,ol{ margin:0 0 1.15em; padding-left:1.4rem }
li{ margin:.4em 0 }
li::marker{ color:var(--brand) }
strong{ font-weight:600 }
em{ font-style:italic }

a{
  color:var(--brand-deep);
  text-decoration-line:underline;
  text-decoration-color:color-mix(in oklab, var(--brand) 40%, transparent);
  text-decoration-thickness:1px;
  transition:text-decoration-color .18s var(--ease), text-decoration-thickness .18s var(--ease);
}
a:hover{ text-decoration-color:var(--brand); text-decoration-thickness:2px }

.note{
  color:var(--ink-2);
  font-size:.9375rem; line-height:1.65;
}

/* landing on a deep link — #eliminacion is Meta's Data Deletion URL */
h2:target,h3:target{
  background:var(--brand-wash);
  box-shadow:0 0 0 .55rem var(--brand-wash);
  animation:land 1.8s var(--ease);
}
@keyframes land{
  from{ background:var(--seal-bg); color:var(--seal-ink);
        box-shadow:0 0 0 .55rem var(--seal-bg) }
}

/* ---------- callouts: the wordmark's registration brackets ---------- */

.box{
  position:relative;
  margin:1.75rem 0;
  padding:1.4rem clamp(1.1rem,3vw,1.6rem);
  background:var(--surface);
  font-size:.9375rem; line-height:1.7;
}
.box::before,.box::after{
  content:""; position:absolute;
  width:1.1rem; height:1.1rem;
  border:2px solid var(--brand);
}
.box::before{ top:0; left:0; border-right:0; border-bottom:0 }
.box::after{ bottom:0; right:0; border-left:0; border-top:0 }
.box > :first-child{ margin-top:0 }
.box > :last-child{ margin-bottom:0 }
.box strong{ font-family:var(--sans); font-weight:600 }

/* ---------- tables ---------- */

.tw{
  margin:1.5rem 0;
  overflow-x:auto;
  border:1px solid var(--rule);
}
.tw:focus-visible{ outline:2px solid var(--brand); outline-offset:2px }

table{
  width:100%;
  min-width:30rem;              /* below this, scroll the region instead of crushing columns */
  border-collapse:collapse;
  font-size:.875rem; line-height:1.55;
  font-variant-numeric:tabular-nums;
}
/* three-column tables need more room before scrolling kicks in */
table:has(thead th:nth-child(3)){ min-width:42rem }

thead th{
  background:var(--brand-wash);
  color:var(--brand-deep);
  font-family:var(--sans);
  font-size:.6875rem; font-weight:600;
  text-transform:uppercase; letter-spacing:.09em;
  white-space:nowrap;
}
th,td{
  text-align:left; vertical-align:top;
  padding:.7rem .85rem;
  border-bottom:1px solid var(--rule);
}
td:first-child{ font-weight:600 }
tbody tr:last-child td{ border-bottom:0 }

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

footer{
  border-top:1px solid var(--rule);
  padding-block:2rem 3.5rem;
  color:var(--ink-2);
  font-family:var(--sans); font-size:.8125rem;
}
footer p{ margin:0 }

/* ---------- motion ---------- */

/* One orchestrated entrance. No fill-mode on the base state, so if animations
   never run (print, headless, crawler) everything is already at its final style. */
.masthead > div{ animation:rise .7s var(--ease) backwards }
.seal h1{ animation:rise .8s .06s var(--ease) backwards }
.seal dl{ animation:rise .8s .14s var(--ease) backwards }

@keyframes rise{
  from{ opacity:0; transform:translateY(.75rem) }
}

@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto }
  *,*::before,*::after{
    animation-duration:.001s !important;
    animation-delay:0s !important;
    transition-duration:.001s !important;
  }
}

/* ---------- print ---------- */

@media print{
  :root{
    --bg:#fff; --surface:#fff; --ink:#000; --ink-2:#333;
    --rule:#bbb; --rule-2:#999;
    --seal-bg:#fff; --seal-ink:#000; --brand-wash:#fff;
    --brand:#000; --brand-deep:#000;
  }
  body{ font-size:10.5pt; line-height:1.5 }
  .toc,.langswitch,.skip{ display:none }
  .band > *{ max-width:none }
  .doc > div{ display:block }
  .seal{ border-bottom:3px solid #000; padding-block:0 1rem }
  .seal dl{ border-top:1px solid #999 }
  .mark{ width:8rem; filter:none }
  h2,h3{ break-after:avoid }
  .tw,.box,tr,img{ break-inside:avoid }
  thead{ display:table-header-group }
  .box::before,.box::after{ border-color:#000 }
  /* a printed policy has to carry its own citations */
  .prose a[href^="http"]::after{
    content:" (" attr(href) ")";
    font-size:8.5pt; word-break:break-all; color:#444;
  }
  footer{ padding-bottom:0 }
}