/* Extracted from ai-and-jobs.php. Edit it HERE, not in the page.
 * It used to be an inline <style> (or two) in the body; see the note in
 * header.php about why linked beats inlined on this site. Republish after
 * editing:  bin/publish-asset.sh public/assets/css/page-ai-and-jobs.css
 */
/* Scoped under #evl so nothing here can collide with the site stylesheet or
   with the Tailwind runtime. Single theme, like every other page: no
   prefers-color-scheme branch belongs in this file. */
#evl{
  --ground:#F4F3F6; --paper:#FFFFFF; --sunk:#EDEBF1;
  --ink:#1A1721; --ink-soft:#463F52; --ink-mute:#6C6578;
  --rule:#DBD7E1; --rule-soft:#E9E6ED;
  --teal:#187C7E; --teal-mid:#3E9B9C; --teal-wash:#E6F1F1;
  --violet:#482962; --violet-wash:#F0EBF4;
  --red:#C90016; --red-wash:#FAEBED;
  --amber:#8F5D0C; --amber-wash:#FAF1E2;
  --sans:"DM Sans","IBM Plex Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
  --serif:Georgia,"Times New Roman",serif;
  --mono:ui-monospace,"SFMono-Regular",Menlo,Consolas,monospace;
  background:var(--ground); color:var(--ink);
  font-family:var(--sans); font-size:16px; line-height:1.6;
}
#evl *{box-sizing:border-box}
#evl .evl-wrap{max-width:48rem;margin:0 auto;padding:3rem 1.125rem 4rem}

#evl .evl-masthead{border-bottom:2px solid var(--ink);padding-bottom:1.5rem;margin-bottom:1.5rem}
#evl .evl-eyebrow{font-family:var(--mono);font-size:.6875rem;letter-spacing:.14em;text-transform:uppercase;color:var(--violet);margin:0 0 .625rem}
#evl .evl-standfirst{font-family:var(--serif);font-size:1.1875rem;line-height:1.5;color:var(--ink-soft);margin:0;max-width:34rem}
#evl .evl-updated{font-family:var(--mono);font-size:.6875rem;letter-spacing:.06em;color:var(--ink-mute);margin:.875rem 0 0}

#evl .evl-why{font-size:.9375rem;color:var(--ink-soft);margin:0 0 .875rem}

#evl .evl-controls{display:flex;flex-wrap:wrap;gap:.5rem;align-items:center;margin-bottom:1.5rem}
#evl .evl-controls input[type=search]{flex:1 1 13rem;min-width:0;font-family:var(--sans);font-size:.875rem;padding:.5rem .6875rem;border:1px solid var(--rule);border-radius:.1875rem;background:var(--paper);color:var(--ink)}
#evl .evl-controls input[type=search]:focus-visible{outline:2px solid var(--violet);outline-offset:2px}


#evl .evl-entry{background:var(--paper);border:1px solid var(--rule);border-radius:.25rem;padding:0;margin-bottom:1rem;scroll-margin-top:6rem}
#evl .evl-entry[hidden]{display:none !important}

/* The question header is the control. A two-column grid puts the marker in its
   own track so the number and the question stay optically aligned with each
   other whether the entry is open or shut. */
#evl .evl-sum{
  display:grid;grid-template-columns:1.25rem 1fr;column-gap:.75rem;
  padding:1.375rem;cursor:pointer;list-style:none;
}
#evl .evl-sum::-webkit-details-marker{display:none}
#evl .evl-sum::before{
  content:"+";grid-column:1;grid-row:1 / span 2;
  font-family:var(--mono);font-size:1.125rem;font-weight:700;line-height:1;
  color:var(--red);padding-top:.0625rem;
}
#evl .evl-entry[open] > .evl-sum::before{content:"\2212"}
#evl .evl-sum .evl-n{grid-column:2;grid-row:1}
#evl .evl-sum .evl-qh{grid-column:2;grid-row:2}
#evl .evl-sum:hover .evl-qh{color:var(--red)}
#evl .evl-sum:focus-visible{outline:2px solid var(--red);outline-offset:-2px}
/* the body aligns under the question, not under the marker: the summary text
   column starts 1.375rem of padding plus the 1.25rem marker plus the .75rem
   gap in from the card edge. */
#evl .evl-entry-in{padding:0 1.375rem 1.375rem 3.375rem}
@media (max-width:30rem){
  #evl .evl-sum{grid-template-columns:1rem 1fr;column-gap:.5rem;padding:1.125rem}
  #evl .evl-entry-in{padding:0 1.125rem 1.125rem 2.625rem}
}
/* ---- two layers of hierarchy ----
 * The numbered question is the scan layer, set in the display face. The answer
 * is the read layer, large and quiet. Sources fold away behind a summary, one
 * click for anyone checking them and out of the way of everyone else. Keep the
 * two layers distinct in size and weight when editing: flattening them makes
 * the page unscannable.
 */
