/* Emily Bolecek, Art Portfolio 2026 (v2: watercolor).

   Layout: every page is one sheet of cold-press paper. "EB" sits on rainbow
   brush strokes at the top left, the painted palette (the navigation) at the
   top right, the page's content in between, and at the foot a wash drips down
   onto the menu. The paint is live: canvases multiply over the paper. */

:root {
  /* paper and ink */
  --paper: #f6f5f2;
  --ink: #2b2733;
  --ink-soft: #5b5566;
  --rule: rgba(43, 39, 51, 0.16);
  --card: rgba(255, 255, 255, 0.62);

  /* the paints (one per page) */
  --violet: #7a3fb0;
  --blue: #2a4bd7;
  --turquoise: #10a7b8;
  --green: #3fa34d;
  --yellow: #f5c400;
  --magenta: #d6246e;
  --coral: #f07a3a;
  --page: var(--violet);

  /* placeholder marking */
  --todo: #8a5a00;
  --todo-bg: #fff4c7;
  --todo-line: #d4a300;

  --font-text: "ff-meta-correspondence-web-p", "Fira Sans", "Segoe UI", system-ui, sans-serif;
  --font-display: "Cormorant Garamond", "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
  --font-hand: "Homemade Apple", "Segoe Script", "Bradley Hand", cursive;
  --font-nav: "Caveat Brush", "Segoe Print", "Bradley Hand", cursive;   /* the palette and the drip menu */
  --font-type: "Special Elite", "Courier Prime", "Courier New", monospace;   /* the artist statement */

  --gutter: max(20px, 4vw);
  --tile: 640px;            /* must match the engine's paperTile */
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
  color-scheme: light;
}

.page-home { --page: var(--violet); }
.page-studio-hours { --page: var(--blue); }
.page-portfolio { --page: var(--turquoise); }
.page-additional-work { --page: var(--magenta); }
.page-resume { --page: var(--yellow); }
.page-artist-statement { --page: var(--green); }

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  min-height: 100vh;
  background: var(--paper) url("../img/paper.jpg") 0 0 / var(--tile) var(--tile) repeat;
  color: var(--ink);
  font: 400 1.0625rem/1.6 var(--font-text);
  overflow-x: hidden;
}

::selection { background: color-mix(in srgb, var(--page) 30%, white); color: var(--ink); }

a { color: inherit; }
img { max-width: 100%; }

:focus-visible { outline: 3px solid var(--blue); outline-offset: 3px; border-radius: 3px; }

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

.skip {
  position: absolute;
  left: 12px; top: -60px;
  z-index: 20;
  padding: 10px 16px;
  background: var(--ink);
  color: var(--paper);
  border-radius: 4px;
  text-decoration: none;
}
.skip:focus { top: 12px; }

/* live paint: multiplied into the paper so its tooth shows through */
.paint {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  mix-blend-mode: multiply;
  pointer-events: none;
}

/* ---------- the top: EB and the palette ---------- */

.top {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
  gap: 24px;
  padding: clamp(14px, 2vw, 28px) var(--gutter) 0;
}

.mark {
  position: relative;
  display: block;
  width: clamp(170px, 20vw, 260px);
  aspect-ratio: 16 / 10;
  text-decoration: none;
  color: var(--ink);
}
.top--home .mark { width: clamp(190px, 21vw, 300px); }

/* her handwriting, traced to vector; the SVGs are masks so they take the text's ink */
.mark__eb,
.intro__sig {
  display: block;
  background: var(--ink);
  -webkit-mask: var(--hand) center / contain no-repeat;
  mask: var(--hand) center / contain no-repeat;
}
.mark__eb {
  --hand: url("../art/eb.svg");
  position: absolute;
  left: 22%;
  top: -7%;
  height: 80%;
  aspect-ratio: 750.5 / 957.8;
}

.intro { margin-top: clamp(0px, 1vw, 12px); }
/* Above the welcome, which rides up under the header on wide screens (z-index 2),
   so the line under her name can be clicked (and edited) there too. The z-index sits on the
   words, not on .intro, so the wash under them still multiplies into the page's paper. */
.intro__name, .intro__for { position: relative; z-index: 3; }

.intro__name { margin: 0; padding-top: clamp(4px, 1vw, 14px); }
.intro__sig {
  --hand: url("../art/signature.svg");
  width: clamp(250px, 34vw, 520px);
  aspect-ratio: 994 / 321.5;
}

