/* ═══════════════════════════════════════════════════════════════════════════
   CORVEXAL — ARC CITIZEN CARD

   THIS SHEET DEFINES ITS OWN EVERYTHING, ON PURPOSE. The card opens over
   twenty-seven pages carrying five different palettes and three different
   stylesheet sets. A surface that took its colour from whatever was behind
   it would be a different product on every page, and a surface that borrowed
   --ink or --face-ui would resolve to nothing on the one page that does not
   define them — and an undefined var() does not fall back, it deletes the
   declaration it is in. Every token below is prefixed --cz- and set on .cz,
   so the card is the same object everywhere and depends on no page.

   THE PALETTE IS SERENA, which the build plan assigned to Arc Citizen:
   ground #FAF6F0, ink #343837, muted #4E4946, and two metals — a deep green
   #476B64 and a rose #BA6562. Neither metal is amber, so the three-use amber
   budget is untouched.
   ═══════════════════════════════════════════════════════════════════════════ */

:root {
  /* ground and ink */
  --cz-ground:   #FAF6F0;
  --cz-card:     #FFFFFF;
  --cz-ink:      #343837;
  --cz-ink-hi:   #232625;
  --cz-muted:    #4E4946;
  --cz-faint:    #7C7671;
  --cz-ph:       #A29B95;
  --cz-rule:     rgba(52, 56, 55, .14);
  --cz-rule-on:  rgba(52, 56, 55, .30);
  --cz-wash:     rgba(52, 56, 55, .07);
  --cz-hair:     1px;

  /* the two metals */
  --cz-green:    #476B64;
  --cz-rose:     #BA6562;
  --cz-green-wash: rgba(71, 107, 100, .09);

  /* over a photograph, where the ground is whatever the photograph is */
  --cz-on-photo: #FFFFFF;
  --cz-scrim-1:  rgba(20, 18, 16, .82);
  --cz-scrim-2:  rgba(20, 18, 16, .62);
  --cz-scrim-3:  rgba(20, 18, 16, .22);
  --cz-scrim-4:  rgba(20, 18, 16, 0);
  --cz-on-wash:  rgba(255, 255, 255, .18);

  /* the backdrop and the card's own shadow */
  --cz-back:     rgba(24, 22, 20, .58);
  --cz-shade-1:  rgba(24, 22, 20, .30);
  --cz-shade-2:  rgba(24, 22, 20, .14);
  --cz-shade-3:  rgba(24, 22, 20, .09);
  --cz-fade-0:   rgba(250, 246, 240, 0);

  /* type — declared rather than inherited, see the note above */
  --cz-ui:       'DM Sans', system-ui, -apple-system, 'Segoe UI', Arial, sans-serif;
  --cz-display:  'Fraunces', Georgia, 'Times New Roman', serif;

  /* geometry. A long horizontal rectangle with a tall rounded panel inset
     into it, which is why there are two radii and a pad between them. */
  --cz-w:        62rem;
  --cz-h:        min(88vh, 41rem);
  --cz-pad:      .75rem;
  --cz-r:        28px;
  --cz-rp:       20px;
  --cz-panel:    19rem;
  --cz-gap:      1.9rem;
  --cz-blur:     7px;

  /* motion */
  --cz-quick:    .18s;
  --cz-open:     .42s;
  --cz-turn:     .9s;
  --cz-hold:     4600ms;
  --cz-ease:     cubic-bezier(.22, 1, .36, 1);
}

.cz {
  /* the dialog itself is only a frame: the card inside it is the object */
  margin: auto;
  padding: 0;
  border: 0;
  /* NOT 100vw. On a page with a classic scrollbar 100vw is wider than the
     space there is, so the card would hang past the right edge by the width
     of the bar — which is the exact overflow the gate refuses. The
     percentage resolves against the space actually available. */
  max-width: min(var(--cz-w), calc(100% - 2rem));
  width: min(var(--cz-w), calc(100% - 2rem));
  max-height: none;
  background: none;
  overflow: visible;
  color: var(--cz-ink);
  font-family: var(--cz-ui);
}

/* The dialog element is what receives the backdrop click, so it must not be
   the thing that scrolls or the click target moves under the pointer. */
.cz::backdrop {
  background: var(--cz-back);
  backdrop-filter: blur(var(--cz-blur));
  -webkit-backdrop-filter: blur(var(--cz-blur));
}

