/* Chroma Noir — the terms dialog
   ---------------------------------------------------------------------------
   Shared by the films page and the watch page, which do NOT share a stylesheet
   — so this file is self-contained rather than borrowing films.css's `.veil`.
   It is the same construction as that pattern (a fixed overlay toggled with
   `hidden`, the element itself as the backdrop, the box as its child) and the
   same language, under its own names, so one file can serve both pages and
   terms.html can wear it standalone.

   Chrome 79 rules, as everywhere public here: longhand offsets rather than
   `inset`, margins rather than flex `gap`, and no `:focus-visible` in a
   selector list with anything that has to survive. And the pair rule: `svh`
   and `env()` are both newer than the television and an unparseable
   declaration is dropped WHOLE, so each is written twice — the plain value on
   the line before, the new spelling after it.

   THE TYPOGRAPHY IS THE POINT. This is dense legal prose in a formal register
   and somebody has to be able to read it on a phone: 13,5px at 1.65, --dim
   body with --ink for the headings and the defined terms, a hairline between
   clauses so the eye has somewhere to rest, and the lettered list indented
   enough to be a list.
*/

/* THE SAFE AREA, written as a pair: the plain 16px first, the env() version
   after it. env() is Chrome 69 for this spelling and the television is 79, but
   an unsupported env() drops the WHOLE declaration — and a dropped padding on
   a position:fixed overlay is a dialog touching the notch. Same discipline as
   films.css and photos.css. */
.tdlg{position:fixed;top:0;right:0;bottom:0;left:0;z-index:90;
  display:flex;align-items:center;justify-content:center;
  padding:16px;overflow-y:auto;overscroll-behavior:contain;
  padding:calc(16px + env(safe-area-inset-top)) calc(16px + env(safe-area-inset-right))
          calc(16px + env(safe-area-inset-bottom)) calc(16px + env(safe-area-inset-left));
  background:rgba(0,0,0,.92);
  -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
  animation:tdlgIn .2s ease-out}
@keyframes tdlgIn{from{opacity:0}to{opacity:1}}
.tdlg[hidden]{display:none !important}

/* A column: the head stays, the body scrolls. Close has to be reachable at
   clause 14 as well as at clause 1 — fourteen clauses of this is a long way to
   scroll back. */
/* max-height as a PAIR: the plain vh first, then svh. svh is the SMALL
   viewport — the one with the URL bar expanded — which is the safe ceiling for
   a box that must not be clipped, and 84vh on an iPhone with the bar showing
   was fourteen clauses in a box taller than the room it had. A browser without
   svh keeps the vh and loses nothing it had before. */
