/* ================================================================
   ALTA PHOTO LISBOA — DESIGN SYSTEM (EDITORIAL / INSTITUTIONAL)
   ================================================================ */

/* ========== TOKENS ========== */
:root {
  --font-primary: -apple-system, BlinkMacSystemFont, "Helvetica Neue",
                  Helvetica, Arial, sans-serif;

  --type-display: clamp(62px, 8.4vw, 140px);
  --type-heading: clamp(40px, 4.6vw, 74px);
  --type-body: clamp(15px, 1.2vw, 18px);

  --weight-regular: 400;
  --weight-bold: 700;
  --weight-black: 900;

  --track-tight: -0.03em;
  --track-tighter: -0.04em;

  --leading-none: 0.9;
  --leading-tight: 1.0;
  --leading-body: 1.45;

  --space-xs: clamp(8px, 1vw, 12px);
  --space-s: clamp(12px, 1.4vw, 18px);
  --space-m: clamp(18px, 2.6vw, 32px);
  --space-l: clamp(28px, 4vw, 48px);
  --space-xl: clamp(40px, 5.5vw, 64px);

  --color-bg: #f3f3f3;
  --color-text: #000;
}

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

html, body {
  height: 100%;
}

body {
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-primary);
  font-size: var(--type-body);
  font-weight: var(--weight-regular);
  line-height: var(--leading-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

a, a:visited {
  color: inherit;
  text-decoration: none;
}

/* ========== MAIN CONTAINER ========== */
.home {
  min-height: 100vh;
  padding: var(--space-l);
  display: flex;
  flex-direction: column;
}

/* ========== TOP BAR (SUBPAGES) ========== */
.top-bar {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  margin-bottom: var(--space-l);
}

.top-bar a {
  font-size: var(--type-body);
  font-weight: var(--weight-black);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--color-text);
}

/* ========== RULES / LINES ========== */
.rule {
  display: block;
  width: 100%;
  height: 1px;
  background: var(--color-text);
}

.home-rule {
  display: block;
  width: 100%;
  height: 1px;
  background: var(--color-text);
}

/* ========== NAV (HOMEPAGE) ========== */
.nav {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0;
  flex: 1;
}

.block {
  display: block;
  width: 100%;
  padding-top: var(--space-m);
  padding-bottom: var(--space-m);
  border-top: 1px solid var(--color-text);
  transition: opacity 0.2s ease;
}

.block:hover {
  opacity: 0.55;
}

/* ========== TYPOGRAPHY ========== */
.title {
  font-size: var(--type-display);
  font-weight: var(--weight-black);
  letter-spacing: var(--track-tight);
  line-height: var(--leading-none);
  display: block;
}

.sub {
  font-size: var(--type-heading);
  font-weight: var(--weight-black);
  letter-spacing: var(--track-tighter);
  line-height: var(--leading-tight);
  display: inline-block;
  color: #666;
}

/* ========== STACK ========== */
.stack {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0;
}

.sub--stack {
  transform: none;
}

/* ========== STREET BLOCK ========== */
.street {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

/* ========== PAGE HEADER (SUBPAGES) ========== */
.page-header {
  margin-bottom: var(--space-l);
}

.page-title {
  font-size: var(--type-display);
  font-weight: var(--weight-black);
  letter-spacing: var(--track-tight);
  line-height: var(--leading-none);
}

.page-subtitle {
  font-size: var(--type-heading);
  font-weight: var(--weight-black);
  letter-spacing: var(--track-tighter);
  line-height: var(--leading-tight);
  color: #666;
  margin-top: 0;
}

/* ========== WALK PAGE ========== */
.walk-header {
  margin-top: var(--space-l);
}

.walk-text {
  margin-top: var(--space-l);
  font-weight: var(--weight-bold);
}

.walk-text p {
  margin-bottom: var(--space-m);
}

.walk-text p:last-child {
  margin-bottom: 0;
}

.walk-photos {
  display: flex;
  flex-direction: column;
  gap: var(--space-l);
}

.walk-photos img {
  width: 100%;
  height: auto;
  display: block;
}

/* ========== LINKS (UNDERLINED BLACK) ========== */
.link-blue {
  color: var(--color-text);
  text-decoration: underline;
}

.link-blue:visited {
  color: var(--color-text);
}

/* ========== SITE FOOTER ========== */
.site-footer {
  margin-top: auto;
  padding-top: var(--space-l);
}

.site-footer .rule {
  margin-bottom: var(--space-m);
}

.footer-links {
  display: flex;
  justify-content: flex-end;
  gap: var(--space-m);
  font-size: var(--type-body);
  font-weight: var(--weight-regular);
}

/* ========== MOBILE ========== */
@media (max-width: 600px) {
  .page-title {
    font-size: clamp(42px, 12vw, 62px);
  }

  .page-subtitle {
    font-size: clamp(28px, 8vw, 40px);
  }
}