/* Keep the shared brand colors available when a section reverses text and surface. */
:root{
  --brand-ink:var(--ink);--brand-ivory:var(--ivory);
  --brand-wood:var(--gold);--brand-wine:var(--wine)
}
body,.header,.header.is-scrolled,.footer{background:var(--brand-ink);color:var(--brand-ivory)}
.section-space{
  --ink:var(--paper);--ivory:var(--brand-ink);
  --muted:var(--brand-wine);--gold:var(--brand-wine);--line:var(--brand-wood);
  color-scheme:light;color:var(--ivory);
}
.section-space .eyebrow{font-weight:600;font-size:12px;letter-spacing:.15em;color:var(--gold)}
.section-space :focus-visible{outline-color:var(--gold)}
.catalog-page {background:var(--paper);padding:clamp(128px,11vw,168px) 0 clamp(50px,6vw,86px)}
.catalog-page .page-heading {position:relative;isolation:isolate;display:grid;align-content:center;min-height:clamp(174px,17vw,226px);max-width:none;padding:12px 38% 24px 0;margin:0}
.catalog-page .page-heading h1 {font-size:clamp(52px,5.5vw,80px);margin:0;line-height:1.05}
.catalog-page .page-heading p {margin:14px 0 0;max-width:45ch;font-size:clamp(16px,1.3vw,18px);line-height:1.65;color:var(--brand-wine)}
.catalog-page .catalog-sketch {
  position:absolute;
  z-index:-1;
  top:50%;
  right:3%;
  transform:translateY(-50%);
  width:min(38%,340px);
  aspect-ratio:340 / 238;
  mask:url(images/icra-portre-kenari.svg) center / 100% 100% no-repeat;
  mix-blend-mode:multiply;
  opacity:.85;
}
.catalog-page .catalog-controls {
  display:grid;grid-template-columns:minmax(0,1fr) minmax(145px,185px) minmax(110px,145px);
  align-items:center;gap:0;margin-top:18px;padding:3px 8px;
  border:1px solid color-mix(in srgb,var(--brand-wine) 28%,transparent);border-radius:28px;
  background:color-mix(in srgb,var(--paper) 84%,white);
}
.catalog-page .catalog-search {max-width:none;min-width:0}
.catalog-page .catalog-search>div {background:transparent;border:0;min-height:44px;padding:0 12px;gap:10px}
.catalog-page .catalog-search input {font-size:16px;padding:8px 0}
.catalog-page .catalog-search input::placeholder {color:var(--brand-wine)}
.catalog-choice {position:relative;padding:0 6px;min-width:0}
.catalog-choice::before {content:"";position:absolute;left:0;top:12px;bottom:12px;border-left:1px solid color-mix(in srgb,var(--brand-wine) 24%,transparent)}
.catalog-choice::after {content:"";position:absolute;right:15px;top:calc(50% - 4px);width:6px;height:6px;border:solid currentColor;border-width:0 1.5px 1.5px 0;transform:rotate(45deg);pointer-events:none}
.catalog-choice select {width:100%;min-height:44px;appearance:none;border:0;background:transparent;color:var(--brand-ink);padding:6px 26px 6px 10px;font:inherit;font-size:14px;cursor:pointer}
.catalog-controls :is(input,select):focus-visible {outline:2px solid var(--brand-wine);outline-offset:-2px;border-radius:12px}
.catalog-sr {position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.catalog-page .catalog-summary {margin:12px 0 2px;min-height:32px;color:var(--brand-wine);font-size:14px}
.catalog-page .catalog-grid {display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 clamp(24px,4vw,54px)}
.catalog-page .catalog-reset,.catalog-message .button,.catalog-message .text-link,.catalog-pagination button {font-size:14px}
.catalog-message {padding-block:24px;border-block-start:1px solid var(--line)}
.record {min-width:0;border-bottom:1px solid color-mix(in srgb,var(--brand-wine) 18%,transparent)}
.record-row {position:relative;display:grid;grid-template-columns:minmax(0,min(46%,232px)) minmax(0,1fr);gap:clamp(12px,1.5vw,20px);align-items:center;padding:14px 0;scroll-margin-top:115px}
.record-cover {position:relative;aspect-ratio:16/9;display:block;overflow:hidden;border-radius:5px;background:color-mix(in srgb,var(--brand-wine) 12%,var(--paper))}
.record-cover img {display:block;width:100%;height:100%;object-fit:cover;transform:scale(1.025)}
.record-copy h2 {font:600 clamp(23px,2vw,30px)/1.14 Barlow,sans-serif;overflow-wrap:anywhere}
.record-meta,.record-time {color:var(--brand-wine);font-size:13px;line-height:1.5}
.record-meta {margin-top:4px}
.record-time {font-variant-numeric:tabular-nums;white-space:nowrap;font-size:inherit}
.record-time:not(:empty)::before {content:" · "}
.record-toggle {position:absolute;inset:0;width:100%;border:0;border-radius:6px;background:transparent;cursor:pointer}
.record-cover::after {content:"";position:absolute;left:9px;bottom:8px;border-style:solid;border-width:6px 0 6px 10px;border-color:transparent transparent transparent white;filter:drop-shadow(0 1px 2px var(--brand-ink))}
.record-row:is(:hover,:focus-within) h2 {text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.16em}
@media(max-width:800px){.catalog-page .catalog-grid {grid-template-columns:minmax(0,1fr)}}
body:has(#record-player[open]) {overflow:hidden}
#record-player {position:fixed;inset:0;margin:auto;width:min(720px,calc(100vw - 36px),(100dvh - 120px)*1.7778);max-width:none;max-height:94dvh;padding:0;border:1px solid #e8bf8155;border-radius:14px;background:var(--brand-ink);color:var(--brand-ivory);box-shadow:0 18px 80px #170f1055}
#record-player::backdrop {background:rgb(23 15 16 / .78);backdrop-filter:blur(4px)}
.player-header {display:flex;gap:18px;align-items:center;justify-content:space-between;padding:8px 12px 8px 20px}
.player-header h2 {margin:0;font-size:clamp(22px,3vw,30px);line-height:1.2}
#player-close {display:grid;place-items:center;flex:none;background:transparent;color:inherit;border:0;border-radius:50%;width:44px;height:44px;cursor:pointer}
#player-close:hover {background:#fff4df18}
#player-close svg {width:20px;fill:none;stroke:currentColor;stroke-width:1.8}
.player-screen {background:black;aspect-ratio:16/9;min-height:min(200px,50dvh)}
.player-screen iframe {width:100%;height:100%;display:block;border:0}
.player-description {margin:12px 20px 16px;font-size:14px;line-height:1.55;color:var(--brand-ivory);white-space:pre-line;overflow-wrap:anywhere}
@media(max-width:600px){
 .catalog-page .catalog-controls {grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);padding:2px 5px;border-radius:19px}
 .catalog-page .catalog-search {grid-column:1/-1;border-bottom:1px solid color-mix(in srgb,var(--brand-wine) 16%,transparent)}
 .catalog-search+.catalog-choice::before {display:none}
 .catalog-choice {padding:0}
 .record-row {grid-template-columns:minmax(0,min(46%,190px)) minmax(0,1fr);gap:12px;padding:12px 0}
 .record-copy h2 {font-size:clamp(22px,5.7vw,29px)}
 .record-meta {font-size:12px;margin-top:4px}
}
.memoir {background:var(--paper);padding:clamp(122px,10vw,154px) 0 clamp(48px,5vw,80px)}
.memoir-layout {
  display:grid;grid-template-columns:minmax(0,3fr) minmax(0,2fr);
  grid-template-areas:"title portrait" "opening portrait" "continuation continuation";
  gap:0 clamp(28px,4vw,64px);
}
.memoir h1 {grid-area:title;align-self:end;font-size:clamp(46px,4.5vw,66px);line-height:1.08;text-wrap:balance;margin:0 0 20px}
.memoir-opening {grid-area:opening;align-self:start}
.memoir-opening,.memoir-continuation {font-size:clamp(16px,1.25vw,18px);line-height:1.78}
.memoir-continuation {grid-area:continuation;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:clamp(36px,5vw,76px);margin-top:clamp(26px,3vw,44px)}
.memoir-continuation h2 {margin:0 0 .4em;font-size:clamp(23px,2vw,28px);line-height:1.2;color:var(--brand-wine)}
.memoir-layout .memoir-portrait {grid-area:portrait;place-self:center;width:min(100%,340px);--wash:.62;mask:url(images/memoir-paper.svg) center / contain no-repeat}

.contact-page {display:grid;align-items:center;background:var(--paper);text-align:center;padding:clamp(120px,9vw,156px) 0 clamp(32px,4vw,64px)}
.contact-intro {display:grid;justify-items:center;gap:22px}
.contact-intro h1 {font-size:clamp(52px,5.8vw,86px);line-height:1.06;margin:0 0 15px}
.contact-intro p,.contact-notes p,.contact-notes address {max-width:44ch;font-size:16px;line-height:1.7}
.contact-intro p,.contact-notes p,.contact-notes address {margin-inline:auto;text-wrap:pretty}
.contact-intro p {max-width:56ch;font-size:clamp(16px,1.4vw,18px);text-wrap:balance}
.contact-actions {display:grid;justify-items:center;gap:10px;margin:0}
.contact-number {color:var(--brand-wine);font:600 clamp(40px,4.2vw,60px)/1.15 Barlow,sans-serif;min-height:44px}
.contact-number:hover,.contact-map:hover {text-decoration:underline;text-underline-offset:.18em}
.contact-write {display:inline-flex;align-items:center;min-height:46px;padding:10px 23px;border-radius:40px;background:var(--brand-wood);color:var(--brand-ink);font:700 15px/1.5 Manrope,sans-serif}
.contact-write:is(:hover,:focus-visible) {background:var(--brand-wine);color:var(--paper)}
.contact-notes {display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(28px,5vw,66px);max-width:900px;margin:clamp(32px,4vw,56px) auto 0;padding-top:clamp(26px,3vw,42px);border-top:1px solid color-mix(in srgb,var(--brand-wood) 64%,var(--paper))}
.contact-notes h2 {font:600 clamp(24px,2.1vw,32px)/1.2 Barlow,sans-serif;margin:0 0 10px}
.contact-notes .contact-dates {font:600 clamp(24px,2.2vw,33px)/1.25 Barlow,sans-serif;color:var(--brand-wine);margin:0 0 10px}
.contact-dates time {white-space:nowrap}
.contact-map {display:inline-flex;align-items:center;min-height:44px;color:var(--brand-wine);font-weight:700;text-decoration:underline;text-underline-offset:.2em}
@media(max-width:760px){
 .header nav{background:var(--brand-ink)}
 .catalog-page .page-heading{padding:0 37% 18px 0;min-height:150px}
 .catalog-page .page-heading h1{font-size:clamp(42px,7vw,58px)}
 .catalog-page .catalog-sketch{width:37%;right:0;opacity:.80}
 .contact-page {padding:108px 0 32px}
 .contact-intro {gap:18px}
 .contact-intro h1 {font-size:clamp(40px,7.8vw,53px);margin:0}
 .contact-intro p {margin-top:14px}
 .contact-notes {grid-template-columns:1fr;gap:25px;margin-top:28px;padding-top:22px}
}
/* Education */
.course {
  background: var(--paper);
  padding: 100px 0 clamp(60px, 7vw, 100px);
}
.course-opening {
  position: relative;
  isolation: isolate;
  display: grid;
  align-items: center;
  min-height: clamp(450px, 41vw, 660px);
  padding-block: clamp(44px, 5vw, 80px);
}
.course-introduction {position: relative; z-index: 1}
.course-backdrop {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  isolation: isolate;
  mask-image: linear-gradient(0deg, transparent, black 12%, black);
}
.sketch-defs {position:absolute}
.board-study {
  position:absolute; right:1%; top:0; width:61%; height:100%;
  mask-image:linear-gradient(90deg,transparent,black 23%,black 82%,transparent),
             linear-gradient(180deg,transparent,black 14%,black 84%,transparent);
  mask-composite:intersect;
}
.wash,.board-tone {filter:grayscale(1);opacity:var(--wash,.67)}
.wash.portrait-tone {filter:grayscale(1) contrast(.94) blur(.5px)}
.board-beat {
  opacity:0;
  fill:color-mix(in srgb,var(--brand-wine) 70%,var(--brand-wood));
  --beat-opacity:.26;
}
/* Four beats on the lower written staff, just above the marker hand. */
@keyframes board-rhythm {
  0%   {opacity:0;transform:translateX(839px)}
  12.5%{opacity:var(--beat-opacity)}
  25%  {transform:translateX(868px)}
  50%  {transform:translateX(889px)}
  75%  {transform:translateX(918px)}
  100% {opacity:var(--beat-opacity);transform:translateX(983px)}
}
@keyframes board-bounce {
  0%   {transform:translateY(658px);animation-timing-function:ease-out}
  12.5%{transform:translateY(630px);animation-timing-function:ease-in}
  25%  {transform:translateY(666px);animation-timing-function:ease-out}
  37.5%{transform:translateY(638px);animation-timing-function:ease-in}
  50%  {transform:translateY(680px);animation-timing-function:ease-out}
  62.5%{transform:translateY(652px);animation-timing-function:ease-in}
  75%  {transform:translateY(692px);animation-timing-function:ease-out}
  87.5%{transform:translateY(659px);animation-timing-function:ease-in}
  100% {transform:translateY(701px)}
}
@keyframes board-beat-release {from{opacity:var(--beat-opacity)}to{opacity:0}}
@media(prefers-reduced-motion:no-preference) {
  html[data-motion=on] .board-study.drawing-in .board-beat {
    animation:board-rhythm 3s linear 2.5s forwards,
              board-beat-release .5s ease-out 5.5s forwards;
  }
  html[data-motion=on] .board-study.drawing-in .board-beat circle {
    animation:board-bounce 3s linear 2.5s forwards;
  }
}
.course-backdrop::after {content:'';position:absolute;inset:0;background:linear-gradient(90deg,var(--paper) 23%,transparent 59%)}.course-introduction .eyebrow {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 18px;
  text-transform: uppercase;
}
.course-introduction .eyebrow::before {
  content: '';
  width: 34px;
  height: 2px;
  background: var(--brand-wood);
}
.course h1 {
  font-size: clamp(52px, 6.6vw, 98px);
  line-height: .99;
  margin: 0;
}
.course-lead {
  max-width: 39ch;
  margin-top: 24px;
  font-size: clamp(16px, 1.32vw, 20px);
  line-height: 1.65;
}
.course-apply {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-size: 15px;
  font-weight: 600;
}
.course-apply {
  margin-top: 24px;
  border-radius: 32px;
  background: var(--brand-ink);
  color: var(--brand-ivory);
  padding: 10px 24px;
}
.course-apply:hover {background: var(--brand-wine)}
.course-details {position:relative; padding-top:clamp(22px,3vw,42px)}
.course-details::before {content:'';position:absolute;left:0;right:0;top:0;height:1px;background:linear-gradient(90deg,var(--brand-wood),transparent)}
.course-spread {display:grid;grid-template-columns:minmax(0,.88fr) minmax(0,1.12fr);align-items:center;gap:clamp(22px,5vw,88px)}
.course-spread + .course-spread {margin-top:clamp(18px,3vw,56px)}
.course-details h2 {font-size:clamp(44px,5vw,70px);margin-bottom:.55em}
.course,.memoir {overflow-x:clip}
.story-motion-window {overflow:clip}
.story-motion-text {display:block}
.spread-copy {max-width:44ch}
.spread-copy h3 {font:600 clamp(24px,2.4vw,34px)/1.15 Barlow,sans-serif;margin:0 0 8px}
.spread-copy p {font-size:16px;line-height:1.75;color:var(--brand-ink)}
.spread-copy p+h3 {margin-top:26px}
.group-spread {grid-template-columns:minmax(0,1fr) minmax(0,.94fr)}
.group-spread .spread-copy {order:2}
.archive-drawing {display:block;width:100%;height:auto;mix-blend-mode:multiply}
.paired-study {--wash:.74}
.group-study {--wash:.43;order:1}
.ensemble-wave {
  fill:none;stroke:color-mix(in srgb,var(--brand-wine) 65%,var(--brand-wood));
  stroke-width:1.6;stroke-linecap:round;pointer-events:none;
}
.ensemble-wave path {opacity:0}
.wave-first {--arrival:.63s}
.wave-next {--arrival:1.65s}
.pluck-middle {--pluck:1.53s}
.pluck-last {--pluck:2.56s}
@media(prefers-reduced-motion:no-preference) {
 html[data-motion=on] .group-study.drawing-in .wave-span {
   stroke-dasharray:1;
   animation:ensemble-carry 2.35s var(--arrival) both;
 }
 html[data-motion=on] .group-study.drawing-in .string-pluck {
   transform-origin:0 0;
   animation:ensemble-pluck .72s var(--pluck,.43s) linear both;
 }
 html[data-motion=on] .drawing-in .wash {animation:take-tone 1.85s .24s both}
 html[data-motion=on] .board-study.drawing-in .ink-bloom {animation:marker-bloom 2.3s cubic-bezier(.3,0,.25,1) both}
 html[data-motion=on] .paired-study.drawing-in .wash {animation:none}
 html[data-motion=on] .paired-study:not(.drawing-in) #four-hand-wash circle {r:10px}
 html[data-motion=on] .paired-study.drawing-in #four-hand-wash circle {animation:hand-wash 1.45s ease-in-out both}
 html[data-motion=on] .group-study.drawing-in .wash {
   mask-image:linear-gradient(90deg,black 0% 45%,transparent 60% 100%);
   mask-size:250% 100%;
   animation:join-group 2.2s ease-out both;
 }
}
@keyframes hand-wash {from{r:10px}to{r:1000px}}
@keyframes ensemble-carry {
  0% {stroke-dashoffset:1;opacity:0}
  8% {opacity:.78}
  40% {stroke-dashoffset:0;opacity:.78}
  100% {stroke-dashoffset:0;opacity:0}
}
@keyframes ensemble-pluck {
  0% {transform:scaleY(0);opacity:0}
  10% {transform:scaleY(1);opacity:.92}
  25% {transform:scaleY(-.72)}
  42% {transform:scaleY(.48)}
  60% {transform:scaleY(-.26);opacity:.66}
  78% {transform:scaleY(.12)}
  100% {transform:scaleY(0);opacity:0}
}
@keyframes marker-bloom {from{r:12px}to{r:1800px}}
@keyframes join-group {from{mask-position:100% 0}to{mask-position:0 0}}
@keyframes take-tone {from{opacity:0}to{opacity:var(--wash,.67)}}
@media(max-width:760px) {
 .course {padding-top:82px}
 .course-opening {min-height:435px;align-items:center;padding:58px 0}
 .course h1 {font-size:clamp(48px,9vw,66px)}
 .course-introduction .eyebrow {margin-bottom:12px}
 .course-lead,.course-apply {margin-top:18px}
 .board-study {width:min(104%,600px);height:auto;right:0;top:50%;transform:translateY(-50%);--wash:.58}
 .board-beat {--beat-opacity:.20}
 .course-backdrop::after {background:linear-gradient(90deg,var(--paper) 0%,#f3f0e8d4 30%,#f3f0e83b 82%)}
 .course-spread,.group-spread {grid-template-columns:1fr;gap:12px}
 .group-spread .spread-copy,.group-study {order:initial}
 .course-spread + .course-spread {margin-top:22px}
 .archive-drawing {max-width:480px;justify-self:center}
 .spread-copy {max-width:48ch}
 .course-details h2 {margin-bottom:.45em}
}
/* On a phone the pen sits in the open space beside the application link. */
@media(max-width:480px) {
 .course h1 {font-size:clamp(36px,11.25vw,48px)}
 .board-study {top:calc(50% + 65px)}
}

@media(max-width:760px) {
 .memoir {padding:114px 0 64px}
 .memoir-layout {grid-template-columns:minmax(0,1fr) minmax(92px,32%);grid-template-areas:"title portrait" "opening opening" "continuation continuation";gap:22px 12px}
 .memoir-continuation {grid-template-columns:minmax(0,1fr);gap:22px;margin:0}
 .memoir h1 {font-size:clamp(35px,8vw,55px);align-self:center;margin:0}
 .memoir-layout .memoir-portrait {margin:0;max-width:180px}
}