/* Filipe Brito · portfólio (página escondida, partilha a paleta da DotViews) */
@font-face { font-family: 'Anton'; src: url('/assets/fonts/anton-400.woff2') format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'Inter'; src: url('/assets/fonts/inter-400.woff2') format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'Inter'; src: url('/assets/fonts/inter-500.woff2') format('woff2'); font-weight: 500; font-display: swap; }
@font-face { font-family: 'Roboto Mono'; src: url('/assets/fonts/roboto-mono-500.woff2') format('woff2'); font-weight: 500; font-display: swap; }
@font-face { font-family: 'Instrument Serif'; src: url('/assets/fonts/instrument-serif-400.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'Instrument Serif'; src: url('/assets/fonts/instrument-serif-400-italic.woff2') format('woff2'); font-weight: 400; font-style: italic; font-display: swap; }

:root {
  --paper: #F4F2EE;
  --paper-2: #E9E6E0;
  --ink: #0B0B0B;
  --muted: #5E5B55;
  --line: rgba(11,11,11,.16);
  --accent: #2746D4;      /* azul DotViews */
  --on-accent: #F4F2EE;
  --serif: 'Instrument Serif', Georgia, serif;
  --sans: 'Inter', system-ui, sans-serif;
  --mono: 'Roboto Mono', ui-monospace, monospace;
  --display: 'Anton', Impact, sans-serif;
  --pad: clamp(16px, 4.4vw, 64px);
  --ease: cubic-bezier(.2,.7,.2,1);
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body { margin: 0; background: var(--paper); color: var(--ink); font-family: var(--sans); font-size: 17px; line-height: 1.6; overflow-x: hidden; }
img, video { display: block; max-width: 100%; }
a { color: inherit; }
::selection { background: var(--accent); color: var(--on-accent); }
.skip { position: absolute; left: -999px; top: 8px; background: var(--accent); color: var(--on-accent); padding: 10px 16px; z-index: 100; }
.skip:focus { left: 8px; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

/* tipografia */
.meta { font-family: var(--mono); font-size: 12px; font-weight: 500; letter-spacing: .16em; text-transform: uppercase; }
.serif { font-family: var(--serif); font-weight: 400; letter-spacing: -.01em; line-height: .98; }
.serif em, h1 em, h2 em { font-style: italic; color: var(--accent); }
h1, h2, h3 { margin: 0; font-weight: 400; }
p { margin: 0; }
.wrap { padding-left: var(--pad); padding-right: var(--pad); max-width: 1520px; margin: 0 auto; }

/* botões */
.btn { display: inline-flex; align-items: center; gap: 12px; min-height: 52px; padding: 0 28px; border-radius: 999px; border: 1.5px solid var(--ink); font-family: var(--mono); font-size: 13px; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; text-decoration: none; transition: background-color .3s, color .3s, border-color .3s; }
.btn--accent { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.btn svg { width: 16px; height: 16px; }

/* barra de topo */
.top { position: sticky; top: 0; z-index: 40; background: rgba(244,242,238,.88); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-bottom: 1px solid var(--line); }
.top__in { display: flex; align-items: center; justify-content: space-between; gap: 24px; height: 68px; }
.mark { font-family: var(--display); font-size: 26px; letter-spacing: .01em; text-decoration: none; line-height: 1; }
.mark i { font-style: normal; color: var(--accent); }
.top nav { display: flex; align-items: center; gap: 32px; }
.top nav a:not(.btn) { font-family: var(--mono); font-size: 12px; font-weight: 500; letter-spacing: .16em; text-transform: uppercase; text-decoration: none; }
.top .btn { min-height: 42px; padding: 0 20px; font-size: 12px; }

/* hero */
.hero { padding-top: clamp(48px, 7vw, 104px); }
.hero__grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: clamp(32px, 5vw, 80px); align-items: end; }
.hero h1 { font-family: var(--serif); font-size: clamp(56px, 7.6vw, 132px); line-height: .92; letter-spacing: -.02em; margin-top: 22px; }
.hero__lead { max-width: 33em; margin-top: 32px; font-size: 19px; color: #2B2926; }
.hero__cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 36px; }
.hero__strip { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; align-items: end; }
.hero__strip figure { margin: 0; overflow: hidden; background: var(--paper-2); }
.hero__strip figure:nth-child(1) { aspect-ratio: 2 / 3; translate: 0 -36px; }
.hero__strip figure:nth-child(2) { aspect-ratio: 2 / 3.3; }
.hero__strip figure:nth-child(3) { aspect-ratio: 2 / 3; translate: 0 -72px; }
.hero__strip img { width: 100%; height: 100%; object-fit: cover; }
.hero__foot { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-top: clamp(40px, 6vw, 80px); padding: 18px 0; border-top: 1px solid var(--ink); }

/* secções */
.sec { padding-top: clamp(88px, 11vw, 168px); }
.hero + .sec { padding-top: clamp(32px, 4vw, 64px); }
.hero__foot + * { margin-top: 0; }
.sec__head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 32px; align-items: end; padding-top: 18px; border-top: 1px solid var(--ink); }
.sec__head .meta { grid-column: 1 / -1; }
.sec__head h2 { font-family: var(--serif); font-size: clamp(48px, 6.2vw, 104px); line-height: .94; letter-spacing: -.02em; margin-top: 18px; }
.sec__head p:not(.meta) { max-width: 32em; color: var(--muted); justify-self: end; }

/* posicionamento */
.pos__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(20px, 3vw, 48px); margin-top: clamp(40px, 5vw, 72px); }
.pos__item { padding-top: 20px; border-top: 1px solid var(--line); }
.pos__item .n { font-family: var(--mono); font-size: 12px; font-weight: 500; letter-spacing: .16em; color: var(--accent); }
.pos__item h3 { font-family: var(--serif); font-size: clamp(30px, 2.6vw, 40px); line-height: 1.02; margin: 14px 0 12px; }
.pos__item p { color: var(--muted); }

/* casos (hotéis e marcas) */
.cases { display: grid; gap: clamp(80px, 9vw, 140px); margin-top: clamp(48px, 6vw, 88px); }
.case { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: clamp(12px, 1.4vw, 20px); align-items: stretch; }
.case__big { grid-column: 1 / span 7; }
.case__side { grid-column: 8 / span 5; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-rows: auto 1fr; gap: clamp(12px, 1.4vw, 20px); }
.case--rev .case__big { grid-column: 6 / span 7; grid-row: 1; }
.case--rev .case__side { grid-column: 1 / span 5; grid-row: 1; }
.shot { position: relative; display: block; width: 100%; padding: 0; border: 0; background: var(--paper-2); overflow: hidden; cursor: zoom-in; }
.shot img { width: 100%; height: 100%; object-fit: cover; transition: scale .9s var(--ease); }
.case__big .shot { aspect-ratio: 1 / 1.08; }
.case__side .shot { aspect-ratio: 4 / 5; }
/* marcas do visor nos cantos */
.vf::before, .vf::after { content: ""; position: absolute; z-index: 2; width: 22px; height: 22px; border: 2px solid rgba(244,242,238,.9); pointer-events: none; }
.vf::before { top: 14px; left: 14px; border-right: 0; border-bottom: 0; }
.vf::after { bottom: 14px; right: 14px; border-left: 0; border-top: 0; }
.case__info { grid-column: 1 / -1; display: flex; flex-direction: column; gap: 16px; padding-top: 18px; border-top: 1px solid var(--line); }
.case__side .case__info { margin-top: 8px; align-self: end; }
.case__k { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.case__k .meta:first-child { color: var(--accent); }
.case h3 { font-family: var(--serif); font-size: clamp(42px, 4.6vw, 76px); line-height: .95; letter-spacing: -.015em; }
.case__info p { color: var(--muted); max-width: 30em; }
.case__open { align-self: flex-start; display: inline-flex; align-items: center; gap: 10px; padding: 0 0 4px; border: 0; border-bottom: 1.5px solid var(--accent); background: none; font-family: var(--mono); font-size: 12px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; cursor: pointer; color: var(--ink); }
.also { margin-top: clamp(56px, 6vw, 88px); padding: 24px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); display: flex; gap: 12px 40px; flex-wrap: wrap; align-items: baseline; }
.also p { font-family: var(--serif); font-size: clamp(26px, 2.4vw, 36px); line-height: 1.2; }
.also p span { color: var(--muted); }

/* filmes */
.films { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(12px, 1.6vw, 24px); margin-top: clamp(40px, 5vw, 72px); }
.film { margin: 0; }
.film__frame { position: relative; display: block; width: 100%; aspect-ratio: 9 / 16; padding: 0; border: 0; border-radius: 22px; overflow: hidden; background: var(--ink); cursor: pointer; color: var(--paper); }
.film__frame video, .film__frame img { width: 100%; height: 100%; object-fit: cover; }
.film__play { position: absolute; left: 14px; bottom: 14px; display: inline-flex; align-items: center; gap: 8px; height: 36px; padding: 0 14px; border-radius: 999px; background: var(--accent); color: var(--on-accent); font-family: var(--mono); font-size: 11px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; }
.film__play svg { width: 12px; height: 12px; fill: currentColor; }
.film--soon .film__frame { cursor: default; background: linear-gradient(160deg, #1A1A1A, #0B0B0B); display: grid; place-items: center; }
.film--soon .film__frame img { position: absolute; inset: 0; opacity: .38; filter: grayscale(1); }
.film--soon .film__soon { position: relative; font-family: var(--mono); font-size: 11px; font-weight: 500; letter-spacing: .16em; text-transform: uppercase; border: 1px solid rgba(244,242,238,.5); border-radius: 999px; padding: 8px 14px; }
.film figcaption { margin-top: 14px; }
.film figcaption b { display: block; font-family: var(--serif); font-weight: 400; font-size: 26px; line-height: 1.05; }
.film figcaption span { display: block; margin-top: 6px; font-family: var(--mono); font-size: 11px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }

/* testemunhos */
.quotes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(24px, 4vw, 64px); margin-top: clamp(40px, 5vw, 72px); }
.quote { margin: 0; padding-top: 22px; border-top: 1px solid var(--ink); }
.quote::before { content: "\201C"; display: block; height: .5em; font-family: var(--serif); font-size: 120px; line-height: 1; color: var(--accent); }
.quote blockquote { margin: 0; font-family: var(--serif); font-size: clamp(26px, 2.3vw, 36px); line-height: 1.16; }
.quote figcaption { margin-top: 24px; }

/* sobre (colagem) */
.about { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: clamp(40px, 6vw, 104px); align-items: center; margin-top: clamp(40px, 5vw, 72px); }
.collage { position: relative; container-type: inline-size; aspect-ratio: 1 / 1.08; }
.collage figure { position: absolute; margin: 0; background: #fff; padding: 2.2cqw 2.2cqw 7cqw; box-shadow: 0 2px 4px rgba(11,11,11,.12), 0 22px 44px rgba(11,11,11,.18); }
.collage figure img { width: 100%; height: 100%; object-fit: cover; }
.collage .c1 { left: 4%; top: 2%; width: 58%; height: 80%; rotate: -3deg; z-index: 2; }
.collage .c1 img { object-position: 50% 30%; }
.collage .c2 { right: 2%; top: 24%; width: 46%; height: 64%; rotate: 4deg; z-index: 1; }
.collage .c2 img { object-position: 50% 60%; }
.collage figcaption { position: absolute; left: 2.2cqw; right: 2.2cqw; bottom: 2cqw; font-family: var(--mono); font-size: 2cqw; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.tape { position: absolute; z-index: 3; width: 22%; height: 6%; background: rgba(233,230,224,.82); box-shadow: 0 1px 2px rgba(11,11,11,.12); }
.collage .t1 { left: 22%; top: -.5%; rotate: -8deg; }
.collage .t2 { right: 12%; top: 21.5%; rotate: 10deg; }
/* etiqueta Dymo azul (igual à DotViews) */
.dymo { position: absolute; z-index: 4; display: inline-flex; align-items: center; height: 7.4%; padding: 0 4.4%; border-radius: 2px; isolation: isolate; overflow: hidden; font-family: var(--sans); font-size: 3.1cqw; font-weight: 500; letter-spacing: .3em; text-transform: uppercase; white-space: nowrap;
  background: linear-gradient(180deg, rgba(255,255,255,.10) 0%, rgba(255,255,255,0) 30%, rgba(0,0,0,0) 70%, rgba(0,0,0,.06) 100%), var(--accent);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.22), inset 0 -1px 0 rgba(10,20,80,.3), 0 1px 1px rgba(5,10,50,.4), 0 6px 12px rgba(11,11,11,.25); }
.dymo::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(255,255,255,.035) 0%, rgba(255,255,255,0) 45%), linear-gradient(102deg, rgba(255,255,255,0) 30%, rgba(255,255,255,.035) 40%, rgba(255,255,255,0) 50%); }
.dymo__t { margin-right: -.3em; background: linear-gradient(180deg, #FFFFFF 0%, #F4F6FF 40%, #D6DDF5 64%, #FFFFFF 100%); -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(-.035em -.045em 0 rgba(255,255,255,.7)) drop-shadow(.05em .07em 0 rgba(10,20,90,.6)) drop-shadow(.04em .09em .05em rgba(5,10,60,.4)); }
.dymo__t span { display: inline-block; background: inherit; -webkit-background-clip: text; background-clip: text; color: transparent; }
.collage .dymo { left: 8%; bottom: 2%; rotate: -4deg; }
.about__text p + p { margin-top: 18px; }
.about__text .big { font-family: var(--serif); font-size: clamp(30px, 2.8vw, 44px); line-height: 1.1; margin-bottom: 28px; }
.about__text p:not(.big) { color: #3A3835; }
/* números discretos no About */
.facts-lite { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 28px; margin: 32px 0 0; border-top: 1px solid var(--line); }
.facts-lite div { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--line); }
.facts-lite dt { font-family: var(--mono); font-size: 11px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); white-space: nowrap; }
.facts-lite .wide { grid-column: 1 / -1; }
.facts-lite dd { margin: 0; font-size: 15px; text-align: right; }
.skills { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 32px; padding: 0; list-style: none; }
.skills li { padding: 8px 14px; border: 1.5px solid var(--ink); border-radius: 999px; font-family: var(--mono); font-size: 11px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; }

/* contacto (papel rasgado azul) */
.contact { position: relative; margin-top: clamp(104px, 12vw, 180px); background: var(--accent) url('/assets/img/textura-papel.svg'); background-blend-mode: multiply; color: var(--on-accent); padding: clamp(72px, 9vw, 136px) 0 clamp(56px, 6vw, 88px); }
.contact::before { content: ""; position: absolute; left: 0; right: 0; bottom: calc(100% - 1px); height: 22px; background: var(--accent) url('/assets/img/textura-papel.svg'); background-blend-mode: multiply;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%22600%22 height=%2222%22 viewBox=%220 0 600 22%22 preserveAspectRatio=%22none%22%3E%3Cpath d=%22M0 22 L0 8.9 L12 6.8 L24 12.8 L36 5.9 L48 11.4 L60 9.4 L72 5.7 L84 11.1 L96 5.4 L108 10.2 L120 5.8 L132 6.1 L144 10.1 L156 14.9 L168 6.5 L180 7.7 L192 12.5 L204 16.4 L216 11.9 L228 9.8 L240 16.7 L252 5.6 L264 15.3 L276 8.5 L288 6.7 L300 6.4 L312 8.7 L324 14.8 L336 7.2 L348 12.0 L360 12.7 L372 9.5 L384 11.6 L396 5.8 L408 5.7 L420 7.5 L432 13.2 L444 10.1 L456 8.8 L468 12.0 L480 10.4 L492 8.6 L504 14.5 L516 13.4 L528 7.9 L540 11.9 L552 11.3 L564 15.5 L576 13.8 L588 8.9 L600 8.9 L600 22Z%22/%3E%3C/svg%3E") repeat-x left bottom / 600px 22px;
  mask: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%22600%22 height=%2222%22 viewBox=%220 0 600 22%22 preserveAspectRatio=%22none%22%3E%3Cpath d=%22M0 22 L0 8.9 L12 6.8 L24 12.8 L36 5.9 L48 11.4 L60 9.4 L72 5.7 L84 11.1 L96 5.4 L108 10.2 L120 5.8 L132 6.1 L144 10.1 L156 14.9 L168 6.5 L180 7.7 L192 12.5 L204 16.4 L216 11.9 L228 9.8 L240 16.7 L252 5.6 L264 15.3 L276 8.5 L288 6.7 L300 6.4 L312 8.7 L324 14.8 L336 7.2 L348 12.0 L360 12.7 L372 9.5 L384 11.6 L396 5.8 L408 5.7 L420 7.5 L432 13.2 L444 10.1 L456 8.8 L468 12.0 L480 10.4 L492 8.6 L504 14.5 L516 13.4 L528 7.9 L540 11.9 L552 11.3 L564 15.5 L576 13.8 L588 8.9 L600 8.9 L600 22Z%22/%3E%3C/svg%3E") repeat-x left bottom / 600px 22px; }
.contact h2 { font-family: var(--serif); font-size: clamp(60px, 9vw, 160px); line-height: .9; letter-spacing: -.02em; margin-top: 20px; }
.contact h2 em { color: var(--on-accent); }
.contact__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 5vw, 80px); align-items: start; margin-top: clamp(40px, 5vw, 64px); }
.contact__grid > p { font-size: 19px; max-width: 26em; }
.links { display: grid; gap: 8px; }
.links a { display: flex; justify-content: space-between; align-items: center; gap: 16px; min-height: 64px; padding: 0 22px; background: var(--ink); color: var(--paper); text-decoration: none; font-family: var(--mono); font-size: 15px; font-weight: 500; transition: translate .4s var(--ease); }
.links a span:last-child { font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--on-accent); background: var(--accent); padding: 5px 10px; border-radius: 999px; white-space: nowrap; }
.foot { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-top: clamp(64px, 8vw, 120px); padding-top: 18px; border-top: 1px solid rgba(244,242,238,.4); }
.foot a { text-decoration: none; border-bottom: 1px solid rgba(244,242,238,.5); }

/* galeria (lightbox) */
.lb { position: fixed; inset: 0; z-index: 100; display: grid; grid-template-rows: auto minmax(0, 1fr) auto; background: rgba(11,11,11,.97); color: var(--paper); opacity: 0; visibility: hidden; transition: opacity .3s, visibility 0s linear .3s; }
.lb.is-open { opacity: 1; visibility: visible; transition: opacity .3s; }
.lb__top, .lb__bot { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 16px var(--pad); }
.lb__title { font-family: var(--serif); font-size: 30px; line-height: 1; }
.lb__stage { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 0 var(--pad); min-height: 0; }
.lb__frame { height: 100%; min-height: 0; display: grid; place-items: center; }
.lb__frame img, .lb__frame video { max-width: 100%; max-height: 100%; object-fit: contain; }
.lb__btn { width: 52px; height: 52px; display: grid; place-items: center; border-radius: 999px; border: 1.5px solid rgba(244,242,238,.5); background: transparent; color: var(--paper); cursor: pointer; }
.lb__btn svg { width: 20px; height: 20px; }
.lb__cap { color: #BDB9B1; }
body.lock { overflow: hidden; }

/* revelar ao entrar no ecrã */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .rv { animation: rv linear both; animation-timeline: view(); animation-range: entry 0% entry 70%; }
    @keyframes rv { from { opacity: 0; translate: 0 40px; } to { opacity: 1; translate: 0 0; } }
  }
}

