/* curio: the stage, the laptop, the terminal, and this page's sections.
 *
 * The laptop is drawn in CSS 3D out of flat, pixel-stepped planes: the lid
 * (a front face with the screen and a back face with the Escape mark), the
 * hinge, the deck and its front edge. Every length is a multiple of --p, one
 * "pixel" of the drawing, so the whole thing scales with the viewport and
 * keeps its proportions: the lid is 172p by 116p, its screen 160p by 102.4p,
 * the 100 by 32 cell grid of the terminal at 10 by 20 units (14:9).
 *
 * At rest the rig leans back 12 degrees and the lid forward 12, so the
 * screen faces the reader squarely: that is what lets the terminal read the
 * mouse by the canvas's own offsetX / offsetY.
 *
 * The reveal only exists under [data-curio-reveal], which the page's head
 * sets when motion is welcome (CLAUDE.md §3.13): without it the laptop
 * stands open and the screen is on.
 */

/* --- the stage -------------------------------------------------------------- */
.stage {
  --p: calc(var(--lw) / 172);
  --lw: min(820px, calc(100vw - 2 * var(--gut) - 440px), calc((100svh - 250px) * 1.12));
  position: relative;
  background: var(--ink);
  color: var(--paper);
  overflow: clip;
  padding: clamp(1.75rem, 3.5vw, 2.75rem) 0 clamp(1.75rem, 3vw, 2.5rem);
}
.stage :focus-visible { outline-color: var(--paper); }
.stage__head { text-align: center; }
.stage__eyebrow { color: var(--ash); margin-bottom: 1.2rem; }
.stage__h { font-size: clamp(2rem, 3.6vw, 3.25rem); }
.stage__h br { display: none; }
@media (max-width: 760px) { .stage__h br { display: inline; } }
.stage__h2 { color: var(--ash); }

.stage__desk {
  position: relative;
  width: calc(var(--lw) + 2 * 220px);
  max-width: 100%;
  margin: clamp(1.5rem, 3vw, 2.25rem) auto 0;
}
/* the desk: one slate hairline the laptop and Sudo stand on */
.stage__desk::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0;
  height: 1px; background: var(--slate);
}
.stage__foot {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem;
  margin-top: 1.6rem;
}
.stage__hint { color: var(--ink-2); max-width: 60ch; }
.stage__tools { display: flex; gap: .75rem; flex-wrap: wrap; }

@media (max-width: 760px) {
  .stage { --lw: min(calc(100vw - 2 * var(--gut)), calc((100svh - 250px) * 1.12)); }
  .stage__desk { width: var(--lw); padding-bottom: 76px; }
}

