/* ===========================================================================
   SUDA® — Temporary landing page
   styles.css

   Built to reproduce the approved design (1440 px composition) and to adapt
   that same composition down to 320 px. No frameworks, no build step, no
   external requests: every font and image is local.

   Every value below is derived from the approved artwork. Where a size is
   written as clamp(a, calc(b + c vw), d) it holds the approved desktop value
   at 1440 px and interpolates down to the mobile value at 390 px.
   =========================================================================== */

/* ---------------------------------------------------------------------------
   01 · FONTS — the SUDA typefaces, served locally
   --------------------------------------------------------------------------- */

@font-face {
  font-family: "Playfair Display";
  src: url("assets/fonts/PlayfairDisplay-Regular.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Playfair Display";
  src: url("assets/fonts/PlayfairDisplay-Italic.woff2") format("woff2");
  font-weight: 400; font-style: italic; font-display: swap;
}
@font-face {
  font-family: "Playfair Display";
  src: url("assets/fonts/PlayfairDisplay-Bold.woff2") format("woff2");
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Gotham";
  src: url("assets/fonts/Gotham-Book.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Gotham";
  src: url("assets/fonts/Gotham-Bold.woff2") format("woff2");
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Cinema Outfit";
  src: url("assets/fonts/CinemaOutfit-Regular.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}

/* Coverage fallbacks — the supplied full-character Gotham cuts and Playfair
   Regular. They are never used for the approved wording; they exist so that
   any character added later still renders in the brand typefaces rather than
   dropping to a system font. */
@font-face {
  font-family: "Gotham Fallback";
  src: url("assets/fonts/Gotham-Light.woff2") format("woff2");
  font-weight: 100 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Gotham Fallback";
  src: url("assets/fonts/Gotham-Medium.woff2") format("woff2");
  font-weight: 501 900; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Playfair Fallback";
  src: url("assets/fonts/PlayfairDisplay-Regular.woff2") format("woff2");
  font-weight: 100 900; font-style: normal; font-display: swap;
}

/* ---------------------------------------------------------------------------
   02 · TOKENS
   --------------------------------------------------------------------------- */

:root {
  --ivory:    #F5F0E7;
  --ink:      #0F0B08;
  --charcoal: #27211D;
  --stone:    #8B7D6B;
  --clay:     #9B6245;

  --serif: "Playfair Display", "Playfair Fallback", Georgia, "Times New Roman", serif;
  --sans:  "Gotham", "Gotham Fallback", "Avenir Next", "Segoe UI", system-ui, -apple-system, Helvetica, Arial, sans-serif;
  --brush: "Cinema Outfit", "Playfair Display", "Playfair Fallback", Georgia, serif;

  /* Page insets: 112 px and 60 px at 1440 */
  --pad:      clamp(24px, 7.778vw, 112px);
  --pad-hero: clamp(22px, 4.167vw, 60px);

  /* Type scale — approved desktop value is the upper bound of each clamp */
  --fs-status:  clamp(11px,   calc(7.16px  + 0.984vw), 21.33px);
  --fs-hero:    clamp(44px,   calc(21.12px + 5.867vw), 105.6px);
  --fs-support: clamp(11.5px, calc(7.60px  + 1.000vw), 22px);
  --fs-btn:     clamp(11px,   calc(10.63px + 0.095vw), 12px);
  --fs-label:   clamp(11px,   calc(10.13px + 0.222vw), 13.33px);
  --fs-h2:      clamp(32px,   calc(11.00px + 3.125vw), 56px);
  --fs-body:    clamp(15px,   calc(13.89px + 0.286vw), 18px);
  --fs-formats: clamp(12.5px, calc(11.20px + 0.333vw), 16px);
  --fs-close:   clamp(24px,   calc(19.05px + 1.270vw), 37.33px);
  --fs-ctlabel: clamp(10.5px, calc(9.45px  + 0.270vw), 13.33px);
  --fs-ctvalue: clamp(14px,   calc(13.26px + 0.190vw), 16px);
  --fs-sign:    clamp(18px,   calc(14.29px + 0.952vw), 28px);
  --fs-copy:    clamp(9.5px,  calc(8.94px  + 0.143vw), 11px);
}

/* ---------------------------------------------------------------------------
   03 · BASE
   --------------------------------------------------------------------------- */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--ivory);
  color: var(--charcoal);
  font-family: var(--sans);
  font-weight: 400;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img { display: block; max-width: 100%; height: auto; }
picture { display: block; }
h1, h2, p, dl, dd, ul, figure { margin: 0; }
ul { padding: 0; list-style: none; }
a { color: inherit; text-decoration: none; }

:focus-visible { outline: 2px solid var(--clay); outline-offset: 4px; }
::selection { background: var(--ink); color: var(--ivory); }

/* The short rule that precedes each eyebrow */
.suda-rule {
  display: block;
  flex: none;
  width: clamp(26px, 2.889vw, 41.6px);
  height: 1px;
  background: currentColor;
}

/* ---------------------------------------------------------------------------
   04 · SECTION 1 — HERO
   --------------------------------------------------------------------------- */

.suda-hero {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100svh;
  min-height: 560px;
  max-height: 1040px;
  padding: clamp(26px, 3.056vw, 44px) var(--pad-hero) clamp(44px, 6.806vw, 98px);
  overflow: hidden;
  background: var(--ink);
  color: var(--ivory);
}

@supports not (height: 100svh) { .suda-hero { height: 100vh; } }

.suda-hero__media { position: absolute; inset: 0; }
.suda-hero__media picture { width: 100%; height: 100%; }
.suda-hero__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 96%;
}

/* A flat 15% wash, exactly as in the approved artwork */
.suda-hero__scrim { position: absolute; inset: 0; background: rgba(15, 11, 8, 0.15); }

.suda-hero__status {
  position: relative;
  display: flex;
  align-items: center;
  gap: clamp(11px, 2.674vw, 38.5px);
  font-family: var(--serif);
  font-weight: 700;
  font-size: var(--fs-status);
  line-height: 1.1;
  letter-spacing: 0.245em;
  text-transform: uppercase;
}
.suda-hero__status .suda-rule { height: 3px; background: var(--clay); }

.suda-hero__body {
  position: relative;
  margin-top: auto;
  padding-left: clamp(4px, 1.806vw, 26px);
}

.suda-hero__title {
  display: block;
  margin-left: -0.075em;              /* optical alignment of the Playfair "A" */
  font-family: var(--serif);
  font-weight: 400;
  font-size: var(--fs-hero);
  line-height: 1.0417;
  letter-spacing: 0;
}
.suda-hero__line1, .suda-hero__line2 { display: block; }
.suda-hero__title em { font-style: italic; }
.suda-hero__line2 { font-weight: 700; }

.suda-hero__support {
  margin-top: clamp(20px, 10.28vw, 148px);
  margin-left: 0;
  font-family: var(--sans);
  font-weight: 700;
  font-size: var(--fs-support);
  line-height: 1.3;
  letter-spacing: 0.026em;
  text-transform: uppercase;
}

.suda-hero__actions {
  display: flex;
  gap: clamp(14px, 4.653vw, 67px);
  margin-top: clamp(22px, 4.653vw, 67px);
  padding-left: clamp(0px, 0.278vw, 4px);
}

.suda-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: clamp(140px, 10.215vw, 147px);
  min-height: clamp(38px, 2.778vw, 40px);
  padding: 0 0.5em;
  font-family: var(--brush);
  font-size: var(--fs-btn);
  line-height: 1;
  letter-spacing: 0.17em;
  text-transform: uppercase;
  border: 2px solid var(--ivory);
  transition: background-color 0.35s ease, color 0.35s ease;
}
.suda-btn--solid   { background: var(--ivory); color: var(--ink); }
.suda-btn--outline { background: transparent;  color: var(--ivory); }

.suda-btn--solid:hover,   .suda-btn--solid:focus-visible   { background: transparent;  color: var(--ivory); }
.suda-btn--outline:hover, .suda-btn--outline:focus-visible { background: var(--ivory); color: var(--ink); }

@media (hover: none) {
  .suda-btn--solid:active   { background: transparent;  color: var(--ivory); }
  .suda-btn--outline:active { background: var(--ivory); color: var(--ink); }
}

/* ---------------------------------------------------------------------------
   05 · SHARED — eyebrow labels
   --------------------------------------------------------------------------- */

.suda-label {
  display: flex;
  align-items: center;
  gap: clamp(9px, 0.965vw, 13.9px);
  font-family: var(--serif);
  font-weight: 700;
  font-size: var(--fs-label);
  line-height: 1.1;
  letter-spacing: 0.245em;
  text-transform: uppercase;
  color: var(--charcoal);
}
.suda-label--light { color: var(--ivory); }

/* ---------------------------------------------------------------------------
   06 · SECTION 2 — ABOUT
   --------------------------------------------------------------------------- */

.suda-about {
  background: var(--ivory);
  padding-block: clamp(48px, 4.722vw, 68px) clamp(34px, 3.125vw, 45px);
}

.suda-about__inner {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: clamp(28px, 4vw, 90px);
  max-width: 1440px;
  margin-inline: auto;
  padding-left: var(--pad);
  padding-right: clamp(24px, 2.604vw, 37.5px);
}

.suda-about__text { width: clamp(280px, 35.07vw, 505px); flex: 0 1 auto; }

.suda-about__title {
  margin-top: clamp(18px, 2.222vw, 32px);
  font-family: var(--serif);
  font-weight: 400;
  font-size: var(--fs-h2);
  line-height: 1.0714;
  letter-spacing: 0.0094em;
  color: var(--ink);
}

.suda-about__copy {
  margin-top: clamp(26px, 2.986vw, 43px);
  margin-left: clamp(-8px, -0.556vw, 0px);
  font-family: var(--sans);
  font-weight: 400;
  font-size: var(--fs-body);
  line-height: 1.6667;
  color: var(--charcoal);
  text-align: justify;
  text-justify: inter-word;
  hyphens: none;
}
.suda-about__copy p + p { margin-top: clamp(18px, 2.083vw, 30px); }

.suda-formats {
  margin-top: clamp(26px, 2.5vw, 36px);
  margin-left: clamp(-8px, -0.556vw, 0px);
  padding-top: clamp(26px, 2.91vw, 41.9px);
  border-top: 1.5px solid var(--stone);
  font-family: var(--serif);
  font-weight: 700;
  font-size: var(--fs-formats);
  line-height: 2.056;
  letter-spacing: 0.132em;
  text-transform: uppercase;
  color: var(--charcoal);
}

/* The image pair sits lower than the text column and butts edge to edge */
.suda-about__figs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  width: clamp(300px, 44.72vw, 644px);
  flex: 0 0 auto;
  margin-top: clamp(24px, 4.444vw, 64px);
}
.suda-about__figs img { width: 100%; aspect-ratio: 2 / 3; object-fit: cover; }

