* {
  box-sizing: border-box;
}


:root {
  font-family: Arial, Helvetica, sans-serif;

  color: #111;
  background: #e8e8e3;
}


html,
body {
  min-height: 100%;
  margin: 0;
}


body {
  min-height: 100vh;

  display: flex;
  align-items: center;
  justify-content: center;

  padding: 32px;
}


/* =========================================================
   THE CARD
   ========================================================= */

.card {
  width: min(100%, 560px);
  min-height: 680px;

  background: #f7f7f3;

  padding: 54px 52px 38px;

  display: flex;
  flex-direction: column;

  box-shadow:
    0 24px 80px rgba(0, 0, 0, 0.08);

  container-type: inline-size;
}


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

header {
  margin-bottom: auto;
}


/* ---------------------------------------------------------
   HUNGARIAN TITLE

   New principle:
   The two lines have different font sizes,
   but are calibrated toward the same horizontal width.
   --------------------------------------------------------- */

.name {
  display: flex;
  flex-direction: column;

  line-height: 0.86;
  font-weight: 800;
}


/* SÚLYTALAN
   Slightly smaller than v02 so that its width comes
   closer to the width of ÉPÍTÉSZET / the link system. */

.name-main {
  font-size: clamp(2.5rem, 10cqw, 4.2rem);

  letter-spacing: -0.02em;
}


/* ÉPÍTÉSZET
   Keep approximately the v02 font size.
   Give it a little more tracking so its horizontal
   dimension becomes closer to SÚLYTALAN. */

.name-second {
  margin-top: 0.18em;

  font-size: clamp(2.5rem, 10cqw, 4.2rem);

  letter-spacing: 0.032em;
}


/* ---------------------------------------------------------
   ENGLISH TITLE
   --------------------------------------------------------- */

.english {
  margin-top: 22px;

  display: flex;
  flex-direction: column;

  line-height: 0.92;

  font-weight: 400;
}


/* Both English lines are slightly larger than v02. */

.english-main,
.english-second {
  font-size: clamp(1.2rem, 4cqw, 1.6rem);
}


/* ARCHITECTURE is our approximate width reference. */

.english-second {
  letter-spacing: -0.025em;
}


/* WEIGHTLESS gets additional tracking so that its
   horizontal dimension approaches ARCHITECTURE. */

.english-main {
  letter-spacing: 0.11em;
}


/* ---------------------------------------------------------
   TOPIC RIBBON
   --------------------------------------------------------- */

.topics {
  margin: 22px 0 0;

  max-width: none;

  font-size: 0.78rem;
  line-height: 1.5;

  /*
    Slightly wider tracking creates the "ribbon" effect
    without dramatically increasing its height.
  */
  letter-spacing: 0.012em;

  text-transform: lowercase;

  white-space: nowrap;
}


/* =========================================================
   LINKS
   ========================================================= */

.links {
  margin-top: 70px;

  border-top: 1px solid #111;
}


.link {
  min-height: 76px;

  display: flex;
  align-items: center;
  justify-content: space-between;

  gap: 24px;

  border-bottom: 1px solid #111;

  color: inherit;
  text-decoration: none;

  transition:
    padding 0.18s ease,
    background 0.18s ease;
}


.link:hover,
.link:focus-visible {
  padding-left: 10px;
  padding-right: 10px;

  outline: none;
}


/* LEFT SIDE OF EACH LINK */

.link-main {
  display: flex;
  align-items: center;

  gap: 14px;
}


/* ICONS */

.icon {
  width: 20px;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  font-size: 1rem;
  line-height: 1;

  flex-shrink: 0;
}


.watch-icon {
  transform: translateX(-1px);
}


.facebook-icon {
  font-family: Arial, Helvetica, sans-serif;

  font-weight: 700;
  font-size: 1.2rem;
}


/* LINK LABELS
   Only a very small increase from v02. */

.label {
  font-size: 0.89rem;

  font-weight: 700;

  letter-spacing: 0.09em;
}


.detail {
  font-size: 0.84rem;

  white-space: nowrap;
}


.support {
  font-weight: 700;
}


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

footer {
  display: flex;
  justify-content: space-between;

  margin-top: 38px;

  font-size: 0.67rem;

  letter-spacing: 0.11em;

  text-transform: uppercase;
}


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

@media (max-width: 560px) {

  body {
    padding: 0;

    align-items: stretch;
  }


  .card {
    width: 100%;
    min-height: 100vh;

    padding: 38px 25px 30px;

    box-shadow: none;
  }


  /* -------------------------------------------------------
     MOBILE TITLE

     The mobile values remain deliberately close to v01.
     We don't want the horizontal refinements to destroy
     the vertical composition that already works.
     ------------------------------------------------------- */

  .name-main {
    font-size: clamp(2.5rem, 14vw, 4.2rem);
  }


  .name-second {
    margin-top: 0.19em;

    font-size: clamp(2.5rem, 14vw, 4.2rem);
  }


  .english {
    margin-top: 23px;
  }


  .english-main,
  .english-second {
    font-size: clamp(1.18rem, 4.1vw, 1.48rem);
  }


  .topics {
    margin-top: 23px;

    font-size: 0.75rem;

    letter-spacing: 0.088em;

    white-space: normal;
  }


  /* Keep v01's vertical link rhythm. */

  .links {
    margin-top: 54px;
  }


  .link {
    min-height: 70px;
  }


  .label {
    font-size: 0.87rem;
  }


  .detail {
    font-size: 0.76rem;
  }


  footer {
    margin-top: 30px;
  }
}