/* ==========================================================================
   Brian Anthony Kelly — Coming Soon
   Swiss-inspired editorial landing page.
   Two allowed weights only: Suisse Now Regular (400) / Bold (700).
   ========================================================================== */

/* ---------- Fonts ----------
   Filenames are intentionally explicit: SuisseNow-Regular.woff2 / SuisseNow-Bold.woff2
   To swap the typeface, replace the two files in /fonts with the same names,
   or update the two url() paths below. Nothing else needs to change. */
@font-face{
  font-family: 'Suisse Now';
  src: url('fonts/SuisseNow-Regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face{
  font-family: 'Suisse Now';
  src: url('fonts/SuisseNow-Bold.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* ---------- Reset ---------- */
*, *::before, *::after{ box-sizing: border-box; }
html, body{ height: 100%; margin: 0; }
body{
  background: #FFFFFF;
  color: #0A0A0A;
  font-family: 'Suisse Now', Helvetica, Arial, sans-serif;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img{ max-width: 100%; }
a{ color: inherit; }

/* ---------- Motion: gentle fade-in, respects reduced motion ---------- */
.stage{ opacity: 0; }
.stage.is-ready{
  opacity: 1;
  transition: opacity 0.9s ease;
}
@media (prefers-reduced-motion: reduce){
  .stage{ opacity: 1 !important; transition: none !important; }
}

/* ---------- Layout ----------
   A paper-toned canvas, full viewport. A small photograph sits centered
   in the empty upper space; a single bold information block anchors
   the bottom. No navigation, no buttons, no icons, no outer frame. */
body{ background: #F1EFEA; }

.stage{
  min-height: 100svh;
}

.sheet{
  background: #F1EFEA;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
}

.photo-stage{
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 6vh 6vw;
}

.portrait{
  display: block;
  width: 110px;
  aspect-ratio: 3 / 4;
  object-fit: cover;
}

.bottom-block{
  padding: 6vh 14vw 7vh;
  text-align: center;
}
.bottom-block h1{
  margin: 0 0 0.8em;
  font-weight: 700;
  font-size: 12px;
  line-height: 1.15;
  letter-spacing: 0.01em;
  text-transform: uppercase;
}
.bottom-block p{
  margin: 0;
  font-weight: 400;
  font-size: 12px;
  line-height: 1.3;
  letter-spacing: 0.01em;
  text-transform: uppercase;
}

.bottom-block a{
  font-weight: 400;
  text-decoration: none;
  border-bottom: 1px solid #0A0A0A;
  padding-bottom: 1px;
  transition: opacity 0.25s ease;
}
.bottom-block a:hover,
.bottom-block a:focus-visible{
  opacity: 0.55;
}
.bottom-block a:focus-visible{
  outline: 1px solid #0A0A0A;
  outline-offset: 4px;
}

/* ---------- Responsive ---------- */
@media (max-width: 640px){
  .stage{ padding: 4vw; }
  .sheet{ min-height: calc(100svh - 8vw); }
  .photo-stage{ padding: 5vh 8vw; }
  .portrait{ width: 92px; }
  .bottom-block{ padding: 5vh 8vw 6vh; }
}

@media (max-width: 380px){
  .bottom-block h1,
  .bottom-block p{ font-size: 11px; }
}