/* ---------------------------------------------------------------------------
   07 · SECTION 3 — FEATURED IN, CLOSING AND CONTACT
   --------------------------------------------------------------------------- */

.suda-close {
  background: var(--ink);
  color: var(--ivory);
  padding-block: clamp(56px, 7.361vw, 106px) clamp(46px, 5.694vw, 82px);
}

.suda-close__inner {
  max-width: 1440px;
  margin-inline: auto;
  padding-inline: var(--pad);
}

/* Press logos — widths reproduce the relative scale of the approved row */
.suda-press {
  display: grid;
  grid-template-columns: 137.9fr 138.9fr 137.9fr 156.1fr 135.1fr 136fr 129.8fr 137fr 107.3fr;
  align-items: center;
  margin-top: clamp(28px, 3.09vw, 44.5px);
}
.suda-press li { display: flex; align-items: center; }
.suda-press img { width: var(--w); height: auto; }

.suda-close__lead {
  margin-top: clamp(56px, 10.67vw, 153.6px);
  font-family: var(--serif);
  font-weight: 700;
  font-size: var(--fs-close);
  line-height: 1.2323;
  color: var(--ivory);
}

.suda-hr {
  height: 0;
  margin: clamp(20px, 2.014vw, 29px) 0 0;
  border: 0;
  border-top: 1.5px solid var(--ivory);
}
.suda-hr--foot { margin-top: clamp(44px, 11.53vw, 166px); }