.cz__card {
  display: grid;
  grid-template-columns: var(--cz-panel) 1fr;
  gap: var(--cz-gap);
  height: var(--cz-h);
  padding: var(--cz-pad);
  background: var(--cz-ground);
  border-radius: var(--cz-r);
  box-shadow: var(--cz-shade-1) 0 40px 90px -30px,
              var(--cz-shade-2) 0 12px 30px -14px;
  overflow: hidden;
  /* the close button is absolute against this, so it does not become a
     third grid item in a two-column grid */
  position: relative;
}

/* THE BOTTOM IS A SCROLL EDGE, AND IT HAS TO LOOK LIKE ONE. Without this the
   card ends on a hard cut halfway through a sentence, which reads as clipped
   rather than as scrollable. It is sized to sit over the column's bottom
   padding, so at the end of the scroll it is not fading any text. */
.cz__card::after {
  content: '';
  position: absolute;
  inset: auto 0 0 calc(var(--cz-panel) + var(--cz-gap));
  block-size: 2.2rem;
  pointer-events: none;
  background: linear-gradient(to top, var(--cz-ground) 22%, var(--cz-fade-0) 100%);
}

@media (prefers-reduced-motion: no-preference) {
  dialog.cz[open] .cz__card { animation: cz-in var(--cz-open) var(--cz-ease) both; }
  @keyframes cz-in {
    from { opacity: 0; transform: translateY(14px) scale(.985); }
  }
}

/* ── THE PANEL, WHOSE IMAGE CHANGES ───────────────────────────────────────
   The layers sit exactly on top of one another. The last child is the front;
   rotating fades and pushes it away, which uncovers the one beneath. Only
   the last two need to be painted — the rest are behind an opaque layer and
   `opacity: 0` keeps them off the compositor entirely.                    */
.cz__panel {
  position: relative;
  border-radius: var(--cz-rp);
  overflow: hidden;
  background: var(--cz-ink);
  min-height: 0;
}
.cz__stack { position: absolute; inset: 0; }

.cz__shot {
  position: absolute;
  inset: 0;
  margin: 0;
  opacity: 0;
}
.cz__shot:nth-last-child(-n + 2) { opacity: 1; }

.cz__img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* The caption sits on the bottom third of every one of these, and two of
     the four are bright there. The scrim is on the caption rather than the
     image so the photograph is not dimmed for the sake of nine words. */
}

.cz__cap {
  position: absolute;
  inset: auto 0 0 0;
  margin: 0;
  padding: 4.5rem 1.15rem 1.15rem;
  font-size: 13.5px;
  line-height: 1.45;
  font-weight: 500;
  color: var(--cz-on-photo);
  text-shadow: var(--cz-shade-1) 0 1px 3px;
  background: linear-gradient(to top,
              var(--cz-scrim-1) 0%,
              var(--cz-scrim-2) 38%,
              var(--cz-scrim-3) 72%,
              var(--cz-scrim-4) 100%);
}

@media (prefers-reduced-motion: no-preference) {
  .cz__shot.is-out { animation: cz-out var(--cz-turn) var(--cz-ease) both; }
  /* IT SLIDES, IT DOES NOT DISSOLVE. Crossfading two photographs this
     different double-exposes them for half a second and the panel reads as
     muddy at the midpoint — a beam of light through an atrium over a
     concrete floor is two pictures, not a transition. Sliding the front
     layer out of a clipped panel never shows both at the same place, and
     the one underneath is simply there when it has gone. */
  @keyframes cz-out {
    to { transform: translateY(101%) scale(.94); }
  }
}

/* ── THE BODY ─────────────────────────────────────────────────────────────
   This column scrolls and the panel does not, which is the whole reason the
   card is a grid of two fixed-height cells rather than one flow. The action
   is at the top of the scroll so it is never below the fold; the reading is
   underneath it for whoever wants it.                                     */
.cz__body {
  position: relative;
  min-width: 0;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 1.35rem 1.6rem 2rem 0;
  scrollbar-width: thin;
}

.cz__x {
  position: absolute;
  top: .95rem;
  right: 1rem;
  z-index: 2;
  inline-size: 2.25rem;
  block-size: 2.25rem;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 50%;
  background: none;
  color: var(--cz-faint);
  cursor: pointer;
  transition: background var(--cz-quick) var(--cz-ease), color var(--cz-quick) var(--cz-ease);
}
.cz__x svg { inline-size: 15px; block-size: 15px; }
.cz__x:hover { background: var(--cz-wash); color: var(--cz-ink); }