/* the application line sits lower, on a pale wash of paint, in the welcome sign's serif */
.intro__app {
  position: relative;
  width: fit-content;
  margin-top: clamp(26px, 4vw, 60px);
  padding: 0.85em 1.4em 0.95em 1.1em;
}
.intro__app .paint { inset: auto; left: -22px; top: -14px; width: calc(100% + 52px); height: calc(100% + 46px); }
.intro__for {
  position: relative;
  margin: 0;
  max-width: 34ch;
  font: 500 clamp(1.2rem, 1.75vw, 1.55rem) / 1.25 var(--font-display);
  color: var(--ink);
  text-wrap: balance;
}
.intro__for strong { font-weight: 700; }

/* the palette: each paint well is a page; the brush points at the one you are on */
.palette {
  position: relative;
  width: clamp(150px, 17vw, 230px);
}
.palette--large { width: clamp(300px, 44vw, 620px); }

.palette__wood {
  display: block;
  width: 100%;
  height: auto;
  filter: drop-shadow(0 12px 16px rgba(80, 50, 10, 0.18));
}

.well {
  position: absolute;
  left: var(--x);
  top: var(--y);
  width: 15.2%;
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: #fff;
  text-decoration: none;
  text-align: center;
  transition: transform 0.35s var(--ease);
}
.well:hover { transform: translate(-50%, -50%) scale(1.07); }
.well:focus-visible { outline-offset: 4px; border-radius: 50%; }

.well__label {
  padding: 0 4px;
  font: 400 clamp(0.82rem, 1.25vw, 1.12rem) / 1 var(--font-nav);
  letter-spacing: 0.01em;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.55), 0 0 8px rgba(0, 0, 0, 0.25);
}

/* the small palette names its wells on hover and focus */
.palette--small .well__label {
  position: absolute;
  left: 50%;
  top: calc(100% + 6px);
  transform: translate(-50%, -4px);
  padding: 4px 9px;
  border-radius: 4px;
  background: var(--ink);
  color: var(--paper);
  font-size: 1.05rem;
  white-space: nowrap;
  text-shadow: none;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s, transform 0.2s var(--ease);
  z-index: 3;
}
.palette--small .well:hover .well__label,
.palette--small .well:focus-visible .well__label { opacity: 1; transform: translate(-50%, 0); }
/* the rightmost well's name opens leftward, so it never hangs past the screen's edge */
.palette--small .well--magenta .well__label { left: auto; right: -6px; transform: translate(0, -4px); }
.palette--small .well--magenta:hover .well__label,
.palette--small .well--magenta:focus-visible .well__label { transform: translate(0, 0); }

.palette__brush {
  position: absolute;
  left: 0;
  top: 0;
  height: auto;
  transform-origin: 100% 50%;
  pointer-events: none;
  filter: drop-shadow(0 6px 5px rgba(40, 30, 20, 0.28));
  visibility: hidden;   /* until the script has aimed it */
  z-index: 2;
}
.palette__brush.is-set { visibility: visible; transition: transform 0.6s var(--ease); }

/* ---------- page bodies ---------- */

main {
  width: min(100% - 2 * var(--gutter), 1180px);
  margin: 0 auto;
}

.title {
  position: relative;
  display: inline-block;
  margin: clamp(4px, 2vw, 20px) 0 clamp(8px, 1.6vw, 20px) -28px;
  padding: 18px 56px 22px 28px;
}
.title h1 {
  position: relative;
  margin: 0;
  font: 600 clamp(2.4rem, 5vw, 4rem) / 1.05 var(--font-display);
  letter-spacing: -0.01em;
  text-wrap: balance;
}

.prose { max-width: 68ch; display: grid; gap: 18px; justify-items: start; }

