/* ============================================================
   ROUNDBOX Productions — roundboxfilms.cz (staging) → roundbox.cz (prod)
   Single source of truth.
   Aesthetic: cream paper, ink black, Cormorant Garamond for the
   letter, Inter for navigation. Auteur restraint — generous
   breathing room, narrow reading column.
   ============================================================ */

:root {
  --ink:        #1a1815;
  --ink-deep:   #0e0c0a;
  --cream:      #f5f0e6;
  --cream-warm: #ede5d3;
  --paper:      #fbf7ee;
  --ash:        #7d7264;
  --ash-quiet:  #a89e8e;
  --rule:       rgba(24, 22, 18, 0.10);
  --rule-strong:rgba(24, 22, 18, 0.22);
  --gold:       #a8895e;
}

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

html { scroll-behavior: smooth; }

body {
  background: var(--paper);
  color: var(--ink);
  font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  font-size: 15px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  /* iOS/iPadOS Safari fixes:
     1. Disable auto text-size adjustment (Safari was scaling text on larger iPads)
     2. Prevent horizontal overflow (which causes Safari to zoom out the whole page,
        making ALL text appear smaller than designed) */
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  overflow-x: hidden;
}

html {
  font-size: 100%;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  overflow-x: hidden;
  max-width: 100vw;
}

a { color: inherit; text-decoration: none; }
a:hover { color: var(--gold); }

img { display: block; max-width: 100%; height: auto; }

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

.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 48px;
}

.container-narrow {
  max-width: 820px;
  margin: 0 auto;
  padding: 0 32px;
}

.container-letter {
  max-width: 640px;
  margin: 0 auto;
  padding: 0 32px;
}

.section { padding: 140px 0; }
.section-paper-warm { background: var(--cream-warm); }
.section-dark { background: var(--ink-deep); color: var(--cream); }
.section-letter { padding: 160px 0 140px; background: var(--paper); }

.spacer-xs { height: 8px; }
.spacer-s { height: 16px; }
.spacer-m { height: 40px; }
.spacer-l { height: 80px; }

/* ============================================================
   HEADER
   ============================================================ */

.site-header {
  position: absolute;
  top: 0; left: 0; right: 0;
  z-index: 10;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;   /* anchor logo + lang nav to top of header */
  padding: 0 48px 32px;      /* 0 top padding — logo flush to viewport top */
}

.brand-mark { display: inline-block; }
.brand-logo {
  height: 168px;       /* tripled from 56px — strong header statement */
  width: auto;
  margin-top: -20px;   /* pull up — clips the empty whitespace baked into the PNG above "roundbox" */
  /* Logo is white-on-transparent PNG — sits cleanly on the dark hero */
}

@media (max-width: 720px) {
  .brand-logo { height: 120px; margin-top: -14px; }
}

.lang-nav {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--cream);
  font-size: 11px;
  letter-spacing: 0.30em;
  font-weight: 500;
  /* Push down so the EN·CS toggle sits at the optical line of the
     "roundbox" wordmark inside the logo image, not at the logo's
     extreme top edge. Pulled up 20px to match the logo's negative margin. */
  margin-top: 36px;
}

@media (max-width: 720px) {
  .lang-nav { margin-top: 24px; }
}

.lang-active {
  color: var(--cream);
  border-bottom: 1px solid var(--cream);
  padding-bottom: 2px;
}

.lang-divider { opacity: 0.4; }

.lang-coming {
  opacity: 0.45;
  cursor: not-allowed;
}

/* Working language link — used on the CS page for the EN toggle.
   Subtle, but interactive — opposite of .lang-coming (ghosted) */
.lang-link {
  color: var(--cream);
  opacity: 0.62;
  transition: opacity 0.2s ease, color 0.2s ease;
}

.lang-link:hover {
  opacity: 1;
  color: var(--gold);
}

/* ============================================================
   HERO — Hradčany backdrop with restrained overlay
   ============================================================ */

.hero {
  position: relative;
  min-height: 88vh;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: var(--ink-deep);
}

.hero-image-wrap {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  overflow: hidden;
}

.hero-image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  filter: grayscale(0.15) contrast(1.05) brightness(0.85);
}

.hero-overlay {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  /* Gradient reduced by 50% — Prague photo reads more openly through */
  background:
    linear-gradient(180deg, rgba(14,12,10,0.275) 0%, rgba(14,12,10,0.175) 40%, rgba(14,12,10,0.35) 100%);
}

