/* ==========================================================================
   Avermo: shared stylesheet
   1. Fonts   2. Tokens   3. Base   4. Components   5. Home page
   6. Memo page   7. Error page   8. Responsive   9. Motion   10. Print
   ========================================================================== */

/* 1. Fonts: self-hosted (SIL OFL, licences in fonts/), Latin subset, variable weight */
@font-face{font-family:'Inter';src:url(fonts/inter.woff) format('woff');font-weight:400 600;font-style:normal;font-display:swap}
@font-face{font-family:'Cormorant Garamond';src:url(fonts/cormorant-garamond-italic.woff) format('woff');font-weight:400 500;font-style:italic;font-display:swap}

/* 2. Tokens */
:root{
--ink:#12161C;--cream:#F5F3EE;--white:#FFFFFF;--slate:#5A5E66;--sand:#CFCBC2;--text:#2A2E35;
--bar:rgba(18,22,28,.94);          /* ink at 94%: the sticky bar shows what scrolls under it */
--rule-dark:rgba(245,243,238,.1);  /* hairline on dark backgrounds */
--underline:rgba(245,243,238,.35); /* resting underline of text links on dark */
--font-sans:'Inter',system-ui,sans-serif;
--font-serif:'Cormorant Garamond',Georgia,serif;
}

/* 3. Base */
*{box-sizing:border-box}
body{margin:0;background:var(--white);color:var(--ink);font-family:var(--font-sans);-webkit-font-smoothing:antialiased}
h1,h2,h3{margin:0;font-weight:500;text-wrap:balance}
p,li{text-wrap:pretty}
::selection{background:var(--ink);color:var(--cream)}
:focus-visible{outline:2px solid currentColor;outline-offset:3px}
.wrap{max-width:1200px;margin:0 auto;padding-left:24px;padding-right:24px}
.serif{font-family:var(--font-serif);font-style:italic}

/* 4. Components */
.brand{display:flex;align-items:center;gap:14px;text-decoration:none;color:var(--cream)}
.brand img{display:block;height:24px;width:auto}
.brand span{font-weight:500;font-size:15px;letter-spacing:.32em;margin-right:-.32em}

.topbar{position:sticky;top:0;z-index:10;background:var(--bar);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);border-bottom:1px solid var(--rule-dark)}
.topbar .wrap{display:flex;align-items:center;justify-content:space-between;gap:16px;padding-top:18px;padding-bottom:18px}
.nav{display:flex;align-items:center;gap:24px}
.nav-link{color:var(--cream);text-decoration:none;font-size:14px;font-weight:500;letter-spacing:.02em;padding:12px 0;white-space:nowrap}
.nav-link:hover{text-decoration:underline;text-underline-offset:5px}
.narrow-only{display:none}

.btn{color:var(--ink);background:var(--cream);text-decoration:none;font-size:14px;font-weight:500;letter-spacing:.02em;padding:12px 20px;transition:background .2s;white-space:nowrap}
.btn:hover{background:var(--white)}
.btn:focus-visible{outline-color:var(--cream)}

/* quiet closing link: thin underline that firms up on hover, arrow nudges right */
.text-link{align-self:flex-start;margin-top:12px;color:var(--cream);font-size:clamp(18px,1.6vw,21px);font-weight:500;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:7px;text-decoration-color:var(--underline);transition:text-decoration-color .2s}
.text-link .arrow{display:inline-block;transition:transform .2s}
.text-link:hover{text-decoration-color:var(--cream)}
.text-link:hover .arrow{transform:translateX(4px)}

.foot{background:var(--ink);color:var(--sand);font-size:13px;border-top:1px solid var(--rule-dark)}
.foot .wrap{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px;padding-top:32px;padding-bottom:32px}
.foot .brand img{height:16px}
.foot .brand span{font-size:12px}

/* 5. Home page */
.hero{position:relative;overflow:hidden;background:var(--ink);color:var(--cream)}
.hero .wrap{position:relative;z-index:1;padding-top:144px;padding-bottom:176px;display:flex;flex-direction:column;gap:24px}
.hero-mark{position:absolute;right:-10%;bottom:-4%;height:100%;width:auto;opacity:.045;pointer-events:none}
.hero h1{font-size:clamp(42px,6.2vw,86px);line-height:1.03;letter-spacing:-.025em;max-width:14ch}
.sub{margin:0;font-size:clamp(26px,2.7vw,36px);line-height:1.25;color:var(--sand);max-width:28em;text-wrap:balance}

.block .wrap{padding-top:112px;padding-bottom:112px;display:flex;flex-direction:column}
.block h2{font-size:clamp(32px,4vw,52px);line-height:1.1;letter-spacing:-.02em}

