/* paper.css
 * The face of AI Universe. Served at /paper-static/paper.css.
 * Deliberately not part of the Vite bundle -- the paper publishes
 * without a build.
 */

:root{
  /* Toned stock, not bleached. Type is untouched -- ink, ink-soft and
     ink-faint are at their original values. Only the ground moved, and
     the two rule tokens followed it down by exactly enough to hold
     their original separation. Rules are structure, not type. */
  --paper:      #A3A29C;
  --paper-deep: #9B9A94;
  --ink:        #191C22;
  --ink-soft:   #2E3135;
  --ink-faint:  #5A5C5C;
  --rule:       #888781;
  --rule-hair:  #93928C;

  /* the COLOR system -- the only chroma on the page */
  --c-red:    #A3242B;
  --c-orange: #C2600F;
  --c-yellow: #C9A227;
  --c-green:  #4C7A4A;
  --c-blue:   #2E5A8A;
  --c-black:  #191C22;
  --c-white:  #F7F6F2;
  --c-gold:   #9A7B1F;

  --display: "Bodoni Moda", Georgia, serif;
  --body:    "Newsreader", Georgia, serif;
  --util:    "IBM Plex Mono", ui-monospace, monospace;

  --measure: 1180px;
}

*{box-sizing:border-box}
@media (min-resolution:1.5dppx){
  /* 1px CSS borders land on fractional device pixels on large scaled
     displays and dither out. Push them to a full device pixel. */
  .who,.column-item,.dispatch,.col-main,.topbar,footer,.provenance{
    border-width:0.75px;
  }
}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--body);
  font-size:18px;
  line-height:1.55;
  font-weight:400;
}
a{color:inherit}
:focus-visible{outline:2px solid var(--c-blue);outline-offset:3px}

.wrap{max-width:var(--measure);margin:0 auto;padding:0 28px}

/* ---------------- utility bar ---------------- */
.topbar{
  border-bottom:1px solid var(--rule);
  font-family:var(--util);
  font-size:11px;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--ink-soft);
}
.topbar .wrap{
  display:flex;align-items:center;justify-content:space-between;
  gap:20px;height:44px;
}
.topbar-left{display:flex;gap:22px;align-items:center;min-width:0}
.topbar-left span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.enter{
  font-family:var(--util);font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink);text-decoration:none;
  border:1px solid var(--ink);padding:6px 14px;
  white-space:nowrap;
  transition:background .18s ease,color .18s ease;
}
.enter:hover{background:var(--ink);color:var(--paper)}

/* ---------------- masthead ---------------- */
.masthead{padding:54px 0 0;text-align:center}
.masthead h1{
  font-family:var(--display);
  font-optical-sizing:none;
  font-variation-settings:"opsz" 11;
  font-weight:500;
  font-size:clamp(38px,8.4vw,104px);
  line-height:.94;
  letter-spacing:.11em;
  margin:0 0 0 .11em;
  text-transform:uppercase;
}
.creed{
  font-family:var(--util);
  font-size:11px;letter-spacing:.3em;text-transform:uppercase;
  color:var(--ink-soft);
  margin:20px 0 22px;
}

/* signature: the registration strip */
.strip{
  display:flex;height:7px;width:100%;
  transform:scaleX(0);transform-origin:left center;
  animation:ink 1.1s cubic-bezier(.22,.75,.2,1) .15s forwards;
}
.strip i{flex:1;display:block}
@keyframes ink{to{transform:scaleX(1)}}
@media (prefers-reduced-motion:reduce){
  .strip{animation:none;transform:none}
}
.strip .w{box-shadow:inset 0 0 0 1px var(--rule)}

/* ---------------- shared furniture ---------------- */
.eyebrow{
  font-family:var(--util);
  font-size:11px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--ink-soft);
  display:flex;align-items:center;gap:9px;flex-wrap:wrap;
  margin:0 0 14px;
}
.mark{width:9px;height:9px;flex:none;display:inline-block}
.mark.w{box-shadow:inset 0 0 0 1px var(--ink-faint)}
.dot{color:var(--ink-faint)}

/* ---------------- lead ---------------- */
.lead{padding:44px 0 46px;border-bottom:1px solid var(--ink)}
.lead h2{
  font-family:var(--display);
  font-optical-sizing:none;
  font-variation-settings:"opsz" 11;
  font-weight:500;
  font-size:clamp(29px,4.6vw,54px);
  line-height:1.06;
  letter-spacing:-.005em;
  margin:0 0 10px;
  max-width:17ch;
}
.standfirst{
  font-size:19px;color:var(--ink-soft);font-style:italic;
  max-width:56ch;margin:0 0 34px;
}

/* signature: the speaker rail */
.script{max-width:730px}
.turn{
  display:grid;
  grid-template-columns:112px 1fr;
  gap:0 26px;
  padding:0 0 20px;
}
.who{
  font-family:var(--util);
  font-size:11px;font-weight:600;letter-spacing:.15em;text-transform:uppercase;
  color:var(--ink-soft);
  padding-top:.5em;
  border-top:1px solid var(--rule-hair);
}
.said{margin:0;font-size:20px;line-height:1.5;font-weight:400}
.said + .said{margin-top:.7em}
.beat{
  font-family:var(--util);font-size:11px;letter-spacing:.14em;
  color:var(--ink-faint);text-transform:uppercase;
  margin:0 0 .55em;
}
.readmore{
  grid-column:2;
  font-family:var(--util);font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  text-decoration:none;border-bottom:1px solid var(--ink);padding-bottom:3px;
  justify-self:start;
}
.readmore:hover{color:var(--c-blue);border-color:var(--c-blue)}

