html { scroll-behavior: smooth; }
section[id] { scroll-margin-top: 150px; }
@media (max-width: 700px) { section[id] { scroll-margin-top: 128px; } }
* { margin: 0; padding: 0; box-sizing: border-box; }
body { background: #060c1e; }
a { color: inherit; text-decoration: none; }
a:hover { color: #ddd6c0; }
::selection { background: #ddd6c0; color: #060c1e; }
input::placeholder { color: #666d85; }
@keyframes mrqzFade { from { opacity: 0; } to { opacity: 1; } }
@keyframes mrqzRise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
.js [data-reveal] { opacity: 0; transform: translateY(18px); transition: opacity 1s cubic-bezier(.16,.84,.44,1), transform 1s cubic-bezier(.16,.84,.44,1); }
.js [data-reveal].is-in { opacity: 1; transform: none; }
:focus-visible { outline: 1px solid #aaa48d; outline-offset: 4px; }
@media (prefers-reduced-motion: reduce) { [data-reveal] { opacity: 1; transform: none; transition: none; } html { scroll-behavior: auto; } }
@media (max-width: 640px) {
.mrqz-craft-grid { border-top: none !important; }
.mrqz-craft-col { border-right: none !important; border-top: 1px solid #ddd6c2; padding: 40px 0 0 0 !important; }
}
/* Collections: one full-bleed opener, then a calm three-up index. */
/* Two pieces lead, four follow in a vitrine — no orphan row. */
.mrqz-coll { display: grid; grid-template-columns: repeat(12, 1fr); gap: 2px; }
.mrqz-coll > *:nth-child(1), .mrqz-coll > *:nth-child(2) { grid-column: span 6; }
.mrqz-coll > *:nth-child(n+3) { grid-column: span 3; }
.mrqz-coll > .mrqz-tile { aspect-ratio: 3/4; }
.mrqz-coll > .mrqz-tile:nth-child(1), .mrqz-coll > .mrqz-tile:nth-child(2) { aspect-ratio: 5/4; }
/* The four smaller plates carry the name only; the copy would crowd them. */
.mrqz-coll > *:nth-child(n+3) .mrqz-body { display: none; }
.mrqz-coll > *:nth-child(n+3) .mrqz-cap h3 { font-size: clamp(20px, 1.9vw, 27px); }
.mrqz-coll > *:nth-child(n+3) .mrqz-cap { padding: 22px 20px 20px; }
@media (max-width: 900px) { .mrqz-coll > *:nth-child(n+3) { grid-column: span 6; } }
@media (max-width: 560px) {
.mrqz-coll > * { grid-column: span 12 !important; }
.mrqz-coll > .mrqz-tile, .mrqz-coll > .mrqz-tile:nth-child(1), .mrqz-coll > .mrqz-tile:nth-child(2) { aspect-ratio: 4/5 !important; }
.mrqz-coll > *:nth-child(n+3) .mrqz-body { display: block; }
}
@media (min-width: 861px) { .mrqz-craft-aside { position: sticky; top: 172px; } }
@media (max-width: 860px) { .mrqz-craft-wrap { grid-template-columns: 1fr !important; } }
/* Each tile is a lit plate: the image cools and recedes, the caption rises
out of a glass strip. */
.mrqz-tile { position: relative; overflow: hidden; background: #04081a; cursor: pointer; box-shadow: 0 0 0 1px rgba(200,204,210,0.14); }
.mrqz-tile .mrqz-img {
position: absolute; inset: 0; background-size: cover; background-position: center 22%;
filter: grayscale(0.42) brightness(0.72) contrast(1.06);
transform: scale(1.015);
transition: transform 1.1s cubic-bezier(.16,.84,.44,1), filter .8s ease;
}
.mrqz-tile:hover .mrqz-img { transform: scale(1.055); filter: grayscale(0) brightness(0.92) contrast(1.02); }
.mrqz-tile .mrqz-veil {
position: absolute; inset: 0; pointer-events: none;
background: linear-gradient(180deg, rgba(4,8,26,0.42) 0%, rgba(4,8,26,0.06) 38%, rgba(4,8,26,0.88) 100%);
transition: opacity .8s ease;
}
.mrqz-tile:hover .mrqz-veil { opacity: 0.82; }
/* A hairline that draws itself across the plate on approach. */
.mrqz-tile .mrqz-scan {
position: absolute; left: 0; right: 0; bottom: 0; height: 1px; pointer-events: none;
background: linear-gradient(90deg, transparent, rgba(241,235,216,0.85), transparent);
transform: scaleX(0); transform-origin: left;
transition: transform .9s cubic-bezier(.16,.84,.44,1);
}
.mrqz-tile:hover .mrqz-scan { transform: scaleX(1); }
.mrqz-tile .mrqz-idx {
position: absolute; top: 20px; left: 22px;
font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
font-size: 10px; letter-spacing: 0.24em; color: rgba(241,235,216,0.62);
transition: color .6s ease;
}
.mrqz-tile:hover .mrqz-idx { color: #f1ebd8; }
.mrqz-tile .mrqz-cap { position: absolute; left: 0; right: 0; bottom: 0; padding: 26px 24px 24px; }
.mrqz-tile .mrqz-body {
max-height: 0; opacity: 0; overflow: hidden;
transition: max-height .8s cubic-bezier(.16,.84,.44,1), opacity .55s ease;
}
.mrqz-tile:hover .mrqz-body { max-height: 120px; opacity: 1; }
.mrqz-tile .mrqz-more { display: inline-flex; align-items: center; gap: 10px; transition: gap .5s cubic-bezier(.16,.84,.44,1); }
.mrqz-tile:hover .mrqz-more { gap: 18px; }
/* Touch devices never hover: the plates show their copy and their glass
strip outright instead of hiding them behind an interaction that
cannot happen. */
@media (hover: none) {
.mrqz-tile .mrqz-cap {
-webkit-backdrop-filter: none !important; backdrop-filter: none !important;
background: linear-gradient(180deg, rgba(4,8,26,0) 0%, rgba(4,8,26,0.72) 55%, rgba(4,8,26,0.9) 100%) !important;
}
/* Touch: give the small header controls a real target. */
.mrqz-util a { padding: 13px 0; }
.mrqz-langpill button { padding: 12px 6px; }
.mrqz-nav a { padding-top: 12px; padding-bottom: 12px; }
.mrqz-tile .mrqz-body { max-height: none; opacity: 1; }
.mrqz-tile .mrqz-cap {
-webkit-backdrop-filter: blur(14px) saturate(170%); backdrop-filter: blur(14px) saturate(170%);
background: linear-gradient(180deg, rgba(241,235,216,0.05), rgba(241,235,216,0.12));
box-shadow: inset 0 1px 0 rgba(255,255,255,0.22);
}
.mrqz-tile .mrqz-scan { transform: scaleX(1); }
.mrqz-tile .mrqz-img { filter: grayscale(0.15) brightness(0.8) contrast(1.04); }
.mrqz-coll > *:nth-child(n+3) .mrqz-body { display: none; }
.mrqz-plate > img, .mrqz-plate > [role="img"] { filter: grayscale(0.12) contrast(1.02); }
}
@media (prefers-reduced-motion: reduce) {
.mrqz-tile .mrqz-body { max-height: none; opacity: 1; }
.mrqz-tile .mrqz-img, .mrqz-tile:hover .mrqz-img { transform: none; transition: none; }
}
.mrqz-rule-b { border-width: 0 0 1px; border-style: solid; border-image: linear-gradient(to right, transparent, #ddd6c2 22%, #ddd6c2 78%, transparent) 1; }
.mrqz-rule-t { border-width: 1px 0 0; border-style: solid; border-image: linear-gradient(to right, transparent, rgba(18,22,46,0.16) 22%, rgba(18,22,46,0.16) 78%, transparent) 1; }
.mrqz-rule-b-dark { border-width: 0 0 1px; border-style: solid; border-image: linear-gradient(to right, transparent, rgba(200,204,210,0.3) 22%, rgba(200,204,210,0.3) 78%, transparent) 1; }
.mrqz-rule-y-dark { border-width: 1px 0; border-style: solid; border-image: linear-gradient(to right, transparent, rgba(200,204,210,0.28), transparent) 1; }
/* Header: a flush white band at rest, lifting into a floating card on scroll. */
#mrqz-header { padding: 0; transition: padding .6s cubic-bezier(.16,.84,.44,1); }
#mrqz-header .mrqz-header-card {
position: relative;
background: rgba(255,255,255,0.93);
-webkit-backdrop-filter: saturate(180%) blur(24px);
backdrop-filter: saturate(180%) blur(24px);
max-width: 100%; border-radius: 0; box-shadow: none;
border-color: transparent transparent rgba(18,22,46,0.1);
transition: max-width .6s cubic-bezier(.16,.84,.44,1), border-radius .6s cubic-bezier(.16,.84,.44,1),
box-shadow .6s ease, border-color .6s ease, background-color .6s ease;
}
#mrqz-header[data-lift="1"] { padding: clamp(10px, 1.4vw, 18px) clamp(14px, 3vw, 28px); }
/* Lifted, the card floats over navy sections: it keeps more white so the
small type stays legible against whatever passes beneath it. */
#mrqz-header[data-lift="1"] .mrqz-nav a,
#mrqz-header[data-lift="1"] .mrqz-util a { color: #2a2e44; }
#mrqz-header[data-lift="1"] .mrqz-header-card {
max-width: 1180px; border-radius: 22px;
background: rgba(255,255,255,0.86);
box-shadow: 0 12px 38px rgba(6,12,30,0.10),
inset 0 1px 0 rgba(255,255,255,0.85),
inset 0 -1px 0 rgba(255,255,255,0.35);
border-color: rgba(255,255,255,0.6);
}
/* Liquid glass: a specular sheen across the top of the lifted card. */
#mrqz-header .mrqz-header-card::before {
content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0;
background: linear-gradient(160deg, rgba(255,255,255,0.75) 0%, rgba(255,255,255,0.16) 34%, rgba(255,255,255,0) 58%);
transition: opacity .6s ease;
}
#mrqz-header[data-lift="1"] .mrqz-header-card::before { opacity: 1; }
/* Logo and tagline contract with the same lift. */
#mrqz-header .mrqz-logo { height: 44px; transition: height .55s cubic-bezier(.16,.84,.44,1); }
#mrqz-header[data-lift="1"] .mrqz-logo { height: 30px; }
#mrqz-header .mrqz-tag { max-height: 24px; opacity: 1; overflow: hidden;
transition: opacity .4s ease, max-height .55s cubic-bezier(.16,.84,.44,1); }
#mrqz-header[data-lift="1"] .mrqz-tag { max-height: 0; opacity: 0; }
/* One logo at a time: the hero carries the full mark; the header wordmark
only arrives once the page lifts past it. */
#mrqz-header .mrqz-brand > a { transition: opacity .5s ease, max-height .55s cubic-bezier(.16,.84,.44,1), max-width .55s cubic-bezier(.16,.84,.44,1); max-height: 90px; overflow: hidden; }
#mrqz-header[data-lift="0"] .mrqz-brand > a { opacity: 1; max-height: 90px; pointer-events: auto; }
@media (max-width: 860px) {
#mrqz-header[data-lift="0"] .mrqz-brand > a { max-height: 90px; }
}
/* cabeçalho estático: sem barra de progresso a mexer */
#mrqz-progress { display: none !important; }
/* ===== Hero (referência hero-check: vídeo + Bodoni) ===== */
#top.hero-blazer { position: relative; height: 100svh; min-height: 640px; margin-top: calc(-1 * var(--hdr-h, 150px)); display: flex !important; align-items: center; padding: 0 !important; text-align: left !important; overflow: hidden; background: #04091a; color: #FEFCEC; }
#top .hb-bg { position: absolute; inset: -4%; z-index: 0; will-change: transform; }
#top .hb-bg video { width: 100%; height: 100%; object-fit: cover; object-position: right center; display: block; background: #04091a; }
#top .hb-tint { position: absolute; inset: 0; z-index: 1; background:
linear-gradient(96deg,#04091a 0%,rgba(4,9,26,.86) 26%,rgba(4,9,26,.4) 50%,rgba(4,9,26,0) 72%),
radial-gradient(130% 120% at 72% 42%, rgba(0,0,0,0) 52%, rgba(0,0,0,.5) 100%); }
#top .hb-grain { position: absolute; inset: 0; z-index: 2; opacity: .07; pointer-events: none; mix-blend-mode: overlay;
background-image: 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='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); background-size: 160px; }
#top .hb-wrap { position: relative; z-index: 3; width: 100%; max-width: 1200px; margin: 0 auto; padding: 0 clamp(20px,5vw,48px); will-change: transform; }
#top .hb-kicker { font-size: 12px; font-weight: 500; letter-spacing: .28em; text-transform: uppercase; display: inline-flex; align-items: center; gap: 14px; color: #C8B98A; margin-bottom: 26px; opacity: 0; animation: hbFadeUp .9s .15s ease forwards; }
#top .hb-kicker .ln { display: inline-block; width: 40px; border-top: 1px solid #C8B98A; }
#top .hb-h1 { font-family: 'Bodoni Moda','Didot',Georgia,serif; font-weight: 400; letter-spacing: -.01em; color: #FEFCEC; font-size: clamp(46px,6.8vw,104px); line-height: .95; }
#top .hb-h1 .lnw { display: block; overflow: hidden; padding-bottom: .03em; }
#top .hb-h1 .lnw i { display: block; font-style: normal; transform: translateY(115%); animation: hbRise 1.05s cubic-bezier(.16,.84,.44,1) forwards; }
#top .hb-h1 .lnw:nth-child(1) i { animation-delay: .3s; }
#top .hb-h1 .lnw:nth-child(2) i { animation-delay: .44s; font-style: italic; color: #efe7cf; }
#top .hb-sub { max-width: 44ch; margin-top: 26px; color: #8B94A8; font-weight: 300; font-size: clamp(14px,1.1vw,17px); line-height: 1.6; opacity: 0; animation: hbFadeUp 1s .62s ease forwards; }
#top .hb-ctarow { display: flex; gap: 22px; align-items: center; flex-wrap: wrap; margin-top: 38px; opacity: 0; animation: hbFadeUp 1s .8s ease forwards; }
#top .hb-cta { display: inline-flex; align-items: center; gap: 12px; padding: 14px 28px; border: 1px solid #FEFCEC; background: #FEFCEC; color: #040A1C; font-size: 13.5px; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; border-radius: 6px; text-decoration: none; transition: background .4s, color .4s; }
#top .hb-cta:hover { background: transparent; color: #FEFCEC; }
#top .hb-textlink { font-size: 13px; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; color: #FEFCEC; display: inline-flex; gap: 12px; align-items: center; opacity: .85; text-decoration: none; }
#top .hb-textlink:hover { opacity: 1; }
#top .hb-textlink .arw { display: inline-block; width: 26px; border-top: 1px solid currentColor; transition: width .3s; }
#top .hb-textlink:hover .arw { width: 40px; }
#top .hero-card { position: absolute; z-index: 3; background: rgba(254,252,236,.12); -webkit-backdrop-filter: blur(9px); backdrop-filter: blur(9px); border: 1px solid rgba(254,252,236,.26); border-radius: 14px; padding: 16px 18px; max-width: 236px; opacity: 0; animation: hbFadeUp 1s 1.05s ease forwards; }
#top .hero-card .k { font-size: 10.5px; letter-spacing: .24em; text-transform: uppercase; color: #C8B98A; margin-bottom: 7px; }
#top .hero-card p { font-size: 13.5px; line-height: 1.42; color: rgba(254,252,236,.92); }
#top .hero-card.a { right: 6vw; top: 24%; }
#top .hero-card.b { right: 13vw; bottom: 19%; }
#top .hb-side { position: absolute; right: clamp(14px,2.2vw,26px); top: 50%; z-index: 3; transform: translateY(-50%); writing-mode: vertical-rl; font-size: 10.5px; letter-spacing: .42em; text-transform: uppercase; color: rgba(254,252,236,.4); }
#top .hb-scrollcue { position: absolute; left: clamp(20px,5vw,48px); bottom: 24px; z-index: 3; display: flex; align-items: center; gap: 14px; font-size: 10.5px; letter-spacing: .3em; text-transform: uppercase; color: #8B94A8; }
#top .hb-scrollcue .bar { position: relative; width: 1px; height: 46px; background: rgba(254,252,236,.22); overflow: hidden; }
#top .hb-scrollcue .bar::after { content: ""; position: absolute; left: 0; top: -60%; width: 100%; height: 60%; background: #C8B98A; animation: hbDrip 2.4s ease-in-out infinite; }
@keyframes hbRise { to { transform: none; } }
@keyframes hbFadeUp { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
@keyframes hbDrip { 0% { top: -60%; } 55% { top: 100%; } 100% { top: 100%; } }
@media (max-width: 1040px) { #top .hero-card, #top .hb-side { display: none; } }
@media (max-width: 860px) {
#top.hero-blazer { align-items: flex-end; padding-bottom: 13vh !important; }
#top .hb-bg video { object-position: 72% center; }
#top .hb-tint { background: linear-gradient(180deg,rgba(4,9,26,.45) 0%,rgba(4,9,26,.1) 34%,rgba(4,9,26,.72) 74%,#04091a 100%); }
#top .hb-sub { max-width: none; }
}
@media (prefers-reduced-motion: reduce) {
#top .hb-kicker, #top .hb-sub, #top .hb-ctarow, #top .hero-card { animation: none; opacity: 1; }
#top .hb-h1 .lnw i { animation: none; transform: none; }
#top .hb-scrollcue .bar::after { animation: none; }
}
/* Header rows. At rest the brand stacks and centres; lifted, it compacts
onto a single line so the bar stops eating reading space. */
.mrqz-util { height: 40px; overflow: hidden; transition: height .55s cubic-bezier(.16,.84,.44,1); }
#mrqz-header[data-lift="1"] .mrqz-util { height: 30px; }
.mrqz-brand { flex-direction: column; justify-content: center; transition: padding .55s cubic-bezier(.16,.84,.44,1); }
#mrqz-header[data-lift="1"] .mrqz-brand { flex-direction: row; justify-content: space-between; padding-top: 0; }
.mrqz-nav {
display: flex; flex-wrap: wrap; justify-content: center;
gap: clamp(20px, 3vw, 46px); font-size: 10px; letter-spacing: 0.28em;
text-transform: uppercase; color: #54576a; font-weight: 300;
padding: 18px 0 20px; transition: padding .55s cubic-bezier(.16,.84,.44,1);
}
#mrqz-header[data-lift="1"] .mrqz-nav { padding: 16px 0; justify-content: flex-end; }
.mrqz-nav a { transition: color .3s; padding-bottom: 4px; border-bottom: 1px solid transparent; white-space: nowrap; }
.mrqz-nav a:hover { color: #12162e; border-bottom-color: rgba(18,22,46,0.5); }
.mrqz-burger {
display: none; flex-direction: column; justify-content: center; align-items: center;
gap: 5px; background: transparent; border: none; cursor: pointer;
width: 44px; height: 44px; margin: 10px 0 8px;
}
.mrqz-burger span { display: block; width: 22px; height: 1px; background: #12162e; transition: transform .4s cubic-bezier(.16,.84,.44,1); }
.mrqz-burger.is-open span:nth-child(1) { transform: translateY(3px) rotate(45deg); }
.mrqz-burger.is-open span:nth-child(2) { transform: translateY(-3px) rotate(-45deg); }
@media (max-width: 860px) {
.mrqz-nav { display: none; }
.mrqz-burger { display: flex; }
.mrqz-brand, #mrqz-header[data-lift="1"] .mrqz-brand {
flex-direction: row; justify-content: space-between; padding-top: 0;
}
}
.mrqz-util-link { color: #54576a; transition: color .3s; letter-spacing: 0.22em; white-space: nowrap; }
.mrqz-util-link:hover { color: #12162e; }
/* Liquid-glass buttons: frosted pane, specular top edge, sheen sweeping
across on hover. */
.mrqz-glass {
position: relative; overflow: hidden; isolation: isolate;
-webkit-backdrop-filter: blur(14px) saturate(180%);
backdrop-filter: blur(14px) saturate(180%);
transition: background-color .5s ease, box-shadow .5s ease, border-color .5s ease,
letter-spacing .5s cubic-bezier(.16,.84,.44,1), transform .18s ease;
}
.mrqz-glass::before {
content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
background: linear-gradient(150deg, rgba(255,255,255,0.5) 0%, rgba(255,255,255,0.08) 42%, rgba(255,255,255,0) 62%);
}
.mrqz-glass::after {
content: ""; position: absolute; top: 0; bottom: 0; left: -60%; width: 45%;
z-index: -1; pointer-events: none; transform: skewX(-18deg);
background: linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.55) 50%, rgba(255,255,255,0) 100%);
transition: left .75s cubic-bezier(.16,.84,.44,1);
}
.mrqz-glass:hover::after { left: 120%; }
/* Ivory glass, for the navy sections. */
.mrqz-glass-light {
background-color: rgba(241,235,216,0.28); color: #ffffff;
border: 1px solid rgba(241,235,216,0.5);
box-shadow: 0 8px 30px rgba(4,8,26,0.4), inset 0 1px 0 rgba(255,255,255,0.5);
}
.mrqz-glass-light:hover {
background-color: rgba(241,235,216,0.42);
border-color: rgba(255,255,255,0.75);
box-shadow: 0 12px 40px rgba(4,8,26,0.5), inset 0 1px 0 rgba(255,255,255,0.7);
}
/* Navy glass, for the white sections. */
.mrqz-glass-dark {
background-color: rgba(6,12,30,0.72); color: #f1ebd8;
border: 1px solid rgba(255,255,255,0.16);
box-shadow: 0 8px 28px rgba(6,12,30,0.24), inset 0 1px 0 rgba(255,255,255,0.22);
}
.mrqz-glass-dark:hover {
background-color: rgba(18,22,46,0.82);
border-color: rgba(255,255,255,0.28);
box-shadow: 0 12px 36px rgba(6,12,30,0.32), inset 0 1px 0 rgba(255,255,255,0.32);
}
.mrqz-glass:active { transform: translateY(1px); }
/* The lens: a specular pool that follows the pointer across the pane. */
.mrqz-glass-light, .mrqz-glass-dark {
background-image: radial-gradient(140px circle at var(--gx, 50%) var(--gy, 130%), rgba(255,255,255,0.30), rgba(255,255,255,0) 68%);
}
.mrqz-glass-dark { background-image: radial-gradient(140px circle at var(--gx, 50%) var(--gy, 130%), rgba(241,235,216,0.22), rgba(255,255,255,0) 68%); }
/* Scroll progress: one hairline along the base of the header. */
#mrqz-progress {
position: absolute; left: 0; right: 0; bottom: 0; height: 1px; transform-origin: left;
transform: scaleX(0); background: linear-gradient(90deg, rgba(18,22,46,0.15), #12162e);
transition: transform .12s linear, opacity .5s ease; pointer-events: none;
}
/* Film grain over the whole page — depth without ornament. */
body::after {
content: ""; position: fixed; inset: 0; z-index: 3000; pointer-events: none; opacity: 0.038;
background-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}
/* Hero light field: two slow blooms drifting behind the monogram. */
.mrqz-bloom { position: absolute; inset: -20%; pointer-events: none; filter: blur(40px); }
.mrqz-bloom i {
position: absolute; display: block; border-radius: 50%;
background: radial-gradient(circle, rgba(122,138,196,0.16), rgba(122,138,196,0) 70%);
}
.mrqz-bloom i:nth-child(1) { width: 52vw; height: 52vw; left: 8%; top: 6%; animation: mrqzDriftA 26s ease-in-out infinite; }
.mrqz-bloom i:nth-child(2) { width: 40vw; height: 40vw; right: 6%; bottom: 4%; background: radial-gradient(circle, rgba(221,214,192,0.12), rgba(221,214,192,0) 70%); animation: mrqzDriftB 34s ease-in-out infinite; }
@keyframes mrqzDriftA { 0%,100% { transform: translate3d(0,0,0) scale(1); } 50% { transform: translate3d(6%, 4%, 0) scale(1.12); } }
@keyframes mrqzDriftB { 0%,100% { transform: translate3d(0,0,0) scale(1.06); } 50% { transform: translate3d(-5%, -5%, 0) scale(0.94); } }
/* Language toggle sits in its own small glass pill. */
.mrqz-langpill {
display: flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 999px;
background: rgba(18,22,46,0.04); border: 1px solid rgba(18,22,46,0.08);
-webkit-backdrop-filter: blur(10px) saturate(160%); backdrop-filter: blur(10px) saturate(160%);
}
.mrqz-langpill button {
background: transparent; border: none; cursor: pointer; padding: 4px 2px;
font-family: inherit; font-size: 10px; letter-spacing: 0.22em; text-transform: uppercase;
font-weight: 300; transition: color .3s; color: #6b6e80;
}
.mrqz-langpill button.is-active { color: #12162e; }
/* Collection captions rise out of a glass strip on approach. */
.mrqz-tile .mrqz-cap {
-webkit-backdrop-filter: none; backdrop-filter: none;
background: linear-gradient(180deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0) 100%);
box-shadow: inset 0 0 0 0 rgba(255,255,255,0);
transition: backdrop-filter .7s ease, -webkit-backdrop-filter .7s ease, background .7s ease, box-shadow .7s ease;
}
.mrqz-tile:hover .mrqz-cap {
-webkit-backdrop-filter: blur(16px) saturate(170%); backdrop-filter: blur(16px) saturate(170%);
background: linear-gradient(180deg, rgba(241,235,216,0.06) 0%, rgba(241,235,216,0.13) 100%);
box-shadow: inset 0 1px 0 0 rgba(255,255,255,0.28);
}
/* Hero: the house signs itself in, one element at a time. */
@keyframes mrqzSign { from { opacity: 0; transform: translateY(18px) scale(1.03); filter: blur(6px); } to { opacity: 1; transform: none; filter: none; } }
@keyframes mrqzDraw { from { transform: scaleY(0); } to { transform: scaleY(1); } }
.js .mrqz-enter > * { opacity: 0; animation: mrqzSign 1.5s cubic-bezier(.16,.84,.44,1) forwards; }
.mrqz-enter > *:nth-child(1) { animation-duration: 2s; }
.mrqz-enter > *:nth-child(2) { animation: mrqzDraw 1.2s cubic-bezier(.16,.84,.44,1) .55s forwards; opacity: 1; transform-origin: top; transform: scaleY(0); }
.mrqz-enter > *:nth-child(3) { animation-delay: .85s; }
.mrqz-enter > *:nth-child(4) { animation-delay: 1.15s; }
.mrqz-enter > *:nth-child(5) { animation-delay: 1.4s; }
.mrqz-enter > *:nth-child(6) { animation-delay: 1.7s; }
/* Parallax: the hero recedes as the page moves past it. */
.mrqz-enter { will-change: transform, opacity; }
.mrqz-hero-vig {
position: absolute; inset: 0; pointer-events: none;
background: radial-gradient(120% 90% at 50% 45%, rgba(0,0,0,0) 42%, rgba(0,0,0,0.45) 100%);
}
/* Headings uncover rather than fade — a slow wipe from below. */
.js .mrqz-wipe { clip-path: inset(0 0 105% 0); transition: clip-path 1.5s cubic-bezier(.16,.84,.44,1); }
.js .is-in .mrqz-wipe, .js .mrqz-wipe.is-in { clip-path: inset(0 0 -10% 0); }
html.mrqz-hero-off .mrqz-bloom i { animation-play-state: paused; }
html.mrqz-hero-off .mrqz-bloom { visibility: hidden; }
/* Phones pay a real price for large blurs: soften the field instead. */
@media (max-width: 860px) {
.mrqz-bloom { filter: blur(24px); }
.mrqz-bloom i:nth-child(1) { width: 70vw; height: 70vw; }
.mrqz-bloom i:nth-child(2) { width: 60vw; height: 60vw; }
body::after { display: none; }
}
@media (prefers-reduced-motion: reduce) {
.mrqz-bloom i { animation: none; }
.mrqz-enter > * { opacity: 1 !important; animation: none !important; transform: none !important; }
.mrqz-wipe { clip-path: none; transition: none; }
}
/* One numeric mark across the site: monospace, with a hairline that draws
itself as the row is approached. */
.mrqz-num {
font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
font-size: 11px; letter-spacing: 0.22em; color: #aaa48d;
padding-top: 9px; display: flex; flex-direction: column; gap: 12px;
transition: color .5s ease;
}
.mrqz-num span {
display: block; width: 30px; height: 1px; background: currentColor;
transform: scaleX(0.35); transform-origin: left;
transition: transform .7s cubic-bezier(.16,.84,.44,1);
}
.mrqz-step:hover .mrqz-num { color: #12162e; }
.mrqz-step:hover .mrqz-num span { transform: scaleX(1); }
/* Plates: images sit cool and recede until approached, matching the
collections tiles. */
.mrqz-plate > img, .mrqz-plate > [role="img"] {
filter: grayscale(0.34) contrast(1.04);
transform: translate3d(0, var(--py, 0px), 0) scale(1.09);
transition: filter .8s ease, transform .25s linear;
}
.mrqz-plate:hover > img, .mrqz-plate:hover > [role="img"] {
filter: grayscale(0) contrast(1);
transform: translate3d(0, var(--py, 0px), 0) scale(1.13);
transition: filter .8s ease, transform 1.1s cubic-bezier(.16,.84,.44,1);
}
.mrqz-plate::after {
content: ""; position: absolute; inset: 0; pointer-events: none;
box-shadow: inset 0 0 0 1px rgba(200,204,210,0.16);
}
.mrqz-plate-idx {
position: absolute; top: 16px; left: 18px; pointer-events: none;
font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
font-size: 10px; letter-spacing: 0.24em; color: rgba(241,235,216,0.7);
text-shadow: 0 1px 6px rgba(4,8,26,0.7);
}
/* Hero: a fine scan texture for depth, and a scroll cue that breathes. */
.mrqz-hero-grid {
position: absolute; inset: 0; pointer-events: none; opacity: 0.5;
background-image: repeating-linear-gradient(90deg, rgba(200,204,210,0.045) 0 1px, transparent 1px 82px);
mask-image: radial-gradient(80% 65% at 50% 45%, #000 0%, transparent 78%);
-webkit-mask-image: radial-gradient(80% 65% at 50% 45%, #000 0%, transparent 78%);
}
.mrqz-cue { animation: mrqzCue 3.4s ease-in-out infinite; }
@keyframes mrqzCue {
0%, 100% { transform: scaleY(0.4); opacity: 0.35; transform-origin: top; }
50% { transform: scaleY(1); opacity: 0.9; transform-origin: top; }
}
/* Scrollbar in the house palette rather than the browser default. */
* { scrollbar-width: thin; scrollbar-color: #454b66 transparent; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #454b66; border: 3px solid #ffffff; border-radius: 99px; }
::-webkit-scrollbar-thumb:hover { background: #12162e; }
@media (prefers-reduced-motion: reduce) {
.mrqz-cue { animation: none; }
.mrqz-plate > img, .mrqz-plate > [role="img"],
.mrqz-plate:hover > img, .mrqz-plate:hover > [role="img"] { transform: none; transition: none; }
}
/* WhatsApp floating button. */
#mrqz-wa {
position: fixed; right: clamp(18px, 3vw, 34px); bottom: clamp(18px, 3vw, 34px);
z-index: 900; width: 52px; height: 52px; border-radius: 50%;
display: flex; align-items: center; justify-content: center;
transition: transform .4s cubic-bezier(.16,.84,.44,1), opacity .4s ease, background .35s, box-shadow .4s ease;
}
#mrqz-wa.is-hidden { opacity: 0; transform: scale(0.8); pointer-events: none; }
/* Booking form fields. */
.mrqz-field { background: transparent; border: none; border-bottom: 1px solid rgba(200,204,210,0.28); padding: 8px 0; font-family: inherit; font-size: 16px; font-weight: 300; color: #ffffff; outline: none; transition: border-color .35s; }
.mrqz-field:focus { border-bottom-color: #c7c2ae; }
select.mrqz-field { cursor: pointer; }
textarea.mrqz-field { resize: none; }
.mrqz-consent input { appearance: none; -webkit-appearance: none; width: 15px; height: 15px; margin-top: 3px; flex: none; border: 1px solid rgba(200,204,210,0.4); background: transparent; cursor: pointer; transition: background .3s, border-color .3s; }
.mrqz-consent input:checked { background: #f1ebd8; border-color: #f1ebd8; }
[hidden] { display: none !important; }
/* ===== Cabeçalho estilo A — integrado sobre a foto ===== */
#mrqz-header .mrqz-header-card { background: transparent; -webkit-backdrop-filter: none; backdrop-filter: none; border: none; box-shadow: none; max-width: 100%; border-radius: 0; overflow: visible; transition: background .45s ease, box-shadow .45s ease, -webkit-backdrop-filter .45s ease, backdrop-filter .45s ease; }
.hdr-row { max-width: 1280px; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: clamp(14px,1.8vw,24px) clamp(20px,4vw,56px); transition: padding .4s cubic-bezier(.16,.84,.44,1); }
.hdr-brand { display: flex; flex-direction: row; align-items: center; text-decoration: none; }
.hdr-logo { height: clamp(40px,3.8vw,54px); width: auto; display: block; transition: height .4s cubic-bezier(.16,.84,.44,1); }
.hdr-nav { display: flex; align-items: center; gap: clamp(18px,2.4vw,36px); }
.hdr-nav a { font-size: 13px; letter-spacing: 0.03em; color: #e4dfd0; text-decoration: none; white-space: nowrap; opacity: .85; transition: color .3s ease, opacity .3s ease; }
.hdr-nav a:hover { color: #ffffff; opacity: 1; }
.hdr-right { display: flex; align-items: center; gap: 16px; }
/* Botão "Marcar prova" (estilo referência) */
.hdr-book { display: inline-flex; align-items: center; padding: 10px 22px; border: 1px solid rgba(254,252,236,.55); background: transparent; color: #FEFCEC; font-size: 12.5px; font-weight: 500; letter-spacing: .06em; text-transform: uppercase; border-radius: 6px; text-decoration: none; white-space: nowrap; transition: background .4s ease, color .4s ease, border-color .4s ease; }
.hdr-book:hover { background: #FEFCEC; color: #040A1C; border-color: #FEFCEC; }
#mrqz-header .mrqz-langpill { display: flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 999px; background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.2); }
#mrqz-header .mrqz-langpill button { background: none; border: none; cursor: pointer; font-family: inherit; font-size: 10px; letter-spacing: 0.16em; padding: 2px; color: #cbc5b2; transition: color .3s ease; }
#mrqz-header .mrqz-langpill button.is-active { color: #ffffff; }
#mrqz-header .mrqz-burger span { background: #efe9d8; transition: background .45s ease; }
/* estado sólido (fora da foto) */
#mrqz-header.hdr-solid .mrqz-header-card { background: rgba(255,255,255,0.94); -webkit-backdrop-filter: saturate(180%) blur(20px); backdrop-filter: saturate(180%) blur(20px); box-shadow: 0 1px 0 rgba(18,22,46,0.08); }
#mrqz-header.hdr-solid .hdr-row { padding-top: 7px; padding-bottom: 7px; }
#mrqz-header.hdr-solid .hdr-logo { height: clamp(26px,2.4vw,34px); }
#mrqz-header.hdr-solid .hdr-book { padding-top: 8px; padding-bottom: 8px; }
#mrqz-header.hdr-solid .hdr-nav a { color: #54576a; }
#mrqz-header.hdr-solid .hdr-nav a:hover { color: #12162e; }
#mrqz-header.hdr-solid .hdr-book { background: #040A1C; color: #FEFCEC; border-color: #040A1C; }
#mrqz-header.hdr-solid .hdr-book:hover { background: transparent; color: #040A1C; }
#mrqz-header.hdr-solid .mrqz-langpill { background: rgba(18,22,46,0.04); border-color: rgba(18,22,46,0.1); }
#mrqz-header.hdr-solid .mrqz-langpill button { color: #6b6e80; }
#mrqz-header.hdr-solid .mrqz-langpill button.is-active { color: #12162e; }
#mrqz-header.hdr-solid .mrqz-burger span { background: #12162e; }
@media (max-width: 860px) { .hdr-nav { display: none; } }
@media (max-width: 560px) { .hdr-book { display: none; } }
/* ===================== MULTI-PÁGINA (Fase 1) ===================== */
/* Dropdown "Serviços" no cabeçalho */
.hdr-drop { position: relative; display: inline-flex; align-items: center; }
.hdr-drop-t { font-size: 13px; letter-spacing: .03em; color: #e4dfd0; opacity: .85; cursor: pointer; text-decoration: none; display: inline-flex; align-items: center; gap: 7px; white-space: nowrap; transition: color .3s ease, opacity .3s ease; }
.hdr-drop-t::after { content: ""; width: 6px; height: 6px; border-right: 1px solid currentColor; border-bottom: 1px solid currentColor; transform: rotate(45deg) translateY(-1px); opacity: .7; transition: transform .3s ease; }
.hdr-drop:hover .hdr-drop-t, .hdr-drop.is-open .hdr-drop-t { color: #fff; opacity: 1; }
.hdr-drop:hover .hdr-drop-t::after, .hdr-drop.is-open .hdr-drop-t::after { transform: rotate(225deg) translateY(-2px); }
.hdr-drop-menu { position: absolute; top: 100%; left: 50%; transform: translateX(-50%) translateY(8px); min-width: 210px; background: rgba(255,255,255,.98); -webkit-backdrop-filter: saturate(180%) blur(20px); backdrop-filter: saturate(180%) blur(20px); border: 1px solid rgba(18,22,46,.08); border-radius: 12px; box-shadow: 0 18px 44px rgba(6,12,30,.16); padding: 10px; display: flex; flex-direction: column; gap: 2px; opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .28s ease, transform .28s cubic-bezier(.16,.84,.44,1), visibility .28s; z-index: 60; }
.hdr-drop-menu::before { content: ""; position: absolute; top: -12px; left: 0; right: 0; height: 12px; }
.hdr-drop:hover .hdr-drop-menu, .hdr-drop.is-open .hdr-drop-menu { opacity: 1; visibility: visible; pointer-events: auto; transform: translateX(-50%) translateY(4px); }
.hdr-drop-menu a { font-size: 12px; letter-spacing: .16em; text-transform: uppercase; color: #54576a; padding: 11px 14px; border-radius: 8px; white-space: nowrap; text-decoration: none; transition: background .25s ease, color .25s ease; }
.hdr-drop-menu a:hover { background: rgba(18,22,46,.05); color: #12162e; }
#mrqz-header.hdr-solid .hdr-drop-t { color: #54576a; }
#mrqz-header.hdr-solid .hdr-drop:hover .hdr-drop-t { color: #12162e; }
@media (max-width: 860px) { .hdr-drop { display: none; } }
/* Banner de topo das páginas interiores (cabeçalho transparente por cima) */
.page-hero { position: relative; min-height: 56svh; margin-top: calc(-1 * var(--hdr-h, 120px)); display: flex; align-items: flex-end; overflow: hidden; background: #04091a; color: #FEFCEC; }
.page-hero .ph-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; }
.page-hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(4,9,26,.55) 0%, rgba(4,9,26,.12) 42%, rgba(4,9,26,.78) 100%); }
.page-hero .ph-wrap { position: relative; z-index: 2; width: 100%; max-width: 1200px; margin: 0 auto; padding: 0 clamp(20px,5vw,56px) clamp(46px,7vh,84px); }
.ph-kicker { font-size: 11px; letter-spacing: .34em; text-transform: uppercase; color: #C8B98A; margin-bottom: 16px; }
.ph-title { font-family: 'Bodoni Moda','Didot',Georgia,serif; font-weight: 400; letter-spacing: -.01em; font-size: clamp(40px,6vw,86px); line-height: .98; color: #FEFCEC; }
.ph-sub { margin-top: 18px; max-width: 54ch; color: #cdd0da; font-weight: 300; font-size: clamp(14px,1.1vw,17px); line-height: 1.7; }
@media (max-width: 700px) { .page-hero { min-height: 60svh; } }
/* Conteúdo genérico de página */
.wrap { max-width: 1180px; margin: 0 auto; }
.section { padding: clamp(70px,9vw,140px) clamp(20px,4vw,56px); }
.section--light { background: #ffffff; }
.section--cream { background: #f6f3ea; }
.section--navy { background: #060c1e; color: #ffffff; }
.eyebrow { font-size: 11px; letter-spacing: .4em; text-transform: uppercase; color: #8d8d95; font-weight: 300; }
.section--navy .eyebrow { color: #8d8d95; }
.h-serif { font-family: 'Cormorant Garamond', serif; font-weight: 400; line-height: 1.14; letter-spacing: .01em; color: #12162e; }
.section--navy .h-serif { color: #ffffff; }
.lede { font-size: 16px; line-height: 1.9; color: #54576a; font-weight: 300; }
.section--navy .lede { color: #b9bccb; }
.grid-2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(340px,100%),1fr)); gap: clamp(40px,6vw,90px); align-items: center; }
.svc-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.svc-list li { display: grid; grid-template-columns: 40px 1fr; gap: 0 22px; padding: clamp(22px,3vw,30px) 0; border-bottom: 1px solid rgba(18,22,46,.1); }
.svc-list li:last-child { border-bottom: 0; }
.svc-list .n { font-family: ui-monospace, Menlo, monospace; font-size: 11px; letter-spacing: .2em; color: #aaa48d; padding-top: 6px; }
.svc-list h3 { font-family: 'Cormorant Garamond', serif; font-weight: 500; font-size: clamp(21px,2vw,27px); color: #12162e; margin-bottom: 8px; }
.svc-list p { font-size: 15px; line-height: 1.85; color: #54576a; font-weight: 300; max-width: 60ch; }
.cta-line { display: inline-flex; align-items: center; gap: 14px; font-size: 11px; letter-spacing: .28em; text-transform: uppercase; color: #12162e; text-decoration: none; }
.section--navy .cta-line { color: #f1ebd8; }
.cta-line .arw { width: 30px; height: 1px; background: currentColor; display: inline-block; transition: width .4s cubic-bezier(.16,.84,.44,1); }
.cta-line:hover .arw { width: 48px; }
/* ---- Serviços (hub) / cidades / processo (Fase 2) ---- */
.svc-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(300px,100%),1fr)); gap: 2px; }
.svc-card { position: relative; display: block; text-decoration: none; overflow: hidden; background: #04081a; box-shadow: 0 0 0 1px rgba(200,204,210,.14); }
.svc-card-img { aspect-ratio: 4/5; background-size: cover; background-position: center 22%; filter: grayscale(.4) brightness(.72) contrast(1.05); transform: scale(1.02); transition: transform 1.1s cubic-bezier(.16,.84,.44,1), filter .8s ease; }
.svc-card:hover .svc-card-img { transform: scale(1.06); filter: grayscale(0) brightness(.92) contrast(1.02); }
.svc-card-cap { position: absolute; left: 0; right: 0; bottom: 0; padding: 24px; display: flex; flex-direction: column; gap: 14px; background: linear-gradient(180deg, rgba(4,8,26,0) 0%, rgba(4,8,26,.85) 100%); }
.svc-card-cap h3 { font-family: 'Cormorant Garamond', serif; font-weight: 400; font-size: clamp(24px,2.4vw,34px); color: #fff; line-height: 1; }
.svc-card-cap .cta-line { color: #f1ebd8; font-size: 10px; letter-spacing: .3em; }
.svc-card-cap .cta-line .arw { background: #f1ebd8; }
.svc-grid--3 { grid-template-columns: repeat(auto-fit, minmax(min(220px,100%),1fr)); gap: 1px; }
.city-card { background: #ffffff; padding: clamp(28px,3vw,40px); border: 1px solid rgba(18,22,46,.1); }
.city-card .n { font-family: ui-monospace, Menlo, monospace; font-size: 11px; letter-spacing: .2em; color: #aaa48d; }
.city-card h3 { font-size: clamp(24px,2.4vw,32px); margin: 14px 0 8px; color: #12162e; }
.city-card p { font-size: 14px; color: #54576a; font-weight: 300; }
.proc-step { padding: clamp(40px,5vw,64px) 0; border-bottom: 1px solid rgba(18,22,46,.1); align-items: center; }
.proc-n { font-family: ui-monospace, Menlo, monospace; font-size: 12px; letter-spacing: .3em; color: #aaa48d; margin-bottom: 18px; }
/* ---- Galeria + Lightbox + Jornal (Fase 3) ---- */
.gal-grid { columns: 3 260px; column-gap: 6px; }
.gal-item { break-inside: avoid; margin-bottom: 6px; cursor: pointer; position: relative; overflow: hidden; background: #04081a; display: block; }
.gal-item img { width: 100%; display: block; filter: grayscale(.3) brightness(.86); transition: filter .6s ease, transform 1s cubic-bezier(.16,.84,.44,1); }
.gal-item:hover img { filter: grayscale(0) brightness(1); transform: scale(1.04); }
@media (max-width: 640px) { .gal-grid { columns: 2 150px; } }
.lb { position: fixed; inset: 0; z-index: 3000; background: rgba(4,8,26,.96); display: flex; align-items: center; justify-content: center; padding: 40px; animation: mrqzFade .3s ease; }
.lb[hidden] { display: none; }
.lb-img { max-width: 92vw; max-height: 88vh; object-fit: contain; box-shadow: 0 20px 60px rgba(0,0,0,.5); }
.lb-btn { position: absolute; background: rgba(254,252,236,.1); color: #FEFCEC; border: 1px solid rgba(254,252,236,.3); width: 48px; height: 48px; border-radius: 50%; font-size: 24px; line-height: 1; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background .25s ease; }
.lb-btn:hover { background: rgba(254,252,236,.22); }
.lb-close { top: 24px; right: 24px; }
.lb-prev { left: 24px; top: 50%; transform: translateY(-50%); }
.lb-next { right: 24px; top: 50%; transform: translateY(-50%); }
@media (max-width: 640px) { .lb-prev { left: 12px; } .lb-next { right: 12px; } .lb-btn { width: 42px; height: 42px; } }
.journal-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(320px,100%),1fr)); gap: clamp(24px,3vw,44px); }
.journal-card { display: block; text-decoration: none; }
.journal-card .jc-img { aspect-ratio: 3/2; overflow: hidden; background: #eee8d8; }
.journal-card .jc-img img { width: 100%; height: 100%; object-fit: cover; display: block; filter: grayscale(.25); transition: transform 1s cubic-bezier(.16,.84,.44,1), filter .6s ease; }
.journal-card:hover .jc-img img { transform: scale(1.05); filter: grayscale(0); }
.journal-card .jc-date { font-size: 10px; letter-spacing: .3em; text-transform: uppercase; color: #aaa48d; margin: 22px 0 12px; }
.journal-card h3 { font-family: 'Cormorant Garamond', serif; font-weight: 400; font-size: clamp(22px,2.2vw,30px); color: #12162e; line-height: 1.2; margin-bottom: 12px; }
.journal-card p { font-size: 15px; line-height: 1.8; color: #54576a; font-weight: 300; }
.article { max-width: 720px; margin: 0 auto; }
.article p { font-size: 17px; line-height: 1.95; color: #3f4254; font-weight: 300; margin-bottom: 24px; }
.article .dek { font-family: 'Cormorant Garamond', serif; font-style: italic; font-size: clamp(20px,2.2vw,26px); color: #12162e; line-height: 1.5; margin-bottom: 40px; }