:root {
--m-ease: cubic-bezier(.2, .7, .2, 1);
--m-dur: 700ms;
--m-rise: 24px;
--m-stagger: 80ms;
}
@media (prefers-reduced-motion: no-preference) {
[data-motion="hero-image"] { animation: m-settle 1800ms var(--m-ease) both; transform-origin: 50% 40%; }
[data-motion="hero-line"] { animation: m-rise var(--m-dur) var(--m-ease) both; animation-delay: calc(150ms + var(--m-i, 0) * 120ms); }
[data-motion="hero-line"]:nth-of-type(1) { --m-i: 0; }
[data-motion="hero-line"]:nth-of-type(2) { --m-i: 1; }
[data-motion="hero-line"]:nth-of-type(3) { --m-i: 2; }
[data-motion="hero-line"]:nth-of-type(4) { --m-i: 3; }
[data-motion="hero-line"]:nth-of-type(5) { --m-i: 4; }
html.motion-on [data-motion="reveal"].m-wait { opacity: 0; transform: translateY(var(--m-rise)); }
html.motion-on [data-motion="reveal"] { transition: opacity var(--m-dur) var(--m-ease), transform var(--m-dur) var(--m-ease); }
html.motion-on [data-motion="stagger"].m-wait > * { opacity: 0; transform: translateY(var(--m-rise)); }
html.motion-on [data-motion="stagger"] > * { transition: opacity var(--m-dur) var(--m-ease), transform var(--m-dur) var(--m-ease); transition-delay: calc(var(--m-i, 0) * var(--m-stagger)); }
html.motion-on [data-motion="wipe"].m-wait { clip-path: inset(0 0 calc(100% - 1px) 0); }
html.motion-on [data-motion="wipe"] { transition: clip-path 1000ms var(--m-ease); }
html.motion-on [data-motion="wipe"] img { transition: transform 1400ms var(--m-ease); }
html.motion-on [data-motion="wipe"].m-wait img { transform: scale(1.12); }
[data-motion="lift"] { transition: transform 260ms var(--m-ease), box-shadow 260ms var(--m-ease); }
@media (hover: hover) {
[data-motion="lift"]:hover { transform: translateY(-4px); box-shadow: 0 14px 30px rgb(0 0 0 / .12); }
[data-motion="zoom"] img { transition: transform 700ms var(--m-ease); }
[data-motion="zoom"]:hover img { transform: scale(1.05); }
[data-motion="nudge"] .m-arrow { display: inline-block; transition: transform 220ms var(--m-ease); }
[data-motion="nudge"]:hover .m-arrow { transform: translateX(4px); }
}
[data-motion="lift"]:focus-within { transform: translateY(-4px); }
[data-motion="zoom"] { overflow: hidden; }
:where(a[href], button, summary, [role="button"]) { transition: color 200ms ease, background-color 200ms ease, border-color 200ms ease, box-shadow 200ms ease, transform 200ms ease, opacity 200ms ease; }
:where(a[href], button):active { transform: scale(.98); }
[data-motion="header"] { transition: background-color 300ms ease, box-shadow 300ms ease; }
[data-motion="header"].m-scrolled { box-shadow: 0 6px 20px rgb(0 0 0 / .08); }
[data-motion="pulse"] { animation: m-pulse 2.8s ease-in-out 1.6s 3; }
}
@keyframes m-settle { from { transform: scale(1.08); } to { transform: none; } }
@keyframes m-rise { from { opacity: 0; transform: translateY(var(--m-rise)); } to { opacity: 1; transform: none; } }
@keyframes m-pulse { 0%, 100% { box-shadow: 0 0 0 0 rgb(37 211 102 / .45); } 50% { box-shadow: 0 0 0 12px rgb(37 211 102 / 0); } }
@font-face {
font-family: 'Sora';
src: url('/assets/sora.811e1196.woff2') format('woff2');
font-weight: 600 700;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'Source Sans 3';
src: url('/assets/source-sans-3-var.7a19a702.woff2') format('woff2');
font-weight: 200 900;
font-style: normal;
font-display: swap;
}
:root {
--paper: #f8f5f0;
--paper-2: #f8f1e8;
--paper-3: #f8ecdb;
--ink: #1a1613;
--ink-2: #5c5147;
--rule: #ded5c7;
--rule-strong: #c9bda9;
--amber: #f6af45;
--amber-soft: #fbe4c2;
--amber-deep: #8a5512;
--night: #17120e;
--night-2: #241c16;
--night-rule: #3d322a;
--night-ink: #e7ded2;
--alarm: #d21f21;
--alarm-text: #b3161d;
--wa: #25d366;
--wa-ink: #04240f;
--cjk: 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', 'Noto Sans CJK SC', 'Noto Sans SC',
'Source Han Sans SC', 'WenQuanYi Micro Hei';
--display: 'Sora', var(--cjk), 'Segoe UI', system-ui, sans-serif;
--text: 'Source Sans 3', var(--cjk), 'Segoe UI', system-ui, sans-serif;
--gutter: clamp(20px, 5vw, 64px);
--measure: 66ch;
--max: 1280px;
--spine-x: 11px;
--r-sm: 6px;
--r-md: 12px;
--sec-y: clamp(38px, 6vw, 76px);
}
*,
*::before,
*::after {
box-sizing: border-box;
}
html {
-webkit-text-size-adjust: 100%;
scroll-behavior: smooth;
}
@media (prefers-reduced-motion: reduce) {
html {
scroll-behavior: auto;
}
}
body {
margin: 0;
background: var(--paper);
color: var(--ink);
font-family: var(--text);
font-size: clamp(1.0625rem, 1rem + 0.25vw, 1.1875rem);
line-height: 1.78;
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
line-break: strict;
word-break: normal;
overflow-wrap: break-word;
}
img,
picture,
svg {
display: block;
max-width: 100%;
}
img {
height: auto;
}
h1,
h2,
h3,
h4 {
font-family: var(--display);
font-weight: 700;
margin: 0;
letter-spacing: 0.01em;
line-height: 1.28;
text-wrap: balance;
}
[lang='en'] h2,
[lang='en'] h3,
[lang='ms'] h2,
[lang='ms'] h3 {
letter-spacing: -0.015em;
line-height: 1.15;
}
.ph {
display: inline-block;
}
a[href^='tel:'] {
white-space: nowrap;
}
p {
margin: 0;
text-wrap: pretty;
}
blockquote {
margin: 0;
}
ul,
ol {
margin: 0;
padding: 0;
list-style: none;
}
a {
color: inherit;
}
button {
font: inherit;
color: inherit;
}
:where(a, button, [tabindex]):focus-visible {
outline: 3px solid var(--ink);
outline-offset: 3px;
border-radius: 3px;
}
.on-night :where(a, button, [tabindex]):focus-visible,
.on-night:focus-visible,
.foot :where(a, button, [tabindex]):focus-visible {
outline-color: var(--amber);
}
.wa-fab:focus-visible {
outline: 3px solid #a06a1a;
outline-offset: 4px;
box-shadow: 0 0 0 4px #fff, 0 6px 20px rgb(23 18 14 / 0.24);
}
.skip {
position: absolute;
left: 12px;
top: 12px;
transform: translateY(-92px);
z-index: 100;
padding: 12px 18px;
background: var(--ink);
color: var(--paper);
font-family: var(--display);
font-weight: 600;
text-decoration: none;
border-radius: var(--r-sm);
transition: transform 0.14s ease;
}
.skip:focus {
transform: none;
}
.wrap {
width: 100%;
max-width: var(--max);
margin-inline: auto;
padding-inline: var(--gutter);
}
.section {
padding-block: var(--sec-y);
}
.section--tight {
padding-block: clamp(48px, 6.5vw, 92px);
}
.sec-head {
max-width: 36em;
}
.sec-head h2 {
font-size: clamp(1.68rem, 1.25rem + 1.9vw, 2.6rem);
}
.sec-head p {
margin-top: 18px;
max-width: 32em;
color: var(--ink-2);
font-size: clamp(1rem, 0.94rem + 0.35vw, 1.22rem);
}
@media (min-width: 900px) {
.sec-head {
max-width: none;
display: grid;
grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
column-gap: clamp(32px, 5vw, 80px);
align-items: end;
}
.sec-head .eyebrow {
grid-column: 1;
grid-row: 1;
}
.sec-head h2 {
grid-column: 1;
grid-row: 2;
max-width: 11.5em;
}
.sec-head p {
grid-column: 2;
grid-row: 2;
margin-top: 0;
padding-bottom: 0.4em;
}
}
.eyebrow {
font-family: var(--display);
font-weight: 600;
font-size: 0.84rem;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--amber-deep);
margin: 0 0 14px;
}
.on-night .eyebrow {
color: var(--amber);
}
.zh {
font-family: var(--text);
font-weight: 600;
letter-spacing: 0.02em;
}
.head {
position: relative;
z-index: 20;
background: var(--paper);
border-bottom: 1px solid var(--rule);
}
.head__in {
display: flex;
align-items: center;
gap: clamp(16px, 3vw, 40px);
min-height: 58px;
padding-block: 9px;
}
.head__mark {
display: flex;
align-items: center;
flex: 0 0 auto;
min-height: 44px;
line-height: 0;
}
.head__mark picture {
display: block;
}
.head__mark img {
width: clamp(112px, 15vw, 168px);
height: auto;
}
.head__nav {
display: none;
margin-left: auto;
gap: clamp(14px, 1.9vw, 30px);
}
.head__nav a {
display: inline-flex;
align-items: center;
min-height: 44px;
font-family: var(--display);
font-weight: 600;
font-size: 0.92rem;
letter-spacing: 0.02em;
text-decoration: none;
color: var(--ink-2);
border-bottom: 2px solid transparent;
}
.head__nav a:hover {
color: var(--ink);
border-bottom-color: var(--amber);
}
.head__tel {
display: flex;
flex-direction: column;
justify-content: center;
min-height: 44px;
margin-left: auto;
font-family: var(--display);
font-weight: 600;
font-size: 0.9rem;
text-decoration: none;
color: var(--ink);
white-space: nowrap;
}
.head__tel span {
display: block;
font-family: var(--text);
font-weight: 600;
font-size: 0.75rem;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--ink-2);
}
.head__menu {
order: 3;
display: inline-flex;
align-items: center;
gap: 8px;
min-height: 44px;
min-width: 44px;
padding: 0 12px;
border: 1px solid var(--rule-strong);
border-radius: var(--r-sm);
background: transparent;
color: var(--ink);
font-family: var(--display);
font-weight: 600;
font-size: 0.86rem;
cursor: pointer;
transition: background-color 180ms ease, border-color 180ms ease;
}
.head__menu:hover,
.head__menu[aria-expanded='true'] {
background: var(--paper-2);
border-color: var(--ink-2);
}
@media (max-width: 359px) {
.head__menu {
padding: 0 13px;
}
.head__menu-label {
position: absolute;
width: 1px;
height: 1px;
overflow: hidden;
clip-path: inset(50%);
white-space: nowrap;
}
}
.head__bars {
display: grid;
gap: 4px;
width: 16px;
}
.head__bars i {
display: block;
height: 2px;
border-radius: 1px;
background: currentColor;
transition: transform 200ms ease, opacity 200ms ease;
}
.head__menu[aria-expanded='true'] .head__bars i:nth-child(1) {
transform: translateY(6px) rotate(45deg);
}
.head__menu[aria-expanded='true'] .head__bars i:nth-child(2) {
opacity: 0;
}
.head__menu[aria-expanded='true'] .head__bars i:nth-child(3) {
transform: translateY(-6px) rotate(-45deg);
}
.head__tel {
order: 2;
}
@media (max-width: 1099px) {
.head__nav[data-open] {
position: absolute;
top: 100%;
left: 0;
right: 0;
display: flex;
flex-direction: column;
gap: 0;
margin: 0;
padding: 6px var(--gutter) 14px;
background: var(--paper);
border-bottom: 1px solid var(--rule-strong);
box-shadow: 0 14px 28px rgb(26 22 19 / 0.12);
}
.head__nav[data-open] a {
min-height: 48px;
font-size: 1rem;
color: var(--ink);
border-bottom: 1px solid var(--rule);
}
.head__nav[data-open] a:last-child {
border-bottom: 0;
}
}
@media (min-width: 1100px) {
.head__nav {
display: flex;
}
.head__nav a {
white-space: nowrap;
}
.head__menu {
display: none;
}
.head__tel {
margin-left: 0;
padding-left: clamp(14px, 1.9vw, 28px);
border-left: 1px solid var(--rule);
}
}
.btn {
display: inline-flex;
align-items: center;
gap: 12px;
padding: 15px 24px;
min-height: 52px;
font-family: var(--display);
font-weight: 700;
font-size: 1.04rem;
letter-spacing: 0.02em;
text-decoration: none;
border: 0;
border-radius: var(--r-sm);
background: var(--ink);
color: var(--paper);
cursor: pointer;
}
.btn svg {
flex: 0 0 auto;
width: 21px;
height: 21px;
fill: currentColor;
}
.btn:hover {
background: var(--night-2);
}
.btn--wa {
background: var(--wa);
color: var(--wa-ink);
}
.btn--wa:hover {
background: #1fbc5a;
}
.btn__stack {
display: flex;
flex-direction: column;
align-items: flex-start;
line-height: 1.15;
}
.btn__stack small {
font-family: var(--text);
font-weight: 600;
font-size: 0.8rem;
opacity: 0.82;
}
.on-night .btn {
background: var(--amber);
color: var(--night);
}
.on-night .btn:hover {
background: #ffc063;
}
.on-night .btn--wa {
background: var(--wa);
color: var(--wa-ink);
}
.on-night .btn--wa:hover {
background: #1fbc5a;
}
.textlink {
display: inline-flex;
align-items: center;
min-height: 44px;
font-family: var(--display);
font-weight: 600;
font-size: 0.95rem;
text-decoration: none;
border-bottom: 2px solid var(--amber);
padding-bottom: 2px;
}
.textlink:hover {
border-bottom-color: var(--ink);
}
.wa-fab {
position: fixed;
right: clamp(14px, 3vw, 28px);
bottom: clamp(14px, 3vw, 28px);
z-index: 60;
width: 56px;
height: 56px;
display: grid;
place-items: center;
border-radius: 50%;
background: #25d366;
color: var(--wa-ink);
box-shadow: 0 6px 20px rgb(23 18 14 / 0.24);
}
.wa-fab svg {
width: 30px;
height: 30px;
fill: currentColor;
}
.wa-fab:hover {
background: #1fbc5a;
}
.hero {
border-bottom: 1px solid var(--rule);
}
.hero__in {
display: flex;
flex-direction: column;
}
.hero__fig {
order: 1;
position: relative;
margin: 0;
overflow: hidden;
}
.hero__rating {
position: absolute;
left: 12px;
top: 12px;
z-index: 2;
display: inline-flex;
align-items: center;
gap: 6px;
min-height: 36px;
padding: 6px 12px;
background: var(--night);
color: #f0e9de;
font-family: var(--display);
font-weight: 600;
font-size: 0.78rem;
line-height: 1.2;
text-decoration: none;
border-radius: 999px;
}
.hero__rating span {
color: var(--amber);
}
.hero__rating:hover {
background: #2e241c;
}
.hero__fig img {
width: 100%;
height: 55svh;
min-height: 300px;
object-fit: cover;
object-position: 50% 42%;
}
@media (min-width: 700px) and (max-width: 899px) {
.hero__fig img {
height: 50svh;
object-position: 50% 36%;
}
}
@media (max-width: 899px) and (max-height: 740px) {
.hero__fig img {
height: 40svh;
min-height: 230px;
}
}
.hero__cap {
position: absolute;
left: 0;
bottom: 0;
margin: 0;
padding: 6px 12px;
background: var(--night);
color: #f0e9de;
font-size: 0.78rem;
letter-spacing: 0.01em;
border-top-right-radius: var(--r-sm);
}
@media (prefers-reduced-motion: no-preference) {
.hero__copy > :nth-child(1) { --m-i: 0; }
.hero__copy > :nth-child(2) { --m-i: 1; }
.hero__copy > :nth-child(3) { --m-i: 2; }
.hero__copy > :nth-child(4) { --m-i: 3; }
.hero__copy > :nth-child(5) { --m-i: 4; }
.hero__copy > :nth-child(6) { --m-i: 5; }
}
.hero__copy {
order: 2;
display: flex;
flex-direction: column;
padding-block: clamp(22px, 5vw, 60px) clamp(34px, 7vw, 84px);
}
.hero__kicker {
order: 1;
font-family: var(--display);
font-weight: 600;
font-size: clamp(0.95rem, 0.92rem + 0.15vw, 1.05rem);
letter-spacing: -0.005em;
color: var(--amber-deep);
margin-bottom: 12px;
}
.hero h1 {
order: 2;
font-size: clamp(2.1rem, 1.3rem + 2.1vw, 3rem);
line-height: 1.2;
letter-spacing: 0.01em;
margin-bottom: 14px;
}
.hero h1 em {
font-style: normal;
}
.hero__benefit {
order: 3;
font-family: var(--display);
font-weight: 600;
font-size: clamp(1.02rem, 0.95rem + 0.4vw, 1.2rem);
line-height: 1.5;
margin-bottom: 18px;
padding-top: 14px;
border-top: 1px solid var(--rule-strong);
}
.hero__act {
order: 4;
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 16px 22px;
}
.hero__more {
order: 5;
margin-top: 12px;
margin-bottom: 18px;
}
.hero__deck {
order: 6;
max-width: 54ch;
color: var(--ink-2);
font-size: clamp(1.0625rem, 1rem + 0.4vw, 1.24rem);
padding-top: 20px;
border-top: 1px solid var(--rule);
}
@media (max-width: 899px) {
.hero__copy {
padding-top: 10px;
}
.hero__deck {
display: none;
}
.hero__kicker {
font-size: 0.92rem;
margin-bottom: 5px;
}
.hero h1 {
font-size: 2.15rem;
margin-bottom: 8px;
}
.hero__benefit {
padding-top: 10px;
margin-bottom: 11px;
}
}
@media (max-width: 380px) {
.hero h1 {
font-size: 2rem;
}
}
@media (min-width: 900px) {
.hero__in {
display: grid;
grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
align-items: stretch;
gap: 0;
}
.hero__fig {
order: 2;
margin-right: calc(-1 * min(320px, (100vw - min(100vw, var(--max))) / 2 + var(--gutter)));
}
.hero__fig {
position: relative;
min-height: 560px;
}
.hero__fig picture {
position: absolute;
inset: 0;
display: block;
}
.hero__fig img {
width: 100%;
height: 100%;
min-height: 0;
object-position: 50% 50%;
}
.hero__copy {
order: 1;
justify-content: center;
padding-right: clamp(36px, 5vw, 76px);
padding-block: clamp(36px, 3vw, 76px);
}
.hero h1 em {
display: block;
}
.hero__deck {
order: 3;
margin-bottom: 22px;
padding-top: 0;
border-top: 0;
}
.hero__benefit {
order: 4;
}
.hero__act {
order: 5;
}
.hero__more {
order: 6;
margin-top: 20px;
margin-bottom: 0;
}
}
@media (min-width: 900px) and (max-width: 1279px) {
.hero__fig img {
object-position: 30% 50%;
}
}
.pairs {
margin-top: clamp(28px, 5vw, 64px);
background-image: linear-gradient(
to right,
transparent calc(var(--spine-x) - 1px),
var(--rule-strong) calc(var(--spine-x) - 1px),
var(--rule-strong) var(--spine-x),
transparent var(--spine-x)
);
background-repeat: no-repeat;
background-size: 100% 100%;
}
.pair {
display: grid;
grid-template-columns: minmax(0, 1fr);
padding-left: calc(var(--spine-x) + 20px);
padding-block: clamp(18px, 3vw, 34px);
}
.pair + .pair {
border-top: 1px solid var(--rule);
}
.pair__a,
.pair__b {
min-width: 0;
}
.pair__a {
font-family: var(--display);
font-weight: 600;
font-size: clamp(1.1rem, 1rem + 0.55vw, 1.38rem);
line-height: 1.5;
letter-spacing: 0.01em;
}
.pair__b {
color: var(--ink-2);
max-width: 54ch;
}
@media (min-width: 860px) {
.pairs {
--spine-x: 50%;
}
.pair {
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
padding-left: 0;
column-gap: 0;
}
.pair__a {
padding-right: clamp(28px, 4vw, 60px);
}
.pair__b {
padding-left: clamp(28px, 4vw, 60px);
}
}
.signs .pair__b {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 4px;
}
.sign__found {
display: flex;
gap: 13px;
}
.sign__dot {
flex: 0 0 auto;
width: 11px;
height: 11px;
margin-top: 0.46em;
border-radius: 2px;
background: var(--alarm);
}
.sign__btn {
display: inline-flex;
align-items: center;
gap: 9px;
padding: 7px 0;
min-height: 44px;
background: none;
border: 0;
border-bottom: 2px solid var(--amber);
font-family: var(--display);
font-weight: 600;
font-size: 0.88rem;
color: var(--alarm-text);
cursor: pointer;
}
.sign__btn svg {
width: 13px;
height: 13px;
fill: currentColor;
transition: transform 0.18s ease;
}
.sign__btn[aria-expanded='true'] svg {
transform: rotate(180deg);
}
.sign__means {
display: grid;
grid-template-rows: 1fr;
opacity: 1;
transition: grid-template-rows 0.18s ease, opacity 0.18s ease;
}
.sign__means > div {
overflow: hidden;
visibility: visible;
transition: visibility 0s linear 0s;
}
.sign[data-closed] .sign__means {
grid-template-rows: 0fr;
opacity: 0;
}
.sign[data-closed] .sign__means > div {
visibility: hidden;
transition: visibility 0s linear 0.18s;
}
@media (prefers-reduced-motion: reduce) {
.sign__means,
.sign__btn svg {
transition: none;
}
.sign[data-closed] .sign__means > div {
transition: none;
}
}
@media (max-width: 859px) {
.signs .pair__b {
margin-top: 10px;
margin-left: 24px;
}
}
.signs__note {
margin-top: clamp(26px, 4.5vw, 54px);
padding: clamp(17px, 3vw, 30px) clamp(18px, 3vw, 32px);
background: var(--paper-2);
border-radius: var(--r-md);
max-width: 70ch;
}
.signs__note b {
display: block;
font-family: var(--display);
font-weight: 700;
font-size: clamp(1.1rem, 1rem + 0.5vw, 1.35rem);
margin-bottom: 8px;
}
.band {
background: var(--night);
color: var(--night-ink);
}
.band h2,
.band h3 {
color: #fff;
}
.band .sec-head p {
color: #bdb0a2;
}
.versus {
margin-top: clamp(28px, 5vw, 62px);
display: grid;
gap: 0;
background-image: linear-gradient(
to right,
transparent calc(var(--spine-x) - 1px),
var(--night-rule) calc(var(--spine-x) - 1px),
var(--night-rule) var(--spine-x),
transparent var(--spine-x)
);
background-repeat: no-repeat;
}
.versus__side {
padding-left: calc(var(--spine-x) + 20px);
padding-block: clamp(24px, 3.4vw, 38px);
min-width: 0;
}
.versus__side + .versus__side {
border-top: 1px solid var(--night-rule);
}
.versus__tag {
font-family: var(--display);
font-weight: 600;
font-size: 0.75rem;
letter-spacing: 0.14em;
text-transform: uppercase;
margin-bottom: 12px;
color: #a89a8b;
}
.versus__side--yes .versus__tag {
color: var(--amber);
}
.versus h3 {
font-size: clamp(1.3rem, 1.1rem + 0.95vw, 1.85rem);
margin-bottom: 14px;
}
.versus__side--no h3 {
color: #b7a998;
}
.versus p {
color: #c4b8aa;
max-width: 50ch;
}
.versus__side--yes p {
color: var(--night-ink);
}
@media (min-width: 860px) {
.versus {
--spine-x: 50%;
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}
.versus__side {
padding-left: 0;
padding-right: clamp(28px, 4vw, 56px);
}
.versus__side + .versus__side {
border-top: 0;
padding-left: clamp(28px, 4vw, 56px);
padding-right: 0;
}
}
.quote {
margin: clamp(30px, 5.5vw, 70px) 0 0;
padding-top: clamp(22px, 3.6vw, 40px);
border-top: 1px solid var(--night-rule);
max-width: 78ch;
}
.quote__main {
font-family: var(--display);
font-weight: 600;
font-size: clamp(1.1rem, 0.98rem + 0.62vw, 1.44rem);
line-height: 1.7;
letter-spacing: 0.02em;
color: #fff;
}
.quote figcaption {
margin-top: 18px;
font-size: 0.88rem;
color: #a89a8b;
}
.steps {
margin-top: clamp(28px, 5vw, 62px);
display: grid;
gap: 0;
border-top: 1px solid var(--rule);
}
.step {
display: grid;
grid-template-columns: 58px minmax(0, 1fr);
column-gap: clamp(14px, 2vw, 26px);
padding-block: clamp(19px, 3.2vw, 36px);
border-bottom: 1px solid var(--rule);
}
.step__n {
font-family: var(--display);
font-weight: 700;
font-size: clamp(1.4rem, 1.2rem + 0.8vw, 1.9rem);
line-height: 1;
color: var(--amber-deep);
letter-spacing: -0.04em;
}
.step h3 {
font-size: clamp(1.2rem, 1.05rem + 0.7vw, 1.6rem);
margin-bottom: 10px;
}
.step p {
color: var(--ink-2);
max-width: 62ch;
}
@media (min-width: 860px) {
.step {
grid-template-columns: 82px minmax(0, 16rem) minmax(0, 1fr);
align-items: start;
}
.step__body {
display: contents;
}
.step h3 {
padding-right: clamp(24px, 3vw, 44px);
margin-bottom: 0;
}
}
.promises .pair__a {
display: flex;
flex-direction: column;
gap: 8px;
}
.aside-note {
margin-top: clamp(26px, 4vw, 48px);
padding: clamp(17px, 3vw, 28px) clamp(18px, 3vw, 30px);
border: 1px solid var(--rule-strong);
border-radius: var(--r-md);
max-width: 72ch;
}
.shell__grid {
margin-top: clamp(28px, 3.6vw, 44px);
display: grid;
grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
gap: clamp(16px, 2.4vw, 28px);
}
@media (max-width: 719px) {
.shell__grid {
display: flex;
overflow-x: auto;
scroll-snap-type: x mandatory;
-webkit-overflow-scrolling: touch;
scrollbar-width: thin;
padding-bottom: 12px;
margin-right: calc(-1 * var(--gutter));
padding-right: var(--gutter);
}
.shell__grid figure {
flex: 0 0 clamp(150px, 46vw, 210px);
scroll-snap-align: start;
}
}
.shell__grid figure {
margin: 0;
min-width: 0;
}
.shell__grid img {
width: 100%;
max-width: 360px;
aspect-ratio: 3 / 4;
object-fit: cover;
border-radius: var(--r-sm);
background: var(--paper-2);
}
.shell__grid figcaption {
margin-top: 10px;
font-size: 0.86rem;
}
.voices__grid {
margin-top: clamp(28px, 4.6vw, 58px);
display: grid;
grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
gap: clamp(18px, 2.4vw, 28px);
}
@media (min-width: 720px) {
.voices__grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (max-width: 719px) {
.voices__grid {
display: flex;
overflow-x: auto;
scroll-snap-type: x mandatory;
-webkit-overflow-scrolling: touch;
scrollbar-width: thin;
gap: 14px;
padding-bottom: 12px;
margin-right: calc(-1 * var(--gutter));
padding-right: var(--gutter);
}
.voices__grid .voice {
flex: 0 0 min(84vw, 340px);
scroll-snap-align: start;
}
}
.voice {
min-width: 0;
display: flex;
flex-direction: column;
padding: clamp(17px, 2.6vw, 28px);
background: var(--paper-2);
border-radius: var(--r-md);
}
.voice__q {
font-size: 1rem;
line-height: 1.78;
}
.voice__q[lang='en'] {
line-height: 1.58;
}
.voice__tr {
margin-top: 12px;
padding-top: 12px;
border-top: 1px solid var(--paper-3);
font-size: 0.94rem;
line-height: 1.72;
color: var(--ink-2);
}
.voice__by {
margin-top: auto;
padding-top: 14px;
font-size: 0.85rem;
color: var(--ink-2);
}
.voice__by b {
display: block;
font-family: var(--display);
font-weight: 600;
font-size: 0.95rem;
color: var(--ink);
}
.voices__links {
margin-top: clamp(18px, 3.4vw, 40px);
display: flex;
flex-wrap: wrap;
gap: 2px 30px;
}
.about__grid {
margin-top: clamp(28px, 4.6vw, 58px);
display: grid;
gap: clamp(24px, 4vw, 56px);
}
@media (min-width: 900px) {
.about__grid {
grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
}
}
.premises {
display: flex;
flex-wrap: wrap;
gap: 10px;
margin-top: 20px;
}
.premises li {
padding: 8px 15px;
background: var(--paper-2);
border-radius: 999px;
font-family: var(--display);
font-weight: 600;
font-size: 0.88rem;
}
.facts {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 1px;
background: var(--rule);
border: 1px solid var(--rule);
border-radius: var(--r-md);
overflow: hidden;
}
.facts div {
background: var(--paper);
padding: clamp(16px, 2.2vw, 22px);
min-width: 0;
}
.facts dt {
font-size: 0.78rem;
letter-spacing: 0.08em;
text-transform: none;
font-weight: 700;
color: var(--ink-2);
margin-bottom: 6px;
}
.facts dd {
margin: 0;
font-family: var(--display);
font-weight: 700;
font-size: clamp(1rem, 0.94rem + 0.3vw, 1.15rem);
letter-spacing: 0;
}
.close h2 {
font-size: clamp(1.8rem, 1.3rem + 2.2vw, 3rem);
}
.close p {
margin-top: 16px;
max-width: 58ch;
color: #c4b8aa;
font-size: clamp(1.0625rem, 1rem + 0.4vw, 1.24rem);
}
.close__act {
margin-top: clamp(22px, 3.5vw, 40px);
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 16px 26px;
}
.close__alt {
margin-top: 18px;
font-size: 0.95rem;
color: #a89a8b;
max-width: 52ch;
}
.close__alt + .close__alt {
margin-top: 10px;
}
.close__alt a {
color: var(--amber);
}
.foot {
background: var(--night-2);
color: #b7a998;
padding-block: clamp(34px, 5vw, 64px);
font-size: 0.93rem;
}
.foot__in {
display: grid;
gap: clamp(22px, 3.4vw, 44px);
}
@media (min-width: 360px) and (max-width: 759px) {
.foot__in {
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
column-gap: 18px;
}
.foot__mark {
grid-column: 1 / -1;
}
}
@media (min-width: 760px) {
.foot__in {
grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr) minmax(0, 1fr);
}
}
.foot h2 {
font-size: 0.75rem;
letter-spacing: 0.13em;
text-transform: uppercase;
color: #a89a8a;
margin-bottom: 14px;
font-weight: 700;
}
.foot__mark picture {
display: block;
}
.foot__mark img {
width: 150px;
height: auto;
margin-bottom: 14px;
}
.foot p {
max-width: 40ch;
line-height: 1.6;
}
.foot a {
color: #d8cec2;
}
.foot li a,
.foot__legal a {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 44px;
min-width: 44px;
}
.foot li a {
justify-content: flex-start;
}
.foot li + li {
margin-top: 0;
}
.foot__legal {
margin-top: clamp(24px, 4vw, 48px);
padding-top: 14px;
border-top: 1px solid var(--night-rule);
display: flex;
flex-wrap: wrap;
gap: 12px 26px;
align-items: baseline;
font-size: 0.85rem;
color: #a89a8a;
}
.foot__legal p {
max-width: 62ch;
}
.page {
padding-block: clamp(50px, 7vw, 92px) clamp(64px, 9vw, 120px);
max-width: 74ch;
}
.page h1 {
font-size: clamp(2.2rem, 1.6rem + 2.6vw, 3.4rem);
}
.page__updated {
margin-top: 14px;
color: var(--ink-2);
font-size: 0.9rem;
}
.page section {
margin-top: clamp(34px, 4vw, 50px);
padding-top: clamp(24px, 3vw, 34px);
border-top: 1px solid var(--rule);
}
.page__langs {
display: flex;
flex-wrap: wrap;
gap: 4px 22px;
margin-top: 16px;
}
.page__langs a {
display: inline-flex;
align-items: center;
min-height: 44px;
font-family: var(--display);
font-weight: 600;
font-size: 0.92rem;
color: var(--amber-deep);
text-underline-offset: 4px;
transition: color 160ms ease;
}
.page__langs a:hover {
color: var(--ink);
}
.page h2 {
font-size: clamp(1.45rem, 1.2rem + 1vw, 1.95rem);
}
.page__lang > .page__updated {
margin-top: 6px;
}
.page h3 {
margin-top: clamp(24px, 3vw, 32px);
margin-bottom: 10px;
font-size: clamp(1.08rem, 1rem + 0.45vw, 1.3rem);
}
.page section p + p {
margin-top: 14px;
}
.page section p {
color: var(--ink-2);
}
.page__lang {
scroll-margin-top: 16px;
}
.page__back {
margin-top: clamp(40px, 5vw, 60px);
}
.nf {
padding-block: clamp(60px, 9vw, 130px);
max-width: 62ch;
}
.nf h1 {
font-size: clamp(2.2rem, 1.6rem + 2.8vw, 3.6rem);
}
.nf p {
margin-top: 20px;
color: var(--ink-2);
font-size: clamp(1.0625rem, 1rem + 0.4vw, 1.2rem);
}
.nf__act {
margin-top: 32px;
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 16px 26px;
}
.about__grid h3.eyebrow {
margin-top: clamp(28px, 3.4vw, 40px);
}
@media (min-width: 900px) and (max-height: 820px) {
.hero h1 {
font-size: clamp(2.1rem, 1.2rem + 2.1vw, 2.9rem);
}
}