.hero-content {
  position: relative;
  z-index: 2;
  text-align: center;
  color: var(--cream);
  padding: 0 32px;
  max-width: 900px;
}

/* Hero title — typographic echo of the logo above.
   "roundbox" lowercase + "PRODUCTIONS" spaced uppercase, both in
   Quicksand Light to match the logo's soft-geometric character. */
.hero-title {
  display: flex;
  flex-direction: column;
  align-items: center;
  font-family: 'Quicksand', 'Outfit', 'Nunito Sans', 'Inter', sans-serif;
  font-weight: 300;
  color: var(--cream);
  line-height: 1;
}

.hero-title-main {
  font-size: clamp(56px, 10vw, 112px);
  font-weight: 300;
  text-transform: uppercase;
  letter-spacing: 0.005em;
  line-height: 1;
}

.hero-title-sub {
  font-size: clamp(14px, 2vw, 22px);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.45em;
  margin-top: 18px;
  /* Hang the spacing on the right so optical edges align */
  text-indent: 0.45em;
  color: rgba(245, 240, 230, 0.88);
}

@media (max-width: 720px) {
  .hero-title-sub {
    letter-spacing: 0.35em;
    text-indent: 0.35em;
    margin-top: 12px;
  }
}

/* ============================================================
   TABLET — iPad portrait & landscape (720–1199px)
   Explicit size lock — iPad Safari has rendered clamp() unpredictably
   in this range. These values lock ROUNDBOX as the dominant word.
   ============================================================ */
@media (min-width: 720px) and (max-width: 1199px) {
  .hero-title-main { font-size: 104px; line-height: 1; }
  .hero-title-sub { font-size: 18px; line-height: 1.4; margin-top: 16px; }
  .hero { min-height: 78vh; }
}

/* ============================================================
   THE LETTER
   ============================================================ */

.letter {
  color: var(--ink);
}

.letter p {
  font-family: 'Cormorant Garamond', serif;
  font-size: 22px;
  font-weight: 400;
  line-height: 1.62;
  letter-spacing: 0.005em;
  margin-bottom: 28px;
  color: var(--ink);
}

.letter p em {
  font-style: italic;
  color: var(--ash);
}

.letter p strong {
  font-weight: 600;
  color: var(--ink-deep);
}

.letter-opening {
  margin-top: 0;
}

.dropcap {
  float: left;
  font-family: 'Cormorant Garamond', serif;
  font-size: 80px;
  font-weight: 400;
  line-height: 0.85;
  margin-right: 14px;
  margin-top: 6px;
  margin-bottom: -6px;
  color: var(--ink-deep);
}

.letter-close {
  margin-top: 40px;
  font-style: italic;
  color: var(--ash);
}

.letter-signature {
  margin-top: 32px !important;
  font-family: 'Cormorant Garamond', serif !important;
  font-size: 18px !important;
  font-style: italic;
  color: var(--ash) !important;
  text-align: right;
}

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

.eyebrow {
  font-size: 10px;
  letter-spacing: 0.42em;
  text-transform: uppercase;
  color: var(--ash);
  font-weight: 500;
}

.eyebrow-light { color: rgba(245, 240, 230, 0.65); }

.title-m {
  font-family: 'Cormorant Garamond', serif;
  font-size: 44px;
  font-weight: 400;
  line-height: 1.1;
  letter-spacing: -0.005em;
  color: var(--ink-deep);
}

.title-m em {
  font-style: italic;
  font-weight: 300;
  color: var(--ash);
}

.title-m.light { color: var(--cream); }
.title-m.light em { color: rgba(245, 240, 230, 0.65); }

.body-l {
  font-family: 'Cormorant Garamond', serif;
  font-size: 21px;
  font-weight: 400;
  line-height: 1.65;
  color: var(--ink);
}

.body-l.light { color: rgba(245, 240, 230, 0.85); }
.body-l.light a { color: var(--cream); border-bottom: 1px solid rgba(245,240,230,0.32); }
.body-l.light a:hover { color: var(--gold); border-bottom-color: var(--gold); }
.body-l a {
  border-bottom: 1px solid var(--rule-strong);
  transition: color 0.2s ease, border-color 0.2s ease;
}
.body-l a:hover { color: var(--gold); border-bottom-color: var(--gold); }

