/* Neta DAO Academy: The Graphic (Sex, Monsters, and Superheroes). Generated by sitebuild/page_graphic.py from the
   design system's TheGraphicPage draft; loads after pages.css. */
/* The Graphic brings its own language inside the shell: comic panels. A panel is a 2px ink frame with a hard
   8px drop, on 20px gutters; Night panels invert. The cover's lettering mixes faces like a comic cover: its red
   belongs to the cover, and its neon pink is the page's pink, the same one that marks the current session. */
.pg-graphic { --g-frame: 2px solid var(--ink); --g-drop: 8px 8px 0 var(--ink); --g-gutter: 20px; --g-red: #cf2338;
  --neon-core: #ffe1f1; --neon-glow: #ff5fb0;
  --neon: 0 0 1px #fff, 0 0 4px #ffb3dc, 0 0 10px var(--neon-glow), 0 0 20px #e63d93, 0 0 36px var(--pink-mark), 0 0 60px rgb(204 70 133 / .55); }
.pg-panel { position: relative; border: var(--g-frame); box-shadow: var(--g-drop); background: var(--paper); color: var(--ink); }
.pg-g-coverrow { padding-top: var(--space-8, 40px); border-bottom: 0; }
.pg-g-cover { display: grid; grid-template-columns: minmax(0, 11fr) minmax(0, 9fr); border: var(--g-frame); box-shadow: var(--g-drop); background: var(--paper); }
.pg-g-cover__copy { container-type: inline-size; display: flex; flex-direction: column; gap: 18px; padding: 40px 48px 44px; }
.pg-g-cover__art { margin: 0; border-left: var(--g-frame); background: #111; overflow: hidden; }
.pg-g-cover__art img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 30% 40%; }
.pg-g-title { display: flex; flex-direction: column; align-items: flex-start; margin: 6px 0 0; color: var(--ink); }
/* Sex, as on the poster: a neon script, a pale tube in a pink glow, which flickers on once */
.pg-g-title__sex { margin: -1cqi 0 -1.6cqi -.6cqi; padding: 0 3cqi 0 1cqi; font: 400 19cqi/1.05 "Satisfy", var(--font-body); color: var(--neon-core);
  text-shadow: var(--neon); animation: pg-neon-on 1.7s .35s both; }
@keyframes pg-neon-on {
  0% { opacity: .1; text-shadow: none; } 5% { opacity: 1; text-shadow: var(--neon); } 8% { opacity: .2; text-shadow: none; }
  12% { opacity: 1; text-shadow: var(--neon); } 20% { opacity: .55; } 23% { opacity: 1; } 100% { opacity: 1; text-shadow: var(--neon); } }
.pg-g-title__monsters { margin: 1.2cqi 0 0 7cqi; padding: .4cqi 2.2cqi .1cqi; background: var(--g-red); color: #fafaf2;
  font: 700 13.4cqi/.9 var(--font-display); text-transform: uppercase; letter-spacing: -.005em; transform: rotate(-1.5deg); }
.pg-g-title__and { margin: 2.2cqi 0 .6cqi 12cqi; font: 500 2.4cqi/1 var(--font-mono); letter-spacing: .3em; text-transform: uppercase; }
.pg-g-title__heroes { margin-left: 3cqi; font: 800 17.6cqi/.86 var(--font-display); letter-spacing: -.01em; }
.pg-g-sub { margin: 4px 0 0 4cqi; font: 400 18px/1.3 var(--font-mono); letter-spacing: .22em; text-transform: uppercase; }
.pg-g-cover .pg-cover__actions { margin-top: 10px; }
.pg-g-h2 { margin: 0; font: 700 44px/.9 var(--font-display); text-transform: uppercase; letter-spacing: -.005em; }
.pg-g-h2--big { font-size: clamp(64px, 6.4vw, 96px); line-height: .84; }
/* about: three caption boxes, staggered like panels on a page */
.pg-g-about { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--g-gutter); row-gap: 28px; border-bottom: 0; }
.pg-g-about .pg-g-h2 { grid-column: 1 / 6; font-size: clamp(56px, 5.4vw, 80px); line-height: .86; }
.pg-caption { margin: 0; padding: 22px 26px; border: var(--g-frame); box-shadow: var(--g-drop); background: var(--paper); font: 400 16px/1.65 var(--font-body); color: var(--ink); }
.pg-caption--a { grid-column: 1 / 8; grid-row: 2; align-self: start; font-size: 20px; line-height: 1.55; }
.pg-caption--b { grid-column: 8 / 13; grid-row: 2 / 4; align-self: start; margin-top: 56px; }
.pg-caption--c { grid-column: 2 / 8; grid-row: 3; align-self: start; }
/* the reading order is numbered, as panels sometimes are: left, across to the right, then back left */
.pg-caption { position: relative; }
.pg-caption__num { position: absolute; top: -14px; left: -11px; display: grid; place-items: center; width: 30px; height: 30px; background: var(--ink); color: var(--paper); font: 700 19px/1 var(--font-display); }
.pg-g-formatrow, .pg-g-interestrow { border-bottom: 0; }
.pg-g-format { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 40px; align-items: start; padding: 44px 48px; }
.pg-g-format .pg-body { color: var(--ink-mid); }
.pg-g-format .pg-body + .pg-body { margin-top: 1em; }
/* Lil D peeks over the top edge of the format panel: his box sits on the panel and clips him at its edge */
/* Lil D peeks over the top edge of the format panel, in the free corner beside the last caption: his box sits on
   the panel and clips him at its edge. He keeps to the right of the captions' column 8 (with his name), and the
   script adds room above the panel only if the second caption ever comes down too far for him. */
