/* Dana Wilcher Art: her About page. css/site.css comes first. */

/* Opening: the title and her own line about her work, beside her portrait */
.ab-hero { position: relative; overflow: hidden; padding: 40px 0 120px; background: radial-gradient(ellipse 55% 70% at 18% 40%, rgba(148, 37, 42, 0.3), transparent 70%); }
.ab-hero .wrap { position: relative; z-index: 1; }
/* Her dream catcher in gold, hung from the top edge by its string (the drawing's top right corner).
   It sways on that point, a glint of light runs along the gold now and then, and it drifts as the page scrolls. */
.dc { position: absolute; top: -18px; right: 39%; width: min(880px, 62vw); aspect-ratio: 1034 / 722; transform-origin: 99.5% 0; pointer-events: none; opacity: .62;
  translate: 0 var(--py, 0px); animation: dc-sway 7s ease-in-out infinite alternate; filter: drop-shadow(0 0 14px rgba(230, 192, 140, 0.22)); }
.dc i { position: absolute; inset: 0;
  background: linear-gradient(112deg, transparent 42%, rgba(255, 244, 214, 0.95) 50%, transparent 58%) no-repeat,
              linear-gradient(115deg, #7A5B30 0%, #B48A4E 22%, #E6C08C 44%, #F3E3BC 52%, #D9A86A 66%, #9C743E 100%);
  background-size: 260% 100%, 100% 100%; background-position: 160% 0, 0 0;
  -webkit-mask: url(/img/about/dream-catcher.75f7f3bdbf3e.webp) center / contain no-repeat; mask: url(/img/about/dream-catcher.75f7f3bdbf3e.webp) center / contain no-repeat;
  animation: dc-glint 9s ease-in-out 1.5s infinite; }
@keyframes dc-sway { from { rotate: -1.8deg; } to { rotate: 1.4deg; } }
@keyframes dc-glint { 0% { background-position: 160% 0, 0 0; } 45%, 100% { background-position: -60% 0, 0 0; } }
@media (prefers-reduced-motion: reduce) { .dc, .dc i { animation: none; } }
.ab-hero .wrap { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 88px; align-items: center; }
.ab-hero h1 { margin: 0; font-family: var(--serif); font-style: italic; font-weight: 500; font-size: clamp(64px, 8vw, 118px); line-height: 0.95; letter-spacing: -0.015em; }
.ab-hero blockquote { margin: 40px 0 0; padding-left: 26px; border-left: 1px solid var(--camel); font-family: var(--serif); font-size: clamp(23px, 2.1vw, 29px); line-height: 1.42; color: var(--ink); max-width: 25em; }
.ab-hero .who { margin-top: 30px; font-size: 14.5px; letter-spacing: 0.05em; color: var(--ink-3); }
.ab-hero figure { margin: 0; }
.ab-hero figure img { width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; object-position: 50% 30%; }
/* On a computer the opening fills the screen under her header and the portrait grows with the screen's height, so her
   first chapter always starts below it (Gabriel 2026-10-26: "make the hero bigger along with the picture so that it
   can push the content down a bit where it sits in the mockup"). */
@media (min-width: 1141px) {
  .ab-hero { display: flex; align-items: center; min-height: calc(100vh - 92px); min-height: calc(100svh - 92px); padding: 40px 0 72px; }
  .ab-hero .wrap { width: min(1400px, calc(100% - 64px)); grid-template-columns: minmax(0, 1fr) auto; gap: 72px; }
  .ab-hero h1 { white-space: nowrap; }
  /* Both sides set, 4:5, so Safari 14 (no aspect-ratio) keeps the portrait shape instead of the photo's wide one. */
  .ab-hero figure img { height: clamp(560px, calc(100vh - 242px), 860px); height: clamp(560px, calc(100svh - 242px), 860px);
    width: clamp(448px, calc((100vh - 242px) * 0.8), 688px); width: clamp(448px, calc((100svh - 242px) * 0.8), 688px); }
}

.textlink.inline { display: inline; font-size: inherit; letter-spacing: 0; padding: 0; }

/* Her story in her own chapters. The left rail names where or when each one happens (Gabriel 2026-10-26: the labels
   stay, they were never part of the no-small-line ruling), with her childhood drawings under the first. */
.ch { padding: 120px 0; border-top: 1px solid var(--hair); }
.ch .wrap { display: grid; grid-template-columns: 170px minmax(0, 1fr) minmax(0, 0.82fr); gap: 0 64px; align-items: start; }
.ch.flip .wrap { grid-template-columns: 170px minmax(0, 0.82fr) minmax(0, 1fr); }
.ch .txt { grid-column: 2; grid-row: 1; }
.ch .pic { grid-column: 3; grid-row: 1; }
.ch.flip .txt { grid-column: 3; grid-row: 1; }
.ch.flip .pic { grid-column: 2; grid-row: 1; }
.ch .rail { margin: 1em 0; padding-top: 14px; font-size: 13px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--camel); line-height: 1.5; }
.ch .rail::before { content: ""; display: block; width: 28px; height: 1px; background: var(--camel); margin-bottom: 16px; }
.ch .txt { max-width: 62ch; }
.ch .txt .h2 { margin-bottom: 36px; }
.ch .txt p { margin: 0; color: var(--ink-2); font-size: 17px; line-height: 1.8; }
.ch .txt p + p { margin-top: 22px; }
.ch .txt p.first { font-family: var(--serif); font-size: 23px; line-height: 1.55; color: var(--ink); }
.ch .pic { margin: 0; position: sticky; top: calc(var(--head-h) + 32px); }
.ch .pic img { width: 100%; object-fit: cover; }
.ch .pic figcaption { margin-top: 14px; font-size: 13.5px; color: var(--ink-3); letter-spacing: 0.02em; }
.ch .textlink { margin-top: 34px; }
/* on a short window a held picture shrinks, keeping its shape, so it and its caption fit below her header */
.ch .pic .pt { width: min(100%, calc((100vh - var(--head-h) - 100px) * var(--ar, 4 / 5))); }

