/* The privacy and terms routes. Loaded after web/event-grid.css, which keeps
 * the ground, the topbar and the footer: these two pages are the same site as
 * every other page here, and only the block between the bar and the footer is
 * their own.
 *
 * THAT BLOCK IS THE LANDING'S LEGAL LAYOUT, ported value for value from the
 * worldisflat.fun privacy and terms pages: the title drawn in horizontal lines
 * at 150px with the date and the intro beside it, then every section in a four
 * column grid on one glass panel with the cut corner. Same face, sizes, colours
 * and breakpoints. Nothing is read from that site at runtime: the face is
 * static/fonts/WIFPar-Flat0.woff2 in this repo, and the frame is drawn from
 * data: urls below.
 *
 * ONE DIFFERENCE, deliberately: the page gutter. The landing pads its column
 * 40, 32 and 20px by width. Here the body already pads 16px and every other
 * block on the site -- the topbar, the panel, the footer bubble -- sits in a
 * 1360px column on that gutter, so this block sits in it too. Otherwise the
 * glass panel and the footer bubble under it would start at different x.
 */

/* The landing's face. WIF Par's FLAT 0 instance as a static file, under a
   family name of its own: the site's "WIF Par" is the variable face, and
   redeclaring that name would change every other page. */
@font-face {
  font-family: "WIF Par Flat0";
  src: url("../static/fonts/WIFPar-Flat0.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: block;
}

/* The cut frame: the landing's clip path and border image. The stroke is
   1.5px cream at 0.34 at dpr 2, and the same whole number of device pixels at
   dpr 1 and 3, where 1.5px would fall between pixels. */
:root {
  --lg-cut: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2254%22%20height%3D%2254%22%3E%3Cpath%20d%3D%22M14.75%200.75%20H53.25%20V39.25%20L39.25%2053.25%20H0.75%20V14.75%20Z%22%20fill%3D%22none%22%20stroke%3D%22%23EDE4CF%22%20stroke-opacity%3D%220.34%22%20stroke-width%3D%221.5%22/%3E%3C/svg%3E");
}
@media (max-resolution: 1.49dppx) {
  :root {
    --lg-cut: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2254%22%20height%3D%2254%22%3E%3Cpath%20d%3D%22M15%201%20H53%20V39%20L39%2053%20H1%20V15%20Z%22%20fill%3D%22none%22%20stroke%3D%22%23EDE4CF%22%20stroke-opacity%3D%220.34%22%20stroke-width%3D%222%22/%3E%3C/svg%3E");
  }
}
@media (min-resolution: 2.5dppx) {
  :root {
    --lg-cut: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2254%22%20height%3D%2254%22%3E%3Cpath%20d%3D%22M14.8333%200.8333%20H53.1667%20V39.1667%20L39.1667%2053.1667%20H0.8333%20V14.8333%20Z%22%20fill%3D%22none%22%20stroke%3D%22%23EDE4CF%22%20stroke-opacity%3D%220.34%22%20stroke-width%3D%221.6667%22/%3E%3C/svg%3E");
  }
}

/* 88px of fixed topbar, then the landing's 56px of air under its nav. The body
   already carries 24px of that. */
.lg {
  position: relative;
  z-index: 1;
  max-width: 1360px;
  margin: 0 auto;
  padding: 120px 0 0;
  color: #EDE4CF;
  font-family: "WIF Par Flat0", ui-monospace, monospace;
  font-variation-settings: normal;
}
.lg a { color: #EDE4CF; text-decoration: none; transition: color .16s ease-out; }
.lg a:hover { color: #CFEF5B; }
.lg :focus-visible { outline: 2px solid #CFEF5B; outline-offset: 3px; }
.lg:focus { outline: none; }
.lgwrap { container-type: inline-size; }

/* The title beside the date and the intro. */
.lghead {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 520px);
  column-gap: 72px;
  align-items: end;
}
/* The landing's method: the letters filled with lines that stay 3px on a 4px
   gap. Its box reaches past the 0.8 line height by the padding, so no ascender
   or descender falls outside the lines; the margins give that room back.
   "privacy" is 3.92em wide, so at 25% of the content width it fills 98% of it
   where 150px would not fit; "terms" takes the same size. */
.lgh {
  margin: -0.2em 0;
  padding: 0.2em 0;
  font-size: 150px;
  font-size: min(150px, 25cqw);
  font-weight: 400;
  line-height: 0.8;
  letter-spacing: -0.02em;
  white-space: nowrap;
  color: transparent;
  background: repeating-linear-gradient(180deg, rgba(237, 228, 207, 0.92) 0 3px, transparent 3px 7px);
  -webkit-background-clip: text;
  background-clip: text;
}
.lgside { max-width: 520px; }
/* 0.51, the lowest that passes 4.5:1 on the page black. */
.lgd { margin: 0; font-size: 11px; letter-spacing: 0.14em; color: rgba(237, 228, 207, 0.51); }
.lgi { margin: 16px 0 0; font-size: 15px; line-height: 1.65; color: rgba(237, 228, 207, 0.72); }

/* Every section on one glass panel with the cut corner. */
.lgp {
  position: relative;
  margin-top: 56px;
  padding: 40px 44px;
  background: rgba(20, 20, 17, 0.46);
  -webkit-backdrop-filter: blur(18px) brightness(1.25);
  backdrop-filter: blur(18px) brightness(1.25);
  clip-path: polygon(14px 0, 100% 0, 100% calc(100% - 14px), calc(100% - 14px) 100%, 0 100%, 0 14px);
}
.lgp::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  border: 18px solid transparent;
  border-image: var(--lg-cut) 18 stretch;
  z-index: 2;
}
.lgg { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 36px 48px; }
.lgsec { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.lgs { margin: 0; font-size: 12px; font-weight: 400; line-height: 1.4; letter-spacing: 0.14em; color: #EDE4CF; }
.lgsec p { margin: 0; font-size: 14px; line-height: 1.65; color: rgba(237, 228, 207, 0.68); }
/* A link in a sentence: its 44px to tap is an invisible area, so the lines
   keep their spacing. */
.lgi a, .lgsec a { position: relative; overflow-wrap: anywhere; }
.lgi a::before, .lgsec a::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  height: 44px;
  transform: translateY(-50%);
}
/* Two words that are one name never part at a line end. */
.lgnb { white-space: nowrap; }

/* Below 1200 the title is 588px: beside it the intro would be under 450, so
   the date and the intro go under it. Three columns below 1200, two below
   900, one below 600. */
@media (max-width: 1199px) {
  .lghead { grid-template-columns: minmax(0, 1fr); row-gap: 32px; }
  .lgg { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 899px) {
  .lgg { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 767px) {
  .lg { padding-top: 96px; }
  .lgp { margin-top: 40px; padding: 24px 20px; }
}
@media (max-width: 599px) {
  .lgg { grid-template-columns: minmax(0, 1fr); }
}

/* No backdrop filter: a solid glass. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .lgp { background: rgba(20, 20, 17, 0.9); }
}