.suda-close__row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: clamp(28px, 4vw, 60px);
  margin-top: clamp(14px, 0.903vw, 13px);
}

.suda-close__body {
  font-family: var(--serif);
  font-weight: 400;
  font-size: var(--fs-close);
  line-height: 1.2323;
  color: var(--ivory);
}

.suda-contact {
  flex: 0 0 auto;
  width: clamp(220px, 29.0vw, 417.6px);
  margin-top: clamp(20px, 3.194vw, 46px);
}
.suda-contact dt {
  font-family: var(--serif);
  font-weight: 700;
  font-size: var(--fs-ctlabel);
  line-height: 1.1;
  letter-spacing: 0.19em;
  text-transform: uppercase;
}
.suda-contact dd {
  margin: clamp(4px, 0.417vw, 6px) 0 0;
  font-family: var(--sans);
  font-weight: 400;
  font-size: var(--fs-ctvalue);
  line-height: 1.2;
  letter-spacing: 0.13em;
}
.suda-contact dd + dt { margin-top: clamp(20px, 2.014vw, 29px); }
.suda-contact dd b { font-weight: 700; letter-spacing: 0; }

.suda-contact a {
  display: inline-block;
  padding-bottom: 4px;
  border-bottom: 1.5px solid var(--ivory);
  transition: opacity 0.3s ease, border-color 0.3s ease;
}
.suda-contact a:hover, .suda-contact a:focus-visible { opacity: 0.72; }
.suda-contact a:active { opacity: 0.72; }