.ch-young .pt { --ar: 656 / 1106; aspect-ratio: var(--ar); }
/* Drawings taped up beside the chapter photo, each in colored marker on a small sheet of paper: her first drawings,
   square energy portals receding until they vanish into the center. The markers draw themselves as the page
   scrolls; being taped to the page, they scroll with it. */
.notes { margin-top: 64px; display: grid; gap: 34px; justify-items: start; }
.note { position: relative; width: 150px; aspect-ratio: 1; rotate: var(--r, 0deg); filter: sepia(.16) saturate(.92);
  background: radial-gradient(ellipse 120% 120% at 40% 35%, transparent 55%, rgba(150, 118, 70, 0.22)), linear-gradient(160deg, #F3ECDC, #E9DEC6);
  box-shadow: 0 14px 24px rgba(8, 5, 4, 0.5), 0 2px 4px rgba(8, 5, 4, 0.35); }
.note:nth-child(2) { margin-left: 22px; }
.note:nth-child(3) { margin-left: 4px; }
.note svg { position: absolute; inset: 7%; width: 86%; height: 86%; overflow: visible; }
.note path { fill: none; stroke-width: 3.4; stroke-linecap: round; stroke-linejoin: round; mix-blend-mode: multiply; }
/* masking tape: a translucent strip with torn ends */
.tape { position: absolute; top: -9px; left: 50%; width: 58%; height: 20px; translate: -50% 0; rotate: -3deg;
  background: linear-gradient(180deg, rgba(248, 241, 222, 0.52), rgba(232, 220, 190, 0.44));
  clip-path: polygon(0 8%, 4% 0, 8% 12%, 12% 2%, 88% 0, 92% 10%, 96% 2%, 100% 12%, 98% 50%, 100% 88%, 95% 100%, 91% 90%, 86% 100%, 9% 100%, 5% 88%, 1% 96%, 2% 50%); }
.tape-l, .tape-r { width: 42%; top: -6px; }
.tape-l { left: 6%; translate: -20% 0; rotate: -38deg; }
.tape-r { left: auto; right: 6%; translate: 20% 0; rotate: 36deg; }
.ch-fire { background: linear-gradient(180deg, rgba(94, 26, 26, 0.32), transparent 70%); }
.ch-fire .pt { --ar: 1242 / 1344; aspect-ratio: var(--ar); }

/* A photo that paints itself as the page scrolls: a pencil sketch draws in on cream paper, strokes block in the color,
   the finished oil painting comes up, and the photo settles in last. The sketch and the blocking-in are drawn on the
   canvas from the layers below; the painting and photo are layers on top. */
.pt { position: relative; overflow: hidden; }
/* each layer overlaps the frame by a pixel, so a phone rounding the height down never shows a seam */
.pt > canvas, .pt > img { position: absolute; inset: -1px; width: calc(100% + 2px); height: calc(100% + 2px); max-width: none; object-fit: cover; display: block; }
/* The sketch, blocking-in and stroke-timing layers are read by the canvas, never shown. */
.pt > img.layer { visibility: hidden; }
.reveal .pt-paint, .reveal .pt-photo { opacity: 0; }
@media (prefers-reduced-motion: reduce) { .reveal .pt-photo { opacity: 1; } }

/* Sections fade in as they scroll into view, like her home page */
/* hidden only once the page's script has started (.reveal on <html>): a script that never loads leaves it all shown */
.reveal .rv { opacity: 0; transform: translateY(22px); transition: opacity .9s ease, transform 1s cubic-bezier(.2, .7, .2, 1); transition-delay: var(--d, 0s); }
.rv.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .reveal .rv { opacity: 1; transform: none; transition: none; } }

