/* Mi Pueblo Lindo Heritage Arts. Kept deliberately plain: cream page, dark ink, one warm accent. */
:root {
  --cream: #faf6ef;
  --paper: #f2ebdf;
  --line: #e4d9c8;
  --ink: #221812;
  --ink-soft: #6a5a4e;
  --accent: #c0522d;
  --accent-dark: #a2421f;
  --display: 'Fraunces', Georgia, serif;
  --body: 'Instrument Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --wrap: 1180px;
  --gutter: clamp(16px, 4vw, 40px);
  --ease: cubic-bezier(.2, .7, .1, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--cream); color: var(--ink); font-family: var(--body); font-size: 17px; line-height: 1.6; -webkit-font-smoothing: antialiased; overflow-x: clip; }
img { max-width: 100%; display: block; }
a { color: inherit; }
button { font: inherit; cursor: pointer; }
.wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gutter); }

h1, h2, h3, h4 { font-family: var(--display); font-weight: 400; line-height: 1.1; margin: 0; letter-spacing: -.015em; }
h1 em, h2 em { font-style: normal; color: var(--accent); }
.h1 { font-size: clamp(2.6rem, 6.4vw, 5.4rem); letter-spacing: -.03em; line-height: 1.02; }
.h2 { font-size: clamp(2rem, 4vw, 3.2rem); }
.h3 { font-size: 1.5rem; }
.label { display: block; font-size: .8rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-soft); margin-bottom: 1rem; }
.lede { font-size: clamp(1.08rem, 1.5vw, 1.25rem); color: var(--ink-soft); max-width: 36em; margin: 1.2rem 0 0; }
p { margin: 0 0 1rem; }
.muted { color: var(--ink-soft); }

/* :: Buttons :: */
.btn { display: inline-flex; align-items: center; gap: .5em; padding: .85em 1.4em; border-radius: 999px; font-weight: 600; font-size: .95rem; text-decoration: none; border: 1.5px solid transparent; transition: background .2s, color .2s, border-color .2s; }
.btn-primary { background: var(--accent); color: #fff; }
.btn-primary:hover { background: var(--accent-dark); }
.btn-line { border-color: var(--ink); color: var(--ink); background: none; }
.btn-line:hover { background: var(--ink); color: var(--cream); }
.btn[disabled] { opacity: .5; cursor: not-allowed; }
.arrow { display: inline-block; transition: transform .25s var(--ease); }
.btn:hover .arrow, a:hover > .arrow { transform: translateX(3px); }
.text-link { font-weight: 600; color: var(--accent); text-decoration: none; }

/* :: Nav :: */
.nav { position: sticky; top: 0; z-index: 50; background: rgba(250, 246, 239, .94); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-bottom: 1px solid transparent; transition: border-color .3s; }
.nav.solid { border-bottom-color: var(--line); }
.nav .wrap { display: flex; align-items: center; gap: 28px; height: 68px; }
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; margin-right: auto; }
.brand img { width: 40px; height: auto; }
.brand-text { font-family: var(--display); font-size: 1.15rem; }
.nav-links { display: flex; gap: 24px; list-style: none; margin: 0; padding: 0; }
.nav-links a { text-decoration: none; font-size: .93rem; color: var(--ink-soft); }
.nav-links a:hover, .nav-links a[aria-current="page"] { color: var(--ink); }
.nav-links a[aria-current="page"] { text-decoration: underline; text-underline-offset: 6px; text-decoration-thickness: 1.5px; }
.lang-toggle { display: inline-flex; gap: 2px; font-size: .8rem; font-weight: 600; }
.lang-toggle button { background: none; border: 0; padding: 4px 6px; color: var(--ink-soft); }
.lang-toggle button[aria-pressed="true"] { color: var(--ink); text-decoration: underline; text-underline-offset: 4px; }
.nav .btn { padding: .6em 1.1em; font-size: .88rem; }
.menu-btn { display: none; background: none; border: 0; width: 40px; height: 40px; margin-right: -8px; }
.menu-btn span { display: block; width: 22px; height: 1.5px; background: var(--ink); margin: 5px auto; }
.nav-links .mobile-cta { display: none; }
@media (max-width: 980px) {
  .nav-links, .nav .nav-cta { display: none; }
  .menu-btn { display: block; }
  .nav.open .nav-links { display: flex; flex-direction: column; position: fixed; inset: 80px 0 0 0; background: var(--cream); padding: 32px var(--gutter); gap: 6px; }
  .nav.open .nav-links a { font-family: var(--display); font-size: 1.9rem; color: var(--ink); }
  .nav.open .nav-links .mobile-cta { display: block; margin-top: 20px; }
  .nav.open .nav-links .mobile-cta a { font-family: var(--body); font-size: 1rem; color: #fff; }
}

/* :: Sections :: */
.section { padding: clamp(72px, 10vw, 128px) 0; }
.section.tight { padding: clamp(48px, 6vw, 80px) 0; }
.paper { background: var(--paper); }
.dark { background: var(--ink); color: var(--cream); }
.dark .label, .dark .lede, .dark .muted { color: rgba(250, 246, 239, .7); }
.split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 6vw, 88px); align-items: center; }
@media (max-width: 860px) { .split { grid-template-columns: 1fr; } }
.section-head { display: flex; justify-content: space-between; align-items: end; gap: 24px; margin-bottom: clamp(32px, 5vw, 56px); flex-wrap: wrap; }
.section-head .lede { margin-top: .8rem; }

/* :: Home hero (type first, no background photo) :: */
.hero { padding: clamp(56px, 9vw, 120px) 0 clamp(40px, 6vw, 72px); }
.hero .h1 { max-width: 13em; }
.hero-actions { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 2rem; }
.hero .h1 .line { display: block; overflow: hidden; }
.hero .h1 .line > span { display: inline-block; transform: translateY(100%); animation: rise 1s var(--ease) forwards; }
.hero .h1 .line:nth-child(2) > span { animation-delay: .1s; }
.hero .h1 .line:nth-child(3) > span { animation-delay: .2s; }
.hero .lede, .hero-actions { opacity: 0; animation: fadeup .9s .45s var(--ease) forwards; }
@keyframes rise { to { transform: none; } }
@keyframes fadeup { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }

/* image that grows to full width as you scroll */
.grow { padding: 0 0 clamp(40px, 6vw, 80px); }
.grow-frame { margin: 0 auto; width: 100%; overflow: hidden; aspect-ratio: 16 / 8; border-radius: 16px; transform-origin: 50% 0; will-change: transform; }
.grow-frame img { width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 700px) { .grow-frame { aspect-ratio: 4 / 3; } }

/* horizontal photo strips that drift sideways on scroll */
.drift { overflow: hidden; padding: 8px 0; }
.drift-row { display: flex; gap: 14px; width: max-content; will-change: transform; }
.drift-row + .drift-row { margin-top: 14px; }
.drift-row img { height: clamp(180px, 24vw, 300px); width: auto; border-radius: 10px; object-fit: cover; }

/* :: Reveal :: */
[data-reveal] { opacity: 0; transform: translateY(32px); transition: opacity .9s var(--ease), transform .9s var(--ease); }
[data-reveal].in { opacity: 1; transform: none; }
[data-reveal-delay="1"] { transition-delay: .1s; }
[data-reveal-delay="2"] { transition-delay: .2s; }
[data-reveal-delay="3"] { transition-delay: .3s; }
[data-reveal-delay="4"] { transition-delay: .4s; }
.reveal-img { overflow: hidden; }
.reveal-img img { transform: scale(1.12); transition: transform 1.4s var(--ease); }
.reveal-img.in img { transform: none; }

.frame { overflow: hidden; border-radius: 12px; background: var(--paper); }
.frame img { width: 100%; height: 100%; object-fit: cover; }
.frame.tall { aspect-ratio: 4 / 5; }
.frame.wide { aspect-ratio: 3 / 2; }
.frame.square { aspect-ratio: 1; }
.caption { font-size: .85rem; color: var(--ink-soft); margin-top: 10px; }

/* :: Crafts grid :: */
.craft-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px 20px; }
.craft-grid .frame { aspect-ratio: 4 / 5; }
.craft-grid h3 { font-size: 1.4rem; margin: 14px 0 2px; }
.craft-grid p { color: var(--ink-soft); font-size: .95rem; margin: 0; }
@media (max-width: 900px) { .craft-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .craft-grid { grid-template-columns: 1fr; } }

/* :: Simple list with checks :: */
.checklist { list-style: none; padding: 0; margin: 1.6rem 0 0; display: grid; gap: 10px; }
.checklist li { padding-left: 26px; position: relative; }
.checklist li::before { content: ''; position: absolute; left: 0; top: .62em; width: 12px; height: 1.5px; background: var(--accent); }

/* :: Inner page header (plain) :: */
.page-hero { padding: clamp(56px, 8vw, 104px) 0 clamp(32px, 5vw, 56px); }
.page-hero h1 { font-size: clamp(2.4rem, 5.6vw, 4.6rem); letter-spacing: -.03em; max-width: 14em; }
.page-hero p { max-width: 36em; color: var(--ink-soft); font-size: 1.15rem; margin: 1.2rem 0 0; }

/* :: Cards :: */
.cards-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
@media (max-width: 900px) { .cards-3 { grid-template-columns: 1fr; } }
.card { display: flex; flex-direction: column; text-decoration: none; }
.card .frame { aspect-ratio: 3 / 2; }
.card-body { padding: 16px 0 0; }
.card h3 { font-size: 1.45rem; margin-bottom: .4rem; }
.card p { color: var(--ink-soft); margin: 0 0 .8rem; }
.card .link { font-weight: 600; color: var(--accent); }
.step-num { font-size: .85rem; font-weight: 600; color: var(--accent); }

/* :: Classes :: */
.class-list { display: grid; gap: 0; border-top: 1px solid var(--line); }
.class-card { display: grid; grid-template-columns: 150px 1fr auto; gap: 24px; align-items: center; padding: 22px 0; border-bottom: 1px solid var(--line); }
.class-card .thumb { aspect-ratio: 4 / 3; border-radius: 8px; overflow: hidden; background: var(--paper); }
.class-card .thumb img { width: 100%; height: 100%; object-fit: cover; }
.class-date { font-size: .85rem; font-weight: 600; color: var(--accent); display: flex; gap: 8px; flex-wrap: wrap; }
.class-card h3 { font-size: 1.45rem; margin: 4px 0 6px; }
.class-meta { display: flex; flex-wrap: wrap; gap: 4px 16px; color: var(--ink-soft); font-size: .9rem; }
.class-desc { color: var(--ink-soft); font-size: .95rem; margin: 8px 0 0; }
.class-side { text-align: right; min-width: 130px; }
.price { font-family: var(--display); font-size: 1.6rem; line-height: 1; }
.spots { font-size: .82rem; color: var(--ink-soft); margin: 6px 0 12px; }
.spots.low, .spots.full { color: var(--accent); font-weight: 600; }
.badge { font-weight: 600; color: var(--ink); }
@media (max-width: 720px) {
  .class-card { grid-template-columns: 1fr; }
  .class-side { text-align: left; display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
  .class-side .spots { margin: 0; }
}
.empty-state { padding: 40px 0; border-bottom: 1px solid var(--line); }
.empty-state h3 { font-size: 1.6rem; margin-bottom: .4rem; }
.empty-state p { color: var(--ink-soft); max-width: 34em; }

/* :: About bits :: */
.stats { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; margin-top: 32px; padding-top: 24px; border-top: 1px solid var(--line); }
.stat b { display: block; font-family: var(--display); font-weight: 400; font-size: 2.4rem; line-height: 1; }
.stat span { font-size: .9rem; color: var(--ink-soft); }
.places { list-style: none; padding: 0; margin: 20px 0 0; display: grid; gap: 6px; }
.timeline { display: grid; gap: 22px; }
.t-item { padding-top: 16px; border-top: 1px solid var(--line); }
.yr { font-size: .8rem; font-weight: 600; color: var(--accent); }
.t-item h4 { font-size: 1.2rem; margin: 2px 0 4px; }
.t-item p { margin: 0; color: var(--ink-soft); font-size: .95rem; }

/* :: Vocabulary cards (Spanish Through Art page) :: */
.vocab-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
@media (max-width: 900px) { .vocab-grid { grid-template-columns: repeat(2, 1fr); } }
.vocab img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 10px; }
.vocab .word { font-family: var(--display); font-size: 1.4rem; margin-top: 12px; }
.vocab .say { font-size: .8rem; color: var(--accent); margin: 2px 0 6px; }
.vocab .meaning { color: var(--ink-soft); font-size: .93rem; margin: 0; }

/* :: Gallery :: */
.masonry { columns: 3 260px; column-gap: 12px; }
.masonry figure { margin: 0 0 12px; break-inside: avoid; border-radius: 8px; overflow: hidden; cursor: zoom-in; background: var(--paper); }
.masonry img { width: 100%; height: auto; }
.masonry figcaption { display: none; }
.filters { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 24px; }
.filters button { border: 1px solid var(--line); background: none; border-radius: 999px; padding: 6px 14px; font-size: .88rem; color: var(--ink); }
.filters button[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: var(--cream); }
.lightbox { position: fixed; inset: 0; z-index: 100; background: rgba(20, 14, 10, .95); display: none; align-items: center; justify-content: center; padding: 40px 16px; }
.lightbox.open { display: flex; }
.lightbox img { max-height: 84vh; max-width: min(1200px, 100%); object-fit: contain; }
.lightbox p { position: absolute; bottom: 16px; left: 0; right: 0; text-align: center; color: rgba(255,255,255,.75); font-size: .9rem; margin: 0; }
.lightbox button { position: absolute; background: none; border: 0; color: #fff; width: 48px; height: 48px; font-size: 1.6rem; }
.lb-close { top: 12px; right: 12px; }
.lb-prev { left: 8px; top: 50%; transform: translateY(-50%); }
.lb-next { right: 8px; top: 50%; transform: translateY(-50%); }

/* :: Forms and modal :: */
.form { display: grid; gap: 14px; }
.form .row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 600px) { .form .row { grid-template-columns: 1fr; } }
.field label { display: block; font-size: .85rem; font-weight: 600; margin-bottom: 5px; }
.field input, .field select, .field textarea { width: 100%; padding: 12px 14px; border-radius: 8px; border: 1px solid var(--line); background: #fff; font: inherit; font-size: 1rem; color: var(--ink); }
.field textarea { min-height: 120px; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus { outline: 2px solid var(--accent); outline-offset: -1px; border-color: transparent; }
.check { display: flex; gap: 10px; align-items: flex-start; font-size: .9rem; color: var(--ink-soft); }
.check input { width: 18px; height: 18px; margin-top: 3px; accent-color: var(--accent); flex: none; }
.hp { position: absolute; left: -9999px; }
.form-note { font-size: .85rem; color: var(--ink-soft); margin: 0; }
.form-msg { padding: 12px 14px; border-radius: 8px; font-size: .95rem; display: none; }
.form-msg.show { display: block; }
.form-msg.ok { background: #e9efe9; color: #24452c; }
.form-msg.err { background: #f8e6df; color: #8a2d14; }
.fieldset-title { font-family: var(--display); font-size: 1.15rem; margin: 8px 0 0; padding-top: 12px; border-top: 1px solid var(--line); }
.waiver-box { max-height: 240px; overflow-y: auto; background: #fff; border: 1px solid var(--line); border-radius: 8px; padding: 12px 14px; font-size: .85rem; color: var(--ink-soft); }
.waiver-box p { margin: 0 0 8px; }
.waiver-box .waiver-ver { font-size: .78rem; color: var(--ink-soft); margin-bottom: 10px; }
.waiver-box a { color: inherit; text-decoration: underline; }
.modal { position: fixed; inset: 0; z-index: 90; display: none; background: rgba(20, 14, 10, .5); overflow-y: auto; padding: 32px 16px; }
.modal.open { display: block; }
.modal-card { background: var(--cream); max-width: 640px; margin: 0 auto; border-radius: 14px; overflow: hidden; }
.modal-head { position: relative; padding: 26px 28px 18px; border-bottom: 1px solid var(--line); }
.modal-head img { display: none; }
.modal-head h3 { font-size: 1.7rem; margin-top: 4px; padding-right: 40px; }
.modal-head p { margin: 6px 0 0; color: var(--ink-soft); font-size: .92rem; }
.modal-body { padding: 22px 28px 28px; }
.modal-close { position: absolute; right: 12px; top: 12px; width: 40px; height: 40px; border: 0; background: none; font-size: 1.5rem; color: var(--ink); }
@media (max-width: 600px) { .modal-head, .modal-body { padding-left: 18px; padding-right: 18px; } }

.cta { text-align: center; }
.cta .h2 { max-width: 16em; margin: 0 auto; }
.cta .lede { margin: 1rem auto 2rem; }
.cta-actions { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }

/* :: Footer :: */
.footer { border-top: 1px solid var(--line); padding: 56px 0 32px; font-size: .93rem; color: var(--ink-soft); }
.footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 32px; }
@media (max-width: 760px) { .footer-grid { grid-template-columns: 1fr; } }
.footer .brand-text { color: var(--ink); font-size: 1.3rem; }
.footer h4 { font-family: var(--body); font-size: .8rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--ink); margin-bottom: 12px; }
.footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.footer a { text-decoration: none; }
.footer a:hover { color: var(--ink); }
.footer-bottom { margin-top: 40px; padding-top: 20px; border-top: 1px solid var(--line); display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; font-size: .82rem; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  [data-reveal], .hero .lede, .hero-actions { opacity: 1 !important; transform: none !important; }
  .hero .h1 .line > span, .reveal-img img { transform: none !important; }
}

/* :: Stacked craft panels: each one pins, the next slides up over it :: */
.stack { position: relative; }
.panel { position: sticky; top: 68px; height: calc(100svh - 68px); min-height: 520px; background: var(--bg); color: var(--fg); display: flex; align-items: center; overflow: hidden; }
.panel-inner { display: grid; grid-template-columns: 1.15fr 1fr; gap: clamp(28px, 6vw, 88px); align-items: center; transform: scale(calc(1 - var(--cover, 0) * .06)); opacity: calc(1 - var(--cover, 0) * .5); transform-origin: 50% 30%; }
.panel-img { aspect-ratio: 5 / 4; max-height: 68svh; border-radius: 12px; }
.panel .step-num { color: inherit; opacity: .55; }
.panel h2 { font-size: clamp(2.4rem, 5vw, 4.2rem); margin: 8px 0 4px; }
.panel-sub { font-size: .85rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; opacity: .6; margin-bottom: 1.2rem; }
.panel-text p:last-child { font-size: 1.1rem; opacity: .85; max-width: 30em; }
@media (max-width: 800px) {
  .panel-inner { grid-template-columns: 1fr; gap: 20px; }
  .panel-img { aspect-ratio: 4 / 3; max-height: 42svh; }
  .panel h2 { font-size: 2.2rem; }
  .panel-text p:last-child { font-size: 1rem; }
}

/* :: Hero: text beside photo :: */
.hero-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 5vw, 72px); align-items: center; }
.hero-grid .h1 { font-size: clamp(2.6rem, 5.2vw, 4.6rem); }
.hero-img { aspect-ratio: 4 / 5; max-height: 74svh; border-radius: 14px; overflow: hidden; clip-path: inset(100% 0 0 0 round 14px); animation: unveil 1.2s .2s var(--ease) forwards; }
.hero-img img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.15); animation: settle 1.8s .2s var(--ease) forwards; }
@keyframes unveil { to { clip-path: inset(0 0 0 0 round 14px); } }
@keyframes settle { to { transform: scale(1); } }
@media (max-width: 860px) { .hero-grid { grid-template-columns: 1fr; } .hero-img { aspect-ratio: 4 / 3; } }
@media (prefers-reduced-motion: reduce) { .hero-img { clip-path: none; } .hero-img img { transform: none; } }

