/* ==========================================================================
   UrActor — uractor.com
   "The Reel": the page is a film print you scrub through.

   The rule this follows, borrowed from LaraOS: the plain accessible document
   comes first and the concept is painted on top. Everything below is
   decoration over markup that reads correctly with CSS disabled. No
   JavaScript is used or required.
   ========================================================================== */

:root {
  --black:  #08090A;
  --film:   #101113;
  --bone:   #F2EFE6;
  --prose:  #CFCAC0;
  --prose-2:#B6B1A8;
  --dim:    #8C8880;   /* 5.6:1 on --black */
  --edge:   #5C5E62;   /* 3.1:1 — borders of interactive things */
  --faint:  #2E3033;   /* decorative rules only, never a control edge */
  --gold:   #E4B462;   /* 10.4:1 on --black */

  --mono: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  --sans: 'IBM Plex Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --disp: 'Big Shoulders Display', 'Arial Narrow', Impact, sans-serif;

  --gutter: 62px;
  --shell:  940px;
}

*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }

html { scroll-behavior: smooth; }

body {
  background: var(--black);
  color: var(--bone);
  font-family: var(--sans);
  font-weight: 300;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }

:focus-visible { outline: 2px solid var(--gold); outline-offset: 4px; }

.skip { position: absolute; left: -9999px; }
.skip:focus {
  left: 12px; top: 12px; z-index: 200;
  background: var(--gold); color: var(--black);
  padding: 12px 18px;
  font-family: var(--mono); font-size: 12px; letter-spacing: .1em;
  text-transform: uppercase;
}

/* Available to a screen reader, absent from the layout. Used to say "opens in
   a new tab" on the links that do, since a tab appearing unannounced is
   disorienting for anyone not watching the whole viewport. */
.vh {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* --------------------------------------------------- the film column ---- */
/* Sprocket holes run down both margins of the print. Purely decorative,
   drawn with a repeating gradient rather than markup.                      */

.reel {
  max-width: var(--shell);
  margin: 0 auto;
  padding: 0 var(--gutter);
  position: relative;
}
.reel::before,
.reel::after {
  content: "";
  position: absolute;
  top: 0; bottom: 0;
  width: 26px;
  background-image: repeating-linear-gradient(
    to bottom, var(--bone) 0 14px, transparent 14px 42px);
  opacity: .13;
  pointer-events: none;
}
.reel::before { left: 14px; }
.reel::after  { right: 14px; }

@media (max-width: 900px) {
  .reel { padding: 0 24px; }
  .reel::before, .reel::after { display: none; }
}

/* ------------------------------------------------------- masthead bar --- */

.bar {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 50;
  background: rgba(8, 9, 10, .92);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--faint);
}
.bar > div {
  max-width: var(--shell);
  margin: 0 auto;
  padding: 0 26px;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.mark {
  display: flex;
  align-items: center;
  gap: 9px;
  font-family: var(--disp);
  font-size: 21px;
  font-weight: 800;
  letter-spacing: .02em;
  text-transform: uppercase;
  flex: none;
}
.mark img { width: 22px; height: 22px; border-radius: 5px; }
/* One flex item, so the container gap cannot open a space inside the name. */
.mark .name { white-space: nowrap; }
.mark .name i { font-style: normal; color: var(--gold); }

.bar nav {
  display: flex;
  gap: 20px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--dim);
  overflow-x: auto;
  scrollbar-width: none;
}
.bar nav::-webkit-scrollbar { display: none; }
.bar nav a { white-space: nowrap; padding: 4px 0; }
.bar nav a:hover { color: var(--bone); }

@media (max-width: 620px) {
  .bar > div { padding: 0 18px; gap: 12px; }
  .bar nav { gap: 15px; font-size: 10px; }
  .mark { font-size: 18px; }
}

/* ------------------------------------------------------- chapter rail --- */

.rail {
  position: fixed;
  left: 26px; top: 50%;
  transform: translateY(-50%);
  z-index: 40;
  width: 180px;
}
.rail ol { list-style: none; position: relative; padding-left: 22px; }

/* the film's own length */
.rail ol::before {
  content: "";
  position: absolute;
  left: 4px; top: 4px; bottom: 4px;
  width: 1px;
  background: var(--faint);
}
/* how far through it you are — scroll-driven, no JavaScript */
.rail ol::after {
  content: "";
  position: absolute;
  left: 4px; top: 4px;
  width: 1px;
  height: calc(100% - 8px);
  background: var(--gold);
  transform: scaleY(0);
  transform-origin: top;
}
@supports (animation-timeline: scroll()) {
  .rail ol::after {
    animation: scrub linear both;
    animation-timeline: scroll(root block);
  }
  @keyframes scrub { from { transform: scaleY(0); } to { transform: scaleY(1); } }
}

