/* Banda Original — stage landing. Paper masthead receives the logo; the page below is lit like a stage. */
:root{
  --paper:#f3eee4;--paper-2:#e8dfcf;--ink:#211b17;--muted:#6b5e51;--line:#d4c8b6;
  --red:#741d2a;--red-hot:#a8232f;--red-deep:#4a0f19;--gold:#e2b24c;--gold-soft:#f1d79c;
  --stage:#100c0b;--stage-2:#171210;--stage-line:#ffffff1c;--stage-muted:#c9bcad;
  --display:'Iowan Old Style','Palatino Linotype',Palatino,'Book Antiqua',Georgia,serif;
  --sans:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif;
  --space:clamp(20px,4.2vw,72px);--header:120px;--ease-out:cubic-bezier(.22,1,.36,1);--ease-spring:cubic-bezier(.34,1.4,.64,1);
  --shadow-paper:0 1px 1px #2a1a1012,0 2px 4px #2a1a1012,0 8px 16px #2a1a1014,0 24px 48px -8px #2a1a1026,0 56px 96px -24px #2a1a1033;
  --shadow-paper-lift:0 2px 2px #2a1a1014,0 6px 10px #2a1a1016,0 18px 32px #2a1a101c,0 44px 80px -12px #2a1a1033,0 90px 140px -40px #2a1a1040;
  --grain:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
html{scroll-padding-top:88px;background:var(--paper)}
body{max-width:none;margin:0;background:var(--paper);color:var(--ink);font-family:var(--sans);text-rendering:optimizeLegibility}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.kicker{margin:0;font:600 11px/1.4 var(--sans);letter-spacing:.2em;text-transform:uppercase;color:var(--gold)}
::selection{background:var(--red);color:var(--paper)}

/* Masthead: stable 2:1 brand box for the intro arrival. */
.masthead{position:relative;z-index:5;height:var(--header);margin:0;padding:0 var(--space);border:0;background:var(--paper);display:flex;align-items:center;justify-content:space-between}
.brand{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:200px;height:100px}
.header-navigation{display:flex;gap:30px;font:500 13px/1 var(--sans);letter-spacing:.02em}
.header-navigation a{position:relative;display:inline-flex;align-items:center;justify-content:center;min-height:44px;min-width:44px;color:var(--ink)}
.header-navigation a::after{content:"";position:absolute;left:0;right:0;bottom:10px;height:1px;background:var(--red);transform:scaleX(0);transform-origin:right;transition:transform 420ms var(--ease-out)}
.header-navigation a:hover{color:var(--red)}
.header-navigation a:hover::after{transform:scaleX(1);transform-origin:left}
.header-actions{display:flex;align-items:center;gap:12px;margin-left:auto}
.booking-link{display:inline-flex;align-items:center;min-height:46px;padding:0 24px;border-radius:999px;background:var(--red);color:var(--paper);font:600 13px/1 var(--sans);letter-spacing:.02em;box-shadow:inset 0 1px 0 #ffffff2e,0 1px 2px #4a0f1933,0 8px 20px -8px #741d2a99;transform:translate(var(--mx,0),var(--my,0));transition:transform 500ms var(--ease-out),background 220ms ease,box-shadow 220ms ease}
.booking-link:hover{background:var(--red-hot);color:var(--paper);box-shadow:inset 0 1px 0 #ffffff38,0 2px 4px #4a0f1933,0 14px 30px -10px #a8232fbb}
.index-button{display:none;width:46px;height:46px;padding:0;border:0;border-radius:50%;place-content:center;gap:6px;background:transparent}
.index-button span{display:block;width:20px;height:1.5px;background:var(--ink);font-size:0}

/* Floating navigation */
.float-nav{position:fixed;z-index:20;top:14px;left:50%;display:flex;align-items:center;gap:2px;padding:6px;border-radius:999px;background:#15100ecc;border:1px solid #ffffff1f;box-shadow:0 1px 0 #ffffff14 inset,0 10px 40px -10px #000c;-webkit-backdrop-filter:blur(16px) saturate(1.5);backdrop-filter:blur(16px) saturate(1.5);opacity:0;visibility:hidden;transform:translate(-50%,-140%);transition:transform 600ms var(--ease-out),opacity 300ms ease,visibility 0s linear 600ms}
.float-nav.is-visible{opacity:1;visibility:visible;transform:translate(-50%,0);transition:transform 700ms var(--ease-spring),opacity 300ms ease,visibility 0s}
.float-nav a{display:inline-flex;align-items:center;min-height:38px;padding:0 15px;border-radius:999px;color:#f3eee4cc;font:500 13px/1 var(--sans);transition:background 200ms ease,color 200ms ease}
.float-nav a:hover,.float-nav a.is-current{color:var(--paper);background:#ffffff14}
.float-nav .float-cta{margin-left:4px;background:var(--paper);color:var(--red);font-weight:600}
.float-nav .float-cta:hover{background:#fff;color:var(--red)}
.intro-active .float-nav{display:none}

/* Buttons */
.button{position:relative;isolation:isolate;display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:52px;padding:0 28px;border-radius:999px;overflow:hidden;font:600 14px/1 var(--sans);letter-spacing:.015em;transform:translate(var(--mx,0),var(--my,0));transition:transform 520ms var(--ease-out),background 240ms ease,color 240ms ease,box-shadow 240ms ease,border-color 240ms ease}
.button::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(110deg,transparent 30%,#ffffffa6 48%,transparent 66%);transform:translateX(-120%);transition:transform 900ms var(--ease-out)}
.button:hover::after{transform:translateX(120%)}
.button-light{background:var(--paper);color:var(--red);box-shadow:inset 0 1px 0 #fff,0 1px 2px #0003,0 12px 34px -10px #000c}
.button-light:hover{background:#fffaf1;color:var(--red-deep)}
.button-ghost{color:var(--paper);border:1px solid #f3eee466;background:#f3eee40f;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.button-ghost::after{background:linear-gradient(110deg,transparent 30%,#ffffff33 48%,transparent 66%)}
.button-ghost:hover{border-color:#f3eee4cc;background:#f3eee41f}

/* Hero stage */
.opening{padding:0;background:var(--stage)}
.landing-scene{position:relative;height:calc(100svh - var(--header));min-height:540px;max-height:none;margin:0;overflow:hidden;background:var(--stage);isolation:isolate;color:var(--paper)}
.landing-scene picture{position:absolute;inset:0;display:block;transform:translate3d(0,calc(var(--hero-p,0)*14%),0)}
.landing-scene .landing-photo{position:absolute;inset:0;width:100%;height:100%;max-width:none;object-fit:cover;object-position:var(--focus-wide)}
.stage-light{position:absolute;inset:0;z-index:1;width:100%;height:100%;display:block;opacity:0;pointer-events:none;transition:opacity 1200ms ease;transform:translate3d(0,calc(var(--hero-p,0)*14%),0)}
.stage-ready .stage-light{opacity:1}
.stage-shade{position:absolute;inset:0;z-index:2;pointer-events:none;background:linear-gradient(180deg,#100c0b66 0%,#100c0b00 16%,#100c0b00 52%,#100c0b99 82%,#100c0bf0 100%),radial-gradient(75% 65% at 0% 100%,#100c0bcc 0%,#100c0b00 72%)}
.scene-caption{position:absolute;z-index:3;left:var(--space);right:var(--space);bottom:clamp(28px,6vh,64px);display:block;max-width:720px;padding:0;color:var(--paper);pointer-events:none}
.scene-caption>*{transform:translate3d(0,calc(var(--hero-p,0)*-70px),0);opacity:calc(1 - var(--hero-p,0)*1.6)}
.band-location{margin:0 0 14px;font:600 11px/1.4 var(--sans);letter-spacing:.22em;text-transform:uppercase;color:var(--gold-soft);text-shadow:0 1px 2px #000,0 0 16px #000c}
.scene-title{margin:0;font:400 clamp(30px,3.4vw,52px)/1.06 var(--display);letter-spacing:-.025em;text-wrap:balance;text-shadow:0 2px 24px #000a,0 1px 2px #0006}
.scene-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:28px;pointer-events:auto}
.scene-credit{position:fixed;display:none}
@media (min-aspect-ratio:1/1){.scene-credit{position:absolute;display:block;right:0;bottom:4px;max-width:none;margin:0;font:500 12px/1.4 var(--sans);letter-spacing:.06em;color:#f3eee4b3;text-shadow:0 1px 6px #000a}}
.scene-caption:has(.scene-credit){max-width:none}
.scene-caption:has(.scene-credit)>:not(.scene-credit){max-width:720px}

/* Shared stage sections */
.stage-section{position:relative;isolation:isolate;background:var(--stage);color:var(--paper)}
.stage-section::before,.contact::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background-image:var(--grain);background-size:160px;opacity:.07;mix-blend-mode:overlay}
.section-inner{width:calc(100% - var(--space)*2);max-width:1280px;margin:0 auto}
.section-heading{display:flex;align-items:baseline;justify-content:space-between;gap:24px;margin:0 0 clamp(28px,4vw,48px)}
.section-heading h2,.band-heading h2,.contact h2{margin:0;font:400 clamp(36px,4.2vw,58px)/1.05 var(--display);letter-spacing:-.03em}
.text-link{display:inline-flex;align-items:center;gap:8px;min-height:44px;font:500 13px/1 var(--sans);color:var(--stage-muted);border-bottom:1px solid #ffffff33;transition:color 200ms ease,border-color 200ms ease}
.text-link:hover{color:var(--paper);border-color:var(--gold)}
.text-link span{transition:transform 400ms var(--ease-out)}
.text-link:hover span{transform:translate(2px,-2px)}

/* A banda */
.band{padding:clamp(64px,9vw,128px) 0 clamp(56px,7vw,96px);background:radial-gradient(1200px 600px at 75% 0%,#2a1414 0%,transparent 60%),var(--stage)}
.band-layout{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2.3fr);gap:clamp(28px,4.5vw,72px);width:calc(100% - var(--space)*2);max-width:1280px;margin:0 auto;align-items:stretch}
.band-aside{display:flex;flex-direction:column;justify-content:space-between;gap:32px;min-width:0}
.band-heading{padding-top:4px}
.band-heading .kicker{margin-bottom:16px}
.band-about{max-width:34ch;margin:18px 0 0;font:16px/1.6 var(--sans);color:var(--stage-muted)}
.ensemble-photo{display:block;cursor:zoom-in;perspective:1200px}
.photo-frame{position:relative;display:block;overflow:hidden;border-radius:6px;transform:perspective(1100px) rotateX(var(--rx,0)) rotateY(var(--ry,0));transform-style:preserve-3d;transition:transform 700ms var(--ease-out),box-shadow 500ms var(--ease-out)}
.photo-frame img{width:100%;height:auto;display:block;transition:transform 1200ms var(--ease-out)}
.photo-frame picture{display:contents}
.photo-glare{position:absolute;inset:0;pointer-events:none;background:radial-gradient(520px circle at var(--gx,50%) var(--gy,30%),#ffffff38,#ffffff00 42%);mix-blend-mode:soft-light;opacity:0;transition:opacity 400ms ease}
.tilt:hover .photo-glare{opacity:1}
.ensemble-photo .photo-frame{box-shadow:0 0 0 1px #ffffff12,0 40px 120px -30px #a8232f66,0 30px 60px -30px #000}
.ensemble-photo:hover img{transform:scale(1.025)}
.milestones{display:flex;flex-direction:column;margin:0;padding:0;list-style:none}
.milestone{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:0 18px;padding:18px 0;border-top:1px solid var(--stage-line)}
.milestone strong{font:400 clamp(44px,4.2vw,64px)/1 var(--display);letter-spacing:-.04em;font-variant-numeric:tabular-nums;min-width:1.25em;background:linear-gradient(180deg,var(--gold-soft) 10%,var(--gold) 60%,#a77a2a 100%);-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 6px 24px #e2b24c33)}
.milestone span{max-width:24ch;font:14px/1.45 var(--sans);color:var(--stage-muted)}

/* Vídeos */
.videos{padding:clamp(64px,8vw,120px) 0;border:0;background:linear-gradient(180deg,var(--stage) 0%,#0a0807 100%)}
.video-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(20px,3vw,40px);align-items:start}
.video-card{min-width:0}
.video-frame{position:relative;aspect-ratio:16/9;min-height:0;border-radius:10px;overflow:hidden;background:#000;box-shadow:0 0 0 1px #ffffff14,0 30px 70px -30px #000,0 20px 80px -40px #a8232f55;transform:perspective(1100px) rotateX(var(--rx,0)) rotateY(var(--ry,0));transition:transform 700ms var(--ease-out),box-shadow 400ms ease}
.video-frame:hover{box-shadow:0 0 0 1px #ffffff26,0 40px 90px -30px #000,0 30px 100px -40px #a8232f88}
.video-frame.is-playing{transform:none}
.video-cover{position:absolute;inset:0;display:block;color:var(--paper)}
.video-cover img{width:100%;height:100%;object-fit:cover;transform:scale(1.001);transition:transform 1200ms var(--ease-out),filter 600ms ease;filter:saturate(.9) brightness(.82)}
.video-cover:hover img{transform:scale(1.05);filter:saturate(1.05) brightness(.95)}
.video-cover::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 45%,#000b 100%);pointer-events:none}
.video-play{position:absolute;left:50%;top:50%;z-index:1;width:76px;height:76px;display:grid;place-items:center;padding:0;border:1px solid #ffffff55;border-radius:50%;background:#ffffff1f;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);box-shadow:0 10px 40px -8px #000a,inset 0 1px 0 #ffffff40;transform:translate(-50%,-50%);transition:transform 500ms var(--ease-spring),background 300ms ease}
.video-play svg{width:26px;height:26px;margin-left:4px;fill:var(--paper)}
.video-play::before{content:"";position:absolute;inset:-1px;border-radius:50%;border:1px solid #f3eee4aa;animation:ring 2.6s var(--ease-out) infinite}
.video-cover:hover .video-play{transform:translate(-50%,-50%) scale(1.08);background:#a8232fcc}
.video-action{position:absolute;left:20px;bottom:16px;z-index:1;font:600 11px/1.4 var(--sans);letter-spacing:.16em;text-transform:uppercase;color:#f3eee4d9}
.video-frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.video-caption{padding-top:18px}
.video-caption h3{margin:0;font:400 24px/1.25 var(--display);letter-spacing:-.015em;color:var(--paper)}
.video-caption small{display:block;margin-top:6px;font:13px/1.5 var(--sans);color:var(--stage-muted)}
@keyframes ring{0%{transform:scale(1);opacity:.7}100%{transform:scale(1.55);opacity:0}}

/* Fotos: one edge-to-edge mosaic on the stage, not a row of loose prints. */
.gallery{position:relative;isolation:isolate;padding:clamp(64px,8vw,120px) 0 0;background:#0a0807;color:var(--paper)}
.gallery .section-heading{margin-bottom:clamp(24px,3vw,40px)}
.photo-grid{--gap:4px;--row:calc((100vw - var(--gap)*3)/4*1.25);display:grid;grid-template-columns:repeat(4,minmax(0,1fr));grid-auto-rows:var(--row);grid-template-areas:"a b c d" "e f g h";gap:var(--gap)}
.photo-card{position:relative;display:block;min-width:0;min-height:0;overflow:hidden;cursor:zoom-in;background:#15100e}
.photo-card .photo-frame{height:100%;border-radius:0;transform:none}
.photo-card img{height:100%;object-fit:cover;object-position:var(--focus,50% 50%);filter:brightness(.9) saturate(.95);transition:transform 1200ms var(--ease-out),filter 500ms ease}
.photo-card::after{content:"";position:absolute;inset:0;pointer-events:none;box-shadow:inset 0 0 0 1px #ffffff0d;background:linear-gradient(180deg,transparent 60%,#0a080766)}
.photo-card:hover img,.photo-card:focus-visible img{transform:scale(1.04);filter:brightness(1.02) saturate(1.05)}
.photo-card:focus-visible{outline:2px solid var(--gold);outline-offset:-2px}
.tile-a{grid-area:a}.tile-b{grid-area:b}.tile-c{grid-area:c}.tile-d{grid-area:d}.tile-e{grid-area:e}.tile-f{grid-area:f}.tile-g{grid-area:g}.tile-h{grid-area:h}
.show-narrow{display:none}
.band-cta{align-self:flex-start;margin-top:8px}

/* Música */
.music{position:relative;padding:0 0 clamp(72px,9vw,128px);background:var(--paper)}
.music-layout{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);gap:clamp(24px,4vw,64px);align-items:stretch;padding-top:clamp(48px,6vw,88px);border-top:1px solid var(--line)}
.music-layout>.section-heading{grid-column:1/-1;margin-bottom:0}
.spotify-card{min-width:0}
.spotify-frame{position:relative;height:352px;border-radius:14px;overflow:hidden;background:radial-gradient(500px 300px at 20% 10%,#1ed76033,transparent 70%),radial-gradient(600px 400px at 100% 100%,#741d2a66,transparent 70%),#121010;box-shadow:var(--shadow-paper)}
.spotify-frame iframe{display:block;width:100%;height:100%;border:0}
.spotify-cover{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:space-between;padding:28px;color:var(--paper);transition:background 300ms ease}
.spotify-cover:hover{background:#ffffff08}
.spotify-mark{width:52px;height:52px}
.spotify-mark circle{fill:#1ed760}
.spotify-mark path{stroke:#121010;stroke-width:1.9}
.spotify-copy{display:flex;flex-direction:column;gap:8px}
.spotify-action{font:400 clamp(28px,3vw,40px)/1.05 var(--display);letter-spacing:-.02em}
.spotify-copy small{font:13px/1.4 var(--sans);color:#f3eee4b3}
.spotify-bars{position:absolute;right:28px;bottom:32px;display:flex;align-items:flex-end;gap:4px;height:44px}
.spotify-bars i{display:block;width:5px;height:100%;border-radius:3px;background:#1ed760;transform-origin:bottom;animation:eq 1.2s ease-in-out infinite;animation-delay:calc(var(--d,0)*-1s)}
.spotify-bars i:nth-child(1){--d:.2}.spotify-bars i:nth-child(2){--d:.7}.spotify-bars i:nth-child(3){--d:.4}.spotify-bars i:nth-child(4){--d:.9}.spotify-bars i:nth-child(5){--d:.1}
@keyframes eq{0%,100%{transform:scaleY(.25)}50%{transform:scaleY(1)}}
.disc-list{display:flex;flex-direction:column;justify-content:flex-end;min-width:0}
.disc-list .kicker{color:var(--muted);margin-bottom:10px}
.disc-item{display:flex;align-items:baseline;justify-content:space-between;gap:16px;min-height:44px;padding:22px 0;border:0;border-bottom:1px solid var(--line);grid-template-columns:none}
.disc-item:first-of-type{border-top:1px solid var(--line)}
.disc-name{font:400 clamp(22px,2.2vw,28px)/1.2 var(--display);letter-spacing:-.015em;color:var(--ink);transition:color 200ms ease}
.disc-action{flex-shrink:0;display:inline-flex;gap:6px;margin:0;font:500 12px/1.4 var(--sans);color:var(--muted);grid-column:auto}
.disc-action span{font-size:14px;transition:transform 400ms var(--ease-out)}
.disc-item:hover .disc-name{color:var(--red)}
.disc-item:hover .disc-action span{transform:translate(3px,-3px)}

/* Contato */
.contact{position:relative;isolation:isolate;overflow:hidden;padding:clamp(72px,10vw,150px) var(--space);color:var(--paper);background:radial-gradient(900px circle at var(--cx,72%) var(--cy,20%),#c43a46a6 0%,transparent 55%),linear-gradient(160deg,#5c1520 0%,var(--red) 45%,var(--red-deep) 100%);transition:background-position 600ms ease}
.contact::after{content:"";position:absolute;z-index:-1;top:-20%;right:-8%;width:72%;height:150%;pointer-events:none;background:conic-gradient(from 196deg at 72% 0%,transparent 0deg,#ffd9a02e 7deg,transparent 16deg,transparent 27deg,#ffffff1f 33deg,transparent 42deg,transparent 52deg,#ffb3a826 57deg,transparent 64deg);filter:blur(5px);mix-blend-mode:screen;transform-origin:72% 0%;animation:sweep 16s ease-in-out infinite alternate}
@keyframes sweep{from{transform:rotate(-7deg)}to{transform:rotate(9deg)}}
.reduced-motion .contact::after{animation:none}
.contact-layout{max-width:1280px;margin:0 auto}
.contact h2{max-width:16ch;font-size:clamp(40px,5.4vw,80px);text-wrap:balance;text-shadow:0 2px 30px #0004}
.contact-note{max-width:44ch;margin:22px 0 0;font:17px/1.55 var(--sans);color:#f3eee4d9}
.contact-actions{display:flex;flex-wrap:wrap;align-items:center;gap:14px 26px;margin-top:36px}
.contact-handle{display:inline-flex;align-items:center;min-height:44px;font:500 14px/1 var(--sans);color:#f3eee4cc;border-bottom:1px solid #f3eee455}
.contact-handle:hover{color:var(--paper);border-color:var(--paper)}

/* Footer */
.footer{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:16px 40px;width:calc(100% - var(--space)*2);max-width:1280px;margin:0 auto;padding:40px 0 18px;border:0;font:13px/1.5 var(--sans);color:var(--muted)}
.footer a{border:0}
.footer-logo{width:132px;height:66px;object-fit:contain}
.footer-place{margin:0}
.footer-links{display:flex;gap:22px}
.footer-links a,.footer-meta a{display:inline-flex;align-items:center;min-height:44px;color:var(--ink)}
.footer-links a:hover,.footer-meta a:hover{color:var(--red)}
.footer-meta{grid-column:1/-1;display:flex;flex-wrap:wrap;gap:0 24px;align-items:center;margin:0;padding-top:12px;border-top:1px solid var(--line);font-size:12px}
.footer-meta a{text-decoration:underline;text-underline-offset:4px}
.study-tools{display:flex;justify-content:flex-start;gap:24px;width:calc(100% - var(--space)*2);max-width:1280px;margin:0 auto;padding:0 0 24px}
.study-tools button{min-height:44px;margin:0;padding:8px 0;border:0;font:12px/1.5 var(--sans);color:var(--muted)}
.study-tools .replay-intro span{display:none}

/* Dialogs */
.index-dialog,.artifact-dialog{border:0;color:var(--paper);background:#120e0cf2;overscroll-behavior:contain}
.index-dialog{width:100%;max-width:none;height:100%;max-height:none;margin:0;padding:20px var(--space);inset:0}
.index-dialog::backdrop,.artifact-dialog::backdrop{background:#0b0807cc;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.dialog-top{display:flex;justify-content:space-between;align-items:center;gap:20px;padding-bottom:16px;border-bottom:1px solid var(--stage-line)}
.close-button{width:46px;height:46px;font-size:32px;line-height:1;color:var(--paper);border-radius:50%}
.close-button:hover{background:#ffffff14}
.index-dialog nav{display:flex;flex-direction:column;margin:24px 0}
.index-dialog nav a{display:flex;align-items:center;min-height:64px;padding:8px 0;border-bottom:1px solid var(--stage-line);font:400 clamp(36px,9vw,56px)/1.1 var(--display);letter-spacing:-.02em;color:var(--paper)}
.index-dialog nav a:hover{color:var(--gold-soft)}
.index-dialog[open] nav a{animation:menu-in 700ms var(--ease-out) both;animation-delay:calc(var(--i,0)*60ms + 80ms)}
@keyframes menu-in{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
.artifact-dialog{width:min(1200px,calc(100% - 32px));max-height:94dvh;padding:18px 20px 20px;border-radius:12px;box-shadow:0 40px 120px #000c}
.artifact-dialog .dialog-top h2{margin:0;font:400 24px/1.2 var(--display)}
#dialog-visual{margin-top:16px}
#dialog-visual img{width:100%;max-height:76dvh;object-fit:contain;background:#000;border-radius:6px}
.dialog-copy{padding:12px 0 0;font-size:13px;color:var(--stage-muted)}
.dialog-copy:has(#dialog-meta:empty):has(#dialog-description[hidden]):has(#dialog-source[hidden]){display:none}
.dialog-copy p[hidden],.dialog-copy a[hidden]{display:none}
.dialog-copy>a{display:inline-flex;align-items:center;min-height:44px;color:var(--paper)}
.image-failed{display:grid;place-items:center;min-height:200px;padding:24px;font:14px/1.5 var(--sans);color:var(--stage-muted);background:#1b1513}
::view-transition-group(photo-zoom){animation-duration:620ms;animation-timing-function:var(--ease-out)}

/* Motion: entrances only when motion is allowed and JS is present. */
.motion-ok .reveal{transition:opacity 900ms var(--ease-out),transform 1100ms var(--ease-out);transition-delay:calc(var(--i,0)*110ms)}
.motion-ok .reveal:not(.is-in){opacity:0;transform:translate3d(0,32px,0)}
@supports (animation-timeline:view()){
  .motion-ok .ensemble-photo .photo-frame{animation:unveil linear both;animation-timeline:view();animation-range:entry 0% cover 42%}
  .motion-ok .ensemble-photo img{animation:settle linear both;animation-timeline:view();animation-range:entry 0% exit 100%}
  .motion-ok .photo-card img{animation:tile-settle linear both;animation-timeline:view();animation-range:entry 0% cover 55%}
  .motion-ok .contact h2{animation:drift linear both;animation-timeline:view();animation-range:entry 0% cover 50%}
}
@keyframes unveil{from{clip-path:inset(12% 9% 12% 9% round 28px)}to{clip-path:inset(0 0 0 0 round 6px)}}
@keyframes settle{from{transform:scale(1.16) translate3d(0,-3%,0)}to{transform:scale(1.04) translate3d(0,3%,0)}}
@keyframes rise{from{opacity:.001;transform:translate3d(0,80px,0) rotate(-1.2deg)}to{opacity:1;transform:none}}
@keyframes rise-late{0%{opacity:.001;transform:translate3d(0,130px,0) rotate(1.4deg)}20%{opacity:.001}100%{opacity:1;transform:none}}
@keyframes tile-settle{from{transform:scale(1.14)}to{transform:scale(1)}}
@keyframes drift{from{transform:translate3d(0,40px,0);letter-spacing:-.01em}to{transform:none;letter-spacing:-.03em}}
.reduced-motion .landing-scene picture,.reduced-motion .scene-caption>*{transform:none;opacity:1}
.reduced-motion .stage-light{opacity:0;transition:none}
.reduced-motion .video-play::before,.reduced-motion .spotify-bars i{animation:none}
.reduced-motion .spotify-bars i{transform:scaleY(.6)}
.reduced-motion .button,.reduced-motion .booking-link{transform:none}
.reduced-motion .photo-frame,.reduced-motion .video-frame{transform:none}
.reduced-motion ::view-transition-group(*){animation:none}

/* Layout: narrow aspect uses the vertical hero and swaps gallery photos. */
@media (max-aspect-ratio:1/1){
  .landing-scene .landing-photo{object-position:var(--focus-narrow)}
  .landing-scene{height:calc(100svh - var(--header));min-height:460px}
  .stage-shade{background:linear-gradient(180deg,#100c0b59 0%,#100c0b00 14%,#100c0b00 46%,#100c0bb8 74%,#100c0bf2 90%,#100c0b 100%)}
  .show-wide{display:none}
  .show-narrow{display:block}
}
@media (max-width:1040px){
  .header-navigation{gap:20px}
  .band-layout{grid-template-columns:minmax(0,1fr) minmax(0,2fr)}
}
@media (max-width:900px){
  .band-layout{grid-template-columns:minmax(0,1fr);gap:28px}
  .band-aside{display:contents}
  .band-heading{order:1;padding-top:0}
  .ensemble-photo{order:2}
  .milestones{order:3;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0 24px}
  .band-cta{order:4}
}
@media (max-width:900px){
  :root{--header:96px}
  .masthead{padding:0 20px}
  .brand{left:20px;top:50%;transform:translateY(-50%);width:150px;height:75px}
  .header-navigation{display:none}
  .booking-link{min-height:44px;padding:0 20px}
  .index-button{display:grid}
  .float-nav{top:auto;bottom:14px;left:auto;right:14px;transform:translateY(160%)}
  .float-nav.is-visible{transform:none}
  .float-nav a:not(.float-cta){display:none}
  .float-nav{padding:0;border:0;background:none;box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none}
  .float-nav .float-cta{margin:0;min-height:48px;padding:0 24px;background:var(--red);color:var(--paper);box-shadow:inset 0 1px 0 #ffffff2e,0 2px 6px #0003,0 14px 34px -8px #000b}
  .float-nav .float-cta:hover{background:var(--red-hot);color:var(--paper)}
  .music-layout{grid-template-columns:minmax(0,1fr)}
  .footer{grid-template-columns:minmax(0,1fr);gap:10px}
}
@media (max-width:640px){
  .landing-scene{min-height:480px}
  .scene-caption{left:20px;right:20px;bottom:28px}
  .scene-title{font-size:clamp(30px,8.6vw,40px)}
  .scene-actions{margin-top:22px}
  .scene-actions .button{flex:1 1 auto;min-height:50px;padding:0 20px}
  .section-heading{flex-wrap:wrap;gap:8px 20px}
  .band{padding:64px 0 48px}
  .milestones{grid-template-columns:minmax(0,1fr)}
  .milestone strong{font-size:48px}
  .video-grid{grid-template-columns:minmax(0,1fr);gap:32px}
  .video-play{width:64px;height:64px}
  .spotify-frame{height:352px}
  .spotify-cover{padding:24px}
  .contact h2{font-size:clamp(36px,10vw,48px)}
  .contact-actions .button{width:100%}
}
@media (max-width:360px){
  .brand{left:16px;width:136px;height:68px}
  .masthead{padding:0 14px}
  .booking-link{padding:0 16px}
  .header-actions{gap:4px}
}
/* Short landscape screens (phones on their side): hero fits the first view. */
@media (max-height:560px) and (min-aspect-ratio:1/1){
  :root{--header:72px}
  .masthead{padding:0 20px}
  .brand{left:20px;top:50%;transform:translateY(-50%);width:120px;height:60px}
  .header-navigation{display:none}
  .index-button{display:grid}
  .booking-link{min-height:44px;padding:0 20px}
  .landing-scene{height:calc(100svh - var(--header));min-height:300px}
  .scene-caption{bottom:18px}
  .band-location{margin-bottom:8px;font-size:11px}
  .scene-title{font-size:clamp(24px,3.6vw,34px)}
  .scene-actions{margin-top:14px}
  .scene-actions .button{min-height:44px;padding:0 20px}
  .float-nav{top:auto;bottom:12px;left:auto;right:12px;transform:translateY(160%);padding:0;border:0;background:none;box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none}
  .float-nav.is-visible{transform:none}
  .float-nav a:not(.float-cta){display:none}
  .float-nav .float-cta{background:var(--red);color:var(--paper);min-height:44px}
  .spotify-frame{height:300px}
}
/* Tablets and phones: the same mosaic in two columns. */
@media (max-width:900px){
  .photo-grid{--row:calc((100vw - var(--gap))/2*1.25);grid-template-columns:repeat(2,minmax(0,1fr));grid-template-areas:"a b" "c d" "e f" "g h"}
}
@media (max-width:640px){
  .ensemble-photo{margin:0 -20px}
  .ensemble-photo .photo-frame{border-radius:0}
  .band-cta{width:100%}
}

/* Booking form */
.contact-layout{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(40px,6vw,104px);align-items:start}
.contact-intro{position:sticky;top:calc(var(--header) + 24px)}
.contact-alt{margin:28px 0 0;font:15px/1.55 var(--sans);color:#f3eee4b3}
.contact-alt a{color:var(--paper);text-decoration:underline;text-decoration-color:#f3eee466;text-underline-offset:4px}
.contact-alt a:hover{text-decoration-color:var(--paper)}
.booking-form{position:relative;padding:clamp(24px,3.2vw,44px);border:1px solid #f3eee424;border-radius:22px;background:linear-gradient(180deg,#1b0a0e8c,#1b0a0e59);box-shadow:inset 0 1px 0 #ffffff14,0 30px 80px -30px #000b;-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}
.booking-form fieldset{margin:0;padding:0;border:0;min-width:0}
.booking-form fieldset+fieldset{margin-top:34px;padding-top:30px;border-top:1px solid #f3eee41f}
.booking-form legend{float:left;width:100%;padding:0;margin-bottom:18px;font:600 11px/1.4 var(--sans);letter-spacing:.2em;text-transform:uppercase;color:var(--gold)}
.field-grid{clear:both;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px 18px}
.field{display:flex;flex-direction:column;gap:8px;min-width:0}
.field-wide{grid-column:1/-1}
.field label{font:500 14px/1.3 var(--sans);color:#f3eee4e6}
.field-optional{margin-left:6px;font-size:12px;font-weight:400;color:#f3eee48c}
.field input,.field select,.field textarea{box-sizing:border-box;width:100%;min-height:50px;padding:13px 15px;border:1px solid #f3eee433;border-radius:12px;background:#f3eee40d;color:var(--paper);font:16px/1.35 var(--sans);color-scheme:dark;transition:border-color 200ms ease,background-color 200ms ease,box-shadow 200ms ease}
.field textarea{min-height:96px;resize:vertical}
.field select{appearance:none;-webkit-appearance:none;padding-right:42px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%23f3eee4' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 16px center}
.field select option{color:var(--ink);background:var(--paper)}
.field select:invalid{color:#f3eee48c}
.field input::placeholder,.field textarea::placeholder{color:#f3eee466}
.field input:hover,.field select:hover,.field textarea:hover{border-color:#f3eee466}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--gold);background-color:#f3eee417;box-shadow:0 0 0 3px #e2b24c40}
.field [aria-invalid]{border-color:#ffb0a6}
.field-error{margin:0;font:500 13px/1.4 var(--sans);color:#ffd2cb}
.field-error::before{content:"! ";font-weight:700}
.form-trap{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.form-footer{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:18px 28px;margin-top:32px}
.form-terms{flex:1 1 260px;margin:0;font:14px/1.5 var(--sans);color:#f3eee4a6}
.form-submit{min-width:200px}
.form-submit:disabled{opacity:.75;cursor:progress}
.form-status{margin:20px 0 0;padding:14px 16px;border-radius:12px;font:500 15px/1.5 var(--sans);outline:none}
.form-status[data-kind="error"]{background:#2a070cb3;border:1px solid #ffb0a666;color:#ffe4df}
.form-done{padding:clamp(28px,4vw,52px);border:1px solid #e2b24c59;border-radius:22px;background:linear-gradient(180deg,#1b0a0e8c,#1b0a0e59);outline:none;animation:done-in 700ms var(--ease-out) both}
.form-done h3{margin:0;font:400 clamp(30px,3.4vw,44px)/1.1 var(--display);color:var(--gold-soft)}
.form-done p{margin:16px 0 0;max-width:46ch;font:17px/1.55 var(--sans);color:#f3eee4d9}
@keyframes done-in{from{opacity:0;transform:translateY(14px)}}
.reduced-motion .form-done{animation:none}
@media (max-width:900px){
  .contact-layout{grid-template-columns:1fr;gap:36px}
  .contact-intro{position:static}
}
@media (max-width:560px){
  .field-grid{grid-template-columns:1fr}
  .booking-form{padding:22px 18px;border-radius:18px;margin:0 calc(var(--space) * -0.4)}
  .form-submit{width:100%}
}

/* Lapidação 22/10: blackletter titles, official logo, hatch ornament taken from the logo's engraving. */
:root{--fraktur:'UnifrakturCook','Iowan Old Style',Georgia,serif;--hatch:repeating-linear-gradient(-58deg,currentColor 0 1.4px,transparent 1.4px 5.5px)}
.section-heading h2,.band-heading h2,.contact h2{font-family:var(--fraktur);font-weight:700;letter-spacing:0;line-height:1;font-size:clamp(48px,5.6vw,88px)}
.section-heading h2::after,.band-heading h2::after{content:"";display:block;width:clamp(72px,8vw,118px);height:9px;margin-top:16px;background:var(--hatch);color:var(--gold);opacity:.75}
.music .section-heading h2::after{color:var(--red);opacity:.5}
.contact h2{font-size:clamp(48px,6vw,96px);max-width:12ch}
.index-dialog nav a{font-family:var(--fraktur);font-weight:700;letter-spacing:0}
.form-done h3{font-family:var(--fraktur);font-weight:700}

/* Header: official logo, a little larger, same 2:1 box for the intro arrival. */
.brand{width:236px;height:118px}
.brand img{width:100%;height:100%;object-fit:contain}
.header-navigation{font-size:14px;gap:34px}

/* A banda: the photo leads, the 40 years read at a glance. */
.band{padding:clamp(72px,8vw,120px) 0 clamp(64px,7vw,104px)}
.band-layout{grid-template-columns:minmax(0,1fr) minmax(0,1.85fr);gap:clamp(32px,5vw,88px);align-items:center}
.band-about{max-width:38ch;margin-top:22px;font-size:clamp(17px,1.25vw,19px);line-height:1.6;color:#e3d8ca}
.band-aside{gap:clamp(28px,3vw,44px)}
.milestone{grid-template-columns:auto minmax(0,1fr);gap:0 22px;padding:22px 0 0}
.milestone strong{font-family:var(--fraktur);font-weight:700;font-size:clamp(84px,8vw,132px);letter-spacing:0;line-height:.9}
.milestone span{font-size:15px;line-height:1.5;max-width:22ch}
.ensemble-photo{margin-right:calc(var(--space) * -1)}
.ensemble-photo .photo-frame{border-radius:8px 0 0 8px}

/* Rhythm: dark sections run into each other without dead bands. */
.videos{padding:clamp(56px,6vw,96px) 0 clamp(64px,7vw,104px)}
.gallery{padding-top:0}
.video-caption h3{font-size:clamp(22px,1.8vw,28px)}
.video-cover img{filter:saturate(.95) brightness(.86)}

/* Música */
.music-layout{padding-top:clamp(64px,7vw,104px);border-top:0;align-items:stretch}
.spotify-frame{height:clamp(320px,30vw,400px);background:#120e0c}
.spotify-backdrop{position:absolute;inset:0;z-index:-1;width:100%;height:100%;object-fit:cover;object-position:50% 35%;filter:saturate(.85) brightness(.55);transform:scale(1.02);transition:transform 1400ms var(--ease-out),filter 600ms ease}
.spotify-cover{isolation:isolate;background:linear-gradient(180deg,#0c090866 0%,#0c0908 92%)}
.spotify-cover::before{content:"";position:absolute;inset:0;z-index:-1;background:radial-gradient(420px 260px at 12% 8%,#1ed76024,transparent 70%)}
.spotify-cover:hover{background:linear-gradient(180deg,#0c090840 0%,#0c0908e6 92%)}
.spotify-cover:hover .spotify-backdrop{transform:scale(1.06);filter:saturate(1) brightness(.62)}
.spotify-action{font-size:clamp(32px,3.2vw,46px)}
.disc-list{justify-content:center}
.disc-item{align-items:center;display:grid;grid-template-columns:minmax(0,1fr) auto auto;gap:6px 22px}
.disc-year{font:500 13px/1 var(--sans);font-variant-numeric:tabular-nums;color:var(--muted)}

/* Footer: the stage closes the page, with the gold logo. */
.footer{display:block;width:auto;max-width:none;margin:0;padding:clamp(56px,6vw,88px) var(--space) 0;background:var(--stage);color:var(--stage-muted);position:relative;isolation:isolate}
.footer::before{content:"";position:absolute;left:0;right:0;top:0;height:9px;background:var(--hatch);color:var(--gold);opacity:.35}
.footer-inner{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:28px clamp(28px,5vw,72px);max-width:1280px;margin:0 auto}
.footer-logo{display:block;width:clamp(200px,18vw,260px);height:auto}
.footer-brand{display:block;transition:transform 600ms var(--ease-out)}
.footer-brand:hover{transform:translateY(-3px)}
.footer-place{margin:0 0 6px;font:600 11px/1.4 var(--sans);letter-spacing:.22em;text-transform:uppercase;color:var(--gold-soft)}
.footer-links{gap:26px}
.footer-links a{color:var(--paper);font-size:15px}
.footer-links a:hover{color:var(--gold-soft)}
.footer-meta{grid-column:1/-1;margin-top:clamp(28px,4vw,48px);padding:14px 0 6px;border-top:1px solid var(--stage-line);color:#c9bcad99}
.footer-meta a{color:var(--stage-muted)}
.footer-meta a:hover{color:var(--paper)}
.study-tools{width:auto;max-width:none;margin:0;padding:0 var(--space) 24px;background:var(--stage)}
.study-tools button{color:#c9bcad99}
.study-tools>*:first-child{margin-left:max(0px,calc((100% - 1280px)/2))}
@media (max-width:900px){
  .brand{width:150px;height:75px}
  .band-layout{grid-template-columns:minmax(0,1fr);align-items:start}
  .ensemble-photo{margin:0 calc(var(--space) * -1)}
  .ensemble-photo .photo-frame{border-radius:0}
  .milestones{display:flex}
  .footer-inner{grid-template-columns:minmax(0,1fr);gap:22px}
  .footer-cta{justify-self:start}
}
@media (max-width:640px){
  .section-heading h2,.band-heading h2{font-size:clamp(46px,13vw,60px)}
  .contact h2{font-size:clamp(44px,12.5vw,58px)}
  .milestone strong{font-size:96px}
  .disc-item{grid-template-columns:minmax(0,1fr) auto}
  .disc-year{grid-row:2;grid-column:1}
  .footer-cta{width:100%}
}
@media (max-width:360px){.brand{width:136px;height:68px}}
@media (max-height:560px) and (min-aspect-ratio:1/1){.brand{width:120px;height:60px}}
/* The legacy study stylesheet painted .music as a dark band with light text and an extra top margin. */
.music{margin-top:0;color:var(--ink)}

/* Mobile header (Mark, 22/10): logo centered, "Contratar" inside the menu and along the page. */
.dialog-cta{display:none}
@media (max-width:900px){
  .brand{left:50%;transform:translate(-50%,-50%)}
  .header-actions .booking-link{display:none}
  .dialog-cta{display:flex;width:100%;margin-top:8px;animation:menu-in 700ms var(--ease-out) 380ms both}
}
@media (max-height:560px) and (min-aspect-ratio:1/1){
  .brand{left:50%;transform:translate(-50%,-50%)}
  .header-actions .booking-link{display:none}
  .dialog-cta{display:flex;width:100%;margin-top:8px}
}

/* Revisão 22/10: one display serif on every device (web font), no legacy Georgia/mono, fewer redundant labels. */
:root{--display:'Newsreader','Iowan Old Style','Palatino Linotype',Georgia,serif}
.scene-caption h1,.scene-title{font-family:var(--display);font-weight:400;font-optical-sizing:auto}
.video-caption h3,.disc-name,.spotify-action,.artifact-dialog .dialog-top h2{font-family:var(--display);font-weight:400}
.video-action{display:none}
.header-navigation{gap:30px}
/* Arrows are drawn as SVG: U+2197 can turn into a colour emoji on iOS/Android. */
.arrow-icon{display:inline-block;width:.85em;height:.85em;vertical-align:-.05em;flex-shrink:0}
.disc-action span .arrow-icon{width:12px;height:12px}

/* Tipografia (revisão 22/10): três famílias com papéis fixos e uma escala só.
   UnifrakturCook: títulos de seção e o número. Newsreader: títulos e nomes em serifa.
   Instrument Sans: todo o texto e a interface, igual em qualquer aparelho.
   Escala sans: 11 (rótulos em caixa alta), 13 (meta), 14 (interface), 16 (texto), 18 (destaque). */
:root{--sans:'Instrument Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif}
body,button,input,select,textarea{font-family:var(--sans)}
body{font-size:16px;line-height:1.55;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-kerning:normal;text-rendering:optimizeLegibility}
.kicker,.band-location,.footer-place,.booking-form legend,.video-action{font:600 11px/1.4 var(--sans);letter-spacing:.18em;text-transform:uppercase}
.scene-credit,.disc-action,.disc-year,.field-optional,.video-caption small,.spotify-copy small,.footer-meta,.study-tools button{font-family:var(--sans);font-size:13px;letter-spacing:0;font-weight:400}
.disc-action{font-weight:500}
.header-navigation,.float-nav a,.text-link,.field label,.form-terms,.contact-alt,.milestone span,.booking-link,.button,.footer-links a{font-family:var(--sans);font-size:14px;letter-spacing:.01em}
.header-navigation a,.float-nav a,.text-link,.field label{font-weight:500}
.booking-link,.button{font-weight:600}
.band-about,.contact-note,.form-done p{font:400 18px/1.6 var(--sans);letter-spacing:0}
.field input,.field select,.field textarea{font:400 16px/1.35 var(--sans)}
.field-error{font:500 13px/1.4 var(--sans)}
.form-status{font:500 15px/1.5 var(--sans)}
/* serif */
.scene-title{font-family:var(--display);font-weight:400;letter-spacing:-.018em;line-height:1.04;font-size:clamp(34px,3.6vw,56px)}
.video-caption h3,.disc-name{font:400 clamp(22px,1.8vw,26px)/1.2 var(--display);letter-spacing:-.01em}
.video-caption small{display:block;margin-top:6px;letter-spacing:0}
.spotify-action{font:400 clamp(30px,2.8vw,40px)/1.05 var(--display);letter-spacing:-.015em}
/* blackletter: one size for every section title, never tracked */
.section-heading h2,.band-heading h2,.contact h2,.music .section-heading h2{font-family:var(--fraktur);font-weight:700;font-size:clamp(48px,5.4vw,84px);line-height:1;letter-spacing:0}
.milestone strong{letter-spacing:0}
.index-dialog nav a{font-size:clamp(40px,10vw,56px);letter-spacing:0}
@media (max-width:640px){
  .section-heading h2,.band-heading h2,.contact h2{font-size:clamp(46px,13vw,58px)}
  .scene-title{font-size:clamp(32px,8.8vw,42px)}
  .band-about,.contact-note{font-size:17px}
}
/* the legacy intro stylesheet tightens the hero title (.scene-caption h1) and the old "drift" entrance tracked the blackletter */
.scene-caption h1.scene-title{letter-spacing:-.018em}
@keyframes drift{from{transform:translate3d(0,40px,0)}to{transform:none}}
/* Serif = Rozha One, the face of "Banda" in the official logo (heavy, high contrast). */
:root{--display:'Rozha One','Iowan Old Style',Georgia,serif}
.scene-caption h1.scene-title{font-family:var(--display);font-weight:400;letter-spacing:-.005em;line-height:1.02}
.video-caption h3,.disc-name{font-family:var(--display);font-weight:400;letter-spacing:0}
.spotify-action{font-family:var(--display);font-weight:400;letter-spacing:0}
.artifact-dialog .dialog-top h2,.form-done h3{font-family:var(--display);font-weight:400;letter-spacing:0}
/* Rozha One is wide-set; display sizes are tightened slightly, small sizes keep its default. */
.scene-caption h1.scene-title{letter-spacing:-.024em}
.spotify-action{letter-spacing:-.016em}
.video-caption h3,.disc-name{letter-spacing:-.006em}

/* Duas fontes (Mark, 22/10): UnifrakturCook para os destaques grandes, Instrument Sans para todo o resto. */
:root{--display:var(--fraktur)}
.scene-caption h1.scene-title{font:700 clamp(46px,5.2vw,80px)/1.02 var(--fraktur);letter-spacing:0;text-wrap:balance}
.video-caption h3,.disc-name{font:600 clamp(18px,1.4vw,21px)/1.3 var(--sans);letter-spacing:-.005em}
.spotify-action{font:600 clamp(24px,2.2vw,30px)/1.15 var(--sans);letter-spacing:-.01em}
.artifact-dialog .dialog-top h2{font:600 18px/1.3 var(--sans);letter-spacing:0}
.form-done h3{font:700 clamp(36px,3.6vw,52px)/1.05 var(--fraktur);letter-spacing:0}
@media (max-width:640px){.scene-caption h1.scene-title{font-size:clamp(42px,12vw,54px)}}

/* Cabeçalho em vidro fosco claro sobre a foto (Mark, 22/10): o topo ocupa a tela inteira e passa por trás.
   O véu creme mantém a logo oficial legível; a borda de luz e a sombra dão o volume do vidro. */
.masthead{position:absolute;top:0;left:0;right:0;z-index:6;margin:0;background:linear-gradient(180deg,#f6f1e8b8 0%,#f3eee49e 100%);-webkit-backdrop-filter:blur(22px) saturate(1.6) brightness(1.04);backdrop-filter:blur(22px) saturate(1.6) brightness(1.04);border-bottom:1px solid #ffffff59;box-shadow:inset 0 1px 0 #ffffffa6,inset 0 -1px 0 #ffffff26,0 14px 34px -16px #0000008c}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){.masthead{background:#f3eee4f0}}
.landing-scene,.landing-scene:is(*){height:100svh;min-height:560px}
.stage-shade{background:linear-gradient(180deg,#100c0b00 0%,#100c0b00 52%,#100c0b99 80%,#100c0bf0 100%),radial-gradient(75% 65% at 0% 100%,#100c0bcc 0%,#100c0b00 72%)}
@media (max-aspect-ratio:1/1){
  .landing-scene,.landing-scene:is(*){height:100svh;min-height:520px}
  .stage-shade{background:linear-gradient(180deg,#100c0b00 0%,#100c0b00 46%,#100c0bb8 72%,#100c0bf2 88%,#100c0b 100%)}
}
@media (max-height:560px) and (min-aspect-ratio:1/1){.landing-scene,.landing-scene:is(*){height:100svh;min-height:320px}}

/* Cabeçalho em vidro esfumaçado que se dissolve na foto (Mark, 22/10): sem véu branco nem linha de corte.
   A logo usa a versão para fundo escuro; a luz de borda fica só em cima. */
.masthead{background:none;border:0;box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none;isolation:isolate}
.masthead::before{content:"";position:absolute;inset:0 0 -46px 0;z-index:-1;pointer-events:none;background:linear-gradient(180deg,#0c0908b8 0%,#0c09087a 55%,#0c090800 100%);-webkit-backdrop-filter:blur(18px) saturate(1.5);backdrop-filter:blur(18px) saturate(1.5);-webkit-mask-image:linear-gradient(180deg,#000 0%,#000 58%,transparent 100%);mask-image:linear-gradient(180deg,#000 0%,#000 58%,transparent 100%)}
.masthead::after{content:"";position:absolute;left:0;right:0;top:0;height:1px;pointer-events:none;background:linear-gradient(90deg,transparent,#ffffff40 30%,#ffffff40 70%,transparent)}
.header-navigation a{color:#f3eee4e6}
.header-navigation a:hover{color:#fff}
.header-navigation a::after{background:var(--gold)}
.index-button span{background:var(--paper)}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){.masthead::before{background:linear-gradient(180deg,#0c0908f0 0%,#0c0908c0 60%,#0c090800 100%)}}

/* Título do topo em duas linhas de propósito; no celular, centrado com a logo e o botão. */
.title-break{display:block}
.scene-caption h1.scene-title{font-size:clamp(52px,6vw,96px);line-height:.98}
.button-glass{gap:12px;padding:0 26px 0 8px;min-height:54px;color:var(--paper);background:linear-gradient(180deg,#ffffff2e,#ffffff14);border:1px solid #ffffff38;box-shadow:inset 0 1px 0 #ffffff4d,0 10px 30px -12px #000c;-webkit-backdrop-filter:blur(14px) saturate(1.4);backdrop-filter:blur(14px) saturate(1.4)}
.button-glass:hover{background:linear-gradient(180deg,#ffffff40,#ffffff1f);border-color:#ffffff66}
.button-glass::after{background:linear-gradient(110deg,transparent 30%,#ffffff40 48%,transparent 66%)}
.button-play{display:grid;place-items:center;width:38px;height:38px;border-radius:50%;background:var(--paper);color:var(--red);box-shadow:0 2px 8px #0005}
.button-play svg{width:12px;height:12px;margin-left:2px;fill:currentColor}
@media (max-width:900px){
  .scene-caption{left:20px;right:20px;text-align:center}
  .scene-caption:has(.scene-credit)>:not(.scene-credit){max-width:none}
  .scene-caption h1.scene-title{font-size:clamp(48px,13.5vw,72px);margin:0 auto}
  .scene-actions{justify-content:center}
  .scene-actions .button{flex:0 0 auto;min-height:54px}
}

/* Indicador de rolagem no lugar do botão (Mark, 22/10): mouse com a rodinha no computador, gesto de deslizar no toque. */
.scene-actions:empty{display:none}
.scroll-cue{position:absolute;z-index:4;left:50%;bottom:clamp(18px,3.4vh,34px);display:grid;place-items:center;width:48px;height:56px;margin-left:-24px;color:#f3eee4d9;opacity:calc(1 - var(--hero-p,0)*5);transition:color 200ms ease}
.scroll-cue:hover{color:#fff}
.scroll-cue:focus-visible{outline:2px solid var(--gold);outline-offset:4px;border-radius:14px}
.cue-mouse{position:relative;display:block;width:24px;height:38px;border:1.6px solid currentColor;border-radius:13px}
.cue-wheel{position:absolute;left:50%;top:7px;width:3px;height:7px;margin-left:-1.5px;border-radius:2px;background:currentColor;animation:cue-wheel 1.9s cubic-bezier(.45,0,.2,1) infinite}
.cue-swipe{display:none}
.cue-swipe svg{width:24px;height:40px}
.cue-swipe svg path{animation:cue-chevron 1.9s ease-in-out infinite;opacity:.9}
.cue-swipe svg path+path{animation-delay:.15s}
.cue-dot{fill:currentColor;animation:cue-swipe 1.9s cubic-bezier(.45,0,.2,1) infinite}
@media (hover:none),(pointer:coarse){.cue-mouse{display:none}.cue-swipe{display:block}}
@keyframes cue-wheel{0%{opacity:0;transform:translateY(-2px)}20%{opacity:1}70%{opacity:0;transform:translateY(12px)}100%{opacity:0;transform:translateY(12px)}}
@keyframes cue-swipe{0%{opacity:0;transform:translateY(4px)}20%{opacity:1}75%{opacity:0;transform:translateY(-20px)}100%{opacity:0;transform:translateY(-20px)}}
@keyframes cue-chevron{0%,100%{opacity:.35}45%{opacity:1}}
.reduced-motion .cue-wheel,.reduced-motion .cue-dot,.reduced-motion .cue-swipe svg path{animation:none;opacity:1}
.intro-active .scroll-cue{opacity:0}
@media (max-width:900px){.scene-caption{bottom:clamp(92px,13vh,124px)}}
@media (min-width:901px){.scene-caption{bottom:clamp(40px,8vh,84px)}}

/* Seletor PT | DE */
.lang-switch{display:inline-flex;align-items:center;gap:2px;padding:3px;border-radius:999px;font:600 12px/1 var(--sans);letter-spacing:.06em}
.lang-switch a{display:inline-flex;align-items:center;justify-content:center;min-width:34px;min-height:30px;padding:0 8px;border-radius:999px;color:#f3eee4b3;transition:background 200ms ease,color 200ms ease}
.lang-switch a:hover{color:var(--paper)}
.lang-switch a[aria-current="page"]{background:#f3eee424;color:var(--paper)}
.lang-header{margin-right:6px;border:1px solid #f3eee433}
.lang-menu{margin-top:22px;border:1px solid var(--stage-line);font-size:14px}
.lang-menu a{min-width:48px;min-height:40px}
.lang-footer{margin-top:14px;border:1px solid var(--stage-line)}
@media (max-width:900px){.lang-header{display:none}}
@media (max-height:560px) and (min-aspect-ratio:1/1){.lang-header{display:none}}
/* German words run longer: the hero title keeps its two lines on phones. */
@media (max-width:900px){:lang(de) .scene-caption h1.scene-title{font-size:clamp(40px,11vw,64px)}}
/* the menu styles every nav inside it as large blackletter links; the language switch stays small */
.index-dialog nav.lang-menu{display:inline-flex;flex-direction:row;margin:22px 0 0}
.index-dialog nav.lang-menu a{display:inline-flex;min-height:40px;min-width:52px;padding:0 14px;border:0;font:600 14px/1 var(--sans);letter-spacing:.06em;color:#f3eee4b3;animation:none}
.index-dialog nav.lang-menu a[aria-current="page"]{color:var(--paper);background:#f3eee424}

/* Cabeçalho fixo (Mark, 22/10): acompanha a rolagem em degradê com blur, encolhe depois do topo
   e troca para a versão creme sobre a seção clara (Música). */
.masthead{position:fixed;transition:height 420ms var(--ease-out)}
.masthead .brand{transition:transform 420ms var(--ease-out)}
.masthead::before{transition:background 360ms ease}
.masthead.is-scrolled{height:84px}
.masthead.is-scrolled .brand{transform:translate(-50%,-50%) scale(.7)}
.masthead.on-light::before{background:linear-gradient(180deg,#f3eee4e6 0%,#f3eee4a8 55%,#f3eee400 100%)}
.masthead.on-light::after{background:linear-gradient(90deg,transparent,#ffffff99 30%,#ffffff99 70%,transparent)}
.masthead.on-light .header-navigation a{color:var(--ink)}
.masthead.on-light .index-button span{background:var(--ink)}
.masthead.on-light .lang-header{border-color:#211b1726}
.masthead.on-light .lang-header a{color:#211b17a6}
.masthead.on-light .lang-header a[aria-current="page"]{color:var(--ink);background:#211b1714}
@media (min-width:901px){.float-nav{display:none}}
@media (max-width:900px){
  .masthead.is-scrolled{height:68px}
  .masthead.is-scrolled .brand{transform:translate(-50%,-50%) scale(.78)}
}
html{scroll-padding-top:92px}
/* the milestone label is now a short phrase next to the number */
.milestone span{font-size:18px;line-height:1.35;max-width:14ch;color:#e3d8ca}
/* Immersive promo: the band's own video plays silently, blurred and darkened, behind the dark sections after the hero. */
.immersive{position:relative;isolation:isolate;background:var(--stage)}
.promo-backdrop{position:sticky;top:0;z-index:0;height:100vh;height:100svh;margin-bottom:-100vh;margin-bottom:-100svh;overflow:hidden;pointer-events:none}
.promo-backdrop video{display:block;width:100%;height:100%;object-fit:cover;transform:scale(1.08);filter:saturate(.85) contrast(1.05);opacity:0;transition:opacity 1600ms ease}
.promo-backdrop.is-on video{opacity:.32}
.promo-backdrop.is-on.is-live video{opacity:.5}
.promo-backdrop::before{content:"";position:absolute;inset:0;z-index:1;background-image:var(--grain);background-size:160px;opacity:.09;mix-blend-mode:overlay}
.promo-backdrop::after{content:"";position:absolute;inset:0;z-index:2;background:radial-gradient(120% 90% at 50% 45%,#0b080733 0%,#0b0807b3 70%,#0b0807e6 100%),linear-gradient(180deg,#0b0807 0%,#0b080700 22%,#0b080700 78%,#0b0807 100%)}
.immersive>section{position:relative;z-index:1}
.immersive .band{background:radial-gradient(1200px 600px at 75% 0%,#2a141466 0%,transparent 60%)}
.immersive .videos,.immersive .gallery{background:transparent}
.video-feature{margin-bottom:clamp(32px,4vw,56px)}
.video-grid .video-feature{grid-column:1/-1;margin-bottom:0}
.video-feature .video-caption h3{font-size:clamp(26px,3vw,36px)}
.video-frame video{position:absolute;inset:0;width:100%;height:100%;background:#000}
.reduced-motion .promo-backdrop video{transition:none}
/* Photo reel: one wide strip of stage photos drifting slowly sideways; each photo keeps its own shape. */
.photo-reel{--reel-h:clamp(300px,52vh,540px);--gap:6px;position:relative;overflow:hidden;padding:4px 0 clamp(48px,6vw,88px);-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 6%,#000 94%,transparent 100%);mask-image:linear-gradient(90deg,transparent 0,#000 6%,#000 94%,transparent 100%)}
.reel-row{overflow:hidden}
.reel-track{display:flex;gap:var(--gap);width:max-content;animation:reel calc(var(--n)*11s) linear infinite}
.reel-row:hover .reel-track,.reel-row:focus-within .reel-track{animation-play-state:paused}
.reel-track .photo-card{flex:0 0 auto;height:var(--reel-h);border-radius:6px}
.reel-track .photo-card .photo-frame{height:100%}
.reel-track .photo-card img{height:100%;width:auto;max-width:none;object-fit:cover}
.motion-ok .reel-track .photo-card img{animation:none}
@keyframes reel{from{transform:translate3d(0,0,0)}to{transform:translate3d(calc(-50% - var(--gap)/2),0,0)}}
@media (max-width:760px){.photo-reel{--reel-h:clamp(240px,46vh,380px);--gap:4px}}
/* Reduced motion: a still strip the visitor can drag or swipe, without the repeated copy. */
@media (prefers-reduced-motion:reduce){.photo-reel{-webkit-mask-image:none;mask-image:none}.reel-row{overflow-x:auto;scroll-snap-type:x mandatory}.reel-track{animation:none}.reel-track [aria-hidden="true"]{display:none}.reel-track .photo-card{scroll-snap-align:center}}
.reduced-motion .reel-track{animation:none}.reduced-motion .reel-row{overflow-x:auto}.reduced-motion .reel-track [aria-hidden="true"]{display:none}
.form-terms a{color:var(--paper);text-decoration:underline;text-underline-offset:3px}.form-terms a:hover{color:var(--gold)}
.contact-alt a{display:inline-block;padding:12px 0;margin:-12px 0}  /* comfortable tap target without moving the text */
/* ===== Pre-launch audit fixes (26/10) ===== */
/* Contact: clip instead of hidden so the intro column can stay sticky beside the form. */
.contact{overflow:clip}
@supports not (overflow:clip){.contact{overflow:visible}}
/* Wide screens: header, hero caption and the band photo line up with the 1280px content column. */
@media (min-width:901px){
  .masthead{padding-inline:max(var(--space),calc((100% - 1280px)/2))}
  .scene-caption{left:max(var(--space),calc((100% - 1280px)/2))}
  .ensemble-photo{margin-right:0}
  .ensemble-photo .photo-frame{border-radius:10px}
  .disc-list{justify-content:flex-start}
}
/* "41 anos de banda": the label sits next to the number, not a column away. */
.milestone strong{min-width:0}
.milestone{gap:0 18px}
/* Tablet: the date button keeps its natural width. */
@media (min-width:641px) and (max-width:900px){.band-cta{justify-self:start;width:auto}}
/* Phone: the form card lines up with the heading; language switch gets a full tap target. */
@media (max-width:900px){
  .booking-form{margin:0}
  .lang-switch a{min-width:44px;min-height:44px}
}
/* Scrolled header logo stays legible. */
.masthead.is-scrolled .brand{transform:translate(-50%,-50%) scale(.86)}
@media (max-width:900px){.masthead.is-scrolled .brand{transform:translate(-50%,-50%) scale(.9)}}
/* Lightbox: the frame hugs the photo instead of letterboxing portrait shots. */
.artifact-dialog{width:fit-content;max-width:min(1200px,calc(100% - 32px))}
#dialog-visual img{width:auto;max-width:100%;margin-inline:auto;background:none}
.spotify-mark path{stroke:none}
/* Lightbox navigation */
.dialog-stage{position:relative}
.dialog-nav{position:absolute;top:50%;display:grid;place-items:center;width:48px;height:48px;margin-top:-24px;padding:0;border:1px solid #f3eee433;border-radius:999px;background:#0b0807b3;color:var(--paper);cursor:pointer;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);transition:background 200ms ease}
.dialog-nav:hover,.dialog-nav:focus-visible{background:var(--red)}
.dialog-nav svg{width:22px;height:22px}
.dialog-prev{left:10px}.dialog-next{right:10px}
.dialog-nav[hidden]{display:none}
/* Reel pause control */
.photo-reel.is-paused .reel-track{animation-play-state:paused}
.reel-toggle{display:block;margin:18px auto 0;min-height:44px;padding:0 20px;border:1px solid var(--stage-line,#f3eee42e);border-radius:999px;background:transparent;color:var(--stage-muted,#c9bcad);font:500 13px/1 var(--sans);cursor:pointer;transition:color 200ms ease,border-color 200ms ease}
.reel-toggle:hover,.reel-toggle:focus-visible{color:var(--paper);border-color:#f3eee466}
@media (prefers-reduced-motion:reduce){.reel-toggle{display:none}}
.reduced-motion .reel-toggle{display:none}
/* Contact: e-mail or WhatsApp */
.field-hint{margin:0;font-size:14px;color:#f3eee4b3}

/* Details: balanced recording titles, readable placeholders, a real footer control for motion. */
.disc-name{text-wrap:balance}
@media (max-width:640px){.disc-item{grid-template-columns:minmax(0,1fr)}.disc-action{justify-self:start}}
.field input::placeholder,.field textarea::placeholder{color:#f3eee499}
#motion-toggle{display:inline-flex;align-items:center;min-height:44px;padding:0;border:0;background:none;color:var(--stage-muted,#c9bcad);font:inherit;text-decoration:underline;text-underline-offset:4px;cursor:pointer}
#motion-toggle:hover,#motion-toggle:focus-visible{color:var(--paper)}
#motion-toggle[aria-pressed="true"]{color:var(--gold)}
.dialog-copy a{font-size:14px;border-bottom:0;text-decoration:underline;text-underline-offset:3px}
.spotify-backdrop{object-position:60% 40%;filter:saturate(1.05) brightness(.72)}
/* Date field on iOS/WebKit: drop the native box (fixed min-width and taller height) so it matches the other fields. */
.field{min-width:0}
.field input[type="date"]{display:block;-webkit-appearance:none;appearance:none;min-width:0;max-width:100%;height:50px;line-height:22px;text-align:left}
.field input[type="date"]::-webkit-date-and-time-value{margin:0;text-align:left}
.field input[type="date"]::-webkit-datetime-edit{padding:0}
.field input[type="date"]::-webkit-calendar-picker-indicator{opacity:.75;cursor:pointer}
/* Language switch: flags instead of PT/DE. The current language is full colour with a ring; the other is muted until hover. */
.lang-switch a{padding:0;min-width:40px;min-height:36px}
.lang-switch .flag{display:block;width:24px;height:17px;border-radius:3px;box-shadow:0 0 0 1px #00000033;opacity:.6;filter:saturate(.6);transition:opacity 200ms ease,filter 200ms ease,transform 200ms ease}
.lang-switch a:hover .flag,.lang-switch a:focus-visible .flag{opacity:1;filter:none}
.lang-switch a[aria-current="page"]{background:#f3eee41f}
.lang-switch a[aria-current="page"] .flag{opacity:1;filter:none;box-shadow:0 0 0 1px #f3eee499}
.masthead.on-light .lang-switch a[aria-current="page"]{background:#211b1712}
.masthead.on-light .lang-switch a[aria-current="page"] .flag{box-shadow:0 0 0 1px #211b1766}
@media (max-width:900px){.lang-switch a{min-width:44px;min-height:44px}}

/* WhatsApp: a glass card in the language of the booking form, with the brand green only in the small badge. */
.whatsapp-link{display:flex;align-items:center;gap:16px;width:100%;max-width:400px;margin-top:32px;padding:14px 18px 14px 14px;border:1px solid #f3eee42e;border-radius:18px;background:linear-gradient(180deg,#1b0a0e99,#1b0a0e66);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);color:var(--paper);text-decoration:none;box-shadow:inset 0 1px 0 #ffffff14,0 24px 60px -34px #000;transition:border-color 250ms ease,background 250ms ease,transform 250ms var(--ease-out)}
.whatsapp-link:hover{border-color:#e2b24c80;background:linear-gradient(180deg,#1b0a0eb3,#1b0a0e80);transform:translateY(-1px)}
.whatsapp-link:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
.whatsapp-badge{display:grid;place-items:center;flex:0 0 auto;width:46px;height:46px;border-radius:50%;background:#25d3661f;box-shadow:inset 0 0 0 1px #25d36659;color:#4fdc87}
.whatsapp-mark{width:22px;height:22px}
.whatsapp-copy{display:flex;flex-direction:column;gap:3px;min-width:0}
.whatsapp-copy small{font:600 11px/1.2 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--gold)}
.whatsapp-copy strong{font:500 19px/1.2 var(--sans);letter-spacing:.01em;font-variant-numeric:tabular-nums;color:var(--paper)}
.whatsapp-arrow{flex:0 0 auto;width:20px;height:20px;margin-left:auto;color:#f3eee499;transition:transform 250ms var(--ease-out),color 250ms ease}
.whatsapp-link:hover .whatsapp-arrow{transform:translateX(3px);color:var(--gold)}
.whatsapp-link + .contact-alt{margin-top:18px}