/* ---------------- two-column body ---------------- */
.body-grid{
  display:grid;
  grid-template-columns:1fr 320px;
  gap:0 54px;
  align-items:start;
}
.col-main{padding:38px 0 0;border-right:1px solid var(--rule-hair);padding-right:54px}
.col-side{padding:38px 0 0}

.sec-head{
  font-family:var(--util);
  font-size:11px;letter-spacing:.22em;text-transform:uppercase;
  color:var(--ink);
  padding-bottom:9px;border-bottom:2px solid var(--ink);
  margin:0 0 24px;
}

.column-item{padding:0 0 26px;margin-bottom:26px;border-bottom:1px solid var(--rule-hair)}
.column-item:last-child{border-bottom:0;margin-bottom:0;padding-bottom:0}
.column-item h3{
  font-family:var(--display);font-optical-sizing:none;
  font-variation-settings:"opsz" 11;font-weight:500;
  font-size:26px;line-height:1.15;margin:0 0 8px;
}
.column-item h3 a{text-decoration:none}
.column-item h3 a:hover{text-decoration:underline;text-underline-offset:4px}
.column-item p{margin:0;color:var(--ink-soft);font-size:17px;max-width:54ch}
.byline{
  font-family:var(--util);font-size:11px;letter-spacing:.1em;
  color:var(--ink);margin:10px 0 0;text-transform:none;
}

.dispatch{padding:0 0 18px;margin-bottom:18px;border-bottom:1px solid var(--rule-hair)}
.dispatch:last-of-type{border-bottom:0}
.dispatch .eyebrow{margin-bottom:7px}
.dispatch p{margin:0;font-size:16px;line-height:1.45}

/* ---------------- policy ---------------- */
.policy{
  margin:56px 0 0;
  border-top:1px solid var(--ink);
  border-bottom:1px solid var(--ink);
  padding:34px 0;
}
.policy .wrap{
  display:grid;grid-template-columns:170px 1fr;gap:0 54px;
  align-items:start;padding:0 28px;
}
.policy .sec-head{border:0;padding:0;margin:0}
.policy blockquote{
  margin:0;font-family:var(--display);font-optical-sizing:none;
  font-variation-settings:"opsz" 11;font-weight:500;
  font-size:clamp(20px,2.5vw,29px);line-height:1.3;max-width:30ch;
}
.policy .attrib{
  font-family:var(--util);font-size:11px;letter-spacing:.12em;
  color:var(--ink-soft);margin:18px 0 0;text-transform:uppercase;
}

/* ---------------- door ---------------- */
.door{padding:64px 0 72px;text-align:center}
.door p{max-width:46ch;margin:0 auto 26px;font-size:19px;color:var(--ink-soft)}
.door-btn{
  display:inline-block;
  font-family:var(--util);font-size:12px;letter-spacing:.2em;text-transform:uppercase;
  text-decoration:none;color:var(--paper);background:var(--ink);
  padding:15px 34px;
  transition:background .18s ease;
}
.door-btn:hover{background:var(--c-blue)}

footer{border-top:1px solid var(--rule);padding:22px 0 46px}
footer .wrap{
  display:flex;justify-content:space-between;gap:18px;flex-wrap:wrap;
  font-family:var(--util);font-size:11px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--ink-faint);
}

/* ---------------- responsive ---------------- */
@media (max-width:880px){
  .body-grid{grid-template-columns:1fr;gap:0}
  .col-main{border-right:0;padding-right:0}
  .col-side{border-top:1px solid var(--ink);margin-top:38px}
  .policy .wrap{grid-template-columns:1fr;gap:18px}
}
@media (max-width:560px){
  body{font-size:17px}
  .wrap{padding:0 18px}
  .topbar-left span:nth-child(2){display:none}
  .turn{grid-template-columns:1fr;gap:0}
  .who{border-top:0;padding-top:0;margin-bottom:6px}
  .readmore{grid-column:1}
  .said{font-size:18px}
  .creed{letter-spacing:.18em}
}

/* ================= piece pages: sessions and columns ================= */

.strip.thin{height:5px}
.topbar a.home{color:inherit;text-decoration:none}
.topbar a.home:hover{color:var(--ink)}

.piece{padding:46px 0 0}
.piece .wrap{max-width:800px}

.piece-title{
  font-family:var(--display);font-optical-sizing:none;
  font-variation-settings:"opsz" 11;font-weight:500;
  font-size:clamp(30px,5vw,52px);line-height:1.05;
  letter-spacing:-.005em;margin:0 0 12px;
}
.piece .standfirst{margin-bottom:22px}

.written-by{
  font-family:var(--util);font-size:12px;letter-spacing:.12em;
  margin:0 0 22px;color:var(--ink);
}

.provenance{
  font-family:var(--util);
  font-size:11px;line-height:1.6;letter-spacing:.04em;
  color:var(--ink-soft);
  border-top:1px solid var(--rule);
  border-bottom:1px solid var(--rule);
  padding:12px 0;margin:0 0 40px;max-width:62ch;
}

.prose p{font-size:20px;line-height:1.55;margin:0 0 1.05em;max-width:64ch}

.endmark{
  color:var(--ink-faint);font-size:12px;
  margin:34px 0 0;letter-spacing:0;
}
.backlink{
  font-family:var(--util);font-size:11px;letter-spacing:.14em;
  text-transform:uppercase;margin:26px 0 70px;
}
.backlink a{text-decoration:none;border-bottom:1px solid var(--ink);padding-bottom:3px}
.backlink a:hover{color:var(--c-blue);border-color:var(--c-blue)}

/* pull text on the front page's session list */
.column-item .pull{font-style:italic}

@media (max-width:560px){
  .prose p{font-size:18px}
}