.rail li { margin: 0 0 20px; }
.rail a {
  display: block;
  position: relative;
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: .1em;
  line-height: 1.35;
  color: var(--dim);
}
.rail a::before {
  content: "";
  position: absolute;
  left: -22px; top: 5px;
  width: 9px; height: 9px;
  border: 1px solid var(--edge);
  background: var(--black);
}
.rail a:hover, .rail a:focus-visible { color: var(--bone); }
.rail a:hover::before { border-color: var(--gold); background: var(--gold); }
.rail .tc { display: block; color: var(--gold); }

@media (max-width: 1180px) { .rail { display: none; } }

/* -------------------------------------------------------------- frame --- */

.frame {
  margin-top: 56px;
  padding: 74px 0 60px;
  border-bottom: 1px solid var(--faint);
}

.slate {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  padding-bottom: 12px;
  margin-bottom: 44px;
  border-bottom: 1px solid var(--faint);
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--dim);
}
.slate b { color: var(--gold); font-weight: 500; }

/* the Academy leader: a countdown ring around the app mark */
.leader {
  position: relative;
  width: 96px; height: 96px;
  margin-bottom: 30px;
  display: grid;
  place-items: center;
}
.leader img { width: 96px; height: 96px; border-radius: 22px; }
.leader::before {
  content: "";
  position: absolute;
  inset: -14px;
  border: 1px solid var(--faint);
  border-radius: 50%;
}
.leader::after {
  content: "";
  position: absolute;
  inset: -14px;
  border-radius: 50%;
  background: conic-gradient(var(--gold) 0 25%, transparent 25% 100%);
  mask: radial-gradient(circle, transparent 63%, #000 64%);
  -webkit-mask: radial-gradient(circle, transparent 63%, #000 64%);
  opacity: .55;
}

h1 {
  font-family: var(--disp);
  font-weight: 800;
  text-transform: uppercase;
  font-size: clamp(52px, 10.5vw, 124px);
  line-height: .84;
  letter-spacing: -.01em;
}
h1 em { font-style: normal; color: var(--gold); display: block; }

.tagline {
  margin-top: 28px;
  max-width: 540px;
  font-size: 18px;
  line-height: 1.66;
  color: var(--prose);
}

.acts {
  display: flex;
  flex-wrap: wrap;
  width: fit-content;
  max-width: 100%;
  margin-top: 40px;
  border: 1px solid var(--edge);
}
.acts a {
  padding: 16px 26px;
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: .14em;
  text-transform: uppercase;
  transition: background .16s, color .16s;
}
.acts a + a { border-left: 1px solid var(--edge); }
.acts .go { background: var(--gold); color: var(--black); font-weight: 600; }
.acts .go:hover { background: var(--bone); }
.acts .alt:hover { background: var(--film); color: var(--gold); }

@media (max-width: 560px) {
  .acts { width: 100%; }
  .acts a { flex: 1; text-align: center; padding: 15px 12px; }
}

.runtime {
  margin-top: 20px;
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--dim);
}

/* ----------------------------------------------------------- chapters --- */

.chapter { padding: 72px 0; border-bottom: 1px solid var(--faint); }

.chead { display: flex; align-items: baseline; gap: 16px; margin-bottom: 34px; }
.chead .no {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .18em;
  color: var(--gold);
}
.chead h2 {
  font-family: var(--disp);
  font-weight: 600;
  text-transform: uppercase;
  font-size: clamp(28px, 4.6vw, 46px);
  line-height: .95;
}
.chead .rule { flex: 1; height: 1px; background: var(--faint); }

.chapter p { max-width: 640px; font-size: 16.5px; line-height: 1.78; color: var(--prose); }
.chapter p + p { margin-top: 18px; }
.chapter p b { color: var(--bone); font-weight: 500; }

/* --------------------------------------------- features as a shot list -- */

.shots { list-style: none; border-top: 1px solid var(--faint); }
.shots li {
  display: grid;
  grid-template-columns: 74px 190px 1fr;
  gap: 24px;
  align-items: baseline;
  padding: 26px 0;
  border-bottom: 1px solid var(--faint);
}
.shots .n {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .14em;
  color: var(--gold);
}
.shots h3 {
  font-family: var(--disp);
  font-weight: 600;
  text-transform: uppercase;
  font-size: 26px;
  line-height: 1;
}
.shots p { max-width: none; font-size: 15.5px; line-height: 1.7; color: var(--prose-2); }

@media (max-width: 820px) {
  .shots li { grid-template-columns: 52px 1fr; gap: 10px 14px; }
  .shots h3 { grid-column: 2; }
  .shots p  { grid-column: 2; }
}

/* -------------------------------------------------------- the two exits - */

.exits { display: grid; grid-template-columns: 1fr 1fr; border: 1px solid var(--edge); }
.exits a { display: block; padding: 40px 34px; transition: background .2s; }
.exits a + a { border-left: 1px solid var(--edge); }
.exits .k {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--gold);
}
.exits h3 {
  font-family: var(--disp);
  font-weight: 800;
  text-transform: uppercase;
  font-size: 36px;
  line-height: .94;
  margin: 14px 0 12px;
}
.exits p { margin-bottom: 20px; font-size: 15px; line-height: 1.68; color: var(--prose-2); }
.exits .url { font-family: var(--mono); font-size: 12px; color: var(--dim); }
.exits a:hover { background: var(--film); }
.exits a:hover .url { color: var(--gold); }