.cz__eye {
  margin: 0 0 .5rem;
  font-size: 10px;
  letter-spacing: 1.2px;
  font-weight: 500;
  text-transform: uppercase;
  color: var(--cz-green);
}

.cz__h {
  margin: 0 0 .6rem;
  font-family: var(--cz-display);
  font-weight: 700;
  font-size: clamp(28px, 3.3vw, 40px);
  line-height: 1.04;
  letter-spacing: -.6px;
  color: var(--cz-ink);
  max-inline-size: 22ch;
}

.cz__lede {
  margin: 0 0 1.15rem;
  font-size: 14.5px;
  line-height: 1.62;
  color: var(--cz-muted);
  max-inline-size: 46ch;
}

/* ── THE PROVIDERS ────────────────────────────────────────────────────── */
.cz__provs { display: grid; gap: .5rem; margin-bottom: 1.05rem; }

.cz__prov {
  display: flex;
  align-items: center;
  gap: .7rem;
  inline-size: 100%;
  min-block-size: 2.9rem;
  padding: .5rem 1rem;
  font-family: inherit;
  font-size: 14.5px;
  font-weight: 500;
  color: var(--cz-ink);
  background: var(--cz-card);
  border: var(--cz-hair) solid var(--cz-rule);
  border-radius: 12px;
  cursor: pointer;
  text-align: left;
  transition: border-color var(--cz-quick) var(--cz-ease), box-shadow var(--cz-quick) var(--cz-ease),
              transform var(--cz-quick) var(--cz-ease);
}
.cz__prov:hover {
  border-color: var(--cz-rule-on);
  box-shadow: var(--cz-shade-3) 0 3px 12px -4px;
}
.cz__prov:active { transform: translateY(1px); }

/* The chosen one keeps its state visible, because the note below refers to
   it by name and the two have to agree. */
.cz__prov[data-cz-on] {
  border-color: var(--cz-green);
  box-shadow: var(--cz-green) 0 0 0 1px inset;
}

.cz__mark { inline-size: 18px; block-size: 18px; flex: none; }
.cz__provt { min-width: 0; }

.cz__or {
  display: flex;
  align-items: center;
  gap: .8rem;
  margin: 0 0 1.05rem;
  font-size: 11.5px;
  letter-spacing: .3px;
  color: var(--cz-faint);
}
.cz__or::before, .cz__or::after {
  content: '';
  flex: 1;
  block-size: var(--cz-hair);
  background: var(--cz-rule);
}

/* ── THE ONE FIELD ────────────────────────────────────────────────────── */
.cz__form { margin: 0 0 .75rem; }
/* ONE ROW, NOT THREE. Stacked label, field and button put the primary
   action 590px down a 632px column, so it opened underneath the scroll
   fade — the one control the card exists for, dimmed. Side by side it also
   reads as a single act, which is what it is. */
.cz__field { display: grid; gap: .35rem; margin-bottom: .55rem; }
.cz__row { display: flex; gap: .5rem; align-items: stretch; }
.cz__row .cz__input { flex: 1 1 auto; min-inline-size: 0; }
.cz__row .cz__go { flex: none; }

.cz__label {
  font-size: 11.5px;
  letter-spacing: .3px;
  font-weight: 500;
  text-transform: uppercase;
  color: var(--cz-faint);
}

.cz__input {
  inline-size: 100%;
  min-block-size: 2.9rem;
  padding: .55rem .9rem;
  font-family: inherit;
  font-size: 15px;
  color: var(--cz-ink);
  background: var(--cz-card);
  border: var(--cz-hair) solid var(--cz-rule);
  border-radius: 12px;
  transition: border-color var(--cz-quick) var(--cz-ease), box-shadow var(--cz-quick) var(--cz-ease);
}
.cz__input::placeholder { color: var(--cz-ph); }
.cz__input:focus-visible {
  outline: 0;
  border-color: var(--cz-green);
  box-shadow: var(--cz-green) 0 0 0 1px inset;
}

.cz__note {
  margin: 0 0 .7rem;
  padding: .6rem .8rem;
  font-size: 13px;
  line-height: 1.5;
  color: var(--cz-ink);
  background: var(--cz-green-wash);
  border-left: 2px solid var(--cz-green);
  border-radius: 0 8px 8px 0;
}