.pg-lild-stage { --lild-w: 195px; position: relative; margin-top: var(--lild-room, 0px); }
.pg-lild { position: absolute; right: min(7%, calc(41.667% - 16px - var(--lild-w) * 1.92)); bottom: 100%; width: var(--lild-w); aspect-ratio: 720 / 537; cursor: pointer; }
.pg-lild__clip { position: absolute; inset: 0; overflow: hidden; transform: scaleX(-1); }   /* mirrored: he faces his name and the page */
.pg-lild__frog { display: block; width: 100%; height: auto; }
.pg-lild__note { position: absolute; right: 92%; bottom: 47%; width: 100%; overflow: visible; }
/* no non-scaling-stroke: it would measure the dashes on screen and cut every stroke short of pathLength 1 */
.pg-ink { stroke: var(--ink); stroke-width: 2.9; stroke-linecap: round; stroke-linejoin: round; fill: none; }
.pg-lild__note .pg-ink { stroke-width: 4.2; }          /* the note draws at about .7: about 2.9 on screen */
.pg-lild__note .pg-ink--name { stroke-width: 3.7; }    /* inside the name's 1.3 scale: about 3.4 */
/* the script arms him once the page loads, plays him once the captions and his corner are in full view; he holds when done */
.pg-lild-stage.is-armed .pg-lild__frog { transform: translateY(101%); }
.pg-lild-stage.is-armed .pg-ink { stroke-dasharray: 1 1; stroke-dashoffset: 1; opacity: 0; }
.pg-lild-stage.is-on .pg-lild__frog { animation: pg-lild-peek 2.8s both; }
.pg-lild-stage.is-on .pg-ink { animation: pg-ink-draw var(--t, .4s) var(--d, 0s) linear both; }
@keyframes pg-lild-peek {   /* he never rises past standing: the cut at the bottom of his picture stays below the edge */
  0% { transform: translateY(101%); animation-timing-function: cubic-bezier(.25, .7, .35, 1); }
  21% { transform: translateY(53%); }                                   /* up to his eyes */
  25% { transform: translateY(55%); }
  43% { transform: translateY(55%); animation-timing-function: cubic-bezier(.55, 0, .75, .5); }
  51% { transform: translateY(69%); }                                   /* ducks back a little */
  63% { transform: translateY(69%); animation-timing-function: cubic-bezier(.3, .7, .4, 1); }
  82% { transform: translateY(0); animation-timing-function: ease-in-out; }   /* stands up */
  90% { transform: translateY(2.5%); }                                  /* and settles */
  100% { transform: translateY(0); } }