/* Her words write themselves as the page scrolls: each word appears in reading order as a line just below the
   middle of the screen passes it, warm gold first, settling to ink. */
.wr .w { opacity: 0; color: var(--camel); transition: opacity .45s ease, color 1.2s ease; }
.wr .w.on { opacity: 1; color: inherit; }
.ch-now .pt { aspect-ratio: 4 / 5; }
.ch-now .pt > canvas, .ch-now .pt > img { object-position: 50% 45%; }

/* The studio: her palette, a canvas up close and her brushes, no words */
.studio { padding: 0 0 120px; }
.studio .row { display: grid; grid-template-columns: 1fr 1.35fr 1fr; gap: 22px; align-items: end; }
.studio img { width: 100%; object-fit: cover; }
.studio .s1 { aspect-ratio: 3 / 4; object-position: 50% 50%; }
.studio .s2 { aspect-ratio: 4 / 5; object-position: 50% 40%; }
.studio .s3 { aspect-ratio: 3 / 4; object-position: 40% 50%; }

/* Training: her influences beside her master study, then her schools */
.studies { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; align-items: start; }
.studies figure { margin: 0; }
.studies img { aspect-ratio: 4 / 5; object-position: 50% 30%; }
.studies figure:first-child { margin-top: 64px; }
.edu { margin-top: 56px; border-top: 1px solid var(--hair); }
.edu h3 { margin: 30px 0 6px; font-family: var(--serif); font-weight: 500; font-size: 27px; }
.edu ul { list-style: none; margin: 0; padding: 0; }
.edu li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 24px; padding: 18px 0; border-bottom: 1px solid var(--hair); }
.edu .sch { font-family: var(--serif); font-size: 22px; line-height: 1.25; color: var(--ink); }
.edu .what { grid-column: 1; font-size: 14.5px; color: var(--ink-3); letter-spacing: 0.02em; }
.edu .yr { grid-row: 1 / span 2; grid-column: 2; align-self: center; font-size: 14.5px; color: var(--wheat); letter-spacing: 0.04em; font-variant-numeric: tabular-nums; white-space: nowrap; }

