/* The cookie policy. A document, not a composition.
 *
 * Everything here is namespaced `pol-` and NOT `ck-`, because `ck-` belongs to
 * the consent notice in base.css and the two would have collided on `.ck-h`,
 * `.ck-act` and `.ck-t`. The notice is furniture that floats over every page on
 * the site; this is one page. They must never share a class.
 *
 * The one mechanic this page owns is the numbered section rule. It has no hero
 * photograph and no scroll signature on purpose: a legal notice that performs
 * is a legal notice nobody trusts.
 */

.pol-top { padding-block: calc(var(--hd-h) + clamp(56px, 11vh, 130px)) clamp(40px, 7vh, 90px); }

.pol-kick {
  display: flex;
  align-items: center;
  gap: .8em;
  font-family: var(--sans);
  font-weight: 300;
  font-size: .78rem;
  letter-spacing: .17em;
  text-transform: uppercase;
  color: var(--lume-3);
}

.pol-top h1 {
  font-family: var(--serif);
  font-size: var(--t-h1);
  line-height: 1.02;
  color: var(--lume);
  margin-top: .28em;
}

.pol-lede {
  font-family: var(--sans);
  font-weight: 300;
  font-size: clamp(1rem, 1.25vw, 1.16rem);
  line-height: 1.62;
  color: var(--lume-2);
  max-width: 62ch;
  margin-top: 1.1em;
}

.pol-top .plate, .pol-top .entry { margin-top: clamp(30px, 5vh, 56px); }

/* --------------------------------------------------------------- the document */

.sec--doc { padding-block: clamp(56px, 9vh, 116px); }
.pol-doc { max-width: 78ch; }

.pol-s + .pol-s { margin-top: clamp(38px, 5.6vh, 64px); }

.pol-s h2 {
  display: flex;
  align-items: baseline;
  gap: .85em;
  font-family: var(--serif);
  font-size: clamp(1.28rem, 2vw, 1.7rem);
  line-height: 1.2;
  color: var(--lume);
  padding-bottom: .5em;
  border-bottom: 1px solid var(--hair);
}
/* one flex item holding the whole title, so the words wrap inside it */
.pol-ht { min-width: 0; }
.pol-n {
  flex: none;
  font-family: var(--sans);
  font-style: normal;
  font-weight: 400;
  font-size: .72rem;
  letter-spacing: .12em;
  color: var(--ag);
  font-variant-numeric: tabular-nums;
}

.pol-s p {
  font-family: var(--sans);
  font-weight: 300;
  font-size: .96rem;
  line-height: 1.7;
  color: var(--lume-2);
  margin-top: 1.05em;
}

.pol-nb { color: var(--lume-3); margin-top: 1.2em; }
.pol-upd {
  margin-top: clamp(40px, 6vh, 72px);
  padding-top: 1.2em;
  border-top: 1px solid var(--hair);
  color: var(--lume-3);
  font-size: .82rem;
}

/* ------------------------------------------------------------------ the table */

/* it scrolls inside its own box, so a five column table can never widen the
   document on a phone. See the mobile rules below for how it restacks. */
.pol-tw {
  margin-top: 1.6em;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.pol-t {
  width: 100%;
  min-width: 640px;
  border-collapse: collapse;
  font-family: var(--sans);
  font-weight: 300;
  font-size: .84rem;
  line-height: 1.5;
  text-align: left;
}
.pol-t th, .pol-t td {
  padding: .95em 1.1em .95em 0;
  border-bottom: 1px solid var(--hair-2);
  vertical-align: top;
  color: var(--lume-2);
}
.pol-t thead th {
  font-weight: 400;
  font-size: .7rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--lume-3);
  border-bottom-color: var(--hair);
  white-space: nowrap;
}
.pol-t tbody th { font-weight: 400; color: var(--lume); }
.pol-t code {
  font-family: var(--sans);
  font-size: .82rem;
  letter-spacing: .01em;
  color: var(--ag);
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
}
.pol-t tbody tr:last-child th, .pol-t tbody tr:last-child td { border-bottom: 0; }

/* ------------------------------------------------------- the withdrawal button */

.pol-cta { margin-top: 1.6em; }
/* .act gives it the site's button; it only needs to stop being a full width
   block and to keep the cursor a browser gives a <button> rather than a link */
.pol-btn { cursor: pointer; border: 0; font-family: var(--sans); }

/* ----------------------------------------------------------------- narrow */

@media (max-width: 720px) {
  /* THE TABLE RESTACKS INSTEAD OF SCROLLING. A five column table inside a
     360px viewport is a horizontal scroller nobody discovers, and this is the
     one table on the site whose content a visitor has a legal right to read.
     Each cell prints its own column name from data-l, so a stacked row still
     says which value is which. */
  .pol-tw { overflow-x: visible; }
  .pol-t { min-width: 0; display: block; }
  .pol-t thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .pol-t tbody, .pol-t tr, .pol-t th, .pol-t td { display: block; width: auto; }
  .pol-t tr {
    padding: 1.1em 0;
    border-bottom: 1px solid var(--hair);
  }
  .pol-t tbody tr:last-child { border-bottom: 0; }
  .pol-t th, .pol-t td { padding: 0; border: 0; }
  .pol-t tbody th { margin-bottom: .7em; }
  .pol-t td { margin-top: .6em; }
  .pol-t td::before {
    content: attr(data-l);
    display: block;
    font-size: .66rem;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--lume-3);
    margin-bottom: .25em;
  }
  .pol-cta .act { width: 100%; justify-content: center; }
}