/* =========================
   ARCHIVAL DESIGN SYSTEM
   Nikos Voyiatzis
   ========================= */

:root{

/* TYPOGRAPHY */
--font-main: 'Inter', sans-serif;

--text-xs: 0.8rem;
--text-sm: 1rem;
--text-md: 1.25rem;
--text-lg: 2rem;
--text-xl: clamp(3rem, 6vw, 6rem);
--text-hero: clamp(5rem, 15vw, 18rem);

/* WEIGHTS */
--regular: 400;
--medium: 500;
--bold: 700;
--black: 900;

/* SPACING SYSTEM */
--space-1: 8px;
--space-2: 16px;
--space-3: 24px;
--space-4: 40px;
--space-5: 80px;
--space-6: 120px;

/* COLOR SYSTEM (minimal + archival) */
--bg: #ffffff;
--fg: #000000;
--muted: rgba(0,0,0,0.06);

/* BORDERS */
--border: 2px solid var(--fg);
--border-thin: 1px solid var(--fg);

/* TRANSITIONS */
--fast: 0.2s ease;
--medium: 0.4s ease;
}

*{
margin:0;
padding:0;
box-sizing:border-box;
}

html{
scroll-behavior:smooth;
}

body{
font-family:var(--font-main);
background:var(--bg);
color:var(--fg);
overflow-x:hidden;
}

/* =========================
   LAYOUT SYSTEM
   ========================= */

section{
min-height:100vh;
padding:var(--space-5);
position:relative;
border-bottom:var(--border);
}
img{
  max-width: 600px;
  width: 100%;
  height: auto;
  display: block;
}video{
  max-width: 700px;
  width: 100%;
  height: auto;
  display: block;
  margin: var(--space-3) auto;
}
.container{
max-width:1100px;
margin:0 auto;
}

/* =========================
   TYPOGRAPHY SYSTEM
   ========================= */

h1{
font-size:var(--text-hero);
font-weight:var(--black);
letter-spacing:-0.07em;
line-height:0.85;
}

h2{
font-size:var(--text-xl);
font-weight:var(--black);
letter-spacing:-0.05em;
margin-bottom:var(--space-4);
}

p{
font-size:var(--text-md);
line-height:1.5;
max-width:70ch;
}

/* =========================
   HERO BLOCK
   ========================= */

.hero{
display:flex;
flex-direction:column;
justify-content:center;
}

/* =========================
   BIG NUMBER SYSTEM
   ========================= */

.big-number{
position:absolute;
top:20px;
right:30px;
font-size:18vw;
font-weight:var(--black);
line-height:1;
opacity:.06;
pointer-events:none;
}

/* =========================
   LINKS / ARCHIVE ENTRIES
   ========================= */

.links{
display:flex;
flex-direction:column;
}

.links a{
font-size:var(--text-lg);
text-decoration:none;
color:var(--fg);
padding:var(--space-3) 0;
border-top:var(--border);
transition:var(--fast);
}

.links a:hover{
padding-left:40px;
}

/* =========================
   NAVIGATION SYSTEM
   ========================= */

nav{
position:fixed;
top:25px;
right:25px;
z-index:999;
display:flex;
gap:10px;
flex-wrap:wrap;
max-width:500px;
justify-content:flex-end;
}

nav a{
font-size:var(--text-xs);
text-decoration:none;
color:var(--fg);
border:var(--border-thin);
padding:8px 12px;
transition:var(--fast);
}

nav a:hover{
background:var(--fg);
color:var(--bg);
}

/* =========================
   MANIFESTO BLOCK
   ========================= */

.manifesto{
font-size:var(--text-xl);
line-height:0.9;
font-weight:var(--black);
letter-spacing:-0.06em;
}

/* =========================
   FOOTER
   ========================= */

.footer{
display:flex;
align-items:center;
justify-content:center;
font-size:var(--text-md);
font-weight:var(--bold);
padding:var(--space-5);
}

/* =========================
   MOBILE
   ========================= */

@media(max-width:768px){

section{
padding:var(--space-4);
}

h1{
font-size:5rem;
}

.manifesto{
font-size:4rem;
}

.links a{
font-size:1.25rem;
}
}