/* Close: her film and the way on into the site */
.ab-close { padding: 120px 0 130px; border-top: 1px solid rgba(187, 148, 104, 0.18); background: radial-gradient(ellipse 80% 120% at 100% 0%, rgba(148, 37, 42, 0.42), transparent 60%), linear-gradient(160deg, var(--oxblood) 0%, #3A1B17 45%, var(--night) 100%); }
.ab-close .wrap { display: grid; grid-template-columns: 0.8fr 1.2fr; gap: 96px; align-items: center; }
.ab-close .portrait { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: 50% 30%; }
.film-tile { position: relative; display: block; width: 100%; padding: 0; border: 0; background: #000; cursor: pointer; overflow: hidden; }
.film-tile img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; opacity: .82; transition: opacity .3s, transform .6s cubic-bezier(.2, .7, .2, 1); }
.film-tile:hover img { opacity: 1; transform: scale(1.02); }
.film-tile .play { position: absolute; left: 50%; top: 50%; width: 76px; height: 76px; margin: -38px 0 0 -38px; border-radius: 50%; display: grid; place-items: center; background: rgba(30, 24, 20, 0.5); border: 1px solid rgba(230, 212, 166, 0.6); color: var(--ink); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.film-tile .play svg { width: 26px; height: 26px; margin-left: 4px; }
.ab-close .h2 { margin-top: 40px; }
.ab-close .meta { margin: 12px 0 0; font-size: 14.5px; color: var(--ink-3); letter-spacing: 0.04em; }
.ab-close .ctas { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 34px; }

/* Her film window */
.film-modal { position: fixed; inset: 0; z-index: 60; display: grid; place-items: center; padding: 4vh 4vw; background: rgba(14, 10, 8, 0.9); opacity: 0; transition: opacity .3s ease; }
.film-modal[hidden] { display: none; }
.film-modal.open { opacity: 1; }
.film-modal video { width: min(1200px, 100%); max-height: 84vh; background: #000; box-shadow: 0 40px 100px rgba(0, 0, 0, 0.6); }
.film-close { position: absolute; top: 18px; right: 18px; width: 44px; height: 44px; border-radius: 50%; border: 1px solid rgba(230, 212, 166, 0.4); background: rgba(30, 24, 20, 0.6); color: var(--ink); cursor: pointer; display: grid; place-items: center; }
.film-close svg { width: 18px; height: 18px; }

/* ---------- between a computer and a phone ---------- */
@media (max-width: 999px) {
  .ch .wrap, .ch.flip .wrap { grid-template-columns: minmax(0, 1fr) minmax(0, 0.8fr); gap: 0 48px; }
  .ch .txt { grid-column: 1; }
  .ch .pic { grid-column: 2; }
  .ch.flip .txt { grid-column: 2; grid-row: 1; }
  .ch.flip .pic { grid-column: 1; grid-row: 1; }
  /* the place name runs across the top, the story under it */
  .ch .rail { grid-column: 1 / -1; grid-row: 1; padding: 0 0 22px; }
  .ch:not(.has-notes) :is(.txt, .pic) { grid-row: 2; }
  /* the papers become a row under the place name, above the story */
  .has-notes .railbox { display: contents; }
  .notes { grid-column: 1 / -1; grid-row: 2; margin: 0 0 56px; grid-template-columns: repeat(3, 150px); gap: 40px; }
  .note:nth-child(n) { margin: 0; }
  .note:nth-child(2) { margin-top: 18px; }
  .ch.has-notes .txt, .ch.has-notes .pic { grid-row: 3; }
}

/* ---------- narrow screens ---------- */
@media (max-width: 860px) {
  .ab-hero { padding: 16px 0 72px; }
  .dc { top: -10px; right: -6%; width: 112vw; opacity: .52; }
  .ab-hero .wrap { grid-template-columns: 1fr; gap: 40px; }
  .ab-hero blockquote { margin-top: 28px; padding-left: 18px; }
  .ch { padding: 72px 0; }
  .ch .wrap, .ch.flip .wrap { grid-template-columns: 1fr; }
  .ch .txt, .ch.flip .txt { grid-column: 1; grid-row: 3; }
  .ch .pic, .ch.flip .pic { grid-column: 1; grid-row: 2; position: static; margin-bottom: 36px; }
  .ch .pic .pt { width: auto; }
  .ch .rail { grid-column: 1; grid-row: 1; }
  .ch:not(.has-notes) .txt { grid-row: 3; }
  .ch .txt .h2 { margin-bottom: 26px; }
  .ch .txt p { font-size: 16.5px; }
  .ch .txt p.first { font-size: 21px; }
  .ch-young .pt { aspect-ratio: 4 / 5; }
  /* on a phone: photo, then the papers, then her story */
  .ch.has-notes .pic { grid-row: 2; }
  .ch.has-notes .txt { grid-row: 4; }
  .notes { grid-row: 3; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin: 6px 6px 48px; }
  .note { width: 100%; }
  .note:nth-child(2) { margin-top: 12px; }
  .tape { height: 15px; top: -7px; }
  .ch-young .pt > canvas, .ch-young .pt > img { object-position: 50% 30%; }
  .ch-fire .pt { aspect-ratio: 4 / 5; }
  .ch-fire .pt > canvas, .ch-fire .pt > img { object-position: 50% 40%; }
  .studio { padding-bottom: 72px; }
  .studio .row { grid-template-columns: 1fr 1fr; gap: 12px; }
  .studio .s2 { grid-column: 1 / -1; grid-row: 1; aspect-ratio: 4 / 3; }
  .ab-close { padding: 72px 0 80px; }
  .ab-close .wrap { grid-template-columns: 1fr; gap: 44px; }
  .ab-close .portrait { aspect-ratio: 1 / 1; }
  .ab-close .h2 { margin-top: 32px; }
  .ab-close .ctas .btn { flex: 1 1 100%; }
}