/* Aubergine sections — one story section per page sits on the dark ground,
   with the OLA symbol drawn into it. Section is the .wrap container, so the
   ground is extended to the viewport edges with a box-shadow and clipped
   top/bottom with clip-path. */

.is-aubergine {
  --au-ink: #241c2e;
  --au-raised: #2f2639;
  --au-paper: #faf9fc;
  --au-sub: #bdb3c9;
  --au-rule: #4f4360;
  --au-lilac: #cdb8ff;
  position: relative;
  isolation: isolate;
  background: var(--au-ink);
  color: var(--au-paper);
  box-shadow: 0 0 0 100vmax var(--au-ink);
  clip-path: inset(0 -100vmax);
  border-color: transparent !important;
}
.is-aubergine > :not(.ola-layer) { position: relative; z-index: 1; }
/* Decorations live in a layer exactly as wide as the viewport (scrollbar
   excluded, --ola-vw set by ola-motion.js), which clips what hangs off the
   edge — otherwise the drawings would widen the page and scroll it sideways. */
.ola-layer { position: absolute; top: 0; bottom: 0; left: calc(50% - var(--ola-vw, 100vw) / 2); width: var(--ola-vw, 100vw); overflow: hidden; pointer-events: none; z-index: 0; }

.is-aubergine .eyebrow { color: var(--au-sub); }
.is-aubergine :is(h2, h3, b, strong) { color: var(--au-paper); }
.is-aubergine :is(h2, h3) :is(span, em) { color: var(--au-lilac); }
.is-aubergine :is(p, li, figcaption, span) { color: var(--au-sub); }
.is-aubergine a,
.is-aubergine a span[aria-hidden] { color: var(--au-paper); }
.is-aubergine a:hover,
.is-aubergine a:focus-visible { color: var(--au-lilac); }
.is-aubergine .text-link { border-color: currentColor; }
.is-aubergine :is(.lead-strip, .seoul-preview-link, article, .event-list a) { border-color: var(--au-rule); }
.is-aubergine .pills span { border-color: var(--au-rule); color: var(--au-sub); }
.is-aubergine .lead-record { border-color: var(--au-lilac); }
/* these two carry more specific grey rules in style.css */
.is-aubergine .event-list article > span,
.faculty-lead.is-aubergine .lead-record li { color: var(--au-sub); }
.is-aubergine .event-list b { color: var(--au-paper); }