#evl .evl-n{
  display:block;
  font-family:var(--mono);font-size:.75rem;letter-spacing:.14em;
  color:var(--red);margin:0 0 .5rem;
}
#evl .evl-qh{
  font-family:"Anton","Arial Narrow",Impact,sans-serif;font-weight:400;
  text-transform:uppercase;letter-spacing:-.005em;line-height:1.02;
  font-size:clamp(1.375rem,3.2vw,1.875rem);color:#fff;margin:0;
  text-wrap:balance;
  transition:color .12s;
}
#evl .evl-answer{
  font-family:var(--serif);font-size:1.3125rem;line-height:1.5;
  color:var(--ink);margin:0 0 1.5rem;max-width:36rem;
}
#evl .evl-ev-wrap{border-top:1px solid var(--rule);padding-top:.875rem;margin:0 0 1.25rem}
#evl .evl-ev-wrap > summary{
  font-family:var(--mono);font-size:.6875rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--red);cursor:pointer;list-style:none;padding:.25rem 0;
}
#evl .evl-ev-wrap > summary::-webkit-details-marker{display:none}
#evl .evl-ev-wrap > summary::before{content:"+ ";font-weight:700}
#evl .evl-ev-wrap[open] > summary::before{content:"\2212 "}
#evl .evl-ev-wrap > summary:hover{color:#fff}
#evl .evl-ev-wrap > summary:focus-visible{outline:2px solid var(--red);outline-offset:2px}
#evl .evl-ev-wrap[open] .evl-ev{margin-top:1rem}
#evl .evl-use{
  font-size:.9375rem;line-height:1.6;color:var(--ink-soft);margin:1.25rem 0 0;
  padding-top:1rem;border-top:1px solid var(--rule-soft);max-width:38rem;
}
#evl .evl-use span{
  font-family:var(--mono);font-size:.6875rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--ink-mute);display:block;margin-bottom:.375rem;
}
/* .evl-qh is defined above, in the display face. */
#evl .evl-short{display:none} /* superseded by .evl-answer */
#evl .evl-short-unused{font-size:1rem;color:var(--ink);margin:0 0 1.125rem;padding:.75rem .9375rem;background:var(--teal-wash);border-left:3px solid var(--teal);border-radius:0 .1875rem .1875rem 0}

#evl .evl-label{font-family:var(--mono);font-size:.625rem;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-mute);margin:0 0 .5rem}
#evl .evl-ev{display:flex;flex-direction:column;gap:.75rem;margin:0 0 1rem}
#evl .evl-ev-row{display:block}
#evl .evl-ev-body p{margin:0;font-size:.9375rem;color:var(--ink-soft)}
#evl .evl-cite{font-family:var(--mono);font-size:.6875rem;line-height:1.55;color:var(--ink-mute);margin:.25rem 0 0;display:block}

#evl .evl-counter{background:var(--amber-wash);border-left:3px solid var(--amber);padding:.875rem 1rem;border-radius:0 .1875rem .1875rem 0;margin:0 0 1rem}
#evl .evl-counter .evl-label{color:var(--amber);margin-bottom:.375rem}
#evl .evl-counter p{margin:0;font-size:.9375rem;color:var(--ink-soft)}

#evl .evl-bottom{border-top:1px solid var(--rule-soft);padding-top:.875rem}
#evl .evl-bottom .evl-label{margin-bottom:.3125rem}
#evl .evl-bottom p{margin:0;font-family:var(--serif);font-size:1.0625rem;line-height:1.5;color:var(--ink)}

#evl .evl-refuse{background:var(--paper);border:1px solid var(--red);border-left-width:3px;border-radius:0 .25rem .25rem 0;padding:1.375rem;margin-top:2.5rem}
#evl .evl-refuse h2{font-family:var(--serif);font-size:1.3125rem;font-weight:600;margin:0 0 .5rem;line-height:1.25;color:var(--ink)}
#evl .evl-refuse ul{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:.875rem}
#evl .evl-refuse li{font-size:.9375rem;color:var(--ink-soft)}
#evl .evl-claim{display:block;font-family:var(--mono);font-size:.8125rem;color:var(--ink);font-weight:500;margin-bottom:.1875rem}

