@import url("https://fonts.googleapis.com/css2?family=Source+Serif+4:ital,opsz,wght@0,8..60,400;0,8..60,500;1,8..60,500;1,8..60,600&family=Fraunces:ital,opsz,wght@0,9..144,400;0,9..144,500;1,9..144,500;1,9..144,600&family=Archivo:wght@700;800;900&family=Karla:wght@400;500;600&display=swap"); :root{
--stone:#E9E3D4;
--stone-2:#DFD8C6;
--ink:#221F19;
--ink-soft:#5B564A;
--petrol:#23504A;
--petrol-soft:#3E7269;
--rust:#B75B33;
--sand:#C9A46A;
--line:#C9C0AA;
--surface:#F4F0E6;
}
@media (prefers-color-scheme: dark){
:root:not([data-theme="light"]){
--stone:#171D1B; --stone-2:#1E2624; --ink:#EDE7D8; --ink-soft:#B8AF9C;
--petrol:#6FB3A5; --petrol-soft:#4F8B80; --rust:#E08857; --sand:#D9BE8B;
--line:#334340; --surface:#1B2320;
}
}
:root[data-theme="dark"]{
--stone:#171D1B; --stone-2:#1E2624; --ink:#EDE7D8; --ink-soft:#B8AF9C;
--petrol:#6FB3A5; --petrol-soft:#4F8B80; --rust:#E08857; --sand:#D9BE8B;
--line:#334340; --surface:#1B2320;
} em{
font-family:'Source Serif 4',Georgia,serif;
font-style:italic; font-weight:500; color:var(--petrol);
}
.caps{
font-family:'Archivo',ui-sans-serif,sans-serif;
font-weight:900; text-transform:uppercase; letter-spacing:0.01em;
}
.eyebrow{
font-family:'Archivo',sans-serif; font-weight:800;
text-transform:uppercase; letter-spacing:0.14em;
font-size:0.72rem; color:var(--rust);
} .mark{
width:30px; height:30px; display:inline-block;
animation:spin 16s linear infinite;
transform-origin:50% 52%;
}
@media (prefers-reduced-motion:reduce){ .mark{ animation:none; } }
@keyframes spin{ to{ transform:rotate(360deg); } } nav.links{
transition:transform .5s cubic-bezier(.2,.8,.2,1), opacity .3s ease;
}
body.scrolled nav.links{
position:fixed;
top:50%;
right:22px;
transform:translateY(-50%);
flex-direction:column;
gap:16px;
background:var(--surface);
border:1px solid var(--line);
padding:18px 16px;
border-radius:2px;
box-shadow:0 6px 24px rgba(0,0,0,0.12);
z-index:50;
}
body.scrolled nav.links a{
writing-mode:vertical-rl;
text-orientation:mixed;
font-size:0.78rem;
letter-spacing:0.04em;
} .btn{
font-family:'Archivo',sans-serif; font-weight:800;
text-transform:uppercase; letter-spacing:0.03em; font-size:0.82rem;
padding:14px 24px; text-decoration:none; display:inline-block;
border:1px solid var(--ink);
transition:transform .18s ease, background .18s ease, color .18s ease;
}
.btn-primary{ background:var(--petrol); border-color:var(--petrol); color:var(--surface); }
.btn-primary:hover{ transform:translateY(-2px); }
.btn-ghost{ background:transparent; color:var(--ink); }
.btn-ghost:hover{ background:var(--ink); color:var(--stone); } .hero-figure{ position:relative; }
.hero-figure img{
width:100%; aspect-ratio:4/5; object-fit:cover; border:1px solid var(--line);
}
.hero-figure .tag{
position:absolute; left:-14px; bottom:24px;
background:var(--rust); color:var(--surface);
font-family:'Archivo',sans-serif; font-weight:800; font-size:0.72rem;
text-transform:uppercase; letter-spacing:0.06em; padding:9px 14px;
}
@media (max-width:900px){ .hero-figure .tag{ left:0; } } .fade-up{
opacity:0; transform:translateY(16px); animation:fadeUp .7s ease forwards;
}
@keyframes fadeUp{ to{ opacity:1; transform:translateY(0);} }
@media (prefers-reduced-motion:reduce){ .fade-up{ animation:none; opacity:1; transform:none; } }
.reveal{ opacity:0; transform:translateY(22px); transition:opacity .7s ease, transform .7s ease; }
.reveal.in{ opacity:1; transform:translateY(0); }
@media (prefers-reduced-motion:reduce){ .reveal{ opacity:1; transform:none; transition:none; } } .stats-grid{ display:grid; grid-template-columns:repeat(3,1fr); }
.stat{ padding:34px 28px; text-align:center; border-right:1px solid var(--line); }
.stat:last-child{ border-right:none; }
@media (max-width:700px){
.stats-grid{ grid-template-columns:1fr; }
.stat{ border-right:none; border-bottom:1px solid var(--line); }
.stat:last-child{ border-bottom:none; }
}
.stat .num{
font-family:'Source Serif 4',serif; font-style:italic; font-weight:500;
font-size:2.4rem; color:var(--petrol); display:block;
}
.stat .label{ margin-top:4px; font-size:0.86rem; color:var(--ink-soft); } .band{ position:relative; height:150px; overflow:hidden; }
.band img{ width:100%; height:100%; object-fit:cover; filter:saturate(0.9); }
.band::after{
content:""; position:absolute; inset:0;
background:linear-gradient(90deg, var(--stone) 0%, transparent 22%, transparent 78%, var(--stone) 100%);
}
.band-caption{
position:absolute; inset:0; display:flex; align-items:center; justify-content:center; z-index:2;
}
.band-caption span{
font-family:'Fraunces',serif; font-style:italic; font-size:1.3rem;
background:var(--stone); padding:6px 18px; color:var(--ink);
} .cards{ display:grid; grid-template-columns:repeat(3,1fr); gap:28px; }
@media (max-width:860px){ .cards{ grid-template-columns:1fr; } }
.card{ border:1px solid var(--line); background:var(--surface); }
.card .thumb{ aspect-ratio:5/4; overflow:hidden; border-bottom:1px solid var(--line); }
.card .thumb img{ width:100%; height:100%; object-fit:cover; }
.card .body{ padding:22px 22px 26px; }
.card h3{ font-size:1.12rem; margin-bottom:10px; }
.card p{ color:var(--ink-soft); font-size:0.96rem; margin:0; } .steps{ display:grid; grid-template-columns:repeat(3,1fr); gap:0; counter-reset:step; margin-top:44px; }
@media (max-width:860px){ .steps{ grid-template-columns:1fr; } }
.step{ position:relative; padding:0 28px 0 0; border-right:1px solid var(--line); }
.step:last-child{ border-right:none; padding-right:0; }
@media (max-width:860px){
.step{ border-right:none; border-bottom:1px solid var(--line); padding:0 0 28px; margin-bottom:28px; }
.step:last-child{ border-bottom:none; margin-bottom:0; padding-bottom:0; }
}
.step .num{
counter-increment:step; font-family:'Fraunces',serif; font-style:italic;
color:var(--petrol); font-size:2.1rem; display:block; margin-bottom:10px;
}
.step .num::before{ content: counter(step); }
.step h3{ font-size:1.05rem; margin-bottom:8px; }
.step p{ color:var(--ink-soft); font-size:0.94rem; margin:0; } .about-grid img{ width:100%; aspect-ratio:3/4; object-fit:cover; border:1px solid var(--line); }
.quirk{
display:inline-flex; align-items:center; gap:10px; margin-top:6px;
font-size:0.86rem; color:var(--ink-soft);
}
.quirk img{ width:34px; height:34px; border-radius:50%; object-fit:cover; border:1px solid var(--line); } .cta-footer{ background:var(--petrol); color:var(--surface); padding:64px 0 40px; }
.cta-footer h2{
font-family:'Fraunces',serif; font-style:italic; font-weight:500;
font-size:1.8rem; max-width:16ch; color:var(--surface);
}
.cta-footer .btn-primary{ background:var(--rust); border-color:var(--rust); color:var(--surface); }
.cta-footer .meta{ font-size:0.85rem; opacity:0.75; max-width:32ch; }