.body-s {
  font-family: 'Cormorant Garamond', serif;
  font-size: 17px;
  font-weight: 400;
  font-style: italic;
  line-height: 1.6;
  color: var(--ash);
}

.body-s.light-quiet { color: rgba(245, 240, 230, 0.55); }

.link-arrow {
  font-family: 'Inter', sans-serif;
  font-size: 12px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  font-weight: 500;
  color: var(--ink-deep) !important;
  border-bottom: none !important;
  display: inline-flex;
  align-items: center;
  gap: 12px;
}

.link-arrow:hover { color: var(--gold) !important; }

.link-arrow span {
  transition: transform 0.25s ease;
  display: inline-block;
}

.link-arrow:hover span { transform: translateX(6px); }

/* ============================================================
   COLLABORATORS GRID
   ============================================================ */

.collab-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 48px;
  margin-top: 24px;
}

@media (min-width: 720px) {
  .collab-grid { grid-template-columns: repeat(3, 1fr); gap: 48px; }
}

.collab-card {
  padding-top: 32px;
  border-top: 1px solid var(--rule-strong);
}

.collab-role {
  font-family: 'Inter', sans-serif;
  font-size: 10px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--ash);
  font-weight: 500;
  margin-bottom: 14px;
}

.collab-name {
  font-family: 'Cormorant Garamond', serif;
  font-size: 28px;
  font-weight: 400;
  line-height: 1.1;
  letter-spacing: -0.005em;
  color: var(--ink-deep);
  margin-bottom: 16px;
}

.collab-bio {
  font-family: 'Cormorant Garamond', serif;
  font-size: 17px;
  font-style: italic;
  line-height: 1.55;
  color: var(--ash);
}

.collab-bio em { font-style: normal; font-weight: 500; color: var(--ink); }

/* ============================================================
   WORK IN MOTION (two-column on wide)
   ============================================================ */

.work-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 48px;
  align-items: center;
}

@media (min-width: 880px) {
  .work-grid {
    grid-template-columns: 1fr 1fr;
    gap: 72px;
  }
}

.work-image img {
  width: 100%;
  height: auto;
  filter: grayscale(0.08) contrast(1.02);
}

.image-caption {
  font-family: 'Inter', sans-serif;
  font-size: 10px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--ash);
  font-weight: 400;
  margin-top: 14px;
  text-align: right;
}

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

.site-footer {
  background: var(--cream-warm);
  padding: 80px 0 56px;
  border-top: 1px solid var(--rule);
}

.footer-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 40px;
}

@media (min-width: 720px) and (max-width: 1100px) {
  .footer-grid { grid-template-columns: repeat(2, 1fr); gap: 48px; }
}

@media (min-width: 1100px) {
  .footer-grid { grid-template-columns: repeat(4, 1fr); gap: 48px; }
}

.footer-block { line-height: 1.8; }

.footer-block .meta {
  font-size: 10px;
  letter-spacing: 0.40em;
  text-transform: uppercase;
  color: var(--ink);
  font-weight: 600;
  margin-bottom: 14px;
  display: block;
}

.meta {
  font-size: 10px;
  letter-spacing: 0.40em;
  text-transform: uppercase;
  color: var(--ash);
  font-weight: 500;
  display: inline-block;
}

.meta-quiet {
  font-family: 'Inter', sans-serif;
  font-size: 12px;
  line-height: 1.7;
  color: var(--ash);
  font-weight: 400;
  letter-spacing: 0.02em;
}

.meta-quiet a {
  border-bottom: 1px solid var(--rule);
  transition: color 0.2s ease, border-color 0.2s ease;
}

.meta-quiet a:hover { color: var(--gold); border-bottom-color: var(--gold); }

.footer-copyright {
  margin-top: 56px;
  padding-top: 32px;
  border-top: 1px solid var(--rule);
  text-align: center;
}

/* ============================================================
   RESPONSIVE
   ============================================================ */

@media (max-width: 720px) {
  .site-header { padding: 24px 28px; }
  .section { padding: 80px 0; }
  .section-letter { padding: 96px 0 80px; }
  .container { padding: 0 28px; }
  .title-m { font-size: 32px; }
  .body-l { font-size: 18px; }
  .letter p { font-size: 19px; margin-bottom: 22px; }
  .dropcap { font-size: 64px; margin-right: 10px; }
  .hero { min-height: 72vh; }
}

/* ============================================================
   SELECTION
   ============================================================ */

::selection { background: var(--ink-deep); color: var(--cream); }