.tdlg__box{width:min(760px,100%);max-height:84vh;max-height:84svh;margin:auto;
  display:flex;flex-direction:column;
  border:1px solid rgba(244,243,241,.14);border-left:2px solid #c9a14a;
  background:#0a0a0a;text-align:left}
.tdlg__head{flex:0 0 auto;display:flex;align-items:flex-start;
  padding:clamp(18px,2.6vw,26px) clamp(16px,2.6vw,28px) 14px;
  border-bottom:1px solid rgba(244,243,241,.14)}
.tdlg__id{flex:1 1 auto;min-width:0}
.tdlg__h{margin:0;font-family:'Fraunces',Georgia,serif;font-weight:300;
  font-size:clamp(20px,2.6vw,27px);letter-spacing:-.02em;line-height:1.1;color:#f4f3f1}
.tdlg__meta{margin:7px 0 0;font-size:11.5px;letter-spacing:.04em;color:#9a9894}
.tdlg__body{flex:1 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain;
  padding:clamp(16px,2.4vw,24px) clamp(16px,2.6vw,28px) clamp(20px,3vw,30px)}
.tdlg__x{flex:0 0 auto;margin-left:14px;
  border:1px solid rgba(244,243,241,.34);border-radius:999px;background:none;
  color:#f4f3f1;font:inherit;font-family:'Inter Tight',-apple-system,'Segoe UI',sans-serif;
  font-size:12px;font-weight:500;padding:7px 15px;cursor:pointer;white-space:nowrap;
  transition:color .2s,border-color .2s}
.tdlg__x:hover{color:#c9a14a;border-color:#c9a14a}
.tdlg__x:focus-visible{outline:2px solid #c9a14a;outline-offset:3px}
.tdlg__say{margin:0;font-size:13.5px;line-height:1.65;color:#9a9894}
.tdlg__say.bad{color:#c9a14a}
.tdlg__say a{color:#f4f3f1;text-decoration:underline;text-underline-offset:.2em}

/* ---- the text itself --------------------------------------------------------
   Also used by terms.html standalone, which is why none of it is nested under
   .tdlg. */
.terms{font-family:'Inter Tight',-apple-system,'Segoe UI',sans-serif;
  font-size:13.5px;line-height:1.65;color:#9a9894}
.terms__meta{margin:0 0 4px;font-size:11px;font-weight:500;letter-spacing:.18em;
  text-transform:uppercase;color:#6a6764}
/* A clause heading is a label, not display type — Fraunces at this density
   would be decoration on a page nobody reads for pleasure. The rule above it
   is what turns fourteen clauses into fourteen things. */
.terms h3{margin:28px 0 10px;padding-top:18px;
  border-top:1px solid rgba(244,243,241,.14);
  font-size:11.5px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;
  color:#f4f3f1}
.terms__meta + h3{margin-top:20px}
/* In the dialog the meta line is lifted out into the head, which leaves the
   first clause heading carrying a rule and 28px of air against the top of a
   box that already has both. */
.terms > h3:first-child{margin-top:0;padding-top:0;border-top:0}
.terms p{margin:0 0 11px}
.terms p:last-child{margin-bottom:0}
.terms strong{font-weight:500;color:#f4f3f1}
.terms a{color:#f4f3f1;text-decoration:underline;text-underline-offset:.2em;
  text-decoration-thickness:1px}
.terms a:focus-visible{outline:2px solid #c9a14a;outline-offset:3px}
.terms__list{margin:0 0 12px;padding-left:1.9em}
.terms__list li{margin:0 0 9px}
.terms__list li:last-child{margin-bottom:0}
/* Nothing in this text is wide, but a legal sentence can carry an unbroken
   URL or a statute reference and a dialog that scrolls sideways is worse than
   an ugly break. */
.terms p,.terms li{overflow-wrap:anywhere}

/* ---- the viewer watermark ---------------------------------------------------
   Here rather than in either page's stylesheet, for the same reason the script
   is shared: the cinema and the watch page draw the same mark.

   The box is written by mark.js to the picture's own rectangle; the mark sits
   inside it and is moved by percentage, so it can never leave the picture. It
   is inert in every sense the browser understands — no pointer, no selection,
   no tab stop, aria-hidden — because it is not for the person watching.

   ~13% ink over a dark text-shadow: legible enough to be read off a recording
   and quiet enough to be forgotten inside a minute. The shadow is what carries
   it across a bright frame, where the ink alone would disappear. */
.cmark__box{position:absolute;top:0;left:0;width:0;height:0;
  z-index:3;pointer-events:none;overflow:hidden}
.cmark__box[hidden]{display:none !important}
.cmark{position:absolute;white-space:nowrap;
  font-family:'Inter Tight',-apple-system,'Segoe UI',sans-serif;
  font-weight:500;letter-spacing:.06em;
  color:rgba(244,243,241,.13);
  text-shadow:0 1px 2px rgba(0,0,0,.55);
  pointer-events:none;-webkit-user-select:none;user-select:none;
  opacity:1;transition:opacity .9s ease}
.cmark--out{opacity:0}

@media (prefers-reduced-motion:reduce){
  /* Still present, never moving. Taking it away under reduced motion would
     make the setting a way to switch the watermark off. */
  .cmark{transition:none}
}

/* ---- the footer line -------------------------------------------------------
   Built by terms.js so both pages get the same one. Quiet on purpose: it is
   the last thing on the page and it is there to be found, not to be read. */
.tfoot{display:flex;flex-wrap:wrap;align-items:baseline;
  margin:clamp(30px,5vh,56px) 0 0;padding-top:clamp(14px,2vh,20px);
  border-top:1px solid rgba(244,243,241,.14)}
.tfoot__b{border:0;padding:0;background:none;
  font-family:'Inter Tight',-apple-system,'Segoe UI',sans-serif;
  font-size:12px;font-weight:500;letter-spacing:.04em;color:#9a9894;
  text-decoration:underline;text-underline-offset:.22em;text-decoration-thickness:1px;
  cursor:pointer;transition:color .22s}
.tfoot__b:hover{color:#f4f3f1}
.tfoot__b:focus-visible{outline:2px solid #c9a14a;outline-offset:3px}
.tfoot__v{margin-left:10px;font-size:11px;letter-spacing:.06em;color:#6a6764;
  font-variant-numeric:tabular-nums}

/* The same link inside the 18+ form, under the consent sentence. */
.tinline{border:0;padding:0;background:none;
  font:inherit;font-size:12px;font-weight:500;color:#9a9894;
  text-decoration:underline;text-underline-offset:.22em;text-decoration-thickness:1px;
  cursor:pointer;transition:color .22s}
.tinline:hover{color:#f4f3f1}
.tinline:focus-visible{outline:2px solid #c9a14a;outline-offset:3px}

@media (max-width:420px){
  /* The pair again, and it is REQUIRED here: this shorthand replaces the one
     above whole, so without the env() version a narrow phone — which is
     exactly the device with a notch — would lose the insets it had. */
  .tdlg{padding:8px;
    padding:calc(8px + env(safe-area-inset-top)) calc(8px + env(safe-area-inset-right))
            calc(8px + env(safe-area-inset-bottom)) calc(8px + env(safe-area-inset-left))}
  .tdlg__box{max-height:92vh;max-height:92svh}
  .terms{font-size:14px}
}

@media (prefers-reduced-motion:reduce){
  .tdlg{animation:none}
  .tdlg__x{transition:none}
}