/* The Curriculum page's Subjects band — src/curriculum.md.
   Loaded on that page only, after explore.css.

   One screen of navy carrying the tower, a ring drawn round it and the line
   that says what to do with them. The band holds the viewport for a moment on
   the way past (data-hold), so it has to fit inside one: everything in it is
   sized from svh rather than rem for that reason. */

/* Narrow screens first: the band is an ordinary section — heading, then the
   eighteen subjects. The tower and its line are not built at all in the phone
   layout (below 1024px, or a tablet — assets/js/layout.js), so this is the
   whole of it there. */
.crsubjects {
  /* Sized off the window's height, capped in vw so that on a narrow desktop it
     leaves the line beside it something to live in. */
  --crmodel-size: min(80svh, 45rem, 44vw);
  background: var(--bms-blue-900);
  color: var(--paper);
  --focus-ring: var(--paper);
}
.crsubjects h2 {
  margin: 0;
  color: var(--paper);
}
.crsubjects-body { display: none; }

/* page.css draws the subject list for a white page: ink text on a dark
   hairline, with --gold-ink as the accent because that is the value that
   clears 3:1 on the light grounds. On the navy every one of those flips to
   its opposite number. */
.crsubjects-list .subjectgrid-link {
  border-top-color: var(--hairline-on-dark);
  color: var(--paper);
}
.crsubjects-list .subjectgrid-link::before { background: var(--gold); }
.crsubjects-list .subjectgrid-arrow { color: var(--bms-sky); }
.crsubjects-list .subjectgrid-link:hover .subjectgrid-arrow,
.crsubjects-list .subjectgrid-link:focus-visible .subjectgrid-arrow { color: var(--gold); }
.crsubjects-list .subjectgrid-link:hover .subjectgrid-name { color: var(--paper); }

@media (min-width: 1024px) and (hover: hover), (min-width: 1024px) and (pointer: fine), (min-width: 1024px) and (pointer: none), (min-width: 1401px) {
  /* One screen, and the tower rather than the list. The heading and the body
     share a single grid cell rather than taking a row each: the heading holds
     the top-left corner every other section heading holds, and the tower is
     centred on the whole band instead of on what is left underneath it.
     Nothing collides — the heading is at the left, the tower at the right. */
  .crsubjects {
    display: grid;
    grid-template-areas: "stack";
    min-height: 100svh;
    /* No padding of its own. The heading carries its own offset instead, so
       the band's box is the window and the tower centred in it is centred on
       the screen — with padding here, centring would be centring on what the
       padding left over, and the tower sat 25px low. */
    padding: 0;
  }
  /* The heading sits where a section heading sits everywhere else — its own
     --ex-space from the top — with a floor under it in svh, because this band
     runs to the top of the window rather than following a section above it and
     the same measurement reads tighter against a screen edge. */
  .crsubjects > .ex-shell {
    grid-area: stack;
    align-self: start;
    padding-top: max(var(--ex-space), 9svh);
  }
  /* Set in the same width the heading is, so the line under it starts on the
     heading's own left edge and the ring finishes on the page's right margin —
     both on the page's grid rather than near it. */
  .crsubjects-body {
    grid-area: stack;
    align-self: center;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    column-gap: clamp(var(--sp-8), 4vw, var(--sp-16));
    align-items: center;
    width: var(--ex-shell);
    margin-inline: auto;
  }
  .crsubjects-list { display: none; }
}

/* The tower and its ring. A square: the ring is inscribed in it and the model
   sits inside the ring, so one size drives both. */
.crmodel {
  position: relative;
  display: grid;
  place-items: center;
  /* Right-hand column, ending on the shell's right edge — the same margin the
     photographs and prose keep further down the page. */
  grid-column: 2;
  justify-self: end;
  width: var(--crmodel-size);
  aspect-ratio: 1;
  border-radius: 50%;
  color: inherit;
  text-decoration: none;
}
/* The canvas is inset so the tower stands inside the ring rather than across
   it. Square, because the renderer draws square.

   Lifted 10px. The camera sits a little above the tower and looks down at it,
   which is what gives the model its depth, and that same tilt drops where it
   lands on the canvas — enough to read as sitting low in the ring. A transform
   rather than a margin, so only the drawing moves and the ring, which is
   centred on the link rather than on this, stays exactly where it is. */
.crmodel-stage {
  display: block;
  width: 78%;
  height: 78%;
  transform: translateY(-10px);
}
.crmodel-stage canvas {
  display: block;
  width: 100%;
  height: 100%;
}
.crring {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  fill: none;
}
/* The ring the light runs round. Faint: it is the track, not the thing. */
.crring-track {
  stroke: rgba(255, 255, 255, 0.16);
  stroke-width: 1;
}
/* One short arc, travelling. The dash pattern is in user units against a 200
   unit box: 44 of the 615.75 circumference lit, the rest dark. */
.crring-light {
  stroke: var(--paper);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-dasharray: 44 572;
  animation: crring-run var(--t-cr-ring) linear infinite;
}
@keyframes crring-run {
  from { stroke-dashoffset: 0; }
  to   { stroke-dashoffset: -615.75; }
}
.crmodel:hover .crring-light,
.crmodel:focus-visible .crring-light { stroke-width: 3; }

/* Ranged left from the heading's own edge, and a step up in size from the
   opening paragraph — it is the only line of copy on a whole screen of navy
   and reads as small at body size. */
.crsubjects-tagline {
  grid-column: 1;
  justify-self: start;
  margin: 0;
  max-width: 26ch;
  color: var(--bms-sky);
  font-size: var(--step-2);
  font-weight: 500;
  line-height: 1.4;
  text-align: left;
  text-wrap: balance;
}