/* Shared styling for the legal pages: privacy.html, cookies.html, terms.html.
   Plain CSS, no build step, matched to the main site's palette and type. */

:root {
  --bg: #FDE8E8;
  --paper: #FFF7F3;
  --accent: #8C5A34;
  --ink: #3A2119;
  --gut: clamp(20px, 6vw, 80px);
  --measure: 760px;
  --ease: cubic-bezier(.22, 1, .36, 1);
}

* { box-sizing: border-box; }

/* NOT smooth, and a top guard, and both are about the same iPhone fault.
 *
   These pages opened on an iPhone with the heading half hidden under the
   sticky bar, arriving already scrolled by roughly the bar's own height.
   Measured in headless Chrome at a phone viewport the page opens at zero with
   the heading 79px clear of the bar, so the pre-scroll is WebKit's, and it is
   a known one: a sticky header under an html element with smooth scrolling
   lands the initial position off by the sticky element's height.
 *
   There is nothing on any of the three pages for smooth scrolling to do. Not
   one in-page anchor, not one id to jump to. So it goes, and the bug with it.
 *
   scroll-padding-top is the belt to that brace: whatever ever scrolls these
   pages, a restored position, find in page, a future anchor, lands content
   below the bar rather than under it. 82 covers the bar at every width, 81
   on a computer and 73 on a phone, with a pixel over. */
/* The bar's height, in one place, at both widths: 14 padding, the logo, 14
   padding, 1 border. Everything below that needs to know how tall the bar is
   reads this rather than repeating the sum. */
:root { --head-h: 81px; }
@media (max-width: 600px) { :root { --head-h: 73px; } }
html { scroll-padding-top: var(--head-h); }

html, body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: 'Jost', system-ui, -apple-system, Segoe UI, sans-serif;
  font-weight: 300;
  font-size: 16.5px;
  line-height: 1.75;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  -webkit-tap-highlight-color: transparent;
}

p, li { text-wrap: pretty; }

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

