@font-face {
  font-family: "Artegra Sans Extended";
  src: url("../assets/fonts/ArtegraSansExtended-Bold.woff") format("woff");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Artegra Sans";
  src: url("../assets/fonts/ArtegraSans-Medium.woff") format("woff");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

:root{
  --bg:#060606;
  --fg:#ECECEC;
  --muted:rgba(236,236,236,.72);
  --soft:rgba(236,236,236,.10);
  --max:1120px;
  --pad:clamp(18px,3.2vw,44px);
  --radius:18px;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  background:var(--bg);
  color:var(--fg);
  font-family:"Artegra Sans", ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial;
  font-weight:500;
  letter-spacing:.01em;
  line-height:1.55;
}

img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
::selection{background:rgba(236,236,236,.18)}

.page{min-height:100%;display:flex;flex-direction:column}
.container{max-width:var(--max);margin:0 auto;padding:var(--pad)}

.header{padding-top:calc(var(--pad)*.9)}
.nav{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:16px;
  flex-wrap:wrap;
}

.brand{
  font-family:"Artegra Sans Extended", ui-sans-serif, system-ui;
  font-weight:700;
  letter-spacing:.02em;
  font-size:clamp(18px,2vw,22px);
  opacity:.96;
}

.nav-right{
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
  justify-content:flex-end;
}

.menu{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  justify-content:flex-end;
}

.menu a{
  font-size:14px;
  color:var(--muted);
  padding:10px 12px;
  border-radius:999px;
  transition:transform .18s ease, background .18s ease, color .18s ease;
}
.menu a:hover{color:var(--fg);background:rgba(236,236,236,.06);transform:translateY(-1px)}
.menu a[aria-current="page"]{color:var(--fg);background:rgba(236,236,236,.10)}

.lang{
  display:flex;
  gap:6px;
  padding:6px;
  border-radius:999px;
  background:rgba(236,236,236,.04);
}
.lang a{
  font-size:12px;
  letter-spacing:.14em;
  text-transform:uppercase;
  padding:8px 10px;
  border-radius:999px;
  color:rgba(236,236,236,.55);
}
.lang a[aria-current="true"]{
  color:var(--fg);
  background:rgba(236,236,236,.10);
}

.hero{padding-top:clamp(26px,4vw,56px);padding-bottom:clamp(26px,4vw,56px)}
.hero-min{padding-top:clamp(22px,3vw,40px);padding-bottom:clamp(18px,3vw,34px)}

.grid-hero{
  display:grid;
  grid-template-columns:1.25fr .75fr;
  gap:clamp(16px,3vw,36px);
  align-items:start;
}
@media (max-width:920px){.grid-hero{grid-template-columns:1fr}}

.h1{
  font-family:"Artegra Sans Extended", ui-sans-serif, system-ui;
  font-weight:700;
  line-height:1.02;
  letter-spacing:.01em;
  font-size:clamp(38px,5vw,74px);
  margin:0 0 14px 0;
}
.kicker{
  color:rgba(236,236,236,.52);
  letter-spacing:.12em;
  text-transform:uppercase;
  font-size:12px;
  margin:0 0 10px 0;
}
.sub{
  color:var(--muted);
  font-size:clamp(16px,1.4vw,18px);
  margin:0 0 18px 0;
  max-width:68ch;
}

.meta{display:flex;flex-wrap:wrap;gap:10px;margin-top:14px}
.pill{
  display:inline-flex;
  align-items:center;
  padding:10px 12px;
  border-radius:999px;
  background:rgba(236,236,236,.06);
  color:var(--muted);
  font-size:13px;
}

.hero-image{
  border-radius:var(--radius);
  overflow:hidden;
  background:rgba(236,236,236,.04);
}
.hero-image img{
  width:100%;
  height:100%;
  object-fit:cover;
  aspect-ratio:4/5;
  filter:saturate(.98) contrast(1.02);
}

.section{padding-top:clamp(26px,4vw,52px);padding-bottom:clamp(26px,4vw,52px)}
.h2{
  font-family:"Artegra Sans Extended", ui-sans-serif, system-ui;
  font-weight:700;
  font-size:clamp(22px,2.2vw,28px);
  margin:0 0 14px 0;
}
.p{margin:0 0 14px 0;color:var(--muted);max-width:78ch}

/* Lists (no borders/lines, only soft blocks) */
.list{display:grid;gap:10px;margin-top:18px}
.item{padding:14px 14px;border-radius:14px;background:rgba(236,236,236,.04)}
.item .title{color:var(--fg);font-size:15px;margin:0 0 6px 0}
.item .desc{color:var(--muted);margin:0;font-size:14px}

/* Photography: unlimited grid */
.photo-grid{
  display:grid;
  grid-template-columns:repeat(12, 1fr);
  gap:clamp(10px,1.4vw,16px);
  margin-top:18px;
}
.photo-tile{
  grid-column:span 4;
  border-radius:var(--radius);
  overflow:hidden;
  background:rgba(236,236,236,.04);
  transition:transform .18s ease, background .18s ease;
}
.photo-tile:hover{transform:translateY(-2px);background:rgba(236,236,236,.06)}
.photo-tile img{width:100%;height:100%;object-fit:cover;aspect-ratio:4/3}
@media (max-width:920px){.photo-tile{grid-column:span 6}}
@media (max-width:560px){.photo-tile{grid-column:span 12}}

/* Photo detail pages */
.detail{
  display:grid;
  grid-template-columns:1fr;
  gap:16px;
  margin-top:18px;
}
.detail .image{
  border-radius:var(--radius);
  overflow:hidden;
  background:rgba(236,236,236,.04);
}
.detail .image img{width:100%;height:auto}
.detail .caption{color:var(--muted);font-size:14px;max-width:78ch}
.detail-nav{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  margin-top:10px;
}
.detail-nav a{
  padding:10px 12px;
  border-radius:999px;
  background:rgba(236,236,236,.06);
  color:var(--muted);
  transition:transform .18s ease, background .18s ease, color .18s ease;
}
.detail-nav a:hover{color:var(--fg);background:rgba(236,236,236,.10);transform:translateY(-1px)}

/* Typewriter pages gallery */
.tw-grid{
  display:grid;
  grid-template-columns:repeat(12, 1fr);
  gap:clamp(10px,1.4vw,16px);
  margin-top:18px;
}
.tw-card{
  border-radius:var(--radius);
  overflow:hidden;
  background:rgba(236,236,236,.04);
  grid-column:span 6;
}
.tw-card img{width:100%;height:100%;object-fit:cover;aspect-ratio:16/10}
.tw-card.specimen{grid-column:span 12}
.tw-card.specimen img{aspect-ratio:16/7;object-fit:contain;background:#0b0b0b}
@media (max-width:920px){.tw-card{grid-column:span 12}}

.footer{
  margin-top:auto;
  padding-bottom:calc(var(--pad)*.9);
  color:rgba(236,236,236,.55);
  font-size:13px;
}
.footer a{color:rgba(236,236,236,.72)}
.footer a:hover{color:var(--fg)}

/* Films: poster grid */
.poster-grid{
  display:grid;
  grid-template-columns:repeat(12, 1fr);
  gap:clamp(10px,1.4vw,16px);
  margin-top:18px;
}

.poster{
  grid-column:span 3;
  border-radius:var(--radius);
  overflow:hidden;
  background:rgba(236,236,236,.04);
  transition:transform .18s ease, background .18s ease;
}
.poster:hover{transform:translateY(-2px);background:rgba(236,236,236,.06)}
.poster img{
  width:100%;
  height:100%;
  object-fit:cover;
  aspect-ratio:2/3;
  filter:saturate(.98) contrast(1.02);
}

@media (max-width: 1024px){ .poster{grid-column:span 4;} }
@media (max-width: 720px){ .poster{grid-column:span 6;} }
@media (max-width: 460px){ .poster{grid-column:span 12;} }

/* Book: cover layout */
.book-hero{
  display:grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: clamp(16px, 3vw, 36px);
  align-items:start;
}
@media (max-width: 920px){ .book-hero{grid-template-columns:1fr;} }

.book-cover{
  border-radius:var(--radius);
  overflow:hidden;
  background:rgba(236,236,236,.04);
}
.book-cover img{
  width:100%;
  height:100%;
  object-fit:cover;
  aspect-ratio:3/4;
}

.quote{
  padding:16px 16px;
  border-radius:16px;
  background:rgba(236,236,236,.04);
  color:rgba(236,236,236,.78);
  font-size:14px;
  max-width:78ch;
}