/* --- the laptop ------------------------------------------------------------- */
.lt {
  position: relative;
  width: calc(var(--p) * 172);
  height: calc(var(--p) * 149.5);
  margin: 0 auto;
  perspective: calc(var(--p) * 900);
  perspective-origin: 50% 35%;
}
.lt-rig {
  position: absolute; left: 0; top: 0;
  width: calc(var(--p) * 172); height: calc(var(--p) * 116);
  transform-style: preserve-3d;
  transform-origin: 50% 100%;
  transform: rotateX(-12deg);
  /* the rig's own box lies in the screen's plane and would win the hit test */
  pointer-events: none;
}
.lt-screen { pointer-events: auto; }
.lt-lid {
  position: absolute; inset: 0;
  transform-style: preserve-3d;
  transform-origin: 50% 100%;
  transform: rotateX(12deg);
}
.lt-lid__front, .lt-lid__back {
  position: absolute; inset: 0;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  clip-path: polygon(
    0 calc(var(--p) * 2), var(--p) calc(var(--p) * 2), var(--p) var(--p), calc(var(--p) * 2) var(--p), calc(var(--p) * 2) 0,
    calc(100% - var(--p) * 2) 0, calc(100% - var(--p) * 2) var(--p), calc(100% - var(--p)) var(--p), calc(100% - var(--p)) calc(var(--p) * 2), 100% calc(var(--p) * 2),
    100% 100%, 0 100%);
}
/* the chin carries the curiosity wordmark, pixel i dots and all (site/layout.js) */
/* the bezel: ink, a slate rim one pixel in, silver on the outside edge */
.lt-lid__front {
  background: var(--ink);
  box-shadow: inset 0 0 0 calc(var(--p) * .8) #262B33;
}
.lt-cam {
  position: absolute; left: calc(50% - var(--p)); top: calc(var(--p) * 2.4);
  width: calc(var(--p) * 1.4); height: calc(var(--p) * 1.4); background: var(--slate);
}
.lt-screen {
  position: absolute;
  left: calc(var(--p) * 6); top: calc(var(--p) * 6);
  width: calc(var(--p) * 160); height: calc(var(--p) * 102.4);
  background: #030B06;
  overflow: hidden;
}
.lt-chin {
  position: absolute; left: 0; right: 0; bottom: calc(var(--p) * 1.6);
  margin: 0; text-align: center; font-size: max(9px, calc(var(--p) * 3.2)); line-height: 1;
  font-family: var(--sans); font-weight: 600; letter-spacing: -.03em; text-transform: none;
  color: #4A5160;
  transition: color .3s linear;
}
.lt-lid__front:has(.term:focus) .lt-chin { color: #57F08A; }

.lt-lid__back {
  transform: rotateY(180deg);
  background:
    linear-gradient(#DEE0DF, #DEE0DF) top / 100% var(--p) no-repeat,
    linear-gradient(#8A9099, #8A9099) bottom / 100% var(--p) no-repeat,
    #C5C9CE;
  display: grid; place-items: center;
}
.lt-lid__mark { width: calc(var(--p) * 22); height: auto; }

.lt-hinge {
  position: absolute; left: calc(var(--p) * 18); top: calc(var(--p) * 116);
  width: calc(var(--p) * 136); height: calc(var(--p) * 2.2);
  background: #4A5160;
}
.lt-base {
  position: absolute; left: 0; top: calc(var(--p) * 118);
  width: calc(var(--p) * 172); height: calc(var(--p) * 88);
  transform-origin: 50% 0;
  transform: rotateX(90deg);
  background:
    linear-gradient(#DEE0DF, #DEE0DF) top / 100% var(--p) no-repeat,
    #C5C9CE;
}
.lt-deck { position: absolute; inset: 0; }
.lt-keys {
  position: absolute; left: calc(var(--p) * 16); top: calc(var(--p) * 8);
  width: calc(var(--p) * 140); height: calc(var(--p) * 38);
}
.lt-pad {
  position: absolute; left: calc(50% - var(--p) * 28); top: calc(var(--p) * 52);
  width: calc(var(--p) * 56); height: calc(var(--p) * 30);
  background: #B4B9C0; box-shadow: inset 0 0 0 calc(var(--p) * .6) #9CA2AA;
}
/* the deck's front edge, standing where the deck ends: square corners and the
   deck's full width, so the two meet edge to edge */
.lt-front {
  position: absolute; left: 0; top: calc(var(--p) * 118);
  width: calc(var(--p) * 172); height: calc(var(--p) * 3.4);
  transform-origin: 50% 0;
  transform: translateZ(calc(var(--p) * 88));
  background:
    linear-gradient(#6B7280, #6B7280) center top / calc(var(--p) * 24) calc(var(--p) * 1.2) no-repeat,
    #8A9099;
}

/* --- the reveal: turn, open, power on ---------------------------------------- */
[data-curio-reveal] .lt-rig { animation: lt-turn 4.2s cubic-bezier(.33, 0, .15, 1) .1s both; }
[data-curio-reveal] .lt-lid { animation: lt-open 3s cubic-bezier(.5, 0, .2, 1) 1.3s both; }
[data-curio-reveal] .lt:not(.is-on) .term { opacity: 0; }
[data-curio-reveal] .lt.is-on .term { animation: lt-power .7s steps(7, end) both; }
[data-curio-reveal] .desk__sudo:not(.is-live) { visibility: hidden; }
@keyframes lt-turn {
  0%   { transform: translateY(calc(var(--p) * -58)) rotateX(-62deg) rotateY(-48deg) rotateZ(-6deg) scale(.62); }
  100% { transform: rotateX(-12deg); }
}
/* the fade is on the stage, not the rig: opacity on the rig would flatten its 3D */
[data-curio-reveal] .lt { animation: lt-fade .6s linear .15s both; }
@keyframes lt-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes lt-open {
  0%   { transform: rotateX(-90deg); }
  100% { transform: rotateX(12deg); }
}
/* a CRT's line, stepping open into the picture */
@keyframes lt-power {
  0%   { opacity: 1; clip-path: inset(49.5% 0 49.5% 0); filter: brightness(3); }
  45%  { clip-path: inset(49.5% 0 49.5% 0); filter: brightness(2.2); }
  100% { opacity: 1; clip-path: inset(0 0 0 0); filter: brightness(1); }
}

/* --- the terminal ------------------------------------------------------------ */
.term { position: absolute; inset: 0; outline: none; cursor: text; background: #030B06; }
.term__canvas { position: relative; z-index: 0; display: block; width: 100%; height: 100%; }
.term__static {
  margin: 0; padding: 0 calc(var(--p) * .5);
  font-family: var(--mono); color: #57F08A;
  font-size: calc(var(--p) * 2.62); line-height: calc(var(--p) * 3.2);
  white-space: pre; overflow: hidden;
  text-shadow: 0 0 calc(var(--p) * .8) rgba(87, 240, 138, .55);
}
.term.is-live .term__static { display: none; }
/* the glass: scanlines, a vignette, and a phosphor flicker you feel more than see */
.term__fx {
  position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background:
    repeating-linear-gradient(to bottom, rgba(0, 0, 0, 0) 0, rgba(0, 0, 0, 0) 2px, rgba(0, 0, 0, .22) 3px, rgba(0, 0, 0, 0) 4px),
    radial-gradient(ellipse at 50% 45%, rgba(87, 240, 138, .06) 0%, rgba(0, 0, 0, 0) 55%, rgba(0, 0, 0, .55) 100%);
  animation: term-flicker 6s steps(1, end) infinite;
  mix-blend-mode: multiply;
}
.term__fx::after {
  content: ""; position: absolute; left: 0; right: 0; top: -20%; height: 20%;
  background: linear-gradient(to bottom, rgba(87, 240, 138, 0), rgba(87, 240, 138, .05), rgba(87, 240, 138, 0));
  animation: term-roll 7s linear infinite;
  mix-blend-mode: screen;
}
@keyframes term-flicker { 0%, 100% { opacity: 1; } 47% { opacity: .9; } 48% { opacity: 1; } 81% { opacity: .95; } 82% { opacity: 1; } }
@keyframes term-roll { from { transform: translateY(0); } to { transform: translateY(600%); } }
@media (prefers-reduced-motion: reduce) { .term__fx, .term__fx::after { animation: none; } }

/* full screen: the terminal alone, as large as the window allows */
.termfull {
  position: fixed; inset: 0; z-index: 200;
  background: #000;
}
.termfull .term {
  --tw: min(calc(100vw - 32px), calc((100vh - 96px) * 1.5625));
  --p: calc(var(--tw) / 160);
  position: absolute; inset: auto; left: 50%; top: 50%;
  width: var(--tw); height: calc(var(--tw) / 1.5625);
  transform: translate(-50%, -50%);
}
.termfull__close { position: fixed; top: 16px; right: 16px; }
/* a phone held upright: turn the terminal a quarter to use the long side */
@media (orientation: portrait) and (max-width: 760px) {
  .termfull .term {
    --tw: min(calc(100vh - 120px), calc((100vw - 24px) * 1.5625));
    transform: translate(-50%, -50%) rotate(90deg);
  }
}
.has-termfull { overflow: hidden; }

/* --- Sudo on the desk -------------------------------------------------------- */
.desk__sudo {
  position: absolute; bottom: 0;
  left: calc(50% + var(--lw) / 2 + 72px);
  width: 143px; height: 104px;
  padding: 0; border: 0; background: none; cursor: pointer;
}
.desk__cat { position: absolute; inset: 0; display: block; }
.desk__cat-svg, .desk__cat-cv { position: absolute; inset: 0; width: 100%; height: 100%; image-rendering: pixelated; }
.desk__sudo.is-live .desk__cat-svg { display: none; }
.desk__sudo.is-landing .desk__cat { animation: sudo-land .45s cubic-bezier(.3, 0, .6, 1) both; }
.desk__sudo.is-hop .desk__cat { animation: sudo-hop .38s ease-out; }
@keyframes sudo-land { 0% { transform: translateY(-160px); } 70% { transform: translateY(4px); } 100% { transform: translateY(0); } }
@keyframes sudo-hop { 0%, 100% { transform: translateY(0); } 40% { transform: translateY(-18px); } }
@media (max-width: 760px) {
  .desk__sudo { left: auto; right: 0; width: 88px; height: 64px; }
}

/* --- Sudo handed between the desk, the rail and the sandbox (js/curio-sudo.js) --
   The rail starts off while he is on the desk, and hides its cat while he is
   in the sandbox drawing (the ball waits on it). The drawing hides its own
   Sudo while he is away, and the flyer is the one jumping between them. */
#sudo-rail.is-off { opacity: 0 !important; visibility: hidden; transition: opacity .25s ease, visibility 0s .25s; }
#sudo-rail.is-catless #sudo-cat, #sudo-rail.is-ballless #sudo-yarn { visibility: hidden; }
.duo__svg.is-away .duo__sudo { visibility: hidden; }
.sudo-flyer { position: fixed; z-index: 70; pointer-events: none; image-rendering: pixelated; }
@media print { .sudo-flyer { display: none; } }

/* --- page sections ----------------------------------------------------------- */
code { font-family: var(--mono); font-size: .88em; background: var(--stone); padding: .08em .35em; }
.section--dark code { background: var(--slate); color: var(--paper); }

.split-head {
  display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
  gap: clamp(1.5rem, 4vw, 4rem); align-items: end;
  margin-bottom: clamp(2rem, 4vw, 3rem);
}
.split-head .eyebrow { margin-bottom: 1.2rem; }
@media (max-width: 900px) { .split-head { grid-template-columns: minmax(0, 1fr); align-items: start; } }

.shell { border: 1px solid var(--ink); background: var(--ink); color: var(--paper); }
.shell--dark { border-color: var(--slate); background: #0A0D10; }
.shell__bar {
  display: flex; justify-content: space-between; align-items: center;
  padding: .6rem 1rem; border-bottom: 1px solid var(--slate); color: var(--ash);
}
.shell__copy {
  background: none; border: 1px solid var(--slate); color: var(--ink-2);
  padding: .25rem .7rem; border-radius: 999px; cursor: pointer;
}
.shell__copy:hover { border-color: var(--ash); color: var(--paper); }
.shell__code {
  margin: 0; padding: 1.2rem 1rem 1.3rem; overflow-x: auto;
  font-family: var(--mono); font-size: clamp(.8rem, 1.1vw, .95rem); line-height: 1.7;
}
.shell__code code { background: none; padding: 0; font-size: inherit; color: inherit; }
.shell__p { color: #57F08A; }
.install__note { margin-top: 1.1rem; }
.install__note .tlink { color: inherit; }

/* two ways in, side by side: the install script (auto-detected system) and the .NET tool */
/* subgrid, so the two shells line up whatever the text above them wraps to */
.installs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: clamp(1.5rem, 3vw, 2.5rem); row-gap: 0; }
.install { display: grid; grid-row: span 4; grid-template-rows: subgrid; min-width: 0; }
.install__k { margin: 0; }
.install__note code { text-transform: none; background: none; padding: 0; font-size: inherit; }
.install__d { margin: .6rem 0 1.2rem; color: var(--slate); max-width: 46ch; }
.shell__bar { gap: .75rem; }
.installs .shell__bar { min-height: 3.3rem; }
.modes--bar { padding: 1px; }
.modes--bar .modes__btn { font-size: .8rem; padding: .3rem .8rem; }
[data-install] .shell__code[hidden] { display: none; }
@media (max-width: 900px) { .installs { grid-template-columns: minmax(0, 1fr); row-gap: 0; } .install + .install { margin-top: 2.5rem; } }
/* a phone is narrower than the curl line; wrap it rather than hide "| bash" off the edge */
@media (max-width: 520px) { .installs .shell__code { white-space: pre-wrap; overflow-wrap: anywhere; } }

.cards3--dark { margin-top: clamp(2rem, 4vw, 3rem); }
.section--dark .case p { color: var(--ink-2); }
.section--dark .case .case__no { color: var(--ash); }
.case__glyph pre { margin: 1.4rem 0 0; font-family: var(--mono); font-size: .8rem; line-height: 1.6; color: #57F08A; }
.case h3 { padding-top: 2rem; }

.loop__lede { margin: 1.2rem 0 clamp(2rem, 4vw, 3rem); }
.loop { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); align-items: start; }
.loop__step { background: var(--stone); padding: 1.4rem 1.4rem 1.8rem; min-height: 14rem; border: var(--hair); border-right: 0; }
.loop__step:nth-child(2) { margin-top: 2.5rem; }
.loop__step:nth-child(3) { margin-top: 5rem; }
.loop__step:nth-child(4) { margin-top: 7.5rem; border-right: var(--hair); }
.loop__step .label { color: var(--mute-ink); }
.loop__step h3 { font-size: 1.4rem; font-weight: 500; letter-spacing: -.015em; margin: 3rem 0 .5rem; }
.loop__step p { margin: 0; color: var(--slate); font-size: .96rem; }
.loop__step--end { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.loop__step--end .label { color: var(--ash); }
.loop__step--end p { color: var(--ink-2); }
.loop__step--end code { background: var(--slate); }
@media (max-width: 900px) {
  .loop { grid-template-columns: minmax(0, 1fr); }
  .loop__step, .loop__step:nth-child(n) { margin-top: 0; border-right: var(--hair); border-bottom: 0; min-height: 0; }
  .loop__step:last-child { border-bottom: var(--hair); }
  .loop__step h3 { margin-top: 1.2rem; }
}

.keys { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: clamp(1.5rem, 4vw, 3rem); border-top: var(--hair); }
.keys__row { display: grid; grid-template-columns: 9.5rem minmax(0, 1fr); gap: 1rem; align-items: center; padding: .9rem 0; border-bottom: var(--hair); }
.keys__k { display: flex; gap: .35rem; flex-wrap: wrap; }
.keys__d { color: var(--slate); font-size: .96rem; }
kbd {
  font-family: var(--mono); font-size: .75rem; letter-spacing: .04em;
  display: inline-block; min-width: 2.2rem; text-align: center;
  padding: .3rem .5rem; border: 1px solid var(--ink); border-bottom-width: 3px; background: var(--paper);
}
@media (max-width: 760px) { .keys { grid-template-columns: minmax(0, 1fr); } }

.twin { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border: var(--hair); margin-top: clamp(2rem, 4vw, 3rem); }
.twin__cell { padding: clamp(1.4rem, 3vw, 2.2rem); }
.twin__cell + .twin__cell { border-left: var(--hair); }
.twin__cell .label { color: var(--mute-ink); }
.twin__cell h3 { font-size: 1.5rem; font-weight: 500; letter-spacing: -.015em; margin: 2.2rem 0 .6rem; }
.twin__cell p { margin: 0; color: var(--slate); max-width: 52ch; }
.twin__cell--ink { background: var(--ink); color: var(--paper); }
.twin__cell--ink .label { color: var(--ash); }
.twin__cell--ink p { color: var(--ink-2); }
.twin__cell--ink code { background: var(--slate); }
@media (max-width: 760px) {
  .twin { grid-template-columns: minmax(0, 1fr); }
  .twin__cell + .twin__cell { border-left: 0; border-top: var(--hair); }
}

.reasons--dark { margin-top: clamp(2rem, 4vw, 3rem); }

/* --- what the laptop shows: coding or exploring ----------------------------- */
.modes { display: inline-flex; border: 1px solid var(--slate); border-radius: 999px; padding: 2px; }
.modes__btn {
  font-family: var(--sans); font-size: .9rem; font-weight: 500; line-height: 1.2;
  padding: .5rem 1rem; border: 0; border-radius: 999px; background: none; color: var(--ink-2); cursor: pointer;
}
.modes__btn:hover { color: var(--paper); }
.modes__btn[aria-pressed="true"] { background: var(--paper); color: var(--ink); }
@media (max-width: 520px) { .modes__btn { padding: .5rem .75rem; font-size: .84rem; } }

/* --- your coding agent: Clawd, Sudo and you ---------------------------------- */
.duo { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border: var(--hair); }
.duo__step { margin: 0; padding: 1.4rem 1.4rem 1.8rem; }
.duo__step + .duo__step { border-left: var(--hair); }
.duo__svg { display: block; width: 100%; max-width: 288px; height: auto; margin-bottom: 1.4rem; }
.duo__step .label { color: var(--ash); }
.duo__step h3 { font-size: 1.4rem; font-weight: 500; letter-spacing: -.015em; margin: 1rem 0 .5rem; }
.duo__step p:not(.label) { margin: 0; color: var(--ink-2); font-size: .96rem; }
.duo__b { visibility: hidden; }
@media (prefers-reduced-motion: no-preference) {
  .duo__a { animation: duo-a 1.6s steps(1, end) infinite; }
  .duo__b { animation: duo-b 1.6s steps(1, end) infinite; }
  .duo__cursor { animation: duo-a 1s steps(1, end) infinite; }
  .duo__new { animation: duo-a 1.2s steps(1, end) infinite; }
  .duo__hand { animation: duo-tap 1.6s steps(1, end) infinite; }
}
@keyframes duo-a { 0% { visibility: visible; } 50% { visibility: hidden; } }
@keyframes duo-b { 0% { visibility: hidden; } 50% { visibility: visible; } }
@keyframes duo-tap { 0% { transform: translate(0, 0); } 50% { transform: translate(-2px, -2px); } }
@media (max-width: 900px) {
  .duo { grid-template-columns: minmax(0, 1fr); }
  .duo__step + .duo__step { border-left: 0; border-top: var(--hair); }
}

.harness { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border: var(--hair); border-top: 0; }
.harness__cell { padding: 1.3rem 1.3rem 1.5rem; display: flex; flex-direction: column; }
.harness__cell + .harness__cell { border-left: var(--hair); }
.harness__cell h3 { font-size: 1.15rem; font-weight: 500; letter-spacing: -.015em; margin: 0 0 .5rem; }
.harness__cell p { margin: 0 0 1rem; color: var(--ink-2); font-size: .92rem; }
.harness__cmd { margin: auto 0 0; font-family: var(--mono); font-size: .78rem; color: var(--paper); white-space: pre-wrap; }
.harness__cmd code { background: none; padding: 0; }
.harness__note { margin-top: 1.1rem; }
@media (max-width: 1000px) {
  .harness { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .harness__cell:nth-child(3) { border-left: 0; }
  .harness__cell:nth-child(n+3) { border-top: var(--hair); }
}
@media (max-width: 560px) {
  .harness { grid-template-columns: minmax(0, 1fr); }
  .harness__cell + .harness__cell { border-left: 0; border-top: var(--hair); }
}

/* a harness's mark: its maker's logo in the text color, its own colors while pointed at */
.harness__logo { position: relative; display: block; width: 32px; height: 32px; margin-bottom: 1.1rem; color: var(--paper); }
.harness__logo svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.harness__color { opacity: 0; transition: opacity .2s linear; }
.harness__mono { transition: opacity .2s linear, color .2s linear; }
.harness__cell:hover .harness__color, .harness__cell:focus-within .harness__color { opacity: 1; }
.harness__cell:hover .harness__logo:not(.harness__logo--tint) .harness__mono,
.harness__cell:focus-within .harness__logo:not(.harness__logo--tint) .harness__mono { opacity: 0; }
.harness__cell:hover .harness__logo--tint, .harness__cell:focus-within .harness__logo--tint { color: var(--tint); }

/* a section's pointer to the matching page of curio's documentation */
.docs-link { margin: 1.4rem 0 0; }
.section--dark .docs-link .tlink { color: var(--paper); }
.section--dark .docs-link .tlink:hover { color: var(--ink-2); }