/* /privacy, /terms, /accessibility — the pages a company owes its readers.
 * ---------------------------------------------------------------------------
 * ON THE LIGHT GROUND, AND SET TO BE READ. Trans Afrique and the Wonders are
 * basalt because they are meant to be looked at. These are meant to be read
 * closely, possibly twice, possibly by somebody deciding whether to trust us
 * with fifteen thousand dollars — so: ivory, one measure, no photographs, and
 * type at a size that does not make a reader feel the small print is small on
 * purpose.
 *
 * THE MEASURE IS ON THE PROSE, NEVER ON THE WRAPPER. A `ch` cap on a block
 * containing two sizes of type is read in the block's own font, which is how
 * /wonders ended up pouring a 72px headline into a 420px column. Each element
 * here carries its own.
 */
.tr-body{background:var(--c-bg);color:var(--c-primary)}
.tr-page{max-width:var(--frame);margin:0 auto;padding:var(--sp-6) 44px var(--sp-7)}

.tr-open{padding-bottom:var(--sp-5);border-bottom:2px solid var(--c-primary)}
.tr-eyebrow{font-family:var(--fj-mono);font-size:10px;letter-spacing:.24em;
  text-transform:uppercase;color:var(--c-accent);margin:0}
.tr-h1{font-family:var(--fj-display);font-weight:700;text-transform:uppercase;
  font-size:clamp(32px,5vw,72px);line-height:.98;letter-spacing:-.025em;
  margin:16px 0 0;max-width:20ch;text-wrap:balance}
.tr-lede{margin-top:22px;font-size:clamp(17px,1.6vw,21px);line-height:1.55;
  color:var(--c-muted);max-width:56ch}

/* The three as a set. A legal page that is a dead end sends the reader back to
   the footer to find its neighbour, and the footer is what they were leaving. */
.tr-also{display:flex;flex-wrap:wrap;gap:8px 26px;margin-top:var(--sp-4);
  padding-bottom:var(--sp-5);border-bottom:var(--fj-rule)}
.tr-also a{display:inline-flex;align-items:center;min-height:24px;
  font-family:var(--fj-mono);font-size:9.5px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--c-muted);
  border-bottom:2px solid transparent;transition:color var(--t-fast) var(--ease),
  border-color var(--t-fast) var(--ease)}
.tr-also a:hover{color:var(--c-accent);border-bottom-color:var(--c-accent)}
.tr-also a[aria-current]{color:var(--c-primary);border-bottom-color:var(--c-accent)}

/* One rule per section, and the heading hangs beside the text on a wide screen
   so a reader scanning for "how long anything is kept" can find it without
   reading the paragraph above it. */
.tr-block{display:grid;grid-template-columns:minmax(0,15rem) minmax(0,1fr);
  gap:var(--sp-3) var(--sp-5);align-items:start;
  padding:var(--sp-5) 0;border-bottom:var(--fj-rule)}
.tr-h2{font-family:var(--fj-display);font-weight:700;text-transform:uppercase;
  font-size:clamp(19px,1.9vw,25px);line-height:1.06;letter-spacing:-.01em;
  margin:0;position:sticky;top:calc(var(--mast) + 16px)}
.tr-block > :not(.tr-h2){grid-column:2}
.tr-block p{margin:0 0 14px;font-size:16.5px;line-height:1.65;max-width:68ch}
.tr-block p:last-child{margin-bottom:0}
.tr-block a{color:var(--c-accent);border-bottom:1px solid
  color-mix(in srgb,var(--c-accent) 40%,transparent)}
.tr-block a:hover{border-bottom-color:var(--c-accent)}
.tr-block strong{font-weight:700}

.tr-list{list-style:none;margin:0 0 14px;padding:0;max-width:68ch}
.tr-list li{position:relative;padding:7px 0 7px 20px;font-size:16px;
  line-height:1.6}
.tr-list li::before{content:"";position:absolute;left:0;top:16px;width:9px;
  height:1px;background:var(--c-accent)}

/* The field-by-field table is the part of a privacy notice anybody reads, so
   it is set as a table rather than buried in a sentence. */
.tr-fields{margin:0 0 14px;max-width:68ch}
.tr-fields > div{display:grid;grid-template-columns:minmax(0,13rem) minmax(0,1fr);
  gap:4px 20px;padding:11px 0;
  border-bottom:1px solid color-mix(in srgb,var(--c-primary) 11%,transparent)}
.tr-fields dt{font-family:var(--fj-display);font-weight:700;font-size:15px}
.tr-fields dd{margin:0;font-size:15.5px;line-height:1.55;color:var(--c-muted)}

@media(max-width:900px){
  /* The hanging heading needs a column to hang in. Below this it becomes a
     heading again, and un-sticks — a heading stuck to the top of a phone is
     a heading taking up a tenth of the screen for the whole section. */
  .tr-block{grid-template-columns:minmax(0,1fr);gap:var(--sp-3)}
  .tr-block > :not(.tr-h2){grid-column:1}
  .tr-h2{position:static}
  .tr-fields > div{grid-template-columns:minmax(0,1fr)}
}
@media(max-width:760px){
  .tr-page{padding:var(--sp-5) 20px var(--sp-6)}
}

/* Somebody will print the terms. It is the one document on this site that
   people put in a folder. */
@media print{
  .jn-mast,.tr-also,.af-skip,.jn-enq-foot a{display:none}
  .tr-body{background:#fff;color:#000}
  .tr-page{max-width:none;padding:0}
  .tr-block{grid-template-columns:minmax(0,1fr);page-break-inside:avoid}
  .tr-h2{position:static}
  .tr-block a{color:#000;border:0}
  .tr-block a::after{content:" (" attr(href) ")";font-size:.85em;color:#555}
}