a { color: var(--accent); text-decoration: none; border-bottom: 1px solid #8C5A3459; transition: color .25s var(--ease), border-color .25s var(--ease); }
a:hover { color: var(--ink); border-bottom-color: var(--ink); }

::selection { background: #8C5A3433; }

/* Scrollbars. Thin, pink, and lit from within, on the page itself and inside
   anything that scrolls, the legal drawer included.

   Two sets of rules, because browsers disagree. Firefox understands
   scrollbar-width and scrollbar-color and nothing else, so it gets a plain
   thin pink bar. Chrome and Safari understand the ::-webkit- parts, which is
   where the glow comes from, but Chrome ignores those the moment it sees the
   Firefox properties. Hence the @supports fence, which only Firefox enters. */
@supports (-moz-appearance: none) {
  * { scrollbar-width: thin; scrollbar-color: #E27E93 transparent; }
}
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-corner { background: transparent; }
::-webkit-scrollbar-thumb {
  /* the transparent border plus padding-box clipping is what makes the bar
     itself thin while leaving room around it for the glow to show */
  border: 3px solid transparent;
  background-clip: padding-box;
  border-radius: 999px;
  background-color: #E88FA0;
  box-shadow: 0 0 6px rgba(226, 126, 147, .85), 0 0 13px rgba(226, 126, 147, .45);
}
::-webkit-scrollbar-thumb:hover {
  background-color: #E27E93;
  box-shadow: 0 0 8px rgba(226, 126, 147, 1), 0 0 18px rgba(226, 126, 147, .6);
}
::-webkit-scrollbar-thumb:active { background-color: #D96A82; }

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

/* ---------- header ---------- */

/* THE FROSTED GLASS IS ON A CHILD, NOT ON THE STICKY BOX. Second attempt at
   the heading opening half hidden on an iPhone, and this one is aimed at the
   evidence rather than at a scroll.
 *
   The content sat exactly the bar's own height too high, 73 pixels, and only
   at first layout. That is not a page that has been scrolled, it is a sticky
   element whose space has not been reserved in the flow, and WebKit has a
   long standing fault of exactly that shape when the sticky element itself
   carries backdrop-filter: it goes to its own compositing layer and the
   first layout runs as if it were not there. Headless Chrome reserves it
   correctly and shows nothing, which is why the first attempt looked right
   everywhere it could be measured.
 *
   So the sticky element is a plain box now, and the tint and the blur sit on
   a pseudo element filling it from behind. Same look, and the box that holds
   the place in the flow has no filter on it to confuse anything. The z-index
   on .site-head makes a stacking context, which keeps the pseudo element's
   negative z-index inside the bar rather than behind the whole page. */
.site-head {
  position: sticky; top: 0; z-index: 10;
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
  padding: 14px var(--gut);
  border-bottom: 1px solid #8C5A3424;
}
.site-head::before {
  content: ''; position: absolute; inset: 0; z-index: -1;
  background: #FDE8E8e8;
  backdrop-filter: saturate(180%) blur(18px);
  -webkit-backdrop-filter: saturate(180%) blur(18px);
}

/* THE BAR IS PART OF THE PAGE UNTIL YOU SCROLL PAST IT. Everywhere.
 *
   Fifth attempt at the legal pages opening with the heading half hidden on a
   phone, and the first that does not try to tell one browser from another.
   The fourth did the right thing but only inside a rule that WebKit alone
   matches, and Chrome on an iPhone reported the bar still sticky at open,
   which is what you would see if that engine test did not match there. There
   is no way to find out from a desk, and no need to: this shape is fine on
   every engine, so it is the shape on every engine.
 *
   At open nothing is sticky or fixed. The bar is an ordinary part of the page
   and cannot overlap anything, because there is no space for any engine to
   fail to reserve. Once the reader has scrolled past it, legal.js puts
   is-scrolled on body and the bar comes back fixed to the top, sliding in
   from above. The bar's own height goes onto body as padding in the same
   instant it leaves the flow, so nothing below it moves, and the bar was
   already above the top edge when it happened, so the swap cannot be seen.
   The base .site-head rule above still says sticky; this later rule of the
   same weight wins over it, and the scrolled rule below outweighs both. */
.site-head { position: static; }
body.is-scrolled { padding-top: var(--head-h); }
body.is-scrolled .site-head {
  position: fixed; top: 0; left: 0; right: 0;
  animation: legal-bar-in .28s cubic-bezier(.22, 1, .36, 1) both;
}
@keyframes legal-bar-in { from { transform: translateY(-100%); } to { transform: none; } }
@media (prefers-reduced-motion: reduce) { body.is-scrolled .site-head { animation: none; } }
.site-head img { display: block; width: 52px; height: 52px; }
.site-head a { border-bottom: 0; }
.back {
  font-size: 12px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--ink); opacity: .68;
}
.back:hover { opacity: 1; color: var(--accent); }

/* ---------- page body ---------- */

main {
  max-width: var(--measure);
  margin: 0 auto;
  padding: clamp(44px, 8vw, 90px) var(--gut) 40px;
}

.eyebrow {
  margin: 0;
  font-size: 11px; letter-spacing: .28em; text-transform: uppercase;
  color: var(--accent);
}

h1 {
  margin: 16px 0 0;
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-weight: 500;
  font-size: clamp(36px, 6vw, 58px);
  line-height: 1.06;
  text-wrap: balance;
}

.updated { margin: 14px 0 0; font-size: 13.5px; opacity: .6; }

.rule { height: 1px; width: 64px; background: var(--accent); margin: 30px 0 34px; }

.lede {
  font-size: clamp(17px, 2.4vw, 19.5px);
  line-height: 1.7;
  padding: 22px 26px;
  background: var(--paper);
  border-left: 2px solid var(--accent);
  border-radius: 0 4px 4px 0;
}
.lede :first-child { margin-top: 0; }
.lede :last-child { margin-bottom: 0; }

h2 {
  margin: 52px 0 0;
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-weight: 500;
  font-size: clamp(25px, 3.6vw, 33px);
  line-height: 1.2;
  text-wrap: balance;
}
h2 + p, h2 + ul, h2 + ol, h2 + .table-wrap, h2 + .lede { margin-top: 14px; }

h3 {
  margin: 32px 0 0;
  font-family: 'Jost', system-ui, sans-serif;
  font-weight: 500;
  font-size: 16.5px;
  letter-spacing: .02em;
}
h3 + p, h3 + ul, h3 + ol { margin-top: 8px; }

p { margin: 18px 0 0; }

ul, ol { margin: 14px 0 0; padding-left: 22px; }
li { margin: 8px 0; }
li::marker { color: var(--accent); }

strong { font-weight: 500; color: var(--ink); }

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

.table-wrap { margin-top: 18px; overflow-x: auto; -webkit-overflow-scrolling: touch; }

table {
  width: 100%; min-width: 440px;
  border-collapse: collapse;
  background: var(--paper);
  border-radius: 4px;
  overflow: hidden;
  font-size: 15px;
}
th, td { text-align: left; padding: 13px 16px; vertical-align: top; border-bottom: 1px solid #8C5A3421; }
th {
  font-weight: 500; font-size: 11.5px; letter-spacing: .12em; text-transform: uppercase;
  color: var(--accent); background: #8C5A340f;
}
tr:last-child td { border-bottom: 0; }

/* ---------- tables, when there is not enough room to be a table ---------- */

/* A table you have to drag sideways is a table nobody reads. Below the width
   set here each row stops being a row and becomes a small stack instead: every
   value printed under the name of its column, taken from the data-label the
   cell carries. Nothing on these pages ever scrolls sideways.

   This measures the width of the column of text, not the width of the window.
   That matters because the home page can show these documents in a drawer down
   one side, where the window is wide and the reading column is not.

   A browser too old to understand @container simply keeps the sideways scroll
   it has today, which is what used to happen everywhere. */

main { container-type: inline-size; }

@container (max-width: 560px) {

  .table-wrap { overflow-x: visible; }

  /* display:block on the table itself as well, or it still works out a
     minimum width from the columns it no longer has, and overflows on the
     narrowest phones. */
  table, tbody { display: block; min-width: 0; }
  table { background: transparent; border-radius: 0; }

  /* the headings are printed above each value instead, so the row of them at
     the top is no longer needed on screen. Kept for screen readers rather than
     removed, so the table still reads as a table to them. */
  thead {
    position: absolute; width: 1px; height: 1px;
    overflow: hidden; clip-path: inset(50%); white-space: nowrap;
  }

  tr {
    display: block;
    background: var(--paper);
    border-radius: 4px;
    padding: 2px 16px 14px;
    margin-bottom: 10px;
  }
  tr:last-child { margin-bottom: 0; }

  th, td {
    display: block; border-bottom: 0; padding: 12px 0 0;
    /* a long address or an email with nowhere to break would otherwise
       push the whole row wider than the screen */
    overflow-wrap: anywhere;
  }

  /* tables with headings across the top */
  td[data-label]::before {
    content: attr(data-label);
    display: block;
    margin-bottom: 2px;
    font-size: 11px; letter-spacing: .12em; text-transform: uppercase;
    color: var(--accent);
  }

  /* tables that name each row in its own first cell */
  th {
    background: transparent;
    font-size: 11px; letter-spacing: .12em; text-transform: uppercase;
    color: var(--accent);
  }
  th + td { padding-top: 2px; }
}

/* ---------- callouts and placeholders ---------- */

.note {
  margin-top: 22px; padding: 18px 22px;
  background: var(--paper);
  border: 1px solid #8C5A3433;
  border-radius: 4px;
  font-size: 15.5px;
}
.note :first-child { margin-top: 0; }
.note strong { color: var(--accent); }

/* Marks a fact that must be filled in before this page goes live.
   Deliberately loud. Search the file for "todo" to find every one. */
.todo {
  display: inline-block;
  background: #FFE18A;
  color: #4A3505;
  padding: 1px 7px;
  border-radius: 3px;
  border-bottom: 1px dashed #B08A2E;
  font-weight: 500;
  font-style: normal;
}

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

.site-foot {
  border-top: 1px solid #8C5A342b;
  margin-top: 70px;
  padding: 40px var(--gut) 46px;
  font-size: 13.5px;
}
.foot-inner {
  max-width: var(--measure);
  margin: 0 auto;
  display: flex; flex-wrap: wrap; gap: 14px 26px;
  align-items: center; justify-content: space-between;
}
.foot-links { display: flex; flex-wrap: wrap; gap: 8px 22px; }
.foot-links a { border-bottom: 0; letter-spacing: .1em; text-transform: uppercase; font-size: 11.5px; color: var(--ink); opacity: .7; }
.foot-links a:hover { opacity: 1; color: var(--accent); }
.foot-links a[aria-current] { color: var(--accent); opacity: 1; }
.copyright { opacity: .5; font-size: 12px; }

@media (max-width: 600px) {
  .foot-inner { flex-direction: column; align-items: flex-start; }

  /* ON A PHONE THERE IS NO BAR AT ALL, JUST THE WAY BACK. Asked for in those
     words after five attempts at making a bar behave here, and it is the right
     answer rather than a retreat.
   *
     Every attempt before this one left something pinned to the top of the
     screen at the moment the page opened, and the fault was never really the
     pinning: iPhones open these pages already scrolled by roughly the bar's
     own height, which is why the eyebrow above the heading was missing in
     every screenshot. Anything pinned then covers the heading. legal.js now
     puts the page back to the top on load, and with nothing pinned on a phone
     there is nothing left that can cover anything even if that ever fails.
   *
     The logo goes because the way back does not need it: the link says where
     it goes, and the logo is the first thing on the page underneath anyway.
     It scrolls away like ordinary text, because it is ordinary text. */
  .site-head {
    position: static;
    padding: 12px var(--gut) 0;
    border-bottom: 0;
    justify-content: flex-start;
  }
  .site-head::before { display: none; }
  .site-head img { display: none; }
  .site-head .back { font-size: 12.5px; }

  /* Whatever legal.js does, on a phone it must not pin anything. */
  body.is-scrolled { padding-top: 0; }
  body.is-scrolled .site-head { position: static; animation: none; }

  /* AND NOTHING TO SCROLL CLEAR OF. That padding existed to keep content from
     landing under the bar. There is no bar here now, and leaving it would
     reserve 73 pixels at the top of every scroll for nothing. It is also a
     suspect in its own right: WebKit has been seen to take scroll padding
     into account when it decides where a page opens, which is the fault this
     whole thread has been chasing. */
  html { scroll-padding-top: 0; }
}

/* ---------- the wait between the legal page and the site ----------
 *
   Tapping Back to the site meant a white flash, a home page assembling itself
   in pieces, and then a drawer appearing already half open. This covers the
   whole of that. It is painted by the browser before any of our JavaScript
   runs, because the class that turns it on is written in the head, so there is
   nothing to see behind it.
 *
   It leaves just BEFORE the drawer starts arriving, so the drawer's own
   entrance plays in full rather than being covered by the last of a fade. */
#anwar-wait {
  position: fixed; inset: 0; z-index: 2147483600;
  display: none; align-items: center; justify-content: center;
  background: #FDE8E8;
  opacity: 1; transition: opacity .26s ease;
}
html.anwar-waiting #anwar-wait { display: flex; }
html.anwar-waiting.anwar-wait-out #anwar-wait { opacity: 0; }
#anwar-wait i {
  display: block; width: 34px; height: 34px; border-radius: 50%;
  border: 2px solid #8C5A3433; border-top-color: #8C5A34;
  animation: anwar-wait-spin .7s linear infinite;
}
@keyframes anwar-wait-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  #anwar-wait i { animation-duration: 2.4s; }
  #anwar-wait { transition: none; }
}