/* ==========================================================================
   Quantum Computing — the page in front of the course.

   Dark, because the two things on it that move are instruments and an
   instrument is read off a dark screen. The three accent colours are the three
   stops of the gradient in the mark, and they are the course's own semantics:
   teal for a state or a |0> component, violet for a phase, amber for the
   operator acting. Nothing else is coloured.

   It is deliberately the same system as the sibling artifact's page: the same
   sections in the same order, the same type scale, the same class names. Two
   pages that share a builder should read as one family, and only the palette,
   the instrument and the words are this course's.
   ========================================================================== */

:root{
  --bg:      #04050f;      /* the ground of the mark itself */
  --bg-2:    #080b1a;
  --bg-3:    #0d1122;
  --ink:     #e9edf7;
  --muted:   #9aa4be;
  --faint:   #626d8a;
  --rule:    rgba(146,164,214,.15);
  --teal:    #4FBECE;      /* a state, or the |0> component */
  --violet:  #AC99DC;      /* a phase, or an intermediate amplitude */
  --amber:   #E5B255;      /* the operator acting */

  --serif: "Iowan Old Style","Palatino Linotype",Palatino,"Book Antiqua",
           "Hoefler Text",Georgia,"Times New Roman",serif;
  --sans:  "Inter","SF Pro Text",-apple-system,BlinkMacSystemFont,"Segoe UI",
           Roboto,Helvetica,Arial,sans-serif;
  --mono:  "SF Mono","JetBrains Mono","Fira Code",ui-monospace,Menlo,Consolas,monospace;

  --wide: 1180px;
  --ease: cubic-bezier(.32,.72,.28,1);
}

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

html{ scroll-behavior:smooth; }
@media (prefers-reduced-motion:reduce){ html{ scroll-behavior:auto; } }

body{
  background:var(--bg); color:var(--ink);
  font-family:var(--sans); font-size:16.5px; line-height:1.62;
  -webkit-font-smoothing:antialiased;
}

a{ color:inherit; }

h1,h2,h3{ font-family:var(--serif); font-weight:600; line-height:1.15;
  letter-spacing:-.012em; }

.eyebrow{
  font-family:var(--mono); font-size:11.5px; letter-spacing:.17em;
  text-transform:uppercase; color:var(--violet); margin-bottom:14px;
}

.note{
  border-left:2px solid var(--amber);
  padding:2px 0 2px 16px; color:var(--muted); font-size:15px;
}
.note--wide{ max-width:var(--wide); margin:44px auto 0; }
.note b{ color:var(--ink); font-weight:600; }

/* ---------------------------------------------------------------- header -- */
.bar{
  position:sticky; top:0; z-index:40;
  display:flex; align-items:center; justify-content:space-between; gap:24px;
  padding:14px clamp(18px,4vw,44px);
  background:rgba(4,5,15,.72); backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid var(--rule);
}
.brand{ display:flex; align-items:center; gap:11px; text-decoration:none; }
.brand__name{ font-family:var(--mono); font-size:14px; letter-spacing:.1em; font-weight:600; }
.bar__nav{ display:flex; align-items:center; gap:26px; font-size:14px; }
.bar__nav a{ color:var(--muted); text-decoration:none; transition:color .18s var(--ease); }
.bar__nav a:hover{ color:var(--ink); }

@media (max-width:760px){
  .bar__nav a:not(.btn){ display:none; }
}

/* ----------------------------------------------------------------- button -- */
.btn{
  display:inline-block; padding:11px 21px; border-radius:9px;
  border:1px solid var(--rule); background:rgba(146,164,214,.06);
  color:var(--ink); font-size:14.5px; font-weight:500; text-decoration:none;
  transition:border-color .18s var(--ease), background .18s var(--ease),
             transform .18s var(--ease);
}
.btn:hover{ border-color:rgba(146,164,214,.4); background:rgba(146,164,214,.12);
  transform:translateY(-1px); }