#evl .evl-noresult{background:var(--paper);border:1px dashed var(--rule);border-radius:.25rem;padding:1.5rem;text-align:center;color:var(--ink-mute);font-size:.9375rem}
#evl .evl-noresult[hidden]{display:none !important}
#evl .evl-next{margin-top:3rem;padding-top:1.75rem;border-top:1px solid var(--rule)}
#evl .evl-next h2{font-family:"Anton","Arial Narrow",Impact,sans-serif;font-weight:400;text-transform:uppercase;letter-spacing:-.005em;font-size:1.375rem;color:var(--ink);margin:0 0 1rem}
#evl .evl-next ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.8125rem}
#evl .evl-next li{font-family:var(--sans);font-size:.9375rem;line-height:1.6;color:var(--ink-soft)}
#evl .evl-next a{color:var(--ink);font-weight:600;text-decoration:none;border-bottom:1px solid var(--ink-mute)}
#evl .evl-next a:hover{color:var(--red);border-bottom-color:var(--red)}
#evl .evl-next a:focus-visible{outline:2px solid var(--red);outline-offset:2px}
#evl .evl-foot{margin-top:2.5rem;padding-top:1.375rem;border-top:1px solid var(--rule);font-size:.8125rem;color:var(--ink-mute);max-width:40rem}
#evl .evl-foot a{color:var(--teal);text-decoration:underline;text-underline-offset:.15em}

@media print{
  #evl .evl-controls{display:none}
  #evl .evl-entry{break-inside:avoid}
  /* force every accordion open, or the printout is thirteen questions and no
     answers. The UA hides a closed details' children, so override display. */
  #evl .evl-entry > .evl-entry-in,#evl .evl-ev-wrap > .evl-ev{display:block !important}
  #evl .evl-sum::before{content:"" !important}
}
/* ---------------------------------------------------------------------------
 * Judgment Day palette, mapped onto this instrument's own tokens.
 *
 * The page was built light and token-driven, so the ground, the rules and the
 * type all move by redefining the tokens. What follows the token block is the
 * handful of places where a literal color, a radius or a semantic pairing could
 * not survive the swap.
 *
 * Two rules worth knowing before editing:
 *
 * 1. The accent splits by role. #E01E26 as 10 to 13px text lands at about
 *    4.05:1 on black and 3.77:1 on the red wash, both under the 4.5:1 small
 *    text needs. So red TEXT and hairlines use #EF4B52, and the deep #E01E26
 *    is reserved for solid fills, where white on it clears 4.8:1.
 *
 * 2. No amber, no gold. They read as Ambrose colors. Ordered scales that need
 *    a third or fourth value take it from intensity, not hue: solid red, red
 *    tint, dark neutral, solid bone.
 * ------------------------------------------------------------------------- */

/* html and body are transparent by default, so the browser paints its own
 * white behind the page and overscroll flashes white on a black page. */
html,body{background:#000}

#evl{
  --ground:#000000; --paper:#0B0B0B; --sunk:#151515;
  --ink:#E9E6E2; --ink-soft:#C9C5C0; --ink-mute:#8C8C8C;
  --rule:#262626; --rule-soft:#1A1A1A;
  --teal:#EF4B52; --teal-mid:#E01E26; --teal-deep:#FF7A80; --teal-wash:rgba(224,30,38,.10);
  --violet:#EF4B52; --violet-mid:#E01E26; --violet-wash:rgba(224,30,38,.10);
  --red:#EF4B52; --red-wash:rgba(224,30,38,.14);
  --amber:#C9C5C0; --amber-wash:#151515;
  --sans:"Archivo",system-ui,-apple-system,"Segoe UI",sans-serif;
  --shadow:0 0 0 1px rgba(224,30,38,.10);
  background:#000; color:#E9E6E2;
}

/* hard edges, per the cover. The round things are restored just below. */
#evl div,#evl p,#evl ul,#evl li,#evl header,#evl section,#evl details,
#evl input,#evl select,#evl textarea,#evl button,#evl span{border-radius:0}


/* form controls do not inherit a dark ground on their own */
#evl input,#evl select,#evl textarea{background:#0B0B0B;color:#E9E6E2;border-color:#262626}
#evl input::placeholder{color:#6F6F6F}
#evl ::selection{background:#E01E26;color:#fff}

/* solid fills take the deep red and white text */

/* the display moment goes to the condensed face */
#evl .evl-refuse h2{font-family:"Anton","Arial Narrow",Impact,sans-serif;font-weight:400;
  text-transform:uppercase;letter-spacing:-.005em;line-height:.95;color:#fff}

#evl .evl-counter{background:#151515;border-left-color:#C9C5C0}
#evl .evl-counter .evl-label{color:#C9C5C0}