/* ==========================================================================
   Geometry layer, scenes, course themes and the home/About components.
   The canvas is drawn by assets/js/geo.js.
   ========================================================================== */

/* -- palettes the canvas reads (--geo-1 … --geo-4) ----------------------- */

body {
  --geo-1: #b0432c;
  --geo-2: #c9952e;
  --geo-3: #2f4858;
  --geo-4: #6f8a4d;
}

/* -- canvas ----------------------------------------------------------------- */

.geo-canvas {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  pointer-events: none;
  opacity: 0.5;
}

body[data-geo="confetti"] .geo-canvas {
  opacity: 0.62;
}

/* Reading pages: the canvas shows in the header band and in the margins
   beside the text column (--geo-clear is half that column's width). On
   narrow screens the margin columns collapse and only the band remains. */
.geo-canvas--masked {
  opacity: 0.55;
  --fade: 4rem;
  -webkit-mask-image:
    linear-gradient(to bottom, #000 calc(var(--geo-band, 0px) - 90px), transparent var(--geo-band, 0px)),
    linear-gradient(to right,
      #000 calc(50% - var(--geo-clear) - var(--fade)),
      transparent calc(50% - var(--geo-clear)),
      transparent calc(50% + var(--geo-clear)),
      #000 calc(50% + var(--geo-clear) + var(--fade)));
  mask-image:
    linear-gradient(to bottom, #000 calc(var(--geo-band, 0px) - 90px), transparent var(--geo-band, 0px)),
    linear-gradient(to right,
      #000 calc(50% - var(--geo-clear) - var(--fade)),
      transparent calc(50% - var(--geo-clear)),
      transparent calc(50% + var(--geo-clear)),
      #000 calc(50% + var(--geo-clear) + var(--fade)));
  -webkit-mask-composite: source-over;
  mask-composite: add;
}

@media print {
  .geo-canvas { display: none; }
}

/* -- scenes ----------------------------------------------------------------
   Sections marked data-scene="…" are blended by geo.js as you scroll: it
   writes --bg, --ink and friends on <body> and sets data-tone="dark" when a
   dark scene (the night sky under 나의 팡세) takes over. Scene colours live
   in SCENES in geo.js; course scenes take their colour from the rules below. */

/* category accents, lightened so tags stay readable on the dark ground */
body[data-tone="dark"] {
  --accent-rust: #e8925c;
  --accent-ochre: #d8aa52;
  --accent-moss: #9db57f;
  --accent-plum: #c9a3cb;
  --accent-inkblue: #8fb3c7;
}

body[data-tone="dark"] .grain-overlay {
  mix-blend-mode: overlay;
  opacity: 0.08;
}

body[data-tone="dark"] .btn--primary {
  background: var(--ink);
  color: var(--bg);
}

/* -- course themes ----------------------------------------------------------- */

[data-course="abnormal-psychology"]    { --course: #6c4a6e; --course-2: #b0432c; }
[data-course="computer-communication"] { --course: #1f6874; --course-2: #b0432c; }
[data-course="human-interface-media"]  { --course: #9b3567; --course-2: #1f6874; }
[data-course="college-math"]           { --course: #866016; --course-2: #b0432c; }
[data-course="discrete-math"]          { --course: #59713f; --course-2: #b0432c; }
[data-course="calculus"]               { --course: #b0432c; --course-2: #2f4858; }
[data-course="linear-algebra"]         { --course: #2f4858; --course-2: #b0432c; }
[data-course="probability-statistics"] { --course: #3f4f9a; --course-2: #b0432c; }
[data-course="algorithms"]             { --course: #1d6b57; --course-2: #b0432c; }
[data-course="operating-systems"]      { --course: #4b5d2e; --course-2: #c9952e; }
[data-course="signals-and-systems"]    { --course: #2c5a85; --course-2: #b0432c; }
[data-course="numerical-analysis"]     { --course: #6a4c8c; --course-2: #c9952e; }
[data-course="data-science"]           { --course: #1f6f7a; --course-2: #b0432c; }
[data-course="data-and-information"]   { --course: #3d6b63; --course-2: #c9952e; }
[data-course="java"]                   { --course: #a8541c; --course-2: #2f4858; }
[data-course="assembly-language"]      { --course: #5a5f6e; --course-2: #b0432c; }
[data-course="compilers"]              { --course: #7a3f55; --course-2: #c9952e; }
[data-course="computer-architecture"]  { --course: #2f5f7d; --course-2: #c9652e; }
[data-course="data-structures"]        { --course: #2e6a4f; --course-2: #c9652e; }
[data-course="database-design"]        { --course: #7b5a34; --course-2: #1f6874; }
[data-course="rust"]                   { --course: #9c3b25; --course-2: #3a6b8c; }

[data-course] {
  --geo-1: var(--course);
  --geo-2: var(--course-2);
  --geo-3: #2f4858;
  --geo-4: #c9952e;
}

/* the page warms toward the course colour as you read */
body[data-course] {
  background-color: color-mix(in srgb, var(--course) calc(var(--geo-p, 0) * 9%), var(--bg));
  transition: none;
}

body[data-course] ::selection {
  background: var(--course);
  color: #fff;
}

/* -- logo ------------------------------------------------------------------- */

.site-logo {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
}

.logo-mark {
  display: block;
  flex-shrink: 0;
  overflow: visible;
}

.logo-mark__stem { fill: var(--ink); transition: transform 0.35s cubic-bezier(0.3, 1.6, 0.5, 1); transform-origin: 50% 100%; transform-box: fill-box; }
.logo-mark__dot { fill: var(--accent); transition: transform 0.45s cubic-bezier(0.3, 1.8, 0.5, 1); transform-origin: center; transform-box: fill-box; }
.logo-mark__wedge { fill: var(--accent-ochre); transition: transform 0.35s ease; transform-origin: 100% 0; transform-box: fill-box; }

.site-logo:hover .logo-mark__dot,
.site-logo:focus-visible .logo-mark__dot { transform: translateY(-9px) scale(0.85); }
.site-logo:hover .logo-mark__stem { transform: rotate(-4deg); }
.site-logo:hover .logo-mark__stem--right { transform: rotate(4deg); }
.site-logo:hover .logo-mark__wedge { transform: rotate(90deg); }

body[data-tone="dark"] .logo-mark__wedge { fill: #d8aa52; }

/* -- home hero ------------------------------------------------------------- */

.home-hero {
  padding-top: clamp(2.5rem, 7vw, 5.5rem);
  padding-bottom: clamp(3rem, 7vw, 5rem);
}

.home-hero__id {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  margin-bottom: 2rem;
}

.home-hero__name {
  display: block;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.05rem;
}

.home-hero__role {
  display: block;
  font-size: 0.82rem;
  color: var(--ink-muted);
}

.avatar {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  object-fit: cover;
  box-shadow: 0 0 0 3px var(--bg), 0 0 0 5px var(--accent);
}

/* -- the three doors ----------------------------------------------------------- */

.doors {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
  margin-top: 2.5rem;
  max-width: 54rem;
}

.door {
  --door: var(--accent);
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  padding: 1.15rem 1.25rem 1.25rem;
  border: 1px solid var(--rule);
  border-radius: 8px;
  background: var(--card);
  text-decoration: none;
  color: inherit;
  overflow: hidden;
  transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
}

.door--projects { --door: #2f4858; }
.door--studies { --door: #59713f; }
.door--pensees { --door: #6c4a6e; }

body[data-tone="dark"] .door--projects { --door: #8fb3c7; }
body[data-tone="dark"] .door--studies { --door: #9db57f; }
body[data-tone="dark"] .door--pensees { --door: #c9a3cb; }

.door::after {
  content: "";
  position: absolute;
  right: -2.2rem;
  bottom: -2.2rem;
  width: 6rem;
  height: 6rem;
  border-radius: 50%;
  background: var(--door);
  opacity: 0.08;
  transition: transform 0.5s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.door:hover {
  transform: translateY(-4px);
  border-color: var(--door);
  box-shadow: 0 14px 30px -18px var(--door);
}

.door:hover::after {
  transform: scale(2.6);
}

.door__glyph {
  width: 40px;
  height: 40px;
  margin-bottom: 0.65rem;
  color: var(--door);
  transition: transform 0.5s cubic-bezier(0.3, 1.6, 0.5, 1);
}

.door:hover .door__glyph {
  transform: rotate(-14deg) scale(1.1);
}

.door__label {
  font-family: var(--font-display);
  font-size: 1.4rem;
  font-weight: 600;
}

.door__meta {
  font-size: 0.85rem;
  color: var(--ink-muted);
}

@media (max-width: 640px) {
  .doors {
    grid-template-columns: 1fr;
  }

  .door {
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: center;
    column-gap: 1rem;
  }

  .door__glyph {
    grid-row: span 2;
    margin: 0;
  }
}

/* -- section headings with a small English eyebrow --------------------------- */

.section__kicker {
  display: block;
  margin-bottom: 0.4rem;
}

/* -- text cards (posts without a cover image) --------------------------------- */

.card--text {
  display: flex;
  flex-direction: column;
  min-height: 100%;
  padding: 1.5rem 1.4rem 1.6rem;
  border: 1px solid var(--rule);
  border-radius: 8px;
  background: var(--card);
  transition: transform 0.25s ease, border-color 0.25s ease;
}

.card--text:hover {
  transform: translateY(-3px);
  border-color: var(--tag-color, var(--accent));
}

.card__glyph {
  width: 34px;
  height: 34px;
  margin-bottom: 1.4rem;
  color: var(--tag-color, var(--accent));
  transition: transform 0.5s cubic-bezier(0.3, 1.6, 0.5, 1);
}

.card--text:hover .card__glyph {
  transform: rotate(18deg) scale(1.08);
}

.card--text .card__eyebrow {
  margin-top: 0;
}

.card--text .card__desc {
  margin-top: 0.6rem;
}

@media (min-width: 640px) {
  .grid--projects > .card--text:nth-child(3n + 1) .card__title {
    font-size: 1.7rem;
  }
}

/* -- course tiles ---------------------------------------------------------------- */

.course-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 18rem), 1fr));
  gap: 1.1rem;
}

.course-tile {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--rule);
  border-radius: 8px;
  background: var(--card);
  text-decoration: none;
  color: inherit;
  overflow: hidden;
  transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
}

.course-tile:hover,
.course-tile:focus-visible {
  transform: translateY(-4px);
  border-color: var(--course);
  box-shadow: 0 16px 32px -20px var(--course);
}

.course-tile__art {
  position: relative;
  aspect-ratio: 16 / 10;
  background: color-mix(in srgb, var(--course) 7%, var(--card));
}

.course-tile__art canvas {
  display: block;
  width: 100%;
  height: 100%;
}

.course-tile__body {
  flex: 1;
  padding: 0.95rem 1.05rem 1.15rem;
  border-top: 3px solid var(--course);
}

.course-tile__name {
  display: block;
  font-family: var(--font-display);
  font-size: 1.3rem;
  font-weight: 600;
}

.course-tile:hover .course-tile__name {
  color: var(--course);
}

body[data-tone="dark"] .course-tile:hover .course-tile__name {
  color: var(--ink);
}

.course-tile__meta {
  display: block;
  margin-top: 0.25rem;
  font-size: 0.8rem;
  color: var(--ink-muted);
}

.course-tile__units {
  margin-top: 0.55rem;
  font-family: var(--font-serif);
  font-size: 0.95rem;
  line-height: 1.5;
  color: var(--ink-muted);
}

@media (max-width: 640px) {
  .course-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.7rem;
  }

  .course-tile__body {
    padding: 0.7rem 0.75rem 0.85rem;
  }

  .course-tile__name {
    font-size: 1.05rem;
  }

  .course-tile__units {
    display: none;
  }
}

.study-track__title {
  margin-top: 3rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--rule);
}

/* Studies: each category (and each sub-group inside it) is a grid of course
   tiles, the same tile as on the home page: four to a row on a desktop,
   three on a small window or tablet, two on a phone. The hub is a size
   container, so --tile is the width of one tile in the current column count
   and a sub-group is exactly as wide as its own tiles. Two small sub-groups
   then share a row (데이터 beside 신호와 수치 계산). */
.study-hub {
  container-type: inline-size;
}

.study-part {
  --gap: 1.1rem;
  --cols: 2;
  --tile: calc((100cqi - (var(--cols) - 1) * var(--gap)) / var(--cols));
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 1.1rem var(--gap);
}

@container (min-width: 40rem) {
  .study-part {
    --cols: 3;
  }
}

@container (min-width: 54rem) {
  .study-part {
    --cols: 4;
  }
}

.study-sub {
  width: calc(var(--n) * var(--tile) + (var(--n) - 1) * var(--gap) - 0.5px);
  max-width: 100%;
  min-width: 0;
}

.study-grid {
  grid-template-columns: repeat(auto-fill, minmax(calc(var(--tile) - 1px), 1fr));
  gap: var(--gap);
  margin-top: 1.1rem;
}

.study-grid .course-tile__name {
  font-size: 1.2rem;
  word-break: keep-all;
}

.study-grid .course-tile {
  scroll-margin-top: 5rem;
}

.study-grid .course-tile__units {
  display: -webkit-box;
  overflow: hidden;
  font-size: 0.9rem;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
}

@media (max-width: 640px) {
  .study-part {
    --gap: 0.7rem;
  }

  .study-grid .course-tile__name {
    font-size: 1.05rem;
  }

  .study-grid .course-tile__units {
    display: none;
  }
}

/* pointed at from the contents list */
.course-tile.is-pointed {
  transform: translateY(-4px);
  border-color: var(--course);
  box-shadow: 0 16px 32px -20px var(--course);
}

/* a sub-group of courses inside a category */
/* a quiet label: small and faint, so the category title above and the course
   names below stay the things you read (.study-hub is in the selector to win
   over .article-body h3) */
.study-hub .study-sub__title {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  margin: 0.6rem 0 0;
  font-family: var(--font-sans);
  font-size: 0.8rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  color: color-mix(in srgb, var(--ink-muted) 72%, transparent);
}

.study-sub__title::after {
  content: "";
  flex: 1;
  border-top: 1px solid color-mix(in srgb, var(--rule) 60%, transparent);
}

/* -- Studies: a book-style table of contents (assets/js/study-toc.js) --------- */

/* On wide screens the hub breaks out of the page column: the contents sit
   flush against the left edge of the screen, the courses fill the rest.
   --sbw (scrollbar width) is set by study-toc.js so 100vw never overflows. */
.study-layout {
  /* just wide enough for the longest course name and its count */
  --toc-w: clamp(17.5rem, 20vw, 18.5rem);
  display: grid;
  grid-template-columns: var(--toc-w) minmax(0, 1fr);
  align-items: start;
  width: calc(100vw - var(--sbw, 0px));
  margin-left: calc(50% - 50vw + var(--sbw, 0px) / 2);
}

/* the tiles start right beside the contents, not centred in what is left */
.study-hub {
  width: 100%;
  max-width: 78rem;
  margin: 0;
  padding: 0 clamp(1.5rem, 3vw, 3rem) 0 1.25rem;
}

.study-toc {
  position: sticky;
  top: 0;
  z-index: 20;
  height: 100vh;
  /* --u: the slack left by the window height, shared out between the rows
     and the gaps, so the whole list is on screen at once on a laptop and
     breathes on a tall monitor. --parts and --rows come from studies.html:
     the text takes --fixed, and the gaps add up to --slots units. */
  --fixed: calc(5.8rem + (var(--parts, 4) + var(--rows, 18)) * 1.3rem + var(--subs, 0) * 1.15rem);
  --slots: calc(7 * var(--parts, 4) + 2 * var(--rows, 18) - 2 + 1.5 * var(--subs, 0));
  --u: clamp(0.06rem, calc((100vh - var(--fixed)) / var(--slots)), 0.5rem);
  padding: 1.25rem 0.5rem 0.75rem clamp(1.25rem, 1.6vw, 1.75rem);
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: none;
  isolation: isolate;
}

/* no box: a wash of the page colour, fading out to the right and at the top
   and bottom, keeps the text readable over the moving shapes without any
   visible edge */
.study-toc::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(90deg,
    color-mix(in srgb, var(--bg) 85%, transparent) 0%,
    color-mix(in srgb, var(--bg) 72%, transparent) 60%,
    transparent 100%);
  -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 4rem, #000 calc(100% - 4rem), transparent 100%);
  mask-image: linear-gradient(180deg, transparent 0, #000 4rem, #000 calc(100% - 4rem), transparent 100%);
  pointer-events: none;
}

.study-toc::-webkit-scrollbar {
  display: none;
}

.study-toc ol,
.study-toc li {
  margin: 0;
  padding: 0;
  list-style: none;
}

.study-toc__head {
  margin: 0 0 calc(4 * var(--u));
  font-family: var(--font-display);
  font-size: 1.35rem;
  font-weight: 600;
  line-height: 1.1;
}

.study-toc__head::after {
  content: "";
  display: block;
  width: 2.25rem;
  height: 2px;
  margin-top: 0.5rem;
  background: var(--ink);
  opacity: 0.6;
}

/* each part is a block of its own: a hairline and a gap above it */
.study-toc__part + .study-toc__part {
  margin-top: calc(3 * var(--u));
  padding-top: calc(3 * var(--u));
  border-top: 1px solid color-mix(in srgb, var(--ink) 13%, transparent);
}

/* the part name is what the eye lands on first: dark and bold */
.study-toc__part-name {
  display: flex;
  align-items: baseline;
  gap: 0.55rem;
  font-size: 0.95rem;
  font-weight: 700;
  line-height: 1.3;
  color: var(--ink);
}

.study-toc__numeral {
  flex: none;
  width: 1.8rem;
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-style: italic;
  font-weight: 500;
  color: var(--ink-muted);
  transition: color 0.25s ease;
}

.study-toc__part.is-current .study-toc__numeral {
  color: var(--accent);
}

/* courses line up under the part name, each with its own colour */
.study-toc .study-toc__chapters {
  margin: var(--u) 0 0 1.85rem;
}

/* a sub-group inside a part: a small label with a hairline running on */
.study-toc__sub {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin-top: calc(1.5 * var(--u));
  padding: 0 0 0 0.5rem;
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.05em;
  line-height: 1.15rem;
  color: color-mix(in srgb, var(--ink-muted) 72%, transparent);
}

.study-toc__sub::after {
  content: "";
  flex: 1;
  border-top: 1px solid color-mix(in srgb, var(--ink) 13%, transparent);
}

.study-toc__link {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  padding: var(--u) 0.5rem;
  border-radius: 6px;
  color: color-mix(in srgb, var(--ink) 74%, transparent);
  line-height: 1.3rem;
  text-decoration: none;
  transition: color 0.2s ease, background-color 0.2s ease;
}

body[data-fx-underline="true"] .article-body .study-toc__link {
  background-image: none;
}

.study-toc__dot {
  flex: none;
  width: 0.55rem;
  height: 0.55rem;
  border-radius: 2px;
  background: var(--course);
}

.study-toc__name {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  font-size: 0.98rem;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.study-toc__count {
  flex: none;
  font-size: 0.76rem;
  font-variant-numeric: tabular-nums;
  color: var(--ink-muted);
  opacity: 0.8;
}

.study-toc__link:hover,
.study-toc__link:focus-visible {
  color: var(--ink);
  background-color: color-mix(in srgb, var(--ink) 6%, transparent);
}

/* where you are: a wash of the course colour, no change of size */
.study-toc__link.is-active {
  color: var(--ink);
  background-color: color-mix(in srgb, var(--course) 16%, transparent);
}

.study-toc__link.is-active .study-toc__name {
  font-weight: 700;
}

/* narrow screens: the contents become a sticky strip across the top */
@media (max-width: 960px) {
  .study-layout {
    display: block;
    width: auto;
    margin-left: 0;
  }

  .study-hub {
    max-width: none;
    padding: 0;
  }

  .study-toc {
    top: 0;
    height: auto;
    margin: 1.5rem calc(var(--gutter) * -1) 0;
    padding: 0.5rem var(--gutter);
    overflow-x: auto;
    overflow-y: hidden;
    background: color-mix(in srgb, var(--bg) 88%, transparent);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    border-bottom: 1px solid var(--rule);
  }

  .study-toc::before,
  .study-toc__head,
  .study-toc__count {
    display: none;
  }

  .study-toc__parts,
  .study-toc__part,
  .study-toc .study-toc__chapters {
    display: flex;
    align-items: center;
  }

  .study-toc__parts {
    width: max-content;
  }

  .study-toc__part + .study-toc__part {
    margin-top: 0;
    margin-left: 0.6rem;
    padding-top: 0;
    padding-left: 0.9rem;
    border-top: 0;
    border-left: 1px solid var(--rule);
  }

  .study-toc__part-name {
    margin-right: 0.35rem;
    font-size: 0.8rem;
    white-space: nowrap;
  }

  .study-toc__numeral {
    width: auto;
    font-size: 0.95rem;
  }

  .study-toc .study-toc__chapters {
    gap: 0.15rem;
    margin: 0;
    padding: 0;
    border: 0;
  }

  .study-toc__sub {
    margin: 0 0.1rem 0 0.55rem;
    padding: 0;
    white-space: nowrap;
  }

  .study-toc__sub::after {
    display: none;
  }

  .study-toc__link {
    gap: 0.4rem;
    padding: 0.3rem 0.65rem;
    border-radius: 999px;
    white-space: nowrap;
  }

  .study-toc__name {
    overflow: visible;
    font-size: 0.95rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .study-toc__link,
  .study-toc__numeral {
    transition: none;
  }
}

/* -- About ------------------------------------------------------------------- */

.about-hero {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: clamp(1.5rem, 5vw, 3.5rem);
  align-items: center;
  padding-top: clamp(2.5rem, 7vw, 5rem);
  padding-bottom: clamp(2rem, 5vw, 3.5rem);
}

.portrait {
  position: relative;
  width: 168px;
  height: 168px;
}

.portrait img {
  position: relative;
  z-index: 1;
  width: 128px;
  height: 128px;
  margin: 20px;
  border-radius: 50%;
  object-fit: cover;
}

.portrait__ring,
.portrait__quarter,
.portrait__bar {
  position: absolute;
  transition: transform 0.6s cubic-bezier(0.3, 1.5, 0.5, 1);
}

.portrait__ring {
  inset: 6px;
  border: 3px solid var(--accent);
  border-radius: 50%;
  transform: translate(10px, -6px);
}

.portrait__quarter {
  left: 0;
  bottom: 0;
  width: 72px;
  height: 72px;
  background: var(--accent-ochre);
  border-radius: 0 0 0 72px;
  opacity: 0.85;
}

.portrait__bar {
  right: 2px;
  top: 8px;
  width: 14px;
  height: 64px;
  background: var(--ink);
}

.portrait:hover .portrait__ring { transform: translate(-6px, 6px) rotate(40deg); }
.portrait:hover .portrait__quarter { transform: rotate(-90deg) translate(-6px, -6px); }
.portrait:hover .portrait__bar { transform: translateY(70px); }

.about-facts {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 0.5rem 1.5rem;
  margin: 0;
  font-size: 0.95rem;
}

.about-facts dt {
  font-weight: 600;
}

.about-facts dd {
  margin: 0;
  color: var(--ink-muted);
}

/* a longer piece of the About page: a title, a lead-in line, a short list */
.about-section {
  margin-top: 2.75rem;
  padding-top: 2rem;
  border-top: 1px solid var(--rule);
}

.about-section__title {
  font-family: var(--font-display);
  font-size: 1.5rem;
  line-height: 1.25;
}

.about-section__lede,
.about-section__note {
  margin-top: 0.7rem;
  font-size: 0.95rem;
  color: var(--ink-muted);
}

.about-list {
  margin: 1.1rem 0 0;
  padding: 0;
  list-style: none;
  font-size: 0.97rem;
  line-height: 1.65;
}

.about-list li {
  padding-left: 1.1rem;
  border-left: 2px solid var(--rule);
  color: var(--ink-muted);
}

.about-list li + li {
  margin-top: 0.85rem;
}

.about-list strong {
  font-weight: 600;
  color: var(--ink);
}

.about-section__note {
  margin-top: 1.3rem;
}

@media (max-width: 560px) {
  .about-hero {
    grid-template-columns: 1fr;
  }
}

@media (prefers-reduced-motion: reduce) {
  .logo-mark *,
  .door,
  .door__glyph,
  .course-tile,
  .card--text,
  .portrait * {
    transition: none !important;
  }
}

/* whole-card links don't get the article underline-draw effect */
body[data-fx-underline="true"] .article-body .course-tile {
  background-image: none;
}