/* Cadenza Legacy — design pass (v1). A sibling of the America site: same fonts and buttons,
   its own forest, brass and paper. Motion states apply only once legacy-design.js adds classes. */

/* One type pair, shared with America */
:root { --display: 'Instrument Serif', Georgia, serif; --ui: 'DM Sans', system-ui, sans-serif; --script: 'Instrument Serif', Georgia, serif; --brass-ink: #a7894f; }

/* Rounded buttons in sentence case, like America */
#app .btn { border-radius: 999px; text-transform: none; letter-spacing: .005em; font-size: 14px; font-weight: 500; padding-left: 24px; padding-right: 24px; }
#app .place-host-link { text-transform: none; letter-spacing: .01em; font-size: 13px; }
#app .america-site-switch { border-radius: 999px; background: transparent; color: inherit; border-color: #2a2b2140; padding: 6px 14px; min-height: 40px; }
#app .america-site-switch small { color: #6b6656; }
#app .america-site-switch:hover { background: #26231b; color: #fff; }
#app .america-site-switch:hover small { color: #d8d2c2; }
.score-index { display: none !important; }

/* Footer logo reads on the dark ground */
.site-foot img[src*="cadenza-america-logo"] { filter: brightness(0) invert(.92) sepia(.25); }

/* ---------- Hero: the word stands behind the grandfather and granddaughter, then leaves ---------- */
.place-hero picture:first-of-type .place-hero-photo { z-index: -4; }
.place-hero-word { position: absolute; z-index: -3; left: 46%; top: 7%; margin: 0; pointer-events: none;
  font: italic 400 clamp(150px, 21vw, 340px)/.9 var(--display); letter-spacing: -.02em; color: #e8d4a7; opacity: 0; white-space: nowrap; }
.place-hero-fg .place-hero-photo { z-index: -2; }
.place-hero-fg { display: contents; }
.place-hero-shade { z-index: -1; }
@media (prefers-reduced-motion:no-preference) {
  .lg-moment .place-hero-word { animation: lg-word 3.6s cubic-bezier(.16,1,.3,1) .25s both; }
  @keyframes lg-word { 0% { opacity: 0; transform: translateY(24px) scale(.97); } 22% { opacity: .92; transform: none; } 70% { opacity: .92; transform: none; } 100% { opacity: 0; transform: translateY(-8px); } }
  .lg-moment .place-hero-copy > * { animation: lg-copy .7s cubic-bezier(.16,1,.3,1) both; }
  .lg-moment .place-hero-copy > :nth-child(1) { animation-delay: .5s; } .lg-moment .place-hero-copy > :nth-child(2) { animation-delay: .6s; }
  .lg-moment .place-hero-copy > :nth-child(3) { animation-delay: .7s; } .lg-moment .place-hero-copy > :nth-child(4) { animation-delay: .8s; }
  .lg-moment .place-hero-copy > :nth-child(5) { animation-delay: .88s; }
  @keyframes lg-copy { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
}

/* Phone: the words sit on the photograph, not in a block below it */
@media (max-width:540px) {
  .place-hero { display: flex; align-items: flex-end; min-height: calc(100svh - 64px); }
  .place-hero .place-hero-photo { position: absolute; inset: 0; height: 100%; aspect-ratio: auto; object-position: 30% 40%; }
  .place-hero-shade { display: block; background: linear-gradient(0deg, #101710f2 0%, #101710d9 38%, #10171066 62%, #10171000 82%); }
  .place-hero-copy { padding: 0 22px 34px; }
  .place-hero h1 { font-size: 64px; margin-bottom: 18px; }
  .place-rule { margin-bottom: 16px; }
  .place-intro { margin-bottom: 20px; }
  .place-hero-word { left: 8%; top: 10%; font-size: 120px; }
}

/* ---------- The pause: lit word by word ---------- */
.legacy-pause { position: relative; }
@media (prefers-reduced-motion:no-preference) {
  .lg-motion [data-scrub] .w { color: #cfc6b3; transition: color .35s ease; }
  .lg-motion [data-scrub] em .w { color: #d8cdb4; }
  .lg-motion [data-scrub] .w.is-lit { color: inherit; }
}

/* ---------- The brass string ---------- */
[data-view="home"] { position: relative; }
.lg-thread { position: absolute; left: 0; top: 0; z-index: 4; pointer-events: none; overflow: visible; }
.lg-thread path { fill: none; stroke: #b99a5b; stroke-width: 1.25; stroke-linecap: round; }
.lg-thread-tip { fill: #ecd8a8; opacity: 0; transition: opacity .3s ease; filter: drop-shadow(0 0 5px #e7c98acc); }
.lg-thread-tip.is-on { opacity: 1; }
.lg-thread-knot { fill: #b99a5b; opacity: 0; transition: opacity .4s ease; }
.lg-thread-knot.is-on { opacity: 1; }
@media (prefers-reduced-motion:no-preference) {
  [data-view="home"] .cta .btn-brass.lg-arrived { box-shadow: 0 0 0 1px #b99a5b, 0 0 24px #d9bf8466; transition: box-shadow .6s ease; }
}

/* ---------- Seams: dark meets light over a short distance ---------- */
.lg-seam { position: absolute; left: 0; right: 0; top: 0; height: clamp(70px, 11vh, 130px); z-index: -1; pointer-events: none; }
.lg-seamed { position: relative; isolation: isolate; }

@media print { .lg-thread, .lg-seam, .place-hero-word { display: none; } }

/* Phone header: the America link and the main button fit on one line */
@media (max-width:540px) {
  #app .site-head .america-site-switch { min-height: 36px; padding: 4px 9px; gap: 5px; font-size: 12px; }
  #app .site-head .america-site-switch small { display: none; }
  #app .site-head .btn { white-space: nowrap; min-height: 40px; padding: 0 13px; font-size: 13px; margin-top: 0; }
  #app .site-head .nav { gap: 8px; }
  #app .site-head .head-in { gap: 8px; }
  #app .site-head .logo.inst-only img { width: 78px; height: auto; }
}
@media (max-width:420px) {
  /* institutions page: Contact stays in the page and footer; the header keeps the two actions */
  #app .site-head .nav > .navlink:not(.america-site-switch):not(.site-only) { display: none; }
}
#app .menu-btn { border-radius: 50%; }

/* ===================== Design pass v2: one language across every Legacy screen ===================== */
/* Section labels: the headings carry the hierarchy; no decorative eyebrows or staff lines */
#app .eyebrow { display: none; }
#app .page-head::after, .site-foot::before { display: none; }
/* Small category tags and data labels read in sentence case, not spaced capitals */
#app .tag, #app .k, #app .kv dt, #app .card .tag, #app [class*="label"] { letter-spacing: .01em; text-transform: none; }
#app .tag { font-size: 13px; font-weight: 500; color: #6f6a5a; }

/* Buttons: same shape, weight and feedback everywhere */
#app .btn { min-height: 48px; transition: background .2s ease, color .2s ease, border-color .2s ease, transform .15s cubic-bezier(.16,1,.3,1), box-shadow .2s ease; }
#app .btn:hover { box-shadow: 0 6px 18px #1d1a141f; }
#app .btn:active { transform: scale(.97); }
#app .btn:focus-visible, #app button:focus-visible, #app a:focus-visible { outline: 2px solid #26231b; outline-offset: 3px; }
#app .btn-ghost { background: transparent; border: 1px solid currentColor; }
#app .textlink { text-transform: none; letter-spacing: .01em; font-size: 15px; font-weight: 500; }

/* Fields: one style for every input, select and text area (16px, so phones do not zoom in) */
#app input:not([type=checkbox]):not([type=radio]):not([type=file]):not([type=range]), #app select, #app textarea {
  box-sizing: border-box; width: 100%; min-height: 50px; padding: 13px 14px; font: 400 16px/1.4 var(--ui);
  color: #24211a; background: #fffdf8; border: 1px solid #c9c4b7; border-radius: 12px; transition: border-color .2s, box-shadow .2s;
}
#app textarea { min-height: 120px; resize: vertical; }
#app input:not([type=checkbox]):not([type=radio]):focus, #app select:focus, #app textarea:focus { outline: none; border-color: #26231b; box-shadow: 0 0 0 3px #26231b1a; }
#app input[aria-invalid=true], #app textarea[aria-invalid=true], #app select[aria-invalid=true] { border-color: #a3321f; }
#app input[type=checkbox], #app input[type=radio] { accent-color: #3d4a35; width: 18px; height: 18px; }
#app label { font-family: var(--ui); }
#app .field > label, #app .fl label { font-size: 14px; font-weight: 500; color: #24211a; }

/* Choice cards in the forms (radio and checkbox options) */
#app .opt, #app .choice, #app .radio-card { border-radius: 14px; transition: border-color .2s, box-shadow .2s, background .2s; }
#app .opt:has(input:checked), #app .choice:has(input:checked), #app .radio-card:has(input:checked) { box-shadow: inset 0 0 0 1px #26231b; border-color: #26231b; }

/* Cards and panels: rounded, quiet */
#app .card, #app .aside, #app .path, #app .imp, #app .wiz-shell > *, #app .trust > div, #app .note, #app .prelaunch { border-radius: 18px; }
#app .card img, #app .imp-media, #app .imp-media img { border-radius: 14px; }
#app .card { transition: transform .4s cubic-bezier(.16,1,.3,1), box-shadow .4s ease; }
@media (hover:hover) and (pointer:fine) and (prefers-reduced-motion:no-preference) { #app .card:hover { transform: translateY(-3px); box-shadow: 0 14px 34px #1d1a1414; } }

/* Example-project badge as a pill */
#app .badge, #app .example-badge, #app [class*="ex-flag"] { border-radius: 999px; letter-spacing: .02em; text-transform: none; }

@media (prefers-reduced-motion:reduce) { #app .btn, #app .card { transition: none; } #app .btn:active { transform: none; } }
#app .status { border-radius: 999px; text-transform: none; letter-spacing: .01em; font-size: 13px; padding: 6px 12px; display: inline-block; }
#app .radios label { border-radius: 14px; }
#app .radios label:has(input:checked) { border-color: #26231b; box-shadow: inset 0 0 0 1px #26231b; background: #fbf8f0; }