.suda-close__foot {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  margin-top: clamp(14px, 1.944vw, 28px);
}

.suda-signature {
  font-family: var(--serif);
  font-weight: 400;
  font-size: var(--fs-sign);
  line-height: 1.2;
  color: var(--ivory);
}
.suda-signature em { font-style: italic; }
.suda-signature b  { font-weight: 700; }
.suda-reg { font-size: 0.6em; vertical-align: 0.42em; letter-spacing: 0.02em; }

.suda-copyright {
  flex: none;
  font-family: var(--sans);
  font-weight: 700;
  font-size: var(--fs-copy);
  line-height: 1.2;
  letter-spacing: 0.183em;
  text-transform: uppercase;
  color: var(--ivory);
  transform: translate(6px, -4px);
}

/* ---------------------------------------------------------------------------
   08 · TABLET — 900 px and below
   --------------------------------------------------------------------------- */

@media (max-width: 900px) {
  .suda-about__inner {
    flex-direction: column;
    gap: clamp(34px, 6vw, 54px);
    padding-right: var(--pad);
  }
  .suda-about__text { width: 100%; max-width: 560px; }
  .suda-about__figs { width: 100%; max-width: 560px; margin-top: 0; }

  .suda-close__row { flex-direction: column; gap: clamp(30px, 5vw, 44px); }
  .suda-contact { width: 100%; margin-top: 0; }
  .suda-hr--foot { margin-top: clamp(44px, 8vw, 90px); }
  .suda-close__lead { margin-top: clamp(52px, 9vw, 90px); }
}

/* ---------------------------------------------------------------------------
   09 · MOBILE — 620 px and below
   Same content, same order, same atmosphere; stacked and re-proportioned.
   --------------------------------------------------------------------------- */

@media (max-width: 900px) {
  /* the approved line breaks are set for a 1440 column; below that the closing
     sentence reads better breaking on its own */
  .suda-br { display: none; }
}

@media (max-width: 620px) {
  .suda-hero { padding-bottom: clamp(36px, 9vw, 52px); }
  .suda-hero__media img { object-position: 50% 62%; }

  .suda-hero__status { letter-spacing: 0.2em; }
  .suda-hero__body { padding-left: 0; }
  .suda-hero__title { margin-left: -0.055em; line-height: 1.02; }
  .suda-hero__support { margin-top: clamp(22px, 7vw, 34px); line-height: 1.45; }
  .suda-hero__actions { margin-top: clamp(24px, 7vw, 34px); padding-left: 0; gap: 14px; }
  .suda-btn { width: auto; flex: 1 1 0; max-width: 200px; }

  /* Two lines of very long uppercase would break awkwardly: allow the second
     format to wrap rather than shrink the whole list. */
  .suda-formats { line-height: 1.85; }

  .suda-press {
    grid-template-columns: repeat(3, 1fr);
    gap: clamp(24px, 7vw, 34px) clamp(14px, 4vw, 20px);
    justify-items: center;
  }
  .suda-press li { justify-content: center; }
  .suda-press img { width: calc(var(--w) * 1.35); max-width: 100%; }

  .suda-close__foot { flex-direction: column; align-items: flex-start; gap: 14px; }
  .suda-copyright { transform: none; }

  /* Justification needs a wide measure; on a phone column it opens ugly rivers */
  .suda-about__copy { text-align: left; }
}

@media (max-width: 380px) {
  .suda-hero__status { letter-spacing: 0.16em; font-size: 10px; }
  .suda-btn { letter-spacing: 0.12em; }
}

/* ---------------------------------------------------------------------------
   10 · MOTION & PRINT
   --------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}

@media print {
  .suda-hero { height: auto; min-height: 0; color: #000; background: #fff; }
  .suda-hero__media, .suda-hero__scrim { display: none; }
  .suda-close { background: #fff; color: #000; }
  .suda-press img { filter: invert(1); }
}