@keyframes pg-ink-draw { 0% { stroke-dashoffset: 1; opacity: 0; } 1% { opacity: 1; } 100% { stroke-dashoffset: 0; opacity: 1; } }
/* the syllabus as a comic page: panels on a 12-column grid, rows of differing splits, in comic process colours */
.pg-g-sylhead { align-items: end; }
.pg-g-sylhead .pg-meta { max-width: 30ch; text-align: right; }
.pg-page { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--g-gutter); padding: var(--g-gutter); border: var(--g-frame); outline: 1px solid var(--ink); outline-offset: 4px; }
.pg-panel { padding: 18px 20px 20px; }
.pg-panel--12 { grid-column: span 12; } .pg-panel--7 { grid-column: span 7; } .pg-panel--6 { grid-column: span 6; } .pg-panel--5 { grid-column: span 5; }
.pg-tone--y { --g-tint: #fff1a1; --g-dot: #f4c300; }
.pg-tone--c { --g-tint: #d0effc; --g-dot: #27a9e1; }
.pg-tone--g { --g-tint: #dbf1c6; --g-dot: #5bb348; }
.pg-tone--o { --g-tint: #ffdcb4; --g-dot: #f5851f; }
.pg-tone--r { --g-tint: #fcd3c9; --g-dot: #d8321f; }   /* a vermilion, kept clear of the current session's pink */
.pg-tone--p { --g-tint: #e5dbf5; --g-dot: #8659cc; }
.pg-tone--b { --g-tint: #ebdcc7; --g-dot: #946538; }
.pg-tone--k { --g-tint: #303237; --g-dot: #646a75; }   /* charcoal, on the dark theme: light type, dark cells */
.pg-panel--tint { background-color: var(--g-tint); background-image: radial-gradient(circle, var(--g-dot) 1.6px, transparent 2px); background-size: 9px 9px; }
/* now: the site's rule, in this page's neon. Pink frame and drop, pink dots, a glowing chip */
.pg-panel--now { border: 3px solid var(--pink-mark); background-color: #ffe5f2; color: var(--ink);
  background-image: radial-gradient(circle, var(--neon-glow) 1.6px, transparent 2px); background-size: 9px 9px;
  box-shadow: 8px 8px 0 var(--pink-mark), 0 0 28px 2px rgb(255 95 176 / .5); }
.pg-panel--now .pg-chip { background: var(--pink-mark); color: #fff; box-shadow: 0 0 10px rgb(255 95 176 / .8); }
.pg-panel--now .pg-cells { border-color: var(--pink-mark); }
.pg-burst { position: absolute; top: -26px; right: -18px; width: 84px; height: 84px; transform: rotate(12deg); overflow: visible; filter: drop-shadow(0 0 8px rgb(255 95 176 / .7)); }
.pg-burst polygon { fill: var(--pink-mark); stroke: var(--ink); stroke-width: 2.5; stroke-linejoin: round; }
.pg-burst text { fill: #fff; font: 700 27px/1 var(--font-display); text-transform: uppercase; letter-spacing: .01em; }
/* past: printed in black, grey dots */
.pg-panel--past { background-color: var(--paper); background-image: radial-gradient(circle, rgb(5 5 5 / .15) 1.3px, transparent 1.7px); background-size: 9px 9px; }
.pg-panel--past .pg-chip { background: var(--ink-dim); }
.pg-panel--past .pg-cell__work cite, .pg-panel--past .pg-cell__essay, .pg-panel--past .pg-panel__title { color: var(--ink-mid); }
.pg-panel__head { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; margin: 0 0 16px; }
.pg-panel__title { font: 700 34px/.92 var(--font-display); text-transform: uppercase; letter-spacing: -.005em; color: var(--ink); text-wrap: balance; }
.pg-chip { display: inline-block; margin: 0; padding: 4px 8px 3px; background: var(--ink); color: var(--paper); font: 500 11px/1.2 var(--font-mono); letter-spacing: .1em; text-transform: uppercase; }
.pg-panel--strip { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 28px; border-left-width: 8px; }
.pg-panel--strip .pg-panel__head { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 10px 18px; margin: 0; }
.pg-strip__note { margin: 0 0 0 auto; padding: 7px 12px; border: 1px solid var(--ink); background: var(--paper); font: 400 15px/1.5 var(--font-body); color: var(--ink-mid); }
.pg-cells { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); border: 1px solid var(--ink); background: var(--paper); }
.pg-cell { padding: 14px 16px 16px; }
.pg-cell + .pg-cell { border-left: 1px solid var(--ink); }
.pg-panel--now .pg-cell + .pg-cell { border-left-color: var(--pink-mark); }
.pg-cell__label { margin: 0 0 10px; font: 400 10.5px/1.3 var(--font-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-dim); }
.pg-cell__work { margin: 0; }
.pg-cell__work + .pg-cell__work { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--rule-thin); }
.pg-cell__work cite { display: block; font: 700 26px/.95 var(--font-display); font-style: normal; text-transform: uppercase; letter-spacing: -.005em; }
.pg-cell__work span { display: block; margin-top: 6px; font: 400 14.5px/1.4 var(--font-body); color: var(--ink-mid); }
.pg-cell__essay { margin: 0; font: 400 14.5px/1.5 var(--font-body); color: var(--ink); }
.pg-cell__essay + .pg-cell__essay { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--rule-thin); }
/* a theoretical text not chosen yet: an empty slot, to be filled */
.pg-cell__tbc { display: inline-block; margin: 0; padding: 5px 9px 4px; border: 1px dashed var(--ink-dim); font: 400 11px/1.2 var(--font-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-dim); }
/* express interest: a Night panel holding a Paper panel with the form */
.pg-g-interest { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 48px; align-items: center; padding: 52px 48px; }
.pg-g-interest .pg-body { margin-top: 20px; color: var(--ink-mid); }
.pg-g-interest .pg-hint { margin-top: 16px; font-size: 14px; }
.pg-g-form { display: flex; flex-direction: column; gap: 20px; margin: 0; padding: 28px; box-shadow: 8px 8px 0 #000; }
.pg-g-form__row { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); gap: 14px; }
.pg-optional-tag { font-weight: 400; color: var(--ink-dim); }
@media (prefers-reduced-motion: reduce) { .pg-g-title__sex { animation: none; } }
@media (max-width: 1023px) {
  .pg-g-cover { grid-template-columns: 1fr; }
  .pg-g-cover__art { height: 320px; border-left: 0; border-top: var(--g-frame); }
  .pg-g-about .pg-g-h2, .pg-caption--a, .pg-caption--b, .pg-caption--c { grid-column: 1 / -1; grid-row: auto; margin-top: 0; }
  .pg-lild-stage { margin-top: calc(var(--lild-w) * .78); }   /* the captions fill the width: he gets a row of his own */
  .pg-lild { right: 7%; }
  .pg-g-format, .pg-g-interest { grid-template-columns: 1fr; gap: 24px; padding: 32px 24px; }
  .pg-panel--7, .pg-panel--6, .pg-panel--5 { grid-column: span 12; }
  .pg-strip__note { margin-left: 0; }
}
@media (max-width: 599px) {
  .pg-lild-stage { --lild-w: 124px; margin-top: calc(var(--lild-w) * .95); }
  .pg-lild { right: 6%; }
  .pg-lild__note { right: 88%; bottom: 50%; width: 85%; }
  .pg-lild__note .pg-ink { stroke-width: 7; } .pg-lild__note .pg-ink--name { stroke-width: 6; }   /* the note draws at about .38 here */
  .pg-panel__title { font-size: 30px; }
  .pg-g-cover__copy { padding: 28px 22px 30px; }
  .pg-cells { grid-template-columns: 1fr; } .pg-cell + .pg-cell { border-left: 0; border-top: 1px solid var(--ink); }
  .pg-panel--now .pg-cell + .pg-cell { border-top-color: var(--pink-mark); }
  .pg-page { padding: 12px; gap: 16px; }
  .pg-g-form__row { grid-template-columns: 1fr; }
  .pg-g-sylhead { flex-direction: column; align-items: flex-start; } .pg-g-sylhead .pg-meta { text-align: left; }
}