.btn--primary{
  background:var(--teal); border-color:var(--teal); color:#03151a; font-weight:600;
}
.btn--primary:hover{ background:#79d6e3; border-color:#79d6e3; }
.btn--sm{ padding:7px 15px; font-size:13.5px; }

/* ------------------------------------------------------------------- hero -- */
.hero{ position:relative; overflow:hidden; border-bottom:1px solid var(--rule); }
.hero__grid{
  position:absolute; inset:0; width:100%; height:100%; display:block;
  touch-action:manipulation;
}
/* The fringes are the subject, so they are not dimmed evenly: the left of the
   frame is held dark enough to read a paragraph on and the right is left alone. */
.hero__scrim{
  position:absolute; inset:0; z-index:1; pointer-events:none;
  background:
    radial-gradient(84% 78% at 14% 46%, rgba(4,5,15,.93) 0%, rgba(4,5,15,.68) 36%, rgba(4,5,15,0) 74%),
    linear-gradient(to bottom, rgba(4,5,15,.55) 0%, rgba(4,5,15,0) 26%, rgba(4,5,15,.55) 86%, var(--bg) 100%);
}
.hero__inner{
  position:relative; z-index:2; pointer-events:none;
  max-width:var(--wide); margin:0 auto;
  padding:clamp(72px,13vh,132px) clamp(20px,5vw,44px) clamp(56px,10vh,104px);
}
.hero__inner a{ pointer-events:auto; }

.hero__title{
  font-size:clamp(46px,8.4vw,92px); letter-spacing:-.028em; margin-bottom:22px;
}
/* The mark's gradient runs teal → violet → amber. Violet and amber meet through
   a dull rose in sRGB, so the ramp reaches amber only at the very end of the
   word and spends most of its length between teal and violet, which is where
   the two colours the course actually argues about live. */
.hero__title-em{
  background:linear-gradient(96deg,var(--teal) 0%,#7fb6e0 30%,var(--violet) 66%,var(--amber) 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.hero__lead{
  max-width:620px; font-size:clamp(16.5px,1.6vw,19px); color:var(--muted);
  text-shadow:0 1px 20px rgba(4,5,15,.9);
}
.hero__cta{ display:flex; flex-wrap:wrap; gap:12px; margin-top:30px; }

.facts{
  list-style:none; display:flex; flex-wrap:wrap; gap:clamp(24px,4vw,52px);
  margin-top:clamp(40px,7vh,68px); padding-top:26px;
  border-top:1px solid var(--rule); max-width:660px;
}
.facts li{ display:flex; flex-direction:column; }
.facts b{ font-family:var(--serif); font-size:30px; font-weight:600; line-height:1; }
.facts span{ font-family:var(--mono); font-size:11px; letter-spacing:.13em;
  text-transform:uppercase; color:var(--faint); margin-top:7px; }

/* ------------------------------------------------------------------ bands -- */
.band{
  max-width:var(--wide); margin:0 auto;
  padding:clamp(64px,10vh,110px) clamp(20px,5vw,44px);
}
.band--alt{
  max-width:none; background:var(--bg-2);
  border-block:1px solid var(--rule);
}
.band__in{ max-width:var(--wide); margin-inline:auto; }

.band h2{ font-size:clamp(28px,3.4vw,40px); margin-bottom:20px; }
.band__lead{ max-width:720px; color:var(--muted); }

.band__grid{
  display:grid; grid-template-columns:minmax(0,5fr) minmax(0,7fr);
  gap:clamp(32px,4vw,60px); align-items:center;
}
@media (max-width:940px){ .band__grid{ grid-template-columns:minmax(0,1fr); } }

.band__copy p{ color:var(--muted); margin-bottom:16px; }
.band__copy .eq{
  font-family:var(--serif); font-size:22px; color:var(--teal);
  text-align:center; padding:16px 0; margin:6px 0 18px;
  border-block:1px solid var(--rule);
}

/* -------------------------------------------------------------- the scope -- */
.scope{
  position:relative; border:1px solid var(--rule); border-radius:14px;
  background:var(--bg); overflow:hidden;
  box-shadow:0 26px 70px -32px rgba(79,190,206,.30), 0 2px 0 rgba(255,255,255,.03) inset;
}
/* The readout is pinned to the screen, not to the figure — the caption below
   it is paper, and a reading that sits on the caption is a reading that has
   left the instrument. */
.scope__frame{ position:relative; }
.scope__screen{ display:block; width:100%; aspect-ratio:16/10; }
@media (max-width:520px){ .scope__screen{ aspect-ratio:4/3; } }

.hud{
  position:absolute; inset:0; pointer-events:none;
  font-family:var(--mono); font-size:12.5px; letter-spacing:.06em;
  color:var(--faint);
}
.hud > span{ position:absolute; }
.hud b{ color:var(--ink); font-weight:600; }
.hud__tl{ top:14px; left:16px; display:flex; flex-direction:column; gap:5px; }
.hud__tr{ top:14px; right:16px; text-align:right; }
.hud__bl{ bottom:14px; left:16px; color:var(--violet); }
.hud__bl b{ color:var(--violet); }
.hud__br{ bottom:14px; right:16px; color:var(--amber); }
.hud__br b{ color:var(--amber); }
.hud__live{ color:var(--teal); display:flex; align-items:center; gap:8px; }
.hud__live i{
  width:8px; height:8px; border-radius:50%; background:#ff4f6a;
  animation:blink 2.4s var(--ease) infinite;
}
@keyframes blink{ 0%,45%{ opacity:1 } 55%,100%{ opacity:.25 } }
@media (prefers-reduced-motion:reduce){ .hud__live i{ animation:none; } }
.hud__bits{ color:var(--faint); letter-spacing:.22em; }

.scope figcaption{
  padding:13px 17px; font-size:13px; color:var(--faint);
  border-top:1px solid var(--rule); background:var(--bg-2);
}

/* ------------------------------------------------------------- the modules -- */
/* Seven cards into a four-column grid leaves a hole, so each card carries its
   own border and the hole is simply empty page rather than a phantom eighth
   chapter. */
.mods{
  list-style:none; margin-top:44px;
  display:grid; grid-template-columns:repeat(auto-fit,minmax(258px,1fr)); gap:14px;
}
.mods li{
  background:var(--bg-3); border:1px solid var(--rule); border-radius:12px;
  padding:24px 22px 26px;
}
.mods__n{
  display:inline-flex; align-items:center; justify-content:center;
  width:28px; height:28px; border-radius:50%;
  border:1px solid rgba(172,153,220,.45); color:var(--violet);
  font-family:var(--mono); font-size:12.5px; margin-bottom:14px;
}
.mods h3{ font-size:19px; margin-bottom:8px; }
.mods p{ color:var(--muted); font-size:14.5px; }

/* ----------------------------------------------------------- the documents -- */
.docs{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(255px,1fr));
  gap:16px; margin-top:40px;
}
.doc{
  display:flex; flex-direction:column; gap:9px;
  padding:24px 22px 22px; border:1px solid var(--rule); border-radius:12px;
  background:var(--bg-2); text-decoration:none;
  transition:border-color .2s var(--ease), transform .2s var(--ease),
             background .2s var(--ease);
}
.doc:hover{ border-color:rgba(79,190,206,.45); background:var(--bg-3);
  transform:translateY(-2px); }
.doc__kind{
  font-family:var(--mono); font-size:10.5px; letter-spacing:.16em;
  text-transform:uppercase; color:var(--faint);
}
.doc h3{ font-size:20px; }
.doc p{ color:var(--muted); font-size:14.5px; flex:1; }
.doc__go{ color:var(--teal); font-size:14px; font-weight:500; }
.doc--quiet{ opacity:.6; }

/* ----------------------------------------------------------------- footer -- */
.foot{
  border-top:1px solid var(--rule); background:var(--bg-2);
  padding:18px clamp(20px,5vw,44px) 20px;
  font-size:12.5px; line-height:1.5; color:var(--faint);
}
.foot > *{ max-width:var(--wide); margin:0 auto; }
.foot__fine{ margin-top:5px; }
.foot a{ color:var(--muted); text-decoration:underline; text-underline-offset:2px; }
.foot a:hover{ color:var(--ink); }

@media (prefers-reduced-motion:reduce){
  .btn:hover, .doc:hover{ transform:none; }
}

/* The brand is a long word and the button beside it must not wrap: on a narrow
   phone the two together are wider than the bar, and a two-line button in a
   sticky header eats a tenth of the screen. */
@media (max-width:520px){
  .bar{ padding-inline:16px; gap:12px; }
  .brand__name{ font-size:11.5px; letter-spacing:.05em; }
  .bar__nav .btn{ white-space:nowrap; }
}

/* Below about 360 points the same pair still does not fit: the mark, the name
   and the button come to 311 points inside a 288-point bar, so the page scrolls
   sideways by the difference. The mark shrinks, the name loses its tracking and
   the button loses its padding; nothing is dropped. */
@media (max-width:380px){
  .bar{ padding-inline:13px; gap:9px; }
  .brand{ gap:8px; }
  .brand img{ width:24px; height:24px; }
  .brand__name{ font-size:10.5px; letter-spacing:.02em; }
  .bar__nav .btn--sm{ padding:7px 11px; font-size:12.5px; }
}