.cz__go {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  min-block-size: 2.9rem;
  padding: .55rem 1.25rem;
  font-family: inherit;
  font-size: 14.5px;
  font-weight: 500;
  color: var(--cz-ground);
  background: var(--cz-ink);
  border: 0;
  border-radius: 999px;
  cursor: pointer;
  transition: background var(--cz-quick) var(--cz-ease), transform var(--cz-quick) var(--cz-ease);
}
.cz__go:hover { background: var(--cz-ink-hi); }
.cz__go:active { transform: translateY(1px); }
.cz__go .btn__arrow { inline-size: 17px; block-size: 17px; }

.cz__legal {
  margin: 0;
  font-size: 12px;
  line-height: 1.55;
  color: var(--cz-faint);
}
.cz__legal a { color: var(--cz-muted); text-decoration: underline; text-underline-offset: 2px; }
.cz__legal a:hover { color: var(--cz-ink); }

/* ── THE READING ──────────────────────────────────────────────────────── */
.cz__read {
  margin-top: 1.6rem;
  padding-top: 1.4rem;
  border-top: var(--cz-hair) solid var(--cz-rule);
}

.cz__rh {
  margin: 1.35rem 0 .45rem;
  font-size: 11px;
  letter-spacing: 1.1px;
  font-weight: 500;
  text-transform: uppercase;
  color: var(--cz-green);
}
.cz__rh:first-child { margin-top: 0; }

.cz__list {
  margin: 0;
  padding-left: 1.05rem;
  font-size: 13.5px;
  line-height: 1.68;
  color: var(--cz-muted);
}
.cz__list li::marker { color: var(--cz-rose); }

.cz__p {
  margin: 0 0 .55rem;
  font-size: 13.5px;
  line-height: 1.68;
  color: var(--cz-muted);
  max-inline-size: 52ch;
}
.cz__p--last { margin-bottom: 0; color: var(--cz-ink); }
.cz__p a { color: var(--cz-green); text-decoration: underline; text-underline-offset: 2px; }
.cz__p a:hover { color: var(--cz-ink); }

/* ── THE BUTTON IN THE TOP BAR ────────────────────────────────────────────
   Two navs, two grounds: the site pages give it ink on cream, and the
   landing's bar sits over a bright video where the only readable treatment
   is the one the other nav items already use. Both are round, because a
   round frame around a person is what this control has meant since the
   first address book and there is nothing to gain by being novel here.   */
.cz-you {
  display: inline-grid;
  place-items: center;
  inline-size: 2.5rem;
  block-size: 2.5rem;
  flex: none;
  padding: 0;
  border: var(--cz-hair, 1px) solid currentColor;
  border-radius: 50%;
  background: none;
  color: inherit;
  cursor: pointer;
  opacity: .72;
  transition: opacity var(--cz-quick) var(--cz-ease),
              transform var(--cz-quick) var(--cz-ease);
}
.cz-you:hover { opacity: 1; transform: translateY(-1px); }
.cz-you__i { inline-size: 20px; block-size: 20px; }

/* On the landing the bar is white type over video until it becomes the pill,
   and `currentColor` follows --nav-fg through both states on its own. */
.cz-you--l { opacity: .85; }

/* ── NARROW ───────────────────────────────────────────────────────────────
   The panel cannot be a column on a phone — it would take the screen and
   leave the field below the fold. It becomes a band across the top instead,
   so the photograph is still there and the action is still the first thing
   under it. Nothing is dropped and nothing is cut off.                   */
@media (max-width: 52rem) {
  .cz { --cz-h: min(92vh, 44rem); --cz-gap: 1.1rem; }
  .cz__card { grid-template-columns: 1fr; grid-template-rows: 8.5rem 1fr; }
  .cz__card::after { inset: auto 0 0 0; }
  .cz__body { padding: .25rem .35rem 1rem; }
  .cz__x { top: .8rem; right: .8rem; color: var(--cz-on-photo); }
  .cz__x:hover { background: var(--cz-on-wash); color: var(--cz-on-photo); }
  .cz__cap { padding: 2.2rem .95rem .8rem; font-size: 12.5px; }
  .cz__h { font-size: clamp(25px, 7vw, 31px); }
  .cz__row { flex-wrap: wrap; }
  .cz__row .cz__go { inline-size: 100%; justify-content: center; }
}

@media (max-width: 30rem) {
  .cz { --cz-r: 22px; --cz-rp: 16px; }
  .cz__card { grid-template-rows: 7rem 1fr; }
  .cz__x { top: .65rem; right: .65rem; }
}

