/* Codex design finishing pass, September 7. Applied after the owner's theme. */
:root { --hero-display: clamp(43px, 3.85vw, 59px); }
.hero { min-height: 720px; }
.hero-inner { padding-top: 60px; padding-bottom: 60px; }
.hero-copy { max-width: 610px; }
.hero h1 em { display: block; }
.hero h1, .hero .hero-statement {
  font: 450 var(--hero-display)/1.1 var(--sans);
  letter-spacing: -.052em;
  text-wrap: balance;
}
.hero h1 { margin: 0 0 34px; }
.hero .hero-statement { margin: 112px 0 0; max-width: 610px; }
.hero-statement .stmt-a { color: var(--accent); }
.hero-statement .stmt-b { color: var(--ink); }
.justice-quotes {
  display: grid;
  grid-template-columns: 180px minmax(0, 1fr);
  gap: 48px;
  padding-top: 76px;
  padding-bottom: 64px;
  border-bottom: 1px solid var(--line);
}
.justice-quotes #field-heading {
  margin: 5px 0 0;
  font: 500 11px/1.5 var(--sans);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--muted);
}
.justice-quotes .quote-body { min-width: 0; max-width: 880px; }
.justice-quotes .quote-stage { transition: none; }
.justice-quotes #quote-org { font-size: 10px; margin-bottom: 18px; }
.justice-quotes blockquote {
  font: 400 clamp(22px, 2vw, 28px)/1.45 var(--serif);
  letter-spacing: -.02em;
  margin: 0 0 22px;
  text-wrap: pretty;
}
.justice-quotes .quote-stage figcaption { font-size: 13px; }
.justice-quotes .quote-controls { padding-top: 14px; }
.justice-quotes .quote-dots { flex-wrap: wrap; }
.justice-quotes .quote-dots button { width: 24px; min-height: 44px; }
.justice-quotes .quote-navigation button { width: 44px; height: 44px; }
.justice-quotes #quote-count { font-variant-numeric: tabular-nums; }
section[id] { scroll-margin-top: 24px; }
#capture-viewer { overscroll-behavior: contain; }
.xe-screen-preview { margin: 0; background: none; }
.xe-screen-frame { --paper:#faf8f3; --white:#fffcf7; --ink:#33332F; --muted:#656760; --accent:#ac593d; --line:#dad7cf; overflow: hidden; border: 1px solid var(--line); border-radius: 8px; background: var(--paper); box-shadow: 0 16px 44px #00000018; }
.xe-screen-bar { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 18px 24px; background: var(--white); border-bottom: 1px solid var(--line); color: var(--ink); font: 500 14px/1.4 var(--sans); }
.xe-screen-bar b { font-weight: 450; color: var(--accent); margin-left: 12px; }
.xe-preview-tag { font: 400 11px/1.4 var(--sans); color: var(--muted); }
.xe-screen-context { display: flex; justify-content: space-between; gap: 12px; padding: 15px 24px; border-bottom: 1px solid var(--line); color: var(--muted); font: 450 10px/1.5 var(--sans); letter-spacing: .05em; }
.xe-screen-content { padding: 20px 8px 0; cursor: default; }
.xe-screen-preview > figcaption { display: flex; justify-content: space-between; gap: 20px; padding-top: 15px; color: #d3d5cb; font: 400 12px/1.6 var(--sans); }
.xe-screen-preview > figcaption span:last-child { text-align: right; }
@media (max-width: 1150px) and (min-width: 761px) {
  :root { --hero-display: 43px; }
  .hero-copy { max-width: 55%; }
  .hero { min-height: 700px; }
  .justice-quotes { grid-template-columns: 140px minmax(0, 1fr); gap: 32px; }
}
@media (max-width: 760px) {
  :root { --hero-display: clamp(28px, 7.1vw, 46px); }
  .hero { min-height: 0; }
  .hero-copy { max-width: 100%; }
  .hero-inner { padding-top: 30px; padding-bottom: 335px; }
  .hero h1, .hero .hero-statement { letter-spacing: -.045em; line-height: 1.13; }
  .hero h1 { margin-bottom: 26px; }
  .hero .hero-statement { margin-top: 74px; }
  .hero-art { height: 305px; top: auto; }
  .justice-quotes { display: block; padding-top: 44px; padding-bottom: 40px; }
  .justice-quotes #field-heading { margin-bottom: 24px; }
  .justice-quotes blockquote { font-size: 22px; }
  .justice-quotes .quote-controls { gap: 4px; flex-wrap: wrap; }
  .justice-quotes .quote-navigation { margin-left: auto; }
  .xe-screen-bar { padding: 15px; font-size: 12px; }
  .xe-screen-bar b { margin-left: 5px; }
  .xe-screen-context { padding: 12px 15px; font-size: 9px; }
  .xe-screen-content { padding-top: 10px; }
  .xe-screen-preview > figcaption { display: block; font-size: 11px; }
  .xe-screen-preview > figcaption span { display: block; }
  .xe-screen-preview > figcaption span:last-child { text-align: left; opacity: .8; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

/* The workflow is a supporting product preview, with space around it. */
.xe-screen-preview { max-width:1080px; margin-left:auto; margin-right:auto; }
#counselxe .xe-screen-preview { background: transparent; border: 0; overflow: visible; }

/* Founder correction: controls follow the current quotation, without a reserved gap. */
/* The stage keeps the height the rotator reserves for it.
   This line used to read `height: auto !important`, which made the section
   shrink to whichever quotation was showing. It removed an empty gap under the
   short ones and, because this block sits near the top of the page, shoved
   everything below it up and down every 2.9 seconds — on desktop and on a
   phone. The founder called it exactly right: everything bounces.
   The rotator now reserves the height of the TALLEST quotation in the pool and
   holds it, so the page never moves. `!important` here was also silently
   beating the rotator's own inline height, so the reserve could never apply. */
.justice-quotes .quote-stage figcaption { padding-bottom: 0; }
.justice-quotes .quote-controls { padding-top: 12px; }

/* Preserve the statement's space while its two phrases follow the film. */
.hero-statement .stmt-a, .hero-statement .stmt-b { transition: opacity 1.6s ease-in-out; }
.hero-statement.is-timed .stmt-a, .hero-statement.is-timed .stmt-b { opacity: 0; }
.hero-statement.is-timed .cue-visible { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  .hero-statement .stmt-a, .hero-statement .stmt-b { opacity: 1 !important; transition: none; }
}

/* ── The theme switch ────────────────────────────────────────────────────────
   Sits at the end of the masthead nav. Deliberately quiet: it is a utility, not
   a fifth navigation item, so it carries no label of its own at rest — a ring
   that fills when the page is dark. 44px of hit area on a phone. */
.theme-toggle{
  -webkit-appearance:none;appearance:none;
  display:inline-flex;align-items:center;justify-content:center;
  width:44px;height:44px;margin-left:14px;padding:0;
  background:none;border:0;border-radius:50%;
  color:var(--muted);cursor:pointer;
  transition:color .18s ease,background-color .18s ease;
}
.theme-toggle:hover{color:var(--ink);background:color-mix(in srgb,var(--ink) 8%,transparent)}
.theme-toggle:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

/* The mark: a ring in light, a filled disc with a bite out of it in dark — the
   same shape reading as sun and moon without shipping two icons. */
.theme-icon{
  width:16px;height:16px;border-radius:50%;
  border:2px solid currentColor;
  box-shadow:inset 0 0 0 0 currentColor;
  transition:box-shadow .2s ease;
}
.theme-toggle[aria-pressed="true"] .theme-icon{
  box-shadow:inset 0 0 0 8px currentColor, 6px -6px 0 -1px var(--paper);
}
@media (prefers-reduced-motion:reduce){
  .theme-toggle,.theme-icon{transition:none}
}
/* On a phone the nav collapses behind the Menu button and the masthead is
   already full: brand + "Menu +" leaves no room for a 44px control, and letting
   flex squeeze it produced a 16px dot — under the touch minimum, and 19px of
   horizontal page overflow at 320. The switch keeps its full target and the
   wordmark gives up the width instead, since the brand is the one thing on that
   row that can lose 30px without losing its job. */
@media(max-width:760px){
  .theme-toggle{width:40px;height:40px;margin-left:2px;flex:0 0 auto}
  .brand{min-width:0}
  .wordmark-art{width:clamp(132px,42vw,176px)}
}
@media(max-width:400px){
  .theme-toggle{width:36px;height:36px;margin-left:0}
  .wordmark-art{width:clamp(120px,38vw,148px)}
}


/* ── The hero still on iOS ───────────────────────────────────────────────────
   When Safari will not autoplay — Low Power Mode, or the per-site Auto-Play
   setting — it stamps its own large grey play button in the middle of the
   video. It landed squarely on Lady Justice's chest and read as a broken
   embed rather than a deliberate still. This is Safari's own hook for hiding
   it; the page already offers "Play the story", which is the control that
   should be visible. */
#justice::-webkit-media-controls-start-playback-button{
  display:none!important;-webkit-appearance:none;
}
#justice::-webkit-media-controls{display:none!important}

/* With no autoplay the "Play the story" button is the only way into the film,
   so on a phone it stops being a whisper in the corner. */
@media(max-width:760px){
  .motion{font-size:12px;padding:10px 14px;bottom:12px;right:12px}
}

/* ── The overview ring stands alone on a phone ───────────────────────────────
   Under the ring sat .cc-mobile-key, a phone-only list repeating all four
   product names and their one-liners — the same four the ring itself already
   names, one scroll below the ring, reading as a second menu doing the same
   job. The founder saw it and asked for the ring only.

   display:none takes it out of the accessibility tree as well as the layout,
   which is the intent: the ring's own segment labels are real anchors to the
   same four sections, so hiding the list removes a duplicate set of links
   rather than the only route to them. The markup stays in place so restoring
   it is a one-line change if the ring ever stops carrying the names. */
@media(max-width:760px){
  #cc-overview-concept .cc-mobile-key{display:none}
}

/* ── The hero loses its box ──────────────────────────────────────────────────
   The hero was a rounded, bordered card inset 24px from the page edges, filled
   #f0ece3 — warmer than the page's own #f7f4ee. So it read as a panel sitting
   ON the site rather than the top of it: a visible edge, rounded corners, and
   a colour step where the card met the page. The founder called it "a yellow
   square" and asked for the artwork to sit on the same ground as everything
   else. He is right — it was the one component on the page that framed itself.

   The card is removed rather than restyled: no margin, no border, no radius,
   no background of its own, so the hero inherits --paper in both themes. The
   copy moves onto the page's own .wrap measure, so the headline now lines up
   with every heading below it instead of being indented by the card. */
.hero{margin:0;border:0;border-radius:0;background:transparent}
.hero-inner{width:min(1320px,calc(100% - 96px))}

/* The gradient that carries the artwork off to the left was painting the card's
   cream. It has to be the page ground now, and in whichever theme is running —
   hence color-mix on the token rather than the literal it used to be. */
/* The cream wash is GONE. .hero-art:after was an overlay painting a cream
   gradient across the artwork to blend its left edge into the card — so the
   "yellow grade" the founder kept pointing at was not the artwork at all, it
   was a coloured sheet laid on top of it. Covering a hard edge with paint is
   what made the hero look cheap.

   The edge is feathered instead of painted over: the video itself is masked,
   so it becomes genuinely transparent at its boundaries and the real page
   shows through. Nothing is tinted, and it is correct in both themes without
   knowing either one's colour. */
.hero-art:after{display:none!important}
.hero-art{
  -webkit-mask-image:
    linear-gradient(90deg,transparent 0%,transparent 22%,rgba(0,0,0,.5) 42%,#000 60%),
    linear-gradient(180deg,transparent 0%,#000 10%,#000 88%,transparent 100%);
  -webkit-mask-composite:source-in;
          mask-image:
    linear-gradient(90deg,transparent 0%,transparent 22%,rgba(0,0,0,.5) 42%,#000 60%),
    linear-gradient(180deg,transparent 0%,#000 10%,#000 88%,transparent 100%);
          mask-composite:intersect;
}
/* No blend mode. multiply was tried here and made it worse, not better: the
   artwork's plate and the page are both cream, and multiplying cream by cream
   returns something DARKER and warmer than either — it reintroduced the exact
   warm haze this change exists to remove. Plain alpha from the mask is right;
   transparent is transparent in both themes. */

:root[data-theme="dark"] .hero{background:transparent;border:0}

@media(max-width:1150px){.hero-inner{width:min(1320px,calc(100% - 64px))}}
@media(max-width:760px){
  .hero{margin:0}
  .hero-inner{width:calc(100% - 40px)}
  /* On a phone the artwork sits under the copy, so it feathers top and bottom
     rather than from the left. */
  .hero-art{
    -webkit-mask-image:linear-gradient(180deg,transparent 0%,#000 22%,#000 90%,transparent 100%);
    -webkit-mask-composite:source-over;
            mask-image:linear-gradient(180deg,transparent 0%,#000 22%,#000 90%,transparent 100%);
            mask-composite:add;
  }
}