@media (hover: hover) {
  .btn:hover { background: var(--ink); border-color: var(--ink); color: var(--paper); }
  .btn--accent:hover { background: var(--ink); border-color: var(--ink); }
  .shot:hover img { scale: 1.04; }
  .case__open:hover { color: var(--accent); }
  .links a:hover { translate: 6px 0; }
  .lb__btn:hover { background: var(--accent); border-color: var(--accent); }
  .top nav a:not(.btn):hover { color: var(--accent); }
}

@media (max-width: 1100px) {
  .top nav a.hide-m { display: none; }
  .films { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  body { font-size: 16px; }
  .top__in { height: 60px; }
  .mark { font-size: 22px; }
  .top nav { gap: 16px; }
  .hero__grid { grid-template-columns: minmax(0, 1fr); }
  .hero h1 { font-size: clamp(50px, 14vw, 84px); }
  .hero__lead { font-size: 17px; margin-top: 24px; }
  .hero__strip { margin-top: 24px; }
  .hero__strip figure:nth-child(1) { translate: 0 0; }
  .hero__strip figure:nth-child(3) { translate: 0 0; }
  .hero__cta .btn { flex: 1 1 100%; justify-content: center; padding: 0 16px; }
  .sec__head { grid-template-columns: minmax(0, 1fr); gap: 18px; }
  .sec__head p { justify-self: start; }
  .pos__grid { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .case, .case--rev { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .case__big, .case--rev .case__big { grid-column: 1 / -1; grid-row: auto; }
  .case__side, .case--rev .case__side { grid-column: 1 / -1; grid-row: auto; }
  .case__big .shot { aspect-ratio: 4 / 4.6; }
  .case__side { grid-template-rows: auto; }
  .case__side .case__info { align-self: start; }
  .vf::before, .vf::after { width: 16px; height: 16px; }
  .quotes { grid-template-columns: minmax(0, 1fr); }
  .about { grid-template-columns: minmax(0, 1fr); }
  .facts-lite { grid-template-columns: minmax(0, 1fr); }
  .collage { max-width: 520px; width: 100%; margin: 0 auto; }
  .contact__grid { grid-template-columns: minmax(0, 1fr); }
  .contact__grid > p { font-size: 17px; }
  .links a { padding: 0 16px; font-size: 14px; }
  .lb__stage { grid-template-columns: minmax(0, 1fr); padding: 0 12px; }
  .lb__stage > .lb__btn { display: none; }
  .lb__bot { flex-direction: column; align-items: stretch; }
  .lb__nav-m { display: flex; justify-content: space-between; }
}
@media (min-width: 901px) { .lb__nav-m { display: none; } }
@media (max-width: 560px) {
  .films { gap: 10px; }
  .film__frame { border-radius: 16px; }
  .film figcaption b { font-size: 21px; }
  .film__play { left: 10px; bottom: 10px; height: 32px; padding: 0 12px; font-size: 10px; }
}