/* ── THE SAME FORM, ON THE PAGE ───────────────────────────────────────────
   network.html carries the registered copy of this form in its markup, and
   it uses that page's own .form components — so all this has to do is stop
   one email field from being drawn 1240px wide, which reads as a banner
   rather than as a thing to type in. This sheet loads after site.css, so
   equal specificity is enough and none of it needs !important.           */
.cz-form {
  max-inline-size: 34rem;
  margin-block: 1.6rem 0;
}
.cz-form__go { margin: 1.1rem 0 .9rem; }

/* ── THE HONEYPOT, ON EVERY PAGE ──────────────────────────────────────────
   .form__pot is declared in site.css, and site.css is loaded by 25 of the 27
   pages. The card opens on all 27. On aria.html — which loads blocks.css,
   chrome.css and aria.css instead — the rule did not exist, so the trap field
   rendered at full size and the modal asked a real person, in words, not to
   fill in a box labelled "Do not fill this in".

   It is declared here rather than moved, because this sheet is the only one
   every page loads and the card is the only thing that needs it everywhere.
   Same shape as site.css's, so the two cannot disagree about what hidden
   means: off-canvas rather than display:none, because a field that is not
   displayed is a field a bot can see is a trap. */
.cz .form__pot {
  position: absolute;
  left: -9999px;
  inline-size: 1px;
  block-size: 1px;
  overflow: hidden;
}

/* ── THE BUTTON IN THE LANDING'S BAR ──────────────────────────────────────
   .l-nav__group is a GRID — `1fr auto 1fr`, three columns, and the two equal
   outer ones are what hold the links dead centre. A fourth child does not
   join the row; grid auto-placement gives it a row of its own, so the button
   appeared under the brand, half outside the pill.

   Widening the grid would work and would move the links off centre, which is
   the exact lopsidedness this bar was already fixed for once. So the button
   comes out of the flow entirely and the bar makes room for it with padding.
   The links stay where they are, and the pill's condense-on-scroll — 1280px
   down to 1180px — still animates, because none of this touches max-width. */
/* THE SPACE IS TAKEN FROM THE BUTTON'S NEIGHBOUR, NOT FROM THE BAR.
   Padding-right on the group made its content box asymmetric — 19px left,
   69px right — and the links, which are centred by the two equal 1fr
   columns around them, moved 25px left. Measured, not guessed. A margin on
   the action pulls it clear of the button and leaves the grid symmetric. */
.l-nav__group:has(.cz-you) { position: relative; }
.l-nav__group:has(.cz-you) .l-nav__cta { margin-right: 50px; }
.l-nav__group .cz-you {
  position: absolute;
  right: 19px;
  top: 50%;
  transform: translateY(-50%);
}
.l-nav__group .cz-you:hover { transform: translateY(-50%) scale(1.04); }

/* AT 1024px AND BELOW THE BURGER APPEARS, AND IT IS THE ONLY WAY TO NAVIGATE
   ON A PHONE — landing.css says exactly that above its 44px minimum. Pinning
   this button to right:19px put it on the same 44 x 44 square: the burger
   still took the click, so a reader saw a profile icon and got a menu. It has
   to stand clear of it, not near it. */
@media (max-width: 1024px) {
  .l-nav__group .cz-you { right: 73px; }   /* 19 pad + 44 burger + 10 gap */
}

/* WHERE THERE IS A BURGER, THE BUTTON STANDS DOWN. Three navs, three
   breakpoints, and they are not the same number: the landing's burger
   appears at 1024px, the twenty site pages at 640px, aria at 560px. Hiding
   at one width would leave a band on two of them with a burger and a button
   fighting for the same corner. Below each of these the card lives in that
   nav's menu instead — see inMenu() in citizen.js. */
@media (max-width: 1024px) { .l-nav__group .cz-you { display: none; } }
@media (max-width:  640px) { nav.nav  .cz-you { display: none; } }
@media (max-width:  560px) { nav.nav2 .cz-you { display: none; } }

/* ── THE ACCOUNT BUTTON IS 40px AND IT IS ON EVERY PAGE ────────────────────
   Measured at 768: 40×40, four pixels under, on all twenty-four public pages.
   It did not show up in the 375 pass because it is a different size there —
   which is exactly why the tablet pass exists as its own run rather than as
   an assumption that a phone is the hard case and everything else follows. */
@media (pointer: coarse) {
  .cz-you { min-width: 44px; min-height: 44px; }
}