.approach .wrap{gap:56px}
.points{display:grid;grid-template-columns:1fr;gap:48px}
.point{min-width:0;border-top:1px solid var(--ink);padding-top:22px;display:flex;flex-direction:column;gap:14px}
.num{font-size:26px;line-height:1;color:var(--slate)}
.point h3{font-size:23px;line-height:1.3;font-weight:600;letter-spacing:-.01em}
.point p{margin:0;font-size:17px;line-height:1.65;color:var(--slate)}

.team{background:var(--ink);color:var(--cream)}
.team .wrap{gap:28px}
.team p{margin:0;font-size:clamp(18px,1.6vw,21px);line-height:1.65;color:var(--sand);max-width:60ch}

/* 6. Memo page */
.memo-page{background:var(--cream)}
.memo .wrap{max-width:680px;padding-top:64px;padding-bottom:112px}
.memo h1{margin-bottom:40px;font-family:var(--font-serif);font-style:italic;font-size:clamp(52px,6vw,72px);line-height:1}
.memo h2{margin:48px 0 16px;font-size:clamp(24px,2.2vw,28px);line-height:1.25;letter-spacing:-.01em}
.memo h1 + h2{margin-top:0}
.memo p{margin:0 0 24px;font-size:18px;line-height:1.6;color:var(--text)}
.memo-list{list-style:none;margin:0 0 24px;padding:0}
.memo-list li{margin:0 0 16px;padding-left:24px;font-size:18px;line-height:1.6;color:var(--text)}
/* small square marker, inline so it follows the first line; centred on the lowercase height */
.memo-list li::before{content:'';display:inline-block;width:5px;height:5px;margin-left:-24px;margin-right:19px;vertical-align:.15em;background:var(--slate)}
.memo strong{font-weight:600;color:var(--ink)}

/* Dark version of the memo, only on screens whose device is set to dark mode
   (memo.html declares color-scheme "light dark"; the other pages stay light) */
@media screen and (prefers-color-scheme:dark){
.memo-page{background:var(--ink)}
.memo h1,.memo h2,.memo strong{color:var(--cream)}
.memo p,.memo-list li{color:var(--sand)}
.memo-list li::before{background:var(--sand)}
.memo-page ::selection{background:var(--cream);color:var(--ink)}
}

/* 7. Error page (404): the dark hero fills the screen between bar and footer */
.error-page{display:flex;flex-direction:column;min-height:100vh;min-height:100svh}
.error-page main{flex:1;display:flex}
.error-page .hero{flex:1;display:flex;align-items:center}
.error-page .hero .wrap{width:100%;padding-top:96px;padding-bottom:96px}
.error-code{margin:0;font-size:26px;line-height:1;color:var(--sand)}

/* 8. Responsive */
@media (min-width:900px){
.points{grid-template-columns:repeat(3,1fr);gap:40px}
}
@media (max-width:640px){
.brand{gap:10px}
.brand img{height:18px}
.brand span{font-size:12px;letter-spacing:.24em;margin-right:-.24em}
.nav{gap:16px}
.btn{padding:11px 14px}
.hero-mark{height:70%;right:-30%;bottom:-8%}
.block .wrap{padding-top:72px;padding-bottom:72px}
.memo .wrap{padding-top:44px}
.memo p,.memo-list li{font-size:17px}
}
@media (max-width:420px){
.wide-only{display:none}
.narrow-only{display:inline}
}
@media (max-width:360px){
.brand{gap:8px}
.nav{gap:12px}
.btn{padding:10px 12px}
}

/* 9. Motion: only when the visitor has not asked for reduced motion */
@keyframes rise{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:no-preference){
html{scroll-behavior:smooth}
.intro{animation:rise .9s cubic-bezier(.2,.7,.2,1) both}
.intro-2{animation-delay:.15s}
@supports (animation-timeline:view()){
.reveal{animation:rise linear both;animation-timeline:view();animation-range:entry 0% entry 85%}
.reveal-d1{animation-range:entry 15% entry 100%}
.reveal-d2{animation-range:entry 30% entry 100%}
}
}

/* 10. Print: browsers drop backgrounds, so dark sections are set in ink on paper */
@media print{
.intro,.reveal{animation:none !important}
.topbar{position:static;background:none;border:0;backdrop-filter:none;-webkit-backdrop-filter:none}
.topbar .wrap{padding-top:0;padding-bottom:0}
.brand{color:var(--ink)}
.brand img{filter:invert(1)}
.nav,.foot,.hero-mark,.text-link{display:none}
.hero,.team,.memo-page{background:none;color:var(--ink)}
.sub,.team p{color:var(--text)}
.hero .wrap,.block .wrap{padding-top:48px;padding-bottom:0}
.memo .wrap{padding-top:48px;padding-bottom:0}
.memo-list li::before{-webkit-print-color-adjust:exact;print-color-adjust:exact}
h2,h3{break-after:avoid}
.point,.memo-list li{break-inside:avoid}
}