/* placeholders: everything Emily still has to write */
.ph-tag {
  display: inline-block;
  padding: 2px 9px;
  border: 1px dashed var(--todo-line);
  border-radius: 999px;
  background: var(--todo-bg);
  color: var(--todo);
  font: 600 0.75rem / 1.5 var(--font-text);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.fill-in-block {
  margin: 0;
  padding: 14px 18px;
  border: 1.5px dashed var(--rule);
  border-radius: 6px;
  background: var(--card);
  color: var(--ink-soft);
  justify-self: stretch;
}
.fill-in-block p { margin: 0; }
.fill-in { color: var(--ink-soft); border-bottom: 1px dashed currentColor; }
/* The Site Editor hides an optional part (a placeholder label) with `hidden`. */
[data-optional][hidden] { display: none !important; }


/* links in running text */
.cv a, .hours a, .bbr a {
  text-decoration-color: color-mix(in srgb, var(--page) 70%, var(--ink));
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}
.cv a:hover, .hours a:hover, .bbr a:hover { text-decoration-thickness: 2px; }

/* ---------- resume ---------- */

.cv {
  --cv-accent: #8a6a00;   /* the yellow page's paint, deep enough to read as text */
  --cv-mark: color-mix(in srgb, var(--yellow) 50%, transparent);
  display: grid;
  grid-template-columns: minmax(250px, 310px) minmax(0, 1fr);
  grid-template-areas: "side main";
  gap: 28px clamp(32px, 5vw, 80px);
  align-items: start;
  max-width: 1100px;
}
.cv p, .cv ul { margin: 0; }
.cv__main { grid-area: main; display: grid; gap: 48px; max-width: 66ch; }
.cv__lede {
  font-size: clamp(1.15rem, 1.5vw, 1.3rem);
  line-height: 1.6;
}
.cv__section { display: grid; gap: 30px; }
/* section names sit on a swipe of yellow paint */
.cv h2 {
  justify-self: start;
  margin: 0;
  padding: 0 6px;
  background: linear-gradient(transparent 58%, var(--cv-mark) 58%, var(--cv-mark) 92%, transparent 92%) 0 0 / 100% 1.1em repeat-y;   /* one swipe per line */
  font: 600 clamp(1.9rem, 3vw, 2.4rem) / 1.1 var(--font-display);
}
/* each entry: Title · Date, then where, then the place in gray, then an italic note (her resume's layout) */
.cv__job { display: grid; gap: 3px; }
.cv__role { margin: 0; font: 400 1.1875rem / 1.35 var(--font-text); }
.cv__role strong { font-weight: 700; }
.cv__when { white-space: nowrap; }
.cv__job ul + .cv__role { margin-top: 16px; }
.cv__org { font-size: 1.0625rem; line-height: 1.45; }
.cv__where { color: var(--ink-soft); font-size: 0.9375rem; }
.cv__note { margin-top: 2px; color: var(--cv-accent); font-size: 1rem; font-style: italic; line-height: 1.5; }
.cv__work { display: grid; gap: 3px; margin-top: 12px; }
.cv__job ul { margin-top: 6px; padding-left: 1.2em; display: grid; gap: 6px; line-height: 1.6; }
.cv__job li::marker { color: #c99f00; }

.cv__side {
  grid-area: side;
  display: grid;
  gap: 34px;
  padding: 28px 26px 32px;
  border-radius: 8px;
  background: var(--card);
  font-size: 0.9375rem;
  line-height: 1.45;
}
.cv__side section { display: grid; gap: 14px; }
.cv__side h2 { font-size: 1.6rem; }
.cv__side ul { padding: 0; list-style: none; display: grid; gap: 12px; color: var(--ink-soft); }
.cv__side li strong { color: var(--ink); font-size: 1rem; }
/* skills: small dabs of yellow paint */
.cv__side .cv__skills { display: flex; flex-wrap: wrap; gap: 8px 7px; color: var(--ink); }
.cv__skills li {
  padding: 4px 11px 5px;
  border-radius: 14px 11px 15px 10px / 11px 15px 10px 14px;
  background: color-mix(in srgb, var(--yellow) 26%, #fff);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--yellow) 55%, transparent);
  font-size: 0.875rem;
  line-height: 1.3;
}
.cv__skills li:nth-child(3n + 1) { border-radius: 11px 15px 10px 14px / 14px 10px 15px 11px; }
.cv__skills li:nth-child(3n + 2) { background: color-mix(in srgb, var(--yellow) 18%, #fff); }
.cv__kicker {
  color: var(--cv-accent);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

/* ---------- studio hours: a ledger ---------- */

.hours { --page-ink: color-mix(in srgb, var(--page) 65%, var(--ink)); display: grid; gap: 48px; max-width: 820px; }
.hours p { margin: 0; }
.hours h2 { margin: 0 0 6px; font: 600 clamp(1.7rem, 2.6vw, 2.15rem) / 1.1 var(--font-display); }
.tally { display: grid; gap: 6px; }
.tally__total { font: 600 clamp(1.4rem, 2.4vw, 1.9rem) / 1.1 var(--font-display); }
.tally__num {
  display: block;
  color: var(--page-ink);
  margin-bottom: 0.14em;
  font-size: clamp(4.2rem, 10vw, 7rem);
  line-height: 1;
  letter-spacing: -0.02em;
}
.tally__plus { color: var(--ink-soft); }

.ledger { margin: 0; padding: 0; list-style: none; }
.course {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 4px 24px;
  padding: 18px 0;
  border-top: 1px solid var(--rule);
}
.course:last-child { border-bottom: 1px solid var(--rule); }
.course__text { display: grid; gap: 1px; line-height: 1.45; }
.course h3 { margin: 0 0 2px; font: 700 1.0625rem / 1.4 var(--font-text); }
.course__count { color: var(--ink-soft); }
.course__hours {
  color: var(--page-ink);
  font: 600 2rem / 1 var(--font-display);
  text-align: right;
  white-space: nowrap;
}
.course__hours span:not(.visually-hidden):not(.course__num) { display: block; font: 400 0.8125rem / 1.6 var(--font-text); color: var(--ink-soft); }

/* ---------- home: the easel ---------- */

.welcome {
  position: relative;
  z-index: 2;
  display: flex;
  justify-content: center;
  margin-top: clamp(0px, 1vw, 16px);
}

.easel {
  position: relative;
  width: clamp(300px, min(34vw, (100svh - 190px) * 0.56), 480px);
}
.easel__art { display: block; width: 100%; height: auto; }

.easel__canvas {
  position: absolute;
  left: 6.22%;
  top: 16.83%;
  width: 88.89%;
  height: 25.31%;
  display: grid;
  place-items: center;
  padding: 3% 7%;
  text-align: center;
  overflow: hidden;
}
.easel__words { position: relative; }
.easel__words h2 {
  margin: 0 0 0.3em;
  font: 600 clamp(1.45rem, 2.4vw, 2.1rem) / 1.1 var(--font-display);
  text-wrap: balance;
}
.easel__words p { margin: 0; font-size: clamp(0.95rem, 1.2vw, 1.1rem); line-height: 1.4; text-wrap: balance; }

/* ---------- portfolio ---------- */

.viewer {
  display: grid;
  grid-template-columns: minmax(0, 1.65fr) minmax(250px, 1fr);
  gap: clamp(20px, 3.5vw, 56px);
  align-items: center;
}

.viewer__stage {
  position: relative;
  display: grid;
  place-items: center;
  grid-template-rows: 100%;   /* so the piece's max-height: 100% holds it inside the stage */
  height: min(64vh, 600px);
  min-height: 300px;
  padding: 0 34px;
}

.viewer__img {
  display: block;
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  background: #fff;
  box-shadow: 0 22px 34px -22px rgba(40, 30, 20, 0.55), 0 2px 6px rgba(40, 30, 20, 0.14);
  transition: opacity 0.25s;
}
.viewer__img.is-loading { opacity: 0.35; }

.viewer__step {
  position: absolute;
  top: 50%;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  padding: 0;
  border: 1px solid var(--rule);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.88);
  color: var(--ink);
  cursor: pointer;
  transform: translateY(-50%);
  transition: background 0.2s, transform 0.2s var(--ease);
}
.viewer__step:hover { background: #fff; transform: translateY(-50%) scale(1.06); }
.viewer__step--prev { left: 0; }
.viewer__step--next { right: 0; }
.viewer__step svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

.viewer__text { display: grid; gap: 14px; align-content: center; }
.viewer__title { margin: 0; font: 600 clamp(1.9rem, 3vw, 2.6rem) / 1.05 var(--font-display); text-wrap: balance; }
.viewer__facts { margin: 0; display: grid; gap: 6px; }
.viewer__facts div { display: grid; grid-template-columns: 5.5em 1fr; gap: 10px; }
.viewer__facts dt { color: var(--ink-soft); font-size: 0.875rem; letter-spacing: 0.04em; padding-top: 0.15em; }
.viewer__facts dd { margin: 0; }
.viewer__desc { margin: 0; max-width: 52ch; }
.viewer__count { margin: 0; color: var(--ink-soft); font-size: 0.9375rem; font-variant-numeric: tabular-nums; }

.thumbs {
  display: flex;
  flex-wrap: wrap;
  gap: 26px 40px;
  margin-top: clamp(30px, 5vw, 64px);
}
.thumbs__group h2 { margin: 0 0 10px; font: 600 1.25rem / 1.2 var(--font-display); }
.thumbs__group ul { display: flex; flex-wrap: wrap; gap: 10px; margin: 0; padding: 0; list-style: none; }

.thumb { display: block; border-radius: 2px; }
.thumb img {
  display: block;
  height: 84px;
  width: auto;
  box-shadow: 0 8px 12px -8px rgba(40, 30, 20, 0.5), 0 1px 3px rgba(40, 30, 20, 0.12);
  transition: transform 0.25s var(--ease);
}
.thumb:hover img { transform: translateY(-3px); }
.thumb[aria-current="true"] img { outline: 3px solid var(--page); outline-offset: 3px; }
.thumb:focus-visible { outline-offset: 8px; }

/* ---------- artist statement: her poem, set uneven like a typewritten page ---------- */

.poem {
  --step: clamp(0.85rem, 2.6vw, 2.3rem);
  display: grid;
  gap: 1.5em;
  max-width: 820px;
  margin-left: clamp(0px, 5vw, 72px);
  font: 400 clamp(0.9rem, 1.2vw, 1.06rem) / 1.75 var(--font-type);
}
.poem__stanza { margin: 0; }
.poem__line {
  display: block;
  padding-left: calc(var(--i, 0) * var(--step));
  transform: rotate(var(--t, 0deg));
  transform-origin: 0 50%;
}

/* ---------- additional work: Basic Bitch of the Resistance ---------- */

.bbr {
  --bbr-ink: color-mix(in srgb, var(--magenta) 85%, var(--ink));   /* the show's own pink, from its poster */
  display: grid;
  gap: 44px;
  max-width: 1000px;
}
.bbr p { margin: 0; }
.bbr__head { margin: 0; }
.bbr__card { display: block; width: min(100%, 560px); height: auto; mix-blend-mode: multiply; }
.bbr__intro, .bbr__topic, .bbr__resources, .bbr__close { max-width: 720px; }
.bbr__intro { display: grid; gap: 14px; }
.bbr h2 { margin: 0; font: 600 clamp(1.9rem, 3vw, 2.5rem) / 1.1 var(--font-display); }
.bbr h2 strong { color: var(--bbr-ink); }
.bbr__topics { display: grid; gap: 56px; }
.bbr__topic { display: grid; gap: 14px; }
.bbr__topic h3 {
  margin: 4px 0 0;
  color: var(--bbr-ink);
  font: italic 600 clamp(1.7rem, 2.8vw, 2.2rem) / 1.1 var(--font-display);
}
.bbr__fig { margin: 0; }
.bbr__fig { max-width: 720px; }
.bbr__fig img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  padding: 8px;
  background: #fff;
  box-shadow: 0 18px 28px -18px rgba(40, 30, 20, 0.45), 0 2px 5px rgba(40, 30, 20, 0.12);
}
.bbr__topic:nth-of-type(odd) .bbr__fig img { transform: rotate(-0.6deg); }
.bbr__topic:nth-of-type(even) .bbr__fig img { transform: rotate(0.5deg); }
.bbr__fig--inline { margin: 10px 0; }
.bbr__fig--strip { max-width: 1000px; }
.bbr__fig--strip img, .bbr__fig--poster img { aspect-ratio: auto; }
.bbr__fig--poster img { transform: rotate(-0.5deg); }
.bbr__fig figcaption {
  margin-top: 12px;
  color: var(--bbr-ink);
  font: italic 600 clamp(1.15rem, 2vw, 1.45rem) / 1.3 var(--font-display);
}
/* as in her graphic: centered, each heading on a swipe of paint (the resume's highlight) */
.bbr__resources {
  --swipe: color-mix(in srgb, var(--magenta) 50%, transparent);
  display: grid;
  justify-items: center;
  gap: 8px;
  text-align: center;
  font-size: clamp(1.1rem, 1.6vw, 1.25rem);
}
.bbr__resources h2 {
  margin: 0 0 4px;
  padding: 0 10px;
  background: linear-gradient(transparent 14%, var(--swipe) 14%, var(--swipe) 94%, transparent 94%) 0 0 / 100% 1.6em repeat-y;   /* one swipe per line */
  font: 800 clamp(0.95rem, 1.5vw, 1.1rem) / 1.6 var(--font-text);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink);
  text-wrap: balance;
}
.bbr__resources .bbr__thanks { --swipe: color-mix(in srgb, var(--violet) 45%, transparent); margin-top: 22px; }
.bbr__resources ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 2px; }
.bbr__lede { font: 500 clamp(1.1rem, 1.6vw, 1.3rem) / 1.45 var(--font-display); max-width: 52ch; }
.bbr__close { font: italic 500 clamp(1.3rem, 2.2vw, 1.65rem) / 1.45 var(--font-display); }

/* ---------- the foot: a wash that drips onto the menu ---------- */

.foot {
  position: relative;
  margin-top: clamp(60px, 8vw, 120px);
  padding: 250px var(--gutter) calc(36px + env(safe-area-inset-bottom, 0px));
}
.page-home .foot { margin-top: calc(-1 * clamp(140px, 16vw, 250px)); padding-top: 470px; }   /* the easel's feet stand in the wash */

@media (min-width: 901px) {
  /* the easel stands in the open column between the name and the palette */
  .welcome { margin-top: calc(-1 * clamp(0px, 8vw, 120px)); }
}

.foot__menu {
  position: relative;
  display: flex;
  justify-content: space-around;
  gap: 18px;
  max-width: 1180px;
  margin: 0 auto;
}

.drip-link {
  padding: 6px 4px;
  font: 400 clamp(1.3rem, 1.9vw, 1.7rem) / 1.15 var(--font-nav);
  text-decoration: underline;
  text-decoration-color: transparent;
  text-decoration-thickness: 2px;
  text-underline-offset: 6px;
  transition: text-decoration-color 0.2s;
}
.drip-link:hover, .drip-link[aria-current="page"] { text-decoration-color: var(--c); }
.drip-link[data-color="violet"] { --c: var(--violet); }
.drip-link[data-color="blue"] { --c: var(--blue); }
.drip-link[data-color="turquoise"] { --c: var(--turquoise); }
.drip-link[data-color="green"] { --c: var(--green); }
.drip-link[data-color="yellow"] { --c: #c99f00; }
.drip-link[data-color="magenta"] { --c: var(--magenta); }

.foot__fine {
  position: relative;
  margin: 46px 0 0;
  text-align: center;
  color: var(--ink-soft);
  font-size: 0.9375rem;
}

/* ---------- smaller screens ---------- */

@media (max-width: 900px) {
  .viewer { grid-template-columns: 1fr; }
  .viewer__stage { height: min(62vh, 560px); }
  .easel { margin-left: 0; }
}

@media (max-width: 720px) {
  .top--home { grid-template-columns: 1fr; }
  .top--home .palette { justify-self: start; width: min(100vw - 12px, 520px); margin-left: calc(50% - min(50vw - 6px, 260px)); }
  .top--home .well__label { font-size: 0.86rem; }
  .welcome { margin-top: 10px; }
  .easel { width: min(92%, 420px); }
  .poem { --step: 0.7rem; margin-left: 0; }
  .bbr__fig img { padding: 5px; }
  .cv { grid-template-columns: 1fr; grid-template-areas: "main" "side"; }
  .cv__side { padding: 22px 20px 26px; }
  .course { gap: 4px 14px; }
  .course__hours { font-size: 1.7rem; }
  .foot { padding-top: 210px; }
  .page-home .foot { margin-top: -75px; padding-top: 300px; }
  .foot__menu { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 96px; text-align: center; }
  .drip-link { font-size: 1.22rem; }
  .title { margin-left: -16px; padding: 14px 32px 18px 16px; }
  .thumbs__group { flex-basis: 100%; }
  /* the arrows sit under the piece, never on it */
  .viewer__stage { height: auto; min-height: 0; padding: 0; grid-template-columns: 1fr 1fr; grid-template-rows: auto auto; grid-template-areas: "img img" "prev next"; gap: 12px; }
  .viewer__img { grid-area: img; max-height: 62vh; }
  .viewer__step { position: static; transform: none; }
  .viewer__step:hover { transform: scale(1.06); }
  .viewer__step--prev { grid-area: prev; justify-self: end; }
  .viewer__step--next { grid-area: next; justify-self: start; }
}

@media (max-width: 420px) {
  .palette--small { width: 140px; }
  .mark { width: 150px; }
  .viewer__stage { padding: 0 26px; }
  .viewer__step { width: 42px; height: 42px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
}