/* :: Plain type pass: one classic face, normal sizes, no decorative tells :: */
:root { --display: 'Libre Franklin', 'Helvetica Neue', Arial, sans-serif; --body: 'Libre Franklin', 'Helvetica Neue', Arial, sans-serif; --accent: #1d5a6b; --accent-dark: #154350; }
body { font-size: 17px; line-height: 1.65; }
h1, h2, h3, h4 { font-weight: 600; letter-spacing: -.01em; line-height: 1.15; }
.h1, .hero-grid .h1 { font-size: clamp(2.2rem, 4.2vw, 3.5rem); letter-spacing: -.015em; line-height: 1.1; }
.h2 { font-size: clamp(1.7rem, 3vw, 2.4rem); }
.page-hero h1 { font-size: clamp(2.1rem, 4.4vw, 3.4rem); letter-spacing: -.015em; }
.panel h2 { font-size: clamp(2rem, 3.6vw, 3rem); }
h1 em, h2 em, .page-hero h1 em { color: inherit; font-style: normal; }
.hero .h1 .line > span { transform: none; animation: none; }
.hero .lede, .hero-actions { animation: none; opacity: 1; }
.label, .panel-sub { text-transform: none; letter-spacing: 0; font-size: .95rem; font-weight: 500; }
.step-num, .arrow { display: none; }
.btn { border-radius: 6px; padding: .8em 1.3em; }
.btn-primary { background: var(--ink); }
.btn-primary:hover { background: var(--accent); }
.text-link { color: var(--accent); text-decoration: underline; text-underline-offset: 4px; font-weight: 500; }
.nav .wrap { height: 80px; }
.brand img { width: auto; height: 60px; }
.panel { top: 80px; height: calc(100svh - 80px); }
.nav-links a { font-size: .95rem; }
.lang-toggle button[aria-pressed="true"] { text-decoration: none; font-weight: 600; color: var(--ink); }
.price, .stat b, .vocab .word, .fieldset-title, .footer .brand-text { font-weight: 600; }

/* :: Hero spacing + carousel :: */
.hero { padding: clamp(20px, 3vw, 40px) 0 clamp(40px, 6vw, 72px); }
.hero-grid { align-items: center; }
.hero-img { position: relative; max-height: calc(100svh - 140px); }
.hero-img img { position: absolute; inset: 0; opacity: 0; transition: opacity 1.4s ease; }
.hero-img img.on { opacity: 1; animation: settle 1.8s .2s var(--ease) forwards, drift 9s 2s ease-in-out infinite alternate; }
@keyframes drift { from { transform: scale(1); } to { transform: scale(1.06); } }

/* :: Phone :: */
.mobile-bar { display: none; }
@media (max-width: 720px) {
  body { font-size: 16px; }
  .section { padding: 56px 0; }
  .section.tight { padding: 40px 0; }
  .nav .wrap { height: 68px; }
  .brand img { height: 50px; }
  .nav.open .nav-links { inset: 68px 0 0 0; }
  .hero { padding: 12px 0 40px; }
  .hero-grid { gap: 24px; }
  .hero-actions { flex-direction: column; }
  .hero-actions .btn { justify-content: center; width: 100%; }
  .hero-img { aspect-ratio: 4 / 5; max-height: 62svh; }

  /* craft panels: card-sized, still pin and stack */
  .panel { top: 68px; height: auto; min-height: 0; padding: 28px 0 36px; border-radius: 18px 18px 0 0; }
  .panel-inner { gap: 16px; transform: none; opacity: 1; }
  .panel-img { aspect-ratio: 4 / 3; max-height: none; }
  .panel h2 { font-size: 1.9rem; margin-top: 0; }
  .panel-sub { margin-bottom: .5rem; }

  /* classes: small thumbnail beside the details */
  .class-card { grid-template-columns: 84px 1fr; gap: 14px; align-items: start; padding: 18px 0; }
  .class-card .thumb { aspect-ratio: 1; }
  .class-card h3 { font-size: 1.15rem; }
  .class-desc { display: none; }
  .class-side { grid-column: 1 / -1; justify-content: space-between; }

  /* festival photos: swipe sideways instead of a long stack */
  .swipe-sm { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: 12px; margin-right: calc(-1 * var(--gutter)); padding-right: var(--gutter); scrollbar-width: none; }
  .swipe-sm::-webkit-scrollbar { display: none; }
  .swipe-sm > * { flex: 0 0 82%; scroll-snap-align: start; }

  .drift-row img { height: 150px; }
  .section-head { margin-bottom: 24px; }

  /* sticky booking bar */
  .mobile-bar { display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 60; padding: 10px 16px calc(10px + env(safe-area-inset-bottom)); background: rgba(250, 246, 239, .96); border-top: 1px solid var(--line); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
  .mobile-bar .btn { flex: 1; justify-content: center; }
  body.has-bar { padding-bottom: 72px; }
}

/* :: Wider layout, brown ink, headline face, full-bleed hero :: */
:root { --wrap: 1640px; --gutter: clamp(20px, 4vw, 72px); --ink: #2e1c13; --ink-soft: #6b5546; --brown: #5c3520; --brown-dark: #3f2416; --display: 'Gloock', Georgia, serif; }
h1, h2, h3, .h1, .h2, .page-hero h1, .panel h2 { font-family: var(--display); font-weight: 400; letter-spacing: -.005em; }
.h1, .hero-grid .h1 { font-size: clamp(2.6rem, 5vw, 4.8rem); line-height: 1.05; }
.h2 { font-size: clamp(1.9rem, 3.4vw, 2.9rem); }
.class-card h3, .card h3, .t-item h4 { font-family: var(--body); font-weight: 600; }
.btn-primary { background: var(--brown); }
.btn-primary:hover { background: var(--brown-dark); }
.btn-line { border-color: var(--brown); color: var(--brown); }
.btn-line:hover { background: var(--brown); color: var(--cream); }
.dark { background: var(--brown-dark); }

@media (min-width: 861px) {
  .hero { padding: 0; }
  .hero > .wrap.hero-grid { max-width: none; padding-right: 0; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: clamp(32px, 5vw, 96px); }
  .hero-grid > div:first-child { padding: 40px 0; max-width: 680px; justify-self: end; width: 100%; }
  .hero-img { height: calc(100svh - 80px); max-height: none; aspect-ratio: auto; border-radius: 0; clip-path: inset(0 0 0 100%); animation: unveil 1.2s .1s var(--ease) forwards; }
  @keyframes unveil { to { clip-path: inset(0 0 0 0); } }
}
.hero-img img { position: absolute; inset: 0; opacity: 1; transition: none; clip-path: inset(0 0 0 100%); z-index: 0; transform: none; animation: none; }
.hero-img img.under { clip-path: inset(0 0 0 0); z-index: 1; }
.hero-img img.on { clip-path: inset(0 0 0 0); z-index: 2; animation: wipe 1.1s var(--ease), zoom 6s ease-out forwards; }
@keyframes wipe { from { clip-path: inset(0 0 0 100%); } to { clip-path: inset(0 0 0 0); } }
@keyframes zoom { from { transform: scale(1.08); } to { transform: scale(1); } }
@media (min-width: 861px) {
  .hero > .wrap.hero-grid { padding-left: max(var(--gutter), calc((100vw - var(--wrap)) / 2 + var(--gutter))); }
  .hero-grid > div:first-child { justify-self: start; }
}
/* carousel: new photo fades in over a fully opaque previous photo */
.hero-img img { clip-path: none; opacity: 0; }
.hero-img img.under { opacity: 1; clip-path: none; z-index: 1; }
.hero-img img.on { opacity: 1; clip-path: none; z-index: 2; animation: fadein .9s ease, zoom 6s ease-out forwards; }
@keyframes fadein { from { opacity: 0; } to { opacity: 1; } }
/* hero: smaller brown headline, photos shown without zoom and with less cropping */
.hero-grid .h1, .hero .h1 { font-size: clamp(2.1rem, 3.6vw, 3.4rem); color: var(--brown); line-height: 1.08; }
.hero-img img.on { animation: fadein .9s ease; }
.hero-img img { transform: none !important; object-position: center; }
@media (min-width: 861px) {
  .hero { padding: 32px 0 48px; }
  .hero > .wrap.hero-grid { padding-right: var(--gutter); grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .hero-img { height: auto; aspect-ratio: 4 / 3; max-height: calc(100svh - 160px); border-radius: 12px; }
}

/* :: Headlines: brown, a size smaller, everywhere :: */
h1, h2, .h1, .h2, .page-hero h1 { color: var(--brown); }
.dark h2, .panel h2 { color: inherit; }
.h2 { font-size: clamp(1.7rem, 2.8vw, 2.4rem); }
.page-hero h1 { font-size: clamp(2rem, 3.6vw, 3.2rem); }
.panel h2 { font-size: clamp(1.9rem, 3.2vw, 2.7rem); }

/* :: About: pinned photo story :: */
.story { padding: clamp(40px, 6vw, 80px) 0; }
.story-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 6vw, 96px); }
.story-media { position: sticky; top: 110px; height: calc(100svh - 160px); border-radius: 12px; overflow: hidden; }
.story-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transform: scale(1.04); transition: opacity .8s ease, transform 1.4s var(--ease); }
.story-media img.on { opacity: 1; transform: none; }
.story-step { min-height: 72svh; display: flex; flex-direction: column; justify-content: center; opacity: .25; transform: translateY(16px); transition: opacity .6s ease, transform .6s var(--ease); }
.story-step.on { opacity: 1; transform: none; }
.story-inline { display: none; }

/* :: Timeline that draws as you scroll :: */
.tl-head { position: sticky; top: 120px; }
.timeline { position: relative; padding-left: 28px; gap: 28px; }
.timeline::before, .timeline::after { content: ''; position: absolute; left: 0; top: 6px; bottom: 6px; width: 2px; }
.timeline::before { background: var(--line); }
.timeline::after { background: var(--brown); transform-origin: top; transform: scaleY(var(--p, 0)); }
.t-item { border-top: 0; padding-top: 0; position: relative; }
.t-item::before { content: ''; position: absolute; left: -33px; top: 5px; width: 12px; height: 12px; border-radius: 50%; background: var(--cream); border: 2px solid var(--brown); }

@media (max-width: 860px) {
  .story-grid { grid-template-columns: 1fr; }
  .story-media { display: none; }
  .story-step { min-height: 0; opacity: 1; transform: none; padding: 20px 0 36px; }
  .story-inline { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 10px; margin-bottom: 20px; }
  .tl-head { position: static; }
}

/* :: Scroll zoom hero (desktop) :: */
.hero-slot { display: none; }
@media (min-width: 861px) {
  .hero-zoom { height: 300svh; padding: 0; position: relative; }
  .hz-sticky { position: sticky; top: 80px; height: calc(100svh - 80px); overflow: hidden; }
  .hz-sticky .hero-grid { position: relative; z-index: 1; height: 100%; align-items: center; }
  .hero-slot { display: block; height: min(100% - 80px, 70svh); align-self: center; }
  .hz-sticky > .hero-img { position: absolute; inset: 0; z-index: 0; height: auto; max-height: none; aspect-ratio: auto; border-radius: 0; animation: none; clip-path: inset(10% 4% 10% 52% round 12px); will-change: clip-path; }
  .hero-zoom .hero-grid > div:first-child { will-change: opacity, transform; }
  .stack.after-zoom { margin-top: -100svh; z-index: 2; }
}
@media (max-width: 860px) {
  .hz-sticky > .hero-img { margin: 0 var(--gutter); }
  .hz-sticky { display: flex; flex-direction: column-reverse; gap: 24px; }
}

/* :: Every homepage block after the hero pins, the next slides up over it :: */
.stack > * { position: sticky; top: 80px; background: var(--cream); }
.stack > .paper { background: var(--paper); }
.stack > .dark { background: var(--brown-dark); }
.stack > .panel { background: var(--bg); }
.stack > *:not(:first-child) { box-shadow: 0 -18px 40px -24px rgba(46, 28, 19, .35); }
.stack > section { min-height: calc(100svh - 80px); display: flex; flex-direction: column; justify-content: center; }
.stack > section > * { width: 100%; }
@media (max-width: 720px) { .stack > * { top: 68px; } .stack > section { min-height: calc(100svh - 68px); } }

/* :: Footer: Instagram + big brown brand band :: */
.footer { padding-bottom: 0; }
.ig-btn { display: inline-flex; align-items: center; gap: 10px; border: 1px solid var(--line); border-radius: 999px; padding: 8px 14px 8px 10px; color: var(--ink); }
.ig-btn:hover { border-color: var(--brown); color: var(--brown); }
.ig-icon { display: inline-flex; color: var(--ink-soft); margin-right: auto; margin-left: 12px; }
.ig-icon:hover { color: var(--brown); }
.footer-bottom { align-items: center; }
.footer-brand { margin-top: 48px; background: var(--brown-dark); color: var(--cream); overflow: hidden; display: flex; flex-direction: column; align-items: center; padding-top: 48px; }
.footer-brand img { width: 160px; height: auto; background: var(--cream); border-radius: 50%; padding: 22px 16px; aspect-ratio: 1; object-fit: contain; }
.footer-word { font-family: var(--display); font-size: clamp(4rem, 16vw, 15rem); line-height: .8; white-space: nowrap; letter-spacing: -.03em; color: var(--cream); margin-top: 24px; transform: translateY(14%); }
.footer-word { font-size: 12.4vw; text-align: center; width: 100%; }
@media (max-width: 1180px) and (min-width: 981px) { .nav-links { gap: 16px; } .nav-links a { font-size: .9rem; } .nav .wrap { gap: 18px; } }
.dark .btn-primary { background: var(--cream); color: var(--brown-dark); }
.dark .btn-primary:hover { background: #fff; }

/* :: Press :: */
.pull { font-family: var(--display); font-size: clamp(1.5rem, 2.4vw, 2.1rem); line-height: 1.25; color: var(--brown); margin: 0 0 16px; }
.press { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.press li { border-bottom: 1px solid var(--line); }
.press a { display: block; padding: 18px 0; text-decoration: none; transition: padding .3s var(--ease); }
.press a:hover { padding-left: 8px; }
.press-src { display: block; font-size: .82rem; color: var(--ink-soft); margin-bottom: 4px; }
.press-title { font-weight: 600; color: var(--ink); }
.press a:hover .press-title { color: var(--brown); text-decoration: underline; text-underline-offset: 3px; }

/* :: Footer band: embossed-metal shine (a nod to repujado) :: */
.footer-brand { position: relative; isolation: isolate; background:
  radial-gradient(120% 80% at 50% 0%, #6a3f26 0%, var(--brown-dark) 55%, #2a170e 100%); }
.footer-brand::before { content: ''; position: absolute; inset: 0; z-index: -1; opacity: .18;
  background-image: radial-gradient(circle at 50% 50%, rgba(255, 220, 170, .9) 0 1.2px, transparent 1.6px);
  background-size: 14px 14px; -webkit-mask-image: linear-gradient(180deg, #000, transparent 85%); mask-image: linear-gradient(180deg, #000, transparent 85%); }
.footer-brand img { box-shadow: 0 0 0 6px rgba(232, 184, 120, .18), 0 18px 50px -10px rgba(0, 0, 0, .6), 0 0 60px rgba(240, 170, 90, .25); }
.footer-word {
  background: linear-gradient(100deg, #b87333 0%, #e9b77a 18%, #fff3dc 26%, #e9b77a 34%, #b87333 50%, #8a5226 70%, #d39a5c 85%, #b87333 100%);
  background-size: 250% 100%; -webkit-background-clip: text; background-clip: text; color: transparent;
  animation: sheen 7s ease-in-out infinite; filter: drop-shadow(0 2px 0 rgba(0,0,0,.35));
}
@keyframes sheen { 0% { background-position: 100% 0; } 55%, 100% { background-position: 0% 0; } }
@media (prefers-reduced-motion: reduce) { .footer-word { animation: none; background-position: 40% 0; } }
.footer-grid { grid-template-columns: 1.3fr 1fr 1fr .8fr; }
@media (max-width: 860px) { .footer-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .footer-grid { grid-template-columns: 1fr; } }
.legal { max-width: 760px; }
.legal h2 { font-size: 1.5rem; margin: 2rem 0 .6rem; }
.legal p, .legal li { color: var(--ink-soft); }
.legal ul { padding-left: 20px; }
.legal [id] { scroll-margin-top: 96px; }
.legal code { font-size: .9em; }
.legal .toc { margin: 1.6rem 0 2.4rem; padding: 18px 22px; border: 1px solid var(--line); border-radius: 12px; }
.legal .toc-title { margin: 0 0 .5rem; font-weight: 600; color: var(--ink); }
.legal .toc ol { margin: 0; padding-left: 22px; columns: 2; column-gap: 32px; }
.legal .toc li { break-inside: avoid; margin: 0 0 4px; }
.legal .toc a { color: var(--ink); text-decoration: none; }
.legal .toc a:hover { color: var(--brown); text-decoration: underline; }
@media (max-width: 640px) { .legal .toc ol { columns: 1; } }
.recent { list-style: none; padding: 0; margin: 0; border-top: 1px solid var(--line); }
.recent li { border-bottom: 1px solid var(--line); padding: 14px 0; display: grid; grid-template-columns: 120px 1fr; gap: 16px; }
.recent .when { font-size: .85rem; color: var(--ink-soft); }
.recent a { color: var(--ink); font-weight: 600; text-decoration: none; }
.recent a:hover { color: var(--brown); text-decoration: underline; }
.recent .where { display: block; font-size: .88rem; color: var(--ink-soft); font-weight: 400; }
@media (max-width: 520px) { .recent li { grid-template-columns: 1fr; gap: 2px; } }
html[lang="es"] .only-en, html[lang="en"] .only-es { display: none; }

/* :: Institutions wall :: */
.inst-sec { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.inst { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 14px 40px; }
.inst li { font-family: var(--display); font-size: clamp(1.15rem, 1.8vw, 1.6rem); color: var(--brown); line-height: 1.2; }

/* :: Portfolio :: */
.portfolio { display: grid; grid-template-columns: repeat(3, 1fr); gap: 36px 24px; }
.port .frame { aspect-ratio: 4 / 3; }
.port h3 { font-family: var(--body); font-weight: 600; font-size: 1.15rem; color: var(--ink); margin: 14px 0 4px; }
.port p { color: var(--ink-soft); margin: 0; font-size: .95rem; }
.port p span { display: block; font-size: .85rem; color: var(--brown); margin-top: 2px; }
@media (max-width: 900px) { .portfolio { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .portfolio { grid-template-columns: 1fr; } }
.type-tile { display: grid; place-items: center; background: radial-gradient(120% 90% at 30% 20%, #6a3f26, var(--brown-dark)); color: #f1d3ad; text-align: center; padding: 24px; }
.type-tile span { font-family: var(--display); font-size: clamp(1.5rem, 2.4vw, 2.1rem); line-height: 1.15; }

/* :: Work page :: */
.work-grid { display: grid; grid-template-columns: 1fr 2fr; gap: clamp(24px, 5vw, 80px); align-items: start; }
.work-grid > .h2 { position: sticky; top: 110px; }
.work-host { font-family: var(--body); font-weight: 600; font-size: .95rem; color: var(--brown); margin: 28px 0 8px; }
.work-host:first-child { margin-top: 0; }
.recent strong { color: var(--ink); font-weight: 600; }
.mosaic { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.mosaic img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 10px; }
.mosaic img:nth-child(1) { grid-row: span 2; aspect-ratio: auto; height: 100%; }
@media (max-width: 860px) { .work-grid { grid-template-columns: 1fr; } .work-grid > .h2 { position: static; } }
.mosaic img:nth-child(4) { grid-column: span 2; aspect-ratio: 2 / 1; }

/* :: Logo wall :: */
.inst { gap: 28px 56px; align-items: center; }
.inst li { font-family: var(--body); }
.inst img { height: 52px; width: auto; max-width: 220px; object-fit: contain; filter: grayscale(1) contrast(1.1); opacity: .62; mix-blend-mode: multiply; transition: filter .35s, opacity .35s, transform .35s var(--ease); }
.inst li:hover img { filter: none; opacity: 1; transform: translateY(-2px); }
.inst .txt { font-size: .82rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; line-height: 1.3; color: #6d6d6d; }
@media (max-width: 720px) { .inst { gap: 22px 32px; } .inst img { height: 38px; } }

/* :: Footer band: smooth gloss (no dots), power-up on hover :: */
.footer-brand::before { background-image: none; opacity: 1; -webkit-mask-image: none; mask-image: none;
  background: linear-gradient(115deg, transparent 30%, rgba(255, 214, 160, .10) 45%, rgba(255, 240, 215, .22) 50%, rgba(255, 214, 160, .10) 55%, transparent 70%);
  background-size: 300% 100%; background-position: 120% 0; transition: background-position 1.2s var(--ease), opacity .6s; }
.footer-brand::after { content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: 0; transition: opacity .6s;
  background: radial-gradient(70% 90% at 50% 100%, rgba(240, 170, 90, .35), transparent 70%); }
.footer-brand:hover::before { background-position: -20% 0; }
.footer-brand:hover::after { opacity: 1; }
.footer-brand img { transition: box-shadow .6s, transform .6s var(--ease); }
.footer-brand:hover img { transform: scale(1.04); box-shadow: 0 0 0 6px rgba(240, 190, 120, .35), 0 18px 50px -10px rgba(0,0,0,.6), 0 0 90px rgba(255, 190, 110, .55); }
.footer-word { transition: filter .6s; }
.footer-brand:hover .footer-word { animation-duration: 1.6s; filter: drop-shadow(0 2px 0 rgba(0,0,0,.35)) drop-shadow(0 0 22px rgba(255, 200, 130, .45)) brightness(1.15); }

/* :: Programs: image-led cards :: */
.big-cards .frame { aspect-ratio: 4 / 5; }
.big-cards h3 { font-size: 1.6rem; margin-top: 6px; }
.big-cards .card-body { padding-top: 14px; }

/* :: Page transitions :: */
@view-transition { navigation: auto; }
::view-transition-old(root) { animation: vt-out .35s cubic-bezier(.4, 0, 1, 1) both; }
::view-transition-new(root) { animation: vt-in .55s var(--ease) both; }
@keyframes vt-out { to { opacity: 0; transform: translateY(-16px); } }
@keyframes vt-in { from { opacity: 0; transform: translateY(24px); } }
.nav { view-transition-name: site-nav; }
::view-transition-group(site-nav) { animation: none; }
main { animation: page-in .7s var(--ease) both; }
@keyframes page-in { from { opacity: 0; transform: translateY(18px); } }
@media (prefers-reduced-motion: reduce) { @view-transition { navigation: none; } main { animation: none; } }
.port-4 { grid-template-columns: repeat(2, 1fr); }
.port-4 .frame { aspect-ratio: 3 / 2; }
@media (max-width: 560px) { .port-4 { grid-template-columns: 1fr; } }

/* :: Horizontal timeline (pins, scrolls sideways, then releases) :: */
.htl { position: relative; }
.htl-sticky { position: sticky; top: 80px; height: calc(100svh - 80px); display: flex; flex-direction: column; justify-content: center; overflow: hidden; }
.htl-head { display: flex; justify-content: space-between; align-items: end; gap: 24px; margin-bottom: 48px; }
.htl-track { list-style: none; margin: 0; padding: 0 var(--gutter); display: flex; gap: 0; width: max-content; position: relative; will-change: transform; }
.htl-track::before { content: ''; position: absolute; left: 0; right: 0; top: 7px; height: 2px; background: var(--line); }
.tl-card { position: relative; width: 300px; padding: 34px 32px 0 0; flex: none; }
.tl-dot { position: absolute; left: 0; top: 0; width: 16px; height: 16px; border-radius: 50%; background: var(--cream); border: 2px solid var(--brown); transition: background .3s; }
.tl-card:hover .tl-dot { background: var(--brown); }
.tl-card .when { display: block; font-size: .85rem; font-weight: 600; color: var(--brown); margin-bottom: 8px; }
.tl-card a { text-decoration: none; display: block; }
.tl-card strong { display: block; font-size: 1.15rem; line-height: 1.3; color: var(--ink); font-weight: 600; }
.tl-card a:hover strong { color: var(--brown); text-decoration: underline; text-underline-offset: 3px; }
.tl-card .where { display: block; margin-top: 6px; font-size: .92rem; color: var(--ink-soft); }
@media (max-width: 860px) {
  .htl { height: auto !important; padding: 56px 0; }
  .htl-sticky { position: static; height: auto; }
  .htl-head { flex-direction: column; align-items: start; margin-bottom: 24px; }
  .htl-viewport { overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
  .htl-track { transform: none !important; }
  .tl-card { width: 78vw; scroll-snap-align: start; }
}
.htl.dark { background: var(--brown-dark); }
.htl .split { margin-bottom: 32px; }
.htl-track.photos { gap: 16px; }
.htl-track.photos::before { display: none; }
.hp-card { flex: none; height: min(46svh, 440px); }
.hp-card img { height: 100%; width: auto; border-radius: 12px; display: block; }
@media (max-width: 860px) { .hp-card { height: 240px; scroll-snap-align: start; } }
/* cursor spotlight replaces the whole-band hover */
.footer-brand::before { display: none; }
.footer-brand::after { background: radial-gradient(260px circle at var(--mx, 50%) var(--my, 50%), rgba(255, 196, 120, .32), transparent 70%); }
.footer-brand:hover img { transform: none; box-shadow: 0 0 0 6px rgba(232, 184, 120, .18), 0 18px 50px -10px rgba(0, 0, 0, .6), 0 0 60px rgba(240, 170, 90, .25); }
.footer-brand:hover .footer-word { animation-duration: 7s; filter: drop-shadow(0 2px 0 rgba(0,0,0,.35)); }
.footer-word {
  background:
    radial-gradient(220px circle at var(--wx, -999px) var(--wy, -999px), rgba(255, 252, 240, 1), rgba(255, 228, 180, .85) 35%, transparent 70%),
    linear-gradient(100deg, #b87333 0%, #e9b77a 18%, #fff3dc 26%, #e9b77a 34%, #b87333 50%, #8a5226 70%, #d39a5c 85%, #b87333 100%);
  background-size: 100% 100%, 250% 100%; background-repeat: no-repeat;
  -webkit-background-clip: text; background-clip: text;
}
@keyframes sheen { 0% { background-position: 0 0, 100% 0; } 55%, 100% { background-position: 0 0, 0% 0; } }
@media (min-width: 861px) {
  .hz-sticky > .hero-img { inset: auto; clip-path: none; overflow: hidden; }
}

/* :: Orange buttons :: */
:root { --orange: #e2701f; --orange-dark: #c25a12; }
.btn-primary, .dark .btn-primary { background: var(--orange); color: #fff; }
.btn-primary:hover, .dark .btn-primary:hover { background: var(--orange-dark); color: #fff; }
.btn-line { border-color: var(--orange); color: var(--orange-dark); }
.btn-line:hover { background: var(--orange); color: #fff; border-color: var(--orange); }
.text-link { color: var(--orange-dark); }

/* :: Splash landing :: */
.splash-page main { animation: none; }
.splash { position: relative; min-height: 100svh; overflow: hidden; color: #fff; display: flex; align-items: flex-end; padding: 32px var(--gutter) 40px; isolation: isolate; background: var(--brown-dark); }
.splash-slides { position: absolute; inset: 0; z-index: -2; }
.splash-slides img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; }
.splash-slides img.under { opacity: 1; z-index: 1; }
.splash-slides img.on { opacity: 1; z-index: 2; animation: fadein 1.2s ease, kb 9s ease-out forwards; }
@keyframes kb { from { transform: scale(1.08); } to { transform: scale(1); } }
.splash::before { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(0deg, rgba(30,16,8,.75) 0%, rgba(30,16,8,.15) 55%, rgba(30,16,8,.35) 100%); }
.splash-top { position: absolute; top: 24px; left: var(--gutter); right: var(--gutter); display: flex; justify-content: space-between; align-items: center; }
.splash-logo { width: 120px; background: rgba(250,246,239,.95); border-radius: 16px; padding: 10px 12px; }
.splash-lang { color: #fff; }
.splash-lang button { color: #fff; }
.splash-lang button[aria-pressed="true"] span { color: #fff; text-decoration: underline; text-underline-offset: 4px; }
.splash-card { width: min(520px, 100%); background: rgba(250, 246, 239, .96); color: var(--ink); border-radius: 18px; padding: 28px; box-shadow: 0 30px 80px -30px rgba(0,0,0,.6); animation: page-in .9s .2s var(--ease) both; }
.splash-card h1 { font-size: clamp(1.7rem, 3vw, 2.3rem); margin-bottom: 6px; }
.splash-card p { color: var(--ink-soft); margin-bottom: 18px; }
.splash-card .btn { width: 100%; justify-content: center; }
.splash-enter { position: absolute; right: var(--gutter); bottom: 40px; display: inline-flex; align-items: center; gap: 10px; color: #fff; text-decoration: none; font-weight: 600; font-size: 1.05rem; padding: 14px 20px; border-radius: 999px; background: rgba(0,0,0,.25); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); border: 1px solid rgba(255,255,255,.35); transition: background .3s, transform .3s var(--ease); }
.splash-enter:hover { background: var(--orange); border-color: var(--orange); transform: translateX(4px); }
.splash-enter svg { transition: transform .3s var(--ease); }
.splash-enter:hover svg { transform: translateX(4px); }
@media (max-width: 720px) {
  .splash { flex-direction: column; justify-content: flex-end; gap: 16px; padding-bottom: 24px; }
  .splash-card { padding: 20px; }
  .splash-enter { position: static; align-self: flex-end; }
  .splash-logo { width: 92px; }
}
/* splash refinements */
.splash-logo { background: none; padding: 0; border-radius: 0; width: 150px; filter: drop-shadow(0 2px 10px rgba(0,0,0,.45)); }
.splash { align-items: flex-end; padding-bottom: 120px; }
.splash-card { width: min(380px, 100%); padding: 20px 22px; border-radius: 14px; }
.splash-card h1 { font-size: 1.45rem; line-height: 1.15; }
.splash-card p { font-size: .92rem; margin-bottom: 12px; }
.splash-card .form { gap: 10px; }
.splash-card .field label { font-size: .78rem; margin-bottom: 3px; }
.splash-card .field input, .splash-card .field select { padding: 9px 11px; font-size: .92rem; }
.splash-card .btn { padding: .7em 1em; font-size: .9rem; }
.splash-enter { bottom: 120px; padding: 9px 15px; font-size: .9rem; gap: 8px; }
.splash-enter svg { width: 18px; height: 18px; }
.splash-logos { position: absolute; left: 0; right: 0; bottom: 0; padding: 18px var(--gutter); display: flex; align-items: center; gap: 28px; background: linear-gradient(0deg, rgba(20,10,5,.55), transparent); }
.splash-logos > span { color: rgba(255,255,255,.75); font-size: .78rem; white-space: nowrap; }
.splash-logos ul { list-style: none; margin: 0; padding: 0; display: flex; align-items: center; gap: 34px; flex-wrap: wrap; }
.splash-logos img { height: 30px; width: auto; opacity: .85; transition: opacity .3s; }
.splash-logos li:hover img { opacity: 1; }
.splash-logos .txt { color: #fff; opacity: .85; font-size: .66rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; line-height: 1.25; }
@media (max-width: 720px) {
  .splash { padding-bottom: 24px; }
  .splash-logos { position: static; background: none; padding: 8px 0 0; flex-direction: column; align-items: flex-start; gap: 10px; }
  .splash-logos ul { gap: 18px; }
  .splash-logos img { height: 22px; }
}
.splash-logo { filter: drop-shadow(0 0 1px rgba(255,255,255,.95)) drop-shadow(0 0 1px rgba(255,255,255,.95)) drop-shadow(0 0 6px rgba(255,248,235,.7)) drop-shadow(0 4px 14px rgba(0,0,0,.35)); }
@media (min-width: 721px) {
  .splash-logos ul { flex-wrap: nowrap; gap: 26px; }
  .splash-logos img { height: 28px; }
  .splash-logos li:nth-child(4) img, .splash-logos li:nth-child(5) img, .splash-logos li:nth-child(7) img { height: 36px; }
}
/* splash buttons: sticker style like the logo (white outline + soft glow), bigger */
.splash-card .btn-primary, .splash-enter {
  border: 2.5px solid #fff;
  box-shadow: 0 0 0 1px rgba(255,255,255,.6), 0 0 14px rgba(255,248,235,.55), 0 8px 22px -8px rgba(0,0,0,.45);
  border-radius: 999px; font-weight: 700; letter-spacing: .01em;
}
.splash-card .btn-primary { padding: 1em 1.4em; font-size: 1.05rem; }
.splash-enter { background: var(--orange); color: #fff; padding: 14px 24px; font-size: 1.1rem; gap: 10px; backdrop-filter: none; -webkit-backdrop-filter: none; }
.splash-enter svg { width: 22px; height: 22px; }
.splash-card .btn-primary:hover, .splash-enter:hover { background: var(--orange-dark); border-color: #fff; box-shadow: 0 0 0 1px #fff, 0 0 22px rgba(255,236,200,.85), 0 10px 26px -8px rgba(0,0,0,.5); transform: translateY(-2px); }
/* splash form: no card, sits on the photo */
.splash-card { background: none; box-shadow: none; padding: 0; color: #fff; width: min(440px, 100%); }
.splash-card h1 { color: #fff; font-size: clamp(2rem, 3.4vw, 2.8rem); line-height: 1.05; text-shadow: 0 2px 18px rgba(0,0,0,.45); margin-bottom: 10px; }
.splash-card p { color: rgba(255,255,255,.88); font-size: 1rem; text-shadow: 0 1px 10px rgba(0,0,0,.5); margin-bottom: 18px; }
.splash::before { background: linear-gradient(90deg, rgba(25,12,5,.72) 0%, rgba(25,12,5,.35) 40%, rgba(25,12,5,0) 65%), linear-gradient(0deg, rgba(25,12,5,.6) 0%, transparent 45%); }
.chips { display: flex; gap: 8px; flex-wrap: wrap; }
.chips label { cursor: pointer; }
.chips input { position: absolute; opacity: 0; pointer-events: none; }
.chips span { display: inline-block; padding: 8px 16px; border-radius: 999px; border: 1.5px solid rgba(255,255,255,.7); color: #fff; font-size: .92rem; font-weight: 600; transition: background .2s, border-color .2s, color .2s; }
.chips label:hover span { border-color: #fff; background: rgba(255,255,255,.12); }
.chips input:checked + span { background: #fff; color: var(--brown-dark); border-color: #fff; }
.chips input:focus-visible + span { outline: 2px solid var(--orange); outline-offset: 2px; }
.line-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin: 6px 0 4px; }
.line-fields input { background: transparent; border: 0; border-bottom: 1.5px solid rgba(255,255,255,.7); color: #fff; font: inherit; font-size: 1.02rem; padding: 10px 2px; border-radius: 0; }
.line-fields input::placeholder { color: rgba(255,255,255,.75); }
.line-fields input:focus { outline: none; border-bottom-color: #fff; }
.splash-form .form-msg.ok { background: rgba(255,255,255,.92); }
@media (max-width: 720px) { .line-fields { grid-template-columns: 1fr; } }
@media (max-width: 720px) { .splash::before { background: linear-gradient(0deg, rgba(25,12,5,.85) 0%, rgba(25,12,5,.55) 60%, rgba(25,12,5,.3) 100%); } }
/* splash form: 50% see-through panel */
.splash-card { background: rgba(40, 20, 10, .5); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border: 1px solid rgba(255,255,255,.18); border-radius: 18px; padding: 26px 28px; width: min(480px, 100%); }
@media (max-width: 720px) { .splash-card { padding: 20px; } }
/* splash buttons: slimmer, no white glow, invert on hover */
.splash-card .btn-primary, .splash-enter { border: 1.5px solid var(--orange); box-shadow: none; font-weight: 600; transition: background .25s, color .25s, border-color .25s; transform: none; }
.splash-card .btn-primary { padding: .7em 1.2em; font-size: .95rem; }
.splash-enter { padding: 10px 18px; font-size: .95rem; }
.splash-enter svg { width: 18px; height: 18px; }
.splash-card .btn-primary:hover, .splash-enter:hover { background: #fff; color: var(--orange); border-color: #fff; box-shadow: none; transform: none; }
/* splash form: cleaner, calmer */
.splash-card { width: min(400px, 100%); padding: 24px; }
.splash-card h1 { font-size: 1.6rem; line-height: 1.15; text-shadow: none; margin-bottom: 6px; }
.splash-card p { font-size: .9rem; text-shadow: none; color: rgba(255,255,255,.8); margin-bottom: 18px; }
.splash-form { gap: 14px; }
.chips { gap: 6px; }
.chips span { padding: 5px 12px; font-size: .82rem; font-weight: 500; border-width: 1px; }
.line-fields { grid-template-columns: 1fr; gap: 10px; margin: 0; }
.line-fields input { font-size: .95rem; padding: 8px 0; border-bottom-width: 1px; border-bottom-color: rgba(255,255,255,.45); }
.splash-card .btn-primary { width: 100%; margin-top: 4px; }
/* splash headline: soft, playful, hand-made feel */
.splash-card h1 { font-family: 'Fraunces', Georgia, serif; font-style: italic; font-weight: 500; font-variation-settings: 'SOFT' 100, 'WONK' 1, 'opsz' 72; font-size: 1.85rem; letter-spacing: -.01em; line-height: 1.1; }
.sp-kicker { font-family: 'Fraunces', Georgia, serif; font-style: italic; font-variation-settings: 'SOFT' 100, 'WONK' 1; color: #f7b267 !important; font-size: 1.1rem !important; margin: 0 0 2px !important; }
/* try: Caprasimo, chunky retro storybook serif */
.splash-card h1 { font-family: 'Caprasimo', Georgia, serif; font-style: normal; font-weight: 400; font-variation-settings: normal; font-size: 1.9rem; letter-spacing: 0; line-height: 1.08; }
.sp-kicker { font-family: 'Caprasimo', Georgia, serif; font-style: normal; font-variation-settings: normal; }
/* try: Instrument Serif italic (same direction as the soft italic, more delicate) */
.splash-card h1 { font-family: 'Instrument Serif', Georgia, serif; font-style: italic; font-weight: 400; font-size: 2.3rem; line-height: 1.02; letter-spacing: -.005em; }
.sp-kicker { font-family: 'Instrument Serif', Georgia, serif; font-style: italic; font-size: 1.25rem !important; }
/* headline matches the logo's hand-lettered small caps */
.splash-card h1 { font-family: 'Patrick Hand SC', 'Instrument Serif', cursive; font-style: normal; font-size: 2.2rem; line-height: 1.05; letter-spacing: .01em; }
.sp-kicker { font-family: 'Patrick Hand SC', cursive; font-style: normal; font-size: 1.3rem !important; letter-spacing: .03em; }
.splash-card .sp-by { font-family: 'Patrick Hand SC', cursive; color: #f7b267; font-size: 1.15rem; letter-spacing: .02em; margin: -2px 0 8px; }

/* :: Sitewide: match the landing page (logo lettering, pill buttons, marigold accents) :: */
:root { --display: 'Patrick Hand SC', 'Gloock', cursive; --marigold: #e9973d; }
h1, h2, h3, .h1, .h2, .page-hero h1, .panel h2, .craft h3, .work-grid > .h2 { font-family: var(--display); font-weight: 400; letter-spacing: .01em; line-height: 1.08; }
.h1, .hero-grid .h1, .hero .h1 { font-size: clamp(2.4rem, 4.4vw, 3.8rem); }
.h2 { font-size: clamp(2rem, 3.4vw, 2.9rem); }
.panel h2 { font-size: clamp(2.4rem, 4vw, 3.4rem); }
.class-card h3, .card h3, .port h3, .t-item h4, .recent strong, .tl-card strong { font-family: var(--body); }
.footer .brand-text { font-family: var(--display); font-size: 1.6rem; }
.footer-word { font-family: var(--display); letter-spacing: .01em; }
.stat b { font-family: var(--display); }
.pull { font-family: var(--display); font-size: clamp(1.6rem, 2.4vw, 2.2rem); }

/* pill buttons, invert on hover */
.btn { border-radius: 999px; font-weight: 600; padding: .75em 1.4em; transition: background .25s, color .25s, border-color .25s; }
.btn:hover { transform: none; }
.btn-primary, .dark .btn-primary { background: var(--orange); color: #fff; border: 1.5px solid var(--orange); box-shadow: none; }
.btn-primary:hover { background: #fff; color: var(--orange); border-color: var(--orange); }
.dark .btn-primary:hover { background: #fff; color: var(--orange); border-color: #fff; }
.btn-line { border: 1.5px solid var(--orange); color: var(--orange); background: transparent; }
.btn-line:hover { background: var(--orange); color: #fff; }

/* accents */
.text-link { color: var(--orange); }
.nav-links a[aria-current="page"] { text-decoration-color: var(--orange); }
.filters button[aria-pressed="true"], .chips input:checked + span { background: var(--brown-dark); border-color: var(--brown-dark); }
.step-num, .yr, .class-date, .tl-card .when, .port p span { color: var(--orange); }
.field input:focus, .field select:focus, .field textarea:focus { outline-color: var(--orange); }

/* :: Enter-the-site transition: marigold circle grows from the button, logo blooms, then the site :: */
.enter-veil { position: fixed; inset: 0; z-index: 200; pointer-events: none; background: var(--cream); clip-path: circle(0 at var(--x, 90%) var(--y, 90%)); display: grid; place-items: center; }
.enter-veil::before { content: ''; position: absolute; inset: 0; background: var(--orange); clip-path: circle(0 at var(--x, 90%) var(--y, 90%)); }
.enter-veil img { position: relative; width: min(260px, 50vw); opacity: 0; transform: scale(.85); }
.enter-veil.go { pointer-events: all; animation: veil-cream .75s .25s cubic-bezier(.7,0,.3,1) forwards; }
.enter-veil.go::before { animation: veil-orange .6s cubic-bezier(.7,0,.3,1) forwards; }
.enter-veil.go img { animation: veil-logo .5s .65s cubic-bezier(.2,.8,.2,1.2) forwards; }
@keyframes veil-orange { to { clip-path: circle(var(--r) at var(--x) var(--y)); } }
@keyframes veil-cream { to { clip-path: circle(var(--r) at var(--x) var(--y)); } }
@keyframes veil-logo { to { opacity: 1; transform: scale(1); } }
.enter-veil { clip-path: none; background: transparent; }
.enter-veil.go { animation: veil-bg .45s .55s ease forwards; }
@keyframes veil-bg { to { background: var(--cream); } }
.enter-veil.go::before { animation: veil-orange .6s cubic-bezier(.7,0,.3,1) forwards, veil-fade .45s .6s ease forwards; }
@keyframes veil-fade { to { opacity: 0; } }
.enter-veil.go { animation: veil-bg .01s .58s linear forwards; }

/* :: Enter transition v2: fly into the photo (GPU-only: transform + opacity) :: */
.enter-veil, .enter-veil.go { clip-path: none !important; background: var(--cream) !important; opacity: 0; animation: none; }
.enter-veil::before, .enter-veil.go::before { display: none; animation: none; }
.enter-veil img { opacity: 0; transform: scale(.7); filter: blur(6px); animation: none; }
.splash-slides, .splash-card, .splash-logos, .splash-enter, .splash-top { transition: transform 1.4s cubic-bezier(.65,0,.25,1), opacity .7s ease, filter 1.2s ease; will-change: transform, opacity; }
.entering .splash-slides { transform: scale(1.9); filter: blur(4px) saturate(1.2); }
.entering .splash-card { transform: translateX(-60px) scale(.96); opacity: 0; }
.entering .splash-logos { transform: translateY(40px); opacity: 0; }
.entering .splash-enter { transform: translateX(40px); opacity: 0; }
.entering .splash-top { transform: translateY(-30px); opacity: 0; }
.enter-veil.go { transition: opacity .7s ease .55s; opacity: 1; }
.enter-veil.go img { transition: opacity .7s ease .75s, transform 1s cubic-bezier(.2,.8,.2,1) .7s, filter .7s ease .75s; opacity: 1; transform: scale(1); filter: blur(0); }
/* the site then rises in through the cross-page fade */
::view-transition-old(root) { animation: vt-fade-out .4s ease both; }
::view-transition-new(root) { animation: vt-rise-in .7s cubic-bezier(.2,.8,.2,1) both; }
@keyframes vt-fade-out { to { opacity: 0; } }
@keyframes vt-rise-in { from { opacity: 0; transform: scale(1.03); } }
.drift { cursor: grab; touch-action: pan-y; user-select: none; }
.drift.dragging { cursor: grabbing; }
.drift img { -webkit-user-drag: none; pointer-events: none; }
/* splash chips: selected = white pill, brown text (override sitewide brown) */
.splash .chips input:checked + span { background: #fff; color: var(--brown-dark); border-color: #fff; }

/* :: Home opening: papel picado + doors :: */
.doors-hero { padding: 0 0 48px; }
.doors-hero .picado { height: 168px; overflow: hidden; margin-bottom: -24px; }
.doors-hero .picado svg { display: block; }
.pp-flag { transform-origin: 50% 0; transform-box: fill-box; animation: pp-sway 4s ease-in-out infinite; filter: drop-shadow(0 6px 6px rgba(46,28,19,.12)); }
@keyframes pp-sway { 0%, 100% { transform: rotate(-3deg); } 50% { transform: rotate(3deg); } }
.doors-title { margin: 0 0 20px; }
.ia-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; height: min(64svh, 600px); }
.ia-door { position: relative; border-radius: 16px; overflow: hidden; text-decoration: none; color: #fff; isolation: isolate; }
.ia-door img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -1; transition: transform 1s var(--ease); }
.ia-door::after { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(0deg, rgba(25,12,5,.8), transparent 55%); }
.ia-door:hover img { transform: scale(1.07); }
.ia-txt { position: absolute; left: 20px; right: 20px; bottom: 20px; }
.ia-txt b { display: block; font-family: var(--display); font-weight: 400; font-size: 1.9rem; line-height: 1; }
.ia-txt small { opacity: .85; }
.ia-arrow { position: absolute; top: 16px; right: 16px; width: 40px; height: 40px; border-radius: 50%; background: var(--orange); display: grid; place-items: center; font-weight: 700; transform: scale(0); transition: transform .35s var(--ease); }
.ia-door:hover .ia-arrow { transform: scale(1); }
@media (max-width: 860px) { .ia-grid { grid-template-columns: 1fr 1fr; height: auto; } .ia-door { aspect-ratio: 3 / 4; } .doors-hero .picado { height: 130px; } }

/* :: Home: auto-hiding header :: */
.nav-autohide .nav { position: fixed; left: 0; right: 0; top: 0; transform: translateY(-110%); transition: transform .45s var(--ease), border-color .3s; }
.nav-autohide .nav.nav-show { transform: none; }
@media (prefers-reduced-motion: reduce) { .pp-flag { animation: none; } }
/* smaller traditional picado; doors fill the screen so the next section doesn't peek */
.doors-hero { min-height: 100svh; display: flex; flex-direction: column; padding-bottom: 40px; }
.doors-hero > .wrap { flex: 1; display: flex; flex-direction: column; }
.doors-hero .ia-grid { flex: 1; height: auto; min-height: 420px; }
.doors-hero .picado { height: 104px; margin-bottom: -6px; }
.pp-flag { animation-duration: 5s; filter: drop-shadow(0 3px 3px rgba(46,28,19,.12)); }
@keyframes pp-sway { 0%, 100% { transform: rotate(-2deg); } 50% { transform: rotate(2deg); } }
.ia-grid.ia-3 { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 860px) { .ia-grid.ia-3 { grid-template-columns: 1fr; } .ia-3 .ia-door { aspect-ratio: 4 / 3; } }

/* :: Press cards :: */
.press-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.pcard { background: #fff; border-radius: 16px; overflow: hidden; text-decoration: none; color: var(--ink); display: flex; flex-direction: column; transition: transform .35s var(--ease), box-shadow .35s; }
a.pcard:hover { transform: translateY(-5px); box-shadow: 0 24px 50px -30px rgba(46,28,19,.55); }
.pcard-img { aspect-ratio: 16 / 10; overflow: hidden; background: var(--paper); }
.pcard-img img { width: 100%; height: 100%; object-fit: cover; transition: transform 1s var(--ease); }
a.pcard:hover .pcard-img img { transform: scale(1.05); }
.pcard-body { padding: 16px 18px 20px; display: flex; flex-direction: column; gap: 6px; flex: 1; }
.pcard-src { font-size: .8rem; color: var(--orange); font-weight: 600; }
.pcard h3 { font-family: var(--body); font-weight: 600; font-size: 1.08rem; line-height: 1.3; color: var(--ink); flex: 1; }
.pcard-read { font-size: .88rem; color: var(--brown); font-weight: 600; }
.pcard:first-child { grid-column: span 2; flex-direction: row; }
.pcard:first-child .pcard-img { aspect-ratio: auto; width: 55%; }
.pcard:first-child h3 { font-family: var(--display); font-weight: 400; font-size: 2rem; color: var(--brown); line-height: 1.1; }
@media (max-width: 900px) { .press-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .press-grid { grid-template-columns: 1fr; } .pcard:first-child { grid-column: auto; flex-direction: column; } .pcard:first-child .pcard-img { width: auto; aspect-ratio: 16/10; } }

/* :: Upcoming: honest urgency :: */
.urgency { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 6px; }
.u-pill { font-size: .78rem; font-weight: 600; padding: 3px 10px; border-radius: 999px; background: #fff; color: var(--brown); border: 1px solid var(--line); }
.u-pill.hot { background: var(--orange); color: #fff; border-color: var(--orange); }
.seatbar { width: 120px; height: 6px; border-radius: 99px; background: var(--line); overflow: hidden; }
.seatbar i { display: block; height: 100%; background: var(--orange); border-radius: 99px; }
.u-txt { font-size: .8rem; color: var(--ink-soft); }
.class-side .spots { font-weight: 600; color: var(--brown); }

/* :: Work cards: papel-picado colored flags :: */
.wcards { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 18px; }
.wcard { --c: var(--orange); position: relative; background: var(--c); color: #fff; text-decoration: none; padding: 22px 22px 34px; border-radius: 14px 14px 0 0; display: flex; flex-direction: column; gap: 6px; min-height: 250px;
  -webkit-mask: radial-gradient(circle 9px at 50% 100%, transparent 98%, #000) bottom / 22px 100% repeat-x; mask: radial-gradient(circle 9px at 50% 100%, transparent 98%, #000) bottom / 22px 100% repeat-x;
  transform-origin: 50% 0; transition: transform .45s cubic-bezier(.2,.8,.2,1.4), filter .3s; }
.wcard::before { content: ''; position: absolute; inset: 8px 8px 22px; border: 1.5px dashed rgba(255,255,255,.45); border-radius: 8px; pointer-events: none; }
.wcard:hover { transform: rotate(-1.5deg) translateY(-4px); filter: saturate(1.15) brightness(1.03); }
.wcard:nth-child(even):hover { transform: rotate(1.5deg) translateY(-4px); }
.wc-date { font-family: var(--display); font-size: 2.6rem; line-height: .9; }
.wc-yr { font-size: .85rem; opacity: .85; font-weight: 600; margin-top: -2px; }
.wcard h3 { font-family: var(--body); font-weight: 700; font-size: 1.05rem; line-height: 1.3; color: #fff; margin-top: 8px; }
.wcard p { font-size: .88rem; opacity: .9; margin: 0; flex: 1; color: #fff; }
.wc-host { font-size: .78rem; font-weight: 600; opacity: .9; text-transform: uppercase; letter-spacing: .05em; }
.wc-go { position: absolute; top: 16px; right: 18px; width: 34px; height: 34px; border-radius: 50%; background: rgba(255,255,255,.25); display: grid; place-items: center; font-weight: 700; transition: background .3s, transform .3s; }
.wcard:hover .wc-go { background: #fff; color: var(--c); transform: translateX(3px); }
.stat b[data-count] { font-size: clamp(3.4rem, 7vw, 5.6rem); color: var(--orange); }

/* :: Programs: intro left, three offerings right :: */
.offer-split { display: grid; grid-template-columns: 1fr 1.1fr; gap: clamp(32px, 6vw, 88px); align-items: center; }
.offer-cards { display: grid; gap: 14px; }
.ocard { display: grid; grid-template-columns: 150px 1fr; gap: 18px; align-items: center; background: #fff; border-radius: 16px; padding: 12px; transition: transform .35s var(--ease), box-shadow .35s; }
.ocard:hover { transform: translateX(6px); box-shadow: 0 20px 40px -28px rgba(46,28,19,.5); }
.ocard img { width: 150px; height: 120px; object-fit: cover; border-radius: 10px; }
.ocard h3 { font-family: var(--display); font-weight: 400; font-size: 1.8rem; color: var(--brown); line-height: 1; margin-bottom: 4px; }
.ocard p { margin: 0; color: var(--ink-soft); font-size: .95rem; }
@media (max-width: 860px) { .offer-split { grid-template-columns: 1fr; } .ocard { grid-template-columns: 110px 1fr; } .ocard img { width: 110px; height: 96px; } }
[data-reveal="right"] { transform: translateX(120px); transition: opacity 1s var(--ease), transform 1.1s var(--ease); }
[data-reveal="right"].in { transform: none; }
/* home doors: description left, doors right */
.doors-split { flex: 1; display: grid; grid-template-columns: minmax(280px, .8fr) 2fr; gap: clamp(28px, 4vw, 64px); align-items: stretch; }
.doors-intro { display: flex; flex-direction: column; justify-content: center; }
.doors-intro .lede { margin-top: 0; }
.doors-split .ia-grid { height: auto; min-height: 460px; }
@media (max-width: 1000px) { .doors-split { grid-template-columns: 1fr; } .doors-split .ia-grid { min-height: 380px; } }
.doors-hero .picado { margin-bottom: 18px; }
.ia-3 .ia-txt b { font-size: 1.6rem; }
.ia-3 .ia-txt small { display: block; line-height: 1.35; margin-top: 4px; }

/* :: Programs swap: pinned, offer out left, booking in from right :: */
.swap { position: relative; height: 260svh; background: var(--paper); }
.swap-sticky { position: sticky; top: 80px; height: calc(100svh - 80px); overflow: hidden; }
.swap-panel { position: absolute; inset: 0; display: flex; align-items: center; will-change: transform; }
.swap-panel > .wrap { width: 100%; }
.swap-b { transform: translateX(100%); background: var(--paper); }
@media (max-width: 860px) {
  .swap { height: auto; }
  .swap-sticky { position: static; height: auto; overflow: visible; }
  .swap-panel { position: static; transform: none !important; padding: 56px 0; }
}
/* home: 50/50, doors stacked as wide horizontal bars */
.doors-split { grid-template-columns: 1fr 1fr; }
.doors-split .ia-grid.ia-3 { grid-template-columns: 1fr; grid-template-rows: repeat(3, 1fr); min-height: 0; height: 100%; gap: 12px; }
.doors-split .ia-3 .ia-door { aspect-ratio: auto; min-height: 150px; }
.doors-split .ia-3 .ia-door::after { background: linear-gradient(90deg, rgba(25,12,5,.78) 0%, rgba(25,12,5,.25) 60%, transparent 100%); }
.doors-split .ia-3 .ia-txt { top: 50%; bottom: auto; transform: translateY(-50%); right: 80px; }
.doors-split .ia-3 .ia-arrow { top: 50%; transform: translateY(-50%) scale(0); }
.doors-split .ia-3 .ia-door:hover .ia-arrow { transform: translateY(-50%) scale(1); }
@media (max-width: 1000px) { .doors-split .ia-grid.ia-3 { height: auto; } }
.doors-intro .lede { font-size: clamp(1.3rem, 2vw, 1.75rem); line-height: 1.45; color: var(--ink); max-width: 30em; }
.doors-split .ia-3 .ia-txt b { font-size: 2rem; }

/* :: Spanish Through Art :: */
.step-big { font-family: var(--display); font-size: 4.5rem; line-height: 1; color: var(--orange); opacity: .9; }
.vocab-track { gap: 18px; }
.vocab-track::before { display: none; }
.vcard { --c: var(--orange); flex: none; width: 300px; background: var(--c); color: #fff; border-radius: 16px 16px 0 0; padding: 14px 14px 30px; display: flex; flex-direction: column; gap: 4px;
  -webkit-mask: radial-gradient(circle 9px at 50% 100%, transparent 98%, #000) bottom / 22px 100% repeat-x; mask: radial-gradient(circle 9px at 50% 100%, transparent 98%, #000) bottom / 22px 100% repeat-x; transition: transform .45s cubic-bezier(.2,.8,.2,1.4); }
.vcard:nth-child(odd) { transform: rotate(-1.5deg); } .vcard:nth-child(even) { transform: rotate(1.5deg) translateY(10px); }
.vcard:hover { transform: rotate(0) translateY(-6px); }
.vcard img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 10px; margin-bottom: 8px; }
.vcard b { font-family: var(--display); font-weight: 400; font-size: 2rem; line-height: 1; }
.vcard .say { font-size: .78rem; letter-spacing: .08em; text-transform: uppercase; opacity: .85; }
.vcard p { margin: 4px 0 0; font-size: .92rem; opacity: .92; }
@media (max-width: 860px) { .vcard { width: 76vw; } }
/* phone: home doors stack under the intro as horizontal bars */
@media (max-width: 1000px) {
  .doors-split { grid-template-columns: 1fr; gap: 20px; }
  .doors-intro .lede { font-size: 1.15rem; }
  .doors-split .ia-grid.ia-3 { height: auto; grid-template-rows: none; }
  .doors-split .ia-3 .ia-door { min-height: 120px; }
  .doors-split .ia-3 .ia-txt b { font-size: 1.5rem; }
  .doors-hero { min-height: 0; }
}
.enter-inline { display: none; }
/* phone splash: compact card with the enter link inside, logos pinned to the very bottom */
@media (max-width: 720px) {
  .splash { padding: 96px 16px 0; justify-content: flex-start; gap: 0; min-height: 100svh; }
  .splash-top { top: 14px; }
  .splash-logo { width: 96px; }
  .splash-enter { display: none; }
  .splash-card { padding: 16px 16px 14px; border-radius: 14px; width: 100%; }
  .sp-kicker { font-size: 1rem !important; }
  .splash-card h1 { font-size: 1.45rem; }
  .splash-card .sp-by { font-size: .95rem; margin-bottom: 4px; }
  .splash-card p { font-size: .85rem; margin-bottom: 10px; }
  .splash-form { gap: 8px; }
  .chips span { padding: 4px 10px; font-size: .78rem; }
  .line-fields input { font-size: .9rem; padding: 6px 0; }
  .splash-card .btn-primary { padding: .6em 1em; font-size: .9rem; }
  .enter-inline { display: block; text-align: center; color: #fff; font-weight: 600; font-size: .9rem; text-decoration: none; margin-top: 10px; padding: 6px; opacity: .9; }
  .splash-logos { position: absolute; left: 0; right: 0; bottom: 0; padding: 12px 16px calc(12px + env(safe-area-inset-bottom)); flex-direction: column; align-items: flex-start; gap: 6px; background: linear-gradient(0deg, rgba(20,10,5,.75), transparent); }
  .splash-logos > span { font-size: .68rem; }
  .splash-logos ul { gap: 10px 16px; }
  .splash-logos img { height: 16px; }
  .splash-logos li:nth-child(4) img, .splash-logos li:nth-child(5) img, .splash-logos li:nth-child(7) img { height: 22px; }
  .splash-logos .txt { font-size: .52rem; }
}
@media (max-width: 720px) {
  .splash { justify-content: center; padding: 100px 16px 120px; }
}
/* phone menu: full-screen sheet (the nav's blur made the old fixed list clip and overlap content) */
@media (max-width: 980px) {
  .nav.open { position: fixed; inset: 0; height: 100svh; z-index: 300; background: var(--cream); backdrop-filter: none; -webkit-backdrop-filter: none; transform: none !important; overflow-y: auto; }
  .nav.open .wrap { flex-wrap: wrap; align-content: flex-start; height: auto; min-height: 68px; }
  .nav.open .nav-links { position: static; inset: auto; order: 10; width: 100%; display: flex; flex-direction: column; gap: 2px; padding: 28px 0 40px; background: none; }
  .nav.open .nav-links a { font-family: var(--display); font-size: 2rem; color: var(--brown); padding: 10px 0; border-bottom: 1px solid var(--line); display: block; }
  .nav.open .nav-links a[aria-current="page"] { color: var(--orange); text-decoration: none; }
  .nav.open .nav-links .mobile-cta { margin-top: 24px; }
  .nav.open .nav-links .mobile-cta a { border: 0; font-family: var(--body); font-size: 1rem; color: #fff; text-align: center; padding: .9em; }
  body:has(.nav.open) .mobile-bar { display: none; }
}
.menu-btn span { transition: transform .3s, opacity .2s; }
.nav.open .menu-btn span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.nav.open .menu-btn span:nth-child(2) { opacity: 0; }
.nav.open .menu-btn span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }
@media (max-width: 980px) { .nav.open .nav-links { animation: page-in .45s var(--ease) both; } }
/* phone footer: one compact block instead of stacked sections */
@media (max-width: 720px) {
  .footer { padding: 36px 0 0; font-size: .85rem; }
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 18px 16px; }
  .footer-grid > div:first-child { grid-column: 1 / -1; }
  .footer-grid > div:nth-child(3) { grid-column: 1 / -1; order: 5; }
  .footer .brand-text { font-size: 1.3rem; }
  .footer h4 { font-size: .68rem; margin-bottom: 6px; }
  .footer ul { gap: 3px; }
  .ig-btn { padding: 5px 10px 5px 8px; font-size: .82rem; }
  .ig-btn svg { width: 16px; height: 16px; }
  .footer-bottom { margin-top: 20px; padding-top: 14px; font-size: .74rem; gap: 6px 12px; }
  .footer-brand { margin-top: 24px; padding-top: 28px; }
  .footer-brand img { width: 100px; }
}

/* :: Splash v3: flow layout that fits any screen size (no overlaps, no overflow) :: */
.splash { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: auto 1fr auto; gap: clamp(10px, 2vh, 20px) 24px; padding: clamp(12px, 2.5vh, 28px) var(--gutter); min-height: 100svh; align-items: center; }
.splash-top { position: static; grid-column: 1 / -1; grid-row: 1; }
.splash-logo { width: clamp(90px, 14vh, 150px); }
.splash-card { grid-column: 1; grid-row: 2; justify-self: start; align-self: center; width: min(420px, 100%); max-height: none; }
.splash-enter { position: static; display: inline-flex; grid-column: 2; grid-row: 2; align-self: end; }
.splash-logos { position: static; grid-column: 1 / -1; grid-row: 3; padding: 0; background: none; flex-direction: row; flex-wrap: wrap; align-items: center; gap: 8px 24px; }
.splash-logos ul { flex-wrap: wrap; gap: 10px 24px; }
.splash-logos img { height: clamp(16px, 3vh, 28px); }
.splash-logos li:nth-child(4) img, .splash-logos li:nth-child(5) img, .splash-logos li:nth-child(7) img { height: clamp(20px, 4vh, 36px); }
.enter-inline { display: none; }
@media (max-height: 820px) {
  .splash-card { padding: 16px 20px; }
  .splash-card h1 { font-size: 1.5rem; }
  .sp-kicker { font-size: 1rem !important; }
  .splash-card .sp-by { font-size: 1rem; }
  .splash-card p { margin-bottom: 10px; font-size: .88rem; }
  .splash-form { gap: 8px; }
  .chips span { padding: 4px 10px; font-size: .78rem; }
  .line-fields input { padding: 6px 0; font-size: .92rem; }
  .splash-card .btn-primary { padding: .6em 1em; }
}
@media (max-width: 720px) {
  .splash { grid-template-columns: 1fr; padding: 14px 16px calc(14px + env(safe-area-inset-bottom)); }
  .splash-card { justify-self: stretch; width: 100%; }
  .splash-enter { display: none; }
  .enter-inline { display: block; }
  .splash-logos { flex-direction: column; align-items: flex-start; gap: 6px; }
  .splash-logos ul { gap: 8px 14px; }
  .splash-logos img { height: 16px; }
  .splash-logos li:nth-child(4) img, .splash-logos li:nth-child(5) img, .splash-logos li:nth-child(7) img { height: 22px; }
}
@media (min-width: 721px) { .splash-card, .splash-enter { align-self: end; } }
/* pinned sideways sections: never let the header text get cut off under the nav */
.htl-sticky { justify-content: flex-start; padding-top: clamp(16px, 4vh, 48px); }
.htl .split { margin-bottom: clamp(14px, 3vh, 32px); align-items: start !important; }
.htl .split .lede { font-size: clamp(.92rem, 1.1vw, 1.05rem); line-height: 1.55; }
.htl .hp-card { height: min(40svh, 400px); }
@media (max-height: 760px) { .htl .split .lede { font-size: .88rem; } .htl .hp-card { height: 34svh; } .htl .muted { display: none; } }
/* :: 2026-10 copy update: home intro, four offering doors, class steps, bio, community, selected work :: */
.doors-h1 { font-size: clamp(2rem, 3.2vw, 3rem); color: var(--brown); margin: 0; }
.doors-sub { font-size: 1rem; font-weight: 500; color: var(--ink-soft); margin: .4rem 0 1.2rem; }
.doors-intro .lede { font-size: clamp(1.1rem, 1.45vw, 1.35rem); }
.doors-intro p:not(.lede):not(.doors-sub) { color: var(--ink-soft); max-width: 36em; margin: 1rem 0 0; }
.doors-intro .hero-actions { margin-top: 1.6rem; }
.doors-offer { display: flex; flex-direction: column; min-height: 0; }
.doors-offer .doors-title { font-size: 1.5rem; margin: 0 0 14px; }
.doors-offer .ia-grid { flex: 1; }
.doors-split .ia-grid.ia-3 { grid-template-rows: none; grid-auto-rows: 1fr; }
.doors-split .ia-3 .ia-door { min-height: 120px; }
.doors-split .ia-3 .ia-txt b { font-size: 1.7rem; }
.doors-split .ia-3 .ia-txt small { max-width: 34em; }
.story-step .h2 { margin-bottom: 0; }
.story-step .step-more { color: var(--ink-soft); margin: 1rem 0 0; max-width: 36em; }
.story-step .step-cta { margin: 1.8rem 0 0; }
.prog-head { padding-bottom: 0; }
.prog-head + .story { padding-top: clamp(16px, 3vw, 40px); }
.prog-cta { padding-bottom: clamp(48px, 6vw, 80px); }
.prog-links { grid-template-columns: 1fr 1fr; }
.prog-links .ocard { text-decoration: none; color: inherit; }
.ct-photo { max-height: 62svh; }
.ct-more { margin-top: 0; }
.bio-split { align-items: start; }
.bio-photo { position: sticky; top: 110px; }
.bio-role { font-weight: 500; color: var(--brown); margin: .6rem 0 0; }
.bio-text p:not(.lede):not(.bio-role) { color: var(--ink-soft); margin: 1rem 0 0; max-width: 40em; }
.cgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(28px, 4vw, 56px); align-items: start; }
.cblock .h2 { font-size: clamp(1.5rem, 2vw, 1.9rem); margin-bottom: .8rem; }
.cblock p { color: var(--ink-soft); margin: 0 0 1rem; }
.sw-list { border-bottom: 1px solid var(--line); }
.sw-row { display: grid; grid-template-columns: minmax(0, 1fr) 280px; gap: clamp(24px, 4vw, 56px); padding: 28px 0; border-top: 1px solid var(--line); align-items: start; }
.sw-row h3 { font-size: clamp(1.4rem, 2vw, 1.8rem); color: var(--brown); margin: 0; }
.sw-credit { font-size: .9rem; font-weight: 500; color: var(--brown); margin: .4rem 0 .6rem; }
.sw-text p:last-child { color: var(--ink-soft); margin: 0; max-width: 40em; }
.sw-img { border-radius: 10px; overflow: hidden; aspect-ratio: 4 / 3; background: var(--paper); }
.sw-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
@media (max-width: 860px) {
  .cgrid { grid-template-columns: 1fr; }
  .prog-links { grid-template-columns: 1fr; }
  .bio-photo { position: static; }
  .sw-row { grid-template-columns: 1fr; gap: 16px; }
  .sw-img { max-width: 420px; }
}
/* longer door descriptions need a darker scrim to stay readable */
.doors-split .ia-3 .ia-door::after { background: linear-gradient(90deg, rgba(25,12,5,.85) 0%, rgba(25,12,5,.6) 60%, rgba(25,12,5,.3) 100%); }
@media (max-width: 720px) { .doors-split .ia-3 .ia-door { min-height: 150px; } .doors-split .ia-3 .ia-door::after { background: rgba(25,12,5,.66); } .doors-split .ia-3 .ia-txt { right: 20px; } }
/* :: Community: hero zoom into pinned panels; panels grow to fit longer copy instead of clipping it :: */
.cm-stack .panel { height: auto; min-height: calc(100svh - 80px); padding: clamp(32px, 5vh, 56px) 0; }
.cm-stack .panel-text .h2 { margin: 0 0 .9rem; }
.cm-stack .panel-text p { color: inherit; opacity: .85; font-size: 1.08rem; max-width: 34em; margin: 0 0 1rem; }
.cm-stack .panel-words .panel-inner { grid-template-columns: 1fr 1fr; align-items: start; }
.cm-stack .panel .stat { margin: 1.4rem 0 0; padding-top: 1.2rem; border-top: 1px solid rgba(250, 246, 239, .25); }
.cm-stack .panel .stat span { color: inherit; opacity: .75; }
.cm-stack .panel .hero-actions { margin-top: 1.6rem; }
@media (max-width: 720px) {
  .cm-stack .panel { min-height: calc(100svh - 68px); padding: 28px 0 36px; }
  body.has-bar .cm-stack .panel { padding-bottom: calc(36px + 72px + env(safe-area-inset-bottom)); }
  .cm-stack .panel-words .panel-inner { grid-template-columns: 1fr; gap: 28px; }
  .cm-stack .panel-text p { font-size: 1rem; }
}
@media (prefers-reduced-motion: reduce) {
  .hero-zoom { height: auto; }
  .hz-sticky { position: relative; top: 0; }
  .stack.after-zoom { margin-top: 0; }
}

/* Past programs carousel (replaces institution logos, 10-26) */
.past-sec { border-top: 1px solid var(--line); }
.past-head { display: flex; align-items: end; justify-content: space-between; gap: 16px; margin-bottom: 24px; }
.past-nav { display: flex; gap: 8px; }
.past-nav button { width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--line); background: transparent; color: var(--ink); font-size: 1.1rem; transition: background .25s, border-color .25s; }
.past-nav button:hover { background: var(--paper); border-color: var(--ink-soft); }
.past-track { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(250px, 300px); gap: 20px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; padding-bottom: 12px; scrollbar-width: none; }
.past-track::-webkit-scrollbar { display: none; }
.past-card { scroll-snap-align: start; position: relative; display: flex; flex-direction: column; gap: 6px; color: var(--ink); text-decoration: none; }
.past-img { display: block; aspect-ratio: 4 / 3; overflow: hidden; border-radius: 10px; background: var(--paper); margin-bottom: 6px; }
.past-img img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease); }
.past-card:hover .past-img img { transform: scale(1.04); }
.past-meta { font-size: .78rem; color: var(--ink-soft); }
.past-card h3 { font-family: var(--body); font-weight: 600; font-size: 1.02rem; line-height: 1.3; padding-right: 24px; }
.past-go { position: absolute; right: 0; bottom: 2px; color: var(--ink-soft); transition: transform .25s; }
.past-card:hover .past-go { transform: translateX(3px); color: var(--ink); }
@media (max-width: 720px) { .past-nav { display: none; } .past-track { grid-auto-columns: 78%; } }

/* Splash: same programs as a compact swipeable row */
.splash-logos .past-mini { width: 100%; align-self: stretch; flex: 1 1 auto; flex-wrap: nowrap; overflow-x: auto; scroll-snap-type: x mandatory; gap: 12px; max-width: 100%; min-width: 0; scrollbar-width: none; -webkit-mask-image: linear-gradient(90deg, #000 85%, transparent); mask-image: linear-gradient(90deg, #000 85%, transparent); }
.splash-logos .past-mini::-webkit-scrollbar { display: none; }
.splash-logos .past-mini li { flex: 0 0 auto; scroll-snap-align: start; }
.splash-logos .past-mini a { display: flex; align-items: center; gap: 10px; width: 250px; padding: 6px 10px 6px 6px; border-radius: 10px; background: rgba(255,255,255,.1); color: #fff; text-decoration: none; transition: background .25s; }
.splash-logos .past-mini a:hover { background: rgba(255,255,255,.2); }
.splash-logos .past-mini li img { height: 46px; width: 46px; object-fit: cover; border-radius: 6px; opacity: 1; flex: none; }
.splash-logos .past-mini b { display: block; font-size: .78rem; font-weight: 600; line-height: 1.25; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 178px; }
.splash-logos .past-mini small { display: block; font-size: .66rem; opacity: .75; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 178px; }
@media (max-width: 720px) { .splash-logos .past-mini a { width: 210px; } .splash-logos .past-mini li img { height: 36px; width: 36px; } .splash-logos .past-mini b, .splash-logos .past-mini small { max-width: 146px; } }
.splash-logos:has(.past-mini) { min-width: 0; max-width: 100%; }
/* Splash row runs edge to edge of the screen; first card still lines up with the content */
.splash-logos .past-mini { width: 100vw; max-width: none; margin-inline: calc(50% - 50vw); padding-inline: calc(50vw - 50%); scroll-snap-type: none; -webkit-mask-image: none; mask-image: none; }
.step-photos { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin: 1.4rem 0 0; max-width: 36em; }
.step-photos img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 8px; display: block; }
@media (max-width: 600px) { .step-photos { grid-template-columns: repeat(3, 1fr); } }

/* Repujado kit instructions page */
.kit { max-width: 46rem; }
.kit-head { display: flex; gap: clamp(16px, 4vw, 36px); align-items: center; padding-bottom: 1.6rem; border-bottom: 1px solid #e3d9ca; }
.kit-head img { width: clamp(120px, 26vw, 200px); height: auto; flex: none; }
.kit-head .label { margin: .8rem 0 .3rem; color: var(--accent); }
.kit-head p { margin: 0; color: var(--ink-soft); }
.kit h2 { font-size: clamp(1.4rem, 2.6vw, 1.8rem); margin: 2.4rem 0 .6rem; }
.kit h3 { font-family: var(--body); font-weight: 600; font-size: 1rem; letter-spacing: .04em; text-transform: uppercase; color: var(--accent); margin: 1.8rem 0 .3rem; }
.kit p { margin: 0 0 .8rem; }
.kit-art { display: grid; grid-template-columns: 1.4fr 1fr; gap: 12px; margin: 1rem 0; }
.kit-art figure { margin: 0; }
.kit-art img { width: 100%; height: 100%; max-height: 420px; object-fit: cover; border-radius: 10px; display: block; }
.kit .credit { font-size: .85rem; color: var(--ink-soft); }
.kit-list { padding-left: 1.2rem; margin: 0; }
.kit-list li { margin: 0 0 .25rem; }
.kit-safety { margin-top: 2.4rem; padding: 1.2rem 1.4rem; background: var(--paper); border-radius: 12px; }
.kit-safety h2 { margin-top: 0; }
.kit-sign { margin-top: 2.4rem; padding-top: 1.4rem; border-top: 1px solid #e3d9ca; }
.kit-sign p { margin: 0 0 .2rem; }
@media (max-width: 600px) { .kit-head { flex-direction: column; align-items: flex-start; } .kit-art { grid-template-columns: 1fr; } }


/* ═══════════════════════════════════════════════════════════════════════════
   GALLERY (branch `museum`, v2 2026-11-09). A contemporary art gallery: white
   walls, works hung with air around them, small confident type, black/white at
   rest. Colour only arrives on hover/focus, sampled from Verónica's logo.
   Font: Inter Tight, a clean contemporary grotesk set small and at 500, the
   way gallery sites (Zwirner, Pace) title their shows; no display sizes.
   ═══════════════════════════════════════════════════════════════════════════ */
:root {
  --cream: #ffffff; --paper: #f6f3ee; --bg: #ffffff; --line: #ebebea;
  --ink: #111111; --ink-soft: #6b6b6b;
  --accent: #111111; --accent-dark: #000; --brown: #111111; --brown-dark: #111111;
  --orange: #111111; --orange-dark: #000; --marigold: #111111;
  --display: 'Inter Tight', 'Helvetica Neue', Arial, sans-serif;
  --body: 'Inter Tight', 'Helvetica Neue', Arial, sans-serif;
  --wrap: 1440px; --gutter: clamp(20px, 5vw, 88px);
  --ease: cubic-bezier(.16, 1, .3, 1);
  /* Logo palette (hover/focus only) */
  --monarch: #d35e08; --terracotta: #b04317; --desert: #af271c; --night: #035268; --cactus: #0d551c; --copper: #67390d;
  --hover: var(--monarch);
}
body { background: #fff; color: var(--ink); font-size: 15.5px; line-height: 1.6; font-weight: 400; letter-spacing: -0.003em; }
::selection { background: var(--monarch); color: #fff; }

/* Type: one grotesk, modest sizes, medium weight for titles. */
h1, h2, h3, h4, .h1, .h2, .page-hero h1, .panel h2, .doors-h1, .ocard h3, .ia-txt b, .wc-date, .vcard b,
.footer .brand-text, .footer-word, .stat b, .pull, .price, .step-big, .sw-row h3, .pcard:first-child h3,
.splash-card h1, .sp-kicker, .splash-card .sp-by, .cblock .h2, .hero-grid .h1, .hero .h1 {
  font-family: var(--display) !important; font-style: normal !important; font-variation-settings: normal !important;
  color: var(--ink) !important; text-transform: none !important; text-shadow: none !important; letter-spacing: -0.015em !important;
}
.h1, .hero-grid .h1, .hero .h1, .doors-h1, .page-hero h1 { font-size: clamp(1.9rem, 2.6vw, 2.5rem) !important; font-weight: 500 !important; line-height: 1.12 !important; max-width: 18em; }
h2, .h2, .panel h2, .cblock .h2, .sw-row h3 { font-size: clamp(1.35rem, 1.7vw, 1.65rem) !important; font-weight: 500 !important; line-height: 1.2 !important; }
h3, h4, .ocard h3, .ia-txt b, .class-card h3, .card h3, .port h3, .past-card h3, .pcard h3, .wcard h3 { font-size: 1.02rem !important; font-weight: 500 !important; line-height: 1.35 !important; letter-spacing: -0.005em !important; }
.lede, .doors-intro .lede, .page-hero p { font-size: clamp(1rem, 1.15vw, 1.12rem) !important; color: var(--ink) !important; line-height: 1.55; max-width: 34em; }
p, .muted, .caption, .class-meta, .spots, .form-note, .press-src, .past-meta, .u-txt, .card p, .ocard p { color: var(--ink-soft); }
.stat b, .stat b[data-count] { font-size: clamp(2rem, 3vw, 2.6rem) !important; font-weight: 500 !important; color: var(--ink) !important; }
.step-big { font-size: 1rem !important; font-weight: 500 !important; color: var(--ink-soft) !important; opacity: 1 !important; }
.pull { font-size: clamp(1.15rem, 1.5vw, 1.35rem) !important; font-weight: 400 !important; line-height: 1.5 !important; border: 0 !important; padding: 0 !important; max-width: 32em; }

/* Labels: plain small text, sentence case, no tracked capitals. */
.label, .panel-sub, .yr, .class-date, .step-num, .tl-card .when, .port p span, .pcard-src, .wc-host, .vcard .say,
.footer h4, .sw-credit, .bio-role, .doors-sub, .work-host, .eyebrow, .inst .txt, .doors-offer .doors-title {
  font-family: var(--body) !important; font-size: 13px !important; font-weight: 400 !important; letter-spacing: 0 !important;
  text-transform: none !important; color: var(--ink-soft) !important; opacity: 1 !important;
}
.caption, figcaption { font-size: 12.5px; color: var(--ink-soft); margin-top: 10px; }

/* White walls everywhere: every panel, band, stack and footer goes white. */
.panel, .stack > .panel, .stack > *, .stack > .paper, .stack > .dark, .dark, .htl.dark, .paper, .swap, .swap-b,
.footer-brand, .cm-stack .panel, .section.dark, article.panel { background: #fff !important; color: var(--ink) !important; box-shadow: none !important; }
.panel { --bg: #fff !important; --fg: #111 !important; }
.dark *, .panel *, .htl.dark *, .footer-brand * { color: inherit; }
.dark h2, .dark h3, .dark .h2, .dark p, .dark .lede, .dark .muted, .dark .label, .panel h2, .panel p, .panel .panel-sub,
.htl.dark h2, .htl.dark p, .htl.dark .when, .htl.dark strong, .htl.dark .where { color: var(--ink) !important; opacity: 1 !important; }
.dark p, .panel p, .htl.dark p, .htl.dark .where { color: var(--ink-soft) !important; }
.stack > *:not(:first-child) { box-shadow: none !important; }
/* The one allowed soft tint: an occasional warm off-white wall behind a block. */
.section.paper, .prog-cta, .past-sec { background: var(--paper) !important; }
.footer-brand::before, .footer-brand::after, .splash::before { background: transparent !important; }
.footer-word { color: var(--ink) !important; font-size: clamp(2rem, 6vw, 5rem) !important; font-weight: 500 !important; animation: none !important; filter: none !important; }
.footer-brand img { box-shadow: none !important; }

/* Works on a white wall: no mats, no frames, no rounded corners, no shadows. Air does the framing. */
*, *::before, *::after { border-radius: 0 !important; }
[class*="card"], .ocard, .frame, .hero-img, .panel-img, .story-media, .sw-img, .pcard, .wcard, .vcard, .ia-door, .grow-frame,
.past-img, .mosaic img, .vocab img, .hp-card img, .drift-row img, .masonry figure, .modal-card {
  box-shadow: none !important; border: 0 !important; background: transparent !important;
}
.nav, .splash-card, .modal, .lightbox { backdrop-filter: none !important; -webkit-backdrop-filter: none !important; }
.type-tile { background: var(--paper) !important; }
.ia-door::after, .doors-split .ia-3 .ia-door::after { display: none !important; }
.section { padding: clamp(96px, 12vw, 200px) 0; }
.section + .section { border-top: 0; }

/* Home offerings: three works hung in a row, title + one line underneath, like wall labels. */
.doors-split { grid-template-columns: minmax(280px, .9fr) 1.6fr !important; align-items: center !important; gap: clamp(40px, 7vw, 120px) !important; }
.doors-split .ia-grid, .doors-split .ia-grid.ia-3, .ia-grid {
  display: grid !important; grid-template-columns: 1.2fr .8fr !important; grid-auto-rows: auto !important; gap: clamp(28px, 3vw, 48px) clamp(20px, 2.4vw, 36px) !important;
  height: auto !important; min-height: 0 !important; flex: none !important;
}
.ia-door, .doors-split .ia-3 .ia-door { display: block !important; position: relative; min-height: 0 !important; overflow: visible !important; color: var(--ink) !important; text-decoration: none; }
.ia-door:nth-child(2) { margin-top: clamp(48px, 7vw, 120px); }
.ia-door:nth-child(3) { margin-left: 12%; }
.ia-door:nth-child(4) { margin-top: -10%; }
.ia-door img { position: relative !important; inset: auto !important; z-index: 0 !important; width: 100% !important; height: auto !important; aspect-ratio: 4 / 3; object-fit: cover; transform: none !important; transition: opacity .5s var(--ease) !important; }
.ia-door:nth-child(2) img { aspect-ratio: 3 / 4; }
.ia-txt, .doors-split .ia-3 .ia-txt { position: static !important; transform: none !important; background: none !important; padding: 12px 0 0 !important; max-width: 30em !important; }
.ia-txt b { display: block; }
.ia-txt small { display: block; color: var(--ink-soft) !important; font-size: 13px; line-height: 1.45; margin-top: 2px; opacity: 1 !important; }
.ia-arrow { display: none !important; }
.doors-hero .picado { display: none !important; }
.doors-hero { padding-top: clamp(40px, 6vw, 96px) !important; min-height: 0 !important; }

/* Offer cards and other cards: plain image above, small title below. */
.ocard { display: grid !important; grid-template-columns: 140px 1fr !important; gap: 22px !important; padding: 0 !important; transform: none !important; }
.ocard img { width: 140px !important; height: 105px !important; }
.wcard { color: var(--ink) !important; padding: 0 !important; transform: none !important; filter: none !important; }
.wcard::before { display: none !important; }
.wcard h3, .wcard p, .wc-date, .wc-yr { color: var(--ink) !important; opacity: 1 !important; }
.wc-date { font-size: 1.4rem !important; font-weight: 500 !important; }
.wc-go { background: transparent !important; color: var(--ink) !important; border: 1px solid var(--line) !important; }
.vcard { color: var(--ink) !important; transform: none !important; padding: 0 !important; }
.vcard b, .vcard p, .vcard .say { color: var(--ink) !important; opacity: 1 !important; }
.u-pill, .u-pill.hot { background: #fff !important; color: var(--ink) !important; border: 1px solid var(--line) !important; }
.seatbar i { background: var(--ink) !important; }
.pcard, a.pcard { transform: none !important; }
.press-grid, .portfolio, .cards-3 { gap: clamp(32px, 4vw, 64px) clamp(20px, 3vw, 44px) !important; }

/* Nav: white, quiet, no rule until scrolled. */
.nav { background: #fff !important; border-bottom: 1px solid transparent !important; }
.nav.solid { border-bottom-color: var(--line) !important; }
.nav-links a { font-size: 13.5px !important; color: var(--ink) !important; text-decoration: none !important; transition: color .25s; }
.nav-links a[aria-current="page"] { color: var(--ink-soft) !important; }
.lang-toggle button { font-size: 12.5px; color: var(--ink-soft); }
.lang-toggle button[aria-pressed="true"] { color: var(--ink); }

/* Buttons: small, quiet, square; text weight 500. */
.btn, .splash-enter, .splash-card .btn-primary {
  border-radius: 0 !important; font-family: var(--body) !important; font-size: 13.5px !important; font-weight: 500 !important;
  letter-spacing: 0 !important; text-transform: none !important; padding: .85em 1.35em !important; box-shadow: none !important;
  transform: none !important; transition: background .25s, color .25s, border-color .25s !important;
}
.btn-primary, .dark .btn-primary, .splash-card .btn-primary, .splash-enter { background: var(--ink) !important; color: #fff !important; border: 1px solid var(--ink) !important; }
.btn-line, .dark .btn-line { background: transparent !important; color: var(--ink) !important; border: 1px solid var(--ink) !important; }
.text-link, .pcard-read, .card .link { color: var(--ink) !important; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; font-weight: 500; }

/* ── Hover/focus: the logo's colours. Each nav item and each card has its own. ── */
.nav-links li:nth-child(5n+1) a, .ia-door:nth-child(5n+1), .ocard:nth-child(5n+1), .wcard:nth-child(5n+1), .past-card:nth-child(5n+1), .pcard:nth-child(5n+1), .card:nth-child(5n+1), .vcard:nth-child(5n+1), .port:nth-child(5n+1), .footer li:nth-child(5n+1) a, .filters button:nth-child(5n+1) { --hover: var(--monarch); }
.nav-links li:nth-child(5n+2) a, .ia-door:nth-child(5n+2), .ocard:nth-child(5n+2), .wcard:nth-child(5n+2), .past-card:nth-child(5n+2), .pcard:nth-child(5n+2), .card:nth-child(5n+2), .vcard:nth-child(5n+2), .port:nth-child(5n+2), .footer li:nth-child(5n+2) a, .filters button:nth-child(5n+2) { --hover: var(--night); }
.nav-links li:nth-child(5n+3) a, .ia-door:nth-child(5n+3), .ocard:nth-child(5n+3), .wcard:nth-child(5n+3), .past-card:nth-child(5n+3), .pcard:nth-child(5n+3), .card:nth-child(5n+3), .vcard:nth-child(5n+3), .port:nth-child(5n+3), .footer li:nth-child(5n+3) a, .filters button:nth-child(5n+3) { --hover: var(--cactus); }
.nav-links li:nth-child(5n+4) a, .ia-door:nth-child(5n+4), .ocard:nth-child(5n+4), .wcard:nth-child(5n+4), .past-card:nth-child(5n+4), .pcard:nth-child(5n+4), .card:nth-child(5n+4), .vcard:nth-child(5n+4), .port:nth-child(5n+4), .footer li:nth-child(5n+4) a, .filters button:nth-child(5n+4) { --hover: var(--desert); }
.nav-links li:nth-child(5n+5) a, .ia-door:nth-child(5n+5), .ocard:nth-child(5n+5), .wcard:nth-child(5n+5), .past-card:nth-child(5n+5), .pcard:nth-child(5n+5), .card:nth-child(5n+5), .vcard:nth-child(5n+5), .port:nth-child(5n+5), .footer li:nth-child(5n+5) a, .filters button:nth-child(5n+5) { --hover: var(--copper); }
.nav-links a:hover, .nav-links a:focus-visible, .footer a:hover, .lang-toggle button:hover { color: var(--hover) !important; }
.btn-primary:hover, .btn-primary:focus-visible, .splash-enter:hover, .splash-card .btn-primary:hover { background: var(--monarch) !important; border-color: var(--monarch) !important; color: #fff !important; }
.btn-line:hover, .btn-line:focus-visible { background: var(--night) !important; border-color: var(--night) !important; color: #fff !important; }
.nav .btn-primary:hover { background: var(--terracotta) !important; border-color: var(--terracotta) !important; }
.text-link:hover, .pcard-read:hover, .card .link:hover, a:hover > .text-link { color: var(--terracotta) !important; }
.ia-door:hover .ia-txt b, .ocard:hover h3, .wcard:hover h3, .past-card:hover h3, a.pcard:hover h3, .card:hover h3, .port:hover h3, .vcard:hover b { color: var(--hover) !important; }
.ia-door:hover img, .ocard:hover img, a.pcard:hover img, .past-card:hover img, .card:hover img { opacity: .9; }
.filters button:hover { border-color: var(--hover) !important; color: var(--hover) !important; }
.filters button[aria-pressed="true"], .chips input:checked + span { background: var(--ink) !important; color: #fff !important; border-color: var(--ink) !important; }
.press a:hover .press-title, .recent a:hover, .tl-card a:hover strong, .legal .toc a:hover { color: var(--terracotta) !important; }
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 2px solid var(--hover, var(--monarch)) !important; outline-offset: 3px; }

/* Lists and timelines: hairlines only. */
.recent li, .press li, .class-card, .class-list, .sw-list, .sw-row, .t-item { border-color: var(--line) !important; }
.timeline::after, .htl-track::before { background: var(--ink) !important; }
.t-item::before, .tl-dot { background: #fff !important; border: 1px solid var(--ink) !important; }
.filters button { border: 1px solid var(--line) !important; background: #fff !important; font-size: 13px; }

/* Forms: underlined fields. */
.field input, .field select, .field textarea { border: 0 !important; border-bottom: 1px solid #bdbdbd !important; background: transparent !important; padding-left: 0 !important; padding-right: 0 !important; }
.field input:focus, .field select:focus, .field textarea:focus { border-bottom-color: var(--ink) !important; outline: 0 !important; }
.check input { accent-color: var(--ink) !important; }
.form-msg.ok { background: var(--paper) !important; color: var(--ink) !important; }

/* Splash: the photograph stays (it IS the work); type in white with a light scrim only behind it. */
.splash::before { background: linear-gradient(90deg, rgba(0,0,0,.42), rgba(0,0,0,.1) 60%, rgba(0,0,0,0)) !important; }
.splash-card { background: transparent !important; border: 0 !important; padding: 0 !important; }
.splash-card h1 { color: #fff !important; font-size: clamp(1.8rem, 2.6vw, 2.4rem) !important; font-weight: 500 !important; line-height: 1.12 !important; }
.splash-card p, .sp-kicker, .splash-card .sp-by { color: #fff !important; font-size: 14px !important; letter-spacing: 0 !important; text-transform: none !important; font-weight: 400 !important; }
.splash-card .sp-by { display: block; margin-top: 8px !important; }
.splash-enter { background: #fff !important; color: var(--ink) !important; border-color: #fff !important; }
.splash-enter:hover { background: var(--monarch) !important; color: #fff !important; border-color: var(--monarch) !important; }
.splash-card .btn-primary { background: #fff !important; color: var(--ink) !important; border-color: #fff !important; }
.line-fields input { border-bottom: 1px solid rgba(255,255,255,.85) !important; color: #fff; }
.chips span { border: 1px solid rgba(255,255,255,.7) !important; color: #fff; font-size: 13px !important; }
.splash .chips input:checked + span { background: #fff !important; color: var(--ink) !important; }
.splash-logos .past-mini a { background: transparent !important; }

/* Motion: slow fade only. */
[data-reveal] { transform: translateY(16px); transition: opacity 1.2s var(--ease), transform 1.2s var(--ease) !important; }
[data-reveal].in { transform: none; }
@media (prefers-reduced-motion: reduce) { [data-reveal] { opacity: 1 !important; transform: none !important; transition: none !important; } }

@media (max-width: 860px) {
  .doors-split { grid-template-columns: 1fr !important; }
}
@media (max-width: 640px) {
  .doors-split .ia-grid, .doors-split .ia-grid.ia-3, .ia-grid { grid-template-columns: 1fr !important; }
  .ia-door:nth-child(n) { margin: 0 !important; }
  .ia-door:nth-child(2) img { aspect-ratio: 4 / 3; }
  .ocard { grid-template-columns: 104px 1fr !important; gap: 14px !important; }
  .ocard img { width: 104px !important; height: 80px !important; }
}
.doors-sub { margin: 10px 0 30px !important; }
.doors-h1 { margin-bottom: 0 !important; }
.doors-intro .lede { margin-bottom: 18px !important; }
.doors-offer .doors-title { margin-bottom: 18px !important; }
.ia-door:nth-child(4) { margin-top: 0; }
.ia-door:nth-child(3) { margin-top: -18%; }
.footer-word { font-size: clamp(1.4rem, 2.4vw, 2rem) !important; letter-spacing: -0.015em !important; line-height: 1.2 !important; }
.footer-brand { padding: 48px 0 56px !important; margin-top: 24px !important; border-top: 1px solid var(--line); }
.footer-brand img { width: 96px !important; background: none !important; padding: 0 !important; }

/* Gallery lockup (2026-11-09): wide wordmark+monarch, sized by height. */
.brand img { width: auto; height: 44px; }
.footer-brand img { width: auto; height: 64px; }
.splash-logo { width: 280px; height: auto; filter: drop-shadow(0 2px 12px rgba(0,0,0,.45)); background: none; padding: 0; }
@media (max-width: 768px) { .brand img { height: 34px; } .splash-logo { width: 210px; } }

/* Splash 11-09 (Teo): photos in a framed screen middle-right on a plain dark background; buttons orange, white on hover. */
.splash { background: #15110e !important; }
.splash::before { display: none !important; }
.splash-slides { position: absolute; inset: auto; z-index: 0; right: var(--gutter); top: 50%; width: min(50vw, 920px); aspect-ratio: 16 / 10; transform: translateY(-54%); border-radius: 14px; overflow: hidden; background: #000; box-shadow: 0 40px 90px -30px rgba(0,0,0,.8), 0 0 0 1px rgba(255,255,255,.08); }
.entering .splash-slides { transform: translateY(-54%) scale(1.06); opacity: 0; }
.splash-card, .splash-top, .splash-logos, .splash-enter { position: relative; z-index: 1; }
.splash-card .btn-primary, .splash-enter { background: var(--monarch) !important; color: #fff !important; border: 1px solid var(--monarch) !important; }
.splash-card .btn-primary:hover, .splash-card .btn-primary:focus-visible, .splash-enter:hover, .splash-enter:focus-visible { background: #fff !important; color: var(--monarch) !important; border-color: #fff !important; }
.splash .chips span { transition: background .25s, color .25s, border-color .25s; cursor: pointer; }
.splash .chips input:checked + span { background: var(--monarch) !important; color: #fff !important; border-color: var(--monarch) !important; }
.splash .chips label:hover span { background: #fff !important; color: var(--monarch) !important; border-color: #fff !important; }
@media (max-width: 720px) {
  .splash-slides { position: relative; right: auto; top: auto; transform: none; width: 100%; grid-column: 1; grid-row: 2; align-self: start; aspect-ratio: 16 / 10; margin-bottom: 4px; }
  .splash { grid-template-rows: auto auto auto 1fr; }
  .splash-card { grid-row: 3; }
  .splash-logos { grid-row: 4; align-self: end; }
  .entering .splash-slides { transform: scale(1.04); }
}
/* Past programs 11-09 (Teo): text only, spread left to right across the full width, nothing cut off */
.splash-logos .past-mini li img { display: none !important; }
.splash-logos { flex-direction: column !important; align-items: stretch !important; gap: 10px !important; width: 100%; }
.splash-logos .past-mini { width: 100% !important; margin-inline: 0 !important; padding-inline: 0 !important; overflow: visible !important; display: grid !important; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 14px 28px !important; }
.splash-logos .past-mini a { width: auto !important; padding: 0 0 0 12px !important; border-left: 1px solid rgba(255,255,255,.25); border-radius: 0 !important; }
.splash-logos .past-mini a:hover { border-left-color: var(--monarch); }
.splash-logos .past-mini b, .splash-logos .past-mini small { max-width: none !important; }
/* Enter the site sits under the photo screen, not on top of it */
@media (min-width: 721px) { .splash-enter { align-self: end !important; justify-self: end; } }
.splash-enter { bottom: auto !important; right: auto !important; }
.splash-logos .past-mini li, .splash-logos .past-mini a, .splash-logos .past-mini a > span { min-width: 0; }
.splash-logos .past-mini b, .splash-logos .past-mini small { white-space: normal !important; overflow: visible !important; }
@media (min-width: 721px) { .splash-slides { transform: translateY(-62%); } .entering .splash-slides { transform: translateY(-62%) scale(1.06); } }
.splash-logos .past-mini { align-items: start; }
.splash-logos .past-mini a { align-items: flex-start !important; }
@media (max-width: 720px) { .splash-logos .past-mini { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 14px !important; } .splash-top { min-width: 0; } .splash-lang { margin-right: 4px; } }
/* Past programs 11-09 v2 (Teo): one scrolling row at the very bottom, text only, edge to edge */
.splash-logos { align-self: end !important; }
.splash-logos .past-mini { display: flex !important; flex-wrap: nowrap !important; overflow-x: auto !important; overscroll-behavior-x: contain; gap: 32px !important; width: 100vw !important; margin-inline: calc(50% - 50vw) !important; padding-inline: var(--gutter) !important; scrollbar-width: none; cursor: grab; }
.splash-logos .past-mini li { flex: 0 0 auto; }
.splash-logos .past-mini b, .splash-logos .past-mini small { white-space: nowrap !important; }
@media (max-width: 720px) { .splash-logos .past-mini { gap: 20px !important; padding-inline: 16px !important; } }
/* Form panel 11-09 (Teo): see-through panel behind the waitlist form, like the earlier card */
.splash-card { background: rgba(255,255,255,.06) !important; border: 1px solid rgba(255,255,255,.16) !important; border-radius: 18px !important; padding: 28px 30px !important; box-shadow: 0 30px 70px -30px rgba(0,0,0,.7) !important; }
@media (max-width: 720px) { .splash-card { padding: 18px !important; border-radius: 14px !important; } }
@media (min-width: 721px) { .splash-card { width: min(500px, 100%) !important; } }
.splash-logos .past-mini { padding-inline: 0 !important; scroll-behavior: auto !important; }
.splash-top { left: auto !important; right: auto !important; top: auto !important; } .splash-logo { margin-left: -6px; }
/* 11-09 (Teo): form and photo screen side by side, tops and bottoms aligned; Enter the site moves to the header */
@media (min-width: 721px) {
  .splash { grid-template-columns: min(500px, 40vw) minmax(0, 1fr) !important; column-gap: clamp(32px, 5vw, 80px) !important; }
  .splash-slides { position: relative !important; inset: auto !important; right: auto !important; top: auto !important; transform: none !important; width: 100% !important; height: auto !important; aspect-ratio: auto !important; grid-column: 2; grid-row: 2; align-self: stretch !important; }
  .entering .splash-slides { transform: scale(1.04) !important; opacity: 0; }
  .splash-card { grid-column: 1; grid-row: 2; width: 100% !important; align-self: center !important; }
}
.splash-actions { display: flex; align-items: center; gap: 28px; }
.splash-actions .splash-enter { position: static !important; display: inline-flex; grid-column: auto; grid-row: auto; padding: 10px 18px !important; }
@media (max-width: 720px) { .splash-actions .splash-enter { display: none !important; } }
@media (min-width: 721px) { .splash { grid-template-rows: auto auto auto !important; align-content: space-between !important; } .splash-card { align-self: stretch !important; } }
.splash-slides { border-radius: 18px !important; } @media (max-width: 720px) { .splash-slides { border-radius: 14px !important; } }
/* 11-09 (Teo): square corners on the form panel and photo screen */
.splash-card, .splash-slides { border-radius: 0 !important; }
/* 11-09 (Teo): EN / ES to the left of Enter the site */
.splash-actions .splash-lang { order: -1; }

/* 11-09 (Teo): offerings = even 2x2 grid, same size photos, nothing staggered */
.doors-split .ia-grid, .doors-split .ia-grid.ia-3, .ia-grid { display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 36px 28px !important; align-items: start !important; }
.ia-door:nth-child(n) { margin: 0 !important; }
.ia-door:nth-child(n) img { aspect-ratio: 4 / 3 !important; }
@media (max-width: 720px) { .doors-split .ia-grid, .ia-grid { grid-template-columns: 1fr !important; } }

/* 11-09 (Teo): orange footer, white type, bigger logo */
.footer, .footer-brand { background: var(--monarch) !important; color: #fff !important; }
.footer a, .footer p, .footer h4, .footer span, .footer .brand-text, .footer-bottom { color: #fff !important; }
.footer h4 { opacity: .75; }
.footer a:hover { color: #fff !important; text-decoration: underline; text-underline-offset: 4px; }
.footer .ig-btn { border-color: rgba(255,255,255,.6) !important; background: transparent !important; }
.footer-bottom { border-top-color: rgba(255,255,255,.35) !important; }
.footer-brand { border-top: 1px solid rgba(255,255,255,.35) !important; margin-top: 0 !important; padding: 56px 0 72px !important; }
.footer-brand img { width: auto !important; height: clamp(90px, 10vw, 140px) !important; }

/* 11-09 (Teo): classes flow, sticky photo on the left wipes to the next class as the text scrolls */
.flow { padding: clamp(64px, 9vw, 140px) 0; background: #fff; }
.flow-grid { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: clamp(40px, 7vw, 120px); }
.flow-media { position: sticky; top: calc(50vh - min(30vw, 34vh)); align-self: start; }
.flow-frame { position: relative; aspect-ratio: 4 / 3.4; overflow: hidden; background: #f2ede6; }
.flow-frame img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; clip-path: inset(100% 0 0 0); transform: scale(1.12); transition: clip-path 1s cubic-bezier(.77,0,.18,1), transform 1.6s cubic-bezier(.2,.7,.1,1); z-index: 0; }
.flow-frame img.was { clip-path: inset(0 0 0 0); transform: scale(1); z-index: 1; transition: transform 1s cubic-bezier(.77,0,.18,1); transform: scale(1.04); }
.flow-frame img.on { clip-path: inset(0 0 0 0); transform: scale(1); z-index: 2; }
.flow-count { margin-top: 14px; font-size: 13px; color: var(--ink-soft); letter-spacing: .04em; }
.flow-count b { color: var(--ink); font-weight: 500; }
.flow-steps { display: flex; flex-direction: column; }
.flow-step { min-height: 78vh; display: flex; flex-direction: column; justify-content: center; opacity: .25; transform: translateY(16px); transition: opacity .6s ease, transform .8s cubic-bezier(.2,.7,.1,1); }
.flow-step:first-child { min-height: 60vh; }
.flow-step:last-child { min-height: 70vh; }
.flow-step.on { opacity: 1; transform: none; }
.flow-step .step-num { display: block; font-size: 13px; color: var(--monarch); margin-bottom: 14px; letter-spacing: .06em; }
.flow-step .h2 { margin: 0 0 12px; max-width: 16em; }
.flow-step p { color: var(--ink-soft); max-width: 30em; font-size: 1.05rem; line-height: 1.6; }
.flow-step-img { display: none; }
@media (prefers-reduced-motion: reduce) { .flow-frame img, .flow-step { transition: none !important; } }
@media (max-width: 860px) {
  .flow-grid { grid-template-columns: 1fr; gap: 0; }
  .flow-media { display: none; }
  .flow-step, .flow-step:first-child, .flow-step:last-child { min-height: 0; opacity: 1; transform: none; padding: 28px 0; }
  .flow-step-img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; margin-bottom: 18px; }
}
/* 11-09 (Teo): Enter the site transition = orange screen wipes up over the black splash, white logo pops in sharp */
.enter-veil, .enter-veil.go { background: var(--monarch) !important; clip-path: inset(100% 0 0 0) !important; opacity: 1 !important; transition: clip-path .7s cubic-bezier(.77,0,.18,1) .15s !important; }
.enter-veil.go { clip-path: inset(0 0 0 0) !important; }
.enter-veil img, .enter-veil.go img { filter: none !important; opacity: 0; transform: translateY(18px) scale(.94); transition: opacity .45s ease .7s, transform .7s cubic-bezier(.2,.8,.2,1) .7s !important; width: min(340px, 60vw) !important; }
.enter-veil.go img { opacity: 1 !important; transform: none !important; }
.entering .splash-slides { filter: none !important; }
.footer-brand img { height: clamp(110px, 12vw, 170px) !important; }

/* 11-09 (Teo): About workshops = one list, grouped by year, newest first, filter by host */
.wl-filter { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 28px; }
.wl-filter button { font: inherit; font-size: 13.5px; padding: .55em 1em; background: transparent; color: var(--ink); border: 1px solid var(--line); cursor: pointer; transition: background .2s, color .2s, border-color .2s; }
.wl-filter button i { font-style: normal; opacity: .55; margin-left: 4px; }
.wl-filter button:hover { border-color: var(--ink); }
.wl-filter button[aria-pressed="true"] { background: var(--ink); color: #fff; border-color: var(--ink); }
.wl-year { font-size: 13px !important; font-weight: 500 !important; color: var(--monarch) !important; letter-spacing: .06em; margin: 34px 0 6px !important; }
.wl-year[hidden], .wl-list[hidden], .wl-list li[hidden] { display: none !important; }
.wl-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--ink); }
.wl-row { display: grid; grid-template-columns: 110px minmax(0, 1fr) minmax(0, 260px) 28px; gap: 24px; align-items: baseline; padding: 18px 0; border-bottom: 1px solid var(--line); color: var(--ink); text-decoration: none; }
.wl-date { font-size: 14px; color: var(--ink-soft); font-variant-numeric: tabular-nums; }
.wl-main b { display: block; font-weight: 500; font-size: 1.02rem; line-height: 1.35; }
.wl-main small { display: block; font-size: 14px; color: var(--ink-soft); line-height: 1.5; margin-top: 3px; }
.wl-host { font-size: 13.5px; color: var(--ink-soft); }
.wl-go { color: var(--ink-soft); transition: transform .25s, color .25s; }
a.wl-row:hover b, a.wl-row:hover .wl-go { color: var(--monarch); }
a.wl-row:hover .wl-go { transform: translateX(4px); }
@media (max-width: 720px) {
  .wl-row { grid-template-columns: 1fr 20px; gap: 4px 12px; }
  .wl-date { grid-column: 1; }
  .wl-main { grid-column: 1; }
  .wl-host { grid-column: 1; font-size: 12.5px; }
  .wl-go { grid-column: 2; grid-row: 1 / span 3; align-self: center; }
}
/* 11-09 (Teo): huge footer logo */
.footer-brand { padding: clamp(56px, 7vw, 110px) var(--gutter) clamp(64px, 8vw, 120px) !important; display: flex !important; justify-content: center; }
.footer-brand img { width: min(1200px, 100%) !important; height: auto !important; max-height: none !important; }
/* 11-09 (Teo): big but not page-filling */
.footer-brand { padding: 40px var(--gutter) 48px !important; }
.footer-brand img { width: min(520px, 80vw) !important; }
.footer-brand img { aspect-ratio: auto !important; height: auto !important; }
/* 11-09 (Teo): every black button is orange; hover = white with orange text */
.btn-primary, .dark .btn-primary, .nav .btn-primary, .mobile-bar .btn-primary, .nav-cta, .nav .btn { background: var(--monarch) !important; color: #fff !important; border: 1px solid var(--monarch) !important; }
.btn-primary:hover, .btn-primary:focus-visible, .dark .btn-primary:hover, .nav .btn:hover, .nav-cta:hover { background: #fff !important; color: var(--monarch) !important; border-color: var(--monarch) !important; }
.filters button[aria-pressed="true"], .chips input:checked + span, .wl-filter button[aria-pressed="true"] { background: var(--monarch) !important; color: #fff !important; border-color: var(--monarch) !important; }
.wl-filter button:hover { border-color: var(--monarch); color: var(--monarch); }
.wl-filter button[aria-pressed="true"]:hover { color: #fff; }
/* 11-09 (Teo): centred submit button in the centred sign-up sections */
.section.cta form > div:last-child { text-align: center; }
.section.cta .form-msg { text-align: center; }
/* 11-09 (Teo): one divider only, copyright row has room to breathe */
.footer-brand { border-top: 0 !important; padding-top: 24px !important; }
.footer-bottom { padding: 22px 0 8px !important; align-items: center !important; }

/* 11-09 (Teo): countdown bar above the nav */
.cd-bar { background: #15110e; color: #fff; font-size: 13.5px; }
.cd-bar a { display: flex; align-items: center; justify-content: center; gap: 14px; padding: 9px 16px; color: #fff; text-decoration: none; }
.cd-time { font-variant-numeric: tabular-nums; font-weight: 600; color: var(--monarch); background: #fff; padding: 2px 8px; letter-spacing: .04em; }
.cd-go { color: #fff; text-decoration: underline; text-underline-offset: 3px; }
.cd-bar a:hover .cd-go { color: var(--monarch); }
@media (max-width: 720px) { .cd-bar { font-size: 12px; } .cd-bar a { gap: 8px; padding: 8px 10px; } .cd-go { display: none; } }

/* 11-09 (Teo): splash quiz, one question at a time */
.quiz { display: block !important; }
.qz-top { display: flex; justify-content: space-between; align-items: center; font-size: 12.5px; color: rgba(255,255,255,.7); margin-bottom: 8px; }
.qz-top b { color: #fff; font-weight: 600; }
.qz-back { background: none; border: 0; color: rgba(255,255,255,.8); font: inherit; cursor: pointer; padding: 0; }
.qz-back:hover { color: #fff; }
.qz-bar { height: 3px; background: rgba(255,255,255,.15); margin-bottom: 20px; }
.qz-bar i { display: block; height: 100%; width: 25%; background: var(--monarch); transition: width .45s cubic-bezier(.2,.7,.1,1); }
.qz-q { border: 0; margin: 0; padding: 0; min-width: 0; display: none; }
.qz-q.on { display: block; animation: qz-in .45s cubic-bezier(.2,.7,.1,1) both; }
@keyframes qz-in { from { opacity: 0; transform: translateX(18px); } to { opacity: 1; transform: none; } }
.qz-q legend { color: #fff; font-size: 1.15rem; font-weight: 500; margin-bottom: 14px; padding: 0; }
.qz-opts { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.qz-opts label { position: relative; cursor: pointer; }
.qz-opts input { position: absolute; opacity: 0; pointer-events: none; }
.qz-opts span { display: block; padding: 14px 16px; border: 1px solid rgba(255,255,255,.35); color: #fff; font-size: 14.5px; transition: background .2s, color .2s, border-color .2s; }
.qz-opts label:hover span { background: #fff; color: var(--monarch); border-color: #fff; }
.qz-opts input:checked + span { background: var(--monarch); border-color: var(--monarch); color: #fff; }
.qz-opts input:focus-visible + span { outline: 2px solid #fff; outline-offset: 2px; }
.quiz .line-fields { margin-bottom: 16px; }
.quiz .btn-primary { width: 100%; }
.quiz.sent .qz-q, .quiz.sent .qz-top, .quiz.sent .qz-bar { display: none !important; }
@media (prefers-reduced-motion: reduce) { .qz-q.on { animation: none; } }
@media (max-width: 720px) { .qz-opts span { padding: 11px 12px; font-size: 13.5px; } }
/* 11-09 (Teo): countdown bar stays on screen while scrolling, nav sits right under it */
.cd-bar { position: sticky; top: 0; z-index: 60; }
.nav { top: var(--cdh, 0px) !important; }
.nav-autohide .nav { top: var(--cdh, 0px) !important; }
.eb-note { display: flex; align-items: center; gap: 8px; font-size: 13px !important; color: rgba(255,255,255,.85) !important; margin: -8px 0 16px !important; }
.eb-note b { font-variant-numeric: tabular-nums; background: #fff; color: var(--monarch); padding: 1px 7px; font-weight: 600; }
.eb-note[hidden] { display: none !important; }
.flow-step { min-height: calc(100vh - 140px) !important; } @media (max-width: 860px) { .flow-step { min-height: 0 !important; } }
/* 11-09 (Teo): group program CTA = a clean centred button, no grey slab */
.paper:has(> .prog-cta), .prog-cta { background: transparent !important; }
.prog-cta { padding: clamp(28px, 4vw, 56px) var(--gutter) clamp(56px, 7vw, 96px) !important; display: flex; justify-content: center; }
/* 11-09 (Teo): footer hexagon light grid */
.footer-brand { position: relative; overflow: hidden; }
.footer-brand .hex-cv { position: absolute; inset: 0; pointer-events: none; z-index: 0; }
.footer-brand img { position: relative; z-index: 1; }
/* 11-09 (Teo): standalone quiz page (Join now), only the quiz on a dark page */
.quiz-page { background: #15110e; color: #fff; }
.qp { min-height: 100svh; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 96px 16px 48px; position: relative; }
.qp-top { position: absolute; top: 24px; left: var(--gutter); right: var(--gutter); display: flex; justify-content: space-between; align-items: center; }
.qp-logo img { width: clamp(150px, 16vw, 220px); height: auto; display: block; }
.qp-card { width: min(560px, 100%) !important; }
.qp-card h1 { margin-bottom: 8px; }
.qp-back { margin-top: 20px; color: rgba(255,255,255,.7); text-decoration: none; font-size: 14px; }
.qp-back:hover { color: #fff; }
.qp-card { align-self: center !important; justify-self: center !important; margin-inline: auto !important; grid-column: auto !important; grid-row: auto !important; }
/* 11-09 (Teo): every pinned photo sits centred in the space under the countdown bar + nav, text centred beside it */
@media (min-width: 861px) {
  .story-media { top: calc(var(--hdr, 125px) + 32px) !important; height: calc(100svh - var(--hdr, 125px) - 64px) !important; }
  .story-step { min-height: calc(100svh - var(--hdr, 125px)) !important; }
  .story-step:first-child { min-height: calc(100svh - var(--hdr, 125px) - 32px) !important; }
  .bio-photo, .work-grid > .h2, .tl-head { top: calc(var(--hdr, 125px) + 32px) !important; }
  .swap-sticky, .htl-sticky, .hz-sticky { top: var(--hdr, 125px) !important; height: calc(100svh - var(--hdr, 125px)) !important; }
  .stack > * { top: var(--hdr, 125px) !important; }
}
/* 11-09 (Teo): hexagons run all the way up to the white line; copyright row moves under the logo */
.footer-brand { flex-direction: column !important; align-items: center !important; padding: 56px 0 28px !important; }
.footer-brand::before { content: ''; position: absolute; top: 0; left: var(--gutter); right: var(--gutter); height: 1px; background: rgba(255,255,255,.35); z-index: 1; display: block !important; }
.footer-brand .fb-row { position: relative; z-index: 1; width: 100%; margin-top: 44px; }
.footer-brand .footer-bottom { border-top: 0 !important; padding: 0 !important; display: flex; align-items: center; gap: 24px; }
.footer > .wrap { padding-bottom: 0 !important; }
.footer-grid { padding-bottom: 48px !important; }
.footer-brand::before { background: rgba(255,255,255,.35) !important; }
/* 11-09 (Teo): exhibitions + talks use the same clean list as workshops */
.wl-list .wl-row .wl-date { white-space: nowrap; }
.section:has(> .wrap > .wl) { padding-bottom: clamp(48px, 6vw, 88px) !important; }
@media (min-width: 721px) { .wl-row { grid-template-columns: 140px minmax(0, 1fr) minmax(0, 260px) 28px; } }
.footer-brand::before { left: 0 !important; right: 0 !important; }
/* 11-09 (Teo): story pages get the "01 / 05" counter under the pinned photo */
@media (min-width: 861px) {
  .story-pin { position: sticky; top: calc(var(--hdr, 125px) + 32px); align-self: start; }
  .story-pin .story-media { position: relative !important; top: auto !important; height: calc(100svh - var(--hdr, 125px) - 64px - 34px) !important; }
}
@media (max-width: 860px) { .story-pin .flow-count { display: none; } }
/* 11-09 (Teo): top bar alternates next-workshop announcement and early-bird timer */
.cd-bar.cd-rotate { position: sticky; display: grid; }
.cd-bar.cd-rotate > a { grid-area: 1 / 1; opacity: 0; visibility: hidden; transform: translateY(6px); transition: opacity .45s ease, transform .45s ease, visibility 0s .45s; }
.cd-bar.cd-rotate > a.cd-on { opacity: 1; visibility: visible; transform: none; transition: opacity .45s ease, transform .45s ease; }
.cd-ev { display: flex; align-items: center; justify-content: center; gap: 14px; padding: 9px 16px; color: #fff; text-decoration: none; min-width: 0; }
.cd-tag { background: var(--monarch); color: #fff; font-weight: 600; font-size: 12px; padding: 3px 8px; letter-spacing: .02em; white-space: nowrap; }
.cd-title { font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.cd-meta { color: rgba(255,255,255,.75); white-space: nowrap; }
@media (max-width: 720px) { .cd-ev { gap: 8px; padding: 8px 10px; } .cd-meta { display: none; } }
@media (prefers-reduced-motion: reduce) { .cd-bar.cd-rotate > a { transition: none; } }

/* 11-09 (Veronica): back to her original illustrated logo everywhere (she already uses it on print). */
.brand img { width: auto !important; height: 60px !important; }
@media (max-width: 768px) { .brand img { height: 46px !important; } }
/* on dark / orange grounds the logo gets the white sticker outline so the brown lettering reads */
.splash-logo, .qp-logo img, .footer-brand img, .enter-veil img {
  filter: drop-shadow(0 0 1px #fff) drop-shadow(0 0 1px #fff) drop-shadow(0 0 1px #fff) drop-shadow(0 0 6px rgba(255,248,235,.85)) !important;
}
.splash-logo { width: clamp(130px, 13vw, 180px) !important; height: auto !important; margin-left: 0 !important; }
.qp-logo img { width: clamp(120px, 12vw, 160px) !important; }
.footer-brand img { width: min(280px, 60vw) !important; height: auto !important; }
.enter-veil img, .enter-veil.go img { width: min(300px, 55vw) !important; }
/* 11-09 (Veronica bug): booking panel taller than the pinned area on smaller laptops; let it scroll inside, never cut */
@media (min-width: 861px) {
  .swap-panel { align-items: safe center !important; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; }
  .swap-panel > .wrap { padding-top: 24px; padding-bottom: 24px; }
}
@media (min-width: 861px) and (max-height: 820px) {
  .swap-b textarea { min-height: 90px !important; height: 90px; }
  .swap-b .field { margin-bottom: 0; }
}
.wl-lede { color: var(--ink-soft); margin: 0 0 26px; max-width: 40em; }
/* 11-10 (Teo): with the full-colour logo, the enter wipe is white (logo was made for a light ground; orange-on-orange looked off) */
.enter-veil, .enter-veil.go { background: #fff !important; }
.enter-veil img, .enter-veil.go img { filter: none !important; width: min(340px, 60vw) !important; }

/* :: Scroll perf (11-10): flow photos get their own GPU layer so the wipe does not repaint the page; nav drops the live blur, which re-rendered on every scrolled frame :: */
.flow-frame { contain: paint; }
.flow-frame img { will-change: clip-path, transform; backface-visibility: hidden; }
.nav { backdrop-filter: none !important; -webkit-backdrop-filter: none !important; }
.qz-fine { margin: 12px 0 0; font-size: 12px; color: rgba(255,255,255,.6); }
.qz-fine a { color: inherit; text-decoration: underline; }
#work { scroll-margin-top: 150px; }
/* :: Phone splash: "Enter the site" is an orange button like the desktop one (Veronica 11-11) :: */
@media (max-width: 720px) {
  .enter-inline { display: block !important; background: var(--monarch); color: #fff !important; border: 1px solid var(--monarch); text-align: center; font-weight: 600; font-size: 1rem; padding: 13px 18px; margin-top: 14px; opacity: 1; border-radius: 0; text-decoration: none; }
  .enter-inline:active { background: #fff; color: var(--monarch) !important; }
}
/* :: Plan-a-Program inquiry quiz (11-11) :: */
.iq .iq-top { display: flex; justify-content: space-between; align-items: center; font-size: 13px; color: var(--ink-soft); }
.iq .iq-back { background: none; border: 0; font: inherit; color: var(--ink); cursor: pointer; padding: 4px 0; }
.iq .iq-bar { height: 3px; background: var(--line); margin: 10px 0 22px; }
.iq .iq-bar i { display: block; height: 100%; width: 20%; background: var(--monarch); transition: width .35s ease; }
.iq .iq-q { display: none; border: 0; padding: 0; margin: 0; min-width: 0; }
.iq .iq-q.on { display: block; animation: iqIn .35s ease; }
@keyframes iqIn { from { opacity: 0; transform: translateX(14px); } to { opacity: 1; transform: none; } }
.iq legend { font-size: 1.45rem; font-weight: 500; line-height: 1.2; margin: 0 0 16px; padding: 0; }
.iq .iq-sub { font-size: 13px; color: var(--ink-soft); margin: 16px 0 8px; }
.iq .iq-opts { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.iq .iq-opts label { position: relative; display: flex; align-items: center; min-height: 52px; padding: 12px 14px; border: 1px solid var(--line); cursor: pointer; font-size: .95rem; line-height: 1.3; transition: border-color .2s, background .2s; }
.iq .iq-opts label:hover { border-color: var(--ink); }
.iq .iq-opts input { position: absolute; opacity: 0; pointer-events: none; }
.iq .iq-opts label:has(input:checked) { border-color: var(--monarch); background: var(--monarch); color: #fff; }
.iq .iq-opts label:has(input:focus-visible) { outline: 2px solid var(--monarch); outline-offset: 2px; }
.iq .iq-next { margin-top: 20px; }
.iq .field { margin-top: 14px; }
.iq-cal { border: 1px solid var(--line); padding: 12px; max-width: 360px; user-select: none; }
.iq-cal-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.iq-cal-head b { font-weight: 500; text-transform: capitalize; }
.iq-cal-head button { background: none; border: 1px solid var(--line); width: 34px; height: 34px; cursor: pointer; font: inherit; }
.iq-cal-head button:disabled { opacity: .3; cursor: default; }
.iq-cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; text-align: center; }
.iq-cal-grid i { font-style: normal; font-size: 12px; color: var(--ink-soft); padding: 4px 0; text-transform: uppercase; }
.iq-cal-grid button { aspect-ratio: 1; border: 1px solid transparent; background: none; font: inherit; font-size: .9rem; cursor: pointer; color: var(--ink); }
.iq-cal-grid button:hover:not(:disabled) { border-color: var(--ink); }
.iq-cal-grid button.today { border-color: var(--line); }
.iq-cal-grid button.sel { background: var(--monarch); color: #fff; border-color: var(--monarch); }
.iq-cal-grid button:disabled { color: #c8c2ba; cursor: default; }
.iq-picked { font-size: 13px; color: var(--ink-soft); margin: 10px 0 0; min-height: 1.2em; }
.iq-flex { display: flex; gap: 8px; align-items: center; font-size: .95rem; margin-top: 8px; cursor: pointer; }
.iq.iq-sent .iq-q, .iq.iq-sent .iq-top, .iq.iq-sent .iq-bar { display: none; }
@media (max-width: 600px) { .iq .iq-opts { grid-template-columns: 1fr; } .iq-cal { max-width: none; } }
.iq-cal-grid button { aspect-ratio: auto; height: 34px; }
.iq-cal { max-width: 330px; padding: 10px; }
.iq .iq-next { margin-top: 16px; }