@media (max-width: 760px) {
  .exits { grid-template-columns: 1fr; }
  .exits a + a { border-left: 0; border-top: 1px solid var(--edge); }
}

/* ------------------------------------------- the account and data page -- */
/* profile.html is the plainest document on the site: a procedure, an address
   and a list of what goes. It borrows the chapter furniture wholesale and
   adds only the two things prose there needs and the rest of the site never
   did — a real bulleted list, and a block that states an email address as
   selectable text rather than hiding it behind a button.                    */

.chapter ul {
  max-width: 640px;
  margin-top: 22px;
  padding-left: 22px;
  font-size: 16.5px;
  line-height: 1.78;
  color: var(--prose);
}
.chapter ul li::marker { color: var(--gold); }
.chapter ul li + li { margin-top: 10px; }
.chapter ul b { color: var(--bone); font-weight: 500; }
.chapter ul + p { margin-top: 22px; }

/* The email route, set like a line on a slate. --edge, not --faint, because
   the address inside it is a link and the box reads as its boundary.        */
.wire {
  display: grid;
  grid-template-columns: 104px 1fr;
  gap: 12px 20px;
  max-width: 640px;
  margin: 28px 0;
  padding: 22px 24px;
  border: 1px solid var(--edge);
  font-family: var(--mono);
  font-size: 13px;
  line-height: 1.55;
}
.wire dt {
  padding-top: 2px;
  font-size: 10.5px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--dim);
}
.wire dd { color: var(--prose); overflow-wrap: anywhere; }
.wire dd a { color: var(--gold); border-bottom: 1px solid var(--edge); }
.wire dd a:hover { border-color: var(--gold); }

@media (max-width: 520px) {
  .wire { grid-template-columns: 1fr; gap: 2px; }
  .wire dt + dd { margin-bottom: 10px; }
}

/* -------------------------------------------------------- end credits --- */

.credits { padding: 78px 0 70px; }
.credits h2 {
  margin-bottom: 38px;
  font-family: var(--disp);
  font-weight: 600;
  text-transform: uppercase;
  font-size: 15px;
  letter-spacing: .34em;
  color: var(--dim);
  text-align: center;
}
.crow {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px 34px;
  max-width: 600px;
  margin: 0 auto;
  font-family: var(--mono);
  font-size: 12.5px;
}
.crow dt {
  text-align: right;
  font-size: 11px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--dim);
}
.crow dd { text-align: left; }
/* --edge, not --faint. These links are the same colour as the text around
   them, so the underline is the only thing that identifies them as links,
   and 1.4.11 applies to it. */
.crow dd a { border-bottom: 1px solid var(--edge); }
.crow dd a:hover { color: var(--gold); border-color: var(--gold); }

.fin {
  margin-top: 52px;
  text-align: center;
  font-family: var(--disp);
  font-size: 13px;
  letter-spacing: .4em;
  text-transform: uppercase;
  color: var(--edge);
}

@media (max-width: 520px) {
  .crow { grid-template-columns: 1fr; gap: 4px; text-align: center; }
  .crow dt { text-align: center; margin-top: 12px; }
  .crow dd { text-align: center; }
}

/* ---------------------------------------------------------------- 404 --- */

.reel--404 { display: grid; place-items: center; min-height: 100vh; text-align: center; }
.reel--404 h1 { font-size: clamp(44px, 9vw, 96px); }
.reel--404 .tagline,
.reel--404 .acts,
.reel--404 .leader { margin-inline: auto; }

/* -------------------------------------------------------------- motion -- */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
}