/* /visit — the Busan card stays light, the Seoul card lifts off the ground */
.city-grid.is-aubergine > article:first-of-type .eyebrow,
.city-grid.is-aubergine > article:first-of-type h2,
.city-grid.is-aubergine > article:first-of-type a { color: #241c2e; }
.city-grid.is-aubergine > article:first-of-type p { color: #6c6478; }
.city-grid.is-aubergine > article:last-of-type { background: var(--au-raised); }

/* ---- decorations ---- */
.ola-deco { position: absolute; z-index: 0; pointer-events: none; }
.ola-deco > img { display: block; width: 100%; height: auto; }
.ola-glow {
  inset: 0;
  background: radial-gradient(45% 70% at var(--glow-at, 80% 30%), rgba(205, 184, 255, .12), rgba(205, 184, 255, 0) 70%);
}
.field-note .ola-glow { --glow-at: 78% 45%; }
.faculty-preview .ola-glow { --glow-at: 88% 18%; }
.international-education .ola-glow { --glow-at: 90% 10%; }
.seminar-overview .ola-glow { --glow-at: 90% 25%; }
.faculty-lead .ola-glow { --glow-at: 72% 50%; }
.city-grid .ola-glow { --glow-at: 92% 90%; }

.field-note .ola-horizon { width: 1100px; left: -420px; bottom: -600px; opacity: .24; }
.faculty-preview .ola-ghost { width: 520px; right: -120px; top: -90px; opacity: .035; }
.international-education .ola-emboss-fill { width: 640px; right: -330px; top: 150px; opacity: .08; }
.international-education .ola-emboss-line { width: 640px; right: -294px; top: 178px; opacity: .26; }
.international-education :is(.ola-emboss-fill, .ola-emboss-line) > img { transform: rotate(-7deg); }
.seminar-overview .ola-spine { right: 14px; top: 84px; }
.seminar-overview .ola-rise-line { width: 760px; left: -200px; bottom: -400px; opacity: .16; }
.faculty-lead .ola-corner-line { width: 720px; right: -230px; bottom: -330px; opacity: .13; }
.city-grid .ola-corner-fill { width: 440px; right: -140px; bottom: -170px; opacity: .05; }
.city-grid .ola-corner-line { width: 440px; right: -96px; bottom: -132px; opacity: .24; }

/* Seal — the symbol fills the ring; the ring text turns, the symbol does not.
   Geometry is in percent so the seal scales: the triangle's circumradius is
   0.609 of its width, sized so the corners meet the ring text. */
.ola-seal { width: 200px; aspect-ratio: 1; }
.ola-seal-inner { position: relative; width: 100%; height: 100%; border-radius: 50%; }
.ola-seal svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; animation: ola-spin 36s linear infinite; }
.ola-seal svg text { fill: rgba(205, 184, 255, .9); font: 600 10.5px "DM Sans", sans-serif; letter-spacing: .3em; }
.ola-seal-inner > img { position: absolute; left: 15.5%; top: 8%; width: 69%; height: auto; }
.ola-seal--disc .ola-seal-inner { background: #241c2e; box-shadow: 0 14px 34px rgba(18, 10, 28, .45); }

/* /faculty — the seal shares the photo's grid cell and hangs off its lower-left corner */
.faculty-lead.is-aubergine > img { grid-column: 1; grid-row: 1; }
.faculty-lead.is-aubergine > div:not(.ola-layer, .ola-seal) { grid-column: 2; grid-row: 1; }
.faculty-lead > .ola-seal {
  --s: 150px; --photo-h: 400px;
  width: var(--s); grid-column: 1; grid-row: 1; align-self: center; justify-self: start;
  margin-left: calc(var(--s) * -.2);
  translate: 0 calc(var(--photo-h) / 2 - var(--s) * .12);
  rotate: 8deg; z-index: 3;
}

/* Home — the seal is pinned to the lead photo, the same way as on /faculty:
   it hangs off the thumbnail's lower-left corner and does not drift. */
.lead-photo { position: relative; display: block; flex: none; line-height: 0; }
/* the thumbnail grows so the seal sits on a corner of it, in the same
   proportion as on /faculty (seal about half the photo's width) */
.faculty-preview.is-aubergine .lead-photo > img { width: 150px; height: 180px; }
/* One rule for both seals: diameter = half the photo's width, overhang = a fifth of the seal. */
.lead-photo > .ola-seal { position: absolute; width: 75px; left: -15px; bottom: -15px; rotate: -10deg; z-index: 2; }
/* a small seal carries a short ring in larger type, or the letters blur */
.ola-seal--small svg text { font-size: 15px; letter-spacing: .22em; }
/* .lead-strip img (the thumbnail rule in style.css) must not reach the seal's own symbol */
.lead-photo .ola-seal-inner > img { width: 69%; height: auto; object-fit: contain; border-radius: 0; }

/* Spine — vertical ticker in the right margin */
.ola-spine { display: flex; flex-direction: column; align-items: center; gap: 18px; }
.ola-spine > img { width: 34px; height: auto; opacity: .9; }
.ola-spine-track {
  height: 520px; overflow: hidden;
  -webkit-mask-image: linear-gradient(transparent, #000 12%, #000 88%, transparent);
  mask-image: linear-gradient(transparent, #000 12%, #000 88%, transparent);
}
.ola-spine-col { display: flex; flex-direction: column; animation: ola-tick 22s linear infinite; }
.ola-spine-col span {
  writing-mode: vertical-rl; padding-bottom: 18px;
  font: 600 9px "DM Sans", sans-serif; letter-spacing: .36em; color: rgba(205, 184, 255, .62);
}

/* ---- motion (ola-motion.js adds .ola-motion to <html>) ---- */
@keyframes ola-spin { to { transform: rotate(360deg); } }
@keyframes ola-tick { to { transform: translateY(-50%); } }
@keyframes ola-breathe { 0%, 100% { opacity: .65; } 50% { opacity: 1; } }
.ola-glow { animation: ola-breathe 9s ease-in-out infinite; }
[data-speed] { will-change: transform; }

.ola-motion .ola-draw > img { clip-path: inset(100% 0 0 0); transition: clip-path 1.8s cubic-bezier(.16, 1, .3, 1); }
.ola-motion .is-in .ola-draw > img { clip-path: inset(0 0 0 0); }
.ola-motion .ola-seal-inner { opacity: 0; transform: scale(.82); transition: opacity 1.1s .15s, transform 1.1s .15s cubic-bezier(.16, 1, .3, 1); }
.ola-motion .is-in .ola-seal-inner { opacity: 1; transform: none; }
.ola-motion .ola-rise { opacity: 0; transform: translateY(26px); transition: opacity .9s cubic-bezier(.16, 1, .3, 1) var(--d, 0ms), transform .9s cubic-bezier(.16, 1, .3, 1) var(--d, 0ms); }
.ola-motion .is-in .ola-rise { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .ola-glow, .ola-seal svg, .ola-spine-col { animation: none; }
}

/* ---- widths ---- */
@media (max-width: 1000px) {
  .faculty-lead > .ola-seal { --s: 120px; --photo-h: 320px; }
  .faculty-lead > .ola-seal svg text { font-size: 13px; letter-spacing: .24em; }
  .seminar-overview .ola-spine { display: none; }
}
@media (max-width: 700px) {
  /* Phones stack every section into one tall column, so the drawings move up
     beside the heading — where there is empty space — and are drawn stronger,
     because a thin line shrunk to a phone width all but disappears. */
  .faculty-lead.is-aubergine > div:not(.ola-layer, .ola-seal) { grid-column: 1; grid-row: 2; }
  .faculty-lead > .ola-seal { --s: 110px; --photo-h: 293px; margin-left: -12px; }
  .faculty-preview.is-aubergine .lead-photo > img { width: 110px; height: 132px; }
  .lead-photo > .ola-seal { width: 55px; left: -11px; bottom: -11px; }
  .field-note .ola-horizon { width: 360px; left: auto; right: -120px; top: 6px; bottom: auto; opacity: .34; }
  .faculty-preview .ola-ghost { display: none; }
  .international-education .ola-emboss-fill { width: 300px; top: 14px; bottom: auto; right: -112px; opacity: .14; }
  .international-education .ola-emboss-line { width: 300px; top: 34px; bottom: auto; right: -88px; opacity: .4; }
  .seminar-overview .ola-rise-line { width: 340px; left: auto; right: -130px; top: -24px; bottom: auto; opacity: .32; }
  .faculty-lead .ola-corner-line { width: 300px; right: -118px; top: 56px; bottom: auto; opacity: .32; }
  .city-grid .ola-corner-fill { width: 260px; right: -84px; bottom: -48px; opacity: .08; }
  .city-grid .ola-corner-line { width: 260px; right: -62px; bottom: -30px; opacity: .38; }
}